/*
Theme Name: Imaginaria Letras
Theme URI: https://lavidaenletras.com
Author: Imaginaria Estudio
Author URI: https://imaginariaestudio.com
Description: Tema editorial oscuro para La Vida en Letras. Compatible con Beaver Builder, Gutenberg y ACF.
Version: 1.0
Text Domain: imaginaria-letras
*/

body {
  background-color: #0C0C0C;
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}
/* ===== Compatibilidad responsiva Beaver ===== */
.beaver-legacy .fl-row-content-wrap{
  max-width: var(--container, 1200px);
  margin-inline: auto;
  padding-inline: 1rem;
}

.beaver-legacy .fl-row,
.beaver-legacy .fl-row-content,
.beaver-legacy .fl-col-group,
.beaver-legacy .fl-col{ width:100%; }

.beaver-legacy .fl-module *{ box-sizing: border-box; }

/* Imágenes y galerías */
.beaver-legacy .fl-photo img,
.beaver-legacy .fl-gallery img{
  width:100%;
  height:auto;
  display:block;
  border-radius: var(--mm-radius, 12px);
  object-fit: cover;
}

/* Vídeo responsivo (YouTube/Vimeo/HTML5) */
.beaver-legacy .fl-video,
.beaver-legacy .fl-embed,
.beaver-legacy .fl-video iframe,
.beaver-legacy .fl-video video{
  width:100% !important;
  max-width:100%;
}
.beaver-legacy .fl-video .fl-video-wrap,
.beaver-legacy .fl-embed{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
}
.beaver-legacy .fl-video .fl-video-wrap iframe,
.beaver-legacy .fl-embed iframe,
.beaver-legacy .fl-embed video{
  position:absolute; inset:0; width:100%; height:100%;
}

/* Rich text / tipografías */
.beaver-legacy .fl-module-rich-text h1{ font-size: clamp(1.6rem, 3.5vw + 1rem, 2.3rem); line-height:1.15; }
.beaver-legacy .fl-module-rich-text h2{ font-size: clamp(1.4rem, 3vw + .8rem, 2rem); line-height:1.2; }
.beaver-legacy .fl-module-rich-text h3{ font-size: clamp(1.2rem, 2.2vw + .7rem, 1.6rem); line-height:1.25; }
.beaver-legacy .fl-module-rich-text p,
.beaver-legacy .fl-module-rich-text li{ font-size: clamp(.95rem, 1.2vw + .6rem, 1.05rem); line-height:1.55; }

/* Botones Beaver ≈ botones del tema */
.beaver-legacy .fl-button,
.beaver-legacy .fl-button *{
  background: var(--btn-bg, var(--mm-primary, #e3001b)) !important;
  color: var(--btn-fg, #fff) !important;
  border: 0 !important; border-radius: 999px !important;
}
.beaver-legacy .fl-button:hover *{ 
  background: var(--btn-hover-bg, #c40018) !important; color: var(--btn-hover-fg, #fff) !important; 
}

/* Tablas de reseñas dentro de módulos de texto */
.beaver-legacy .fl-module-rich-text .review-table,
.beaver-legacy .fl-module-rich-text .wp-block-table,
.beaver-legacy .fl-module-rich-text table{
  width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; display:block; margin:1rem 0;
  border-collapse: collapse; table-layout: fixed;
}
.beaver-legacy .fl-module-rich-text th,
.beaver-legacy .fl-module-rich-text td{
  border:1px solid rgba(255,255,255,.08); padding:.6rem .7rem; vertical-align:top; word-break:break-word;
}

/* Correcciones generales */
.beaver-legacy .fl-row-full-width{ width:100%; }
.beaver-legacy [style*="max-width"]{ max-width: min(100%, var(--container, 1200px)) !important; } /* ignora max-width fijos */
.beaver-legacy [style*="width:"]{ max-width:100%; } /* evita desbordes inline */
/* --- Imágenes destacadas y contenido: no desbordar columna --- */

/* Featured image (cabecera de la entrada) */
.entry-header .post-thumbnail,
.wp-block-post-featured-image,
.single .post-thumbnail {
  margin: 0 0 1rem 0;
  border-radius: var(--mm-radius, 14px);
  overflow: hidden; /* recorta si el img intenta salir */
}

.entry-header .post-thumbnail img,
.wp-block-post-featured-image img,
.single .wp-post-image {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* Imágenes dentro del contenido (incluye Beaver y Gutenberg) */
.entry-content img,
.fl-module .fl-photo img,
.wp-block-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* HTML antiguo con width/height inline: ignora escalas rígidas */
.entry-content img[width],
.entry-content img[height] {
  height: auto !important;
  max-width: 100% !important;
}

/* Figuras con leyenda */
.wp-caption,
.wp-block-image {
  max-width: 100%;
}

/* Si hay sidebar, desactiva wide/full para evitar sangrías que pisan el sidebar */
.layout-2col .entry-content .alignwide,
.layout-2col .entry-content .alignfull,
.has-sidebar .entry-content .alignwide,
.has-sidebar .entry-content .alignfull {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

/* Seguridad extra: cualquier media “full-bleed” que use viewport */
.entry-content img[style*="vw"],
.entry-content figure[style*="vw"] {
  max-width: 100% !important;
  width: 100% !important;
}

/* En listados (cards) ya teníamos control con aspect-ratio; no tocar */

/* ===============================
   Ajustes específicos para la APP
   (URLs con ?appview=1)
   =============================== */

body.appview .single-post .post-thumbnail img,
body.appview .single-post .entry-header img,
body.appview .single-post .hero-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Evitar que la imagen destacada "reviente" el alto */
body.appview .single-post .post-thumbnail,
body.appview .single-post .hero-image {
  max-height: 60vh;
  overflow: hidden;
}

/* Por seguridad, evitar scroll horizontal en el layout */
body.appview,
body.appview html {
  overflow-x: hidden;
}
body.appview .site,
body.appview .site-main,
body.appview .entry-content {
  max-width: 100%;
  overflow-x: hidden;
}
/* =========================
   Página NOVELAS (portadas)
   ========================= */

.novelas-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

.novela-card{
  margin: 24px 0 42px;
}

/* Override a la regla global (que fuerza 100%) */
.novelas-wrap .novela-cover img{
  width: 100% !important;                 /* sigue siendo responsive */
  max-width: 280px !important;            /* TAMAÑO MÁS PEQUEÑO (ajusta aquí) */
  height: auto !important;
  display: block;
  margin: 0 auto 12px;
}

/* En pantallas algo mayores, puedes permitir un pelín más sin que se dispare */
@media (min-width: 768px){
  .novelas-wrap .novela-cover img{
    max-width: 320px !important;
  }
}

/* Opcional: reduce el espacio vertical de títulos */
.novelas-wrap .novela-titulo{
  margin: 8px 0 10px;
}
/* =========================
   Divisor editorial entre novelas
   ========================= */

.novela-card + .novela-card{
  position: relative;
  padding-top: 32px;
}

.novela-card + .novela-card::before{
  content: "";
  display: block;
  width: 60%;
  max-width: 420px;
  height: 1px;
  margin: 0 auto 32px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.25),
    transparent
  );
}

/* ===== EXTINCIÓN · HERO (autocontenido) ===== */
.ext-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 96px) 0;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,0.06), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.55)),
              #0b0b0b;
}

.ext-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.75) 42%, rgba(0,0,0,0.45) 100%);
  pointer-events:none;
}

.ext-hero__wrap{
  position: relative;
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(18px, 4vw, 42px);
  align-items: center;
}

.ext-hero__kicker{
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .75;
  margin-bottom: 10px;
}

.ext-hero__title{
  margin: 0;
  line-height: 1.02;
  font-size: clamp(42px, 6vw, 72px);
}

.ext-hero__subtitle{
  margin-top: 6px;
  font-size: clamp(14px, 2vw, 18px);
  opacity: .8;
}

.ext-hero__lead{
  margin-top: 18px;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.35;
  opacity: .95;
  max-width: 44ch;
}

.ext-hero__text{
  margin-top: 14px;
  max-width: 62ch;
  opacity: .78;
  line-height: 1.6;
}

.ext-hero__cta{
  margin-top: 22px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ext-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.18);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}

.ext-btn--primary{
  background: rgba(255,255,255,0.10);
}

.ext-btn--primary:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.14);
}

.ext-btn--ghost{
  background: transparent;
  opacity: .9;
}

.ext-btn--ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.32);
  opacity: 1;
}

.ext-hero__meta{
  margin-top: 18px;
  font-size: 13px;
  opacity: .7;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ext-dot{ opacity:.7; }

.ext-hero__media{
  display:flex;
  justify-content:center;
}

.ext-hero__cover{
  width: min(360px, 100%);
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.65);
  opacity: .95;
  transform: translateY(4px);
}

/* Responsive */
@media (max-width: 900px){
  .ext-hero__wrap{
    grid-template-columns: 1fr;
  }
  .ext-hero__overlay{
    background: linear-gradient(180deg, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.72) 55%, rgba(0,0,0,0.55) 100%);
  }
  .ext-hero__media{
    order: -1;
    justify-content:flex-start;
  }
  .ext-hero__cover{
    width: min(260px, 85%);
  }
}
/* FIX: evitar que la regla global de .entry-content img fuerce la portada del hero al 100% */
.entry-content .ext-hero__cover{
  width: min(360px, 100%) !important;
  max-width: 360px !important;
}

@media (max-width: 900px){
  .entry-content .ext-hero__cover{
    width: min(260px, 85%) !important;
    max-width: 260px !important;
  }
}
/* ===== EXTINCIÓN · SECCIONES ===== */
.ext-section{
  padding: clamp(34px, 4.5vw, 64px) 0;
  background: transparent;
}

.ext-section--soft{
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ext-section__wrap{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
}

.ext-h2{
  margin: 0 0 12px 0;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
}

.ext-p{
  margin: 10px 0;
  line-height: 1.7;
  opacity: .82;
  max-width: 70ch;
}

.ext-p--lead{
  font-size: clamp(16px, 1.45vw, 19px);
  opacity: .92;
}

.ext-link{
  display: inline-flex;
  margin-top: 14px;
  text-decoration: none;
  font-weight: 600;
  opacity: .9;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 2px;
}
.ext-link:hover{
  opacity: 1;
  border-bottom-color: rgba(255,255,255,0.35);
}
/* ===== EXTINCIÓN · SPLIT / CARDS ===== */
.ext-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 26px);
}

.ext-card{
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}

.ext-card .ext-btn{
  margin-top: 14px;
}

@media (max-width: 900px){
  .ext-split{ grid-template-columns: 1fr; }
}
/* =========================================================
   EXTINCIÓN · OPTIN + MAILPOET (BLOQUE ÚNICO, LIMPIO)
   ========================================================= */

.ext-optin__box{
  margin-top: 14px !important;
  padding: 18px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.03) !important; /* más integrado con el diseño */
  border: 1px solid rgba(255,255,255,0.08) !important;
  max-width: 680px !important;  /* ajuste editorial */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Envoltorios típicos */
.ext-optin__box .mailpoet_form,
.ext-optin__box form,
.ext-optin__box .mailpoet_form_wrapper,
.ext-optin__box .mailpoet_form_container{
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Título del formulario: si lo desactivas en MailPoet, mejor.
   Si no, al menos que no rompa. */
.ext-optin__box h1.mailpoet-heading{
  color: #fff !important;
  margin: 0 0 12px !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  opacity: .9 !important;
}

/* Párrafos / wrappers */
.ext-optin__box .mailpoet_paragraph{
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
  font-style: normal !important; /* microajuste: fuera cursivas */
}

/* Labels */
.ext-optin__box .mailpoet_segment_label,
.ext-optin__box .mailpoet_text_label,
.ext-optin__box .mailpoet_textarea_label,
.ext-optin__box .mailpoet_select_label,
.ext-optin__box .mailpoet_radio_label,
.ext-optin__box .mailpoet_checkbox_label,
.ext-optin__box .mailpoet_list_label,
.ext-optin__box .mailpoet_date_label,
.ext-optin__box label{
  color: rgba(255,255,255,0.78) !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
  font-weight: 400 !important;
}

/* Inputs (clases reales MailPoet) */
.ext-optin__box .mailpoet_text,
.ext-optin__box .mailpoet_textarea,
.ext-optin__box .mailpoet_select,
.ext-optin__box .mailpoet_date_month,
.ext-optin__box .mailpoet_date_day,
.ext-optin__box .mailpoet_date_year,
.ext-optin__box .mailpoet_date{
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 12px !important;
  padding: 12px 12px !important;
  box-shadow: none !important;
  outline: none !important;
}

.ext-optin__box .mailpoet_text::placeholder,
.ext-optin__box .mailpoet_textarea::placeholder{
  color: rgba(255,255,255,0.45) !important;
}

.ext-optin__box .mailpoet_text:focus,
.ext-optin__box .mailpoet_textarea:focus,
.ext-optin__box .mailpoet_select:focus{
  border-color: rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.08) !important;
}

/* Botón (microajuste: más “ghost/Extinción”) */
.ext-optin__box .mailpoet_submit{
  width: 100% !important;
  margin-top: 10px !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease !important;
}

.ext-optin__box .mailpoet_submit:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.34) !important;
}

/* Mensajes */
.ext-optin__box .mailpoet_message{
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.90) !important;
}

/* Ocultar separadores raros si aparecen */
.ext-optin__box .mailpoet_divider,
.ext-optin__box hr{
  display: none !important;
}

/* Texto pequeño / privacidad (microajuste: más discreto y sin cursiva) */
.ext-optin__box .mailpoet_form p,
.ext-optin__box .mailpoet_form a{
  color: rgba(255,255,255,0.65) !important;
  font-size: 12px !important;
  font-style: normal !important;
  opacity: .70 !important;
}

.ext-optin__box .mailpoet_form a{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ext-hero--inner .ext-hero__lead{ max-width: 48ch; }
.ext-hero--inner .ext-hero__text{ max-width: 62ch; }
/* ===== EXTINCIÓN · LETRAS ===== */
.ext-lyrics{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ext-lyric{
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.ext-lyric__title{
  margin: 0 0 10px 0;
  font-size: 18px;
}
.ext-lyric__line{
  margin: 6px 0;
  opacity: .85;
  line-height: 1.6;
}
.ext-lyric__note{
  margin-top: 10px;
  font-size: 12px;
  opacity: .65;
}
@media (max-width: 900px){
  .ext-lyrics{ grid-template-columns: 1fr; }
}

/* ===== EXTINCIÓN · EMBEDS RESPONSIVE ===== */
.ext-embed{
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  aspect-ratio: 16 / 9;
  position: relative;
}
.ext-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border: 0;
}

/* ===== RECURSOS · HOVER IMÁGENES ===== */

.ext-resource-card{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.ext-resource-card img{
  display: block;
  width: 100%;
  height: auto;
  transition: transform .3s ease, filter .3s ease;
}

/* Oscurece ligeramente */
.ext-resource-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.0);
  transition: background .3s ease;
  pointer-events: none;
}

/* Hover */
.ext-resource-card:hover img{
  transform: scale(1.02);
  filter: brightness(0.85);
}

.ext-resource-card:hover::after{
  background: rgba(0,0,0,0.25);
}
/* ===== AUTOR · BLOQUE BIO ===== */

.ext-author{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

.ext-author__image img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}

.ext-author__content p{
  line-height: 1.7;
  opacity: .85;
  margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px){
  .ext-author{
    grid-template-columns: 1fr;
  }
  .ext-author__image{
    max-width: 260px;
  }
}
/* ===== ARCHIVE/BLOG · CARDS COMPACTAS ===== */

/* reduce separación entre tarjetas */
.archive .glass-card,
.blog .glass-card{
  padding: 16px !important;
  margin-bottom: 18px !important;
}

/* thumbnail: controla altura sin deformar */
.archive .post-thumb,
.blog .post-thumb{
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}

/* fuerza un formato más bajo */
.archive .post-thumb a,
.blog .post-thumb a{
  display: block;
}

/* imagen: recorte editorial */
.archive .post-thumb img.glass-thumb,
.blog .post-thumb img.glass-thumb{
  width: 100% !important;
  height: 220px !important;   /* ajusta: 180–260 según gusto */
  object-fit: cover !important;
  display: block;
}

/* título más contenido */
.archive .entry-title,
.blog .entry-title{
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 8px 0;
}

/* meta más compacta */
.archive .entry-meta,
.blog .entry-meta{
  margin-bottom: 10px !important;
  font-size: .82rem !important;
  opacity: .85;
}

/* excerpt más compacto */
.archive .entry-content,
.blog .entry-content{
  font-size: .95rem;
  line-height: 1.55;
}

/* opcional: recorta excerpt a 3 líneas (estilo “revista”) */
.archive .entry-content p,
.blog .entry-content p{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ===== BLOG (posts page) · FORZAR CARDS COMPACTAS ===== */

/* 1) La tarjeta en sí (aplastar padding y alturas forzadas) */
body.blog .site-main article.glass-card,
body.archive .site-main article.glass-card{
  padding: 16px !important;
  margin-bottom: 18px !important;
  min-height: 0 !important;
  height: auto !important;
}

/* 2) Si el tema usa un wrapper interno dentro de la card */
body.blog .site-main article.glass-card .entry-content,
body.blog .site-main article.glass-card .entry-summary{
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* 3) Miniatura más baja (ya te funcionó, pero lo dejamos redondo) */
body.blog .site-main article.glass-card .post-thumb,
body.archive .site-main article.glass-card .post-thumb{
  margin: 0 0 12px 0 !important;
  border-radius: 14px;
  overflow: hidden;
}

body.blog .site-main article.glass-card .post-thumb img.glass-thumb,
body.archive .site-main article.glass-card .post-thumb img.glass-thumb{
  width: 100% !important;
  height: 210px !important;      /* baja a 180 si quieres aún más compacto */
  object-fit: cover !important;
  display: block;
}

/* 4) Recortar el extracto a 3 líneas (quita “bloque grande” visual) */
body.blog .site-main article.glass-card .entry-content p,
body.blog .site-main article.glass-card .entry-summary p{
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 5) Título más contenido */
body.blog .site-main article.glass-card .entry-title{
  margin: 0 0 8px 0 !important;
  line-height: 1.2;
  font-size: 1.25rem;
}
/* ===== BLOG/ARCHIVE · FIX HUECO GIGANTE EN THUMB ===== */

/* Si el tema usa ratio en el enlace (padding-top) o posicionamiento raro */
body.blog  .post-thumb,
body.archive .post-thumb{
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body.blog  .post-thumb a,
body.archive .post-thumb a{
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;         /* mata padding-top tipo 56.25% */
  position: static !important;   /* mata wrappers absolutos */
}

/* Por si el tema coloca la imagen absoluta dentro del enlace */
body.blog  .post-thumb img,
body.archive .post-thumb img{
  position: static !important;
  inset: auto !important;
}

/* Control real de la altura visible */
body.blog  .post-thumb img.glass-thumb,
body.archive .post-thumb img.glass-thumb{
  width: 100% !important;
  height: 220px !important;      /* ajusta aquí (180–260) */
  object-fit: cover !important;
  display: block !important;
}

/* Aplastado final de la tarjeta por si hay min-height heredado en algún wrapper */
body.blog  article.glass-card,
body.archive article.glass-card{
  height: auto !important;
  min-height: 0 !important;
  padding: 16px !important;
}
/* DEBUG: muestra la caja culpable (temporal) 
body.blog article.glass-card,
body.blog article.glass-card *{
  outline: 1px solid rgba(255,0,0,.35);
}*/
/* ===== BLOG · LAYOUT GRID EDITORIAL ===== */

body.blog .site-main,
body.archive .site-main{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Quita margen extra inferior de artículos */
body.blog .site-main article.glass-card,
body.archive .site-main article.glass-card{
  margin: 0 !important;
}

/* Responsive */
@media (max-width: 900px){
  body.blog .site-main,
  body.archive .site-main{
    grid-template-columns: 1fr;
  }
}
/* ===== ORIGEN OCULTO · PÁGINA LIMPIA (sin romper tema/app) ===== */

.oo-card{
  padding: clamp(16px, 2.2vw, 22px);
}

.oo-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}

.oo-cover img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}

.oo-title{
  margin: 0 0 6px 0;
  color: var(--accent-gold);
  font-family: var(--font-head);
  line-height: 1.1;
}

.oo-subtitle{
  margin: 0 0 14px 0;
  opacity: .78;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
}

.oo-content p{
  line-height: 1.7;
  opacity: .88;
  margin: 0 0 12px 0;
}

.oo-cta{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Responsive */
@media (max-width: 820px){
  .oo-grid{ grid-template-columns: 1fr; }
  .oo-cover{ max-width: 280px; }
}
/* =========================================================
   EXTINCIÓN · CONVERSIÓN (LISTAS / FICHA / TESTIMONIOS / BREADCRUMB)
   ========================================================= */

.ext-breadcrumb{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto 14px;
  font-size: 12px;
  opacity: .72;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ext-breadcrumb a{
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  padding-bottom: 1px;
}
.ext-breadcrumb a:hover{
  opacity: 1;
  border-bottom-color: rgba(255,255,255,0.32);
}
.ext-breadcrumb span{
  opacity: .75;
}

/* Lista editorial (Por qué leer) */
.ext-list{
  margin: 14px 0 0;
  padding-left: 18px;
  max-width: 72ch;
}
.ext-list li{
  margin: 10px 0;
  line-height: 1.65;
  opacity: .86;
}
.ext-list li strong{
  opacity: .98;
}

/* Ficha técnica */
.ext-specs{
  margin-top: 14px;
  max-width: 780px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
}
.ext-spec{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ext-spec:last-child{ border-bottom: 0; }
.ext-spec__k{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .70;
}
.ext-spec__v{
  opacity: .90;
  line-height: 1.6;
}
@media (max-width: 680px){
  .ext-spec{
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Testimonios */
.ext-testimonials{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ext-testimonial{
  margin: 0;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.ext-testimonial blockquote{
  margin: 0;
  opacity: .90;
  line-height: 1.6;
}
.ext-testimonial figcaption{
  margin-top: 10px;
  font-size: 12px;
  opacity: .62;
}
@media (max-width: 900px){
  .ext-testimonials{ grid-template-columns: 1fr; }
}

/* CTA “único” dentro de secciones (si lo quieres centrar alguna vez) */
.ext-cta-center{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.ext-video iframe {
  width: 100%;
  height: 315px;
  border-radius: 8px;
}
body:not(.woocommerce-page) .entry-content img{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.ext-hero__cover{
  width:100%;
  height:auto;
  max-width:520px;
}