/*
Theme Name:   Obituarios Theme
Theme URI:    https://obituarios.uy
Description:  Child theme de GeneratePress para obituarios.uy
Author:       Fernando Higa
Author URI:   https://obituarios.uy
Template:     generatepress
Version:      1.2.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  obituarios-theme
*/

/* ============================================
   VARIABLES — Paleta obituarios.uy v3
   ============================================ */
:root {
  /* Paleta nueva */
  --arena:   #DBBD92;
  --navy:    #28364D;
  --caoba:   #4A3020;
  --wengue:  #2E1F0F;
  --greige:  #CFCCB8;
  --dorado:  #F0B429;

  /* Compatibilidad hacia atrás — remapeados a v3 */
  --color-principal:   #4A3020;
  --color-oscuro:      #28364D;
  --color-fondo:       #28364D;
  --color-fondo-alt:   #1F2E42;

  /* Bloque de las tarjetas sin foto del fallecido (Inicio, Obituarios y
     Defunciones). Wengué → Caoba: los dos tonos más oscuros de la paleta.
     Se define UNA sola vez acá y las tres vistas lo consumen con
     var(--ph-sin-foto). Antes cada vista lo escribía por su cuenta y
     Defunciones había quedado con otro color. */
  --ph-sin-foto: linear-gradient(150deg, #2E1F0F 0%, #4A3020 100%);

  --color-texto:       #CFCCB8;
  --color-acento:      #DBBD92;
  --color-borde:       rgba(255,255,255,0.12);
  --color-texto-suave: rgba(207,204,184,0.75);

  /* Mantener */
  --fuente-base:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", sans-serif;
  --radio-borde:  4px;

  /* Radio propio de los ítems del menú — v1.5.5.
     Deliberadamente separado de --radio-borde, que usan siete elementos
     distintos (tarjetas, botones, cajas): subir aquel para suavizar el
     menú redondearía todo el sitio de golpe. Una necesidad local no se
     resuelve cambiando un token global.
     6px sobre un ítem de ~38px de alto se lee suave sin volverse cápsula.
     Para ajustarlo, se cambia acá y afecta a los tres estados a la vez. */
  --radio-nav:    6px;
  --sombra-suave: 0 2px 8px rgba(0,0,0,0.18);
}

/* ============================================
   LAZO DE MARCA EN TARJETAS SIN FOTO — v1.5.4

   El activo es child-theme/assets/images/lazo-tarjeta.webp y lo pinta el
   plugin (obit_lazo_tarjeta_html). El tamaño se declara UNA vez acá y no
   en cada vista: Inicio, Obituarios y Defunciones usan la misma clase.

   Se dimensiona en porcentaje del contenedor, que es cuadrado en las tres
   vistas pero de distinto ancho: así el lazo mantiene la misma proporción
   sin necesidad de una regla por breakpoint.

   v1.5.5 — CORRECCIÓN: este bloque se había insertado DENTRO de :root y
   partió la lista de variables al medio. Siete variables quedaron dentro
   de .obit-lazo-ph y dejaron de existir para el resto del sitio, entre
   ellas --radio-borde: por eso desaparecieron los bordes redondeados del
   menú. Cualquier regla nueva va DESPUÉS del cierre de :root.
   ============================================ */
.obit-lazo-ph {
  height: 45%;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ============================================
   BASE
   ============================================ */
html {
  background-color: var(--navy) !important;
}

body {
  font-family: var(--fuente-base);
  color: var(--color-texto);
  background-color: var(--navy) !important;
  line-height: 1.6;
}

/* ============================================
   GENERATEPRESS — contenedores transparentes
   El Customizer de GP genera fondos blancos que
   pisan al child theme. Se fuerzan transparentes
   para que las secciones se apoyen sobre el navy.
   ============================================ */
#page,
.site,
.site-container,
.hfeed,
.grid-container,
.site-content,
.content-area,
.site-main,
.inside-article,
.separate-containers .inside-article,
.separate-containers .site-main,
.one-container .site-content,
.page .inside-article,
.single .inside-article {
  background-color: transparent !important;
}

/* Barra inferior de copyright de GeneratePress */
.site-info {
  background-color: var(--wengue) !important;
  color: rgba(207,204,184,0.6) !important;
}
.site-info a {
  color: var(--arena) !important;
}

a { color: var(--arena); text-decoration: none; }
a:hover { color: var(--greige); text-decoration: underline; }

/* ============================================
   LAYOUT
   ============================================ */
.page-template-default .inside-article,
.page .inside-article { max-width: 100%; }

.widget-area, #sidebar { display: none; }

.site-main, #primary, .content-area {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* GeneratePress anida dos .site-content. Confirmado en DOM: el interno
   (el que está dentro del externo) es flex pero su hijo no crece, dejando
   espacio vacío a la derecha en desktop. Se le fuerza flex-grow al interno
   y a su content-area. El externo NO lo necesita. */
.site-content .site-content {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
.site-content #primary,
.site-content .content-area,
.site-content .site-main {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

#page {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================
   HEADER — Arena con logo y nav en Caoba
   ============================================ */
.site-header,
#site-header,
.header-widget {
  background-color: #DBBD92 !important;
  border-bottom: 3px solid #4A3020;
  border-radius: 0 0 14px 14px;
}

.site-header .site-title a,
.site-branding .site-title a,
.site-header .main-title a,
.site-branding .main-title a,
.main-title a {
  color: #4A3020 !important;
  /* v1.26.3 — Cinzel en MAYÚSCULAS para el logo.
     ⚠ El selector incluye .main-title además de .site-title: GeneratePress
     marca el título del sitio con .main-title, y una regla escrita solo
     contra .site-title no coincide con nada. Ese fue el motivo por el que
     el primer intento no cambió el logo aunque el CSS sí se desplegaba. La minúscula de Cinzel es
     despareja: la tipografía está basada en inscripciones romanas y da lo
     mejor de sí en caja alta. El text-transform lo resuelve por CSS, sin
     tocar el texto del sitio: quien copie el nombre o lo lea con un lector
     de pantalla sigue recibiendo "obituarios.uy" tal como está escrito.
     El letter-spacing compensa el encaje apretado de las capitales. */
  font-family: var(--fuente-logo, Georgia, serif);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  font-size: 1.4rem;
}

.site-header .site-title a:hover,
.site-header .main-title a:hover,
.main-title a:hover {
  color: #4A3020 !important;
  opacity: 0.85;
  text-decoration: none;
}

/* ============================================
   HEADER MÓVIL — posición del botón de menú — v1.5.9

   Síntoma: en Firefox el botón hamburguesa caía a una segunda línea;
   en Chrome no. Umbral medido: se rompe en 386px de ancho y funciona
   en 387px. Un solo píxel de diferencia.

   Medición real a 386px:
     disponible tras el padding ....... 326
     marca (logo 100 + título 155) .... 272
     botón ............................  55
     necesario ........................ 327   ← falta 1px

   Causa: NO es el navegador. El header se lleva 30px de padding a cada
   lado — 60 de 386, el 16% de la pantalla. Con un margen de un píxel,
   la diferencia entre cómo Chrome y Firefox redondean el ancho del
   título alcanza para que uno entre y el otro no.

   La v1.5.8 intentó arreglarlo con min-width:0 solo en el contenedor
   exterior y no alcanzó, por dos motivos:
     · el mínimo automático se hereda hacia adentro, así que hay que
       liberarlo en toda la cadena, no solo afuera;
     · `flex: 1 1 auto` hacía que la marca se estirara a los 326px
       completos (su contenido son 272), dejando al botón sin espacio
       propio y anulando el margin-left:auto.

   Este arreglo ataca el ancho, que es lo que falta de verdad: recupera
   28px de padding y 24px de logo. El requerimiento baja de 327 a ~303 y
   en una pantalla de 360px quedan ~25px de margen en lugar de faltar 1.
   Por debajo de 320px el título pasa a dos líneas antes de que el botón
   se vaya abajo, que es la degradación deseable.
   ============================================ */
@media (max-width: 1024px) {

  .site-header .inside-header {
    align-items: center;
  }

  /* 0 1 auto: ocupa lo suyo y puede ceder, pero NO se estira.
     min-width:0 en toda la cadena — el mínimo automático se hereda
     hacia los hijos y basta con que uno lo conserve para bloquear al
     conjunto. */
  .site-header .site-branding-container,
  .site-header .site-branding,
  .site-header .main-title {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* El logo nunca cede: se achica por regla, no por presión. */
  .site-header .site-logo {
    flex: 0 0 auto;
  }

  /* Tamaño fijo y siempre pegado a la derecha. */
  .site-header .mobile-menu-control-wrapper {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* Pantallas de teléfono: se recupera el ancho que hoy se va en aire
   lateral y en un logo pensado para escritorio. 30px de padding a cada
   lado en un teléfono aprietan el contenido sin aportar nada. */
@media (max-width: 480px) {

  .site-header .inside-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .site-header .site-logo .header-image,
  .site-header .header-image.is-logo-image {
    width: 76px !important;
    height: auto !important;
  }
}

/* ============================================
   NAVEGACIÓN
   ============================================ */
.main-navigation,
.nav-primary,
#site-navigation {
  background-color: #DBBD92 !important;
}

.main-navigation a,
.nav-primary a,
.main-navigation ul li a {
  color: #4A3020 !important;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.5rem 1rem; /* desktop: sin cambios */
}

/* Mobile + tablet (≤1024px): separación vertical entre los ítems del menú
   hamburguesa. El problema NO era la altura del relleno sino la falta de
   espacio entre ítems: el borde de "Publicar Obituario" tocaba los rellenos
   de "Novedades" (arriba) y "Foro Comunitario" (abajo). El margin vertical
   entre cada <li> los separa claramente. */
@media (max-width: 1024px) {
  .main-navigation .main-nav ul li,
  .nav-primary .main-nav ul li,
  .main-navigation .menu-item,
  .nav-primary .menu-item {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  /* Padding vertical un poco más compacto para que el relleno no crezca de más */
  .main-navigation a,
  .nav-primary a,
  .main-navigation ul li a,
  .main-navigation .main-nav ul li a,
  .nav-primary .main-nav ul li a,
  .main-navigation .menu-item > a,
  .nav-primary .menu-item > a {
    padding-top: 0.38rem !important;
    padding-bottom: 0.38rem !important;
    /* +0.325rem a la izquierda compensa el borde 2px + padding mayor de
       "Publicar Obituario", para que TODOS los textos queden alineados */
    padding-left: 1.325rem !important;
  }
}

/* ============================================
   BOTÓN DE MENÚ MÓVIL (hamburguesa) — ≤1024px

   El botón se veía en un arena distinto al del header. Causa: el color
   estaba definido en DOS lugares. Este archivo fuerza #DBBD92 sobre
   .site-header y .main-navigation, pero nunca sobre .menu-toggle, que es
   un <button> y no un <a> — así que ese elemento seguía tomando el color
   de fondo de navegación del Customizer de GeneratePress, con otro valor.

   La corrección es declararlo acá, para que el child theme sea la única
   fuente de verdad de los colores del header. Igual conviene alinear el
   valor del Customizer (ver nota en la bitácora): mientras difieran, la
   vista previa del Customizer va a mostrar algo distinto al sitio real.

   Nota de marca: el Arena del header es #DBBD92 (Manual de Marca v1.1,
   paleta). #C5A97A es "Arena oscura" y está reservado al hover del botón
   Publicar Obituario — no es el color del header.
   ============================================ */
.menu-toggle,
button.menu-toggle,
.main-navigation .menu-toggle,
.main-navigation.toggled .menu-toggle,
.main-navigation .mobile-bar-items {
  background-color: var(--arena, #DBBD92) !important;
  color: #4A3020 !important;
}

.menu-toggle:hover,
button.menu-toggle:hover,
.main-navigation .menu-toggle:hover,
.menu-toggle:active,
.main-navigation .menu-toggle:active,
.menu-toggle:focus,
.main-navigation .menu-toggle:focus {
  background-color: var(--arena, #DBBD92) !important;
  color: #4A3020 !important;
}

/* El ícono se hereda por currentColor en GeneratePress, pero algunas
   versiones lo pintan aparte — se fuerza por las dudas. */
.menu-toggle .gp-icon,
.menu-toggle .gp-icon svg,
.main-navigation .menu-toggle .gp-icon svg {
  fill: #4A3020 !important;
  color: #4A3020 !important;
}

/* Foco visible por teclado. GeneratePress apaga el outline nativo y sin
   esto el botón queda sin ninguna señal al navegar con Tab. Se usa
   :focus-visible para que el anillo NO aparezca al tocarlo con el dedo. */
.menu-toggle:focus-visible,
.main-navigation .menu-toggle:focus-visible {
  outline: 2px solid #4A3020 !important;
  outline-offset: -4px;
}

/* ── Hover — v1.5.5 ──────────────────────────────────────────
   Este estado no declaraba border-radius, así que el resaltado salía
   como un rectángulo duro mientras el ítem activo tenía las esquinas
   suaves: la forma le cambiaba al usuario al pasar el cursor. Ahora los
   tres estados (hover, activo y el botón Publicar) comparten
   --radio-nav, y la transición evita el salto seco de color. */
.main-navigation a:hover,
.nav-primary a:hover,
.main-navigation ul li a:hover {
  color: #4A3020 !important;
  background-color: rgba(74,48,32,0.12) !important;
  border-radius: var(--radio-nav) !important;
  text-decoration: none;
}

/* La transición va en el estado base, no en :hover, para que el color
   también se atenúe al SALIR del ítem y no solo al entrar. */
.main-navigation a,
.nav-primary a,
.main-navigation ul li a {
  transition: background-color .18s ease, color .18s ease !important;
}

/* Foco visible por teclado. GeneratePress apaga el outline nativo y sin
   esto no hay ninguna señal al navegar con Tab. :focus-visible evita que
   el anillo aparezca al hacer clic con el mouse. */
.main-navigation a:focus-visible,
.nav-primary a:focus-visible,
.main-navigation ul li a:focus-visible {
  outline: 2px solid #4A3020 !important;
  outline-offset: -2px;
  border-radius: var(--radio-nav) !important;
}

.main-navigation .current-menu-item > a,
.nav-primary .current-menu-item > a {
  background-color: #4A3020 !important;
  color: #DBBD92 !important;
  border-radius: var(--radio-nav) !important;
  border: none !important;
  /* Mismo margin lateral que "Publicar Obituario" (0.3rem) para que el
     relleno activo arranque y termine en la misma posición horizontal
     que el borde/relleno de Publicar */
  margin-left: 0.3rem !important;
  margin-right: 0.3rem !important;
}

.main-navigation ul ul {
  background-color: #4A3020 !important;
}

.main-navigation ul ul a {
  color: #DBBD92 !important;
}

/* ============================================
   BOTÓN PUBLICAR OBITUARIO — 3 estados
   Problema anterior: outline Arena sobre fondo Arena = invisible.
   ============================================ */

/* ── Default: Arena (igual que header) + borde Caoba que lo hace visible ── */
.main-navigation .menu-item a[href*="publicar-obituario"],
.nav-primary .menu-item a[href*="publicar-obituario"],
.nav-publicar a,
.btn-publicar,
.button-publicar {
  background-color: #DBBD92 !important;
  color: #4A3020 !important;
  border-radius: var(--radio-nav) !important;
  padding: 0.4rem 1.2rem !important;
  font-weight: 700 !important;
  margin: 6px 0.3rem !important;
  border: 2px solid #4A3020 !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* ── Hover (no activo): Arena oscurecida — coherente con el oscurecimiento
   de los otros ítems del menú al pasar el cursor ── */
.main-navigation .menu-item a[href*="publicar-obituario"]:hover,
.nav-publicar a:hover,
.btn-publicar:hover,
.button-publicar:hover {
  background-color: #C5A97A !important;
  color: #4A3020 !important;
  border: 2px solid #4A3020 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* ── Activo/Seleccionado (página /publicar-obituario/ actual):
   Colores invertidos + paspartú doble:
   [borde interno Arena] + [relleno Caoba = fondo] + [borde externo Arena]
   Técnica idéntica al marco de la ficha de obituario. ── */
.main-navigation .current-menu-item a[href*="publicar-obituario"],
.main-navigation .current_page_item a[href*="publicar-obituario"],
.nav-primary .current-menu-item a[href*="publicar-obituario"] {
  background-color: #4A3020 !important;
  color: #DBBD92 !important;
  border: 1.5px solid #DBBD92 !important;
  box-shadow: 0 0 0 3.5px #4A3020, 0 0 0 5.5px #DBBD92 !important;
  margin: 8px 0.3rem !important;
}

/* ── Hover sobre el ítem activo: Caoba levemente más claro, mantiene paspartú ── */
.main-navigation .current-menu-item a[href*="publicar-obituario"]:hover,
.main-navigation .current_page_item a[href*="publicar-obituario"]:hover,
.nav-primary .current-menu-item a[href*="publicar-obituario"]:hover {
  background-color: #5C3C28 !important;
  color: #DBBD92 !important;
  border: 1.5px solid #DBBD92 !important;
  box-shadow: 0 0 0 3.5px #5C3C28, 0 0 0 5.5px #DBBD92 !important;
  text-decoration: none !important;
}

/* ============================================
   CONTENIDO PRINCIPAL
   ============================================ */
.site-main {
  background-color: #28364D;
}

h1, h2, h3, h4, h5, h6 {
  color: #FFFFFF;
  font-weight: 700;
}

h2.section-title,
.page-header .entry-title,
.entry-header .entry-title {
  border-bottom: 2px solid #DBBD92;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  color: #FFFFFF;
}

/* ============================================
   TARJETAS — Obituarios (grid)
   Fondo blanco sobre body navy
   ============================================ */
.obituario-card {
  background: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.obituario-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

.obituario-card .card-imagen {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background-color: #e8e4dc;
}

.obituario-card .card-fecha {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 0.25rem;
}

.obituario-card .card-nombre {
  font-weight: 700;
  font-size: 1rem;
  color: #1A1A1A;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.obituario-card .card-extracto {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
}

/* Botón de tarjeta — Navy con texto Arena */
.obituario-card .card-btn {
  display: inline-block;
  background-color: #28364D;
  color: #DBBD92;
  padding: 0.4rem 1rem;
  border-radius: var(--radio-borde);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.75rem;
  transition: background-color 0.2s ease;
}

.obituario-card .card-btn:hover {
  background-color: #4A3020;
  text-decoration: none;
  color: #DBBD92;
}

/* ============================================
   TABLA — Defunciones (style.css level)
   ============================================ */
.tabla-defunciones {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabla-defunciones thead {
  background-color: rgba(255,255,255,0.07);
}

.tabla-defunciones thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #DBBD92;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Filas alternadas: blanco / beige sutil */
.tabla-defunciones tbody tr:nth-child(odd) td  { background: #FFFFFF; }
.tabla-defunciones tbody tr:nth-child(even) td { background: #F5F2EC; }
.tabla-defunciones tbody tr:hover td { background: #C4BFA9 !important; }

.tabla-defunciones tbody td {
  padding: 0.6rem 1rem;
  color: #333;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* ============================================
   BUSCADOR
   ============================================ */
.buscador-wrap {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.buscador-wrap input[type="text"],
.buscador-wrap input[type="search"] {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: var(--radio-borde);
  font-size: 0.95rem;
  color: var(--greige);
  background: rgba(255,255,255,0.06);
  transition: border-color 0.2s ease;
}

.buscador-wrap input:focus {
  outline: none;
  border-color: #DBBD92;
  box-shadow: 0 0 0 3px rgba(219,189,146,0.2);
}

.buscador-wrap button,
.buscador-wrap input[type="submit"] {
  background-color: #DBBD92;
  color: #4A3020;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radio-borde);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  transition: background-color 0.2s ease;
}

.buscador-wrap button:hover,
.buscador-wrap input[type="submit"]:hover {
  background-color: #CFCCB8;
}

/* ============================================
   FOOTER — Wengué
   ============================================ */
.site-footer {
  background-color: #2E1F0F !important;
  color: #CFCCB8 !important;
  padding: 2rem 0;
  font-size: 0.9rem;
  border-top: 2px solid rgba(219,189,146,0.25);
}

.site-footer a { color: rgba(207,204,184,0.75); }
.site-footer a:hover { color: #DBBD92; text-decoration: underline; }

.site-footer .widget-title {
  color: #DBBD92 !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.9rem;
}

.site-footer .widget ul { list-style: none; margin: 0; padding: 0; }
.site-footer .widget ul li { margin-bottom: 0.5rem; }

/* v1.2.2 — Footer centrado en celulares (≤640px).
   En escritorio las columnas de widgets van una al lado de otra y el
   alineado a la izquierda las mantiene ordenadas en una retícula. En el
   teléfono esas columnas se apilan a ancho completo y el texto queda
   pegado al borde izquierdo con un vacío grande a la derecha; centrado
   se lee como un cierre de página.
   ⚠ Si algún widget del pie tiene un párrafo largo, centrarlo empeora la
   lectura. En ese caso, excluirlo con:
       @media (max-width:640px) { .site-footer .widget p { text-align:left; } }
   El contenido del pie vive en los widgets de WordPress, no en el
   repositorio, así que esto hay que mirarlo en pantalla. */
@media (max-width: 640px) {
  .site-footer { text-align: center; }
  .site-footer .widget ul { padding-left: 0; }
}

/* ============================================
   FORMULARIO
   ============================================ */
.form-obituario input[type="text"],
.form-obituario input[type="email"],
.form-obituario textarea,
.form-obituario select {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: var(--radio-borde);
  font-size: 0.95rem;
  color: #333;
  background: #FFFFFF;
  transition: border-color 0.2s ease;
  margin-bottom: 1rem;
}

.form-obituario input:focus,
.form-obituario textarea:focus,
.form-obituario select:focus {
  outline: none;
  border-color: #DBBD92;
  box-shadow: 0 0 0 3px rgba(219,189,146,0.2);
}

.form-obituario label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #FFFFFF;
  display: block;
  margin-bottom: 0.25rem;
}

/* ============================================
   BADGES
   ============================================ */
.badge-gratuito {
  background-color: rgba(255,255,255,0.1);
  color: #CFCCB8;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-weight: 500;
}

.badge-premium {
  background-color: #FFF8E1;
  color: #7B4F00;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid #F0B429;
}

/* ============================================
   PLACEHOLDER LAZO
   ============================================ */
.lazo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,0.05);
  color: #DBBD92;
  font-size: 2.5rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .grid-obituarios { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .grid-obituarios { grid-template-columns: 1fr; }
  .tabla-defunciones { font-size: 0.8rem; }
}

/* ============================================
   FICHA — Overrides sobre nuevo fondo navy
   ============================================ */
.obit-ficha-breadcrumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 6px 12px !important;
  display: inline-flex !important;
  margin-bottom: 16px !important;
}

.obit-ficha-breadcrumb a {
  color: #DBBD92 !important;
  text-decoration: none;
  font-weight: 500;
}

.obit-ficha-breadcrumb a:hover {
  text-decoration: underline;
  color: #CFCCB8 !important;
}

.obit-ficha-breadcrumb span {
  color: rgba(207,204,184,0.6) !important;
}

.obit-ficha-volver a {
  background: rgba(255,255,255,0.12) !important;
  color: #DBBD92 !important;
  border-color: rgba(219,189,146,0.4) !important;
  font-weight: 600;
}

.obit-ficha-volver a:hover {
  background: rgba(219,189,146,0.15) !important;
  color: #DBBD92 !important;
  text-decoration: none !important;
}

.obit-ficha-separador {
  color: rgba(207,204,184,0.5) !important;
  letter-spacing: 12px;
}

.obit-condolencias-inline h3,
.obit-condolencias-inline .obit-condolencias-titulo {
  color: #FFFFFF !important;
  border-bottom-color: rgba(255,255,255,0.15) !important;
}

.obit-ficha-relacionados h3 {
  color: #FFFFFF !important;
  border-bottom-color: rgba(255,255,255,0.2) !important;
}

.obit-ficha-relacionados > h3 {
  color: #FFFFFF !important;
}

/* ============================================
   ENTRADAS — sección "Acerca del Duelo"
   ============================================
   Fondo #424E62 (el mismo relleno de los botones de navegación, ya en la
   paleta) con texto en Crema #F5F2EB y acentos en Arena. Los colores van
   con !important porque GeneratePress los define desde el Customizer y
   pisa al child theme — mismo patrón ya usado en los botones de compartir
   de la ficha. Sin esto el texto queda oscuro sobre fondo oscuro.
   ============================================ */

/* ── Contenedor del artículo (listado e individual) ─────────── */
body.single-post .inside-article,
body.blog .inside-article,
body.archive .inside-article {
  background: #424E62 !important;
  border-radius: 12px;
  padding: 34px 38px;
  box-shadow: var(--sombra-suave);
}

/* Ancho de línea acotado (~68 caracteres): a todo el ancho el ojo pierde
   el renglón al volver, sobre todo en textos largos. */
.single-post .entry-header,
.single-post .entry-content {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── Título del artículo — Crema, con línea Arena debajo ────── */
.single-post .entry-title,
.single-post .entry-title a,
.blog .entry-title,
.blog .entry-title a,
.archive .entry-title,
.archive .entry-title a {
  color: #F5F2EB !important;
}
.blog .entry-title a:hover,
.archive .entry-title a:hover { color: #DBBD92 !important; }

.single-post .entry-header .entry-title,
.blog .entry-header .entry-title,
.archive .entry-header .entry-title {
  border-bottom: 1px solid #DBBD92;
  padding-bottom: 10px;
}

/* ── Subtítulos dentro del artículo — Crema ─────────────────── */
.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4 {
  color: #F5F2EB !important;
}
/* v1.2.3 — Suben con el cuerpo: con el texto en 20px, un h3 de 20px
   dejaba de distinguirse del párrafo que encabeza. */
.single-post .entry-content h2 { font-size: 30px; margin: 2em 0 0.6em; }
.single-post .entry-content h3 { font-size: 23px; margin: 1.6em 0 0.5em; }

/* ── Cuerpo de texto — Crema, cuerpo ampliado ───────────────── */
.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-content li,
.blog .entry-summary,
.blog .entry-summary p,
.archive .entry-summary,
.archive .entry-summary p {
  color: #F5F2EB !important;
  /* v1.2.3 — 17px → 20px. Es texto corrido largo para un público
     mayoritariamente adulto mayor: las pautas piden 17-18px mínimo, y en
     lectura sostenida 20px se agradece. Alcanza a las entradas completas
     y a los resúmenes del listado de Acerca del duelo. */
  font-size: 20px;
  line-height: 1.75;
}
.single-post .entry-content p { margin-bottom: 1.15em; }
.single-post .entry-content ul,
.single-post .entry-content ol { margin: 0 0 1.15em 1.4em; }
.single-post .entry-content li { margin-bottom: 0.5em; }

/* ── Enlaces del texto y "Leer más" — Arena ─────────────────── */
.single-post .entry-content a,
.blog .entry-summary a,
.archive .entry-summary a,
.blog .read-more,
.archive .read-more,
.more-link {
  color: #DBBD92 !important;
  text-decoration: underline;
}
/* v1.2.3 — "Leer más" no declaraba tamaño y heredaba el del contenedor,
   que cambia según dónde caiga en el markup. Se le fija uno propio. */
.blog .read-more, .archive .read-more, .more-link { font-size: 18px; }

/* ══ v1.2.4 — TODA LA TARJETA DEL LISTADO ES CLICABLE ═════════════════
   Misma técnica que las tarjetas de la portada (plugin v1.36.0): se estira
   el enlace que ya existe en el título mediante un pseudo-elemento que
   cubre el artículo entero. No se envuelve nada en un <a> —adentro ya hay
   enlaces y anidarlos es HTML inválido— ni se usa JavaScript, que no
   permitiría abrir en pestaña nueva.
   Google ve exactamente los mismos enlaces que antes: no se agrega ni se
   quita ninguno.
   Los enlaces que deben seguir teniendo vida propia —la fecha, el autor,
   las categorías y el "Leer más"— se levantan por encima de la capa.
   ⚠ El texto del resumen deja de poder seleccionarse con el mouse dentro
   de la tarjeta. Es un extracto recortado; el área de toque vale más para
   un público adulto mayor. */
.blog .inside-article,
.archive .inside-article { position: relative; }

.blog .entry-title a::after,
.archive .entry-title a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}

.blog .entry-meta, .blog .entry-meta a,
.archive .entry-meta, .archive .entry-meta a,
.blog .read-more, .archive .read-more, .more-link,
.blog .post-image a, .archive .post-image a { position: relative; z-index: 2; }

.blog .inside-article:focus-within,
.archive .inside-article:focus-within {
  outline: 2px solid #DBBD92;
  outline-offset: 2px;
}
.single-post .entry-content a:hover,
.blog .entry-summary a:hover,
.more-link:hover { color: #FFFFFF !important; }

/* ── Fecha, autor, categorías y comentarios ─────────────────── */
.single-post .entry-meta,
.blog .entry-meta,
.archive .entry-meta {
  color: #F5F2EB !important;
  font-size: 16px; /* v1.2.3 — era 14px */
}
.single-post .entry-meta a,
.blog .entry-meta a,
.archive .entry-meta a { color: #DBBD92 !important; }
.single-post .entry-meta a:hover,
.blog .entry-meta a:hover,
.archive .entry-meta a:hover { color: #FFFFFF !important; }
/* Íconos de categoría y comentarios en Crema (GeneratePress los pinta con SVG) */
.single-post .entry-meta .gp-icon svg,
.blog .entry-meta .gp-icon svg,
.archive .entry-meta .gp-icon svg,
.single-post .entry-meta svg,
.blog .entry-meta svg,
.archive .entry-meta svg { fill: #F5F2EB !important; }

/* ── Separadores horizontales — Arena ───────────────────────── */
.single-post hr,
.blog hr,
.archive hr,
.single-post .entry-content hr {
  border: 0 !important;
  border-top: 1px solid #DBBD92 !important;
  margin: 2em 0;
  background: none;
  height: 0;
}

/* ── Caja "Deja un comentario" — fondo Arena, texto negro carbón ── */
.single-post .comments-area {
  background: #DBBD92 !important;
  border-radius: 12px;
  padding: 28px 30px;
  margin-top: 28px;
}
.single-post .comments-area,
.single-post .comments-area p,
.single-post .comments-area label,
.single-post .comments-area h2,
.single-post .comments-area h3,
.single-post .comment-reply-title,
.single-post .comment-notes,
.single-post .logged-in-as { color: #1A1A1A !important; }

.single-post .comments-area a { color: #1A1A1A !important; text-decoration: underline; }
.single-post .comments-area a:hover { color: #4A3020 !important; }

/* Caja de texto gris claro */
.single-post .comments-area textarea,
.single-post .comments-area input[type="text"],
.single-post .comments-area input[type="email"],
.single-post .comments-area input[type="url"] {
  background: #F1F1F1 !important;
  color: #1A1A1A !important;
  border: 1px solid #D0D0D0 !important;
  border-radius: 6px;
}

/* Botón "Publicar comentario" — mismos valores que "Descargar PDF":
   relleno #424E62, texto Arena, borde translúcido, hover Caoba.
   line-height:1 es obligatorio, sin él el texto baja ~5px del centro óptico. */
.single-post .comments-area input[type="submit"],
.single-post .comments-area .submit {
  background: #424E62 !important;
  color: #DBBD92 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 4px;
  line-height: 1 !important;
  padding: 12px 22px;
  font-weight: 600;
}
.single-post .comments-area input[type="submit"]:hover,
.single-post .comments-area .submit:hover {
  background: #4A3020 !important;
  color: #DBBD92 !important;
}

@media (max-width: 600px) {
  body.single-post .inside-article,
  body.blog .inside-article,
  body.archive .inside-article { padding: 22px 18px; }
  /* ⚠ v1.2.3 — ACÁ HABÍA UN ACHIQUE, NO UN MÍNIMO.
     El comentario decía "16px mínimo", pero la base era 17px: esta regla
     con !important dejaba el cuerpo MÁS CHICO en el teléfono que en
     escritorio, justo donde entra el 81% del tráfico. Es el error de los
     cinco tramos en su forma invertida.
     Se elimina el font-size: el cuerpo toma los 20px de la base en todos
     los tramos. Se conserva el ajuste del h2, que sí es deliberado —un
     encabezado de 30px en un teléfono de 360px ocupa demasiado. */
  .single-post .entry-content h2 { font-size: 24px; }

  /* v1.2.3 — Títulos de entrada centrados solo en celulares. En el listado
     de Acerca del duelo cada tarjeta ocupa el ancho completo y el título
     alineado a la izquierda deja un vacío grande a la derecha cuando la
     última línea es corta. El filete Arena de debajo sigue a ancho
     completo. No se toca el título de la entrada abierta (.single-post):
     ahí es el H1 de la página y la lectura arranca justo debajo. */
  .blog .entry-title,
  .blog .entry-title a,
  .archive .entry-title,
  .archive .entry-title a { text-align: center; display: block; }
  .single-post .comments-area { padding: 20px 18px; }
}