/*
Theme Name:   GeneratePress EC
Theme URI:    https://edicionescatolicas.org
Description:  Child theme de GeneratePress para edicionescatolicas.org
Author:       Miguel Echeverría
Template:     generatepress
Version:      1.1.0
Text Domain:  generatepress-ec
*/

/* ── VARIABLES ── */
:root {
  --parchment:      #faf7f2;
  --parchment-mid:  #f0ebe0;
  --parchment-dark: #e8e0d0;
  --ink:            #1c1208;
  --ink-mid:        #3d3020;
  --ink-light:      #6b5d48;
  --cardinal:       #8B1A1A;
  --cardinal-dark:  #5a0e0e;
  --gold:           #b8922a;
  --gold-light:     #d4a84b;
  --rule:           #cec4b0;
  --rule-light:     #e2dace;
}

/* ── TIPOGRAFÍA BASE ──
   !important necesario porque GP inyecta inline styles desde el Customizer */
html,
body,
.site,
#page {
  background: var(--parchment) !important;
}

body {
  font-family: 'Lora', Georgia, serif !important;
  color: var(--ink) !important;
  font-size: 16px;
  line-height: 1.7;
}

/* ── CABECERA ── */
.site-header {
  background: var(--parchment);
  border-bottom: 3px double var(--cardinal);
  box-shadow: none;
}

.site-header .inside-header {
  padding: 18px 30px !important;
  align-items: center !important;
}

/* Título — GP usa h1.main-title (NO .site-title que es la clase del tema padre) */
.main-title {
  margin: 0 !important;
}

.main-title a {
  font-family: 'Playfair Display', serif !important;
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  line-height: 1.05 !important;
  display: block !important;
  white-space: nowrap !important;
}

.main-title a:hover { color: var(--cardinal) !important; }

/* Antes había un ::after decorativo (rayita roja bajo el título) pensado
   para un título en una sola línea; con el título a 3.8rem se partía en
   dos líneas y la rayita caía suelta bajo la "C" de "CATÓLICAS", como un
   subrayado roto — confirmado por captura y señalado como fallo. Se quita:
   ahora el título cabe en una línea (2.6rem) y el subtítulo real del sitio
   (.site-description, debajo) ya hace de remate visual, no hace falta. */

.site-description {
  font-family: 'Raleway', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-top: 3px !important;
}

/* ── NAVEGACIÓN ── */
.main-navigation a {
  font-family: 'Raleway', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mid);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--cardinal);
}

/* ── CONTENIDO ── */
.entry-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.entry-title a { color: var(--ink); }
.entry-title a:hover { color: var(--cardinal); }

/* Subtítulo editorial: el "gancho" que el pipeline pone justo después del
   vídeo/imagen inicial, antes del cuerpo del artículo. Tres marcados
   distintos confirmados en contenido REAL según el momento en que se
   publicó: <p><em>…</em></p>, <p><strong>…</strong></p>, y —el causante de
   que las dos reglas anteriores no sirvieran de nada en el post real
   "«Querido hermano»: Prevost abraza a Constantinopla…" — un <h2> normal y
   corriente. Ese <h2> es indistinguible por markup de un h2 de sección
   real más abajo en el mismo artículo (p. ej. "Una fraternidad de
   apostatas"), así que solo puede aislarse por posición: es el primer
   elemento de texto de entry-content, antes del primer <p>. Se le quita la
   línea roja y el margen superior grande de los h2 de sección, y se aplica
   el mismo tratamiento (cursiva, algo más grande que el cuerpo, sin negrita)
   que a las otras dos variantes. */
.single-post .entry-content > p:first-of-type > em:only-child,
.single-post .entry-content > p:first-of-type > strong:only-child,
.single-post .entry-content > h2:first-of-type {
  font-size: 1.15em !important;
  font-style: italic !important;
  font-weight: normal !important;
  border-bottom: none !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ── ENLACES ── */
a { color: var(--cardinal); }
a:hover { color: var(--cardinal-dark); }

/* ── TÍTULOS EN POSTS ── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  color: var(--ink);
  line-height: 1.28;
}

h2 {
  border-bottom: 2px solid var(--cardinal);
  padding-bottom: 6px;
  margin-top: 2.2em;
}

h3 {
  color: var(--cardinal-dark);
  margin-top: 1.8em;
}

/* ── CALLOUTS ── */
.callout-indice {
  background: var(--parchment-mid);
  border-left: 4px solid var(--cardinal);
  padding: 18px 22px;
  margin: 28px 0;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
}

.callout-indice ol {
  margin: 8px 0 0 18px;
  line-height: 2;
}

.callout-indice a {
  color: var(--ink-mid);
  text-decoration: none;
}

.callout-indice a:hover { color: var(--cardinal); }

.callout-piedrasanta {
  background: var(--parchment-mid);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  padding: 14px 18px;
  margin-bottom: 28px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.82rem;
  color: var(--ink-light);
}

.callout-piedrasanta a { color: var(--cardinal); }

/* ── DIÁLOGOS: formato teatro ── */
.entry-content strong {
  color: var(--ink);
}

/* Cada parlamento */
.entry-content p:has(> strong:first-child) {
  margin-bottom: 0.6em;
}

/* Acotaciones en cursiva */
.entry-content p > em:only-child,
.entry-content p > em:first-child {
  color: var(--ink-light);
  font-size: 0.9rem;
}

/* ── NOTAS A PIE ── */
.footnotes {
  border-top: 1px solid var(--rule);
  margin-top: 3em;
  padding-top: 1.2em;
  font-size: 0.82rem;
  color: var(--ink-light);
}

/* ── SIDEBAR ──
   !important en todo este bloque: main.min.css de GP (componentes reales,
   no el style.css casi vacío del padre) se encola DESPUÉS de este archivo
   y reafirma sus propias reglas con selectores más específicos.
   Cubre TRES formas distintas en que un título de widget puede llegar,
   confirmadas todas con HTML real de producción:
     1. .widget-title  → widgets clásicos, vía before_title/after_title.
     2. .wp-block-heading → bloque "Encabezado" real de Gutenberg.
     3. h1/h2/h3/h4 sueltos sin ninguna clase → cuando el editor escribe el
        HTML a mano ("Editar como HTML") en vez de usar el bloque Encabezado.
        Confirmado con "Suscripción": tras quitarle el style="..." en línea
        seguía sin coger el diseño, porque el <h3> nunca tuvo la clase
        wp-block-heading — sólo la ponen los bloques Encabezado reales, no
        el HTML escrito a mano. Sin esta tercera regla, cualquier título
        tecleado directamente como HTML queda fuera para siempre. */
.widget-title,
#right-sidebar .widget .wp-block-heading,
#right-sidebar .widget h1,
#right-sidebar .widget h2,
#right-sidebar .widget h3,
#right-sidebar .widget h4 {
  font-family: 'Raleway', sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--cardinal) !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--rule) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}

/* Widgets fuera de portada (sidebar-1 vía dynamic_sidebar, GP los envuelve
   en <aside class="widget ...">): mismo look de tarjeta que .ec-widget en
   home, para que el sidebar no se vea "genérico" al salir de portada.

   OJO — CONFLICTO CON EL CUSTOMIZER DE PRODUCCIÓN: en Apariencia →
   Personalizar → CSS adicional ya existe una regla ".inside-right-sidebar
   .widget" que monta tarjetas blancas con borde dorado, radio 8px y sombra
   (diseño distinto, pensado para el tema anterior). Sin fijar aquí también
   border-radius y box-shadow, ese CSS antiguo se cuela sin oposición
   (ninguna de sus propiedades lleva !important) y sale un híbrido: mis
   colores parchment/cardinal con las esquinas redondeadas y la sombra de
   la regla vieja. Se fijan explícitamente a 0/none para anularla del todo.
   La regla vieja del Customizer queda inerte pero no hace falta borrarla
   para que esto funcione — si se quiere limpieza total, sí se puede quitar
   una vez confirmado que este tema está activo en producción. */
#right-sidebar .widget {
  background: var(--parchment-mid) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 20px !important;
  margin-bottom: 22px !important;
}

/* El Customizer también pinta el contenedor (.inside-right-sidebar) con un
   tono cálido propio y esquinas redondeadas — un segundo "cajón" detrás de
   las tarjetas que no existe en el diseño de portada (las tarjetas flotan
   directas sobre el fondo de página). Se neutraliza para que la columna se
   vea igual dentro y fuera de portada. */
.is-right-sidebar,
.inside-right-sidebar {
  background-color: transparent !important;
  border-radius: 0 !important;
}

#right-sidebar .widget a { color: var(--cardinal); }
#right-sidebar .widget a:hover { color: var(--cardinal-dark); }

#right-sidebar .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#right-sidebar .widget li {
  padding: 7px 0;
  border-bottom: 1px solid var(--rule-light);
  font-size: 0.85rem;
  line-height: 1.4;
}

#right-sidebar .widget li:last-child { border-bottom: none; }

/* Buscador (widget de bloque core/search) */
#right-sidebar .widget input[type="search"] {
  font-family: 'Lora', serif;
  border: 1px solid var(--rule);
  padding: 8px 10px;
}

#right-sidebar .widget button,
#right-sidebar .widget input[type="submit"] {
  background: var(--cardinal) !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Raleway', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
}

#right-sidebar .widget button:hover,
#right-sidebar .widget input[type="submit"]:hover { background: var(--cardinal-dark) !important; }

/* Embed de MailerLite (mismo widget "Sidebar blog" que en producción):
   se deja sin forzar --nl aquí porque su HTML lo controla MailerLite,
   pero si trae su propio <aside> heredará ya el marco .widget de arriba. */

/* ── FOOTER DE GP — oculto, reemplazado por ec-footer via hook ── */
.site-footer { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   HOME PERSONALIZADA — front-page.php
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Franja de fecha / santoral ── */
.ec-date-strip {
  background: var(--cardinal-dark);
  color: rgba(255,255,255,0.9);
  text-align: center;
  padding: 6px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.ec-date-strip .ec-date-fecha {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.ec-date-strip .ec-date-sep {
  color: var(--gold);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.8;
}

.ec-date-strip .ec-date-fiesta {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #fff;
  letter-spacing: 0.02em;
}

.ec-date-strip .ec-date-como {
  font-family: 'Raleway', sans-serif;
  color: rgba(255,255,255,0.45);
  font-size: 0.64rem;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.06em;
}

/* Témporas / Rogaciones / ayuno: violeta */
.ec-date-strip.ec-date-penitencial {
  background: #2d1045;
}
.ec-date-strip.ec-date-penitencial .ec-date-sep   { color: #b090e0; }
.ec-date-strip.ec-date-penitencial .ec-date-fiesta { color: #dcc8f8; }

/* Solemnidades de I clase (domingo): dorado oscuro */
.ec-date-strip.ec-date-solemnidad {
  background: #2a1a00;
}
.ec-date-strip.ec-date-solemnidad .ec-date-sep    { color: var(--gold-light); }
.ec-date-strip.ec-date-solemnidad .ec-date-fiesta  { color: #f5dc80; }

/* ── Contenedor principal ── */
.ec-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Etiqueta de sección ── */
.ec-section-label {
  font-family: 'Raleway', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cardinal);
  font-weight: 700;
  border-top: 2px solid var(--cardinal);
  padding-top: 9px;
  margin: 36px 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ec-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ── Grid de piezas ancla ── */
.ec-featured-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 40px;
}

.ec-fcard {
  background: var(--parchment);
}

.ec-fcard-img {
  width: 100%;
  height: 120px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

/* La miniatura pasó de puro CSS background-image a <img> real (con alt) para
   que lectores de pantalla y Google Imágenes tengan algo que leer/indexar.
   object-fit:cover reproduce el mismo recorte que antes hacía background-size. */
.ec-fcard-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ec-fcard--main .ec-fcard-img {
  height: 200px;
}

.ec-fcard-body {
  padding: 18px 20px 22px;
}

.ec-fcard-format a {
  color: inherit;
  text-decoration: none;
}

.ec-fcard-format a:hover { color: var(--cardinal); }

.ec-fcard-format {
  font-family: 'Raleway', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 8px;
}

.ec-fcard-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.28;
  color: var(--ink);
  margin: 0 0 10px;
  border: none;          /* resetear h2 global */
  padding: 0;
}

.ec-fcard--main .ec-fcard-title { font-size: 1.18rem; }
.ec-fcard:not(.ec-fcard--main) .ec-fcard-title { font-size: 0.95rem; }

.ec-fcard-title a { color: var(--ink); text-decoration: none; }
.ec-fcard-title a:hover { color: var(--cardinal); }

.ec-fcard-excerpt {
  font-size: 0.82rem;
  color: var(--ink-light);
  line-height: 1.55;
  margin: 0 0 10px;
}

.ec-fcard-meta {
  font-family: 'Raleway', sans-serif;
  font-size: 0.62rem;
  color: var(--ink-light);
  letter-spacing: 0.04em;
}

/* ── Fila de contenido (feed + sidebar) ── */
.ec-content-row {
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 52px;
  padding-bottom: 56px;
}

/* Portada ahora usa get_sidebar() (sidebar-1 real de WordPress) como
   segunda columna de este grid, igual que el resto del sitio. GP le pone su
   propio width:30% vía .is-right-sidebar en el CSS compilado — sin anular
   eso, pelea con el ancho fijo de 296px de la columna del grid. */
.ec-content-row #right-sidebar {
  width: auto !important;
}

/* ── Apunte individual ── */
.ec-apunte {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-light);
  align-items: start;
}

.ec-apunte-thumb {
  width: 88px;
  height: 66px;
  background: var(--parchment-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rule);
  font-size: 1.3rem;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Mismo cambio que .ec-fcard-img: <img> real con alt en vez de sólo CSS. */
.ec-apunte-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ec-apunte-format a {
  color: inherit;
  text-decoration: none;
}

.ec-apunte-format a:hover { color: var(--cardinal-dark); }

.ec-apunte-format {
  font-family: 'Raleway', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cardinal);
  font-weight: 600;
  margin-bottom: 5px;
}

.ec-apunte-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
  margin: 0 0 6px;
  border: none;
  padding: 0;
}

.ec-apunte-title a { color: var(--ink); text-decoration: none; }
.ec-apunte-title a:hover { color: var(--cardinal); }

.ec-apunte-excerpt {
  font-size: 0.8rem;
  color: var(--ink-light);
  line-height: 1.5;
  margin: 0 0 6px;
}

.ec-apunte-date {
  font-family: 'Raleway', sans-serif;
  font-size: 0.62rem;
  color: #9a8c78;
}

/* ── CTA mid-feed ── */
.ec-infeed-cta {
  margin: 4px 0;
  border-left: 3px solid var(--cardinal);
  background: var(--parchment-mid);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.ec-infeed-cta-text {
  font-family: 'Playfair Display', serif;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink);
  flex: 1;
  line-height: 1.4;
  margin: 0;
}

.ec-infeed-cta-btn {
  background: var(--cardinal);
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 9px 15px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
}

.ec-infeed-cta-btn:hover { background: var(--cardinal-dark); color: #fff; }

/* ── Ver más / paginación del feed ── */
.ec-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ec-ver-mas {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cardinal);
  border: 1px solid var(--cardinal);
  padding: 8px 18px;
  margin-top: 22px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.ec-ver-mas:hover { background: var(--cardinal); color: #fff; }

/* ── Widgets de sidebar ── */
.ec-widget {
  background: var(--parchment-mid);
  border: 1px solid var(--rule);
  padding: 20px;
  margin-bottom: 22px;
}

.ec-widget-label {
  font-family: 'Raleway', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cardinal);
  font-weight: 700;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 14px;
}

/* Newsletter */
.ec-widget--nl {
  background: var(--cardinal-dark);
  border-color: var(--cardinal-dark);
}

.ec-widget--nl .ec-widget-label {
  color: rgba(255,255,255,0.55);
  border-bottom-color: rgba(255,255,255,0.15);
}

/* El contenido del formulario (titular, copia, campo, botón) lo inyecta el
   embed de MailerLite (ml-embedded[data-form]); su estilo se define en el
   editor de MailerLite, no aquí. Pendiente de revisar en navegador que su
   caja (clara) encaje sobre el fondo granate de .ec-widget--nl. */

/* Lo más leído */
.ec-top-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-light);
  align-items: baseline;
}

.ec-top-item:last-child { border-bottom: none; }

.ec-top-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--rule);
  font-weight: 700;
  flex-shrink: 0;
  width: 18px;
  line-height: 1;
}

.ec-top-title {
  font-size: 0.8rem;
  color: var(--ink);
  line-height: 1.4;
  text-decoration: none;
}

.ec-top-title:hover { color: var(--cardinal); }

/* Buscador (get_search_form() de GP: .search-form / .search-field / .search-submit) */
.ec-widget .search-form { display: flex; gap: 8px; }

.ec-widget .search-field {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: var(--parchment);
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  color: var(--ink);
}

.ec-widget .search-submit {
  background: var(--cardinal);
  color: #fff;
  border: none;
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
}

.ec-widget .search-submit:hover { background: var(--cardinal-dark); }

/* Suscripción (RSS + Telegram) */
.ec-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ec-sub-list li {
  padding: 7px 0;
  border-bottom: 1px solid var(--rule-light);
  font-size: 0.85rem;
}

.ec-sub-list li:last-child { border-bottom: none; }

.ec-sub-list a {
  color: var(--ink-mid);
  text-decoration: none;
}

.ec-sub-list a:hover { color: var(--cardinal); }

/* Libro */
.ec-widget--book { text-align: center; }

.ec-book-cover {
  width: 76px;
  height: 110px;
  background: linear-gradient(160deg, #1a1a08 0%, #3d3d18 60%, #2a2a10 100%);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.28);
  border-left: 4px solid var(--gold);
}

.ec-book-cover-text {
  color: rgba(255,255,255,0.72);
  font-family: 'Playfair Display', serif;
  font-size: 0.54rem;
  text-align: center;
  line-height: 1.5;
  padding: 6px;
  font-style: italic;
}

.ec-book-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.ec-book-sub {
  font-size: 0.74rem;
  color: var(--ink-light);
  margin: 0 0 12px;
  line-height: 1.45;
}

/* !important: fuera de portada esto vive dentro de #right-sidebar .widget,
   que tiene su propia regla "todo <a> es color cardinal" con un selector de
   ID — gana en especificidad a esta clase suelta pese a ser más concreta,
   dejando el texto del botón en rojo granate en vez del crema previsto
   (confirmado con captura real: "VER EN AMAZON" salía en rojo). */
.ec-book-btn {
  display: block;
  width: 100%;
  padding: 9px;
  background: var(--ink);
  color: #e8e0d0 !important;
  font-family: 'Raleway', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
}

.ec-book-btn:hover { background: var(--ink-mid); color: #fff !important; }

/* ── Tags del sidebar ── */
.ec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.ec-tag {
  font-family: 'Raleway', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mid);
  background: var(--parchment-dark);
  border: 1px solid var(--rule);
  padding: 4px 9px;
  text-decoration: none;
  line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
}

.ec-tag:hover {
  background: var(--cardinal);
  color: #fff;
  border-color: var(--cardinal);
}

/* ══ FOOTER ════════════════════════════════════════════════════════════════ */
.ec-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.55);
  font-family: 'Raleway', sans-serif;
  margin-top: 0;
}

.ec-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 24px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}

.ec-footer-col--brand { }

.ec-footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  line-height: 1.2;
  margin-bottom: 14px;
}

.ec-footer-tagline {
  font-size: 0.73rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.38);
  margin: 0;
  font-style: italic;
}

.ec-footer-heading {
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ec-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ec-footer-links li {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ec-footer-links li:last-child { border: none; }

.ec-footer-links a {
  color: rgba(255,255,255,0.6);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color .12s;
}

.ec-footer-links a:hover { color: rgba(255,255,255,0.95); }

.ec-footer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ec-footer-tag {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 4px 8px;
  text-decoration: none;
  transition: background .12s, color .12s;
}

.ec-footer-tag:hover {
  background: var(--cardinal);
  color: #fff;
  border-color: var(--cardinal);
}

.ec-footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.28);
  display: flex;
  gap: 10px;
  align-items: center;
}

.ec-footer-sep { color: rgba(255,255,255,0.18); }

/* ── Responsive básico ── */
@media (max-width: 1024px) {
  .ec-footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .ec-featured-grid    { grid-template-columns: 1fr; }
  .ec-content-row      { grid-template-columns: 1fr; gap: 32px; }
  .ec-fcard--main .ec-fcard-img { height: 160px; }
  .ec-footer-inner     { grid-template-columns: 1fr; gap: 28px; padding: 36px 20px 28px; }
}

/* Título de cabecera: en el hueco 900-1024px "EDICIONES CATÓLICAS" a 2.6rem
   con nowrap invade el menú de la derecha (confirmado por captura a 900px:
   la "S" final se solapa con la caja del menú). Se reduce antes de llegar
   a ese hueco. Por debajo de 600px el menú ya colapsa a hamburguesa, así
   que hay más margen otra vez, pero el título se sigue achicando para
   evitar que se corte en móviles estrechos (confirmado a 390px). */
@media (max-width: 1024px) {
  .main-title a { font-size: 2.1rem !important; letter-spacing: 0.02em !important; }
}
@media (max-width: 480px) {
  /* Margen de seguridad: a 1.9rem "EDICIONES CATÓLICAS" llegaba a 2-3px del
     borde en la captura a 390px — demasiado justo para fiarse de que otro
     navegador/dispositivo no lo corte. */
  .main-title a { font-size: 1.7rem !important; }
}
@media (max-width: 360px) {
  .main-title a { font-size: 1.5rem !important; }
}