/* =====================================================================
   FaenApp · Propuesta A "Caja que Cuadra" — estilo.css
   Capas: 1 base · 2 componentes del mundo (tirilla, sello, ticket, rueda)
          3 apartados (PC) · 4 intro y movimiento · 5 diapositivas PC
          6 TELÉFONO (reel) AL FINAL: la regla de abajo gana.
   Paleta 60/30/10 de la marca: #1D1D1B fondo · #0437B3 superficies ·
   #128BEC acento (texto oscuro encima). Verde y rojo SOLO como estado.
   Solo se anima transform y opacity: sin filter, blur ni backdrop-filter.
   ===================================================================== */

:root{
  --fondo:#1D1D1B;          /* 60 % */
  --sup:#0437B3;            /* 30 % sólido: ticket de precio, sello, cierre */
  --tinte:#182236;          /* 18 % de #0437B3 sobre #1D1D1B: fichas y tirillas */
  --tinte-2:#1F2C48;
  --acento:#128BEC;         /* 10 %: llamados, contadores activos, bordes corrientes */
  --sobre-acento:#1D1D1B;   /* 5,6:1 sobre #128BEC */
  --texto:#F5F7FA;
  --apagado:#A7B0BE;
  --linea:rgba(167,176,190,.14);
  --linea-azul:rgba(18,139,236,.34);
  --ok:#3DCB7F;             /* estado "Cuadra" */
  --mal:#F0605D;            /* estado "Descuadre" */
  --barra:64px;
  --pie:84px;               /* alto reservado para la barra de acción de abajo (PC) */
  --cab:92px;               /* teléfono: cabecera 52 + fila de apartados 40 */
  --f-tit:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Red Hat Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --seca:cubic-bezier(.16,1,.3,1);
  --rebote:cubic-bezier(.34,1.56,.64,1);
  --dientes: radial-gradient(circle 6px at 50% 0, #0000 95%, #000 100%) 50% 0 / 16px 51% repeat-x,
             radial-gradient(circle 6px at 50% 100%, #0000 95%, #000 100%) 50% 100% / 16px 51% repeat-x;
  /* solo el pie dentado (comprobantes de Funciones) */
  --dientes-pie: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 6px) no-repeat,
                 radial-gradient(circle 6px at 50% 100%, #0000 95%, #000 100%) 50% 100% / 16px 12px repeat-x;
}

/* ---------- 1 · BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--fondo); color-scheme:dark; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--fondo); color:var(--texto); font:400 16px/1.5 var(--f-tit); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,p,figure,ul,ol,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:6px; }
.ms{ font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal; font-size:22px; line-height:1; letter-spacing:normal;
  text-transform:none; display:inline-block; white-space:nowrap; direction:ltr; -webkit-font-feature-settings:"liga"; font-feature-settings:"liga";
  width:1em; height:1em; overflow:hidden; flex:none; user-select:none; }
html:not(.reel) .solo-tel{ display:none !important; }
html.reel .solo-pc{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* tipografía de la casa: Montserrat 800 con UNA palabra en cursiva azul (la firma de la app) */
em{ font-style:italic; font-weight:700; color:var(--acento); }
.eti{ display:inline-flex; align-items:center; gap:10px; font:700 12px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--acento); margin-bottom:14px; }
.eti::before{ content:""; width:22px; height:2px; background:var(--acento); }
h2{ font:800 clamp(30px, 3.1vw, 50px)/1.06 var(--f-tit); letter-spacing:-.025em; text-wrap:balance; }
.tit{ text-align:center; margin:0 auto clamp(18px, 3.2vh, 36px); max-width:860px; }
.tit h2 em{ white-space:nowrap; }
.tit > p:not(.eti){ color:var(--apagado); font-size:17px; line-height:1.5; max-width:620px; margin:12px auto 0; text-wrap:pretty; }
.tit.izq{ text-align:left; margin-left:0; }
.tit.izq > p:not(.eti){ margin-left:0; }
.mono-eti{ font:700 11.5px/1.2 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--apagado); }
.micro{ display:flex; align-items:center; gap:7px; font:500 13px/1.4 var(--f-mono); color:var(--apagado); }
.micro .ms{ font-size:16px; color:var(--acento); }

/* ---------- 2 · BOTONES (la casa: acento, texto oscuro, flecha en círculo, brillo cada ~4,6 s, latido al hover) ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; font:700 15px/1 var(--f-tit); letter-spacing:-.005em;
  text-decoration:none; border-radius:12px; padding:13px 18px; border:1.5px solid transparent; cursor:pointer; overflow:hidden; white-space:nowrap;
  transition:transform .2s var(--seca), background-color .2s, border-color .2s; }
.btn-p{ background:var(--acento); color:var(--sobre-acento); box-shadow:0 10px 26px rgba(18,139,236,.30); }
.btn-p::after{ content:""; position:absolute; inset:-2px auto -2px 0; width:42%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-140%) skewX(-12deg); animation:barre 4.6s ease-in-out infinite; pointer-events:none; }
@keyframes barre{ 0%{ transform:translateX(-140%) skewX(-12deg); } 26%,100%{ transform:translateX(300%) skewX(-12deg); } }
.btn-p:hover{ animation:late 1s ease-in-out infinite; }
@keyframes late{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
.btn-g{ background:transparent; color:var(--texto); border-color:var(--linea-azul); }
.btn-g:hover{ border-color:var(--acento); background:rgba(18,139,236,.10); }
.btn-claro{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn-claro:hover{ background:rgba(255,255,255,.1); }
.btn-chico{ font-size:13.5px; padding:9px 13px; border-radius:10px; }
.btn-xl{ font-size:16.5px; padding:16px 22px; border-radius:14px; }
.btn-bloque{ display:flex; width:100%; }
.flecha{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--sobre-acento); color:var(--acento); font-size:17px; }
.btn-chico .flecha{ width:22px; height:22px; font-size:15px; }
/* el anillo que late va en un envoltorio: el botón queda recortado y el brillo no se escapa */
.anillo{ position:relative; display:inline-flex; border-radius:14px; }
.anillo::before{ content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--acento); opacity:0; animation:anillo 2.4s ease-out infinite; pointer-events:none; }
@keyframes anillo{ 0%{ transform:scale(.97); opacity:.8; } 100%{ transform:scale(1.18, 1.45); opacity:0; } }
.cta-flota{ animation:flota-cta 3.4s ease-in-out infinite; }
@keyframes flota-cta{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

/* ---------- 2 · EL MUNDO: tirilla, sello, ticket, contador rodante ---------- */
/* Tirilla de cierre: bordes dentados con una máscara ESTÁTICA (radial-gradient) */
.tirilla{ position:relative; background:var(--tinte); padding:22px 22px 24px; -webkit-mask:var(--dientes); mask:var(--dientes); }
.tirilla > header{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:12px; margin-bottom:6px; border-bottom:1.5px dashed var(--linea-azul); }
.tirilla > header .ms{ color:var(--acento); }
.tirilla > footer{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:12px; margin-top:8px; border-top:1.5px dashed var(--linea-azul); }
.tirilla-caja{ position:relative; }
.mini-logo{ width:22px; height:22px; }
.perfo{ height:0; border-top:2px dashed var(--linea-azul); margin:14px 0; }

.estado{ display:inline-flex; align-items:center; gap:6px; font:700 13px/1 var(--f-mono); padding:6px 10px; border-radius:999px; white-space:nowrap; }
.estado .ms{ font-size:17px; }
.estado.mal{ color:var(--mal); background:rgba(240,96,93,.12); }
.estado.bien{ color:var(--ok); background:rgba(61,203,127,.12); }

/* Sello "CUADRA": superficie sólida #0437B3, girado -8° */
.sello{ position:absolute; z-index:3; display:inline-block; font:800 24px/1 var(--f-tit); letter-spacing:.16em; text-transform:uppercase; color:var(--texto);
  background:var(--sup); padding:11px 18px 10px 21px; border-radius:10px; box-shadow:inset 0 0 0 3px var(--sup), inset 0 0 0 5px var(--texto), 0 12px 30px rgba(0,0,0,.4);
  transform:rotate(-8deg); pointer-events:none; }
@keyframes sello-cae{ 0%{ opacity:0; transform:scale(2.3) rotate(-24deg); } 55%{ opacity:1; transform:scale(.9) rotate(-6deg); } 78%{ transform:scale(1.04) rotate(-9deg); } 100%{ opacity:1; transform:scale(1) rotate(-8deg); } }

/* Contador rodante de caja registradora: cada dígito es una columna 0-9 que sube con translateY */
.rueda{ display:inline-flex; align-items:flex-start; font-family:var(--f-mono); font-variant-numeric:tabular-nums; line-height:1.12; white-space:nowrap; }
.rueda .d{ display:inline-block; height:1.12em; overflow:hidden; }
.rueda .c{ display:flex; flex-direction:column; transition:transform .95s cubic-bezier(.2,.85,.2,1); transition-delay:var(--rd,0s); }
.rueda.rodando .c{ will-change:transform; }   /* la capa vive SOLO mientras rueda (app.js quita .rodando al terminar) */
.rueda .c > span{ display:block; height:1.12em; text-align:center; }
.rueda .s{ display:inline-block; white-space:pre; }
.rueda .s.p{ margin:0 -.17em; }   /* "$33.915" y no "$33 . 915": el separador de miles se arrima */
.rueda .s.l{ font-size:.5em; line-height:2.24; margin-right:.1em; opacity:.85; }   /* "COP" / "≈ US" chicos delante de la cifra (inglés) */
.rueda.sin-trans .c{ transition:none; }

/* Borde de identidad corriente (#128BEC), a pasos para no repintar a 60 fps */
@property --pos{ syntax:"<percentage>"; inherits:false; initial-value:0%; }
.borde-vivo, .tarifa.dest.borde-vivo{ border:2px solid transparent;
  background:linear-gradient(var(--sup), var(--sup)) padding-box,
             linear-gradient(90deg, var(--acento) 0%, #8FCBFF 10%, var(--acento) 20%, var(--sup) 33%, var(--acento) 46%, #8FCBFF 56%, var(--acento) 66%, var(--sup) 83%, var(--acento) 100%) border-box;
  background-size:100% 100%, 300% 100%; background-position:0 0, var(--pos) 0; animation:fluye 7s steps(60) infinite; }
@keyframes fluye{ to{ --pos:-300%; } }

/* Ticket de precio del hero: muescas laterales reales (máscara) a la altura de la perforación */
.ticket{ --muesca:calc(100% - 77px); position:relative; color:#fff; border-radius:16px; padding:16px 18px 14px; display:flex; flex-direction:column;
  -webkit-mask:radial-gradient(circle 10px at 0 var(--muesca), #0000 96%, #000) , radial-gradient(circle 10px at 100% var(--muesca), #0000 96%, #000);
  -webkit-mask-composite:source-in; mask:radial-gradient(circle 10px at 0 var(--muesca), #0000 96%, #000), radial-gradient(circle 10px at 100% var(--muesca), #0000 96%, #000);
  mask-composite:intersect; transition:transform .25s ease-out; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.ticket-cab{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ticket .mono-eti{ color:rgba(255,255,255,.78); }
.chip-ahorro{ font:700 11.5px/1 var(--f-mono); padding:5px 8px; border-radius:7px; background:var(--acento); color:var(--sobre-acento); }
.pestanas{ display:flex; gap:3px; padding:3px; border-radius:10px; background:rgba(0,0,0,.24); }
.pestanas button{ flex:1; border:0; background:transparent; color:rgba(255,255,255,.82); font:600 12.5px/1 var(--f-tit); padding:8px 4px; border-radius:8px; cursor:pointer; transition:background-color .2s, color .2s; }
.pestanas button.on{ background:var(--acento); color:var(--sobre-acento); }
.ticket-precio{ display:flex; align-items:baseline; gap:6px; margin:14px 0 3px; font:700 40px/1 var(--f-mono); }
.ticket-precio small{ font:500 14px var(--f-tit); opacity:.82; }
.ticket-sub{ font-size:13px; line-height:1.35; color:rgba(255,255,255,.86); min-height:2.7em; text-wrap:balance; }
.nota-cobro{ font-size:11.5px; line-height:1.35; color:rgba(255,255,255,.78); margin-top:4px; }
.ticket .perfo{ margin:12px -18px; border-color:rgba(255,255,255,.34); }
.ticket-pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:46px; }
.ticket-incluye{ font-size:11.5px; line-height:1.3; text-align:right; color:rgba(255,255,255,.86); max-width:9.5em; }
.moneda{ display:inline-flex; gap:2px; padding:3px; border-radius:9px; background:rgba(0,0,0,.26); }
.moneda button{ border:0; background:transparent; color:rgba(255,255,255,.78); font:700 11.5px/1 var(--f-mono); padding:7px 9px; border-radius:7px; cursor:pointer; }
.moneda button.on{ background:var(--acento); color:var(--sobre-acento); }

/* Ventana del navegador y teléfono (la MISMA dirección en los dos) */
.ventana{ border-radius:14px; overflow:hidden; background:#121211; border:1px solid rgba(255,255,255,.09); box-shadow:0 34px 70px rgba(0,0,0,.5); }
.ventana-barra{ display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#141413; border-bottom:1px solid rgba(255,255,255,.06); }
.ventana-barra > i{ width:9px; height:9px; border-radius:50%; background:#3a3a37; }
.url{ display:inline-flex; align-items:center; gap:5px; margin:0 auto; padding:4px 12px; border-radius:7px; background:var(--fondo); font:500 11.5px/1 var(--f-mono); color:var(--apagado); }
.url .ms{ font-size:13px; color:var(--acento); }
.ventana img{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; }
.telefono{ display:flex; flex-direction:column; border-radius:26px; padding:7px 7px 8px; background:#0F0F0E; border:1px solid rgba(255,255,255,.13); box-shadow:0 26px 60px rgba(0,0,0,.55); }
.tel-url{ display:flex; align-items:center; justify-content:center; gap:4px; height:20px; font:500 10px/1 var(--f-mono); color:var(--apagado); }
.tel-url .ms{ font-size:11px; color:var(--acento); }
.telefono img{ border-radius:19px; width:100%; }

.flecha-cuad{ width:40px; height:40px; display:grid; place-items:center; border:1.5px solid var(--acento); background:transparent; color:var(--texto); border-radius:6px; cursor:pointer; transition:background-color .2s; }
.flecha-cuad:hover{ background:rgba(18,139,236,.16); }

/* ---------- BARRA SUPERIOR (sólida, sin blur) ---------- */
.barra{ position:fixed; z-index:50; top:0; left:0; right:0; height:var(--barra); display:flex; align-items:center; gap:22px; padding:0 26px;
  background:rgba(29,29,27,.97); border-bottom:1px solid var(--linea); }
.logo{ display:flex; align-items:center; flex:none; }
.logo-marca{ height:22px; width:auto; }
.logo-icono{ display:none; width:30px; height:30px; }
.menu{ display:flex; align-items:center; gap:4px; margin:0 auto; }
.menu a{ position:relative; padding:9px 11px; font:600 13.5px/1 var(--f-tit); color:var(--apagado); text-decoration:none; border-radius:8px; white-space:nowrap; transition:color .2s; }
.menu a:hover{ color:var(--texto); }
.menu a.activo{ color:var(--texto); }
.menu a.activo::after{ content:""; position:absolute; left:11px; right:11px; bottom:2px; height:2px; border-radius:2px; background:var(--acento); }
.acciones{ display:flex; align-items:center; gap:8px; flex:none; }
.idioma{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--linea); background:transparent; border-radius:9px; cursor:pointer; }
.idioma span{ font:700 11.5px/1 var(--f-mono); padding:6px 7px; border-radius:6px; color:var(--apagado); }
.idioma span.on{ background:var(--acento); color:var(--sobre-acento); }

/* Índice lateral: la tirilla que avanza (PC) */
.indice{ position:fixed; z-index:45; right:16px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:4px; }
.indice button{ position:relative; display:flex; align-items:center; justify-content:flex-end; width:34px; height:15px; padding:0; border:0; background:transparent; cursor:pointer; }
.indice i{ display:block; width:12px; height:3px; border-radius:2px; background:rgba(167,176,190,.42); transition:width .3s var(--seca), background-color .3s; }
.indice button.on i{ width:26px; background:var(--acento); }
.indice button:hover i{ background:var(--texto); }
.indice span{ position:absolute; right:40px; top:50%; transform:translate(6px,-50%); opacity:0; pointer-events:none; white-space:nowrap; font:600 12px/1 var(--f-tit);
  background:var(--tinte); border:1px solid var(--linea-azul); padding:6px 9px; border-radius:7px; transition:opacity .2s, transform .2s; }
.indice button:hover span, .indice button:focus-visible span{ opacity:1; transform:translate(0,-50%); }

/* Barra de acción fija (PC), sólida */
.pegajosa{ position:fixed; z-index:44; left:50%; bottom:12px; width:min(960px, calc(100% - 150px)); height:58px; display:flex; align-items:center; gap:10px;
  padding:0 10px 0 20px; background:#182236; border:1px solid var(--linea-azul); border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.45);
  transform:translate(-50%, 150%); transition:transform .45s var(--seca); }
.pegajosa.ver{ transform:translate(-50%, 0); }
.peg-txt{ flex:1; display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.peg-txt b{ font-size:14px; }
.peg-txt span{ font-size:12.5px; color:var(--apagado); font-family:var(--f-mono); }

/* ---------- 3 · APARTADOS (PC) ---------- */
.diapo{ position:relative; }
.diapo-in{ width:100%; max-width:1260px; margin:0 auto; padding:0 64px; }

/* 1 · Portada: carrusel de 4 diapositivas (03/10/2026).
   Las diapositivas van apiladas en la MISMA celda de una grilla: el carrusel mide lo que la más alta,
   así el zoom de ajustarUna sigue sirviendo sin medir a mano. Se cambian con transform + opacity. */
.portada .diapo-in{ display:flex; flex-direction:column; }
.carrusel{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.lamina-c{ grid-area:1 / 1; position:relative; min-width:0; min-height:0; opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(calc(var(--dx, 1) * 44px)); transition:opacity .42s var(--seca), transform .42s var(--seca), visibility 0s linear .42s; }
.lamina-c.activa{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .42s var(--seca), transform .42s var(--seca), visibility 0s; }
.lamina-hero{ display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); gap:clamp(28px, 3.6vw, 56px); align-items:center; }
.lamina-in{ display:flex; flex-direction:column; justify-content:center; min-height:100%; }
/* Entradas por diapositiva: solo la activa (.animar-l) anima sus [data-entra]; al volver, se repiten. */
.diapo.animar .lamina-c:not(.animar-l) [data-entra]{ animation:none; opacity:0; }

/* Controles: segmentos tipo stories con su nombre, contador en mono y flechas cuadradas */
.carrusel-ctrl{ display:flex; align-items:center; gap:14px; width:100%; max-width:1180px; margin:22px auto 0; }
.cseg-fila{ flex:1; display:flex; gap:10px; min-width:0; }
.cseg{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:4px 0; border:0; background:transparent; cursor:pointer;
  font:700 11.5px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--apagado); text-align:left; }
.cseg-eti{ max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:color .25s; }
.cseg.on .cseg-eti, .cseg:hover .cseg-eti{ color:var(--texto); }
.cseg-pista{ display:block; width:100%; height:4px; border-radius:3px; background:rgba(167,176,190,.24); overflow:hidden; }
.cseg-pista i{ display:block; height:100%; background:var(--acento); transform:scaleX(0); transform-origin:left; }
.cseg.hecho .cseg-pista i{ transform:scaleX(1); }
.cseg.on .cseg-pista i{ animation:carga-lamina var(--ms, 9s) linear forwards; }
.carrusel-ctrl.manual .cseg.on .cseg-pista i{ animation:none; transform:scaleX(1); }
.portada.pausa-carrusel .cseg.on .cseg-pista i{ animation-play-state:paused; }
@keyframes carga-lamina{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.cseg-cuenta{ font:700 13px/1 var(--f-mono); color:var(--apagado); min-width:62px; text-align:center; }

/* 2/4 · La calle (04/10/2026): el título es "para cualquier negocio", una cinta de rubros corre debajo y los cinco
   locales van en una cuadrícula de cuadros (mosaico 3 + 2 en PC: los de arriba ocupan 2 columnas de 6 y los de
   abajo 3; sin huecos). Tocar un cuadro abre su vitrina AL FRENTE: #vitrina-vista va encima (position:absolute,
   no cambia el alto de la diapositiva) y la cuadrícula queda atrás, achicada y apagada. */
.lamina-calle .lamina-in{ position:relative; justify-content:flex-start; }
.calle-vista{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; transform-origin:50% 60%;
  transition:transform .42s var(--seca), opacity .42s var(--seca); }
/* con la vitrina abierta la cuadrícula se apaga del todo (a .08 el título y la cinta se transparentaban detrás de
   las pestañas y la X); el scale(.94) queda para la transición */
.lamina-calle.con-detalle .calle-vista{ transform:scale(.94); opacity:0; }
.lamina-calle.con-detalle .calle-vista *{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){ .calle-vista{ transition:none; } .cinta-pista, .f-entrar .ms, .vit-cerrar::after{ animation:none; } }
.calle-tit{ max-width:1000px; margin-bottom:clamp(12px, 2vh, 18px); }
.calle-tit .eti{ margin-bottom:10px; }
.calle-tit h2{ font-size:clamp(32px, 3.3vw, 54px); }
/* la cinta de rubros: corre sola (solo transform) y se apaga en los bordes con una máscara ESTÁTICA */
.calle-cinta{ flex:none; width:100%; max-width:1180px; margin:0 auto clamp(14px, 2.4vh, 22px); overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.cinta-pista{ display:flex; width:max-content; animation:cinta-corre 52s linear infinite; }
.cinta-pista li{ display:inline-flex; align-items:center; gap:8px; margin-right:10px; padding:8px 16px 8px 11px; border-radius:999px;
  background:var(--tinte); border:1px solid var(--linea-azul); font:700 14.5px/1.2 var(--f-tit); color:var(--texto); white-space:nowrap; }
.cinta-pista .ms{ font-size:21px; color:var(--acento); }
.calle-cinta:hover .cinta-pista{ animation-play-state:paused; }
/* quieta cuando "Tu negocio" no es la diapositiva activa o la portada no está al frente */
.lamina-calle:not(.activa) .cinta-pista, .diapo:not(.al-frente) .cinta-pista{ animation-play-state:paused !important; }
@keyframes cinta-corre{ to{ transform:translateX(-50%); } }
/* la cuadrícula */
.fachadas{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); grid-template-rows:repeat(2, minmax(var(--fila-min, 170px), 1fr));
  gap:clamp(10px, 1.1vw, 16px); width:100%; max-width:1180px; margin:0 auto; }
/* el cuadro: toldo arriba, ícono y nombre, la línea, "Entrar a la vitrina" abajo y la captura que asoma */
.fachada{ grid-column:span 2; position:relative; min-width:0; min-height:0; contain:size; display:flex; flex-direction:column; align-items:flex-start; margin:0; padding:26px 20px 16px;
  border:1px solid var(--linea-azul); border-radius:16px; background:linear-gradient(165deg, var(--tinte-2), var(--tinte) 62%); color:var(--texto); text-align:left; font:inherit;
  cursor:pointer; overflow:hidden; transition:transform .35s var(--seca); -webkit-tap-highlight-color:transparent; }
.fachada:nth-child(n+4){ grid-column:span 3; }
.fachada::after{ content:""; position:absolute; z-index:4; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  box-shadow:inset 0 0 0 2px var(--acento), inset 0 0 38px rgba(18,139,236,.2); }
.fachada .toldo{ position:absolute; z-index:3; left:0; right:0; top:0; height:10px; background:repeating-linear-gradient(90deg, var(--sup) 0 22px, #03309C 22px 44px); }
.fachada .toldo::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px;
  background:radial-gradient(circle at 11px 0, var(--sup) 6px, transparent 6.5px) 0 0 / 44px 6px repeat-x, radial-gradient(circle at 33px 0, #03309C 6px, transparent 6.5px) 0 0 / 44px 6px repeat-x; }
.f-cab{ position:relative; z-index:2; width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:12px; row-gap:9px; }
.f-ico{ display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:rgba(18,139,236,.16); color:var(--acento); }
.f-ico svg{ width:27px; height:27px; overflow:visible; }
.f-ico svg path{ fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.f-nombre{ font:800 clamp(17px, 1.4vw, 21px)/1.15 var(--f-tit); letter-spacing:-.01em; text-wrap:balance; }
.f-corto{ display:none; font:800 15px/1.15 var(--f-tit); }
.f-linea{ grid-column:1 / -1; max-width:54%; font-size:13.5px; line-height:1.42; color:var(--apagado); text-wrap:pretty; }
.f-entrar{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding:8px 12px 8px 14px; border-radius:999px;
  background:var(--fondo); border:1px solid var(--linea-azul); color:var(--acento); font:700 13px/1 var(--f-tit); white-space:nowrap; transition:background-color .25s, color .25s; }
.f-entrar .ms{ font-size:18px; animation:abrir-late 3.4s var(--seca) infinite; animation-delay:calc(var(--d, 0s) * 6); }
@keyframes abrir-late{ 0%, 76%, 100%{ transform:none; } 84%{ transform:scale(1.28); } 92%{ transform:scale(.94); } }
/* las capturas: un teléfono (o el recibo de la ferretería) que asoma desde abajo; en los cuadros anchos, dos */
/* (el teléfono se dibuja solo hasta el borde de abajo del cuadro: nada se sale de su caja) */
.f-foto{ position:absolute; z-index:1; right:20px; top:90px; bottom:0; width:min(34%, 150px); pointer-events:none; transform-origin:50% 100%; transition:transform .45s var(--seca); }
.f-tel{ position:absolute; right:0; top:0; bottom:0; width:100%; padding:5px 5px 0; border-radius:22px 22px 0 0; background:#0F0F0E; border:1px solid rgba(255,255,255,.14); border-bottom:0;
  box-shadow:0 18px 40px rgba(0,0,0,.5); }
.f-tel img{ display:block; width:100%; height:100%; border-radius:17px 17px 0 0; object-fit:cover; object-position:top; background:#141413; }
.f-tel.corto img{ object-fit:contain; }
.f-tel.dos{ display:none; }
.f-recibo{ position:absolute; right:0; top:0; width:200px; display:flex; flex-direction:column; padding:12px 14px 16px; background:#F5F7FA; color:#1D1D1B;
  box-shadow:0 18px 40px rgba(0,0,0,.5); -webkit-mask:var(--dientes-pie); mask:var(--dientes-pie); transform:rotate(2deg); transform-origin:50% 0; }
.f-recibo-eti{ padding-bottom:8px; margin-bottom:2px; border-bottom:1.5px dashed rgba(29,29,27,.3); font:700 11.5px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:#4A5260; }
.f-recibo-fila{ display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:7px; padding:8px 0; border-bottom:1px dashed rgba(29,29,27,.18);
  font:600 12.5px/1.2 var(--f-tit); }
.f-recibo-fila .ms{ font-size:17px; color:#0B6FC4; }
.f-recibo-fila b{ font:700 13px/1 var(--f-mono); }
/* los cuadros anchos (los dos de abajo en PC): texto a la izquierda y dos capturas a la derecha */
.fachada:nth-child(n+4) .f-cab{ width:52%; }
.fachada:nth-child(n+4) .f-linea{ max-width:none; }
.fachada:nth-child(n+4) .f-foto{ top:22px; right:26px; width:min(44%, 300px); }
.fachada:nth-child(n+4) .f-tel{ width:52%; }
.fachada:nth-child(n+4) .f-tel.dos{ display:block; right:auto; left:0; top:34px; opacity:.92; }
/* la ferretería muestra su recibo "Así se cobra" (las tres formas de cobrar), grande y solo */
.fachada.f-ferreteria .f-tel.dos, .fachada.f-ferreteria:nth-child(n+4) .f-tel.dos{ display:none; }
.fachada.f-ferreteria:nth-child(n+4) .f-foto{ top:26px; width:min(44%, 250px); }
/* su texto corta antes, para que el recibo (girado 2°) no le quede pegado */
.fachada.f-ferreteria:nth-child(n+4) .f-cab{ width:46%; }
.fachada.f-ferreteria .f-recibo{ width:100%; }
/* tocar: el cuadro sube, se enciende su borde, la captura sube y "Entrar" se llena */
.fachada:is(:hover, :focus-visible, .estrella){ transform:translateY(-5px); }
.fachada:is(:hover, :focus-visible, .estrella)::after{ opacity:1; }
.fachada:is(:hover, :focus-visible, .estrella) .f-foto{ transform:scale(1.05); }
.fachada:is(:hover, :focus-visible, .estrella) .f-entrar{ background:var(--acento); border-color:var(--acento); color:var(--sobre-acento); }
.fachada:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }
.fachada:active{ transform:scale(.98); }
.fachadas:hover .fachada.estrella:not(:hover){ transform:none; }
.fachadas:hover .fachada.estrella:not(:hover)::after{ opacity:0; }
.fachadas:hover .fachada.estrella:not(:hover) .f-foto{ transform:none; }
.fachadas:hover .fachada.estrella:not(:hover) .f-entrar{ background:var(--fondo); border-color:var(--linea-azul); color:var(--acento); }

/* La vitrina de un negocio: se abre AL FRENTE, encima de la cuadrícula, con la X grande arriba a la derecha */
.vitrina-vista{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; gap:16px; }
.vitrina-vista[hidden]{ display:none; }
.vitrina-vista.cerrando{ pointer-events:none; }
.vitrina-vista.cerrando > *{ opacity:0; transform:scale(.96); transition:opacity .24s, transform .26s var(--seca); }
.vit-cab{ flex:none; display:flex; align-items:center; gap:12px; }
.vit-tabs{ display:flex; gap:6px; flex:1; min-width:0; flex-wrap:wrap; }
.vit-tab{ display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:8px 14px; border-radius:999px; border:1px solid var(--linea); background:var(--fondo); color:var(--apagado);
  font:700 13px/1 var(--f-tit); cursor:pointer; transition:background-color .2s, color .2s, border-color .2s; }
.vit-tab svg{ width:17px; height:17px; flex:none; }
.vit-tab svg path{ fill:none; stroke:currentColor; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.vit-tab:hover{ color:var(--texto); border-color:var(--linea-azul); }
.vit-tab.on{ background:var(--sup); border-color:var(--sup); color:#fff; }
/* la X: cuadrada, grande, con borde azul; el anillo late tres veces al abrir para que se note */
.vit-cerrar{ flex:none; position:relative; width:54px; height:54px; display:grid; place-items:center; margin-left:auto; padding:0; border-radius:14px;
  border:2px solid var(--acento); background:var(--tinte); color:var(--texto); cursor:pointer; box-shadow:0 10px 26px rgba(0,0,0,.4);
  transition:background-color .2s, color .2s, transform .25s var(--seca); -webkit-tap-highlight-color:transparent; }
.vit-cerrar .ms{ font-size:34px; }
.vit-cerrar::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; border:2px solid var(--acento); opacity:0; pointer-events:none; animation:x-anillo 2.4s var(--seca) .5s 3; }
@keyframes x-anillo{ 0%{ opacity:.85; transform:scale(1); } 70%, 100%{ opacity:0; transform:scale(1.45); } }
.vit-cerrar:hover{ background:var(--acento); color:var(--sobre-acento); transform:scale(1.06); }
.vit-cerrar:active{ transform:scale(.96); }
.vit-cerrar:focus-visible{ outline:3px solid rgba(18,139,236,.55); outline-offset:3px; }
.vit-cuerpo{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows:minmax(0,1fr); gap:clamp(24px, 3vw, 44px);
  align-items:center; margin-top:11px; padding:24px; border-radius:20px; background:var(--tinte); border:1px solid var(--linea-azul); position:relative; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.vit-cuerpo::before{ content:""; position:absolute; left:18px; right:18px; top:-11px; height:22px; border-radius:8px 8px 0 0; background:repeating-linear-gradient(90deg, var(--sup) 0 22px, #03309C 22px 44px); }
.vit-info{ min-width:0; }
.vit-tit{ font:800 clamp(22px, 2vw, 30px)/1.12 var(--f-tit); letter-spacing:-.02em; margin:4px 0 16px; text-wrap:balance; }
.vit-funciones{ display:grid; gap:8px; }
.vit-fn{ position:relative; display:grid; gap:3px; width:100%; padding:11px 14px 13px; border-radius:12px; border:1px solid var(--linea); background:var(--fondo); color:var(--texto); text-align:left; cursor:pointer; overflow:hidden;
  transition:border-color .2s; }
.vit-fn b{ font:700 15px/1.25 var(--f-tit); }
.vit-fn small{ font-size:13px; line-height:1.4; color:var(--apagado); }
.vit-fn.on{ border-color:var(--acento); }
.vit-fn .vit-progreso{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--acento); transform:scaleX(0); transform-origin:left; }
.vit-fn.on.auto .vit-progreso{ animation:carga-lamina 5.2s linear forwards; }
.vit-fn.on:not(.auto) .vit-progreso{ transform:scaleX(1); }
.vitrina-vista .ctas{ margin-top:16px; }
.vit-pantalla{ position:relative; display:grid; height:100%; min-height:0; }
.vit-cap{ grid-area:1 / 1; display:grid; place-items:center; min-height:0; height:100%; opacity:0; transition:opacity .4s; pointer-events:none; }
.vit-cap.on{ opacity:1; pointer-events:auto; }
.vit-cap .ventana{ width:100%; max-height:100%; display:flex; flex-direction:column; }
.vit-cap .ventana img{ aspect-ratio:auto; height:auto; max-height:calc(100% - 30px); object-fit:contain; background:#121211; }
.vit-cap .telefono{ height:100%; width:auto; aspect-ratio:9 / 18.5; }
.vit-cap .telefono img{ flex:1 1 auto; min-height:0; height:0; object-fit:cover; object-position:50% 0%; }
.vit-cap .recorte{ max-height:100%; max-width:100%; width:auto; border-radius:14px; box-shadow:0 26px 60px rgba(0,0,0,.5); object-fit:contain; }
.cobros{ width:min(460px, 100%); padding:20px 22px; border-radius:16px; background:var(--fondo); border:1px solid var(--linea-azul); }
.cobro{ display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:14px; align-items:center; padding:13px 0; border-top:1px dashed var(--linea); }
.cobro b{ display:block; font:700 15px/1.2 var(--f-tit); }
.cobro span.det{ display:block; font:500 13px/1.3 var(--f-mono); color:var(--apagado); }
.cobro strong{ font:700 20px/1 var(--f-mono); color:var(--acento); white-space:nowrap; }

/* 3/4 · Recorrido de una venta: la lista y el mapa del local (sin plano técnico) */
.ruta-grid{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(24px, 3vw, 48px); align-items:center; }
.ruta-txt .tit{ margin-bottom:14px; }
.pasos-ruta{ position:relative; display:grid; gap:0; counter-reset:paso; }
.pasos-ruta li{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; align-items:center; padding:11px 0; border-top:1px solid var(--linea);
  counter-increment:paso; opacity:.55; transition:opacity .3s; }
.pasos-ruta li:last-child{ border-bottom:1px solid var(--linea); }
.pasos-ruta li::before{ content:counter(paso); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--apagado); font:700 13px/1 var(--f-mono); }
.pasos-ruta li span{ font:600 16px/1.35 var(--f-tit); }
.pasos-ruta li.on{ opacity:1; }
.pasos-ruta li.on::before{ background:var(--acento); border-color:var(--acento); color:var(--sobre-acento); }
.pasos-ruta li:last-child.on::before{ background:var(--ok); border-color:var(--ok); }
.pasos-ruta .ruta-v{ display:none; }
.btn-texto{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:6px 0; border:0; background:none; color:var(--acento); font:700 13.5px/1 var(--f-tit); cursor:pointer; }
.btn-texto .ms{ font-size:19px; }
.mapa{ position:relative; width:100%; aspect-ratio:3 / 2; overflow:hidden; border-radius:18px; background:var(--tinte); border:1px solid var(--linea-azul); }
.mapa-lienzo{ position:absolute; left:0; top:0; width:2400px; height:1600px; transform-origin:0 0; transform:scale(var(--s, .3)); }
.mapa-lienzo svg{ position:absolute; inset:0; width:2400px; height:1600px; overflow:visible; }
.zona-r{ fill:rgba(18,139,236,.07); stroke:rgba(18,139,236,.45); stroke-width:5; }
.zona-n{ font:800 66px var(--f-tit); fill:var(--texto); opacity:.85; }
.ruta-base{ fill:none; stroke:rgba(18,139,236,.45); stroke-width:8; stroke-dasharray:24 16; }
.parada{ fill:var(--fondo); stroke:rgba(18,139,236,.6); stroke-width:6; }
.parada.on{ fill:var(--acento); stroke:var(--texto); }
.parada.on.fin{ fill:var(--ok); }
.tramo{ position:absolute; height:12px; margin-top:-6px; border-radius:6px; background:var(--acento); transform-origin:0 50%; transform:rotate(var(--a)) scaleX(0); }
.mapa.recorrer .tramo{ animation:tramo var(--td) linear var(--t0) forwards; }
.mapa.ruta-hecha .tramo{ animation:none; transform:rotate(var(--a)) scaleX(1); }
@keyframes tramo{ from{ transform:rotate(var(--a)) scaleX(0); } to{ transform:rotate(var(--a)) scaleX(1); } }
.ruta-marca{ position:absolute; display:flex; align-items:center; gap:14px; translate:-50% calc(-100% - 40px); padding:12px 22px 12px 12px; border-radius:12px;
  border:4px solid var(--linea); background:var(--fondo); color:var(--texto); font:700 40px/1 var(--f-mono); white-space:nowrap; opacity:.3; scale:.92;
  transition:opacity .3s, scale .45s var(--seca); }
.ruta-marca.abajo{ translate:-50% 40px; }
.ruta-marca b{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--linea); font-size:30px; }
.ruta-marca.on{ opacity:1; scale:1; border-color:var(--acento); }
.ruta-marca.on b{ background:var(--acento); color:var(--sobre-acento); }
.ruta-marca.fin.on{ border-color:var(--ok); color:var(--ok); }
.ruta-marca.fin.on b{ background:var(--ok); }
.ruta-ficha{ position:absolute; left:-24px; top:-24px; width:48px; height:48px; border-radius:50%; background:var(--acento); box-shadow:0 0 0 12px rgba(18,139,236,.25); opacity:0; will-change:transform; }
.mapa.recorrer .ruta-ficha, .mapa.ruta-hecha .ruta-ficha{ opacity:1; }

/* 4/4 · Todo lo que trae: el tablero de las 10 funciones, todas incluidas */
.tablero{ width:100%; max-width:1180px; margin:0 auto; padding:10px 24px 16px; border-radius:20px; background:var(--tinte); border:1px solid var(--linea-azul); }
.tablero-filas{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:32px; }
.fila-fn{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:14px; align-items:center; width:100%; padding:12px 4px; border:0; border-bottom:1px dashed var(--linea);
  background:none; color:var(--texto); text-align:left; cursor:pointer; transition:background-color .2s; border-radius:8px; }
.fila-fn:hover{ background:rgba(18,139,236,.08); }
.fila-fn .ico-c{ width:40px; height:40px; border-radius:11px; }
.fila-fn .ico-c .ms{ font-size:22px; }
.fila-fn b{ display:block; font:700 15.5px/1.2 var(--f-tit); }
.fila-fn b em{ margin-left:6px; padding:2px 7px; border-radius:6px; background:var(--sup); color:#fff; font:700 10.5px/1.4 var(--f-mono); font-style:normal; letter-spacing:.06em; vertical-align:2px; }
.fila-fn small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:3px; font-size:13px; line-height:1.4; color:var(--apagado); }
.incluido{ display:inline-flex; align-items:center; gap:5px; font:700 12px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ok); white-space:nowrap; }
.incluido .ms{ font-size:17px; }
.tablero-pie{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; font:600 14px/1.4 var(--f-tit); color:var(--texto); text-align:center; }
.tablero-pie .ms{ color:var(--ok); font-size:20px; }
.incluye-ctas{ margin-top:18px; }
.chip-vivo{ display:inline-flex; align-items:center; gap:9px; padding:7px 13px 7px 11px; border-radius:999px; background:var(--tinte); border:1px solid var(--linea-azul); font:600 13px/1.2 var(--f-tit); }
.punto{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--acento); flex:none; }
.punto::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--acento); animation:punto 1.8s ease-out infinite; }
@keyframes punto{ 0%{ transform:scale(1); opacity:.75; } 100%{ transform:scale(3.4); opacity:0; } }
.titular{ font:800 clamp(42px, 3.8vw, 64px)/.98 var(--f-tit); letter-spacing:-.035em; margin:20px 0 18px; }
.titular em{ font-weight:700; letter-spacing:-.03em; white-space:nowrap; }
.bajada{ font-size:clamp(16px, 1.25vw, 18.5px); line-height:1.55; color:var(--apagado); max-width:33em; text-wrap:pretty; }
.ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:26px; }
.ctas.centro{ justify-content:center; }
.portada .micro{ margin-top:16px; }
.franja{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:26px; padding-top:18px; border-top:1px solid var(--linea); }
.franja.cinco{ grid-template-columns:repeat(5, minmax(0,1fr)); }
.franja li{ display:flex; flex-direction:column; gap:5px; }
.franja b{ font:700 30px/1 var(--f-mono); color:var(--texto); }
.franja li:first-child b{ color:var(--acento); }
.franja li > span{ font-size:12.5px; line-height:1.3; color:var(--apagado); }
.franja .eti-tel{ display:none; }
.escena{ position:relative; display:grid; grid-template-columns:7% minmax(0,1fr) 34px; grid-template-rows:auto 48px auto; }
.escena .ventana{ grid-column:2; grid-row:1 / 3; position:relative; z-index:1; }
.tel-hero{ position:absolute; left:-3%; bottom:0; width:24%; z-index:2; }
.ticket-pos{ grid-column:2 / 4; grid-row:2 / 4; justify-self:end; align-self:start; position:relative; width:280px; z-index:3; }
.flota{ animation:flota 5.5s ease-in-out infinite; }
@keyframes flota{ 0%,100%{ transform:translateY(0) rotate(-.4deg); } 50%{ transform:translateY(-9px) rotate(.4deg); } }

/* 2 · Diagnóstico */
.dos-tirillas{ display:grid; grid-template-columns:1fr 1fr; gap:44px; max-width:1000px; margin:0 auto; }
.lineas li{ display:grid; grid-template-columns:22px 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--linea); font:500 15px/1.42 var(--f-tit); }
.lineas li:last-child{ border-bottom:0; }
.lineas li .ms{ font-size:20px; margin-top:1px; }
.tirilla-mal .lineas .ms{ color:var(--mal); }
.tirilla-bien .lineas .ms{ color:var(--ok); }
.tirilla-mal .lineas li{ color:var(--apagado); }
.tirilla-mal .lineas li.tachada .vivo{ text-decoration:line-through; text-decoration-color:rgba(240,96,93,.75); text-decoration-thickness:1.5px; }
.tt{ position:relative; display:block; }
.tt .fantasma{ visibility:hidden; }
.tt .vivo{ position:absolute; inset:0; }
.vivo.escribiendo::after{ content:""; display:inline-block; width:.5em; height:1.05em; margin-left:2px; vertical-align:-.16em; background:var(--acento); animation:parpadea .7s steps(1) infinite; }
@keyframes parpadea{ 50%{ opacity:0; } }
.lineas li .ms{ transform:scale(0); transition:transform .3s var(--rebote); }
.lineas li.lista .ms{ transform:scale(1); }
/* el sello cae JUSTO donde está la pastilla "Cuadra" del pie y la reemplaza (no se ven dos "Cuadra") */
.sello-diag{ right:12px; bottom:14px; opacity:0; }
.sello-diag.estampado{ animation:sello-cae .7s cubic-bezier(.3,1.5,.5,1) both; }
.tirilla-bien footer .estado{ transition:opacity .2s .18s; }
.tirilla-caja:has(.sello-diag.estampado) .tirilla-bien footer .estado{ opacity:0; }

/* 3 · Calculadora */
.calc{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:44px; align-items:center; max-width:1060px; margin:0 auto; }
.campo{ background:var(--tinte); border-radius:14px; padding:15px 18px 14px; border:1px solid transparent; transition:border-color .2s; }
.campo + .campo{ margin-top:12px; }
.campo:focus-within{ border-color:var(--linea-azul); }
.campo label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font:600 14.5px/1.35 var(--f-tit); margin-bottom:12px; }
.valor{ font:700 18px/1 var(--f-mono); color:var(--acento); white-space:nowrap; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent; cursor:pointer; margin:0; }
input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:6px; background:linear-gradient(var(--acento), var(--acento)) 0 0 / var(--p,50%) 100% no-repeat, #2a3550; }
input[type=range]::-moz-range-track{ height:6px; border-radius:6px; background:#2a3550; }
input[type=range]::-moz-range-progress{ height:6px; border-radius:6px; background:var(--acento); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%; background:var(--acento); border:4px solid var(--fondo); box-shadow:0 0 0 2px var(--acento); }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--acento); border:4px solid var(--fondo); box-shadow:0 0 0 2px var(--acento); }
.recibo{ padding:24px 26px 26px; }
.recibo-grande{ display:flex; align-items:baseline; gap:10px; margin-top:12px; font:700 74px/1 var(--f-mono); color:var(--acento); }
.recibo-u{ font:700 20px var(--f-tit); color:var(--texto); }
.recibo-cap{ color:var(--apagado); font-size:14px; margin-top:4px; }
.recibo-filas{ margin-top:14px; display:grid; gap:2px; }
.recibo-filas > div{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px dashed var(--linea); }
.recibo-filas dt{ font-size:14px; color:var(--apagado); }
.recibo-filas dd{ font:700 22px/1 var(--f-mono); }
.recibo-contraste{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px; color:var(--apagado); margin-bottom:16px; }
.recibo-contraste b{ font:700 17px var(--f-mono); color:var(--texto); }
.recibo .micro{ justify-content:center; margin-top:12px; font-size:11.5px; }

/* 4 · Cómo cuadra solo */
.historia{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:48px; align-items:center; height:clamp(320px, 52vh, 500px); max-width:1120px; margin:0 auto; }
.historia-txt, .historia-media{ position:relative; height:100%; min-height:0; }
.paso-txt{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:12px; opacity:0; transform:translateY(16px); transition:opacity .4s, transform .5s var(--seca); pointer-events:none; }
.paso-txt.activo{ opacity:1; transform:none; pointer-events:auto; }
.paso-num{ font:700 66px/1 var(--f-mono); color:transparent; -webkit-text-stroke:1.5px var(--acento); }
.paso-txt h3{ font:800 28px/1.12 var(--f-tit); letter-spacing:-.02em; }
.paso-txt p{ color:var(--apagado); font-size:17px; line-height:1.5; max-width:24em; }
.paso-dato{ display:inline-flex; flex-direction:column; gap:6px; align-self:flex-start; padding:12px 16px 14px; margin-top:4px; background:var(--tinte); border-left:3px solid var(--acento); border-radius:4px 10px 10px 4px; }
.paso-dato .rueda{ font-size:30px; font-weight:700; color:var(--acento); }
.historia-media{ display:flex; align-items:center; justify-content:center; }
.marco{ position:relative; height:100%; aspect-ratio:3 / 2; max-width:100%; display:flex; flex-direction:column; border-radius:14px; overflow:hidden;
  background:var(--fondo); border:1px solid rgba(255,255,255,.1); box-shadow:0 34px 70px rgba(0,0,0,.5); }
.marco > .ventana-barra{ flex:none; }
.marco-pantalla{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:var(--fondo); }
.paso-media{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; container-type:size; opacity:0; pointer-events:none; }
.paso-media.activo{ opacity:1; pointer-events:auto; animation:media-entra .7s var(--seca) both; }
@keyframes media-entra{ from{ opacity:0; transform:perspective(1100px) translateX(calc(var(--dx,1) * 70px)) rotateY(calc(var(--dx,1) * -12deg)); } }
/* la caja toma la proporción de la captura (--ar) y se contiene en el marco: ni se estira ni deja el sello en el vacío */
.paso-img{ position:relative; display:block; width:min(100cqw, 100cqh * var(--ar)); aspect-ratio:var(--ar); }
.paso-img picture{ display:contents; }
.paso-img img{ display:block; width:100%; height:100%; }
.paso-media.angosta .paso-img img{ border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.45); }
/* el sello "CUADRA" cae sobre el cierre en el último paso: en el pie de la captura, entre "Todo cuadra $0" y el botón */
.sello-paso{ left:40%; bottom:6%; opacity:0; font-size:28px; }
.historia[data-paso="3"] .sello-paso{ animation:sello-cae .7s cubic-bezier(.3,1.5,.5,1) .45s both; }
.stories{ display:flex; align-items:center; gap:14px; max-width:1120px; margin:24px auto 0; }
.stories-seg{ flex:1; display:flex; gap:6px; }
.seg{ flex:1; height:18px; display:flex; align-items:center; padding:0; border:0; background:transparent; cursor:pointer; }
.seg .pista{ display:block; width:100%; height:4px; border-radius:3px; background:rgba(167,176,190,.24); overflow:hidden; }
.seg i{ display:block; height:100%; background:var(--acento); transform:scaleX(0); transform-origin:left; }
.seg.hecho i{ transform:scaleX(1); }
.seg.actual i{ animation:llenar 5.4s linear forwards; }
.historia-caja.pausa .seg.actual i, .cuadra.pausa .seg.actual i{ animation-play-state:paused; }
@keyframes llenar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.stories-cuenta{ font:700 13px/1 var(--f-mono); color:var(--apagado); min-width:62px; text-align:center; }

/* 5 · Todo incluido */
.fichas{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; max-width:1180px; margin:0 auto; }
.ficha{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left; padding:18px 16px 15px; background:var(--tinte); border:1px solid rgba(18,139,236,.14);
  border-radius:16px; cursor:pointer; color:var(--texto); transition:transform .25s var(--seca), border-color .25s; }
.ficha:hover{ transform:translateY(-5px); border-color:var(--acento); }
.ficha .ico{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:rgba(18,139,236,.15); color:var(--acento); }
.ficha .ico .ms{ font-size:25px; }
.ficha h3{ font:700 16px/1.2 var(--f-tit); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ficha p{ font-size:13.5px; line-height:1.45; color:var(--apagado); flex:1; }
.ficha .linea-tel{ display:none; }
.ficha{ position:relative; }
.ficha-n{ position:absolute; top:16px; right:15px; font:700 11px/1 var(--f-mono); letter-spacing:.06em; color:rgba(167,176,190,.55); }
html.reel .ficha-n{ top:9px; right:9px; font-size:9.5px; }
.ficha .ver{ display:inline-flex; align-items:center; gap:5px; font:700 11.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--acento); }
.ficha .ver .ms{ font-size:16px; }
/* cada función es un comprobante: pie dentado (máscara ESTÁTICA) y la línea perforada antes de "Ver pantalla" */
.ficha{ border-radius:16px 16px 0 0; padding-bottom:19px; -webkit-mask:var(--dientes-pie); mask:var(--dientes-pie); }
.ficha, .ficha:hover{ border-bottom-color:transparent; }
.ficha .ver{ align-self:stretch; padding-top:9px; border-top:1.5px dashed var(--linea-azul); }
.beta{ font:700 10px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; padding:4px 6px; border-radius:6px; background:var(--acento); color:var(--sobre-acento); }

/* 6 · Formas de vender */
.rubros-caja{ text-align:center; margin-top:clamp(22px, 4vh, 40px); }
.rubros-eti{ display:block; margin-bottom:12px; }
.rubros{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:980px; margin:0 auto; }
.rubros li{ display:inline-flex; align-items:center; gap:8px; padding:9px 13px 9px 11px; border-radius:999px; background:var(--tinte); font:600 13.5px/1.2 var(--f-tit); }
.rubros .ms{ font-size:18px; color:var(--acento); }
.rubros li.rubros-corte{ flex-basis:100%; height:0; padding:0; margin:0; background:none; }
html.paginado .rubros{ row-gap:5px; }
.mini-tickets{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; align-items:stretch; max-width:1000px; margin:0 auto; width:100%; }
.mini-tickets .tirilla-caja{ display:flex; }
.mini{ flex:1; display:flex; flex-direction:column; padding:26px 26px 30px; }
.mini > header{ padding-bottom:16px; margin-bottom:8px; }
.mini .tipo{ display:flex; align-items:center; gap:12px; font:800 19px/1.2 var(--f-tit); }
.ico-c{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:12px; background:rgba(18,139,236,.15); color:var(--acento); }
.ico-c .ms{ font-size:25px; }
.mini-filas{ display:grid; gap:2px; padding:6px 0 4px; flex:1; }
.mini-filas > div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px dashed var(--linea); }
.mini-filas > div:last-child{ border-bottom:0; }
.mini-filas dt{ font:600 13px/1.3 var(--f-tit); color:var(--apagado); }
.mini-filas dd{ font:700 17px/1.2 var(--f-mono); white-space:nowrap; }
.mini > footer{ align-items:baseline; padding-top:16px; margin-top:6px; }
.mini .total{ font-size:clamp(32px, 2.9vw, 44px); font-weight:700; color:var(--acento); }

/* 8 · Tu negocio abierto 24/7 */
.telefonos{ display:flex; justify-content:center; align-items:flex-start; gap:40px; }
.grupo{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.grupo-tit{ display:inline-flex; align-items:center; gap:8px; }
.grupo-tit .ms{ font-size:18px; color:var(--acento); }
.grupo-tels{ display:flex; align-items:center; gap:10px; }
.grupo-tels > .ms{ color:var(--acento); font-size:26px; }
.tel-mini{ width:clamp(150px, min(17vw, (100vh - 300px) * .5), 250px); display:flex; flex-direction:column; gap:10px; }
.tel-mini .telefono{ padding:6px; border-radius:22px; }
.tel-mini .telefono img{ border-radius:16px; aspect-ratio:480/812; object-fit:cover; object-position:top; }
.tel-mini figcaption{ display:flex; align-items:center; justify-content:center; gap:7px; font:600 13.5px/1.25 var(--f-tit); text-align:center; }
.tel-mini figcaption b{ width:21px; height:21px; display:grid; place-items:center; flex:none; border-radius:50%; background:var(--sup); color:#fff; font:700 11px/1 var(--f-mono); }
.grupo-nota{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:var(--tinte); border:1px solid var(--linea-azul); font:600 13.5px/1.3 var(--f-tit); }
.grupo-nota .ms{ font-size:18px; color:var(--acento); }

/* 9 · Precio */
.precio .moneda-sec{ margin-top:16px; background:var(--tinte); }
.tarifas{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; max-width:1000px; margin:0 auto; align-items:stretch; padding-top:10px; }
.tarifa-caja{ display:flex; }
.tarifa{ position:relative; flex:1; display:flex; flex-direction:column; padding:24px 22px 22px; border-radius:18px; background:var(--tinte); }
.tarifa.dest{ transform:translateY(-10px); box-shadow:0 26px 60px rgba(4,55,179,.35); }
.tarifa h3{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px; font:800 20px/1.2 var(--f-tit); }
.tarifa .nota-cobro:not([hidden]){ min-height:2.8em; }
.tarifa ul{ flex:1 1 auto; }
.tarifa-precio{ display:flex; align-items:baseline; gap:6px; margin-top:14px; font:700 40px/1 var(--f-mono); }
.tarifa-precio small{ font:500 14px var(--f-tit); color:var(--apagado); }
.tarifa.dest .tarifa-precio small{ color:rgba(255,255,255,.8); }
.tarifa .total{ font-size:13.5px; color:var(--apagado); margin-top:6px; min-height:1.4em; }
.tarifa.dest .total{ color:rgba(255,255,255,.85); }
.tarifa .nota-cobro{ color:var(--apagado); }
.tarifa .perfo{ position:relative; margin:16px -22px; }
.tarifa .perfo::before, .tarifa .perfo::after{ content:""; position:absolute; top:-11px; width:20px; height:20px; border-radius:50%; background:var(--fondo); }
.tarifa .perfo::before{ left:-10px; } .tarifa .perfo::after{ right:-10px; }
.tarifa.dest .perfo::before{ left:-12px; } .tarifa.dest .perfo::after{ right:-12px; }
.tarifa.dest .perfo{ border-color:rgba(255,255,255,.34); }
.tarifa ul{ display:grid; gap:9px; margin-bottom:20px; align-content:start; }
.tarifa li{ display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:1.4; }
.tarifa li .ms{ font-size:18px; color:var(--acento); margin-top:1px; }
.tarifa.dest li .ms{ color:#fff; }
.tarifa .btn{ margin-top:auto; min-height:54px; }
.nota-precio{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:28px; font-size:14px; color:var(--apagado); text-align:center; }
.nota-precio .ms{ color:var(--acento); }

/* 10 · Preguntas */
.faq{ display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; max-width:1100px; margin:0 auto; align-items:start; }
.faq-col{ display:grid; gap:10px; }
.faq details{ background:var(--tinte); border:1px solid transparent; border-radius:14px; transition:border-color .25s; }
.faq details[open]{ border-color:var(--linea-azul); }
.faq summary{ display:flex; align-items:center; gap:12px; padding:15px 18px; list-style:none; cursor:pointer; font:700 15.5px/1.35 var(--f-tit); }
.faq-n{ flex:none; font:700 12.5px/1 var(--f-mono); color:var(--acento); letter-spacing:.04em; }
.faq-p{ flex:1 1 auto; min-width:0; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ms{ color:var(--acento); transition:transform .3s var(--seca); }
.faq details[open] summary .ms{ transform:rotate(45deg); }
.faq .resp{ padding:0 18px 16px; color:var(--apagado); font-size:14.5px; line-height:1.6; }
.faq details[open] .resp{ animation:resp .35s var(--seca); }
@keyframes resp{ from{ opacity:0; transform:translateY(-6px); } }
.faq-contacto{ display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-radius:14px; border:1.5px dashed var(--linea-azul); }
.faq-contacto b{ display:block; font:700 15.5px/1.35 var(--f-tit); }
.faq-contacto p{ color:var(--apagado); font-size:14px; line-height:1.5; margin-top:3px; }
.faq-contacto a{ display:inline-block; margin-top:6px; font:700 14.5px/1.3 var(--f-mono); color:var(--acento); text-decoration:none; }
.faq-contacto a:hover{ text-decoration:underline; }
/* PC: se leen todas abiertas (sin acordeón): la diapositiva queda llena */
html.paginado .faq summary{ cursor:default; padding:14px 18px 8px; }
html.paginado .faq summary .ms{ display:none; }
html.paginado .faq .resp{ padding:0 18px 14px 50px; font-size:14px; line-height:1.55; }
html.paginado .faq details[open] .resp{ animation:none; }
html.paginado .faq details{ border-color:transparent; }

/* 11 · Cierre + pie: rejilla de tirilla de fondo, título enorme, CTA con anillo que late */
.cierre .diapo-in{ display:flex; flex-direction:column; gap:16px; }
.cierre-panel{ position:relative; overflow:hidden; text-align:center; color:#fff; border-radius:26px; padding:clamp(40px, 7vh, 72px) 56px clamp(30px, 5vh, 46px);
  background-color:var(--sup);
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.075) 0 1px, transparent 1px 36px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 36px); }
.sello-cierre{ top:18px; right:30px; background:var(--fondo); box-shadow:inset 0 0 0 3px var(--fondo), inset 0 0 0 5px var(--texto), 0 12px 30px rgba(0,0,0,.35); font-size:20px; }
.cierre-tit{ font:800 clamp(36px, 4.6vw, 72px)/1.03 var(--f-tit); letter-spacing:-.03em; max-width:14.5em; margin:0 auto; text-wrap:balance; }
.cierre-tit em{ color:#fff; font-weight:800; text-decoration:none; padding-bottom:.12em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:linear-gradient(var(--acento), var(--acento)) 0 100% / 100% .1em no-repeat; }
.cierre-sub{ font-size:18px; color:rgba(255,255,255,.86); margin-top:28px; }
.cierre .ctas{ margin-top:28px; }
.soporte{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:28px; }
.soporte .mono-eti{ color:rgba(255,255,255,.72); }
.soporte a{ font:700 16px/1.2 var(--f-mono); color:#fff; text-decoration:none; }
.btn-copiar{ display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:8px; border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.2); color:#fff; font:600 13px/1 var(--f-tit); cursor:pointer; }
.btn-copiar .ms{ font-size:16px; }
.enlaces-pie{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:18px; }
.enlaces-pie a{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px; background:rgba(0,0,0,.24); text-decoration:none; font:600 13.5px/1 var(--f-tit); color:#fff; transition:background-color .2s; }
.enlaces-pie a:hover{ background:rgba(0,0,0,.4); }
.enlaces-pie .ms{ font-size:17px; }
.pie{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:2px 6px; font-size:13px; color:var(--apagado); }
.pie img{ height:18px; width:auto; }

/* Visor de capturas */
.visor{ position:fixed; inset:0; z-index:90; display:grid; grid-template-columns:64px minmax(0,1fr) 64px; align-items:center; gap:10px; padding:28px 24px; background:rgba(14,14,13,.95); }
.visor[hidden]{ display:none; }
.visor-fig{ display:flex; flex-direction:column; align-items:center; gap:16px; min-width:0; }
.visor.abierto .visor-fig{ animation:entra-zoom .45s var(--seca) both; }
.visor-fig img{ max-width:min(1280px, 100%); max-height:calc(100vh - 150px); width:auto; height:auto; border-radius:12px; border:1px solid rgba(255,255,255,.1); box-shadow:0 30px 70px rgba(0,0,0,.6); }
.visor figcaption{ text-align:center; max-width:640px; }
.visor figcaption b{ display:block; font:800 20px/1.25 var(--f-tit); }
.visor figcaption span{ display:block; color:var(--apagado); font-size:14.5px; margin-top:4px; }
.visor-cerrar{ position:absolute; top:16px; right:16px; width:42px; height:42px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--linea); background:var(--tinte); cursor:pointer; }

/* ---------- 4 · INTRO: la tirilla del cierre se imprime, las cifras ruedan, cae el sello y se pliega en el titular ---------- */
html.con-intro, html.con-intro body{ overflow:hidden; }
#intro{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--fondo); cursor:pointer; }
#intro.fuera{ opacity:0; transition:opacity .38s ease .12s; pointer-events:none; }
.intro-caja{ position:relative; width:min(370px, 86vw); }
.intro-tirilla{ padding:24px 22px 26px; transform-origin:50% 0; animation:intro-imprime .55s var(--seca) both; }
@keyframes intro-imprime{ from{ transform:translateY(-30px) scaleY(.2); opacity:0; } }
#intro.plegar .intro-caja{ transition:transform .5s cubic-bezier(.6,0,.2,1), opacity .3s ease .2s; transform:translate(var(--px, 0px), var(--py, -30vh)) scale(var(--ps, .42)); opacity:0; }
.intro-filas{ padding:4px 0; }
.intro-fila{ display:grid; grid-template-columns:1fr auto 64px; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--linea); font:500 14.5px/1.2 var(--f-tit);
  opacity:0; transform:translateY(8px); transition:opacity .25s, transform .3s var(--seca); }
.intro-fila.ver{ opacity:1; transform:none; }
.intro-fila .rueda{ font-weight:700; font-size:15px; }
.intro-fila .ok{ justify-self:end; font:700 11.5px/1 var(--f-mono); color:var(--ok); opacity:0; transform:scale(.6); transition:opacity .2s, transform .3s var(--rebote); }
.intro-fila.cuadra .ok{ opacity:1; transform:none; }
.intro-tirilla footer .rueda{ font-size:22px; font-weight:700; color:var(--acento); }
.intro-sello{ right:34px; top:calc(100% - 4px); opacity:0; font-size:26px; }
.intro-sello.cae{ animation:sello-cae .62s cubic-bezier(.3,1.5,.5,1) both; }
.intro-pista{ position:absolute; left:0; right:0; bottom:26px; text-align:center; font:600 12px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--apagado); opacity:.7; }

/* Barrido: la línea #128BEC que cruza la pantalla como la tirilla que avanza */
.barrido{ position:fixed; z-index:48; left:0; right:0; top:0; height:2px; background:var(--acento); box-shadow:0 0 14px 2px rgba(18,139,236,.55); opacity:0; pointer-events:none; }
html.viajando .barrido{ animation:barrido .42s cubic-bezier(.1,.9,.2,1) both; }
html.viajando.arriba .barrido{ animation-direction:reverse; }
@keyframes barrido{ 0%{ transform:translateY(var(--barra)); opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ transform:translateY(100vh); opacity:0; } }

/* ENTRADAS: distintas por fila; se disparan con .animar cada vez que el apartado llega y se resetean al irse.
   Solo transform + opacity, fill backwards para no pisar el flotar ni la inclinación del mouse. */
.diapo:not(.animar) [data-entra]{ opacity:0; }
.diapo.animar [data-entra]{ animation-name:var(--anim, entra-sube); animation-duration:var(--dur, .7s); animation-timing-function:var(--curva, var(--seca)); animation-fill-mode:backwards; animation-delay:var(--d, 0s); }
[data-entra="sube"]{ --anim:entra-sube; }
[data-entra="izq"]{ --anim:entra-izq; --dur:.8s; }
[data-entra="der"]{ --anim:entra-der; --dur:.85s; }
[data-entra="zoom"]{ --anim:entra-zoom; --dur:.75s; }
[data-entra="caida"]{ --anim:entra-caida; --dur:.95s; --curva:linear; }
[data-entra="reparto-a"]{ --anim:entra-reparto-a; --dur:.9s; }
[data-entra="reparto-b"]{ --anim:entra-reparto-b; --dur:.9s; }
[data-entra="numero"]{ --anim:entra-numero; --dur:.8s; }
[data-entra="giro"]{ --anim:entra-giro; --dur:.8s; }
@keyframes entra-sube{ from{ opacity:0; transform:translateY(26px); } }
@keyframes entra-izq{ from{ opacity:0; transform:perspective(1000px) translateX(-80px) rotateY(18deg); } }
@keyframes entra-der{ from{ opacity:0; transform:perspective(1000px) translateX(90px) rotateY(-18deg); } }
@keyframes entra-zoom{ 0%{ opacity:0; transform:scale(.7); } 70%{ opacity:1; transform:scale(1.04); } 100%{ opacity:1; transform:scale(1); } }
@keyframes entra-caida{ 0%{ opacity:0; transform:translateY(-130px) rotate(-2.5deg); animation-timing-function:cubic-bezier(.5,0,.9,.5); }
  55%{ opacity:1; transform:translateY(0) rotate(0); animation-timing-function:cubic-bezier(.2,.7,.4,1); }
  72%{ transform:translateY(-16px) rotate(.6deg); animation-timing-function:cubic-bezier(.5,0,.9,.5); }
  86%{ transform:translateY(0) rotate(0); } 93%{ transform:translateY(-4px); } 100%{ opacity:1; transform:none; } }
@keyframes entra-reparto-a{ from{ opacity:0; transform:translate(46%, 110px) rotate(-11deg) scale(.86); } }
@keyframes entra-reparto-b{ from{ opacity:0; transform:translate(-46%, 110px) rotate(11deg) scale(.86); } }
@keyframes entra-numero{ 0%{ opacity:0; transform:scale(.4); } 65%{ opacity:1; transform:scale(1.12); } 100%{ opacity:1; transform:scale(1); } }
@keyframes entra-giro{ from{ opacity:0; transform:perspective(900px) rotateX(-70deg) translateY(30px); } }

/* solo anima el apartado visible: lo demás queda quieto */
.diapo:not(.al-frente) *, .diapo:not(.al-frente) *::before, .diapo:not(.al-frente) *::after{ animation-play-state:paused !important; }
.capa-bucle [data-entra]{ opacity:1 !important; animation:none !important; }
.capa-bucle{ position:fixed; z-index:30; left:0; right:0; top:0; height:100vh; overflow:hidden; background:var(--fondo); }
.capa-bucle > .clon-bucle{ position:absolute; inset:0; margin:0; will-change:transform; transition:transform .42s cubic-bezier(.1,.9,.2,1); }

@media (prefers-reduced-motion: reduce){
  .diapo [data-entra]{ opacity:1 !important; animation:none !important; }
  .borde-vivo, .flota, .cta-flota, .anillo::before, .btn-p::after, .punto, .seg.actual i{ animation:none !important; }
  .barrido{ display:none; }
}

/* ---------- 5 · PC EN DIAPOSITIVAS: cada apartado llena la pantalla ---------- */
html.paginado, html.paginado body{ overflow:hidden; }
html.paginado .diapo{ height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  padding:calc(var(--barra) + 16px) 0 var(--pie); }
html.paginado .portada, html.paginado .cierre{ padding-bottom:22px; }
html.paginado .diapo.desplaza{ overflow-y:auto; justify-content:flex-start; }
html.paginado .diapo-in{ zoom:1; }
/* sin modo (JS apagado): página normal */
html:not(.paginado):not(.reel) .diapo{ padding:110px 0 60px; }

@media (min-width: 1600px){
  html.paginado .portada .diapo-in{ max-width:1560px; }
  html.paginado .escena{ grid-template-columns:4% minmax(0,1fr) 24px; }
  html.paginado .ticket-pos{ width:300px; }
}
@media (max-width: 1260px){
  html.paginado .menu a.ancho{ display:none; }
  .diapo-in{ padding:0 56px; }
  .fichas{ gap:12px; }
  .ficha{ padding:16px 14px 14px; }
}
@media (max-width: 1080px){
  .logo-marca{ height:19px; }
  .menu a{ padding:9px 8px; font-size:13px; }
  .barra{ gap:14px; padding:0 18px; }
  .fichas{ grid-template-columns:repeat(5, minmax(0,1fr)); }
  .ficha p{ font-size:12.5px; }
  .ticket-pos{ width:256px; }
}

/* =====================================================================
   6 · TELÉFONO (reel de 11): AL FINAL, gana. Cabecera fija de 52 px +
   fila de apartados deslizable; cada apartado calza en una pantalla.
   ===================================================================== */
html.reel{ --barra:52px; overscroll-behavior-y:contain; }
html.reel, html.reel body{ overflow:hidden; }
html.reel body{ padding-top:var(--cab); }
html.reel .barra{ height:52px; gap:8px; padding:0 12px; border-bottom:0; background:var(--fondo); }
html.reel .logo-marca{ display:none; }
html.reel .logo-icono{ display:block; }
html.reel .acciones{ margin-left:auto; gap:6px; }
html.reel .idioma span{ padding:6px 6px; font-size:11px; }
html.reel .acciones .btn-chico{ font-size:13px; padding:9px 11px; }
html.reel .menu{ position:fixed; z-index:49; top:52px; left:0; right:0; height:40px; margin:0; gap:6px; padding:0 12px 4px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  background:var(--fondo); border-bottom:1px solid var(--linea); align-items:center; }
html.reel .menu::-webkit-scrollbar{ display:none; }
html.reel .menu a{ flex:none; padding:7px 12px; font-size:12.5px; border-radius:999px; border:1px solid transparent; }
html.reel .menu a.activo{ background:var(--tinte); border-color:var(--linea-azul); }
html.reel .menu a.activo::after{ display:none; }
html.reel .indice, html.reel .pegajosa{ display:none; }

html.reel .diapo{ height:calc(100dvh - var(--cab)); padding:14px 0 16px; overflow:hidden; display:flex; flex-direction:column; contain:layout paint; }
html.reel .diapo.desplaza{ overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y pinch-zoom; }
html.reel .diapo-in{ height:100%; display:flex; flex-direction:column; justify-content:center; align-items:stretch; padding:0 16px; }
html.reel .diapo-in > :is(.tit, .historia, .stories, .dos-tirillas, .calc, .fichas, .faq, .tarifas, .telefonos, .mini-tickets, .cierre-panel, .pie){ width:auto; max-width:none; margin-left:0; margin-right:0; }
html.reel .diapo-in > *{ flex-shrink:0; }
html.reel .diapo.desplaza > .diapo-in{ height:auto; min-height:100%; justify-content:flex-start; }
html.reel main{ touch-action:pinch-zoom; }
html.reel .capa-bucle{ top:var(--cab); height:calc(100dvh - var(--cab)); }
html.reel .barrido{ top:0; }
@keyframes barrido-tel{ 0%{ transform:translateY(var(--cab)); opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ transform:translateY(100dvh); opacity:0; } }
html.reel.viajando .barrido{ animation-name:barrido-tel; }

html.reel h2{ font-size:clamp(25px, 7.4vw, 31px); line-height:1.08; }
html.reel .tit{ margin-bottom:14px; }
html.reel .tit > p:not(.eti){ font-size:14px; margin-top:8px; }
html.reel .eti{ font-size:11px; margin-bottom:9px; }
html.reel .btn-xl{ font-size:16px; padding:15px 18px; }

/* 1 · portada: H1 de 34–38 px en 3 líneas, llamado a todo el ancho arriba de y≈600 y el teléfono como visual */
html.reel .portada .diapo-in{ display:flex; justify-content:flex-start; }
/* el gancho "15 días · sin tarjeta" pasa al lado del chip de precio: el alto libre es para el teléfono */
html.reel .chip-vivo{ display:none; }
html.reel .titular{ font-size:clamp(34px, 9.6vw, 38px); line-height:1.02; margin:2px 0 10px; }
html.reel .bajada{ font-size:14.5px; line-height:1.45; }
html.reel .portada .ctas{ margin-top:14px; }
html.reel .portada .ctas .anillo{ flex:1 1 100%; }
html.reel .portada .ctas .anillo .btn{ width:100%; }
html.reel .portada .ctas .btn-g{ display:none; }
html.reel .fila-precio{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.chip-precio{ display:inline-flex; align-items:center; gap:6px; padding:8px 10px 8px 13px; border-radius:999px; border:1px solid var(--linea-azul); background:var(--tinte); font:700 13px/1 var(--f-mono); cursor:pointer; }
.chip-precio .ms{ font-size:18px; color:var(--acento); transition:transform .3s; }
.chip-precio[aria-expanded="true"] .ms{ transform:rotate(180deg); }
.micro-tel{ font:500 11.5px/1.3 var(--f-mono); color:var(--apagado); text-align:right; min-width:0; }
html.reel .chip-precio{ flex:none; white-space:nowrap; }
/* franja en UNA línea por dato (número + etiqueta corta) */
html.reel .franja{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin-top:12px; padding-top:9px; }
html.reel .franja.cinco{ grid-template-columns:repeat(5, minmax(0,1fr)); }
html.reel .franja li{ flex-direction:row; align-items:baseline; gap:5px; min-width:0; }
html.reel .franja b{ font-size:19px; }
html.reel .franja li > span{ font-size:10.5px; line-height:1.2; }
html.reel .franja .eti-pc{ display:none; }
html.reel .franja .eti-tel{ display:inline; white-space:nowrap; }
/* el teléfono del hero crece hasta el alto libre; el ticket se abre como hoja inferior sobre un velo */
html.reel .escena{ position:static; flex:1 1 auto; min-height:240px; height:auto; margin-top:12px; display:flex; justify-content:center; }
html.reel .escena .ventana{ display:none; }
html.reel .tel-hero{ position:relative; left:auto; bottom:auto; width:auto; height:100%; aspect-ratio:1/1.9; padding:6px 6px 0; border-radius:24px 24px 0 0; border-bottom:0; }
html.reel .tel-hero img{ flex:1 1 auto; min-height:0; height:0; object-fit:cover; object-position:top; border-radius:18px 18px 0 0; }
html.reel .portada::after{ content:""; position:absolute; inset:0; z-index:4; background:rgba(12,12,11,.62); opacity:0; pointer-events:none; transition:opacity .25s; }
html.reel .portada.ticket-abierto::after{ opacity:1; }
html.reel .ticket-pos{ position:absolute; left:12px; right:12px; bottom:12px; width:auto; margin:0; justify-self:normal; align-self:auto; border-radius:16px; box-shadow:0 -10px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(18,139,236,.35);
  transform:translateY(30px); opacity:0; visibility:hidden; transition:opacity .25s, transform .35s var(--seca), visibility 0s .35s; z-index:5; }
html.reel .portada.ticket-abierto .ticket-pos{ opacity:1; visibility:visible; transform:none; transition:opacity .25s, transform .35s var(--seca), visibility 0s; }
html.reel .ticket-pos .flota{ animation:none; }

/* 2 · diagnóstico: dos tirillas compactas */
html.reel .diagnostico .tit > p:not(.eti){ display:none; }
html.reel .dos-tirillas{ grid-template-columns:1fr; gap:12px; }
html.reel .tirilla{ padding:17px 14px 18px; }
html.reel .tirilla > header{ padding-bottom:8px; margin-bottom:2px; }
html.reel .tirilla > footer{ padding-top:8px; margin-top:4px; }
html.reel .lineas li{ grid-template-columns:17px 1fr; gap:8px; padding:5px 0; font-size:12.5px; line-height:1.35; }
html.reel .lineas li .ms{ font-size:16px; }
html.reel .estado{ font-size:11.5px; padding:5px 8px; }
html.reel .sello-diag{ right:auto; left:40%; bottom:4px; font-size:17px; padding:8px 13px 7px 15px; }

/* 3 · calculadora compacta, con el resultado en la misma pantalla */
html.reel .calculadora .tit > p:not(.eti){ display:none; }
html.reel .calc{ grid-template-columns:1fr; gap:10px; }
html.reel .campo{ padding:9px 12px 8px; border-radius:12px; }
html.reel .campo + .campo{ margin-top:7px; }
html.reel .campo label{ font-size:12.5px; margin-bottom:5px; }
html.reel .valor{ font-size:15px; }
html.reel .recibo{ padding:17px 16px 18px; }
html.reel .recibo > header{ display:none; }
html.reel .recibo-grande{ font-size:44px; margin-top:0; }
html.reel .recibo-u{ font-size:15px; }
html.reel .recibo-cap{ font-size:12.5px; }
html.reel .recibo-filas{ grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
html.reel .recibo-filas > div{ flex-direction:column; align-items:flex-start; gap:4px; padding:6px 0; }
html.reel .recibo-filas dt{ font-size:11.5px; }
html.reel .recibo-filas dd{ font-size:18px; }
html.reel .recibo .perfo{ margin:8px 0; }
html.reel .recibo-contraste{ font-size:12.5px; margin-bottom:10px; }
html.reel .recibo-contraste b{ font-size:14px; }
html.reel .recibo .btn{ padding:13px 14px; font-size:15px; }
html.reel .recibo .micro{ display:none; }

/* 4 · cómo cuadra: la captura llena, texto debajo, solo deslizar */
html.reel .cuadra .tit > p:not(.eti){ display:none; }
html.reel .historia{ flex:1 1 auto; min-height:330px; height:auto; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; gap:12px; }
html.reel .historia-media{ order:-1; }
html.reel .marco{ height:100%; width:100%; aspect-ratio:auto; border:0; border-radius:0; box-shadow:none; background:transparent; overflow:visible; }
html.reel .marco > .ventana-barra{ display:none; }
html.reel .marco-pantalla{ background:transparent; overflow:visible; }
html.reel .paso-media{ align-items:center; }
html.reel .paso-img{ width:min(100cqw, 100cqh * var(--ar-tel, var(--ar))); aspect-ratio:var(--ar-tel, var(--ar)); }
html.reel .paso-img img{ border-radius:14px; border:1px solid rgba(255,255,255,.09); box-shadow:0 22px 44px rgba(0,0,0,.5); }
html.reel .sello-paso{ left:auto; right:14px; bottom:16px; font-size:18px; padding:8px 13px 7px 15px; }
html.reel .rubros li.rubros-corte{ display:none; }
html.reel .historia-txt{ height:132px; }
html.reel .paso-txt{ gap:6px; justify-content:flex-start; }
html.reel .paso-num{ display:none; }
html.reel .paso-txt h3{ font-size:20px; }
html.reel .paso-txt p{ font-size:13.5px; line-height:1.4; }
html.reel .paso-dato{ flex-direction:row; align-items:baseline; gap:10px; padding:8px 12px; }
html.reel .paso-dato .rueda{ font-size:20px; }
html.reel .paso-dato .mono-eti{ font-size:10px; }
html.reel .stories{ margin-top:10px; gap:10px; }
html.reel .stories .flecha-cuad{ display:none; }
html.reel .stories-cuenta{ min-width:0; font-size:12px; }

/* 5 · funciones en 2 columnas × 5 filas */
html.reel .funciones .tit > p:not(.eti){ font-size:12.5px; }
html.reel .fichas{ grid-template-columns:1fr 1fr; gap:8px; }
html.reel .ficha{ display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:9px; row-gap:7px; padding:11px 11px 12px; border-radius:12px; align-content:start; }
html.reel .ficha .ico{ width:30px; height:30px; border-radius:9px; align-self:center; }
html.reel .ficha .ico .ms{ font-size:19px; }
html.reel .ficha h3{ font-size:13.5px; line-height:1.15; align-self:center; }
html.reel .ficha p{ grid-column:1 / -1; font-size:11.5px; line-height:1.4; }
html.reel .ficha .linea-pc{ display:none; }
html.reel .ficha .linea-tel{ display:block; }
html.reel .ficha .ver{ display:none; }
html.reel .ficha{ border-radius:12px 12px 0 0; padding-bottom:15px; }
html.reel .beta{ font-size:9px; padding:3px 5px; }

/* 6 · formas de vender en 1 columna compacta (arregla el desborde de 617 px) */
html.reel .formas .tit{ margin-bottom:12px; }
html.reel .mini-tickets{ grid-template-columns:minmax(0,1fr); gap:9px; }
html.reel .mini{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:12px; row-gap:0; padding:15px 14px 16px; }
html.reel .mini > header{ grid-column:1 / -1; padding-bottom:8px; margin-bottom:2px; }
html.reel .mini > header .mono-eti{ font-size:10px; }
html.reel .mini .tipo{ font-size:14.5px; gap:9px; }
html.reel .ico-c{ width:30px; height:30px; border-radius:9px; }
html.reel .ico-c .ms{ font-size:19px; }
html.reel .mini-filas{ padding:4px 0 0; gap:0; }
html.reel .mini-filas > div{ padding:4px 0; border-bottom:0; }
html.reel .mini-filas dt{ font-size:11.5px; }
html.reel .mini-filas dd{ font-size:13.5px; }
html.reel .mini > footer{ grid-column:2; grid-row:2; flex-direction:column; align-items:flex-end; justify-content:center; gap:3px; padding:6px 0 0 12px; margin:0; border-top:0; border-left:1.5px dashed var(--linea-azul); }
html.reel .mini > footer .mono-eti{ font-size:10px; }
html.reel .mini .total{ font-size:24px; }
html.reel .rubros-caja{ margin-top:14px; text-align:left; }
html.reel .rubros{ gap:6px; justify-content:flex-start; }
html.reel .rubros li{ font-size:11.5px; padding:6px 10px 6px 8px; gap:5px; }
html.reel .rubros .ms{ font-size:15px; }
html.reel .rubros-eti{ font-size:10.5px; margin-bottom:8px; }

/* 8 · 24/7: los teléfonos en carrusel con enganche */
html.reel .telefonos{ justify-content:flex-start; gap:18px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -16px; padding:0 16px 4px; touch-action:pan-x pinch-zoom; }
html.reel .telefonos::-webkit-scrollbar{ display:none; }
html.reel .grupo{ flex:none; align-items:flex-start; gap:10px; }
html.reel .grupo-tels{ gap:10px; }
html.reel .grupo-tels > .ms{ display:none; }
html.reel .tel-mini{ width:52vw; max-width:220px; scroll-snap-align:start; scroll-margin-left:16px; }
html.reel .grupo-nota{ font-size:12px; padding:7px 11px; }

/* 9 · precio en carrusel con enganche, el semestral primero */
html.reel .precio .tit > p:not(.eti){ display:none; }
html.reel .precio .moneda-sec{ margin-top:10px; }
html.reel .tarifas{ display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -16px; padding:12px 16px 8px; touch-action:pan-x pinch-zoom; align-items:stretch; }
html.reel .tarifas::-webkit-scrollbar{ display:none; }
html.reel .tarifas > *{ flex:0 0 82%; scroll-snap-align:center; }
html.reel .tarifas > .es-dest{ order:-1; }
html.reel .tarifa{ height:100%; padding:20px 18px 18px; }
html.reel .tarifa.dest{ transform:none; }
html.reel .tarifa-precio{ font-size:34px; }
html.reel .tarifa ul{ margin-bottom:14px; gap:7px; }
html.reel .tarifa li{ font-size:13px; }
html.reel .nota-precio{ font-size:12px; margin-top:12px; align-items:flex-start; text-align:left; }

/* 10 · preguntas: una columna, con scroll propio si hace falta */
html.reel .faq{ grid-template-columns:1fr; gap:8px; }
html.reel .faq-col{ gap:8px; }
html.reel .faq summary{ font-size:13.5px; padding:12px 14px; gap:10px; }
html.reel .faq-n{ font-size:11px; }
html.reel .faq .resp{ font-size:13px; padding:0 14px 13px; line-height:1.5; }
html.reel .faq-contacto{ padding:11px 14px; gap:11px; align-items:center; }
html.reel .faq-contacto .ico-c{ width:30px; height:30px; border-radius:9px; }
html.reel .faq-contacto .ico-c .ms{ font-size:18px; }
html.reel .faq-contacto b{ font-size:13.5px; }
html.reel .faq-contacto p{ display:none; }
html.reel .faq-contacto a{ font-size:12.5px; margin-top:2px; }

/* 11 · cierre compacto */
html.reel .cierre .diapo-in{ gap:12px; }
html.reel .cierre-panel{ padding:44px 18px 24px; border-radius:20px; }
html.reel .sello-cierre{ top:14px; right:14px; font-size:14px; padding:7px 11px 6px 13px; }
html.reel .cierre-tit{ font-size:clamp(29px, 8.4vw, 34px); }
html.reel .cierre-sub{ font-size:14.5px; margin-top:12px; }
html.reel .cierre .ctas{ flex-direction:column; align-items:stretch; margin-top:20px; }
html.reel .cierre .ctas .anillo .btn{ width:100%; }
html.reel .soporte{ margin-top:18px; gap:8px 10px; }
html.reel .soporte a{ font-size:13.5px; }
html.reel .enlaces-pie{ margin-top:12px; gap:6px; }
html.reel .enlaces-pie a{ font-size:12.5px; padding:8px 12px; }
html.reel .pie{ flex-direction:column; gap:6px; text-align:center; font-size:11.5px; }
html.reel .pie img{ height:15px; }

/* visor en el teléfono: la captura a todo el ancho; se cierra tocando fuera */
html.reel .visor{ grid-template-columns:1fr; padding:64px 12px 20px; }
html.reel .visor .flecha-cuad{ display:none; }
html.reel .visor-fig img{ max-height:calc(100dvh - 190px); }

@media (max-width: 370px){
  html.reel .acciones .btn-g{ display:none; }
  html.reel .titular{ font-size:32px; }
}

/* =====================================================================
   7 · CARRUSEL DE LA PORTADA EN EL TELÉFONO (03/10/2026): AL FINAL, gana.
   El carrusel llena el alto libre; cada diapositiva calza en una pantalla
   (si no entra, app.js la achica con zoom). Se cambia deslizando de lado.
   ===================================================================== */
html.reel .portada .carrusel{ flex:1 1 0; min-height:0; }
html.reel .lamina-hero{ display:flex; flex-direction:column; justify-content:flex-start; }
html.reel .carrusel-ctrl{ flex:none; margin-top:10px; gap:10px; }
html.reel .carrusel-ctrl .flecha-cuad{ display:none; }
html.reel .cseg-fila{ gap:6px; }
html.reel .cseg{ gap:6px; font-size:9.5px; letter-spacing:.05em; }
html.reel .cseg-cuenta{ min-width:0; font-size:12px; }
html.reel .lamina-c .tit{ margin-bottom:12px; }
html.reel .lamina-c .tit > p:not(.eti){ font-size:13.5px; margin-top:6px; }

/* 2/4 · la calle en el teléfono (04/10/2026): la misma cuadrícula en 2 columnas (2 + 2 + 1, el gimnasio a lo ancho),
   cada cuadro con su ícono, su nombre corto y el teléfono que asoma; la vitrina se abre al frente con la X */
html.reel .lamina-calle .lamina-in{ justify-content:flex-start; }
html.reel .calle-tit{ margin-bottom:10px; }
html.reel .calle-tit .eti{ margin-bottom:8px; }
html.reel .calle-tit h2{ font-size:clamp(24px, 7vw, 30px); }
html.reel .calle-cinta{ margin-bottom:10px; -webkit-mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
html.reel .cinta-pista{ animation-duration:40s; }
html.reel .cinta-pista li{ gap:6px; margin-right:7px; padding:7px 13px 7px 9px; font-size:13px; }
html.reel .cinta-pista .ms{ font-size:18px; }
html.reel .fachadas{ --fila-min:104px; grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:minmax(var(--fila-min), 1fr) minmax(var(--fila-min), 1fr) minmax(var(--fila-min), 1.2fr); gap:8px; }
html.reel .fachada, html.reel .fachada:nth-child(n+4){ grid-column:auto; padding:20px 12px 12px; border-radius:14px; }
html.reel .fachada:nth-child(5){ grid-column:1 / -1; }
html.reel .fachada:is(:hover, :focus-visible, .estrella){ transform:none; }
html.reel .f-cab, html.reel .fachada:nth-child(n+4) .f-cab{ width:100%; grid-template-columns:minmax(0,1fr); row-gap:7px; }
html.reel .f-ico{ width:36px; height:36px; border-radius:10px; }
html.reel .f-ico svg{ width:22px; height:22px; }
html.reel .f-nombre{ font-size:15px; }
/* en el teléfono el nombre corto (Barbería, Taller…): el largo no cabe al lado del teléfono */
html.reel:not(.tableta) .f-nombre{ display:none; }
html.reel:not(.tableta) .f-corto{ display:block; }
html.reel:not(.tableta) .fachada:nth-child(5) .f-nombre{ display:block; }
html.reel:not(.tableta) .fachada:nth-child(5) .f-corto{ display:none; }
html.reel .f-linea{ display:none; }
/* "Entrar" queda como un botón redondo arriba a la derecha (el ícono que se abre) */
html.reel .f-entrar{ position:absolute; top:18px; right:10px; width:36px; height:36px; margin:0; padding:0; justify-content:center; }
html.reel .f-entrar > span{ display:none; }
html.reel .f-foto, html.reel .fachada:nth-child(n+4) .f-foto{ top:auto; bottom:0; right:12px; height:46%; width:50%; }
html.reel .f-tel, html.reel .fachada:nth-child(n+4) .f-tel{ width:100%; padding:4px 4px 0; border-radius:15px 15px 0 0; }
html.reel .f-tel img{ border-radius:11px 11px 0 0; }
html.reel .fachada:nth-child(n+4) .f-tel.dos{ display:none; }
/* el recibo de la ferretería en chico: ícono y total de cada forma de cobrar */
html.reel .fachada.f-ferreteria .f-foto{ width:66%; right:8px; }
html.reel .fachada.f-ferreteria .f-recibo{ width:100%; padding:8px 10px 12px; transform:rotate(3deg); }
html.reel .f-recibo-eti{ display:none; }
html.reel .f-recibo-fila{ grid-template-columns:16px minmax(0,1fr); gap:6px; padding:5px 0; }
html.reel .f-recibo-fila > span{ display:none; }
html.reel .f-recibo-fila .ms{ font-size:15px; }
html.reel .f-recibo-fila b{ font-size:11px; text-align:right; white-space:nowrap; }
/* el cuadro ancho (gimnasio): la línea a la izquierda y las dos capturas a la derecha */
html.reel .fachada:nth-child(5) .f-cab{ width:56%; }
html.reel .fachada:nth-child(5) .f-linea{ display:block; max-width:none; font-size:12.5px; line-height:1.38; }
html.reel .fachada:nth-child(5) .f-foto{ height:auto; top:18px; bottom:0; width:40%; right:12px; }
html.reel .fachada:nth-child(5) .f-entrar{ position:relative; top:auto; right:auto; width:auto; height:auto; margin-top:auto; padding:7px 11px 7px 12px; font-size:12px; }
html.reel .fachada:nth-child(5) .f-entrar > span{ display:inline; }
html.reel .fachada:nth-child(5) .f-tel{ width:58%; }
html.reel .fachada:nth-child(5) .f-tel.dos{ display:block; right:auto; left:0; top:24px; }
/* la vitrina en el teléfono: pestañas de íconos + la X arriba; la captura llena lo que sobra; un solo botón */
html.reel .vitrina-vista{ gap:10px; }
html.reel .vit-cab{ gap:8px; }
html.reel .vit-tabs{ flex-wrap:nowrap; gap:5px; }
html.reel .vit-tab{ padding:10px; }
html.reel .vit-tab > span{ display:none; }
html.reel .vit-tab svg{ width:20px; height:20px; }
html.reel .vit-cerrar{ width:48px; height:48px; border-radius:12px; }
html.reel .vit-cerrar .ms{ font-size:30px; }
html.reel .vit-cuerpo{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; align-items:stretch; gap:12px; padding:18px 14px 14px; }
html.reel .vit-cuerpo::before{ left:12px; right:12px; }
html.reel .vit-pantalla{ order:-1; height:auto; min-height:140px; }
html.reel .vit-tit{ font-size:18px; margin:2px 0 10px; }
html.reel .vit-funciones{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
html.reel .vit-fn{ min-height:46px; align-content:center; padding:8px 9px 10px; }
html.reel .vit-fn b{ font-size:12.5px; }
html.reel .vit-fn small{ display:none; }
html.reel .vitrina-vista .ctas{ margin-top:12px; }
html.reel .vitrina-vista .ctas .btn{ width:100%; }
/* 3/4 · recorrido en el teléfono: la lista con la ruta vertical que baja; el mapa no va */
html.reel .ruta-grid{ grid-template-columns:minmax(0,1fr); }
html.reel .mapa{ display:none; }
html.reel .pasos-ruta li{ padding:12px 0; }
html.reel .pasos-ruta li span{ font-size:15px; }
html.reel .pasos-ruta li::before{ position:relative; z-index:1; }
html.reel .pasos-ruta li:not(.on)::before{ background:var(--fondo); }
html.reel .pasos-ruta .ruta-v{ display:block; position:absolute; left:16px; top:0; height:0; width:2px; padding:0; border:0; opacity:1; counter-increment:none; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(18,139,236,.55) 0 7px, transparent 7px 12px); }
html.reel .pasos-ruta .ruta-v::before{ content:none; }
.ruta-v-av{ position:absolute; inset:0; background:var(--acento); transform-origin:50% 0; transform:scaleY(0); }
.ruta-v-ficha{ position:absolute; left:-5px; top:-6px; width:12px; height:12px; border-radius:50%; background:var(--acento); box-shadow:0 0 0 4px rgba(18,139,236,.3); opacity:0; }
.pasos-ruta.recorriendo .ruta-v-av{ animation:ruta-baja var(--dur-ruta-tel, 4200ms) linear .3s forwards; }
.pasos-ruta.recorriendo .ruta-v-ficha{ opacity:1; animation:ficha-baja var(--dur-ruta-tel, 4200ms) linear .3s forwards; }
@keyframes ruta-baja{ to{ transform:scaleY(1); } }
@keyframes ficha-baja{ 0%{ transform:translateY(0); opacity:1; } 96%{ opacity:1; } 100%{ transform:translateY(var(--alto-ruta, 300px)); opacity:0; } }

/* 4/4 · incluye en el teléfono: dos columnas con nombre e "Incluido" */
html.reel .tablero{ padding:6px 12px 10px; border-radius:16px; }
html.reel .tablero-filas{ column-gap:10px; }
html.reel .fila-fn{ grid-template-columns:32px minmax(0,1fr); column-gap:9px; row-gap:2px; padding:9px 2px; }
html.reel .fila-fn .ico-c{ grid-row:1 / span 2; width:32px; height:32px; border-radius:9px; }
html.reel .fila-fn .ico-c .ms{ font-size:18px; }
html.reel .fila-fn b{ font-size:13px; }
html.reel .fila-fn b em, html.reel .fila-fn small{ display:none; }
html.reel .fila-fn .incluido{ grid-column:2; font-size:9.5px; }
html.reel .fila-fn .incluido .ms{ font-size:13px; }
html.reel .tablero-pie{ font-size:12px; margin-top:8px; }
html.reel .incluye-ctas{ margin-top:12px; }
html.reel .incluye-ctas .btn-g{ display:none; }
html.reel .incluye-ctas .btn{ width:100%; }

@media (prefers-reduced-motion: reduce){
  .lamina-c, .lamina-c.activa{ transition:none; }
  .cseg.on .cseg-pista i, .vit-fn.on.auto .vit-progreso{ animation:none; transform:scaleX(1); }
}
/* Las diapositivas que no están a la vista no animan nada (la vitrina, el recorrido, los segmentos). */
.lamina-c:not(.activa) *, .lamina-c:not(.activa) *::before, .lamina-c:not(.activa) *::after{ animation-play-state:paused !important; }
/* En el teléfono la captura de PC se ve con su versión de teléfono, recortada desde arriba */
html.reel .vit-cap .ventana{ height:100%; }
html.reel .vit-cap .ventana img{ height:100%; max-height:none; object-fit:cover; object-position:top; }
/* El título del recorrido puede cortar dentro del <em> (en inglés "through the whole shop" no entra en una línea) */
.ruta-txt .tit h2 em{ white-space:normal; }

/* Flechas del carrusel a los costados de las diapositivas (PC). Discretas: círculo traslúcido con
   borde azul; se notan porque la de la derecha "empuja" cada tanto hacia el lado (solo transform). */
.car-flecha{ position:absolute; top:50%; z-index:6; width:48px; height:48px; margin-top:-24px; display:grid; place-items:center; padding:0;
  border-radius:50%; border:1.5px solid var(--linea-azul); background:rgba(24,34,54,.72); color:var(--texto); cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.35); transition:background-color .2s, border-color .2s, transform .25s var(--seca); }
.car-flecha.izq{ left:-60px; }
.car-flecha.der{ right:-60px; }
.car-flecha .ms{ font-size:28px; }
.car-flecha:hover{ background:var(--sup); border-color:var(--acento); transform:scale(1.08); }
.car-flecha:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }
.car-flecha.der .ms{ animation:empuja-der 3.6s var(--seca) infinite; }
.carrusel.manual .car-flecha .ms, .car-flecha:hover .ms{ animation:none; }
@keyframes empuja-der{ 0%, 72%, 100%{ transform:none; } 80%{ transform:translateX(5px); } 88%{ transform:translateX(-1px); } }
@media (max-width: 1260px){
  .car-flecha{ width:44px; height:44px; margin-top:-22px; }
  .car-flecha.izq{ left:-52px; }
  .car-flecha.der{ right:-52px; }
}
/* teléfono: se pasa deslizando; las flechas taparían el texto */
html.reel .car-flecha{ display:none; }
@media (prefers-reduced-motion: reduce){ .car-flecha .ms{ animation:none; } }
/* En pantallas angostas la flecha derecha caería sobre el índice lateral: mientras la portada está al
   frente, el índice se esconde (ahí manda el carrusel) y vuelve al bajar. */
@media (max-width: 1399px){
  .indice{ transition:opacity .25s; }
  html:has(#portada.al-frente) .indice{ opacity:0; pointer-events:none; }
}

/* =====================================================================
   8 · TABLET (03/10/2026): todo bajo html.tableta (lo pone el script del <head>
   solo en pantallas táctiles de tablet). El teléfono y la PC no cambian.
   · Vertical: el viewport se arma como un teléfono de (lado menor / 1,25) de ancho,
     así que es el CSS del teléfono, 25 % más grande; no necesita reglas propias.
   · Horizontal: columnas de PC con manejo táctil y más alto útil para el contenido.
   ===================================================================== */
/* con un viewport que no es device-width, Chrome Android agranda letras por su cuenta */
html.tableta{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* horizontal: el navegador no desplaza la página; el dedo lo maneja app.js (un apartado por gesto) */
html.tableta.paginado main{ touch-action:pinch-zoom; }
/* sin la barra fija de abajo (la cabecera ya tiene "Crear cuenta") ni el índice de puntos (se desliza) */
html.tableta.paginado .pegajosa, html.tableta.paginado .indice{ display:none; }
/* y sin su reserva de 84 px abajo: ese alto vuelve al contenido y el zoom de ajuste sube */
html.tableta.paginado .diapo{ padding:calc(var(--barra) + 10px) 0 14px; }
html.tableta.paginado .portada, html.tableta.paginado .cierre{ padding-bottom:14px; }
html.tableta.paginado .tit{ margin-bottom:clamp(12px, 2.4vh, 24px); }
/* horizontal: el carrusel mide lo que su diapositiva más alta; "Incluye" y "La calle" se mantienen más bajas que
   la portada (ver la capa 9) para que la portada no quede chica */
html.tableta.paginado .tablero{ padding:6px 20px 12px; }
html.tableta.paginado .tablero-filas{ grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:20px; }
html.tableta.paginado .fila-fn{ padding:9px 4px; }
html.tableta.paginado .incluye-ctas{ margin-top:12px; }
html.tableta.paginado .lamina-incluye .tit, html.tableta.paginado .lamina-calle .tit{ margin-bottom:12px; }
/* horizontal: Preguntas es un acordeón como en el teléfono (una abierta a la vez), no todas abiertas y chicas */
html.tableta.paginado .faq summary{ cursor:pointer; padding:15px 18px; }
html.tableta.paginado .faq summary .ms{ display:inline; }
html.tableta.paginado .faq .resp{ padding:0 18px 16px 50px; font-size:14.5px; line-height:1.6; }
html.tableta.paginado .faq details[open]{ border-color:var(--linea-azul); }
html.tableta.paginado .faq details[open] .resp{ animation:resp .35s var(--seca); }

/* Vitrinas (control de calidad, 03/10/2026): la captura nunca se sale de su caja, en ningún tamaño.
   Era un error del carrusel nuevo: las hojas sueltas ("recorte") medían su alto natural. */
.vit-cap{ grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr); }
.vit-cap > .recorte{ height:100%; width:auto; max-width:100%; min-height:0; object-fit:contain; }
html.reel .vit-cap .cobros{ padding:10px 18px; }
html.reel .vit-cap .cobros .cobro{ padding:7px 0; }

/* Tablet (control de calidad): */
/* horizontal: Funciones y Precio más compactos para que el zoom de ajuste suba y la letra no quede chica */
html.tableta.paginado #fichas .ficha .ver{ display:none; }
html.tableta.paginado #fichas .ficha{ gap:7px; padding:14px 14px 16px; }
html.tableta.paginado .tarifa{ padding:18px 20px 16px; }
html.tableta.paginado .tarifa .perfo{ margin:10px -20px; }
html.tableta.paginado .tarifa ul{ gap:6px; margin-bottom:12px; }
html.tableta.paginado .tarifa .btn{ min-height:46px; }
/* el selector COP/USD de Precio, fácil de tocar */
html.tableta.paginado .precio .moneda-sec button{ min-height:44px; padding:0 18px; font-size:13px; }
/* "Incluye" en tres columnas: solo el ✓ (sin la palabra) para darle ancho a la descripción, y la última
   función ocupa la fila entera en vez de quedar sola en una columna */
html.tableta.paginado .fila-fn .incluido{ font-size:0; gap:0; }
html.tableta.paginado .tablero-filas li:last-child:nth-child(3n + 1){ grid-column:1 / -1; }
/* el menú de arriba tiene lugar para "Cómo cuadra" */
html.tableta.paginado .menu a.ancho{ display:revert; }

/* =====================================================================
   9 · TABLET: DIAPOSITIVAS 2 Y 4 (04/10/2026). Todo bajo html.tableta; el teléfono y la PC no cambian.
   · 4/4 "Un solo plan, todo incluido": las 10 funciones en cuadros con aire (ícono, nombre y su línea
     corta completa, sin "…"), con un ✓ verde en cada uno. Vertical: 2 columnas; horizontal: 5 × 2.
   ===================================================================== */
.fila-fn small.corta{ display:none; }
html.tableta .tablero{ padding:14px; border-radius:20px; }
html.tableta .tablero-filas{ gap:10px; }
html.tableta .tablero-filas li{ display:flex; min-width:0; }
html.tableta .fila-txt{ display:contents; }
html.tableta .fila-fn{ position:relative; display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; row-gap:3px; align-items:start; align-content:start;
  width:100%; padding:12px 12px 13px 12px; border:1px solid var(--linea); border-radius:14px; background:rgba(245,247,250,.035); }
html.tableta .fila-fn:hover{ background:rgba(18,139,236,.1); border-color:var(--linea-azul); }
html.tableta .fila-fn .ico-c{ grid-row:1 / span 2; width:42px; height:42px; border-radius:12px; }
html.tableta .fila-fn .ico-c .ms{ font-size:23px; }
html.tableta .fila-fn b{ grid-column:2; align-self:end; font-size:15.5px; line-height:1.22; }
html.tableta .fila-fn b em{ display:inline-block; margin-left:5px; font-size:12px; }
html.tableta .fila-fn small{ display:none; }
html.tableta .fila-fn small.corta{ display:block; grid-column:2; margin:0; font-size:13px; line-height:1.42; color:var(--apagado); overflow:visible; }
/* "Incluido": vertical, un ✓ verde sobre la esquina del ícono (la palabra queda para los lectores de pantalla);
   horizontal, la etiqueta "✓ Incluido" completa arriba a la derecha de cada cuadro */
html.tableta .fila-fn .incluido{ grid-area:auto; position:absolute; top:35px; left:38px; width:21px; height:21px; justify-content:center; gap:0; padding:0; border-radius:50%;
  background:var(--ok); color:var(--fondo); box-shadow:0 0 0 2.5px #1B2436; }
html.tableta .fila-fn .incluido .ms{ font-size:15px; font-weight:700; }
html.tableta .fila-fn .incluido-txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html.tableta .tablero-pie{ margin-top:12px; font-size:14px; }
html.tableta .incluye-ctas{ margin-top:14px; }
/* vertical: 2 columnas de cuadros horizontales */
html.tableta.reel .tablero{ padding:10px; }
html.tableta.reel .tablero-filas{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px; }
html.tableta.reel .fila-fn{ padding:8px 11px 9px; }
html.tableta.reel .fila-fn small.corta{ line-height:1.36; }
html.tableta.reel .lamina-incluye .tit{ margin-bottom:12px; }
html.tableta.reel .tablero-pie{ margin-top:9px; font-size:12px; }
html.tableta.reel .incluye-ctas{ margin-top:12px; }
/* horizontal: 5 columnas × 2 filas de cuadros con el ícono arriba (más aire y nada cortado) */
html.tableta.paginado .tablero{ padding:12px; }
html.tableta.paginado .tablero-filas{ grid-template-columns:repeat(5, minmax(0,1fr)); column-gap:10px; }
html.tableta.paginado .tablero-filas li:last-child:nth-child(3n + 1){ grid-column:auto; }
html.tableta.paginado .fila-fn{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; row-gap:4px; padding:12px 13px 13px; }
html.tableta.paginado .fila-fn .ico-c{ grid-row:auto; margin-bottom:4px; }
html.tableta.paginado .fila-fn b{ padding-right:0; }
html.tableta.paginado .tablero-pie{ margin-top:10px; }
html.tableta.paginado .fila-fn b, html.tableta.paginado .fila-fn small.corta{ grid-column:1; }
html.tableta.paginado .fila-fn .incluido{ top:14px; left:auto; right:12px; width:auto; height:auto; gap:4px; padding:5px 8px 5px 6px; border-radius:999px;
  background:rgba(61,203,127,.13); color:var(--ok); box-shadow:none; font:700 12.5px/1 var(--f-mono); letter-spacing:.04em; }
html.tableta.paginado .fila-fn .incluido .ms{ font-size:14px; }
html.tableta.paginado .fila-fn .incluido-txt{ position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
/* los botones de abajo, fáciles de tocar */
html.tableta.paginado .incluye-ctas .btn{ min-height:54px; }
/* la vitrina: pestañas de negocio fáciles de tocar */
html.tableta.paginado .vit-tab{ min-height:54px; padding:15px 18px; font-size:14.5px; }
/* la vitrina abierta, acostada: la columna de texto (etiqueta, título de 2-3 líneas, 3 funciones y el botón) no cabía
   en la caja y, centrada, se salía por arriba (etiqueta pegada al toldo) y por abajo (botón sobre el borde en
   1280×800). Menos relleno entre piezas; las pestañas no se achican (en EN quedarían bajo 40 px) */
html.tableta.paginado .vit-cuerpo{ padding-bottom:16px; }
html.tableta.paginado .vit-tit{ margin:2px 0 10px; }
html.tableta.paginado .vit-funciones{ gap:6px; }
html.tableta.paginado .vit-fn{ padding:8px 14px 9px; }
html.tableta.paginado .vitrina-vista .ctas{ margin-top:12px; }
/* · 2/4 en la tablet horizontal: la diapositiva no puede crecer (la portada se achicaría entera), así que
     "Entrar a la vitrina" queda como el botón redondo de la esquina, como en el teléfono */
html.tableta.paginado .fachadas{ --fila-min:150px; }
html.tableta.paginado .f-entrar{ position:absolute; top:22px; right:14px; width:38px; height:38px; margin:0; padding:0; justify-content:center; }
html.tableta.paginado .f-entrar > span{ display:none; }
html.tableta.paginado .f-cab{ padding-right:44px; }
html.tableta.paginado .fachada:nth-child(n+4) .f-cab{ width:46%; padding-right:0; }
html.tableta.paginado .fachada.f-ferreteria:nth-child(n+4) .f-foto{ top:18px; width:min(42%, 238px); }
/* aire visible entre "ingresos" y el recibo: el texto corta antes y el recibo es un poco más angosto */
html.tableta.paginado .fachada.f-ferreteria:nth-child(n+4) .f-cab{ width:42%; }
html.tableta.paginado .fachada.f-ferreteria .f-recibo{ padding-bottom:14px; }
html.tableta.paginado .f-recibo-fila{ padding:6px 0; font-size:13.5px; }
/* · 2/4 en la tablet vertical: el recibo de la ferretería con su título y los nombres (hay ancho de sobra) */
html.tableta.reel .f-recibo-eti{ display:block; font-size:10px; letter-spacing:.08em; padding-bottom:5px; }
/* el recibo asoma un poco más abajo: no queda pegado al nombre ("Hardware store" ocupa casi todo el ancho) */
html.tableta.reel .fachada.f-ferreteria .f-foto{ height:38%; }
html.tableta.reel .f-recibo-fila{ grid-template-columns:16px minmax(0,1fr) auto; font-size:11.5px; }
html.tableta.reel .f-recibo-fila > span{ display:block; min-width:0; }
html.tableta.paginado .f-recibo-eti{ font-size:12.5px; }
html.tableta.paginado .fachada:nth-child(n+4) .f-foto{ right:62px; }

/* =====================================================================
   10 · PORTADA EN LA TABLET PARADA (04/10/2026, injerto de la propuesta C, agrandado): las piezas de la PC,
   todas a la vista y sin cortes. Gancho "15 días", titular, bajada, los dos botones, app.faenapp.com, las
   4 cifras con sus etiquetas de PC y, abajo, la escena como en la PC: la ventana grande con el teléfono
   montado en su esquina y el ticket del plan apoyado sobre su borde derecho (ya no es una hoja que se
   abre: el chip "Desde…" no hace falta). El alto de la escena alcanza para el ticket en USD (es el más alto),
   así cambiar de moneda no mueve nada. Teléfono, PC y tablet acostada no cambian.
   ===================================================================== */
html.tableta.reel .lamina-hero{ gap:0; align-items:stretch; justify-content:center; }
html.tableta.reel .chip-vivo{ display:inline-flex; gap:8px; padding:5px 12px 5px 10px; font-size:12.5px; }
html.tableta.reel .titular{ font-size:37px; line-height:1; margin:9px 0 8px; }
html.tableta.reel .bajada{ max-width:none; font-size:13.5px; line-height:1.45; }
html.tableta.reel .lamina-hero .ctas{ flex-wrap:nowrap; gap:10px; margin-top:11px; }
html.tableta.reel .lamina-hero .ctas .anillo{ flex:1 1 auto; }
html.tableta.reel .lamina-hero .btn-xl{ padding:13px 18px; font-size:16px; }
html.tableta.reel .lamina-hero .ctas .btn-g{ display:inline-flex; flex:0 0 auto; padding-left:30px; padding-right:30px; }
html.tableta.reel .fila-precio{ display:none; }
html.tableta.reel .lamina-hero .micro.solo-pc{ display:flex !important; margin-top:8px; font-size:12px; }
html.tableta.reel .franja{ gap:14px; margin-top:9px; padding-top:9px; }
html.tableta.reel .franja.cinco{ gap:10px; }
html.tableta.reel .franja li{ flex-direction:column; align-items:flex-start; gap:4px; }
html.tableta.reel .franja b{ font-size:24px; }
html.tableta.reel .franja li > span{ font-size:11.5px; line-height:1.25; }
html.tableta.reel .franja .eti-pc{ display:block; }
html.tableta.reel .franja .eti-tel{ display:none; }
/* la escena: el ticket va en su columna (da el alto); la ventana y el teléfono se ubican encima, sin moverlo */
html.tableta.reel .escena{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 238px; grid-template-rows:auto; align-items:end; flex:none; height:auto; min-height:272px; margin-top:12px; }
html.tableta.reel .escena .ventana{ display:block; grid-area:auto; position:absolute; z-index:1; top:0; left:26px; width:min(67%, 368px); margin:0; border-radius:11px; box-shadow:0 22px 46px rgba(0,0,0,.5); }
html.tableta.reel .escena .ventana-barra{ height:22px; gap:5px; padding:0 9px; }
html.tableta.reel .escena .ventana-barra > i{ width:6px; height:6px; }
html.tableta.reel .escena .url{ padding:2px 8px; font-size:9.5px; }
html.tableta.reel .escena .url .ms{ font-size:10.5px; }
html.tableta.reel .tel-hero{ position:absolute; left:0; bottom:0; width:96px; height:auto; aspect-ratio:auto; padding:4px 4px 5px; border-radius:15px; border-bottom:1px solid rgba(255,255,255,.13); z-index:2; }
html.tableta.reel .tel-hero .tel-url{ height:13px; font-size:6.5px; gap:2px; }
html.tableta.reel .tel-hero .tel-url .ms{ font-size:7.5px; }
html.tableta.reel .tel-hero img{ flex:none; height:auto; min-height:0; border-radius:11px; }
html.tableta.reel .ticket-pos{ position:relative; grid-column:2; grid-row:1; left:auto; right:auto; bottom:auto; width:auto; margin:0; border-radius:16px;
  transform:none; opacity:1; visibility:inherit; transition:none; box-shadow:none; z-index:3; }
html.tableta.reel .ticket-pos .flota{ animation:flota 5.5s ease-in-out infinite; }
html.tableta.reel .ticket{ --muesca:calc(100% - 64px); padding:12px 13px 10px; border-radius:14px; }
html.tableta.reel .ticket-cab{ margin-bottom:8px; }
html.tableta.reel .ticket .mono-eti{ font-size:10.5px; }
html.tableta.reel .chip-ahorro{ font-size:10.5px; padding:4px 7px; }
html.tableta.reel .pestanas button{ min-height:40px; font-size:11.5px; padding:0 2px; white-space:nowrap; }
html.tableta.reel .ticket-precio{ margin:10px 0 2px; font-size:30px; }
html.tableta.reel .ticket-precio small{ font-size:12.5px; }
html.tableta.reel .ticket-sub{ font-size:11.5px; }
html.tableta.reel .ticket .nota-cobro{ font-size:10.5px; margin-top:3px; }
html.tableta.reel .ticket .perfo{ margin:8px -13px; }
html.tableta.reel .ticket-pie{ height:46px; }
html.tableta.reel .moneda button{ min-width:40px; min-height:40px; padding:0 8px; }
html.tableta.reel .ticket-incluye{ font-size:10.5px; }
@media (prefers-reduced-motion: reduce){ html.tableta.reel .ticket-pos .flota{ animation:none; } }

/* =====================================================================
   11 · "TU NEGOCIO" EN PANTALLAS BAJAS O ANGOSTAS (04/10/2026): la foto de cada cuadro (teléfono o recibo)
   nunca sube hasta el nombre. Teléfono: el nombre corto ocupa ~86 px desde arriba y las filas tienen un
   mínimo; si la grilla no entra, la diapositiva entera se achica con su zoom (ajustarLaminas) en vez de cortar
   el botón del Gimnasio. Tablet parada angosta (≤ 540 de página, tablets de 7-8"): nombre corto como en el
   teléfono. En la Redmi Pad 2, en el iPad y en la PC no cambia nada; en 390×844 las fotos bajan 3 px.
   ===================================================================== */
html.reel:not(.tableta) .fachadas{ --fila-min:142px; }
html.reel:not(.tableta) .fachada:not(:nth-child(5)) .f-foto{ height:min(46%, calc(100% - 86px)); }
@media (max-width:540px){
  html.tableta.reel .fachadas{ --fila-min:142px; }
  html.tableta.reel .fachada:not(:nth-child(5)) .f-nombre{ display:none; }
  html.tableta.reel .fachada:not(:nth-child(5)) .f-corto{ display:block; }
  html.tableta.reel .fachada:not(:nth-child(5)) .f-foto{ height:min(46%, calc(100% - 90px)); }
  html.tableta.reel .fachada.f-ferreteria:not(:nth-child(5)) .f-foto{ height:min(38%, calc(100% - 90px)); }
  html.tableta.reel .f-recibo-fila{ grid-template-columns:16px minmax(0,1fr); }
  html.tableta.reel .f-recibo-fila > span{ display:none; }
}

/* =====================================================================
   12 · TOCABLES DE LA VITRINA CON LA DIAPOSITIVA ACHICADA (revisión 04/10/2026): en teléfonos bajos (360×740,
   375×667) y tablets de 7-8" la diapositiva lleva zoom (ajustarLaminas) y la vitrina lo hereda: las pestañas
   quedaban en 33-39 px. --zl es ese zoom: pestañas, X y funciones compensan para no bajar de 40 px reales.
   ===================================================================== */
html.reel .vit-tab{ justify-content:center; min-width:max(42px, calc(40px / var(--zl, 1))); min-height:max(42px, calc(40px / var(--zl, 1))); }
html.reel .vit-cerrar{ width:max(48px, calc(44px / var(--zl, 1))); height:max(48px, calc(44px / var(--zl, 1))); }
html.reel .vit-fn{ min-height:max(46px, calc(42px / var(--zl, 1))); }
/* el teléfono de la portada (y su escena) asoma sobre los segmentos en 360×740 y 375×667: que no se quede con sus
   toques; la hoja del ticket sí los recibe cuando está abierta (no cambia ningún píxel) */
html.reel:not(.tableta) .escena{ pointer-events:none; }
html.reel:not(.tableta) .escena .ticket-pos{ pointer-events:auto; }

/* control de calidad (04/10): las 3 funciones de la vitrina con el mismo alto en teléfono y tablet parada */
html.reel .vit-funciones > li{ display:flex; }
html.reel .vit-funciones .vit-fn{ height:100%; }
/* tablet parada: el tablero "Así se cobra" llena el ancho y respira */
html.tableta.reel .vit-cap .cobros{ width:100%; padding:16px 24px; }
html.tableta.reel .vit-cap .cobros .cobro{ padding:16px 0; grid-template-columns:48px minmax(0,1fr) auto; }
html.tableta.reel .vit-cap .cobro b{ font-size:17px; }
html.tableta.reel .vit-cap .cobro span.det{ font-size:14px; }
html.tableta.reel .vit-cap .cobro strong{ font-size:24px; }