@font-face{font-family:'PP Editorial New';src:url('../fts/PPEditorialNew-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block;}
@font-face{font-family:'PP Editorial New';src:url('../fts/PPEditorialNew-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:block;}
@font-face{font-family:'InterReal';src:url('../fts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block;}
@font-face{font-family:'PlexMonoReal';src:url('../fts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block;}

:root{
  --papel:#F4EFE6;        /* papel cálido — no el hueso frío de OS1 */
  --ink:#211E19;          /* negro cálido */
  --gray:#8B857A;
  --faint:rgba(33,30,25,0.12);
  --rojo:#B11226;         /* solo vive en el logo */
  --acento:#1F3A5F;    /* tinta de Criterio */
  --tint:rgba(31,58,95,0.06);        /* fondo suave del acento */

  --serif:'PP Editorial New', Georgia, serif;   /* stand-in PP Editorial New */
  --sans:'InterReal', system-ui, sans-serif;
  --mono:'PlexMonoReal', ui-monospace, monospace;
  --maxw:1060px;
  --pad:clamp(4.5rem,11vh,8rem);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--sans); background:var(--papel); color:var(--ink); line-height:1.62; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:clamp(1.5rem,6vw,4rem); padding-right:clamp(1.5rem,6vw,4rem); }
.eyebrow{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray); }
.index{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--acento); display:block; margin-bottom:1.2rem; }
h2.title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.22; letter-spacing:-0.01em; }
.btn{ display:inline-flex; align-items:center; gap:0.6rem; font-family:var(--sans); font-weight:500; font-size:0.95rem; background:var(--acento); color:var(--papel); padding:0.9rem 1.6rem; border-radius:2px; transition:transform .25s ease, filter .25s ease; }
.btn:hover{ filter:brightness(1.08); }
.btn .a{ transition:transform .25s ease; } .btn:hover .a{ transform:translateX(3px); }

header.bar{ position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:0.9rem clamp(1.5rem,6vw,4rem); background:rgba(244,239,230,0.86); backdrop-filter:saturate(120%) blur(8px); border-bottom:1px solid var(--faint); }
.lock{ display:flex; align-items:center; gap:0.7rem; }
.lock img{ height:30px; width:auto; display:block; }
.lock .desc{ font-family:var(--sans); font-weight:500; font-size:1.05rem; letter-spacing:0.01em; color:var(--ink); }
header .h-cta{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--acento); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .35s ease, transform .35s ease, visibility .35s; }
.bar.scrolled .h-cta{ opacity:1; visibility:visible; transform:none; }

.hero{ min-height:100vh; display:flex; align-items:center; padding:7rem 0 4rem; }
.hero .eyebrow{ display:block; margin-bottom:2rem; }
.hero h1{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(2.6rem,6.5vw,5rem); line-height:1.08; letter-spacing:-0.02em; margin-bottom:1.8rem; }
.hero .lead{ font-size:1.18rem; color:var(--ink); max-width:46ch; margin-bottom:2.4rem; }
.hero .lead b{ font-weight:600; }
.hero .sub{ color:var(--gray); }

section.blk{ padding:var(--pad) 0; border-top:1px solid var(--faint); }
.blk h2.title{ max-width:24ch; margin-bottom:1.6rem; }
.blk p{ max-width:60ch; margin-bottom:1.2rem; color:var(--ink); }
.blk p.mut{ color:var(--gray); }

.sintomas{ list-style:none; margin:1.4rem 0 0; display:flex; flex-direction:column; gap:0.8rem; }
.sintomas li{ position:relative; padding-left:1.7rem; font-family:var(--sans); font-size:1.14rem; line-height:1.55; color:var(--ink); max-width:52ch; }
.sintomas li::before{ content:"—"; position:absolute; left:0; color:var(--acento); }

.lleva{ list-style:none; margin:2rem 0 0; display:grid; grid-template-columns:1fr; gap:1.1rem; }
.lleva li{ padding-left:1.5rem; border-left:3px solid var(--acento); }
.lleva li strong{ font-family:var(--sans); font-weight:600; font-size:1.05rem; letter-spacing:-0.005em; display:block; margin-bottom:0.15rem; }
.lleva li span{ color:var(--gray); font-size:0.98rem; }

.quien{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-top:1rem; }
.quien .card h3{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:1rem; }
.quien .es h3{ color:var(--acento); }
.quien .no h3{ color:var(--gray); }
.quien .card{ padding-left:1.5rem; }
.quien .es{ border-left:2px solid var(--acento); }
.quien .no{ border-left:1px solid var(--faint); }
.quien .no li{ color:var(--gray); }
.quien ul{ list-style:none; display:flex; flex-direction:column; gap:0.7rem; }
.quien li{ font-size:1.02rem; }
.quien .link{ color:var(--acento); border-bottom:1px solid var(--acento); }

.prueba{ background:var(--tint); }
.prueba .q{ font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.4; max-width:32ch; margin:1.4rem 0 1.6rem; }
.testi{ display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:center; }
.portrait{ width:132px; height:132px; border-radius:50%; overflow:hidden; border:1px solid rgba(31,58,95,0.20); flex:none; }
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.prueba .who{ font-family:var(--mono); font-size:0.76rem; letter-spacing:0.07em; line-height:1.65; color:var(--gray); text-transform:uppercase; }
.prueba .who b{ font-weight:400; color:var(--ink); }
.prueba .who .loc{ display:block; }
.prueba .count{ font-family:var(--serif); color:var(--acento); }

.reg{ font-size:0.62em; vertical-align:super; line-height:0; }

.acceso{ text-align:center; }
.precio{ margin:3rem auto 3.6rem; padding:1.7rem 0; border-top:1px solid var(--faint); border-bottom:1px solid var(--faint); max-width:30rem; }
.precio .cifra{ font-family:var(--serif); font-size:1.72rem; line-height:1.2; letter-spacing:-0.005em; color:var(--ink); }
.precio .cifra .iva{ font-family:var(--sans); font-weight:400; font-size:0.52em; letter-spacing:0.01em; color:var(--gray); margin-left:0.45rem; }
.precio .total{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--gray); margin-top:0.45rem; }
.precio .vig{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.11em; line-height:1.6; text-transform:uppercase; color:var(--acento); opacity:0.8; margin-top:1.15rem; display:block; }
.dudas{ font-size:0.8rem; line-height:1.7; color:var(--gray); opacity:0.85; margin:2.2rem auto 0; max-width:36ch; }
.dudas a{ color:var(--acento); border-bottom:1px solid var(--acento); }
.acceso .inner{ max-width:640px; margin:0 auto; }
.acceso h2.title{ margin:0 auto 1.4rem; }
.acceso p{ margin:0 auto; color:var(--gray); max-width:48ch; }

footer{ padding:3.5rem 0 3rem; border-top:1px solid var(--faint); }
footer .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:2.5rem; flex-wrap:wrap; }
footer .lock img{ height:34px; }
footer .ini{ font-family:var(--serif); font-style:italic; color:var(--gray); margin-top:0.7rem; }
footer nav{ display:flex; flex-direction:column; gap:0.6rem; text-align:right; }
footer nav a{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray); }
footer nav a:hover{ color:var(--acento); }
footer .bottom{ margin-top:2.4rem; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray); }

/* Entrada por scroll. El contenido es visible por defecto: la ocultación
   solo se aplica si el script confirmó que puede revelarlo (clase .js en
   <html>). Si el script falla, la página se ve completa. */
.fade{ opacity:1; transform:none; }
html.js .fade{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
html.js .fade.in{ opacity:1; transform:none; }
@media (max-width:760px){ .quien{ grid-template-columns:1fr; gap:1.8rem; } .testi{ grid-template-columns:1fr; gap:1.4rem; } footer .top{ flex-direction:column;} footer nav{ text-align:left; } }
@media (prefers-reduced-motion:reduce){ .fade, html.js .fade{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} }