
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-full-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-full-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* ==========================================================================
   preparados.shop — "Catálogo de campo"
   Paleta: papel liquen + pino + franjas de atardecer (70s outdoor)
   Tipos: Fraunces (titulares, SOFT/WONK) · Barlow Condensed (señalética, botones)
          Atkinson Hyperlegible (texto: pensada para leerse con prisa y poca luz)
   ========================================================================== */
:root{
  --paper:#E4E5D4;      /* papel liquen */
  --paper-2:#F0F0E4;    /* etiqueta / ficha */
  --paper-3:#D6D9C3;    /* papel sombreado */
  --pine:#173A2E;       /* pino: tinta principal y bandas oscuras */
  --pine-2:#22503F;
  --pine-3:#386551;
  --ink:#13261E;
  --muted:#4A5D53;
  --line:#B5BBA1;
  --sun:#F2B33D;        /* mostaza: CTA de compra */
  --amber:#EE8B2F;
  --ember:#E0532B;      /* bermellón: avisos y SOS */
  --brick:#A23B26;
  --lake:#2B6874;       /* lago: enlaces e información */
  --night:#0A0D0B;      /* fondo propio de LIFELINE */
  --app-amber:#F2A93B;
  --on-dark:#ECEDDF;
  --on-dark-mute:#B9C3B4;

  --f-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-sign:"Barlow Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-0:.875rem; --fs-1:1.0625rem; --fs-2:1.25rem;
  --fs-3:clamp(1.45rem,1.2rem + 1vw,1.85rem);
  --fs-4:clamp(1.95rem,1.4rem + 2.4vw,2.9rem);
  --fs-5:clamp(2.4rem,1.45rem + 5.2vw,5rem);

  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --header-h:58px;
  --tabbar-h:64px;
  --r-card:16px; --r-pill:999px;
  --stripes:linear-gradient(180deg,var(--sun) 0 25%,var(--amber) 25% 50%,var(--ember) 50% 75%,var(--brick) 75% 100%);
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top, 0px) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-1)/1.6 var(--f-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);background:var(--pine);z-index:60}
img,svg{max-width:100%}
a{color:var(--lake);text-underline-offset:.18em;text-decoration-thickness:.08em}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 1;font-optical-sizing:auto;line-height:1.05;margin:0;text-wrap:balance;color:var(--pine)}
h2{font-size:var(--fs-4);font-weight:780;letter-spacing:-.012em}
h3{font-size:var(--fs-2);font-weight:640;line-height:1.2}
p{margin:0}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:6px}
.wrap{max-width:1160px;margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.narrow{max-width:760px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--sun);color:var(--ink);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:calc(env(safe-area-inset-top, 0px) + 8px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lede{font-size:var(--fs-2);line-height:1.5;color:var(--muted);max-width:62ch}
.small{font-size:var(--fs-0)}
.muted{color:var(--muted)}
.section{padding-block:clamp(56px,9vw,104px)}
.section-head{display:grid;gap:14px;margin-bottom:clamp(24px,4vw,40px);max-width:760px}
.section + .section{border-top:1px solid var(--line)}
.sign{font-family:var(--f-sign);font-weight:600;letter-spacing:.02em}
.cv{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.55rem 1.15rem;border-radius:var(--r-pill);border:2px solid var(--pine);background:transparent;color:var(--pine);font:700 1.15rem/1.1 var(--f-sign);letter-spacing:.015em;text-decoration:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.btn:active{transform:translateY(2px)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-buy{background:var(--sun);border-color:var(--ink);color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.btn-buy:hover{background:#F6C258}
.btn-buy:active{box-shadow:0 1px 0 var(--ink)}
.btn-solid{background:var(--pine);color:var(--on-dark)}
.btn-solid:hover{background:var(--pine-2)}
.btn-light{border-color:var(--on-dark);color:var(--on-dark)}
.btn-light:hover{background:rgba(236,237,223,.1)}
.btn-sm{min-height:40px;padding:.35rem .9rem;font-size:1.02rem}
.btn-block{width:100%}
.linkish{background:none;border:0;padding:0;color:var(--lake);text-decoration:underline;text-underline-offset:.18em;cursor:pointer;font:inherit}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:50;background:var(--pine);color:var(--on-dark)}
.top .wrap{display:flex;align-items:center;gap:16px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;color:var(--on-dark);text-decoration:none;margin-right:auto}
.brand svg{width:34px;height:34px;flex:none}
.brand .wm{display:flex;align-items:baseline}
.brand b{font:800 1.45rem/1 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 1;letter-spacing:-.01em}
.brand small{font:600 .95rem/1 var(--f-sign);color:var(--sun);letter-spacing:.03em;margin-left:1px}
.nav{display:none;gap:4px}
.nav a{color:var(--on-dark);text-decoration:none;font:600 1.1rem/1 var(--f-sign);padding:10px 12px;border-radius:10px}
.nav a:hover{background:rgba(236,237,223,.1)}
.top .list-btn{display:none}
.count{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .35em;border-radius:var(--r-pill);background:var(--sun);color:var(--ink);font:700 .9rem/1 var(--f-sign)}
.count[data-n="0"]{background:transparent;border:1.5px solid currentColor;color:inherit;opacity:.7}

/* ---------- campaign ribbon ---------- */
.ribbon{background:var(--sun);color:var(--ink);border-bottom:2px solid var(--ink)}
.ribbon .wrap{display:flex;gap:10px;align-items:center;padding-block:8px;font-size:.84rem;line-height:1.3}
.ribbon p{flex:1;min-width:0}
.ribbon b{font-weight:700}
.ribbon .btn{min-height:36px;font-size:.98rem;padding:.2rem .75rem;border-color:var(--ink);color:var(--ink);flex:none}
.ribbon .x{background:none;border:0;width:32px;height:36px;margin-right:-6px;border-radius:50%;cursor:pointer;font-size:1rem;flex:none;color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--pine);color:var(--on-dark);overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.13;pointer-events:none;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(22px,6vw,72px);padding-bottom:clamp(262px,40vw,440px)}
.hero-copy{max-width:720px;display:grid;gap:14px}
.kicker{font:600 1.08rem/1.2 var(--f-sign);color:var(--sun);letter-spacing:.03em}
.hero h1{font-size:var(--fs-5);font-weight:880;color:var(--on-dark);letter-spacing:-.022em;line-height:.98}
.hero .lede{color:var(--on-dark-mute);font-size:clamp(1.05rem,.98rem + .45vw,1.3rem);line-height:1.5}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.hero-ctas .btn{flex:1 1 220px}
.land{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(250px,38vw,440px);z-index:1;display:block}
.land .sun-g{transform-origin:980px 360px;animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
.land .sun-g .arc{animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
.land .win{animation:lamp .35s steps(2,end) 1.7s both}
@keyframes rise{from{transform:translateY(70px)}to{transform:none}}
@keyframes lamp{from{fill:#2a3b33}to{fill:var(--sun)}}

/* ---------- why-now log ---------- */
.log{display:grid;gap:0;margin:0;padding:0;list-style:none;border-left:3px solid var(--pine);max-width:760px}
.log li{position:relative;padding:0 0 26px 22px}
.log li::before{content:"";position:absolute;left:-9px;top:.35em;width:15px;height:15px;border-radius:50%;background:var(--paper);border:3px solid var(--pine)}
.log li:last-child{padding-bottom:0}
.log time,.log .when{display:block;font:700 1.05rem/1.2 var(--f-sign);color:var(--brick);letter-spacing:.02em;margin-bottom:4px}
.log p{max-width:62ch}
.manifesto{margin-top:clamp(28px,5vw,48px);font:italic 600 var(--fs-3)/1.2 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--pine);max-width:24ch;text-wrap:balance}

/* ---------- quiz ---------- */
.band-dark{background:var(--pine);color:var(--on-dark)}
.band-dark h2,.band-dark h3{color:var(--on-dark)}
.band-dark .lede{color:var(--on-dark-mute)}
.band-dark a:not(.btn){color:var(--sun)}
.quiz{background:var(--paper-2);color:var(--ink);border:2px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--sun);padding:clamp(18px,4vw,32px);max-width:760px}
.quiz h3{color:var(--pine);font-size:var(--fs-3)}
.q-progress{display:flex;align-items:center;gap:12px;margin-bottom:16px;font:600 1rem/1 var(--f-sign);color:var(--muted)}
.q-progress .bar{flex:1;height:8px;border-radius:99px;background:var(--paper-3);overflow:hidden}
.q-progress .bar i{display:block;height:100%;width:25%;background:var(--pine);border-radius:99px;transition:width .3s ease}
.q-step{display:grid;gap:18px}
.q-step[hidden]{display:none}
.q-help{color:var(--muted);margin-top:-8px}
.steppers{display:grid;gap:10px}
.stepper{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff}
.stepper span{flex:1;font-weight:700}
.stepper span small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-0)}
.stepper button{width:44px;height:44px;border-radius:50%;border:2px solid var(--pine);background:var(--paper-2);font:700 1.4rem/1 var(--f-sign);cursor:pointer;color:var(--pine)}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper output{min-width:2ch;text-align:center;font:700 1.5rem/1 var(--f-sign)}
.choices{display:grid;gap:10px}
.choice{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;line-height:1.35}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .tick{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--pine);display:grid;place-items:center;margin-top:1px}
.choice input[type=radio]+.tick{border-radius:50%}
.choice b{display:block}
.choice small{color:var(--muted)}
.choice:has(input:checked){border-color:var(--pine);background:#E9EEDF;box-shadow:inset 0 0 0 1px var(--pine)}
.choice input:checked+.tick{background:var(--pine)}
.choice input:checked+.tick::after{content:"";width:10px;height:6px;border:solid var(--paper-2);border-width:0 0 2.5px 2.5px;transform:translateY(-1px) rotate(-45deg)}
.choice input[type=radio]:checked+.tick::after{width:10px;height:10px;border:0;border-radius:50%;background:var(--paper-2);transform:none}
.choice input:focus-visible+.tick{outline:3px solid var(--sun);outline-offset:2px}
.q-nav{display:flex;gap:10px;justify-content:space-between;margin-top:6px}
.q-nav .btn{flex:1}
.q-result{display:grid;gap:20px}
.need{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px}
.need div{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;gap:12px;align-items:center}
.need b{flex:none;font:800 1.7rem/1.1 var(--f-display);font-variation-settings:"SOFT" 100;color:var(--pine)}
.need span{font-size:var(--fs-0);color:var(--muted)}
.res-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px dashed var(--line);border-radius:14px;background:#fff}
.res-more summary::-webkit-details-marker{display:none}
.res-more summary h4{margin:0;flex:1}
.res-more summary span{font:600 1rem/1 var(--f-sign);color:var(--lake)}
.res-more summary span::after{content:" +"}
.res-more[open] summary{margin-bottom:8px}
.res-more[open] summary span::after{content:" –"}
.res-group h4{font:700 1.15rem/1.2 var(--f-sign);color:var(--brick);margin:0 0 8px;letter-spacing:.02em}
.rows{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:12px 14px;background:#fff;border:1.5px solid var(--line);border-radius:14px}
.row .nm{font-weight:700;line-height:1.3}
.row .nm small{display:block;font-weight:400;color:var(--muted)}
.row .acts{display:flex;gap:8px;align-items:center}
.res-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:520px){.row{grid-template-columns:1fr}.row .acts{justify-content:flex-start}}
.res-actions .btn{flex:1 1 220px}

/* ---------- tier + tags ---------- */
.tier{flex:none;white-space:nowrap;display:inline-flex;align-items:center;font:700 .95rem/1 var(--f-sign);letter-spacing:.06em;padding:4px 8px;border-radius:6px;background:var(--paper-3);color:var(--pine)}
.tier i{font-style:normal;opacity:.28}
.tier.free{background:transparent;border:1.5px dashed var(--line);color:var(--muted);letter-spacing:.02em}

/* ---------- kits ---------- */
.disclose{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-0);color:var(--muted);background:var(--paper-2);border:1.5px dashed var(--line);border-radius:12px;padding:10px 14px;max-width:760px}
.chips{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px var(--gutter-r) 12px var(--gutter-l);margin:0 calc(-1 * var(--gutter-r)) 8px calc(-1 * var(--gutter-l));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:var(--r-pill);border:2px solid var(--pine);background:transparent;color:var(--pine);font:700 1.08rem/1 var(--f-sign);cursor:pointer;letter-spacing:.01em}
.chip svg{width:20px;height:20px}
.chip[aria-selected=true]{background:var(--pine);color:var(--on-dark)}
.chip .mini{font:600 .9rem/1 var(--f-sign);opacity:.75}
.kit-head{display:grid;gap:12px;margin:14px 0 20px}
.kit-head h3{font-size:var(--fs-3)}
.kit-head p{max-width:62ch;color:var(--muted)}
.progress{display:flex;align-items:center;gap:12px;font:600 1.02rem/1 var(--f-sign);color:var(--pine)}
.progress .track{flex:1;max-width:320px;height:12px;border-radius:99px;background:var(--paper-3);overflow:hidden;border:1.5px solid var(--pine)}
.progress .track i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--sun) 0 10px,var(--amber) 10px 20px,var(--ember) 20px 30px,var(--brick) 30px 40px);transition:width .35s ease}
.items{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.item{position:relative;display:grid;gap:10px;background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-card);padding:18px 16px 16px}
.item.have{background:#E7ECDD;border-color:var(--pine-3)}
.item .meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px 0 -2px}
.item h4{font:640 1.22rem/1.25 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--pine);margin:0}
.item .why{line-height:1.55}
.item .look{font-size:var(--fs-0);color:var(--muted);line-height:1.5}
.item .look b{color:var(--ink)}
.item-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.item-foot .btn-buy{flex:1 1 160px}
.have-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 4px 4px 12px;border-radius:12px;border:0;background:transparent;font:600 1.02rem/1 var(--f-sign);color:var(--pine);cursor:pointer;margin-right:-4px}
.have-toggle .bx{width:30px;height:30px;border-radius:8px;border:2px solid var(--pine);background:#fff;display:grid;place-items:center}
.have-toggle svg{width:20px;height:20px;opacity:0;transition:opacity .15s}
.have-toggle[aria-pressed=true] .bx{background:var(--pine)}
.have-toggle[aria-pressed=true] svg{opacity:1;color:var(--paper-2)}
.save-btn[aria-pressed=true]{background:var(--pine);color:var(--on-dark)}
.save-btn[aria-pressed=true] .plus{display:none}
.save-btn:not([aria-pressed=true]) .ok{display:none}
.not-buy{font-size:var(--fs-0);color:var(--muted);font-style:italic}
.audit{margin-top:26px;background:transparent;border:2px solid var(--pine);border-radius:var(--r-card);padding:16px 18px}
.audit h4{font:700 1.2rem/1.2 var(--f-sign);color:var(--pine);margin:0 0 4px;letter-spacing:.01em}
.audit ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.audit label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:6px 0;line-height:1.45}
.audit input{width:22px;height:22px;accent-color:var(--pine);flex:none;margin-top:1px}
.audit .stamp{font-size:var(--fs-0);color:var(--muted)}

/* ---------- principles ---------- */
.rules{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.rule{border-top:4px solid var(--pine);padding-top:12px}
.rule h3{font-size:1.35rem;margin-bottom:6px}
.rule p{color:var(--muted)}

/* ---------- LIFELINE ---------- */
.app-band{background:var(--night);color:#E6ECE7;position:relative;overflow:hidden}
.app-band::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--sun) 0 25%,var(--amber) 25% 50%,var(--ember) 50% 75%,var(--brick) 75%)}
.app-band h2{color:#F3F5EF}
.app-band .lede{color:#A9B6AE}
.app-band a:not(.btn){color:var(--app-amber)}
.app-grid{display:grid;gap:clamp(28px,5vw,56px);align-items:start}
.app-name{font:800 1.05rem/1 var(--f-sign);letter-spacing:.14em;color:var(--app-amber)}
.app-feats{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.app-feats li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:14px;border:1px solid #233128;border-radius:14px;background:#111712}
.app-feats .ic{width:40px;height:40px;border-radius:10px;background:#1A231D;display:grid;place-items:center;color:var(--app-amber)}
.app-feats .ic svg{width:22px;height:22px}
.app-feats b{display:block;color:#F3F5EF;line-height:1.3}
.app-feats span{font-size:var(--fs-0);color:#A9B6AE;line-height:1.45}
.app-ctas{display:flex;flex-wrap:wrap;gap:12px}
.app-ctas .btn{flex:1 1 200px}
.btn-app{background:var(--app-amber);color:#121814;border-color:var(--app-amber)}
.btn-app:hover{background:#F6BB5C}
.btn-app-ghost{border-color:#3A4A40;color:#E6ECE7}
.btn-app-ghost:hover{background:#18201B}
.howto{display:grid;gap:10px;font-size:var(--fs-0);color:#A9B6AE;border-top:1px solid #233128;padding-top:16px}
.howto details{border:1px solid #233128;border-radius:12px;padding:0 14px;background:#0F1411}
.howto summary{cursor:pointer;padding:12px 0;color:#E6ECE7;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
.howto summary::-webkit-details-marker{display:none}
.howto summary::after{content:"+";font:700 1.3rem/1 var(--f-sign);color:var(--app-amber)}
.howto details[open] summary::after{content:"–"}
.howto ol{margin:0 0 14px;padding-left:1.2em;display:grid;gap:6px}
.phone-col{display:grid;gap:16px;justify-items:center}
.phone{position:relative;width:min(100%,360px);aspect-ratio:9/18.5;max-width:100%;border-radius:44px;background:#050706;border:10px solid #1B221D;box-shadow:0 0 0 2px #2A352E,0 30px 60px -20px rgba(0,0,0,.8);overflow:hidden}
.phone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34%;height:22px;border-radius:14px;background:#050706;z-index:3}
.phone iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--night)}
.phone .poster{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:18px;padding:40px 22px;text-align:center;background:radial-gradient(120% 70% at 50% 0%,#1A2A20 0%,var(--night) 70%)}
.phone .poster svg.logo{width:84px;height:84px}
.phone .poster b{font:800 1.5rem/1 var(--f-sign);letter-spacing:.14em;color:#F3F5EF}
.phone .poster p{font-size:var(--fs-0);color:#A9B6AE}
.quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.quick button{min-height:40px;padding:6px 12px;border-radius:999px;border:1px solid #3A4A40;background:#111712;color:#E6ECE7;font:600 1rem/1 var(--f-sign);cursor:pointer}
.quick button:hover{border-color:var(--app-amber)}
.qr-card{display:none;gap:14px;align-items:center;padding:14px;border:1px solid #233128;border-radius:14px;background:#0F1411;max-width:360px}
.qr-card .qr{width:96px;height:96px;flex:none;color:#121814;background:#F3F5EF;padding:8px;border-radius:10px}
.qr-card p{font-size:var(--fs-0);color:#A9B6AE}

/* ---------- guides ---------- */
.guides{display:grid;gap:12px}
.guide{border:2px solid var(--pine);border-radius:var(--r-card);background:var(--paper-2)}
.guide>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:48px 1fr 28px;gap:14px;align-items:center;padding:14px 16px}
.guide>summary::-webkit-details-marker{display:none}
.guide .gi{width:48px;height:48px;border-radius:12px;background:var(--pine);color:var(--sun);display:grid;place-items:center}
.guide .gi svg{width:26px;height:26px}
.guide h3{font-size:1.3rem}
.guide summary small{display:block;color:var(--muted);font-size:var(--fs-0);margin-top:3px;font-family:var(--f-body)}
.guide .chev{width:28px;height:28px;transition:transform .2s;color:var(--pine)}
.guide[open] .chev{transform:rotate(180deg)}
.guide .gb{padding:0 16px 18px;display:grid;gap:16px;border-top:1.5px dashed var(--line);padding-top:16px;margin:0 2px}
.guide .gb p{max-width:66ch}
.checks{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;line-height:1.5}
.checks li::before{content:"";width:14px;height:14px;margin-top:.35em;border-radius:3px;background:var(--pine);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
.tiers{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.tiers a{display:grid;gap:4px;text-decoration:none;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}
.tiers a:hover{border-color:var(--pine)}
.tiers b{font-weight:700}
.tiers small{color:var(--muted);line-height:1.4}
.tiers .go{font:700 1rem/1 var(--f-sign);color:var(--lake);margin-top:4px}

/* ---------- calculators ---------- */
.calcs{display:grid;gap:18px;align-items:start}
.calc{background:var(--paper-2);border:2px solid var(--pine);border-radius:20px;padding:clamp(16px,3.5vw,28px);display:grid;gap:16px;min-width:0;align-content:start}
.calc h3{font-size:var(--fs-3)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.field{display:grid;gap:6px;min-width:0}
.field label,.field .lbl{font:600 1rem/1.2 var(--f-sign);color:var(--pine);letter-spacing:.01em}
.field input,.field select{width:100%;min-height:48px;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:700 1.15rem/1 var(--f-body)}
.field input:focus,.field select:focus{border-color:var(--pine);outline:none;box-shadow:0 0 0 3px rgba(242,179,61,.6)}
.out{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.out div{background:var(--pine);color:var(--on-dark);border-radius:14px;padding:12px 14px}
.out b{display:block;font:800 1.75rem/1.05 var(--f-display);font-variation-settings:"SOFT" 100;color:var(--sun)}
.out span{font-size:var(--fs-0);color:var(--on-dark-mute)}
.devs{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.dev{display:grid;grid-template-columns:28px 1fr 82px;gap:10px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:8px 10px}
.dev input[type=checkbox]{width:22px;height:22px;accent-color:var(--pine)}
.dev label{line-height:1.25;cursor:pointer}
.dev label small{display:block;color:var(--muted);font-size:.8rem}
.dev .hrs{display:flex;align-items:center;gap:4px;font-size:.8rem;color:var(--muted)}
.dev .hrs input{width:52px;min-height:38px;padding:4px 6px;border-radius:8px;border:1.5px solid var(--line);font:700 1rem/1 var(--f-body);text-align:center}
.calc .rec{display:grid;gap:10px;border-top:1.5px dashed var(--line);padding-top:14px}
.calc .rec p{max-width:62ch}

/* ---------- almanac ---------- */
.seasons{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.season{border:1.5px solid var(--line);border-radius:var(--r-card);padding:16px;background:var(--paper-2);display:grid;gap:10px;align-content:start}
.season.now{border:2px solid var(--pine);box-shadow:5px 5px 0 var(--ember)}
.season .when{font:700 1rem/1 var(--f-sign);color:var(--brick);letter-spacing:.02em}
.season .now-tag{display:inline-block;margin-left:6px;background:var(--ember);color:#fff;border-radius:6px;padding:3px 7px;font:700 .85rem/1 var(--f-sign);letter-spacing:.03em;vertical-align:1px}
.season h3{font-size:1.35rem}
.season ul{margin:0;padding-left:1.1em;display:grid;gap:4px;color:var(--ink)}
.season .buy{display:flex;flex-wrap:wrap;gap:6px}
.season .buy a{font:600 .98rem/1 var(--f-sign);padding:8px 10px;border-radius:999px;border:1.5px solid var(--pine);color:var(--pine);text-decoration:none}
.season .buy a:hover{background:var(--pine);color:var(--on-dark)}
.clock{display:grid;gap:14px;grid-template-columns:auto 1fr;align-items:center;background:var(--pine);color:var(--on-dark);border-radius:20px;padding:18px;margin-bottom:18px}
.clock .face{width:76px;height:76px}
.clock h3{color:var(--on-dark);font-size:var(--fs-2)}
.clock p{color:var(--on-dark-mute);font-size:var(--fs-0);margin-top:4px}
.clock .btn{grid-column:1/-1;justify-self:start}

/* ---------- printables ---------- */
.sheets{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.sheet-card{display:grid;gap:10px;align-content:start;border:1.5px solid var(--line);border-radius:var(--r-card);padding:16px;background:var(--paper-2)}
.sheet-card h3{font-size:1.3rem}
.sheet-card p{color:var(--muted);font-size:var(--fs-0)}
.sheet-card .btn{justify-self:start}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;border-top:2px solid var(--pine);max-width:820px}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font:640 1.2rem/1.3 var(--f-display);font-variation-settings:"SOFT" 100;color:var(--pine)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 1.6rem/1 var(--f-sign);color:var(--brick);flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 20px;max-width:66ch;display:grid;gap:10px}

/* ---------- footer ---------- */
.site-foot{background:var(--pine);color:var(--on-dark-mute);font-size:var(--fs-0);position:relative}
.site-foot::before{content:"";display:block;height:16px;background:linear-gradient(180deg,var(--sun) 0 25%,var(--amber) 25% 50%,var(--ember) 50% 75%,var(--brick) 75%)}
.site-foot .wrap{padding-block:40px calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom, 0px));display:grid;gap:24px}
.site-foot a{color:var(--on-dark)}
.site-foot .brand{margin:0}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.site-foot .legal-note{max-width:70ch;line-height:1.55}
.site-foot .em{display:flex;gap:12px;align-items:center;background:rgba(0,0,0,.18);border-radius:14px;padding:12px 14px;max-width:560px;color:var(--on-dark)}
.site-foot .em b{font:800 2rem/1 var(--f-sign);color:var(--sun);letter-spacing:.02em}

/* ---------- bottom tab bar (móvil) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--pine);border-top:1px solid #0E241C;padding:6px var(--gutter-r) calc(6px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;box-shadow:0 -8px 24px -12px rgba(0,0,0,.4)}
.tabbar a,.tabbar button{display:grid;justify-items:center;gap:3px;padding:6px 2px;border-radius:12px;border:0;background:none;color:var(--on-dark-mute);text-decoration:none;font:600 .92rem/1 var(--f-sign);letter-spacing:.02em;cursor:pointer;min-height:52px;position:relative}
.tabbar svg{width:24px;height:24px}
.tabbar .on{color:var(--sun)}
.tabbar .on::after{content:"";position:absolute;bottom:2px;width:18px;height:3px;border-radius:2px;background:var(--sun)}
.tabbar .count{position:absolute;top:2px;left:calc(50% + 6px);font-size:.78rem;height:1.35em;min-width:1.35em}
.tabbar .count[data-n="0"]{display:none}

/* ---------- list sheet (dialog) ---------- */
dialog.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:640px;max-height:min(88vh,860px);border-radius:22px 22px 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -20px 60px rgba(0,0,0,.35)}
dialog.sheet::backdrop{background:rgba(10,20,15,.55)}
dialog.sheet[open]{animation:sheetup .22s ease-out}
@keyframes sheetup{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.sheet-in{display:flex;flex-direction:column;max-height:inherit}
.sheet-hd{display:flex;align-items:center;gap:12px;padding:16px 18px 12px;border-bottom:1.5px solid var(--line)}
.sheet-hd h2{font-size:1.6rem;flex:1}
.sheet-hd .x{width:44px;height:44px;border-radius:50%;border:2px solid var(--pine);background:transparent;cursor:pointer;font-size:1.1rem;color:var(--pine)}
.sheet-bd{overflow:auto;padding:14px 18px;display:grid;gap:16px;overscroll-behavior:contain}
.sheet-ft{display:grid;gap:10px;padding:12px 18px calc(14px + env(safe-area-inset-bottom, 0px));border-top:1.5px solid var(--line);background:var(--paper-2)}
.sheet-ft .row2{display:flex;gap:10px;flex-wrap:wrap}
.sheet-ft .row2 .btn{flex:1 1 140px}
.empty{display:grid;gap:12px;justify-items:start;padding:12px 0}
.empty p{color:var(--muted)}
.lrow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:10px 12px;background:#fff;border:1.5px solid var(--line);border-radius:12px}
.lrow .nm{font-weight:700;line-height:1.3;min-width:0}
.lrow .nm small{display:block;font-weight:400;color:var(--muted);font-size:.82rem}
.lrow .rm{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:transparent;cursor:pointer;color:var(--muted)}
.lgroup h3{font:700 1.05rem/1 var(--f-sign);color:var(--brick);margin:0 0 8px;letter-spacing:.02em}
.lgroup .rows{gap:8px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom, 0px));transform:translate(-50%,20px);opacity:0;z-index:80;background:var(--ink);color:var(--paper-2);padding:12px 16px;border-radius:12px;font-weight:700;font-size:var(--fs-0);pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- print area ---------- */
#print-area{display:none}

/* ---------- páginas interiores ---------- */
.page-hero{position:relative;background:var(--pine);color:var(--on-dark);overflow:hidden;isolation:isolate}
.page-hero.night{background:var(--night)}
.page-hero .wrap{position:relative;z-index:2;padding-top:clamp(18px,4vw,40px);padding-bottom:clamp(120px,15vw,190px)}
.page-hero h1{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);color:var(--on-dark);font-weight:850;letter-spacing:-.018em;max-width:24ch}
.page-hero .kicker{margin-bottom:10px}
.page-hero .lede{color:var(--on-dark-mute);margin-top:14px}
.land-sm{height:clamp(130px,17vw,220px)}
.land-sm .sun-g,.land-sm .sun-g .arc,.land-sm .win{animation:none}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 14px;font:600 .98rem/1.2 var(--f-sign);color:var(--on-dark-mute)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs a{color:var(--on-dark);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.page-meta span{font:600 .92rem/1 var(--f-sign);padding:7px 11px;border-radius:999px;background:rgba(236,237,223,.12);color:var(--on-dark-mute)}
.page-body{padding-top:20px;padding-bottom:clamp(56px,8vw,96px);display:grid;gap:clamp(40px,6vw,64px)}
.page-body>*{min-width:0}
.answer{background:var(--paper-2);border:2px solid var(--pine);border-radius:18px;padding:18px 20px;box-shadow:6px 6px 0 var(--sun);max-width:820px;display:grid;gap:8px}
.answer .lbl{font:700 1.02rem/1 var(--f-sign);color:var(--brick);letter-spacing:.02em}
.answer p{font-size:1.12rem;line-height:1.6}
.block h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.25rem);margin-bottom:16px}
.block>.lede{margin:-6px 0 16px}
.prose{max-width:68ch;display:grid;gap:12px}
.prose p{line-height:1.65}
.tbl-wrap{overflow-x:auto;border:1.5px solid var(--pine);border-radius:14px;background:var(--paper-2);max-width:900px}
table.data{border-collapse:collapse;width:100%;font-size:.98rem}
table.data.wide{min-width:520px}
table.data th,table.data td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data thead th{background:var(--pine);color:var(--on-dark);font:600 1.02rem/1.2 var(--f-sign);letter-spacing:.01em}
table.data tbody th{font-weight:700;color:var(--pine)}
table.data tr:last-child td,table.data tr:last-child th{border-bottom:0}
.tbl-note{font-size:var(--fs-0);color:var(--muted);margin-top:10px;max-width:70ch}
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.card-link{display:grid;gap:8px;align-content:start;text-decoration:none;color:var(--ink);background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-card);padding:18px;transition:border-color .15s,transform .15s}
.card-link:hover{border-color:var(--pine)}
.card-link .ci{width:44px;height:44px;border-radius:12px;background:var(--pine);color:var(--sun);display:grid;place-items:center}
.card-link .ci svg{width:24px;height:24px}
.card-link h3{font-size:1.3rem}
.card-link p{color:var(--muted);font-size:var(--fs-0);line-height:1.5}
.card-link .go{font:700 1.02rem/1 var(--f-sign);color:var(--lake);margin-top:4px}
.card-link.dark{background:var(--night);border-color:#233128;color:#E6ECE7}
.card-link.dark h3{color:#F3F5EF}.card-link.dark p{color:#A9B6AE}.card-link.dark .go{color:var(--app-amber)}
.card-link.dark .ci{background:#1A231D;color:var(--app-amber)}
.kc-have{font:600 .98rem/1 var(--f-sign);color:var(--pine)}
.kc-bar{height:8px;border-radius:99px;background:var(--paper-3);overflow:hidden}
.kc-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--sun) 0 10px,var(--amber) 10px 20px,var(--ember) 20px 30px,var(--brick) 30px 40px)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills a,a.chip{text-decoration:none}
.pills a{font:600 1rem/1 var(--f-sign);padding:10px 14px;border-radius:999px;border:1.5px solid var(--pine);color:var(--pine);background:transparent}
.pills a:hover{background:var(--pine);color:var(--on-dark)}
.chip[aria-current=page]{background:var(--pine);color:var(--on-dark)}
.sources{font-size:var(--fs-0);color:var(--muted);max-width:75ch}
.sources h2{font-size:1.25rem;margin-bottom:8px}
.sources ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
.risks{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.risk{border-left:5px solid var(--ember);background:var(--paper-2);padding:14px 16px;border-radius:0 14px 14px 0;display:grid;gap:6px}
.risk h3{font-size:1.2rem}
.linklist{margin:0;padding:0;list-style:none;display:grid;gap:8px;max-width:820px}
.linklist li{background:var(--paper-2);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.radio-list{margin:0;padding:0;list-style:none;display:grid;gap:8px;max-width:620px}
.radio-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--pine);color:var(--on-dark);border-radius:12px;padding:12px 14px}
.radio-list small{display:block;color:var(--on-dark-mute);font-size:var(--fs-0)}
.radio-list b{white-space:nowrap;font:800 1.3rem/1.1 var(--f-display);font-variation-settings:"SOFT" 100;color:var(--sun);text-align:right}
.note{background:#FBEBD2;border-left:5px solid var(--amber);border-radius:0 12px 12px 0;padding:12px 14px;max-width:820px}
.plain-list{columns:2 180px;column-gap:24px;color:var(--muted);font-size:var(--fs-0);margin:0;padding-left:1.1em}
.app-teaser{display:grid;gap:22px}
.app-teaser .app-feats{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.tool-band{padding-block:clamp(28px,5vw,48px)}
.err-page{padding-block:40px 80px;display:grid;gap:18px;max-width:720px}

/* ---------- LIFELINE en móvil: sin teléfono dentro del teléfono ---------- */
@media (max-width:699px){
  .phone{aspect-ratio:auto;width:100%;border:1px solid #233128;border-radius:20px;box-shadow:none;background:#0F1411}
  .phone::before{display:none}
  .phone .poster{position:static;padding:26px 18px;gap:14px;background:radial-gradient(120% 90% at 50% 0%,#1A2A20 0%,#0F1411 70%)}
  .phone .poster svg.logo{width:64px;height:64px}
  .phone.loaded{height:min(82vh,760px)}
}

/* ---------- desktop ---------- */
@media (min-width:700px){
  .items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qr-card{display:flex}
}
@media (min-width:900px){
  .nav{display:flex}
  .top .list-btn{display:inline-flex}
  .tabbar{display:none}
  .site-foot .wrap{padding-bottom:48px}
  .toast{bottom:28px}
  dialog.sheet{margin:auto;border-radius:22px}
  .app-grid{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)}
  .phone-col{position:sticky;top:calc(var(--header-h) + 24px)}
  .hero .wrap{padding-bottom:clamp(300px,30vw,420px)}
  .chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}
}
@media (min-width:1000px){
  #test .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
  #test .section-head{position:sticky;top:calc(var(--header-h) + 32px)}
  #por-que .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 64px;align-items:center}
  #por-que .section-head{grid-column:1/-1;margin-bottom:8px}
  #por-que .manifesto{margin:0;font-size:clamp(1.9rem,1rem + 1.8vw,2.6rem);max-width:14ch}
}
@media (min-width:1100px){
  .items{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1200px){
  .hero .wrap{padding-bottom:250px;padding-top:64px}
  .land{height:560px}
  .land .sun-g{translate:260px 0}
  .land.land-sm{height:300px}
}

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  body.printing>*:not(#print-area){display:none!important}
  body.printing #print-area{display:block!important;color:#000;font:12pt/1.45 var(--f-body)}
  body.printing::before{display:none}
  #print-area h1{font:800 22pt/1.1 var(--f-display);margin:0 0 4mm;color:#000}
  #print-area h2{font:700 14pt/1.2 var(--f-display);margin:6mm 0 2mm;color:#000}
  #print-area .ln{border-bottom:1px solid #000;height:9mm}
  #print-area table{width:100%;border-collapse:collapse}
  #print-area td,#print-area th{border:1px solid #000;padding:2mm;text-align:left;vertical-align:top}
  #print-area .card{border:2px solid #000;border-radius:4mm;padding:4mm;width:85.6mm;min-height:54mm;margin-bottom:5mm}
  #print-area .foot-note{margin-top:6mm;font-size:9pt}
  @page{margin:14mm}
}
