/* ===========================================================
   Zenskinsation — Blog design system
   Hereda exactamente los tokens de marca del sitio principal
   =========================================================== */
:root{
  --rose:#EFA79E; --rose-bg:#F9E4DF; --brand:#8A4B44; --deep:#57281E;
  --ink:#2B1B15; --cream:#F7EDE8; --white:#FFFFFF; --muted:#6E564E; --line:#E8CFC8;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Lato',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--white);font-size:17px;line-height:1.7}
h1,h2,h3{font-family:var(--serif);color:var(--deep);line-height:1.15;font-weight:600}
img{max-width:100%}
a{color:var(--brand)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:12.5px;font-weight:500;color:var(--brand);margin-bottom:14px}
.btn{display:inline-block;background:var(--brand);color:#fff;border:none;border-radius:40px;padding:15px 34px;font-size:16px;font-weight:500;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background .25s,transform .2s,box-shadow .25s}
.btn:hover{background:var(--deep);transform:translateY(-1px);box-shadow:0 10px 24px rgba(138,75,68,.28)}
.btn.ghost{background:transparent;color:var(--deep);border:1.5px solid var(--brand)}
.btn.ghost:hover{background:var(--rose-bg);color:var(--deep)}
.btn.onDark{background:#fff;color:var(--deep)}
.btn.onDark:hover{background:var(--rose)}
section[id],div[id]{scroll-margin-top:150px}

/* ---------- topbar + header (idénticos al sitio) ---------- */
.topbar{background:var(--deep);color:#fff;font-size:13.5px;padding:7px 0;letter-spacing:.03em}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
header{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);z-index:50;border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.small{box-shadow:0 6px 24px rgba(87,40,30,.10)}
header.small .nav{padding:4px 0}
header.small .nav .logo img{height:56px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.nav .logo img{height:74px;display:block;transition:height .3s}
.nav ul{display:flex;gap:28px;list-style:none;align-items:center}
.nav ul a{text-decoration:none;color:var(--ink);font-size:15.5px}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--brand)}
.langToggle{border:1.5px solid var(--rose);border-radius:30px;overflow:hidden;display:flex;font-size:13px}
.langToggle a{padding:6px 13px;text-decoration:none;color:var(--deep)}
.langToggle a.active{background:var(--brand);color:#fff}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;line-height:0;margin-left:auto}
.burger span{display:block;width:24px;height:2px;background:var(--deep);margin:5px 0;border-radius:2px;transition:.3s}
body.navOpen .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.navOpen .burger span:nth-child(2){opacity:0}
body.navOpen .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mobileNav{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:#fff;box-shadow:-10px 0 40px rgba(87,40,30,.25);z-index:100;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.3,1);padding:88px 26px 26px;overflow-y:auto;display:none}
body.navOpen #mobileNav{transform:none}
#mobileNav a{display:block;padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:17px}
#mobileNav a.cta{margin-top:22px;background:var(--brand);color:#fff;text-align:center;border-radius:40px;border:none;padding:15px}
#navScrim{position:fixed;inset:0;background:rgba(43,27,21,.45);z-index:99;opacity:0;pointer-events:none;transition:opacity .35s;display:none}
body.navOpen #navScrim{opacity:1;pointer-events:auto}
@media(max-width:960px){.nav ul{display:none}.burger{display:block}#mobileNav,#navScrim{display:block}body.navOpen{overflow:hidden}}

/* ---------- portada del blog ---------- */
.blogHero{background:linear-gradient(160deg,var(--cream) 0%,var(--rose-bg) 60%,#EFC3B9 130%);padding:74px 0 66px;position:relative;overflow:hidden}
.blogHero h1{font-size:clamp(34px,5vw,56px);max-width:14ch;margin-bottom:18px}
.blogHero p{font-size:19px;max-width:56ch;color:#4A322B}
.blogHero .petal{position:absolute;border-radius:50% 0 50% 50%;background:var(--rose);opacity:.24;width:180px;height:180px;top:-60px;right:-40px;transform:rotate(25deg)}
.heroStat{display:flex;align-items:center;gap:14px;margin-top:30px}
.heroStat b{font-family:var(--serif);font-size:40px;color:var(--brand);line-height:1}
.heroStat span{font-size:14.5px;color:#4A322B}

.section{padding:74px 0}
.section.alt{background:var(--cream)}
.secHead{max-width:660px;margin:0 auto 46px;text-align:center}
.secHead h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:12px}
.secHead p{color:#4A322B}

/* ---------- tarjetas de artículo ---------- */
.postGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.post{background:var(--cream);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.post:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(87,40,30,.16)}
.post .pic{aspect-ratio:4/3;overflow:hidden;line-height:0;background:var(--rose-bg)}
.post .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.post:hover .pic img{transform:scale(1.05)}
.post .body{padding:26px;display:flex;flex-direction:column;flex:1;gap:10px}
.tag{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 12px;align-self:flex-start}
.post h3{font-size:23px}
.post p{font-size:15px;color:#4A322B;flex:1}
.post .read{text-decoration:none;color:var(--brand);font-weight:500;font-size:15px;border-top:1px solid var(--line);padding-top:14px}
.post .read:hover{color:var(--deep)}
.post.feature{grid-column:1/-1;flex-direction:row}
.post.feature .pic{flex:0 0 50%;aspect-ratio:16/11}
.post h3{line-height:1.22}
.tag{line-height:1.5}
.post.feature .body{padding:40px;justify-content:center}
.post.feature h3{font-size:32px}
.post.feature p{flex:none}
@media(max-width:960px){.postGrid{grid-template-columns:1fr}.post.feature{flex-direction:column}.post.feature .pic{flex:none;aspect-ratio:4/3}.post.feature .body{padding:26px}}

/* ---------- principios ---------- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.principle{background:#fff;border-radius:18px;padding:30px 26px;box-shadow:0 10px 30px rgba(87,40,30,.08)}
.principle b{font-family:var(--serif);font-size:34px;color:var(--rose);display:block;line-height:1;margin-bottom:10px}
.principle strong{display:block;color:var(--deep);font-size:17px;margin-bottom:6px}
.principle p{font-size:15px;color:#4A322B}
@media(max-width:960px){.principles{grid-template-columns:1fr}}

/* ---------- artículo ---------- */
.crumbs{font-size:13px;color:var(--muted);margin-bottom:12px}
.crumbs a{color:var(--brand);text-decoration:none}
.dek{font-size:17px;color:#4A322B;max-width:62ch;line-height:1.55}
.byline{margin-top:16px;font-size:14px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.byline .dot{color:var(--rose)}
.artLayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;padding:38px 0 40px;align-items:start}
@media(max-width:1000px){.artLayout{grid-template-columns:1fr;gap:34px}}
.article{max-width:70ch}
.article p{margin-bottom:20px;color:#3D2A23}
.article h2{font-size:30px;margin:44px 0 14px}
.article h3{font-size:21px;margin:28px 0 10px;font-family:var(--sans);font-weight:600;color:var(--deep)}
.article ul{margin:0 0 22px 22px}
.article li{margin-bottom:9px;color:#3D2A23}
.answer{background:var(--rose-bg);border-left:4px solid var(--brand);border-radius:0 14px 14px 0;padding:22px 24px;font-size:17.5px;margin-bottom:8px}
.answer strong{color:var(--deep)}
.artFig{margin:32px 0;border-radius:16px;overflow:hidden;background:var(--cream);line-height:0}
.artFig img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.artFig figcaption{font-size:13px;color:var(--muted);padding:12px 16px;line-height:1.5;text-align:center}
.note{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:30px 0;font-size:15.5px;color:#3D2A23}
.note strong{color:var(--deep)}
table.cmp{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
table.cmp th{background:var(--rose-bg);color:var(--deep);font-weight:600}
table.cmp td:first-child{font-weight:500;color:var(--deep);background:#FDF8F6}
.tableScroll{overflow-x:auto}
.artCta{background:var(--deep);color:#fff;border-radius:20px;padding:38px 34px;margin:44px 0 10px;text-align:center}
.artCta h2{color:#fff;margin:0 0 10px;font-size:27px}
.artCta p{color:var(--rose);margin-bottom:22px;font-style:italic;font-family:var(--serif);font-size:18px}
.sources{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;font-size:13.5px;color:var(--muted)}
.sources h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);color:var(--deep);margin-bottom:10px}
.sources li{margin-bottom:6px;list-style:none}

/* ---------- barra lateral ---------- */
.sidebar{position:sticky;top:120px;display:flex;flex-direction:column;gap:18px}
.sidebox{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:24px}
.sidebox h3{font-size:19px;margin-bottom:14px}
.sidebox a{display:block;padding:9px 0;border-bottom:1px solid var(--line);color:#4A322B;text-decoration:none;font-size:14.5px}
.sidebox a:last-of-type{border-bottom:none}
.sidebox a:hover{color:var(--brand)}
.sidebox .fine{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:12px;line-height:1.55}
.sideCta{background:linear-gradient(160deg,var(--rose-bg),#EFC3B9);border-radius:18px;padding:26px;text-align:center}
.sideCta .price{font-family:var(--serif);font-size:38px;color:var(--brand);font-weight:700;line-height:1}
.sideCta .lbl{font-size:13px;color:#4A322B;margin:6px 0 16px}
@media(max-width:1000px){.sidebar{position:static}}

/* ---------- relacionados ---------- */
.related{background:var(--cream);padding:64px 0}
.relGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.relGrid{grid-template-columns:1fr}}

/* ---------- CTA final + footer ---------- */
.bigCta{background:var(--deep);color:#fff;text-align:center;padding:80px 24px;position:relative;overflow:hidden}
.bigCta h2{color:#fff;font-size:clamp(28px,3.6vw,42px);max-width:20ch;margin:0 auto 12px}
.bigCta p{color:var(--rose);font-family:var(--serif);font-style:italic;font-size:18px;margin-bottom:30px}
footer{background:#241511;color:#E4D2CC;padding:52px 0 28px;font-size:14.5px}
footer .fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
footer h4{color:#fff;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
footer a{color:#E4D2CC;text-decoration:none}
footer a:hover{color:var(--rose)}
footer li{list-style:none;margin-bottom:9px}
footer .logoChip{background:var(--cream);border-radius:16px;display:inline-block;padding:10px 18px;margin-bottom:14px}
footer .logoChip img{height:80px;display:block}
.legal{border-top:1px solid #4a3730;margin-top:38px;padding-top:20px;text-align:center;font-size:12.5px;color:#C3ABA3}
.legal .disc{max-width:760px;margin:8px auto 0;font-style:italic}
@media(max-width:960px){footer .fgrid{grid-template-columns:1fr}}

/* ---------- flotantes ---------- */
.floats{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:12px;z-index:90;transition:opacity .3s}
.fbtn{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.28);transition:.2s}
.fbtn:hover{transform:scale(1.08)}
.fbtn svg{width:28px;height:28px;fill:#fff}
.fbtn.wa{background:#25D366}
.fbtn.ph{background:var(--deep)}
body.navOpen .floats{opacity:0;pointer-events:none}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

.legal .entity{font-size:12.5px;opacity:.7;margin-top:5px;letter-spacing:.02em}

@media(max-width:700px){.dek{font-size:16px}}

/* ---------- barra flotante del articulo ---------- */
.artBar{position:sticky;top:65px;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:9px 0}
.artBar .wrap{display:flex;align-items:center;gap:16px;min-width:0}
.artBar .bkLink{font-size:13px;color:var(--brand);text-decoration:none;white-space:nowrap;font-weight:500}
.artBar .bkLink:hover{color:var(--deep)}
.artBar h1{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--deep);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.artBar .meta{font-size:12.5px;color:var(--muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:760px){.artBar .meta{display:none}.artBar h1{font-size:13.5px}.artBar .bkLink{font-size:12px}}
.article .dek{font-size:20px;font-family:var(--serif);color:var(--deep);line-height:1.45;margin-bottom:14px;max-width:none}
.article .byline{margin:0 0 20px}