/* assets/css/style.css */
:root {
    --cf-verde: #1f3d2e;
    --cf-dorado: #c9a24b;
    --cf-crema: #f7f4ee;
    --cf-texto: #2a2a2a;
}
body {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--cf-texto);
    background: var(--cf-crema);
    margin: 0;
}
h1, h2, h3, .navbar-brand {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--cf-verde);
}
.navbar { background: var(--cf-verde); padding: 14px 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.navbar a, .navbar .navbar-brand { color: var(--cf-crema) !important; text-decoration: none; }
.navbar .navbar-brand { font-size: 1.3em; margin-right: auto; order: 1; display: flex; align-items: center; gap: 10px; }
.navbar .navbar-brand img { display: block; width: 38px; height: 38px; flex-shrink: 0; }
.navbar .nav-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    border: white 2px solid;
}
.navbar .nav-whatsapp svg { fill: var(--cf-crema); flex-shrink: 0; }
/* orden por defecto (escritorio): igual que el marcado original — marca, los 3 enlaces, WhatsApp,
todo en una sola línea. .navbar-break solo se activa por debajo del breakpoint móvil. Regla aparte
(no dentro de ".navbar .nav-whatsapp" de arriba) para mantener esa posición en escritorio tras
quitar el "order: 3;" que llevaba ahí — si no, al no tener order explícito (por defecto 0) el botón
saltaría delante de la marca (order:1), que es más a la izquierda. */
.navbar .nav-whatsapp { order: 3; }
.navbar-link { order: 2; }
/* Enlace "Floristería" con aspecto de botón (petición del usuario), en escritorio Y en móvil —
regla sin media query a propósito. Especificidad ".navbar .navbar-link-floristeria" (2 clases)
necesaria para ganarle al !important de ".navbar a" (texto crema) y, en móvil, al !important de
".navbar .navbar-link" (texto verde) — ver comentarios de esas reglas más abajo. */
.navbar .navbar-link-floristeria {
    background: #48fa0e;
    color: var(--cf-verde) !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: bold;
}
.navbar-break { display: none; order: 4; flex-basis: 100%; height: 0; }
@media (max-width: 800px) {
    /* Móvil (petición del usuario): título + botón de WhatsApp en la primera fila (WhatsApp a la
    derecha), los 3 enlaces de navegación debajo en una segunda fila, centrados y con forma de
    botón (fondo blanco, letras verdes en negrita, igual que los demás botones-píldora del
    sitio). Padding/gap reducidos para que la cabecera no quede tan alta. */
    .navbar { padding: 10px 16px; gap: 10px 14px; justify-content: center; }
    .navbar .navbar-brand { margin-right: 0; }
    .navbar .nav-whatsapp { order: 2; margin-left: auto; }
    .navbar-break { display: block; order: 3; }
    .navbar-link {
        order: 4;
        background: #fff;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 6px;
        font-size: 14px;
    }
    /* Especificidad ".navbar .navbar-link" (2 clases) a propósito: tiene que ganarle a la regla
    base ".navbar a" (1 clase + 1 elemento), que también lleva !important — con solo ".navbar-link"
    (1 clase) pierde el empate de especificidad y el texto se queda del color de fondo (crema). */
    .navbar .navbar-link { color: var(--cf-verde) !important; }
    /* "Floristería" en móvil: mismas dimensiones que los otros 2 botones (petición del usuario) —
    solo el color de fondo/texto lo distingue, no el tamaño. En escritorio conserva su propio
    padding/border-radius (6px 14px / 20px) de la regla sin media query de más arriba. */
    .navbar .navbar-link-floristeria { padding: 2px 6px; border-radius: 6px; font-size: 14px; }
    /* Cabecera fija arriba al hacer scroll, solo en móvil. */
    .navbar { position: sticky; top: 0; z-index: 500; }
    /* Selector de orden de las grids de flores (precio/popularidad/etc.), centrado en su propia
    fila — margin:auto en un elemento flex se centra dentro del espacio libre de esa línea sin
    afectar a los botones de categoría, que van en su propia línea aparte. */
    .grid-orden { margin: 0 auto; }
}

#wa-widget { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: Georgia, 'Times New Roman', serif; }
#wa-widget-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#wa-widget-btn svg { fill: #fff; }
#wa-widget-box {
    position: absolute;
    bottom: 68px;
    right: 0;
    width: 300px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    overflow: hidden;
}
.wa-widget-header {
    background: var(--cf-verde);
    color: var(--cf-crema);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wa-widget-header button { background: none; border: none; color: var(--cf-crema); font-size: 1.3em; cursor: pointer; line-height: 1; padding: 0; }
.wa-widget-body { padding: 16px; font-size: 0.9em; line-height: 1.5; color: var(--cf-texto); }
.wa-widget-send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25d366;
    color: #fff !important;
    text-decoration: none;
    padding: 12px;
    font-weight: bold;
}
.wa-widget-send svg { fill: #fff; }
@media (max-width: 480px) {
    #wa-widget-box { right: -4px; }
}
.btn-dorado {
    background: var(--cf-dorado);
    color: var(--cf-verde);
    border: none;
    padding: 12px 24px;
    font-weight: bold;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}
/* El fondo es un derivado JPG de assets/images/coronasflores.png, no el original: el PNG pesa
   1,7 MB y este hero es el LCP de la home, así que servirlo tal cual costaría más de un segundo de
   render en móvil. El JPG a calidad 82 da los mismos 1920x819 en 163 KB. El original se conserva
   como fuente de la que salen este recorte y el de og-default.jpg.
   El verde sólido se mantiene como color de respaldo: si la foto tarda o falla, el hero sigue
   siendo el mismo bloque verde de siempre y el texto crema nunca se queda sin contraste. */
.hero {
    position: relative;
    background: var(--cf-verde) url('/assets/images/hero-fondo.jpg') 30% center / cover no-repeat;
    color: var(--cf-crema);
    padding: 60px 20px;
    text-align: center;
}
/* Velo sobre la foto. Sin él el texto crema pierde contraste contra las zonas claras de la corona
   (los claveles blancos y la cinta). El degradado se abre por la izquierda, que es donde la foto
   tiene la corona, y se cierra hacia el centro y la derecha, que es por donde cae el texto. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(31, 61, 46, 0.55) 0%,
        rgba(31, 61, 46, 0.88) 40%,
        rgba(31, 61, 46, 0.92) 100%);
    pointer-events: none;
}
/* El contenido por encima del velo. Sin esto el ::after lo taparía y además se comería los clics
   del buscador de provincias. */
.hero > * { position: relative; z-index: 1; }
/* En móvil el recorte de `cover` es tan estrecho que centrado solo se ve la franja verde de la
   foto y la corona desaparece. Se desplaza el encuadre hacia ella y el velo pasa a ser uniforme:
   el degradado horizontal no tiene sentido cuando el texto ocupa todo el ancho. */
@media (max-width: 700px) {
    .hero { background-position: 22% center; }
    .hero::after { background: rgba(31, 61, 46, 0.8); }
}
/* El buscador del hero: el <select> heredaba la altura por defecto del navegador y quedaba más
   bajo que el botón de al lado. Se igualan por el mismo padding vertical y tipografía, y se
   alinean por su centro. */
.hero form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
}
.hero form select {
    padding: 12px 14px;
    border: none;
    border-radius: 4px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1em;
    color: var(--cf-texto);
    background: #fff;
    min-width: 240px;
}
/* inline-block (no inline): desde que el texto lo calcula cf_calcular_entrega() la etiqueta
   puede ser larga ("Entrega mañana entre las 10 y 12h") y en inline se partía en dos líneas
   rompiendo el fondo dorado y desbordando la tarjeta. Como bloque, el texto se envuelve dentro
   de la píldora y el fondo cubre las dos líneas. */
.badge-urgente {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--cf-dorado);
    color: var(--cf-verde);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1.35;
    margin-bottom: 6px;
}
footer { background: var(--cf-verde); color: var(--cf-crema); padding: 40px 20px; margin-top: 60px; }
footer a { color: var(--cf-dorado); }

.contenido {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.grid-provincias, .grid-catalogo, .grid-tanatorios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.grid-controles { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 20px 0; }
.grid-filtro-categoria { display: flex; flex-wrap: wrap; gap: 8px; }
.js-category-filter {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--cf-verde);
    color: var(--cf-verde);
    padding: 8px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-family: Georgia, 'Times New Roman', serif;
    text-decoration: none;
    font-weight: bold;
}
.js-category-filter.active { background: var(--cf-verde); color: var(--cf-crema); }
.grid-orden { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-family: Georgia, 'Times New Roman', serif; }

/* Franja de degradado en el borde superior de las cajas, calcada del patrón de
   funeraries2/datos-floristeria.php ("barra de gradiente decorativa superior": 6px de alto y un
   degradado horizontal de tres paradas). Allí es verde oscuro -> verde claro -> arena; aquí se
   usan los colores de marca del sitio en las paradas de los extremos, con el mismo verde medio
   del original en la del centro para conservar la transición.
   Se pinta con ::before en vez de un <div> extra, para no tocar el HTML de cada caja. */
:root {
    --cf-degradado-caja: linear-gradient(90deg, #1f3d2e, #81b29a, #c9a24b);
}
.card-tanatorio,
.bloque-garantias li,
.product-card,
.formulario-pedido,
.opinion-item {
    position: relative;
    overflow: hidden;
}
.card-tanatorio::before,
.bloque-garantias li::before,
.product-card::before,
.formulario-pedido::before,
.opinion-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--cf-degradado-caja);
    z-index: 1;   /* por encima de la foto del producto, que llega hasta el borde */
}

.card-tanatorio {
    background: linear-gradient(135deg, #ffffff, #fcfefe);
    border: 1px solid rgba(220, 230, 225, 0.9);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    padding: 22px 16px 16px;   /* algo más arriba, para dejar aire bajo la franja */
    margin-bottom: 16px;
    display: block;
    text-decoration: none;
    color: inherit;
}
/* Miniatura de tanatori (cf_render_foto_tanatori($foto1, $alt, true), php/config.php): las
   tarjetas de provincia/población no llevan foto siempre (grid-provincias las reutiliza para
   provincia/población, sin foto) — solo las de /paginas/provincia.php y /paginas/poblacion.php,
   que son las únicas con <picture> dentro. Sangrado negativo para que la foto llegue a los bordes
   de la tarjeta (mismo criterio que .product-card img), por encima de la franja de color
   (::before, z-index:1 ya reservado para esto). */
.card-tanatorio picture, .card-tanatorio img {
    display: block;
    width: 100%;
}
.card-tanatorio picture {
    margin: -22px -16px 12px;
    /* Con solo el margen negativo la foto quedaba pegada al borde IZQUIERDO pero no llegaba al
       derecho: un margen negativo desplaza la caja, no la ensancha — con width:100% (fijo, no
       "auto") el ancho se calcula sobre el content-box de la tarjeta (con el padding ya
       descontado) y se queda corto exactamente esos 16px+16px de padding lateral. Comprobado con
       getBoundingClientRect(): la foto medía 251px con la tarjeta a 285px de ancho. width:auto no
       vale aquí (rompería el aspect-ratio del <img>), así que se sube el ancho a mano con calc(). */
    width: calc(100% + 32px);
}
.card-tanatorio img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #f0f0f0;
    border-radius: 10px 10px 0 0;
}
/* Foto grande de la ficha de un tanatori (paginas/tanatorio.php). */
.foto-tanatori {
    margin: 12px 0;
}
.foto-tanatori img {
    display: block;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    background: #f0f0f0;
}
/* En escritorio, la foto del tanatori pasa a columna izquierda y el texto + las 4 fichas de
   garantías (cf_render_garantias(), compartida con el resto del sitio) a la derecha — petición
   del usuario, para no dejar las fichas tirando de todo el ancho de página debajo de la foto. En
   móvil no se activa nada de esto: los mismos bloques siguen apilados en su orden normal. */
@media (min-width: 800px) {
    .tanatori-cap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "foto herosub"
            "foto datos"
            "foto garanties";
        column-gap: 28px;
        align-items: start;
    }
    .tanatori-cap .foto-tanatori { grid-area: foto; margin: 0; }
    .tanatori-cap .foto-tanatori img { max-width: none; }
    .tanatori-cap .hero-sub { grid-area: herosub; }
    .tanatori-cap .datos-tanatorio { grid-area: datos; }
    .tanatori-cap .tanatori-garanties { grid-area: garanties; }
    /* La rejilla de 4 columnas (.bloque-garantias, auto-fit/minmax(220px,1fr)) ya se reparte sola
       en 2x2 al tener la mitad del ancho de página en vez de todo — sin tocar esa regla. */
}

/* Contenedor de la tabla de defunciones recientes de la ficha de tanatorio. Era un <ul> con
   filas de texto; ahora envuelve la misma .tabla-fallecidos que usa el listado de /fallecidos/,
   con scroll propio para que en móvil no empuje el ancho de la página. */
.lista-esquelas-tanatorio {
    margin: 20px 0;
    overflow-x: auto;
}

.product-card {
    background: linear-gradient(135deg, #ffffff, #fcfefe);
    border: 1px solid rgba(220, 230, 225, 0.9);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}
.product-card img {
    width: 100%;
    aspect-ratio: 489 / 600;
    object-fit: cover;
    display: block;
    background: #f0f0f0;
}
.product-card h3, .product-card .precio {
    margin: 8px 12px 0;
}
.product-card h3 {
    text-align: center;
}
.product-card .precio {
    font-weight: bold;
    color: var(--cf-verde);
}
.product-card button {
    margin: 12px;
    margin-top: auto;
    align-self: flex-start;
}
.product-card-precio-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 12px 12px;
    margin-top: auto;
}
.product-card-precio-fila > * {
    flex: 1 1 0;
    box-sizing: border-box;
    text-align: center;
}

.formulario-pedido {
    /* El marco dorado de 2px que tenía lo sustituye la franja de degradado superior común a las
       cajas del sitio: los dos acentos juntos recargaban la caja. Para que el formulario siga
       siendo el elemento con más peso de la página (es el de pedido), lleva una sombra algo más
       marcada que el resto de cajas. */
    background: linear-gradient(135deg, #ffffff, #fcfefe);
    border: 1px solid rgba(220, 230, 225, 0.9);
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
    padding: 30px 24px 24px;   /* algo más arriba, para dejar aire bajo la franja */
    margin: 30px 0;
    max-width: 600px;
}
.formulario-pedido label { display: block; margin-bottom: 12px; font-weight: bold; }
.formulario-pedido input,
.formulario-pedido select {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    box-sizing: border-box;
    font-weight: normal;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* Nota bajo el campo de teléfono. Verde de marca legible sobre el fondo claro del formulario
   (el verde corporativo de WhatsApp, #25D366, no llega al contraste mínimo sobre blanco para un
   texto pequeño en cursiva). font-weight normal para que no compita con los <label>, que van en
   negrita dentro de .formulario-pedido. */
/* "Texto para la cinta" + acceso a las ideas, en la misma línea. */
.formulario-pedido .campo-cinta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    margin-bottom: 6px;
}
.formulario-pedido .campo-cinta label { margin-bottom: 0; }
.btn-ideas-cinta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.9em;
    font-style: italic;
    color: var(--cf-verde);
    cursor: pointer;
    text-decoration: underline;
}
.formulario-pedido .contador-cinta {
    font-size: 14px;
    font-weight: normal;
    color: #6f6a60;
    margin-left: auto;   /* se va al extremo derecho de la línea del campo */
    white-space: nowrap;
}
.btn-ideas-cinta .icono-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cf-verde);
    color: var(--cf-crema);
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    line-height: 1;
    flex-shrink: 0;
}

/* Modal de ideas para la cinta. HTML propio con JS vanilla: el proyecto no usa Bootstrap. */
.modal-ideas {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 25, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}
.modal-ideas[hidden] { display: none; }
.modal-ideas-caja {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    padding: 26px 24px 22px;
    max-width: 460px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
}
.modal-ideas-caja:focus { outline: none; }   /* recibe el foco al abrir; no debe dibujar borde */
.modal-ideas-caja h3 { margin: 0 0 8px; }
.modal-ideas-caja > p { margin: 0 0 16px; font-size: 0.92em; line-height: 1.5; }
.lista-ideas-cinta { list-style: none; padding: 0; margin: 0 0 18px; }
.lista-ideas-cinta li { margin-bottom: 8px; }
.idea-cinta {
    width: 100%;
    text-align: left;
    background: #faf8f2;
    border: 1px solid #e6e1d6;
    border-radius: 6px;
    padding: 11px 14px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95em;
    color: var(--cf-texto);
    cursor: pointer;
}
/* :focus-visible y no :focus — con :focus, la opción que recibe el foco al abrir el modal se
   quedaba pintada como si estuviera elegida. :focus-visible solo resalta cuando se navega con
   teclado, que es cuando esa marca sí hace falta. */
.idea-cinta:hover, .idea-cinta:focus-visible {
    background: var(--cf-verde);
    color: var(--cf-crema);
    border-color: var(--cf-verde);
}

.formulario-pedido .campo-telefono {
    display: flex;
    flex-wrap: wrap;      /* si no cabe (móvil), la nota cae debajo en vez de comprimir el campo */
    align-items: center;
    column-gap: 14px;
    row-gap: 6px;
    margin-bottom: 12px;  /* el que traía el <label>, que aquí se anula */
}
/* El margen inferior pasa al contenedor: con márgenes verticales propios, align-items:center
   dejaba la nota descentrada respecto al campo de teléfono. */
.formulario-pedido .campo-telefono label { margin-bottom: 0; }
.formulario-pedido .nota-whatsapp {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-style: italic;
    font-weight: normal;
    font-size: 0.9em;
    color: #1a7f4b;
    line-height: 1.3;
}
.formulario-pedido .nota-whatsapp img { flex-shrink: 0; width: 15px; height: 15px; }

.formulario-pedido fieldset { border: 1px solid #ddd; border-radius: 4px; padding: 12px; margin: 16px 0; }
.formulario-pedido legend { font-weight: bold; padding: 0 6px; }
.formulario-pedido fieldset label { display: inline-block; margin-right: 16px; font-weight: normal; }
.formulario-pedido fieldset input[type="radio"] { width: auto; padding: 0; margin: 0 6px 0 0; border: none; }
.formulario-pedido textarea { width: 100%; padding: 8px; box-sizing: border-box; font-family: inherit; }
/* Selector de teléfono (librería intl-tel-input, CDN): sin esto hereda la tipografía serif del
body, tanto el botón cerrado (bandera + "+34", .iti__selected-flag) como el desplegable de países
ya abierto (.iti__country-list). No se toca el <input> del propio número: solo el selector. */
.iti__selected-flag, .iti__country-list { font-family: Arial, Helvetica, sans-serif; }

.layout-con-sidebar {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    align-items: start;
}
/* min-width: 0 en los hijos: un item de grid no baja por defecto de su contenido mínimo, así que
   la tabla de fallecidos (4 columnas de texto) ensanchaba el track por encima del ancho de la
   pantalla y arrastraba con él al sidebar, provocando scroll horizontal en móvil. Con esto el
   track se ciñe a la pantalla y es la tabla la que scrollea dentro de su propio contenedor. */
.layout-con-sidebar > * { min-width: 0; }
@media (max-width: 800px) {
    .layout-con-sidebar { grid-template-columns: 1fr; }
}
.tabla-fallecidos-wrap { overflow-x: auto; }

.ficha-modelo {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 30px;
    align-items: start;
    margin: 20px 0;
}
.ficha-modelo img { width: 100%; height: auto; border-radius: 8px; margin: 16px 0; }
.ficha-modelo-lista {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}
.ficha-modelo-lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.ficha-modelo-lista li svg { flex-shrink: 0; stroke: var(--cf-verde); }
/* Escritorio: la foto (y el H1/precio/descripción/lista que ahora la acompañan) queda fija a la
izquierda mientras se hace scroll por el formulario de la derecha (misma idea que
https://guiatanatorios.es/arreglos/corona-funeral-paz/). No hace falta el truco de grid-row/span
de esa página (ahí lo necesitan para intercalar pestañas y productos relacionados dentro de la
misma rejilla); aquí la rejilla es de una sola fila y las FAQ quedan fuera, así que .navbar no es
fixed y basta con position:sticky sobre toda la columna izquierda. */
.ficha-modelo-sticky {
    position: sticky;
    top: 20px;
}
@media (max-width: 800px) {
    .ficha-modelo { grid-template-columns: 1fr; }
    /* Móvil: tal y como estaba (sin fijar la columna, apilado normal) — petición explícita del usuario. */
    .ficha-modelo-sticky { position: static; top: auto; }
}
.sidebar {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 16px;
}
.sidebar h3 { margin-top: 0; font-size: 1rem; }
.sidebar ul { list-style: none; padding: 0; margin: 0 0 20px; }
.sidebar li { padding: 4px 0; border-bottom: 1px solid #eee; font-size: 0.9rem; }
.sidebar li a { color: inherit; text-decoration: none; display: block; }
.sidebar li a:hover { text-decoration: underline; }
.sidebar li a.activa { color: var(--cf-verde); font-weight: bold; }
.sidebar form input[type="text"] { width: 100%; padding: 6px; box-sizing: border-box; margin-bottom: 6px; }

table.tabla-fallecidos { width: 100%; border-collapse: collapse; background: #fff; }
table.tabla-fallecidos th, table.tabla-fallecidos td { padding: 10px; border-bottom: 1px solid #eee; text-align: left; }
table.tabla-fallecidos th { background: var(--cf-verde); color: var(--cf-crema); }

table.tabla-datos-difunto { width: 100%; border-collapse: collapse; background: #fff; margin: 20px 0; }
table.tabla-datos-difunto th, table.tabla-datos-difunto td { padding: 10px; border-bottom: 1px solid #eee; text-align: left; }
table.tabla-datos-difunto th { width: 220px; color: var(--cf-verde); font-weight: bold; }

.paginador { display: flex; gap: 8px; margin: 20px 0; list-style: none; padding: 0; flex-wrap: wrap; }
.paginador a, .paginador span {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
}
.paginador .activa { background: var(--cf-verde); color: var(--cf-crema); }

.opiniones-recientes { margin: 40px 0 20px; }
.opiniones-recientes h2 { margin-bottom: 10px; }
.opinion-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: linear-gradient(135deg, #ffffff, #fcfefe);
    border: 1px solid rgba(220, 230, 225, 0.9);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    padding: 22px 20px 16px;
    margin-bottom: 16px;
}
.opinion-item h4 { margin: 10px 0 4px; }
.opinion-item .opinion-meta { color: #666; font-size: 0.9em; margin-top: 8px; }
.opinion-contenido { flex: 1 1 auto; min-width: 0; }
.opinion-foto {
    flex-shrink: 0;
    width: 110px;
    text-align: center;
}
.opinion-foto a { text-decoration: none; }
.opinion-foto img {
    display: block;
    width: 100%;
    aspect-ratio: 489 / 600;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    margin-bottom: 4px;
}
.opinion-foto span {
    display: block;
    font-size: 11px;
    color: var(--cf-verde);
    font-weight: bold;
    line-height: 1.3;
}
@media (max-width: 500px) {
    .opinion-item { flex-direction: column; align-items: center; text-align: center; }
    .opinion-foto { width: 90px; }
}

.cf-botones-pago { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cf-btn-pago { display: flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: 4px; padding: 0px; font-weight: bold; font-size: 1em; color: #fff; cursor: pointer; }
.cf-btn-pago img { height: 22px; width: auto; }
@media (max-width: 800px) {
    /* Móvil: tal y como estaba (apilados en una columna, más altos) — petición explícita del
    usuario de que el cambio de "2 en 2" solo aplique en escritorio. */
    .cf-botones-pago { display: flex; flex-direction: column; }
    .cf-btn-pago { padding: 0px; }
}
.cf-btn-tarjeta { background: #007a00; }
.cf-btn-bizum { background: #00c1c9; }
.cf-btn-googlepay { background: #c90000; }
.cf-btn-applepay { background: #000; }

/* Barra de búsqueda del menú principal (buscador de fallecidos + buscador de tanatorios).
   Va pegada bajo la navbar y se lee como parte de ella. */
.barra-buscadores {
    background: #162c21;
    border-bottom: 3px solid var(--cf-dorado);
    padding: 12px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    align-items: center;
    justify-content: center;
}
.buscador-menu { display: flex; align-items: center; gap: 8px; margin: 0; }
.buscador-menu label {
    color: var(--cf-crema);
    font-size: 0.9em;
    white-space: nowrap;
}
.buscador-menu input[type="search"], .buscador-menu select {
    padding: 7px 10px;
    border: 1px solid #3d5a4b;
    border-radius: 4px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95em;
    background: #fff;
    color: var(--cf-texto);
    min-width: 190px;
}
.buscador-menu .btn-dorado { padding: 7px 14px; font-size: 0.9em; white-space: nowrap; }
.buscador-menu a { color: var(--cf-dorado); }
@media (max-width: 800px) {
    /* Móvil: un buscador por fila y a lo ancho, en vez de cuatro controles apretados. */
    .barra-buscadores { flex-direction: column; align-items: stretch; gap: 10px; }
    .buscador-menu { flex-wrap: wrap; }
    .buscador-menu label { flex-basis: 100%; }
    .buscador-menu input[type="search"], .buscador-menu select { flex: 1; min-width: 0; }
}

/* El tanatorio en el H1 de una defunción: mismo titular, pero con menos peso visual que el
   nombre de la persona, que es lo que el visitante viene buscando. */
.h1-tanatorio { font-size: 0.7em; font-weight: normal; white-space: nowrap; }
@media (max-width: 700px) {
    /* En móvil el nombre del tanatorio pasa a su propia línea en vez de forzar scroll. */
    .h1-tanatorio { display: block; white-space: normal; margin-top: 4px; }
}

/* Formulario de búsqueda de la propia página /buscar-tanatorio.php */
.form-buscar-tanatorio { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 28px; }
.form-buscar-tanatorio input[type="search"] {
    flex: 1;
    min-width: 240px;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1em;
}
/* Resultados del buscador de tanatorios: listado ligero, sin fondo de bloque ni filas cebra —
   cada resultado se separa solo con un filete suave. Scrollea dentro de su contenedor para que
   en móvil no empuje el ancho de la página (mismo criterio que .tabla-precios-wrap). */
.tabla-resultados-wrap { overflow-x: auto; margin: 16px 0 30px; }
.tabla-resultados { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.tabla-resultados th, .tabla-resultados td { text-align: left; vertical-align: top; }

.tabla-resultados thead th {
    padding: 0 14px 8px;
    color: var(--cf-verde);
    font-size: 0.72em;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid var(--cf-dorado);
}
.tabla-resultados tbody td {
    padding: 14px;
    border-bottom: 1px solid #ebe6db; /* el filete "flojito" entre resultados */
    line-height: 1.45;
}
.tabla-resultados tbody tr:last-child td { border-bottom: none; }
.tabla-resultados tbody tr:hover { background: #faf8f2; }

.tabla-resultados .col-nombre { width: 34%; }
.tabla-resultados .col-nombre a { color: var(--cf-verde); font-weight: bold; text-decoration: none; }
.tabla-resultados .col-nombre a:hover { text-decoration: underline; }
.tabla-resultados .col-direccion { color: #6f6a60; font-size: 0.92em; }
.tabla-resultados .col-provincia { color: #6f6a60; white-space: nowrap; }

@media (max-width: 700px) {
    /* Móvil: la tabla se apila en fichas. En 390 px las cuatro columnas quedaban tan estrechas
       que cada nombre se partía en cuatro líneas; aquí cada resultado ocupa su propio bloque y
       los rótulos salen del data-label de cada celda. */
    .tabla-resultados-wrap { overflow-x: visible; }
    .tabla-resultados thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tabla-resultados, .tabla-resultados tbody, .tabla-resultados tr, .tabla-resultados td { display: block; width: auto; }
    .tabla-resultados tbody tr {
        border-bottom: 1px solid #ebe6db;
        padding: 14px 0;
    }
    .tabla-resultados tbody tr:last-child { border-bottom: none; }
    .tabla-resultados tbody td { border-bottom: none; padding: 2px 0; }
    .tabla-resultados .col-nombre { width: auto; font-size: 1.08em; margin-bottom: 4px; }
    .tabla-resultados tbody td[data-label]::before {
        content: attr(data-label) ": ";
        font-size: 0.85em;
        color: var(--cf-verde);
        font-weight: bold;
    }
    .tabla-resultados .col-provincia { white-space: normal; }
}

.atajo-poblacion {
    background: #fff;
    border-left: 4px solid var(--cf-dorado);
    padding: 12px 16px;
    border-radius: 4px;
    margin: 0 0 20px;
}
.atajo-poblacion a { color: var(--cf-verde); font-weight: bold; }
/* Aviso de "tiempo sin agentes" (fune_vacaciones). Va arriba del contenido en todas las
   páginas; solo aparece mientras dura el periodo. */
.aviso-sin-agentes {
    background: #fdf6e3;
    border: 1px solid #e6d8a8;
    border-left: 4px solid var(--cf-dorado);
    border-radius: 4px;
    padding: 14px 18px;
    margin: 0 0 22px;
    line-height: 1.55;
    font-weight: bold;
    color: #6b5518;
}

/* Aviso de que los actos por un difunto ya se han celebrado. Mismo lenguaje visual que
   .aviso-sin-agentes (caja con filete lateral) pero en el verde del sitio y sin la negrita
   general: aquí lo que va en negrita es solo la primera línea, y el resto es explicación. */
.aviso-actos-finalizados {
    background: #eef3f0;
    border: 1px solid #cfded6;
    border-left: 4px solid var(--cf-verde);
    border-radius: 4px;
    padding: 14px 18px;
    margin: 0 0 22px;
    line-height: 1.55;
    color: var(--cf-texto);
}
.aviso-actos-finalizados p { margin: 0 0 8px; }
.aviso-actos-finalizados p:last-child { margin-bottom: 0; }

/* Formulario de baja de esquela */
.campo-trampa { position: absolute; left: -9999px; top: -9999px; }  /* honeypot antibots */
.error-campo { color: #b03a2e; font-size: 0.9em; margin: -8px 0 12px; font-weight: bold; }
.ayuda-campo { color: #6f6a60; font-size: 0.88em; margin: -8px 0 14px; }

.aviso-error {
    background: #fdf3f2;
    border-left: 4px solid #b03a2e;
    padding: 12px 16px;
    border-radius: 4px;
}

/* Bloques de contenido SEO (cf_render_garantias(), cf_render_faq(), tablas de precio y
   secciones de texto de home / coronas-urgentes / precios / provincia / población / tanatorio) */
/* El H1 del hero era invisible: la regla global "h1,h2,h3 { color: var(--cf-verde) }" gana a la
   herencia del color crema de .hero, así que quedaba verde oscuro sobre el fondo verde oscuro del
   propio hero (mismo rgb(31,61,46) en texto y fondo). Afectaba a todas las páginas con hero desde
   antes de esta ronda de textos; se corrige aquí porque el H1 es el elemento que más peso tiene
   en el posicionamiento de la página. */
.hero h1, .hero h2, .hero h3 { color: var(--cf-crema); }

.hero-sub { font-size: 1.05em; line-height: 1.65; max-width: 70ch; margin: 0 auto 20px; }
/* Dentro del hero (fondo verde) el subtítulo va centrado y con su medida; fuera de él es un
   párrafo más de la página, así que se alinea a la izquierda y ocupa el ancho completo como el
   resto del texto. */
.contenido > .hero-sub, .contenido .bloque-texto .hero-sub {
    margin-left: 0;
    max-width: none;
}

.bloque-garantias {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.bloque-garantias li {
    /* El filete dorado que llevaban a la izquierda lo sustituye ahora la franja de degradado
       superior común a las cajas del sitio; dos acentos a la vez competirían. */
    background: linear-gradient(135deg, #ffffff, #fcfefe);
    border: 1px solid rgba(220, 230, 225, 0.9);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    padding: 20px 16px 14px;
}
.bloque-garantias strong { display: block; color: var(--cf-verde); margin-bottom: 4px; }
.bloque-garantias span { font-size: 0.9em; line-height: 1.5; }

/* Sin max-width propio: el ancho lo marca .contenido (1200px), igual que las rejillas, las
   tablas y el resto de párrafos de la página. Con el tope de 75ch que tenían, estos bloques se
   quedaban a media pantalla mientras lo de al lado ocupaba todo, y la página se veía desigual. */
.bloque-texto { margin: 36px 0; line-height: 1.7; }
.bloque-texto h2 { margin-bottom: 12px; }
.bloque-texto p { margin: 0 0 14px; }

.pasos-envio { line-height: 1.7; padding-left: 20px; }
.pasos-envio li { margin-bottom: 10px; }

/* La tabla scrollea dentro de su propio contenedor: en móvil no debe empujar el ancho de la
   página (mismo criterio que el resto de rejillas del sitio). */
.tabla-precios-wrap { overflow-x: auto; margin: 16px 0 24px; }
.tabla-precios { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.95em; }
.tabla-precios th, .tabla-precios td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e6e1d6; }
.tabla-precios thead th { background: var(--cf-verde); color: var(--cf-crema); font-weight: bold; }
.tabla-precios tbody tr:nth-child(even) { background: #faf8f4; }
.tabla-precios td a { color: var(--cf-verde); }

.bloque-faq { margin: 36px 0; }
.faq-item {
    border-bottom: 1px solid #e6e1d6;
    padding: 12px 0;
}
.faq-item summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--cf-verde);
    line-height: 1.5;
}
.faq-item p { margin: 10px 0 0; line-height: 1.7; }

.titulo-poblacion { margin: 28px 0 10px; font-size: 1.1em; }
.titulo-poblacion a { color: var(--cf-verde); text-decoration: none; }
.titulo-poblacion a:hover { text-decoration: underline; }
.card-tanatorio h4 { margin: 6px 0 0; font-family: Georgia, 'Times New Roman', serif; color: var(--cf-verde); font-size: 1em; }
/* Dirección y población dentro de la tarjeta del tanatorio: datos de apoyo, en segundo plano
   respecto al nombre de la sala. */
.card-tanatorio .card-direccion { margin: 6px 0 0; font-size: 0.85em; color: #6f6a60; line-height: 1.4; }
.card-tanatorio .card-poblacion { margin: 2px 0 0; font-size: 0.85em; color: #6f6a60; }
.datos-tanatorio { line-height: 1.8; }