/* Riera Nutrición — hoja de estilos compartida */

:root{
  --ground:#F4F3EE; --surface:#FFFFFF; --surface-2:#ECEBE2;
  --ink:#1A241E; --ink-soft:#4C574F; --line:#DEDCD1;
  --forest:#1E3A2B; --forest-2:#162E20; --moss:#5E7A5F;
  --sand:#B4884F; --on-forest:#EEF2E8;
  --maxw:64rem;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Figtree", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#10140F; --surface:#171C15; --surface-2:#1F251C;
    --ink:#E9EBE3; --ink-soft:#A7B1A4; --line:#2C3328;
    --forest:#24402F; --forest-2:#1C3324; --moss:#8FB08D;
    --sand:#CE9E6F; --on-forest:#EEF2E8;
  }
}
:root[data-theme="dark"]{
  --ground:#10140F; --surface:#171C15; --surface-2:#1F251C;
  --ink:#E9EBE3; --ink-soft:#A7B1A4; --line:#2C3328;
  --forest:#24402F; --forest-2:#1C3324; --moss:#8FB08D;
  --sand:#CE9E6F; --on-forest:#EEF2E8;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:500; line-height:1.14; text-wrap:balance; margin:0}
h1{font-size:clamp(2.3rem,1.6rem + 3vw,3.5rem); letter-spacing:-.015em}
h2{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.3rem); letter-spacing:-.01em}
h3{font-size:1.15rem; font-weight:600; font-family:var(--f-body)}
p{margin:0}
a{color:inherit}
img{display:block; max-width:100%; height:auto}
strong{font-weight:600}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:1.5rem}
.prose{max-width:36rem}
.eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--moss); margin:0 0 1rem;
}
.section{padding-block:clamp(3.25rem,2rem + 5.5vw,5.5rem)}
.section + .section{border-top:1px solid var(--line)}
.muted{color:var(--ink-soft)}
.center{text-align:center}

/* ---------- botones ---------- */
.btn{
  --bg:var(--forest); --fg:var(--on-forest);
  display:inline-flex; align-items:center; gap:.5rem; background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-weight:600; font-size:.95rem; text-decoration:none;
  padding:.72rem 1.15rem; border-radius:8px; border:0; cursor:pointer; white-space:nowrap;
  transition:background .15s ease;
}
.btn:hover{background:var(--forest-2)}
.btn.ghost{--bg:transparent; --fg:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.on-dark{--bg:var(--on-forest); --fg:var(--forest)}
.btn.on-dark:hover{background:#fff}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem}

/* ---------- cabecera / nav ---------- */
header.site{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:1.5rem; padding-block:.9rem}
.brand{font-family:var(--f-display); font-weight:600; font-size:1.15rem; letter-spacing:-.01em; text-decoration:none; color:var(--ink)}
.brand span{color:var(--moss)}
.nav-links{display:flex; gap:1.35rem; margin-left:auto; font-size:.92rem}
.nav-links a{color:var(--ink-soft); text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
@media(max-width:820px){ .nav-links{display:none} }

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,1rem + 4vw,4rem); align-items:center}
.hero-photo{position:relative}
.hero-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px}
.hero-tag{
  position:absolute; left:-1rem; bottom:1.5rem; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:.7rem .9rem; box-shadow:0 12px 30px -12px rgba(0,0,0,.28); max-width:15rem;
}
.hero-tag b{font-family:var(--f-display); font-size:1.02rem}
.hero-tag small{color:var(--ink-soft); font-size:.82rem; line-height:1.45; display:block; margin-top:.25rem}
.hero .lede{margin:1.4rem 0 0; color:var(--ink-soft); font-size:1.12rem}
.cred{margin-top:1.6rem; font-size:.86rem; color:var(--ink-soft); display:flex; gap:.5rem; align-items:baseline}
.cred::before{content:""; width:1.6rem; height:1px; background:var(--moss); display:inline-block; transform:translateY(-.28em); flex:none}
@media(max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero-photo{order:-1; max-width:min(22rem,100%)}
  .hero-tag{position:static; max-width:none; margin-top:.7rem; box-shadow:none; border-radius:8px}
}

/* ---------- page header (páginas internas) ---------- */
.page-head{padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem) clamp(2rem,1rem + 3vw,3rem)}
.page-head p.lede{margin-top:1.1rem; color:var(--ink-soft); font-size:1.12rem; max-width:38rem}

/* ---------- lista de problemas ---------- */
.problem ul{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.85rem; max-width:40rem}
.problem li{display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start}
.problem li::before{content:""; margin-top:.62em; width:.5rem; height:.5rem; border-radius:2px; background:var(--sand); flex:none}
.pull{margin-top:2rem; font-family:var(--f-display); font-size:1.3rem; line-height:1.4; max-width:38rem}
.pull b{color:var(--forest); font-weight:600}
:root[data-theme="dark"] .pull b{color:var(--moss)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pull b{color:var(--moss)} }

/* ---------- panel verde ---------- */
.panel{background:var(--forest); color:var(--on-forest)}
.panel h1,.panel h2,.panel h3{color:var(--on-forest)}
.panel .eyebrow{color:color-mix(in srgb,var(--on-forest) 70%,transparent)}

/* ---------- pasos ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:2.5rem; counter-reset:s}
.steps.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){ .steps.four{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .steps.four{grid-template-columns:1fr} }
.step{counter-increment:s}
.step .n{font-family:var(--f-mono); font-size:.8rem; font-weight:700; letter-spacing:.1em; color:color-mix(in srgb,var(--on-forest) 60%,transparent)}
.step .n::before{content:"0" counter(s)}
.step h3{margin:.6rem 0 .5rem; color:var(--on-forest); font-family:var(--f-display); font-weight:500; font-size:1.25rem}
.step p{color:color-mix(in srgb,var(--on-forest) 82%,transparent); font-size:.98rem}
@media(max-width:760px){ .steps{grid-template-columns:1fr; gap:1.4rem} }

/* ---------- layout 2 columnas ---------- */
.layout-2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,1rem + 4vw,4rem); align-items:center}
.layout-2 > *{min-width:0}
.layout-2.top{align-items:start}
@media(max-width:820px){ .layout-2{grid-template-columns:1fr} }

/* ---------- ticket ---------- */
.receipt{
  background:var(--surface); color:var(--ink); font-family:var(--f-mono); font-size:.82rem; line-height:1.9;
  padding:1.6rem 1.5rem; max-width:min(22rem,100%); border-radius:2px; box-shadow:0 20px 40px -20px rgba(0,0,0,.3);
}
.receipt::before,.receipt::after{
  content:""; display:block; height:8px; margin-inline:-1.5rem;
  background:repeating-linear-gradient(-45deg,var(--surface) 0 6px,transparent 6px 12px);
}
.receipt .r-h{text-align:center; font-weight:700; letter-spacing:.08em; padding-block:.5rem 1rem}
.receipt .r-row{display:flex; justify-content:space-between; gap:.6rem; align-items:baseline}
.receipt .r-row span:first-child{flex:1; border-bottom:1px dotted var(--line); line-height:1.5}
.receipt .r-row span:last-child{flex:none}
.receipt .r-tot{display:flex; justify-content:space-between; gap:.6rem; border-top:1px dashed var(--ink-soft); margin-top:.9rem; padding-top:.7rem; font-weight:700}
.receipt .r-tot .amt{color:var(--sand)}
.receipt .r-foot{text-align:center; color:var(--ink-soft); padding-top:1rem; font-size:.72rem; white-space:normal; line-height:1.6}

/* ---------- chips supermercados ---------- */
.chips{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem}
.chip{font-family:var(--f-mono); font-size:.78rem; padding:.4rem .7rem; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); background:var(--surface)}

/* ---------- tabla de planes ---------- */
.table-scroll{overflow-x:auto}
table.plans{border-collapse:collapse; width:100%; min-width:34rem; font-size:.95rem}
table.plans th,table.plans td{text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:top}
table.plans thead th{font-family:var(--f-body); font-weight:600; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft)}
table.plans tbody th{font-weight:500; color:var(--ink-soft)}
.plan-name{font-family:var(--f-display); font-size:1.15rem; color:var(--ink); display:block}
.plan-price{font-family:var(--f-mono); font-size:.85rem; color:var(--forest); display:block; margin-top:.2rem}
:root[data-theme="dark"] .plan-price{color:var(--moss)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .plan-price{color:var(--moss)} }
td.yes{color:var(--forest); font-weight:600}
td.no{color:var(--ink-soft)}
:root[data-theme="dark"] td.yes{color:var(--moss)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) td.yes{color:var(--moss)} }

/* ---------- tarjetas de plan ---------- */
.plan-cards{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem}
@media(max-width:760px){ .plan-cards{grid-template-columns:1fr} }
.plan-card{border:1px solid var(--line); border-radius:14px; padding:1.6rem; background:var(--surface); display:flex; flex-direction:column; gap:1rem}
.plan-card.feature{border-color:var(--forest); box-shadow:0 20px 40px -24px rgba(30,58,43,.45)}
.plan-card h3{font-family:var(--f-display); font-weight:500; font-size:1.4rem}
.plan-card .price{font-family:var(--f-mono); font-weight:700; font-size:1.1rem; color:var(--forest)}
:root[data-theme="dark"] .plan-card .price{color:var(--moss)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .plan-card .price{color:var(--moss)} }
.plan-card ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.95rem}
.plan-card li{display:grid; grid-template-columns:auto 1fr; gap:.6rem}
.plan-card li::before{content:"–"; color:var(--moss); font-family:var(--f-mono)}
.plan-card .btn{margin-top:auto}

/* ---------- línea de tiempo ---------- */
.stats{display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; margin-top:1.4rem; font-family:var(--f-mono); font-size:.9rem}
.stats div{display:grid; gap:.15rem}
.stats b{font-size:1.3rem; color:var(--forest); font-family:var(--f-display); font-weight:500}
:root[data-theme="dark"] .stats b{color:var(--moss)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stats b{color:var(--moss)} }
.stats span{color:var(--ink-soft); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase}

.timeline{margin-top:2.2rem; display:grid; gap:2.6rem}
.tl-stage{display:grid; gap:.85rem}
.tl-when{font-family:var(--f-mono); font-size:.8rem; font-weight:700; letter-spacing:.06em; color:var(--forest); text-transform:uppercase}
:root[data-theme="dark"] .tl-when{color:var(--moss)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tl-when{color:var(--moss)} }
.tl-stage p{max-width:40rem; color:var(--ink-soft)}
.photostrip{display:flex; gap:.7rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x proximity}
.photostrip img{height:300px; width:auto; border-radius:8px; flex:none; scroll-snap-align:start; object-fit:cover; background:var(--surface-2)}
.photostrip.big img{height:400px}
@media(max-width:600px){ .photostrip img{height:230px} .photostrip.big img{height:300px} }

/* ---------- historia / antes-después ---------- */
.ba{display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:min(26rem,100%)}
.ba figure{margin:0}
.ba img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px}
.ba figcaption{font-size:.75rem; color:var(--ink-soft); margin-top:.5rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.disclaimer{font-size:.82rem; color:var(--ink-soft); margin-top:1.2rem; max-width:36rem}

/* ---------- FAQ ---------- */
.faq{max-width:44rem; margin-top:1.5rem; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:1.1rem 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-mono); color:var(--moss); font-size:1.2rem; flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding:0 0 1.2rem; color:var(--ink-soft)}
.faq p + p{padding-top:0; margin-top:-.4rem}

/* ---------- formulario ---------- */
form.contact{display:grid; gap:1rem; max-width:32rem; margin-top:1.5rem}
form.contact label{display:grid; gap:.35rem; font-size:.85rem; font-weight:600; color:var(--ink-soft)}
form.contact input,form.contact textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:.65rem .8rem;
}
form.contact textarea{min-height:8rem; resize:vertical}
form.contact input:focus,form.contact textarea:focus{outline:2px solid var(--moss); outline-offset:1px}

/* ---------- artículo legal ---------- */
.legal{max-width:42rem}
.legal h2{font-size:1.3rem; margin-top:2.4rem}
.legal h3{margin-top:1.6rem}
.legal p,.legal li{color:var(--ink-soft)}
.legal p + p{margin-top:.9rem}
.legal ul{margin:.9rem 0; padding-left:1.2rem; display:grid; gap:.4rem}
.legal .updated{font-size:.82rem; color:var(--ink-soft); margin-top:.5rem}
.legal .placeholder{background:var(--surface-2); border-radius:4px; padding:0 .3rem; font-family:var(--f-mono); font-size:.85em}

/* ---------- aviso "para quién no" ---------- */
.callout{border:1px solid var(--line); border-left:3px solid var(--sand); border-radius:6px; padding:1.1rem 1.3rem; max-width:38rem; background:var(--surface)}
.callout h3{margin-bottom:.4rem}
.callout p{color:var(--ink-soft); font-size:.95rem}

/* ---------- cierre / final CTA ---------- */
.final{text-align:center}
.final .btn{margin-top:1.6rem}
.final small{display:block; margin-top:1rem; color:color-mix(in srgb,var(--on-forest) 75%,transparent); font-size:.85rem}

/* ---------- pie ---------- */
footer.site{background:var(--surface-2); font-size:.86rem; color:var(--ink-soft)}
footer.site .wrap{padding-block:2.5rem; display:grid; gap:1rem}
footer.site a{color:var(--ink-soft)}
.foot-links{display:flex; flex-wrap:wrap; gap:1rem}
.foot-legal{max-width:44rem; font-size:.78rem}

:focus-visible{outline:2px solid var(--moss); outline-offset:3px; border-radius:2px}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto} }