/* BLOG · PERFECTOS PROMETIDOS — HERO 
/* ===== BLOG · EDICIÓN LUJO (FINAL) ===== */
/* La página debe sentirse como papel, no como un vacío gris */
/* ===============================
   BLOG · EDICIONES (CABECERA)
   =============================== */

.editorial-title{
  margin: 0 0 14px;
  font-size: clamp(2.4rem, 3.8vw, 3.2rem);
  letter-spacing: 0.22em;
  text-align: center;
}

.editorial-subtitle{
  margin: 0 0 24px;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(0,0,0,.70);
}

.editorial-intro{
  margin: 0 auto;
  max-width: 520px;
  text-align: center;
  font-size: 0.96rem;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,.82);
}

.blog-hero{
  padding: 90px 0 120px;
  background: linear-gradient(
    180deg,
    rgba(246,244,239,1) 0%,
    rgba(246,244,239,1) 42%,
    rgba(235,232,224,1) 100%
  );
}

/* Contenedor de la portada como “lámina editorial” */
.blog-cover{
  width: min(520px, 92vw);
  margin: 0 auto;
  padding: 22px 22px 18px;
  background: rgba(246,244,239,.78);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}

/* Imagen: que se vea como “print” */
.blog-cover img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Texto: editorial, calmado y con aire */
.blog-whisper{
  margin: 18px auto 0;
  padding: 0 6px;
  max-width: 520px;

  text-align: center;
  font-style: italic;
  letter-spacing: 0.02em;

  color: rgba(17,17,17,.78);
  font-size: 0.96rem;
  line-height: 1.75;
}

/* Mobile: menos “marco”, misma sensación */
@media (max-width: 520px){
  .blog-hero{
    padding: 70px 0 90px;
  }
  .blog-cover{
    padding: 14px 14px 12px;
    border-radius: 16px;
  }
  .blog-cover img{
    border-radius: 10px;
  }
  .blog-whisper{
    font-size: 0.92rem;
    line-height: 1.7;
  }
}
/* ===============================
   BLOG · POST (EDITORIAL PREMIUM)
   (para .blog-post / .post / tipografía / quote / next)
   Pegar al FINAL de blog.css
   =============================== */

/* Variables por si no existen en styles.css */
:root{
  --ink: #111;
  --paper: #f6f4ef;
  --paper2: #fbfaf7;
  --olive: #6b7a55;
  --shadow: 0 25px 60px rgba(0,0,0,.18);

  --post-max: 860px;
  --col-max: 640px;
}

/* Sección post: respira, queda “revista” */
.blog-post{
  background: var(--paper2);
  padding: 56px 0 90px;
}

/* Caja editorial (muy sutil, sin parecer “blog barato”) */
.blog-post .post{
  max-width: var(--post-max);
  margin: 0 auto;
  padding: 0 52px;
}

@media (max-width: 860px){
  .blog-post .post{
    padding: 0 22px;
  }
}

/* Columna real de lectura */
.blog-post .post-header,
.blog-post .post-content{
  max-width: var(--col-max);
  margin-left: auto;
  margin-right: auto;
}

/* Header del artículo */
.post-header{
  padding-top: 18px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Kicker editorial */
.post-kicker{
  margin: 0 0 10px;
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

/* Título: elegante, con peso, sin gritar */
.post-title{
  margin: 0 0 12px;
  font-size: clamp(2.05rem, 3.2vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Entradilla (dek) */
.post-intro{
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.65;
  color: rgba(0,0,0,.70);
}

/* Cuerpo */
.post-content{
  padding-top: 26px;
}

/* Párrafos: ritmo de lectura editorial */
.post-content p{
  margin: 0 0 18px;
  font-size: 1.04rem;
  line-height: 1.85;
  color: rgba(0,0,0,.86);
}

/* Negritas: sutiles */
.post-content strong{
  font-weight: 600;
}

/* Subtítulos: discretos y con aire */
.post-content h2{
  margin: 34px 0 12px;
  font-size: 1.08rem;
  line-height: 1.35;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(0,0,0,.65);
}

/* Quote: firma Perfectos Prometidos */
.post-content blockquote{
  margin: 28px 0 26px;
  padding: 18px 18px 18px 18px;
  border-left: 3px solid rgba(107,122,85,.55); /* olive */
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.30));
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(0,0,0,.82);
}

/* “Siguiente artículo”: bloque editorial, no botón comercial */
.post-next{
  margin-top: 34px;
  padding: 18px 18px 18px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
}

/* Etiqueta */
.post-next .next-label{
  margin: 0 0 6px;
  font-size: 0.80rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

/* Título siguiente */
.post-next .next-title{
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.45;
  color: rgba(0,0,0,.86);
}

/* Teaser */
.post-next .next-intro{
  margin: 0 0 10px;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(0,0,0,.70);
}

/* “Próximamente” como sello */
.post-next .next-soon{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,.62);
  background: rgba(246,244,239,.65);
}

/* Ajuste fino móvil */
@media (max-width: 560px){
  .blog-post{
    padding: 38px 0 70px;
  }
  .post-header{
    padding-bottom: 22px;
  }
  .post-content p{
    font-size: 1.01rem;
    line-height: 1.82;
  }
}
/* ===============================
   BLOG · PORTADA / ÍNDICE REVISTA
   =============================== */

.blog-index{
  padding: 56px 0 90px;
  background: var(--paper2, #fbfaf7);
  max-width: 100%;

}

.blog-index__inner{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 52px;
}


.entry{
  max-width: 640px;
  margin: 0 auto 34px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.entry__kicker{
  margin: 0 0 10px;
  font-size: .86rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.entry__title{
  margin: 0 0 10px;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.entry__title a{
  color: var(--ink, #111);
  text-decoration: none;
}

.entry__title a:hover{
  text-decoration: underline;
  text-underline-offset: 6px;
}

.entry__dek{
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(0,0,0,.72);
}

.entry__link{
  display: inline-block;
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(0,0,0,.70);
  border-bottom: 1px solid rgba(0,0,0,.22);
  padding-bottom: 6px;
}

.entry__link:hover{
  color: rgba(0,0,0,.90);
  border-bottom-color: rgba(0,0,0,.45);
}

.entry--soon{
  opacity: .92;
}

.entry__soon{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,0,0,.62);
  background: rgba(246,244,239,.65);
}

/* ===============================
   POST · PÁGINA INDIVIDUAL (REVISTA)
   =============================== */

main.post-page{
  padding-top: 110px; /* respira bajo topbar fija */
  background: var(--paper2, #fbfaf7);
}

.post-hero{
  padding: 46px 0 18px;
  background: var(--paper2, #fbfaf7);
}

.post-hero__inner{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 50px;
}



.post-back{
  display: inline-block;
  margin: 0 0 18px;
  font-size: .86rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(0,0,0,.58);
}

.post-back:hover{
  color: rgba(0,0,0,.82);
}

.post-kicker{
  margin: 0 0 10px;
  font-size: .86rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.post-title{
  margin: 0 0 12px;
  font-size: clamp(2.05rem, 3.2vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink, #111);
}

.post-intro{
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.65;
  color: rgba(0,0,0,.70);
}

.post-body{
  padding: 18px 0 96px;
}

.post-body .post{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 52px;
}


.post-content{
  max-width: 640px;
  margin: 0 auto;
}

.post-content p{
  margin: 0 0 18px;
  font-size: 1.04rem;
  line-height: 1.85;
  color: rgba(0,0,0,.86);
}

.post-content h2{
  margin: 34px 0 12px;
  font-size: 1.08rem;
  line-height: 1.35;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(0,0,0,.65);
}

.post-content blockquote{
  margin: 28px 0 26px;
  padding: 18px;
  border-left: 3px solid rgba(107,122,85,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.30));
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(0,0,0,.82);
}

.post-next{
  margin-top: 34px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
}

.post-next .next-label{
  margin: 0 0 6px;
  font-size: .80rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.post-next .next-title{
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.45;
  color: rgba(0,0,0,.86);
}

.post-next .next-intro{
  margin: 0 0 10px;
  font-size: .98rem;
  line-height: 1.7;
  color: rgba(0,0,0,.70);
}

.post-next .next-soon{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,0,0,.62);
  background: rgba(246,244,239,.65);
}
/* ===============================
   BLOG · ÍNDICE (REVISTA)
   =============================== */

.blog-index{
  padding: 56px 0 96px;
  background: var(--paper2, #fbfaf7);
}

.blog-index__inner{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 52px;
}


.blog-index__head{
  max-width: 640px;
  margin: 0 auto 34px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.blog-index__issue{
  margin: 0 0 10px;
  font-size: .86rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.blog-index__title{
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink, #111);
}

.blog-index__dek{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(0,0,0,.70);
}

/* Lista */
.blog-index__list{
  max-width: 640px;
  margin: 0 auto;
}

/* Cada entrada */
.entry{
  padding: 26px 0 26px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Meta superior: número + tag */
.entry__meta{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.entry__num{
  font-size: .92rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(0,0,0,.60);
}

.entry__tag{
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.46);
}

/* Título */
.entry__title{
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.entry__title a{
  color: var(--ink, #111);
  text-decoration: none;
}

.entry__title a:hover{
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Entradilla */
.entry__dek{
  margin: 0 0 12px;
  font-size: 1.03rem;
  line-height: 1.85;
  color: rgba(0,0,0,.72);
}

/* Link */
.entry__link{
  display: inline-block;
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(0,0,0,.70);
  border-bottom: 1px solid rgba(0,0,0,.22);
  padding-bottom: 6px;
}

.entry__link:hover{
  color: rgba(0,0,0,.90);
  border-bottom-color: rgba(0,0,0,.45);
}

/* Placeholder “próximamente” */
.entry--soon{
  opacity: .88;
}

.entry__soon{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,0,0,.62);
  background: rgba(246,244,239,.65);
}
/* ===============================
   POST · MAQUETACIÓN SOLO DESKTOP
   (móvil se queda como está)
   Pegar AL FINAL de blog.css
   =============================== */

@media (min-width: 861px){

  /* Respira bajo la topbar fija */
  main.post-page{
    padding-top: 140px;
    padding-bottom: 120px;
    background: var(--paper2, #fbfaf7);
  }

  /* Hero tipográfico más editorial */
  .post-hero{
    padding: 70px 0 28px;
  }

  .post-hero__inner{
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 64px;
  }

  .post-title{
    font-size: clamp(2.6rem, 3.4vw, 3.4rem);
    line-height: 1.03;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
  }

  .post-intro{
    font-size: 1.10rem;
    line-height: 1.9;
    max-width: 52rem;
  }

  /* Cuerpo: columna + caja editorial premium */
  .post-body{
    padding: 28px 0 0;
  }

  .post-body .post{
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 64px;
  }

  .post-content{
    max-width: 720px;
    margin: 0 auto;
    padding: 44px 46px 52px;
    border-radius: 28px;
    border: 1px solid rgba(0,0,0,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
    box-shadow: 0 34px 90px rgba(0,0,0,.14);
  }

  /* Ritmo de lectura en escritorio */
  .post-content p{
    font-size: 1.08rem;
    line-height: 1.95;
    margin-bottom: 20px;
  }

  .post-content h2{
    margin-top: 44px;
    margin-bottom: 16px;
    font-size: 1.00rem;
    letter-spacing: .22em;
  }

  .post-content blockquote{
    margin: 34px 0 30px;
    padding: 22px 22px;
    border-radius: 20px;
    box-shadow: 0 22px 70px rgba(0,0,0,.12);
    font-size: 1.10rem;
    line-height: 1.8;
  }

  /* Next: que parezca pieza editorial */
  .post-next{
    margin-top: 38px;
    padding: 22px 22px 20px;
    border-radius: 20px;
  }
}
/* =========================================
   BLOG · LUJO SOLO DESKTOP (PC)
   No toca móvil
   Pegar AL FINAL de blog.css
   ========================================= */
@media (min-width: 861px){

  /* 1) Portada (hero) con presencia editorial */
  .blog-hero{
    padding-top: 130px;          /* respira bajo topbar fija */
    padding-bottom: 70px;
    background: var(--paper2, #fbfaf7);
  }

  .blog-cover{
    max-width: 1120px;           /* más “revista” en desktop */
    margin: 0 auto;
    padding: 0 64px;
  }

  .blog-cover img{
    display: block;
    width: 100%;
    max-width: 860px;            /* evita que se vea “gigante” */
    margin: 0 auto;
    border-radius: 22px;
    box-shadow: 0 30px 90px rgba(0,0,0,.18);
  }

  .blog-whisper{
    max-width: 860px;
    margin: 22px auto 0;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 18px 60px rgba(0,0,0,.10);
    font-size: 0.98rem;
    line-height: 1.75;
    color: rgba(0,0,0,.78);
  }

  /* 2) Índice: columna editorial */
  .blog-index{
    padding: 72px 0 120px;
    background: var(--paper2, #fbfaf7);
  }

  .blog-index__inner{
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 64px;
  }

  .blog-index__head{
    max-width: 720px;
    margin: 0 auto 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  .blog-index__title{
    font-size: clamp(2.0rem, 2.6vw, 2.55rem);
    line-height: 1.10;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
  }

  .blog-index__dek{
    font-size: 1.06rem;
    line-height: 1.85;
    margin: 0;
    color: rgba(0,0,0,.70);
  }

  /* 3) Tarjetas “quiet luxury” */
  .blog-index__list{
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
  }

  .entry{
    padding: 28px 30px 26px;
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
    box-shadow: 0 26px 80px rgba(0,0,0,.12);
  }

  /* 4) Tipografía y metadatos */
  .entry__meta{
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
  }

  .entry__num{
    font-size: 0.86rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(0,0,0,.62);
  }

  .entry__tag{
    font-size: 0.80rem;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(0,0,0,.48);
  }

  /* 5) Quitar “link azul” (solo dentro del índice) */
  .blog-index a{
    color: inherit;
    text-decoration: none;
  }

  .entry__title{
    margin: 0 0 10px;
    font-size: clamp(1.55rem, 2.1vw, 2.0rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .entry__title a:hover{
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
  }

  .entry__dek{
    margin: 0 0 14px;
    font-size: 1.04rem;
    line-height: 1.90;
    color: rgba(0,0,0,.72);
  }

  .entry__link{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0,0,0,.72);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,.22);
  }

  .entry__link:hover{
    color: rgba(0,0,0,.90);
    border-bottom-color: rgba(0,0,0,.45);
  }

  .entry__link::after{
    content: "→";
    opacity: .85;
  }

  /* 6) “Próximamente” elegante */
  .entry--soon{
    opacity: .90;
  }

  .entry__soon{
    display: inline-block;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.14);
    font-size: .80rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(0,0,0,.62);
    background: rgba(246,244,239,.75);
  }
}
@media (min-width: 861px){
  .blog-index a{ color: inherit !important; text-decoration: none !important; }

  .blog-index{
    padding: 72px 0 120px !important;
    background: var(--paper2, #fbfaf7) !important;
  }

  .blog-index__inner{
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 0 64px !important;
  }

  .blog-index__list{
    max-width: 720px !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 18px !important;
  }

  .entry{
    padding: 28px 30px 26px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42)) !important;
    box-shadow: 0 26px 80px rgba(0,0,0,.12) !important;
  }

  .entry__title a:hover{
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 7px !important;
  }

  .entry__link{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: .86rem !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,.72) !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(0,0,0,.22) !important;
  }

  .entry__link::after{ content:"→"; opacity:.85; }
}


/* ===============================
   POST · AJUSTE IMAGEN SOLO DESKTOP
   =============================== */

@media (min-width: 861px){

  .post-lead{
    max-width: 880px;     /* contenedor editorial */
    margin: 28px auto 42px;
  }

  .post-lead__img{
    display: block;
    width: 100%;
    max-width: 640px;     /* CLAVE: reduce presencia */
    margin: 0 auto;
    border-radius: 22px;
  }

  .post-lead__cap{
    margin-top: 10px;
    font-size: .70rem;
    letter-spacing: .18em;
    text-align: center;
    opacity: .55;
  }
}
/* ===============================
   POST · IMAGEN · SOLO MÓVIL (CONTROLADA)
   =============================== */
@media (max-width: 860px){

  .post-lead{
    width: 100%;
    margin: 14px auto 20px;
  }

  .post-lead figure{
    width: 100%;
    max-width: 78%;     /* MÁS PEQUEÑA */
    margin: 0 auto;
  }

  .post-lead__img{
    display: block;
    width: 100%;
    max-width: 360px;   /* LÍMITE REAL (evita “enorme”) */
    margin: 0 auto;
    height: auto;
    border-radius: 16px;
  }

  .post-lead__caption{
    margin-top: 10px;
    font-size: .72rem;
    letter-spacing: .16em;
    text-align: center;
    opacity: .55;
  }
}
/* ===============================
   BLOG (ÍNDICE) · IMAGEN EN TARJETA · SOLO MÓVIL
   Control editorial (NO enorme)
   =============================== */
@media (max-width: 860px){

  /* contenedor de la imagen dentro de la tarjeta */
  .entry_media{
    margin: 14px auto 16px;
    max-width: 98%;
  }

  /* la imagen */
  .entry_media img{
    display: block;
    width: 100%;
    max-width: 480px;   /* <-- controla tamaño real */
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
  }
}

/* ===============================
   EDICIONES · AJUSTE SOLO MÓVIL
   =============================== */
@media (max-width: 520px){

  .editorial-title{
    font-size: 1.9rem;      /* antes: clamp grande */
    letter-spacing: 0.18em;
    margin-bottom: 10px;
  }

  .editorial-subtitle{
    font-size: 0.96rem;
    line-height: 1.55;
    margin-bottom: 18px;
  }

  .editorial-intro{
    font-size: 0.90rem;
    line-height: 1.6;
    padding: 0 6px;
  }
}
/* =========================================
   POST INDIVIDUAL · DOMINGO (FIX)
   Estilos para la plantilla nueva (.blog-article)
   Pegar AL FINAL de blog.css
   ========================================= */

main.blog-article{
  padding-top: 140px; /* respira bajo topbar fija */
  padding-bottom: 120px;
  background: var(--paper2, #fbfaf7);
}

/* Cabecera editorial */
.blog-header{
  max-width: 860px;
  margin: 0 auto;
  padding: 46px 52px 18px;
}

@media (max-width: 860px){
  .blog-header{ padding: 34px 22px 12px; }
  main.blog-article{ padding-top: 110px; padding-bottom: 80px; }
}

/* Kicker (si lo usas) */
.blog-kicker{
  margin: 0 0 12px;
  font-size: .86rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

/* Título + subtítulo */
.blog-header h1{
  margin: 0 0 14px;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink, #111);
  margin-top: 0.6rem;
}

.blog-subtitle{
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.75;
  color: rgba(0,0,0,.68);
  max-width: 46rem;
}
/* Cabecera editorial (volver a home) */
.editorial-nav{
  max-width: 980px;
  margin: 0 auto;
  padding: 0.6rem 0 1.2rem 0;
}
/* Línea editorial bajo cabecera */
.editorial-nav{
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.editorial-home-link{
  display: inline-block;
  text-decoration: none;
  font-family: 'Georgia', serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: #8A9772;
}

.editorial-home-link:visited{
  color: #8A9772;
}
.editorial-home-link:hover{
  opacity: .78;
}

.editorial-sub{
  display: block;
  margin-top: 6px;
   font-size: 1.02rem;
letter-spacing: 0.02em;
color: rgba(0,0,0,.55);
  text-transform: none;
  letter-spacing: .06em;
  font-size: .95rem;
  color: rgba(0,0,0,.52);
  font-family: Georgia, "Times New Roman", serif;
}

/* Línea fina de lujo debajo de la cabecera */
.editorial-nav::after{
  content:"";
  display:block;
  margin-top: 12px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.10), rgba(0,0,0,0));
}


@media (max-width: 860px){
  .editorial-nav{
    padding: 14px 16px 2px;
  }
  .editorial-home-link{
    font-size: .82rem;
    letter-spacing: .20em;
  }
  .editorial-sub{
    font-size: .95rem;
letter-spacing: 0.02em;
  }
}
/* Meta tags */
.blog-meta{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-tag{
  display: inline-block;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.62);
  background: rgba(246,244,239,.70);
}

/* Columna editorial del texto (estilo revista) */
.blog-content{
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 46px 52px;
  border-radius: 28px;
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  box-shadow: 0 34px 90px rgba(0,0,0,.14);
}

@media (max-width: 860px){
  .blog-content{
    padding: 26px 22px 34px;
    border-radius: 22px;
    box-shadow: 0 22px 70px rgba(0,0,0,.10);
  }
}

/* Tipografía y ritmo */
.blog-content p{
  margin: 0 0 18px;
  font-size: 1.06rem;
  line-height: 1.92;
  color: rgba(0,0,0,.86);
}

.blog-content strong{ font-weight: 600; }

/* Subtítulos como “sección editorial” (discretos) */
.blog-content h2{
  margin: 44px 0 16px;
  font-size: 1.00rem;
  line-height: 1.35;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(0,0,0,.65);
}

/* Separadores */
.blog-content hr{
  margin: 34px 0;
  border: 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* CTA (bloque editorial, no comercial) */
.blog-cta{
  margin-top: 34px;
  padding: 22px 22px 20px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
}

.blog-cta h3{
  margin: 0 0 10px;
  font-size: .86rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.blog-cta p{ margin: 0 0 12px; }

.blog-article .btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(246,244,239,.75);
  color: rgba(0,0,0,.78);
  text-decoration: none;
  font-size: .86rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.blog-article .btn:hover{
  color: rgba(0,0,0,.92);
  border-color: rgba(0,0,0,.25);
}

/* Lecturas relacionadas */
.blog-related{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.blog-related h3{
  margin: 0 0 12px;
  font-size: .86rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.blog-related ul{
  margin: 0;
  padding-left: 18px;
}

.blog-related a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.18);
  padding-bottom: 3px;
}

/* =========================================
   FIX CLICS · BOTONES NO ACCESIBLES
   (hay una capa por encima bloqueando clicks)
   ========================================= */

/* Asegura que el contenido del post está por encima */
.blog-article,
.blog-header,
.blog-content,
.blog-cta,
.blog-related,
.blog-footer{
  position: relative;
  z-index: 5;
}

/* Asegura que links y botones reciben el click */
.blog-article a,
.blog-article .btn{
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* Si hay overlays/pseudo-elementos (muy habitual), que no bloqueen */
.blog-article::before,
.blog-article::after,
.blog-content::before,
.blog-content::after,
.blog-header::before,
.blog-header::after{
  pointer-events: none !important;
}
.blog-footer{
  margin-top: 28px;
  padding-bottom: 40px;
}
/* =========================================
   ETIQUETAS EDITORIALES (NO CTA)
   ========================================= */

.blog-meta{
  pointer-events: none; /* no clicables */
}

.blog-tag{
  cursor: default;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.55);
  font-weight: 400;
}

.blog-tag:hover{
  background: transparent;
}
.btn.secondary {
  background: transparent;
  border: 1px solid #bfae8f;
  color: #6f6a63;
}

.btn.secondary:hover {
  background: #f4f1ec;
}
/* Editorial breadcrumb */

.editorial-breadcrumb {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.editorial-home {
  text-decoration: none;
  color: #8A9772;
  transition: opacity 0.3s ease;
}

.editorial-home:hover {
  opacity: 0.7;
}
/* ---------- EDITORIAL NAV SUPERIOR ---------- */

.editorial-nav {
  margin-bottom: 48px;
}

.editorial-home-link {
  text-decoration: none;
  font-family: 'Georgia', serif;
  letter-spacing: 4px;
  font-size: 13px;
  color: #8A9772;
  text-transform: uppercase;
  display: inline-block;
  transition: opacity 0.3s ease;
    text-decoration: none;
    font-family: 'Georgia', serif;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    color: #8A9772;
    text-transform: uppercase;
    display: inline-block;
    transition: opacity 0.3s ease;
}

.editorial-home-link:hover {
  opacity: 0.7;
}

.editorial-sub {
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: none;
  color: #777;
  margin-top: 6px;
   }
.editorial-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  padding: 0.8rem 0 1.8rem 0;
   gap: 2rem;
}

.editorial-contact-link {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #6b7a55;
  font-family: 'Georgia', serif;
  opacity: 0.85;
  align-self: flex-start;
}

.editorial-contact-link:hover {
  opacity: 0.5;
}