/* =============================================================================
   CONASEM — sistema visual
   Editorial, sobrio, institucional. Bandas alternadas clara/oscura, mucho
   espacio negativo, acento de marca reservado a CTA, indicadores y estados.
   ============================================================================= */

/* ================================ Tokens ================================== */
:root {
  --acento:   #F26522;          /* acento de marca, uso controlado */
  --acento-h: #D9541A;
  --cian:     #29ABE2;

  --carbon:  #0C0D10;           /* banda oscura */
  --carbon2: #14161A;
  --carbon3: #1D2027;
  --blanco:  #FFFFFF;
  --hueso:   #F6F7F8;           /* superficie clara secundaria */

  --tx-o:  #14161A;  --tx-o2: #4E555E;  --tx-o3: #858C95;   /* sobre claro */
  --tx-c:  #F4F5F6;  --tx-c2: #A7ADB5;  --tx-c3: #71777F;   /* sobre oscuro */
  --ln-c:  #E4E6E9;  --ln-o:  rgba(255,255,255,.12);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --disp: "Outfit", var(--sans);
  --ez:   cubic-bezier(.22,1,.36,1);
  --caja: 1280px;
  --pad:  clamp(1.25rem, 4.5vw, 3.5rem);
  --cab-h: 84px;
}

/* ================================= Base =================================== */
*,*::before,*::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab-h) + 16px); }
body { font-family: var(--sans); font-size: 16px; line-height: 1.62; color: var(--tx-o2);
  background: var(--blanco); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1,h2,h3 { font-family: var(--disp); font-weight: 400; color: var(--tx-o); line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
::selection { background: var(--acento); color: #fff; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: fixed; top: -100px; left: 1rem; z-index: 999; padding: .7rem 1.1rem; background: var(--carbon); color: #fff; }
.salto:focus { top: 1rem; }
.caja { width: 100%; max-width: var(--caja); margin-inline: auto; padding-inline: var(--pad); }

.progreso { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200; background: rgba(0,0,0,.07); pointer-events: none; }
.progreso span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--acento); transition: transform .1s linear; }

[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ez), transform .7s var(--ez); }
[data-reveal].is-rev { opacity: 1; transform: none; }
.palabra { display: inline-block; overflow: hidden; vertical-align: bottom; }
.palabra > span { display: inline-block; transform: translateY(105%); transition: transform .75s var(--ez); }
.is-rev .palabra > span { transform: none; }

/* =============================== Botones ================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-size: .9rem; font-weight: 500; padding: .92rem 1.7rem; border: 1px solid transparent;
  border-radius: 2px; transition: background-color .3s var(--ez), color .3s var(--ez), border-color .3s var(--ez); }
.btn-acento { background: var(--acento); color: #fff; }
.btn-acento:hover { background: var(--acento-h); }
.btn-solido { background: var(--carbon); color: #fff; }
.btn-solido:hover { background: var(--acento); }
.btn-linea { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-linea:hover { background: #fff; color: var(--carbon); border-color: #fff; }
.btn-full { width: 100%; }

.flecha { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 500;
  color: var(--acento); margin-top: 1.1rem; transition: gap .3s var(--ez); }
.flecha i { width: 15px; height: 8px; background: currentColor;
  clip-path: polygon(0 42%,62% 42%,62% 0,100% 50%,62% 100%,62% 58%,0 58%); }
.flecha:hover { gap: .85rem; }

/* ======================== LOGOTIPO — regla intocable ======================
   El contenedor se adapta al logo, nunca al revés.
   Sólo se limita el ALTO. El ancho es siempre automático, así la relación de
   aspecto del archivo se conserva por definición y la deformación es
   imposible, con independencia del breakpoint, del flex o del grid.
   ========================================================================= */
.marca, .footer-brand {
  display: inline-flex; align-items: center; justify-content: flex-start;
  background: #fff;                    /* la fila entera ya es blanca */
  flex: 0 0 auto;
}
.marca { padding: 10px 0; }            /* área de seguridad en cabecera */
.footer-brand { padding: 0; }          /* área de seguridad en pie */

.marca-img {
  display: block;
  width: auto !important;              /* nunca se fija el ancho */
  height: auto;
  max-height: 46px;                    /* única dimensión limitada */
  max-width: 100%;
  object-fit: contain;
}
.footer-brand .marca-img { max-height: 68px; }
@media (max-width: 767px) { .marca { padding: 7px 12px; } .marca-img { max-height: 34px; } }
@media (max-width: 389px) { .marca-img { max-height: 30px; } }

/* =============================== Cabecera ================================= */
/* Barra blanca completa: ocupa toda la fila superior, con el logo y los menús.
   Sticky, no fija-transparente: el logo siempre sobre blanco puro. */
.cab { position: sticky; top: 0; z-index: 100; min-height: var(--cab-h);
  display: flex; align-items: center; background: #fff;
  border-bottom: 1px solid var(--ln-c); transition: box-shadow .35s; }
.cab.is-fija { box-shadow: 0 4px 20px -12px rgba(12,13,16,.35); }
.cab-int { width: 100%; max-width: var(--caja); margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; gap: 1.5rem; }
.cab-nav { display: none; gap: 1.9rem; margin-left: auto; }
.cab-nav a { position: relative; font-size: .88rem; color: var(--tx-o2); padding-block: .35rem; transition: color .3s; }
.cab-nav a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--acento); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ez); }
.cab-nav a:hover { color: var(--acento); }
.cab-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.cab-acc { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.cab-nav + .cab-acc { margin-left: 0; }
.cab-acc .btn { display: none; padding: .68rem 1.2rem; font-size: .84rem; }
.cab-tog { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; background: #fff; border: 1px solid var(--ln-c); border-radius: 3px; }
.cab-tog span[aria-hidden] { display: block; width: 18px; height: 1.5px; background: var(--carbon); transition: transform .3s var(--ez); }
.cab-tog[aria-expanded="true"] span[aria-hidden]:first-of-type { transform: translateY(3.25px) rotate(45deg); }
.cab-tog[aria-expanded="true"] span[aria-hidden]:last-of-type { transform: translateY(-3.25px) rotate(-45deg); }
@media (min-width: 1024px) { .cab-nav { display: flex; } .cab-acc .btn { display: inline-flex; } .cab-tog { display: none; } }

.menu { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.menu[aria-hidden="false"] { pointer-events: auto; }
.menu-vel { position: absolute; inset: 0; background: rgba(12,13,16,.6); opacity: 0; transition: opacity .35s; }
.menu[aria-hidden="false"] .menu-vel { opacity: 1; }
.menu-caja { position: absolute; inset: 0 0 auto 0; background: #fff; padding: calc(var(--cab-h) + 1.5rem) var(--pad) 2rem;
  transform: translateY(-101%); transition: transform .45s var(--ez); }
.menu[aria-hidden="false"] .menu-caja { transform: translateY(0); }
.menu-caja nav { display: grid; gap: .3rem; margin-bottom: 1.4rem; }
.menu-caja nav a { font-family: var(--disp); font-size: 1.6rem; color: var(--tx-o); padding-block: .4rem; border-bottom: 1px solid var(--ln-c); }
.menu-cta { width: 100%; }

/* ================================= Hero =================================== */
.hero { position: relative; min-height: calc(100svh - var(--cab-h)); display: flex; flex-direction: column;
  justify-content: flex-end; background: var(--carbon); overflow: hidden; padding-bottom: clamp(4.5rem,8vw,6rem); }

/* ---- Carrusel de fondo: crossfade 1,6 s + Ken Burns 7 s en la capa activa -- */
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.02); transition: opacity 1.6s ease, transform 7s linear; will-change: opacity, transform; }
.hero-slide.is-act { opacity: 1; transform: scale(1.11); }
.hero-slide-marca { background-image: linear-gradient(135deg, #0C0D10 0%, #17181C 42%, #2A1A12 78%, #3A1F0E 100%); }
.hero-velo { position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(12,13,16,.94) 0%, rgba(12,13,16,.80) 42%, rgba(12,13,16,.42) 100%),
              linear-gradient(0deg, rgba(12,13,16,.92) 0%, transparent 46%); }

/* Orbe flotante */
.orbe { position: absolute; right: -8%; top: 12%; width: min(46vw,520px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, rgba(242,101,34,.24), transparent 62%);
  filter: blur(52px); animation: orbeFlota 16s ease-in-out infinite; pointer-events: none; }
@keyframes orbeFlota { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-4%,5%,0) scale(1.12); } }

/* Controles del carrusel */
.hero-ctrl { position: absolute; inset: auto 0 3.1rem 0; z-index: 3; display: flex; align-items: center; gap: 1.2rem;
  max-width: var(--caja); margin-inline: auto; padding-inline: var(--pad); }
.hero-dots { display: flex; gap: .5rem; }
.dot { width: 26px; height: 3px; background: rgba(255,255,255,.28); border-radius: 2px; transition: background-color .35s, width .35s var(--ez); }
.dot:hover { background: rgba(255,255,255,.55); }
.dot.is-act { width: 44px; background: var(--acento); }
.hero-barra { flex: 1; max-width: 190px; height: 1px; background: rgba(255,255,255,.16); overflow: hidden; }
.hero-barra span { display: block; height: 100%; width: 100%; background: var(--acento); transform: scaleX(0); transform-origin: 0 50%; }
.hero-barra span.corre { animation: hbarra 5s linear forwards; }  /* = DUR del autoplay */
@keyframes hbarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Entrada con desenfoque (hfu) ---- */
.hfu { opacity: 0; transform: translateY(20px); filter: blur(7px);
  animation: hfuBlur .9s cubic-bezier(.4,0,.2,1) forwards; animation-delay: var(--d,0s); }
@keyframes hfuBlur { to { opacity: 1; transform: none; filter: blur(0); } }

/* ---- Barrido sobre texto en degradado ---- */
.brillo { background: linear-gradient(100deg, #fff 18%, var(--acento) 34%, #FFCBA6 46%, #fff 62%);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; animation: brilloBarr 5.5s linear infinite; }
@keyframes brilloBarr { to { background-position: -240% 0; } }

/* ---- Máquina de escribir ---- */
.tw { color: var(--acento); font-weight: 500; }
.tw::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: var(--acento); vertical-align: -.14em; animation: twParpadeo 1.05s steps(1) infinite; }
@keyframes twParpadeo { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* ---- Punto que late y pulso del CTA ---- */
.pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--acento); display: inline-block;
  margin-right: .6rem; box-shadow: 0 0 0 0 rgba(242,101,34,.7); animation: latido 2.6s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(242,101,34,.65); } 70% { box-shadow: 0 0 0 11px rgba(242,101,34,0); } 100% { box-shadow: 0 0 0 0 rgba(242,101,34,0); } }
.pulso-btn { animation: btnLatido 3.4s ease-in-out infinite; }
@keyframes btnLatido { 0%,100% { box-shadow: 0 0 0 0 rgba(242,101,34,0); } 50% { box-shadow: 0 0 0 8px rgba(242,101,34,.14); } }

/* ---- Cifras del hero ---- */
.hero-cifras { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin-top: clamp(2rem,4vw,3rem);
  padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14); }
.hero-cifras li { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.cif, .cif-mas { font-family: var(--disp); font-size: clamp(1.7rem,3vw,2.4rem); color: #fff; letter-spacing: -.04em; line-height: 1; }
.cif-mas { color: var(--acento); }
.hero-cifras em { flex-basis: 100%; font-style: normal; font-size: .78rem; color: var(--tx-c3); letter-spacing: .04em; }
.hero-int { position: relative; z-index: 2; width: 100%; max-width: var(--caja); margin-inline: auto; padding-inline: var(--pad); }
.micro { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-c3); margin-bottom: 1.6rem; }
.hero-t { font-size: clamp(2.1rem, 6.6vw, 4.6rem); line-height: 1.05; letter-spacing: -.035em; color: #fff; max-width: 18ch; }
.hero-s { margin-top: 1.5rem; font-size: clamp(1rem,1.35vw,1.14rem); color: var(--tx-c2); max-width: 56ch; }
.hero-cta { margin-top: clamp(2rem,3.5vw,2.6rem); display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-pie { position: absolute; inset: auto 0 1.1rem 0; z-index: 2; display: flex; justify-content: space-between;
  max-width: var(--caja); margin-inline: auto; padding-inline: var(--pad); font-size: .72rem; color: var(--tx-c3); letter-spacing: .05em; }
@media (max-width: 767px) { .hero-pie { display: none; } }

/* =============================== Secciones ================================ */
.sec { padding-block: clamp(4rem, 9vw, 8rem); }
.sec-clara { background: var(--blanco); }
.sec-clara + .sec-clara { padding-top: 0; }
.sec-oscura { background: var(--carbon); color: var(--tx-c2); }
.sec-oscura h2, .sec-oscura h3 { color: #fff; }

.etiq { display: inline-flex; align-items: center; gap: .7rem; font-size: .72rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--tx-o3); margin-bottom: 1.4rem; }
.etiq i { width: 22px; height: 1px; background: var(--acento); }
.etiq-clara { color: var(--tx-c3); }
.tit-gr { font-size: clamp(1.6rem, 3.8vw, 2.9rem); max-width: 24ch; margin-bottom: 1.2rem; }
.tit-gr.claro { color: #fff; }
.bajada { font-size: 1rem; max-width: 60ch; margin-bottom: 2.6rem; }
.bajada.claro { color: var(--tx-c2); }

/* ========================== Cadena de valor =============================== */
/* ---- Cuatro fases: tarjetas con profundidad, foco de luz y viraje de color -- */
.fases { display: grid; gap: 1.1rem; margin-block: 2.5rem 2rem; perspective: 1200px; }
.fase {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  background: #fff; border: 1px solid var(--ln-c); border-radius: 3px;
  padding: clamp(1.5rem,2.6vw,2.1rem);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1),
              border-color .45s ease, background-color .45s ease;
}
/* foco que sigue al cursor */
.fase-halo { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(242,101,34,.14), transparent 60%); }
/* viraje de fondo */
.fase::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity .45s ease;
  background: linear-gradient(155deg, #FFF8F4 0%, #FFFFFF 55%, #FFF3EB 100%); }
.fase:hover, .fase:focus-within {
  transform: translateY(-8px);
  border-color: rgba(242,101,34,.42);
  box-shadow: 0 2px 4px rgba(20,22,26,.04), 0 18px 34px -18px rgba(20,22,26,.22), 0 42px 70px -40px rgba(242,101,34,.4);
}
.fase:hover .fase-halo, .fase:focus-within .fase-halo { opacity: 1; }
.fase:hover::before, .fase:focus-within::before { opacity: 1; }

.fase-n { font-family: var(--disp); font-size: 2.1rem; line-height: 1; color: var(--ln-c);
  letter-spacing: -.05em; margin-bottom: 1rem; transition: color .45s ease, transform .45s cubic-bezier(.4,0,.2,1); }
.fase:hover .fase-n { color: var(--acento); transform: translateY(-3px); }
.fase-t { font-size: 1.45rem; margin-bottom: .55rem; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.fase:hover .fase-t { transform: translateZ(22px); }
.fase-r { font-family: var(--disp); font-size: 1.02rem; color: var(--tx-o); line-height: 1.45; margin-bottom: .8rem; }
.fase-d { font-size: .9rem; color: var(--tx-o2); }
.fase-linea { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--acento), #FFB27A);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.fase:hover .fase-linea, .fase:focus-within .fase-linea { transform: scaleX(1); }

.cadena-nota { font-size: .95rem; max-width: 62ch; color: var(--tx-o2); }
@media (min-width: 640px) { .fases { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px) { .fases { grid-template-columns: repeat(4,1fr); gap: 1rem; } .fase-t { font-size: 1.3rem; } }

/* ---- Muro de aliados ---- */
.aliados { display: grid; gap: 1px; background: var(--ln-o); border: 1px solid var(--ln-o);
  grid-template-columns: repeat(2,1fr); }
@media (min-width: 900px) { .aliados { grid-template-columns: repeat(4,1fr); } }
.aliado { background: var(--carbon); display: grid; place-items: center; min-height: 108px; padding: 1.5rem 1rem;
  transition: background-color .4s ease; }
.aliado:hover { background: #fff; }
.aliado img { max-height: 46px; width: auto; max-width: 100%; object-fit: contain; grid-area: 1/1;
  filter: grayscale(1) brightness(2.4) contrast(.85); opacity: .72; transition: filter .4s ease, opacity .4s ease; }
.aliado:hover img { filter: none; opacity: 1; }
.aliado-txt { grid-area: 1/1; font-family: var(--disp); font-size: .92rem; color: var(--tx-c2);
  text-align: center; transition: color .4s ease; }
.aliado:hover .aliado-txt { color: var(--tx-o); }
/* Con logo cargado, el texto se oculta; sin logo, el texto es el respaldo */
.aliado.con-logo .aliado-txt { display: none; }
.aliado:not(.con-logo) img { display: none; }

/* ============================== Capacidades =============================== */
.caps { display: grid; gap: 1px; background: var(--ln-o); border-block: 1px solid var(--ln-o); }
.cap { background: var(--carbon); }
.cap-cab { width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "n cat mas" "n tit mas" "n val mas"; column-gap: 1.2rem; padding: clamp(1.6rem,3vw,2.4rem) 0;
  transition: background-color .35s; }
.cap:hover .cap-cab, .cap.is-ab .cap-cab { background: var(--carbon2); }
.cap-n   { grid-area: n; font-size: .74rem; font-weight: 600; letter-spacing: .1em; color: var(--acento); padding-top: .35rem; }
.cap-cat { grid-area: cat; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-c3); }
.cap-t   { grid-area: tit; font-size: clamp(1.25rem,2.6vw,1.85rem); margin-block: .3rem .45rem; }
.cap-v   { grid-area: val; font-size: .95rem; color: var(--tx-c2); max-width: 58ch; }
.cap-mas { grid-area: mas; position: relative; width: 34px; height: 34px; align-self: center; border: 1px solid var(--ln-o); border-radius: 50%; transition: border-color .35s, background-color .35s; }
.cap-mas::before, .cap-mas::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 12px; height: 1.5px; background: #fff; transform: translate(-50%,-50%); transition: transform .4s var(--ez); }
.cap-mas::after { transform: translate(-50%,-50%) rotate(90deg); }
.cap.is-ab .cap-mas { background: var(--acento); border-color: var(--acento); }
.cap.is-ab .cap-mas::after { transform: translate(-50%,-50%) rotate(0); }
.cap-detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ez); }
.cap.is-ab .cap-detalle { grid-template-rows: 1fr; }
.cap-in { overflow: hidden; }
.cap.is-ab .cap-in { padding-bottom: 2rem; }
.cap-in > p { font-size: .95rem; max-width: 68ch; color: var(--tx-c2); }
.cap-sub { display: grid; gap: .45rem; margin-top: 1.2rem; }
.cap-sub li { position: relative; padding-left: 1.1rem; font-size: .89rem; color: var(--tx-c2); }
.cap-sub li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--acento); }
@media (min-width: 900px) { .cap-in { padding-left: 3.6rem; } }

/* ================================== IA ==================================== */
.ia-lay { display: grid; gap: 2.5rem; }
.ia-fig img { width: 100%; height: auto; }
.ia-nodo { display: inline-flex; font-family: var(--disp); font-size: 1.05rem; color: #fff; background: var(--carbon); padding: .55rem 1.2rem; margin-bottom: 1.2rem; }
.ia-ramas { display: grid; gap: .55rem; border-left: 1px solid var(--ln-c); padding-left: 1.3rem; margin-bottom: 1.6rem; }
.ia-ramas li { position: relative; font-size: .93rem; color: var(--tx-o2); }
.ia-ramas li span { font-size: .7rem; font-weight: 600; color: var(--acento); margin-right: .5rem; letter-spacing: .08em; }
.ia-ramas li::before { content: ""; position: absolute; left: -1.3rem; top: .7em; width: .8rem; height: 1px; background: var(--ln-c); }
.ia-humano { font-size: .93rem; padding: 1.1rem 1.3rem; background: var(--hueso); border-left: 2px solid var(--acento); }
.ia-humano strong { color: var(--tx-o); font-weight: 600; }
@media (min-width: 900px) { .ia-lay { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 3.5rem; } }

/* ============================== Sectores ================================== */
.secs { display: grid; gap: 1px; background: var(--ln-o); border: 1px solid var(--ln-o); }
.sect { background: var(--carbon); padding: clamp(1.6rem,3vw,2.3rem); transition: background-color .35s; }
.sect:hover { background: var(--carbon2); }
.sect-n { font-size: .72rem; font-weight: 600; letter-spacing: .1em; color: var(--acento); margin-bottom: 1rem; }
.sect h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.sect ul { display: grid; gap: .45rem; }
.sect li { font-size: .9rem; color: var(--tx-c2); position: relative; padding-left: 1rem; }
.sect li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--tx-c3); }
@media (min-width: 768px) { .secs { grid-template-columns: repeat(3,1fr); } }

/* ============================== Experiencia =============================== */
.exps { display: grid; gap: 1.6rem; margin-bottom: 3rem; }
.exp { background: var(--carbon2); border: 1px solid var(--ln-o); }
.exp figure { overflow: hidden; aspect-ratio: 16/10; }
.exp figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ez); }
.exp:hover figure img { transform: scale(1.04); }
.exp-txt { padding: clamp(1.3rem,2.5vw,1.9rem); }
.exp-et { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin-bottom: .55rem; }
.exp-txt h3 { font-size: 1.18rem; margin-bottom: .55rem; }
.exp-txt p { font-size: .92rem; color: var(--tx-c2); }
@media (min-width: 768px) { .exps { grid-template-columns: repeat(2,1fr); } }

.exp-rel { border-top: 1px solid var(--ln-o); padding-top: 1.8rem; }
.exp-rel-t { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-c3); margin-bottom: 1rem; }
.exp-rel ul { display: grid; gap: .7rem 2rem; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.exp-rel li { font-family: var(--disp); font-size: 1.02rem; color: #fff; }
.exp-rel-n { margin-top: 1.4rem; font-size: .8rem; color: var(--tx-c3); font-style: italic; }

/* ================================ Talento ================================= */
.tal-lay { display: grid; gap: 2.5rem; }
.tal-fig img { width: 100%; height: auto; }
.tal-lede { font-family: var(--disp); font-size: clamp(1.08rem,1.8vw,1.32rem); line-height: 1.5; color: var(--tx-o); margin-bottom: 1.8rem; }
.tal-areas { display: grid; gap: .5rem; margin-bottom: 2rem; }
.tal-areas li { font-size: .93rem; padding-left: 1.1rem; position: relative; }
.tal-areas li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--acento); }
.tal-dir { display: flex; gap: 1.2rem; align-items: flex-start; padding-top: 1.6rem; border-top: 1px solid var(--ln-c); }
.tal-dir img { width: 88px; height: 110px; object-fit: cover; flex: 0 0 auto; }
.tal-nom { font-family: var(--disp); font-size: 1.08rem; color: var(--tx-o); }
.tal-car { font-size: .85rem; color: var(--acento); margin-bottom: .5rem; }
.tal-fo { font-size: .88rem; }
@media (min-width: 900px) { .tal-lay { grid-template-columns: .85fr 1.15fr; gap: 3.5rem; align-items: start; } }

/* ==================== Misión / Visión / Valores / Calidad ================= */
.mv { display: grid; gap: 1px; background: var(--ln-o); border: 1px solid var(--ln-o); margin-bottom: 2.5rem; }
.mv-b { background: var(--carbon); padding: clamp(1.6rem,3vw,2.4rem); }
.mv-vis { background: var(--carbon2); }
.mv-et { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--acento); margin-bottom: 1.1rem; }
.mv-tx { font-size: .96rem; color: var(--tx-c2); max-width: 62ch; }
.mv-tx + .mv-tx { margin-top: .8rem; }
.mv-tx b { color: #fff; font-weight: 500; }
@media (min-width: 900px) { .mv { grid-template-columns: 1fr 1fr; } }

.vals { display: grid; gap: 1px; background: var(--ln-o); border: 1px solid var(--ln-o); margin-bottom: 2.5rem; }
.val { background: var(--carbon); padding: clamp(1.6rem,3vw,2.2rem); }
.val-fig { display: block; width: 42px; height: 42px; margin-bottom: 1.2rem; border: 1px solid var(--acento); }
.val-1 { border-radius: 50%; }
.val-2 { transform: rotate(45deg); margin-left: 6px; }
.val-3 { border-radius: 50% 3px 50% 3px; }
.val h3 { font-size: 1.22rem; margin-bottom: .55rem; }
.val p { font-size: .92rem; color: var(--tx-c2); }
@media (min-width: 768px) { .vals { grid-template-columns: repeat(3,1fr); } }

.cal { border: 1px solid var(--ln-o); padding: clamp(1.6rem,3vw,2.4rem); }
.cal-tx { font-size: .95rem; color: var(--tx-c2); max-width: 88ch; }
.comp { display: grid; gap: .8rem; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--ln-o); }
.comp li { display: flex; align-items: center; gap: .7rem; font-family: var(--disp); font-size: 1rem; color: #fff; }
.comp span { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .08em; color: var(--acento); }
@media (min-width: 768px) { .comp { grid-template-columns: repeat(5,1fr); } }

/* =============================== Contacto ================================= */
.cont-lay { display: grid; gap: clamp(2.5rem,5vw,4.5rem); align-items: start; }
@media (min-width: 900px) { .cont-lay { grid-template-columns: 1fr 1fr; } }
.datos { display: grid; gap: 1rem; }
.datos li { display: grid; gap: .1rem; padding-top: .85rem; border-top: 1px solid var(--ln-c); }
.d-et { font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--tx-o3); }
.d-va { font-family: var(--disp); font-size: 1.04rem; color: var(--tx-o); }
a.d-va:hover { color: var(--acento); }

.form-caja { position: relative; background: var(--hueso); border: 1px solid var(--ln-c); padding: clamp(1.4rem,3vw,2.2rem); }
.form { display: grid; gap: .9rem; transition: opacity .4s; }
.form.is-env { opacity: 0; pointer-events: none; }
.cmp { position: relative; }
.cmp input, .cmp textarea, .cmp select { width: 100%; font-family: var(--sans); font-size: .94rem; color: var(--tx-o);
  background: #fff; border: 1px solid var(--ln-c); border-radius: 2px; padding: 1.35rem .9rem .5rem; transition: border-color .25s, box-shadow .25s; }
.cmp textarea { resize: vertical; min-height: 108px; }
.cmp-sel select { padding: .9rem; color: var(--tx-o2); }
.cmp-lab { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--tx-o3); margin-bottom: .35rem; }
.cmp input:focus, .cmp textarea:focus, .cmp select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(242,101,34,.14); }
.cmp > label:not(.cmp-lab) { position: absolute; left: .92rem; top: .85rem; font-size: .92rem; color: var(--tx-o3);
  pointer-events: none; transform-origin: left top; transition: transform .22s var(--ez), color .22s; }
.cmp input:focus + label, .cmp input:not(:placeholder-shown) + label,
.cmp textarea:focus + label, .cmp textarea:not(:placeholder-shown) + label {
  transform: translateY(-.58rem) scale(.72); color: var(--acento); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.b-spin { display: none; width: 15px; height: 15px; }
.form.is-envi .b-lab { opacity: .5; }
.form.is-envi .b-spin { display: block; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.form-nota { font-size: .77rem; color: var(--tx-o3); }
.form-ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center;
  gap: .4rem; padding: 2rem; background: var(--hueso); opacity: 0; pointer-events: none; transition: opacity .45s .1s; }
.form-ok.is-ver { opacity: 1; pointer-events: auto; }
.form-ok-i { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: var(--acento); border-radius: 50%; }
.form-ok h3 { font-size: 1.25rem; }
.form-ok p { font-size: .92rem; max-width: 32ch; }

/* ================================ Cierre ================================== */
.cierre { background: var(--carbon2); padding-block: clamp(3rem,6vw,4.5rem); text-align: center; }
.cierre-t { font-family: var(--disp); font-size: clamp(1.4rem,3.4vw,2.4rem); color: #fff; letter-spacing: -.03em; margin-bottom: 1.8rem; max-width: 24ch; margin-inline: auto; }

/* ================================= Pie ==================================== */
/* Fila inferior blanca completa: logo, menús y submenús sobre blanco.
   Sólo la línea legal queda sobre carbón, para cerrar la página. */
.pie { background: #fff; color: var(--tx-o2); padding-top: clamp(3rem,5vw,4rem); border-top: 1px solid var(--ln-c); }
.pie-int { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; }
.pie-lema { margin-top: 1.1rem; font-family: var(--disp); font-size: 1rem; color: var(--tx-o); max-width: 26ch; }
.pie-cols { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
.pie-cols > div { display: grid; gap: .45rem; align-content: start; }
.pie-t { font-size: .67rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-o3); margin-bottom: .25rem; }
.pie-cols a, .pie-d { font-size: .86rem; color: var(--tx-o2); transition: color .3s; }
.pie-cols a:hover { color: var(--acento); }
.pie-legal { background: var(--carbon); color: var(--tx-c3); font-size: .76rem;
  padding-block: 1.4rem; margin-top: 0; max-width: none; }
.pie-legal p { max-width: var(--caja); margin-inline: auto; padding-inline: var(--pad); }

/* ============================== WhatsApp ================================== */
.wa { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: #25D366; color: #fff; flex: 0 0 auto; transition: transform .3s var(--ez), background-color .3s; }
.wa:hover { background: #1FAF52; transform: translateY(-2px); }
.wa-cab { display: none; }
@media (min-width: 640px) { .wa-cab { display: inline-flex; } }

.wa-flota { position: fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index: 150;
  display: inline-flex; align-items: center; gap: .6rem; height: 56px; padding: 0 18px;
  border-radius: 999px; background: #25D366; color: #fff; font-size: .9rem; font-weight: 500;
  box-shadow: 0 10px 30px -8px rgba(37,211,102,.55);
  transition: background-color .3s, transform .3s var(--ez), box-shadow .3s; }
.wa-flota:hover { background: #1FAF52; transform: translateY(-3px); box-shadow: 0 16px 40px -10px rgba(37,211,102,.7); }
.wa-flota-txt { display: none; }
@media (min-width: 640px) { .wa-flota-txt { display: inline; } }
@media (max-width: 639px) { .wa-flota { width: 56px; padding: 0; justify-content: center; } }

/* ============================ Figura ancha ================================ */
.fig-ancha { margin-top: clamp(2.5rem,5vw,3.5rem); }
.fig-ancha img { width: 100%; height: auto; border-radius: 2px; }
.fig-ancha figcaption { margin-top: .9rem; font-size: .82rem; color: var(--tx-o3); font-style: italic; }
@media (min-width: 900px) { .pie-int { grid-template-columns: minmax(230px,1fr) 2.4fr; gap: 3rem; } }

/* ========================== Movimiento reducido =========================== */
/* Tarjetas y acordeón con la cadencia medida en tesisrapida.com */
.sect, .exp, .mv-b, .val { transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1); }
.sect:hover, .val:hover { transform: translateY(-4px); }
.exp:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(0,0,0,.8); }
.cap-detalle { transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1); }
.cap-in > * { opacity: 0; transition: opacity .38s ease .1s; }
.cap.is-ab .cap-in > * { opacity: 1; }
[data-reveal] { transition: opacity .82s cubic-bezier(.4,0,.2,1), transform .82s cubic-bezier(.4,0,.2,1), filter .82s cubic-bezier(.4,0,.2,1); filter: blur(5px); }
[data-reveal].is-rev { filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-slide, .hero-slide.is-act { transform: none; transition: opacity .5s ease; }
  .orbe, .pulso, .pulso-btn, .brillo, .tw::after { animation: none; }
  .brillo { color: #fff; -webkit-text-fill-color: #fff; }
  .hero-barra span.corre { animation: none; transform: scaleX(1); }
  .hfu { animation: none; opacity: 1; transform: none; filter: none; }
  [data-reveal] { filter: none; }
  .exp:hover figure img, .sect:hover, .val:hover, .exp:hover { transform: none; }
}

@media print {
  .cab, .menu, .hero-red, .progreso, .cierre { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .palabra > span { transform: none !important; }
  .sec-oscura, .pie { background: #fff !important; color: #000 !important; }
  .sec-oscura h2, .sec-oscura h3, .tit-gr.claro { color: #000 !important; }
  .cap-detalle { grid-template-rows: 1fr !important; }
}


/* =============================================================================
   TRES LÍNEAS DE CONSULTORÍA — tarjetas editoriales
   Imagen con zoom lento, viraje de velo, número que sube, título que se
   subraya y detalle desplegable. Nada de cajas planas.
   ============================================================================= */
.lineas { display: grid; gap: 1px; background: var(--ln-o); border: 1px solid var(--ln-o); }
.linea { background: var(--carbon); display: flex; flex-direction: column;
  transition: background-color .5s cubic-bezier(.4,0,.2,1); }
.linea:hover { background: var(--carbon2); }

.linea-img { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.linea-img img { width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); filter: grayscale(.55) brightness(.72);
  transition: transform 1.4s cubic-bezier(.4,0,.2,1), filter .7s ease; }
.linea:hover .linea-img img { transform: scale(1.09); filter: grayscale(0) brightness(.86); }
.linea-vel { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,13,16,.15) 0%, rgba(12,13,16,.55) 62%, rgba(12,13,16,.94) 100%);
  transition: opacity .6s ease; }
.linea:hover .linea-vel { opacity: .82; }

.linea-cuerpo { padding: clamp(1.5rem,2.6vw,2.2rem); display: flex; flex-direction: column; flex: 1; }
.linea-n { font-family: var(--disp); font-size: 2.2rem; line-height: 1; letter-spacing: -.05em;
  color: rgba(255,255,255,.22); margin-bottom: .9rem;
  transition: color .5s ease, transform .5s cubic-bezier(.4,0,.2,1); }
.linea:hover .linea-n { color: var(--acento); transform: translateY(-4px); }
.linea-t { font-size: clamp(1.18rem,1.9vw,1.42rem); line-height: 1.18; margin-bottom: .7rem;
  position: relative; padding-bottom: .75rem; }
.linea-t::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 46px;
  background: var(--acento); transition: width .55s cubic-bezier(.4,0,.2,1); }
.linea:hover .linea-t::after { width: 100%; }
.linea-s { font-size: .93rem; color: var(--tx-c2); margin-bottom: 1.3rem; }

.linea-mas { display: inline-flex; align-items: center; gap: .6rem; align-self: flex-start;
  margin-top: auto; font-size: .84rem; font-weight: 500; color: #fff;
  padding: .55rem 0; transition: color .35s ease, gap .35s ease; }
.linea-mas:hover { color: var(--acento); gap: .85rem; }
.linea-mas-i { position: relative; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%; flex: 0 0 auto; transition: border-color .35s, background-color .35s, transform .45s cubic-bezier(.4,0,.2,1); }
.linea-mas-i::before, .linea-mas-i::after { content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 9px; height: 1.4px; background: currentColor; transform: translate(-50%,-50%);
  transition: transform .4s cubic-bezier(.4,0,.2,1); }
.linea-mas-i::after { transform: translate(-50%,-50%) rotate(90deg); }
.linea.is-ab .linea-mas-i { background: var(--acento); border-color: var(--acento); color: #fff; transform: rotate(180deg); }
.linea.is-ab .linea-mas-i::after { transform: translate(-50%,-50%) rotate(0); }

.linea-det { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.4,0,.2,1); }
.linea.is-ab .linea-det { grid-template-rows: 1fr; }
.linea-det-in { overflow: hidden; }
.linea.is-ab .linea-det-in { padding-top: 1.2rem; }

.subs { display: grid; gap: 0; }
.subs dt { font-family: var(--disp); font-size: .96rem; color: #fff; margin-top: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--ln-o); }
.subs dt:first-of-type { margin-top: 0; }
.subs dd { margin: .35rem 0 0; font-size: .87rem; color: var(--tx-c2); }

@media (min-width: 760px)  { .lineas { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px) { .lineas { grid-template-columns: repeat(3,1fr); } }

/* Propuesta de valor: segundo párrafo con más peso editorial */
.bajada-fuerte { font-family: var(--disp); font-size: clamp(1.02rem,1.6vw,1.18rem);
  color: var(--tx-o); line-height: 1.55; border-left: 2px solid var(--acento);
  padding-left: 1.2rem; max-width: 66ch; }

@media (prefers-reduced-motion: reduce) {
  .linea-img img, .linea:hover .linea-img img { transform: none; transition: filter .4s ease; }
}


/* =============================================================================
   ÁMBITO DE ACTUACIÓN · CIERRE · REDES
   ============================================================================= */
.hero-s2 { margin-top: 1rem; font-size: .95rem; color: var(--tx-c3); max-width: 62ch; }
.sub-et { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento); margin: clamp(2.5rem,5vw,3.5rem) 0 1.4rem; }

.ambitos { display: grid; gap: 1px; background: var(--ln-c); border: 1px solid var(--ln-c); margin-top: 2.4rem; }
.ambito { background: #fff; padding: clamp(1.6rem,3vw,2.4rem);
  transition: background-color .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); }
.ambito:hover { background: var(--hueso); transform: translateY(-4px); }
.ambito-n { font-family: var(--disp); font-size: 2rem; line-height: 1; letter-spacing: -.05em;
  color: var(--ln-c); margin-bottom: 1rem; transition: color .45s ease; }
.ambito:hover .ambito-n { color: var(--acento); }
.ambito h3 { font-size: 1.3rem; margin-bottom: .6rem; position: relative; padding-bottom: .7rem; }
.ambito h3::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40px;
  background: var(--acento); transition: width .5s cubic-bezier(.4,0,.2,1); }
.ambito:hover h3::after { width: 100%; }
.ambito p { font-size: .93rem; }
@media (min-width: 860px) { .ambitos { grid-template-columns: repeat(3,1fr); } }

/* -------------------------------- Cierre: centrado, alto contraste --------- */
.cierre { position: relative; overflow: hidden; background: var(--carbon);
  padding-block: clamp(5rem,12vw,10rem); text-align: center; isolation: isolate; }
.cierre-luz { position: absolute; inset: -40% 0 auto 0; height: 130%; z-index: -1; pointer-events: none;
  background: radial-gradient(52% 46% at 50% 34%, rgba(242,101,34,.17), transparent 68%); filter: blur(60px); }
.cierre-int { max-width: 62rem; }
.cierre-et { font-size: .7rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--acento); margin-bottom: clamp(1.6rem,3vw,2.4rem); }
.cierre-t { font-family: var(--disp); font-weight: 400; color: #fff;
  font-size: clamp(1.7rem,4.6vw,3.4rem); line-height: 1.14; letter-spacing: -.032em;
  max-width: 18ch; margin-inline: auto; }
.cierre-cta { margin-top: clamp(2.2rem,4vw,3rem); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 1rem 2rem; }
.cierre-mail { font-family: var(--disp); font-size: 1rem; color: var(--tx-c2);
  border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.cierre-mail:hover { color: #fff; border-color: var(--acento); }
.cierre-sec { margin-top: clamp(3rem,6vw,4.5rem); padding-top: clamp(1.6rem,3vw,2.2rem);
  border-top: 1px solid var(--ln-o); display: grid; gap: 1.1rem; max-width: 46rem; margin-inline: auto; }
.cierre-sec li { display: flex; align-items: baseline; justify-content: center; gap: .6rem;
  font-size: .88rem; color: var(--tx-c2); }
.cierre-sec span { font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: var(--acento); }
@media (min-width: 700px) { .cierre-sec { grid-template-columns: repeat(3,1fr); gap: 0; }
  .cierre-sec li { border-left: 1px solid var(--ln-o); }
  .cierre-sec li:first-child { border-left: 0; } }

/* ------------------------------------------------- Redes sociales en el pie */
.redes { display: flex; gap: .55rem; flex-wrap: wrap; }
.red { width: 38px; height: 38px; display: grid; place-items: center; color: var(--tx-o2);
  border: 1px solid var(--ln-c); border-radius: 50%;
  transition: color .3s, border-color .3s, background-color .3s, transform .35s cubic-bezier(.4,0,.2,1); }
.red:hover { color: #fff; background: var(--acento); border-color: var(--acento); transform: translateY(-3px); }


/* =============================================================================
   FICHA DE CONTACTO — retrato del director junto a sus datos
   ============================================================================= */
.ficha { display: grid; gap: 1.5rem; margin-top: 1.8rem;
  padding-top: 1.8rem; border-top: 1px solid var(--ln-c); }
.ficha-foto { overflow: hidden; border-radius: 2px; background: var(--hueso); }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5;
  filter: grayscale(.35); transition: filter .6s ease, transform 1.2s cubic-bezier(.4,0,.2,1); }
.ficha:hover .ficha-foto img { filter: grayscale(0); transform: scale(1.03); }

.ficha-nom { font-family: var(--disp); font-size: clamp(1.2rem,2.1vw,1.5rem);
  color: var(--tx-o); line-height: 1.2; letter-spacing: -.02em; }
.ficha-nom [data-director-titulo] { color: var(--acento); }
.ficha-cargo { font-size: .88rem; color: var(--tx-o3); margin-top: .3rem;
  padding-bottom: 1.1rem; border-bottom: 2px solid var(--acento); display: inline-block; }
.ficha-lista { display: grid; gap: .85rem; margin-top: 1.4rem; }
.ficha-lista li { display: flex; align-items: center; gap: .75rem; font-size: .94rem; }
.ficha-ico { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--ln-c); border-radius: 50%; color: var(--tx-o3);
  transition: color .3s, border-color .3s, background-color .3s; }
.ficha-lista li:hover .ficha-ico { color: #fff; background: var(--acento); border-color: var(--acento); }
.ficha-lista a { color: var(--tx-o); transition: color .3s; }
.ficha-lista a:hover { color: var(--acento); }
@media (min-width: 560px) { .ficha { grid-template-columns: 168px 1fr; gap: 1.8rem; align-items: start; } }


/* =============================================================================
   PROPUESTA DE VALOR — fondo tratado, marca de agua y parallax
   ============================================================================= */
.sec-valor { position: relative; overflow: hidden; isolation: isolate;
  background: var(--carbon); color: var(--tx-c2);
  padding-block: clamp(5rem,11vw,9rem); }
.valor-fondo { position: absolute; inset: -14% 0 -14% 0; width: 100%; height: 128%;
  object-fit: cover; z-index: -3; opacity: .5; filter: grayscale(.4);
  will-change: transform; }
.valor-vel { position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(105deg, rgba(12,13,16,.95) 0%, rgba(12,13,16,.82) 48%, rgba(12,13,16,.62) 100%); }
.valor-agua { position: absolute; right: -6%; bottom: -12%; width: min(58vw, 620px);
  height: auto; z-index: -1; opacity: .07; pointer-events: none;
  filter: grayscale(1) brightness(3); }
.sec-valor .tit-gr { max-width: 22ch; }
.bajada-fuerte-claro { color: var(--tx-c); border-left-color: var(--acento); }
.sec-valor .bajada { color: var(--tx-c2); }
@media (max-width: 700px) { .valor-agua { width: 90vw; right: -22%; bottom: -8%; opacity: .05; } }

/* --------------------------- Rótulo lateral pegajoso en secciones largas --- */
.sec-lat { position: absolute; left: .7rem; top: 0; height: 100%; display: none;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: .66rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--tx-o3); opacity: .5; pointer-events: none; }
.sec-oscura .sec-lat { color: var(--tx-c3); }
.sec-lat::before { content: ""; position: absolute; inset: auto auto 0 50%; }
@media (min-width: 1500px) { .sec-lat { display: block; } .sec { position: relative; } }

/* ------------------------------------- Enlaces de texto con subrayado vivo - */
.cierre-mail, .ficha-lista a, .pie-cols a { position: relative; }
.pie-cols a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.4,0,.2,1); }
.pie-cols a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  .valor-fondo { transform: none !important; }
}


/* =============================================================================
   CAPA DE MOTION — aditiva. Nada de lo anterior se modifica.
   ============================================================================= */

/* --- Tarjetas de portafolio: tilt 3D, foco y parallax interno de imagen ----- */
.lineas { perspective: 1400px; }
.linea { --mx: 50%; --my: 50%; transform-style: preserve-3d; will-change: transform; }
.linea::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity .5s cubic-bezier(.22,1,.36,1);
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(242,101,34,.13), transparent 62%); }
.linea:hover::after { opacity: 1; }
.linea-img img { will-change: transform; }
.linea-n, .linea-t { transform: translateZ(0); transition: transform .5s cubic-bezier(.22,1,.36,1), color .45s ease; }
.linea:hover .linea-n { transform: translateZ(38px); }
.linea:hover .linea-t { transform: translateZ(22px); }
/* borde vivo */
.linea::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border: 1px solid transparent; transition: border-color .5s ease; }
.linea:hover::before { border-color: rgba(242,101,34,.45); }
/* atenuación de las hermanas */
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .lineas.hay-foco .linea:not(.es-foco) { opacity: .68; transform: scale(.99); }
  .linea { transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .5s ease, background-color .5s cubic-bezier(.22,1,.36,1); }
}
/* stagger interno al abrir */
.linea-det-in .subs dt, .linea-det-in .subs dd { opacity: 0; transform: translateY(10px);
  transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1); }
.linea.is-ab .linea-det-in .subs dt, .linea.is-ab .linea-det-in .subs dd { opacity: 1; transform: none; }

/* --- Pilares del ámbito: foco + geometría abstracta ------------------------ */
.ambito { --mx: 50%; --my: 50%; position: relative; overflow: hidden; }
.ambito::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(242,101,34,.10), transparent 62%); }
.ambito:hover::before { opacity: 1; }
.ambito > * { position: relative; z-index: 1; }
.geo { position: absolute; right: 1.4rem; top: 1.4rem; width: 58px; height: 58px; z-index: 0;
  opacity: .16; transition: opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.ambito:hover .geo { opacity: .5; transform: translateY(-3px) rotate(-4deg); }
/* 01 · retícula institucional */
.geo-1 { background:
  linear-gradient(var(--tx-o) 1.4px, transparent 1.4px) 0 0/100% 33.33%,
  linear-gradient(90deg, var(--tx-o) 1.4px, transparent 1.4px) 0 0/33.33% 100%;
  border: 1.4px solid var(--tx-o); }
/* 02 · módulos ascendentes */
.geo-2 { background:
  linear-gradient(var(--tx-o), var(--tx-o)) 0 100%/12px 34% no-repeat,
  linear-gradient(var(--tx-o), var(--tx-o)) 23px 100%/12px 62% no-repeat,
  linear-gradient(var(--tx-o), var(--tx-o)) 46px 100%/12px 100% no-repeat; }
/* 03 · red de nodos */
.geo-3 { background:
  radial-gradient(circle 4px at 8% 16%, var(--tx-o) 99%, transparent) ,
  radial-gradient(circle 4px at 88% 26%, var(--tx-o) 99%, transparent),
  radial-gradient(circle 4px at 22% 84%, var(--tx-o) 99%, transparent),
  radial-gradient(circle 5px at 62% 62%, var(--acento) 99%, transparent),
  linear-gradient(38deg, transparent 47%, var(--tx-o) 47.6%, var(--tx-o) 48.6%, transparent 49%),
  linear-gradient(-28deg, transparent 47%, var(--tx-o) 47.6%, var(--tx-o) 48.6%, transparent 49%); }

/* --- Valores: la figura reacciona ----------------------------------------- */
.val { --mx: 50%; --my: 50%; position: relative; overflow: hidden; }
.val-fig { transition: transform .7s cubic-bezier(.22,1,.36,1), border-color .5s ease, box-shadow .5s ease; }
.val:hover .val-fig { border-color: var(--acento); box-shadow: 0 0 0 6px rgba(242,101,34,.08); }
.val:hover .val-1 { transform: rotate(90deg) scale(1.08); }
.val:hover .val-2 { transform: rotate(135deg) scale(1.08); }
.val:hover .val-3 { transform: rotate(-45deg) scale(1.08); }

/* --- Cabecera compacta al bajar ------------------------------------------- */
.cab { transition: box-shadow .35s, min-height .4s cubic-bezier(.22,1,.36,1); }
.cab.es-compacta { min-height: 62px; }
.cab.es-compacta .marca-img { max-height: 36px; }
.marca-img { transition: max-height .4s cubic-bezier(.22,1,.36,1); }

/* --- Cursor de escritorio -------------------------------------------------- */
.cur { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  display: none; opacity: 0; transition: opacity .3s ease; }
.cur.listo { opacity: 1; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .cur { display: block; } }
.cur-pt, .cur-halo { position: fixed; top: 0; left: 0; border-radius: 50%; will-change: transform; }
.cur-pt { width: 5px; height: 5px; margin: -2.5px; background: var(--acento); }
.cur-halo { width: 34px; height: 34px; margin: -17px; border: 1px solid rgba(242,101,34,.55);
  transition: width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1),
              margin .35s cubic-bezier(.22,1,.36,1), background-color .35s ease; }
.cur.sobre .cur-halo { width: 54px; height: 54px; margin: -27px; background: rgba(242,101,34,.1); }

/* --- Barra de progreso con brillo contenido -------------------------------- */
.progreso span { box-shadow: 0 0 8px rgba(242,101,34,.5); }

@media (prefers-reduced-motion: reduce) {
  .linea, .linea-n, .linea-t, .geo, .val-fig { transition: none !important; transform: none !important; }
  .cur { display: none !important; }
  .lineas.hay-foco .linea:not(.es-foco) { opacity: 1; transform: none; }
}


/* =============================================================================
   PULIDO FINAL — alternancia cromática y composición editorial
   -----------------------------------------------------------------------------
   Capa ADITIVA. No sustituye ninguna regla anterior: sólo reafina el color y la
   composición de las bandas para la secuencia
   blanco · oscuro · blanco · oscuro · blanco · oscuro.
   Ningún efecto, transición ni tiempo aprobado se modifica: lo que cambia son
   los valores cromáticos y la posición de las piezas.
   ============================================================================= */

/* ============================ 01 · HERO — BLANCO ==========================
   El sistema del carrusel es exactamente el mismo (cinco capas, crossfade de
   1,6 s, Ken Burns de 7 s, barra de 5 s y puntos). Lo que cambia es que la
   fotografía deja de ser fondo total y pasa a ser una ventana editorial a la
   derecha, sobre papel blanco.
   ========================================================================= */
.hero {
  /* Borde izquierdo de la ventana fotográfica, anclado a la retícula de la
     caja para que nunca invada la columna de texto en ningún ancho. */
  --hero-corte: calc(50% - var(--caja) / 2 + var(--caja) * .54);
  --hero-aire:  clamp(1.5rem, 3.2vw, 3rem);
  background: var(--blanco);
  color: var(--tx-o2);
}
.hero-slides { overflow: hidden; }

/* Fotografía: banda superior en móvil, ventana lateral en escritorio. */
@media (max-width: 1023px) {
  /* Sin columna lateral, el bloque de texto se equilibra en el aire restante
     en lugar de caer al fondo y dejar un vacío en el centro. */
  .hero { padding-top: calc(min(40svh, 340px) + 4.4rem); justify-content: center; }
  /* Los cinco titulares del Hero son frases completas, no un lema de tres
     palabras: el cuerpo baja lo justo para que ninguno desborde ni se corte. */
  .hero .hero-t { font-size: clamp(1.75rem, 4vw, 2.6rem); max-width: 22ch; }
  .hero-slides, .hero-velo { inset: 0 0 auto 0; height: min(40svh, 340px); }
  .hero-velo { background: linear-gradient(0deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 34%),
                           linear-gradient(180deg, rgba(12,13,16,.14) 0%, transparent 30%); }
  .hero-ctrl { inset: calc(min(40svh, 340px) + 1.15rem) 0 auto 0; }
}
@media (min-width: 1024px) {
  .hero-slides, .hero-velo { inset: var(--hero-aire) 0 var(--hero-aire) var(--hero-corte); }
  .hero-velo { background: linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 14%),
                           linear-gradient(0deg, rgba(255,255,255,.42) 0%, transparent 14%); }
  /* El texto se mide contra la columna real, no contra la caja teórica: así el
     canal entre la última línea y el filo de la fotografía se mantiene entre
     88 y 120 px desde 1024 px hasta pantallas muy anchas. */
  .hero .hero-t, .hero .micro { max-width: min(calc(var(--caja) * .42), 46%); }
  .hero .hero-t { font-size: clamp(2.05rem, 3.4vw, 2.9rem); }
  .hero-s, .hero-s2 { max-width: min(calc(var(--caja) * .38), 42%); }
}

/* Filo de la ventana: hilo fino + acento corto. Detalle, no decoración. */
.hero-borde { display: none; }
@media (min-width: 1024px) {
  .hero-borde { display: block; position: absolute; z-index: 2; width: 1px;
    left: var(--hero-corte); top: var(--hero-aire); bottom: var(--hero-aire);
    background: linear-gradient(180deg, transparent, var(--ln-c) 14%, var(--ln-c) 86%, transparent); }
  .hero-borde::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 72px;
    background: var(--acento); }
}

/* Los cinco mensajes no miden lo mismo. Se reserva la altura del caso más
   largo para que el bloque no salte al cambiar de slide cada 7 s.
   Las reservas van en em: escalan solas con cada tamaño de la clamp. */
.hero [data-hero-titulo] { min-height: 4.2em; }    /* 4 líneas × 1.05 */
.hero [data-hero-desc]   { min-height: 4.86em; }   /* 3 líneas × 1.62 */
@media (max-width: 1023px) {
  .hero [data-hero-etiqueta] { min-height: 3.24em; } /* la etiqueta larga pasa a 2 líneas */
  .hero [data-hero-titulo]   { min-height: 5.25em; } /* 5 líneas en columna estrecha */
  .hero [data-hero-desc]     { min-height: 6.48em; } /* 4 líneas */
}

/* Tipografía del hero sobre papel */
.hero .micro   { color: var(--tx-o3); }
.hero .hero-t  { color: var(--tx-o); }
.hero .hero-s  { color: var(--tx-o2); }
.hero .hero-s2 { color: var(--tx-o3); }
/* El barrido de brillo conserva su animación; sólo se reajustan las paradas
   del degradado para que exista sobre blanco. */
.hero .brillo { background-image: linear-gradient(100deg, #14161A 18%, var(--acento) 34%, #E08A4E 46%, #14161A 62%); }
/* Halo cálido: se traslada al lado del texto para no teñir la fotografía. */
.hero .orbe { right: auto; left: -14%; top: 4%; width: min(50vw, 560px);
  background: radial-gradient(circle at 38% 38%, rgba(242,101,34,.17), transparent 62%); }

/* Controles del carrusel sobre blanco */
.hero .dot { background: rgba(20,22,26,.3); }
.hero .dot:hover { background: rgba(20,22,26,.55); }
.hero .dot.is-act { background: var(--acento); }
.hero .hero-barra { background: rgba(20,22,26,.14); }

/* ==================== 02 · PROPUESTA DE VALOR — OSCURO ====================
   Imagen propia de la sección y marca de agua centrada. Los reveals, el
   parallax y los textos quedan intactos.
   ========================================================================= */
.valor-fondo { opacity: .7; filter: grayscale(.12); }
/* El velo protege la columna de texto y abre hacia la derecha, donde la luz
   cálida de la imagen converge: la arquitectura se lee, el texto no compite. */
.valor-vel { background: linear-gradient(105deg, rgba(12,13,16,.95) 0%, rgba(12,13,16,.9) 38%, rgba(12,13,16,.72) 70%, rgba(12,13,16,.42) 100%); }
.valor-agua { right: auto; bottom: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: min(62vw, 660px); opacity: .055; }
@media (max-width: 700px) {
  .valor-agua { left: 50%; right: auto; bottom: auto; width: 96vw; opacity: .05; }
}

/* ======================= 03 · PORTAFOLIO — BLANCO =========================
   Las tarjetas conservan estructura, tilt 3D, foco radial, zoom de imagen,
   subrayado del título, número que sube y detalle desplegable. Sólo se
   traslada la paleta al papel blanco.
   ========================================================================= */
#portafolio .lineas { background: var(--ln-c); border-color: var(--ln-c); }
#portafolio .linea { background: var(--blanco); }
#portafolio .linea:hover { background: var(--hueso); }
#portafolio .linea-img img { filter: grayscale(.28) contrast(1.04) saturate(.92); }
#portafolio .linea:hover .linea-img img { filter: grayscale(0) contrast(1.04) saturate(1); }
/* Sólo el último tramo se funde con la tarjeta: la fotografía conserva cuerpo. */
#portafolio .linea-vel { background: linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(255,255,255,.5) 90%, rgba(255,255,255,.94) 100%); }
#portafolio .linea:hover .linea-vel { opacity: .6; }
#portafolio .linea-n { color: #D8DBDF; }
#portafolio .linea:hover .linea-n { color: var(--acento); }
#portafolio .linea-s { color: var(--tx-o2); }
#portafolio .linea-mas { color: var(--tx-o); }
#portafolio .linea-mas:hover { color: var(--acento); }
#portafolio .linea-mas-i { border-color: var(--ln-c); }
#portafolio .linea.is-ab .linea-mas-i { color: #fff; }
#portafolio .subs dt { color: var(--tx-o); border-top-color: var(--ln-c); }
#portafolio .subs dd { color: var(--tx-o2); }

/* ============ 04 · STAKEHOLDERS Y GRUPOS DE INTERÉS — OSCURO ==============
   La imagen entra como profundidad de fondo, nunca como competencia de las
   tarjetas. Los pilares conservan foco, geometría y elevación.
   ========================================================================= */
.sec-stake { position: relative; overflow: hidden; isolation: isolate; }
.stake-fondo { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%; opacity: .66; filter: grayscale(.24); }
/* El velo abre a la derecha —donde vive la red de nodos— y cierra sobre la
   columna de texto. La imagen se percibe como profundidad, nunca como ruido. */
.stake-vel { position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(255deg, rgba(12,13,16,.56) 0%, rgba(12,13,16,.84) 52%, rgba(12,13,16,.94) 100%),
              linear-gradient(0deg, rgba(12,13,16,.92) 0%, transparent 30%); }
.sec-stake .ambitos { background: var(--ln-o); border-color: var(--ln-o); }
.sec-stake .ambito { background: rgba(12,13,16,.8); backdrop-filter: blur(3px); }
.sec-stake .ambito:hover { background: rgba(29,32,39,.9); }
.sec-stake .ambito-n { color: rgba(255,255,255,.22); }
.sec-stake .ambito:hover .ambito-n { color: var(--acento); }
.sec-stake .ambito p { color: var(--tx-c2); }
.sec-stake .ambito::before { background: radial-gradient(340px circle at var(--mx) var(--my), rgba(242,101,34,.16), transparent 62%); }
/* La geometría de los pilares se dibuja con var(--tx-o). En banda oscura se
   reescribe esa variable dentro de la tarjeta: el trazo pasa a blanco sin
   duplicar los tres degradados. */
.sec-stake .ambito { --tx-o: #FFFFFF; }
.sec-stake .geo { opacity: .22; }
.sec-stake .ambito:hover .geo { opacity: .6; }

/* ================= 05 · PLATAFORMA ESTRATÉGICA — BLANCO ===================
   Misión, Visión y Política dejan de leerse como fichas de documento: pasan a
   composición editorial con identificador, retícula, jerarquía y aire.
   ========================================================================= */
.pe { display: grid; gap: clamp(3rem, 6vw, 5rem); margin-top: clamp(2rem, 4vw, 3rem); }

.pe-bl { display: grid; gap: clamp(1.6rem, 3.5vw, 3rem); align-items: center;
  padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--ln-c); }
.pe-idx { font-family: var(--disp); font-size: .78rem; font-weight: 500; letter-spacing: .22em;
  color: var(--acento); margin-bottom: 1.1rem; }
.pe-cu .mv-et { color: var(--tx-o3); font-size: .72rem; letter-spacing: .2em; margin-bottom: 1.2rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--ln-c); }

/* Manifiesto: el texto institucional pasa a voz editorial, sin tocar una palabra. */
.pe-manif { font-family: var(--disp); font-weight: 300;
  font-size: clamp(1.02rem, 1.55vw, 1.26rem); line-height: 1.58;
  color: var(--tx-o); max-width: 46ch; }
.pe-manif::first-line { font-weight: 400; letter-spacing: -.012em; }

/* Las tres imágenes —Misión, Visión y Política— son un solo sistema: idéntico
   formato, idéntico recorte, idéntico marco, idéntico comportamiento. Con las
   columnas 1fr/1fr de abajo, ocupan además exactamente la misma superficie. */
.pe-fig { position: relative; overflow: hidden; background: var(--hueso); }
.pe-fig img { width: 100%; height: 100%; object-fit: cover; object-position: center;
  aspect-ratio: 4 / 3; transition: transform 1.4s var(--ez); }
.pe-bl:hover .pe-fig img { transform: scale(1.035); }
.pe-fig-marco { position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(20,22,26,.08); }
.pe-fig-marco::before { content: ""; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 3px; background: var(--acento); }

/* Visión — el hito 2030 sigue siendo HTML/CSS, ahora dentro de la columna de
   texto para que la fotografía reciba el mismo trato que las otras dos. */
.pe-hito-n { font-family: var(--disp); font-weight: 300;
  font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.055em;
  color: var(--tx-o); margin-bottom: 1.2rem; }
.pe-hito-n::after { content: ""; display: block; width: 96px; height: 2px; margin-top: .5rem;
  background: linear-gradient(90deg, var(--acento), rgba(242,101,34,0)); }

/* Alternancia: imagen a la izquierda en Misión y Política, a la derecha en
   Visión. Columnas iguales, así las tres imágenes miden exactamente lo mismo. */
@media (min-width: 900px) {
  .pe-mis, .pe-vis, .pe-cal { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}

/* Valores corporativos — mismo sistema, papel blanco */
#plataforma .vals { background: var(--ln-c); border-color: var(--ln-c); }
#plataforma .val { background: var(--blanco); }
#plataforma .val:hover { background: var(--hueso); }
#plataforma .val p { color: var(--tx-o2); }

/* Política de calidad — tercer bloque del mismo sistema. El texto pasa a una
   sola columna porque ahora vive en media caja, junto a su imagen. */
/* Vive fuera de .pe (Valores queda en medio): recupera el mismo aire. */
#plataforma .cal { border: 0; padding: 0; margin-top: clamp(3rem, 6vw, 5rem); }
#plataforma .cal-tx { color: var(--tx-o2); font-size: .97rem; max-width: 46ch; }

/* ================ 06 · METODOLOGÍA — OSCURO · CARRUSEL ====================
   Único componente reconstruido. Una fase visible, arrastre, teclado, puntos,
   barra de posición y anterior/siguiente.
   ========================================================================= */
.sec-metodo { border-bottom: 1px solid var(--ln-o); }
.mc { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.mc-vis { position: relative; overflow: hidden; border: 1px solid var(--ln-o);
  background: var(--carbon2); touch-action: pan-y; cursor: grab; }
.mc-vis:active { cursor: grabbing; }
.mc-vis:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.mc-pista { display: flex; list-style: none; margin: 0; padding: 0; will-change: transform;
  transition: transform .78s var(--ez); }
.mc-fase { flex: 0 0 100%; min-width: 0; display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center; padding: clamp(1.8rem, 4vw, 3.4rem);
  opacity: .28; transition: opacity .6s var(--ez); }
.mc-fase.is-act { opacity: 1; }

.mc-n { display: flex; align-items: baseline; gap: .55rem; }
.mc-n-a { font-family: var(--disp); font-weight: 300; font-size: clamp(3.2rem, 8vw, 5.4rem);
  line-height: .9; letter-spacing: -.06em; color: #fff; }
.mc-n-b { font-family: var(--disp); font-size: .9rem; letter-spacing: .12em; color: var(--tx-c3); }
.mc-fase.is-act .mc-n-a { color: var(--acento); }

.mc-tx h3 { font-size: clamp(1.45rem, 3vw, 2.05rem); margin-bottom: .7rem; position: relative;
  padding-bottom: .85rem; }
.mc-tx h3::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 46px;
  background: var(--acento); transition: width .7s var(--ez); }
.mc-fase.is-act .mc-tx h3::after { width: 140px; }
.mc-tx p { font-size: 1rem; color: var(--tx-c2); max-width: 46ch; }

.mc-fig { display: block; color: #fff; opacity: .55; transition: opacity .6s var(--ez), transform .8s var(--ez); }
.mc-fig svg { width: clamp(96px, 15vw, 150px); height: auto; }
.mc-fase.is-act .mc-fig { opacity: 1; }

@media (min-width: 860px) {
  .mc-fase { grid-template-columns: auto minmax(0,1fr) auto; gap: clamp(2rem,4vw,3.6rem);
    min-height: 300px; }
  .mc-n { flex-direction: column; align-items: flex-start; gap: .35rem; }
}

/* Controles */
.mc-ctrl { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; }
.mc-dots { display: flex; gap: .5rem; }
.mc-dot { width: 26px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.32);
  transition: background-color .35s, width .35s var(--ez); }
.mc-dot:hover { background: rgba(255,255,255,.6); }
.mc-dot.is-act { width: 46px; background: var(--acento); }
.mc-barra { flex: 1; height: 1px; background: rgba(255,255,255,.14); overflow: hidden; }
.mc-barra span { display: block; height: 100%; width: 100%; background: var(--acento);
  transform: scaleX(.2); transform-origin: 0 50%; transition: transform .78s var(--ez); }
.mc-nav { display: flex; gap: .5rem; }
.mc-b { width: 44px; height: 44px; display: grid; place-items: center; color: #fff;
  border: 1px solid var(--ln-o); border-radius: 50%;
  transition: background-color .35s, border-color .35s, color .35s, transform .35s var(--ez); }
.mc-b:hover { background: var(--acento); border-color: var(--acento); transform: translateY(-2px); }
@media (max-width: 639px) {
  .mc-ctrl { flex-wrap: wrap; }
  .mc-barra { order: 3; flex-basis: 100%; }
  .mc-nav { margin-left: auto; }
}

/* ========================= LOGOTIPO — presencia de firma ==================
   Se mantiene la regla intocable: sólo se limita el alto, el ancho es
   automático y la relación de aspecto queda garantizada.
   ========================================================================= */
.marca-img { max-height: 62px; }
.cab.es-compacta .marca-img { max-height: 42px; }
.footer-brand .marca-img { max-height: 96px; }
@media (max-width: 767px) { .marca-img { max-height: 48px; } .footer-brand .marca-img { max-height: 76px; } }
@media (max-width: 389px) { .marca-img { max-height: 42px; } }

/* ============================ Movimiento reducido ========================= */
@media (prefers-reduced-motion: reduce) {
  .hero .brillo { background-image: none; color: var(--tx-o); -webkit-text-fill-color: var(--tx-o); }
  .mc-pista { transition: none !important; }
  .mc-fase, .mc-fig, .mc-tx h3::after, .mc-barra span { transition: none !important; }
  .pe-bl:hover .pe-fig img { transform: none; }
}

@media print {
  .mc-ctrl, .hero-borde { display: none !important; }
  .mc-pista { display: block; transform: none !important; }
  .mc-fase { opacity: 1 !important; page-break-inside: avoid; }
  .sec-stake, .sec-metodo { background: #fff !important; color: #000 !important; }
  .stake-fondo, .stake-vel, .valor-fondo, .valor-vel, .valor-agua { display: none !important; }
  .pe-bl { display: block; }
}