/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  TU PLANTILLA · REMATES DE DETALLE                        20-ago-2026 ║
   ║                                                                       ║
   ║  Lista cerrada de detalles que pidió el cliente, uno por uno. NO es un      ║
   ║  rediseño: no toca estructura, colores, textos ni animaciones.         ║
   ║  Va cargado el ÚLTIMO para rematar sin pelear con nadie.               ║
   ║                                                                       ║
   ║  Lo que se arregló FUERA de este archivo, porque la causa vivía allá:  ║
   ║   · la barra azul metida 22px hacia adentro de la tarjeta → era un     ║
   ║     `padding` sobre `.window-card` en escala.css. Corregido ahí.       ║
   ║   · los stickers descentrados → la baldosa venía descentrada DENTRO    ║
   ║     del PNG (recortes de una grilla, con fondo blanco opaco y hasta    ║
   ║     trozos de la baldosa vecina en carrito y candado). Se recortaron,  ║
   ║     se centraron y se les puso fondo transparente.                     ║
   ║     Originales intactos en assets/stickers/_originales/.               ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ── 1 · LA VENTANA, BIEN ENSAMBLADA ──────────────────────────────────────
   Con la barra ya pegada al borde, hay que cuadrar el radio: por dentro de un
   borde, el radio útil es (radio exterior − grosor del borde). La tarjeta mide
   16px de radio; las normales llevan 1,5px de borde y la destacada 2,5px. Con
   los 14px que había puestos, quedaba un pelo de blanco asomando en la esquina.
   (`.f03-card` va en overflow:visible a propósito, para que los stickers
   puedan asomarse — por eso el radio hay que declararlo a mano.) */
#f03-planes .f03-card .window-bar{ border-radius:14.5px 14.5px 0 0 }
#f03-planes .f03-card--destacada .window-bar{ border-radius:13.5px 13.5px 0 0 }

/* ── 2 · LA ETIQUETA "EL MÁS COMPLETO" ────────────────────────────────────
   Se veía tosca porque quedaba montada a media barra. Ahora que la barra llega
   al borde, la etiqueta se sube para que monte sobre el FILO de la tarjeta
   —que es el efecto buscado— y se le quita un punto de rotación: sobre una
   barra recta, 2° se leía como descuadre y no como gesto. */
#f03-planes .f03-tag-flotante{
  /* Antes quedaba a media barra y encima le tapaba el título de la ventana
     ("sitiocompleto.cl"). Ahora se apoya SOBRE el filo superior como una
     pestaña: la mayor parte queda arriba de la tarjeta y solo el borde de
     abajo monta la barra, así el título se lee completo.
     El grado de rotación se baja de 2 a 1: sobre una barra recta, 2° se leían
     como descuadre en vez de como gesto. */
  top:-30px;
  transform:translateX(-50%) rotate(-1deg);
}

/* ── 3 · LOS STICKERS ─────────────────────────────────────────────────────
   El PNG ahora ES la baldosa: trae su propia sombra dura y fondo transparente.
   · El `filter:drop-shadow` de base.css le sumaba una SEGUNDA sombra encima.
   · El `border-radius:10px` en línea le recortaba las esquinas a esa sombra.
   Se anulan los dos: la baldosa se ve tal cual fue dibujada. */
.sticker img{ filter:none; border-radius:0 !important }

/* ── 4 · LA MENSUALIDAD, CENTRADA (solo escritorio) ───────────────────────
   Medido a 1440: el interruptor mide 720px dentro de un contenedor de 1140 y
   arrancaba pegado a la izquierda — 420px de vacío a la derecha, que es
   justo lo que se veía raro. `margin-inline:auto` lo centra.
   En teléfono ya ocupaba el ancho completo: ahí no cambia nada. */
@media(max-width:1079.9px){
  #t04-mantencion .t04-widget{ margin-inline:auto }
}
/* ≥1080 el centrado ya no existe: manda la composición lateral de sections.css
   (23-ago — dos secciones seguidas centradas dejaban los flancos muertos) */

/* ── 5 · "¿PRIMERA VEZ COTIZANDO…?" ───────────────────────────────────────
   Estaba en 14,08px, más chico que el cuerpo del hero (16,5px): se leía como
   letra chica justo donde invita a entender el servicio. Sube a 15,5px —
   por debajo del cuerpo, para no competir con el botón principal. */
#c01-hero .c01-nav2{ font-size:15.5px }

/* ── 6 · LAS TRES GARANTÍAS DEL HERO ──────────────────────────────────────
   "Lista en 7 días · Apruebas antes de pagar el saldo · Hosting y dominio
   incluidos" pasaban desapercibidas: mismo tamaño y color que un pie de foto.
   Suben de peso y de contraste, y el ✓ se pinta del azul de marca para que el
   ojo lo agarre. No se agranda la caja: solo se hace legible lo que ya estaba. */
#c01-hero .c01-badges{ font-weight:600; letter-spacing:.005em }
#c01-hero .c01-badges > *{ color:rgba(244,239,230,.94) }
#c01-hero .c01-badges svg,
#c01-hero .c01-badges [class*="icon"],
#c01-hero .c01-badges [class*="tick"]{ color:var(--glow,#6d86ff) }

/* ── 7 · LOS 7 DÍAS: MENOS VACÍO AL SALIR ─────────────────────────────────
   La escena anclada cerraba con 5rem (80px) de relleno abajo y encima la
   sección sumaba el suyo: al terminar la animación quedaba un hueco largo
   antes del remate. Se recorta a la mitad. El relleno de ARRIBA no se toca:
   es lo que despeja la barra fija mientras la escena está anclada. */
.t03-anim .t03-stage{ padding-bottom:2.5rem }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  8 · LOS 7 DÍAS — EL HUECO, RESUELTO POR ESTRUCTURA                    ║
   ║                                                                       ║
   ║  el cliente lo ha pedido varias veces y las veces anteriores se intentó     ║
   ║  ADIVINAR la altura con constantes (`100svh - 330px`, luego `- 385px`, ║
   ║  `- 400px`…). Por eso nunca quedó: la altura buena depende del alto de ║
   ║  pantalla, del carril, de la burbuja y hasta de cuántas líneas tenga   ║
   ║  el texto — ninguna constante acierta en todas.                        ║
   ║                                                                       ║
   ║  LA CAUSA: la escena mide 100svh (lo necesita para anclarse) pero su   ║
   ║  contenido mide menos, y con `justify-content:center` TODO el sobrante ║
   ║  se reparte como vacío arriba y abajo. Eso es el hueco entre el        ║
   ║  titular y la ventana, y entre el día 7 y "Tu única pega".            ║
   ║                                                                       ║
   ║  LA SOLUCIÓN: que no exista sobrante. La ventana CRECE hasta llenar    ║
   ║  la escena (`flex:1`), en vez de flotar chica en el medio. Es el       ║
   ║  algoritmo del navegador el que reparte, no un número escrito a mano:  ║
   ║  vale para cualquier alto de pantalla, hoy y en un monitor 4K.         ║
   ║  Y respeta lo que pidió el cliente: NO se achica nada — se agranda la       ║
   ║  ventana y se cierra el espacio.                                       ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* la escena reparte su alto: el layout se queda con todo lo que sobre.
   `max-height` es la otra mitad del arreglo y no es opcional: una escena
   ANCLADA tiene que caber en la pantalla. Con solo `min-height` la escena
   crecía con su contenido (medido: 805px en una pantalla de 680) y el pie se
   quedaba fuera. Con mínimo y máximo iguales, la escena mide exactamente la
   pantalla y son los hijos flexibles los que se ajustan — hacia arriba en
   monitores altos, hacia abajo en portátiles bajos. */
.t03-anim .t03-stage{ justify-content:flex-start; max-height:100svh }
.t03-anim .t03-layout{ flex:1 1 auto; min-height:0 }

/* dentro del layout, la columna de la ventana también se estira */
.t03-anim .t03-canvas{ min-height:0 }
.t03-anim .t03-window{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column }
/* y por último la hoja: flex reparte… y el TECHO garantiza el slot.
   23-ago, captura de el cliente: en su navegador la ventana se comía el espacio
   de la leyenda y el «Día 7» quedaba cortado/tapado por el remate. El flex
   sigue mandando hacia abajo, pero la ventana ya no puede crecer más allá
   de lo que deja aire para nav + carril + leyenda (las fórmulas probadas). */
.t03-anim .t03-body{ flex:1 1 auto; min-height:0; height:auto; max-height:none }
/* cinturón del 23-ago: la leyenda y el carril jamás ceden su alto al flex */
.t03-anim .t03-rail,.t03-anim .t03-caps{ flex-shrink:0 }
/* y si algún navegador igual desborda un par de píxeles, la leyenda SIEMPRE
   se lee: pinta por encima de lo que venga después */
.t03-anim .t03-caps{ position:relative; z-index:6 }

@media(min-width:1080px){
  /* en escritorio el layout es fila: se estira para que la ventana ocupe el
     alto completo, y el carril de días se queda centrado a su lado */
  .t03-anim .t03-layout{ align-items:stretch }
  .t03-anim .t03-rail{ align-self:center }
  /* el respiro de abajo lo daba un 1,6rem pensado para compensar el hueco:
     ya no hay hueco que compensar */
  .t03-anim .t03-stage{ padding-bottom:1rem }
}

/* teléfono: el 5rem de abajo era el hueco negro que se veía al terminar */
@media(max-width:1079.9px){
  .t03-anim .t03-stage{ padding-bottom:1.2rem }
}

/* ── 9 · Y EL AIRE DE AFUERA ──────────────────────────────────────────────
   el cliente, con el número en la mano: "del día 7 a 'Tu única pega' deben ser
   unos 20px, no 60-80". Ese hueco no era solo de la escena: la sección
   cerraba con 84px de relleno propio y el remate abría con otros 22.
   Se recorta a un solo respiro. Medido: 84+22 = 106px → 20+8 = 28px. */
#t03-sietedias{ padding-bottom:20px }
#t03-sietedias .t03-remate{ margin-top:8px }

/* ── 10 · CALCULADORA: QUE CUALQUIERA PUEDA CONTESTARLA ───────────────────
   el cliente: "está superbién… pero hay gente que no lo va a utilizar".
   Dos cosas, las dos suyas:
   1) La ETIQUETA. "Local de barrio / Con Instagram activo / Ya me conocen
      harto" describía un TAMAÑO vago — nadie sabe si "lo conocen harto".
      Ahora describe el CANAL, que es un hecho que el dueño sabe sin pensar:
      dónde llegan sus clientes. Es su idea: local físico / Instagram / WhatsApp.
   2) Que SE VEAN tocables. Iban como texto con un borde tenue y "pasaban
      desapercibidos". Ahora son píldoras con relieve, ícono y sombra dura —
      el mismo idioma de los chips de rubro de más arriba, que sí se leen como
      botones. Y al elegir uno se pinta de azul: se ve cuál está activo. */
.f02-atajos{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-top:.75rem;
}
.f02-atajos-lbl{
  width:100%; font-size:.82rem; font-weight:600;
  color:var(--crema,#f4efe6); opacity:.9; margin-bottom:.15rem;
}
.f02-atajo{
  display:inline-flex; align-items:center; gap:.45rem;
  font:inherit; font-size:.84rem; font-weight:700; cursor:pointer;
  padding:.55rem .95rem; min-height:42px;
  border-radius:var(--rad-pill,999px);
  background:rgba(244,239,230,.07);
  color:var(--crema,#f4efe6);
  border:1.5px solid rgba(244,239,230,.42);
  box-shadow:2px 2px 0 rgba(9,9,14,.55);      /* relieve: se lee como botón */
  transition:transform .18s ease, background .25s ease,
             border-color .25s ease, box-shadow .18s ease;
}
.f02-atajo-ico{ font-size:1.05em; line-height:1 }
.f02-atajo:hover{
  background:rgba(244,239,230,.14); border-color:rgba(244,239,230,.8);
  transform:translate(-1px,-1px); box-shadow:3px 3px 0 rgba(9,9,14,.6);
}
.f02-atajo:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(9,9,14,.5) }
.f02-atajo.is-on{
  background:var(--azul,#2440ff); border-color:#09090e; color:#fff;
  box-shadow:2px 2px 0 #09090e;
}
/* táctil: 44px de área de toque */
@media(hover:none){ .f02-atajo{ min-height:44px } }

/* ── 11 · RUBROS (f01): LAS ETIQUETAS DEJAN DE APRETARSE ──────────────────
   el cliente, viendo "Autos": "se ve todo demasiado junto".
   Medido en el rubro Autos, a 1440:
     · las dos etiquetas de la IZQUIERDA quedaban a 13px una de otra
       (top 30,2% y 53,8%, con tarjetas de 21,1% de alto: 2,5% de aire),
     · y las cuatro apuntaban 16 puntos MÁS ARRIBA que la pieza del teléfono
       que describen, así que la línea punteada no aterrizaba donde debía.
   La causa es la de siempre: posiciones escritas a mano (5%, 26%, 48%, 62%)
   que no aguantan textos más largos — y Autos es el rubro de textos largos.
   Se le da aire a la escena y se reparten con separación suficiente para el
   texto más largo de todos los rubros, no solo para el más corto. */
@media(min-width:1080px){
  #f01-como .f01-stage{ min-height:620px }
  #f01-como .f01-label--1{ top:6% }
  #f01-como .f01-label--2{ top:28% }
  #f01-como .f01-label--3{ top:54% }   /* 26 puntos bajo la 2ª: ~51px de aire */
  #f01-como .f01-label--4{ top:76% }
}

/* ══════════════════════════════════════════════════════════════════════════
   AUDITORÍA 22-ago-2026 · los tres hallazgos medidos en el navegador.
   Todo lo de teléfono va DENTRO de @media: en PC no se mueve nada.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 12 · LA BURBUJA DE WHATSAPP TAPABA EL BOTÓN QUE MÁS IMPORTA ──────────
   Medido a 375×812: la burbuja (fixed, 56×56, en 303,682) se montaba
   32px ENCIMA del botón "Cotizar por WhatsApp" del formulario del hero —
   el CTA principal, en la primera pantalla, justo donde cae todo el que
   llega de Instagram.
   Y era redundante: en teléfono la burbuja solo se ve arriba del todo
   (más abajo la reemplaza la barra pegajosa, `body.sticky-on`), o sea que
   su única aparición ocurría exactamente donde estorbaba, con dos botones
   de WhatsApp ya a la vista.
   Se apaga mientras el hero esté en pantalla; reaparece al salir de él.
   Se resuelve al reves de como parece: en telefono la burbuja nace APAGADA
   (regla de CSS, sin depender de que corra nada) y solo se enciende cuando
   el hero ya salio de pantalla. Asi no hay un parpadeo en la primera pintura
   ni queda a merced de que el JS alcance a taparla a tiempo.
   El estado lo pone core.js comparando el scroll contra el fin del hero.
   (Se probo con IntersectionObserver y se descarto: no es auditable en el
    navegador de QA, que lo congela — ver [[limites-navegador-qa]].) */
@media(max-width:1079.9px){
  .wsp-bubble{ opacity:0; pointer-events:none; transform:translateY(12px) }
  body.hero-fuera .wsp-bubble{ opacity:1; pointer-events:auto; transform:none }
  /* la barra pegajosa sigue mandando por encima: si ella esta, la burbuja no */
  body.sticky-on.hero-fuera .wsp-bubble{
    opacity:0; pointer-events:none; transform:translateY(12px);
  }
}

/* ── 13 · LETRA LEGIBLE EN TELÉFONO ───────────────────────────────────────
   Medido: los rótulos de sección a 10,88px (9,28px en la variante mini),
   el kicker del hero a 11,84px, las fichas de confianza a 12,48px y el
   botón "Cotiza gratis" de la barra a 12,8px. En mayúsculas y con
   interletrado, 10,9px es ilegible para un dueño de pyme de 45-60 años,
   que es exactamente el cliente.
   NO se toca el texto de adentro de los teléfonos de mentira (t03-card-nom,
   window-title, postit, badge): ahí lo chico es el efecto — es una página
   simulada vista en miniatura, y agrandarla rompería la ilusión. */
@media(max-width:1079.9px){
  .kicker{ font-size:12px }
  .sec-head--mini .kicker{ font-size:11px }
  /* con #c01-hero delante: re-hero.css ya lo pisaba con un id (0,74rem) */
  #c01-hero .c01-eyebrow,
  .c01-eyebrow{ font-size:13px }
  .t01-chips .chip{ font-size:13px }
  .nav-cta{ font-size:13.5px }
}

/* ── 14 · BLANCOS TÁCTILES DE 44px ────────────────────────────────────────
   Medido en teléfono: "Ver en vivo" quedaba en 30px de alto y los dos
   deslizadores de la calculadora en 25px. El mínimo para el dedo es 44px
   (WCAG 2.5.8 pide 24px; Apple y Google recomiendan 44).
   · El botón: sections.css ya le daba min-height:44px, pero re-telefono.css
     lo bajó a 0 para que escalara junto al aparato. Se le devuelve el piso
     solo donde hay dedo, sin tocar la tipografía que sí debe escalar.
   · El deslizador: se agranda la ZONA de agarre, no la barra. La pista se
     dibuja con background-size:100% 8px centrado, así que subir el alto
     del input deja la barra igual de fina y solo ensancha dónde se puede
     tocar. El botoncito redondo se mantiene en 24px. */
@media(pointer:coarse){
  .t06-phone .t06-play,
  .t06-phone.is-live .t06-play{ min-height:44px }
  .f02-range{ height:44px }
}

/* ── 15 · T03 EN TELÉFONO (24-ago, capturas de el cliente) ─────────────────────
   Medido a 390×780: la notificación (274px) TAPABA la barra de la ventana,
   el sticker 🧩 le chocaba encima, y en pantallas bajas la escena quedaba
   apretada («todo muy por encima»). Todo lo de aquí vive bajo 1080: en PC
   no se mueve un píxel. */
@media(max-width:1079.9px){
  /* notificación COMPACTA y BAJO la barra — nunca tapándola */
  #t03-sietedias .t03-chat{ width:min(68%,240px); top:40px; right:4px }
  #t03-sietedias .t03-chat::before{ font-size:.46rem; padding:.2rem .5rem }
  #t03-sietedias .t03-chat-nom{ font-size:.56rem }
  #t03-sietedias .t03-chat-txt{ font-size:.6rem }
  #t03-sietedias .t03-chat-meta{ font-size:.5rem }
  #t03-sietedias .t03-chat-ava{ width:18px; height:18px; flex-basis:18px; font-size:.42rem; left:.45rem; bottom:.45rem }
  #t03-sietedias .t03-chat-cuerpo{ padding-left:1.9rem }
  /* el sticker 🧩 chocaba con la notificación: fuera en teléfono */
  #t03-sietedias .t03-sticker{ display:none }
  /* día 6: el post-it SIEMPRE entero dentro de la ventana */
  .t03-anim .t03-postit{ right:8px; left:auto; max-width:150px }
}

/* ── 16 · T04B EN TELÉFONO: los 3 casos como chips (en PC son tarjetas) ── */
.t04b-mini-casos{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.7rem 0 0 }
.t04b-mini-casos i{
  font-style:normal; display:inline-flex; align-items:center;
  font-size:.78rem; font-weight:700; color:var(--crema);
  background:rgba(37,211,102,.1); border:1.5px solid rgba(9,9,14,.3);
  border-radius:var(--rad-pill,999px); padding:.3rem .7rem;
}
@media(min-width:1080px){ .t04b-mini-casos{ display:none } }

/* ── 29-ago · f03: la suma del año 1 a la vista ──
   La sorpresa del costo total era la duda #4 del mapa: el precio cerrado
   prometia sin sorpresas, pero la suma anual solo aparecia por WhatsApp.
   Ahora cada tarjeta la dice completa, en chico y sin drama. */
.f03-anual {
  margin-top: .35rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-3, #6b6b76);
}
.f03-anual strong { color: var(--ink, #1a1a22); font-weight: 700; }

/* ── 29-ago · t03b "Tú pones / nosotros ponemos" ── */
.t03b-grid { display: grid; gap: 1.1rem; margin-top: .5rem; }
@media (min-width: 860px) { .t03b-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } .t03b-grid .window-card { height: 100%; } }
.t03b-lista { display: grid; gap: .65rem; padding: 0; margin: 0; list-style: none; }
.t03b-lista--tu li { padding-left: 1.6rem; position: relative; }
.t03b-lista--tu li::before {
  content: "→"; position: absolute; left: 0; color: var(--azul, #2440ff); font-weight: 700;
}
.t03b-nota { margin-top: 1.2rem; font-size: .85rem; }

/* ── 29-ago · f01b "Instagram atrae, la página cierra" ── */
.f01b-grid { display: grid; gap: 1.1rem; }
@media (min-width: 860px) { .f01b-grid { grid-template-columns: repeat(3, 1fr); } }
.f01b-antes { color: var(--ink-3, #6b6b76); }
.f01b-antes::before { content: "Hoy · "; font-weight: 700; color: var(--ink-3, #6b6b76); }
.f01b-despues { margin-top: .55rem; font-weight: 600; }
.f01b-despues::before { content: "Con página · "; font-weight: 700; color: var(--azul, #2440ff); }
.f01b-nota { margin-top: 1.2rem; font-size: .85rem; }

/* ── 29-ago · f03: link al detalle de cada plan ── */
.f03-detalle {
  display: inline-block; margin-top: .6rem;
  font-weight: 700; font-size: .9rem;
  color: var(--azul, #2440ff); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: .1rem;
}
.f03-detalle:hover { opacity: .8; }
.f02-puente { margin-top: 1.4rem; }
.f02-puente a { color: inherit; font-weight: 700; }

/* ── 29-ago · f03: acceso directo a /como-funciona/ bajo los planes ── */
.f03-acceso {
  margin-top: 2.2rem;
  padding: 1.6rem 1.4rem;
  text-align: center;
  border: 1px dashed rgba(255,255,255,.28);
  border-radius: 18px;
}
.f03-acceso-txt { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; }
.f03-acceso-txt em { font-style: normal; color: var(--azul-glow, #3a55ff); }
.f03-acceso-btn { font-size: 1rem; padding: .9rem 1.5rem; }
.f03-acceso-nota { margin-top: .8rem; font-size: .82rem; opacity: .75; }

/* ── 29-ago · las anclas no aterrizan bajo el nav pegajoso ── */
section[id] { scroll-margin-top: 84px; }

/* ── 29-ago · c02b: el índice de la página ── */
.c02b { padding: .9rem 0 !important; border-bottom: 1px solid rgba(9,9,14,.08); }
.c02b-fila { display: flex; align-items: center; gap: 1rem; }
.c02b-rotulo {
  flex: none; font: 700 .72rem/1 Inter, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: #6b6b76;
}
.c02b-chips {
  display: flex; gap: .45rem; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px;
}
.c02b-chips::-webkit-scrollbar { display: none; }
.c02b-chips a {
  flex: none; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .9rem;
  font: 600 .84rem/1 Inter, sans-serif; color: var(--ink, #1a1a22);
  text-decoration: none; background: #fff;
  border: 1px solid rgba(9,9,14,.14); border-radius: 999px;
  transition: border-color .15s ease, transform .15s ease;
}
.c02b-chips a:hover { border-color: var(--azul, #2440ff); transform: translateY(-1px); }
@media (max-width: 700px) {
  .c02b-fila { flex-direction: column; align-items: stretch; gap: .45rem; }
  .c02b-rotulo { font-size: .8125rem; }
  .c02b-chips { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 2.2rem; }
}

/* ── 29-ago v2 · marcador "dónde estoy" en el nav de escritorio ── */
.nav-menu a[aria-current="page"] {
  color: var(--azul, #2440ff);
  box-shadow: inset 0 -2px 0 var(--azul, #2440ff);
  padding-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   29-ago v3 · RONDA MÓVIL COMPACTA — sliders táctiles + arreglos.
   TODO lo de esta ronda vive aquí abajo y solo actúa en teléfono:
   en PC ninguna de estas reglas aplica (regla de el cliente: capa móvil
   independiente). Los controles los inyecta js/re-slider.js.
   ═══════════════════════════════════════════════════════════════ */

/* — controles compartidos (flechas + dots), estilo del sistema — */
.mslider-ctl { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: .6rem; }
.mslider-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 2px solid #09090e; color: #09090e;
  box-shadow: 3px 3px 0 #09090e; font-size: 1.05rem;
  display: grid; place-items: center; cursor: pointer;
  padding: 0 0 1px;   /* el glifo caía 1,5px bajo el centro del círculo */
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s;
}
.mslider-arrow:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #09090e; }
.mslider-arrow[disabled],
.mslider-arrow[aria-disabled="true"] {
  /* Conserva la sombra: sin ella la flecha encogía de 47x47 a 44x44 y quedaba
     con 10,3x menos tinta que su pareja — se leía "mal cargada". Apagada sí,
     descuadrada no. */
  opacity: .45; box-shadow: 3px 3px 0 #09090e; cursor: default;
}
.mslider-dots { display: flex; gap: .15rem; }
.mslider-dot { padding: 12px 6px; background: none; border: 0; cursor: pointer; }
.mslider-dot::before {
  content: ""; display: block; width: 8px; height: 8px; border-radius: 50%;
  background: #c9cede; transition: .3s;
}
.mslider-dot.is-active::before { background: var(--azul, #2440ff); transform: scale(1.35); }
/* variante para secciones oscuras (t06) */
.mslider-ctl--dark .mslider-arrow { background: transparent; border-color: rgba(244,239,230,.9); color: #f4efe6; box-shadow: 3px 3px 0 rgba(0,0,0,.55); }
.mslider-ctl--dark .mslider-arrow[disabled],
.mslider-ctl--dark .mslider-arrow[aria-disabled="true"]{ opacity:.45; box-shadow:3px 3px 0 rgba(0,0,0,.55) }
.mslider-ctl--dark .mslider-dot::before { background: rgba(244,239,230,.28); }
.mslider-ctl--dark .mslider-dot.is-active::before { background: var(--azul-glow, #3a55ff); }

@media (max-width: 859.9px) {
  /* — f01b · "Instagram junta a la gente" → slider — */
  .f01b-grid.is-msl {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: .9rem; padding: .25rem .25rem 1rem;
    margin-inline: -.25rem; scroll-padding-inline: .25rem;
  }
  .f01b-grid.is-msl::-webkit-scrollbar { display: none; }
  .f01b-grid.is-msl > .f01b-card { flex: 0 0 86vw; max-width: 340px; scroll-snap-align: center; min-width: 0; }

  /* — t03b · respiración (esto mata lo "junta") — */
  .t03b-lista { gap: .95rem; }
  .t03b-lista li { margin-bottom: 0; }
  .t03b-lista--tu li { padding-left: 2rem; }
  .t03b-grid { gap: 1.5rem; }
  .t03b-nota { margin-top: 1.6rem; }
  /* — t03b · conmutador Tú pones / Nosotros ponemos — */
  .t03b-toggle {
    display: flex; gap: 4px; padding: 4px; margin: .2rem 0 .9rem;
    background: #f4efe6; border: 2px solid #09090e; border-radius: 999px;
    box-shadow: 4px 4px 0 #09090e;
  }
  .t03b-tbtn {
    flex: 1; border: 0; background: none; border-radius: 999px; cursor: pointer;
    font-family: var(--f-display, Archivo); font-weight: 700; text-transform: uppercase;
    font-size: .72rem; letter-spacing: .06em; padding: .7rem .4rem;
    color: #1a1a22; min-height: 44px; transition: .2s;
  }
  .t03b-tbtn.is-active { background: var(--azul, #2440ff); color: #fff; }
  .t03b-grid.is-msl {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 1rem; padding: .25rem;
    /* La caja mide lo de la tarjeta visible, no lo de la más larga: en
       «Tú pones» sobraban 120,73px de blanco. El overflow-y NO es opcional
       — la tarjeta larga sigue en el flujo y sin él aparece scroll vertical
       dentro de la caja. */
    align-items: flex-start;
    overflow-y: hidden;
    transition: height .26s cubic-bezier(.4,0,.2,1);
  }
  .t03b-grid.is-msl::-webkit-scrollbar { display: none; }
  .t03b-grid.is-msl > .window-card { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; }
}

@media (max-width: 899.9px) {
  /* — f03 · slider de planes + barra de precios comparables — */
  html.js .f03-planbar {
    position: sticky; top: calc(64px + .5rem); z-index: 6;
    display: flex; gap: 8px; margin: .4rem 0 .9rem;
  }
  .f03-chip {
    flex: 1; min-height: 48px; cursor: pointer;
    background: #f4efe6; border: 2px solid #09090e; border-radius: 16px;
    box-shadow: 3px 3px 0 #09090e;
    font-family: var(--f-display, Archivo); font-weight: 800;
    font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
    line-height: 1.35; padding: .5rem .3rem; color: #1a1a22; transition: .2s;
  }
  .f03-chip strong { display: block; font-size: .9rem; }
  .f03-chip.is-active { background: var(--azul, #2440ff); color: #fff; }
  .f03-grid.is-msl {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 14px; padding: 24px 6px 8px;
    margin-inline: -6px; scroll-padding-inline: 6px;
  }
  .f03-grid.is-msl::-webkit-scrollbar { display: none; }
  .f03-grid.is-msl > .f03-card { flex: 0 0 85%; scroll-snap-align: center; min-width: 0; }
  /* que el recorte del track no decapite los stickers de la destacada */
  .f03-grid.is-msl .f03-sticker-star { right: -6px; }
  .f03-grid.is-msl .f03-sticker-cart { left: -6px; }
  /* — bonos a 2 columnas: mismo valor, mitad de alto — */
  .f03-bonos { grid-template-columns: 1fr 1fr; gap: .8rem .7rem; }
  /* — bugs móviles detectados en la auditoría — */
  .f03-acceso-btn { white-space: normal; width: 100%; }
  .f02-puente { padding-inline: clamp(1.1rem, 4.5vw, 2rem); }
  .f03-escasez { display: block; position: relative; padding-left: 2.3rem; }
  .f03-escasez-dot { position: absolute; left: 1.05rem; top: .95rem; }
}
/* la barra de precios no existe en PC ni sin JS */
@media (min-width: 900px) { .f03-planbar { display: none !important; } }
html:not(.js) .f03-planbar { display: none; }

@media (max-width: 767.9px) {
  /* — t05 · reseñas: 1 por slide, y cada tarjeta con SU alto (31-ago) —
     Antes `min-height:300px` las clavaba a las tres: medido, sobraban
     120,65 / 118,65 / 144,20px de hueco muerto. Ahora cada una mide lo que
     mide su texto. `align-items:flex-start` anula el stretch heredado de
     sections.css:775 SOLO en teléfono (en PC la grilla de 3 columnas sí lo
     necesita para quedar pareja: allá no se toca).
     Los 6px de padding dejan respirar la sombra dura de la 3ª, que si no
     se recorta 0,8px contra el borde del carrusel. */
  .t05-grid.mslide > * { flex: 0 0 100%; }
  .t05-grid.mslide { align-items: flex-start; padding-right: 6px; }

  /* — t05 · reseñas: se queda dentro del bloque de teléfono — */
}

/* ══ t02 · la tarjeta rotatoria de compromisos, en TODO ancho (31-ago) ══
   La pila de 4 píldoras inclinadas se leía como decoración caída, en
   teléfono y en PC. La tarjeta se explora igual de bien en las dos: una
   sola versión, la que funciona. */
html.js .t02-pills, html.js .t02-caps { display: none; }
.t02-rotor { margin-top: .4rem; margin-bottom: 0; }   /* 73,6 → 28px: el ritmo del resto del home */
.t02-rotor-card {
  position: relative; min-height: 190px; color: #1a1a22;
  background: #fff; border: 2px solid #09090e; border-radius: 18px;
  box-shadow: 4px 4px 0 var(--azul, #2440ff);
  padding: 1.1rem 1.2rem 1.2rem;
}
.t02-rotor-kicker {
  font-family: var(--f-display, Archivo); font-weight: 800;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--azul, #2440ff);
}
.t02-rotor-card h3 { font-family: var(--f-display, Archivo); font-weight: 700; font-size: 1.05rem; margin: .35rem 0 .3rem; color: #09090e; }
.t02-rotor-card p { font-size: .9rem; line-height: 1.5; color: #444; margin: 0; padding-right: 3.2rem; }
.t02-rotor-next {
  position: absolute; right: .8rem; bottom: .8rem;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: #f4efe6; border: 2px solid #09090e; color: #09090e;
  box-shadow: 2px 2px 0 #09090e; font-size: 1.05rem;
  display: grid; place-items: center; padding: 0 0 1px;
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}
.t02-rotor-next:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #09090e; }
@media (hover:hover) and (pointer:fine){
  .t02-rotor-next:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 #09090e }
}
.t02-rotor-dots { justify-content: center; margin-top: .5rem; }

/* En PC hay ancho: la tarjeta respira y el texto sube de tamaño, pero la
   anatomía es exactamente la del teléfono. */
@media (min-width: 768px){
  .t02-rotor { max-width: 640px; margin-inline: auto; margin-bottom: 3.4rem }
  .t02-rotor-card { min-height: 176px; padding: 1.5rem 1.7rem 1.6rem; border-radius: 20px; box-shadow: 6px 6px 0 var(--azul,#2440ff) }
  .t02-rotor-kicker { font-size: .74rem; letter-spacing: .16em }
  .t02-rotor-card h3 { font-size: 1.3rem; margin: .45rem 0 .4rem }
  .t02-rotor-card p { font-size: 1rem; line-height: 1.55; padding-right: 4rem }
  .t02-rotor-next { right: 1.1rem; bottom: 1.1rem; width: 48px; height: 48px; font-size: 1.15rem }
}

/* ── 29-ago v4 · chat compacto en teléfono (el min-height era aire muerto) ── */
@media(max-width:1079.9px){
  .t04b-hilo{ min-height:0; padding:.7rem .8rem .8rem }
}

/* ════ 30-ago · ritmo Apple bajo el pin de 7 días: nada pegado, nada suelto ════
   Escala 12/16: nav→carril 12 · carril→ventana 12 · ventana→leyenda 16 ·
   leyenda→CTA sticky ≥16. La ventana ya NO se estira más allá de su
   contenido y el body recupera su techo por calc — el sobrante de pantalla
   lo absorbe el body (crece en 844, se compacta en 640). Validado a
   390×664 (Safari iPhone real), 360×640 y 390×844, los 7 días. */
@media (max-width:1079.9px){
  .t03-anim .t03-stage{
    /* lo que ocupa la barra sticky: botón 52px + bottom .8rem + muesca iPhone */
    --t03-cta: calc(66px + env(safe-area-inset-bottom, 0px));
    padding-top: calc(var(--nav-h) + 14px);
    padding-bottom: calc(var(--t03-cta) + 16px);
  }
  .t03-anim .t03-layout{ gap:12px }
  .t03-anim .t03-canvas{ gap:16px }
  .t03-anim .t03-window{ flex:0 1 auto; min-height:0 }
  .t03-anim .t03-body{
    flex:1 1 auto; height:auto; min-height:150px;
    max-height:calc(100svh - 340px);   /* techo de seguridad: jamás vuelve a comerse el aire */
  }
  .t03-anim .t03-caps{ margin:0 auto }
}

/* ════ tarjetas del catálogo: carril skeleton tenue hasta que llega su texto ════
   Vive DETRÁS de la info real (::after del figure, z0); la figcaption sube a
   z1 con fondo blanco y lo CUBRE al revelarse el día 4 — el clipPath de los
   .t03-fill del hero no se toca en absoluto. */
.t03-anim .t03-card{ position:relative }
.t03-anim .t03-card::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:.45rem; right:.45rem; bottom:.4rem; height:52px;
  background:
    linear-gradient(#e9e9ee,#e9e9ee) left 0 top 2px / min(74%,170px) 10px,
    linear-gradient(#e9e9ee,#e9e9ee) left 0 top 18px / min(44%,110px) 7px,
    linear-gradient(#e9e9ee,#e9e9ee) left 0 bottom 4px / min(34%,90px) 13px,
    radial-gradient(circle, #e9e9ee 62%, transparent 66%) right 0 bottom 1px / 21px 21px;
  background-repeat:no-repeat;
}
.t03-anim .t03-card-info{ position:relative; z-index:1; background:#fff }
/* ≥520px las tarjetas no destacadas son horizontales (foto 40% izquierda):
   el carril se corre al lado del texto — también rige en escritorio */
@media (min-width:520px){
  .t03-anim .t03-card:not(.t03-card--destacada)::after{
    left:calc(40% + .5rem); right:.5rem; top:50%; bottom:auto;
    transform:translateY(-50%);
  }
}

/* ═══ 30-ago v2 · FLUIDEZ — nada se quita, lo invisible se calla ═══ */
/* keyframes infinitos pausados en secciones lejos del viewport (core.js
   marca .is-cerca con colchón del 30%; sin JS el selector no actúa) */
html.js main section[id]:not(.is-cerca) *,
html.js main section[id]:not(.is-cerca) *::before,
html.js main section[id]:not(.is-cerca) *::after{ animation-play-state:paused !important }

/* el shimmer de carga de las demos dejaba de verse pero seguía pintando
   infinito DEBAJO del iframe encendido */
.t06-phone.is-live .t06-screen::after{ animation:none }

/* la rueda ya no muere sobre los teléfonos: el iframe solo recibe input
   cuando el usuario apretó "Ver en vivo" (is-mirando) */
.t06-phone:not(.is-mirando) .t06-screen iframe{ pointer-events:none }

/* capa estable para los bucles de transform que sí se ven */
.c01-formwrap,.t01-sticker,.f03-sticker-star,.f03-sticker-cart,.f05-sticker{ will-change:transform }
/* los velos de acto transicionan opacity: que vivan en su propia capa */
body::before,body::after{ will-change:opacity }

/* el blur del nav re-rasteriza toda la pantalla en cada frame de scroll:
   en teléfono, fondo casi opaco + blur a la mitad (indistinguible) */
@media (max-width:767.9px){
  .nav{ background:rgba(244,239,230,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
}

/* ═══ 30-ago v3 · CIERRE TOTAL — pulido al píxel (auditoría final) ═══ */
/* 🧩 del taller: en PC vivía tapado 96% por la notificación de chat (misma esquina) */
@media(min-width:1080px){ .t03-sticker{ right:auto; left:-14px; transform:rotate(-8deg) } }
/* el sticky del ancla ya no viaja sobre las tarjetas: su rango es .f03-cabeza */
.f03-cabeza{ position:relative }
/* etiqueta "El más completo" rebanada por el ancla en 900-1023 */
@media(min-width:900px) and (max-width:1023.9px){ #f03-planes .f03-ancla{ margin-bottom:3.4rem } }
/* puente "¿Te suena a chino?" pegado al borde x=0 en PC */
.f02-puente{ max-width:72ch; margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem); box-sizing:content-box }
/* barra de precios móvil: velo del color de la sección (se leía el texto entre las pills) */
@media(max-width:899.9px){
  html.js .f03-planbar{ background:rgba(11,13,38,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border-radius:20px; padding:6px; margin-inline:-6px }
}
/* FAB de WhatsApp pisaba el final de 2 líneas del footer en móvil */
@media(max-width:767.9px){ .footer-grid>div:first-child p{ padding-right:64px } }
/* velo del menú burger del home: el hero se transparentaba detrás */
@media(max-width:1079.9px){
  .nav-menu.is-open{ background:rgba(244,239,230,.98); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
}
/* costura del encabezado sticky de la comparación (f04) en móvil */
@media(max-width:767.9px){ #f04-comparacion .sec-head--mini{ top:64px; background:#fbfaf6; box-shadow:0 -3px 0 #fbfaf6 } }
/* sticker de z01 pisaba media línea del texto en móvil */
@media(max-width:767.9px){ .z01-ask-sticker{ transform:rotate(9deg) } }
/* micro-recorte de la ⭐ de t05 en 480-568 */
@media(max-width:767.9px){ .t05-grid.mslide .t05-sticker{ right:-4px } }
/* dots del slider: área táctil ≥24px de ancho */
.mslider-dot{ padding:12px 8px }

/* ═══ 30-ago v4 · CACERÍA AL PÍXEL — lo que faltaba ═══ */
/* el link dentro de la tarjeta del taller no se veía como link */
.t05-texto a{ color:var(--azul,#2440ff); text-decoration:underline; text-underline-offset:3px; font-weight:600 }
.t05-texto a:hover{ text-decoration-thickness:2px }
/* hover de las 4 píldoras-compromiso: perdía por especificidad, nunca se veía */
html.js .t02-pill:not(.is-active):hover{ opacity:1 }
/* el toggle CON/SIN y los 7 chips del rail eran clicables sin ningún feedback */
.t04-tbtn:not(.is-active):hover{ color:#09090e; background:rgba(36,64,255,.08) }
.t03-day:not(.is-active):hover{ background:rgba(36,64,255,.18); border-color:rgba(244,239,230,.35) }
/* costura de 3px bajo el nav en la comparación (PC) */
@media(min-width:768px){ #f04-comparacion .sec-head{ top:65px } }
/* móvil: los garabatos del lienzo se veían A TRAVÉS de las filas del FAQ */
@media(max-width:767.9px){ #z01-faq .acc{ background:#f7f2e9 } }
/* la barra de precios dejaba pasar una línea de texto por arriba */
@media(max-width:899.9px){ html.js .f03-planbar{ top:65px } }
/* el FAB no puede pisar el formulario del cierre */
@media(max-width:1079.9px){ body.at-cierre .wsp-bubble{ opacity:0; pointer-events:none; transform:translateY(12px) } }

/* ══════════════════════════════════════════════════════════════
   PASE FINAL DE LANZAMIENTO (31-ago) — estados que faltaban
   ══════════════════════════════════════════════════════════════ */

/* Las 5 pestañas del FAQ eran el único riel-toggle del sitio sin ningún
   feedback al pasar por encima: medido 0% de cambio de píxel. */
#z01-faq .tab-btn:not(.is-active):hover,
#z01-faq .tab-btn:not(.is-active):focus-visible{
  color:#09090e; border-color:rgba(9,9,14,.45); background:rgba(36,64,255,.07)
}

/* Los 3 iframes del portafolio eran los únicos de ~430 paradas de tabulación
   sin anillo de foco: quien navega con teclado no sabía dónde estaba. */
#t06-portafolio iframe:focus-visible{
  outline:3px solid var(--azul,#2440ff); outline-offset:3px; border-radius:6px
}

/* ══════════════════════════════════════════════════════════════════════
   31-ago · LOS HUECOS QUE el dueño NOMBRÓ, UNO POR UNO
   ══════════════════════════════════════════════════════════════════════
   No es un rediseño del espaciado: son las 4 fronteras concretas que él
   señaló. Medidas a 390x844 y confirmadas en 360x640, 390x664 y 430x932.
   La frontera estándar del home es 88,41px; la que él aprueba (t03→t03b y
   el FAQ) es 68,41 / 59,19. Estas cuatro estaban en 88,4 y bajan a 68,41.
   Van dentro del media query: sobre 760px el ritmo de PC no se toca.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px){
  /* Punto 7 · «Sin reuniones eternas…» → «LA MENSUALIDAD».
     Medido 88,41px, y las dos secciones tienen EL MISMO fondo (238,241,251)
     y no hay divisor entre medio: el hueco no separa nada, solo vacía. */
  #t03b-tupones{ padding-bottom:var(--s4) }

  /* Puntos 8 y 12 · «Mira cómo se hace ↓» → «APRENDE JUGANDO» (88,4px) y
     «Ver los planes ↓» → «¿YA VENDES POR INSTAGRAM?» (88,4px). Es la misma
     sección por arriba y por abajo, así que se resuelve en una regla.
     Los otros dos huecos de esa cadena ya estaban en ritmo y NO se tocan:
     nota→banda 28px, y botón→botón 14px (el mismo row-gap del FAQ). */
  #f01-como{ padding-block:var(--s4) }

  /* Punto 13 · «Una agencia te cobra…». el dueño la quiere un poco más arriba,
     "ni pegada ni tan suelta". Medido: el puente quedaba a 19,19px del borde
     de los planes (pegado) y el título a 67,59px. Ahora el puente respira
     los 28 del ritmo y el título sube 12px. */
  #f02-calc{ padding-bottom:var(--s5) }
  #f03-planes{ padding-top:var(--s5) }
}