/* bigger Control · página de venta (biggercontrol.com) · 16 oct 2026, diseñador
   Jossué: «biggercontrol.com debe ser la página de venta… que se vea caro». La misma casa que la app
   (tema 3 «producto») y que thebiggerstudio.com: negro con grano y luz roja, crema de papel, Archivo 900
   con una palabra sellada por título, sombra dura abajo a la izquierda, íconos propios.
   Todo es archivo propio (CSP 'self'): fuentes, imágenes, iconos.svg y textura.svg. Sin JS de diseño:
   las entradas al bajar usan animation-timeline donde el navegador lo sabe hacer, y si no, no animan. */

@font-face{font-family:"Archivo";font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("/fonts/Archivo.ttf") format("truetype")}
@font-face{font-family:"Figtree";font-weight:300 900;font-display:swap;src:url("/fonts/Figtree.ttf") format("truetype")}

:root{
  --negro:#0A0A0A; --noche-2:#141210; --linea-noche:#2E2820;
  --crema:#F6E9D5; --crema-2:#EFE0C6; --papel:#FFFDF8; --linea:#DCC8A8;
  --tinta:#14110C; --tinta-2:#5E554A;
  --sobre-noche:#F6E9D5; --sobre-noche-2:#C9BFB2; --sobre-noche-3:#A2968A;
  --rojo:#E83B3F; --acento:#C21A1E; --bien:#1A6E42; --ambar:#FCB52C; --foco:#3469B1;
  --titulo:"Archivo",system-ui,sans-serif; --ui:"Figtree",system-ui,sans-serif;
  --radio:2px; --sombra:-6px 6px 0; --sombra-chica:-4px 4px 0;
  --ancho:1200px; --grano:url("/textura.svg");
  --entra:cubic-bezier(.2,1.4,.4,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--negro);color:var(--sobre-noche);font:500 17px/1.6 var(--ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.noche :focus-visible,.heroe :focus-visible,.top :focus-visible,.contacto :focus-visible,footer :focus-visible{outline-color:var(--sobre-noche)}
.caja{width:min(var(--ancho),100% - 48px);margin:0 auto}
.salto{position:absolute;left:-9999px;top:8px;z-index:99;padding:12px 16px;background:var(--crema);color:var(--tinta);font-weight:800}
.salto:focus{left:16px}
.icono{width:22px;height:22px;flex:none;display:inline-block;vertical-align:middle}
.icono.chico{width:16px;height:16px}
.icono.grande{width:32px;height:32px}

/* ── letra ── */
h1,h2,h3{margin:0;font-family:var(--titulo);font-weight:900;font-stretch:112%;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(40px,4.6vw,72px);line-height:.94}
.h1-sub{display:block;margin-top:.28em;font-size:.42em;line-height:1.1;letter-spacing:-.01em;color:var(--sobre-noche-2)}
.junto{white-space:nowrap}
h2{font-size:clamp(34px,4.2vw,56px);line-height:.95}
h3{font-size:22px;line-height:1.1;letter-spacing:-.01em}
h1 em,h2 em{display:inline-block;font-style:normal;padding:0 .14em;background:var(--crema);color:var(--negro);transform:rotate(-2deg);box-shadow:var(--sombra-chica) var(--rojo)}
.papel h2 em{background:var(--negro);color:var(--crema)}
.rotulo{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:800 12px/1.2 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--rojo)}
.papel .rotulo{color:var(--acento)}
.lead{font-size:20px;line-height:1.55;color:var(--sobre-noche-2);max-width:36em;margin:26px 0 0}
.lead-oscuro{font-size:20px;line-height:1.55;color:var(--tinta-2);max-width:40em;margin:20px 0 0}
.nota{font-size:15px;line-height:1.55;color:var(--sobre-noche-3);margin:18px 0 0}
.papel .nota{color:var(--tinta-2)}
.centro{text-align:center;margin-inline:auto}

/* ── botones: los de la web ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:16px 26px;border:2px solid var(--negro);border-radius:var(--radio);font:900 15px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform 150ms,box-shadow 150ms,background-color 150ms,color 150ms}
.btn.p{position:relative;overflow:hidden;background:var(--rojo);color:var(--negro);box-shadow:var(--sombra) var(--crema)}
.papel .btn.p{box-shadow:var(--sombra) var(--negro)}
.btn.p::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:brillo 5s ease-in-out 1.6s 3;pointer-events:none}
.btn.s{background:var(--papel);color:var(--tinta);border-color:var(--tinta);box-shadow:var(--sombra) var(--rojo)}
.btn.fantasma{background:transparent;color:var(--sobre-noche);border-color:var(--sobre-noche)}
.btn.fantasma:hover{background:var(--sobre-noche);color:var(--negro)}
.btn.p:hover,.btn.s:hover{transform:translate(-3px,3px)}
.btn.p:hover{box-shadow:-3px 3px 0 var(--crema)} .papel .btn.p:hover{box-shadow:-3px 3px 0 var(--negro)}
.btn.s:hover{box-shadow:-3px 3px 0 var(--rojo)}
.btn:active{transform:translate(-6px,6px);box-shadow:none}
.btn.grande{min-height:62px;padding:20px 30px;font-size:15px}
.btn.chico{min-height:44px;padding:12px 16px;font-size:12px}
.btn:disabled{opacity:.6;cursor:wait}
.acciones{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:36px}
@keyframes brillo{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}

/* ── barra de arriba ── */
.top{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linea-noche)}
.top .caja{display:flex;align-items:center;gap:32px;min-height:76px}
.top nav{display:flex;gap:4px;margin-left:auto}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:none;font:800 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--sobre-noche-2);transition:color 140ms,box-shadow 140ms}
.top nav a:hover{color:var(--sobre-noche);box-shadow:inset 0 -3px 0 var(--rojo)}
.top-der{display:flex;gap:12px;align-items:center}
.marca{display:inline-flex;text-decoration:none}

/* ── placas del logo ── */
.placas{display:inline-flex;flex-direction:column;align-items:flex-start;font-size:28px;padding-bottom:4px;white-space:nowrap}
.placas span{display:block;font-family:var(--titulo);font-weight:900;font-stretch:112%;letter-spacing:-.03em;line-height:.9;padding:.06em .16em .14em}
.placas .a{background:#fff;color:var(--negro);transform:rotate(-3deg);box-shadow:.07em .07em 0 var(--rojo);position:relative;z-index:1}
.placas .b{background:var(--rojo);color:var(--negro);transform:rotate(-3deg) translate(.5em,.1em);font-size:.5em;letter-spacing:.02em;box-shadow:.1em .1em 0 var(--negro)}

/* ═════ HÉROE: el producto a la vista ═════ */
.heroe{position:relative;overflow:hidden;padding:72px 0 0;background-image:var(--grano),radial-gradient(55% 60% at 85% 20%,rgba(232,59,63,.34),transparent 65%),radial-gradient(40% 50% at 0% 100%,rgba(252,181,44,.07),transparent 70%);background-color:var(--negro)}
.heroe > .caja:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.heroe-texto > *{animation:sube .8s var(--entra) backwards}
.heroe-texto > :nth-child(2){animation-delay:80ms}.heroe-texto > :nth-child(3){animation-delay:160ms}.heroe-texto > :nth-child(4){animation-delay:240ms}.heroe-texto > :nth-child(5){animation-delay:320ms}
.contacto-linea{margin:22px 0 0;font-size:15px;color:var(--sobre-noche-3)}
.contacto-linea a{color:var(--sobre-noche);font-weight:700;text-underline-offset:3px}
/* la vitrina: ventana del navegador inclinada, el teléfono delante y una factura que «sale» */
.vitrina{position:relative;padding:20px 0 60px;perspective:1800px;animation:aparece 1.1s var(--entra) .2s backwards}
.ventana{position:relative;background:var(--noche-2);border:2px solid var(--linea-noche);border-radius:6px;overflow:hidden;box-shadow:-14px 14px 0 var(--rojo),0 40px 80px rgba(0,0,0,.5)}
.vitrina .ventana{transform:rotateY(-12deg) rotateX(5deg) translateX(30px);transform-origin:left center;width:118%}
.ventana-barra{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;background:#1B1814;border-bottom:1px solid var(--linea-noche)}
.ventana-barra i{width:10px;height:10px;border-radius:2px;background:var(--linea-noche)}
.ventana-barra i:first-child{background:var(--rojo)}
.ventana-barra span{margin-left:12px;padding:4px 12px;background:var(--negro);border-radius:2px;font:600 12px/1 var(--ui);letter-spacing:.02em;color:var(--sobre-noche-3)}
.telefono{position:absolute;right:-10%;bottom:-40px;width:22%;padding:8px;background:#1B1814;border:2px solid var(--linea-noche);border-radius:30px;box-shadow:-10px 10px 0 var(--crema),0 30px 60px rgba(0,0,0,.55);animation:flota 7s ease-in-out 1.4s infinite}
.telefono img{border-radius:22px}
.chip-factura{position:absolute;left:-6%;bottom:-6px;display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--papel);color:var(--tinta);border:2px solid var(--negro);border-radius:var(--radio);box-shadow:var(--sombra) var(--bien);animation:sube .7s var(--entra) 1.1s backwards}
.chip-factura .icono{width:30px;height:30px;padding:5px;background:var(--bien);color:var(--papel);border-radius:var(--radio)}
.chip-factura b{display:block;font:900 15px/1.2 var(--titulo);font-stretch:105%}
.chip-factura span{font-size:12px;color:var(--tinta-2)}
/* la franja de confianza bajo el héroe */
.confianza{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;margin-top:64px;padding:28px 0 34px;border-top:1px solid var(--linea-noche)}
.confianza .nota{margin:0;max-width:44em}
.confianza .nota strong{color:var(--sobre-noche)}
.confianza ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.confianza li{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--linea-noche);border-radius:var(--radio);font:800 12px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-noche-2)}
.confianza li .icono{color:var(--rojo)}
@keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes aparece{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── cinta crema que corre (como la de la web) ── */
.cinta{overflow:hidden;background:var(--crema);color:var(--tinta);border-block:2px solid var(--negro);padding:20px 0}
.cinta-riel{display:flex;width:max-content;animation:cinta 48s linear infinite}
.cinta-riel span{display:inline-flex;align-items:center;gap:36px;padding-right:36px;font:900 22px/1 var(--titulo);font-stretch:118%;letter-spacing:-.01em;white-space:nowrap}
.cinta-riel span::after{content:"";width:12px;height:12px;background:var(--rojo)}
.cinta-riel span:nth-child(3n+2){color:transparent;-webkit-text-stroke:1.5px var(--tinta)}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ═════ SECCIONES ═════ */
section.papel{background:var(--crema);color:var(--tinta);padding:120px 0}
section.papel.suave{background:var(--crema-2)}
.cabeza{margin-bottom:56px;max-width:52em}
.deslice{display:none;margin:0 0 10px;font:800 12px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
/* los correos sueltos tienen área de toque de 44 px sin mover el renglón */
a[href^="mailto:"]{display:inline-block;padding-block:12px;margin-block:-12px}
.marca{min-height:44px;align-items:center}
.cabeza.centro{text-align:center}
.cabeza.centro .rotulo{justify-content:center}

/* el problema: cuatro columnas editoriales, numeradas, con filete arriba */
.problemas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;margin:0;padding:0;list-style:none}
.problema{position:relative;padding-top:24px;border-top:2px solid var(--tinta)}
.problema .num{display:block;margin-bottom:20px;font:800 12px/1 var(--ui);letter-spacing:.16em;color:var(--acento)}
.problema .num::after{content:" —"}
.problema .icono{color:var(--tinta);margin-bottom:16px}
.problema h3{margin-bottom:12px}
.problema p{margin:0;color:var(--tinta-2);font-size:17px}
.problema:hover .num{color:var(--rojo)}

/* qué incluye: la tarjeta grande con la hoja real y una cuadrícula de seis */
.bento{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:28px;align-items:start}
.tarjeta{position:relative;margin:0;padding:28px;background:var(--papel);color:var(--tinta);border:2px solid var(--tinta);border-radius:var(--radio);box-shadow:var(--sombra) var(--tinta);transition:transform 180ms var(--entra),box-shadow 180ms var(--entra)}
.tarjeta:hover{transform:translate(-3px,3px);box-shadow:-3px 3px 0 var(--tinta)}
.tarjeta h3{margin:14px 0 10px}
.tarjeta p{margin:0;color:var(--tinta-2);font-size:17px}
.destacada{display:grid;gap:28px;overflow:hidden;padding:34px 34px 0;background-image:var(--grano),radial-gradient(70% 60% at 100% 0%,rgba(232,59,63,.3),transparent 62%);background-color:var(--negro);color:var(--sobre-noche);border-color:var(--negro);box-shadow:var(--sombra) var(--rojo)}
.destacada:hover{box-shadow:-3px 3px 0 var(--rojo)}
.destacada p{color:var(--sobre-noche-2);margin-bottom:22px}
.destacada .hoja{width:86%;margin:0 auto -18%;border:2px solid var(--negro);box-shadow:-10px 10px 0 var(--crema);transform:rotate(-3deg);transition:transform .6s var(--entra)}
.destacada:hover .hoja{transform:rotate(-1deg) translateY(-8px)}
.incluye{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.placa-icono{display:inline-grid;place-items:center;width:48px;height:48px;background:var(--negro);color:var(--sobre-noche);border-radius:var(--radio);box-shadow:var(--sombra-chica) var(--rojo);float:right;margin:-4px -4px 0 12px}
.sello{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--radio);font:800 12px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase}
.sello.ya{border:1.5px solid var(--bien);color:var(--bien)}
.destacada .sello.ya{border-color:#5FD08F;color:#5FD08F}
.sello.ya::before{content:"";width:6px;height:6px;background:currentColor}
.sello.pronto{border:1.5px solid var(--tinta-2);color:var(--tinta-2)}
.proximos{margin-top:56px;padding-top:28px;border-top:2px solid var(--tinta)}
.proximos .sub{font-size:22px;margin-bottom:16px}
.proximos ul{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.proximos li{display:grid;align-content:start;justify-items:start;gap:10px;padding:14px 18px;min-width:170px;background:var(--papel);border:1.5px dashed var(--tinta-2);border-radius:var(--radio);font:800 17px/1 var(--ui)}

/* cómo empezar: negro, pasos grandes a la izquierda y la pantalla de facturar a la derecha */
section.noche{padding:120px 0;background-image:var(--grano),radial-gradient(50% 60% at 100% 50%,rgba(232,59,63,.22),transparent 65%);background-color:var(--negro)}
.como{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center}
.pasos{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:p}
.pasos li{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--linea-noche)}
.pasos li:last-child{border-bottom:1px solid var(--linea-noche)}
.pasos .n{font:900 56px/.9 var(--titulo);font-stretch:112%;color:transparent;-webkit-text-stroke:1.5px var(--sobre-noche-3);transition:color 220ms,-webkit-text-stroke-color 220ms}
.pasos li:hover .n{color:var(--rojo);-webkit-text-stroke-color:var(--rojo)}
.pasos h3{margin-bottom:8px}
.pasos p{margin:0;color:var(--sobre-noche-2)}
.ventana.inclinada{transform:perspective(1800px) rotateY(-8deg) rotateX(3deg);transition:transform .8s var(--entra)}
.ventana.inclinada:hover{transform:perspective(1800px) rotateY(-3deg) rotateX(1deg)}

/* comparación */
.tabla-w{overflow-x:auto;border:2px solid var(--tinta);border-radius:var(--radio);background:var(--papel);box-shadow:var(--sombra) var(--tinta)}
table{width:100%;border-collapse:collapse;font-size:17px}
th,td{padding:18px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea)}
thead th{background:var(--crema-2);font:800 12px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);border-bottom:2px solid var(--tinta)}
thead th.nuestro{background:var(--negro);color:var(--sobre-noche)}
tbody th{font-weight:800;color:var(--tinta);width:42%}
td{color:var(--tinta-2)}
td.si{font-weight:800;color:var(--tinta);background:rgba(232,59,63,.05)}
td.si .icono{color:var(--bien);margin-right:8px}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* planes: tres; el del centro, negro */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch;margin:0;padding:0;list-style:none}
.plan{display:flex;flex-direction:column;padding:34px 30px 30px;background:var(--papel);color:var(--tinta);border:2px solid var(--tinta);border-radius:var(--radio);box-shadow:var(--sombra) var(--tinta);transition:transform 180ms var(--entra),box-shadow 180ms var(--entra)}
.plan:hover{transform:translate(-3px,3px);box-shadow:-3px 3px 0 var(--tinta)}
.plan h3{font-size:34px}
.precio-nota{margin:22px 0 0;font:900 34px/1 var(--titulo);font-stretch:105%;letter-spacing:-.02em}
.periodo{margin:6px 0 0;color:var(--tinta-2);font-size:15px}
.plan ul{display:grid;gap:10px;margin:24px 0 30px;padding:24px 0 0;list-style:none;border-top:1px solid var(--linea);flex:1}
.plan li{display:flex;gap:10px;align-items:baseline;font-weight:600}
.plan li .icono{color:var(--bien);flex:none;transform:translateY(2px)}
.plan .btn{width:100%}
.plan.clave{background-image:var(--grano),radial-gradient(80% 60% at 100% 0%,rgba(232,59,63,.32),transparent 62%);background-color:var(--negro);color:var(--sobre-noche);border-color:var(--negro);box-shadow:-10px 10px 0 var(--rojo);transform:translateY(-14px)}
.plan.clave:hover{transform:translate(-3px,-11px);box-shadow:-7px 7px 0 var(--rojo)}
.plan.clave .periodo{color:var(--sobre-noche-3)}
.plan.clave ul{border-top-color:var(--linea-noche)}
.plan.clave li .icono{color:#5FD08F}
.plan.clave .btn.p{box-shadow:var(--sombra) var(--crema)}

/* preguntas: dos columnas, el título fijo a la izquierda */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.faq .cabeza{position:sticky;top:110px;margin:0}
.faq .lead-oscuro a{color:var(--acento);font-weight:800}
.preguntas details{border-top:2px solid var(--tinta)}
.preguntas details:last-child{border-bottom:2px solid var(--tinta)}
.preguntas summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 0;cursor:pointer;font:900 22px/1.2 var(--titulo);font-stretch:105%;letter-spacing:-.01em}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"";flex:none;width:32px;height:32px;background:linear-gradient(var(--tinta),var(--tinta)) center/14px 2.5px no-repeat,linear-gradient(var(--tinta),var(--tinta)) center/2.5px 14px no-repeat,var(--papel);border:2px solid var(--tinta);border-radius:var(--radio);transition:transform 260ms var(--entra),background-color 160ms}
.preguntas details[open] summary::after{transform:rotate(45deg);background-color:var(--crema-2)}
.preguntas summary:hover{color:var(--acento)}
.preguntas details p{margin:0 0 26px;max-width:40em;color:var(--tinta-2);animation:sube .45s var(--entra)}

/* cierre */
.contacto{position:relative;overflow:hidden;padding:140px 0;text-align:center;background-image:var(--grano),radial-gradient(60% 80% at 50% 100%,rgba(232,59,63,.38),transparent 65%);background-color:var(--negro)}
.contacto .rotulo{justify-content:center}
.contacto h2{font-size:clamp(40px,5.4vw,72px);max-width:14em;margin:0 auto}
.contacto p{max-width:34em;margin:26px auto 0;font-size:20px;color:var(--sobre-noche-2)}
.contacto .acciones{justify-content:center;margin-top:42px}

footer{padding:44px 0 56px;background:var(--negro);border-top:1px solid var(--linea-noche);color:var(--sobre-noche-3);font-size:15px}
footer .caja{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
footer p{margin:0}
.pie-acciones{display:flex;gap:22px;align-items:center}
.pie-acciones a{color:var(--sobre-noche);font-weight:700;text-underline-offset:3px}
.enlace-pie{min-height:44px;padding:0 18px;background:none;border:2px solid var(--sobre-noche);border-radius:var(--radio);color:var(--sobre-noche);font:900 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.enlace-pie:hover{background:var(--sobre-noche);color:var(--negro)}

/* ── entrar ── */
dialog.entrar{width:min(480px,94vw);padding:38px 36px 30px;background:var(--papel);color:var(--tinta);border:2px solid var(--negro);border-radius:var(--radio);box-shadow:-10px 10px 0 var(--rojo)}
dialog.entrar::backdrop{background:rgba(10,10,10,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog.entrar[open]{animation:sube .4s var(--entra)}
dialog.entrar .placas{font-size:24px;margin-bottom:18px}
dialog.entrar .placas .a{background:var(--negro);color:#fff}
dialog.entrar h2{font-size:34px}
dialog.entrar > p{margin:10px 0 22px;color:var(--tinta-2);font-size:17px}
.cerrar{position:absolute;top:14px;right:14px;width:44px;height:44px;background:none;border:2px solid transparent;border-radius:var(--radio);font:400 28px/1 var(--ui);color:var(--tinta);cursor:pointer}
.cerrar:hover{border-color:var(--tinta)}
.campo-f{display:grid;gap:6px;margin-bottom:16px}
.campo-f label{font:800 15px/1.3 var(--ui)}
.campo,.campo-dir{min-height:52px;background:var(--papel);border:2px solid #857A6B;border-radius:var(--radio);font:500 17px/1.3 var(--ui);color:var(--tinta)}
.campo{width:100%;padding:12px 14px}
.campo-dir{display:flex;align-items:center;overflow:hidden}
.campo-dir .pref{padding:0 0 0 14px;color:var(--tinta-2);font-size:15px;white-space:nowrap}
.campo-dir input{flex:1;min-width:0;min-height:48px;padding:12px 14px 12px 2px;background:none;border:0;font:inherit;color:inherit}
.campo:focus-visible,.campo-dir:focus-within{outline:0;border-color:var(--tinta);box-shadow:var(--sombra-chica) var(--foco)}
.campo-dir input:focus-visible{outline:0}
.dir-error{min-height:1.4em;margin:0 0 8px;color:var(--acento);font:700 15px/1.4 var(--ui)}
dialog.entrar .acciones{margin-top:4px}
dialog.entrar .btn.p{width:100%;box-shadow:var(--sombra) var(--negro)}
.entrar-prop{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--linea);font-size:15px;color:var(--tinta-2)}
.entrar-prop a{color:var(--acento);font-weight:800}

/* ── entradas al bajar: solo donde el navegador sabe atarlas al desplazamiento ── */
@supports (animation-timeline:view()){
  .cabeza,.problema,.bento > *,.incluye > li,.pasos li,.preguntas details{animation:asoma linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  /* solo se desliza: el contenido nunca está oculto (capturas de página completa, impresión, lectores) */
  @keyframes asoma{from{transform:translateY(28px)}to{transform:none}}
}

/* ═════ tableta y teléfono ═════ */
@media (max-width:1080px){
  .top nav{display:none}
  .top-der{margin-left:auto}
  .heroe > .caja:first-child{grid-template-columns:1fr;gap:40px}
  .vitrina{padding-bottom:110px}
  .vitrina .ventana{width:100%;transform:none}
  .telefono{width:34%;left:auto;right:4%}
  .chip-factura{right:auto;left:0;bottom:24px}
  .problemas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento,.como,.faq{grid-template-columns:1fr}
  .faq .cabeza{position:static}
  .planes{grid-template-columns:1fr}
  .plan.clave{transform:none}
  .confianza{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:17px}
  .caja{width:min(var(--ancho),100% - 32px)}
  .top .caja{min-height:64px;gap:12px}
  .placas{font-size:22px}
  .solo-ancho{display:inline-flex}
  .top-der{gap:8px}
  .top-der .btn.chico{padding:12px 10px}
  .deslice{display:block}
  .incluye{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .incluye .tarjeta{padding:16px 14px}
  .incluye .tarjeta p{display:none}
  .incluye .tarjeta h3{font-size:17px;margin:12px 0 0}
  .placa-icono{float:none;margin:0}
  tbody th{position:sticky;left:0;z-index:1;background:var(--papel);box-shadow:2px 0 0 var(--linea)}
  .incluye .sello{display:none}
  .placa-icono{width:40px;height:40px}
  .heroe{padding-top:56px}
  .lead{font-size:17px}
  .acciones .btn{width:100%}
  .vitrina{padding:0 0 90px}
  .telefono{width:42%;right:0;border-radius:22px;padding:6px}
  .telefono img{border-radius:16px}
  .chip-factura{padding:10px 12px;max-width:62%}
  .chip-factura b{font-size:12px}
  .cinta-riel span{font-size:20px;gap:24px;padding-right:24px}
  section.papel,section.noche{padding:80px 0}
  .cabeza{margin-bottom:36px}
  .problemas,.incluye{grid-template-columns:1fr;gap:26px}
  .destacada{padding:26px 22px 0}
  th,td{padding:14px 14px}
  table{font-size:15px;min-width:560px}
  .contacto{padding:96px 0}
  footer .caja{grid-template-columns:1fr}
  .pie-acciones{flex-wrap:wrap}
  dialog.entrar{padding:30px 20px 22px}
  .campo-dir .pref{font-size:12px;padding-left:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}