/* ══════════════════════════════════════════════════════════
   BLOG.CSS — Jesús Villalba
   Hoja de estilos específica de /blog/.
   Se carga DESPUÉS de shared-index.css y reutiliza sus variables
   (--c, --ink, --ink2, --ink3, --gold, --gold-text, --gr, --e, --m, --ms)
   No redefine ninguna variable: si shared-index.css cambia el tono
   de dorado o el fondo, el blog cambia con él automáticamente.
   ══════════════════════════════════════════════════════════ */

/* ── CONTENEDOR GENERAL ── */
.blog-shell{
  max-width:min(100%,1240px);
  margin:0 auto;
  padding:0 var(--m);
}

/* ── MASTHEAD (cabecera del listado del blog) ── */
.blog-masthead{
  padding:clamp(120px,16vh,168px) var(--m) clamp(56px,7vw,88px);
  background:linear-gradient(180deg, rgba(247,244,238,.99) 0%, rgba(243,237,228,.98) 100%);
  border-bottom:1px solid rgba(163,142,103,.14);
}
.blog-masthead-inner{
  max-width:min(100%,1240px);
  margin:0 auto;
}
.blog-masthead h1{
  margin:14px 0 0;
  max-width:16ch;
  font-size:clamp(2.3rem,3.6vw,3.6rem);
  line-height:1.14;
  letter-spacing:-.4px;
}
.blog-masthead p{
  margin:20px 0 0;
  max-width:52ch;
  font-size:clamp(.86rem,.9vw,.98rem);
  line-height:1.95;
  color:var(--ink3);
}

/* ── GRID DE ENTRADAS ── */
.blog-grid{
  max-width:min(100%,1240px);
  margin:0 auto;
  padding:clamp(56px,7vw,88px) var(--m) clamp(80px,9vw,132px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,4vw,40px);
}
@media(min-width:720px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:1100px){
  .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,2.6vw,34px);}
}

/* ── TARJETA DE ENTRADA ── */
.post-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(163,142,103,.16);
  background:linear-gradient(180deg, rgba(249,245,237,.98), rgba(242,236,226,.94));
  box-shadow:0 10px 24px rgba(14,14,12,.03);
  text-decoration:none;
  color:inherit;
  transition:transform .4s var(--e), border-color .4s var(--e), box-shadow .4s var(--e);
}
.post-card:hover,
.post-card:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(163,142,103,.32);
  box-shadow:0 16px 32px rgba(14,14,12,.06);
}
.post-card:focus-visible{outline:2px solid rgba(154,134,96,.5);outline-offset:2px;}

.post-card-image{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:4/5;
  background:rgba(163,142,103,.08);
}
.post-card-image picture,
.post-card-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.post-card-image img{
  filter:brightness(.96) contrast(1.02) saturate(.9);
  transition:transform .6s var(--e);
}
.post-card:hover .post-card-image img{transform:scale(1.035);}

.post-card-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 24px 26px;
}
.post-card-tag{
  font-size:.44rem;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:400;
}
.post-card-title{
  margin:0;
  font-size:clamp(1.05rem,1.5vw,1.24rem);
  line-height:1.32;
  letter-spacing:-.1px;
}
.post-card-title em{font-style:italic;}
.post-card-excerpt{
  margin:0;
  font-size:.78rem;
  line-height:1.75;
  color:var(--ink3);
}
.post-card-meta{
  margin-top:6px;
  font-size:.62rem;
  letter-spacing:.4px;
  color:rgba(60,56,48,.5);
}

/* ── AVISO DE PRIMERAS ENTRADAS (cuando el blog es nuevo) ── */
.blog-note{
  max-width:min(100%,1240px);
  margin:0 auto;
  padding:0 var(--m) clamp(24px,3vw,36px);
}
.blog-note p{
  max-width:60ch;
  font-size:.76rem;
  line-height:1.85;
  color:rgba(60,56,48,.55);
  font-style:italic;
}

/* ══════════════════════════════════════════════════════════
   PÁGINA DE ARTÍCULO INDIVIDUAL
   ══════════════════════════════════════════════════════════ */

.post-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:clamp(96px,14vh,132px) var(--m) 0;
  font-size:.62rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--ink3);
  text-decoration:none;
  transition:color .3s var(--e);
}
.post-back:hover{color:var(--gold);}

.post-header{
  max-width:min(100%,1240px);
  margin:0 auto;
  padding:clamp(24px,3vw,32px) var(--m) 0;
}
.post-tag{
  display:inline-block;
  font-size:.46rem;
  letter-spacing:2.8px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.post-title{
  margin:0;
  max-width:20ch;
  font-size:clamp(2.1rem,4.2vw,3.5rem);
  line-height:1.14;
  letter-spacing:-.5px;
}
.post-title em{font-style:italic;}
.post-deck{
  margin:24px 0 0;
  max-width:56ch;
  font-size:clamp(.94rem,1.1vw,1.08rem);
  line-height:1.85;
  color:var(--ink3);
}
.post-meta{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--gr);
  font-size:.66rem;
  letter-spacing:.5px;
  color:rgba(60,56,48,.55);
}

/* ── IMAGEN DE PORTADA ── */
.post-cover{
  max-width:min(100%,1240px);
  margin:clamp(32px,4vw,48px) auto 0;
  padding:0 var(--m);
}
.post-cover-frame{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  border:1px solid rgba(163,142,103,.22);
  box-shadow:0 18px 40px rgba(14,14,12,.07);
  aspect-ratio:4/3;
}
.post-cover-frame.post-cover--portrait{aspect-ratio:2/3;max-width:560px;margin:0 auto;}
.post-cover-frame picture,
.post-cover-frame img{display:block;width:100%;height:100%;}
.post-cover-frame img{
  object-fit:cover;
  filter:brightness(.96) contrast(1.02) saturate(.92);
}

/* ── CUERPO DEL ARTÍCULO ── */
.post-body{
  max-width:68ch;
  margin:0 auto;
  padding:clamp(48px,6vw,72px) var(--m) clamp(24px,3vw,32px);
}
.post-body p{
  margin:0 0 1.6em;
  font-size:.94rem;
  line-height:2.05;
  color:var(--ink2);
}
.post-body h2{
  margin:1.7em 0 .7em;
  font-size:clamp(1.32rem,2vw,1.68rem);
  line-height:1.32;
  letter-spacing:-.2px;
}
.post-body h2:first-child{margin-top:0;}
.post-body h3{
  margin:1.5em 0 .6em;
  font-size:clamp(1.05rem,1.5vw,1.2rem);
  letter-spacing:-.1px;
}
.post-body ul,
.post-body ol{
  margin:0 0 1.6em;
  padding:0;
  list-style:none;
}
.post-body ul li,
.post-body ol li{
  position:relative;
  padding-left:22px;
  margin-bottom:.7em;
  font-size:.94rem;
  line-height:1.9;
  color:var(--ink2);
}
.post-body ul li::before{
  content:'';
  position:absolute;
  left:0;
  top:.75em;
  width:6px;
  height:1px;
  background:var(--gold);
}
.post-body a{color:var(--ink);text-decoration-color:rgba(163,142,103,.4);text-underline-offset:3px;}
.post-body a:hover{text-decoration-color:var(--gold);}
.post-body strong{font-weight:600;color:var(--ink);}

/* ── CITA DESTACADA ── */
.post-pullquote{
  margin:2.2em 0;
  padding:6px 0 6px 26px;
  border-left:1px solid rgba(163,142,103,.4);
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.15rem,1.8vw,1.4rem);
  line-height:1.5;
  color:var(--ink);
}

/* ── IMAGEN DENTRO DEL CUERPO ── */
.post-inline-image{
  margin:2.4em 0;
}
.post-inline-frame{
  position:relative;
  overflow:hidden;
  border-radius:4px;
  border:1px solid rgba(163,142,103,.2);
  box-shadow:0 10px 26px rgba(14,14,12,.05);
  aspect-ratio:4/5;
  max-width:380px;
}
.post-inline-frame picture,
.post-inline-frame img{display:block;width:100%;height:100%;}
.post-inline-frame img{object-fit:cover;filter:brightness(.96) contrast(1.02) saturate(.9);}
.post-inline-caption{
  margin-top:10px;
  font-size:.7rem;
  line-height:1.6;
  color:rgba(60,56,48,.55);
  max-width:380px;
}

/* ── CTA DE CIERRE ── */
.post-cta{
  max-width:min(100%,1240px);
  margin:clamp(24px,3vw,32px) auto clamp(72px,8vw,104px);
  padding:clamp(40px,5vw,56px) var(--m);
  text-align:center;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(249,245,237,.98), rgba(242,236,226,.94));
  border:1px solid rgba(163,142,103,.16);
}
.post-cta-eyebrow{
  display:block;
  font-size:.46rem;
  letter-spacing:2.8px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.post-cta h2{
  margin:0 auto;
  max-width:20ch;
  font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.25;
}
.post-cta-actions{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}

/* ── ARTÍCULOS RELACIONADOS ── */
.post-related{
  max-width:min(100%,1240px);
  margin:0 auto;
  padding:0 var(--m) clamp(80px,9vw,120px);
}
.post-related-head{
  font-size:.46rem;
  letter-spacing:2.8px;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:22px;
}
.post-related-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media(min-width:720px){
  .post-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;}
}

@media(prefers-reduced-motion:reduce){
  .post-card,.post-card-image img{transition-duration:.01ms !important;}
}

/* ══════════════════════════════════════════════════════════
   CABECERA EN PÁGINAS DE BLOG — sin hero oscuro
   En shared-index.css, el logo/nav/idioma nacen en color claro
   (pensados para ir encima de la foto oscura del hero de home) y
   solo pasan a oscuro con la clase .scrolled, que además solo se
   añade tras un evento de scroll real. Las páginas de blog no
   tienen hero: aquí forzamos el mismo aspecto que el estado
   "scrolled" desde el primer fotograma, para que el logo, el nav
   y ES/EN se lean bien nada más cargar la página.
   ══════════════════════════════════════════════════════════ */
.site-header{background:rgba(246,244,239,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--gr);}
.logo{color:var(--ink) !important;}
.logo-sub{color:var(--gold) !important;}
.main-nav a{color:var(--ink3) !important;}
.main-nav a:hover{color:var(--gold) !important;}
.nav-toggle span{background:var(--ink3) !important;}
.lang-switch{border-left-color:var(--gr) !important;}
.lang-switch a{color:var(--ink4) !important;}
.lang-switch a.lang-active,
.lang-switch a:hover{color:var(--gold) !important;}
.lang-sep{color:var(--gr) !important;}

/* ══════════════════════════════════════════════════════════
   NEWSLETTER ("Magia en Botes de Cristal")
   Antes sin estilos propios — el iframe de Brevo se veía "suelto".
   Nota: solo podemos vestir el marco alrededor del iframe; el
   contenido de dentro (campos, botón) lo controla la plantilla
   de formulario en la cuenta de Brevo, no este CSS.
   ══════════════════════════════════════════════════════════ */
.blog-signup{
  max-width:min(100%,1240px);
  margin:0 auto;
  padding:clamp(48px,6vw,84px) var(--m);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,4vw,40px);
  align-items:center;
}
@media(min-width:720px){
  .blog-signup{grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px);}
}

.blog-signup-eyebrow{
  display:block;
  font-size:1.05rem;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:18px;
}
.blog-signup-copy h2{
  margin:0;
  max-width:14ch;
  font-size:clamp(1.6rem,2.6vw,2.15rem);
  line-height:1.2;
  letter-spacing:-.3px;
}
.blog-signup-copy p{
  margin:18px 0 0;
  max-width:44ch;
  font-size:.86rem;
  line-height:1.9;
  color:var(--ink3);
}

.blog-signup-card{
  border-radius:22px;
  border:1px solid rgba(163,142,103,.16);
  background:linear-gradient(180deg, rgba(249,245,237,.98), rgba(242,236,226,.94));
  box-shadow:0 10px 24px rgba(14,14,12,.03);
  padding:clamp(14px,1.6vw,20px);
  overflow:hidden;
}
.blog-signup-card iframe{
  display:block;
  width:100%;
  height:480px;
  border:0;
  border-radius:12px;
}

/* ══════════════════════════════════════════════════════════
   BANNER DE COOKIES — fijado al pie de pantalla
   shared-index.css define el color/tipografía; aquí solo
   garantizamos que sea un banner flotante fijo, no contenido
   normal de la página (que es lo que se estaba viendo).
   ══════════════════════════════════════════════════════════ */
.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  transform:translateY(110%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.visible{
  transform:translateY(0);
}