/* ============================================================
   SergiLab · estilo claro minimal · monocromo blanco y negro
   ============================================================ */
/* Tipografías alojadas en la propia web (sin Google Fonts: no se envía la IP de los visitantes a terceros). Licencia OFL en assets/fonts. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;src:url(../fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format("woff2-variations"),url(../fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;src:url(../fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2-variations"),url(../fonts/bricolage-grotesque-latin-opsz-normal.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:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/hanken-grotesk-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/hanken-grotesk-latin-400-normal.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:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/hanken-grotesk-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/hanken-grotesk-latin-500-normal.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:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/hanken-grotesk-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/hanken-grotesk-latin-600-normal.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:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/hanken-grotesk-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/hanken-grotesk-latin-700-normal.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}

:root{
  --bg:#ffffff;
  --bg-soft:#f6f7f4;
  --bg-dark:#0c0d0a;
  --ink:#0c0d0a;
  --ink-soft:#5b6058;
  --line:#e7e8e2;
  --lime:#0c0d0a;      /* acento (monocromo): negro */
  --lime-deep:#0c0d0a; /* acento texto */
  --accent-hover:#2e302b;
  --on-accent:#ffffff;
  --silver:#b9bdc4;    /* acento sobre fondo oscuro */
  --good:#3aa76d;
  --watch:#e0a326;
  --bad:#e0533d;
  --radius:18px;
  --maxw:1120px;
  --shadow:0 1px 2px rgba(12,13,10,.04), 0 8px 30px rgba(12,13,10,.06);
  --font-display:'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-.02em; margin:0}
.mono{font-variant-numeric:tabular-nums; font-family:var(--font-display)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.muted{color:var(--ink-soft)}
section{padding:84px 0}
.eyebrow{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:600; color:var(--lime-deep)}

/* ---------- Header ---------- */
header.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; gap:24px; height:66px; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.logo{font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.03em; display:flex; align-items:center; gap:8px}
.logo b{color:var(--ink)}
.logo .dot{width:9px; height:9px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(12,13,10,.10)}
.nav-links{display:flex; gap:6px; margin-left:auto; align-items:center}
.nav-links a{padding:8px 12px; border-radius:10px; font-size:14.5px; font-weight:500; color:var(--ink-soft)}
.nav-links a:hover,.nav-links a.active{color:var(--ink); background:var(--bg-soft)}
.lang{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-left:8px}
.lang button{border:0; background:transparent; padding:7px 11px; font-family:var(--font-display); font-weight:600; font-size:13px; cursor:pointer; color:var(--ink-soft)}
.lang button.on{background:var(--ink); color:#fff}
.burger{display:none; margin-left:auto; background:transparent; border:0; font-size:24px; cursor:pointer}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px; font-weight:600; font-family:var(--font-display); font-size:15px; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--lime); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-dark{background:var(--ink); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{background:var(--bg-soft)}

/* ---------- Hero ---------- */
.hero{padding:64px 0 48px; position:relative; overflow:hidden}
.hero .wrap{position:relative; z-index:2; text-align:center}
.hero h1{font-size:clamp(27px,3.6vw,44px); max-width:24ch; font-weight:600; margin-left:auto; margin-right:auto}
.hero .lead{font-size:clamp(17px,2.2vw,21px); max-width:56ch; margin:22px auto 0; color:var(--ink-soft)}
.hero-actions{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; justify-content:center}
.hero-badge{display:inline-flex; align-items:center; gap:9px; background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:13.5px; font-weight:500; margin-bottom:26px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--good)}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:1}
.blob.a{width:420px;height:420px;background:#c9ccc6; top:-120px; right:-80px; opacity:.35}
.blob.b{width:300px;height:300px;background:#d9dbd6; bottom:-120px; left:-60px; opacity:.4}
.hero-mission{font-size:clamp(15px,1.7vw,18px); max-width:64ch; margin:18px auto 0; color:var(--ink-soft)}

/* onboarding sexo + edad */
.onb{margin:26px auto 0; background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:22px 24px; max-width:560px; box-shadow:var(--shadow); text-align:center; transition:border-color .2s, box-shadow .2s}
.onb.onb-ok{border-color:var(--lime-deep); box-shadow:0 0 0 4px rgba(12,13,10,.10)}
.onb-title{font-family:var(--font-display); font-weight:600; font-size:15.5px; margin:0 0 18px; color:var(--ink)}
.onb-row{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; justify-content:center}
.onb-actions{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; flex-wrap:wrap}
.onb-field{display:flex; flex-direction:column; gap:7px; text-align:left}
.onb-lab{font-family:var(--font-display); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft)}
.onb .seg{display:flex; border:1px solid var(--line); border-radius:11px; overflow:hidden}
.onb .seg button{border:0; background:transparent; padding:11px 20px; font-family:var(--font-body); font-size:14.5px; cursor:pointer; color:var(--ink-soft); transition:.12s}
.onb .seg button:hover{background:var(--bg-soft)}
.onb .seg button.on{background:var(--ink); color:#fff}
.onb input{width:96px; padding:11px 14px; border:1px solid var(--line); border-radius:11px; font-family:var(--font-body); font-size:14.5px}
.onb input:focus{outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 3px rgba(12,13,10,.10)}
.onb-hint{font-size:13px; color:var(--ink-soft); font-weight:500}
.onb.onb-ok .onb-hint{color:var(--lime-deep); font-weight:600}

/* checklist copiable + dónde hacer la prueba */
.checklist{background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:22px}
.copy-btn{font-size:14px; text-align:left}
.copy-btn span{white-space:normal}
.copied{margin-left:12px; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--lime-deep)}
.check-list{list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:9px 22px}
.check-list li{font-size:14px; padding-left:22px; position:relative}
.check-list li::before{content:"✓"; position:absolute; left:0; color:var(--lime-deep); font-weight:700}
.where{margin-top:4px}
.where h4{font-family:var(--font-display); font-size:14px; margin-bottom:10px; color:var(--ink-soft); font-weight:600}
.where ul{list-style:none; padding:0; margin:0; display:grid; gap:7px}
.where li{font-size:14px; color:var(--ink-soft); padding-left:16px; position:relative}
.where li::before{content:"›"; position:absolute; left:2px; color:var(--lime-deep); font-weight:700; font-family:var(--font-display)}

/* avatar + socials (Sobre mí) */
.avatar{width:92px; height:92px; border-radius:50%; object-fit:cover; border:3px solid var(--ink); margin-bottom:16px; display:block}
.socials{display:flex; flex-direction:column; gap:8px; margin-top:18px}
.sobre-wrap{max-width:680px; margin:0 auto; text-align:center}
.sobre-wrap .avatar{margin:0 auto 16px}
.sobre-wrap .about-prose{max-width:none; margin-top:20px}
.sobre-wrap .about-prose p:first-child{font-size:20px}
.sobre-wrap .socials{flex-direction:row; justify-content:center; flex-wrap:wrap; gap:20px; margin-top:24px}
.soc{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink)}
.soc:hover{color:var(--lime-deep)}

/* subtítulos de categoría (gadgets) */
.cat-h{font-family:var(--font-display); font-size:20px; margin:0 0 18px; padding-bottom:10px; border-bottom:2px solid var(--lime)}

/* chooser Mis recomendaciones */
.chooser{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px}
.choice{flex:1; min-width:150px; border:1px solid var(--line); background:var(--bg); border-radius:14px; padding:18px 20px; font-family:var(--font-display); font-weight:600; font-size:16px; cursor:pointer; transition:.15s}
.choice:hover{background:var(--bg-soft); transform:translateY(-2px)}
.choice.on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* book cards */
.book .book-tag{color:var(--lime-deep)}
.book-top{display:flex; gap:14px; align-items:flex-start}
.book-cover{width:66px; min-width:66px; height:98px; border-radius:8px; overflow:hidden; background:var(--bg-soft); border:1px solid var(--line); display:grid; place-items:center}
.book-cover img{width:100%; height:100%; object-fit:cover; display:block}
.book-cover.no-img::after{content:"📚"; font-size:26px; opacity:.45}
.book-head{flex:1}
.book-head h3{font-size:18px; margin-top:4px}
.book-author{font-size:13px; color:var(--ink-soft); margin-top:3px}

/* pruebas médicas con coste (Cómo mejorar) */
.medtest{display:flex; flex-direction:column; gap:8px}
.mt-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.mt-top h3{font-size:17px}
.medtest .cost{flex:none; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--on-accent); background:var(--lime); padding:5px 12px; border-radius:999px; white-space:nowrap}
.medtest .txt{font-size:14px; color:var(--ink-soft)}

/* lever box (Cómo mejorar) */
.lever-box{background:var(--bg-soft); border:1px solid var(--line); border-left:4px solid var(--lime); border-radius:14px; padding:20px}
.lever-box h4{font-family:var(--font-display); font-size:14px; margin-bottom:14px}

/* ---------- Grid utils ---------- */
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.section-head{max-width:60ch; margin-bottom:38px}
.section-head h2{font-size:clamp(28px,4vw,40px); margin-top:10px}
.section-head p{color:var(--ink-soft); margin-top:12px}

/* ---------- Cards ---------- */
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:transform .15s ease, box-shadow .2s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.topic-card{display:flex; flex-direction:column; gap:14px; min-height:180px}
.topic-card .ic{font-size:30px}
.topic-card .ic-svg{width:52px; height:52px; border-radius:14px; background:var(--bg-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:background .18s, color .18s, border-color .18s}
.topic-card .ic-svg svg{width:26px; height:26px}
.topic-card:hover .ic-svg{background:var(--ink); color:#fff; border-color:var(--ink)}
.topic-card h3{font-size:21px}
.topic-card .tc-head{display:flex; flex-direction:column; gap:10px}
.topic-card .tc-head:hover h3{color:var(--lime-deep)}
.topic-card .tc-links{margin-top:auto; display:flex; flex-direction:column}
.tc-link{font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink-soft); padding:9px 0; border-top:1px solid var(--line); transition:color .15s, padding-left .15s}
.tc-link:hover{color:var(--lime-deep); padding-left:5px}
.topic-card .tc-head-inline{flex-direction:row; align-items:center; gap:8px}
.topic-card .tc-head-inline h3{display:flex; align-items:center; gap:8px}
.tc-ic{font-size:.85em; line-height:1}
.hero-ic{font-size:.7em; vertical-align:middle}
/* Navegacion entre temas (seguir aprendiendo) */
.topic-nav{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.topic-nav-card{display:flex; flex-direction:column; gap:6px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:var(--bg); transition:border-color .15s, transform .15s}
.topic-nav-card:hover{border-color:var(--ink); transform:translateY(-2px)}
.tnc-label{font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--ink-soft)}
.tnc-name{font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--ink); display:flex; align-items:center; gap:8px}
@media(max-width:640px){ .topic-nav{grid-template-columns:1fr} }
/* Texto plegable en movil (suplementos/productos del paso 4) */
.card .txt.clamp{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .txt.clamp.clamp-open{display:block;-webkit-line-clamp:unset;line-clamp:unset}
.more-btn{background:none;border:0;color:var(--lime-deep);font-family:var(--font-display);font-weight:600;font-size:13px;padding:2px 0 0;cursor:pointer}

/* principios */
.principle{display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line)}
.principle .n{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--on-accent); background:var(--lime); width:30px;height:30px;border-radius:8px; display:grid;place-items:center; flex:none}
.principle h4{font-size:17px}
.principle p{margin:3px 0 0; font-size:14.5px; color:var(--ink-soft)}

/* ---------- Test cards ---------- */
.test{display:flex; flex-direction:column; gap:16px}
.test-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
.test .date{font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.test h3{font-size:19px; margin-top:6px}
.test .big{font-family:var(--font-display); font-weight:700; font-size:40px; line-height:1; letter-spacing:-.03em}
.test .big small{display:block; font-size:12.5px; font-weight:500; color:var(--ink-soft); letter-spacing:0; margin-top:6px; font-family:var(--font-body)}
.status-dot{width:11px;height:11px;border-radius:50%; flex:none; margin-top:6px}
.status-good{background:var(--good)} .status-watch{background:var(--watch)} .status-bad{background:var(--bad)}
.test .meaning{font-size:14.5px; color:var(--ink-soft)}
.metrics{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.metric{background:var(--bg); padding:11px 13px}
.metric .mk{font-size:12px; color:var(--ink-soft)}
.metric .mv{font-family:var(--font-display); font-weight:600; font-size:16px; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:7px}
.mv .tg{width:8px;height:8px;border-radius:50%}
.tg.good{background:var(--good)} .tg.watch{background:var(--watch)} .tg.bad{background:var(--bad)}
.test .foot{font-size:12.5px; color:var(--ink-soft); display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:12px; flex-wrap:wrap}

/* ---------- Evidence badges ---------- */
.ev{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:12px; padding:5px 11px; border-radius:999px; border:1px solid var(--line)}
.ev::before{content:""; width:7px;height:7px;border-radius:50%}
.ev-strong{color:#1f7a4d; background:#e9f7ef; border-color:#cdeedd} .ev-strong::before{background:var(--good)}
.ev-mod{color:#3a6ea5; background:#eaf2fb; border-color:#cfe0f4} .ev-mod::before{background:#3a82c4}
.ev-weak{color:#9a6a10; background:#fdf5e4; border-color:#f4e4bf} .ev-weak::before{background:var(--watch)}
.ev-myth{color:#a53b28; background:#fdecea; border-color:#f6cfc7} .ev-myth::before{background:var(--bad)}

/* ---------- Supplement cards ---------- */
.supp{display:flex; flex-direction:column; gap:14px}
.supp-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.supp-top h3{font-size:19px; margin-top:5px}
.supp .shop{font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tag-mine{font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:11px; font-weight:600; color:var(--lime-deep); background:#f1f2ef; border:1px solid #d4d6d0; padding:2px 8px; border-radius:999px}
.supp-meta{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.supp-meta > div{background:var(--bg); padding:11px 13px; display:flex; flex-direction:column; gap:3px}
.supp-meta .lbl{font-family:var(--font-display); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--lime-deep)}
.supp-meta span:last-child{font-size:13.5px}
.supp .txt{font-size:14px; color:var(--ink-soft)}
.supp-pains{display:flex; flex-wrap:wrap; gap:6px}
.pp{font-size:12px; background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:4px 10px; color:var(--ink-soft)}
.supp .btn{margin-top:auto; align-self:flex-start}
.supp .alt{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:4px}
.alt-link{font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--ink)}
.alt-link:hover{color:var(--lime-deep)}
.alt-note{font-size:12px; color:var(--ink-soft)}

/* nota de criterio / transparencia */
.criterio{background:var(--bg-soft); border:1px solid var(--line); border-left:4px solid var(--lime); border-radius:12px; padding:14px 18px; font-size:14px; color:var(--ink-soft); margin:0 0 18px; max-width:80ch}

/* search + goal filter */
.search-box{position:relative; margin-bottom:18px}
.search-box input{width:100%; padding:15px 18px 15px 46px; border:1px solid var(--line); border-radius:14px; font-family:var(--font-body); font-size:16px; background:var(--bg)}
.search-box input:focus{outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 4px rgba(12,13,10,.10)}
.search-box::before{content:"🔍"; position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:15px; opacity:.6}
.goal-label{font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--ink-soft); margin:0 0 10px}
.empty{padding:40px; text-align:center; color:var(--ink-soft); background:var(--bg-soft); border:1px dashed var(--line); border-radius:var(--radius)}

/* ---------- Not recommended ---------- */
.bad{border-left:4px solid var(--bad)}
.bad.tone-ojo{border-left-color:var(--watch)}
.bad-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px}
.bad-top h3{font-size:18px}
.verdict{font-family:var(--font-display); font-weight:600; font-size:11.5px; padding:4px 10px; border-radius:999px; white-space:nowrap; text-transform:uppercase; letter-spacing:.05em}
.verdict-mito,.verdict-riesgo{color:#a53b28; background:#fdecea}
.verdict-ojo{color:#9a6a10; background:#fdf5e4}
.bad .txt{font-size:14px; color:var(--ink-soft)}
.bad .better{margin:12px 0 0; font-size:13.5px; font-weight:500; color:var(--ink)}

/* ---------- Filters ---------- */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px}
.chip{border:1px solid var(--line); background:var(--bg); padding:8px 15px; border-radius:999px; font-size:14px; font-weight:500; cursor:pointer; font-family:var(--font-body); transition:.15s}
.chip:hover{background:var(--bg-soft)}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---------- Product cards ---------- */
.product{display:flex; flex-direction:column; gap:12px}
.product .shop{font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.product h3{font-size:19px}
.product .lbl{font-family:var(--font-display); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--lime-deep); margin-bottom:2px}
.product .txt{font-size:14px; color:var(--ink-soft)}
.product .btn{margin-top:auto; align-self:flex-start}

/* foto opcional de gadget/suplemento (oculta hasta que carga una imagen real) */
.p-cover{display:none; width:100%; height:160px; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line); place-items:center; margin-bottom:4px}
.p-cover img{max-width:88%; max-height:88%; width:auto; height:auto; object-fit:contain; display:block; opacity:0; transition:opacity .25s}

/* ---------- Topic detail ---------- */
.topic-hero{background:var(--bg-soft); border-bottom:1px solid var(--line); padding:70px 0 56px}
.topic-hero .ic{font-size:44px}
.topic-hero h1{font-size:clamp(34px,5vw,52px); margin-top:10px}
.block{padding:56px 0; border-bottom:1px solid var(--line); scroll-margin-top:84px}
.block h2{font-size:26px; margin-bottom:8px}
.step{display:flex; align-items:center; gap:14px}
.step-n{flex:none; width:38px; height:38px; border-radius:11px; background:var(--lime); color:var(--on-accent); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:19px}
.step-lead{font-size:18px; color:var(--ink-soft); max-width:66ch; margin-top:14px}
.sub-h{font-family:var(--font-display); font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft)}
.headlines{list-style:none; padding:0; margin:0; display:grid; gap:10px; max-width:640px}
.headlines a{display:flex; justify-content:space-between; align-items:center; gap:14px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px 18px; transition:border-color .15s, transform .15s}
.headlines a:hover{border-color:var(--lime-deep); transform:translateX(3px)}
.hl-name{font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink)}
.hl-go{font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--lime-deep); white-space:nowrap}
.actions-list{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px}
.actions-list li{background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:15px 18px; padding-left:46px; position:relative; font-size:15.5px}
.actions-list li::before{content:"→"; position:absolute; left:18px; color:var(--lime-deep); font-family:var(--font-display); font-weight:700}
.block a:not(.btn){color:var(--lime-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.block a:not(.btn):hover{color:var(--ink)}

/* ---------- Ciencia vs yo (áreas) ---------- */
.area{display:flex; flex-direction:column; gap:20px}
.area-head{display:flex; gap:14px; align-items:flex-start}
.area-head .ic{font-size:30px}
.area-head h3{font-size:22px}
.area-head p{margin:4px 0 0; font-size:14.5px}
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.twocol .col{background:var(--bg); padding:20px}
.col-mine{background:var(--bg-soft)}
.twocol h4{font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px}
.col-science h4{color:var(--lime-deep)}
.col-mine h4{color:var(--ink)}
.twocol ul{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.sci-list li{font-size:14px; line-height:1.55}
.sci-list li .ev{margin-right:6px; margin-bottom:4px}
.mine-list li{font-size:14px; line-height:1.55; padding-left:20px; position:relative}
.mine-list li::before{content:"›"; position:absolute; left:4px; color:var(--lime-deep); font-weight:700; font-family:var(--font-display)}
.notyet{background:#fff8e6; border:1px solid #f4e4bf; border-radius:12px; padding:13px 16px; font-size:13.5px; color:#8a6d1f; margin:0}

/* struggle + consejo de Sergi */
.twocol h5{font-family:var(--font-display); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; color:var(--ink-soft)}
.struggle{margin-top:4px}
.struggle > h4{font-family:var(--font-display); font-size:15px; margin-bottom:14px}
.sergi-says{margin:20px 0 0; padding:20px 22px; background:var(--bg-dark); color:#fff; border-radius:14px; font-size:16px; line-height:1.5; position:relative}
.sergi-says::before{content:"\201C"; position:absolute; top:2px; left:12px; font-family:var(--font-display); font-size:44px; color:var(--silver); opacity:.5}
.sergi-says{padding-left:44px}
.sergi-says cite{display:block; margin-top:10px; font-style:normal; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--silver)}
.sergi-says cite::before{content:""}

/* ---------- Semana de dieta ---------- */
.week{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.day h3{font-size:17px; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--lime)}
.day ul{list-style:none; padding:0; margin:0; display:grid; gap:0}
.day li{display:grid; gap:4px; padding:14px 0; border-top:1px solid var(--line)}
.day li:first-child{border-top:0; padding-top:2px}
.day li:last-child{padding-bottom:0}
.meal-m{font-family:var(--font-display); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft)}
.meal-f{font-size:14px; color:var(--ink); line-height:1.45}
.meal-macros{font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; margin-top:1px}

/* ---------- Entreno ---------- */
.w-goalnote{background:var(--bg-soft); border:1px solid var(--line); border-left:4px solid var(--lime); border-radius:12px; padding:13px 16px; font-size:14px; margin:0 0 22px; max-width:80ch}
.w-day{display:flex; flex-direction:column; gap:6px}
.w-daynum{font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--lime-deep)}
.w-day h3{font-size:17px}
.w-ex{list-style:none; padding:0; margin:8px 0 0; display:grid; gap:8px}
.w-ex li{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px; border-top:1px solid var(--line); padding-top:8px}
.w-ex li:first-child{border-top:0; padding-top:0}
.w-sr{font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap}

.w-extra{margin-top:28px; background:var(--bg); border:1px dashed var(--lime-deep); border-radius:16px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.w-extra-txt{display:flex; align-items:center; gap:12px; font-size:14.5px; max-width:60ch}
.w-extra-ic{font-size:24px}

/* ---------- Modal email ---------- */
.modal{position:fixed; inset:0; z-index:100; background:rgba(12,13,10,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px}
.modal[hidden]{display:none}
.modal-card{background:var(--bg); border-radius:20px; padding:32px 28px; max-width:440px; width:100%; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-x{position:absolute; top:14px; right:16px; background:transparent; border:0; font-size:26px; line-height:1; cursor:pointer; color:var(--ink-soft)}
.modal-card h3{font-size:22px}
.modal-card > p{color:var(--ink-soft); margin:10px 0 20px; font-size:15px}
#mail-form{display:flex; flex-direction:column; gap:10px}
#mail-input{padding:13px 15px; border:1px solid var(--line); border-radius:12px; font-family:var(--font-body); font-size:16px}
#mail-input:focus{outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 3px rgba(12,13,10,.10)}
.modal-note{font-size:12px; color:var(--ink-soft); margin:14px 0 0; text-align:center}
.modal-ok{font-family:var(--font-display); font-weight:600; color:var(--lime-deep); text-align:center; margin:6px 0 0}

/* camino guiado (home) */
.journey{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:820px){.journey{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.journey{grid-template-columns:1fr}}
.jstep{display:flex; flex-direction:column; gap:9px; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:22px; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .2s, border-color .2s}
.jstep:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--lime)}
.jn{width:34px; height:34px; border-radius:50%; background:var(--lime); color:var(--on-accent); font-family:var(--font-display); font-weight:700; display:grid; place-items:center; font-size:16px}
.jstep h3{font-size:18px}
.jstep p{font-size:14px; color:var(--ink-soft); flex:1; margin:0}
.jgo{font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--lime-deep)}

/* proteína: equivalencias */
.prot-hero{font-family:var(--font-display); font-weight:600; font-size:19px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:0 0 20px; line-height:1.4}
.prot-eq{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media(max-width:640px){.prot-eq{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.prot-eq{grid-template-columns:1fr}}
.peq{display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.pei{font-size:20px}
.pen{flex:1; font-size:14px}
.pev{font-weight:600; font-size:14px; color:var(--lime-deep)}

/* packs por edad */
.pack-intro{background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--lime); border-radius:12px; padding:14px 16px; font-size:15px; color:var(--ink); margin:16px 0 18px; max-width:82ch; line-height:1.5}
.rec-sep{border:0; border-top:1px solid var(--line); margin:40px 0 28px}

/* filosofía + citas */
.big-quote{font-family:var(--font-display); font-weight:600; font-size:24px; line-height:1.3; color:var(--ink); border-left:3px solid var(--lime); padding:6px 0 6px 18px; margin:0 0 26px; max-width:70ch}
.philo{list-style:none; padding:0; margin:0; display:grid; gap:14px; max-width:82ch}
.philo li{position:relative; padding-left:26px; font-size:16px; color:var(--ink); line-height:1.55}
.philo li::before{content:"→"; position:absolute; left:0; color:var(--lime-deep); font-family:var(--font-display); font-weight:700}

/* modo (fase) + formato + banco de platos */
.modo-wrap{margin-top:28px}
.seg-modo{flex-wrap:wrap}
.modo-desc{margin-top:12px; font-size:15px; color:var(--ink-soft); max-width:82ch; line-height:1.5}
.formato-bar{margin-bottom:22px}
.band-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.veg-intro{background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--lime); border-radius:12px; padding:16px 18px; font-size:15px; line-height:1.55; color:var(--ink); margin:0 0 24px; max-width:90ch}
.pool{display:grid; gap:40px}
.pool-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--ink)}
.pool-h{font-size:22px; margin:0}
.pool-count{font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.dish{display:flex; flex-direction:column; gap:0; padding:22px}
.dish-opt{align-self:flex-start; font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:4px 10px; margin:0 0 12px}
.dish h4{font-size:18px; line-height:1.25; margin:0 0 10px}
.dish-prep{font-size:14.5px; color:var(--ink-soft); margin:0 0 16px; line-height:1.55}
.dish-eq{margin-top:auto; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:10px 14px}
.eq-lbl{display:block; font-family:var(--font-display); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:3px}
.dish-prot{font-size:13.5px; color:var(--ink); font-weight:600; margin:0; line-height:1.45}
.meal-eq{margin:6px 0 2px; padding:8px 12px}
.meal-eq .dish-prot{font-size:12.5px}
.calc-cta{grid-column:1/-1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:4px}
.calc-cta .btn{width:100%; justify-content:center; font-size:16px; padding:15px 22px}
.calc-cta-hint{font-size:13px; color:var(--lime-deep); font-weight:600; margin:0; min-height:1em}
.calc-cta-hint.err{color:#c0392b}
section{scroll-margin-top:80px}

/* tooltip (nube explicativa al pasar el ratón) */
.lbl-tip{position:relative; display:inline-flex; align-items:center; gap:7px}
.tip-i{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--line); color:var(--ink-soft); font-size:11px; font-weight:700; font-style:normal; cursor:help; font-family:var(--font-display); text-transform:none; letter-spacing:0}
.tip{position:absolute; bottom:calc(100% + 8px); left:0; width:min(280px,78vw); background:rgba(20,22,18,.92); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); color:#fff; font-family:var(--font-body); font-weight:400; font-size:12.5px; line-height:1.45; text-transform:none; letter-spacing:0; padding:11px 13px; border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.28); opacity:0; visibility:hidden; transform:translateY(5px); transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:30; pointer-events:none}
.lbl-tip:hover .tip, .tip-i:focus .tip{opacity:1; visibility:visible; transform:translateY(0)}
.modal:not([hidden]) .modal-card{animation:modalpop .28s cubic-bezier(.2,.8,.2,1)}
@keyframes modalpop{from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none}}
.modal-card p.m-teaser{display:inline-block; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--lime-deep); background:#f1f2ef; border:1px solid #d4d6d0; padding:6px 12px; border-radius:999px; margin:0 0 16px}

/* ---------- Calculadora ---------- */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.calc-form{display:grid; grid-template-columns:1fr 1fr; gap:16px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--ink-soft)}
.field input, .field select{padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-family:var(--font-body); font-size:15px; background:var(--bg); width:100%}
.field input:focus, .field select:focus{outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 3px rgba(12,13,10,.10)}
.seg{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.seg button{flex:1; border:0; background:transparent; padding:11px; font-family:var(--font-body); font-size:14px; cursor:pointer; color:var(--ink-soft)}
.seg button.on{background:var(--ink); color:#fff}
.calc-result{background:var(--bg-dark); color:#fff; border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:20px; position:sticky; top:86px}
.kcal{display:flex; align-items:baseline; gap:10px}
.kcal #kcal-num{font-family:var(--font-display); font-weight:700; font-size:52px; line-height:1; color:#ffffff}
.kcal-lbl{font-size:14px; color:#a7ab9f}
.macros{display:grid; gap:1px; background:#23261e; border:1px solid #23261e; border-radius:12px; overflow:hidden}
.macro{background:var(--bg-dark); padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.macro .m-lbl{font-size:14px; color:#c9ccc0}
.macro .m-val{font-family:var(--font-display); font-weight:600; font-size:17px; color:#fff}
.macro .m-cal{font-size:12px; color:#8a8e82; min-width:66px; text-align:right}
.protein-box{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:16px}
.pb-title{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--silver); margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em}
.protein-box p{font-size:14px; color:#e7e8e2; margin:0; line-height:1.55}
.protein-box .muted{color:#a7ab9f}
.calc-note{font-size:12.5px; color:#8a8e82; margin:0}

/* ---------- Videos ---------- */
.video{aspect-ratio:9/13; border-radius:var(--radius); background:linear-gradient(160deg,#111 0%,#2a2d24 100%); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; position:relative; overflow:hidden; cursor:pointer; border:1px solid var(--line)}
.video:hover{transform:translateY(-3px)}
.video .play{position:absolute; top:16px; right:16px; width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.15); display:grid; place-items:center; font-size:15px}
.video .vtag{font-family:var(--font-display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--silver)}
.video h3{color:#fff; font-size:18px; margin-top:6px}

/* ---------- CTA band / footer ---------- */
.band{background:var(--bg-dark); color:#fff; border-radius:24px; padding:56px; text-align:center; margin:0 24px}
.band h2{color:#fff; font-size:clamp(26px,4vw,38px); max-width:22ch; margin:0 auto}
.band p{color:#a7ab9f; margin:14px auto 26px; max-width:50ch}
footer{background:var(--bg-dark); color:#c9ccc0; margin-top:84px; padding:56px 0 40px}
footer a{color:#fff}
footer .cols{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between}
footer .logo{color:#fff}
footer .disc{font-size:12.5px; color:#8a8e82; border-top:1px solid #23261e; margin-top:34px; padding-top:22px; display:grid; gap:10px; max-width:80ch}
.about-prose{max-width:62ch}
.about-prose p{font-size:18px; margin:0 0 20px}
.about-prose p:first-child{font-size:22px; font-family:var(--font-display); line-height:1.4}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  /* Nav a menu hamburguesa (5 enlaces largos ya no caben) */
  .nav-links{display:none; position:absolute; top:66px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; padding:12px; gap:2px}
  .nav-links.open{display:flex}
  .nav-links a{width:100%; padding:12px 14px; font-size:15.5px}
  .burger{display:block}
  .lang{order:-1; margin-left:auto}
}
@media(max-width:720px){
  section{padding:60px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .band{padding:40px 22px; margin:0 16px}
  .metrics{grid-template-columns:1fr}
  .twocol{grid-template-columns:1fr}
  .week{grid-template-columns:1fr}
  .check-list{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .calc-form{grid-template-columns:1fr}
  .calc-result{position:static}
  .chooser{gap:8px}
  .choice{min-width:calc(50% - 6px)}
}
/* ---------- Movil fino (<=480px) ---------- */
@media(max-width:480px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  section{padding:46px 0}
  .card{padding:18px}
  .block{padding:40px 0}
  .block h2{font-size:23px}
  .checklist{padding:18px}
  .band{padding:32px 20px; margin:0 12px; border-radius:20px}
  .band h2{font-size:24px}
  .topic-hero{padding:46px 0 38px}
  .supp-meta{grid-template-columns:1fr}
  .big-quote{font-size:20px}
  .modal-card{padding:26px 20px}
  .modal-card h3{font-size:20px}
  .kcal #kcal-num{font-size:44px}
  .nav-inner{padding:0 18px}
  .sobre-wrap .socials{gap:12px}
  .sobre-wrap .about-prose p:first-child{font-size:19px}
  .step-lead{font-size:16px}
  .actions-list li{font-size:15px; padding-left:42px}
  .actions-list li::before{left:16px}
  .onb{padding:18px 16px}
  .onb .seg button{padding:11px 16px}
  .w-extra{flex-direction:column; align-items:flex-start}
}

/* ---------- Monocromo: acentos sobre fondos oscuros ---------- */
.band .btn-primary{background:#fff; color:var(--ink)}
.band .btn-primary:hover{background:#e7e8e2}
footer .logo .dot{background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.15)}

/* ---------- Packs (recomendaciones) ---------- */
.packs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start}
.pack{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); transition:border-color .2s, box-shadow .2s}
.pack:hover{border-color:#c9ccc6}
.pack[open]{box-shadow:var(--shadow)}
.pack-featured{grid-column:1/-1; border:2px solid var(--ink)}
.pack summary{list-style:none; cursor:pointer; padding:22px 22px 18px; display:grid; gap:14px}
.pack summary::-webkit-details-marker{display:none}
.pack-head{display:flex; align-items:flex-start; gap:14px}
.pack-n{flex:none; width:38px; height:38px; border-radius:11px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.02em}
.pack-titles{flex:1; min-width:0}
.pack-titles h3{font-size:21px; margin:2px 0 4px}
.pack-tag{margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.45}
.pack-badge{flex:none; font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:#fff; border-radius:999px; padding:5px 11px}
.pack-chips{display:flex; flex-wrap:wrap; gap:6px}
.pack-chip{font-size:13px; font-weight:600; color:var(--ink); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:5px 12px}
.pack-toggle{font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.pack .pt-open{display:none}
.pack[open] .pt-open{display:inline}
.pack[open] .pt-closed{display:none}
.pack-body{padding:0 22px 22px; border-top:1px solid var(--line)}
.pack-why{font-size:14.5px; line-height:1.6; color:var(--ink); margin:16px 0 6px; max-width:80ch}
.pack-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--line)}
.pack-why + .pack-row{border-top:0}
.pack-row-info{display:grid; gap:4px; min-width:0}
.pack-row-top{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.pack-row-top b{font-family:var(--font-display); font-size:16px}
.pack-row-top .ev{font-size:11px; padding:3px 9px}
.pack-dose{font-size:13.5px; color:var(--ink-soft); line-height:1.45}
.pack-note{font-size:12.5px; color:var(--ink); font-weight:600}
.pack-buy{flex:none; padding:10px 16px; font-size:13.5px}
@media (max-width:720px){
  .packs{grid-template-columns:1fr}
  .pack summary{padding:18px 16px 16px}
  .pack-body{padding:0 16px 16px}
  .pack-badge{display:none}
  .pack-row{flex-direction:column; align-items:stretch}
  .pack-buy{justify-content:center}
}

/* ---------- Recomendaciones: pasos edad + objetivo ---------- */
.rec-steps{display:grid; gap:6px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 4px; margin:0 0 36px}
.rec-step .filters{margin-bottom:18px}
.step-q{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); margin:0 0 12px}
.step-dot{flex:none; width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700}
.pack-agenote{margin:0; font-size:13.5px; line-height:1.5; color:var(--ink); background:var(--bg-soft); border-radius:10px; padding:9px 12px}
.pack-rec:not(.pack-featured){border-color:var(--ink)}
.goal-active{font-size:14px; color:var(--ink-soft); margin:0 0 12px}
.link-btn{background:none; border:0; padding:0; font:inherit; color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
@media (max-width:720px){ .rec-steps{padding:16px 16px 2px} }

/* ---------- Recomendaciones: paso 3 + pack personalizado ---------- */
.step-hint{font-size:13px; color:var(--ink-soft); margin:-6px 0 12px}
.step-err{color:#c0392b; font-weight:600; margin:10px 0 0; min-height:1em}
.step3-btns{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.my-pack{margin:0 0 8px; scroll-margin-top:84px}
.pack-mine{box-shadow:var(--shadow)}
.my-pack-head{padding:24px 22px 18px}
.my-pack-head h2{font-size:24px; margin:6px 0 8px}
.pack-mine .pack-body{border-top:1px solid var(--line)}
.pack-mine .pack-row:first-child{border-top:0}
.pack-from{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:3px 9px}
.pack-why-item{font-size:14px; color:var(--ink); line-height:1.5}
.pack-skip{margin-top:6px; padding:14px 16px; background:var(--bg-soft); border:1px dashed #c9ccc6; border-radius:12px}
.pack-skip-h{font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 8px}
.pack-skip p{font-size:13.5px; line-height:1.5; margin:0 0 6px}
#catalog{scroll-margin-top:84px}
@media (max-width:720px){ .step3-btns .btn{width:100%; justify-content:center} .my-pack-head{padding:18px 16px 14px} }

/* Producto de marca propia (transparencia) */
.tag-own{font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--ink); border-radius:999px; padding:3px 9px; margin-left:4px}
.own-note{font-size:13px; color:var(--ink); background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:8px 11px; margin:0}
.consent{display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.45; color:var(--ink-soft); text-align:left; cursor:pointer}
.consent input{margin-top:2px; width:16px; height:16px; flex:none; accent-color:var(--ink)}
.consent a{color:var(--ink); text-decoration:underline}

/* Páginas legales */
.legal{max-width:760px; padding-top:48px; padding-bottom:40px}
.legal h1{font-size:clamp(30px,5vw,42px); margin:10px 0 6px}
.legal h2{font-size:20px; margin:34px 0 10px}
.legal p, .legal li{font-size:16px; line-height:1.65; color:var(--ink)}
.legal ul{padding-left:20px}
.legal a{color:var(--ink); text-decoration:underline}
.todo{background:#fff2a8; padding:0 4px; border-radius:4px; font-weight:600}
footer .disc a{color:#c9ccc0; text-decoration:underline}