:root{
  --pink:      oklch(0.9 0.045 350);
  --pink-band: oklch(0.85 0.07 351);
  --pink-soft: oklch(0.95 0.025 350);
  --ink:       oklch(0.2 0.012 340);
  --ink-2:     oklch(0.3 0.014 340);
  --cream:     oklch(0.985 0.006 80);
  --paper:     oklch(0.965 0.008 70);
  --magenta:   oklch(0.58 0.226 352);
  --muted:     oklch(0.48 0.015 340);
  --line:      oklch(0.86 0.012 345);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1200px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{font-family:var(--sans); color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
::selection{background:var(--magenta); color:#fff}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.1; letter-spacing:-0.02em; text-wrap:balance}
em{font-style:italic}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,44px)}
.eyebrow{font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; font-weight:700; color:var(--magenta)}
.display{font-family:var(--serif); text-transform:uppercase; line-height:.92; letter-spacing:-0.02em}
.display .thin{font-weight:300}
.display .it{font-style:italic; font-weight:400; text-transform:none; letter-spacing:-0.01em}
.display .black{font-weight:900}
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans); font-weight:600; font-size:.86rem; letter-spacing:.02em; padding:.9em 1.7em; border-radius:2px; cursor:pointer; border:1px solid transparent; transition:transform .25s var(--ease), background .3s, color .25s; text-transform:uppercase}
.btn-pink{background:var(--pink-band); color:var(--ink)}
.btn-pink:hover{background:var(--magenta); color:#fff; transform:translateY(-2px)}
.btn-dark{background:var(--ink); color:var(--cream)}
.btn-dark:hover{background:var(--magenta); transform:translateY(-2px)}
.btn-line{background:transparent; border-color:var(--ink); color:var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--cream)}

/* NAV */
header.nav{position:sticky; top:0; z-index:50; background:oklch(0.985 0.006 80 / .9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px}
.logo{font-family:var(--serif); font-weight:600; font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; line-height:1}
.logo span{display:block; font-size:.6rem; letter-spacing:.3em; color:var(--magenta); font-family:var(--sans); font-weight:700; margin-top:3px}
.nav-links{display:flex; gap:26px; align-items:center; font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.nav-links a{position:relative; transition:color .2s}
.nav-links a:hover,.nav-links a.on{color:var(--magenta)}
.nav-right{display:flex; align-items:center; gap:16px}
.menu-btn{display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--ink)}
.mm{position:fixed; inset:0; z-index:80; background:var(--ink); color:var(--cream); display:flex; flex-direction:column; justify-content:center; padding:40px clamp(28px,8vw,60px); gap:6px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:.4s var(--ease)}
.mm.open{opacity:1; visibility:visible; transform:none}
.mm a{font-family:var(--serif); text-transform:uppercase; font-size:clamp(1.8rem,8vw,2.6rem); padding:.15em 0; border-bottom:1px solid oklch(1 0 0 / .12); transition:.25s}
.mm a:hover{color:var(--pink-band); padding-left:8px}
.mm .x{position:absolute; top:26px; right:24px; background:none; border:none; color:var(--cream); cursor:pointer; padding:8px}

/* BLOG HERO (index) */
.bhero{background:var(--pink-soft); border-bottom:1px solid var(--line); padding:clamp(56px,8vw,100px) 0}
.bhero .eyebrow{display:block; margin-bottom:18px}
.bhero h1{font-size:clamp(2.4rem,5.6vw,4.4rem)}
.bhero .sub{font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--ink-2); margin-top:18px; max-width:34em; line-height:1.35}
.bhero .intro{color:var(--muted); margin-top:20px; max-width:62ch; font-size:1.02rem}

/* BLOG GRID */
.bgrid-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,44px)}
.bgrid-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.bgrid-head span{font-size:.82rem; color:var(--muted)}
.bgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.bcard{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.bcard:hover{transform:translateY(-5px); box-shadow:0 30px 60px -34px oklch(0.4 0.06 340 / .45)}
.bcard .num{font-family:var(--serif); font-style:italic; font-weight:300; font-size:2.6rem; line-height:1; color:var(--pink-band)}
.bcard .cat{font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--magenta); margin-top:16px}
.bcard h3{font-size:1.35rem; margin-top:10px; line-height:1.15}
.bcard h3 a::after{content:""; position:absolute; inset:0}
.bcard h3 a:hover{color:var(--magenta)}
.bcard p{font-size:.92rem; color:var(--muted); margin-top:12px; flex:1}
.bcard .more{display:inline-flex; align-items:center; gap:.5em; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-top:20px}
.bcard:hover .more{color:var(--magenta)}

/* AUTHORITY */
.author-band{background:var(--ink); color:var(--cream)}
.author-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,64px); align-items:center}
.author-photo{border-radius:10px; overflow:hidden; aspect-ratio:4/5; max-width:380px}
.author-photo img{width:100%; height:100%; object-fit:cover; object-position:center 15%}
.author-grid .eyebrow{color:var(--pink-band)}
.author-grid h2{color:var(--cream); font-size:clamp(1.9rem,4vw,3rem); margin-top:12px}
.author-grid p{color:oklch(0.82 0.01 340); margin-top:18px; max-width:52ch}
.author-grid .btn{margin-top:26px}

/* ARTICLE */
.art-hero{background:var(--pink-soft); border-bottom:1px solid var(--line); padding:clamp(48px,7vw,88px) 0}
.art-hero .crumbs{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:20px}
.art-hero .crumbs a{color:var(--magenta)}
.art-hero .crumbs a:hover{text-decoration:underline}
.art-hero h1{font-size:clamp(2rem,4.6vw,3.6rem); max-width:22ch}
.art-hero .byline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:26px; font-size:.9rem; color:var(--ink-2)}
.art-hero .byline b{font-family:var(--serif); font-weight:600}
.art-hero .byline .dot{width:4px; height:4px; border-radius:50%; background:var(--magenta)}
.art-hero .chip{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--magenta); background:#fff; border:1px solid var(--line); padding:.45em 1em; border-radius:100px}

.art-body{max-width:760px; margin-inline:auto; padding:clamp(44px,6vw,72px) clamp(20px,5vw,44px)}
.art-body>p{margin-bottom:1.35em; color:var(--ink-2); font-size:1.04rem}
.art-body .lead{font-family:var(--serif); font-size:1.18rem; line-height:1.55; color:var(--ink)}
.art-body h2{font-size:clamp(1.5rem,3vw,2rem); margin:2em 0 .8em; padding-bottom:.45em; border-bottom:2px solid var(--pink-band)}
.art-body h3{font-size:1.15rem; margin:1.8em 0 .7em; color:var(--ink)}
.art-body ul{list-style:none; margin:0 0 1.5em; display:flex; flex-direction:column; gap:.7em}
.art-body ul li{position:relative; padding-left:26px; color:var(--ink-2); font-size:1rem}
.art-body ul li::before{content:""; position:absolute; left:4px; top:.58em; width:8px; height:8px; border-radius:50%; background:var(--magenta)}
.art-body ul li b{color:var(--ink)}
.art-body .tbl{overflow-x:auto; margin:0 0 1.6em; border:1px solid var(--line); border-radius:12px}
.art-body table{width:100%; border-collapse:collapse; font-size:.92rem; min-width:520px}
.art-body th{font-family:var(--sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--magenta); background:var(--pink-soft); text-align:left; padding:12px 16px}
.art-body td{padding:12px 16px; border-top:1px solid var(--line); color:var(--ink-2); vertical-align:top}
.art-body td:first-child{font-weight:600; color:var(--ink)}
.note{background:var(--pink-soft); border-left:3px solid var(--magenta); border-radius:0 10px 10px 0; padding:20px 24px; margin:2em 0; font-size:.96rem; color:var(--ink-2)}
.note b{color:var(--ink)}

/* FAQ */
.faq{margin-top:.5em}
.faq details{border-top:1px solid var(--line); padding:0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 4px; font-family:var(--serif); font-weight:600; font-size:1.05rem; transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.4rem; font-weight:300; color:var(--magenta); transition:transform .3s var(--ease); flex:none}
.faq details[open] summary{color:var(--magenta)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 18px; color:var(--muted); font-size:.98rem}

/* SOURCES + DISCLAIMER */
.aviso{font-style:italic; color:var(--muted); font-size:.92rem; border-top:1px solid var(--line); margin-top:2.5em; padding-top:1.4em}
.fuentes{margin-top:2em}
.fuentes h4{font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--magenta); margin-bottom:12px}
.fuentes ol{margin-left:18px; display:flex; flex-direction:column; gap:6px}
.fuentes li{font-size:.8rem; color:var(--muted)}
.fuentes a{color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line); word-break:break-all}
.fuentes a:hover{color:var(--magenta)}

/* ARTICLE CTA */
.art-cta{background:var(--pink-band)}
.art-cta .in{text-align:center; max-width:680px; margin-inline:auto; padding:clamp(48px,7vw,80px) clamp(20px,5vw,44px)}
.art-cta h2{font-size:clamp(1.9rem,4.4vw,3rem)}
.art-cta p{margin:16px auto 0; max-width:46ch; color:var(--ink-2)}
.art-cta .btn{margin-top:28px}

/* RELATED */
.rel{padding:clamp(48px,7vw,80px) 0}
.rel h2{font-size:clamp(1.6rem,3.2vw,2.3rem); margin-bottom:clamp(24px,3vw,36px)}
.rel .bgrid{grid-template-columns:repeat(3,1fr)}

/* FOOTER */
footer{background:var(--ink); color:oklch(0.75 0.01 340); padding:56px 0 30px}
.foot-in{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap}
.foot-logo{font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream)}
.foot-logo span{display:block; font-family:var(--sans); font-size:.66rem; letter-spacing:.28em; color:var(--pink-band); font-weight:700; margin-top:5px}
.foot-nav{display:flex; gap:24px; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; flex-wrap:wrap}
.foot-nav a:hover{color:var(--cream)}
.foot-bottom{margin-top:44px; padding-top:22px; border-top:1px solid oklch(1 0 0 / .1); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.78rem; color:oklch(0.6 0.01 340)}
.foot-bottom a{color:var(--pink-band)}

/* reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

.pad{padding:clamp(64px,9vw,120px) 0}
@media(max-width:920px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .bgrid,.rel .bgrid{grid-template-columns:1fr 1fr}
  .author-grid{grid-template-columns:1fr; gap:30px}
}
@media(max-width:600px){
  .bgrid,.rel .bgrid{grid-template-columns:1fr}
}