/* Konsters — site.css (v2 · portado de Claude Design)
   Tokens + base + responsive [data-*] + keyframes + motor 3D de profundidad.
   El grueso del styling vive inline en el markup. */

/* ============ Fuentes self-hosted (antes: Google Fonts + Fontshare render-blocking) ============ */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/plus-jakarta-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'General Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/general-sans-500.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/general-sans-600.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/general-sans-700.woff2') format('woff2')}

:root{
 --navy:#132B56;--navy-900:#0D1E3C;--navy-950:#0D1E3C;--royal:#214E9C;--sky:#D8E4F2;--yellow:#FFF300;
 --canvas:#FFFFFF;--canvas-2:#EEF3FA;--paper:#FFFFFF;--dark:#0D1E3C;--dark-2:#0D1E3C;--sky-line:#B3CDE9;--device:#0A0A0C;
 --ink:#18181B;--ink-soft:#3F3F46;--muted:#71717A;--line:#E4E4E7;--line-dark:rgba(255,255,255,.14);
 --success:#1E8E5A;--success-bg:#E3F2EA;--success-dark:#14633E;
 --on-dark:#fff; --on-dark-2:rgba(255,255,255,.78); --on-dark-3:rgba(255,255,255,.55);
 --h2-size:clamp(28px,4vw,54px); --h2-lh:1.06;
 --r-card:20px;--r-panel:40px;--r-input:12px;--r-cta:999px;
 --display:'General Sans',system-ui,-apple-system,sans-serif;--body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
 --gut:clamp(20px,5vw,72px);
 --shadow:0 1px 2px rgba(19,43,86,.04),0 6px 20px rgba(19,43,86,.07);
 --shadow-lg:0 4px 16px rgba(19,43,86,.07),0 22px 54px rgba(19,43,86,.12);
 --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,.84,.44,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--dark);-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--yellow);color:var(--navy)}
:focus-visible{outline:2.5px solid var(--navy);outline-offset:3px;border-radius:4px}
[data-dark] :focus-visible,[data-footer] :focus-visible{outline-color:var(--sky)}
section[id]{scroll-margin-top:88px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes riseIn{to{transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseRing{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
@keyframes marqueeL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes marqueeR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
[data-scene]{perspective:1500px;perspective-origin:50% 40%}
[data-scene-inner]{transform-style:preserve-3d;will-change:transform;backface-visibility:hidden}
[data-layer]{will-change:transform}
[data-tilt]{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);will-change:transform}
[data-glarelayer]{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.45),rgba(255,255,255,0) 42%);opacity:0;transition:opacity .45s var(--ease);pointer-events:none;z-index:4}
[data-marquee]{will-change:transform}
/* "Todo para tu casa" — partidas como píldoras glass (mismo efecto que la top bar) */
[data-cat]{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:13px 22px;font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-soft);border-radius:999px;
  background:color-mix(in srgb,var(--canvas) 62%,transparent);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 10px rgba(19,43,86,.05);
}
/* Wash suave detrás del marquee para que el glass de las píldoras se note (algo que difuminar) */
[data-cats]{position:relative}
[data-cats]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 130% at 12% 50%,rgba(33,78,156,.09),transparent 60%),radial-gradient(52% 130% at 88% 50%,rgba(216,228,242,.5),transparent 66%)}
[data-nav-foot]{display:none}
@media(max-width:960px){
 [data-hero-grid]{grid-template-columns:1fr!important;gap:44px!important}
 [data-hero-visual]{order:2;min-height:auto!important;margin-top:clamp(18px,5vw,38px)}
 [data-split]{grid-template-columns:1fr!important;gap:36px!important}
 [data-faq-rail]{position:static!important}
 [data-stats]{grid-template-columns:repeat(2,1fr)!important}
 [data-qgrid]{grid-template-columns:1fr!important;max-width:520px;margin-left:auto;margin-right:auto}
 [data-footer-grid]{grid-template-columns:1fr 1fr!important}
 [data-footer-brand]{grid-column:1/-1}
 [data-nav-links]{position:fixed;inset:78px 0 auto 0;background:var(--paper);flex-direction:column!important;align-items:stretch!important;padding:16px 22px 26px!important;gap:4px!important;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);display:none!important}
 [data-nav-links][data-open]{display:flex!important}
 [data-nav-links] > a{color:var(--ink-soft)!important;padding:15px 16px!important;font-size:17px!important}
 [data-nav-cta]{display:none!important}
 [data-nav-toggle]{display:block!important}
 [data-scene-inner],[data-layer],[data-tilt],[data-parallax]{transform:none!important;--flatten-mobile:1}
 [data-konsters-app] [data-screen="home"] [data-scroll]{overflow:hidden!important}
 [data-hero-wash]{background:linear-gradient(to bottom,var(--canvas) 0 58%,color-mix(in srgb,var(--canvas) 55%,transparent) 78%,color-mix(in srgb,var(--canvas) 18%,transparent) 100%)!important}
 [data-hero-tint]{background:linear-gradient(to bottom,transparent 0 58%,rgba(19,43,86,.1) 100%)!important}
 [data-scene] [data-layer][data-float-phase="0.7"]{top:-16px!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;white-space:nowrap;z-index:6}
 [data-scene] [data-layer][data-float-phase="1.7"]{display:none!important}
 [data-footer-grid] ul a{display:block;padding:10px 0;margin:-6px 0}
 [data-nav-foot]{display:flex!important}
}
@media(max-width:560px){
 [data-stats]{grid-template-columns:1fr 1fr!important}
 [data-footer-grid]{grid-template-columns:1fr!important}
 [data-cta-row]{flex-direction:column!important;align-items:stretch!important}
 [data-cta-row] a{justify-content:center;white-space:nowrap}
}
@media(max-width:600px){
 [data-pricecalc]{grid-template-columns:1fr!important}
 [data-cat]{padding:11px 16px!important;font-size:13.5px!important}
 [data-scene]{max-width:340px;margin-left:auto;margin-right:auto}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
 [data-rise]{transform:none!important;animation:none!important}
 [data-marquee]{animation:none!important}
 [data-scene-inner],[data-tilt],[data-layer],[data-parallax]{transform:none!important}
}

@media(max-width:920px){[data-dotnav]{display:none!important}}@media(hover:none),(pointer:coarse){[data-cursor],[data-spotlight]{display:none!important}}
/* --- resets base que el diseño delegaba al runtime --- */
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display)}

/* ===== KonstersApp · prototipo interactivo del teléfono ===== */
[data-scroll]{scrollbar-width:none;-webkit-overflow-scrolling:touch}
[data-scroll]::-webkit-scrollbar{display:none}
@keyframes ka-spin{to{transform:rotate(360deg)}}
@keyframes ka-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes ka-pulse{0%,100%{opacity:1}50%{opacity:.5}}


/* ============================================================
   Tokens y estilos para paginas legales (preservados del sistema previo)
   ============================================================ */
:root{ --maxw:1320px; --dur-1:.18s; --dur-2:.4s; --dur-3:.7s;
  --warning:#E07B1A; --warning-bg:#FBE9D2; --warning-dark:#9C520C; --error:#D23B2C; }
.wrap,.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.legal-hero{background:var(--canvas);border-bottom:1px solid var(--line);padding:clamp(96px,12vw,150px) 0 clamp(32px,5vw,56px)}
.legal-hero h1{font-size:clamp(25px,2.8vw,33px);line-height:1.15;letter-spacing:-.03em;color:var(--ink)}
.legal-hero .meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--muted)}
.legal-hero .meta span{background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:var(--r-cta);padding:6px 14px;font-weight:600}
.legal-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(32px,4vw,72px);padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.legal-toc{position:sticky;top:100px;align-self:start;max-height:calc(100vh - 130px);overflow:auto;font-size:13px}
.legal-toc h4{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.legal-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.legal-toc a{display:block;color:var(--ink-soft);padding:8px 13px;border-radius:10px;line-height:1.35;transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.legal-toc a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--navy)}
.legal-toc a.active{background:var(--sky);color:var(--navy);font-weight:600}
.legal-body{max-width:78ch;min-width:0;overflow-wrap:break-word}
.legal-body h2{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);letter-spacing:-.025em;margin:52px 0 18px;scroll-margin-top:100px;line-height:1.1}
.legal-body h2:first-of-type{margin-top:0}
.legal-body h3{font-size:clamp(18px,1.8vw,22px);margin:34px 0 12px;scroll-margin-top:100px}
.legal-body h4{font-size:16px;margin:24px 0 10px;font-family:var(--body);font-weight:700}
.legal-body p,.legal-body li{font-size:15.5px;line-height:1.7;color:var(--ink-soft)}
.legal-body li{margin-bottom:6px}
.legal-body strong{color:var(--ink)}
.legal-body a{color:var(--royal);text-decoration:underline}
.legal-body code{font-family:var(--mono);font-size:.86em;background:color-mix(in srgb,var(--ink) 7%,transparent);border-radius:6px;padding:2px 6px;color:var(--navy)}
.legal-body blockquote{margin:22px 0;padding:18px 22px;background:var(--sky);border-left:3px solid var(--royal);border-radius:0 var(--r-input) var(--r-input) 0;color:var(--ink-soft);font-size:14.5px}
.legal-body blockquote p{margin:0;font-size:14.5px}
.legal-body .notice-warn{background:var(--warning-bg);border-left-color:var(--warning)}
.table-wrap,.table-scroll{overflow-x:auto}
.legal-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:13.5px;display:block;overflow-x:auto}
.legal-body th,.legal-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.5;min-width:120px}
.legal-body th{background:color-mix(in srgb,var(--ink) 5%,transparent);font-weight:700;color:var(--ink)}
.legal-body hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.legal-back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--royal);margin-bottom:18px}
.legal-back:hover{text-decoration:underline}
@media(max-width:820px){ .legal-layout{grid-template-columns:minmax(0,1fr)} .legal-toc{position:static;max-height:none;border:1px solid var(--line);border-radius:var(--r-card);padding:18px;background:var(--paper)} }

/* ===== Transparencias de scroll: cross-fade entre lo que se va y lo que aparece ===== */
@keyframes secXfade{0%{opacity:0}11%{opacity:1}89%{opacity:1}100%{opacity:0}}
@supports (animation-timeline: view()){
 @media (prefers-reduced-motion: no-preference){
  main > section:not(#inicio),footer[data-footer]{animation:secXfade linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
 }
}

/* ---- content-visibility RETIRADO ----
   Rompía el sistema de aparición: los [data-reveal] arrancan en opacity:0
   y sólo se encienden cuando IntersectionObserver los reporta, pero dentro
   de un subárbol saltado por content-visibility:auto el observador NO
   dispara — las secciones bajas quedaban INVISIBLES. Verificado: la
   sección renderizaba en blanco (4.7KB de captura) contra 467KB sin la
   regla. No reintroducir sin cambiar antes el mecanismo de reveal. */

/* ---- Transición entre documentos (index ↔ legales). Sin soporte: navegación normal ---- */
@supports (view-transition-name: none){
  @view-transition{navigation:auto}
  @media (prefers-reduced-motion:no-preference){
    ::view-transition-old(root){animation:vtOut .28s ease both}
    ::view-transition-new(root){animation:vtIn .34s ease both}
  }
}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}

/* ---- Resalte de marcatextos: mismo tratamiento que "done" en "Konsider it done" ----
   box-decoration-break:clone hace que el subrayado siga al texto cuando parte de línea. */
.acc{background:linear-gradient(transparent 12%,var(--yellow) 12%,var(--yellow) 92%,transparent 92%);
  padding:0 .12em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ============ Jugada 3: el teléfono anclado ============
   Por DEFECTO el layout es idéntico al de siempre (rejilla de 3 tarjetas):
   el contenedor no impone nada y el teléfono no ocupa espacio. Sólo cuando
   el modo anclado se activa (escritorio, sin reduced-motion) pasa a dos
   columnas con el teléfono sticky. Así el fallback nunca deja huecos. */
[data-steps-phone]{display:none}
@media(min-width:961px){
  html:not(.no-pin) [data-steps]{display:grid;grid-template-columns:minmax(280px,.78fr) 1.22fr;
    gap:clamp(44px,5.5vw,96px);align-items:start}
  html:not(.no-pin) [data-steps-phone]{display:block;position:sticky;top:calc(50vh - 300px);justify-self:center}
  html:not(.no-pin) [data-steps-list]{grid-template-columns:1fr!important;gap:0!important}
  html:not(.no-pin) [data-steps-list] > [data-step]{min-height:78vh;display:flex;flex-direction:column;
    justify-content:center;transition:opacity .5s var(--ease)}
  html:not(.no-pin) [data-steps-list] > [data-step]:not(.step-on){opacity:.34}
  /* El original vive posicionado dentro de la escena del hero (position:absolute):
     el clon necesita posición y medidas propias o colapsa a 0x0. */
  [data-steps-phone] [data-app-frame]{margin:0 auto;pointer-events:none;user-select:none}
  [data-steps-phone] [data-screen]{transition:opacity .55s var(--ease)}
}