/* ==========================================================================
   COMPONENTES — sistema compartido entre plantillas.
   Nombres de clase SIN prefijo, calcados de las maquetas aprobadas
   (pilar de publicar + índice de entrevistas) para no crear una segunda
   convención de nombres.
   ========================================================================== */

/* ---------- Layout base ---------- */
.wrap {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 28px;
}

.sec {
  padding: 92px 0;
}

.sec.blanco {
  background: var(--superficie);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.sec-hd {
  margin-bottom: 50px;
}

.sec-hd h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  margin-top: 20px;
}

.sec-hd h2 em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--acento-texto);
}

.sec-hd p {
  margin-top: 18px;
  font-size: 19.5px;
  color: var(--tinta-60);
  max-width: 64ch;
}

/* Revelado al hacer scroll (misma animación en ambas maquetas) */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.rv.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- Botón ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: var(--peso-medio);
  padding: 14px 24px;
  border-radius: var(--radio-boton);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn .arw {
  transition: transform 0.18s ease;
}

.btn:hover .arw {
  transform: translateX(3px);
}

/* Relleno sobre fondo oscuro (hero) — usa el fluo de autores. El texto es
   #12203A fijo en las maquetas, no var(--hero): es un tono distinto (más
   oscuro/azulado) pensado para el contraste sobre el naranja, no el mismo
   morado del fondo del hero. */
.btn-naranja {
  background: var(--fluo-autores);
  color: #12203A;
}

.btn-naranja:hover {
  filter: brightness(0.94);
}

/* Relleno sobre fondo oscuro (vertical e-learning) — usa el fluo B2B, nunca
   en páginas de autores (ver regla en README). */
.btn-lima {
  background: var(--fluo-b2b);
  color: var(--carbon);
}

.btn-lima:hover {
  filter: brightness(0.94);
}

/* Relleno — acción principal sobre fondo claro */
.btn-primary {
  background: var(--acento);
  color: var(--superficie);
}

.btn-primary:hover {
  background: var(--acento-texto);
}

/* Fantasma — acción secundaria */
.btn-ghost {
  border-color: var(--tinta);
  color: var(--tinta);
}

.btn-ghost:hover {
  background: var(--tinta);
  color: var(--fondo);
}

/* ---------- Cabecera del sitio ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(241, 240, 236, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Mientras el hero oscuro está en pantalla, la cabecera se funde con él —
   en TODA plantilla con hero oscuro, no solo en home (site.js activa/quita
   esta clase según el scroll, si la página tiene un .hero). */
.hdr.sobre-hero {
  background: var(--hero);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.hdr.sobre-hero .hdr-top {
  color: rgba(255, 255, 255, 0.42);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.hdr.sobre-hero .nav a { color: rgba(255, 255, 255, 0.72); }
.hdr.sobre-hero .nav a:hover { color: #fff; border-color: var(--fluo-autores); }
.hdr.sobre-hero .brandtag { color: var(--fluo-autores); border-left-color: rgba(255, 255, 255, 0.2); }

.hdr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-40);
  border-bottom: 1px solid var(--linea-2);
}

.hdr-top a { text-decoration: none; }

.hdr-in {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 74px;
}

.hdr-in .logo-svg { height: 34px; width: auto; display: block; }

/* Las dos versiones del logo están siempre las dos en el DOM; solo una se
   ve. OJO especificidad: si ".sobre-hero ... .logo-oscuro{display:none}"
   perdiera contra esta regla base, se verían los dos logos a la vez — por
   eso la regla de "sobre-hero" lleva más clases (gana siempre, cascada
   aparte). No reordenar estas tres reglas por separado. */
.hdr-in .logo-claro { display: none; }
.hdr.sobre-hero .hdr-in .logo-oscuro { display: none; }
.hdr.sobre-hero .hdr-in .logo-claro { display: block; }

.brandtag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-texto);
  border-left: 1px solid var(--linea);
  padding-left: 14px;
}

.nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  align-items: center;
}

.nav a {
  font-family: var(--f-display);
  font-size: 15px;
  text-decoration: none;
  color: var(--tinta-60);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}

.nav a:hover, .nav a.on {
  color: var(--tinta);
  border-color: var(--acento);
}

.hdr .btn {
  padding: 10px 18px;
  font-size: 14.5px;
}

.burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
  color: var(--tinta);
}

/* Sin esto el icono (currentColor) se pinta oscuro sobre el navy de
   .hdr.sobre-hero -- invisible. Bug real, no solo un hueco de la maqueta:
   existía desde el primer .burger, sacado a la luz al construir el panel. */
.hdr.sobre-hero .burger {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* ---------- Menú móvil (panel a pantalla completa) ----------
   Un solo componente para las diez plantillas -- ver
   template-parts/menu-movil.php y el comportamiento en site.js. Fondo
   crema siempre (nunca oscuro): a diferencia de la cabecera, este panel no
   se funde con ningún hero, así que no necesita las dos variantes de logo. */
.panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--fondo);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.panel.abierto { transform: none; }

.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  border-bottom: 1px solid var(--linea);
  flex: none;
}

.panel-top .logo-svg { height: 32px; width: auto; }

.cerrar {
  background: none;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
  color: var(--tinta);
}

.panel nav { padding: 14px 0 0; }

.panel nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: var(--peso-medio);
  font-size: 24px;
  letter-spacing: -0.02em;
}

.panel nav a .arw { color: var(--acento-texto); flex: none; }

.panel .sec-b2b {
  margin-top: 26px;
  padding: 20px 0;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
}

.panel .sec-b2b .t {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-40);
}

.panel .sec-b2b .n {
  font-family: var(--f-display);
  font-weight: var(--peso-medio);
  font-size: 19px;
  margin-top: 6px;
}

.panel-pie {
  margin-top: auto;
  padding: 26px 0 34px;
  display: grid;
  gap: 12px;
}

.panel-pie .btn { width: 100%; justify-content: center; }

.panel-pie .tel {
  justify-content: center;
  padding: 14px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: 16.5px;
  text-decoration: none;
}

body.bloqueado { overflow: hidden; }

/* ---------- Hero — único bloque con color saturado de fondo ---------- */
.hero {
  background: var(--hero);
  color: #fff;
  padding: 26px 0 68px;
  position: relative;
  overflow: hidden;
}

.bc {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.42);
  padding-bottom: 40px;
}

.bc a { text-decoration: none; }

.hero-in { max-width: 940px; }

.hero h1 {
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 500;
  color: #fff; /* fondo oscuro: no puede depender de la herencia, ver typography.css */
}

.hero h1 em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--fluo-autores);
}

.gap-eyebrow { height: var(--espacio-hero-eyebrow-h1); }
.gap-copy { height: var(--espacio-hero-copy-cta); }

.hero-copy {
  font-size: 21px;
  color: rgba(255, 255, 255, 0.74);
  max-width: 64ch;
  margin-top: 22px;
}

.hero-copy strong { color: #fff; }

.hero-meta {
  display: flex;
  gap: 26px;
  margin-top: 34px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.hero-meta b {
  font-family: var(--f-display);
  font-size: 15px;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Hero en fondo claro (body.hero-claro) ----------
   Excepción compartida por dos plantillas -- ficha de reseña (la cubierta
   ya pone el color) y contacto (no hay nada que "vender" con un fondo
   saturado) -- ver tg_tipo_ficha_body_class() en inc/ficha-libro-render.php
   y tg_contacto_body_class() en inc/contacto-meta-box.php, y el guard de
   site.js que no funde la cabecera con este hero. Todo lo de aquí abajo
   pisa un color puesto DIRECTAMENTE (no heredado) en el bloque de arriba,
   así que cada override tiene que ser igual de explícito. */
body.hero-claro .hero {
  background: var(--fondo);
  color: var(--tinta);
  border-bottom: 1px solid var(--linea);
}

body.hero-claro .bc { color: var(--tinta-40); }

body.hero-claro .eyebrow.on-dark { color: var(--acento-texto); }

body.hero-claro .hero h1 { color: var(--tinta); }

body.hero-claro .hero h1 em { color: var(--acento); }

body.hero-claro .hero-sub { color: var(--tinta-60); }

body.hero-claro .hero-meta { color: var(--tinta-40); }

.hero-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---------- Insignia de valoración Google (chip) ---------- */
.gchip {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  text-decoration: none;
}

.gchip:hover { background: rgba(255, 255, 255, 0.12); }
.gchip svg { width: 20px; height: 20px; flex: none; }
.gchip b { font-family: var(--f-display); font-weight: var(--peso-semi); font-size: 15px; color: #fff; }
.gchip small { font-family: var(--f-mono); font-size: 10.5px; color: rgba(255, 255, 255, 0.5); }
.stars { color: #F0A500; letter-spacing: 1px; }

/* ---------- Franja de logos (clientes o distribuidores) ----------
   Las imágenes son PNG/JPG con fondo blanco de verdad —
   mix-blend-mode:multiply hace desaparecer ese blanco sobre cualquier
   fondo claro. No pedir versiones transparentes ni recortar los archivos.

   `.logos-in` se usa de dos formas: suelta dentro de una sección (home,
   sin envoltorio propio, separación por margin-top específico de esa
   página) o dentro de `.logos` (pilar de servicio, con fondo/borde propios
   y separación por padding) — de ahí que el padding esté en el
   descendiente compuesto `.logos .logos-in`, no en `.logos-in` a secas:
   así no afecta a los usos sueltos de home. */
.logos {
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}

.logos .logos-in {
  padding: 24px 0;
}

.logos-in {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.logos-in .lb {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-40);
  flex: none;
}

.logos-in img {
  height: 32px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s, opacity 0.2s;
}

.logos-in img:hover {
  filter: none;
  opacity: 1;
}

/* ---------- Tarjeta de vertical (fondo oscuro, home) ---------- */
.vcard {
  border-radius: var(--radio-tarjeta);
  padding: 38px 36px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.v-autores { background: var(--hero); color: #fff; }
.v-b2b { background: var(--carbon); color: #fff; }

.vcard h3 { font-size: 28px; margin-top: 16px; color: #fff; }
.vcard .vlead { margin-top: 14px; color: rgba(255, 255, 255, 0.72); font-size: 17.5px; max-width: 40ch; }
.vcard .deco { position: absolute; right: -26px; top: -20px; opacity: 0.22; pointer-events: none; }

.v-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}

.v-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.86);
}

.v-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }

.tick { flex: none; margin-top: 6px; color: var(--acento); }
.v-autores .tick { color: var(--fluo-autores); }
.v-b2b .tick { color: var(--fluo-b2b); }

.vcta { margin-top: auto; padding-top: 28px; }

/* ---------- Tarjeta de servicio con icono ---------- */
.s {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background 0.18s;
}

.s:hover { background: var(--hover); }
.s .ic { color: var(--acento); margin-bottom: 18px; }
.s h4 { font-size: 19px; }
.s p { margin-top: 11px; font-size: 16.5px; color: var(--tinta-60); flex: 1; }
.s .mas {
  margin-top: 18px;
  font-family: var(--f-display);
  font-weight: var(--peso-medio);
  font-size: 15px;
  color: var(--acento-texto);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.s:hover .mas .arw { transform: translateX(3px); }
.mas .arw { transition: transform 0.18s; }

/* ---------- Tarjeta de libro del catálogo ---------- */
.libro {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: background 0.18s;
}

.libro:hover { background: var(--hover); }
.libro img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--fondo-2); }
.libro .lb { padding: 14px; }
.libro .g { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-40); }
.libro h4 { margin-top: 7px; font-size: 16px; line-height: 1.25; }
.libro .a { margin-top: 5px; font-size: 14.5px; color: var(--tinta-60); }

/* ---------- Rejilla de entregables ---------- */
.entregables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
}

.ent { background: var(--superficie); padding: 22px 24px; transition: background 0.18s; }
.ent:hover { background: var(--hover); }
.ent .ic { color: var(--acento-texto); margin-bottom: 14px; }
.ent h4 { font-size: 17px; }
.ent p { margin-top: 8px; font-size: 15.5px; color: var(--tinta-60); }

/* ---------- Tarjeta de proyecto con etiqueta de estado ---------- */
.pr {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  transition: background 0.18s;
}

.pr:hover { background: var(--hover); }
.pr-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-tags .t {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 99px;
  border: 1px solid var(--linea);
  color: var(--tinta-40);
}
.pr-tags .t.act { background: var(--carbon); color: var(--fluo-b2b); border-color: var(--carbon); }
.pr h4 { margin-top: 18px; font-size: 18px; line-height: 1.28; }
.pr .prog { margin-top: 8px; font-family: var(--f-mono); font-size: 11px; color: var(--tinta-40); letter-spacing: 0.05em; }
.pr p { margin-top: 15px; font-size: 16px; color: var(--tinta-60); flex: 1; }

/* ---------- Tarjeta de recurso ---------- */
.rec {
  background: var(--superficie);
  padding: 26px 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: background 0.18s;
}

.rec:hover { background: var(--hover); }
.rec h4 { font-size: 18px; margin-top: 14px; }
.rec p { margin-top: 9px; font-size: 15.5px; color: var(--tinta-60); flex: 1; }
.rec .arw { margin-top: 18px; color: var(--acento-texto); transition: transform 0.18s; }
.rec:hover .arw { transform: translateX(3px); }

/* ---------- Bloque de CTA final (fondo hero, autocontenido) ----------
   Mismo componente que el CTA-al-pilar de la ficha de libro (entrevista o
   reseña; .cta h3, dentro de un artículo), aquí en su versión de sección
   propia con encabezado h2 — misma caja, tamaño ligeramente mayor porque
   aquí no comparte columna con nada. El margen superior de la versión
   "dentro de artículo" se pone en el contexto que la usa (ver .art .cta en
   ficha-libro.css), no aquí. */
.cta {
  background: var(--hero);
  color: #fff;
  border-radius: var(--radio-tarjeta);
  padding: 52px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.cta h2 { font-size: clamp(26px, 3vw, 36px); max-width: 30ch; color: #fff; }
.cta h2 em { font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--fluo-autores); }
.cta .acciones { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Tabla ---------- */
.tabla-wrap {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  overflow: auto;
}

.tabla-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  min-width: 680px;
}

.tabla-wrap tbody td:first-child {
  font-family: var(--f-display);
  font-weight: var(--peso-medio);
}

.tabla-wrap thead th {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-40);
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linea);
}

.tabla-wrap tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--linea-2);
  vertical-align: top;
}

.tabla-wrap tbody tr:last-child td { border-bottom: 0; }
.tabla-wrap tbody tr:hover td { background: var(--fondo); }
.tabla-wrap .no { color: var(--tinta-40); }
.tabla-wrap .si { color: var(--acento-texto); font-weight: var(--peso-medio); }

/* ---------- Tarjeta con imagen (entrevista / reseña) ----------
   Componente reutilizable: portada/cubierta + retrato circular en
   blanco y negro superpuesto + cuerpo con etiquetas, título, obra,
   extracto y pie con fecha + enlace "Leer". */
.card {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background 0.18s;
}

.card:hover {
  background: var(--hover);
}

/* Panel de imagen: caja 4:3, la cubierta la llena y se recorta
   (object-fit:cover). El punto focal de cada entrada fija el
   object-position real (ver template-parts/card-libro.php); "center
   30%" es solo el valor por defecto si no se ha fijado ninguno. Un velo
   degradado inferior separa el retrato de cualquier cubierta, sea del
   color que sea. */
.visual {
  position: relative;
  background: var(--fondo-2);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--linea-2);
}

.visual .cubierta {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* valor por defecto; cada tarjeta lo pisa inline con su punto focal */
  display: block;
  transition: transform 0.4s ease;
}

.card:hover .visual .cubierta {
  transform: scale(1.03);
}

.visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(15, 30, 51, 0.42), rgba(15, 30, 51, 0));
}

.visual .sin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  color: var(--tinta-40);
  background: var(--fondo-2);
}

.visual .sin span {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
}

/* Retrato: avatar circular, SIEMPRE en blanco y negro por CSS — el archivo
   subido va en color, el filtro es lo único que lo desatura. z-index por
   encima del velo (::after de .visual), que también es absolute. */
.retrato {
  position: absolute;
  left: 24px;
  bottom: -28px;
  z-index: 2;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--superficie);
  background: var(--hero);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 18px -8px rgba(23, 19, 16, 0.5);
}

.card:hover .retrato {
  border-color: var(--hover);
}

.retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transition: filter 0.25s ease;
}

.cuerpo {
  padding: 44px 24px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radio-boton);
  border: 1px solid var(--linea);
  color: var(--tinta-40);
}

.tag.sello {
  background: var(--acento-suave);
  border-color: transparent;
  color: var(--acento-texto);
}

.card h3 {
  font-size: 19px;
  line-height: 1.25;
}

.card .obra {
  margin-top: 9px;
  font-size: 16.5px;
  color: var(--tinta-60);
  font-style: italic;
}

.card .ed {
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--tinta-40);
  letter-spacing: 0.04em;
}

.card .ex {
  margin-top: 16px;
  font-size: 16px;
  color: var(--tinta-60);
  flex: 1;
}

.card .pie {
  /* .cuerpo es flex-column y .pie es hijo directo suyo (ver arriba), así
     que margin-top:auto empuja el pie al fondo de la tarjeta pase lo que
     pase con la altura del título/obra encima — mismo patrón ya usado en
     los packs del pilar. */
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--fondo-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card .fecha {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--tinta-40);
}

.card .leer {
  font-family: var(--f-display);
  font-weight: var(--peso-medio);
  font-size: 15px;
  color: var(--acento-texto);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.card .leer .arw {
  transition: transform 0.18s;
}

.card:hover .leer .arw {
  transform: translateX(3px);
}

/* ---------- Barra de filtros (chips + buscador) ---------- */
.filtros {
  position: sticky;
  z-index: 50;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}

.filtros-in {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  flex-wrap: wrap;
}

.filtros .lb {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-40);
  flex: none;
  margin-right: 4px;
}

.chip {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: var(--peso-medio);
  padding: 8px 16px;
  border-radius: var(--radio-boton);
  border: 1px solid var(--linea);
  background: var(--superficie);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  display: inline-block;
}

.chip:hover { background: var(--hover); }

.chip.on {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--fondo);
}

.busca {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-boton);
  padding: 8px 16px;
  min-width: 230px;
}

.busca input {
  border: 0;
  background: none;
  outline: none;
  font-family: var(--f-cuerpo);
  font-size: 15.5px;
  width: 100%;
  color: var(--tinta);
}

.busca svg { color: var(--tinta-40); flex: none; }

/* ---------- Bloque de CTA intercalado ----------
   Se inserta como un elemento más dentro de una rejilla de tarjetas
   (grid-column: span N según el nº de columnas de esa rejilla). */
.cta-inline {
  background: var(--hero);
  color: #fff;
  border-radius: var(--radio-tarjeta);
  padding: 38px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
}

.cta-inline h3 {
  font-size: 26px;
  max-width: 32ch;
}

.cta-inline h3 em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--fluo-autores);
}

.cta-inline p {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  max-width: 52ch;
}

/* ---------- Paginación numerada ---------- */
.pag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 52px;
  flex-wrap: wrap;
}

.pag a, .pag span.actual {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: var(--peso-medio);
  font-size: 15.5px;
  transition: background 0.18s;
  color: var(--tinta);
}

.pag a:hover { background: var(--hover); }

.pag a.on, .pag span.actual {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--fondo);
}

.pag .dots { color: var(--tinta-40); padding: 0 4px; }

/* Puente para the_posts_pagination() nativa de WordPress (archive.php,
   search.php): mismo aspecto que la paginación a medida de arriba, sin
   reescribir sus clases (page-numbers/current/dots son las que WP genera
   solo, no se pueden cambiar sin filtrar el HTML). */
.pag a.page-numbers, .pag span.page-numbers { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--linea); background: var(--superficie); border-radius: 10px; text-decoration: none; font-family: var(--f-display); font-weight: var(--peso-medio); font-size: 15.5px; transition: background 0.18s; color: var(--tinta); }
.pag a.page-numbers:hover { background: var(--hover); }
.pag span.page-numbers.current { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.pag span.page-numbers.dots { border: 0; background: none; color: var(--tinta-40); }

/* ---------- Clúster de enlaces (pie de sección "seguir explorando") ---------- */
.cluster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
}

.cl {
  background: var(--superficie);
  padding: 22px 24px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: background 0.18s;
}

.cl:hover { background: var(--hover); }

.cl span {
  font-family: var(--f-display);
  font-weight: var(--peso-medio);
  font-size: 16.5px;
}

.cl .arw { color: var(--acento-texto); flex: none; }

/* ---------- Insignia (badge) ---------- */
.badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--acento-suave);
  color: var(--acento-texto);
  padding: 5px 10px;
  border-radius: var(--radio-boton);
  white-space: nowrap;
}

.badge--b2b {
  background: transparent;
  border: 1px solid var(--fluo-b2b);
  color: var(--fluo-b2b);
}

/* ---------- Formulario ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field.full { grid-column: 1 / -1; }

.field label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-40);
}

.field input, .field select, .field textarea {
  font-family: var(--f-cuerpo);
  font-size: 15.5px;
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio-campo);
  padding: 12px 14px;
  width: 100%;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  background: var(--superficie);
}

.field textarea { resize: vertical; min-height: 92px; }

.form-card {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 32px;
}

.form-card h3 { font-size: 21px; }
.form-card .fsub { margin-top: 8px; font-size: 14.5px; color: var(--tinta-60); }
.form-card .btn { width: 100%; justify-content: center; margin-top: 18px; }

.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--tinta-60);
}

.check input { width: auto; margin-top: 4px; }

.legal {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--tinta-40);
  line-height: 1.5;
}

.legal a { color: var(--acento-texto); }

/* ---------- Acordeón (FAQ) ----------
   Sin clase propia en la maqueta real (`details`/`summary` a secas) —
   se escopa a `.faq-grid` para no afectar a un <details> que apareciera
   en otro contexto (hoy no hay ninguno, pero es la forma segura). */
.faq-grid details {
  /* border/padding/margin/background con !important: astra-child/style-mig.css
     tiene una regla `details { border: 1px dashed ...; padding: 10px;
     margin: 8px 0; background: #fafafa; }` sin ámbito -- confirmado en vivo
     2026-08-10 (borde discontinuo colándose por arriba/lados del acordeón).
     Ver nota equivalente en contenido.css sobre listas. */
  border: none !important;
  border-bottom: 1px solid var(--linea) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.faq-grid summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-family: var(--f-display);
  font-size: 17.5px;
  font-weight: var(--peso-medio);
}

.faq-grid summary::-webkit-details-marker { display: none; }

.faq-grid summary .q {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--tinta-40);
  padding-top: 6px;
  flex: none;
}

.faq-grid summary .pm {
  margin-left: auto;
  color: var(--acento);
  flex: none;
  transition: transform 0.2s ease;
}

.faq-grid details[open] summary .pm { transform: rotate(45deg); }

.faq-grid .ans {
  padding: 0 0 24px 42px;
  color: var(--tinta-60);
  font-size: 17.5px;
  max-width: 62ch;
}

.faq-grid .ans a { color: var(--acento-texto); }

/* ---------- Footer del sitio ---------- */
footer {
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.68);
  padding: 62px 0 28px;
  font-size: 15.5px;
}

.f-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
}

.f-logo .logo-svg { height: 38px; width: auto; display: block; }

footer h5 {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 16px;
  font-weight: var(--peso-medio);
}

footer a { text-decoration: none; color: rgba(255, 255, 255, 0.68); }
footer a:hover { color: #fff; }

.f-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.f-legal {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

.f-bottom {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- Entradilla (lead) ---------- */
.entradilla {
  font-size: 21px;
  line-height: 1.55;
  color: var(--tinta-60);
  padding-bottom: 34px;
  border-bottom: 1px solid var(--linea);
}

/* ---------- Bloques pregunta/respuesta ----------
   La pregunta lleva marcado propio (.qa .p), no un párrafo en negrita: es
   lo que permite diferenciarla tipográfica y semánticamente de la
   respuesta y de cualquier otro texto en negrita del artículo. */
.qa {
  margin-top: 38px;
}

.qa .p {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: var(--peso-medio);
  line-height: 1.3;
  position: relative;
  padding-left: 26px;
}

.qa .p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 2px;
  background: var(--acento);
}

.qa .r {
  margin-top: 16px;
  font-size: 18px;
  color: var(--tinta-60);
  padding-left: 26px;
}

.qa .r p + p {
  margin-top: 14px;
}

.qa + .qa {
  margin-top: 40px;
  padding-top: 38px;
  border-top: 1px solid var(--linea-2);
}

/* ---------- Retrato grande (hero de ficha individual) ----------
   Misma idea que .retrato (círculo, blanco y negro por CSS), a 150px. */
.retrato-xl {
  display: block;
  width: 150px;
  height: 150px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.22);
  margin-bottom: 22px;
  background: rgba(255, 255, 255, 0.06);
}

.retrato-xl img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.06) brightness(1.03);
}

/* ---------- Panel de cubierta sin recortar (ficha individual) ----------
   A diferencia de .visual (índice, recorta a 4:3), aquí la cubierta es el
   producto: se ve entera, con sus datos (género/editorial/formato/ISBN) y
   un botón de compra. Editorial y el badge de sello son opcionales: no
   todas las entrevistas son de libros publicados por Tregolam. */
.hero-cubierta {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radio-tarjeta);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-cubierta img.cubierta {
  max-height: 230px;
  width: auto;
  box-shadow: 0 26px 46px -22px rgba(0, 0, 0, 0.85);
  border-radius: 2px;
}

/* Retrato promovido a imagen principal cuando no hay cubierta (ver
   inc/ficha-libro-render.php) -- a diferencia de una cubierta real, que se
   ve entera, aquí sí se recorta a 4:3 con el punto focal del retrato,
   porque una foto de persona no tiene "forma de libro" que respetar. */
.hero-cubierta img.cubierta.es-retrato {
  width: 100%;
  max-height: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hero-cubierta .sin {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 2 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.hero-cubierta .datos {
  width: 100%;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-cubierta .datos div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}

.hero-cubierta .datos b {
  font-family: var(--f-display);
  font-weight: var(--peso-medio);
  color: #fff;
  text-align: right;
}

.hero-cubierta .btn {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
  padding: 12px 20px;
  font-size: 15px;
}

/* Insignia de sello, sobre fondo oscuro (hero). Mismo #12203A fijo que
   .btn-naranja (ver comentario ahí); sin font-family/font-size propios:
   hereda el mono/11px de .hero-meta, que es donde siempre vive. */
.chip-sello {
  background: var(--fluo-autores);
  color: #12203A;
  padding: 5px 12px;
  border-radius: var(--radio-boton);
  font-weight: var(--peso-medio);
}

/* ---------- Barra lateral pegajosa (caja de CTA + compartir) ---------- */
.side {
  position: sticky;
  top: 130px;
  display: grid;
  gap: 18px;
}

.box {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 24px;
}

.box .bt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-40);
  margin-bottom: 14px;
}

.box h4 { font-size: 18px; }
.box p { margin-top: 10px; font-size: 16px; color: var(--tinta-60); }
.box .btn { width: 100%; justify-content: center; margin-top: 16px; padding: 12px 18px; font-size: 15px; }

.compartir {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.compartir a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-60);
  text-decoration: none;
  transition: background 0.18s;
}

.compartir a:hover { background: var(--hover); }

/* ---------- Bio del autor ---------- */
.bio {
  margin-top: 56px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 32px;
  display: flex;
  gap: 26px;
  align-items: flex-start;
}

.bio .r {
  display: block;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  border: 2px solid var(--linea);
  background: var(--hero);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 24px;
}

.bio .r img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.06);
}

.bio h4 { font-size: 19px; }
.bio p { margin-top: 12px; font-size: 17px; color: var(--tinta-60); max-width: 74ch; }

/* ---------- CTA grande independiente: variante h3 (dentro de artículo) ----------
   La caja (fondo, padding, flex) es la de "Bloque de CTA final" más arriba
   — este componente admite h2 (sección propia, home) o h3 (dentro de un
   artículo, ficha de libro) según el contexto. El margen superior de
   la variante h3 se pone donde se usa: ver .art .cta en ficha-libro.css. */
.cta h3 {
  font-size: 28px;
  max-width: 32ch;
  color: #fff;
}

.cta h3 em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--fluo-autores);
}

.cta p {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17.5px;
  max-width: 52ch;
}

/* ---------- Botón fantasma sobre fondo oscuro ---------- */
.btn-ghost-dark {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.btn-ghost-dark:hover {
  background: #fff;
  color: var(--hero);
}

/* ---------- Breakpoints comunes ---------- */
@media (max-width: 1000px) {
  .nav { display: none; }
  .burger { display: block; }
  .f-grid { grid-template-columns: 1fr 1fr; }
  .busca { margin-left: 0; width: 100%; }
  .side { position: static; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .f-grid { grid-template-columns: 1fr; }
  .cluster { grid-template-columns: 1fr; }
  .bio { flex-direction: column; gap: 18px; }
  .cta { padding: 30px 24px; }
  .qa .p { font-size: 20px; }
}

/* ==========================================================================
   PILAR DE SERVICIO — componentes nuevos de la plantilla reutilizable
   (publicar/promocionar un libro, diseño de portada).
   ========================================================================== */

/* ---------- Franja de datos del hero (fila de cifras con separadores) ---------- */
.hero-datos {
  display: flex;
  margin-top: 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-datos div {
  flex: 1;
  padding: 22px 24px 26px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-datos div:last-child { border-right: 0; }

.hero-datos b {
  display: block;
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: var(--peso-medio);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero-datos span {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.45;
}

/* ---------- Tarjeta de pack ----------
   Tres (o las que sean) columnas a la MISMA altura aunque el contenido
   difiera: el grid con align-items:stretch iguala la altura de columna, y
   dentro cada .pack es un flex en columna con el botón empujado al fondo
   (margin-top:auto) — así el CTA queda alineado entre packs con distinto
   número de líneas de texto encima. */
.packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.pack {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
  transition: background 0.18s;
}

.pack:hover { background: var(--hover); }

.pack .p-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  gap: 10px;
}

.pack h3 {
  font-size: 23px;
  margin-top: 16px;
  font-weight: var(--peso-medio);
}

.pack .p-sub {
  margin-top: 8px;
  font-size: 16px;
  color: var(--tinta-60);
  min-height: 46px;
}

.price {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--fondo-2);
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.price b {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: var(--peso-medio);
  letter-spacing: -0.03em;
  line-height: 1;
}

.price span {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--tinta-40);
  letter-spacing: 0.06em;
}

.pw {
  margin-top: 14px;
  background: var(--fondo);
  border-radius: 8px;
  padding: 9px 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-40);
}

.pw b {
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--tinta);
  text-transform: none;
  letter-spacing: 0;
}

.p-group { margin-top: 20px; }

.p-group .gt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-40);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fondo-2);
}

.p-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-list a { color: var(--acento-texto); }

.p-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  font-size: 16px;
  border-bottom: 1px solid var(--fondo-2);
}

.p-list li:last-child { border-bottom: 0; }

.pack .btn { width: 100%; justify-content: center; }
/* El botón empuja al fondo desde .btn-wrap, no desde .btn: .btn-wrap es
   hijo directo del flex column de .pack (el propio .btn es nieto, dentro
   de .btn-wrap) — un margin-top:auto solo empuja si está en el hijo
   directo del contenedor flex. Así los tres packs alinean el botón en la
   misma línea aunque el contenido de arriba difiera en longitud. */
.pack .btn-wrap { margin-top: auto; padding-top: 26px; }

.nota {
  margin-top: 24px;
  font-size: 15.5px;
  color: var(--tinta-40);
  max-width: 80ch;
}

.nota a { color: var(--acento-texto); }

/* ---------- Paso numerado del proceso ---------- */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
}

.paso {
  background: var(--fondo);
  padding: 30px 28px;
  transition: background 0.18s;
}

.sec.blanco .paso { background: var(--superficie); }
.paso:hover { background: var(--hover); }

.paso .n {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--acento-texto);
  letter-spacing: 0.1em;
}

.paso h4 { margin-top: 16px; font-size: 19px; }
.paso p { margin-top: 11px; font-size: 16.5px; color: var(--tinta-60); }

/* ---------- Razón (tarjeta con icono) ---------- */
.razones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.rz {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 28px 26px;
  transition: background 0.18s;
}

.rz:hover { background: var(--hover); }
.rz .ic { color: var(--acento); margin-bottom: 18px; }
.rz h4 { font-size: 18.5px; }
.rz p { margin-top: 11px; font-size: 16.5px; color: var(--tinta-60); }

/* ---------- Comparativa a dos columnas (autopublicar vs editorial) ---------- */
.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.vs {
  border-radius: var(--radio-tarjeta);
  padding: 30px 28px;
  border: 1px solid var(--linea);
  background: var(--superficie);
}

.vs.destacada {
  background: var(--fondo);
  border-color: var(--tinta);
}

.vs h3 { font-size: 21px; margin-top: 14px; }

.vs ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}

.vs li {
  display: flex;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--fondo-2);
  font-size: 16.5px;
  color: var(--tinta-60);
}

.vs li:first-child { border-top: 0; }
.vs .mark { flex: none; margin-top: 6px; color: var(--tinta-40); }
.vs.destacada .mark { color: var(--acento); }
.vs .btn { margin-top: 24px; }

/* ---------- Tarjeta de concepto con enlace ---------- */
.conceptos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cp {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition: background 0.18s;
}

.cp:hover { background: var(--hover); }
.cp h4 { font-size: 18px; }
.cp p { margin-top: 11px; font-size: 16.5px; color: var(--tinta-60); }

.cp .mas {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--f-display);
  font-weight: var(--peso-medio);
  font-size: 14.5px;
  color: var(--acento-texto);
  text-decoration: none;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* ---------- Bloque de contacto (columna de argumentos + form-card) ---------- */
.cont-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.cont-points {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}

.cont-points li {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--linea);
  font-size: 17px;
  color: var(--tinta-60);
}

/* ---------- Cabecera de sección en fila (h2 + enlace) ----------
   Distinta de la .sec-hd apilada (con párrafo debajo, para intros más
   largas) — compartida entre home, catálogo del pilar y donde haga falta
   una cabecera corta con un botón "ver todo" a la derecha. */
.sec-hd2 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.sec-hd2 h2 {
  font-size: clamp(26px, 3vw, 34px);
}

.sec-hd2 h2 em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--acento);
}

/* ---------- Tarjeta de artículo (rejilla de 3) ----------
   Nacida en el artículo de blog ("Artículos relacionados"), ahora también
   la usan archive.php y search.php -- movida aquí en vez de duplicarla o
   cargar todo articulo-blog.css (que trae de más: .indice, .progreso,
   .contenido...) en plantillas que no son un artículo individual. */
.rel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.rc {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background 0.18s;
}

.rc:hover { background: var(--hover); }

.rc img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--fondo-2);
}

.rc .rb {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rc .cat {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento-texto);
}

.rc h3 { margin-top: 11px; font-size: 18px; line-height: 1.28; }
.rc p { margin-top: 11px; font-size: 15.5px; color: var(--tinta-60); flex: 1; }

.rc .m {
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--tinta-40);
  letter-spacing: 0.05em;
}

@media (max-width: 900px) {
  .rel { grid-template-columns: 1fr; }
}

/* ---------- Catálogo de libros (rejilla) ----------
   Compartida entre home y el pilar de servicio. */
.libros {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

/* ---------- Reseñas de Google ----------
   Compartida entre home y el pilar de servicio — misma fuente de datos
   (tg_get_resenas_google()), mismo componente visual en las dos. */
.rev-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.rev-score {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 22px 26px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.rev-score .big {
  font-family: var(--f-display);
  font-size: 42px;
  font-weight: var(--peso-medio);
  line-height: 1;
  letter-spacing: -0.03em;
}

.rev-score .meta { font-size: 14px; color: var(--tinta-60); }

.rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.rcard {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  padding: 24px;
  transition: background 0.18s;
}

.rcard:hover { background: var(--hover); }

.rcard .rq {
  font-size: 17.5px;
  line-height: 1.55;
  margin-top: 14px;
  color: var(--tinta-40);
  font-style: italic;
}

.rcard .rf {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--fondo-2);
  display: flex;
  align-items: center;
  gap: 11px;
}

.av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hero);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: var(--peso-semi);
  flex: none;
}

.rn { font-family: var(--f-display); font-weight: var(--peso-medio); font-size: 14.5px; }
.rd { font-family: var(--f-mono); font-size: 11px; color: var(--tinta-40); }

/* Atribución obligatoria de Google Maps Platform para las reseñas
   mostradas vía la API (ver inc/resenas-google.php). */
.rev-atribucion {
  margin-top: 20px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--tinta-40);
}

.rev-atribucion a {
  color: var(--acento-texto);
  text-decoration: underline;
}

@media (max-width: 1000px) {
  .libros { grid-template-columns: repeat(3, 1fr); }
  .rev-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .libros { grid-template-columns: 1fr; }
}

/* ---------- Breakpoints del pilar de servicio ---------- */
@media (max-width: 1000px) {
  .cont-grid, .faq-grid { grid-template-columns: 1fr; gap: 44px; }
  .packs, .razones, .conceptos, .versus { grid-template-columns: 1fr; }
  .pasos, .entregables { grid-template-columns: 1fr 1fr; }
  .hero-datos { flex-direction: column; }
  .hero-datos div { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
}

@media (max-width: 640px) {
  .pasos, .entregables { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr; }
}

/* ---------- [trego_google_badge] — ver inc/google-badge-shortcode.php ----------
   Ancho fijo (260px, el original de astra-child) quitado y la etiqueta ya no
   fuerza una sola línea: en las 33 páginas que usan este shortcode, la
   columna de Gutenberg donde vive se colapsa a ~48px de ancho real en este
   tema (contenedor .wrap más estrecho que el de Astra) -- con ancho fijo la
   etiqueta se partía letra a letra en vez de por palabra. Encontrado en la
   revisión final de vista previa 2026-08-10. */
.g-badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-family: "Roboto Condensed", system-ui, sans-serif;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
  color: #0f172a;
  text-decoration: none;
  max-width: 100%;
  min-height: 42px;
}
.g-badge svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: #fbbf24;
  flex-shrink: 0;
}
.g-badge__text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.g-badge__label {
  font-weight: 700;
  /* Gutenberg pone overflow-wrap/word-break: break-word por defecto en
     .wp-block-column -- sin esto, "Evaluación Google" se partía letra a
     letra en vez de por palabra en las columnas más estrechas (~55px). */
  overflow-wrap: normal;
  word-break: normal;
}
.g-badge__row {
  display: flex;
  align-items: center;
  gap: .1rem;
  flex-wrap: wrap;
}
.g-badge__score {
  font-weight: 800;
}
.g-badge:focus-visible {
  outline: 3px solid #86efac;
  outline-offset: 3px;
  border-radius: 6px;
}
/* nota: .g-badge--dark no tenía reglas propias en el CSS original (astra-child/style-mig.css)
   -- el atributo theme="dark" ya no pintaba distinto en el sitio en vivo; se porta tal cual. */