:root{
  --night-deep:#171b34;
  --night-mid:#242a52;
  --moon-glow:#f2eee3;
  --lavender-soft:#c9c6e8;
  --amber:#f2a65a;
  --sage:#8fae8b;
  --line-soft: rgba(242,238,227,0.14);
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  background: var(--night-deep);
  color: var(--moon-glow);
  font-family:'Karla', sans-serif;
  line-height:1.6;
}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  text-wrap:balance;
}

a{color:var(--amber);}

.wrap{
  max-width:720px;
  margin:0 auto;
  padding:0 28px;
}

/* NAV */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 0;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:8px;
}
.brand{
  font-family:'Fraunces', serif;
  font-size:1.1rem;
  color:var(--moon-glow);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand svg{width:20px;height:20px;flex-shrink:0;}
nav .back{
  font-size:0.85rem;
  color:var(--lavender-soft);
  text-decoration:none;
}
nav .back:hover{color:var(--amber);}
.lang-switch{
  font-size:0.85rem;
  border:1px solid var(--line-soft);
  padding:9px 14px;
  border-radius:100px;
  text-decoration:none;
  color:var(--moon-glow);
  transition:border-color .2s ease, background .2s ease;
}
.lang-switch:hover{
  border-color:var(--amber);
  background:rgba(242,166,90,0.08);
}

@media (max-width:480px){
  nav{flex-wrap:wrap;row-gap:12px;}
  nav > .brand, nav > div{flex-shrink:0;}
  .brand{font-size:1rem;}
}

/* BLOG INDEX */
.blog-header{
  padding:56px 0 40px;
  text-align:center;
}
.eyebrow{
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--lavender-soft);
  margin-bottom:14px;
  display:inline-block;
}
.blog-header h1{
  font-size:clamp(2rem, 4.5vw, 2.6rem);
  margin-bottom:14px;
}
.blog-header p{
  color:var(--lavender-soft);
  max-width:520px;
  margin:0 auto;
}

.post-list{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:20px 0 80px;
}
.post-card{
  display:block;
  padding:28px 0;
  border-top:1px solid var(--line-soft);
  text-decoration:none;
  color:inherit;
}
.post-card:first-child{border-top:none;}
.post-card .post-eyebrow{
  font-size:0.78rem;
  color:var(--amber);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:8px;
  display:block;
}
.post-card h2{
  font-size:1.35rem;
  margin-bottom:10px;
  color:var(--moon-glow);
}
.post-card p{
  color:var(--lavender-soft);
  font-size:0.95rem;
  max-width:60ch;
}
.post-card .read-more{
  display:inline-block;
  margin-top:12px;
  font-size:0.85rem;
  color:var(--amber);
}

/* ARTICLE */
article{
  padding:44px 0 30px;
}
.article-eyebrow{
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:18px;
  display:block;
}
article h1{
  font-size:clamp(1.9rem, 4.5vw, 2.5rem);
  margin-bottom:16px;
}
.article-meta{
  font-size:0.85rem;
  color:var(--lavender-soft);
  margin-bottom:36px;
}
article .lede{
  font-size:1.1rem;
  color:var(--lavender-soft);
  margin-bottom:30px;
}
article h2{
  font-size:1.4rem;
  margin:44px 0 16px;
  color:var(--moon-glow);
}
article h3{
  font-size:1.1rem;
  margin:28px 0 10px;
  color:var(--amber);
  font-family:'Karla', sans-serif;
  font-weight:700;
}
article p{
  margin-bottom:18px;
  font-size:1rem;
  color:rgba(242,238,227,0.88);
  max-width:66ch;
}
article ul, article ol{
  margin:0 0 18px 22px;
  color:rgba(242,238,227,0.88);
}
article li{
  margin-bottom:8px;
}
article strong{color:var(--moon-glow);}

.table-wrap{
  overflow-x:auto;
  margin:24px 0 32px;
  border:1px solid var(--line-soft);
  border-radius:14px;
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:0.92rem;
}
th,td{
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
th{
  font-family:'Fraunces', serif;
  font-weight:500;
  color:var(--amber);
  background:rgba(242,166,90,0.06);
}
tr:last-child td{border-bottom:none;}

.age-block{
  padding:22px 24px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line-soft);
  border-radius:14px;
  margin-bottom:20px;
}
.age-block .rango{
  color:var(--amber);
  font-family:'Fraunces', serif;
  font-size:1.05rem;
  margin-bottom:4px;
}
.age-block .ventana-valor{
  font-size:0.95rem;
  color:var(--moon-glow);
  margin-bottom:14px;
}

.cta-box{
  margin:44px 0;
  padding:32px 28px;
  background:linear-gradient(180deg, rgba(242,166,90,0.08), transparent 70%);
  border:1px solid var(--line-soft);
  border-radius:18px;
  text-align:center;
}
.cta-box h3{
  font-family:'Fraunces', serif;
  font-size:1.3rem;
  color:var(--moon-glow);
  margin-bottom:10px;
}
.cta-box p{
  color:var(--lavender-soft);
  max-width:52ch;
  margin:0 auto 22px;
}
.btn-primary{
  display:inline-block;
  background:var(--amber);
  color:var(--night-deep);
  text-decoration:none;
  font-weight:700;
  padding:14px 30px;
  border-radius:100px;
  font-size:0.92rem;
}

.faq-block{
  margin-bottom:20px;
}
.faq-block h3{
  color:var(--moon-glow);
  font-family:'Fraunces', serif;
  font-size:1.05rem;
  margin-bottom:8px;
}
.faq-block p{
  color:rgba(242,238,227,0.8);
  font-size:0.95rem;
}

.disclaimer-box{
  font-size:0.82rem;
  line-height:1.6;
  color:rgba(242,238,227,0.5);
  border-left:2px solid var(--line-soft);
  padding-left:16px;
  margin:36px 0;
}

footer{
  text-align:center;
  padding:40px 0 60px;
  font-size:0.8rem;
  color:rgba(242,238,227,0.6);
  border-top:1px solid var(--line-soft);
  margin-top:40px;
}
footer a{color:inherit; text-decoration:underline;}

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}