/* ============================================================
   ACTO CALIENTE — caliente.css
   c01-hero (póster negro 92svh, grid contenido/form)
   c02-marquee (cinta azul, loop -50%)
   ============================================================ */

/* ---------- c01-hero ---------- */
#c01-hero{
  min-height:92svh;
  display:flex;align-items:center;
  overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(1.2rem,3.5vw,2.2rem));
}
#c01-hero .container{width:100%}
.c01-grid{
  position:relative;z-index:1;
  display:grid;gap:clamp(2.4rem,6vw,3.4rem);align-items:center;
}
@media(min-width:1080px){
  .c01-grid{grid-template-columns:1.15fr 380px;gap:clamp(2.6rem,4.5vw,4.2rem)}
}

/* Entrada gateada (patrón v1 seguro: CSS oculta SOLO con :not(.c01-in);
   el JS agrega .c01-in SIEMPRE antes de animar) */
html.js #c01-hero:not(.c01-in) :is(.c01-eyebrow,.c01-line,.c01-sub,.c01-precio,.c01-nav2,.c01-badge,.c01-window,.c01-stk){opacity:0}

/* Donas gigantes recortadas — decorado propio del acto (parallax por JS) */
.c01-arc{position:absolute;aspect-ratio:1/1;border-radius:50%;pointer-events:none;z-index:0;will-change:transform}
.c01-arc--tl{
  width:clamp(300px,44vw,640px);
  border:clamp(38px,5.5vw,82px) solid #f4efe6;
  top:min(-16vw,-150px);left:min(-15vw,-140px);
  opacity:.94;
}
.c01-arc--br{
  width:clamp(240px,36vw,540px);
  border:clamp(32px,4.5vw,68px) solid var(--azul);
  bottom:min(-14vw,-130px);right:min(-12vw,-110px);
  box-shadow:0 0 90px rgba(36,64,255,.28),inset 0 0 60px rgba(36,64,255,.18);
}

/* Eyebrow pill */
.c01-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.45rem 1.05rem;border-radius:var(--rad-pill);
  border:1.5px solid var(--line-strong);background:var(--glass-bg);
  font-size:.8rem;color:var(--muted);margin-bottom:1.15rem;
}
.c01-eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--azul-glow);box-shadow:0 0 10px var(--azul-glow);
  animation:c01Pulse 2.2s ease-in-out infinite;
}
@keyframes c01Pulse{50%{opacity:.45;transform:scale(.78)}}

/* Titular */
.c01-t{margin:0}
.c01-line{display:block}
.c01-t em{font-style:normal;color:var(--azul-glow)}
.c01-sub{max-width:52ch}

/* Chip de precio temprano (píldora rotada crema, precio ESCRITO) */
.c01-precio{
  display:inline-flex;align-items:center;margin-top:1.2rem;
  padding:.55rem 1.35rem;border-radius:var(--rad-pill);
  background:#f4efe6;color:#09090e;border:2px solid #09090e;
  box-shadow:4px 4px 0 rgba(36,64,255,.9);
  font-family:var(--f-display);font-weight:800;font-size:1rem;letter-spacing:.01em;
  transform:rotate(-2deg);
}

/* Botón secundario: NAVEGA a #f01-como */
.c01-band{margin-top:1.25rem}
.c01-nav2{white-space:normal;text-align:left;min-height:44px;font-size:.88rem;padding:.75rem 1.3rem}

/* Badges */
.c01-badges{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.25rem}
.c01-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem .9rem;border-radius:var(--rad-pill);
  border:1px solid var(--line);background:var(--glass-bg);
  font-size:.8rem;color:var(--muted);
}
.c01-badge b{color:var(--azul-glow);font-weight:800}

/* ---------- Formulario (columna en grid, nunca absolute) ---------- */
.c01-formwrap{position:relative;width:100%;max-width:440px;margin-inline:auto}
@media(min-width:1080px){.c01-formwrap{max-width:none;margin:0}}

/* Ventana retro forzada CLARA sobre el póster negro (como la gráfica real) */
#c01-hero .c01-window{
  background:#fff;border-color:#09090e;
  box-shadow:8px 8px 0 rgba(36,64,255,.9);
}
#c01-hero .c01-window .window-body{color:#1a1a22;padding:clamp(1.15rem,2.6vw,1.55rem)}
.c01-form-titulo{font-family:var(--f-display);font-weight:800;font-size:1.22rem;letter-spacing:-.01em;color:#09090e}
.c01-form-sub{font-size:.87rem;line-height:1.5;color:rgba(26,26,34,.68);margin:.4rem 0 1.1rem}
#c01-hero .c01-window .form-field{margin-bottom:.85rem}
#c01-hero .c01-window .form-field input{
  background:#f7f3ea;border-color:rgba(9,9,14,.22);color:#1a1a22;min-height:48px;
}
#c01-hero .c01-window .form-field input::placeholder{color:rgba(26,26,34,.45)}
#c01-hero .c01-submit{
  width:100%;min-height:52px;margin-top:.15rem;
  border:1.5px solid #09090e;box-shadow:4px 4px 0 #09090e;
}
#c01-hero .c01-submit:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #09090e}
.c01-ok{margin-top:.9rem;font-size:.86rem;line-height:1.5;color:#0da35e}
.c01-ok a{color:var(--azul);text-decoration:underline;font-weight:600}

/* Stickers asomándose por las esquinas de la ventana */
/* el corazón tapaba el final de "cotiza.cl": el título se corre a la izquierda */
#c01-hero .c01-window .window-title{margin-right:2.1rem}
.c01-stk{z-index:3}
.c01-stk--corazon{top:-20px;right:-14px;transform:rotate(6deg)}
.c01-stk--cohete{bottom:-18px;left:-16px;transform:rotate(-9deg)}

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

/* Ajustes móviles */
@media(max-width:430px){
  .c01-eyebrow{font-size:.72rem;padding:.4rem .85rem}
  .c01-nav2{width:100%}
}

/* ---------- c02-marquee ---------- */
.c02{position:relative;z-index:2}
.c02 .marquee-track{animation-duration:30s}
@media(max-width:640px){.c02 .marquee-item{font-size:.85rem}}


/* ════════════════════════════════════════════════════════════
   ACTO TIBIO — confianza (crema, transparente sobre el lienzo)
   t01-equipo · t02-garantia · t03-sietedias · t04-mantencion · t05-resenas
   ════════════════════════════════════════════════════════════ */

/* ── t01 · Quién está detrás ─────────────────────────────── */
.t01-card{padding:clamp(1.4rem,3.5vw,2.2rem);overflow:visible}
.t01-sticker{top:-20px;left:-14px;transform:rotate(-8deg)}
.t01-grid{gap:clamp(1.4rem,3.5vw,2.4rem);align-items:start}
@media(min-width:768px){.t01-grid{grid-template-columns:.85fr 1.15fr}}

/* Póster de marca (decisión el cliente: empresa, no foto de persona) */
.t01-poster{
  position:relative;min-width:0;overflow:hidden;
  aspect-ratio:4/5;border-radius:16px;
  background:#060608;border:2px solid #09090e;
  box-shadow:var(--sombra-dura);
  display:grid;place-items:center;isolation:isolate;
}
.t01-poster-arc{position:absolute;border-radius:50%;pointer-events:none}
.t01-poster-arc--a{
  width:78%;aspect-ratio:1;top:-34%;left:-26%;
  border:clamp(26px,3.2vw,46px) solid #fff;
}
.t01-poster-arc--b{
  width:34%;aspect-ratio:1;bottom:-10%;right:-9%;
  border:clamp(14px,1.8vw,24px) solid #fff;
}
.t01-poster-arc--c{
  width:46%;aspect-ratio:1;bottom:-20%;left:-16%;
  border:clamp(18px,2.4vw,32px) solid var(--azul);
}
.t01-poster-logo{
  width:min(56%,210px);height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 10px 26px rgba(36,64,255,.36));
  animation:t01flota 5.5s ease-in-out infinite;
}
@keyframes t01flota{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
.t01-poster-handle{
  position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:2;
  font-family:var(--f-display);font-weight:800;font-stretch:125%;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(244,239,230,.85);white-space:nowrap;
}

.t01-texto p+p{margin-top:.85rem}
.t01-texto>p{color:var(--muted);font-size:.97rem}
.t01-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.t01-chips .chip{min-height:34px}

.t01-quote{
  margin-top:1.4rem;padding:.35rem 0 .35rem 1.1rem;
  border-left:3px solid var(--azul);
}
.t01-quote .h-fina{font-size:clamp(1.12rem,2.8vw,1.45rem)}
.t01-firma{display:flex;align-items:center;gap:.75rem;margin-top:.9rem}
.t01-firma-img{height:40px;width:auto;flex:0 0 auto}
.t01-firma-nombre{font-size:.9rem;color:var(--muted)}
.t01-firma-nombre em{font-style:normal;font-size:.72rem;letter-spacing:.12em;color:var(--white);white-space:nowrap} /* "TU PLANTILLA" jamás se parte a mitad de marca */

/* ── t02 · Garantía 50/50 ────────────────────────────────── */
.t02-layout{display:flex;flex-direction:column;gap:clamp(1.4rem,3.5vw,2.2rem);align-items:center}
@media(min-width:768px){.t02-layout{flex-direction:row;align-items:center;gap:clamp(2rem,5vw,3.5rem)}}

.t02-sello-wrap{flex:0 0 auto}
.t02-sello{width:clamp(190px,42vw,250px);height:auto;display:block}
.t02-sello-giro{transform-box:view-box;transform-origin:50% 50%;animation:t02spin 24s linear infinite}
@keyframes t02spin{to{transform:rotate(360deg)}}
.t02-sello-texto{
  font-family:var(--f-display);font-weight:700;font-size:13.5px;
  letter-spacing:.18em;fill:#f4efe6; /* t02 vive en acto-dark: tinta crema, no negra */
}
/* el anillo exterior venía negro sobre negro: se re-entinta claro */
#t02-garantia .t02-sello circle:first-of-type{stroke:rgba(244,239,230,.4)}
.t02-sello-5050{font-size:37px;fill:var(--azul);letter-spacing:0}

.t02-pasos{display:flex;flex-direction:column;gap:1rem;flex:1;min-width:0}
@media(min-width:1080px){.t02-pasos{flex-direction:row;gap:1.4rem;align-items:start}}
.t02-paso{display:flex;gap:.9rem;align-items:flex-start;min-width:0}
@media(min-width:1080px){.t02-paso{flex-direction:column;gap:.7rem}}
.t02-paso-num{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--azul);color:#fff;border:2px solid #09090e;
  font-family:var(--f-display);font-weight:800;font-size:1.15rem;
  box-shadow:3px 3px 0 #09090e;
}
.t02-paso p{color:var(--muted);font-size:.93rem}

.t02-compromisos{margin-top:clamp(1.6rem,4vw,2.4rem);text-align:center}
.t02-comp-hint{margin-bottom:.9rem}
.t02-pills{gap:.2rem}
.t02-pill{min-height:44px;cursor:pointer;transition:transform .3s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s,opacity .3s}
html.js .t02-pill{opacity:.78} /* .62 dejaba las píldoras negras casi invisibles sobre el acto oscuro */
html.js .t02-pill.is-active{opacity:1;box-shadow:var(--sombra-dura)}
.t02-pill:hover{opacity:.9}
/* la rotación de .pill-rot vive en nth-child; el hover solo levanta */
html.js .t02-pill.is-active:nth-child(odd){transform:rotate(-4deg) translateY(-2px)}
html.js .t02-pill.is-active:nth-child(even){transform:rotate(3deg) translateX(8%) translateY(-2px)}

.t02-caps{max-width:520px;margin:1.1rem auto 0}
.t02-cap{font-size:.93rem;color:var(--muted)}
.t02-cap strong{color:var(--crema)}
.t02-cap+.t02-cap{margin-top:.6rem}
/* con JS: solo la activa, superpuestas */
html.js .t02-caps{display:grid}
html.js .t02-cap{
  grid-area:1/1;margin:0!important;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s cubic-bezier(.2,.8,.3,1),transform .4s cubic-bezier(.2,.8,.3,1);
}
html.js .t02-cap.is-active{opacity:1;transform:none}

/* ── t03 · Los 7 días ────────────────────────────────────── */
.t03-stage{padding-block:clamp(.6rem,2vw,1.4rem)}
.t03-layout{display:flex;flex-direction:column;gap:.85rem;width:100%;min-width:0}
@media(min-width:1080px){.t03-layout{flex-direction:row;align-items:center;gap:3rem}}

.t03-rail{
  display:flex;gap:.5rem;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-block:.3rem;min-width:0;
  /* deja espacio fantasma a los costados para que setDay() pueda centrar
     también el primer y el último día — sin esto, scrollLeft se clampea
     en 0/max y el día 7 (el último) queda pegado a la derecha, no centrado */
  padding-inline:clamp(70px,28vw,150px);
  scroll-padding-inline:clamp(70px,28vw,150px);
}
.t03-rail::-webkit-scrollbar{display:none}
@media(min-width:1080px){.t03-rail{flex-direction:column;overflow:visible;flex:0 0 235px;gap:.55rem;padding-inline:0}}
.t03-day{
  flex:0 0 auto;cursor:pointer;
  display:inline-flex;align-items:baseline;gap:.55rem;
  padding:.55rem 1rem;min-height:44px;
  border:1.5px solid var(--line-strong);border-radius:var(--rad-pill);
  background:var(--panel);
  transition:border-color .35s,background .35s,transform .35s cubic-bezier(.2,.8,.3,1),opacity .35s,box-shadow .35s;
}
.t03-day:hover{transform:translateY(-2px)}
.t03-day-num{
  font-family:var(--f-display);font-weight:800;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--azul-glow);white-space:nowrap;
}
.t03-day-tit{font-family:var(--f-display);font-weight:700;font-size:.88rem;color:var(--muted);white-space:nowrap;transition:color .35s}
.t03-day.is-active{border-color:#09090e;background:rgba(36,64,255,.1);box-shadow:3px 3px 0 #09090e}
.t03-day.is-active .t03-day-tit{color:var(--white)}
.t03-day.is-done{opacity:.5}
.t03-day.is-done .t03-day-num{color:var(--ok)}
@media(min-width:1080px){.t03-day.is-active{transform:translateX(8px)}}

.t03-canvas{flex:1;min-width:0;display:flex;flex-direction:column;gap:.8rem}
.t03-window{
  width:100%;max-width:560px;margin-inline:auto;
  overflow:visible;position:relative;
  box-shadow:var(--sombra-dura);
  will-change:transform;
}
.t03-window .window-bar{border-radius:13px 13px 0 0}
.t03-window .window-title{margin-left:auto}
.t03-sticker{top:-18px;right:-14px;transform:rotate(8deg);z-index:3}
@media(max-width:1079px){
  /* en móvil el container solo deja ~17.6px de aire a la derecha: se reduce
     y se sube el sticker para que quede MAYORMENTE sobre el borde superior
     de la ventana (no encima de la barra) — así se asoma con estilo sin
     comerse el borde del viewport ni el badge EN LÍNEA (que a full-size,
     día 7/is-live, es bien ancho y ocupa casi toda la barra). top:-39px
     (no -34px) es a propósito: medido con getBoundingClientRect en los
     3 días contra el badge ya escalado (is-live), -34px dejaba la caja del
     sticker rotado tocando la caja del badge (gap negativo, colisión de
     ~0.6px); -39px deja ~4px de aire real, verificado en 375/390/430px */
  .t03-sticker{top:-39px;right:-2px;width:40px;height:40px;font-size:1.05rem}
}
.t03-body{
  position:relative;
  min-height:290px;padding:.95rem 1rem;border-radius:0 0 13px 13px;
}
/* t03-page = el "documento" que se arma día a día (crece de verdad); t03-body
   es la ventana que lo contiene. Por defecto (sin JS) es un simple contenedor
   flex — el recorte con altura fija y overflow:hidden solo se activa en modo
   animado, ver bloque .t03-anim .t03-body más abajo. */
.t03-page{display:flex;flex-direction:column;gap:.6rem;width:100%}

/* ── Mini-escenas: la página del cliente se construye DE VERDAD ── */
/* Zonas del plano (día 1): wire punteado + sello */
.t03-zone{position:relative;padding:.55rem .6rem .6rem}
.t03-wire{position:absolute;inset:0;border:1.5px dashed rgba(36,64,255,.55);border-radius:9px;pointer-events:none}
.t03-stamp{
  position:absolute;top:-9px;left:10px;z-index:2;
  font-family:var(--f-display);font-weight:800;font-size:.52rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:#2440ff;background:#fff;border:1.5px solid #2440ff;border-radius:999px;
  padding:.14rem .5rem;   /* derecho, sin diagonal: etiqueta técnica que no ensucia la lectura */
}

/* Día 2 · las palabras: titular que se escribe + líneas que se rellenan */
.t03-headline{
  margin:0;font-family:var(--f-display);font-weight:800;
  font-size:clamp(.92rem,3.2vw,1.15rem);line-height:1.18;color:#09090e;
  min-height:1.25em;
}
.t03-caret{
  display:inline-block;width:2px;height:.9em;margin-left:2px;vertical-align:-.1em;
  background:#2440ff;opacity:0;
}
/* 23-ago · las barras grises eran esqueleto para siempre («grita mockup»):
   los fills ahora son la bajada REAL. El JS los revela con clipPath (no
   scaleX: aplastaría el texto). */
.t03-fill{display:block;margin-top:.4rem;font-size:.58rem;line-height:1.5;color:rgba(26,26,34,.7);max-width:36ch}
/* la 2ª línea era texto gris al 50% («borroso», dijo el cliente): ahora son chips
   nítidos con check — siguen siendo .t03-fill, el reveal por clipPath es el mismo */
.t03-fill--2{display:flex;gap:.3rem;flex-wrap:wrap}
.t03-fill--2 i{
  font-style:normal;display:inline-flex;align-items:center;gap:.22rem;
  font-size:.48rem;font-weight:700;color:#09090e;
  background:#fff;border:1px solid rgba(9,9,14,.28);border-radius:999px;
  padding:.14rem .42rem;white-space:nowrap;
}
.t03-fill--2 i::before{content:"✓";color:#1fa855;font-weight:800}
.t03-kicker{
  display:inline-flex;font-size:.48rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#2440ff;background:rgba(36,64,255,.08);
  border:1px solid rgba(36,64,255,.35);border-radius:999px;padding:.14rem .5rem;margin-bottom:.3rem;
}
.t03-heroctas{display:flex;gap:.4rem;margin-top:.5rem}
.t03-ctamini{
  display:inline-flex;align-items:center;font-family:var(--f-display);font-weight:800;
  font-size:.56rem;padding:.3rem .65rem;border-radius:999px;border:1.5px solid #09090e;
}
.t03-ctamini--wsp{background:#25d366;color:#fff;box-shadow:1.5px 1.5px 0 #09090e}
.t03-ctamini--ghost{background:#fff;color:#09090e}
.t03-hero-foto{position:relative;display:block;aspect-ratio:16/7;border-radius:9px;overflow:hidden;border:1.5px solid rgba(9,9,14,.16);margin-top:.6rem}
/* 23-ago v2: el bisel de teléfono se recortó EN los archivos — cero zoom */
.t03-hero-foto .t03-foto-real{object-position:50% 50%}
.t03-hero-chips{position:absolute;left:6px;bottom:6px;display:flex;gap:.3rem;z-index:2}
.t03-hero-chips i{font-style:normal;font-size:.46rem;font-weight:700;color:#09090e;background:rgba(255,255,255,.92);border:1px solid rgba(9,9,14,.25);border-radius:999px;padding:.12rem .4rem;white-space:nowrap}
/* barra de navegación en miniatura: primera pieza de una landing real */
.t03-nav{display:flex;align-items:center;gap:.5rem;padding:.1rem .1rem .45rem;border-bottom:1px solid rgba(9,9,14,.08);margin-bottom:.5rem}
.t03-nav-logo{font-family:var(--f-display);font-weight:800;font-size:.66rem;color:#09090e}
.t03-nav-logo b{color:#2440ff}
.t03-nav-links{display:flex;gap:.55rem;margin-left:auto}
.t03-nav-links i{font-style:normal;font-size:.5rem;font-weight:600;color:rgba(26,26,34,.6)}
.t03-nav-cta{font-family:var(--f-display);font-weight:800;font-size:.5rem;color:#fff;background:#25d366;border:1px solid #09090e;border-radius:999px;padding:.18rem .5rem;box-shadow:1px 1px 0 #09090e}

/* Día 3 · las fotos REALES + Día 4 · el catálogo: tarjetas de servicio de
   tienda real (foto arriba, nombre + precio + botón de pedido abajo).
   Día 3 revela las fotos dentro de las tarjetas; día 4 llena la info. */
.t03-s4{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.t03-card{
  position:relative;margin:0;display:flex;flex-direction:column;
  background:#fff;border:1.5px solid rgba(9,9,14,.16);border-radius:10px;
  overflow:hidden;
}
.t03-card-foto{position:relative;display:block;aspect-ratio:16/10;background:rgba(9,9,14,.07);overflow:hidden}
.t03-foto-real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* las fotos demo traen un bisel de teléfono PINTADO en los píxeles (barra
   negra izquierda + notch): se sobre-encuadran dentro de la tarjeta para
   que el marco quede fuera del recorte y parezcan fotos de catálogo real */
/* 23-ago v3: fotos de comida recortadas a la medida de la tarjeta — cero zoom */
.t03-card .t03-foto-real{object-position:50% 50%}
.t03-foto-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.t03-card-info{display:flex;flex-direction:column;gap:.2rem;margin:0;padding:.38rem .5rem .45rem}
.t03-card-nom{font-weight:600;font-size:.7rem;line-height:1.25;color:#1a1a22}
.t03-card-fila{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-top:auto}
.t03-card-precio{font-family:var(--f-display);font-weight:800;font-size:.78rem;color:#09090e;display:flex;flex-direction:column;line-height:1.1}
.t03-card-desde{font-style:normal;font-size:.44rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(26,26,34,.5)}
.t03-card-stars{font-size:.5rem;color:#f6a921;letter-spacing:.05em}
.t03-card-add{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;
  background:#2440ff;color:#fff;font-weight:800;font-size:.8rem;line-height:1;
  border:1.5px solid #09090e;box-shadow:1.5px 1.5px 0 #09090e;
}
/* Día 6 · la edición en vivo: sello «Urgencias 24/7» sobre la foto del cerrajero */
.t03-badge247{
  position:absolute;top:5px;left:5px;z-index:2;
  background:#25d366;color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.5rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  padding:.16rem .42rem;border-radius:999px;
  border:1.5px solid #09090e;box-shadow:1.5px 1.5px 0 #09090e;
}

/* Día 6 · post-it del cliente (crema, rotado) — pegado sobre el catálogo,
   arriba a la derecha para JAMÁS tapar la tarjeta del cerrajero ni su sello */
.t03-postit{
  position:absolute;right:3%;top:2px;z-index:4;max-width:138px;
  background:#f4efe6;border:1.5px solid #09090e;border-radius:2px 8px 8px 8px;
  box-shadow:2px 2px 0 #09090e;transform:rotate(-6deg);
  font-size:.62rem;font-weight:700;line-height:1.3;color:#1a1a22;
  padding:.3rem .5rem;
}

/* Día 5 · la conexión: botón verde + chat del pedido.
   La zona ahora es flex-column: el chat vive DENTRO del flujo (ya no flota
   con position:absolute) para que sume altura real a la página que crece;
   align-self lo empuja a la derecha, como una burbuja de WhatsApp entrante. */
.t03-zone--contacto{display:flex;flex-direction:column;gap:.55rem}
/* 24-ago: con los datos abajo, la fila se rompía (texto flotando al lado
   del botón y el botón partido en dos líneas) — columna centrada */
.t03-s5{display:flex;flex-direction:column;align-items:center;gap:.1rem;text-align:center}
.t03-wspbtn{white-space:nowrap}
.t03-wspbtn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#25d366;color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.74rem;letter-spacing:.02em;
  padding:.45rem .9rem;border-radius:999px;
  border:1.5px solid #09090e;box-shadow:2px 2px 0 #09090e;
}
.t03-wsp-ico{width:14px;height:13px;border-radius:50% 50% 50% 4px;background:#fff}
/* 23-ago v2 · el pedido entra como NOTIFICACIÓN de WhatsApp real (avatar +
   nombre + mensaje humano), no como una línea de sistema («se ve mal las
   acciones» — el cliente). Mismas clases que toca el JS: .t03-chat / .t03-chat-check. */
.t03-chat{
  align-self:flex-end;max-width:min(88%,300px);
  display:flex;gap:.45rem;align-items:flex-start;
  background:#fff;border:1.5px solid #09090e;border-radius:12px 12px 4px 12px;
  box-shadow:3px 3px 0 rgba(9,9,14,.85);
  border-left:3px solid #1fa855;
  padding:.45rem .6rem .32rem;will-change:transform,opacity;
}
.t03-chat-ava{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:#1fa855;color:#fff;font-family:var(--f-display);
  font-weight:800;font-size:.5rem;border:1px solid #09090e;
}
.t03-chat-cuerpo{min-width:0;display:flex;flex-direction:column;gap:.06rem}
.t03-chat-nom{font-family:var(--f-display);font-weight:800;font-size:.6rem;color:#09090e}
.t03-chat-via{font-style:normal;font-weight:600;color:#1fa855;font-size:.52rem}
.t03-chat-txt{margin:0;font-size:.66rem;line-height:1.35;color:#1a1a22}
.t03-chat-meta{display:flex;justify-content:flex-end;align-items:center;gap:.25rem;font-size:.54rem;color:rgba(26,26,34,.55)}
.t03-chat-check{font-style:normal;font-weight:700;letter-spacing:-.08em;color:#34b7f1}

/* Día 6 · cursor de el cliente (solo lo mueve GSAP) */
.t03-cursor{
  position:absolute;left:24%;top:26%;width:18px;height:18px;z-index:7;
  opacity:0;pointer-events:none;will-change:transform,opacity;
  filter:drop-shadow(1px 2px 0 rgba(9,9,14,.35));
}

/* Día 7 · mini-confeti casero (invisible hasta dispararse) */
.t03-confetti{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.t03-confetti i{
  position:absolute;top:-14px;width:7px;height:11px;border-radius:2px;
  opacity:0;will-change:transform,opacity;
}
.t03-confetti i:nth-child(4n+1){background:#2440ff}
.t03-confetti i:nth-child(4n+2){background:#f4efe6;border:1px solid #09090e}
.t03-confetti i:nth-child(4n+3){background:#09090e}
.t03-confetti i:nth-child(4n+4){background:#25d366;border-radius:50%;width:8px;height:8px}
.t03-confetti i:nth-child(1){left:8%}.t03-confetti i:nth-child(2){left:15%}
.t03-confetti i:nth-child(3){left:24%}.t03-confetti i:nth-child(4){left:31%}
.t03-confetti i:nth-child(5){left:38%}.t03-confetti i:nth-child(6){left:46%}
.t03-confetti i:nth-child(7){left:52%}.t03-confetti i:nth-child(8){left:59%}
.t03-confetti i:nth-child(9){left:66%}.t03-confetti i:nth-child(10){left:72%}
.t03-confetti i:nth-child(11){left:79%}.t03-confetti i:nth-child(12){left:85%}
.t03-confetti i:nth-child(13){left:91%}.t03-confetti i:nth-child(14){left:96%}

/* Pieza 7 · badge EN LÍNEA (en la barra azul) */
.t03-online{
  margin-left:.6rem;
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--f-display);font-weight:700;font-size:.6rem;
  letter-spacing:.12em;color:#fff;
  padding:.2rem .55rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.4);background:rgba(9,9,14,.2);
  white-space:nowrap;
}
.t03-online i{width:7px;height:7px;border-radius:50%;background:#4be08c;will-change:transform,opacity}
.t03-online.is-live i{animation:t03pulse 1.5s cubic-bezier(.2,.8,.3,1) infinite}
@keyframes t03pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.55}}

/* Día 7 · remate de marca: última pieza de la página — sin wire/sello, a
   propósito (ya no es borrador: es la página terminada llevando la firma). */
.t03-zone--marca{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  text-align:center;padding-block:.9rem .3rem;
}
.t03-marca-logo{width:clamp(52px,13vw,68px);height:auto;display:block}
.t03-marca-txt{
  margin:0;font-family:var(--f-display);font-weight:700;
  font-size:.88rem;color:#09090e;
}
.t03-marca-txt strong{color:#2440ff}
/* 23-ago · el remate de marca se convierte en el footer REAL de la página
   simulada (mantiene .t03-zone--marca: el JS y el yMarca la buscan). */
.t03-footer{background:#0d1024;border:1.5px solid #09090e;border-radius:10px;padding:.7rem .75rem .6rem;align-items:stretch;text-align:left;gap:.55rem}
.t03-foot-grid{display:flex;flex-wrap:wrap;gap:.15rem .8rem;align-items:baseline}
.t03-foot-brand{font-family:var(--f-display);font-weight:800;font-size:.7rem;color:#fff}
.t03-foot-brand b{color:#8fa0ff}
.t03-foot-dato{font-size:.5rem;color:rgba(255,255,255,.65)}


/* 23-ago · zona opiniones: prueba social dentro de la página simulada */
.t03-zone--opiniones{background:#f8f4ea;border-radius:10px}
.t03-op-tit{margin:0 0 .4rem;font-family:var(--f-display);font-weight:800;font-size:.66rem;color:#09090e}
.t03-op-fila{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.t03-op{margin:0;display:flex;gap:.4rem;background:#fff;border:1.5px solid rgba(9,9,14,.16);border-radius:9px;padding:.4rem .45rem}
.t03-op-avatar{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#2440ff;color:#fff;font-family:var(--f-display);font-weight:800;font-size:.44rem;border:1px solid #09090e}
.t03-op-fila .t03-op:last-child .t03-op-avatar{background:#09090e}
.t03-op figcaption{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.t03-stars{font-size:.5rem;color:#f6a921;letter-spacing:.06em}
.t03-op-txt{font-size:.52rem;line-height:1.4;color:#1a1a22}
.t03-op-firma{font-size:.46rem;font-weight:700;color:rgba(26,26,34,.55)}

/* ═══════════ t03 · v4 «CAMBIO RADICAL» (23-ago, pedido del cliente) ═══════════
   La página simulada gana ESTRUCTURA de landing real: paleta propia (acento
   cálido — una página real tiene SU color, no hereda el azul TP), hero de
   dos columnas, vitrina con cabecera de sección y tarjeta destacada (nada
   de catálogo plano Mercado Libre), notificación push que se entiende, y
   footer real SIN el crédito TP. Va DESPUÉS de las reglas base: gana cascada. */
#t03-sietedias .t03-window{--t03acc:#ff5a2d}
#t03-sietedias .t03-page{background:#fffdf9}

/* nav con más presencia (una barra real, no una línea) */
#t03-sietedias .t03-nav{
  padding:.3rem .45rem;margin:-.1rem -.1rem .55rem;
  background:#fff;border:1px solid rgba(9,9,14,.1);border-radius:9px;
  box-shadow:0 1px 4px rgba(9,9,14,.05);
}
#t03-sietedias .t03-nav-logo b{color:var(--t03acc)}

/* HERO en dos columnas: texto | mosaico — estructura de landing real */
@media(min-width:520px){
  #t03-sietedias .t03-zone--portada{
    display:grid;grid-template-columns:1.15fr .85fr;
    column-gap:.8rem;align-items:center;
  }
  #t03-sietedias .t03-zone--portada > .t03-nav{grid-column:1/-1}
  #t03-sietedias .t03-zone--portada > .t03-wire,
  #t03-sietedias .t03-zone--portada > .t03-stamp{grid-column:1/-1;grid-row:1}
  #t03-sietedias .t03-s2{min-width:0}
  /* proporción REAL del mosaico (656×568): object-fit cover con max-height
     rebanaba la cuadrícula 2×2 — y sin ancho explícito la caja colapsaba
     (la img interior es absoluta: no da tamaño). Ancho SIEMPRE explícito. */
  #t03-sietedias .t03-hero-foto{margin-top:0;aspect-ratio:656/568;height:auto;width:100%;align-self:center}
}
#t03-sietedias .t03-kicker{color:var(--t03acc);background:rgba(255,90,45,.09);border-color:rgba(255,90,45,.4)}
#t03-sietedias .t03-hero-foto{border-radius:12px;border:1.5px solid rgba(9,9,14,.14);box-shadow:0 6px 18px -8px rgba(9,9,14,.25)}
#t03-sietedias .t03-hero-chips{left:auto;right:6px;bottom:6px}
#t03-sietedias .t03-hero-chips i{background:#09090e;color:#fff;border-color:#09090e;font-size:.5rem}
#t03-sietedias .t03-ctamini--ghost{border-color:rgba(9,9,14,.35)}

/* VITRINA: cabecera de sección — lo que la separa de un catálogo pelado */
.t03-vit-head{display:flex;align-items:baseline;justify-content:space-between;margin:.15rem 0 .5rem}
.t03-vit-tit{font-family:var(--f-display);font-weight:800;font-size:.78rem;color:#09090e}
.t03-vit-link{font-size:.52rem;font-weight:700;color:var(--t03acc,#ff5a2d)}

/* tarjetas: la destacada manda (jerarquía) */
#t03-sietedias .t03-card{border-radius:11px;overflow:hidden;background:#fff;border:1px solid rgba(9,9,14,.12);box-shadow:0 2px 8px rgba(9,9,14,.06)}
#t03-sietedias .t03-card-foto{aspect-ratio:16/11}
.t03-card-rubro{
  position:absolute;top:5px;left:5px;z-index:3;
  font-family:var(--f-display);font-weight:800;font-size:.4rem;
  letter-spacing:.09em;text-transform:uppercase;
  background:rgba(255,255,255,.94);color:#09090e;
  border:1px solid rgba(9,9,14,.25);border-radius:999px;padding:.1rem .38rem;
}
#t03-sietedias .t03-badge247{background:var(--t03acc);border-color:#09090e;top:auto;bottom:6px;left:6px}
@media(min-width:520px){
  /* composición de tienda real: la destacada grande a la izquierda,
     las otras 3 como lista horizontal a la derecha — cero huecos */
  #t03-sietedias .t03-s4{grid-template-columns:1.1fr 1fr;grid-auto-rows:auto}
  #t03-sietedias .t03-card--destacada{grid-column:1;grid-row:1/4}
  #t03-sietedias .t03-card--destacada .t03-card-foto{aspect-ratio:auto;flex:1 1 auto;min-height:0}
  #t03-sietedias .t03-card:not(.t03-card--destacada){flex-direction:row}
  #t03-sietedias .t03-card:not(.t03-card--destacada) .t03-card-foto{flex:0 0 40%;aspect-ratio:auto;min-height:64px}
  #t03-sietedias .t03-card:not(.t03-card--destacada) .t03-card-info{flex:1;justify-content:center;min-width:0}
}

/* La notificación vive SOBRE el marco de la ventana (no dentro de la página:
   una página real jamás muestra eso — cliente, 23-ago). Baja desde arriba. */
#t03-sietedias .t03-chat{
  position:absolute;top:-14px;right:-10px;z-index:9;
  width:min(78%,300px);
  border-left:none;border-radius:12px;
  flex-direction:column;gap:0;padding:0;overflow:hidden;
  align-self:auto;max-width:none;
}
#t03-sietedias .t03-chat::before{
  content:"WhatsApp · ahora";
  display:block;width:100%;
  background:#eafaf0;color:#0f7a3d;
  font-family:var(--f-display);font-weight:800;font-size:.5rem;
  letter-spacing:.05em;padding:.24rem .6rem;
  border-bottom:1px solid rgba(9,9,14,.1);
}
#t03-sietedias .t03-chat-ava{position:absolute;left:.5rem;bottom:.55rem}
#t03-sietedias .t03-chat-cuerpo{padding:.4rem .6rem .35rem 2.2rem}

/* contacto con datos reales bajo el botón */
.t03-cont-datos{margin:.45rem 0 0;font-size:.5rem;color:rgba(26,26,34,.55)}

/* resumen de las reseñas: el número manda */
.t03-op-res{margin:-.2rem 0 .45rem;font-size:.52rem;font-weight:700;color:#b47a00}

/* nosotros: la historia en una tarjeta editorial */
.t03-nos{display:flex;gap:.55rem;align-items:flex-start}
.t03-nos-foto{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--t03acc,#ff5a2d);color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.5rem;
  border:1.5px solid #09090e;
}
.t03-nos-tit{margin:0 0 .15rem;font-family:var(--f-display);font-weight:800;font-size:.66rem;color:#09090e}
.t03-nos-txt{margin:0;font-size:.55rem;line-height:1.5;color:rgba(26,26,34,.7);max-width:46ch}

/* preguntas frecuentes en miniatura: la primera abierta, el resto plegadas */
.t03-faq-tit{margin:0 0 .4rem;font-family:var(--f-display);font-weight:800;font-size:.66rem;color:#09090e}
.t03-faqrow{background:#fff;border:1px solid rgba(9,9,14,.14);border-radius:8px;padding:.34rem .5rem;margin-bottom:.3rem}
.t03-faqrow:last-child{margin-bottom:0}
.t03-faqrow-q{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.55rem;font-weight:700;color:#1a1a22}
.t03-faqrow-q i{font-style:normal;font-weight:800;color:var(--t03acc,#ff5a2d)}
.t03-faqrow-a{margin:.22rem 0 0;font-size:.52rem;line-height:1.45;color:rgba(26,26,34,.65)}

/* FOOTER real: marca + datos + redes (sin crédito TP) */
#t03-sietedias .t03-footer{background:#111527;border-radius:11px}
.t03-foot-cols{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;justify-content:space-between}
.t03-foot-col{display:flex;flex-direction:column;gap:.14rem;min-width:0}
.t03-foot-col--marca{flex:1 1 38%}
.t03-foot-desc{margin:.2rem 0 0;font-size:.5rem;line-height:1.45;color:rgba(255,255,255,.6);max-width:26ch}
.t03-foot-h{font-family:var(--f-display);font-weight:800;font-size:.46rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:.12rem}
.t03-foot-col i{font-style:normal;font-size:.5rem;color:rgba(255,255,255,.78);line-height:1.6}
.t03-foot-base{display:flex;align-items:center;gap:.4rem;border-top:1px solid rgba(255,255,255,.14);padding-top:.5rem;margin-top:.6rem}
.t03-foot-red{
  font-family:var(--f-display);font-weight:700;font-size:.5rem;color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.14rem .5rem;
}
.t03-foot-red--wsp{background:#1fa855;border-color:#1fa855;color:#fff}
.t03-foot-copy{margin-left:auto;font-size:.46rem;color:rgba(255,255,255,.4)}
#t03-sietedias .t03-foot-brand b{color:#ffb59e}

/* escala desktop del v4 */
@media(min-width:1080px){
  .t03-anim .t03-vit-tit{font-size:.95rem}
  .t03-anim .t03-vit-link{font-size:.62rem}
  .t03-anim .t03-card-rubro{font-size:.5rem}
  .t03-anim .t03-hero-foto{width:100%;max-width:300px;justify-self:end}
  .t03-anim .t03-chat::before{font-size:.6rem}
  #t03-sietedias .t03-chat-cuerpo{padding-left:2.6rem} /* avatar 28px pisaba el texto; #id para ganarle a la base */
  .t03-anim .t03-foot-red{font-size:.6rem}
  .t03-anim .t03-cont-datos{font-size:.62rem}
  .t03-anim .t03-op-res{font-size:.62rem}
  .t03-anim .t03-nos-tit,.t03-anim .t03-faq-tit{font-size:.8rem}
  .t03-anim .t03-nos-txt{font-size:.66rem}
  .t03-anim .t03-faqrow-q{font-size:.66rem}
  .t03-anim .t03-faqrow-a{font-size:.62rem}
  .t03-anim .t03-foot-desc,.t03-anim .t03-foot-col i{font-size:.6rem}
  .t03-anim .t03-foot-h{font-size:.54rem}
  .t03-anim .t03-foot-copy{font-size:.54rem}
  .t03-anim .t03-hero-chips i{font-size:.56rem}
}
/* pantallas cortas */
@media(max-height:720px){
  .t03-anim .t03-hero-foto{max-width:230px}
}

/* Captions */
.t03-caps{width:100%;max-width:560px;margin-inline:auto}
.t03-cap{font-size:.92rem;line-height:1.55;color:var(--muted)}
.t03-cap strong{color:var(--crema)}
.t03-cap+.t03-cap{margin-top:.7rem}
/* modo animado: superpuestas, solo la activa */
.t03-anim .t03-caps{display:grid;min-height:3.2em}
.t03-anim .t03-cap{
  grid-area:1/1;margin:0!important;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s cubic-bezier(.2,.8,.3,1),transform .45s cubic-bezier(.2,.8,.3,1);
}
.t03-anim .t03-cap.is-active{opacity:1;transform:none}


.t03-remate{
  margin-top:clamp(1rem,2.5vw,1.4rem);
  border-left:3px solid var(--azul);border-radius:6px 14px 14px 6px;
  max-width:560px;
}
.t03-remate p{color:var(--muted);font-size:.96rem}
.t03-remate p::before{content:"→ ";color:var(--azul-glow);font-weight:800}

/* ── t04 · Interruptor CON/SIN mantención ────────────────── */
.t04-widget{max-width:720px;padding:1.3rem 1.2rem;transition:border-color .4s,box-shadow .4s}
@media(min-width:768px){.t04-widget{padding:1.6rem 1.7rem}}
.t04-widget.is-sin{border-color:rgba(192,57,43,.4);box-shadow:var(--sombra-dura)}
.t04-toggle{
  display:flex;gap:.4rem;width:max-content;max-width:100%;
  background:var(--bg-2);border:1.5px solid var(--line-strong);
  border-radius:var(--rad-pill);padding:.3rem;margin-bottom:1.2rem;
}
.t04-tbtn{
  padding:.55rem 1.1rem;min-height:44px;border-radius:var(--rad-pill);
  font-family:var(--f-display);font-weight:700;font-size:.85rem;color:var(--muted);
  transition:.3s;white-space:nowrap;
}
.t04-tbtn.is-active{background:var(--azul);color:#fff;box-shadow:var(--shadow-glow)}
.t04-widget.is-sin .t04-tbtn.is-active{background:#c0392b;box-shadow:0 6px 22px rgba(192,57,43,.35)}

.t04-items li{display:flex;gap:.85rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid var(--line)}
.t04-items li:last-child{border-bottom:0}
.t04-item h3{font-family:var(--f-display);font-weight:700;font-size:.92rem;color:var(--white);margin-bottom:.1rem}
.t04-item p{font-size:.88rem;line-height:1.5;color:var(--muted);margin:0}
.t04-ico{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;margin-top:.15rem;
  background:rgba(13,163,94,.12);position:relative;transition:.35s;
}
.t04-ico::before{content:"✓";font-weight:800;font-size:.8rem;color:var(--ok);transition:.2s}
.t04-widget.is-sin .t04-ico{background:rgba(192,57,43,.13)}
.t04-widget.is-sin .t04-ico::before{content:"!";color:#c0392b}
.t04-off{display:none}
.t04-widget.is-sin .t04-con{display:none}
.t04-widget.is-sin .t04-off{display:block;color:#a83a30}
.t04-precio{margin-top:1.1rem;font-size:.92rem;color:var(--muted)}
.t04-precio strong{color:var(--azul);font-family:var(--f-display);font-weight:800}
.t04-widget.is-sin .t04-precio strong{color:#c0392b}

/* 23-ago · el par t04/t04b venía CENTRADO dos veces seguidas y los flancos
   quedaban muertos en PC (queja literal de el cliente). Zig-zag sobre la misma
   banda: t04 texto-riel izquierda + widget derecha; t04b lo espeja.
   El grid es por areas y NO envuelve nada: los selectores hermanos
   `.sec-head.is-shown ~` de re-animacion siguen intactos. */
.t04-sticker{display:none}
@media(min-width:1080px){
  #t04-mantencion .container{
    display:grid;
    grid-template-columns:minmax(340px,1fr) minmax(0,640px);
    grid-template-rows:auto 1fr;
    grid-template-areas:"head widget" "cta widget";
    column-gap:clamp(2.5rem,5vw,4rem);row-gap:1.6rem;
    align-items:start;
  }
  #t04-mantencion .sec-head{grid-area:head;margin-bottom:0}
  #t04-mantencion .t04-widget{grid-area:widget;max-width:none;margin:0}
  #t04-mantencion .cta-band{
    grid-area:cta;align-self:end;justify-self:start;
    flex-direction:column;align-items:flex-start;margin-top:0;
  }
  .t04-sticker{display:grid;top:-16px;right:-14px;transform:rotate(8deg)}
}

/* ── t05 · Reseñas ───────────────────────────────────────── */
.t05-grid{align-items:stretch}
/* móvil: el slider recortaba el sticker estrella que asoma sobre la 2ª tarjeta */
@media(max-width:767.9px){.t05-grid.mslide{padding-top:1.5rem}}
.t05-card{display:flex;flex-direction:column;gap:.8rem;overflow:visible}
.t05-sticker{top:-18px;right:-12px;transform:rotate(9deg)}
.t05-head{display:flex;gap:.8rem;align-items:center}
.avatar-ini{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--azul);color:#fff;border:2px solid #09090e;
  font-family:var(--f-display);font-weight:800;font-stretch:125%;
  font-size:1rem;letter-spacing:.02em;text-transform:uppercase;
}
.t05-nombre{font-family:var(--f-display);font-weight:700;font-size:.98rem;color:var(--white);line-height:1.2}
.t05-negocio{font-size:.78rem;color:var(--faint);margin-top:.1rem}
.t05-texto{font-size:.92rem;color:var(--muted)}
.t05-nota{max-width:56ch;margin-top:clamp(1.1rem,3vw,1.6rem)}


/* ============================================================
   ACTO FRÍO · f01-f05 — "El plano de la página" (acto CREMA)
   Juguete armador por rubro · calculadora · planes · comparación
   · pack redes. Prefijos: .f01- .f02- .f03- .f04- .f05-
   ============================================================ */

/* ══════════════ f01 · EL JUGUETE ARMADOR ══════════════ */
.f01-chips{
  display:flex;flex-wrap:wrap;gap:.55rem;
  margin-bottom:clamp(1.4rem,3.5vw,2.2rem);
}
.f01-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.55rem 1.15rem;
  border-radius:var(--rad-pill);border:2px solid var(--f01-acc,#09090e);
  background:#fff;color:#09090e;cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:.9rem;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s,background .22s,border-color .22s,color .22s;
}
.f01-chip:nth-child(odd){transform:rotate(-1.5deg);--f01-rot:-1.5deg}
.f01-chip:nth-child(even){transform:rotate(1.2deg);--f01-rot:1.2deg}
/* Affordance desktop: hover claro + reacciona con elevación/sombra (el borde ya lleva el color propio del rubro, no hace falta cambiarlo) */
.f01-chip:hover{transform:translateY(-3px);box-shadow:4px 4px 0 #09090e}
/* Affordance touch: feedback inmediato al presionar (pointerdown vía JS + :active nativo) */
.f01-chip:active,.f01-chip.is-pressing{
  transform:scale(.94) rotate(var(--f01-rot,0deg));
  box-shadow:1px 1px 0 #09090e;transition-duration:.1s;
}
.f01-chip.is-active{
  background:var(--f01-acc,var(--azul));border-color:#09090e;color:#fff;
  box-shadow:var(--sombra-dura);transform:rotate(0) translateY(-2px);
}
/* Identidad por rubro: fondito sutil del acento propio detrás del emoji
   (var(--f01-acc)/var(--f01-tint) los fija JS desde RUBROS, misma fuente
   de verdad que usa el teléfono) */
.f01-chip-emo{
  font-size:1.15rem;line-height:1;
  display:inline-grid;place-items:center;
  width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--f01-tint,transparent);
}
.f01-chip.is-active .f01-chip-emo{background:rgba(255,255,255,.25)}

/* Cue de descubribilidad: al entrar la sección en pantalla, los chips NO
   activos hacen un pase sutil (2 veces) para invitar a tocarlos — luego
   quedan quietos para siempre. Respeta prefers-reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .f01-chips.is-cueing .f01-chip:not(.is-active){animation:f01-cue .62s ease-in-out 2}
  .f01-chips.is-cueing .f01-chip:not(.is-active):nth-child(2){animation-delay:.09s}
  .f01-chips.is-cueing .f01-chip:not(.is-active):nth-child(3){animation-delay:.18s}
  .f01-chips.is-cueing .f01-chip:not(.is-active):nth-child(4){animation-delay:.27s}
  .f01-chips.is-cueing .f01-chip:not(.is-active):nth-child(5){animation-delay:.36s}
}
@keyframes f01-cue{
  0%,100%{transform:rotate(var(--f01-rot,0deg)) translateY(0) scale(1);box-shadow:0 0 0 0 rgba(36,64,255,0)}
  50%{transform:rotate(var(--f01-rot,0deg)) translateY(-4px) scale(1.05);box-shadow:0 8px 16px rgba(36,64,255,.28)}
}

/* --- escenario: teléfono + etiquetas --- */
.f01-stage{position:relative;max-width:960px;margin-inline:auto}

/* Teléfono CSS */
.f01-phone{
  --acc:#e8452c;              /* acento del rubro (lo pisa JS) */
  --tint:#fff3ea;             /* fondo pastel del rubro */
  position:relative;width:min(19rem,86vw);margin-inline:auto;
  background:#09090e;border-radius:30px;padding:12px 10px 14px;
  border:2px solid #09090e;
  box-shadow:8px 8px 0 rgba(36,64,255,.9),0 24px 60px rgba(9,9,14,.22);
}
.f01-phone-notch{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:34%;height:16px;background:#09090e;border-radius:0 0 12px 12px;z-index:3;
}
.f01-screen{
  background:#fff;border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;gap:8px;
  justify-content:space-between; /* rubros de 4 piezas se reparten como página real */
  padding:26px 9px 12px;min-height:480px;
}

/* Piezas dentro de la pantalla */
.f01-pieza{position:relative;border-radius:12px;will-change:transform}
.f01-num{
  position:absolute;top:-7px;left:-5px;z-index:2;
  width:22px;height:22px;border-radius:50%;
  background:var(--azul);color:#fff;border:2px solid #fff;
  font-family:var(--f-display);font-weight:800;font-size:.68rem;
  display:grid;place-items:center;
}
/* 1 · portada */
.f01-pieza--portada{
  background:var(--tint);border:1.5px solid rgba(9,9,14,.12);
  padding:1.1rem .8rem .95rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  transition:background .45s;
}
.f01-hero-emoji{font-size:2rem;line-height:1}
.f01-hero-brand{
  font-family:var(--f-display);font-weight:800;font-stretch:115%;
  font-size:.98rem;color:#09090e;letter-spacing:-.01em;
}
.f01-hero-tag{
  font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--acc);border-radius:var(--rad-pill);
  padding:.22rem .7rem;transition:background .45s;
}
/* tarjeta genérica (menú, agenda, catálogo, cobertura, pasos, oferta) */
.f01-pieza--card{
  border:1.5px solid rgba(9,9,14,.12);background:#fff;
  padding:.6rem .7rem;display:flex;flex-direction:column;gap:.45rem;
}
.f01-mini-t{
  font-family:var(--f-display);font-weight:800;font-size:.6rem;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(9,9,14,.5);
}
/* chip horario "Abierto ahora" (comida) — verde WSP pulsante */
.f01-pieza--abierto{
  border:1.5px solid rgba(9,9,14,.12);background:#fff;
  padding:.5rem .7rem;display:flex;align-items:center;
  justify-content:space-between;gap:.5rem;
}
.f01-abierto{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.32rem .8rem;border-radius:var(--rad-pill);
  background:#25d366;color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.7rem;letter-spacing:.02em;
}
.f01-abierto-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#fff}
@media (prefers-reduced-motion:no-preference){
  .f01-abierto-dot{animation:f01-pulso 1.5s ease-in-out infinite}
}
@keyframes f01-pulso{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}
.f01-abierto-extra{font-size:.64rem;font-weight:700;color:rgba(9,9,14,.55)}
/* fila producto/servicio con nombre y precio (comida, belleza, tienda) */
.f01-mrow{display:flex;align-items:center;gap:.55rem}
.f01-mrow-emo{
  flex:0 0 30px;width:30px;height:30px;border-radius:9px;
  background:var(--tint);display:grid;place-items:center;
  font-size:.95rem;transition:background .45s;
}
.f01-mrow-nom{
  flex:1;min-width:0;font-size:.7rem;font-weight:700;color:#09090e;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.f01-mrow-precio{
  flex:0 0 auto;font-family:var(--f-display);font-weight:800;font-size:.72rem;
  color:var(--acc);font-variant-numeric:tabular-nums;transition:color .45s;
}
/* agenda de horas (belleza) */
.f01-slot{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  border:1.5px solid rgba(9,9,14,.12);border-radius:9px;padding:.34rem .6rem;
}
.f01-slot-hora{font-family:var(--f-display);font-weight:800;font-size:.72rem;color:#09090e;font-variant-numeric:tabular-nums}
.f01-slot-est{font-size:.62rem;font-weight:700;color:rgba(9,9,14,.5)}
.f01-slot-est.is-ok{color:#25d366}
.f01-slot--off{opacity:.5}
.f01-slot--off .f01-slot-hora{text-decoration:line-through}
/* catálogo con filtros + mini-cards (autos) */
.f01-filtros{display:flex;flex-wrap:wrap;gap:.3rem}
.f01-filtro{
  padding:.2rem .6rem;border-radius:var(--rad-pill);
  border:1.5px solid rgba(9,9,14,.18);background:#fff;
  font-size:.6rem;font-weight:700;color:rgba(9,9,14,.6);
}
.f01-filtro.is-on{background:var(--acc);border-color:var(--acc);color:#fff;transition:background .45s,border-color .45s}
.f01-micards{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.f01-micard{
  min-width:0;border:1.5px solid rgba(9,9,14,.12);border-radius:10px;
  padding:.45rem .55rem;display:flex;flex-direction:column;gap:.15rem;
}
.f01-micard-emo{
  width:100%;border-radius:7px;background:var(--tint);
  text-align:center;padding:.3rem 0;font-size:1.05rem;line-height:1;transition:background .45s;
}
.f01-micard-nom{font-size:.6rem;font-weight:700;color:#09090e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f01-micard-precio{font-family:var(--f-display);font-weight:800;font-size:.62rem;color:var(--acc);font-variant-numeric:tabular-nums;transition:color .45s}
/* ficha destacada con precio grande (autos) */
.f01-pieza--ficha{
  border:2px solid var(--acc);background:#fff;
  padding:.6rem .7rem .7rem;display:flex;flex-direction:column;gap:.3rem;
  transition:border-color .45s;
}
.f01-ficha-foto{
  height:58px;border-radius:10px;background:var(--tint);
  display:grid;place-items:center;font-size:1.8rem;transition:background .45s;
}
.f01-ficha-meta{font-size:.64rem;font-weight:700;color:rgba(9,9,14,.55)}
.f01-ficha-precio{
  font-family:var(--f-display);font-weight:800;font-stretch:112%;
  font-size:1.08rem;letter-spacing:-.01em;color:#09090e;font-variant-numeric:tabular-nums;
}
/* chips de comuna (servicios) */
.f01-comunas{display:flex;flex-wrap:wrap;gap:.35rem}
.f01-comuna{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.26rem .62rem;border-radius:var(--rad-pill);
  background:var(--tint);font-size:.64rem;font-weight:700;color:#09090e;
  transition:background .45s;
}
.f01-comuna::before{content:"✓";font-weight:800;color:var(--acc);transition:color .45s}
/* pasos numerados mini (servicios) */
.f01-paso{display:flex;align-items:center;gap:.5rem}
.f01-paso-n{
  flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  background:var(--acc);color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.58rem;
  display:grid;place-items:center;transition:background .45s;
}
.f01-paso-txt{font-size:.7rem;font-weight:700;color:#09090e}
/* oferta de la semana (tienda) — badge azul + precio tachado */
.f01-oferta-badge{
  align-self:flex-start;background:var(--azul);color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.56rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:.22rem .6rem;border-radius:var(--rad-pill);
}
.f01-oferta-row{display:flex;align-items:center;gap:.55rem}
.f01-oferta-precios{margin-left:auto;flex:0 0 auto;display:flex;align-items:baseline;gap:.4rem}
.f01-oferta-antes{font-size:.62rem;font-weight:700;color:rgba(9,9,14,.45)}
.f01-oferta-ahora{font-family:var(--f-display);font-weight:800;font-size:.88rem;color:var(--acc);font-variant-numeric:tabular-nums;transition:color .45s}
/* horario compacto (tienda) */
.f01-pieza--horario{
  border:1.5px solid rgba(9,9,14,.12);background:#fff;
  padding:.45rem .7rem;display:flex;align-items:center;gap:.45rem;
}
.f01-horario-emo{font-size:.85rem;line-height:1}
.f01-horario-txt{font-size:.66rem;font-weight:700;color:#09090e}
/* botón WhatsApp del teléfono demo */
.f01-pieza--wsp{padding:.15rem 0}
.f01-wsp-btn{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:40px;border-radius:var(--rad-pill);
  background:#25d366;color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.82rem;
  box-shadow:3px 3px 0 rgba(9,9,14,.85);
}
.f01-wsp-btn::before{content:"💬";font-size:.95rem}

/* Etiquetas educativas — móvil: lista bajo el teléfono */
.f01-labels{
  counter-reset:none;margin-top:1.4rem;
  display:flex;flex-direction:column;gap:.7rem;
}
.f01-label{display:flex;gap:.7rem;align-items:flex-start}
.f01-label-num{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;margin-top:.1rem;
  background:var(--azul);color:#fff;border:2px solid #09090e;
  font-family:var(--f-display);font-weight:800;font-size:.7rem;
  display:grid;place-items:center;
}
.f01-label-txt strong{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:.9rem;color:var(--white);
}
.f01-label-ico{margin-right:.32rem;font-size:.95em}
.f01-label-txt p{font-size:.82rem;color:var(--muted);line-height:1.45;margin-top:.1rem}

/* Desktop: etiquetas flotan a los lados con línea conectora */
@media(min-width:1000px){
  .f01-stage{min-height:640px}
  .f01-labels{margin-top:0;display:block}
  .f01-label{
    position:absolute;max-width:250px;gap:.55rem;
    background:var(--glass-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1.5px solid #09090e;border-radius:14px;
    padding:.7rem .85rem;box-shadow:3px 3px 0 #09090e;
  }
  .f01-label::before{
    content:"";position:absolute;top:50%;width:56px;height:2px;
    background:repeating-linear-gradient(90deg,var(--azul) 0 6px,transparent 6px 11px);
  }
  .f01-label::after{
    content:"";position:absolute;top:50%;transform:translateY(-50%);
    width:8px;height:8px;border-radius:50%;background:var(--azul);
  }
  .f01-label--r{left:calc(50% + 13.5rem)}
  .f01-label--r::before{right:100%;margin-right:8px}
  .f01-label--r::after{right:calc(100% + 58px)}
  .f01-label--l{right:calc(50% + 13.5rem);flex-direction:row-reverse;text-align:right}
  .f01-label--l::before{left:100%;margin-left:8px}
  .f01-label--l::after{left:calc(100% + 58px)}
  .f01-label--1{top:5%}
  .f01-label--2{top:26%}
  .f01-label--3{top:48%}
  .f01-label--4{top:62%}
  .f01-label--5{top:80%}
  .f01-label--1{transform:rotate(1deg)}
  .f01-label--2{transform:rotate(-1.2deg)}
  .f01-label--4{transform:rotate(1deg)}
  .f01-label--5{transform:rotate(-.8deg)}
  /* rubros con 4 etiquetas: se reparten en toda la altura */
  .f01-labels--4 .f01-label--1{top:7%}
  .f01-labels--4 .f01-label--2{top:33%}
  .f01-labels--4 .f01-label--3{top:57%}
  .f01-labels--4 .f01-label--4{top:79%}
}

/* Desktop ≥1080 — auditoría: etiquetas legibles + conectores alineados.
   · Tarjeta sólida (la glass .7 + blur dejaba ver las piezas azules del
     lienzo detrás del texto) y párrafo más grande/oscuro (era 13.1px .74).
   · Sin rotación: texto de 13-14px rotado se rasteriza y cuesta leer.
   · Tops en px anclados al teléfono (reposo medido, rubros de 4 piezas:
     centros de pieza en 101 / 212.5 / 335.5 / 457.5px; etiqueta ≈107px alto).
   · min-height 520: el teléfono en reposo mide 510px — los 640 dejaban
     130px muertos bajo el teléfono antes del remate. */
@media(min-width:1080px){
  .f01-stage{min-height:520px}
  .f01-label{
    background:#fff;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .f01-label--1,.f01-label--2,.f01-label--4,.f01-label--5{transform:none}
  .f01-label-txt p{font-size:.875rem;color:rgba(26,26,34,.92)}
  .f01-labels--4 .f01-label--1{top:46px}
  .f01-labels--4 .f01-label--2{top:157px}
  .f01-labels--4 .f01-label--3{top:280px}
  .f01-labels--4 .f01-label--4{top:392px}
}

/* Remate */
.f01-remate{
  margin-top:clamp(1.6rem,4vw,2.4rem);max-width:54ch;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1rem,2.5vw,1.18rem);color:var(--crema);
}
.f01-remate-todo{
  font-stretch:125%;text-transform:uppercase;color:#fff;background:var(--azul);
  padding:.05em .35em;border-radius:6px;display:inline-block;transform:rotate(-1.5deg);
}

/* ══════════════ f02 · CALCULADORA ══════════════ */
.f02-card{position:relative;overflow:visible}
.f02-card .window-bar{border-radius:14px 14px 0 0}
.f02-sticker{top:-22px;right:18px;transform:rotate(6deg)}
.f02-body{display:grid;gap:clamp(1.6rem,4vw,2.4rem)}
.f02-body>*{min-width:0}
.f02-field+.f02-field{margin-top:2rem}
.f02-label{
  display:block;font-family:var(--f-display);font-weight:700;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;
}
.f02-val{
  display:block;margin-top:.85rem;font-family:var(--f-display);font-weight:800;
  font-stretch:115%;font-size:1.2rem;color:var(--azul-glow);font-variant-numeric:tabular-nums;
}
.f02-range{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:26px;
  border-radius:var(--rad-pill);cursor:pointer;background:transparent;
  background-image:linear-gradient(to right,var(--azul) var(--p,50%),rgba(9,9,14,.14) var(--p,50%));
  background-size:100% 8px;background-position:center;background-repeat:no-repeat;
}
.f02-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--azul);border:2.5px solid #09090e;
  box-shadow:2px 2px 0 #09090e;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s;
}
.f02-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.f02-range:active::-webkit-slider-thumb{transform:scale(1.18);box-shadow:3px 3px 0 #09090e}
.f02-range::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--azul);
  border:2.5px solid #09090e;box-shadow:2px 2px 0 #09090e;
  transition:transform .2s cubic-bezier(.2,.8,.3,1);
}
.f02-range:active::-moz-range-thumb{transform:scale(1.18)}
.f02-range::-moz-range-track{background:transparent}
.f02-result{
  text-align:center;border-radius:var(--rad);
  background:rgba(36,64,255,.06);border:2px solid #09090e;
  box-shadow:var(--sombra-dura);
  padding:clamp(1.4rem,3.5vw,2.1rem);
}
.f02-res-pre{font-size:.95rem;color:var(--muted)}
.f02-res-num{
  font-family:var(--f-display);font-weight:800;font-stretch:118%;line-height:1.05;
  font-size:clamp(2.2rem,9vw,3.8rem);letter-spacing:-.02em;color:var(--azul-glow);
  font-variant-numeric:tabular-nums;margin:.35rem 0;will-change:transform;
}
.f02-res-suf{font-size:.92rem;color:var(--muted);max-width:30ch;margin-inline:auto}
.f02-explica{color:var(--muted);font-size:.95rem;border-top:1.5px dashed rgba(9,9,14,.18);padding-top:1.2rem}
.f02-notas{display:grid;gap:.35rem}
@media(min-width:1080px){
  .f02-body{grid-template-columns:1.05fr .95fr;align-items:center}
  .f02-explica,.f02-notas{grid-column:1/-1}
}

/* f02 vive en acto-dark: la parte "vacía" del track y el separador punteado
   venían en tinta negra (invisibles sobre el panel oscuro) — regla de oro */
#f02-calc .f02-range{background:linear-gradient(to right,var(--azul) var(--p,50%),rgba(244,239,230,.22) var(--p,50%))}
#f02-calc .f02-explica{border-top-color:rgba(244,239,230,.22)}
/* el sticker 👥 tapaba el final del título de la ventana */
#f02-calc .f02-card .window-title{margin-right:3.6rem}

/* ══════════════ f03 · PLANES ══════════════ */
.f03-ancla{
  display:flex;gap:.7rem;align-items:flex-start;
  max-width:640px;margin-bottom:clamp(1.8rem,4vw,2.6rem);
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(.98rem,2.4vw,1.12rem);line-height:1.45;color:var(--crema);
  background:#fff;border:2px solid #09090e;border-radius:14px;
  box-shadow:var(--sombra-dura);padding:1rem 1.2rem;
  transform:rotate(-.6deg);
}
/* el motor reveal pisa transform con none al mostrarse: re-aplicar */
html.js .f03-ancla.is-shown{transform:rotate(-.6deg)}
.f03-ancla strong{color:var(--azul)}
.f03-ancla em{font-style:normal;background:#09090e;color:#fff;padding:.02em .35em;border-radius:5px;white-space:nowrap}
.f03-ancla-flecha{color:var(--azul);font-size:1.3em;line-height:1;flex:0 0 auto}

.f03-grid{display:grid;gap:2rem;align-items:start}
@media(min-width:900px){.f03-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}}
.f03-card{position:relative;overflow:visible}
.f03-card .window-bar{border-radius:14px 14px 0 0}
/* destacada: primera en móvil, borde azul, tag flotante, stickers */
.f03-card--destacada{border-color:var(--azul);border-width:2.5px;box-shadow:8px 8px 0 rgba(36,64,255,.9)}
@media(max-width:899.9px){.f03-card--destacada{order:-1}}
@media(min-width:900px){
  .f03-card--destacada,
  html.js .f03-grid.is-shown>.f03-card--destacada{transform:translateY(-14px)}
}
.f03-tag-flotante{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%) rotate(-2deg);z-index:3;
  background:var(--azul);color:#fff;border:2px solid #09090e;border-radius:var(--rad-pill);
  font-family:var(--f-display);font-weight:800;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  padding:.4rem 1.1rem;box-shadow:3px 3px 0 #09090e;
}
.f03-sticker-star{top:76px;right:-18px;transform:rotate(8deg)}
.f03-sticker-cart{bottom:88px;left:-20px;transform:rotate(-7deg)}
.f03-card--destacada .f03-etiqueta{visibility:hidden}
/* Las 3 tarjetas a plomo: título, precio y botón en la misma línea. */
@media(min-width:900px){
  #f03-planes .f03-grid{align-items:stretch}
  #f03-planes .f03-card{display:flex;flex-direction:column}
  #f03-planes .f03-cbody{flex:1;display:flex;flex-direction:column}
  #f03-planes .f03-cbody .btn{margin-top:auto}
}
.f03-cbody{display:flex;flex-direction:column;align-items:flex-start}
.f03-etiqueta{display:inline-block;padding:.3rem .8rem;border:1.5px solid #09090e;border-radius:var(--rad-pill);margin-bottom:.8rem}
.f03-nombre{font-family:var(--f-display);font-weight:800;font-size:1.15rem;color:var(--white)}
.f03-precio{font-size:clamp(2rem,5vw,2.5rem);line-height:1.05;margin-top:.35rem}
.f03-card--destacada .f03-precio{color:var(--azul)}
.f03-mensual{font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--muted);margin-bottom:.7rem}
.f03-paraquien{font-size:.92rem;color:var(--muted);margin-bottom:1rem;padding-bottom:1rem;border-bottom:1.5px dashed rgba(9,9,14,.15);width:100%}
.f03-bullets{width:100%;margin-bottom:1.2rem;font-size:.92rem}
.f03-bullets li{margin-bottom:.55rem}
.f03-cta{width:100%;margin-top:auto;white-space:normal;text-align:center}

/* Bonos: chips-tarjetitas */
.f03-bonos{
  display:grid;gap:.9rem;margin-top:clamp(2rem,5vw,2.8rem);
}
@media(min-width:640px){.f03-bonos{grid-template-columns:repeat(3,minmax(0,1fr))}}  /* 6-sep: 3 bonos (salió el píxel) */
.f03-bono{
  position:relative;background:#fff;border-radius:14px;
  padding:1.4rem .95rem .95rem;font-size:.82rem;color:var(--muted);
}
.f03-bono:nth-child(odd),
html.js .f03-bonos.is-shown>.f03-bono:nth-child(odd){transform:rotate(-.7deg)}
.f03-bono:nth-child(even),
html.js .f03-bonos.is-shown>.f03-bono:nth-child(even){transform:rotate(.6deg)}
.f03-bono strong{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:.9rem;color:var(--white);margin-bottom:.3rem;
}
.f03-bono p{line-height:1.45}
.f03-bono-valor{
  position:absolute;top:-11px;right:10px;
  background:#f4efe6;border:2px solid #09090e;border-radius:var(--rad-pill);
  font-family:var(--f-display);font-weight:800;font-size:.72rem;color:#09090e;
  padding:.18rem .6rem;box-shadow:2px 2px 0 #09090e;
}

/* Escasez + condiciones */
.f03-condiciones{margin-top:clamp(1.8rem,4vw,2.4rem);display:flex;flex-direction:column;gap:.8rem}
.f03-escasez{
  display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
  background:var(--azul);color:#fff;border:2px solid #09090e;
  border-radius:var(--rad-pill);box-shadow:var(--sombra-dura);
  font-family:var(--f-display);font-weight:700;font-size:.88rem;
  padding:.65rem 1.2rem;line-height:1.35;
}
.f03-escasez-dot{
  flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#fff;
  animation:f03pulse 1.6s ease-in-out infinite;
}
@keyframes f03pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
.f03-sinperm{font-family:var(--f-display);font-weight:700;font-size:.92rem;color:var(--crema)}
.f03-notapago{max-width:68ch}

/* ══════════════ f04 · COMPARACIÓN ══════════════ */
/* Móvil: tarjetas hslider · Desktop: tabla */
.f04-wrap{display:none;background:var(--panel)}
@media(min-width:768px){
  .f04-wrap{display:block}
}
/* 23-ago · móvil: criterio por criterio, los 3 caminos JUNTOS (el hslider
   mostraba una columna a la vez y la comparación no existía). */
.f04-crits{display:grid;gap:.9rem}
@media(min-width:768px){ .f04-crits{display:none} } /* va DESPUÉS de la base: mismo peso, gana el orden */
.f04-crit{
  background:var(--sup-2-fondo);border:1.5px solid var(--sup-2-linea);
  border-radius:var(--rad);padding:1rem 1rem .6rem;box-shadow:var(--sup-2-sombra);
}
.f04-crit-t{
  font-family:var(--f-display);font-weight:800;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--white);margin-bottom:.6rem;
}
.f04-fila{display:flex;gap:.55rem;align-items:flex-start;padding:.5rem .55rem;border-radius:10px}
.f04-fila .f04-veri{flex:none;margin-top:.1rem}
.f04-quien{
  display:block;font-family:var(--f-display);font-weight:700;font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.12rem;
}
.f04-fila p{font-size:.84rem;line-height:1.4;color:var(--crema)}
.f04-fila--tp{background:rgba(36,64,255,.08);border:1.5px solid var(--azul);margin:.15rem 0 .45rem}
.f04-fila--tp .f04-quien{color:var(--azul)}
.f04-fila--tp p{font-weight:600;color:var(--white)}

/* chips de veredicto: se lee sin leer.
   ⚠ NO unificar con el ✓ verde / "!" rojo de t04: son lenguajes distintos a
   propósito (t04 = estado con/sin mantención · f04 = veredicto por camino). */
.f04-veri{
  display:inline-grid;place-items:center;width:20px;height:20px;margin-right:.5rem;
  border-radius:50%;border:1.5px solid rgba(9,9,14,.5);color:rgba(9,9,14,.6);
  font-size:.68rem;font-weight:800;vertical-align:-4px;
}
.f04-veri--si{background:var(--azul);border-color:var(--azul);color:#fff}
.f04-veri--ok{border-color:var(--azul);color:var(--azul)}
.f04-reco{
  display:inline-block;margin-left:.4rem;padding:.14rem .5rem;
  border-radius:var(--rad-pill);background:#f4efe6;border:1.5px solid #09090e;
  color:#09090e;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  transform:rotate(-3deg);
}
.f04-vered th,.f04-vered td{border-top:2px solid var(--line-strong);font-weight:700;color:var(--white)}

.f04-table{min-width:760px}
/* el gris --muted era la queja literal de el cliente ("letras grises… dejo de verla"):
   el cuerpo de la tabla sube a tinta */
.f04-table td{color:var(--crema);font-size:.9rem;line-height:1.5;vertical-align:top}
.f04-table thead th{color:var(--crema)}
.f04-criterio{
  font-family:var(--f-display);font-weight:700;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--crema);
  white-space:nowrap;vertical-align:top;border-bottom:1px solid var(--line);
  padding:.9rem 1.1rem;text-align:left;
}
.f04-table tr:last-child .f04-criterio{border-bottom:0}
.f04-tp{
  background:rgba(36,64,255,.07);color:var(--crema)!important;
  border-left:2.5px solid var(--azul);font-weight:600;
}
.f04-tp--head{
  color:var(--azul)!important;font-stretch:118%;font-size:.82rem!important;
}
.f04-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ══════════════ f05 · PACK DE REDES ══════════════ */
.f05-banda{position:relative;overflow:visible;max-width:980px;margin-inline:auto}
.f05-banda .window-bar{border-radius:14px 14px 0 0}
.f05-sticker{top:50%;right:-20px;transform:translateY(-50%) rotate(8deg)}
@media(max-width:767.9px){
  .f05-sticker{top:-24px;right:16px;transform:rotate(8deg)}
  /* en móvil el corazón cae sobre la barra: que no tape "@tuplantilla" */
  .f05-banda .window-title{margin-right:3.4rem}
}
.f05-body{display:flex;flex-direction:column;gap:1.2rem}
@media(min-width:900px){
  .f05-body{
    flex-direction:row;align-items:center;gap:1.6rem;
    padding-block:1.3rem;
  }
  .f05-col--txt{flex:0 0 220px}
  .f05-chips{flex:1}
  .f05-col--precio{flex:0 0 auto;text-align:center;padding-right:1.4rem}
}
.f05-etiqueta{display:inline-block;padding:.3rem .8rem;border:1.5px solid #09090e;border-radius:var(--rad-pill);margin-bottom:.6rem}
.f05-paraquien{font-size:.88rem;color:var(--muted);line-height:1.5}
.f05-chips{display:flex;flex-wrap:wrap;gap:.5rem;align-content:center}
.f05-chip{
  display:inline-flex;align-items:center;
  border:1.5px solid #09090e;border-radius:var(--rad-pill);
  background:#f4efe6;color:#09090e;
  font-family:var(--f-display);font-weight:700;font-size:.78rem;
  padding:.45rem .9rem;line-height:1.3;
}
.f05-chip:nth-child(odd){transform:rotate(-1deg)}
.f05-chip:nth-child(even){transform:rotate(.8deg)}
.f05-chip::before{
  content:"+";margin-right:.45rem;
  width:1.1rem;height:1.1rem;border-radius:50%;flex:0 0 auto;
  background:var(--azul);color:#fff;font-weight:800;font-size:.8rem;
  display:grid;place-items:center;line-height:1;
}
.f05-precio{font-size:clamp(1.9rem,4.5vw,2.3rem);line-height:1;color:var(--azul)}
.f05-cta{margin-top:.8rem;white-space:normal;text-align:center}


/* ════════════════════════════════════════════════════════════
   ACTO CIERRE — z01-faq (crema, FAQ completo con tabs+acordeón)
   + z02-cierre (póster negro final "Potencia tu negocio")
   Prefijos: .z01- / .z02-   ·   tokens de base.css, nada redefinido
   ════════════════════════════════════════════════════════════ */

/* ───────────── z01 · FAQ ───────────── */
.z01-wrap{max-width:820px;margin-inline:auto}

.z01-tabs .tab-rail{position:sticky;top:calc(var(--nav-h) + .4rem);z-index:5;background:#f7f2e9;padding-block:.5rem .6rem; /* calza con el data-bg de z01 — si cambias uno, cambia el otro */
  /* que la banda sticky no corte la retícula de golpe */
  box-shadow:0 10px 14px -12px rgba(9,9,14,.18)}

/* 23-ago · calidez FAQ: numeración 01-26 + contadores por pestaña.
   El summary pasa de space-between a flex-start: el ícono conserva su
   esquina con margin-left:auto y la geometría del texto no se mueve.
   ⚠ numeración corrida a mano en el HTML: si se agrega/reordena una
   pregunta, hay que renumerar. */
#z01-faq .acc-sum{justify-content:flex-start}
#z01-faq .acc-sum .acc-ico{margin-left:auto}
#z01-faq .acc-num{
  flex:0 0 auto;display:inline-grid;place-items:center;
  min-width:1.85rem;height:1.55rem;margin-right:.35rem;padding:0 .3rem;
  border:1.5px solid rgba(27,49,201,.28);border-radius:8px;
  background:rgba(36,64,255,.07);
  font-family:var(--f-display);font-weight:800;font-size:.8rem;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:var(--azul-deep);
  transition:background .22s,border-color .22s,color .22s;
}
#z01-faq .acc[open] .acc-num{
  background:var(--azul);border-color:var(--azul);color:#fff
}
#z01-faq .acc-sum:hover .acc-num{border-color:rgba(27,49,201,.5);background:rgba(36,64,255,.13)}
#z01-faq .tab-count{
  display:inline-grid;place-items:center;min-width:20px;height:20px;
  padding:0 5px;margin-left:.5rem;border-radius:var(--rad-pill);
  background:var(--bg);border:1.5px solid var(--line-strong);
  font-size:.66rem;font-weight:800;color:var(--muted);
}
#z01-faq .tab-btn.is-active .tab-count{background:#fff;border-color:#fff;color:var(--azul)}
@media(max-width:767.9px){
  #z01-faq .acc-num{font-size:.74rem;min-width:1.7rem;height:1.45rem;margin-right:.3rem}
  #z01-faq .tab-count{min-width:18px;height:18px;font-size:.6rem}
}

/* tarjeta "¿tu duda no está aquí?" con sticker asomándose */
.z01-ask{position:relative;margin-top:clamp(2.2rem,5vw,3rem);
  padding-right:clamp(1.2rem,5vw,3rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.z01-ask-txt{flex:1 1 320px;color:var(--muted);font-size:.96rem}
.z01-ask-btn{min-height:44px}
.z01-ask-sticker{top:-40px;right:-14px;transform:rotate(9deg);z-index:2}
@media(min-width:768px){
  /* El botón vive pegado a la derecha y arranca a 22px del borde superior
     de la tarjeta: el sticker se asoma por fuera y por encima para no
     tocarlo (medido: lo pisaba 11x1px a 1440). */
  .z01-ask-sticker{top:-36px;right:-18px}
}

.z01-cta{justify-content:center}
.z01-cta .btn{min-height:44px}

/* ───────────── z02 · CIERRE PÓSTER NEGRO ─────────────
   Homenaje a la story "Potenciá tu ⭕marca⭕": mucho aire negro,
   headline fino gigante + scribble, pill blanca, @TUPLANTILLA.CL */
.z02{overflow:hidden;padding-block:clamp(4.5rem,11vw,8rem)}
.z02-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}

.z02-head{max-width:840px;margin-inline:auto}
.z02-kicker{justify-content:center}
.z02-title{
  font-size:clamp(2.4rem,7.8vw,4.5rem);
  text-wrap:balance;
  margin-bottom:.4rem;
}
.z02-w{display:inline-block}
.z02-title .scribble{padding-inline:.06em}
.z02-sub{margin-inline:auto;margin-top:1rem;max-width:34ch}

/* form window centrada */
.z02-form-card{width:100%;max-width:480px;margin-top:clamp(2rem,5vw,3rem);text-align:left}
.z02-form .form-field{margin-bottom:.85rem}
.z02-submit{width:100%;min-height:50px;font-size:1rem}
.z02-ok{margin-top:.8rem;color:var(--ok);font-size:.88rem}
.z02-fallback{
  display:inline-flex;align-items:center;min-height:44px;
  margin-top:.55rem;font-size:.85rem;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.z02-fallback:hover{color:var(--azul-glow)}
.z02-urgencia{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--line)}

/* firma de story bajo el form */
.z02-marca{margin-top:clamp(1.8rem,4vw,2.6rem);font-size:.82rem;letter-spacing:.22em;color:var(--crema);opacity:.85}

/* donas gigantes recortadas (como el póster real) — transform-only para parallax */
.z02-dona{position:absolute;border-radius:50%;border-style:solid;pointer-events:none;will-change:transform}
.z02-dona--blanca{
  width:clamp(300px,42vw,600px);height:clamp(300px,42vw,600px);
  border-width:clamp(52px,7vw,104px);border-color:#fff;
  /* más arriba y más afuera: el anillo blanco pisaba la última palabra del titular (blanco sobre blanco) */
  top:calc(clamp(300px,42vw,600px) * -.6);right:calc(clamp(300px,42vw,600px) * -.42);
}
.z02-dona--azul{
  width:clamp(200px,28vw,400px);height:clamp(200px,28vw,400px);
  border-width:clamp(40px,5vw,76px);border-color:var(--azul);
  bottom:calc(clamp(200px,28vw,400px) * -.4);left:calc(clamp(200px,28vw,400px) * -.24);
}
@media(max-width:640px){
  /* en pantallas chicas las donas se repliegan a las esquinas para no pisar el titular */
  .z02-dona--blanca{width:230px;height:230px;border-width:46px;top:-128px;right:-86px}
  .z02-dona--azul{width:180px;height:180px;border-width:38px;bottom:-96px;left:-70px}
}

/* ===== Contención horizontal (decorados absolutos jamás estiran el documento) ===== */
main{overflow-x:clip}
#c02-marquee,#t03-sietedias,#z02-cierre,#t02-garantia{overflow:hidden}

/* ===== t03 didáctico: BURBUJA DE CHAT centrada bajo la ventana + pieza destacada =====
   Derecha (sin rotación), sin chinche: una nube de diálogo con colita hacia
   la ventana — mismo lenguaje visual que el chat de t04b. El texto de cada
   día "llega" como mensaje (pop + palabras que se escriben, ver sections.js). */
.t03-caps{
  max-width:440px;
  background:#fff;border:2px solid #09090e;border-radius:14px;
  box-shadow:4px 4px 0 rgba(9,9,14,.85);
  padding:.85rem 1.05rem .9rem;
  margin:.9rem auto 0;
  position:relative;z-index:3;
}
/* colita de la nube: apunta hacia arriba, a la ventana que se está armando */
.t03-caps::before,.t03-caps::after{content:"";position:absolute;left:50%;border-style:solid;pointer-events:none}
.t03-caps::before{top:-12px;margin-left:-12px;border-width:0 12px 12px;border-color:transparent transparent #09090e}
.t03-caps::after{top:-8.5px;margin-left:-9px;border-width:0 9px 9px;border-color:transparent transparent #fff}
.t03-cap{color:#1a1a22!important;font-size:.92rem;line-height:1.5}
.t03-cap strong{color:#2440ff}
/* pieza recién llegada: anillo pulsante que enseña QUÉ acaba de pasar */
.t03-anim [data-t03-piece].is-nueva,[data-t03-piece].is-nueva{position:relative}
[data-t03-piece].is-nueva::after{
  content:"";position:absolute;inset:-7px;border:2.5px solid #2440ff;border-radius:12px;
  animation:t03pulso 1.5s ease-out 2;pointer-events:none;
}
/* día 1: el anillo rodea el plano completo (el body clipea, va por dentro) */
.t03-body[data-t03-piece].is-nueva::after{inset:3px;border-radius:10px}
/* el post-it es absolute SIEMPRE (la regla de arriba no debe sacarlo del ancla) */
.t03-anim .t03-postit[data-t03-piece],.t03-postit[data-t03-piece]{position:absolute}
@keyframes t03pulso{0%{opacity:0;transform:scale(.92)}30%{opacity:1}100%{opacity:0;transform:scale(1.06)}}
/* botón siguiente con latido sutil que invita al click */
@media(prefers-reduced-motion:reduce){
  [data-t03-piece].is-nueva::after,.t03-online.is-live i{animation:none}
}

/* ===== t03: ventana BLANCA legible + escenario con pin + scrub + snap ===== */
#t03-sietedias .t03-window{
  background:#fff;border-color:#09090e;
  --crema:#1a1a22;--white:#09090e;--muted:rgba(26,26,34,.72);--faint:rgba(26,26,34,.45);
  --line:rgba(9,9,14,.12);--line-strong:rgba(9,9,14,.22);--azul-glow:#2440ff;
}
#t03-sietedias .t03-window .window-body{color:#1a1a22}
#t03-sietedias .t03-window .window-title{display:inline-flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.16);border-radius:999px;padding:.12rem .55rem;font-size:.68rem}
#t03-sietedias .t03-window .window-title::before{content:"🔒";font-size:.55rem}
/* La burbuja vive EN EL FLUJO, centrada bajo la ventana, en móvil Y desktop:
   cuenta en el alto real del layout (cero huecos muertos) y jamás pisa la
   ventana. En móvil el padding inferior del stage deja visible la barra
   sticky «Cotiza gratis por WhatsApp» con aire (la burbuja queda justo
   encima de ese botón, como pidió el cliente). */
.t03-anim .t03-stage{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;position:relative;padding-block:calc(var(--nav-h) + .2rem) 5rem}
/* móvil: el sobrante de altura va ABAJO (flex-start), no repartido arriba —
   así el carril queda pegado al titular y no flota un hueco negro entre ambos */
@media(max-width:1079.9px){#t03-sietedias .sec-head{margin-bottom:.5rem}}
.t03-anim .t03-window{max-height:none;overflow:visible}
.t03-anim .t03-caps{position:static;margin:.1rem auto 0;max-width:440px;z-index:4}
/* teléfonos cortos: la escena se compacta para que todo siga entrando */
@media(max-height:720px){
  .t03-anim .t03-zone{padding:.42rem .5rem .48rem}
  .t03-anim .t03-card-foto{aspect-ratio:16/9}
  .t03-anim .t03-fill{margin-top:.3rem}
  .t03-anim .t03-hero-foto{aspect-ratio:16/5.5;margin-top:.4rem}
  .t03-anim .t03-nav{padding-bottom:.3rem;margin-bottom:.35rem}
  .t03-anim .t03-heroctas{margin-top:.35rem}
  .t03-anim .t03-card-info{padding:.3rem .45rem .36rem}
  .t03-anim .t03-wspbtn{padding:.36rem .8rem}
}
@media(min-width:1080px){
  /* desktop: rail izquierda · ventana protagonista · burbuja centrada abajo */
  .t03-anim .t03-stage{justify-content:center;padding-block:calc(var(--nav-h) + .6rem) 1.6rem}
  .t03-anim .t03-caps{max-width:560px;margin-top:.35rem}
}

/* t03: las piezas jamás se salen de la ventana */
#t03-sietedias .t03-window .window-body{position:relative;overflow:hidden}

/* t03 pineado en móvil: la burbuja WhatsApp flotante Y el fondo decorativo
   del lienzo (piezas .pz que flotan detrás de toda la página) se esconden
   para no tapar/ensuciar la escena — sin esto, piezas sueltas (píldora
   azul, esqueleto) asoman entre el carril y la ventana, o detrás de la
   nota, como formas desconectadas (el CTA sticky y el botón WSP de la
   propia escena siguen dando acceso directo a WhatsApp) */
@media(max-width:1079px){
  html.t03-pinned .wsp-bubble{opacity:0;pointer-events:none;transition:opacity .25s}
  html.t03-pinned .lienzo{opacity:0;pointer-events:none;transition:opacity .25s}
}

/* f03-ancla: tarjeta blanca → tinta oscura (estaba blanco sobre blanco) */
.acto-blue .f03-ancla,#f03-planes .f03-ancla{
  --crema:#1a1a22;--white:#09090e;--muted:rgba(26,26,34,.78);--faint:rgba(26,26,34,.5);
  --azul-glow:#2440ff;color:#1a1a22;
}

/* f03-bono: tarjetitas blancas dentro del acto azul-noche → tinta oscura
   (estaban blanco sobre blanco: la "sección en blanco" bajo los planes) */
.acto-blue .f03-bono,#f03-planes .f03-bono{
  --crema:#1a1a22;--white:#09090e;--muted:rgba(26,26,34,.78);--faint:rgba(26,26,34,.5);
  --azul-glow:#2440ff;color:var(--muted);
}

/* f03: remate sobre azul-noche — la nota de pago sube de contraste */
.acto-blue .f03-notapago,#f03-planes .f03-notapago{color:rgba(255,255,255,.72)}

/* ===== t03: la escena llena el viewport, adaptable por pantalla ===== */
@media(min-width:1080px){
  .t03-anim .t03-layout{align-items:center;gap:3.25rem}

  /* ── DESKTOP: la ventana es la protagonista ── */
  #t03-sietedias .t03-window{max-width:780px}
  .t03-anim .t03-zone{padding:.7rem .75rem .75rem}
  .t03-anim .t03-stamp{font-size:.62rem;padding:.18rem .6rem;top:-11px}
  .t03-anim .t03-headline{font-size:1.38rem}
  .t03-anim .t03-fill{font-size:.72rem;max-width:52ch;margin-top:.5rem}
  .t03-anim .t03-fill--2{font-size:.64rem}
  .t03-anim .t03-nav-logo{font-size:.8rem}
  .t03-anim .t03-nav-links i{font-size:.6rem}
  .t03-anim .t03-nav-cta{font-size:.6rem;padding:.24rem .65rem}
  .t03-anim .t03-kicker{font-size:.56rem}
  .t03-anim .t03-ctamini{font-size:.68rem;padding:.38rem .85rem}
  .t03-anim .t03-hero-foto{aspect-ratio:16/6}
  .t03-anim .t03-hero-chips i{font-size:.56rem}
  .t03-anim .t03-card-stars{font-size:.6rem}
  .t03-anim .t03-card-desde{font-size:.5rem}
  .t03-anim .t03-op-tit{font-size:.8rem}
  .t03-anim .t03-op-txt{font-size:.64rem}
  .t03-anim .t03-op-firma{font-size:.56rem}
  .t03-anim .t03-foot-brand{font-size:.85rem}
  .t03-anim .t03-foot-dato{font-size:.6rem}
  .t03-anim .t03-s4{grid-template-columns:repeat(4,1fr);gap:.65rem}
  .t03-anim .t03-card-info{gap:.28rem;padding:.5rem .6rem .55rem}
  .t03-anim .t03-card-nom{font-size:.85rem}
  .t03-anim .t03-card-precio{font-size:.95rem}
  .t03-anim .t03-card-add{width:25px;height:25px;font-size:.95rem}
  .t03-anim .t03-badge247{font-size:.6rem;padding:.2rem .5rem;top:7px;left:7px}
  .t03-anim .t03-wspbtn{font-size:.9rem;padding:.6rem 1.2rem;gap:.5rem}
  .t03-anim .t03-wsp-ico{width:17px;height:16px}
  .t03-anim .t03-chat{max-width:360px;padding:.55rem .75rem .4rem}
  .t03-anim .t03-chat-txt{font-size:.8rem}
  .t03-anim .t03-chat-meta{font-size:.64rem}
  .t03-anim .t03-chat-nom{font-size:.72rem}
  .t03-anim .t03-chat-via{font-size:.6rem}
  .t03-anim .t03-chat-ava{flex-basis:28px;width:28px;height:28px;font-size:.6rem}
  .t03-anim .t03-fill--2 i{font-size:.58rem;padding:.18rem .55rem}
  .t03-anim .t03-postit{max-width:180px;font-size:.74rem;padding:.4rem .6rem}
  #t03-sietedias .t03-online{font-size:.66rem;padding:.24rem .65rem}

  /* rail: chips grandes y legibles, columna centrada frente a la ventana */
  .t03-rail{flex-basis:265px;gap:.7rem}
  .t03-day{padding:.7rem 1.15rem;gap:.6rem}
  .t03-day-num{font-size:.78rem}
  .t03-day-tit{font-size:1rem}

  /* burbuja de chat: legible de verdad, centrada bajo la ventana */
  .t03-anim .t03-caps{padding:.95rem 1.2rem 1rem}
  .t03-anim .t03-cap{font-size:1.02rem;line-height:1.55}
}

/* ===== t03: la ventana como RECORTE de altura fija sobre una página real =====
   t03-body ya no crece con el contenido: es la "ventana" (overflow:hidden,
   altura fija). t03-page es el documento completo — crece día a día y
   sections.js lo traduce hacia arriba (translateY) sincronizado con el mismo
   scroll pineado, para que cada pieza nueva arrastre lo ya armado hacia
   arriba y aparezca hueco en blanco abajo (pedido explícito: que se sienta
   "una página larga que se va armando", no un cuadro que cambia de contenido.
   Bloque intencionalmente al final del archivo t03: sobre-escribe cualquier
   gap/padding/min-height que los bloques anteriores le hayan puesto a
   .t03-body para esa métrica ya viven en .t03-page). */
/* Altura ADAPTABLE al alto real de pantalla (svh): la ventana usa todo el
   espacio que el viewport le da — restando nav, carril, barra, burbuja y la
   reserva del sticky móvil — en vez de flotar chica en un mar de negro. */
.t03-anim .t03-body{
  /* -385px (no -430): la ventana absorbe el sobrante de altura que antes
     quedaba como franja negra muerta entre la burbuja y el remate */
  height:clamp(280px,100svh - 385px,600px);min-height:0;
  padding:0;overflow:hidden;
}
.t03-anim .t03-page{
  padding:.9rem 1rem 1.2rem;gap:1.05rem;
  will-change:transform;
}
@media(min-width:1080px){
  .t03-anim .t03-body{height:clamp(380px,100svh - 330px,600px)}
  .t03-anim .t03-page{padding:1.15rem 1.3rem 1.5rem;gap:1.3rem}
}
/* pantallas cortas: gana sobre el bloque desktop de arriba si ambas
   condiciones calzan (ventana ancha pero baja) — la altura corta manda */
@media(max-height:700px){
  .t03-anim .t03-body{height:clamp(215px,100svh - 400px,560px)}
  .t03-anim .t03-page{padding:.6rem .75rem .85rem;gap:.6rem}
}

/* ===== t03 móvil pineado =====
   La burbuja vive en el FLUJO (ver bloque «burbuja centrada» más arriba):
   carril + ventana + burbuja cuentan juntos en el alto del layout, el
   justify-content:center del stage centra el grupo completo y la ventana
   svh-adaptable absorbe el alto sobrante — cero huecos muertos, y la
   burbuja queda justo sobre la barra sticky «Cotiza gratis por WhatsApp»
   (padding-bottom 5.4rem del stage = la barra siempre visible con aire). */

/* ═════ t04b · CHAT WHATSAPP REAL (teléfono con papel tapiz) ═════ */
/* 23-ago v2 · espejo del zig-zag de t04: teléfono a la izquierda, cabecera y
   los 3 CASOS con masa real a la derecha (la v1 con píldoras flotantes quedó
   pelada — nota baja de el cliente, reconstruido con otra estructura).
   El conjunto derecho se centra verticalmente contra el teléfono: nada de
   columnas colgando de arriba con un mar de vacío abajo. */
.t04b-lado{display:none}
@media(min-width:1080px){
  #t04b-chat .container{
    display:grid;
    grid-template-columns:minmax(0,420px) minmax(340px,560px);
    /* filas espaciadoras 1fr arriba y abajo: centran cabecera+casos contra el
       teléfono SIN una sola constante a mano (la causa de siempre) */
    grid-template-rows:1fr auto auto 1fr;
    grid-template-areas:"fono ." "fono head" "fono lado" "fono .";
    justify-content:center;              /* el par completo centrado: el fono no toca el borde */
    column-gap:clamp(2.5rem,4.5vw,3.6rem);
    align-items:start;
  }
  #t04b-chat .t04b-fono{grid-area:fono;margin:0;align-self:center}
  #t04b-chat .sec-head--mini{grid-area:head;margin-bottom:1.1rem}
  #t04b-chat .t04b-lado{display:block;grid-area:lado}
  .t04b-casos{display:grid;gap:.7rem}
  .t04b-caso{
    display:flex;gap:.8rem;align-items:flex-start;
    background:var(--sup-2-fondo);border:1.5px solid var(--sup-2-linea);
    border-radius:var(--rad);padding:.8rem .9rem;box-shadow:var(--sup-2-sombra);
    transition:border-color .45s ease,box-shadow .45s ease;
  }
  .t04b-caso-ico{
    flex:0 0 38px;width:38px;height:38px;border-radius:12px;
    display:grid;place-items:center;font-size:1.05rem;
    background:rgba(37,211,102,.14);border:1.5px solid rgba(9,9,14,.35);
  }
  .t04b-caso b{display:block;font-family:var(--f-display);font-weight:800;font-size:.95rem;color:var(--white);margin-bottom:.15rem}
  .t04b-caso p{margin:0;font-size:.86rem;line-height:1.45;color:var(--muted)}
  /* la tarjeta se ENCIENDE cuando el chat reproduce su conversación:
     borde al verde WhatsApp + sombra dura — mismo verde del header del fono */
  .t04b-caso.is-live{border-color:#1fa855;box-shadow:var(--sombra-dura)}
  .t04b-caso.is-live .t04b-caso-ico{background:rgba(37,211,102,.28)}
  .t04b-nota-cierre{
    margin:.9rem 0 0;font-size:.88rem;color:var(--muted);
  }
  .t04b-nota-cierre strong{color:var(--white)}
}
.t04b-fono{
  max-width:420px;margin-inline:auto;
  background:#fff;border:2px solid #09090e;border-radius:22px;
  overflow:hidden;box-shadow:var(--sombra-dura);
}
.t04b-top{
  display:flex;align-items:center;gap:.6rem;
  background:#075e54;color:#fff;padding:.6rem .8rem;
}
.t04b-back{font-size:1.5rem;line-height:1;opacity:.9}
.t04b-avatar{
  width:34px;height:34px;border-radius:50%;background:#f4efe6;
  display:grid;place-items:center;flex:0 0 auto;border:1.5px solid rgba(255,255,255,.4);
}
.t04b-avatar img{width:22px;height:auto}
.t04b-nombre{
  display:flex;flex-direction:column;line-height:1.15;
  font-family:var(--f-display);font-weight:700;font-size:.92rem;min-width:0;
}
.t04b-estado{font-style:normal;font-weight:400;font-family:var(--f-text);font-size:.68rem;opacity:.85}
.t04b-icons{margin-left:auto;display:flex;gap:.9rem;font-size:.95rem;opacity:.9}
.t04b-hilo{
  position:relative;display:flex;flex-direction:column;gap:.45rem;
  padding:.9rem .8rem 1rem;min-height:340px;
  background:#e7dfd4;
  background-image:radial-gradient(rgba(9,9,14,.045) 1.2px,transparent 1.2px);
  background-size:16px 16px;
}
.t04b-dia{
  align-self:center;font-size:.66rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#5a6a72;background:#dce8ee;
  padding:.22rem .7rem;border-radius:8px;box-shadow:0 1px 1px rgba(9,9,14,.08);
  margin-bottom:0;
}
.t04b-msg{display:flex}
.t04b-msg--cliente{justify-content:flex-end}
.t04b-msg--tp{justify-content:flex-start}
.t04b-burbuja{
  position:relative;max-width:80%;
  padding:.45rem .6rem .3rem;border-radius:9px;
  box-shadow:0 1px 1px rgba(9,9,14,.12);
  font-size:.88rem;line-height:1.4;color:#111b21;
}
.t04b-burbuja p{margin:0 0 .1rem}
.t04b-burbuja--cliente{background:#d9fdd3;border-top-right-radius:2px}
.t04b-burbuja--cliente::after{
  content:"";position:absolute;top:0;right:-7px;
  border:8px solid transparent;border-top-color:#d9fdd3;border-right:0;
}
.t04b-burbuja--tp{background:#fff;border-top-left-radius:2px}
.t04b-burbuja--tp::after{
  content:"";position:absolute;top:0;left:-7px;
  border:8px solid transparent;border-top-color:#fff;border-left:0;
}
.t04b-meta{
  display:flex;justify-content:flex-end;align-items:center;gap:.25rem;
  font-size:.64rem;color:rgba(17,27,33,.5);line-height:1;
}
.t04b-check{font-style:normal;color:#53bdeb;letter-spacing:-.12em;font-size:.72rem}
.t04b-typing{
  display:flex;gap:4px;align-items:center;
  background:#fff;border-radius:9px;border-top-left-radius:2px;
  padding:.55rem .7rem;width:max-content;
  box-shadow:0 1px 1px rgba(9,9,14,.12);
}
.t04b-typing i{
  width:7px;height:7px;border-radius:50%;background:#9aa8b0;
  animation:t04bDot 1.1s ease-in-out infinite;
}
.t04b-typing i:nth-child(2){animation-delay:.18s}
.t04b-typing i:nth-child(3){animation-delay:.36s}
@keyframes t04bDot{0%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
.t04b-input{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .7rem;background:#f0ece6;border-top:1px solid rgba(9,9,14,.08);
}
.t04b-input span{
  flex:1;background:#fff;border-radius:999px;padding:.55rem .95rem;
  font-size:.85rem;color:rgba(17,27,33,.45);
}
.t04b-mic{
  width:40px;height:40px;border-radius:50%;background:#00a884;
  display:grid;place-items:center;font-size:1rem;font-style:normal;
  box-shadow:0 2px 6px rgba(0,168,132,.4);
}
/* animación: mensajes ocultos solo cuando el motor va a reproducir la conversación */
html.js .t04b-fono.t04b-anim .t04b-msg,
html.js .t04b-fono.t04b-anim .t04b-typing{opacity:0}
@media(prefers-reduced-motion:reduce){
  .t04b-fono .t04b-msg,.t04b-fono .t04b-typing{opacity:1!important}
  .t04b-typing{display:none}
  .t04b-typing i{animation:none}
}
html.no-gsap .t04b-fono .t04b-msg{opacity:1!important}
html.no-gsap .t04b-typing{display:none}
.t04b-typing--done{display:none}

/* ============================================================
   t06 · PORTAFOLIO — páginas vivas dentro de teléfonos
   ============================================================ */
#t06-portafolio{position:relative;overflow:hidden}
#t06-portafolio>.container{position:relative;z-index:2}
.t06-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.t06-arc{position:absolute;border-radius:50%}
.t06-arc--a{width:clamp(300px,32vw,520px);aspect-ratio:1;top:-20%;left:-10%;border:clamp(30px,3.6vw,58px) solid rgba(255,255,255,.07)}
.t06-arc--b{width:clamp(170px,17vw,260px);aspect-ratio:1;bottom:-14%;right:-7%;border:clamp(16px,2vw,30px) solid rgba(36,64,255,.28)}
.t06-plus{position:absolute;font-family:var(--f-display);font-weight:800;font-style:normal;color:var(--azul);opacity:.55;font-size:clamp(15px,1.6vw,22px);line-height:1}
.t06-plus--1{top:13%;right:7%}
.t06-plus--2{bottom:16%;left:4.5%}

.t06-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,2.4vw,2.2rem);align-items:start;padding-top:.9rem;max-width:1080px;margin-inline:auto}
@media(min-width:768px) and (max-width:1079.9px){.t06-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem}}
.t06-item{display:flex;flex-direction:column;gap:.75rem;align-items:center;min-width:0}

.t06-phone{
  position:relative;width:100%;max-width:330px;aspect-ratio:9/18.6;
  min-height:0;flex-shrink:0; /* hijo flex de .t06-item: sin esto, el iframe
    alto de adentro lo estira más allá de su aspect-ratio (bug real, reportado
    por el cliente: "se extiende", "se ve horrible") */
  background:#101016;border:3px solid #23232e;border-radius:32px;padding:9px;
  box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2);
}
@media(min-width:1080px){
  .t06-item:nth-child(1) .t06-phone{transform:rotate(-2.4deg) translateY(10px)}
  .t06-item:nth-child(2) .t06-phone{transform:translateY(-8px)}
  .t06-item:nth-child(3) .t06-phone{transform:rotate(2.4deg) translateY(10px)}
  .t06-item:hover .t06-phone{transform:rotate(0) translateY(-10px)}
}
.t06-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36%;height:15px;background:#060608;border-radius:0 0 11px 11px;z-index:3;pointer-events:none}
.t06-screen{position:relative;width:100%;height:100%;min-height:0;border-radius:23px;overflow:hidden;background:#0c0c12}
/* con el iframe en vivo, LA VENTANA scrollea (no el iframe cruzado de origen,
   ver sections.js) — nuestro propio div, con su scroll contenido de verdad */
/* 18-ago: la ventana ya no scrollea — con el iframe a 393x852 el que scrollea
   es la página de dentro, como en un teléfono de verdad. Ver sections.js. */
.t06-phone.is-live .t06-screen{overflow:hidden;overscroll-behavior:contain}
/* Escala por ANCHO con alto automático: la captura conserva su proporción y llena
   el ancho del teléfono; sobra por abajo (clip). Así el logo del cliente jamás se
   recorta a los lados aunque el CDN de Hostinger sirva una variante deformada. */
.t06-screen img{width:100%;height:auto;display:block;vertical-align:top}
/* 17-ago-2026 · el fondo era #fff, de cuando el portafolio eran páginas claras
   (Shet Burger y compañía). Las tres nuevas son oscuras, así que ese blanco se
   veía como un bloque en blanco durante toda la carga — y en cualquier
   navegador que tarde en pintar, se queda blanco a secas. */
.t06-screen iframe{display:block;border:0;background:#0c0c12}
/* mientras el iframe carga: un latido tenue en vez de un hueco muerto */
.t06-phone:not(.is-live) .t06-screen::after,
.t06-phone.is-live .t06-screen::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,#0c0c12 0%,#16162090 46%,#0c0c12 92%);
  background-size:220% 100%;animation:t06Carga 1.9s ease-in-out infinite}
.t06-phone.is-live .t06-screen::after{animation-delay:.2s}
/* en cuanto el iframe está encima, el latido queda debajo y no molesta */
.t06-screen iframe{position:relative;z-index:1}
@keyframes t06Carga{
  0%{background-position:0% 0}
  100%{background-position:-120% 0}
}
@media(prefers-reduced-motion:reduce){
  .t06-phone .t06-screen::after{animation:none}
}

.t06-play{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.55rem 1.05rem;border-radius:var(--rad-pill);
  background:#f4efe6;color:#09090e;border:2px solid #09090e;
  font-family:var(--f-display);font-weight:800;font-size:.78rem;letter-spacing:.02em;
  box-shadow:0 4px 0 #000;cursor:pointer;white-space:nowrap;
  transition:transform .2s,box-shadow .2s;
}
.t06-play:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 6px 0 #000}
.t06-play:active{transform:translateX(-50%) scale(.95);box-shadow:0 2px 0 #000}
.t06-phone.is-live .t06-play{display:none}
.t06-live-badge{
  position:absolute;top:-11px;right:12px;z-index:5;
  font-family:var(--f-display);font-weight:800;font-size:.62rem;letter-spacing:.12em;
  color:#052e14;background:#22c55e;border:2px solid #09090e;border-radius:var(--rad-pill);
  padding:.28rem .6rem;box-shadow:0 3px 0 #000;
}
.t06-tag{font-size:.87rem;color:rgba(244,239,230,.72);text-align:center}
.t06-tag strong{color:#f4efe6}
.t06-link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;
  font-family:var(--f-display);font-weight:700;font-size:.78rem;letter-spacing:.04em;
  color:#6d86ff;text-decoration:none;border-bottom:none;
}
.t06-link:hover{color:#8fa2ff;text-decoration:underline;text-underline-offset:4px}
.t06-nota{text-align:center;margin-top:1.6rem}

@media(max-width:767.9px){
  .t06-phone{max-width:none}
  .t06-arc--a{top:-8%;left:-30%}
}
html.no-gsap .t06-item{opacity:1!important;transform:none!important}

/* ── f03 · Cómo llega el pedido (6-sep) ─────────────────────────────────
   Ventana con dos columnas en PC: argumento a la izquierda, el mensaje de
   ejemplo como papel a la derecha. Texto plano: no imita a WhatsApp.     */
.f03-pedido{margin-top:clamp(1.6rem,4vw,2.2rem)}
.f03-pedido-body{display:grid;gap:1.4rem}
@media(min-width:900px){.f03-pedido-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2.2rem;align-items:center}}
.f03-pedido-t{font-family:var(--f-display);font-weight:800;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.12;letter-spacing:-.01em;color:#09090e;margin:.75rem 0 .55rem}
.f03-pedido-sub{color:var(--muted);font-size:.92rem;line-height:1.5;margin:0}
.f03-pedido-claves{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.6rem}
.f03-pedido-claves li{position:relative;padding-left:1.7rem;font-size:.88rem;line-height:1.4;color:var(--muted)}
.f03-pedido-claves li::before{content:"✓";position:absolute;left:0;top:-.05em;font-family:var(--f-display);font-weight:800;font-size:1rem;color:var(--azul)}
.f03-pedido-claves li strong{display:block;color:#09090e;font-weight:700}
.f03-pedido-papel{
  margin:0;background:#f4efe6;border:2px solid #09090e;border-radius:12px;box-shadow:5px 5px 0 #09090e;
  padding:.9rem 1.05rem 1rem;color:#09090e;
  font-family:var(--f-mono,ui-monospace,"SF Mono",Menlo,Consolas,monospace);font-size:.84rem;
}
.f03-pedido-cap{font-family:var(--f-display);font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(9,9,14,.62);margin:0 0 .55rem}
.f03-pedido-linea{display:flex;justify-content:space-between;gap:1rem;margin:0;padding:.42rem 0;border-bottom:1px dashed rgba(9,9,14,.28);line-height:1.3}
.f03-pedido-linea span{min-width:0}
.f03-pedido-linea b{font-weight:700;white-space:nowrap;text-align:right}
.f03-pedido-linea--cab{font-family:var(--f-display);font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid #09090e;padding-top:0}
.f03-pedido-linea--total{font-weight:800;font-size:.95rem;border-bottom:2px solid #09090e}
.f03-pedido-linea--total b{font-size:1.05rem}
.f03-pedido-linea:last-child{border-bottom:0}
/* teléfono: con 3 bonos, el último no queda huérfano a media fila */
@media(max-width:639.9px){.f03-bonos>.f03-bono:last-child{grid-column:1/-1}}
/* 6-sep · pestañas Pedido / Reserva / Cotización dentro del bloque del pedido */
.f03-pedido-ejemplos{min-width:0}
.f03-pedido-tabbar{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .85rem}
.f03-pedido-tabbar .tab-btn{background:#fff;border-color:rgba(9,9,14,.32);color:rgba(9,9,14,.74);font-size:.78rem;padding:.5rem .9rem}
.f03-pedido-tabbar .tab-btn.is-active{background:var(--azul);border-color:var(--azul);color:#fff}
.f03-pedido-papel[hidden]{display:none}
.f03-pedido-linea span{flex:1 1 auto;min-width:0}
.f03-pedido-linea b{flex:0 1 auto;min-width:0;white-space:normal;text-align:right}
@media(max-width:639.9px){.f03-tab-rubro{display:none}.f03-pedido-tabbar{gap:.4rem}.f03-pedido-tabbar .tab-btn{padding:.5rem .8rem}}

/* 6-sep · píldoras del FAQ en teléfono (el dueño: «no se ve la tercera; la
   gente no sabe que hay que deslizar»). Hasta 639,9 px dejan de ser una tira
   con scroll lateral y pasan a grilla de 2 por fila, todas a la vista; la
   quinta, que quedaría sola, va a lo ancho. Cada píldora conserva 44 px de
   alto y 8,8 px de separación. La banda deja de ser sticky en teléfono: con
   3 filas se comía 150 px de pantalla al desplazar. Ámbito #z01-faq: la
   barra de pestañas del pedido (f03) no cambia.                            */
@media(max-width:639.9px){
  #z01-faq .tab-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;overflow:visible;
    position:static;box-shadow:none;padding-block:0 .2rem;margin-bottom:1.1rem;scrollbar-width:auto}
  #z01-faq .tab-btn{flex:none;width:100%;min-width:0;white-space:normal;line-height:1.15;padding:.55rem .75rem;
    display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:44px}
  #z01-faq .tab-btn:last-child{grid-column:1/-1}
}