/* =========================================================================
   finanzas.mauroexplica.com — hoja de estilo única
   Orden: tokens · base · nav · revelado · video (hero) · testimonios video ·
          otros testimonios · ¿cuál sos vos? · instituciones · agenda ·
          cta flotante · footer
   ========================================================================= */

/* ===== TOKENS =============================================================
   Único lugar donde viven los colores. Cambiar la paleta = editar este bloque.
   Los *-glow van sin rgba() a propósito: se consumen como rgba(var(--x),.5),
   porque el mismo color se usa con una docena de opacidades distintas.
   ========================================================================= */
:root{
  --mx-grad-a:#1409f1;
  --mx-grad-b:#ff15e1;

  --mx-glow:124,17,236;    /* punto medio del gradiente: halos y sombras */
  --mx-glow-a:20,9,241;    /* = --mx-grad-a en rgb */
  --mx-glow-b:255,21,225;  /* = --mx-grad-b en rgb */

  --mx-ink:#000000;
  --mx-paper:#ffffff;
  --mx-muted:rgba(255,255,255,.72);
  --mx-glass:rgba(255,255,255,.05);
  --mx-glass-border:rgba(255,255,255,.12);

  /* Superficies: las secciones alternan negro puro y carbón para dar respiro.
     Sin esto todo el scroll es un solo plano y el violeta satura. */
  --mx-surface:#0b0b0f;
  --mx-hairline:rgba(255,255,255,.07);

  /* Acento por ruta: tres puntos del gradiente del logo PCFO, no colores de
     fuera de la marca. Cada card de «¿cuál sos vos?» recibe el suyo por
     variable inline, así tag, stepper y numeritos heredan sin duplicar reglas. */
  --mx-ruta-1:#1409f1;
  --mx-ruta-2:#8c0fe9;
  --mx-ruta-3:#ff15e1;

  /* Dorado del logo Advisory CFO. Es la OTRA marca, así que se usa con cuentagotas:
     solo las dos rutas que pertenecen a Advisory lo llevan. Si aparece en más
     sitios deja de señalar «esto es Advisory» y pasa a ser decoración. */
  --mx-acfo:#e8a830;
  --mx-acfo-soft:#e8c058;
  --mx-acfo-deep:#8a6010;
  --mx-acfo-glow:232,168,48;

  /* Escala de grises fríos. El gradiente del logo tiñe de violeta todo lo que
     toca; estos grises son el contrapeso que deja respirar al acento, y cargan
     lo secundario (cards en reposo, textos de apoyo, bordes) sin pedir turno.
     Llevan una pizca de azul (no son neutros puros) para no ensuciarse contra
     el negro de fondo. */
  --mx-steel-100:#e6e8ef;  /* texto de apoyo sobre superficie oscura */
  --mx-steel-300:#a7adbe;  /* etiquetas, descripciones secundarias */
  --mx-steel-500:#6c7389;  /* numeritos mono, texto terciario */
  --mx-steel-700:#343a4b;  /* bordes de lo no seleccionado */
  --mx-steel-900:#171a24;  /* relleno de cards en reposo */

  /* categorías de testimonios, escalonadas sobre el gradiente */
  --mx-cat-1:#1409f1;
  --mx-cat-11:#7a0dee;
  --mx-cat-15:#c511e8;
  --mx-cat-2:#ff15e1;

  /* Velos sobre el fondo vivo. Las secciones ya no pintan un color sólido:
     el negro lo pone `.mx-bg` una sola vez y cada banda apoya un velo encima,
     así los orbes se siguen viendo moverse debajo de todo el scroll. */
  --mx-veil:rgba(255,255,255,.035);

  /* Alto mínimo propio de la barra. Es una CONSTANTE de diseño: nada la mide,
     nada la recalcula. Existe separada de `--mx-nav-h` a propósito (ver abajo). */
  --mx-nav-min:60px;

  /* Alto REAL de la barra, medido en JS y reescrito en cada resize. Lo consume
     todo lo que necesita descontar la barra sticky (el alto del video, el
     scroll-margin de las anclas). Valor inicial = 60 de `--mx-nav-min` + 1 de la
     hairline inferior, que está siempre presente (arranca transparente y se
     opaca al scrollear). El +1 importa: el alto del video se calcula restando
     esta variable a la pantalla, y con 60 la sección se pasaba un píxel y
     aparecía scroll justo donde no debe haberlo.

     ⚠️ Es de SOLO LECTURA para la propia barra. Si algún descendiente de
     `.mx-nav` la usa para fijar su tamaño, se cierra un ciclo: el JS mide el
     alto → escribe la variable → el CSS agranda la barra → el ResizeObserver
     vuelve a medir. Pasó: la barra crecía duplicándose (291 → 1221 → 2460px) y
     el video quedaba en 2x2. Para dimensionar algo dentro de la barra, usa
     `--mx-nav-min`. */
  --mx-nav-h:61px;

  --mx-font:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ===== BASE ============================================================== */
*,*::before,*::after{box-sizing:border-box;}

/* El negro vive en <html>, no en <body>: así no se propaga al canvas y la capa
   `.mx-bg` (z-index:-1) puede pintarse por encima de él. */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--mx-ink);
}
body{
  margin:0;
  background:transparent;
  color:var(--mx-paper);
  font-family:var(--mx-font);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}

/* texto solo para lectores de pantalla */
.mx-sr{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* ===== FONDO VIVO ========================================================
   Tres orbes desenfocados que derivan muy lento detrás de toda la página.
   El desenfoque es caro: por eso son solo tres, viven en una capa fija (se
   pintan una vez, no por sección) y solo se anima `transform`, que no fuerza
   relayout. El velo de `::after` mantiene el contraste del texto blanco
   cuando un orbe pasa por debajo.
   ========================================================================= */
.mx-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:var(--mx-ink);
}
.mx-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.45) 100%),
    rgba(0,0,0,.34);
}
.mx-bg__orb{
  position:absolute;
  border-radius:50%;
  filter:blur(85px);
  will-change:transform;
}
.mx-bg__orb--a{
  top:-14vh;
  left:-10vw;
  width:58vw;
  height:58vw;
  background:radial-gradient(circle,rgba(var(--mx-glow-a),.58) 0%,rgba(var(--mx-glow-a),0) 70%);
  animation:mx-drift-a 34s ease-in-out infinite alternate;
}
.mx-bg__orb--b{
  top:22vh;
  right:-16vw;
  width:52vw;
  height:52vw;
  background:radial-gradient(circle,rgba(var(--mx-glow-b),.4) 0%,rgba(var(--mx-glow-b),0) 70%);
  animation:mx-drift-b 44s ease-in-out infinite alternate;
}
.mx-bg__orb--c{
  bottom:-20vh;
  left:28vw;
  width:46vw;
  height:46vw;
  background:radial-gradient(circle,rgba(var(--mx-glow),.34) 0%,rgba(var(--mx-glow),0) 70%);
  animation:mx-drift-c 38s ease-in-out infinite alternate;
}
@keyframes mx-drift-a{
  from{transform:translate3d(0,0,0) scale(1);}
  to  {transform:translate3d(14vw,10vh,0) scale(1.18);}
}
@keyframes mx-drift-b{
  from{transform:translate3d(0,0,0) scale(1.1);}
  to  {transform:translate3d(-12vw,-14vh,0) scale(.92);}
}
@keyframes mx-drift-c{
  from{transform:translate3d(0,0,0) scale(.95);}
  to  {transform:translate3d(-16vw,-8vh,0) scale(1.22);}
}
@media (prefers-reduced-motion:reduce){
  .mx-bg__orb{animation:none;}
}

/* ===== BARRA SUPERIOR ====================================================
   Sticky y translúcida: el contenido se ve pasar difuminado por debajo, que
   es el gesto que da la sensación Apple. `position:sticky` en vez de `fixed`
   para que reserve su propio alto y el hero no quede tapado.
   ========================================================================= */
.mx-nav{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(8,8,12,.62);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid rgba(255,255,255,0);
  transition:background .3s ease,border-color .3s ease;
}
/* Al separarse del tope se opaca y aparece la hairline: hasta entonces la
   barra flota sobre el hero sin cortarlo con una línea. */
.mx-nav[data-scrolled="true"]{
  background:rgba(8,8,12,.82);
  border-bottom-color:var(--mx-hairline);
}
.mx-nav__inner{
  max-width:1400px;
  margin:0 auto;
  /* `--mx-nav-min`, nunca `--mx-nav-h`: esa la escribe el JS midiendo esta
     misma barra, y usarla acá cerraría el ciclo medir → agrandar → medir. */
  min-height:var(--mx-nav-min);
  padding:0 clamp(16px,3vw,32px);
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,34px);
}
.mx-nav__brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex:0 0 auto;
}
/* Dos barritas, no una. La ancha con el gradiente del logo de Programa CFO; la
   fina en el dorado de Advisory CFO. El wordmark dice «Programa CFO», así que
   la segunda barra es lo único que anticipa que hay un segundo servicio por
   encima — de ahí que sea más angosta: es el nivel premium, no un igual.

   Van en pseudo-elementos porque el <span> es `aria-hidden` y no vale la pena
   meter dos nodos vacíos más en el HTML por algo puramente decorativo. */
.mx-nav__mark{
  display:flex;
  align-items:center;
  gap:3px;
}
.mx-nav__mark::before,
.mx-nav__mark::after{
  content:"";
  height:26px;
  border-radius:4px;
}
.mx-nav__mark::before{
  width:9px;
  background:linear-gradient(180deg,var(--mx-grad-a) 0%,var(--mx-grad-b) 100%);
}
.mx-nav__mark::after{
  width:5px;
  background:linear-gradient(180deg,var(--mx-acfo-soft) 0%,var(--mx-acfo-deep) 100%);
}
.mx-nav__wordmark{
  display:flex;
  align-items:baseline;
  gap:5px;
  font-size:15px;
  letter-spacing:-.025em;
  color:var(--mx-paper);
  white-space:nowrap;
}
.mx-nav__wordmark span{font-weight:500;color:rgba(255,255,255,.78);}
.mx-nav__wordmark strong{font-weight:800;}

.mx-nav__links{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  align-items:center;
  gap:clamp(6px,1.4vw,22px);
  margin-left:auto;
}
.mx-nav__links a{
  display:inline-block;
  padding:7px 2px;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.005em;
  text-decoration:none;
  color:rgba(255,255,255,.74);
  transition:color .2s ease;
}
.mx-nav__links a:hover{color:var(--mx-paper);}
.mx-nav__links a:focus-visible{outline:2px solid var(--mx-grad-b);outline-offset:4px;border-radius:4px;}

.mx-nav__cta{
  flex:0 0 auto;
  padding:9px 17px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-.005em;
  text-decoration:none;
  white-space:nowrap;
  color:var(--mx-paper);
  background:linear-gradient(95deg,var(--mx-grad-a) 0%,var(--mx-grad-b) 185%);
  box-shadow:0 4px 14px rgba(var(--mx-glow-a),.3);
  transition:transform .2s ease,box-shadow .2s ease;
}
.mx-nav__cta:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(var(--mx-glow-a),.42);}
.mx-nav__cta:focus-visible{outline:3px solid var(--mx-grad-b);outline-offset:3px;}

.mx-nav__burger{
  display:none;
  flex:0 0 auto;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--mx-glass-border);
  border-radius:11px;
  background:var(--mx-glass);
  cursor:pointer;
  place-items:center;
  gap:5px;
  grid-auto-flow:row;
}
.mx-nav__burger span{
  width:16px;
  height:1.5px;
  border-radius:2px;
  background:var(--mx-paper);
  transition:transform .25s ease,opacity .25s ease;
}
.mx-nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg);}
.mx-nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg);}
.mx-nav__burger:focus-visible{outline:2px solid var(--mx-grad-b);outline-offset:3px;}

@media (max-width:980px){
  .mx-nav__burger{display:grid;}
  .mx-nav__cta{margin-left:auto;}
  /* El menú se despliega como panel bajo la barra. `position:absolute` sobre
     el header sticky, no `fixed`, para que acompañe a la barra sin taparla. */
  .mx-nav__links{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    margin:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px clamp(16px,3vw,32px) 14px;
    /* Opaco, sin backdrop-filter: el padre `.mx-nav` ya tiene uno y un filtro
       anidado toma como fondo lo que el padre ya compuso, así que el panel
       dejaba leer el hero por debajo en vez de difuminarlo. */
    background:#0a0a0e;
    border-bottom:1px solid var(--mx-hairline);
  }
  .mx-nav__links[hidden]{display:none;}
  .mx-nav__links a{
    display:block;
    padding:13px 2px;
    font-size:15px;
    border-bottom:1px solid var(--mx-hairline);
  }
  .mx-nav__links li:last-child a{border-bottom:0;}
}
/* Con marca + CTA + burger en una fila, «30 minutos» es lo primero que sobra:
   abajo de 560px el botón se queda en «Agendar» y deja de empujar al burger. */
@media (max-width:560px){
  .mx-nav__cta-long{display:none;}
}
@media (max-width:420px){
  .mx-nav__cta{padding:8px 13px;font-size:12.5px;}
  .mx-nav__wordmark{font-size:13.5px;}
}

/* El ancla de cada sección se frena antes para no quedar debajo de la barra. */
[id]{scroll-margin-top:calc(var(--mx-nav-h) + 12px);}

/* ===== REVELADO AL SCROLLEAR =============================================
   El estado oculto se aplica por atributo, nunca por defecto: si el JS no
   corre, no hay atributo y todo el contenido queda visible.
   El escalonado entra por `--mx-delay`, que el JS calcula por posición dentro
   del grupo: sin eso las tres cards de una fila aparecen como un bloque y el
   movimiento se pierde. El desenfoque es de 6px y no más: por encima de eso el
   texto en tránsito se lee como un glitch de render. */
[data-mx-reveal="out"]{
  opacity:0;
  transform:translateY(34px) scale(.975);
  filter:blur(6px);
}
[data-mx-reveal]{
  transition:opacity .72s cubic-bezier(.16,.84,.26,1) var(--mx-delay,0ms),
             transform .86s cubic-bezier(.16,.84,.26,1) var(--mx-delay,0ms),
             filter .72s cubic-bezier(.16,.84,.26,1) var(--mx-delay,0ms);
  will-change:opacity,transform;
}
[data-mx-reveal="in"]{
  opacity:1;
  transform:none;
  filter:none;
  will-change:auto;
}
@media (prefers-reduced-motion:reduce){
  [data-mx-reveal]{transition:none;}
  [data-mx-reveal="out"]{opacity:1;transform:none;filter:none;}
}

/* ===== VIDEO PRINCIPAL (ocupa la primera pantalla) =======================
   El video es el hero: tiene que entrar completo sin scrollear en un 13" y
   crecer hasta el borde en monitores grandes. Por eso el ancho del marco se
   deriva del ALTO disponible, no del viewport: `(alto libre) * 16/9` es el
   ancho exacto que hace que un 16:9 mida justo el alto que le queda. Así el
   límite siempre lo pone la dimensión más escasa y nunca aparece scroll.
   `--mx-video-reserve` es el aire que se le quita al alto para el lema de
   abajo + respiración; sin reservarlo el lema caía bajo el pliegue.
   ========================================================================= */
.mx-video{
  --mx-video-reserve:clamp(150px,17vh,200px);
  position:relative;
  /* 100svh = viewport chico (barras de móvil desplegadas): el peor caso. La nav
     es sticky y por tanto reserva alto propio, así que hay que descontarla.
     El -1px es colchón deliberado: el alto de la nav se mide en JS y cualquier
     desfase de redondeo de un píxel reaparece como scroll en la sección que
     justamente no debe tenerlo. Un video 1px más bajo no se percibe; 1px de
     scroll rompe el requisito. */
  min-height:calc(100svh - var(--mx-nav-h) - 1px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,2vh,28px) clamp(16px,3vw,40px) clamp(20px,3vh,40px);
  background:var(--mx-veil);
  border-top:1px solid var(--mx-hairline);
}
/* Sin tope en px a propósito: en un monitor grande el video tiene que crecer
   hasta donde la pantalla aguante. Los dos límites reales son el `width:100%`
   (el ancho de la sección ya descontados sus paddings) y el alto libre; manda
   el que se agote primero, así que nunca hay desborde ni scroll. */
.mx-video__wrap{
  width:100%;
  max-width:calc((100svh - var(--mx-nav-h) - var(--mx-video-reserve)) * 16 / 9);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px,2.4vh,30px);
}

/* ---- lema, ahora debajo del video ---- */
.mx-video__lema{
  margin:0;
  max-width:24ch;
  text-align:center;
  font-size:clamp(20px,2.1vw,34px);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.12;
  color:var(--mx-paper);
  text-wrap:balance;
}

/* El marco es 16:9 y su ancho ya viene acotado por `.mx-video__wrap`, así que
   el `aspect-ratio` deriva el alto: nunca excede el hueco libre de pantalla. */
.mx-video__frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:#07070c;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;
}
.mx-video__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* fachada: miniatura + play, el iframe se carga al click */
.mx-video__facade{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  cursor:pointer;
  background:#07070c;
  display:block;
  font-family:inherit;
}
.mx-video__thumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease,opacity .3s ease;
}
.mx-video__facade:hover .mx-video__thumb{transform:scale(1.035);}
/* Sin velo sobre la portada: es la primera pantalla y tiene que leerse nítida.
   El botón de play se sostiene solo — su anillo blanco y el glow del gradiente
   le dan contraste propio sin oscurecer la imagen. */
.mx-video__play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:clamp(68px,7vw,92px);
  height:clamp(68px,7vw,92px);
  border-radius:50%;
  background:linear-gradient(135deg,var(--mx-grad-a) 0%,var(--mx-grad-b) 100%);
  box-shadow:0 0 0 10px rgba(255,255,255,.1),0 14px 40px rgba(var(--mx-glow),.55);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .22s ease,box-shadow .22s ease;
}
.mx-video__facade:hover .mx-video__play{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 0 0 14px rgba(255,255,255,.14),0 18px 50px rgba(var(--mx-glow),.7);
}
.mx-video__play svg{
  width:38%;
  height:38%;
  margin-left:8%;
  fill:#fff;
  display:block;
}
.mx-video__facade:focus-visible{
  outline:3px solid var(--mx-grad-b);
  outline-offset:4px;
}

/* En vertical el 16:9 ya es bajo y el alto deja de ser el cuello de botella:
   acá manda el ancho, y forzar `min-height:100svh` solo dejaría un hueco negro
   enorme debajo del video. */
@media (max-width:768px){
  .mx-video{
    min-height:auto;
    padding:20px 16px 40px;
  }
  .mx-video__wrap{max-width:100%;}
  .mx-video__frame{border-radius:14px;}
  .mx-video__lema{font-size:clamp(19px,5.6vw,26px);max-width:20ch;}
}
@media (prefers-reduced-motion:reduce){
  .mx-video__thumb,.mx-video__play{transition:none;}
  .mx-video__facade:hover .mx-video__thumb{transform:none;}
  .mx-video__facade:hover .mx-video__play{transform:translate(-50%,-50%);}
}

/* ===== TESTIMONIOS EN VIDEO ============================================== */
.mx-testi{
  position:relative;
  overflow:hidden;
  background:var(--mx-veil);
  border-top:1px solid var(--mx-hairline);
  padding:clamp(52px,6.5vw,96px) 0 clamp(56px,7vw,104px);
}

.mx-testi__inner{
  position:relative;
  z-index:1;
  max-width:1700px;
  margin:0 auto;
  padding:0 clamp(16px,3vw,40px);
}

/* ---- encabezado ---- */
.mx-testi__head{
  text-align:center;
  max-width:760px;
  margin:0 auto clamp(28px,3.4vw,44px);
}
.mx-testi__title{
  margin:0 0 14px;
  font-size:clamp(32px,4.6vw,52px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.04;
  color:var(--mx-paper);
}
/* El gradiente baja de relleno a subrayado. Repetido sección tras sección, el
   texto relleno era buena parte de la saturación violeta. */
.mx-testi__title em,
.mx-agenda__title em{
  font-style:normal;
  color:var(--mx-paper);
  padding-bottom:.1em;
  background:linear-gradient(95deg,var(--mx-grad-a) 0%,var(--mx-grad-b) 100%) left bottom / 100% 3px no-repeat;
}
.mx-testi__sub{
  margin:0;
  font-size:clamp(15px,1.5vw,18px);
  font-weight:400;
  line-height:1.5;
  color:var(--mx-muted);
}
.mx-testi__sub strong{color:var(--mx-paper);font-weight:700;}

/* ---- filtros ---- */
.mx-testi__filters{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 auto clamp(26px,3vw,40px);
  max-width:100%;
}
.mx-testi__tabs{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 auto;
  padding:6px;
  border-radius:999px;
  background:var(--mx-glass);
  border:1px solid var(--mx-glass-border);
  overflow-x:auto;
  scrollbar-width:none;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.mx-testi__tabs::-webkit-scrollbar{display:none;}
.mx-testi__tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--mx-muted);
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.mx-testi__tab:hover{background:rgba(255,255,255,.08);color:var(--mx-paper);}
.mx-testi__tab[aria-selected="true"]{
  color:var(--mx-paper);
  background:linear-gradient(95deg,var(--mx-grad-a) 0%,var(--mx-grad-b) 100%);
  box-shadow:0 6px 20px rgba(var(--mx-glow),.42);
}
.mx-testi__tab:focus-visible{outline:3px solid var(--mx-grad-b);outline-offset:2px;}
.mx-testi__dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex:0 0 auto;
  background:var(--mx-dot,#fff);
}
.mx-testi__tab[data-filter="all"] .mx-testi__dot{
  background:linear-gradient(135deg,var(--mx-grad-a),var(--mx-grad-b));
}
.mx-testi__count{
  font-size:12px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:inherit;
}
.mx-testi__tab[aria-selected="true"] .mx-testi__count{background:rgba(0,0,0,.26);}

/* flechas de scroll de los filtros (solo cuando desborda) */
.mx-testi__tabs-arrow{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--mx-glass-border);
  background:rgba(0,0,0,.6);
  color:var(--mx-paper);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0;
}
.mx-testi__tabs-arrow svg{width:16px;height:16px;fill:currentColor;}
.mx-testi__filters[data-overflow="true"] .mx-testi__tabs-arrow{display:flex;}
.mx-testi__tabs-arrow:hover{background:rgba(255,255,255,.14);}
.mx-testi__tabs-arrow:focus-visible{outline:3px solid var(--mx-grad-b);outline-offset:2px;}

/* ---- carrusel ---- */
.mx-testi__carousel{position:relative;}
/* `center` y no `stretch`: con cards 16:9 y 9:16 convivendo, estirarlas a la
   misma altura obligaría a las verticales a ~100px de ancho. Centradas, cada
   una conserva su proporción natural. */
.mx-testi__track{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.6vw,24px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 18px;
}
.mx-testi__track::-webkit-scrollbar{display:none;}
.mx-testi__track:focus-visible{outline:3px solid var(--mx-grad-b);outline-offset:4px;border-radius:16px;}

/* Ancho pensado para que entren 4-5 cards por vista en un portátil: con el
   inner en 1700px y gaps de ~24px, 21vw deja cinco a 1600px y cuatro a 1280px.
   `scroll-snap-align:start` en vez de `center` porque con varias visibles a la
   vez centrar una sola deja las laterales a medio cortar. */
.mx-testi__card{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:11px;
  width:clamp(240px,21vw,330px);
}
.mx-testi__card--vertical{width:clamp(130px,11vw,170px);}

.mx-testi__media{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:#0a0a12;
  border:1px solid rgba(255,255,255,.08);
}
.mx-testi__card--vertical .mx-testi__media{aspect-ratio:9/16;}
.mx-testi__media iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.mx-testi__facade{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:#0a0a12;
  cursor:pointer;
  display:block;
  font-family:inherit;
}
.mx-testi__thumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.mx-testi__facade:hover .mx-testi__thumb{transform:scale(1.05);}
.mx-testi__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.42) 100%);
}
.mx-testi__play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--mx-grad-a) 0%,var(--mx-grad-b) 100%);
  box-shadow:0 0 0 7px rgba(255,255,255,.1),0 10px 32px rgba(var(--mx-glow),.55);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .22s ease,box-shadow .22s ease;
}
.mx-testi__facade:hover .mx-testi__play{
  transform:translate(-50%,-50%) scale(1.09);
  box-shadow:0 0 0 12px rgba(255,255,255,.14),0 14px 40px rgba(var(--mx-glow),.72);
}
.mx-testi__play svg{width:20px;height:20px;margin-left:3px;fill:#fff;display:block;}
.mx-testi__facade:focus-visible{outline:3px solid var(--mx-grad-b);outline-offset:3px;}
.mx-testi__card--vertical .mx-testi__play{width:42px;height:42px;}
.mx-testi__card--vertical .mx-testi__play svg{width:16px;height:16px;}

/* placeholder cuando ninguna miniatura carga */
.mx-testi__ph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  background:linear-gradient(145deg,#140a3a 0%,#2a0b4d 55%,#4a0d52 100%);
  color:#fff;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25;
}

/* pie de la card */
.mx-testi__meta{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:0 2px;
}
.mx-testi__name{
  margin:0;
  font-size:clamp(15px,1.4vw,17px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--mx-paper);
}
.mx-testi__tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:600;
  color:var(--mx-muted);
}
.mx-testi__yt{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  margin-top:2px;
  font-size:12.5px;
  font-weight:700;
  color:var(--mx-muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.mx-testi__yt svg{width:14px;height:14px;fill:currentColor;}
.mx-testi__yt:hover{color:var(--mx-paper);border-bottom-color:var(--mx-grad-b);}
.mx-testi__yt:focus-visible{outline:3px solid var(--mx-grad-b);outline-offset:2px;}

/* flechas del carrusel */
.mx-testi__arrow{
  position:absolute;
  top:calc(50% - 40px);
  transform:translateY(-50%);
  z-index:3;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid var(--mx-glass-border);
  background:rgba(8,8,14,.82);
  backdrop-filter:blur(8px);
  color:var(--mx-paper);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background-color .18s ease,transform .18s ease,opacity .18s ease;
}
.mx-testi__arrow svg{width:20px;height:20px;fill:currentColor;}
.mx-testi__arrow:hover{background:linear-gradient(135deg,var(--mx-grad-a),var(--mx-grad-b));transform:translateY(-50%) scale(1.06);}
.mx-testi__arrow:focus-visible{outline:3px solid var(--mx-grad-b);outline-offset:3px;}
.mx-testi__arrow[disabled]{opacity:.28;cursor:default;}
.mx-testi__arrow[disabled]:hover{background:rgba(8,8,14,.82);transform:translateY(-50%);}
.mx-testi__arrow--prev{left:-6px;}
.mx-testi__arrow--next{right:-6px;}

/* estado vacío */
.mx-testi__empty{
  padding:56px 20px;
  text-align:center;
  font-size:16px;
  font-weight:600;
  color:var(--mx-muted);
}

@media (max-width:1024px){
  .mx-testi__arrow{width:46px;height:46px;}
  .mx-testi__arrow--prev{left:0;}
  .mx-testi__arrow--next{right:0;}
}
@media (max-width:768px){
  .mx-testi{padding:44px 0 52px;}
  /* En móvil no hay sitio para cuatro: vuelven a ser una por vista, y entonces
     sí conviene volver a centrar el snap. */
  .mx-testi__card{width:min(420px,78vw);scroll-snap-align:center;}
  .mx-testi__card--vertical{width:min(190px,50vw);}
  .mx-testi__arrow{display:none;}
  .mx-testi__tab{padding:10px 14px;font-size:13px;}
}
@media (max-width:480px){
  .mx-testi__title{font-size:clamp(26px,8vw,34px);}
}
@media (prefers-reduced-motion:reduce){
  .mx-testi__thumb,.mx-testi__play,.mx-testi__arrow{transition:none;}
  .mx-testi__facade:hover .mx-testi__thumb{transform:none;}
  .mx-testi__facade:hover .mx-testi__play{transform:translate(-50%,-50%);}
  .mx-testi__track,.mx-testi__tabs{scroll-behavior:auto;}
}

/* ===== OTROS TESTIMONIOS (ESCRITOS) ====================================== */
/* Bloque secundario: paddings, foto y recorte de cita bajan a propósito para
   que «otros testimonios» no compita en altura con los testimonios en video. */
.mx-casos{
  background:transparent;
  padding:clamp(40px,4.6vw,66px) clamp(16px,3vw,40px) clamp(40px,4.6vw,66px);
}
.mx-casos__inner{max-width:1280px;margin:0 auto;}

.mx-casos__title{
  margin:0 0 clamp(20px,2.4vw,32px);
  text-align:center;
  font-size:clamp(21px,2.4vw,30px);
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.1;
  text-transform:uppercase;
  color:var(--mx-paper);
}

.mx-casos__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.4vw,20px);
}

.mx-casos__card{
  display:flex;
  flex-direction:column;
  padding:18px 20px;
  border-radius:16px;
  background:var(--mx-glass);
  border:1px solid var(--mx-glass-border);
  transition:transform .2s ease,border-color .2s ease,background-color .2s ease;
}
.mx-casos__card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);
}

/* La foto deja de ser un retrato centrado y se vuelve avatar al lado del
   nombre: eso solo ya recorta ~110px de alto por card. */
.mx-casos__top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.mx-casos__photo{
  flex:0 0 auto;
  width:44px;
  aspect-ratio:1/1;
  margin:0;
  border-radius:50%;
  overflow:hidden;
  background:#15151f;
  padding:2px;
  background-image:linear-gradient(135deg,var(--mx-grad-a),var(--mx-grad-b));
}
.mx-casos__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
  background:#15151f;
}

.mx-casos__name{
  margin:0;
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--mx-paper);
}

.mx-casos__quote{
  margin:0 0 12px;
  font-size:13.5px;
  font-weight:400;
  line-height:1.56;
  color:var(--mx-muted);
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
}
.mx-casos__card[data-expanded="true"] .mx-casos__quote{
  -webkit-line-clamp:unset;
  display:block;
}

/* «Leer más» y LinkedIn comparten fila: antes el LinkedIn era una píldora de
   44px de alto a todo el ancho, y doce de esas eran media pantalla. */
.mx-casos__foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mx-casos__more{
  margin:0;
  padding:0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:-.01em;
  cursor:pointer;
  color:var(--mx-paper);
  border-bottom:2px solid var(--mx-grad-b);
}
.mx-casos__more:focus-visible{outline:3px solid var(--mx-grad-b);outline-offset:3px;}

.mx-casos__li{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
  color:var(--mx-paper);
  text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease;
}
.mx-casos__li svg{width:14px;height:14px;fill:currentColor;flex:0 0 auto;}
.mx-casos__li:hover{
  background:linear-gradient(95deg,var(--mx-grad-a),var(--mx-grad-b));
  border-color:transparent;
}
.mx-casos__li:focus-visible{outline:3px solid var(--mx-grad-b);outline-offset:3px;}

@media (max-width:1024px){
  .mx-casos__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .mx-casos{padding:34px 16px 38px;}
  .mx-casos__grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .mx-casos__card,.mx-casos__li{transition:none;}
  .mx-casos__card:hover{transform:none;}
}

/* ===== AGENDA (título + Calendly) ======================================== */
.mx-agenda{
  position:relative;
  overflow:hidden;
  background:var(--mx-veil);
  border-top:1px solid var(--mx-hairline);
  padding:clamp(52px,6.5vw,96px) clamp(16px,3vw,40px) clamp(44px,5.5vw,80px);
  scroll-margin-top:24px;
}
/* Agenda conserva halo —atenuado— porque es la sección que convierte; en las
   intermedias se sacó, que es lo que volvía morada toda la página. */
.mx-agenda::before{
  content:"";
  position:absolute;
  top:-180px;
  left:50%;
  transform:translateX(-50%);
  width:min(900px,120%);
  height:520px;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(var(--mx-glow),.14) 0%,
    rgba(var(--mx-glow-a),.05) 44%,
    rgba(0,0,0,0) 74%);
  pointer-events:none;
  z-index:0;
}

.mx-agenda__inner{
  position:relative;
  z-index:1;
  max-width:1080px;
  margin:0 auto;
}

.mx-agenda__head{
  text-align:center;
  max-width:720px;
  margin:0 auto clamp(26px,3.2vw,40px);
}
.mx-agenda__title{
  margin:0 0 12px;
  font-size:clamp(28px,4vw,46px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.06;
  text-wrap:balance;
  color:var(--mx-paper);
}
.mx-agenda__sub{
  margin:0;
  font-size:clamp(15px,1.5vw,17px);
  line-height:1.55;
  color:var(--mx-muted);
}

/* ---- hueco del Calendly ----
   No hay marco exterior: el widget va solo y centrado. Antes vivía dentro de un
   `.mx-agenda__frame` con una cabecera propia (avatar + nombre + chips), pero
   esa cabecera repetía el título de la sección y el marco devolvía al
   calendario a estar dentro de una caja — justo lo que se quería evitar.

   El interior del iframe se tematiza con los `*_color` del `data-url`, pero solo
   hasta la TARJETA de reserva: el body de Calendly que la rodea sigue blanco y
   es inalcanzable (comprobado con `background_color=ff0000`: se tiñó la tarjeta,
   los márgenes no).

   De ahí el `max-width`. Calendly centra su tarjeta y le da ~400-540px; a 560px
   de hueco la tarjeta lo llena y no queda ni un píxel de body a la vista. Más
   ancho que eso y reaparecen las franjas blancas a los lados — que es
   exactamente lo que hacía que el widget se leyera como un parche. El tope
   también resuelve lo de «gigante»: antes ocupaba el ancho completo del marco.

   El `height` tampoco es libre: el iframe trae su propia barra de scroll, y esa
   barra es BLANCA. Si el alto baja de ~600px la barra aparece y vuelve a haber
   una línea blanca al borde (probado: a 510 y a 575 asoma, a 620 no). El hueco
   de abajo que sobra a 620px es oscuro y se lee como padding de la tarjeta —
   mucho más barato que recuperar la barra por ganar 60px.

   ⚠️ Ninguna de las dos medidas es decorativa. Si subís el ancho aparecen dos
   franjas blancas a los lados; si bajás el alto, una a la derecha. */
.mx-agenda__widget{
  min-width:0;
  max-width:560px;
  height:620px;
  margin:clamp(10px,1.2vw,16px) auto;
  border-radius:14px;
  overflow:hidden;
  /* Mismo hex que `background_color` del `data-url`: lo que se ve antes de que
     cargue el iframe tiene que ser del color con el que va a cargar. */
  background:#12121a;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* estado previo a que cargue Calendly */
.mx-agenda__loading{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:#12121a;
  color:var(--mx-steel-300);
  font-size:14px;
  font-weight:600;
}
.mx-agenda__spinner{
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid rgba(var(--mx-glow-a),.18);
  border-top-color:var(--mx-grad-a);
  animation:mx-agenda-spin .9s linear infinite;
}
@keyframes mx-agenda-spin{to{transform:rotate(360deg);}}

.mx-agenda__fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  padding:14px 26px;
  border-radius:999px;
  background:linear-gradient(95deg,var(--mx-grad-a),var(--mx-grad-b));
  color:#fff;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
}

/* El hueco ya no se ensancha con la pantalla (lo frena el `max-width`), así que
   estos altos responden al alto que pide Calendly al apilarse, no al ancho del
   marco: cuanto más angosto el hueco, más vertical se vuelve la tarjeta. */
@media (max-width:768px){
  .mx-agenda{padding:44px 14px 44px;}
  .mx-agenda__widget{height:640px;margin:10px auto;border-radius:12px;}
}
@media (prefers-reduced-motion:reduce){
  .mx-agenda__spinner{animation-duration:2.4s;}
}

/* ===== PIEZAS COMPARTIDAS DE LOS BLOQUES COMERCIALES ===================== */
.mx-sec{padding:clamp(52px,6.5vw,96px) clamp(16px,3vw,40px) clamp(56px,7vw,104px);}
.mx-sec--ink{background:transparent;}
.mx-sec--surface{background:var(--mx-veil);border-top:1px solid var(--mx-hairline);}
.mx-sec__inner{max-width:1180px;margin:0 auto;}
.mx-sec__head{text-align:center;max-width:820px;margin:0 auto clamp(30px,3.6vw,48px);}
.mx-sec__title{
  margin:0 0 14px;
  font-size:clamp(28px,4.2vw,50px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.05;
  color:var(--mx-paper);
  text-wrap:balance;
}
.mx-sec__sub{
  margin:0;
  font-size:clamp(15px,1.5vw,19px);
  line-height:1.6;
  color:var(--mx-muted);
  text-wrap:balance;
}

/* ===== ¿CUÁL SOS VOS? — playbook interactivo ============================
   Cinco rutas: las tres de Programa CFO y las dos de Advisory CFO. Antes las
   tres se mostraban abiertas en paralelo, lo que obligaba a atravesar 23
   checkpoints para encontrar el propio. Ahora se elige una card y solo se ve
   esa.

   Dos niveles de profundidad, replicando el playbook del CRM:
     01 EL RECORRIDO    — línea de tiempo, visible siempre en la ruta elegida.
     02 LOS CHECKPOINTS — el detalle; aparece al tocar una parada o el botón.

   Progressive enhancement: el HTML trae todo visible y las cards son <a> con
   ancla, así que sin JS la sección sigue siendo legible y navegable. El JS
   colapsa, convierte las cards en pestañas (role=tab) y gobierna el revelado.

   Color: el acento entra por `--mx-ruta` desde el HTML. En reposo manda la
   escala de grises (`--mx-steel-*`); el gradiente PCFO marca las tres rutas
   del programa y el dorado ACFO las dos de Advisory. Ese dorado solo aparece
   en tres sitios más, todos a propósito: la segunda barrita del logo de la nav,
   el botón flotante «Agendar con Mauro» y el borde de su modal.
   ========================================================================= */
/* --- selector de ruta ----------------------------------------------------
   Cinco cards: tres de Programa CFO y dos de Advisory. En reposo son grises
   (acero frío, no neutro puro, para no ensuciarse contra el negro); el acento
   de marca aparece solo en la elegida. Así el violeta deja de teñir toda la
   sección y la selección se lee de un vistazo.

   Son <a href="#panel">, no <button>: sin JS saltan al panel correspondiente,
   que de todos modos está visible. El JS los convierte en pestañas. */
.mx-pb__picker{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.1vw,16px);
  margin-bottom:clamp(26px,3vw,40px);
  align-items:stretch;
}

/* Bajas y compactas a propósito: son un selector, no el contenido. Cuanto menos
   altas, antes entra el panel de la ruta elegida en la misma pantalla — que es
   justo lo que tiene que pasar al hacer click (ver `encuadrar()` en app.js). */
.mx-pb__card{
  --mx-ruta:var(--mx-steel-500);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:11px 13px 12px;
  border:1px solid var(--mx-steel-700);
  border-radius:14px;
  background:var(--mx-steel-900);
  text-decoration:none;
  text-align:left;
  overflow:hidden;
  transition:border-color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease;
}
/* Barra de acento a la izquierda: en reposo gris, encendida al seleccionar. */
.mx-pb__card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--mx-steel-700);
  transition:background .22s ease;
}
.mx-pb__card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--mx-ruta) 45%,var(--mx-steel-700));
  background:color-mix(in srgb,var(--mx-ruta) 7%,var(--mx-steel-900));
}
.mx-pb__card:hover::before{background:color-mix(in srgb,var(--mx-ruta) 70%,transparent);}

.mx-pb__card[aria-selected="true"]{
  border-color:var(--mx-ruta);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--mx-ruta) 16%,transparent) 0%,transparent 70%),
    var(--mx-steel-900);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--mx-ruta) 45%,transparent),
             0 18px 44px -26px var(--mx-ruta);
}
.mx-pb__card[aria-selected="true"]::before{background:var(--mx-ruta);}

.mx-pb__card-prod{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mx-steel-500);
  transition:color .22s ease;
}
.mx-pb__card[aria-selected="true"] .mx-pb__card-prod{color:var(--mx-ruta);}
/* El dorado puro sobre negro queda bajo de contraste; para texto se usa el
   tono claro del logo, reservando el dorado medio para bordes y barras. */
.mx-pb__card--acfo[aria-selected="true"] .mx-pb__card-prod{color:var(--mx-acfo-soft);}

.mx-pb__card-name{
  font-size:clamp(15px,1.25vw,17.5px);
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.2;
  color:var(--mx-paper);
}
.mx-pb__card-desc{
  font-size:12.5px;
  font-weight:500;
  line-height:1.4;
  color:var(--mx-steel-300);
}

/* --- panel de la ruta elegida -------------------------------------------- */
.mx-pb__panel{
  --mx-ruta:var(--mx-ruta-1);
  position:relative;
  padding:clamp(20px,2.4vw,34px);
  border:1px solid color-mix(in srgb,var(--mx-ruta) 38%,var(--mx-steel-700));
  border-radius:18px;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--mx-ruta) 9%,transparent) 0%,transparent 38%),
    rgba(10,10,14,.72);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--mx-ruta) 14%,transparent),
             0 30px 80px -50px var(--mx-ruta);
}
/* Más de un panel visible (sin JS) necesita aire entre ellos. */
.mx-pb__panel + .mx-pb__panel{margin-top:clamp(18px,2vw,28px);}

.mx-pb__panel-prod{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--mx-steel-500);
}
.mx-pb__dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--mx-ruta);
  flex:none;
}
.mx-pb__panel--acfo .mx-pb__panel-prod{color:var(--mx-acfo-soft);}

.mx-pb__panel-title{
  margin:0 0 10px;
  font-size:clamp(21px,2.3vw,30px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.12;
  color:var(--mx-ruta);
}
/* Mismo motivo que el eyebrow: el dorado medio no rinde como titular. */
.mx-pb__panel--acfo .mx-pb__panel-title{color:var(--mx-acfo-soft);}

.mx-pb__panel-tesis{
  margin:0 0 clamp(16px,1.8vw,22px);
  max-width:74ch;
  font-size:clamp(14px,1.15vw,16.5px);
  font-weight:500;
  line-height:1.6;
  color:var(--mx-steel-100);
}

/* --- flujo en chips («Números → Cartera → …») ---------------------------- */
.mx-pb__flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin:0 0 clamp(22px,2.6vw,34px);
  padding:0;
  list-style:none;
}
.mx-pb__flow-item{
  padding:6px 11px;
  border:1px solid var(--mx-steel-700);
  border-radius:8px;
  background:rgba(255,255,255,.03);
  font-size:12.5px;
  font-weight:600;
  color:var(--mx-steel-100);
}
/* La flecha va en el ::after del chip y no como nodo de texto: así no la lee
   el lector de pantalla ni se puede seleccionar al copiar el recorrido. */
.mx-pb__flow-item:not(:last-child)::after{
  content:"→";
  margin-left:11px;
  color:var(--mx-steel-500);
  font-weight:400;
}

/* --- cabecera numerada de cada bloque («01 EL RECORRIDO») ---------------- */
.mx-pb__block + .mx-pb__block,
.mx-pb__reveal-wrap + .mx-pb__block{margin-top:clamp(22px,2.6vw,34px);}

.mx-pb__block-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 7px;
}
.mx-pb__block-n{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:12px;
  font-weight:700;
  color:var(--mx-ruta);
}
.mx-pb__panel--acfo .mx-pb__block-n{color:var(--mx-acfo-soft);}
.mx-pb__block-label{
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mx-paper);
}
.mx-pb__block-rule{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--mx-ruta) 50%,transparent) 0%,transparent 100%);
}
.mx-pb__block-sub{
  margin:0 0 16px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--mx-steel-300);
}

/* --- 01 · el recorrido: línea de tiempo horizontal ----------------------- */
.mx-pb__track{
  display:flex;
  gap:0;
  margin:0;
  padding:18px 10px 16px;
  list-style:none;
  border:1px solid var(--mx-steel-700);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.mx-pb__stop{
  position:relative;
  flex:1 1 0;
  min-width:0;
}
/* El tramo de línea lo dibuja cada parada hacia la siguiente: con `flex:1 1 0`
   todas miden igual, así que de 50% a 150% cae exactamente en el centro del
   círculo vecino. La última no dibuja nada y por eso la línea no sobresale. */
.mx-pb__stop:not(:last-child)::before{
  content:"";
  position:absolute;
  top:17px;
  left:50%;
  width:100%;
  height:2px;
  background:var(--mx-steel-700);
}
.mx-pb__stop-btn{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  width:100%;
  padding:0 4px;
  border:0;
  background:none;
  font-family:inherit;
  cursor:pointer;
}
.mx-pb__stop-n{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border-radius:50%;
  border:2px solid var(--mx-ruta);
  background:var(--mx-surface);
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:13px;
  font-weight:700;
  color:var(--mx-ruta);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.mx-pb__panel--acfo .mx-pb__stop-n{color:var(--mx-acfo-soft);}
.mx-pb__stop-label{
  font-size:12px;
  font-weight:600;
  line-height:1.3;
  text-align:center;
  color:var(--mx-steel-300);
  transition:color .2s ease;
}
.mx-pb__stop-btn:hover .mx-pb__stop-n,
.mx-pb__stop-btn:focus-visible .mx-pb__stop-n{
  background:var(--mx-ruta);
  color:var(--mx-ink);
  transform:scale(1.08);
}
.mx-pb__stop-btn:hover .mx-pb__stop-label,
.mx-pb__stop-btn:focus-visible .mx-pb__stop-label{color:var(--mx-paper);}

/* --- botón que destapa el 02 -------------------------------------------- */
.mx-pb__reveal-wrap{
  margin:clamp(18px,2.2vw,26px) 0 0;
  display:flex;
  justify-content:center;
}
/* `hidden` tiene que ganarle al `display:flex` de arriba, si no el botón
   aparece antes de que el JS decida mostrarlo. */
.mx-pb__reveal-wrap[hidden]{display:none;}
.mx-pb__reveal{
  padding:11px 22px;
  border:1px solid color-mix(in srgb,var(--mx-ruta) 50%,var(--mx-steel-700));
  border-radius:999px;
  background:color-mix(in srgb,var(--mx-ruta) 10%,transparent);
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  color:var(--mx-paper);
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.mx-pb__reveal:hover{
  background:color-mix(in srgb,var(--mx-ruta) 22%,transparent);
  border-color:var(--mx-ruta);
  transform:translateY(-1px);
}

/* --- 02 · los checkpoints ------------------------------------------------ */
.mx-pb__cps{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(10px,1.1vw,14px);
  align-items:start;
}
.mx-pb__cp{
  border:1px solid var(--mx-steel-700);
  border-radius:12px;
  background:var(--mx-steel-900);
  transition:border-color .2s ease,background .2s ease;
}
.mx-pb__cp[open],
.mx-pb__cp:hover{border-color:color-mix(in srgb,var(--mx-ruta) 55%,var(--mx-steel-700));}
.mx-pb__cp[open]{background:color-mix(in srgb,var(--mx-ruta) 7%,var(--mx-steel-900));}

.mx-pb__cp-sum{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 15px;
  cursor:pointer;
  list-style:none;
}
/* Safari pinta su propio triangulito si no se desactiva por las dos vías. */
.mx-pb__cp-sum::-webkit-details-marker{display:none;}
.mx-pb__cp-sum::marker{content:"";}

.mx-pb__cp-chev{
  flex:none;
  width:15px;height:15px;
  margin-top:3px;
  fill:none;
  stroke:var(--mx-steel-500);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .2s ease,stroke .2s ease;
}
.mx-pb__cp[open] .mx-pb__cp-chev{
  transform:rotate(90deg);
  stroke:var(--mx-ruta);
}
.mx-pb__cp-n{
  flex:none;
  display:grid;
  place-items:center;
  width:25px;height:25px;
  border-radius:50%;
  border:1.5px solid var(--mx-ruta);
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:11.5px;
  font-weight:700;
  color:var(--mx-ruta);
}
.mx-pb__panel--acfo .mx-pb__cp-n{color:var(--mx-acfo-soft);}
.mx-pb__cp-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.mx-pb__cp-title{
  font-size:14.5px;
  font-weight:800;
  letter-spacing:-.012em;
  color:var(--mx-paper);
}
.mx-pb__cp-obj{
  font-size:12.5px;
  font-weight:500;
  line-height:1.45;
  color:var(--mx-steel-300);
}

.mx-pb__cp-body{
  padding:0 15px 14px 51px;
  border-top:1px solid var(--mx-steel-700);
  margin:0 15px;
  padding-left:36px;
  padding-top:12px;
}
.mx-pb__cp-ev{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--mx-steel-100);
}
.mx-pb__cp-ev-label{
  display:block;
  margin-bottom:4px;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--mx-ruta);
}
.mx-pb__panel--acfo .mx-pb__cp-ev-label{color:var(--mx-acfo-soft);}
.mx-pb__cp-ev-label--solo{margin:0 0 8px;}
.mx-pb__cp-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.mx-pb__cp-chips li{
  padding:4px 9px;
  border:1px solid var(--mx-steel-700);
  border-radius:6px;
  font-size:11.5px;
  font-weight:600;
  color:var(--mx-steel-100);
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1100px){
  .mx-pb__picker{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:860px){
  /* La línea de tiempo horizontal con 9 paradas deja etiquetas de 3 palabras
     en columnas de 60px. Pasa a vertical, que es como se lee en el móvil. */
  .mx-pb__track{flex-direction:column;gap:14px;padding:16px 14px;}
  .mx-pb__stop:not(:last-child)::before{
    top:34px;left:17px;
    width:2px;height:14px;
  }
  .mx-pb__stop-btn{flex-direction:row;gap:12px;justify-content:flex-start;}
  .mx-pb__stop-label{text-align:left;}
  .mx-pb__cps{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .mx-sec{padding:44px 16px 52px;}
  .mx-pb__picker{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:460px){
  .mx-pb__picker{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .mx-pb__card,.mx-pb__cp,.mx-pb__reveal,
  .mx-pb__stop-n,.mx-pb__stop-label,.mx-pb__cp-chev{transition:none;}
  .mx-pb__card:hover,.mx-pb__reveal:hover{transform:none;}
  .mx-pb__stop-btn:hover .mx-pb__stop-n{transform:none;}
}
/* ===== INSTITUCIONES ===================================================== */
.mx-inst{
  background:var(--mx-veil);
  border-top:1px solid var(--mx-hairline);
  padding:clamp(48px,6vw,88px) 0 clamp(52px,6.5vw,96px);
  overflow:hidden;
}

.mx-inst__title{
  margin:0 auto clamp(28px,3.4vw,44px);
  padding:0 20px;
  max-width:760px;
  text-align:center;
  font-size:clamp(24px,3.2vw,38px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  text-wrap:balance;
  color:var(--mx-paper);
}

/* carril con degradados a los costados */
.mx-inst__viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}

/* `flex-start` y no `center`: las placas tienen alto fijo pero los nombres no,
   así que centrando, un nombre de tres líneas subiría su placa respecto al
   resto de la fila. */
.mx-inst__marquee{
  display:flex;
  width:max-content;
  align-items:flex-start;
  gap:clamp(14px,1.6vw,24px);
  /* La duración es para la lista DUPLICADA (el keyframe llega a -50%), así que
     son 34s por vuelta completa a las 12 instituciones. A 46s el carril casi no
     se movía y parecía estático. */
  animation:mx-inst-slide 34s linear infinite;
}
.mx-inst__viewport:hover .mx-inst__marquee{animation-play-state:paused;}
@keyframes mx-inst-slide{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Los logos flotan sobre una placa oscura, no sobre el chip blanco anterior:
   ese chip arruinaba los logos que ya son blancos (Startcups desaparecía).

   El problema de fondo es que las doce fuentes son heterogéneas: JPG con fondo
   blanco, PNG transparente con marca oscura, y PNG transparente con marca
   blanca. La combinación que funciona para las tres sobre oscuro:

   1. `mix-blend-mode:lighten` contra una placa casi negra. Para cualquier píxel
      más claro que la placa el blend es la identidad, así que los logos de
      color pasan intactos; el rectángulo blanco de los JPG, en cambio, ya no
      recorta un bloque porque la placa es opaca y el blend se resuelve contra
      ella y no contra un backdrop transparente (eso último aislaría la capa y
      el blend no se aplicaría).
   2. `--invert` para los cuatro logos oscuros sobre blanco: `invert` manda su
      fondo al negro de la placa y la marca al claro; `hue-rotate(180deg)`
      deshace el giro de tono que `invert` introduce, así el azul sigue azul. */
.mx-inst__item{
  flex:0 0 auto;
  width:clamp(132px,13vw,172px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  text-decoration:none;
  transition:transform .22s ease;
}
.mx-inst__plate{
  width:100%;
  height:clamp(74px,7vw,92px);
  padding:12px 16px;
  border-radius:16px;
  background:#0a0a11;
  border:1px solid rgba(255,255,255,.09);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .22s ease,box-shadow .22s ease;
}
.mx-inst__item img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  /* Cinco de los doce logos vienen como tile cuadrado con fondo opaco (UCEMA,
     FCE, Pulsión, Fundación, Consejo y Caja): ese fondo no hay filtro que lo
     quite, así que al menos se redondea para que lea como tile a propósito y
     no como una imagen recortada dentro del plato. En los logos con fondo
     transparente el radio no se nota. */
  border-radius:10px;
  mix-blend-mode:lighten;
  filter:grayscale(1);
  opacity:.82;
  transition:filter .25s ease,opacity .25s ease;
}
.mx-inst__item--invert img{filter:invert(1) hue-rotate(180deg) grayscale(1);}
/* Mini tag con el nombre. `min-height` fijo para que una institución sin
   nombre no desalinee la fila entera del marquee. */
.mx-inst__name{
  min-height:2.6em;
  max-width:100%;
  text-align:center;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.3;
  color:rgba(255,255,255,.5);
  transition:color .22s ease;
}
.mx-inst__item:hover{transform:translateY(-4px);}
.mx-inst__item:hover .mx-inst__plate{
  border-color:rgba(255,255,255,.26);
  box-shadow:0 14px 34px rgba(var(--mx-glow),.3);
}
.mx-inst__item:hover img{filter:grayscale(0);opacity:1;}
.mx-inst__item--invert:hover img{filter:invert(1) hue-rotate(180deg);}
.mx-inst__item:hover .mx-inst__name{color:var(--mx-paper);}
.mx-inst__item:focus-visible{outline:3px solid var(--mx-grad-b);outline-offset:3px;border-radius:16px;}

@media (max-width:768px){
  .mx-inst{padding:40px 0 44px;}
  .mx-inst__marquee{animation-duration:25s;gap:12px;}
  .mx-inst__item{width:122px;}
  .mx-inst__plate{height:70px;padding:10px 13px;}
  .mx-inst__name{font-size:10px;}
}

/* sin animación: pasa a grilla estática y scrolleable con el dedo */
@media (prefers-reduced-motion:reduce){
  .mx-inst__viewport{
    overflow-x:auto;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .mx-inst__marquee{animation:none;padding:0 20px;}
  .mx-inst__item{transition:none;}
  .mx-inst__item:hover{transform:none;}
}

/* ===== CTA FLOTANTE + MODAL CALENDLY ===================================== */
/* Abajo a la derecha, no centrado vertical: a media altura el botón se come
   la flecha "siguiente" del carrusel de testimonios y pisa los CTA del hero.

   En dorado ACFO, no en el gradiente de Programa CFO. Es el único CTA que
   acompaña al visitante por toda la página, y los botones violetas ya son
   muchos: en dorado deja de ser «otro botón más» y se lee como la puerta
   directa a Mauro.

   El texto va en blanco a pedido. Sobre el dorado claro el blanco contrasta
   poco (~2:1), así que el gradiente arranca en el dorado base y termina en el
   profundo en vez de ir de claro a base: es el mismo dorado del logo, solo que
   por su lado oscuro, y ahí el blanco sí se lee. Si alguien vuelve a aclarar el
   gradiente, el texto se empieza a perder. */
.mx-float__btn{
  position:fixed;
  bottom:26px;
  right:22px;
  z-index:10000;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:16px 24px;
  border:0;
  border-radius:40px;
  background:linear-gradient(95deg,var(--mx-acfo) 0%,var(--mx-acfo-deep) 100%);
  color:#fff;
  font-family:inherit;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
  cursor:pointer;
  box-shadow:0 12px 36px rgba(var(--mx-acfo-glow),.42);
  animation:mx-float-pulse 1.8s ease-in-out infinite;
  transition:opacity .25s ease,visibility .25s ease;
}
.mx-float__btn svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto;}
.mx-float__btn:hover{animation-play-state:paused;}
.mx-float__btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}

@keyframes mx-float-pulse{
  0%,100%{box-shadow:0 12px 36px rgba(var(--mx-acfo-glow),.42),0 0 0 0 rgba(var(--mx-acfo-glow),.5);}
  55%{box-shadow:0 12px 36px rgba(var(--mx-acfo-glow),.42),0 0 0 14px rgba(var(--mx-acfo-glow),0);}
}

/* oculto mientras el bloque de agenda está en pantalla: ahí el botón no suma */
.mx-float__btn[data-hidden="true"]{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* ---- modal ---- */
.mx-float__overlay{
  position:fixed;
  inset:0;
  z-index:10001;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
}
.mx-float__overlay[data-open="true"]{display:flex;}

/* `max-width` por el mismo motivo que `.mx-agenda__widget`: pasado cierto ancho
   Calendly centra su tarjeta y asoma el body blanco del iframe a los lados. Acá
   el margen es menor porque el modal muestra además los detalles del evento.

   El fondo sigue siendo el mismo hex que el `background_color` del `data-url`
   (si no, se ve un borde de otro color alrededor de la tarjeta de Calendly); lo
   que entra en dorado es el borde y el halo, para que el modal se lea como
   continuación del botón que lo abrió. El dorado de adentro del iframe no se
   pinta acá: va por `primary_color` en el `data-url` del HTML. */
.mx-float__dialog{
  position:relative;
  width:100%;
  max-width:560px;
  height:80vh;
  max-height:860px;
  background:#12121a;
  border:1px solid rgba(var(--mx-acfo-glow),.3);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(var(--mx-acfo-glow),.1),0 0 60px rgba(var(--mx-acfo-glow),.12);
  display:flex;
  flex-direction:column;
}

.mx-float__close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  /* Antes era negra sobre tarjeta blanca. Ahora la tarjeta es oscura, pero el
     botón cae justo encima del gallardete gris «desarrollado por Calendly», así
     que no sirve ni negro ni un velo blanco: cualquiera de los dos se pierde
     contra uno de los dos fondos. Pastilla opaca + anillo claro, que se recorta
     contra ambos. El anillo es dorado por lo mismo que el borde del diálogo. */
  background:#000;
  box-shadow:0 0 0 1px rgba(var(--mx-acfo-glow),.6),0 2px 10px rgba(0,0,0,.6);
  color:var(--mx-acfo-soft);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color .18s ease;
}
.mx-float__close:hover{background:#2a2216;}
.mx-float__close:focus-visible{outline:3px solid var(--mx-acfo);outline-offset:2px;}

/* Los 18px de más son para esconder la barra de scroll del iframe, que es
   BLANCA y se recortaba como una franja vertical en el borde derecho del modal
   — el mismo problema que documenta `.mx-agenda__widget`, pero acá no se puede
   resolver dando más alto: el modal ya mide 80vh y el contenido (que sí muestra
   los detalles del evento) no entra igual.

   Así que en vez de evitar la barra, la sacamos de cuadro: el iframe se pasa
   18px del ancho del diálogo y el `overflow:hidden` del diálogo se los come. El
   coste es que la tarjeta de Calendly, que va centrada dentro del iframe, queda
   9px corrida a la derecha. No se nota; la franja blanca sí se notaba. */
.mx-float__widget{
  flex:1 1 auto;
  width:calc(100% + 18px);
  min-width:320px;
  min-height:0;
}
.mx-float__loading{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--mx-steel-300);
  font-size:14px;
  font-weight:600;
}
.mx-float__spinner{
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid rgba(var(--mx-acfo-glow),.2);
  border-top-color:var(--mx-acfo);
  animation:mx-float-spin .9s linear infinite;
}
@keyframes mx-float-spin{to{transform:rotate(360deg);}}

@media (max-width:768px){
  .mx-float__btn{
    bottom:22px;
    right:14px;
    padding:14px 20px;
    font-size:15.5px;
  }
  .mx-float__overlay{padding:12px;}
  .mx-float__dialog{height:88vh;border-radius:16px;}
}

@media (prefers-reduced-motion:reduce){
  .mx-float__btn{animation:none;transition:none;}
  .mx-float__spinner{animation-duration:2.4s;}
}

/* ===== FOOTER ============================================================ */
.mx-footer{
  background:transparent;
  border-top:1px solid var(--mx-glass-border);
  padding:clamp(40px,5vw,64px) clamp(16px,3vw,40px) clamp(32px,4vw,48px);
}
/* El footer quedó reducido a la línea legal: el bloque de marca + nav + CTA se
   quitó porque repetía la navegación de la barra y el CTA del botón flotante. */
.mx-footer__legal{
  max-width:1080px;
  margin:0 auto;
  font-size:12.5px;
  text-align:center;
  color:rgba(255,255,255,.5);
}
.mx-footer__legal p{margin:0;}

/* El botón flotante es fixed y en el fondo de página tapaba el copyright. */
@media (max-width:640px){
  .mx-footer__legal{padding-bottom:84px;}
}