/* Landings de pauta de SiclonBricks · base compartida. Mobile-first. Estructura inspirada en páginas de producto de colección.
   Cada landing carga este archivo y después su theme.css (paleta y ajustes propios). Guía: docs/landing-nueva-en-una-hora.md */
/* Tipografía: Figtree (SIL Open Font License 1.1, ver fonts/OFL-figtree.txt), gemela libre de Cera Pro.
   Sistema (igual que la referencia): Regular 400 = títulos de sección y textos · Medium 500 = botones, etiquetas y navegación
   · Bold 700 = títulos de contenido, precios, números y datos · Itálica 400 = énfasis puntual dentro de un texto.
   Sin mayúsculas forzadas ni letras apretadas. */
@font-face{font-family:Figtree;src:url('fonts/figtree-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Figtree;src:url('fonts/figtree-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Figtree;src:url('fonts/figtree-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Figtree;src:url('fonts/figtree-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#0b0d10;--ink-2:#161a20;--line-dark:#2a3039;--muted-dark:#aeb7c4;
  --white:#fff;--soft:#f3f5f8;--line:#e1e6ed;--muted:#586273;--navy:#102747;
  --blue:#1268d8;--blue-soft:#d9e8fb;--cyan:#44d7ff;--cyan-hi:#8be8ff;
  --radius:16px;--gutter:20px;--header:60px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:Figtree,system-ui,-apple-system,Arial,sans-serif;font-size:16px;line-height:1.56;-webkit-font-smoothing:antialiased}
body:has(dialog[open]){overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button,a,summary,select,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
h1,h2,h3,p,figure,blockquote,ol,ul,dl{margin:0}
h1,h2,h3{letter-spacing:normal}
/* Nivel 1 · título de sección: grande y liviano (Regular) */
h1,h2{font-size:32px;font-weight:400;line-height:1.34}
/* Nivel 3 · subtítulo de tarjeta o paso: Bold */
h3{font-size:19px;font-weight:700;line-height:1.5}
/* Énfasis puntual dentro de un texto: itálica */
em{font-style:italic;font-weight:400}
strong,b{font-weight:700}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.hero :focus-visible,.scenes :focus-visible,.set :focus-visible,.story :focus-visible,.steps :focus-visible,.closing :focus-visible,.subnav :focus-visible,.site-footer :focus-visible,.mobile-buy :focus-visible,.blue-block :focus-visible,.reason--collection :focus-visible{outline-color:var(--cyan)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:fixed;top:-80px;left:12px;z-index:100;background:#fff;color:var(--ink);padding:12px 16px;border-radius:8px}
.skip:focus{top:12px}

/* ---------- textos comunes ---------- */
.eyebrow{font-size:14px;font-weight:500;line-height:1.5;color:var(--cyan);margin-bottom:10px}
.eyebrow--dark{color:var(--blue)}
.note{font-size:12px;line-height:1.75;letter-spacing:.01em;color:var(--muted-dark);margin:16px 0 22px}
.center-head{text-align:center;max-width:680px;margin:0 auto 32px}
.center-head p{margin-top:12px;font-size:18px;line-height:1.55;color:#eef4fd}
.center-head--dark p{color:var(--muted)}
.center-cta{text-align:center;margin-top:32px}
.link-quiet{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:16px;font-weight:500;color:#fff;text-decoration:underline;text-underline-offset:4px;min-height:44px}
.link-quiet--dark{color:var(--ink)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:10px 30px;border-radius:999px;background:var(--cyan);color:var(--ink);font-weight:500;text-align:center;transition:background .2s,transform .15s;box-shadow:0 6px 18px rgb(68 215 255 / 22%)}
.btn:hover{background:var(--cyan-hi)}
.btn:active{transform:scale(.98)}
.btn-label{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15}
.btn-label strong{font-size:18px;font-weight:500}
.btn-label small{font-size:13px;font-weight:400;opacity:.85}
.btn--block{display:flex;width:100%}
.btn--sm{min-height:44px;padding:6px 18px;box-shadow:none}
.btn--sm .btn-label strong{font-size:16px}
.btn--sm .btn-label small{font-size:11px}
.btn--light{background:#fff;color:var(--ink);box-shadow:0 6px 18px rgb(0 0 0 / 18%)}
.btn--light:hover{background:#e9f3ff}
.btn--dark{background:var(--ink);color:#fff;box-shadow:none}
.btn--dark:hover{background:#262c35}
.round-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 4px 16px rgb(0 0 0 / 28%)}
.round-btn svg,.reason-go svg,.specs-icons svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.round-btn svg{width:22px;height:22px}
.round-btn:hover{background:var(--cyan)}

/* ---------- barra superior, header y subnav ---------- */
.announcement{background:var(--ink);color:#fff;text-align:center;font-size:13px;padding:8px 12px;border-bottom:1px solid var(--line-dark)}
.announcement span{margin:0 8px;color:var(--cyan)}
.header{position:sticky;top:0;z-index:40;height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gutter);background:#fff;border-bottom:1px solid var(--line)}
.brand{font-size:22px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.brand span{color:var(--blue)}
.header-cta .btn-label small{display:none}
.subnav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--gutter);background:var(--ink);color:#fff}
.subnav-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;flex-shrink:0;min-height:40px;padding:0 18px;border:1.5px solid #fff;border-radius:999px;color:#fff;font-size:14px;font-weight:700;transition:background .2s,color .2s}
.pill:hover{background:#fff;color:var(--ink)}
.subnav-price{flex-shrink:0;font-size:14px;font-weight:500;color:var(--cyan)}

/* ---------- marcos de foto/video ---------- */
.frame{position:relative;aspect-ratio:var(--ar,1);overflow:hidden;background:#e9edf2}
.frame.dark{background:var(--ink-2)}
.frame--white{background:#fff}
.frame>video,.frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame--white>img{object-fit:contain}
.frame[hidden]{display:none}
.video-control{position:absolute;right:12px;bottom:12px;z-index:3;min-height:44px;padding:0 14px;border-radius:999px;background:rgb(255 255 255 / 92%);color:var(--ink);font-size:14px;font-weight:500;box-shadow:0 2px 10px rgb(0 0 0 / 25%)}
.ph{position:absolute;inset:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;text-align:center;border:2px dashed #97a3b4;border-radius:12px;color:var(--navy);font-size:12px;line-height:1.4}
.ph b{font-size:11px;letter-spacing:.12em}
.ph code{font:700 12px/1.3 ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
.ph p{margin-top:3px;max-width:260px;font-size:12px;color:inherit}
.frame.dark .ph{color:#fff;border-color:#ffffff66}
.soon{margin-top:8px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;padding:4px 9px;border-radius:99px}
.pend{display:inline-block;background:#ffd84d;color:#3b2d00;font-size:11px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:4px;line-height:1.4;vertical-align:middle}
.pend-line{font-size:13px;margin-top:10px}
html:not(.show-pending) [data-pending]{display:none!important}

/* ---------- 01 · hero ---------- */
.hero{background:var(--ink);color:#fff}
.hero-media .frame{width:100%}
.intro{padding-top:30px;padding-bottom:40px}
.intro h1{color:#fff}
.lead{margin-top:16px;font-size:18px;line-height:1.55;color:var(--muted-dark)}
.lead em,.story-head em,.reason em,.scene-text em{color:#fff}
.reason--gift em{color:var(--ink)}
.offer{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:22px 0 16px}
.price{font-size:28px;font-weight:700;line-height:1.3}
.offer-meta{font-size:16px;color:var(--muted-dark)}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips li{padding:7px 12px;border:1px solid var(--line-dark);border-radius:999px;font-size:14px;color:var(--muted-dark)}
.chips b{color:#fff}
.tabs{display:flex;gap:26px;margin-top:26px;border-bottom:1px solid var(--line-dark)}
.tab{display:inline-flex;align-items:center;min-height:48px;margin-bottom:-1px;border-bottom:3px solid transparent;font-size:15px;font-weight:700;color:#fff}
.tab.is-active{border-bottom-color:var(--cyan)}

/* ---------- 02 · escenas ---------- */
.scenes{background:var(--ink);color:#fff;padding:8px 0 56px}
.scenes-media{position:relative;margin:0 calc(-1 * var(--gutter))}
.scene-prev,.scene-next{position:absolute;top:50%;transform:translateY(-50%);z-index:4}
.scene-prev{left:12px}
.scene-next{right:12px}
.scenes-media .video-control{bottom:14px;right:50%;transform:translateX(50%)}
.hero-media .video-control{top:12px;bottom:auto}
.scenes-copy{padding-top:26px}
.rail{position:relative;display:flex;justify-content:space-between;margin:6px 4px 22px}
.rail:before{content:"";position:absolute;left:16px;right:16px;top:50%;height:2px;background:var(--line-dark);transform:translateY(-50%)}
.rail-dot{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);border:2px solid #56606e;color:var(--muted-dark);font-size:14px;font-weight:500;transition:background .2s,border-color .2s,transform .2s}
.rail-dot.is-active{background:var(--cyan);border-color:var(--cyan);color:var(--ink);transform:scale(1.1)}
.scene-count{font-size:16px;font-weight:400;color:var(--muted-dark);margin-bottom:6px}
/* Nivel 2 · título de contenido: Bold */
.scene-text h2{font-size:24px;font-weight:700;line-height:1.5;color:#fff}
.scene-text p:not(.scene-count){margin-top:8px;font-size:16px;line-height:1.56;color:var(--muted-dark)}
.scene-text [hidden]{display:none}

/* ---------- 03 · ficha del set ---------- */
.set{background:var(--ink);padding:0 var(--gutter) 64px}
.set-card{max-width:520px;margin:0 auto;background:#fff;color:var(--ink);border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgb(0 0 0 / 35%)}
.set-photo{background:#fff}
.set-photo>img{object-fit:contain}
.set-info{padding:22px 22px 24px}
.set-kicker{font-size:14px;font-weight:500;color:var(--muted)}
.set-info h2{font-size:27px;font-weight:700;line-height:1.35;margin-top:4px}
.set-price{margin-top:6px;font-size:24px;font-weight:700;line-height:1.35}
.set-ship{font-size:16px;color:var(--muted)}
.specs-icons{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}
.specs-icons li{display:grid;justify-items:center;gap:2px;padding:14px 6px;background:var(--soft);border-radius:12px;text-align:center}
.specs-icons svg{width:28px;height:28px;stroke-width:1.6;margin-bottom:4px;color:var(--blue)}
.specs-icons b{font-size:19px;line-height:1.35}
.specs-icons span{font-size:12px;line-height:1.4;letter-spacing:.01em;color:var(--muted)}

/* ---------- 04 · escenario + bloque azul ---------- */
.stage-top{background:var(--ink);color:#fff;text-align:center;padding:48px var(--gutter) 0}
.wordmark{display:flex;flex-direction:column;align-items:center;line-height:1;font-size:13px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--cyan)}
.wordmark span{font-size:min(clamp(84px,26vw,180px),calc((100vw - 2 * var(--gutter)) / var(--wm-fit,1)));letter-spacing:-.06em;color:#fff;margin-bottom:6px}
/* --wm-fit = ancho de la palabra gigante en veces el tamaño de letra (medilo con herramientas/pruebas/medir-wordmark.js, con un 3% de margen),
   declarado en el style de <html>. Las palabras largas se achican para entrar completas; sin --wm-fit nada cambia. */
.stage-car{position:relative;z-index:2;max-width:620px;margin:22px auto -96px}
.stage-car img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:22px;box-shadow:0 30px 60px rgb(0 0 0 / 35%)}
.blue-block{background:var(--blue);color:#fff;padding:136px 0 64px}
.blue-block h2{color:#fff}
.feature-list{display:grid;gap:30px}
.feature .frame{border-radius:14px}
.feature h3{margin-top:16px;color:#fff}
.feature p{margin-top:4px;font-size:16px;line-height:1.56;color:#eef4fd}
.big-quote{max-width:760px;margin:60px auto 0;text-align:center}
.big-quote p{font-size:24px;font-weight:700;line-height:1.54}
.big-quote footer{margin-top:10px;font-size:16px;font-weight:400;color:#fff}

/* ---------- 05 · historia + carrusel ---------- */
.story{background:var(--ink);color:#fff;padding:60px 0 64px}
.story-head h2{color:#fff;max-width:760px}
.story-head>p:not(.eyebrow){margin-top:14px;max-width:680px;font-size:18px;line-height:1.55;color:var(--muted-dark)}
.story-head>p+p{margin-top:12px}
.timeline{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;max-width:560px}
.timeline li{display:grid;gap:2px;padding-top:12px;border-top:2px solid var(--line-dark)}
.timeline b{font-size:19px;line-height:1.35;color:#fff}
.timeline span{font-size:14px;line-height:1.4;color:var(--muted-dark)}
.timeline .is-now{border-top-color:var(--cyan)}
.timeline .is-now b{color:var(--cyan)}
.rail-title{margin:40px 0 14px;font-size:24px;font-weight:700;line-height:1.5;color:#fff}
.carousel-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 78%;scroll-snap-align:start}
.slide .frame{border-radius:14px}
.slide figcaption{margin-top:10px;font-size:14px;font-weight:500;color:var(--muted-dark)}
.carousel-ui{display:flex;align-items:center;gap:16px;margin-top:20px}
.progress{flex:1;height:3px;background:var(--line-dark);border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;width:var(--p,25%);background:var(--cyan);border-radius:3px;transition:width .2s}
.carousel-arrows{display:flex;gap:8px}

/* ---------- 06 · qué trae la caja ---------- */
.box{padding:60px 0}
.box-grid{display:grid;gap:32px}
.stat{display:flex;align-items:flex-end;gap:14px;margin:22px 0 10px}
.stat strong{font-size:96px;font-weight:700;line-height:.85;color:var(--blue)}
.stat span{max-width:150px;font-size:16px;line-height:1.5;color:var(--muted)}
.spec-list{margin:16px 0 26px}
.spec-list div{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5}
.spec-list dt{color:var(--muted)}
.spec-list dd{margin:0;font-weight:700}
.spec-list dd small{display:block;margin-top:4px;font-size:12px;font-weight:400;line-height:1.75;letter-spacing:.01em;color:var(--muted)}
.box-photo .frame{border-radius:var(--radius)}

/* ---------- 07 · regalar / colección ---------- */
.reasons{background:var(--soft);padding:60px 0}
.reason-grid{display:grid;gap:16px}
.reason{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;padding:28px 22px 22px;border-radius:20px;overflow:hidden}
.reason--gift{background:#fff;border:1px solid var(--line)}
.reason--collection{background:var(--ink);color:#fff}
.reason-bg{position:absolute;inset:0;aspect-ratio:auto;z-index:0}
.reason-bg img{opacity:.5}
.reason-body{position:relative;z-index:1}
.reason-kicker{font-size:14px;font-weight:500;color:var(--blue)}
.reason--collection .reason-kicker{color:var(--cyan)}
.reason h3{margin:8px 0;font-size:24px;font-weight:700;line-height:1.4}
.reason p{font-size:16px;line-height:1.56;color:var(--muted)}
.reason--collection p{color:#d9dfe7}
.reason-go{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:22px;padding:8px 8px 8px 20px;min-height:56px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:500;text-align:left}
.reason-go-label{display:flex;flex-direction:column;line-height:1.2}.reason-go-label strong{font-size:18px;font-weight:500}.reason-go-label small{font-size:13px;font-weight:400;opacity:.85}
.reason-go i{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--cyan);color:var(--ink)}
.reason-go svg{width:20px;height:20px}
.reason-go--light{background:#fff;color:var(--ink)}

/* ---------- 08 · clientes ---------- */
.community{padding:60px 0}
.community-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.community-grid .frame{border-radius:12px}
.community .ph p,.community .ph code,.community .ph span{display:none}
.community .ph{inset:6px;padding:6px}
.community .soon{font-size:9px;padding:3px 7px;letter-spacing:.06em}

/* ---------- 09 · pasos ---------- */
.steps{background:var(--ink);color:#fff;padding:60px 0}
.steps h2{color:#fff}
.step-list{list-style:none;padding:0;display:grid;gap:14px}
.step-list li{padding:22px;border:1px solid var(--line-dark);border-radius:var(--radius);background:var(--ink-2)}
.step-n{display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;border-radius:50%;background:var(--cyan);color:var(--ink);font-weight:700}
.step-list h3{color:#fff}
.step-list p{margin-top:6px;font-size:16px;line-height:1.56;color:var(--muted-dark)}

/* ---------- 10 · preguntas ---------- */
.faq{padding:60px 0}
.faq-grid{display:grid;gap:26px}
.questions details{border-bottom:1px solid var(--line)}
.questions details:first-child{border-top:1px solid var(--line)}
summary{position:relative;display:block;padding:20px 40px 20px 0;list-style:none;cursor:pointer;font-size:16px;font-weight:700;line-height:1.5}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--soft);font-size:18px;font-weight:400}
details[open] summary:after{content:"−";background:var(--cyan)}
details p{padding:0 40px 20px 0;font-size:16px;line-height:1.56;color:var(--muted)}
.questions .pend-line{margin-top:-10px}
.faq-cta{display:flex;width:100%;margin-top:26px}

/* ---------- 11 · cierre ---------- */
.closing{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;text-align:center;padding:84px 0}
.closing-bg{position:absolute;inset:0;aspect-ratio:auto;z-index:-1}
.closing-bg video{opacity:.35}
.closing .video-control{top:12px;bottom:auto}
.closing h2{max-width:720px;margin:0 auto;color:#fff}
.closing-price{margin:14px 0 24px;font-size:18px;color:var(--muted-dark)}
.closing .btn{width:100%;max-width:380px}

/* ---------- footer y barra fija ---------- */
.site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:34px var(--gutter) 112px;background:var(--ink);color:var(--muted-dark);font-size:14px;border-top:1px solid var(--line-dark)}
.site-footer .brand{color:#fff;font-size:20px}
.site-footer p{width:100%}
.site-footer a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.mobile-buy{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgb(11 13 16 / 96%);color:#fff;border-top:1px solid var(--line-dark);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mobile-buy-info{display:grid;gap:1px;min-width:0}
.mobile-buy-info strong{font-size:16px;font-weight:700}
.mobile-buy-info span{font-size:12px;color:var(--muted-dark);white-space:nowrap}
.mobile-buy .btn{flex-shrink:0;padding:6px 22px}
body:has(dialog[open]) .mobile-buy{display:none}

/* ---------- formulario de pedido ---------- */
.order-dialog{width:calc(100% - 24px);max-width:480px;max-height:92dvh;overflow:auto;padding:30px 22px 24px;border:0;border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 24px 80px rgb(0 0 0 / 40%)}
.order-dialog::backdrop{background:rgb(6 8 12 / 70%);backdrop-filter:blur(4px)}
.order-dialog h2{font-size:24px;font-weight:700;line-height:1.4}
.dialog-lead{margin:8px 0 20px;font-size:16px;line-height:1.56;color:var(--muted)}
.dialog-close{position:sticky;top:0;z-index:3;display:grid;place-items:center;width:44px;height:44px;margin:-14px -8px -30px auto;border-radius:50%;background:var(--soft);font-size:26px;line-height:1;box-shadow:0 2px 10px rgb(0 0 0 / 12%)}
.order-dialog .field{display:block;margin:0 0 16px;padding:0;border:0;min-width:0}
.order-dialog .field[hidden]{display:none}
.order-dialog label,.order-dialog .lbl,.order-dialog legend{display:block;margin:0 0 8px;padding:0;font-size:14px;font-weight:500}
.order-dialog input:not([type=radio]),.order-dialog select{width:100%;min-height:52px;padding:12px 14px;border:1.5px solid #c7cfda;border-radius:12px;background:#fff;font-size:16px;color:var(--ink)}
.order-dialog input:focus,.order-dialog select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgb(18 104 216 / 18%);outline:none}
.order-dialog input[aria-invalid=true],.order-dialog select[aria-invalid=true]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
.order-dialog .hint{display:block;margin-top:6px;font-size:12px;line-height:1.75;letter-spacing:.01em;color:var(--muted)}
.order-dialog .err{display:block;margin-top:6px;font-size:14px;font-weight:500;color:#b3261e}
.order-dialog .err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qty{display:inline-grid;grid-template-columns:52px 64px 52px;border:1.5px solid #c7cfda;border-radius:12px;overflow:hidden}
.qty button{min-height:52px;background:#fff;font-size:24px;line-height:1}
.qty button:hover{background:var(--soft)}
.qty button:disabled{color:#b3bcc8;cursor:default}
.qty output{display:grid;place-items:center;font-size:18px;font-weight:700}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay legend{grid-column:1/-1}
.radio{position:relative;margin:0!important;font-weight:400!important}
.radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.radio span{display:grid;place-items:center;min-height:52px;border:1.5px solid #c7cfda;border-radius:12px;font-size:16px;font-weight:500}
.radio input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.radio input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}
.order-summary{display:grid;gap:4px;margin:6px 0 18px;padding:16px;border-radius:14px;background:var(--soft);font-size:16px;line-height:1.5;color:var(--muted)}
.order-summary strong{font-size:22px;color:var(--ink)}
.order-summary #of-eta{font-weight:500;color:var(--ink)}
.form-msg{margin:0 0 16px;padding:14px 16px;border-radius:12px;background:#fdecea;border:1px solid #b3261e;color:#7a1712;font-size:14px}
.form-msg[hidden],.form-msg-actions [hidden]{display:none}
.form-msg p{line-height:1.5}
.form-msg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:10px}
.form-msg-actions .link-quiet{margin-top:0}
.order-dialog .submit[disabled]{opacity:.7;transform:none}
.dialog-note{margin-top:12px;font-size:12px;line-height:1.75;letter-spacing:.01em;text-align:center;color:var(--muted)}
.order-ok{text-align:center}
.order-ok[hidden]{display:none}
.ok-icon{display:grid;place-items:center;width:64px;height:64px;margin:4px auto 18px;border-radius:50%;background:var(--blue);color:#fff;font-size:30px}
.order-ok p{margin:12px 0 22px;font-size:16px;line-height:1.56;color:var(--muted)}
.order-ok p strong{color:var(--ink);font-size:17px;white-space:nowrap}
.wa-button{background:#128c4a;color:#fff;min-height:64px;box-shadow:0 6px 18px rgb(18 140 74 / 30%)}
.wa-button:hover{background:#0f7a40}
.order-ok .ok-note{margin:14px 0 0;font-size:12px;line-height:1.75;letter-spacing:.01em}
.ok-back{margin-top:10px}

/* ---------- celulares: formulario como hoja inferior ---------- */
@media (max-width:599px){
  .order-dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:22px 22px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}

/* ---------- tablet y computadora ---------- */
@media (min-width:600px){
  :root{--gutter:32px}
  .slide{flex-basis:46%}
  .feature-list{grid-template-columns:repeat(3,1fr);gap:22px}
  .reason-grid{grid-template-columns:1fr 1fr}
  .step-list{grid-template-columns:repeat(3,1fr)}
  .community .ph p,.community .ph code,.community .ph span{display:block}
  .community .ph{inset:10px;padding:10px}
  .closing .btn{width:auto;min-width:320px}
}
@media (min-width:900px){
  :root{--gutter:48px;--header:72px}
  .brand{font-size:26px}
  .header-cta .btn-label small{display:block}
  .subnav{padding-block:14px}
  .subnav-title{font-size:15px}
  .hero-media .frame{aspect-ratio:auto;height:min(56.25vw,74vh)}
  .intro{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;padding-top:56px;padding-bottom:64px}
  .intro .lead{margin-top:0}
  .intro-body .btn--block{max-width:440px}
  .scenes{padding:24px 0 80px}
  .scenes-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
  .scenes-media{margin:0;border-radius:20px;overflow:hidden}
  .scenes-copy{padding-top:0}
  .set{padding-bottom:88px}
  .set-card{display:grid;grid-template-columns:1fr 1fr;max-width:980px;align-items:center}
  .set-info{padding:40px}
  .set-info h2{font-size:32px}
  h1,h2{font-size:48px;line-height:1.25}
  .scene-text h2{font-size:28px;line-height:1.4}
  .big-quote p{font-size:32px;line-height:1.4}
  .order-dialog h2{font-size:24px;line-height:1.4}
  .stage-car{margin-bottom:-140px}
  .blue-block{padding:190px 0 88px}
  .slide{flex-basis:31%}
  .carousel-track{padding-left:max(var(--gutter),calc((100vw - 1240px)/2 + var(--gutter)))}
  .box{padding:88px 0}
  .box-grid{grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .reasons,.community,.steps,.faq,.story{padding:88px 0}
  .reason{min-height:460px;padding:40px}
  .reason-go{max-width:380px}
  .faq-grid{grid-template-columns:1fr 1.4fr;gap:64px}
  .faq-cta{width:auto}
  .closing{padding:130px 0}
  .site-footer{padding-bottom:34px}
  .mobile-buy{display:none}
}
/* pantallas bajas: formulario más compacto */
@media (max-height:700px){
  .order-dialog{padding-top:22px}
  .order-dialog h2{font-size:22px}
  .dialog-lead{margin:6px 0 14px;font-size:15px}
  .order-dialog .field{margin-bottom:12px}
  .order-dialog input:not([type=radio]),.order-dialog select,.radio span,.qty button{min-height:46px}
  .order-summary{padding:12px;margin-bottom:14px}
}
/* celulares muy angostos (320-359 px) */
@media (max-width:359px){
  :root{--gutter:16px}
  .brand{font-size:19px}
  .header-cta{padding:6px 14px}
  .header-cta .btn-label strong{font-size:13px}
  .subnav-price{display:none}
  .mobile-buy-info span{display:none}
  .mobile-buy .btn{padding:6px 16px}
}
/* ---------- movimiento ----------
   landing.js esconde solo lo que todavía no está a la vista (.rv) y lo hace aparecer de golpe, con un mini rebote, al entrar
   en pantalla (.is-in), uno tras otro. Las fotos aparecen recién cuando ya cargaron y los videos muestran su póster de fondo
   encima hasta tener imagen (.v-starting): así no parpadean. Nada se anima por dentro de una foto o un video con bordes redondeados.
   Lo atado al scroll (911 gigante, auto, barra de progreso) es CSS puro donde el navegador lo soporta.
   Con "reducir movimiento" activado en el sistema no se anima nada. Solo se anima opacity, translate y scale. */
main{overflow-x:clip}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rail-dot{z-index:1}
.rail:after{content:"";position:absolute;left:16px;right:16px;top:50%;height:2px;background:var(--cyan);transform:translateY(-50%) scaleX(var(--rail-p,0));transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.mobile-buy{transform:translateY(110%);visibility:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s .4s}
.mobile-buy.is-shown{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.frame{background-position:center;background-size:cover}
/* Arranque sin parpadeo: mientras el video arranca, el póster (fondo del cuadro) queda encima; el video sigue visible para el sistema */
.frame.v-starting::after{content:"";position:absolute;inset:0;z-index:2;background-color:inherit;background-image:inherit;background-position:inherit;background-size:cover;pointer-events:none}
@keyframes rise{from{opacity:0;translate:0 18px}}
@keyframes fade{from{opacity:0}}
@keyframes slide-in{from{opacity:0;translate:var(--sx,20px) 0}}
@keyframes shine{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes grow{from{scale:0 1}}
@keyframes drift{to{translate:0 22%}}
@keyframes rise-big{from{scale:.82;translate:0 40px}}
@keyframes car-in{from{scale:.9;translate:0 80px}}
@keyframes settle-slow{from{scale:1.2}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn{transition:background .2s,transform .15s,translate .25s}
  .btn:hover{translate:0 -2px}
  .feature .frame>img,.slide .frame>img,.box-photo .frame>img,.set-photo>img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .feature:hover .frame>img,.slide:hover .frame>img,.box-photo:hover .frame>img,.set-card:hover .set-photo>img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:no-preference){
  /* entrada del hero al abrir la página */
  .intro-head>*,.intro-body>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .intro-head>:nth-child(2){animation-delay:.08s}
  .intro-body>:nth-child(1){animation-delay:.16s}
  .intro-body>:nth-child(2){animation-delay:.24s}
  .intro-body>:nth-child(3){animation-delay:.32s}
  .intro-body>:nth-child(4){animation-delay:.4s}
  /* aparición al deslizar: golpe corto con mini rebote ("tuc") */
  .rv{opacity:0;translate:0 22px}
  .rv--card{translate:0 26px;scale:.94}
  .rv--soft{translate:none;scale:.92}
  .rv.is-in{opacity:1;translate:none;scale:none;transition:opacity .15s linear,translate .5s cubic-bezier(.34,1.56,.64,1),scale .5s cubic-bezier(.34,1.56,.64,1)}
  .rv--soft.is-in{transition:opacity .15s linear,scale .4s cubic-bezier(.2,.8,.2,1)}
  /* escenas: la nueva entra desde el lado hacia el que avanzás */
  .scenes[data-dir=prev]{--sx:-20px}
  .scene-text [data-scene]:not([hidden]){animation:slide-in .45s cubic-bezier(.2,.7,.2,1) both}
  .scenes-media .frame:not([hidden]){animation:fade .5s ease both}
  /* preguntas */
  details[open]>p{animation:rise .35s cubic-bezier(.2,.7,.2,1) both}
  summary:after{transition:transform .3s,background .2s}
  details[open] summary:after{transform:translateY(-50%) rotate(180deg)}
  /* brillo que pasa cada tanto por los botones principales */
  .btn--shine{position:relative;overflow:hidden}
  .btn--shine:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / 60%) 50%,transparent 70%);transform:translateX(-130%);animation:shine 5s ease-in-out 1.5s infinite;pointer-events:none}
}
/* atado al scroll: los timelines con nombre evitan que overflow:hidden de .frame/.closing corte la referencia */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cyan);transform-origin:0 50%;animation:grow linear both;animation-timeline:scroll(root)}
    .hero-media{view-timeline-name:--hero}
    .hero-media video{animation:drift linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
    .wordmark span{animation:rise-big linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .stage-car img{animation:car-in linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    .closing{view-timeline-name:--closing}
    .closing-bg video{animation:settle-slow linear both;animation-timeline:--closing}
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important}
}

/* ---------- Hero con video vertical (9:16): clase opcional hero--vertical ----------
   En computadora el hero va en dos columnas (video nítido a la izquierda). En celular no cambia nada.
   Se usa :where() para que estas reglas pesen lo mismo que cuando vivían en el CSS de cada landing. */
@media (min-width:900px){
  .hero--vertical{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center;padding:56px max(var(--gutter),calc((100vw - 1240px)/2 + var(--gutter))) 64px}
  :where(.hero--vertical) .hero-media .frame{aspect-ratio:4/5;height:auto;max-height:80vh;border-radius:20px}
  :where(.hero--vertical) .intro{display:block;margin:0;padding:0}
  :where(.hero--vertical) .intro .lead{margin-top:16px}
}

/* ---------- Título del hero en celular: centrado, en dos líneas y la primera más larga (pedido del dueño) ----------
   --h1-fit = ancho de la línea más larga del título, en veces el tamaño de letra, con un 2% de margen. Se declara en el
   style de <html> de cada landing (medilo con siclon-equipo/herramientas/pruebas/medir-h1.js). El tamaño se ajusta al ancho
   para que esa línea nunca se parta; tope de 32 px. En computadora no cambia nada. */
@media (max-width:899px){
  .intro-head{text-align:center;container-type:inline-size}
  .intro-head h1{white-space:nowrap;font-size:min(32px,calc((100vw - 2 * var(--gutter)) / var(--h1-fit,10.8)));font-size:min(32px,calc(100cqi / var(--h1-fit,10.8)))}
}