/* =========================================================
   Salud sin Tabú — sistema de diseño
   Paleta cálida y de confianza · tipografía Bricolage + DM Sans + DM Mono
   ========================================================= */

:root{
  --paper:#FBF6F0;
  --paper-2:#F4ECE2;
  --ink:#13211F;
  --ink-soft:#3C4B48;
  --teal:#0F6E5E;
  --teal-deep:#0A4940;
  --teal-tint:#E3EFEB;
  --coral:#EE7A5F;
  --coral-deep:#C9543A;
  --coral-tint:#FBE7DF;
  --amber:#E0A23C;
  --amber-tint:#F7EBD2;
  --line:#E2D7C9;
  --line-strong:#CBBBA8;
  --white:#FFFFFF;

  --shadow-sm:0 1px 2px rgba(19,33,31,.06), 0 2px 8px rgba(19,33,31,.05);
  --shadow-md:0 8px 30px rgba(13,45,40,.10);

  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;

  --maxw:1140px;
  --readw:680px;

  --f-display:"Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --f-body:"DM Sans", system-ui, -apple-system, sans-serif;
  --f-mono:"DM Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.62;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; display:block}
a{color:var(--teal-deep); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--coral-deep)}

h1,h2,h3,h4{font-family:var(--f-display); line-height:1.12; font-weight:600; color:var(--ink); margin:0 0 .4em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem); letter-spacing:-.02em; font-weight:700}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem); letter-spacing:-.015em}
h3{font-size:clamp(1.2rem,2.2vw,1.45rem)}
p{margin:0 0 1.05em}
strong{font-weight:600}

.eyebrow{
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 .9rem;
  display:inline-block;
}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.section{padding:72px 0}
.section--tight{padding:48px 0}
.read{max-width:var(--readw)}
.lede{font-size:1.2rem; color:var(--ink-soft)}
.center{text-align:center}
.mt0{margin-top:0}

/* ---------- skip link ---------- */
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:200}
.skip:focus{left:0}

/* ---------- header / nav ---------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(251,246,240,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; height:66px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--f-display); font-weight:700; font-size:1.12rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em}
.brand:hover{color:var(--ink)}
.brand .dot{width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 32% 30%, var(--coral), var(--teal) 90%); flex:0 0 auto; box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  font-size:.96rem; color:var(--ink-soft); text-decoration:none; padding:8px 13px; border-radius:99px; font-weight:500;
  transition:background .18s, color .18s;
}
.nav-links a:hover{background:var(--teal-tint); color:var(--teal-deep)}
.nav-links a.active{color:var(--teal-deep); background:var(--teal-tint)}
.nav-links a.urgent{color:var(--coral-deep); background:var(--coral-tint)}
.nav-links a.urgent:hover{background:var(--coral); color:#fff}

.nav-toggle{display:none; background:none; border:1px solid var(--line-strong); border-radius:10px; width:42px; height:40px; cursor:pointer; align-items:center; justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:""; display:block; width:19px; height:2px; background:var(--ink); position:relative; transition:transform .2s}
.nav-toggle span::before{position:absolute; top:-6px}
.nav-toggle span::after{position:absolute; top:6px}

@media (max-width:920px){
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute; top:66px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:12px 18px 18px; box-shadow:var(--shadow-md);
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px; border-radius:12px}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-body); font-weight:600; font-size:1rem;
  padding:13px 22px; border-radius:99px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .15s, background .18s, box-shadow .18s; line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--teal); color:#fff; box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--teal-deep); color:#fff}
.btn--coral{background:var(--coral); color:#fff}
.btn--coral:hover{background:var(--coral-deep); color:#fff}
.btn--ghost{background:transparent; border-color:var(--line-strong); color:var(--ink)}
.btn--ghost:hover{border-color:var(--teal); color:var(--teal-deep); background:var(--teal-tint)}
.btn .arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:64px 0 40px}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(238,122,95,.16), transparent 70%),
    radial-gradient(55% 55% at 8% 90%, rgba(15,110,94,.12), transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative; z-index:1}
.hero h1{max-width:14ch}
.hero .lede{max-width:54ch; font-size:1.28rem; margin-bottom:1.6em}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.hero-promise{
  margin-top:30px; font-family:var(--f-mono); font-size:.82rem; letter-spacing:.04em;
  color:var(--ink-soft); display:flex; align-items:center; gap:10px;
}
.hero-promise .pill{background:var(--teal-tint); color:var(--teal-deep); padding:4px 11px; border-radius:99px; letter-spacing:.1em; text-transform:uppercase; font-size:.68rem}

/* ---------- urgent strip ---------- */
.urgent-strip{
  background:linear-gradient(100deg,var(--coral-deep),var(--coral));
  color:#fff;
}
.urgent-strip .wrap{display:flex; align-items:center; gap:22px; padding:18px 22px; flex-wrap:wrap}
.urgent-strip .clock{font-family:var(--f-display); font-weight:700; font-size:1.5rem; line-height:1; background:rgba(255,255,255,.16); border-radius:12px; padding:10px 14px; flex:0 0 auto}
.urgent-strip p{margin:0; flex:1 1 320px; font-size:1rem}
.urgent-strip a{color:#fff; font-weight:700; text-decoration:underline}
.urgent-strip .btn--ghost{border-color:rgba(255,255,255,.6); color:#fff}
.urgent-strip .btn--ghost:hover{background:rgba(255,255,255,.16); color:#fff; border-color:#fff}

/* ---------- search ---------- */
.search-box{position:relative; max-width:560px}
.search-box input{
  width:100%; font-family:var(--f-body); font-size:1.05rem;
  padding:16px 18px 16px 50px; border-radius:99px; border:1.5px solid var(--line-strong);
  background:var(--white); color:var(--ink); box-shadow:var(--shadow-sm);
}
.search-box input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-tint)}
.search-box .ico{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--teal); font-size:1.1rem}
.search-empty{display:none; margin-top:18px; color:var(--ink-soft); font-style:italic}

/* ---------- cards grid ---------- */
.grid{display:grid; gap:20px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid--3,.grid--2,.grid--4{grid-template-columns:1fr} }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; text-decoration:none; color:var(--ink); display:block;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
a.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong)}
.card .tag{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-deep)}
.card h3{margin:.5rem 0 .35rem}
.card p{margin:0; color:var(--ink-soft); font-size:.98rem}
.card .go{margin-top:14px; font-weight:600; color:var(--teal-deep); display:inline-flex; gap:7px; align-items:center; font-size:.95rem}
a.card:hover .go .arr{transform:translateX(3px)}
.card .arr{transition:transform .18s}

/* index "lo básico" */
.facts{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.facts{grid-template-columns:1fr}}
.fact{background:var(--teal-tint); border-radius:var(--radius); padding:24px; border:1px solid #cfe2dc}
.fact .big{font-family:var(--f-display); font-weight:700; font-size:1.5rem; color:var(--teal-deep); line-height:1.1; margin-bottom:6px}
.fact p{margin:0; color:var(--ink-soft); font-size:.97rem}

/* ---------- section headers ---------- */
.sec-head{max-width:62ch; margin-bottom:34px}
.sec-head.center{margin-left:auto; margin-right:auto}

/* ---------- callouts ---------- */
.callout{border-radius:var(--radius); padding:22px 24px; margin:28px 0; border:1px solid; position:relative}
.callout h3{margin:0 0 .35em; font-size:1.12rem}
.callout p:last-child{margin-bottom:0}
.callout--urgent{background:var(--coral-tint); border-color:#f1c4b6}
.callout--urgent h3{color:var(--coral-deep)}
.callout--info{background:var(--teal-tint); border-color:#cfe2dc}
.callout--info h3{color:var(--teal-deep)}
.callout--key{background:var(--amber-tint); border-color:#ecd6a6}
.callout--key h3{color:#9a6f17}
.callout .label{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:6px; opacity:.85}

/* ---------- "en una frase" ---------- */
.oneline{
  border-left:4px solid var(--coral); background:var(--coral-tint);
  padding:14px 18px; border-radius:0 12px 12px 0; margin:0 0 18px;
  font-size:1.05rem;
}
.oneline strong{color:var(--coral-deep)}

/* ---------- prose blocks ---------- */
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{margin:0 0 1.1em; padding-left:1.25em}
.prose li{margin-bottom:.5em}
.prose ul li::marker{color:var(--teal)}

/* transmission yes/no columns */
.yesno{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0}
@media (max-width:640px){.yesno{grid-template-columns:1fr}}
.yesno > div{border-radius:var(--radius); padding:22px; border:1px solid}
.yesno .yes{background:#fff3f0; border-color:#f1c4b6}
.yesno .no{background:#eef6f2; border-color:#cfe2dc}
.yesno h3{display:flex; align-items:center; gap:10px; font-size:1.08rem; margin-bottom:.6em}
.yesno .badge{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex:0 0 auto;font-family:var(--f-body)}
.yesno .yes .badge{background:var(--coral-deep)}
.yesno .no .badge{background:var(--teal)}
.yesno ul{margin:0; padding-left:1.1em}
.yesno li{margin-bottom:.45em; font-size:.98rem}

/* ---------- FAQ / accordion ---------- */
.faq-tools{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:8px}
.faq-count{font-family:var(--f-mono); font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em}

.faq{border-top:1px solid var(--line); margin-top:18px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 4px; position:relative;
  font-family:var(--f-display); font-weight:600; font-size:1.1rem; color:var(--ink);
  transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--teal-deep)}
.faq summary:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:6px}
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:18px;
  font-family:var(--f-body); font-weight:400; font-size:1.7rem; line-height:1; color:var(--teal);
  transition:transform .2s;
}
.faq details[open] summary::after{content:"–"; transform:translateY(-1px)}
.faq .answer{padding:0 8px 22px 4px; color:var(--ink-soft); max-width:66ch}
.faq .answer p:last-child{margin-bottom:0}
.faq .answer p:first-child{margin-top:0}
.faq details[hidden]{display:none}
.faq mark{background:var(--amber-tint); color:inherit; padding:0 2px; border-radius:3px}

/* ITS fichas */
.ficha{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; margin-bottom:22px; scroll-margin-top:84px}
.ficha h3{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.ficha .type{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--teal); padding:3px 9px; border-radius:99px}
.ficha .type.vir{background:var(--coral)}
.ficha .type.par{background:var(--amber); color:#5a4310}
.ficha .meta{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px}
.ficha .meta span{font-size:.82rem; background:var(--paper-2); border:1px solid var(--line); border-radius:99px; padding:5px 12px; color:var(--ink-soft)}
.ficha .meta b{color:var(--ink)}

/* chips nav (anchor list) */
.chips{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 30px}
.chips a{font-size:.9rem; background:var(--white); border:1px solid var(--line-strong); border-radius:99px; padding:8px 15px; text-decoration:none; color:var(--ink-soft); transition:all .15s}
.chips a:hover{background:var(--teal); color:#fff; border-color:var(--teal)}

/* sub page hero */
.page-hero{background:linear-gradient(180deg,var(--paper-2),var(--paper)); padding:54px 0 34px; border-bottom:1px solid var(--line)}
.page-hero h1{max-width:18ch}
.page-hero .lede{max-width:58ch}
.crumb{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:14px}
.crumb a{color:var(--teal-deep); text-decoration:none}

/* resource list */
.res-grid{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){.res-grid{grid-template-columns:1fr}}
.res{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.res h3{font-size:1.1rem; margin-bottom:.3em}
.res p{font-size:.95rem; color:var(--ink-soft); margin-bottom:.6em}
.res .tel{font-family:var(--f-mono); color:var(--teal-deep); font-weight:500}

/* myths */
.myth{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-bottom:16px}
.myth .m{color:var(--coral-deep); font-weight:600; display:flex; gap:9px}
.myth .r{color:var(--teal-deep); font-weight:600; display:flex; gap:9px; margin-top:8px}
.myth .m .k,.myth .r .k{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; flex:0 0 auto; padding-top:4px}
.myth p{margin:4px 0 0; color:var(--ink-soft); font-size:.97rem}

/* timeline / window */
.window-row{display:grid; grid-template-columns:1fr; gap:10px; margin:22px 0}
.window-item{display:grid; grid-template-columns:200px 1fr; gap:16px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:14px 18px}
@media (max-width:560px){.window-item{grid-template-columns:1fr; gap:4px}}
.window-item b{font-family:var(--f-display)}
.window-item .t{font-family:var(--f-mono); color:var(--teal-deep); font-size:.95rem}

/* ---------- footer ---------- */
.site-foot{background:var(--ink); color:#cdd6d3; padding:54px 0 30px; margin-top:20px}
.site-foot a{color:#fff}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; margin-bottom:34px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr; gap:26px}}
.site-foot h4{color:#fff; font-family:var(--f-display); font-size:1rem; margin:0 0 .8em; letter-spacing:.01em}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:.5em}
.site-foot li a{color:#aeb9b6; text-decoration:none; font-size:.95rem}
.site-foot li a:hover{color:#fff}
.foot-brand{display:flex; align-items:center; gap:11px; font-family:var(--f-display); font-weight:700; color:#fff; font-size:1.15rem; margin-bottom:.6em}
.foot-brand .dot{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 32% 30%, var(--coral), var(--teal) 90%)}
.disclaimer{border-top:1px solid rgba(255,255,255,.13); padding-top:22px; font-size:.84rem; color:#93a09c; line-height:1.6}
.disclaimer strong{color:#cdd6d3}

/* reveal animation */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* focus visibility globally */
a:focus-visible,.btn:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--teal); outline-offset:2px}

/* small print under section */
.note{font-size:.86rem; color:var(--ink-soft); font-style:italic}
hr.soft{border:none; border-top:1px solid var(--line); margin:40px 0}