/* =========================================================
   NONI NUTRI TSD — sistema de diseño
   Concepto: cuaderno de campo botánico-clínico.
   Fichas de especie (herbario) + rigor de historia clínica.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper: #F1F0E6;
  --paper-2: #E9E7D8;
  --ink: #22301D;
  --forest: #2E4632;
  --forest-deep: #1D2F22;
  --ochre: #A97426;
  --brick: #8F4335;
  --line: #C9C4AC;
  --radius: 2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-size:17px;
  line-height:1.6;
}

h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--forest-deep);
  line-height:1.1;
  margin:0 0 .4em;
}

a{color:var(--forest-deep);}
a:focus-visible, button:focus-visible{outline:2px solid var(--ochre); outline-offset:3px;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ochre);
}

/* ---------- header / nav ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  display:flex; flex-direction:column; text-decoration:none; line-height:1;
}
.brand-mark{font-family:'Fraunces', serif; font-weight:600; font-size:1.3rem; color:var(--forest-deep);}
.brand-sub{font-family:'IBM Plex Mono', monospace; font-size:.62rem; letter-spacing:.12em; color:var(--ochre); margin-top:3px;}

nav.main-nav{display:flex; flex-wrap:wrap; gap:2px;}
nav.main-nav a{
  font-size:.86rem; text-decoration:none; color:var(--ink);
  padding:8px 12px; border-radius:var(--radius);
}
nav.main-nav a:hover, nav.main-nav a[aria-current="page"]{
  background:var(--forest-deep); color:var(--paper);
}
.nav-toggle{display:none;}

@media (max-width: 900px){
  .header-inner{flex-direction:column; align-items:flex-start;}
  nav.main-nav{width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px;}
  nav.main-nav a{white-space:nowrap;}
}

/* ---------- hero ---------- */
.hero{
  max-width:1180px; margin:0 auto; padding:72px 24px 56px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end;
  border-bottom:1px solid var(--line);
}
.hero h1{font-size:clamp(2.1rem, 4vw, 3.4rem); max-width:14ch;}
.hero p.lede{font-size:1.05rem; max-width:46ch; color:#3C4A38;}
.specimen-card{
  border:1px solid var(--forest); background:var(--paper-2);
  padding:20px; font-family:'IBM Plex Mono', monospace; font-size:.78rem;
  color:var(--forest-deep);
}
.specimen-card .num{color:var(--ochre); display:block; margin-bottom:10px;}
.specimen-card .latin{font-style:italic; opacity:.75;}

@media (max-width: 900px){ .hero{grid-template-columns:1fr;} }

/* ---------- section shell ---------- */
.section{max-width:1180px; margin:0 auto; padding:64px 24px; border-bottom:1px solid var(--line);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}

/* ---------- grid of topic cards (fichas) ---------- */
.ficha-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.ficha{background:var(--paper); padding:26px 22px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--ink);}
.ficha:hover{background:var(--paper-2);}
.ficha .num{font-family:'IBM Plex Mono', monospace; font-size:.72rem; color:var(--ochre);}
.ficha h3{font-size:1.15rem; margin:0;}
.ficha p{margin:0; font-size:.92rem; color:#42513C;}
.ficha .tag{font-family:'IBM Plex Mono', monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brick); margin-top:auto;}

@media (max-width: 900px){ .ficha-grid{grid-template-columns:1fr;} }

/* ---------- about / bio ---------- */
.bio{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start;}
.bio-photo{
  aspect-ratio:4/5; background:var(--paper-2); border:1px solid var(--forest);
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace;
  font-size:.75rem; color:var(--forest); text-align:center; padding:16px;
}
.credentials{list-style:none; margin:20px 0 0; padding:0; border-top:1px solid var(--line);}
.credentials li{padding:12px 0; border-bottom:1px solid var(--line); display:flex; gap:16px; font-size:.92rem;}
.credentials li .mark{font-family:'IBM Plex Mono',monospace; color:var(--ochre); flex:0 0 auto;}

@media (max-width: 900px){ .bio{grid-template-columns:1fr;} }

/* ---------- recetario tiers ---------- */
.tier-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.tier{border:1px solid var(--forest); padding:26px;}
.tier.tier-gratis{background:var(--paper-2);}
.tier.tier-pago{background:var(--forest-deep); color:var(--paper);}
.tier.tier-pago h3, .tier.tier-pago .eyebrow{color:var(--paper);}
.tier.tier-pago .eyebrow{color:#D9C98A;}
.tier ul{padding-left:18px; margin:14px 0 0;}
.tier li{margin-bottom:6px; font-size:.92rem;}

@media (max-width: 900px){ .tier-grid{grid-template-columns:1fr;} }

/* ---------- article body ---------- */
.article{max-width:72ch;}
.article h2{font-size:1.5rem; margin-top:0;}
.article h3{font-size:1.15rem; color:var(--forest); margin-top:1.6em;}
.article p{margin:0 0 1em; color:#2C3728;}
.article ul, .article ol{margin:0 0 1.2em; padding-left:22px;}
.article li{margin-bottom:.5em; color:#2C3728;}
.article strong{color:var(--forest-deep);}
.pill{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase; padding:3px 9px;
  border:1px solid var(--forest); color:var(--forest-deep); margin:0 6px 6px 0;
}
.supp-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;}
.supp{background:var(--paper); padding:22px;}
.supp h4{font-family:'Fraunces',serif; font-weight:600; margin:0 0 6px; font-size:1.05rem; color:var(--forest-deep);}
.supp .evid{font-family:'IBM Plex Mono',monospace; font-size:.66rem; color:var(--ochre); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:8px;}
.supp p{margin:0; font-size:.88rem; color:#42513C;}
.callout{border-left:3px solid var(--brick); background:var(--paper-2); padding:16px 20px; margin:1.4em 0; font-size:.92rem;}
.callout strong{color:var(--brick);}
@media (max-width: 900px){ .supp-grid{grid-template-columns:1fr;} }

/* ---------- recipe cards ---------- */
.recipe-card{border:1px solid var(--line); background:var(--paper); padding:0; margin-bottom:1px;}
.recipe-head{background:var(--paper-2); padding:22px 24px; border-bottom:1px solid var(--line);}
.recipe-head h4{font-family:'Fraunces',serif; font-weight:600; font-size:1.25rem; margin:0 0 8px; color:var(--forest-deep);}
.recipe-meta{display:flex; gap:16px; flex-wrap:wrap;}
.recipe-meta span{font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ochre);}
.recipe-body{padding:22px 24px; display:grid; grid-template-columns:.8fr 1.2fr; gap:32px;}
.recipe-body h5{font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--forest); margin:0 0 10px;}
.recipe-body ul, .recipe-body ol{margin:0; padding-left:18px;}
.recipe-body li{margin-bottom:6px; font-size:.9rem; color:#2C3728;}
@media (max-width:900px){ .recipe-body{grid-template-columns:1fr;} }

/* ---------- placeholder / en construcción ---------- */
.building{
  border:1px dashed var(--forest); padding:32px; background:var(--paper-2);
  font-size:.92rem; color:#42513C;
}
.building .eyebrow{margin-bottom:8px;}

/* ---------- footer ---------- */
footer.site-footer{
  max-width:1180px; margin:0 auto; padding:40px 24px 60px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-size:.82rem; color:#5B6455;
}
footer.site-footer a{color:#5B6455;}

.btn{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:.78rem;
  letter-spacing:.04em; text-decoration:none; padding:11px 18px;
  border:1px solid var(--forest-deep); color:var(--forest-deep);
}
.btn:hover{background:var(--forest-deep); color:var(--paper);}
.btn-solid{background:var(--forest-deep); color:var(--paper);}
.btn-solid:hover{background:var(--ochre); border-color:var(--ochre); color:var(--forest-deep);}