/* =========================================================
   BLOG DESKTOP · REVISTA PREMIUM (SOLO PC)
   Se carga únicamente con media="(min-width: 861px)"
   No afecta móvil.
   ========================================================= */

:root{
  --ink:#111;
  --paper:#f6f4ef;
  --paper2:#fbfaf7;
  --olive:#6b7a55;
  --shadowXL: 0 38px 110px rgba(0,0,0,.16);
  --shadowL:  0 26px 80px rgba(0,0,0,.12);
}

/* ===============================
   1) BLOG PORTADA (HERO)
   =============================== */

.blog-hero{
  padding-top: 150px !important;
  padding-bottom: 86px !important;
  background: var(--paper) !important;
}

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

.blog-cover img{
  display:block !important;
  width: 100% !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
  box-shadow: var(--shadowXL) !important;
  object-fit: contain !important;
}

.blog-whisper{
  max-width: 880px !important;
  margin: 22px auto 0 !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.34)) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.10) !important;
  text-align: left !important;
  color: rgba(0,0,0,.78) !important;
  font-size: .98rem !important;
  line-height: 1.8 !important;
}

/* ===============================
   2) ÍNDICE (TARJETAS REVISTA)
   =============================== */

.blog-index{
  padding: 76px 0 120px !important;
  background: var(--paper2) !important;
}

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

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

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

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

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

/* neutraliza links azules dentro del índice */
.blog-index a{
  color: inherit !important;
  text-decoration: none !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: var(--shadowL) !important;
}

.entry__meta{
  display:flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.entry__num{
  font-size: .86rem !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,.62) !important;
}

.entry__tag{
  font-size: .80rem !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,.48) !important;
}

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

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

.entry__dek{
  margin: 0 0 14px !important;
  font-size: 1.04rem !important;
  line-height: 1.90 !important;
  color: rgba(0,0,0,.72) !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:hover{
  color: rgba(0,0,0,.90) !important;
  border-bottom-color: rgba(0,0,0,.45) !important;
}

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

/* Próximamente */
.entry--soon{ opacity: .90 !important; }

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

/* ===============================
   3) POST (PÁGINA ARTÍCULO) · LUJO
   =============================== */

main.post-page{
  padding-top: 150px !important;
  padding-bottom: 120px !important;
  background: var(--paper2) !important;
}

.post-hero{
  padding: 74px 0 26px !important;
  background: var(--paper2) !important;
}

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

.post-back{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
  font-size: .84rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,.55) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0,0,0,.18) !important;
  padding-bottom: 6px !important;
}

.post-back:hover{
  color: rgba(0,0,0,.85) !important;
  border-bottom-color: rgba(0,0,0,.38) !important;
}

.post-title{
  margin: 0 0 16px !important;
  font-size: clamp(2.6rem, 3.4vw, 3.45rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
}

.post-intro{
  margin: 0 !important;
  max-width: 54rem !important;
  font-size: 1.10rem !important;
  line-height: 1.9 !important;
  color: rgba(0,0,0,.72) !important;
}

.post-body{
  padding: 28px 0 0 !important;
}

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

.post-content{
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 44px 46px 52px !important;
  border-radius: 28px !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: var(--shadowXL) !important;
}

/* Tipografía editorial */
.post-content p{
  margin: 0 0 20px !important;
  font-size: 1.08rem !important;
  line-height: 1.95 !important;
  color: rgba(0,0,0,.86) !important;
}

.post-content h2{
  margin: 46px 0 16px !important;
  font-size: 1.00rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,.60) !important;
}

.post-content blockquote{
  margin: 34px 0 30px !important;
  padding: 22px 22px !important;
  border-radius: 20px !important;
  border-left: 3px solid rgba(107,122,85,.55) !important;
  background: linear-gradient(180deg, rgba(246,244,239,.65), rgba(255,255,255,.30)) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.12) !important;
  font-size: 1.10rem !important;
  line-height: 1.8 !important;
  color: rgba(0,0,0,.82) !important;
}

/* Next */
.post-next{
  margin-top: 38px !important;
  padding: 22px 22px 20px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(246,244,239,.65) !important;
}
/* ===============================
   POST · AJUSTE IMAGEN SOLO PC (FORZADO)
   =============================== */
.post-lead{
  max-width: 900px !important;
  margin: 26px auto 44px !important;
}

.post-lead__img{
  display: block !important;
  width: 100% !important;
  max-width: 620px !important;   /* más pequeño en PC */
  margin: 0 auto !important;
  border-radius: 24px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.18) !important;
}

.post-lead__cap{
  margin-top: 10px !important;
  font-size: .70rem !important;
  letter-spacing: .18em !important;
  text-align: center !important;
  opacity: .55 !important;
}
/* ===============================
   POST · PORTADA EDITORIAL (SOLO PC)
   Ajusta imagen + caption a look revista
   =============================== */

.post-lead{
  max-width: 560px !important;     /* más editorial */
  margin: 30px auto 46px !important;
}

/* Encadre tipo revista (evita imagen “interminable”) */
.post-lead__img{
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;  /* clave: recorte editorial */
  height: auto !important;
  object-fit: cover !important;
  border-radius: 26px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 32px 95px rgba(0,0,0,.16) !important; /* más fino */
}

/* Pie de foto más “Vogue” */
.post-lead__caption{
  margin-top: 12px !important;
  text-align: center !important;
  font-size: .72rem !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
  opacity: .55 !important;
}

/* Aire adicional entre intro e imagen */
.post-intro{
  margin-bottom: 18px !important;
}
/* ===============================
   FIX · IMÁGENES DENTRO DE TARJETAS (BLOG)
   Evita que la imagen se salga del card
   =============================== */

.entry{
  overflow: hidden !important; /* clave */
}

.entry_media,
.entry__media{
  margin: 14px 0 16px !important;
}

.entry_media img,
.entry__media img{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;  /* clave */
  height: auto !important;
  border-radius: 18px !important;
}