/* ==========================================================================
   BLIXTOR · css/p/meta-ads.css  (solo /meta-ads · "Del feed a la
   conversación", 7 oct 2026; sustituye a la composición del 6 oct)
   --------------------------------------------------------------------------
   Hilo: un anuncio de Meta termina en una conversación de WhatsApp, y la
   página se recorre como una historia (segmentos que se llenan). Una
   familia por sección:
   1 héroe cartel en dos renglones + el mensaje real que abre el botón ·
   2 índice como barra de historias, fija bajo la cabecera · 3 para quién a
   pantalla partida (crema / rubor) · 4 tipos de campaña: acordeón de
   paneles verticales (>=1200 con JS y movimiento) o historias que se
   deslizan · 5 qué incluye: tres etapas que se apilan · 6 cómo se cobra:
   estado de cuenta en el capítulo vino · 7 Meta o Google enfrentados sobre
   un eje · 8 preguntas con el título fijo · 9 cierre con la conversación.
   Retícula de 12 columnas; cortes: >=1200 · 961-1199 · 600-960 · <600.
   Nada se oculta aquí a la espera de JS. Lo que depende de JS y de
   movimiento (acordeón, escritura del mensaje) cuelga de
   html.js:not(.no-motion) bajo prefers-reduced-motion: no-preference desde
   el primer pintado, y vuelve a su estado quieto si GSAP no llega
   (guardián de 6 s en el HTML). Ver DESIGN.md, "Meta Ads".
   ========================================================================== */

:root{
  --col-gap:clamp(1rem,2vw,2rem);
  /* Del borde del contenido al de la ventana (bloques a sangre) */
  --edge:max(var(--gutter),(100vw - var(--wrap)) / 2);
  /* Alto de la barra de historias (índice fijo) */
  --mn-h:3.25rem;
}
.mh__grid,.mf__grid,.mi__in,.mz__in,.mq__grid,.mc__more{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}

/* Piezas que la portada ya resolvió y aquí se repiten acotadas a esta
   página (candidatas a site.css en la revisión global):
   - botón de WhatsApp como icono en la cabecera móvil;
   - CTA compacto por debajo de 380 px (nunca se parte);
   - la barra de las migas pegada a "Meta Ads" (site.css le quita el gap). */
@media(max-width:560px){
  .site-header .site-header__cta{display:inline-flex!important;width:44px;min-height:44px;padding:0;gap:0}
  .site-header .site-header__cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-header .site-header__cta .icon{width:22px;height:22px}
}
@media(max-width:379.98px){
  main .btn--lg{font-size:.875rem;padding-inline:.75rem;gap:.4rem}
}
@media(max-width:339.98px){
  main .btn--lg{font-size:.8125rem;padding-inline:.6rem}
}
.breadcrumbs li[aria-current="page"]{display:inline-flex}
/* Sin scroll suave en el documento: con html:focus-within{scroll-behavior:
   smooth}, WebKit vuelve arriba en cada ScrollTrigger.refresh() con el foco
   dentro de la página. Los saltos del índice los suaviza js/p/meta-ads.js.
   El destino de un ancla deja libre la cabecera y la barra de historias. */
html{scroll-behavior:auto;scroll-padding-top:calc(var(--header-h) + var(--mn-h) + 1.25rem)}
.mh .link,.mf__calc .link{display:inline-flex;align-items:center;min-height:44px}

/* ==========================================================================
   1. HÉROE · cartel en dos renglones. El H1 es la misma frase de siempre:
   "Agencia de [Meta Ads] en Chihuahua" arriba a la izquierda y "para que te
   escriban por [WhatsApp]" abajo a la derecha: el anuncio y su destino en
   diagonal. Los sustantivos a escala de cartel se ajustan al ancho del H1
   (cqi) y al alto de la ventana (el CTA en la primera pantalla); las
   palabras pequeñas miden .17 de ellos.
   Debajo, la entradilla y el CTA (1-5) y el mensaje real que abre el
   botón (7-12) como burbuja. Con JS y movimiento el mensaje se escribe
   palabra por palabra después de que el cable sale del botón; si el JS no
   llega, el CSS lo muestra a los 2.4 s; sin JS o con movimiento reducido se
   ve desde el principio.
   ========================================================================== */
.mh{position:relative;overflow-x:clip;padding-block:clamp(.75rem,.4rem + 1.2vw,1.5rem) clamp(3rem,2rem + 3vw,5rem)}
.mh .breadcrumbs{margin-bottom:clamp(1.25rem,.75rem + 2vw,2.75rem)}
.mh__grid{position:relative;align-items:start;row-gap:clamp(1.5rem,1rem + 2vw,2.75rem)}
.mh__title{
  grid-column:1 / -1;container-type:inline-size;max-width:none;
  font-size:var(--fs-h1);line-height:1;letter-spacing:normal;text-wrap:wrap;
}
/* --big por ancho (cqi: los renglones caben enteros) y por alto (reserva
   para cabecera, migas, entradilla y CTA) */
.mh__line{display:block;--big:clamp(3.25rem,min(14.4cqi,calc((100svh - 23rem) / 1.8)),12.5rem);font-size:calc(var(--big) * .17)}
.mh__line--2{text-align:right;margin-top:calc(var(--big) * .04)}
.mh__s{font-weight:400;letter-spacing:-.02em;color:var(--c-muted)}
.mh__s--c{color:var(--c-ink);font-weight:500}
.mh__b{display:inline-block;font-size:var(--big);font-weight:600;line-height:.86;letter-spacing:-.055em;color:var(--c-ink);white-space:nowrap;padding-bottom:.04em}
.mh__b--meta{margin-right:.06em}
.mh__b--key{color:var(--accent)}
/* La entradilla y el CTA */
.mh__copy{grid-column:1 / span 5;position:relative;z-index:2}
.mh__lead{font-size:var(--fs-lead);line-height:1.5;color:var(--c-body);max-width:38ch}
.mh__fbig{color:var(--c-ink);font-weight:550}
.mh__actions{margin-top:clamp(1.25rem,1rem + 1vw,2rem)}
/* El mensaje */
.mh__msg{grid-column:7 / -1;margin:0;position:relative;z-index:2;max-width:34rem;justify-self:end;width:100%}
.mh__msg-label{display:flex;align-items:center;gap:.45rem;font-size:var(--fs-label);font-weight:500;color:var(--c-muted)}
.mh__msg-label .icon{width:1.15rem;height:1.15rem;color:var(--accent)}
.mh__quote{
  position:relative;margin:.7rem 0 0;padding:1.05rem 1.35rem 1.15rem;
  background:var(--surface-2);border-radius:22px 22px 6px 22px;
}
.mh__quote::after{
  content:"";position:absolute;right:-7px;bottom:0;width:16px;height:14px;background:var(--surface-2);
  clip-path:polygon(0 0,100% 100%,0 100%);
}
.mh__quote p{font-family:var(--font-display);font-size:clamp(1.125rem,.95rem + .65vw,1.4375rem);font-weight:400;line-height:1.38;letter-spacing:-.015em;color:var(--c-ink)}
.mh__dots{display:none}
.mh__ring{position:absolute;inset:-6px;border:2px solid var(--accent);border-radius:28px 28px 10px 28px;opacity:0;pointer-events:none}
.mh__msg-note{margin-top:.85rem;font-size:var(--fs-small);line-height:1.5;color:var(--c-muted);max-width:46ch}
/* El cable (lo dibuja js/p/meta-ads.js; sin JS no existe) */
.mh__wire{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none;z-index:1;visibility:hidden}
.mh__wire-path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round}
.mh__wire-dot{fill:var(--accent)}
.mh.is-wired .mh__wire{visibility:visible}

/* Escritura del mensaje: solo con JS y movimiento. El estado inicial
   (palabras transparentes, tres puntos) existe desde el primer pintado; el
   respaldo de CSS lo resuelve a los 2.4 s; js/p/meta-ads.js lo toma antes
   (.is-live) y al terminar deja .is-done. */
@media(prefers-reduced-motion:no-preference){
  html.js:not(.no-motion) .mh:not(.is-done) .mh__w{opacity:0;animation:mh-show 0s 2.4s forwards}
  html.js:not(.no-motion) .mh:not(.is-done) .mh__dots{
    position:absolute;left:1.35rem;top:1.15rem;display:flex;gap:5px;
    animation:mh-hide 0s 2.4s forwards;
  }
  .mh__dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-2);opacity:.35;animation:mh-dot 1s ease-in-out infinite}
  .mh__dots i:nth-child(2){animation-delay:.15s}
  .mh__dots i:nth-child(3){animation-delay:.3s}
  html.js:not(.no-motion) .mh.is-live:not(.is-done) .mh__w,
  html.js:not(.no-motion) .mh.is-live:not(.is-done) .mh__dots{animation:none}
  /* Entrada del cartel por capas, solo translate y desde el primer cuadro */
  .mh__line--1{animation:mh-in .9s var(--ease-out) backwards}
  .mh__line--2{animation:mh-in .9s .08s var(--ease-out) backwards}
  .mh__copy{animation:mh-in .9s .14s var(--ease-out) backwards}
}
@keyframes mh-show{to{opacity:1}}
@keyframes mh-hide{to{opacity:0;visibility:hidden}}
@keyframes mh-dot{0%,100%{opacity:.25;transform:none}50%{opacity:.8;transform:translateY(-3px)}}
@keyframes mh-in{from{translate:0 .5rem}}

/* Escritorio: "Ver qué incluye" va debajo del botón; a la derecha del
   botón queda libre el paso del cable hacia la burbuja */
@media(min-width:961px){
  .mh__actions{flex-direction:column;align-items:flex-start;gap:.35rem}
}
/* 961-1199: la entradilla y el CTA ocupan 6 columnas */
@media(min-width:961px) and (max-width:1199.98px){
  .mh__copy{grid-column:1 / span 6}
  .mh__msg{grid-column:7 / -1}
}
/* Portátiles con poco alto (1366x650, 1280x720 con la barra del
   navegador): migas más juntas, entradilla en dos renglones y más reserva
   para que el CTA siga en la primera pantalla */
@media(min-width:961px) and (max-height:780px){
  .mh{padding-top:.5rem}
  .mh .breadcrumbs{margin-bottom:.85rem}
  .mh__grid{row-gap:1.25rem}
  .mh__line{--big:clamp(3.25rem,min(14.4cqi,calc((100svh - 24.5rem) / 1.8)),12.5rem)}
  .mh__copy{grid-column:1 / span 6}
  .mh__lead{max-width:46ch}
  .mh__actions{margin-top:1rem}
}
/* <961: cuatro renglones apilados: "Agencia de" / Meta Ads / "en Chihuahua
   para que te escriban por" / WhatsApp. Los sustantivos llenan el ancho. */
@media(max-width:960.98px){
  .mh__line{display:contents;font-size:inherit}
  .mh__title{font-size:clamp(1.1875rem,.95rem + 1vw,1.625rem);line-height:1.25}
  .mh__b{display:block;font-size:min(calc(100cqi / 4.62),9.5rem);line-height:.9;margin:.06em 0 .1em}
  .mh__b--meta{margin-right:0}
  .mh__copy,.mh__msg{grid-column:1 / -1}
  .mh__msg{justify-self:start;max-width:30rem}
  .mh__line--1,.mh__line--2{animation:none}
}
@media(min-width:600px) and (max-width:960.98px){
  .mh__copy{grid-column:1 / span 7}
  .mh__msg{grid-column:8 / -1;align-self:end}
  .mh__b{font-size:min(calc(100cqi / 4.62),8.5rem)}
}
/* Celular horizontal: el CTA en la primera pantalla */
@media(orientation:landscape) and (max-height:500px){
  .mh .breadcrumbs{margin-bottom:.75rem}
  .mh__b{font-size:min(calc(100cqi / 4.62),17svh)}
  .mh__lead{max-width:none}
  .mh__actions{margin-top:1rem}
}

/* ==========================================================================
   2. ÍNDICE · barra de historias. Seis segmentos (uno por sección) con su
   nombre; fija bajo la cabecera mientras dura el contenido (vive en
   .mflow, así se suelta antes del cierre). Sin JS es el mismo índice de
   enlaces; con JS cada segmento se llena con la lectura de su sección y el
   activo se marca. Sobre el capítulo vino toma su color (data-on).
   ========================================================================== */
.mflow{position:relative}
.mn{
  position:sticky;top:var(--header-h);z-index:90;
  background:rgba(251,246,242,.97);box-shadow:inset 0 -1px 0 var(--c-rule);
  transition:background-color .35s var(--ease-out);
}
.mn[data-on="wine"]{
  background:rgba(74,27,47,.97);
  --c-ink:#FFF;--c-body:rgba(243,233,227,.88);--c-muted:#D9BFC6;--c-rule:rgba(243,233,227,.2);--c-signal:var(--rose);
}
.mn :focus-visible{outline-offset:-2px}
.mn__in{display:flex;align-items:stretch;gap:clamp(1rem,2vw,2rem)}
.mn__label{flex:none;align-self:center;font-size:var(--fs-label);font-weight:500;color:var(--c-muted);white-space:nowrap}
.mn__list{flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 .5rem;min-width:0}
.mn__a{
  display:flex;flex-direction:column;justify-content:center;gap:.5rem;min-height:var(--mn-h);padding-block:.5rem;
  font-size:.875rem;font-weight:500;line-height:1.2;color:var(--c-muted);text-decoration:none;white-space:nowrap;
  transition:color .25s var(--ease-out);
}
.mn__seg{position:relative;display:block;height:3px;border-radius:3px;background:var(--c-rule);overflow:hidden}
.mn__fill{position:absolute;inset:0;border-radius:inherit;background:var(--c-signal);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.mn__t{overflow:hidden;text-overflow:ellipsis}
.mn__a:hover,.mn__a.is-active{color:var(--c-ink)}
.mn__a.is-active .mn__t{font-weight:600}
@media(max-width:1199.98px){
  .mn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* <961: la fila se desliza; cada segmento con su nombre completo */
@media(max-width:960.98px){
  :root{--mn-h:2.875rem}
  .mn__in{padding-inline:0}
  .mn__list{
    display:flex;gap:.75rem;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);
  }
  .mn__list::-webkit-scrollbar{display:none}
  .mn__list li{flex:0 0 auto;min-width:7.25rem}
  .mn__a{font-size:.8125rem;gap:.4rem;padding-block:.45rem}
}

/* ==========================================================================
   3. PARA QUIÉN · pantalla partida. Crema: la tesis y las cuatro
   condiciones, cada una con su palomita. Rubor, a sangre por la derecha:
   la frase del "no" con sus tachados y la calculadora. Sin JS las
   palomitas y los tachados se ven puestos; con movimiento se trazan una
   vez y el rubor entra con un corte.
   ========================================================================== */
.mf{position:relative;overflow-x:clip}
.mf__grid{position:relative}
.mf__yes{grid-column:1 / span 7;padding-block:clamp(4rem,2.5rem + 6vw,8.5rem) clamp(4rem,2.5rem + 5vw,7.5rem);padding-right:clamp(1rem,3vw,3.5rem)}
.mf__no{
  grid-column:8 / -1;position:relative;isolation:isolate;display:flex;flex-direction:column;
  padding-block:clamp(4rem,2.5rem + 6vw,8.5rem) clamp(4rem,2.5rem + 5vw,7.5rem);padding-left:clamp(1.25rem,3vw,3.25rem);
}
.mf__no::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(var(--col-gap) / -2);right:calc(var(--edge) * -1);
  background:var(--surface-2);
}
.mf__no.is-cut::before{clip-path:inset(0 calc(var(--cut,0) * 100%) 0 0)}
.mf__title{font-size:var(--fs-h1);line-height:1;letter-spacing:-.045em;max-width:15ch}
.mf__key{position:relative;display:inline-block;white-space:nowrap}
.mf__key::after{
  content:"";position:absolute;left:0;right:.02em;bottom:-.02em;height:max(2px,.07em);background:var(--accent);
  transform-origin:0 50%;transform:scaleX(var(--k,1));
}
.mf__list{list-style:none;display:grid;gap:clamp(1.35rem,1rem + 1vw,2rem);margin-top:clamp(2.25rem,1.5rem + 2.5vw,3.5rem);max-width:40rem}
.mf__item{position:relative;padding-left:2.75rem;font-size:clamp(.96875rem,.93rem + .15vw,1.0625rem);line-height:1.55;color:var(--c-body)}
.mf__item strong{
  display:block;margin-bottom:.2rem;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.25rem,1.05rem + .7vw,1.6875rem);line-height:1.2;letter-spacing:-.022em;color:var(--c-ink);
}
.mf__check{position:absolute;left:0;top:.15rem;width:1.75rem;height:1.75rem;color:var(--accent)}
.mf__no-text{
  font-family:var(--font-display);font-size:clamp(1.375rem,1.05rem + 1.25vw,2.125rem);font-weight:400;line-height:1.28;letter-spacing:-.02em;color:var(--c-ink);
  max-width:21ch;
}
.strike{
  color:var(--ink-2);
  background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 58% / calc(var(--s,1) * 100%) 2px;
  -webkit-box-decoration-break:slice;box-decoration-break:slice;
}
.mf__calc{margin-top:auto;padding-top:clamp(2rem,1.5rem + 2vw,3rem)}
@media(min-width:961px) and (max-width:1199.98px){
  .mf__yes{grid-column:1 / span 7}
  .mf__no-text{font-size:clamp(1.25rem,.9rem + 1.2vw,1.75rem)}
}
@media(max-width:960.98px){
  .mf__grid{grid-template-columns:minmax(0,1fr)}
  .mf__yes,.mf__no{grid-column:1}
  .mf__yes{padding-right:0;padding-bottom:clamp(3rem,2rem + 4vw,4.5rem)}
  .mf__no{padding:clamp(2.75rem,2rem + 3vw,4rem) 0}
  .mf__no::before{left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1)}
  .mf__no-text{max-width:24ch}
  .mf__title{max-width:14ch}
}

/* ==========================================================================
   4. TIPOS DE CAMPAÑA · cada formato es un panel vertical, como una
   historia, con su función (descubrimiento, consideración, conversión,
   remarketing) como rótulo y como grafismo.
   - Base (sin JS, movimiento reducido o <1200): el de clic a WhatsApp a lo
     ancho con su diagrama; los otros cuatro, historias que se deslizan
     (scroll-snap) con una barra de segmentos.
   - >=1200 con JS y movimiento: acordeón horizontal de cinco paneles. Cada
     panel mide siempre el ancho abierto (el texto nunca se recompone) y se
     ve recortado (clip-path) a su tira; abrir otro solo mueve transform y
     clip-path. La posición sale de --k (panel abierto) en el CSS desde el
     primer pintado; js/p/meta-ads.js anima el cambio.
   ========================================================================== */
.mt{padding-block:clamp(4.5rem,3rem + 6vw,9rem) clamp(3rem,2rem + 3vw,5rem);overflow-x:clip}
.mt__head{max-width:46rem;margin-bottom:clamp(2rem,1.5rem + 2vw,3.25rem)}
.mt__title{font-size:var(--fs-h2);letter-spacing:-.035em;max-width:18ch}
.mt__intro{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5;max-width:40ch}
/* Tonos de cada formato (fondo y tinta) */
.mt__p{--t-bg:var(--surface-2);--t-ink:var(--ink);--t-body:var(--ink-body);--t-muted:var(--ink-2);--t-sig:var(--accent);--t-link:var(--accent-deep);--t-big:rgba(176,48,96,.14)}
.mt__p--trafico{--t-bg:#E9D3D1;--t-sig:var(--accent-deep);--t-big:rgba(122,34,71,.13)}
.mt__p--remarketing{--t-bg:var(--wine);--t-ink:#FFF;--t-body:rgba(243,233,227,.88);--t-muted:#D9BFC6;--t-sig:var(--rose);--t-link:#F2C4CB;--t-big:rgba(216,156,156,.2)}
.mt__p--formularios{--t-bg:var(--rose);--t-ink:var(--ink);--t-body:#2E141B;--t-muted:#4A2A31;--t-sig:var(--wine);--t-link:var(--wine);--t-big:rgba(74,27,47,.14)}
.mt__p--video{--t-bg:var(--night);--t-ink:var(--cream);--t-body:rgba(243,233,227,.84);--t-muted:var(--malva);--t-sig:var(--rose);--t-link:var(--rose);--t-big:rgba(216,156,156,.16)}
.mt__p{position:relative;isolation:isolate;overflow:hidden;color:var(--t-body)}
.mt__p :where(p,li) a:not([class]){color:var(--t-link)}
.mt__p :focus-visible{outline-color:var(--t-sig)}
.mt__fn{font-size:var(--fs-label);font-weight:600;letter-spacing:.01em;color:var(--t-sig)}
.mt__name{margin-top:.5rem;font-size:clamp(1.625rem,1.2rem + 1.6vw,2.5rem);font-weight:600;letter-spacing:-.04em;line-height:1.02;color:var(--t-ink);max-width:16ch}
.mt__text{margin-top:1rem;max-width:44ch}
.mt__text p + p{margin-top:.85rem}
.mt__when{font-size:var(--fs-small);line-height:1.55}
.mt__when .label{display:block;color:var(--t-sig);font-weight:600;margin-bottom:.1rem}
.mt__big{
  position:absolute;z-index:-1;left:1.1rem;bottom:-.16em;
  font-family:var(--font-display);font-size:clamp(4.25rem,2.5rem + 6vw,8.5rem);font-weight:600;line-height:1;letter-spacing:-.06em;
  color:var(--t-big);white-space:nowrap;pointer-events:none;user-select:none;
}
.mt__tab{display:none}
.mt__bar{display:none}

/* Base: el de WhatsApp a lo ancho */
.mt__p--whatsapp{padding:clamp(1.5rem,1rem + 2vw,2.5rem);border-radius:var(--r-media);background:var(--t-bg)}
.mt__p--whatsapp .mt__big{display:none}
.mt__p--whatsapp .mt__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.mt__p--whatsapp .flow{width:100%;max-width:34rem;justify-self:end}
/* Base: los otros cuatro, historias que se deslizan */
.mt__rest{margin-top:clamp(1.75rem,1.25rem + 1.5vw,2.5rem)}
.mt__rest{position:relative}
.mt__bar{display:flex;gap:4px;margin-bottom:.9rem}
/* Flechas de la fila (las crea el JS; solo con ratón) */
.mt__arrows{display:none}
@media(hover:hover) and (pointer:fine){
  .mt__arrows:not([hidden]){display:flex;justify-content:flex-end;gap:.5rem;margin:-.5rem 0 .75rem}
  .mt__arrow{
    display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);
    box-shadow:inset 0 0 0 1px var(--c-rule);color:var(--c-ink);transition:background-color .25s var(--ease-out),opacity .25s;
  }
  .mt__arrow:hover:not(:disabled){background:var(--surface-2)}
  .mt__arrow:disabled{opacity:.35;cursor:default}
  .mt__arrow--prev .icon{transform:rotate(180deg)}
}
.mt__bar i{flex:1;height:3px;border-radius:3px;background:var(--c-rule);transition:background-color .35s var(--ease-out)}
.mt__bar i.is-on{background:var(--accent)}
.mt__row{
  display:flex;gap:var(--col-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 1rem;scroll-padding-inline:var(--gutter);
  scrollbar-width:thin;scrollbar-color:rgba(142,58,82,.35) transparent;
}
.mt__row > .mt__p{
  flex:0 0 min(80vw,21.5rem);scroll-snap-align:start;display:flex;flex-direction:column;
  min-height:clamp(26rem,60vw,31rem);padding:1.5rem 1.4rem 7rem;border-radius:var(--r-media);background:var(--t-bg);
}
.mt__row .mt__name{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
@media(min-width:961px){
  .mt__row > .mt__p{flex-basis:calc((100% - 2 * var(--gutter) - 2 * var(--col-gap)) / 3.2)}
}
@media(max-width:960.98px){
  .mt__p--whatsapp .mt__body{grid-template-columns:minmax(0,1fr)}
}

/* El diagrama (container queries: decide por el ancho de su panel) */
.flow{position:relative;margin:0;container-type:inline-size}
.flow__tag{display:inline-block;margin-bottom:.85rem;padding-bottom:.2rem;border-bottom:1px dashed var(--t-muted,var(--c-muted));font-size:var(--fs-label);font-weight:600;color:var(--t-ink,var(--c-ink))}
.flow__stage{
  position:relative;display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr) minmax(0,46%);align-items:start;
  padding:clamp(.85rem,.5rem + 1.5vw,1.5rem);border:1px dashed rgba(36,16,22,.22);border-radius:var(--r-media);
}
.flow__phone{
  grid-column:1;display:grid;gap:.5rem;padding:11px 11px 13px;border-radius:24px;background:var(--surface);
  box-shadow:0 0 0 1px var(--rule),0 0 0 6px #1B0E13;margin:6px;
}
.flow__meta{font-size:.6875rem;font-weight:600;color:var(--ink-2)}
.flow__media{
  display:grid;place-items:center;aspect-ratio:1 / 1;border:1.5px dashed var(--malva);border-radius:8px;
  font-size:.75rem;color:var(--ink-2);background:var(--surface-3);text-align:center;padding:.25rem;
}
.flow__copy{font-family:var(--font-display);font-weight:600;font-size:.9375rem;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.flow__btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:34px;padding:.35rem .7rem;white-space:nowrap;
  border-radius:var(--r-pill);border:1.5px solid var(--ink);color:var(--ink);font-size:.8125rem;font-weight:600;
}
.flow__btn .icon{width:1em;height:1em}
.flow__ring{position:absolute;inset:-5px;border:2px solid var(--accent);border-radius:inherit;opacity:0;pointer-events:none}
.flow__path{grid-column:2;align-self:start;width:100%;height:calc((100% - 2.4rem) * 1.25);min-height:0;overflow:visible}
.flow__path path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.flow__chat{grid-column:3;align-self:start;margin-top:12%;border-radius:var(--r-media);overflow:hidden;background:var(--surface-3);box-shadow:0 0 0 1px var(--rule)}
.flow__chat-head{display:flex;align-items:center;gap:.45rem;padding:.55rem .75rem;background:var(--night);color:var(--cream);font-size:.75rem;font-weight:600;white-space:nowrap}
.flow__chat-head .icon{width:1.05em;height:1.05em;color:var(--rose)}
.flow__body{display:flex;justify-content:flex-end;min-height:4.5rem;padding:.9rem .7rem .5rem}
.flow__bubble{
  display:block;align-self:flex-end;max-width:88%;padding:.6rem .75rem;border-radius:14px 14px 4px 14px;
  background:var(--surface-2);color:var(--ink);font-size:.8125rem;line-height:1.45;
}
.flow__composer{position:relative;display:flex;align-items:center;gap:.5rem;margin:0 .55rem .65rem;padding:.4rem .4rem .4rem .7rem;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--rule)}
.flow__field{flex:1;font-size:.75rem;color:var(--ink-2)}
.flow__draft{position:absolute;left:.7rem;right:2.6rem;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;background:var(--surface)}
.flow__send{display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--ink);color:#FFF;flex:none}
.flow__send .icon{width:.95em;height:.95em}
.flow__replay{position:absolute;right:0;top:-.65rem;display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-small)}
.flow__cap{margin-top:1rem}
.flow__notes{list-style:none;display:grid;gap:.35rem;font-size:var(--fs-small);line-height:1.5}
.flow__notes strong{font-weight:600;color:var(--t-ink,var(--c-ink))}
.flow__cap > p{margin-top:.7rem;font-size:var(--fs-label);color:var(--t-muted,var(--c-muted))}
/* Diagrama angosto: anuncio arriba a la izquierda, chat abajo a la
   derecha, el trazo baja entre los dos */
/* Diagrama ancho pero justo (paneles de 24 a 30rem): letra un punto menor */
@container (min-width:24.01rem) and (max-width:30rem){
  .flow__stage{grid-template-columns:minmax(0,43%) minmax(0,1fr) minmax(0,46%);padding:.85rem}
  .flow__copy{font-size:.8125rem}
  .flow__btn{font-size:.75rem;padding-inline:.5rem;gap:.3rem}
  .flow__bubble{font-size:.75rem}
}
@container (max-width:24rem){
  .flow__stage{grid-template-columns:minmax(0,1fr);row-gap:0;padding:.9rem}
  .flow__phone{grid-column:1;width:min(64%,240px)}
  .flow__path{grid-column:1;width:min(38%,170px);height:calc(56px / .6);min-height:0;margin-block:calc(56px / -3);margin-left:min(30%,120px);transform:scaleY(-1)}
  .flow__chat{grid-column:1;justify-self:end;width:min(68%,280px);margin:0}
  .flow__btn,.flow__chat-head{font-size:.75rem}
}
@container (max-width:20rem){
  .flow__btn,.flow__chat-head{font-size:.6875rem}
}

/* >=1200 con JS y movimiento: el acordeón */
@media(min-width:1200px) and (prefers-reduced-motion:no-preference){
  html.js:not(.no-motion) .mt__deck{
    --k:0;--s:4.75rem;--h:38rem;
    position:relative;height:var(--h);container-type:inline-size;contain:layout paint;
    border-block:1px solid var(--c-rule);
  }
  html.js:not(.no-motion) .mt__rest,html.js:not(.no-motion) .mt__row{display:contents}
  html.js:not(.no-motion) .mt__bar{display:none}
  html.js:not(.no-motion) .mt__deck .mt__p{
    --o:calc(100cqi - 4 * var(--s));
    /* x = i·s (+ o - s si va después del abierto); v = s (o si es el abierto) */
    --after:clamp(0,var(--i) - var(--k),1);
    --open:clamp(0,1 - (var(--i) - var(--k)) * (var(--i) - var(--k)),1);
    --x:calc(var(--i) * var(--s) + var(--after) * (var(--o) - var(--s)));
    --v:calc(var(--s) + var(--open) * (var(--o) - var(--s)));
    position:absolute;top:0;left:0;bottom:0;width:var(--o);min-height:0;flex:none;
    margin:0;padding:0;border-radius:0;background:transparent;
    transform:translateX(var(--x));clip-path:inset(0 calc(var(--o) - var(--v)) 0 0);
    transition:background-color .5s var(--ease-out);
  }
  html.js:not(.no-motion) .mt__deck .mt__p.is-open{background:var(--t-bg)}
  /* La tira: un botón del alto del panel con el nombre y la función en
     vertical (texto de atributos: no se duplica en la página) */
  html.js:not(.no-motion) .mt__tab{
    display:block;position:absolute;z-index:3;left:0;top:0;bottom:0;width:var(--s);
    border-left:1px solid var(--c-rule);cursor:pointer;text-align:left;
    transition:background-color .35s var(--ease-out);
  }
  html.js:not(.no-motion) .mt__p--whatsapp .mt__tab{border-left:0}
  html.js:not(.no-motion) .mt__tab::before,html.js:not(.no-motion) .mt__tab::after{
    position:absolute;left:50%;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);white-space:nowrap;
  }
  html.js:not(.no-motion) .mt__tab::before{
    content:attr(data-fn);top:1.5rem;
    font-size:var(--fs-label);font-weight:600;letter-spacing:.01em;color:var(--accent);
  }
  html.js:not(.no-motion) .mt__tab::after{
    content:attr(data-name);bottom:1.6rem;
    font-family:var(--font-display);font-size:1.375rem;font-weight:500;letter-spacing:-.02em;color:var(--c-ink);
    transition:opacity .3s var(--ease-out);
  }
  html.js:not(.no-motion) .mt__p.is-open .mt__tab{cursor:default;border-left-color:transparent}
  html.js:not(.no-motion) .mt__p.is-open .mt__tab::before{color:var(--t-sig)}
  html.js:not(.no-motion) .mt__p.is-open .mt__tab::after{opacity:0}
  html.js:not(.no-motion) .mt__tab:focus-visible{outline:2px solid var(--accent);outline-offset:-6px;border-radius:12px}
  html.js:not(.no-motion) .mt__p.is-open .mt__tab:focus-visible{outline-color:var(--t-sig)}
  /* El contenido del panel, a la derecha de su tira */
  html.js:not(.no-motion) .mt__c{
    position:absolute;top:0;bottom:0;left:var(--s);width:calc(var(--o) - var(--s));
    padding:2.25rem 2.5rem 2rem 1rem;overflow:hidden;
  }
  html.js:not(.no-motion) .mt__p:not(.is-open) .mt__c,
  html.js:not(.no-motion) .mt__p:not(.is-open) .mt__big{opacity:0}
  html.js:not(.no-motion) .mt__deck .mt__p--whatsapp .mt__c{padding-top:2rem}
  html.js:not(.no-motion) .mt__deck .mt__name{max-width:none;font-size:clamp(2rem,1.2rem + 1.4vw,2.625rem)}
  html.js:not(.no-motion) .mt__deck .mt__text{max-width:34ch;font-size:var(--fs-lead);line-height:1.5}
  html.js:not(.no-motion) .mt__deck .mt__p--whatsapp .mt__text{max-width:42ch;font-size:var(--fs-body);line-height:1.65}
  html.js:not(.no-motion) .mt__deck .mt__big{display:block;left:calc(var(--s) + .75rem);bottom:-.17em;font-size:clamp(7rem,3rem + 7vw,11rem)}
  html.js:not(.no-motion) .mt__deck .mt__p--whatsapp .mt__big{display:none}
  /* WhatsApp abierto: el texto a la izquierda y el diagrama a la derecha */
  html.js:not(.no-motion) .mt__deck .mt__p--whatsapp .mt__c{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto auto 1fr;column-gap:clamp(1.5rem,2.5vw,2.75rem);align-content:start;
  }
  html.js:not(.no-motion) .mt__deck .mt__p--whatsapp .mt__body{display:contents}
  html.js:not(.no-motion) .mt__deck .mt__p--whatsapp .mt__fn{grid-column:1;grid-row:1}
  html.js:not(.no-motion) .mt__deck .mt__p--whatsapp .mt__name{grid-column:1;grid-row:2;font-size:clamp(1.875rem,1.2rem + 1.1vw,2.375rem)}
  html.js:not(.no-motion) .mt__deck .mt__p--whatsapp .mt__text{grid-column:1;grid-row:3;margin-top:1rem}
  html.js:not(.no-motion) .mt__deck .flow{grid-column:2;grid-row:1 / span 3;align-self:start}
  html.js:not(.no-motion) .mt__deck .flow__replay{top:-.5rem}
  @media(hover:hover) and (pointer:fine){
    html.js:not(.no-motion) .mt__p:not(.is-open) .mt__tab:hover{background:rgba(242,225,220,.65)}
  }
}

/* ==========================================================================
   5. QUÉ INCLUYE · tres etapas que se apilan. Cada etapa es una banda con
   su tono (crema, rubor claro, rubor), una barra de tres segmentos (la
   etapa en curso) y sus entregables: qué hacemos y qué recibes.
   >=961 con JS: las bandas se quedan fijas (sticky, sin pin) y la
   siguiente pasa por encima; de cada banda cubierta asoma su barra de
   segmentos, así la pila cuenta las etapas recorridas. La que queda debajo
   se encoge un poco (transform). El alto de cada tope lo calcula
   js/p/meta-ads.js para que ninguna banda tape contenido sin leer.
   <961: bandas una tras otra.
   ========================================================================== */
.mi{padding-top:clamp(3.5rem,2.5rem + 4vw,6.5rem)}
.mi__head{display:block;margin-bottom:clamp(2rem,1.5rem + 2vw,3.5rem)}
.mi__title{font-size:var(--fs-h2);letter-spacing:-.035em;max-width:16ch}
.mi__intro{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5;max-width:44ch}
.mi__stage{position:relative;--st-bg:var(--bg);background:var(--st-bg);border-top:1px solid var(--rule)}
.mi__stage--2{--st-bg:var(--surface-3)}
.mi__stage--3{--st-bg:var(--surface-2)}
.mi__stage::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:var(--dim,0);pointer-events:none}
.mi__in{row-gap:1.5rem;padding-block:1rem clamp(2.25rem,1.5rem + 2vw,3.25rem)}
.mi__side{grid-column:1 / span 4}
.mi__steps{display:flex;gap:4px;width:min(100%,9rem);height:2.25rem;align-items:center}
.mi__steps i{flex:1;height:3px;border-radius:3px;background:var(--rule)}
.mi__steps i.is-on{background:var(--accent)}
.mi__stage-name{margin-top:clamp(.75rem,.5rem + 1vw,1.5rem);font-size:clamp(2.25rem,1.3rem + 3.1vw,4.25rem);font-weight:600;letter-spacing:-.045em;line-height:.95;max-width:9ch}
.mi__list{grid-column:6 / -1;padding-top:.6rem}
.mi__cols{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:var(--col-gap);margin-bottom:.6rem}
.mi__items{list-style:none;display:grid}
.mi__item{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:var(--col-gap);row-gap:.35rem;padding-block:1rem 1.15rem;border-top:1px solid var(--rule)}
.mi__name{grid-column:1;font-size:var(--fs-h3);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.mi__text{grid-column:1;font-size:var(--fs-body);line-height:1.6}
.mi__gets{grid-column:2;grid-row:1 / span 2;align-self:start;padding-top:.3rem;font-size:var(--fs-small);line-height:1.55;color:var(--c-ink)}
/* "Recibes" va una vez por etapa (encabezado de columna); en cada fila
   queda para el lector de pantalla, salvo en el teléfono */
.mi__gets .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mi__note{margin-block:clamp(2rem,1.5rem + 2vw,3.25rem) 0;max-width:52rem}
.mi > .wrap:last-child{padding-bottom:clamp(4rem,3rem + 4vw,7rem)}
@media(min-width:961px){
  .mi__stack.is-stacked .mi__stage{position:sticky;top:var(--top,calc(var(--header-h) + var(--mn-h)));transform-origin:50% 0}
}
@media(max-width:960.98px){
  .mi__in{grid-template-columns:minmax(0,1fr)}
  .mi__side,.mi__list{grid-column:1}
  .mi__list{padding-top:0}
  .mi__cols{display:none}
  .mi__stage-name{max-width:none}
}
@media(max-width:560px){
  .mi__item{grid-template-columns:minmax(0,1fr)}
  .mi__gets{grid-column:1;grid-row:auto;padding-top:.35rem}
  .mi__gets .label{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:inline;color:var(--accent);font-weight:600;margin-right:.25rem}
}

/* ==========================================================================
   6. CÓMO SE COBRA · capítulo vino (el único a mitad de página), como un
   estado de cuenta: dos renglones, concepto · qué cubre · a quién se le
   paga, a escala de cartel. Un corchete los abraza desde "Tu negocio" (un
   negocio, dos pagos) y la doble raya cierra la cuenta. Quieto salvo las
   rayas, que se trazan una vez.
   ========================================================================== */
.mc{padding-block:clamp(4.5rem,3rem + 6vw,9rem)}
.mc__head{max-width:44rem}
.mc__title{font-size:var(--fs-h2);letter-spacing:-.035em}
.mc__intro{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5}
.mc__ledger{position:relative;margin-top:clamp(2.25rem,1.5rem + 3vw,4rem);padding-left:clamp(7rem,4rem + 6vw,10.5rem)}
.mc__origin{position:absolute;left:0;top:0;bottom:0;width:clamp(7rem,4rem + 6vw,10.5rem);display:flex;align-items:center}
.mc__origin-t{position:relative;z-index:1;font-size:var(--fs-label);font-weight:600;color:var(--cream);background:var(--wine);padding-right:.6rem;white-space:nowrap}
.mc__brace{
  position:absolute;right:1.25rem;top:1.25rem;bottom:1.25rem;width:1.25rem;
  border:1.5px solid var(--rose);border-right:0;transform-origin:100% 50%;
}
.mc__brace::before{content:"";position:absolute;right:100%;top:50%;width:clamp(1.25rem,3vw,3.25rem);height:1.5px;background:var(--rose);transform:translateY(-50%)}
.mc__row{
  position:relative;display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,4.8fr) minmax(0,4fr);column-gap:var(--col-gap);align-items:center;
  padding-block:clamp(1.5rem,1.1rem + 1.4vw,2.5rem);
}
.mc__row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--c-rule);transform-origin:0 50%;transform:scaleX(var(--r,1))}
.mc__row:last-child::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px;
  border-block:1.5px solid var(--rose);transform-origin:0 50%;transform:scaleX(var(--r2,1));
}
.mc__what{font-size:var(--fs-h3);font-weight:500;color:var(--c-ink)}
.mc__desc{max-width:46ch}
.mc__foot{margin-top:.6rem;font-size:var(--fs-small);color:var(--c-muted)}
.mc__to{justify-self:end;font-family:var(--font-display);font-size:clamp(2.75rem,1.2rem + 4.6vw,6.25rem);font-weight:600;line-height:.9;letter-spacing:-.055em;color:var(--rose)}
.mc__row + .mc__row .mc__to{color:var(--cream)}
.mc__more{margin-top:clamp(3rem,2rem + 3vw,5rem);row-gap:1.5rem;align-items:center}
.mc__factors{grid-column:1 / span 7;font-size:var(--fs-small);line-height:1.6;max-width:62ch}
.mc__cta{grid-column:9 / -1;justify-self:end}
@media(min-width:961px) and (max-width:1180px){
  .mc__factors{grid-column:1 / span 6}
  .mc__cta{grid-column:7 / -1}
}
@media(max-width:960.98px){
  .mc__ledger{padding-left:0}
  .mc__origin{position:static;width:auto;margin-bottom:1rem}
  .mc__origin-t{padding:0}
  .mc__brace{display:none}
  .mc__row{grid-template-columns:minmax(0,1fr) auto;row-gap:.75rem;align-items:end}
  .mc__what{grid-column:1;grid-row:1}
  .mc__to{grid-column:2;grid-row:1;font-size:clamp(2.25rem,1.5rem + 4vw,3.75rem)}
  .mc__desc{grid-column:1 / -1}
  .mc__more{grid-template-columns:minmax(0,1fr)}
  .mc__factors,.mc__cta{grid-column:1}
  .mc__cta{justify-self:start}
}
@media(max-width:480px){
  .mc__row{grid-template-columns:minmax(0,1fr)}
  .mc__to{grid-column:1;grid-row:1}
  .mc__what{grid-row:2}
  .mc__cta{justify-self:stretch}
  .mc__cta .btn{width:100%}
}

/* ==========================================================================
   7. META O GOOGLE · la misma tabla, enfrentada sobre un eje: Meta a la
   izquierda (texto hacia el centro), el criterio en el eje y Google a la
   derecha. Las celdas llevan headers explícitos: el encabezado de fila va
   en medio y la asociación no depende de su posición. Pasar sobre una
   plataforma la pone en tinta y apaga la otra (puntero fino).
   <760: el criterio arriba y las dos respuestas lado a lado.
   ========================================================================== */
.mg{padding-block:clamp(4.5rem,3rem + 6vw,9rem) clamp(3.5rem,2.5rem + 4vw,6.5rem)}
.mg__head{max-width:46rem;margin:0 auto clamp(2rem,1.5rem + 2vw,3.25rem);text-align:center}
.mg__title{font-size:var(--fs-h2);letter-spacing:-.035em}
.mg__intro{margin:1rem auto 0;font-size:var(--fs-lead);line-height:1.5;max-width:38ch}
.mg__table table{width:100%;font-size:var(--fs-body);line-height:1.55;table-layout:fixed}
.mg__table caption{caption-side:top;padding-bottom:1.25rem;text-align:center;font-size:var(--fs-label);color:var(--c-muted)}
.mg__h{
  padding:0 0 1rem;border-bottom:2px solid var(--c-ink);vertical-align:bottom;
  font-family:var(--font-display);font-size:clamp(1.75rem,1rem + 2.6vw,3.25rem);font-weight:600;line-height:1;letter-spacing:-.045em;color:var(--c-ink);
  transition:color .35s var(--ease-out);
}
.mg__h--meta{text-align:right;width:42%;padding-right:clamp(1rem,2.5vw,2.25rem)}
.mg__h--crit{width:16%}
.mg__h--google{text-align:left;width:42%;padding-left:clamp(1rem,2.5vw,2.25rem)}
.mg__table tbody tr{border-bottom:1px solid var(--c-rule)}
.mg__table td,.mg__c{padding-block:clamp(1.15rem,.9rem + .8vw,1.6rem);vertical-align:top;transition:color .35s var(--ease-out),opacity .35s var(--ease-out)}
.mg__m{text-align:right;padding-right:clamp(1rem,2.5vw,2.25rem);color:var(--c-body)}
.mg__g{text-align:left;padding-left:clamp(1rem,2.5vw,2.25rem);color:var(--c-body)}
.mg__c{
  position:relative;padding-inline:.75rem;text-align:center;
  font-family:var(--font-body);font-size:var(--fs-small);font-weight:600;line-height:1.35;letter-spacing:0;color:var(--c-ink);
  background:linear-gradient(var(--c-rule),var(--c-rule)) 0 0 / 1px 100% no-repeat,linear-gradient(var(--c-rule),var(--c-rule)) 100% 0 / 1px 100% no-repeat;
}
.mg__after{margin:clamp(1.75rem,1.25rem + 1.5vw,2.75rem) auto 0;max-width:62ch;text-align:center}
@media(hover:hover) and (pointer:fine) and (min-width:760.02px){
  .mg__table:has(.mg__h--meta:hover,.mg__m:hover) .mg__g,
  .mg__table:has(.mg__h--google:hover,.mg__g:hover) .mg__m{opacity:.42}
  .mg__table:has(.mg__h--meta:hover,.mg__m:hover) .mg__h--meta,
  .mg__table:has(.mg__h--google:hover,.mg__g:hover) .mg__h--google{color:var(--accent)}
}
@media(max-width:760px){
  .mg__head,.mg__after{text-align:left;margin-inline:0}
  .mg__intro{margin-inline:0}
  .mg__table caption{display:block;text-align:left}
  .mg__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mg__table table,.mg__table tbody{display:block}
  .mg__table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"c c" "m g";gap:.6rem 1.25rem;padding-block:1.25rem}
  .mg__table tbody tr:first-child{border-top:2px solid var(--c-ink)}
  .mg__c{grid-area:c;padding:0;text-align:left;background:none;font-family:var(--font-display);font-size:1.1875rem;font-weight:500;letter-spacing:-.015em}
  .mg__m,.mg__g{padding:0;text-align:left;font-size:var(--fs-small)}
  .mg__m{grid-area:m}
  .mg__g{grid-area:g}
  .mg__m::before,.mg__g::before{content:attr(data-label);display:block;margin-bottom:.25rem;font-size:var(--fs-label);font-weight:600;color:var(--c-muted)}
  .mg__m::before{color:var(--accent)}
}

/* ==========================================================================
   8. PREGUNTAS · el título fijo en las columnas 1-4 mientras se leen las
   respuestas (5-12). El acordeón es el del sistema (<details name>); al
   abrir, la respuesta entra con un movimiento corto y la pregunta abierta
   lleva el filete de señal.
   ========================================================================== */
.mq{padding-block:clamp(3.5rem,2.5rem + 4vw,6.5rem) clamp(4.5rem,3rem + 6vw,9rem)}
.mq__grid{row-gap:2rem;align-items:start}
.mq__head{grid-column:1 / span 4;position:sticky;top:calc(var(--header-h) + var(--mn-h) + 2rem)}
.mq__head h2{font-size:var(--fs-h2);letter-spacing:-.035em;max-width:9ch}
.mq__head p{margin-top:1.25rem;font-size:var(--fs-small);color:var(--c-muted);max-width:26ch}
.mq .faq{grid-column:5 / -1}
.mq .faq__item{position:relative}
.mq .faq__item::before{content:"";position:absolute;left:-1.25rem;top:1.35rem;width:2px;height:calc(100% - 2.7rem);background:var(--accent);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease-out)}
.mq .faq__item[open]::before{transform:none}
@media(max-width:960.98px){
  .mq__grid{grid-template-columns:minmax(0,1fr)}
  .mq__head,.mq .faq{grid-column:1}
  .mq__head{position:static}
  .mq__head h2{max-width:none}
  .mq .faq__q{min-height:64px}
  .mq .faq__item::before{left:calc(var(--gutter) * -.55)}
}

/* ==========================================================================
   9. CIERRE · la conversación queda abierta: la pregunta a escala de
   cartel y, al lado, una burbuja de conversación con el rayo de la marca
   dentro (la misma que abre la página, ahora de Blixtor). Sin JS se ve
   completa; con movimiento se traza una vez.
   ========================================================================== */
.mz{isolation:isolate}
.mz__in{position:relative;align-items:center;row-gap:2.5rem}
.mz__copy{grid-column:1 / span 7;position:relative;z-index:1}
.mz__title{font-size:clamp(2.75rem,1.4rem + 5.2vw,6rem);max-width:13ch;line-height:.94;letter-spacing:-.05em}
.mz .closing__text{max-width:40ch}
.mz__mark{grid-column:8 / -1;width:min(100% + var(--edge) * .6,34rem);justify-self:end;margin-right:calc(var(--edge) * -.6);height:auto;overflow:visible}
.mz__bubble{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round}
.mz__bolt{fill:var(--accent);stroke:var(--accent);stroke-width:1;stroke-linejoin:round}
@media(min-width:961px) and (max-width:1199.98px){
  .mz__copy{grid-column:1 / span 8}
}
@media(max-width:960.98px){
  .mz__in{grid-template-columns:minmax(0,1fr)}
  .mz__copy{grid-column:1}
  .mz__mark{grid-row:1;grid-column:1;justify-self:start;width:clamp(6.5rem,26vw,9rem)}
  .mz__title{max-width:12ch}
}

/* ==========================================================================
   IMPRESIÓN · todo en su estado final aunque GSAP haya dejado estilos
   ========================================================================== */
@media print{
  .mn{position:static!important}
  .mh__w{opacity:1!important}
  .mh__dots,.mh__wire,.mt__tab,.mt__bar,.mt__big,.mz__mark{display:none!important}
  .mt__deck,.mt__p,.mt__c{position:static!important;height:auto!important;width:auto!important;transform:none!important;clip-path:none!important;opacity:1!important}
  .mt__row{display:block!important;overflow:visible!important}
  .mi__stage{position:static!important;transform:none!important}
  .mi__stage::after{display:none!important}
  .strike{--s:1!important;background-size:100% 2px!important}
  .flow__path{clip-path:none!important}
  .flow__bubble{transform:none!important;opacity:1!important}
  .flow__draft,.flow__ring{opacity:0!important}
  .flow__replay{display:none!important}
  .mc__origin-t,.mc__row + .mc__row .mc__to{color:#000!important;background:none!important}
  .mc__row:first-child .mc__to{color:#7A2247!important}
  .mf__no::before{display:none!important}
}