:root{
  --paper:#F1F4EF; --paper-2:#E7EBE1; --ink:#0F3B36; --ink-2:#0B2C28;
  --text:#16302C; --text-muted:#4B5D58; --accent:#D98E3B; --accent-dark:#895518;
  --accent-soft:#F4E1BB; --good:#4B8C6F; --warn:#B54B36; --border:#D8DCD0; --white:#FFFFFF;
  --shadow-1: 0 1px 2px rgba(15,59,54,0.06), 0 8px 24px rgba(15,59,54,0.06);
  --shadow-2: 0 4px 10px rgba(15,59,54,0.10), 0 20px 45px rgba(15,59,54,0.14);
  --radius-s: 10px; --radius-m: 16px; --radius-l: 26px; --maxw: 1120px; --measure: 700px;
  color-scheme: light;
}
*,*::before,*::after{ box-sizing:border-box; }
.skip-link{
  position:absolute; top:-100px; left:12px; z-index:200;
  background:var(--ink-2); color:#fff; padding:12px 20px;
  border-radius:0 0 10px 10px; font-weight:700; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{ top:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Fraunces', Georgia, serif; color:var(--ink-2); margin:0 0 .5em; text-wrap:balance; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
a{ color:inherit; }
img{ display:block; max-width:100%; height:auto; }
svg{ display:block; max-width:100%; }
button{ font-family:inherit; }
:focus-visible{ outline:2.5px solid var(--ink); outline-offset:3px; border-radius:4px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.measure{ max-width:var(--measure); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.kicker{ font-size:14px; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }

/* ---------- disclosure + cookies ---------- */
.disclosure-bar{ background:var(--ink-2); color:#CFE3DC; font-size:13px; text-align:center; padding:8px 16px; }
.disclosure-bar a{ color:#EFDBAE; text-decoration:underline; }

.cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:80; background:var(--ink-2); color:#F6F1E4; border-radius:var(--radius-m); box-shadow:var(--shadow-2); transform:translateY(140%); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.cookie-banner[hidden]{ display:none; }
.cookie-banner.is-visible{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .cookie-banner{ transition:none; } }
.cookie-banner-inner{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:18px 22px; max-width:1120px; margin:0 auto; }
.cookie-banner-text{ margin:0; font-size:14px; line-height:1.6; color:#CFE3DC; flex:1 1 420px; }
.cookie-banner-text a{ color:#EFDBAE; text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:10px; flex:none; flex-wrap:wrap; }
.cookie-banner .btn-ghost{ border-color:#CFE3DC; color:#F6F1E4; }
.cookie-banner .btn-ghost:hover{ background:#CFE3DC; color:var(--ink-2); }

/* ---------- header ---------- */
header.site{ position:sticky; top:0; z-index:50; background:rgba(241,244,239,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.site-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(--maxw); margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-weight:600; font-size:22px; color:var(--ink-2); text-decoration:none; }
.logo-mark{ width:30px; height:30px; flex:none; }
.logo-sub{ display:block; font-family:'Public Sans',sans-serif; font-weight:500; font-size:11.5px; color:var(--text-muted); letter-spacing:.02em; }
.header-cta{ display:flex; align-items:center; gap:14px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:999px; font-weight:700; font-size:16px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.3,1.2), box-shadow .25s ease, background .2s ease; }
.btn-primary{ background:var(--accent); color:#241300; box-shadow:var(--shadow-1); }
.btn-primary:hover{ background:var(--accent-dark); box-shadow:var(--shadow-2); }
.btn-primary:active{ transform:scale(.97); }
.btn-ghost{ background:transparent; color:var(--ink-2); border-color:var(--ink-2); }
.btn-ghost:hover{ background:var(--ink-2); color:var(--paper); }
.btn-small{ padding:9px 18px; font-size:14.5px; }
.btn-block{ width:100%; }

/* ---------- breadcrumb ---------- */
.crumb{ font-size:14px; color:var(--text-muted); padding-top:18px; }
.crumb a{ text-decoration:underline; text-underline-offset:3px; }
.crumb a:hover{ color:var(--ink-2); }

/* ---------- blog listing ---------- */
.blog-hero{ padding:44px 0 10px; text-align:center; max-width:680px; margin:0 auto; }
.blog-hero h1{ font-size:clamp(30px,4vw,44px); }
.blog-hero p{ font-size:17px; color:var(--text-muted); }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding-top:36px; padding-bottom:80px; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-1); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.blog-card-img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--paper-2); }
.blog-card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.blog-card-tag{ font-size:12.5px; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px; }
.blog-card h2, .blog-card h3{ font-size:19px; line-height:1.3; margin-bottom:10px; }
.blog-card-summary{ font-size:14.5px; color:var(--text-muted); flex:1; margin-bottom:18px; }
.blog-card-meta{ font-size:12.5px; color:var(--text-muted); margin-bottom:14px; }
.blog-card .btn{ align-self:flex-start; }

/* ---------- article ---------- */
.article-hero{ max-width:760px; margin:0 auto; padding:44px 24px 0; text-align:center; }
.article-hero h1{ font-size:clamp(28px,4vw,42px); }
.article-meta{ font-size:13.5px; color:var(--text-muted); margin-bottom:18px; }
.article-hero-img{ width:100%; max-width:960px; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius-l); margin:28px auto 0; box-shadow:var(--shadow-1); }

.article-body{ max-width:var(--measure); margin:0 auto; padding:40px 24px 20px; }
.article-body p{ font-size:17.5px; line-height:1.8; color:var(--text); }
.article-body h2{ font-size:24px; margin-top:38px; }

.article-body ul{ margin:0 0 1em; padding-left:22px; }
.article-body li{ font-size:17.5px; line-height:1.7; margin-bottom:8px; }
.article-body a{ color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; }
.article-sources{ margin-top:44px; padding-top:22px; border-top:1px solid var(--border); }
.article-sources h2{ font-size:19px; margin-top:0; }
.article-sources ol{ margin:0; padding-left:20px; }
.article-sources li{ font-size:13.5px; line-height:1.55; color:var(--text-muted); margin-bottom:6px; }
.article-sources a{ font-size:13.5px; word-break:break-word; }

.related-box{ max-width:var(--measure); margin:30px auto 60px; padding:0 24px; }
.related-card{ display:flex; align-items:center; gap:18px; background:var(--white); border:1.5px solid var(--accent); border-radius:var(--radius-l); padding:22px 24px; box-shadow:var(--shadow-1); }
.related-icon{ flex:none; width:46px; height:46px; border-radius:50%; background:var(--accent-soft); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; font-size:20px; }
.related-card h3{ font-size:16px; margin-bottom:4px; }
.related-card p{ font-size:14px; color:var(--text-muted); margin-bottom:0; }
.related-card .btn{ flex:none; margin-left:auto; }
@media (max-width:560px){ .related-card{ flex-wrap:wrap; } .related-card .btn{ margin-left:0; width:100%; } }

.article-disclaimer{ max-width:var(--measure); margin:0 auto 60px; padding:0 24px; font-size:13px; color:var(--text-muted); border-top:1px solid var(--border); padding-top:20px; }

.article-back{ max-width:var(--measure); margin:0 auto; padding:0 24px; }
.article-back a{ font-size:14.5px; font-weight:700; color:var(--ink-2); text-decoration:none; }
.article-back a:hover{ text-decoration:underline; }

/* ---------- ad slots (reservado para Google AdSense) ---------- */
.ad-slot{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:110px; box-sizing:border-box;
  background:var(--white); border:1.5px dashed var(--border); border-radius:var(--radius-m);
  color:var(--text-muted); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.ad-slot-grid{ grid-column:1 / -1; min-height:120px; margin:4px 0; }
.ad-slot-article{ max-width:var(--measure); margin:34px auto; min-height:120px; }

/* Mientras AdSense no este activo, los huecos vacios no se muestran (en movil
   eran cajas grandes que cortaban la lectura). Al meter el <ins class="adsbygoogle">
   real dentro de .ad-slot, vuelven a verse solos. */
.ad-slot:not(:has(ins)){ display:none; }

/* ---------- footer ---------- */
footer{ background:var(--ink-2); color:#CFE3DC; padding:52px 0 30px; font-size:13.5px; }
footer .logo{ color:#F6F1E4; }
footer p{ font-size:14px; }
.foot-top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto 24px; padding:0 24px 28px; border-bottom:1px solid rgba(255,255,255,0.12); }
.foot-links{ display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; }
.foot-links a{ font-size:14px; text-decoration:none; color:#CFE3DC; }
.foot-links a:hover{ text-decoration:underline; }
.legal{ max-width:820px; line-height:1.7; margin:0 auto; padding:0 24px; }
.legal p{ font-size:12.5px; color:#9FB3AC; max-width:none; }

/* ---------- Sigue leyendo (articulos relacionados) ---------- */
.related-posts{ max-width:var(--maxw); margin:6px auto 54px; padding:0 24px; }
.related-posts h2{ font-size:24px; margin-bottom:18px; text-align:center; }
.related-posts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related-post{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow-1); transition:transform .2s ease, box-shadow .2s ease; }
.related-post:hover{ transform:translateY(-3px); }
.related-post img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.related-post-tag{ margin:14px 16px 6px; font-size:12px; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.03em; }
.related-post-title{ margin:0 16px 18px; font-family:'Fraunces', Georgia, serif; font-size:18px; line-height:1.3; font-weight:600; color:var(--ink-2); }
@media (max-width:760px){ .related-posts-grid{ grid-template-columns:1fr; gap:16px; } .related-post img{ aspect-ratio:16/9; } }
.related-all{ margin-top:34px; padding-top:26px; border-top:1px solid var(--border); }
.related-all h3{ font-size:18px; margin-bottom:12px; text-align:center; }
.related-all ul{ list-style:none; margin:0 auto; padding:0; max-width:820px; columns:2; column-gap:34px; }
.related-all li{ break-inside:avoid; margin:0 0 9px; font-size:15px; line-height:1.45; }
.related-all a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.related-all a:hover{ color:var(--accent-dark); }
.related-all p{ text-align:center; margin:16px 0 0; font-size:14.5px; }
@media (max-width:760px){ .related-all ul{ columns:1; } }
.related-thumb{ flex:none; width:96px; height:64px; object-fit:contain; background:#fff; border:1px solid var(--border); border-radius:var(--radius-m); padding:2px; }
.related-box .related-card + .related-card{ margin-top:14px; }
/* ---------- Banner de ficha de suplemento (a mitad del articulo) ---------- */
.product-banner{ display:flex; align-items:center; gap:28px; margin:40px 0; padding:22px 26px; background:linear-gradient(135deg,#FFFDF7 0%,var(--accent-soft) 100%); border:1.5px solid var(--accent); border-radius:var(--radius-l); box-shadow:var(--shadow-1); }
.pb-media{ flex:none; width:240px; display:block; background:#fff; border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; }
.pb-media img{ display:block; width:100%; height:auto; }
.pb-body{ flex:1; min-width:0; }
.pb-tag{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-dark); margin-bottom:6px; }
.product-banner h3{ font-size:24px; line-height:1.2; margin:0 0 6px; }
.product-banner p{ font-size:15.5px; color:var(--text-muted); margin:0 0 16px; }
.pb-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#241300; font-weight:800; font-size:16px; text-decoration:none; padding:14px 26px; border-radius:999px; box-shadow:0 8px 22px rgba(217,142,59,.42); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.pb-btn:hover{ background:#E59E4D; transform:translateY(-2px); box-shadow:0 12px 28px rgba(217,142,59,.5); }
@media (max-width:640px){ .product-banner{ flex-direction:column; align-items:stretch; text-align:center; gap:14px; padding:18px; } .pb-media{ width:100%; max-width:240px; align-self:center; } .pb-btn{ justify-content:center; width:100%; } }
.article-body .product-banner .pb-btn, .article-body .product-banner .pb-btn:hover, .article-body .product-banner .pb-btn:visited{ color:#241300; text-decoration:none; }
.article-body .product-banner .pb-media{ text-decoration:none; }
.article-body .product-banner h3, .article-body .product-banner p{ text-align:inherit; }
/* ---------- Preguntas frecuentes del articulo ---------- */
.article-faq{ margin:44px 0 10px; padding-top:30px; border-top:1px solid var(--border); }
.article-faq h2{ margin-bottom:14px; }
.article-faq h3{ font-size:18px; line-height:1.35; margin:22px 0 6px; }
.article-faq p{ margin:0 0 4px; color:var(--text); }

/* ---------- Compartir (articulos) ---------- */
.article-tools{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin:0 0 4px; }
.share-top{ position:relative; display:flex; justify-content:center; margin:0; }
.lang-tab{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--border); background:var(--white); color:var(--ink-2); font-weight:600; font-size:13.5px; text-decoration:none; transition:border-color .2s ease, background .2s ease; }
.lang-tab .share-ico{ width:16px; height:16px; color:var(--accent-dark); }
.lang-tab:hover{ border-color:var(--ink-2); background:var(--paper); }
.lang-tab:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.share-ico{ width:18px; height:18px; flex:none; }
.share-trigger{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; border:1.5px solid var(--ink-2); background:transparent; color:var(--ink-2); font:inherit; font-weight:700; font-size:14.5px; cursor:pointer; transition:background .2s ease, color .2s ease, transform .15s ease; }
.share-trigger:hover, .share-trigger[aria-expanded="true"]{ background:var(--ink-2); color:var(--paper); }
.share-trigger:active{ transform:scale(.97); }
.share-trigger:focus-visible, .share-chip:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.share-pop{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); z-index:20; display:flex; flex-direction:column; gap:6px; min-width:210px; padding:12px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:0 14px 34px rgba(11,44,40,.18); }
.share-pop[hidden]{ display:none; }
.share-chip{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; padding:10px 16px; border-radius:999px; border:1.5px solid var(--border); background:var(--white); color:var(--ink-2); font:inherit; font-weight:600; font-size:14.5px; text-decoration:none; cursor:pointer; transition:border-color .2s ease, background .2s ease, transform .15s ease; }
.share-chip .share-ico{ color:var(--accent-dark); }
.share-chip:hover{ border-color:var(--ink-2); background:var(--paper); }
.share-chip:active{ transform:scale(.97); }
.share-pop .share-chip{ border-color:transparent; border-radius:var(--radius-s); width:100%; }
.share-pop .share-chip:hover{ background:var(--paper); border-color:transparent; }
.share-end{ margin:40px 0 10px; padding:24px 26px; background:var(--paper-2); border:1px solid var(--border); border-radius:var(--radius-l); text-align:center; }
.article-body .share-end-title{ margin:0 0 16px; font-family:'Fraunces', Georgia, serif; font-size:19px; line-height:1.35; font-weight:600; color:var(--ink-2); }
.share-end-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.article-body .share-end .share-chip{ color:var(--ink-2); text-decoration:none; }
.share-end .share-more[hidden]{ display:none; }
@media (max-width:560px){ .share-chip{ padding:10px 12px; gap:8px; font-size:14px; } .share-end{ padding:20px 16px; } .share-end-links{ display:grid; grid-template-columns:1fr 1fr; } .share-end .share-chip{ justify-content:center; } }
@media print{ .article-tools, .share-end{ display:none; } }