/* Estilos comunes de elmundoesquelas.com (mismo diseño que esquelaendiario.com, en gama azul) */

/* Fuentes alojadas en el propio servidor (subconjunto latino, licencia SIL OFL):
   así el navegador del visitante no contacta con Google ni con ningún tercero */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fuentes/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fuentes/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('fuentes/source-serif-4-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('fuentes/source-serif-4-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url('fuentes/source-serif-4-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/oswald-latin-400-normal.woff2') format('woff2'); }

:root {
    --azul: #025197;
    --azul-oscuro: #023f76;
    --azul-claro: #e6eef8;
    --fondo: #f5f8fc;
    --texto: #1a2533;
    --texto-suave: #4b5a6c;
    --borde: #d7e2ef;
    --radio: 12px;
    --sombra: 0 6px 24px rgba(2, 81, 151, 0.08);
    --alto-menu: 80px;
    --oro: #a5844f;
    --oro-texto: #6e5326;  /* dorado para texto sobre fondos claros y azul claro (contraste AA ≥ 4,5) */
    --oro-claro: #e0c48f;  /* dorado para texto sobre fondos azul oscuro (contraste AA) */
    --tinta: #061f3d;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-menu) + 16px); }

body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--texto);
    background: var(--fondo);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); }

/* ============ ACCESIBILIDAD ============ */
/* Enlace para saltar el menú con el teclado: oculto hasta que recibe el foco */
.saltar-contenido {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 2000;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--azul);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.saltar-contenido:focus { top: 12px; }
/* Texto solo para lectores de pantalla */
.solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* Indicador de foco visible y homogéneo para la navegación con teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--azul) !important;
    outline-offset: 2px;
}
/* Sobre fondos azules el anillo de foco es blanco */
.hero :focus-visible,
.franja-cta :focus-visible,
.glosario-panel :focus-visible,
.tarifas-ediciones :focus-visible,
.contacto-panel :focus-visible,
.visor :focus-visible,
.fv-ampliada :focus-visible,
.publicacion :focus-visible,
.momentos-notas :focus-visible,
.saltar-contenido:focus-visible {
    outline-color: #fff !important;
}
main:focus { outline: none; }
/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

h1, h2, h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    color: var(--azul);
    line-height: 1.2;
}

.contenedor { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ============ MENÚ SUPERIOR FIJO ============ */
.menu-superior {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde);
    transition: box-shadow 0.3s ease;
}
.menu-superior.con-sombra { box-shadow: 0 4px 20px rgba(2, 81, 151, 0.1); }

.menu-superior .contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--alto-menu);
}

/* Logotipo: icono cuadrado azul con una esquela (cruz en recuadro) + nombre */
.logo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    padding-left: 56px;
    text-decoration: none;
    line-height: 1.1;
    flex-shrink: 0;
}
.logo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    transform: translateY(-50%);
    background: var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1'/%3E%3Cpath d='M12 6.5v8M9.2 9h5.6' stroke-linecap='round'/%3E%3Cpath d='M8.5 17.5h7' stroke-linecap='round'/%3E%3C/svg%3E") center / 42px no-repeat;
    box-shadow: 0 4px 12px rgba(2, 81, 151, 0.25);
}
.logo strong {
    font-family: 'Oswald', 'Trebuchet MS', Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--texto);
}
.logo strong b {
    font-weight: 400;
    color: var(--azul);
}
/* «Servicio de esquelas · OZA Publicidad»: tamaño ajustado para que quepa junto al menú (9 px en móvil, ver más abajo) */
.logo span {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.enlaces {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.enlaces a, .submenu-boton {
    display: block;
    padding: 10px 13px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--tinta);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.enlaces a:hover { background: var(--azul-claro); color: var(--azul); }
.enlaces a.activo { color: var(--azul); background: var(--azul-claro); }

/* Desplegable de ediciones */
.con-submenu { position: relative; }
.submenu-boton {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.submenu-boton svg { transition: transform 0.2s ease; }
.con-submenu:hover .submenu-boton,
.con-submenu.abierto .submenu-boton { background: var(--azul-claro); color: var(--azul); }
.con-submenu.abierto .submenu-boton svg { transform: rotate(180deg); }
.submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    min-width: 250px;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 16px 36px rgba(2, 81, 151, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
/* Puente invisible para que el ratón no pierda el hover al bajar al desplegable */
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.con-submenu:hover .submenu,
.con-submenu:focus-within .submenu,
.con-submenu.abierto .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.submenu a { font-size: 15px; font-weight: 600; white-space: nowrap; }

.boton-telefono {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--azul);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(2, 81, 151, 0.25);
    transition: background 0.2s ease, transform 0.2s ease;
}
.boton-telefono:hover { background: var(--azul-oscuro); transform: translateY(-1px); }
.boton-telefono svg { flex-shrink: 0; }

.boton-hamburguesa {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: var(--azul);
}

@media (max-width: 1200px) {
    .boton-hamburguesa { display: block; }
    .menu-superior nav {
        position: absolute;
        top: var(--alto-menu);
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--borde);
        box-shadow: 0 12px 24px rgba(2, 81, 151, 0.1);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .menu-superior nav.abierto { max-height: calc(100vh - var(--alto-menu)); overflow-y: auto; }
    .enlaces { flex-direction: column; align-items: stretch; padding: 8px 20px 16px; gap: 2px; }
    .enlaces a, .submenu-boton { padding: 12px 14px; font-size: 16px; }
    .submenu-boton { width: 100%; justify-content: space-between; }
    .con-submenu:hover .submenu-boton { background: none; color: var(--texto); }
    .con-submenu.abierto .submenu-boton { background: var(--azul-claro); color: var(--azul); }
    .submenu,
    .con-submenu:hover .submenu,
    .con-submenu:focus-within .submenu,
    .con-submenu.abierto .submenu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        box-shadow: none;
        padding: 2px 0 6px 14px;
        min-width: 0;
    }
    .con-submenu.abierto .submenu { display: block; }
    .submenu::before { display: none; }
}
@media (max-width: 760px) {
    .logo span { font-size: 9px; letter-spacing: 0.5px; }
}
@media (max-width: 520px) {
    .boton-telefono .texto-largo { display: none; }
    .boton-telefono { padding: 10px 14px; }
    .logo { padding-left: 46px; }
    .logo::before { width: 36px; height: 36px; background-size: 22px; }
    .logo strong { font-size: 19px; }
}
/* Pantallas muy estrechas (320 px): la cabecera cabe sin desplazamiento horizontal */
@media (max-width: 380px) {
    .menu-superior .contenedor { padding: 0 12px; gap: 8px; }
    .logo { padding-left: 42px; }
    .logo::before { width: 34px; height: 34px; }
    .logo strong { font-size: 17px; }
    .logo span { font-size: 9px; letter-spacing: 0.5px; }
    .boton-telefono { padding: 10px 12px; }
    .boton-hamburguesa { padding: 6px; }
}
/* Por debajo de 360 px no cabe «Servicio de esquelas · OZA Publicidad»: queda solo «OZA Publicidad» */
@media (max-width: 359px) {
    .logo-gestion { display: none; }
}

/* ============ CABECERA (HERO) CON IMAGEN DE FONDO ============ */
.hero {
    position: relative;
    color: #fff;
    background:
        linear-gradient(100deg, rgba(3, 44, 85, 0.92) 0%, rgba(2, 81, 151, 0.78) 55%, rgba(2, 81, 151, 0.35) 100%),
        url('../img/reloj-y-arbol.jpg') center / cover no-repeat;
    padding: 40px 0 44px;
}
/* En pantallas estrechas el texto ocupa todo el ancho y llega a la zona clara de la foto:
   se refuerza el velo azul para mantener el contraste del texto blanco (WCAG AA) */
@media (max-width: 760px) {
    .hero {
        background:
            linear-gradient(100deg, rgba(3, 44, 85, 0.92) 0%, rgba(2, 81, 151, 0.86) 100%),
            url('../img/reloj-y-arbol.jpg') center / cover no-repeat;
    }
}
/* Cabecera más compacta para las páginas interiores, con migas de pan */
.hero.hero-pagina { padding: 14px 0 18px; }
.hero.hero-pagina h1 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 6px; max-width: 820px; }
.hero.hero-pagina p { font-size: 15.5px; max-width: 720px; margin-bottom: 12px; }
.hero.hero-pagina .migas { margin-bottom: 8px; }
/* En las interiores el teléfono ya está en el menú: solo un botón discreto, sin horario ni formulario */
.hero.hero-pagina .boton-secundario,
.hero.hero-pagina .hero-horario { display: none; }
.hero.hero-pagina .boton-telefono { font-size: 16px; padding: 9px 20px; }
.hero.hero-pagina .boton-telefono svg { width: 18px; height: 18px; }
.migas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; opacity: 0.85; }
.migas li + li::before { content: "›"; margin-right: 6px; }
.migas a { color: #fff; text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.hero h1 {
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    margin: 0 0 10px;
    max-width: 680px;
}
.hero p {
    font-size: 18px;
    max-width: 600px;
    margin: 0 0 18px;
    opacity: 0.92;
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .boton-telefono { background: #fff; color: var(--azul); font-size: 20px; padding: 14px 26px; }
.hero .boton-telefono:hover { background: var(--azul-claro); }
.boton-secundario {
    display: inline-flex;
    align-items: center;
    padding: 14px 24px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}
.boton-secundario:hover { background: rgba(255, 255, 255, 0.12); }
.hero-horario { margin-top: 12px; font-size: 14px; opacity: 0.85; }

/* ============ PRESENTACIÓN: EL PAÍS ESQUELAS ============ */
.presentacion {
    background: #fff;
    padding: 56px 0 72px;
    border-bottom: 1px solid var(--borde);
}
.presentacion-cabecera { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.presentacion-cabecera h2 { margin-bottom: 0; }
.presentacion-cabecera .antetitulo::after { content: ""; width: 36px; height: 1px; background: var(--oro); }
.presentacion-cabecera .entradilla { margin: 0 auto; max-width: 680px; }
.antetitulo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--oro-texto);
}
.antetitulo::before { content: ""; width: 36px; height: 1px; background: var(--oro); }
.presentacion h2 {
    font-size: clamp(36px, 4.5vw, 52px);
    font-weight: 600;
    margin: 14px 0 22px;
    letter-spacing: -0.5px;
}
.entradilla {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 21px;
    line-height: 1.55;
    color: var(--texto);
    margin: 0 0 32px;
    max-width: 560px;
}
/* Confianza: retrato + cita de agencia autorizada */
.confianza {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 44px;
    max-width: 920px;
    margin: 0 auto 48px;
}
/* Retrato redondo con ondas azules que se expanden (como una llamada en curso) y pastilla de horario */
.confianza-retrato {
    position: relative;
    width: 176px;
    height: 176px;
    margin: 14px;
}
.confianza-retrato::before,
.confianza-retrato::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(2, 81, 151, 0.45);
    animation: retrato-onda 3.2s ease-out 1 both;
    pointer-events: none;
}
.confianza-retrato::after { animation-delay: 1.6s; }
/* Las ondas se ven una vez al cargar y vuelven al pasar el ratón (no se mueven más de 5 s seguidos: WCAG 2.2.2) */
.confianza:hover .confianza-retrato::before,
.confianza:hover .confianza-retrato::after { animation-name: retrato-onda-repeticion; }
@keyframes retrato-onda {
    0% { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.38); opacity: 0; }
}
/* Copia con otro nombre para que la animación se reinicie al pasar el ratón */
@keyframes retrato-onda-repeticion {
    0% { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.38); opacity: 0; }
}
.retrato-foto {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 0 0 2px var(--azul), 0 18px 36px -12px rgba(2, 81, 151, 0.45);
}
.retrato-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    transform: scale(1.12);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.retrato-insignia {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 2px solid #fff;
    background: var(--azul);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(2, 81, 151, 0.3);
}
.retrato-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3ccf7a;
    animation: retrato-latido 2s ease-out 2;
}
@keyframes retrato-latido {
    0% { box-shadow: 0 0 0 0 rgba(60, 207, 122, 0.7); }
    100% { box-shadow: 0 0 0 7px rgba(60, 207, 122, 0); }
}
/* Destello diagonal al pasar el ratón */
.retrato-foto::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -60%;
    left: -80%;
    width: 50%;
    height: 220%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
    transform: rotate(25deg);
    transition: left 0.9s ease;
    pointer-events: none;
}
.confianza:hover .retrato-foto img { transform: scale(1.2); }
.confianza:hover .retrato-foto::after { left: 140%; }
@media (prefers-reduced-motion: reduce) {
    .confianza-retrato::before, .confianza-retrato::after, .retrato-punto { animation: none; }
    .retrato-foto img, .retrato-foto::after { transition: none; }
}
.confianza-cita p {
    margin: 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 20px;
    line-height: 1.6;
    color: var(--tinta);
}
.confianza-cita p a { white-space: nowrap; font-weight: 600; }
.confianza-cita .confianza-secundario {
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--texto-suave);
}

/* Proceso en cuatro pasos: franja oscura horizontal con iconos */
.proceso {
    /* Degradado azul con un brillo suave arriba a la derecha */
    background:
        radial-gradient(ellipse at 85% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%),
        linear-gradient(115deg, #032c55 0%, var(--azul-oscuro) 40%, var(--azul) 100%);
    color: #fff;
    padding: 36px 48px 40px;
    border-top: 2px solid var(--oro);
}
.proceso-titulo {
    display: block;
    text-align: center;
    margin-bottom: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--oro-claro);
}
.pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.paso { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Conector punteado dorado entre pasos */
.paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32px;
    left: calc(50% + 46px);
    right: calc(-50% + 34px);
    border-top: 1px dashed rgba(165, 132, 79, 0.7);
}
.paso-icono {
    position: relative;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}
.paso-numero {
    position: absolute;
    z-index: 1;
    top: -4px;
    left: calc(50% + 18px);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--oro);
    color: var(--tinta);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 14px;
    font-weight: 700;
}
.paso h3 {
    margin: 16px 0 0;
    font-size: 19px;
    font-weight: 400;
    color: #fff;
}

/* Proceso de la portada: camino ondulado.
   Fondo claro con formas orgánicas que cambian de forma despacio; los pasos se colocan arriba y abajo
   sobre una onda que los une, y un cometa dorado la recorre en bucle iluminando cada paso al pasar. */
.publicacion {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 34px 32px 30px;
    border: 1px solid #d3e1f0;
    border-radius: 32px;
    background: linear-gradient(160deg, #f3f7fc 0%, #e6eef8 55%, #f6f1e7 100%);
}
/* Formas orgánicas del fondo */
.publicacion::before,
.publicacion::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
}
.publicacion::before {
    width: 380px;
    height: 340px;
    top: -170px;
    left: -110px;
    background: rgba(2, 81, 151, 0.09);
}
.publicacion::after {
    width: 320px;
    height: 300px;
    right: -100px;
    bottom: -150px;
    background: rgba(165, 132, 79, 0.14);
}
.publicacion-cabecera { text-align: center; margin-bottom: 14px; }
.publicacion-cabecera .antetitulo::after { content: ""; width: 36px; height: 1px; background: var(--oro); }
.publicacion-titulo { font-size: clamp(24px, 2.6vw, 30px); margin: 8px 0 0; }

/* La onda ocupa la franja superior: 1000 × 180 en el viewBox, es decir, el 18 % del ancho.
   Los nodos están en x = 12,5 / 37,5 / 62,5 / 87,5 % y en y = 50 (arriba) o 130 (abajo). */
.publicacion-recorrido { position: relative; }
.publicacion-onda {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    overflow: visible;
}
.onda-cola { fill: none; stroke: #b6cde6; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 9; }
.onda-pista { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; opacity: 0.85; }
.onda-linea { fill: none; stroke: url(#onda-degradado); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 11; }

.publicacion-pasos {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Los márgenes en % se calculan sobre el ancho de la columna (¼ del total):
   y = 50 → 20 % de la columna; y = 130 → 52 %; final de la onda (180) → 72 %. */
.publicacion-paso { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px; }
.publicacion-paso:nth-child(odd)  { --arriba: calc(20% - 30px); --abajo: calc(52% - 30px); }
.publicacion-paso:nth-child(even) { --arriba: calc(52% - 30px); --abajo: calc(20% - 30px); }
.publicacion-marca {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin-top: var(--arriba);
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--azul);
    background: #fff;
    color: var(--azul);
    box-shadow: 0 8px 20px rgba(2, 81, 151, 0.18);
}
/* Halo que se abre cuando el paso se ilumina */
.publicacion-marca::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--oro);
    opacity: 0;
}
.publicacion-paso:last-child .publicacion-marca { background: var(--oro); border-color: var(--oro); color: #fff; }
.publicacion-tarjeta {
    position: relative;
    overflow: hidden;
    flex: 1;
    width: 100%;
    margin-top: calc(var(--abajo) + 26px);
    padding: 18px 16px 34px;
    border: 1px solid var(--borde);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(2, 81, 151, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Ola al pie de cada tarjeta */
.publicacion-tarjeta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'%3E%3Cpath d='M0 12 C35 0 65 22 100 11 C135 0 165 22 200 10 V22 H0Z' fill='%23e6eef8'/%3E%3C/svg%3E") 0 0 / 200% 100% repeat-x;
}
.publicacion-paso:last-child .publicacion-tarjeta::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'%3E%3Cpath d='M0 12 C35 0 65 22 100 11 C135 0 165 22 200 10 V22 H0Z' fill='%23f3ead9'/%3E%3C/svg%3E");
}
.publicacion-tarjeta:hover { transform: translateY(-5px); border-color: #b6cde6; box-shadow: 0 16px 32px rgba(2, 81, 151, 0.13); }
.publicacion-numero {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--azul-claro);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--azul);
}
.publicacion-numero::before { content: "Paso "; }
.publicacion-tarjeta h4 { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--tinta); margin: 0 0 6px; }
.publicacion-tarjeta p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-suave); }

.publicacion-cta { position: relative; text-align: center; margin: 24px 0 0; font-size: 15px; color: #3a4a5e; }
.publicacion-cta a { font-weight: 600; }
/* Pequeña onda dorada sobre la invitación final */
.publicacion-cta::before {
    content: "";
    display: block;
    width: 90px;
    height: 10px;
    margin: 0 auto 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 10'%3E%3Cpath d='M1 5 C8 0 14 0 23 5 S38 10 45 5 S60 0 67 5 S82 10 89 5' fill='none' stroke='%23a5844f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Movimiento.
   - Siempre (salvo «reducir movimiento»): la línea fluye, las formas del fondo cambian, las olas
     de las tarjetas se mecen y los círculos flotan.
   - Al llegar a la sección (js/web.js añade .recorrido-preparado y luego .recorrido): la onda se
     descubre de izquierda a derecha, los círculos aparecen, los iconos se dibujan y las tarjetas suben.
   - Después, en bucle de 8 s: el cometa recorre la onda y cada paso se ilumina cuando llega a él. */
.publicacion-paso:nth-child(1) { --paso: 0; }
.publicacion-paso:nth-child(2) { --paso: 1; }
.publicacion-paso:nth-child(3) { --paso: 2; }
.publicacion-paso:nth-child(4) { --paso: 3; }
.publicacion-paso { --llegada: calc(0.3s + var(--paso) * 0.55s); --ciclo: calc(3.2s + var(--paso) * 2s); }

@media (prefers-reduced-motion: no-preference) {
    .publicacion::before { animation: publicacion-forma 14s ease-in-out infinite alternate; }
    .publicacion::after { animation: publicacion-forma 17s ease-in-out infinite alternate-reverse; }
    .onda-linea { animation: publicacion-flujo 1.4s linear infinite; }
    .publicacion-tarjeta::after { animation: publicacion-ola 6s linear infinite; }
    .publicacion-paso:nth-child(even) .publicacion-tarjeta::after { animation-direction: reverse; }
    .publicacion-marca { animation: publicacion-flotar 4s ease-in-out calc(var(--paso) * -1s) infinite; }
}
@keyframes publicacion-forma {
    0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0, 0) rotate(0deg); }
    50% { border-radius: 61% 39% 45% 55% / 55% 62% 38% 45%; }
    100% { border-radius: 38% 62% 52% 48% / 62% 38% 62% 38%; transform: translate(60px, 40px) rotate(25deg); }
}
@keyframes publicacion-flujo { to { stroke-dashoffset: -24; } }
@keyframes publicacion-ola { to { background-position: -200% 0; } }
@keyframes publicacion-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Entrada */
.recorrido-preparado .publicacion-onda { clip-path: inset(0 100% 0 0); }
.recorrido .publicacion-onda { clip-path: inset(-20px -20px -20px -20px); transition: clip-path 2.2s cubic-bezier(.6, 0, .3, 1) 0.1s; }
.recorrido-preparado .publicacion-tarjeta,
.recorrido-preparado .publicacion-marca { opacity: 0; }
.recorrido-preparado .publicacion-marca svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }

.recorrido .publicacion-marca {
    animation:
        publicacion-marca-entra 0.7s cubic-bezier(.3, 1.6, .5, 1) var(--llegada) both,
        publicacion-flotar 4s ease-in-out calc(var(--llegada) + 0.7s) infinite,
        publicacion-marca-activa 8s ease-in-out var(--ciclo) infinite;
}
.recorrido .publicacion-marca::after { animation: publicacion-halo 8s ease-out var(--ciclo) infinite; }
.recorrido .publicacion-marca svg * { animation: publicacion-trazo 1.1s ease-in-out calc(var(--llegada) + 0.3s) both; }
.recorrido .publicacion-tarjeta {
    animation:
        publicacion-tarjeta-entra 0.9s cubic-bezier(.2, .8, .3, 1) calc(var(--llegada) + 0.2s) both,
        publicacion-tarjeta-activa 8s ease-in-out var(--ciclo) infinite;
}
.recorrido .publicacion-numero { animation: publicacion-numero-activo 8s ease-in-out var(--ciclo) infinite; }

@keyframes publicacion-marca-entra { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes publicacion-tarjeta-entra { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes publicacion-trazo { to { stroke-dashoffset: 0; } }
@keyframes publicacion-marca-activa {
    0%, 28%, 100% { box-shadow: 0 8px 20px rgba(2, 81, 151, 0.18); }
    5%, 18% { box-shadow: 0 8px 20px rgba(2, 81, 151, 0.18), 0 0 0 8px rgba(224, 196, 143, 0.45), 0 0 30px 10px rgba(224, 196, 143, 0.5); }
}
@keyframes publicacion-halo {
    0% { opacity: 0; transform: scale(1); }
    3% { opacity: 0.9; transform: scale(1); }
    18%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes publicacion-tarjeta-activa {
    0%, 28%, 100% { transform: none; border-color: var(--borde); box-shadow: 0 10px 26px rgba(2, 81, 151, 0.07); }
    6%, 18% { transform: translateY(-8px); border-color: var(--oro); box-shadow: 0 18px 36px rgba(2, 81, 151, 0.15); }
}
@keyframes publicacion-numero-activo {
    0%, 28%, 100% { background-color: var(--azul-claro); color: var(--azul); }
    6%, 18% { background-color: var(--oro); color: #fff; }
}

/* Tablet y móvil: recorrido vertical con una onda que baja serpenteando a la izquierda */
@media (max-width: 900px) {
    .publicacion { padding: 30px 20px 26px; border-radius: 26px; }
    .publicacion-onda { display: none; }
    .publicacion-recorrido { max-width: 620px; margin: 18px auto 0; }
    .publicacion-pasos { grid-template-columns: 1fr; gap: 20px; }
    .publicacion-pasos::before {
        content: "";
        position: absolute;
        top: 70px;
        bottom: 70px;
        left: 15px;
        width: 30px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='80' viewBox='0 0 30 80'%3E%3Cpath d='M15 0 C30 20 30 20 15 40 C0 60 0 60 15 80' fill='none' stroke='%23a5844f' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='1 8'/%3E%3C/svg%3E") 0 0 / 30px 80px repeat-y;
    }
    .recorrido-preparado .publicacion-pasos::before { clip-path: inset(0 0 100% 0); }
    .recorrido .publicacion-pasos::before { clip-path: inset(0); transition: clip-path 2s ease-in-out 0.2s; }
    .publicacion-paso,
    .publicacion-paso:nth-child(n) { --arriba: 0; --abajo: 0; flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 0; }
    .publicacion-tarjeta { margin-top: 0; padding: 14px 16px 30px; border-radius: 22px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .publicacion-pasos::before { animation: publicacion-baja 2.5s linear infinite; }
}
@keyframes publicacion-baja { to { background-position: 0 80px; } }
@media (max-width: 600px) {
    .publicacion { padding: 26px 14px 22px; }
    .publicacion-marca { width: 52px; height: 52px; }
    .publicacion-pasos::before { left: 11px; }
}

/* EL MUNDO: el mismo recorrido, con otra piel para distinguirlo del de larazon-esquelas.es.
   Fondo nocturno azul tinta con brillo dorado y trama de puntos; marcas en rombo (a juego con los sellos
   de «Tipos de esquelas»), tarjetas de cristal con el número grande en dorado y un filete dorado al pie
   que se ilumina cuando pasa el cometa. */
.publicacion {
    border-color: rgba(224, 196, 143, 0.25);
    background:
        radial-gradient(ellipse 55% 60% at 85% 0%, rgba(224, 196, 143, 0.16), transparent 70%),
        radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(165deg, var(--azul) 0%, var(--tinta) 55%, #04162c 100%);
    color: #fff;
}
.publicacion::before { background: rgba(79, 155, 224, 0.16); }
.publicacion::after { background: rgba(224, 196, 143, 0.12); }
.publicacion .antetitulo { color: var(--oro-claro); }
.publicacion-cabecera .antetitulo::after { background: var(--oro-claro); }
.publicacion-titulo { color: #fff; }

.onda-cola { stroke: rgba(224, 196, 143, 0.45); }
.onda-pista { stroke: rgba(255, 255, 255, 0.07); }

/* Marca en rombo: la forma la dibuja ::before girado, así el icono queda siempre derecho */
.publicacion-marca {
    border: 0;
    background: none;
    color: var(--oro-claro);
    box-shadow: none;
}
.publicacion-marca::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 7px;
    border: 1.5px solid var(--oro-claro);
    border-radius: 9px;
    background: var(--tinta);
    box-shadow: 0 0 0 5px rgba(6, 31, 61, 0.6), 0 10px 24px rgba(0, 0, 0, 0.35);
    transform: rotate(45deg);
}
.publicacion-marca::after { border-color: var(--oro-claro); }
.publicacion-paso:last-child .publicacion-marca { background: none; color: var(--tinta); }
.publicacion-paso:last-child .publicacion-marca::before { background: var(--oro-claro); }

/* Tarjetas de cristal */
.publicacion-tarjeta {
    padding: 20px 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.5);
}
/* En vez de la ola, un filete dorado al pie que se alarga al iluminarse el paso */
.publicacion-tarjeta::after,
.publicacion-paso:last-child .publicacion-tarjeta::after {
    left: 50%;
    right: auto;
    bottom: 0;
    width: 36px;
    height: 2px;
    border-radius: 2px;
    background: var(--oro-claro);
    transform: translateX(-50%);
    transition: width 0.4s ease;
}
.publicacion-tarjeta:hover { border-color: rgba(224, 196, 143, 0.55); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.6); }
.publicacion-tarjeta:hover::after { width: 70%; }
.publicacion-numero {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    border-radius: 0;
    background: none;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    color: var(--oro-claro);
}
.publicacion-numero::before { content: none; }
.publicacion-tarjeta h4 { color: #fff; }
.publicacion-tarjeta p { color: rgba(255, 255, 255, 0.74); }

.publicacion-cta { color: rgba(255, 255, 255, 0.8); }
.publicacion-cta a { color: var(--oro-claro); }
.publicacion-cta::before { filter: brightness(1.5); }

/* Al pasar el cometa: la tarjeta sube, se enciende su borde dorado y el filete se alarga */
@media (prefers-reduced-motion: no-preference) {
    .publicacion-tarjeta::after { animation: none; }
    .recorrido .publicacion-tarjeta::after { animation: publicacion-filete 8s ease-in-out var(--ciclo) infinite; }
}
.recorrido .publicacion-tarjeta {
    animation:
        publicacion-tarjeta-entra 0.9s cubic-bezier(.2, .8, .3, 1) calc(var(--llegada) + 0.2s) both,
        publicacion-cristal-activa 8s ease-in-out var(--ciclo) infinite;
}
.recorrido .publicacion-numero { animation: publicacion-cifra-activa 8s ease-in-out var(--ciclo) infinite; }
@keyframes publicacion-cristal-activa {
    0%, 28%, 100% { transform: none; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.5); }
    6%, 18% { transform: translateY(-8px); border-color: rgba(224, 196, 143, 0.7); box-shadow: 0 24px 44px -18px rgba(0, 0, 0, 0.6), 0 0 30px -6px rgba(224, 196, 143, 0.35); }
}
@keyframes publicacion-cifra-activa {
    0%, 28%, 100% { color: var(--oro-claro); text-shadow: none; }
    6%, 18% { color: #fff; text-shadow: 0 0 18px rgba(224, 196, 143, 0.9); }
}
@keyframes publicacion-filete {
    0%, 28%, 100% { width: 36px; }
    6%, 18% { width: 70%; }
}
@media (max-width: 900px) {
    .publicacion-tarjeta { padding: 16px 18px 20px; border-radius: 14px; }
    .publicacion-tarjeta::after { left: 18px; transform: none; }
    .publicacion-numero { font-size: 28px; }
}
@media (max-width: 900px) {
    .confianza { gap: 32px; }
    .confianza-retrato { width: 136px; height: 136px; }
    .confianza-cita p { font-size: 18px; }
    .proceso { padding: 32px 24px; }
    .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
    .paso:nth-child(2)::after { display: none; }
}
@media (max-width: 600px) {
    .confianza { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    /* En móvil, lista vertical: icono a la izquierda y título a la derecha */
    .pasos { grid-template-columns: 1fr; gap: 22px; }
    .paso { flex-direction: row; text-align: left; gap: 18px; }
    .paso-numero { left: 44px; }
    .paso h3 { margin: 0; }
    .paso:not(:last-child)::after, .paso:nth-child(2)::after { display: block; top: 68px; left: 32px; right: auto; bottom: -20px; border-top: 0; border-left: 1px dashed rgba(165, 132, 79, 0.7); }
}

/* Separador ornamental */
.ornamento {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 56px auto 44px;
    max-width: 420px;
    color: var(--oro-texto);
}
.ornamento::before, .ornamento::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.6; }

/* Tres guías numeradas */
.guias {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}
.guia {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 36px;
    text-decoration: none;
    color: inherit;
    transition: background 0.3s ease;
}
.guia + .guia { border-left: 1px solid var(--borde); }
.guia::after {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    bottom: -1px;
    height: 2px;
    background: var(--azul);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.guia:hover { background: var(--fondo); }
.guia:hover::after { transform: scaleX(1); }
.guia-numero {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--oro-texto);
    margin-bottom: 14px;
}
.guia h3 { font-size: 24px; font-weight: 600; margin: 0 0 12px; }
.guia p { font-size: 15px; color: var(--texto-suave); margin: 0 0 22px; flex: 1; }
.guia-enlace {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--azul);
}
.guia-enlace::after { content: " →"; display: inline-block; transition: transform 0.25s ease; }
.guia:hover .guia-enlace::after { transform: translateX(4px); }

.nota-region {
    text-align: center;
    font-family: 'Source Serif 4', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    color: var(--texto-suave);
    max-width: 640px;
    margin: 44px auto 0;
}

@media (max-width: 900px) {
    .presentacion { padding: 44px 0 56px; }
    .guias { grid-template-columns: 1fr; }
    .guia + .guia { border-left: 0; border-top: 1px solid var(--borde); }
    .guia { padding: 32px 4px; }
    .guia::after { left: 4px; right: 4px; }
    .ornamento { margin: 56px auto 40px; }
}
@media (max-width: 480px) {
    .entradilla { font-size: 19px; }
}

/* ============ CONTENIDO ============ */
/* Cuerpo de la página entre la cabecera y la franja de ediciones */
.cuerpo { padding: 56px 0; }

/* Ancho cómodo de lectura para los párrafos; galerías y rejillas usan todo el ancho */
.tarjeta > p, .tarjeta > ul, .texto-con-imagen p { max-width: 760px; }

.tarjeta {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 36px;
    margin-bottom: 32px;
}
@media (max-width: 600px) { .tarjeta { padding: 24px 20px; } }
.tarjeta h2 { font-size: 28px; margin: 0 0 14px; }
.tarjeta h2 a { color: inherit; text-decoration: none; }
.tarjeta h2 a:hover { text-decoration: underline; }
/* Subtítulos y citas dentro de artículos largos (p. ej. datos curiosos) */
.tarjeta h3 { margin: 28px 0 8px; }
.tarjeta h4 { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; color: var(--azul); margin: 20px 0 6px; }
.tarjeta blockquote.aviso { margin: 16px 0; max-width: 760px; }

/* Bloque texto + imagen lado a lado */
.texto-con-imagen {
    display: grid;
    grid-template-columns: minmax(0, 760px) 320px;
    justify-content: space-between;
    gap: 28px;
    align-items: start;
}
.texto-con-imagen figure { margin: 0; }
.texto-con-imagen img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.texto-con-imagen p:first-child { margin-top: 0; }
@media (max-width: 700px) {
    .texto-con-imagen { grid-template-columns: 1fr; }
    .texto-con-imagen figure { order: -1; }
}

/* Glosario: necrológicas, obituarios y esquelas */
.glosario {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    padding: 0;
    overflow: hidden;
}
.glosario-texto { padding: 40px 44px 44px; }
.glosario-texto h2 { margin: 12px 0 28px; }
.definiciones { margin: 0; display: grid; gap: 22px; }
.definicion {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 16px;
}
.definicion-numero {
    grid-row: span 2;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 34px;
    line-height: 1;
    color: var(--oro-texto);
    opacity: 0.8;
}
.definicion-termino {
    margin: 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--azul);
}
.definicion-termino em { margin-left: 8px; font-size: 15px; font-weight: 400; color: var(--oro-texto); }
.definicion-texto { margin: 4px 0 0; color: var(--texto-suave); }
/* La definición de esquela se muestra dentro de un "recuadro de luto", como en el periódico */
.definicion.luto .definicion-cuerpo {
    padding: 16px 20px;
    border: 3px solid var(--tinta);
    outline: 1px solid var(--tinta);
    outline-offset: 3px;
    background: #fff;
}

/* Términos de la portada: inicial grande, definición y etiqueta de quién lo escribe */
.glosario-texto h2 + .terminos-entrada { margin: -16px 0 26px; font-size: 17px; color: var(--texto-suave); }
.terminos { display: grid; gap: 14px; }
.termino {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 20px 22px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.termino:hover { border-color: #b6cde6; box-shadow: 0 10px 24px rgba(2, 81, 151, 0.08); transform: translateX(4px); }
/* Tarjetas enlazadas (tipos de esquela de la portada) */
a.termino { color: inherit; text-decoration: none; }
a.termino .termino-autor::after { content: "→"; margin-left: 2px; transition: transform 0.2s ease; }
a.termino:hover .termino-autor::after { transform: translateX(4px); }
.termino-inicial {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--azul-claro);
    color: var(--azul);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
}
.termino-cuerpo h3 {
    margin: 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--azul);
}
.termino-cuerpo h3 em {
    margin-left: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    color: var(--oro-texto);
}
.termino-cuerpo p { margin: 6px 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--texto-suave); }
.termino-autor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--azul);
}
.termino-autor::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); }
/* La esquela, dentro de un "recuadro de luto" como en el periódico */
.termino-luto {
    border: 3px solid var(--tinta);
    outline: 1px solid var(--tinta);
    outline-offset: 3px;
    margin: 4px;
}
.termino-luto:hover { border-color: var(--tinta); }
.termino-luto .termino-inicial { background: var(--tinta); color: #fff; }
.termino-luto .termino-cuerpo h3 { color: var(--tinta); }
@media (max-width: 600px) {
    .termino { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 14px; }
    .termino-inicial { width: 40px; height: 40px; font-size: 22px; border-radius: 10px; }
    .termino-cuerpo h3 { font-size: 20px; }
    .termino-cuerpo h3 em { display: block; margin: 2px 0 0; }
    .termino:hover { transform: none; }
}

.glosario-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--azul-oscuro);
    color: rgba(255, 255, 255, 0.85);
    border-left: 2px solid var(--oro);
}
.glosario-panel figure { position: relative; margin: 0; }
.glosario-panel img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(0.85); }
.glosario-panel figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--azul-oscuro), rgba(2, 63, 118, 0) 60%);
}
.glosario-notas { padding: 4px 30px 32px; display: flex; flex-direction: column; flex: 1; }
.glosario-notas .antetitulo::after { content: ""; width: 36px; height: 1px; background: var(--oro); }
.glosario-notas ul { list-style: none; padding: 0; margin: 18px 0 24px; font-size: 15px; }
.glosario-notas li { position: relative; padding-left: 22px; margin-bottom: 14px; }
.glosario-notas li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    background: var(--oro);
    transform: rotate(45deg);
}
.glosario-notas .enlace-mas { margin-top: auto; color: #fff; }
/* Sobre los paneles azul oscuro el dorado se aclara para mantener el contraste */
.glosario-notas .antetitulo,
.tarifas-ediciones .antetitulo,
.contacto-panel .antetitulo { color: var(--oro-claro); }
.glosario-notas .enlace-mas span { color: var(--oro-claro); transition: transform 0.2s ease; }
.glosario-notas .enlace-mas:hover span { transform: translateX(4px); }
@media (max-width: 900px) {
    .glosario { grid-template-columns: 1fr; }
    .glosario-panel { border-left: 0; border-top: 2px solid var(--oro); }
}
@media (max-width: 600px) {
    .glosario-texto { padding: 28px 20px 32px; }
    .definicion { grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; }
    .definicion-numero { font-size: 26px; }
    .glosario-notas { padding: 4px 20px 28px; }
}

.enlace-mas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-weight: 600;
    text-decoration: none;
}
.enlace-mas:hover { text-decoration: underline; }

.lista-check { padding: 0; list-style: none; }
.lista-check li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.lista-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--azul-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23025197' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Razones: franja a ancho completo, infografía a la izquierda y texto a la derecha */
.franja-razones {
    background: #fff;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    padding: 64px 0;
    margin: 24px 0 56px;
}
.razones-layout {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
/* La infografía acompaña al texto mientras se lee */
.razones-imagen {
    position: sticky;
    top: calc(var(--alto-menu) + 24px);
    display: block;
    padding: 0;
    border: 0;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--fondo);
    box-shadow: 0 18px 40px -16px rgba(2, 81, 151, 0.35);
    cursor: zoom-in;
    font: inherit;
}
.razones-imagen img { width: 100%; transition: transform 0.5s ease; }
.razones-imagen:hover img, .razones-imagen:focus-visible img { transform: scale(1.03); }
.razones-imagen:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.razones-ampliar {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--azul);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(2, 81, 151, 0.18);
}
.razones-texto h2 { font-size: clamp(28px, 3vw, 36px); margin: 0 0 16px; }
.razones-entrada { margin: 0; max-width: 680px; font-size: 17px; }
@media (max-width: 900px) {
    .razones-layout { grid-template-columns: 1fr; gap: 36px; }
    .razones-imagen { position: relative; top: auto; max-width: 440px; margin: 0 auto; order: 0; }
}
@media (max-width: 600px) { .franja-razones { padding: 44px 0; } }
/* Portada: el cuerpo alterna recuadros sobre el fondo y franjas blancas a ancho completo */
.razones-recuadro, .formatos-recuadro { padding: 48px 44px; }
@media (max-width: 600px) { .razones-recuadro, .formatos-recuadro { padding: 28px 18px; } }

/* Plantilla en vivo de la portada: franja azul con un formulario que rellena la esquela de ejemplo */
.plantilla-viva {
    background:
        radial-gradient(ellipse at 90% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%),
        linear-gradient(115deg, #032c55 0%, var(--azul-oscuro) 45%, var(--azul) 100%);
    color: #fff;
    padding: 64px 0;
    margin: 24px 0 56px;
    border-top: 2px solid var(--oro);
}
.plantilla-viva-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 56px;
    align-items: center;
}
.plantilla-viva .antetitulo { color: var(--oro-claro); }
.plantilla-viva h2 { color: #fff; font-size: clamp(28px, 3vw, 36px); margin: 12px 0 12px; }
.plantilla-viva h2 a { color: inherit; text-decoration: none; }
.plantilla-viva h2 a:hover { text-decoration: underline; }
.plantilla-viva-texto > p { margin: 0 0 24px; max-width: 620px; color: rgba(255, 255, 255, 0.88); }
.plantilla-viva-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    max-width: 620px;
}
.plantilla-viva-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.plantilla-viva-form .ancho { grid-column: 1 / -1; }
.plantilla-viva-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.plantilla-viva-form input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.78); }
.plantilla-viva-form input[type="text"]:focus { outline: none; border-color: var(--oro-claro); background: rgba(255, 255, 255, 0.16); }
.plantilla-viva-form .casilla { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.plantilla-viva-form .casilla input { width: 18px; height: 18px; accent-color: var(--oro); }
.plantilla-viva-nota { margin: 14px 0 0; max-width: 620px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.plantilla-viva-nota a { color: #fff; }
.plantilla-viva .plantilla-acciones { margin-top: 24px; }
.plantilla-viva .boton-plantilla { background: #fff; color: var(--azul); }
.plantilla-viva .boton-plantilla:hover { background: var(--azul-claro); }
.plantilla-viva .enlace-mas { color: #fff; }

.plantilla-viva-muestra { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.plantilla-viva .esquela-modelo { max-width: 400px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
.plantilla-viva .esquela-modelo .esquela-cruz[hidden] { display: none; }
.plantilla-viva .plantilla-leyenda { color: rgba(255, 255, 255, 0.75); }
/* Al rellenar un dato deja de verse como campo y aparece con una transición suave */
.esquela-modelo .relleno { animation: dato-relleno 0.4s ease; }
@keyframes dato-relleno { from { background: #fff3b0; } to { background: transparent; } }

@media (max-width: 960px) {
    .plantilla-viva-layout { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
    .plantilla-viva { padding: 44px 0; }
    .plantilla-viva-form { gap: 10px; }
    .plantilla-viva-form input[type="text"] { padding: 9px 10px; font-size: 14px; }
    .plantilla-viva .esquela-modelo { padding: 24px 16px; }
}
.franja-plantilla .plantilla-texto h2 a,
.franja-tarifas h2 a { color: inherit; text-decoration: none; }
.franja-plantilla .plantilla-texto h2 a:hover,
.franja-tarifas h2 a:hover { text-decoration: underline; }
.franja-tarifas {
    background: #fff;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    padding: 64px 0;
    margin: 24px 0 56px;
}
.franja-tarifas h2 { font-size: clamp(28px, 3vw, 36px); }
@media (max-width: 600px) { .franja-tarifas { padding: 44px 0; } }
.cuerpo > .contenedor:last-child > .tarjeta { margin-bottom: 0; }

.razones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 32px; }
@media (max-width: 600px) { .razones { grid-template-columns: 1fr; } }
.razon { display: flex; gap: 16px; align-items: flex-start; }
.razon-icono {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--azul-claro);
    display: grid;
    place-items: center;
}
.razon h3 { font-family: 'Inter', sans-serif; font-size: 17px; margin: 0 0 4px; }
.razon p { margin: 0; font-size: 15px; color: var(--texto-suave); }
.cierre-razones {
    text-align: center;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--borde);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 22px;
    color: var(--azul);
}

/* Plantilla: texto a la izquierda y esquela de ejemplo a la derecha */
.plantilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    padding: 0;
    overflow: hidden;
}
.plantilla-texto { padding: 40px 44px 44px; }
.plantilla-texto h2 { margin: 12px 0 14px; }
.plantilla-texto > p { margin: 0; color: var(--texto); }
.plantilla-subtitulo {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 28px 0 12px;
}
.emblemas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.emblemas li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--fondo);
    color: var(--azul);
    font-size: 14px;
    font-weight: 500;
}
.plantilla-pasos { list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.plantilla-pasos li {
    position: relative;
    counter-increment: paso;
    padding: 0 0 12px 40px;
    font-size: 15px;
    color: var(--texto-suave);
}
.plantilla-pasos li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: -1px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.plantilla-pasos strong { color: var(--texto); }
.plantilla-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 22px; }
.plantilla-acciones .enlace-mas { margin-top: 0; }
.boton-plantilla {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--azul);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.boton-plantilla:hover { background: var(--azul-oscuro); transform: translateY(-1px); }

/* Zona de la esquela de ejemplo, sobre un fondo suave con trama de puntos */
.plantilla-muestra {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 36px;
    background: var(--azul-claro) radial-gradient(rgba(2, 81, 151, 0.12) 1px, transparent 1px) 0 0 / 16px 16px;
    border-left: 1px solid var(--borde);
}
.esquela-modelo {
    width: 100%;
    max-width: 380px;
    padding: 30px 26px;
    background: #fff;
    border: 3px solid #111;
    outline: 1px solid #111;
    outline-offset: 4px;
    box-shadow: 0 24px 40px -18px rgba(6, 31, 61, 0.45);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 15px;
    line-height: 1.55;
    color: #1a1a1a;
    text-align: center;
    transition: transform 0.4s ease;
}
.plantilla:hover .esquela-modelo { transform: translateY(-4px); }
.esquela-modelo p { margin: 0 0 12px; }
.esquela-cruz { display: block; margin: 0 auto 14px; color: #111; }
.esquela-nombre { font-size: 18px; font-weight: 700; }
.esquela-dep { font-size: 22px; font-weight: 700; letter-spacing: 4px; margin: 4px 0 12px; }
.esquela-ruego { margin-bottom: 0 !important; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.campo {
    display: inline-block;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--azul-claro);
    border-bottom: 1.5px dashed var(--azul);
    color: var(--azul);
    font-family: 'Inter', sans-serif;
    font-size: 0.82em;
    font-weight: 500;
    line-height: 1.6;
}
.plantilla-leyenda { font-size: 13px; color: var(--texto-suave); }
/* Datos escritos por el usuario en las vistas previas: verde oscuro, distinto del texto fijo
   (negro) y de los campos pendientes (azul). Contraste sobre blanco ≥ 4,5:1 */
.esquela-modelo .dato-usuario,
.plantilla-leyenda .dato-usuario { color: #0f6b3d; font-weight: 600; }
.esquela-modelo .dato-usuario { background: transparent; border-bottom: 0; }
/* En la franja azul de la portada la leyenda va sobre azul: verde claro */
.plantilla-viva .plantilla-leyenda .dato-usuario { color: #a6efc3; }

/* Plantilla a ancho completo (página de plantilla): sin recuadro, franja blanca con líneas */
.franja-plantilla {
    background: #fff;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    margin: -56px 0 56px;
}
.franja-plantilla .plantilla { overflow: visible; }
.franja-plantilla .plantilla-texto { padding: 56px 48px 56px 20px; }
.franja-plantilla .plantilla-texto h2 { font-size: clamp(28px, 3vw, 36px); }
/* El panel azul de la muestra se prolonga hasta el borde derecho de la pantalla */
/* «clip» (y no «hidden») para no romper la vista previa fija del generador */
.franja-plantilla { overflow-x: clip; }
.franja-plantilla .plantilla-muestra {
    border-left: 0;
    padding: 56px 40px;
    background: var(--azul-claro);
    box-shadow: 0 0 0 100vmax var(--azul-claro);
    clip-path: inset(0 -100vmax 0 0);
}
@media (max-width: 960px) {
    .franja-plantilla .plantilla-texto { padding: 44px 20px 36px; }
    .franja-plantilla .plantilla-muestra { border-top: 0; padding: 40px 20px 48px; box-shadow: none; clip-path: none; }
}

/* ============ GENERADOR DE ESQUELAS (PÁGINA DE PLANTILLA) ============ */
/* Botones para elegir entre plantilla guiada y plantilla en blanco */
.modos-plantilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.modo-plantilla {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 2px solid var(--azul);
    border-radius: var(--radio);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.modo-plantilla:hover, .modo-plantilla:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(2, 81, 151, 0.55);
}
.modo-plantilla:hover { outline: none; }
.modo-plantilla strong { display: block; font-size: 17px; }
.modo-plantilla small { display: block; font-size: 13px; opacity: 0.85; }
.modo-icono {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
}
.modo-guiado { background: var(--azul); color: #fff; }
.modo-guiado .modo-icono { background: rgba(255, 255, 255, 0.16); }
.modo-guiado:hover { background: var(--azul-oscuro); }
.modo-blanco { background: #fff; color: var(--azul); }
.modo-blanco .modo-icono { background: var(--azul-claro); }
.modo-blanco:hover { background: var(--azul-claro); }
.modo-blanco small { color: var(--texto-suave); opacity: 1; }
@media (max-width: 480px) { .modos-plantilla { grid-template-columns: 1fr; } }

/* Página de plantilla: franja inicial a ancho completo, pegada a la cabecera y sin raya,
   con los dos modos en grande y, debajo, la plantilla guiada */
.franja-plantilla.plantilla-inicio { margin-top: -56px; border-top: 0; }
.modos-cabecera { padding-top: 48px; padding-bottom: 36px; }
.modos-cabecera h2 { font-size: clamp(28px, 3vw, 36px); margin: 12px 0 12px; }
.modos-cabecera > p { margin: 0 0 24px; max-width: 860px; }
.plantilla-inicio .plantilla { border-top: 0; }
.franja-plantilla.plantilla-inicio .plantilla-texto { padding-top: 40px; }
@media (max-width: 960px) {
    .modos-cabecera { padding-top: 36px; }
    .franja-plantilla.plantilla-inicio .plantilla-texto { padding-top: 32px; }
}
.modos-grandes { margin: 0; gap: 16px; }
.modos-grandes .modo-plantilla { padding: 22px 24px; gap: 18px; }
.modos-grandes .modo-icono { width: 56px; height: 56px; border-radius: 14px; }
.modos-grandes .modo-plantilla strong { font-size: 21px; font-family: 'Source Serif 4', Georgia, serif; }
.modos-grandes .modo-plantilla small { font-size: 14px; margin-top: 2px; }
@media (max-width: 600px) { .modos-grandes { grid-template-columns: 1fr; } }

/* Botones <button> con el aspecto de los enlaces-botón */
button.boton-plantilla { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
button.boton-ver:disabled { opacity: 0.45; cursor: not-allowed; }

/* Plantilla guiada: un camino que se recorre con el scroll.
   - Los seis pasos van seguidos, colgados de una línea vertical que se rellena de dorado al bajar
     (--avance, de 0 a 1, lo pone js/plantilla.js). El paso actual se destaca y los anteriores quedan como hechos.
   - A la derecha, en un panel azul tinta que acompaña al usuario: el índice de pasos, la vista previa (con la
     parte de la esquela del paso actual iluminada) y las acciones. En móvil, ese panel es una pestaña
     pegada abajo que se despliega. */
.camino {
    --avance: 0;
    position: relative;
    padding-left: 62px;
}
.camino::before,
.camino::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 24px;
    bottom: 24px;
    width: 3px;
    border-radius: 3px;
}
.camino::before { background: repeating-linear-gradient(180deg, #c8d9ec 0 6px, transparent 6px 12px); }
.camino::after {
    background: linear-gradient(180deg, var(--azul), var(--oro));
    transform: scaleY(var(--avance));
    transform-origin: top;
    transition: transform 0.15s linear;
}
.asistente.generador { margin-top: 28px; gap: 26px; }
.asistente .generador-paso {
    position: relative;
    padding: 22px 24px 24px;
    border: 1px solid var(--borde);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px -14px rgba(6, 31, 61, 0.35);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .8, .3, 1);
}
/* Número del paso, sobre la línea del camino */
.asistente .generador-numero {
    position: absolute;
    z-index: 1;
    left: -62px;
    top: 16px;
    width: 46px;
    height: 46px;
    border: 3px solid #fff;
    background: #fff;
    color: var(--azul);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 19px;
    font-weight: 700;
    box-shadow: 0 0 0 1.5px #b6cde6;
    transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.asistente .generador-paso legend { padding: 0; font-size: 21px; }
.asistente .paso-hecho .generador-numero { background: var(--azul); color: #fff; box-shadow: 0 0 0 1.5px var(--azul); }
.asistente .paso-actual { border-color: var(--oro); box-shadow: 0 18px 36px -18px rgba(6, 31, 61, 0.45), 0 0 0 3px rgba(224, 196, 143, 0.35); }
.asistente .paso-actual .generador-numero {
    background: var(--oro);
    color: var(--tinta);
    box-shadow: 0 0 0 1.5px var(--oro), 0 0 0 8px rgba(224, 196, 143, 0.35);
    transform: scale(1.08);
}
.asistente .generador-paso:focus { outline: none; }
.asistente .generador-paso:focus-visible { outline: 3px solid rgba(2, 81, 151, 0.35); outline-offset: 3px; }
.asistente-ayuda { margin: 0; font-size: 15px; color: var(--texto-suave); }
.asistente-final { justify-content: flex-start; }
/* Los pasos aparecen al entrar en pantalla */
.camino-preparado .generador-paso { opacity: 0; transform: translateY(26px); }
.camino-preparado .generador-paso.paso-visto { opacity: 1; transform: none; }

/* Panel de la derecha: azul tinta, con el índice, la vista previa y las acciones */
.franja-plantilla .generador-vista {
    background: radial-gradient(ellipse 70% 40% at 50% 30%, rgba(255, 236, 200, 0.14), transparent 70%), var(--tinta);
    box-shadow: 0 0 0 100vmax var(--tinta);
}
.generador-vista .generador-vista-titulo { color: var(--oro-claro); }
.vista-cabecera { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.vista-cabecera .asistente-estado { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.vista-desplegar { display: none; }
.asistente-barra { width: 100%; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.asistente-barra span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--oro-claro), var(--oro)); transition: width 0.35s ease; }
.vista-cuerpo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.asistente-progreso { width: 100%; }
.asistente-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.asistente-pasos button {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.6);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}
.asistente-pasos button span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 13px;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.asistente-pasos button:hover { color: #fff; }
.asistente-pasos button:hover span { border-color: #fff; }
.asistente-pasos button.hecho { color: rgba(255, 255, 255, 0.85); }
.asistente-pasos button.hecho span { background: rgba(255, 255, 255, 0.16); border-color: transparent; }
.asistente-pasos button[aria-current="step"] { color: var(--oro-claro); }
.asistente-pasos button[aria-current="step"] span { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 0 4px rgba(224, 196, 143, 0.3); }
.asistente-pasos button:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; border-radius: 8px; }
.generador-vista .plantilla-leyenda { color: rgba(255, 255, 255, 0.75); text-align: center; }
.generador-vista .plantilla-leyenda .dato-usuario { color: #a6efc3; }
.generador-vista .generador-aviso { color: var(--oro-claro); }
.generador-vista .boton-plantilla { background: var(--oro); color: var(--tinta); }
.generador-vista .boton-plantilla:hover { background: var(--oro-claro); }
.generador-vista .esquela-modelo { box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.7); }

/* Parte de la esquela que corresponde al paso actual: se ilumina */
.esquela-modelo [data-parte] { border-radius: 4px; transition: background-color 0.4s ease, box-shadow 0.4s ease; }
.esquela-modelo[data-paso="1"] [data-parte="1"],
.esquela-modelo[data-paso="2"] [data-parte="2"],
.esquela-modelo[data-paso="3"] [data-parte="3"],
.esquela-modelo[data-paso="4"] [data-parte="4"],
.esquela-modelo[data-paso="5"] [data-parte="5"] {
    background-color: rgba(224, 196, 143, 0.32);
    box-shadow: 0 0 0 5px rgba(224, 196, 143, 0.32);
}
.esquela-modelo[data-paso="1"] svg[data-parte="1"] { background: none; box-shadow: none; filter: drop-shadow(0 0 6px rgba(165, 132, 79, 0.9)); }
.esquela-modelo[data-paso="6"] { box-shadow: 0 0 0 4px rgba(224, 196, 143, 0.6), 0 30px 60px -22px rgba(0, 0, 0, 0.7); }

@media (prefers-reduced-motion: reduce) {
    .asistente-barra span, .camino::after, .asistente .generador-paso, .asistente .generador-numero { transition: none; }
}
@media (max-width: 600px) {
    .camino { padding-left: 46px; }
    .camino::before, .camino::after { left: 15px; }
    .asistente .generador-numero { left: -46px; width: 34px; height: 34px; font-size: 15px; border-width: 2px; }
    .asistente .generador-paso { padding: 18px 16px 20px; }
    .asistente .generador-paso legend { font-size: 18px; }
    /* En el índice solo los números: el nombre del paso ya se lee en la cabecera de la pestaña */
    .asistente-pasos button { font-size: 0; }
    .asistente-pasos button span { width: 32px; height: 32px; font-size: 14px; }
}

.generador [hidden] { display: none !important; }
.generador-ayuda { margin: 14px 0 0; font-weight: 600; color: var(--azul); }
.generador { margin-top: 26px; gap: 14px; }
.generador-paso {
    margin: 0;
    padding: 20px 22px 22px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    display: grid;
    gap: 14px;
    min-width: 0;
}
.generador-paso legend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--azul);
}
.generador-numero {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}
/* Opciones elegibles como pastillas */
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px solid var(--borde);
    border-radius: 999px;
    background: #fff;
    color: var(--texto);
    font-size: 15px;
    font-weight: 600;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.opcion:hover span { border-color: var(--azul); }
.opcion input:checked + span {
    background: var(--azul);
    border-color: var(--azul);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(2, 81, 151, 0.6);
}
.opcion input:focus-visible + span { outline: 3px solid rgba(2, 81, 151, 0.35); outline-offset: 2px; }
.opciones-compactas .opcion span { padding: 7px 13px; font-size: 14px; }
.generador .etiqueta { font-size: 14px; font-weight: 600; color: var(--texto); }
.generador-enlace { font-size: 13px; font-weight: 600; }
.generador-nota { font-size: 13px; color: var(--texto-suave); }
.formulario .fila-nombre { grid-template-columns: 140px minmax(0, 1fr); }
.formulario .fila-tres { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.7fr); }
.formulario select,
.formulario input[type="date"],
.formulario input[type="number"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--texto);
}
.formulario select:focus, .formulario input[type="date"]:focus, .formulario input[type="number"]:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(2, 81, 151, 0.15);
}
.formulario input[type="file"] { font-size: 14px; }
.casilla { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.casilla input { width: 18px; height: 18px; accent-color: var(--azul); }

/* Vista previa: se queda a la vista mientras se rellenan los datos */
.generador-vista { justify-content: flex-start; }
.generador-vista-interior {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.generador-vista-titulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--oro-texto);
}
.esquela-anagrama {
    width: 120px;
    min-height: 56px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border: 1.5px dashed var(--azul);
    border-radius: 6px;
    background: var(--azul-claro);
    color: var(--azul);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}
.esquela-anagrama:has(img) { border: 0; background: none; }
.esquela-anagrama img { max-width: 120px; max-height: 70px; object-fit: contain; }
.esquela-modelo .esquela-titulo { font-size: 13px; font-weight: 700; letter-spacing: 3px; }
.esquela-modelo .esquela-empresa { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.esquela-modelo .esquela-pequena { font-size: 13px; font-style: italic; }
.generador-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.generador-acciones .boton-plantilla { padding: 12px 22px; }
.generador-acciones .boton-ver { cursor: pointer; padding: 10px 16px; }
.generador-aviso { min-height: 20px; font-size: 13px; font-weight: 600; color: var(--azul); }
@media (min-width: 961px) {
    /* En escritorio el panel acompaña al usuario mientras baja por el camino y cabe entero en la pantalla */
    .generador-vista-interior {
        position: sticky;
        top: calc(var(--alto-menu) + 20px);
        max-height: calc(100vh - var(--alto-menu) - 40px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }
}
@media (max-width: 960px) {
    /* En tableta y móvil el panel es una pestaña pegada abajo: muestra el paso actual y, al
       desplegarla, la esquela con el índice y las acciones */
    .franja-plantilla .generador-vista {
        position: sticky;
        bottom: 0;
        z-index: 6;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 30px -10px rgba(6, 31, 61, 0.55);
    }
    .generador-vista-interior { gap: 10px; }
    .vista-cabecera { flex-wrap: nowrap; }
    .vista-cabecera .generador-vista-titulo { display: none; }
    .vista-cabecera .asistente-estado { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vista-desplegar {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border: 0;
        border-radius: 999px;
        background: var(--oro);
        color: var(--tinta);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }
    .vista-desplegar svg { transition: transform 0.3s ease; }
    .generador-vista.abierta .vista-desplegar svg { transform: rotate(180deg); }
    .vista-cuerpo { display: none; }
    .generador-vista.abierta .vista-cuerpo { display: flex; max-height: calc(78vh - 90px); overflow-y: auto; padding: 6px 2px 4px; }
    .generador-vista .esquela-modelo { max-width: 340px; }
}
@media (max-width: 600px) {
    .generador-paso { padding: 16px 14px 18px; }
    .formulario .fila-nombre { grid-template-columns: 1fr; }
    .formulario .fila-tres { grid-template-columns: 1fr 1fr; }
}

/* ============ ANIVERSARIOS Y FAMILIAR / EMPRESA (PÁGINA DE PLANTILLA) ============ */
/* Franja a ancho completo con dos bloques separados por una línea; cierra el contenido
   pegada a la franja de ediciones */
.franja-aniversario {
    background: var(--azul-claro) radial-gradient(rgba(2, 81, 151, 0.08) 1px, transparent 1px) 0 0 / 18px 18px;
    border-top: 1px solid var(--borde);
    padding: 64px 0;
    margin: 24px 0 -56px;
}
.aniversario-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
.aniversario-bloque { padding: 0 48px; }
.aniversario-bloque:first-child { padding-left: 0; }
.aniversario-bloque:last-child { padding-right: 0; border-left: 1px solid #c7d9ed; }
.aniversario-icono {
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--azul);
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(2, 81, 151, 0.7);
}
.aniversario-bloque h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 12px 0 14px; }
.aniversario-bloque > p { margin: 0 0 20px; }
.aniversario-bloque .tarifas-notas { grid-template-columns: 1fr; gap: 14px; margin-bottom: 22px; }
.aniversario-bloque .tarifas-notas li { color: var(--texto); }
.aniversario-bloque .enlace-mas { margin-top: 0; }
.aniversario-enlaces { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 900px) {
    .aniversario-columnas { grid-template-columns: 1fr; gap: 44px; }
    .aniversario-bloque, .aniversario-bloque:first-child, .aniversario-bloque:last-child { padding: 0; border-left: 0; }
    .aniversario-bloque:last-child { padding-top: 44px; border-top: 1px solid #c7d9ed; }
}
@media (max-width: 600px) { .franja-aniversario { padding: 44px 0; } }

/* Frase destacada con sombreado amarillo claro */
mark.resaltado {
    background: #fff3b0;
    color: inherit;
    padding: 2px 6px;
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
@media (max-width: 960px) {
    .plantilla { grid-template-columns: 1fr; }
    .plantilla-muestra { border-left: 0; border-top: 1px solid var(--borde); }
}
@media (max-width: 600px) {
    .plantilla-texto { padding: 28px 20px 32px; }
    .plantilla-muestra { padding: 32px 18px; }
    .esquela-modelo { padding: 24px 16px; }
}

/* ============ SIGLAS ============ */
.siglas-intro {
    display: grid;
    grid-template-columns: minmax(0, 760px) 200px;
    justify-content: space-between;
    gap: 28px;
    align-items: start;
}
.siglas-intro p:first-child { margin-top: 0; }
.infografia-miniatura {
    display: block;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;
    font: inherit;
    color: var(--azul);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.infografia-miniatura:hover, .infografia-miniatura:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(2, 81, 151, 0.15);
    border-color: var(--azul);
    outline: none;
}
.infografia-miniatura img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; }
.infografia-miniatura span {
    display: block;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    border-top: 1px solid var(--borde);
}
@media (max-width: 600px) {
    .siglas-intro { grid-template-columns: 1fr; }
    .infografia-miniatura { max-width: 200px; }
}

.siglas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 20px; }
@media (max-width: 960px) { .siglas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .siglas { grid-template-columns: 1fr; } }
.sigla { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--borde); }
.sigla-abrev {
    flex-shrink: 0;
    width: 82px;
    padding: 12px 4px;
    border-radius: 10px;
    background: var(--azul-claro);
    color: var(--azul);
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    line-height: 1.1;
}
.sigla h3 { font-size: 18px; margin: 0 0 4px; }
.sigla p { margin: 0; font-size: 15px; color: var(--texto-suave); }
.cierre-siglas { font-style: italic; }

/* ============ GALERÍA DE FORMATOS ============ */
.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
    margin-top: 20px;
}
.formato {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    cursor: zoom-in;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.formato:hover, .formato:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(2, 81, 151, 0.15);
    border-color: var(--azul);
    outline: none;
}
.formato .miniatura { aspect-ratio: 1096 / 1398; background: var(--fondo); overflow: hidden; }
.formato .miniatura img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.formato:hover .miniatura img { transform: scale(1.04); }
.formato .pie {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--borde);
}
.formato .pie strong { display: block; color: var(--azul); font-size: 15px; }
.formato .pie span { font-size: 13px; color: var(--texto-suave); }

/* ============ DIMENSIONES: FRANJA A ANCHO COMPLETO ============ */
.franja-dimensiones {
    background: #fff;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    padding: 64px 0;
    margin: 24px 0 56px;
}
.dimensiones-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 48px;
    align-items: center;
    margin-bottom: 36px;
}
.dimensiones-cabecera h2 { font-size: clamp(28px, 3vw, 36px); margin: 12px 0 14px; }
.dimensiones-cabecera h2 a { color: inherit; text-decoration: none; }
.dimensiones-cabecera h2 a:hover { text-decoration: underline; }
.dimensiones-cabecera p { margin: 0; max-width: 620px; font-size: 17px; }

/* Ficha del módulo base con un dibujo acotado */
.modulo-base {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 24px;
    border-radius: var(--radio);
    background: var(--azul-claro) radial-gradient(rgba(2, 81, 151, 0.12) 1px, transparent 1px) 0 0 / 16px 16px;
}
.modulo-base strong { display: block; font-family: 'Source Serif 4', Georgia, serif; font-size: 20px; color: var(--azul); }
.modulo-base > div:last-child > span { display: block; font-weight: 600; color: var(--texto); font-size: 15px; }
.modulo-base p { margin: 6px 0 0; font-size: 14px; color: var(--texto-suave); }
.modulo-dibujo { position: relative; flex-shrink: 0; width: 140px; height: 92px; }
.modulo-caja {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90px;
    height: 58px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid var(--azul);
    border-radius: 3px;
    box-shadow: 0 8px 18px -8px rgba(2, 81, 151, 0.45);
    font-size: 11px;
    font-weight: 600;
    color: var(--azul);
}
.cota { position: absolute; font-size: 11px; font-weight: 600; color: var(--oro-texto); white-space: nowrap; }
.cota-ancho { left: 0; top: 6px; width: 90px; text-align: center; border-bottom: 1px solid var(--oro); padding-bottom: 2px; }
.cota-alto { left: 98px; bottom: 0; height: 58px; display: flex; align-items: center; border-left: 1px solid var(--oro); padding-left: 4px; }

/* Número del formato sobre la miniatura */
.formato .miniatura { position: relative; }
.formato-numero {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(2, 81, 151, 0.3);
}
/* Lupa al pasar el ratón */
.formato .miniatura::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(2, 63, 118, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / 40px no-repeat;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.formato:hover .miniatura::after, .formato:focus-visible .miniatura::after { opacity: 1; }
/* Esquema proporcional de módulos (alto x ancho) */
.modulos {
    flex-shrink: 0;
    width: calc(var(--an) * 9px + 1px);
    height: calc(var(--al) * 6px + 1px);
    background:
        repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 9px),
        repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 6px),
        var(--azul);
    border-radius: 2px;
}
.franja-dimensiones .galeria { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; }
.dimensiones-pie { margin-top: 32px; text-align: center; }
@media (max-width: 900px) {
    .dimensiones-cabecera { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
    .franja-dimensiones { padding: 44px 0; }
    .modulo-base { flex-direction: column; align-items: flex-start; }
    .franja-dimensiones .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* ============ FORMATOS DE LA PORTADA: SELECTOR CON VISTA PREVIA ============ */
.franja-formatos {
    background: var(--fondo);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    padding: 72px 0;
}
.formatos-cabecera { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.formatos-cabecera .antetitulo::after { content: ""; width: 36px; height: 1px; background: var(--oro); }
.formatos-cabecera h2 { font-size: clamp(28px, 3vw, 38px); margin: 12px 0 12px; }
.formatos-cabecera h2 a { color: inherit; text-decoration: none; }
.formatos-cabecera h2 a:hover { text-decoration: underline; }
.formatos-cabecera p { margin: 0; color: var(--texto-suave); font-size: 17px; }

.formatos-visor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 40px;
    align-items: center;
}
.formatos-selector {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.formato-opcion {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    font: inherit;
    text-align: left;
    color: var(--texto);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.formato-opcion:hover { border-color: var(--azul); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(2, 81, 151, 0.1); }
.formato-opcion[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 12px 26px rgba(2, 81, 151, 0.25); }
/* Rectángulo dibujado a escala: 0,17 px por mm (el Modelo 7 ocupa casi toda la caja) */
.formato-escala {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    border-left: 1px dashed var(--borde);
    border-bottom: 1px dashed var(--borde);
}
.formato-escala span {
    width: calc(var(--ancho) * 0.17px);
    height: calc(var(--alto) * 0.17px);
    border: 2px solid var(--azul);
    background: var(--azul-claro);
    border-radius: 2px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.formato-opcion[aria-pressed="true"] .formato-escala { border-color: rgba(255, 255, 255, 0.35); }
.formato-opcion[aria-pressed="true"] .formato-escala span { border-color: var(--oro-claro); background: rgba(255, 255, 255, 0.15); }
.formato-texto strong { display: block; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--azul); }
.formato-texto small { font-size: 13px; color: var(--texto-suave); }
.formato-opcion[aria-pressed="true"] .formato-texto strong { color: #fff; }
.formato-opcion[aria-pressed="true"] .formato-texto small { color: rgba(255, 255, 255, 0.8); }

.formato-vista { margin: 0; }
.formato-vista-imagen {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 40px rgba(2, 81, 151, 0.14);
    cursor: zoom-in;
}
.formato-vista-imagen img { display: block; width: 100%; height: auto; }
.formato-vista-ampliar {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--azul);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.formato-vista figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-top: 14px;
}
.formato-vista figcaption strong { font-family: 'Source Serif 4', Georgia, serif; font-size: 21px; color: var(--azul); }
.formato-vista figcaption > span { font-size: 14px; color: var(--texto-suave); }
.formato-vista-precio { flex-basis: 100%; }
.formato-vista-precio b { color: var(--texto); }

.formatos-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--borde);
}
.formatos-pie p { margin: 0; font-size: 14px; color: var(--texto-suave); }

@media (max-width: 900px) {
    .formatos-visor { grid-template-columns: 1fr; }
    .formato-vista { order: -1; max-width: 340px; width: 100%; margin: 0 auto; }
}
@media (max-width: 520px) {
    .franja-formatos { padding: 48px 0; }
    .formatos-selector { gap: 8px; }
    .formato-opcion { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
    .formato-texto strong { font-size: 16px; }
}

/* ============ TABLA DE TARIFAS ============ */
.tabla-scroll { max-width: 760px; overflow-x: auto; margin: 18px 0 6px; border: 1px solid var(--borde); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
    background: var(--azul-claro);
    color: var(--azul);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.6px;
    padding: 12px;
    text-align: left;
}
td { padding: 12px; border-top: 1px solid var(--borde); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #fafcfe; }

/* Tarifas: cabecera con etiquetas, tabla y aviso de otras ediciones */
.tarifas-cabecera h2 { margin: 12px 0 14px; }
.tarifas-etiquetas { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.tarifas-etiquetas li {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--fondo);
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-suave);
}
.tarifas-etiquetas .etiqueta-edicion { background: var(--azul); border-color: var(--azul); color: #fff; }
.tarifas-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: stretch;
}
.tarifas .tabla-scroll { max-width: none; margin: 0; box-shadow: var(--sombra); }
.tabla-tarifas caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.tabla-tarifas th { background: var(--azul); color: #fff; padding: 14px 18px; }
.tabla-tarifas th.col-domingo { background: var(--azul-oscuro); }
.tabla-tarifas td { padding: 14px 18px; color: var(--texto-suave); }
.tabla-tarifas td:first-child { color: var(--texto); font-weight: 600; }
.tabla-tarifas td.num {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--azul);
}
.tabla-tarifas td.col-domingo { background: rgba(2, 81, 151, 0.05); }
/* Precio con el 21 % de IVA incluido, junto al precio sin IVA */
.tabla-tarifas th.col-iva { background: var(--azul-oscuro); }
.tabla-tarifas td.col-iva { background: rgba(2, 81, 151, 0.05); }
.tabla-tarifas td.num { white-space: nowrap; }
/* En tableta caben las dos columnas de precio sin desplazar la tabla */
@media (min-width: 601px) and (max-width: 960px) {
    .tabla-tarifas th, .tabla-tarifas td { padding: 12px 10px; }
    .tabla-tarifas td.num { font-size: 16px; }
    .tabla-tarifas td.col-medidas { min-width: 0; }
}
@media (min-width: 601px) and (max-width: 760px) {
    /* Tableta estrecha: las medidas pasan debajo del formato, como en móvil */
    .tabla-tarifas .col-medidas { display: none; }
    .tarifa-medidas { display: block; }
}
.tabla-tarifas tbody tr:nth-child(even) { background: #fbfdff; }
.tabla-tarifas tbody tr:hover { background: var(--azul-claro); }
.tarifa-numero {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--azul-claro);
    color: var(--azul);
    font-size: 12px;
    font-weight: 700;
}
.tarifas-ediciones {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: var(--radio);
    background: var(--azul-oscuro);
    border-top: 2px solid var(--oro);
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
}
.tarifas-ediciones .antetitulo::after { content: ""; width: 36px; height: 1px; background: var(--oro); }
.tarifas-ediciones p { margin: 12px 0 16px; }
.tarifas-ediciones strong { color: #fff; }
.tarifas-ediciones ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.tarifas-ediciones ul a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.tarifas-ediciones ul a:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--oro); }
.tarifas-telefono { margin-top: auto; color: #fff; font-weight: 600; text-decoration: none; }
.tarifas-telefono:hover { text-decoration: underline; }
.tarifas-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--borde);
}
.tarifas-pie p { margin: 0; font-size: 14px; color: var(--texto-suave); }
/* Botón para ver un formato ampliado desde una tabla */
.boton-ver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: #fff;
    color: var(--azul);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: zoom-in;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.boton-ver:hover, .boton-ver:focus-visible { background: var(--azul-claro); border-color: var(--azul); outline: none; }
.tabla-tarifas td.col-ver { text-align: center; }
.tabla-tarifas th.col-ver { text-align: center; }
/* Las medidas largas («61 × 45 ó 29 × 96 mm») pueden partirse en dos líneas */
.tabla-tarifas td.col-medidas { white-space: normal; min-width: 120px; font-size: 14px; }
/* Condiciones de publicación bajo una tabla de tarifas */
.tarifas-notas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.tarifas-notas li { position: relative; padding-left: 22px; font-size: 15px; color: var(--texto-suave); }
.tarifas-notas li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    background: var(--oro);
    transform: rotate(45deg);
}
.tarifas-notas strong { color: var(--texto); }
@media (max-width: 700px) { .tarifas-notas { grid-template-columns: 1fr; } }
.tarifa-medidas { display: none; font-size: 12px; font-weight: 400; color: var(--texto-suave); }
@media (max-width: 960px) { .tarifas-cuerpo { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    /* En móvil las medidas pasan debajo del formato para que quepan los precios */
    .tabla-tarifas .col-medidas { display: none; }
    .tarifa-medidas { display: block; }
    .tabla-tarifas th, .tabla-tarifas td { padding: 12px 8px; }
    .tabla-tarifas th { font-size: 11px; letter-spacing: 0.3px; }
    .tabla-tarifas td.num { font-size: 14px; }
    .tarifa-numero { display: none; }
    /* El botón «Ver» queda solo con la lupa */
    .boton-ver { padding: 6px; }
    .boton-ver .texto-ver { display: none; }

    /* Tablas con muchas columnas: cada fila pasa a ser una ficha apilada */
    .tabla-apilable thead { display: none; }
    .tabla-apilable tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: 6px 12px;
        padding: 12px 14px;
        border-top: 1px solid var(--borde);
    }
    .tabla-apilable tbody tr:first-child { border-top: 0; }
    .tabla-apilable td { display: block; padding: 0; border: 0; background: none !important; }
    .tabla-apilable td:first-child { grid-column: 1 / 3; }
    .tabla-apilable td.col-ver { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
    .tabla-apilable td.num { text-align: left; font-size: 16px; }
    .tabla-apilable td.num::before {
        content: attr(data-etiqueta);
        display: block;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--texto-suave);
    }
    .tabla-apilable .tarifa-numero { display: inline-grid; }
    .tabla-apilable .tarifa-medidas { white-space: normal; }
}

/* ============ FRANJA DE EDICIONES ============ */
.franja-ediciones { background: #fff; border-top: 1px solid var(--borde); padding: 64px 0; }
.franja-ediciones h2 { font-size: 32px; margin: 0 0 8px; }
.franja-ediciones > .contenedor > p { color: var(--texto-suave); margin: 0 0 28px; }
.ediciones {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 900px) { .ediciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ediciones { grid-template-columns: 1fr; } }
.ediciones a {
    position: relative;
    display: block;
    height: 100%;
    padding: 18px 40px 18px 20px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ediciones a::after {
    content: "→";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--azul);
    transition: right 0.2s ease;
}
.ediciones a:hover {
    background: #fff;
    border-color: var(--azul);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(2, 81, 151, 0.12);
}
.ediciones a:hover::after { right: 14px; }
.ediciones strong { display: block; color: var(--azul); font-size: 17px; }
.ediciones span { font-size: 13px; color: var(--texto-suave); }

/* Ediciones de la portada: la Nacional destacada a la izquierda y las locales agrupadas por zonas */
.ediciones-layout {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 900px) { .ediciones-layout { grid-template-columns: 1fr; gap: 36px; } }
.ediciones-intro h2 { margin: 12px 0 10px; }
.ediciones-intro > p { color: var(--texto-suave); margin: 0 0 26px; }
.edicion-destacada {
    position: relative;
    display: block;
    padding: 18px 24px 16px;
    border-radius: var(--radio);
    background: var(--azul) radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 16px 16px;
    color: #fff;
    text-decoration: none;
    border-top: 3px solid var(--oro);
    box-shadow: var(--sombra);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.edicion-destacada:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(2, 81, 151, 0.3); }
.edicion-destacada-etiqueta {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #f3e3c3;
}
.edicion-destacada strong {
    display: block;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 27px;
    font-weight: 600;
    margin: 2px 0 4px;
}
.edicion-destacada-texto { display: block; font-size: 15px; opacity: 0.85; margin-bottom: 10px; }
.edicion-destacada-enlace { font-weight: 600; font-size: 14px; color: #f3e3c3; }
.edicion-destacada-enlace span { display: inline-block; transition: transform 0.2s ease; }
.edicion-destacada:hover .edicion-destacada-enlace span { transform: translateX(4px); }

.ediciones-grupos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 28px;
    margin-top: 34px;
}
@media (max-width: 900px) { .ediciones-grupos { margin-top: 0; } }
@media (max-width: 700px) { .ediciones-grupos { grid-template-columns: 1fr; gap: 26px; } }
.ediciones-grupo h3 {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--oro-texto);
    margin: 0 0 6px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--azul);
}
.ediciones-lista { list-style: none; padding: 0; margin: 0; }
.ediciones-lista li { border-bottom: 1px solid var(--borde); }
.ediciones-lista a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 4px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 18px;
    white-space: nowrap;
    color: var(--tinta);
    text-decoration: none;
    transition: color 0.2s ease, padding 0.2s ease;
}
.ediciones-lista a::after { content: "→"; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--oro); opacity: 0; transition: opacity 0.2s ease; }
.ediciones-lista a:hover { color: var(--azul); padding-left: 10px; }
.ediciones-lista a:hover::after { opacity: 1; }
.ediciones-telefono { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--azul); }
.ediciones-otras {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding: 16px 20px;
    border-radius: var(--radio);
    background: var(--azul-claro);
    color: var(--texto);
    text-decoration: none;
    transition: background 0.2s ease;
}
.ediciones-otras strong { color: var(--azul); margin-right: 4px; }
.ediciones-otras > span:last-child { color: var(--azul); font-size: 18px; transition: transform 0.2s ease; }
.ediciones-otras:hover { background: #d9e6f4; }
.ediciones-otras:hover > span:last-child { transform: translateX(4px); }

/* ============ FRANJA FINAL DE CONTACTO ============ */
.franja-cta {
    background: var(--azul-oscuro);
    color: #fff;
    padding: 56px 0;
}
.franja-cta .contenedor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.franja-cta h2 { color: #fff; font-size: 30px; margin: 0 0 10px; }
.franja-cta p { margin: 0; max-width: 640px; opacity: 0.92; }
.franja-cta p a { color: #fff; }
.cta-acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.franja-cta .boton-telefono { background: #fff; color: var(--azul); font-size: 20px; padding: 14px 26px; }
.franja-cta .boton-telefono:hover { background: var(--azul-claro); }

/* ============ TAMBIÉN PUEDE INTERESARTE ============ */
.franja-interes { background: var(--fondo); border-top: 1px solid var(--borde); padding: 48px 0; text-align: center; }
.franja-interes .contenedor { max-width: 1320px; }
.franja-interes h2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oro-texto);
    margin: 0 0 20px;
}
.enlaces-interes {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
}
.enlaces-interes a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 15px;
    color: var(--azul);
    text-decoration: none;
    transition: background 0.2s ease;
}
.enlaces-interes a:hover { background: var(--azul-claro); }

/* ============ CUÁNDO PUBLICAR UNA ESQUELA ============ */
.cu-casos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.cu-caso { display: flex; flex-direction: column; padding: 24px 22px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); scroll-margin-top: var(--alto-menu); }
.cu-caso-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cu-caso-icono { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--azul-claro); color: var(--azul); }
.cu-caso-momento { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oro-texto); }
.cu-caso h3 { margin: 0 0 8px; font-size: 20px; }
.cu-caso p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--texto-suave); }
.cu-caso .cu-caso-firma { margin-bottom: 14px; color: var(--texto); }
.cu-caso .enlace-mas { margin-top: auto; }

/* ============ FORMATOS: LOS MODELOS EN LA PÁGINA (animación) ============ */
.fm-entrada { margin: 0 0 24px; color: var(--texto-suave); }
.fm-escena { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 28px; align-items: center; }
.fm-modelos { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fm-modelo { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.fm-modelo:hover { border-color: var(--azul); }
.fm-modelo.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.fm-modelo-num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--azul-claro); color: var(--azul); font-size: 14px; font-weight: 700; }
.fm-modelo.activo .fm-modelo-num { background: #fff; }
.fm-modelo-texto { display: flex; flex-direction: column; line-height: 1.25; }
.fm-modelo-texto strong { font-size: 15px; }
.fm-modelo-texto span { font-size: 13px; opacity: 0.8; }
.fm-pagina-marco { display: flex; justify-content: center; }
.fm-pagina { width: 100%; max-width: 380px; padding: 14px 14px 16px; background: #fff; border: 1px solid var(--borde); box-shadow: 0 24px 40px -18px rgba(6, 31, 61, 0.45); }
.fm-pagina-cabecera { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #111; font-family: 'Source Serif 4', Georgia, serif; font-size: 11px; letter-spacing: 0.08em; color: #111; }
.fm-pagina-cabecera span { font-size: 14px; color: var(--azul); }
.fm-zona { position: relative; aspect-ratio: 229 / 299; }
.fm-rejilla { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.fm-rejilla i { background: repeating-linear-gradient(to bottom, #e5eaf1 0 3px, transparent 3px 9px); }
.fm-bloque { position: absolute; top: 0; left: 0; width: 32.31%; height: 32.11%; container-type: size; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; border: 2px solid #111; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #111, 0 0 0 4px rgba(165, 132, 79, 0.35); transition: width 0.7s ease, height 0.7s ease; }
.fm-bloque-esquela { display: flex; flex-direction: column; align-items: center; gap: min(5cqh, 8px); width: 100%; padding-bottom: 22px; }
.fm-cruz { width: auto; height: min(16cqh, 28px); color: #111; }
.fm-texto { display: block; width: 44%; height: min(4cqh, 6px); border-radius: 2px; background: #c8d1dc; }
.fm-texto-nombre { width: 62%; height: min(6cqh, 10px); background: #111; }
.fm-texto-corto { width: 28%; }
.fm-medida { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.fm-barra { margin-top: 24px; }
.fm-rotulo { min-height: 54px; }
.fm-rotulo-nombre { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oro-texto); }
.fm-rotulo-texto { margin: 4px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--texto); }
@media (max-width: 760px) {
    .fm-escena { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .fm-pagina-marco { order: -1; }
    .fm-modelos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
    .fm-modelos li { flex: none; }
    .fm-modelo { padding: 6px 12px 6px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .fm-bloque { transition: none; }
}

/* ============ TARIFAS: TAMAÑOS Y PRECIOS SOBRE LA PÁGINA (animación) ============ */
.tp-entrada { margin: 0 0 24px; color: var(--texto-suave); }
.tp-escena { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 36px; align-items: center; }
.tp-hoja { position: relative; padding: 14px 14px 16px; background: #fdfcf8; border: 1px solid var(--borde); box-shadow: 0 24px 40px -18px rgba(6, 31, 61, 0.45); transform: rotate(-1deg); }
.tp-hoja-cabecera { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 3px double #111; font-family: 'Source Serif 4', Georgia, serif; color: #111; }
.tp-hoja-cabecera span { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tp-hoja-cabecera em { font-size: 11px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul); }
.tp-zona { position: relative; aspect-ratio: 248 / 307; overflow: hidden; }
/* Texto de relleno en cinco columnas, con algún titular */
.tp-columnas { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; }
.tp-columnas i { background:
    linear-gradient(#1a2533, #1a2533) 0 8% / 86% 5px no-repeat,
    linear-gradient(#1a2533, #1a2533) 0 calc(8% + 8px) / 60% 5px no-repeat,
    repeating-linear-gradient(to bottom, #dfe4ec 0 3px, transparent 3px 8px) 0 calc(8% + 22px) / 100% 100% no-repeat; }
.tp-columnas i:nth-child(2n) { background:
    linear-gradient(#1a2533, #1a2533) 0 46% / 80% 5px no-repeat,
    repeating-linear-gradient(to bottom, #dfe4ec 0 3px, transparent 3px 8px); }
.tp-esquela {
    position: absolute; left: 0; bottom: 0;
    width: 49.19%; height: 18.89%;
    container-type: size;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%;
    background: #fff; border: 2px solid #111;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #111, 0 0 0 5px rgba(165, 132, 79, 0.4), 0 10px 26px -8px rgba(6, 31, 61, 0.5);
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tp-esquela-texto { display: none; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.tp-cruz { width: auto; height: min(9cqh, 30px); color: #111; }
.tp-linea { display: block; width: 40%; height: 5px; border-radius: 2px; background: #c8d1dc; }
.tp-linea-nombre { width: 58%; height: 9px; background: #111; }
.tp-linea-corta { width: 26%; }
@container (min-height: 150px) { .tp-esquela-texto { display: flex; } }
.tp-etiqueta { display: flex; flex-direction: column; align-items: center; padding: 4px 12px; border-radius: 10px; background: var(--azul); color: #fff; line-height: 1.1; text-align: center; }
.tp-precio { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(16px, min(30cqh, 13cqw), 46px); font-variant-numeric: tabular-nums; }
.tp-precio-sin { font-size: clamp(10px, min(13cqh, 5.5cqw), 15px); opacity: 0.9; }
.tp-esquela.entra .tp-etiqueta { animation: tp-sello 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes tp-sello { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } }
.tp-rotulo-nombre { display: block; font-family: 'Source Serif 4', Georgia, serif; font-size: 26px; line-height: 1.2; color: var(--azul); }
.tp-datos { margin: 12px 0 18px; }
.tp-datos div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.tp-datos dt { font-size: 14px; color: var(--texto-suave); }
.tp-datos dd { margin: 0; font-size: 15px; font-weight: 600; text-align: right; color: var(--texto); font-variant-numeric: tabular-nums; }
.tp-datos .tp-dato-iva { font-size: 18px; color: var(--azul); }
.tp-modelos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.tp-modelo { min-width: 40px; height: 40px; padding: 0 10px; display: grid; place-items: center; border: 1px solid var(--borde); border-radius: 999px; white-space: nowrap; background: #fff; color: var(--azul); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.tp-modelo:hover { border-color: var(--azul); }
.tp-modelo.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.tp-controles { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tp-pausa { flex: none; padding: 6px 16px; border: 1px solid var(--azul); border-radius: 999px; background: #fff; color: var(--azul); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tp-pausa:hover { background: var(--azul-claro); }
.tp-progreso { flex: 1; height: 3px; background: var(--borde); }
.tp-progreso span { display: block; width: 0; height: 100%; background: var(--oro); }
.tp-progreso.corriendo span { animation: tp-progreso var(--tp-duracion, 3.5s) linear forwards; }
@keyframes tp-progreso { to { width: 100%; } }
.tp-nota { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-suave); }
/* Sin JavaScript se ve el modelo 1 sin controles */
.tp-demo:not(.tp-js) .tp-modelos,
.tp-demo:not(.tp-js) .tp-controles { display: none; }
@media (max-width: 760px) {
    .tp-escena { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .tp-hoja { max-width: 360px; width: 100%; margin: 0 auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tp-esquela { transition: none; }
    .tp-esquela.entra .tp-etiqueta { animation: none; }
}

/* ============ EJEMPLOS: PASE DE ESQUELAS (animación) ============ */
/* «La mesa de redacción»: las esquelas (maquetadas en HTML, ver .fv-esquela) forman un montón de pruebas
   sobre una mesa clara de papel de periódico, con luz de flexo y una regla milimetrada al pie.
   js/animacion-ejemplos.js pone a cada una --orden (0 = encima; 1, 2… las de debajo) y --giro (su leve
   inclinación en el montón). Al avanzar, la de encima sale hacia la derecha y vuelve al fondo del montón
   (.ej-sale); al retroceder, la anterior entra desde la izquierda (.ej-entra). La de encima lleva cotas
   doradas con su ancho y su alto reales. Debajo, la pista de modelos, la ficha y los controles. */
.ej-entrada { margin: 0 0 18px; color: var(--texto-suave); }
.ej-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ej-filtro { padding: 7px 16px; border: 1px solid var(--borde); border-radius: 999px; background: #fff; color: var(--azul); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.ej-filtro:hover { border-color: var(--azul); }
.ej-filtro.activo { background: var(--azul); border-color: var(--azul); color: #fff; }

.ej-escenario {
    --alto-max: 300px;
    --dx: 16px;
    --dy: 11px;
    position: relative;
    container-type: inline-size;
    height: 440px;
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 60% 70% at 18% 0%, rgba(255, 246, 225, 0.95), transparent 70%),
        radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(120, 92, 50, 0.16) 100%),
        repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(120, 92, 50, 0.07) calc(20% - 1px) 20%),
        #efe8da;
    box-shadow: inset 0 0 0 1px rgba(165, 132, 79, 0.28), 0 22px 44px -24px rgba(60, 40, 10, 0.45);
}
/* Luz cálida del flexo que respira despacio */
.ej-escenario::before {
    content: "";
    position: absolute;
    left: -10%;
    top: -40%;
    width: 70%;
    height: 110%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 250, 235, 0.7), transparent);
    pointer-events: none;
}
/* Regla milimetrada al pie */
.ej-escenario::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
    border-top: 1px solid rgba(120, 92, 50, 0.3);
    background:
        repeating-linear-gradient(90deg, rgba(120, 92, 50, 0.55) 0 1px, transparent 1px 50px) 0 0 / 100% 12px no-repeat,
        repeating-linear-gradient(90deg, rgba(120, 92, 50, 0.4) 0 1px, transparent 1px 10px) 0 0 / 100% 6px no-repeat,
        rgba(255, 255, 255, 0.45);
    pointer-events: none;
}
.ej-diapo {
    --orden: 0;
    --giro: 0;
    position: absolute;
    z-index: calc(20 - var(--orden));
    left: 50%;
    top: 47%;
    width: min(54cqw, calc(var(--alto-max) * var(--r)));
    transform:
        translate(-50%, -50%)
        translate(calc(var(--orden) * var(--dx)), calc(var(--orden) * var(--dy)))
        rotate(calc(var(--giro) * 1deg * min(var(--orden), 1)))
        scale(calc(1 - var(--orden) * 0.035));
    filter: brightness(calc(1 - var(--orden) * 0.035));
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(.2, .75, .2, 1), opacity 0.6s ease, filter 0.8s ease;
}
.ej-diapo .fv-esquela { width: 100%; box-shadow: 0 1px 2px rgba(60, 40, 10, 0.2), 0 18px 30px -14px rgba(60, 40, 10, 0.45); }
/* Cotas de la esquela de encima: ancho arriba y alto a la derecha */
.ej-diapo::before,
.ej-diapo::after {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--oro-texto);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.ej-diapo::before {
    content: attr(data-ancho) " mm";
    left: 0;
    right: 0;
    top: -24px;
    height: 13px;
    border-left: 1px solid var(--oro);
    border-right: 1px solid var(--oro);
    background: linear-gradient(90deg, var(--oro) 0 calc(50% - 36px), transparent 0 calc(50% + 36px), var(--oro) 0) center / 100% 1px no-repeat;
}
.ej-diapo::after {
    content: attr(data-alto) " mm";
    top: 0;
    bottom: 0;
    right: -26px;
    width: 13px;
    writing-mode: vertical-rl;
    border-top: 1px solid var(--oro);
    border-bottom: 1px solid var(--oro);
    background: linear-gradient(180deg, var(--oro) 0 calc(50% - 36px), transparent 0 calc(50% + 36px), var(--oro) 0) center / 1px 100% no-repeat;
}
.ej-diapo.activa::before,
.ej-diapo.activa::after { opacity: 1; transition-delay: 0.55s; }
.ej-diapo.ej-sale::before, .ej-diapo.ej-sale::after,
.ej-diapo.ej-entra::before, .ej-diapo.ej-entra::after { opacity: 0; transition: none; }
.ej-diapo.activa { cursor: zoom-in; }
.ej-diapo.ej-lejos { opacity: 0; pointer-events: none; }
.ej-diapo.ej-oculta { display: none; }
.ej-diapo:not(.activa):hover { filter: brightness(1.04); }
/* Barajar: la de encima sale hacia la derecha y vuelve al fondo; al retroceder, la anterior entra por la izquierda */
.ej-diapo.ej-sale { animation: ej-sale 1s cubic-bezier(.45, 0, .25, 1); }
.ej-diapo.ej-entra { animation: ej-entra 0.8s cubic-bezier(.2, .75, .2, 1); }
@keyframes ej-sale {
    0% { z-index: 40; opacity: 1; transform: translate(-50%, -50%); }
    45% { z-index: 40; opacity: 1; transform: translate(-50%, -50%) translate(46cqw, -4%) rotate(9deg); }
    55% { z-index: 0; }
}
@keyframes ej-entra {
    0% { z-index: 40; opacity: 0; transform: translate(-50%, -50%) translate(-46cqw, -4%) rotate(-9deg); }
    30% { opacity: 1; }
}
/* Sin JavaScript: solo la primera esquela, centrada */
.ej-demo:not(.ej-js) .ej-diapo:not(:first-child),
.ej-demo:not(.ej-js) .ej-ficha { display: none; }
/* Pista de modelos */
.ej-pista {
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
}
.ej-pista li[hidden] { display: none; }
.ej-paso {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 6px 12px;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: #fff;
    color: var(--azul);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.ej-paso:hover { border-color: var(--azul); transform: translateY(-2px); }
.ej-paso.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.ej-paso-corto { display: none; }
.ej-paso-tiempo { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--oro-claro); }
.ej-paso.activo .ej-paso-tiempo { width: 100%; }
.ej-corriendo .ej-paso.activo .ej-paso-tiempo { width: 0; animation: ej-progreso 4.5s linear forwards; }
@keyframes ej-progreso { to { width: 100%; } }

/* Ficha y controles */
.ej-ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 40px;
    align-items: end;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--borde);
}
.ej-ficha-num { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oro-texto); }
.ej-ficha-tipo { display: block; margin: 6px 0 12px; font-family: 'Source Serif 4', Georgia, serif; font-size: 26px; line-height: 1.2; color: var(--azul); }
.ej-ficha-datos { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 12px; }
.ej-ficha-datos div { display: flex; gap: 8px; align-items: baseline; }
.ej-ficha-datos dt { font-size: 14px; color: var(--texto-suave); }
.ej-ficha-datos dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--texto); }
.ej-ficha-descripcion { margin: 0 0 12px; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--texto-suave); }
.ej-ficha-enlace { display: inline-block; }
.ej-ficha-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ej-ampliar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--oro);
    border-radius: 999px;
    background: #fff;
    color: var(--tinta);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.ej-ampliar:hover { background: var(--oro-claro); }
.ej-ampliar[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .ej-escenario::before { animation: ej-foco 6s ease-in-out 2 alternate; }
}
@keyframes ej-foco { from { opacity: 0.65; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ej-diapo { transition: none; }
    .ej-diapo.ej-sale, .ej-diapo.ej-entra { animation: none; }
}

@media (max-width: 760px) {
    .ej-escenario { --alto-max: 210px; --dx: 9px; --dy: 7px; height: 330px; border-radius: 18px; }
    .ej-diapo { width: min(66cqw, calc(var(--alto-max) * var(--r))); }
    .ej-pista { grid-auto-flow: column; grid-template-columns: none; gap: 5px; }
    .ej-paso { padding: 9px 2px 11px; font-size: 12.5px; border-radius: 10px; }
    .ej-paso-largo { display: none; }
    .ej-paso-corto { display: inline; }
    .ej-ficha { grid-template-columns: 1fr; }
    .ej-ficha-acciones { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
}

/* ============ PORTADA: MOVIMIENTO SOBRIO ============ */
/* Cabecera de la portada: la foto se acerca muy despacio (el texto se muestra sin fundido) */
.hero:not(.hero-pagina) { background: none; overflow: hidden; isolation: isolate; }
.hero:not(.hero-pagina)::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: url('../img/reloj-y-arbol.jpg') center / cover no-repeat;
    transform-origin: 70% 50%;
    animation: hero-respira 40s ease-in-out 1 both;
}
.hero:not(.hero-pagina)::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(3, 44, 85, 0.92) 0%, rgba(2, 81, 151, 0.78) 55%, rgba(2, 81, 151, 0.35) 100%);
}
@media (max-width: 760px) {
    .hero:not(.hero-pagina)::after { background: linear-gradient(100deg, rgba(3, 44, 85, 0.92) 0%, rgba(2, 81, 151, 0.86) 100%); }
}
@keyframes hero-respira { from { transform: scale(1); } to { transform: scale(1.08) translateX(-1%); } }

/* Bloques que aparecen al llegar a ellos (js/portada.js añade la clase solo si hay movimiento) */
.portada-movimiento .revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) var(--retraso, 0s), transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) var(--retraso, 0s);
}
.portada-movimiento .revelar.visible { opacity: 1; transform: none; }
.portada-movimiento .guia.revelar { transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) var(--retraso, 0s), transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) var(--retraso, 0s), background 0.3s ease; }
/* Las líneas doradas de los antetítulos se dibujan desde el texto hacia fuera */
.portada-movimiento .revelar .antetitulo::before { transform: scaleX(0); transform-origin: right; transition: transform 1.2s ease 0.35s; }
.portada-movimiento .revelar .antetitulo::after { transform: scaleX(0); transform-origin: left; transition: transform 1.2s ease 0.35s; }
.portada-movimiento .revelar.visible .antetitulo::before,
.portada-movimiento .revelar.visible .antetitulo::after { transform: scaleX(1); }
/* El ornamento: sus líneas se extienden desde el centro y el emblema respira muy despacio */
.portada-movimiento .ornamento.revelar { transform: none; }
.portada-movimiento .ornamento.revelar::before { transform: scaleX(0); transform-origin: right; transition: transform 1.6s ease 0.2s; }
.portada-movimiento .ornamento.revelar::after { transform: scaleX(0); transform-origin: left; transition: transform 1.6s ease 0.2s; }
.portada-movimiento .ornamento.revelar.visible::before,
.portada-movimiento .ornamento.revelar.visible::after { transform: scaleX(1); }
.portada-movimiento .ornamento svg { animation: ornamento-respira 6s ease-in-out infinite alternate; }
@keyframes ornamento-respira { from { opacity: 0.65; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .hero:not(.hero-pagina)::before, .hero:not(.hero-pagina) .contenedor > *, .portada-movimiento .ornamento svg { animation: none; }
}
@media print {
    .portada-movimiento .revelar { opacity: 1; transform: none; }
}

/* ============ MAPA WEB ============ */
.mapa-web { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; align-items: start; }
.mapa-web .tarjeta { margin-bottom: 0; }
.mapa-web-grupo h2 { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); font-size: 22px; }
.mapa-web-grupo ul { list-style: none; margin: 0; padding: 0; }
.mapa-web-grupo li { margin: 0; border-top: 1px solid var(--borde); }
.mapa-web-grupo li:first-child { border-top: 0; }
.mapa-web-grupo a { display: block; padding: 7px 0; line-height: 1.4; color: var(--azul); text-decoration: none; }
.mapa-web-grupo a:hover { text-decoration: underline; }
.mapa-web-grupo a[aria-current="page"] { font-weight: 600; }

/* ============ PIE ============ */
/* Fondo de página con letras en azul */
footer { background: var(--fondo); color: var(--azul); padding: 36px 0; font-size: 14px; border-top: 1px solid var(--borde); }
footer .contenedor { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
footer a { display: inline-block; padding: 6px 0; color: var(--azul); text-decoration: none; margin: 0 9px; }
footer a:hover { text-decoration: underline; }

/* ============ VISOR DE IMÁGENES (LIGHTBOX) ============ */
.visor {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(2, 17, 34, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
/* Al abrir, la visibilidad cambia al instante para que el botón de cerrar pueda recibir el foco */
.visor.abierto { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; }
.visor img { max-width: min(92vw, 900px); max-height: 80vh; border-radius: 8px; background: #fff; }
.visor .leyenda { color: #fff; margin-top: 14px; font-weight: 600; text-align: center; }
.visor button {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.visor button:hover { background: rgba(255, 255, 255, 0.25); }
.visor .cerrar { top: 18px; right: 18px; }
.visor .anterior { left: 18px; top: 50%; transform: translateY(-50%); }
.visor .siguiente { right: 18px; top: 50%; transform: translateY(-50%); }
.visor.una-imagen .anterior, .visor.una-imagen .siguiente { display: none; }
.visor.una-imagen img { max-height: 88vh; }
@media (max-width: 600px) {
    .visor .anterior, .visor .siguiente { top: auto; bottom: 18px; transform: none; }
}

/* ==================== TARIFAS Y DIMENSIONES (PÁGINAS INTERIORES) ==================== */

/* Estilos propios de las páginas de Precios y Dimensiones (se carga después de estilos.css) */

/* ============ PRECIOS: ÍNDICE DE EDICIONES ============ */
/* Botones de acceso rápido a la tabla de cada edición */
.indice-tarifas { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: none !important; }
.indice-tarifas a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--fondo);
    color: var(--azul);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.indice-tarifas a:hover, .indice-tarifas a:focus-visible { background: var(--azul); border-color: var(--azul); color: #fff; outline: none; }

/* Módulos de cada formato bajo las medidas, en la tabla de tarifas */
.medidas-modulos { display: block; font-size: 12px; color: var(--texto-suave); }

/* Enlace a la página de la edición dentro del recuadro oscuro */
.tarifas-ediciones .boton-edicion {
    display: inline-block;
    margin: 0 0 18px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #fff;
    color: var(--azul);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}
.tarifas-ediciones .boton-edicion:hover { background: var(--azul-claro); }

/* ============ PRECIOS: EDICIONES CON TARIFA POR MÓDULO ============ */
.tarifas-modulo {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: none !important;
}
.tarifa-modulo {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    border: 1px solid var(--borde);
    border-top: 3px solid var(--azul);
    border-radius: var(--radio);
    background: var(--fondo);
    scroll-margin-top: calc(var(--alto-menu) + 16px);
}
.tarifa-modulo h3 { font-size: 21px; margin: 10px 0 4px; }
.tarifa-modulo .tarifa-modulo-medidas { font-size: 14px; color: var(--texto-suave); margin: 0 0 14px; }
.tarifa-modulo dl { margin: 0 0 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tarifa-modulo dt { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--texto-suave); }
.tarifa-modulo dd {
    margin: 2px 0 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--azul);
    font-variant-numeric: tabular-nums;
}
.tarifa-modulo .enlace-mas { margin-top: auto; }
@media (max-width: 900px) { .tarifas-modulo { grid-template-columns: 1fr; } }

/* ============ DIMENSIONES ============ */
/* La franja de formatos abre la página, pegada a la cabecera */
.franja-dimensiones.franja-inicial { margin-top: -56px; border-top: 0; }

/* Aviso destacado (p. ej. «no se puede elegir ubicación») */
.aviso {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0;
    padding: 16px 20px;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--oro);
    background: var(--fondo);
    color: var(--texto);
    font-size: 15px;
    max-width: none !important;
}
.aviso svg { flex-shrink: 0; color: var(--oro-texto); margin-top: 2px; }
.aviso p { margin: 0; }

/* Variantes de cada formato: esquema sobre la página + ejemplo de esquela */
.variantes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
    margin-top: 24px;
}
.variante {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.variante:hover { border-color: var(--azul); box-shadow: 0 14px 30px rgba(2, 81, 151, 0.12); }
.variante-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--borde);
}
.variante-cabecera .formato-numero { position: static; flex-shrink: 0; }
.variante-cabecera div { flex: 1; min-width: 0; }
.variante-cabecera strong { display: block; color: var(--azul); font-size: 16px; }
.variante-cabecera span:not(.formato-numero):not(.modulos) { font-size: 13px; color: var(--texto-suave); }
.variante-imagenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; background: var(--fondo); flex: 1; }
.variante-imagen {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--texto-suave);
    cursor: zoom-in;
    text-align: center;
}
.variante-imagen img {
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.variante-imagen:hover img, .variante-imagen:focus-visible img { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(2, 81, 151, 0.15); }
.variante-imagen:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.variante-imagen span { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }

/* Desplegable con el precio del formato en cada edición */
.precios-variante { border-top: 1px solid var(--borde); }
.precios-variante summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 14px;
    color: var(--azul);
}
.precios-variante summary::-webkit-details-marker { display: none; }
.precios-variante summary::after { content: "+"; font-size: 20px; line-height: 1; transition: transform 0.2s ease; }
.precios-variante[open] summary::after { transform: rotate(45deg); }
.precios-variante summary:hover { background: var(--azul-claro); }
.precios-variante table { font-size: 14px; }
.precios-variante caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.precios-variante td:first-child a { color: var(--texto); font-weight: 600; text-decoration: none; }
.precios-variante td:first-child a:hover { color: var(--azul); text-decoration: underline; }
.precios-variante table { width: 100%; }
.precios-variante th { padding: 8px 8px; font-size: 11px; }
.precios-variante td { padding: 8px 8px; white-space: nowrap; }
/* El nombre de la edición puede partirse (p. ej. «Castilla-La Mancha») para que la tabla quepa en la ficha */
.precios-variante th:first-child, .precios-variante td:first-child { padding-left: 14px; white-space: normal; }
.precios-variante th:last-child, .precios-variante td:last-child { padding-right: 14px; }
.precios-variante td.num { color: var(--azul); font-weight: 600; }
.precios-variante p { margin: 0; padding: 10px 16px 14px; font-size: 13px; color: var(--texto-suave); }

/* ============ VARIANTES: FRANJA A ANCHO COMPLETO (PÁGINA DE DIMENSIONES) ============ */
.franja-variantes {
    background: var(--azul-claro) radial-gradient(rgba(2, 81, 151, 0.08) 1px, transparent 1px) 0 0 / 18px 18px;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    padding: 64px 0;
    margin: 24px 0 56px;
}
.variantes-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px 48px;
    align-items: end;
    margin-bottom: 32px;
}
.variantes-cabecera h2 { font-size: clamp(28px, 3vw, 36px); margin: 12px 0 14px; }
.variantes-cabecera p { margin: 0; max-width: 680px; font-size: 17px; }
/* Filtro por tamaño: pastillas numeradas */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 480px; justify-content: flex-end; }
.filtros-titulo { width: 100%; text-align: right; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--oro-texto); }
.filtro {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid #c7d9ed;
    border-radius: 999px;
    background: #fff;
    color: var(--azul);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.filtro:hover { border-color: var(--azul); }
.filtro.activo { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 6px 14px -6px rgba(2, 81, 151, 0.6); }

/* Fichas: cabecera azul degradada, imágenes sobre blanco */
.franja-variantes .variantes { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.franja-variantes .variante[hidden] { display: none; }
.franja-variantes .variante {
    border: 0;
    box-shadow: 0 10px 30px -14px rgba(2, 81, 151, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: aparecer 0.35s ease;
}
.franja-variantes .variante:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -16px rgba(2, 81, 151, 0.45); }
.franja-variantes .variante-cabecera {
    padding: 16px 18px;
    border-bottom: 2px solid var(--oro);
    background:
        radial-gradient(ellipse at 90% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
        linear-gradient(115deg, #032c55 0%, var(--azul-oscuro) 45%, var(--azul) 100%);
}
.franja-variantes .variante-cabecera .formato-numero { background: #fff; color: var(--azul); box-shadow: none; }
.franja-variantes .variante-cabecera strong { color: #fff; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; }
.franja-variantes .variante-cabecera span:not(.formato-numero):not(.modulos) { color: rgba(255, 255, 255, 0.78); }
.franja-variantes .variante-cabecera .modulos {
    background:
        repeating-linear-gradient(90deg, var(--azul-oscuro) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(0deg, var(--azul-oscuro) 0 1px, transparent 1px 6px),
        #fff;
}
.franja-variantes .variante-imagenes { background: #fff; padding: 16px 18px; gap: 14px; }
.franja-variantes .variante-imagen img { background: var(--fondo); border-radius: 6px; }
.franja-variantes .variante-imagen span { color: var(--azul); }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .franja-variantes .variante { animation: none; } }
@media (max-width: 900px) {
    .variantes-cabecera { grid-template-columns: 1fr; align-items: start; }
    .filtros { justify-content: flex-start; max-width: none; }
    .filtros-titulo { text-align: left; }
}
@media (max-width: 600px) {
    .franja-variantes { padding: 44px 0; }
    .franja-variantes .variantes { grid-template-columns: 1fr; }
}

/* Resumen visual de todos los formatos */
.resumen-visual { display: block; margin: 20px auto 0; padding: 0; border: 0; background: none; cursor: zoom-in; max-width: 900px; }
.resumen-visual img { width: 100%; border-radius: var(--radio); border: 1px solid var(--borde); box-shadow: var(--sombra); transition: transform 0.3s ease; }
.resumen-visual:hover img { transform: scale(1.01); }

@media (max-width: 600px) {
    .variantes { grid-template-columns: 1fr; }
    /* Tres columnas estrechas para que la tabla quepa a 375 px */
    .precios-variante table { font-size: 13px; }
    .precios-variante th, .precios-variante td { padding: 8px 6px; }
    .precios-variante th:first-child, .precios-variante td:first-child { padding-left: 12px; white-space: normal; }
    .precios-variante th:last-child, .precios-variante td:last-child { padding-right: 12px; }
}
/* A 320 px las cifras grandes (p. ej. 17.742,23 €) necesitan un poco menos de letra y de relleno */
@media (max-width: 360px) {
    .precios-variante table { font-size: 12.5px; }
    .precios-variante th, .precios-variante td { padding-left: 5px; padding-right: 5px; }
    .precios-variante th:first-child, .precios-variante td:first-child { padding-left: 10px; }
    .precios-variante th:last-child, .precios-variante td:last-child { padding-right: 10px; }
}

/* ==================== PLANTILLA, EJEMPLOS Y CONTACTO ==================== */

/* Estilos de las páginas Plantilla, Ejemplos y Contacto de elpaisesquelas.com
   Complementa a estilos.css (se enlaza después) y solo usa sus variables de :root */

/* ============ FORMULARIOS ============ */
.formulario { display: grid; gap: 18px; margin: 0; }
.formulario-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.formulario-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.formulario-campo label {
    font-size: 14px;
    font-weight: 600;
    color: var(--texto);
}
.formulario-campo label .opcional { font-weight: 400; color: var(--texto-suave); }
.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--texto);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.formulario textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.formulario ::placeholder { color: #59687a; opacity: 1; }
.formulario input:hover, .formulario textarea:hover { border-color: #b9cbe0; }
.formulario input:focus, .formulario textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(2, 81, 151, 0.15);
}
/* Título de cada bloque de campos («Datos de la esquela», «Datos de contacto») */
.formulario-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.formulario-titulo::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.formulario-campo .formulario-titulo label { font: inherit; color: inherit; }
/* Pie del formulario: botón de envío y aviso */
.formulario-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
button.boton-plantilla { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.boton-enviar { padding: 14px 34px; font-size: 16px; }
.formulario-nota { margin: 0; font-size: 13px; color: var(--texto-suave); }
.formulario-nota strong { color: var(--texto); }
@media (max-width: 600px) {
    .formulario-fila { grid-template-columns: 1fr; }
    .boton-enviar { width: 100%; text-align: center; }
}

/* ============ CONTACTO: FORMULARIO + PANEL AZUL ============ */
.contacto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    padding: 0;
    overflow: hidden;
}
.contacto-formulario { padding: 40px 44px 44px; }
.contacto-formulario h2 { margin: 12px 0 10px; }
.contacto-formulario > p { margin: 0 0 26px; color: var(--texto-suave); }
.contacto-panel {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 40px 32px;
    background: var(--azul-oscuro);
    color: rgba(255, 255, 255, 0.85);
    border-left: 2px solid var(--oro);
}
.contacto-panel .antetitulo::after { content: ""; width: 36px; height: 1px; background: var(--oro); }
.contacto-panel h2 { margin: 0; font-size: 26px; color: #fff; }
.contacto-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.contacto-dato { display: flex; gap: 14px; align-items: flex-start; }
.contacto-icono {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--oro-claro);
}
.contacto-dato small {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.contacto-dato a, .contacto-dato strong { color: #fff; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contacto-dato a:hover { text-decoration: underline; }
.contacto-dato .contacto-telefono { font-family: 'Source Serif 4', Georgia, serif; font-size: 26px; line-height: 1.2; }
.contacto-pie { margin: auto 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 14px; }
@media (max-width: 900px) {
    .contacto { grid-template-columns: 1fr; }
    .contacto-panel { border-left: 0; border-top: 2px solid var(--oro); }
}
@media (max-width: 600px) {
    .contacto-formulario { padding: 28px 20px 32px; }
    .contacto-panel { padding: 30px 20px; }
}

/* ============ PLANTILLA ============ */
/* Líneas añadidas a la esquela de muestra: datos del funeral y otros datos */
.esquela-modelo .esquela-funeral {
    margin: 14px 0 6px;
    padding-top: 12px;
    border-top: 1px solid #d5d5d5;
    font-size: 14px;
}
.esquela-modelo .esquela-otros { margin: 0; font-size: 14px; }

/* Formulario de la plantilla: texto de la esquela a la izquierda y datos de contacto a la derecha */
.plantilla-formulario-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 32px;
    align-items: start;
}
.plantilla-formulario-columnas > div { display: grid; gap: 16px; }
/* El cuadro del texto imita el recuadro de luto de la esquela */
.formulario textarea.texto-esquela {
    min-height: 420px;
    padding: 22px 20px;
    border: 3px solid #111;
    border-radius: 0;
    outline: 1px solid #111;
    outline-offset: 4px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}
.formulario textarea.texto-esquela:focus { border-color: var(--azul); outline-color: var(--azul); }
/* Plantilla en blanco: lo que escribe el usuario, en el mismo verde que sus datos en las vistas previas
   (los textos de ejemplo siguen en gris con su propia regla ::placeholder) */
#plantillaForm input[type="text"],
#plantillaForm input[type="email"],
#plantillaForm input[type="tel"],
#plantillaForm textarea { color: #0f6b3d; font-weight: 500; }
@media (max-width: 900px) {
    .plantilla-formulario-columnas { grid-template-columns: 1fr; }
    .formulario textarea.texto-esquela { min-height: 380px; }
}
@media (max-width: 600px) {
    .formulario textarea.texto-esquela { min-height: 440px; padding: 18px 12px; font-size: 15px; }
}

/* ============ EJEMPLOS ============ */
/* Galería de ejemplos: las esquelas se ven completas sobre una trama de puntos */
.galeria.ejemplos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.ejemplos .formato .miniatura {
    aspect-ratio: 4 / 3;
    padding: 16px;
    background: var(--azul-claro) radial-gradient(rgba(2, 81, 151, 0.12) 1px, transparent 1px) 0 0 / 16px 16px;
}
.ejemplos .formato .miniatura img { object-fit: contain; }
@media (max-width: 600px) {
    .galeria.ejemplos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ejemplos .formato .miniatura { padding: 8px; }
    .ejemplos .formato .pie { padding: 10px; }
}
/* Galería con esquelas maquetadas en HTML (.fv-esquela): cada una se encaja en la miniatura con sus
   proporciones (--r) usando el tamaño de la miniatura (cqw / cqh); pulsar la tarjeta la abre en grande */
.fv-galeria .miniatura { container-type: size; display: flex; align-items: center; justify-content: center; }
.fv-galeria .fv-esquela {
    width: min(100cqw, calc(100cqh * var(--r)));
    border-width: 1.5px;
    padding: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
    transition: transform 0.4s ease;
}
.fv-galeria .formato:hover .fv-esquela { transform: scale(1.04); }
.formato.fv-tarjeta:focus-within { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(2, 81, 151, 0.15); border-color: var(--azul); }
.fv-tarjeta .pie { align-items: center; }
.fv-tarjeta-ver {
    flex-shrink: 0;
    padding: 5px 12px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: #fff;
    color: var(--azul);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.fv-tarjeta-ver:hover { border-color: var(--azul); background: var(--azul-claro); }
@media (max-width: 600px) {
    .fv-tarjeta .pie { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Partes de una esquela: tarjetas numeradas */
.partes-esquela {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    counter-reset: parte;
}
.partes-esquela li {
    position: relative;
    counter-increment: parte;
    padding: 22px 22px 22px 70px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.partes-esquela li:hover { background: #fff; border-color: var(--azul); box-shadow: 0 10px 24px rgba(2, 81, 151, 0.1); }
.partes-esquela li::before {
    content: counter(parte);
    position: absolute;
    left: 20px;
    top: 20px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
}
.partes-esquela h3 { font-family: 'Inter', sans-serif; font-size: 16px; margin: 4px 0 6px; }
.partes-esquela p { margin: 0; font-size: 15px; color: var(--texto-suave); }
@media (max-width: 960px) { .partes-esquela { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .partes-esquela { grid-template-columns: 1fr; }
    .partes-esquela li { padding: 18px 18px 18px 62px; }
    .partes-esquela li::before { left: 16px; top: 16px; }
}

/* Recapitulación: la estructura habitual como cadena de etiquetas */
.recapitulacion {
    margin-top: 28px;
    padding: 28px;
    border-radius: var(--radio);
    background: var(--azul-claro) radial-gradient(rgba(2, 81, 151, 0.12) 1px, transparent 1px) 0 0 / 16px 16px;
    text-align: center;
}
.recapitulacion h3 { margin: 0 0 8px; font-size: 22px; }
.recapitulacion > p { margin: 0 auto; max-width: 720px; font-size: 15px; color: var(--texto-suave); }
.recapitulacion > p strong { color: var(--texto); }
.estructura {
    list-style: none;
    margin: 18px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 8px;
}
.estructura li { display: inline-flex; align-items: center; gap: 8px; }
.estructura li + li::before { content: "→"; color: var(--oro-texto); font-weight: 700; }
.estructura span {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: #fff;
    color: var(--azul);
    font-size: 14px;
    font-weight: 600;
}

/* ============ PARTES DE UNA ESQUELA: FRANJA A ANCHO COMPLETO ============ */
.franja-partes {
    background: #fff;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    padding: 64px 0;
    margin: 24px 0 56px;
}
.partes-cabecera { max-width: 760px; margin-bottom: 36px; }
.partes-cabecera h2 { font-size: clamp(28px, 3vw, 36px); margin: 12px 0 14px; }
.partes-cabecera p { margin: 0; font-size: 17px; }

/* Esquela anotada a la izquierda (fija al bajar) y las nueve partes a la derecha */
.anatomia {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.anatomia-muestra {
    position: sticky;
    top: calc(var(--alto-menu) + 24px);
    margin: 0;
    padding: 36px 30px 22px;
    border-radius: var(--radio);
    background: var(--azul-claro) radial-gradient(rgba(2, 81, 151, 0.12) 1px, transparent 1px) 0 0 / 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.anatomia-muestra figcaption { font-size: 13px; color: var(--texto-suave); text-align: center; }
.esquela-anotada { max-width: 330px; padding: 28px 30px 24px 34px; }
.esquela-anotada .parte {
    position: relative;
    border-radius: 4px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.esquela-anotada .marca {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    transition: transform 0.2s ease, background 0.2s ease;
}
.esquela-anotada .parte.resaltada { background: #fff3b0; box-shadow: 0 0 0 4px #fff3b0; }
.esquela-anotada .parte.resaltada .marca { background: var(--oro); transform: translateY(-50%) scale(1.2); }
.esquela-anotada .esquela-nombre small { display: block; font-size: 13px; font-weight: 400; font-style: italic; }
.esquela-anotada .esquela-funeral { font-size: 13px; }
.esquela-anotada .esquela-cita { font-style: italic; }
.esquela-anotada .esquela-firma { margin-bottom: 0; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; }

/* Las nueve partes, en dos columnas junto a la muestra */
.franja-partes .partes-esquela { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.franja-partes .partes-esquela li { background: #fff; cursor: default; }
.franja-partes .partes-esquela li:hover,
.franja-partes .partes-esquela li.activa { border-color: var(--azul); box-shadow: 0 10px 24px rgba(2, 81, 151, 0.1); }
.franja-partes .partes-esquela li.activa::before { background: var(--oro); }

/* Recapitulación como banda azul degradada */
.franja-partes .recapitulacion {
    margin-top: 44px;
    padding: 36px 32px;
    background:
        radial-gradient(ellipse at 85% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%),
        linear-gradient(115deg, #032c55 0%, var(--azul-oscuro) 40%, var(--azul) 100%);
    border-top: 2px solid var(--oro);
    color: #fff;
}
.franja-partes .recapitulacion h3 { color: #fff; }
.franja-partes .recapitulacion > p { color: rgba(255, 255, 255, 0.82); }
.franja-partes .recapitulacion > p strong { color: #fff; }
.franja-partes .estructura { counter-reset: paso; }
.franja-partes .estructura li { counter-increment: paso; }
.franja-partes .estructura span {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.franja-partes .estructura span::before { content: counter(paso) ". "; color: #e6cf9f; }
.franja-partes .estructura li + li::before { color: #e6cf9f; }

@media (max-width: 1100px) { .franja-partes .partes-esquela { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
    .anatomia { grid-template-columns: 1fr; gap: 32px; }
    .anatomia-muestra { position: static; }
}
@media (max-width: 600px) {
    .franja-partes { padding: 44px 0; }
    .anatomia-muestra { padding: 28px 16px 18px; }
    .franja-partes .recapitulacion { padding: 28px 18px; }
}

/* Comparativa entre esquela familiar y corporativa */
.comparativa { margin-top: 24px; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.comparativa-fila {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr);
}
.comparativa-fila + .comparativa-fila { border-top: 1px solid var(--borde); }
.comparativa-fila > * { margin: 0; padding: 18px 20px; }
.comparativa-cabecera { background: var(--azul); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.comparativa-cabecera > :last-child { background: var(--azul-oscuro); }
.comparativa-aspecto {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 18px;
    color: var(--azul);
    background: var(--fondo);
}
.comparativa-aspecto span { display: block; font-size: 13px; color: var(--oro-texto); letter-spacing: 2px; }
.comparativa-fila p { font-size: 15px; color: var(--texto-suave); }
.comparativa-fila p + p { border-left: 1px solid var(--borde); }
.comparativa-etiqueta { display: none; }
@media (max-width: 800px) {
    .comparativa-cabecera { display: none; }
    .comparativa-fila { grid-template-columns: 1fr; }
    .comparativa-fila p + p { border-left: 0; border-top: 1px dashed var(--borde); }
    .comparativa-fila > * { padding: 14px 18px; }
    .comparativa-etiqueta {
        display: block;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--azul);
    }
}

/* ==================== PÁGINAS LEGALES ==================== */

/* ============ PÁGINAS LEGALES ============ */
/* Aviso legal, política de privacidad, condiciones del servicio y política de cookies.
   Se enlaza DESPUÉS de estilos.css y usa sus variables de :root. */

/* Rejilla: índice a la izquierda y texto legal a la derecha */
.legal {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

/* ============ ÍNDICE DE SECCIONES ============ */
/* En escritorio queda fijo (sticky) bajo el menú superior mientras se lee */
.legal-indice {
    position: sticky;
    top: calc(var(--alto-menu) + 24px);
    max-height: calc(100vh - var(--alto-menu) - 48px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 24px 22px;
}
.legal-indice ol {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    border-left: 1px solid var(--borde);
}
.legal-indice a {
    display: block;
    margin-left: -1px;
    padding: 7px 0 7px 14px;
    border-left: 2px solid transparent;
    color: var(--texto-suave);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.legal-indice a:hover,
.legal-indice a:focus-visible {
    color: var(--azul);
    border-left-color: var(--oro);
}

/* ============ TEXTO LEGAL ============ */
/* Tarjeta con ancho de lectura cómodo (~760 px de texto) */
.legal-texto {
    margin-bottom: 0;
    padding: 44px 48px;
    font-size: 16.5px;
    line-height: 1.75;
    overflow-wrap: break-word;
}
.legal-texto > * { max-width: 760px; }

/* Títulos de sección separados por una línea fina */
.legal-texto h2 {
    font-size: 25px;
    font-weight: 600;
    margin: 44px 0 16px;
    padding-top: 32px;
    border-top: 1px solid var(--borde);
}
.legal-texto > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-texto h3 { font-size: 20px; margin: 28px 0 12px; }

/* Número de la cláusula (1., 2., ...) en dorado */
.legal-num { color: var(--oro-texto); }

.legal-texto p { margin: 0 0 16px; }
.legal-texto ul { margin: 0 0 18px; padding-left: 22px; }
.legal-texto li { margin-bottom: 10px; }
.legal-texto li::marker { color: var(--oro-texto); }

/* Párrafo inicial, algo más destacado */
.legal-texto .legal-intro { font-size: 18px; color: var(--texto); }

/* Ficha de datos (titular, teléfonos, correo) */
.legal-texto .legal-datos {
    list-style: none;
    margin: 0 0 18px;
    padding: 18px 22px;
    background: var(--fondo);
    border-left: 3px solid var(--oro);
    border-radius: 0 var(--radio) var(--radio) 0;
}
.legal-texto .legal-datos li { margin-bottom: 4px; }
.legal-texto .legal-datos li:last-child { margin-bottom: 0; }
.legal-texto .legal-datos strong { color: var(--azul-oscuro); font-weight: 600; }

/* Pie con la fecha de última actualización (si la hay) */
.legal-actualizacion {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--borde);
    font-size: 14px;
    color: var(--texto-suave);
}

/* ============ TABLETA Y MÓVIL ============ */
/* El índice pasa arriba, ya no es fijo y reparte los enlaces en dos columnas */
@media (max-width: 960px) {
    .legal { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .legal-indice { position: static; max-height: none; overflow: visible; }
    .legal-indice ol { columns: 2; column-gap: 24px; }
    .legal-indice li { break-inside: avoid; }
}
@media (max-width: 600px) {
    .legal-indice { padding: 20px; }
    .legal-indice ol { columns: 1; }
    .legal-texto { padding: 26px 20px; font-size: 16px; }
    .legal-texto h2 { font-size: 22px; margin-top: 36px; padding-top: 26px; }
    .legal-texto .legal-intro { font-size: 17px; }
    .legal-texto .legal-datos { padding: 14px 16px; }
}

/* ============ PREGUNTAS FRECUENTES ============ */
/* Cada pregunta es un desplegable nativo (<details>), accesible con teclado y lector de pantalla */
.faq-pregunta {
    border-bottom: 1px solid var(--borde);
}
.faq-pregunta summary {
    position: relative;
    display: block;
    padding: 16px 44px 16px 0;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.45;
    color: var(--tinta);
    cursor: pointer;
    list-style: none;
}
.faq-pregunta summary::-webkit-details-marker { display: none; }
.faq-pregunta summary::after {
    content: "+";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    color: var(--azul);
    transition: transform 0.2s ease;
}
.faq-pregunta[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-pregunta summary:hover { color: var(--azul); }
.faq-respuesta { padding: 0 0 8px; }
.faq-respuesta > :last-child { margin-bottom: 16px; }
.legal-texto.faq h2 + .faq-pregunta { border-top: 1px solid var(--borde); }
@media (max-width: 600px) {
    .faq-pregunta summary { font-size: 16px; padding-right: 36px; }
}

/* ============ ¿CUÁNDO PUBLICAR UNA ESQUELA? ============ */
.lista-casos { margin: 20px 0 0; padding-left: 22px; }
.lista-casos li { margin-bottom: 14px; }
.lista-casos li::marker { color: var(--oro-texto); }
.lista-casos li:last-child { margin-bottom: 0; }
.nota-plazos { margin: 24px 0 0; font-size: 15px; color: var(--texto-suave); }

/* ============ ¿CÓMO PUBLICAR UNA ESQUELA? ============ */
/* Pasos numerados en vertical, unidos por una línea */
.guia-pasos { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: guia; }
.guia-paso {
    position: relative;
    counter-increment: guia;
    padding: 0 0 28px 64px;
}
.guia-paso::before {
    content: counter(guia);
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
}
.guia-paso:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 50px;
    bottom: 6px;
    border-left: 2px solid var(--borde);
}
.guia-paso:last-child { padding-bottom: 0; }
.guia-paso h3 { margin: 6px 0 10px; font-size: 22px; }
.guia-paso p { margin: 0 0 12px; max-width: 760px; }
.guia-paso > :last-child { margin-bottom: 0; }
.guia-canales { margin: 0; padding-left: 20px; max-width: 760px; }
.guia-canales li { margin-bottom: 6px; }
.guia-canales li::marker { color: var(--oro-texto); }
@media (max-width: 600px) {
    .guia-paso { padding-left: 52px; }
    .guia-paso::before { width: 36px; height: 36px; font-size: 17px; }
    .guia-paso:not(:last-child)::after { left: 17px; top: 44px; }
    .guia-paso h3 { margin-top: 4px; font-size: 20px; }
}

/* ============ ANTI-SPAM DE LOS FORMULARIOS ============ */
/* Campos trampa: fuera de la vista y del orden de tabulación; solo los rellenan los robots */
.campo-trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.formulario-aviso { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--oro); background: var(--fondo); font-size: 15px; }
/* Información básica de protección de datos (primera capa, art. 11 LOPDGDD) junto a la casilla de los formularios */
.info-datos { margin: 2px 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--texto-suave); }
.info-datos a { color: inherit; }

/* ==================== DATOS CURIOSOS (página con cifras, tarjetas, línea del tiempo y gráfico) ==================== */
/* Franja de cifras pegada a la cabecera */
.dc-cifras-franja { margin: -56px 0 40px; background: var(--tinta); color: #fff; border-bottom: 3px solid var(--oro); }
.dc-cifras { list-style: none; margin: 0; padding: 26px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.dc-cifras li { padding: 4px 22px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.dc-cifras li:first-child { border-left: 0; padding-left: 0; }
.dc-cifras strong { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; line-height: 1; color: var(--oro-claro); }
.dc-cifras span { margin-left: 6px; font-size: 15px; font-weight: 600; color: #fff; }
.dc-cifras small { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 760px) {
    .dc-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
    .dc-cifras li:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* Índice */
.dc-indice ol { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dc-indice a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo); color: var(--azul); font-weight: 600; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
.dc-indice a span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--azul); color: #fff; font-size: 13px; }
.dc-indice a:hover { border-color: var(--azul); background: #fff; }

/* Secciones y tarjetas */
.dc-seccion { margin: 48px 0 56px; scroll-margin-top: calc(var(--alto-menu) + 16px); }
.dc-seccion h2 { font-size: clamp(26px, 3vw, 34px); margin: 12px 0 12px; }
.dc-entrada { max-width: 860px; margin: 0 0 28px; font-size: 17px; color: var(--texto-suave); }
.dc-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dc-rejilla-3 { margin-bottom: 26px; }
@media (max-width: 960px) { .dc-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dc-rejilla { grid-template-columns: 1fr; } }
.dc-tarjeta { position: relative; padding: 24px 22px 22px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.dc-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(2, 81, 151, 0.12); }
.dc-tarjeta::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--azul), var(--oro)); }
.dc-tarjeta h3 { margin: 14px 0 8px; font-size: 19px; }
.dc-tarjeta p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--texto-suave); }
.dc-icono { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--azul-claro); color: var(--azul); }

/* Mensajes curiosos: mini esquelas con recuadro de luto */
.dc-mensajes { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: center; padding: 28px; border-radius: var(--radio); background: var(--azul-claro); }
.dc-mensajes h3 { margin: 14px 0 8px; font-size: 21px; }
.dc-mensajes p { margin: 0; font-size: 15px; color: var(--texto); }
.dc-esquelitas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dc-esquelita { margin: 0; padding: 22px 18px 16px; background: #fff; border: 3px solid #111; outline: 1px solid #111; outline-offset: 4px; text-align: center; font-family: 'Source Serif 4', Georgia, serif; transform: rotate(-1deg); }
.dc-esquelita + .dc-esquelita { transform: rotate(1.2deg); }
.dc-esquelita-cruz { display: block; font-size: 20px; line-height: 1; color: #111; }
.dc-esquelita blockquote { margin: 10px 0 12px; font-size: 17px; font-style: italic; line-height: 1.45; color: #1a1a1a; }
.dc-esquelita figcaption { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--texto-suave); }
@media (max-width: 900px) { .dc-mensajes { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dc-esquelitas { grid-template-columns: 1fr; } .dc-mensajes { padding: 22px 16px; } }

/* Historia: franja a ancho completo con línea del tiempo */
.dc-historia { padding: 64px 0; margin: 0 0 8px; background: #fff; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); scroll-margin-top: var(--alto-menu); }
.dc-historia h2 { font-size: clamp(26px, 3vw, 34px); margin: 12px 0 12px; }
.dc-linea { list-style: none; margin: 8px 0 40px; padding: 0; position: relative; }
.dc-linea::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 180px; width: 2px; background: linear-gradient(180deg, var(--oro), var(--azul)); }
.dc-hito { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 44px; padding: 0 0 26px; }
.dc-hito::before { content: ""; position: absolute; left: 173px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--azul); box-shadow: 0 0 0 4px #fff; }
.dc-hito:last-child::before { background: var(--azul); }
.dc-hito-epoca { padding-top: 2px; text-align: right; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--oro-texto); }
.dc-hito-cuerpo { padding: 16px 20px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.dc-hito-cuerpo h3 { margin: 0 0 6px; font-size: 19px; }
.dc-hito-cuerpo p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--texto-suave); }
@media (max-width: 760px) {
    .dc-linea::before { left: 9px; }
    .dc-hito { grid-template-columns: 1fr; padding-left: 36px; }
    .dc-hito::before { left: 2px; }
    .dc-hito-epoca { text-align: left; margin-bottom: 8px; }
}
.dc-ventajas { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; padding: 28px; border-radius: var(--radio); background: var(--azul); color: #fff; }
.dc-ventajas h3 { margin: 0 0 8px; font-size: 22px; color: #fff; }
.dc-ventajas p { margin: 0; color: rgba(255, 255, 255, 0.88); }
.dc-ventajas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dc-ventajas li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; }
.dc-check { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--oro-claro); color: var(--tinta); }
@media (max-width: 760px) { .dc-ventajas { grid-template-columns: 1fr; padding: 22px 18px; } }
.dc-cierre { max-width: 860px; margin: 28px 0 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-style: italic; line-height: 1.6; color: var(--tinta); }

/* Nomenclaturas: tabla + gráfico de uso */
.dc-latinas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
/* El gráfico, bajo la tabla, en dos columnas cuando hay sitio */
@media (min-width: 761px) { .dc-grafico ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; } }
.dc-tabla-scroll { max-width: none; margin: 0; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); }
.dc-tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dc-tabla caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dc-tabla thead th { padding: 12px 14px; background: var(--azul); color: #fff; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; text-align: left; }
.dc-tabla td, .dc-tabla tbody th { padding: 11px 14px; border-top: 1px solid var(--borde); text-align: left; vertical-align: middle; }
.dc-tabla tbody tr:nth-child(even) { background: var(--fondo); }
.dc-tabla tbody th { text-transform: none; letter-spacing: 0; font-size: inherit; }
.dc-tabla tbody th a { font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; font-weight: 700; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.dc-tabla tbody th a:hover { color: var(--azul); text-decoration: underline; }
.dc-tabla em { color: var(--texto-suave); }
.dc-uso { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texto); white-space: nowrap; }
.dc-uso-barra { display: inline-flex; gap: 3px; }
.dc-uso-barra span { width: 10px; height: 10px; border-radius: 2px; background: #d4e0ee; }
.dc-uso-barra span.lleno { background: var(--azul); }
.dc-uso-1 .dc-uso-barra span.lleno { background: #8494a8; }
.dc-grafico { margin: 0; padding: 20px 22px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); }
.dc-grafico figcaption { margin-bottom: 14px; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 700; color: var(--azul); }
.dc-grafico ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dc-grafico li { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "sigla barra" "sigla texto"; gap: 2px 12px; align-items: center; }
.dc-grafico-sigla { grid-area: sigla; font-family: 'Source Serif 4', Georgia, serif; font-size: 14px; font-weight: 700; color: var(--tinta); }
.dc-grafico-barra { grid-area: barra; height: 12px; width: calc(var(--nivel) * 25%); border-radius: 999px; background: linear-gradient(90deg, var(--azul), #2f6fb0); }
.dc-grafico-texto { grid-area: texto; font-size: 12px; color: var(--texto-suave); }
.dc-nota { margin: 12px 0 30px; font-size: 13px; color: var(--texto-suave); }

/* Fichas de cada expresión */
.dc-fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .dc-fichas { grid-template-columns: 1fr; } }
.dc-ficha { padding: 22px 22px 18px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; scroll-margin-top: calc(var(--alto-menu) + 16px); }
.dc-ficha:target { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(2, 81, 151, 0.18); }
.dc-ficha-cabecera { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.dc-ficha-sigla { flex-shrink: 0; min-width: 92px; padding: 10px 12px; border: 3px solid #111; outline: 1px solid #111; outline-offset: 3px; text-align: center; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 700; line-height: 1.15; color: #111; background: #fff; }
.dc-ficha-cabecera em { display: block; font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; color: var(--azul); }
.dc-ficha-cabecera span { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--texto); }
.dc-ficha p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--texto-suave); }
.dc-ficha-cabecera > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
    /* En pantallas muy estrechas la expresión pasa bajo el recuadro de la abreviatura */
    .dc-ficha-cabecera { flex-direction: column; align-items: flex-start; gap: 12px; }
    .dc-ficha { padding: 18px 16px 14px; }
}

/* El latín: cita final */
.dc-tarjeta-latin { text-align: left; }
.dc-cita { margin: 0; padding: 22px 26px; border-left: 4px solid var(--oro); border-radius: 0 var(--radio) var(--radio) 0; background: #fff; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-style: italic; line-height: 1.6; color: var(--tinta); box-shadow: var(--sombra); }
@media (prefers-reduced-motion: reduce) { .dc-tarjeta, .dc-tarjeta:hover { transition: none; transform: none; } }

/* Texto solo para lectores de pantalla */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==================== ¿POR QUÉ PUBLICAR UNA ESQUELA EN ABC? ==================== */
.pq-intro { max-width: 900px; margin: 8px 0 8px; }
.pq-entrada { margin: 14px 0 12px; font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(21px, 2.3vw, 26px); line-height: 1.45; color: var(--tinta); }
.pq-intro > p:last-child { margin: 0; font-size: 17px; color: var(--texto-suave); }

/* Seis motivos en tarjetas numeradas */
.pq-motivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; counter-reset: motivo; }
@media (max-width: 800px) { .pq-motivos { grid-template-columns: 1fr; } }
.pq-motivo { position: relative; padding: 24px 26px 22px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); overflow: hidden; }
.pq-motivo::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--oro), var(--azul)); }
.pq-motivo-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pq-numero { font-family: 'Source Serif 4', Georgia, serif; font-size: 46px; font-weight: 700; line-height: 1; color: var(--azul-claro); -webkit-text-stroke: 1.5px var(--azul); }
.pq-motivo-icono { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--azul-claro); color: var(--azul); }
.pq-motivo h3 { margin: 8px 0 10px; font-size: 21px; }
.pq-motivo p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--texto-suave); }
.pq-etiquetas-titulo { margin: 4px 0 8px !important; font-size: 13px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--oro-texto) !important; }
.pq-etiquetas { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pq-etiquetas li { padding: 6px 12px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); font-size: 13.5px; font-weight: 600; color: var(--azul); }
.pq-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.pq-tipos > div { display: grid; gap: 4px; padding: 14px; border-radius: 10px; background: var(--fondo); border: 1px solid var(--borde); }
.pq-tipos strong { font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; color: var(--azul); }
.pq-tipos span:last-child { font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.pq-tipo-icono { color: var(--oro-texto); }
@media (max-width: 480px) { .pq-tipos { grid-template-columns: 1fr; } }

/* Cómo publicar: franja azul a ancho completo con cuatro pasos */
.pq-como { margin: 8px 0 56px; padding: 64px 0; background: linear-gradient(115deg, #032c55 0%, var(--azul-oscuro) 45%, var(--azul) 100%); color: #fff; border-top: 2px solid var(--oro); }
.pq-como .antetitulo { color: var(--oro-claro); }
.pq-como h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); margin: 12px 0 12px; }
.pq-como .dc-entrada { color: rgba(255, 255, 255, 0.88); }
.pq-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
@media (max-width: 960px) { .pq-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pq-pasos { grid-template-columns: 1fr; } }
.pq-paso { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 18px; border-radius: var(--radio); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
.pq-paso-icono { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--azul); margin-bottom: 6px; }
.pq-paso-numero { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--oro-claro); }
.pq-paso h3 { margin: 0; font-size: 19px; color: #fff; }
.pq-paso p { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); }
.pq-paso a { margin-top: 8px; font-size: 14px; font-weight: 700; color: #fff; }
.pq-como-pie { max-width: 860px; margin: 28px 0 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-style: italic; line-height: 1.6; color: #fff; }

.pq-como-enlace { margin: 18px 0 0; }
.pq-como-enlace a { font-size: 15px; font-weight: 700; color: #fff; }

/* Infografía: en esta página las razones van sin icono */
.pq-razones-info .razon { padding-left: 14px; border-left: 3px solid var(--azul-claro); }

/* ==========================================================================
   CÓMO PUBLICAR UNA ESQUELA EN ABC
   ========================================================================== */

/* Resumen gráfico: línea de seis pasos */
.cp-resumen { margin: -56px 0 0; padding: 56px 0 48px; background: linear-gradient(180deg, var(--fondo) 0%, #fff 100%); border-bottom: 1px solid var(--borde); }
.cp-resumen h2 { font-size: clamp(26px, 3vw, 34px); margin: 12px 0 12px; }
.cp-linea { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; position: relative; }
.cp-linea::before { content: ""; position: absolute; top: 36px; left: 8%; right: 8%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--oro), var(--azul)); }
.cp-hito a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 0 6px 18px; text-align: center; text-decoration: none; color: inherit; border-radius: var(--radio); }
.cp-hito-circulo { position: relative; width: 74px; height: 74px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; background: #fff; color: var(--azul); border: 3px solid var(--azul); box-shadow: 0 0 0 6px var(--fondo), 0 10px 22px rgba(2, 81, 151, 0.16); transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; }
.cp-hito:last-child .cp-hito-circulo { background: var(--azul); color: #fff; border-color: var(--oro); }
.cp-hito-num { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--oro-texto); color: #fff; font-size: 13px; font-weight: 700; border: 2px solid #fff; }
.cp-hito-paso { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--oro-texto); }
.cp-hito strong { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--tinta); }
.cp-hito-texto { flex: 1; font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.cp-hito-dato { margin-top: 6px; padding: 5px 10px; border-radius: 999px; background: var(--azul-claro); color: var(--azul); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.cp-hito a:hover .cp-hito-circulo, .cp-hito a:focus-visible .cp-hito-circulo { transform: translateY(-3px); background: var(--azul); color: #fff; }
.cp-hito a:hover strong { color: var(--azul); }

/* Datos clave bajo la línea */
.cp-datos { list-style: none; margin: 30px 0 0; padding: 18px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; border-radius: var(--radio); background: linear-gradient(115deg, #032c55 0%, var(--azul-oscuro) 45%, var(--azul) 100%); border-top: 2px solid var(--oro); color: #fff; }
.cp-datos li { display: flex; align-items: flex-start; gap: 12px; }
.cp-dato-icono { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--azul); }
.cp-datos strong { display: block; font-size: 15px; color: #fff; }
.cp-datos small { display: block; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.88); }

/* Pasos desarrollados */
.cp-pasos { margin: 48px 0 0; }
.cp-paso { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 36px; padding: 0 0 52px; scroll-margin-top: calc(var(--alto-menu) + 16px); position: relative; }
.cp-paso::before { content: ""; position: absolute; left: 59px; top: 150px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--borde), transparent); }
.cp-paso:last-child::before { display: none; }
.cp-paso-lateral { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Número decorativo: se pinta con CSS (contorno azul sobre relleno claro) */
.cp-paso-numero::before { content: attr(data-numero); }
.cp-paso-numero { font-family: 'Source Serif 4', Georgia, serif; font-size: 64px; font-weight: 700; line-height: 1; color: var(--azul-claro); -webkit-text-stroke: 1.5px var(--azul); }
.cp-paso-icono { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: var(--azul); color: #fff; box-shadow: 0 8px 18px rgba(2, 81, 151, 0.2); }
.cp-paso-cuerpo h2 { font-size: clamp(25px, 2.8vw, 32px); margin: 10px 0 10px; }
.cp-paso-entrada { margin: 0 0 16px; font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(19px, 2vw, 21px); line-height: 1.5; color: var(--tinta); }
.cp-paso-texto { max-width: 880px; }
.cp-paso-texto p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.7; color: var(--texto-suave); }
.cp-paso-texto strong { color: var(--tinta); }

.cp-canales { list-style: none; margin: 6px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 880px; }
.cp-canales a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; text-decoration: none; color: var(--azul); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.cp-canales a:hover { border-color: #b6cde6; box-shadow: 0 8px 20px rgba(2, 81, 151, 0.1); }
.cp-canales span { display: grid; min-width: 0; }
.cp-canales strong { font-size: 16px; overflow-wrap: anywhere; }
.cp-canales small { font-size: 13.5px; color: var(--texto-suave); }

.cp-quien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 10px 0 16px; }
.cp-quien > div, .cp-consejo { padding: 18px 20px; border-radius: var(--radio); }
.cp-quien-usted { background: var(--fondo); border: 1px solid var(--borde); }
.cp-quien-oza { background: var(--azul-claro); border: 1px solid #b6cde6; }
.cp-quien h3, .cp-consejo h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: 'Inter', Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--azul); }
.cp-consejo { background: #fbf6ec; border: 1px solid #ead9b6; border-left: 4px solid var(--oro); }
.cp-consejo h3 { color: var(--oro-texto); }
.cp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cp-lista li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.55; color: var(--texto); }
.cp-lista li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--azul); }
.cp-consejo .cp-lista li::before { background: var(--oro-texto); }
.cp-enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; }

/* Qué tener a mano */
.cp-mano { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.cp-mano h2 { font-size: clamp(25px, 2.8vw, 32px); margin: 10px 0 10px; }
.cp-mano p { color: var(--texto-suave); }
.cp-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cp-checklist li { position: relative; padding: 11px 14px 11px 44px; border-radius: 10px; background: var(--fondo); border: 1px solid var(--borde); font-size: 15px; line-height: 1.45; }
.cp-checklist li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12.5 10 16.5 18 8'/%3E%3C/svg%3E") center / 12px no-repeat; }

@media (max-width: 1080px) {
    .cp-linea { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
    .cp-linea::before { display: none; }
    .cp-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .cp-linea { grid-template-columns: 1fr; row-gap: 0; }
    .cp-linea::before { display: block; top: 30px; bottom: 30px; left: 30px; right: auto; width: 3px; height: auto; background: linear-gradient(180deg, var(--oro), var(--azul)); }
    .cp-hito a { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; padding: 0 0 20px; text-align: left; }
    .cp-hito-circulo { grid-row: 1 / span 4; width: 60px; height: 60px; margin: 0; }
    .cp-hito-dato { justify-self: start; margin-top: 4px; }
    .cp-paso { grid-template-columns: 1fr; }
    .cp-paso::before { display: none; }
    .cp-paso-lateral { flex-direction: row; justify-content: flex-start; gap: 16px; }
    .cp-paso-numero { font-size: 48px; }
    .cp-quien, .cp-canales, .cp-mano { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .cp-datos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .cp-hito-circulo, .cp-canales a { transition: none; } .cp-hito a:hover .cp-hito-circulo { transform: none; } }

/* ==========================================================================
   ESQUELAS DE ANIVERSARIO
   ========================================================================== */

/* Escena de la animación: formulario a la izquierda, esquela a la derecha */
.an-escena { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 28px; align-items: center; padding: 28px; border-radius: var(--radio); background: linear-gradient(135deg, var(--fondo) 0%, #e8f0f9 100%); border: 1px solid var(--borde); }
.an-formulario { padding: 0 0 14px; border-radius: 12px; background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); overflow: hidden; }
.an-formulario-cabecera { display: flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: 8px; background: var(--azul); color: #fff; font-size: 13px; }
.an-formulario-cabecera span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.an-formulario-cabecera strong { margin-left: 8px; font-weight: 600; }
.an-campo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 14px; }
.an-etiqueta { font-size: 12.5px; font-weight: 600; color: var(--texto-suave); text-align: right; }
.an-caja { display: block; min-height: 30px; padding: 5px 10px; border: 1px solid var(--borde); border-radius: 7px; background: #fbfcfe; font-size: 13.5px; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.an-valor { color: #0f6b3d; font-weight: 600; }
.an-campo.activo .an-caja { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(2, 81, 151, 0.18); background: #fff; }
.an-campo.activo .an-etiqueta { color: var(--azul); }
.an-campo.activo .an-valor::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--azul); animation: an-cursor 0.9s steps(1) infinite; }
.an-campo.hecho .an-etiqueta::before { content: "✓ "; color: #0f6b3d; }
@keyframes an-cursor { 50% { opacity: 0; } }

.an-papel-marco { display: flex; flex-direction: column; align-items: center; }
.an-papel { width: 100%; max-width: 460px; padding: 26px 22px 20px; background: #fff; border: 3px solid #111; outline: 1px solid #111; outline-offset: 4px; box-shadow: 0 24px 40px -18px rgba(6, 31, 61, 0.45); font-family: 'Source Serif 4', Georgia, serif; color: #1a1a1a; text-align: center; line-height: 1.4; }
.an-linea { margin: 0 0 8px; border-radius: 4px; transition: opacity 0.5s ease, transform 0.5s ease, background-color 1.2s ease; }
.an-linea.oculta { opacity: 0; visibility: hidden; transform: translateY(6px); }
.an-linea.reciente { background-color: #fbf1d9; box-shadow: 0 0 0 4px #fbf1d9; }
.an-l-cruz .esquela-cruz { margin: 0 auto 4px; }
.an-l-titulo { font-size: 14px; font-weight: 700; letter-spacing: 1.5px; }
.an-l-formula { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
.an-l-nombre { font-size: clamp(19px, 2.3vw, 26px); font-weight: 700; line-height: 1.15; }
.an-l-datos { font-size: 15px; }
.an-l-dep { font-size: 18px; font-weight: 700; letter-spacing: 3px; }
.an-l-familia { font-size: 14px; }
.an-l-ruego { font-size: 14px; }
.an-l-frase { margin-bottom: 0; font-size: 15px; font-style: italic; }
.an-l-cargo { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; }
.an-anagrama { display: block; margin: 0 auto 6px; }
.an-l-frase:not(:last-child) { margin-bottom: 8px; }
.an-l-logo { margin-top: 16px; }
.an-l-firma { margin-bottom: 0; }
.an-l-funeral { font-size: 14px; font-style: normal; }
.an-mini-anagrama .an-anagrama { width: 34px; height: 34px; margin: 0 auto; }
.an-papel-pie { margin: 14px 0 0; font-size: 13px; color: var(--texto-suave); }

/* Barra de rótulo y controles */
.an-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; margin-top: 16px; padding: 16px 20px; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--oro); box-shadow: var(--sombra); }
.an-barra[hidden] { display: none; }
.an-rotulo { min-height: 66px; }
.an-rotulo-num { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--oro-texto); }
.an-rotulo-texto { margin: 4px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--texto); }
.an-rotulo-texto strong { color: var(--azul); }
.an-controles { display: flex; gap: 8px; }
.an-boton { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--borde); background: #fff; color: var(--azul); cursor: pointer; }
.an-boton:hover { border-color: var(--azul); background: var(--azul-claro); }
.an-boton-principal { background: var(--azul); border-color: var(--azul); color: #fff; }
.an-boton-principal:hover { background: var(--azul-oscuro); }
.an-puntos { grid-column: 1 / -1; display: flex; gap: 6px; }
.an-punto { flex: 1; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.an-punto::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; background: var(--borde); transition: background 0.3s ease; }
.an-punto.activo::before { background: var(--oro); }
.an-punto:hover::before { background: #b6cde6; }
.an-punto.activo:hover::before { background: var(--oro); }
.an-punto:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

/* Sin JavaScript se ve la lista de pasos; con él, el rótulo */
.an-lista-pasos { margin: 20px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.6; color: var(--texto-suave); }
.an-lista-pasos strong { color: var(--tinta); }
.an-js .an-lista-pasos { display: none; }

/* Cuándo se publican: franja azul */
.an-cuando-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.an-cuando-tarjeta { padding: 22px 20px; border-radius: var(--radio); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
.an-cuando-icono { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; background: #fff; color: var(--azul); }
.an-cuando-tarjeta h3 { margin: 0 0 6px; font-size: 19px; color: #fff; }
.an-cuando-tarjeta p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); }

/* Modelos de texto */
.an-modelos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0 0 24px; }
.an-modelo { margin: 0; display: flex; flex-direction: column; }
.an-mini { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px; background: #fff; border: 2px solid #111; outline: 1px solid #111; outline-offset: 3px; font-family: 'Source Serif 4', Georgia, serif; font-size: 13.5px; line-height: 1.4; color: #1a1a1a; text-align: center; }
.an-mini b { font-size: 16px; }
.an-mini-cruz .esquela-cruz { width: 16px; height: 20px; margin: 0 auto; }
.an-modelo figcaption { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--azul); text-align: center; }
.an-consejos { margin-bottom: 8px; }

.an-ejemplos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.an-motivos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Tabla de diferencias */
.an-tabla-marco { max-width: none; }
.an-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.5; }
.an-tabla th, .an-tabla td { padding: 14px 16px; white-space: normal; vertical-align: top; text-align: left; border-bottom: 1px solid var(--borde); }
.an-tabla thead th { font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; color: var(--azul); border-bottom: 2px solid var(--azul); }
.an-tabla tbody th { width: 16%; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--oro-texto); }
.an-tabla td { color: var(--texto-suave); }
.an-tabla .an-destacada { background: var(--azul-claro); color: var(--texto); }
.an-tabla thead .an-destacada { border-radius: 10px 10px 0 0; background: var(--azul); color: #fff; }
.an-tabla tbody tr:last-child .an-destacada { border-radius: 0 0 10px 10px; }

@media (max-width: 1080px) {
    .an-cuando-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .an-motivos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .an-escena { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
    /* En una columna solo se ve el campo que se está rellenando, para tener a la vista la esquela */
    .an-js .an-campo:not(.activo) { display: none; }
    .an-js .an-formulario { padding-bottom: 8px; }
    .an-modelos { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 900px) {
    /* La tabla se apila: un bloque por aspecto, con el tipo de esquela delante de cada valor */
    .an-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .an-tabla, .an-tabla tbody, .an-tabla tr, .an-tabla th, .an-tabla td { display: block; width: auto; }
    .an-tabla tr { margin-bottom: 16px; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
    .an-tabla tbody th { width: auto; padding: 10px 14px; background: var(--fondo); }
    .an-tabla td { padding: 10px 14px; }
    .an-tabla td::before { content: attr(data-titulo); display: block; font-size: 12.5px; font-weight: 700; color: var(--azul); }
    .an-tabla tbody tr:last-child .an-destacada { border-radius: 0; }
    .an-tabla tr td:last-child { border-bottom: 0; }
}
@media (max-width: 760px) { .an-ejemplos, .an-cuando-rejilla, .an-motivos { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
    .an-campo { grid-template-columns: 1fr; gap: 3px; }
    .an-etiqueta { text-align: left; }
    .an-barra { grid-template-columns: 1fr; padding: 14px 12px; }
    .an-controles { justify-content: center; }
    /* Los puntos de avance mantienen al menos 24 px de ancho para tocarlos con el dedo */
    .an-puntos { flex-wrap: wrap; gap: 2px; }
    .an-punto { min-width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .an-linea, .an-caja, .an-punto::before { transition: none; }
    .an-campo.activo .an-valor::after { animation: none; }
}


/* ============ TIPOS DE ESQUELA: PRUEBA DE IMPRENTA (js/animacion-prueba.js) ============ */
/* La esquela sale de debajo de un rodillo, cada parte se entinta y una nota de corrector la señala al margen */
.an-prueba .an-escena {
    display: block;
    padding: 0 0 34px;
    background: #f3efe6 radial-gradient(rgba(6, 31, 61, 0.07) 1px, transparent 1px) 0 0 / 16px 16px;
    border-color: #e4dccb;
    overflow: hidden;
}
.an-prueba .an-formulario { display: none; }
.an-prueba .an-papel-marco { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px) minmax(0, 1fr); justify-items: center; padding-top: 0; }
.an-prueba .an-papel-marco > * { grid-column: 2; }
.an-prueba .an-papel { position: relative; z-index: 1; margin-top: -6px; max-width: 460px; }
.an-prueba .an-papel-pie { color: #6b6455; }
/* Rodillo: barra oscura a todo el ancho con brillo metálico */
.pr-rodillo {
    grid-column: 1 / -1 !important;
    justify-self: stretch;
    position: relative;
    z-index: 2;
    height: 26px;
    background: linear-gradient(180deg, #2a3f57 0%, #0b2440 45%, #04152b 100%);
    box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.45);
}
.pr-rodillo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--oro); opacity: 0.8; }
/* Salida y recogida del papel */
.an-prueba .an-papel.saliendo { animation: pr-salir 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); }
.an-prueba .an-papel.recogiendo { animation: pr-recoger 0.9s cubic-bezier(0.55, 0, 0.75, 0.2) forwards; }
@keyframes pr-salir { from { transform: translateY(-100%); } }
@keyframes pr-recoger { to { transform: translateY(-100%); } }
/* Entintado de cada línea: aparece de izquierda a derecha, como si pasara el rodillo */
.an-prueba .an-linea { transition: background-color 1.4s ease, box-shadow 1.4s ease; }
.an-prueba.an-js .an-linea.oculta { opacity: 0; visibility: hidden; transform: none; }
.an-prueba .an-linea.entintando { animation: pr-tinta 0.9s cubic-bezier(0.45, 0, 0.25, 1); }
@keyframes pr-tinta {
    0% { clip-path: inset(0 100% 0 0); filter: blur(1.5px); color: #6b6455; }
    70% { filter: blur(0); }
    100% { clip-path: inset(0 0 0 0); color: inherit; }
}
.an-prueba .an-linea.reciente { background-color: rgba(165, 132, 79, 0.14); box-shadow: 0 0 0 4px rgba(165, 132, 79, 0.14); }
/* Notas de corrector al margen derecho, unidas a su línea por un hilo dorado */
.an-prueba .an-papel-marco > .pr-notas { grid-column: auto; position: absolute; top: 0; bottom: 0; left: calc(50% + 230px); right: 0; pointer-events: none; }
.pr-nota {
    position: absolute;
    left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 30px);
    padding: 5px 10px 5px 8px;
    border: 1px solid #e4dccb;
    border-radius: 6px;
    background: #fffdf8;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b6455;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translate(-6px, -50%);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.pr-nota b { font-family: 'Source Serif 4', Georgia, serif; color: var(--oro-texto); }
.pr-nota::before { content: ""; position: absolute; }
.pr-nota.hecha { opacity: 0.55; transform: translate(0, -50%); }
.pr-nota.activa { opacity: 1; transform: translate(0, -50%); border-color: var(--oro); color: var(--tinta); box-shadow: 0 6px 14px -8px rgba(6, 31, 61, 0.4); overflow: visible; }
/* Hilo de la nota activa hasta el borde del papel */
.pr-nota.activa::before { right: 100%; top: 50%; width: 22px; height: 0; border-top: 1px dashed var(--oro); }
.pr-nota.activa::after { content: ""; position: absolute; right: calc(100% + 20px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--oro); }
.pr-nota-movil { display: none; }
/* Regla tipográfica: los pasos como marcas numeradas */
.an-prueba .an-puntos { gap: 0; padding-top: 6px; border-top: 1px solid var(--borde); }
.an-prueba .an-punto { height: 30px; }
.an-prueba .an-punto::before { top: 0; left: 50%; right: auto; width: 1px; height: 10px; border-radius: 0; background: #b9b2a2; transition: height 0.3s ease, background 0.3s ease; }
.an-prueba .an-punto::after { content: attr(data-ir); position: absolute; left: 0; right: 0; top: 12px; font-family: 'Source Serif 4', Georgia, serif; font-size: 12px; color: var(--texto-suave); }
.an-prueba .an-punto.hecho::before { background: var(--azul); height: 12px; }
.an-prueba .an-punto.activo::before { background: var(--oro); width: 3px; height: 14px; margin-left: -1px; }
.an-prueba .an-punto.activo::after { color: var(--oro-texto); font-weight: 700; }
.an-prueba .an-punto:hover::before { background: var(--azul); }
@media (max-width: 960px) {
    .an-prueba .an-papel-marco { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
    .an-prueba .an-papel-marco > * { grid-column: 1; }
    .pr-notas { display: none; }
    .pr-nota-movil {
        display: block;
        justify-self: center;
        position: relative;
        z-index: 3;
        margin: 10px 0 4px;
        padding: 4px 12px;
        border: 1px solid var(--oro);
        border-radius: 999px;
        background: #fffdf8;
        font-size: 13px;
        font-weight: 600;
        color: var(--tinta);
        visibility: hidden;
    }
    .pr-nota-movil.visible { visibility: visible; }
    .an-prueba .an-papel { margin-top: 0; }
    .an-prueba .pr-rodillo { order: -2; }
}
@media (prefers-reduced-motion: reduce) {
    .an-prueba .an-papel.saliendo, .an-prueba .an-papel.recogiendo, .an-prueba .an-linea.entintando { animation: none; }
}

/* ============ AJUSTES DE LARAZON-ESQUELAS.ES ============ */
/* Precios de La Razón: el precio con IVA en grande y, debajo y más pequeño, el precio sin IVA */
.tabla-tarifas td.num,
.precios-variante td.num { font-weight: 700; }
.tabla-tarifas td.num .sin-iva,
.precios-variante td.num .sin-iva { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--texto-suave); white-space: nowrap; }
.precios-variante td.num .sin-iva { font-size: 11px; }
/* Visor de formatos de la portada */
.formato-vista-precio b { font-size: 18px; }
.formato-vista-precio small { display: block; font-size: 13px; color: var(--texto-suave); }
/* Modelos de La Razón (GIF en blanco y negro) sobre fondo blanco en las vistas previas */
.formato-vista-imagen img, .razones-imagen img { background: #fff; }
/* Los nombres de edición de La Razón son largos: se permite que salten de línea */
.ediciones-lista a { white-space: normal; }
/* Vista de formatos: esquela de ejemplo maquetada en HTML para cada modelo, con sus proporciones reales
   (--r = ancho / alto), centrada sobre un fondo de altura fija para que no salte al cambiar.
   Los textos se miden en cqw (ancho de la esquela) y el alto va ligado al ancho, así que cada esquela
   se ve igual a cualquier tamaño de pantalla; --t es el cuerpo de letra de cada modelo. */
.formato-vista-imagen {
    --alto-max: 372px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 420px;
    padding: 24px;
    background: #f1efe9;
    cursor: default;
}
.fv-esquela {
    container-type: inline-size;
    flex-shrink: 0;
    width: min(100%, calc(var(--alto-max) * var(--r)));
    aspect-ratio: var(--r);
    padding: 4px;
    background: #fff;
    border: 2px solid #111;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.fv-esquela[hidden] { display: none; }
.formato-vista-imagen:hover .fv-esquela { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16); }
.fv-marco {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.4em 1.6em 1.3em;
    font-family: 'Inter', Arial, sans-serif;
    font-size: calc(var(--t) * 1cqw);
    line-height: 1.3;
    text-align: center;
    color: #111;
}
.fv-marco p { margin: 0; text-wrap: pretty; }
.fv-cruz { display: block; width: 1.5em; height: 2em; margin: 0 auto; }
.fv-cruz-grande { width: 2.3em; height: 3em; }
.fv-rogad { font-size: 0.82em; letter-spacing: 0.08em; text-transform: uppercase; }
.fv-nombre, .fv-entidad {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 700;
    line-height: 1.08;
    text-transform: uppercase;
    text-wrap: balance;
}
.fv-nombre { font-size: 2.2em; }
.fv-nombre-grande { font-size: 2.6em; white-space: nowrap; }
.fv-esquela[data-modelo="4"] .fv-nombre-grande { font-size: 2.25em; }
.fv-entidad { font-size: 1.75em; }
.fv-esquela[data-modelo="5"] .fv-entidad { font-size: 1.55em; }
.fv-cargo { margin-top: 0.2em !important; font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 1.05em; }
.fv-nota { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-size: 0.9em; }
.fv-conyuge { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 1.3em; }
.fv-conyuge-grande { font-size: 1.9em; }
.fv-texto { font-size: 1em; }
.fv-mayus { font-size: 0.85em; font-weight: 700; text-transform: uppercase; }
.fv-texto b { font-weight: 700; letter-spacing: 0.04em; }
.fv-dep { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 1.1em; letter-spacing: 0.15em; }
.fv-izquierda { text-align: left; }
.fv-sangria { padding-left: 1.6em; }
.fv-lista { list-style: none; margin: 0; padding: 0; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 1.25em; line-height: 1.55; text-transform: uppercase; }
.fv-lista-entidades { align-self: center; text-align: left; font-family: 'Inter', Arial, sans-serif; font-weight: 700; font-size: 0.95em; line-height: 1.75; }
/* Al cambiar de modelo, la esquela nueva aparece con un leve zoom */
@media (prefers-reduced-motion: no-preference) {
    .fv-esquela:not([hidden]) { animation: fv-entra 0.45s cubic-bezier(.2, .8, .3, 1); }
}
@keyframes fv-entra { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fv-esquela { transition: none; } }
@media (max-width: 860px) { .formato-vista-imagen { --alto-max: 262px; height: 300px; padding: 18px; } }
.formato-vista-imagen .fv-esquela { cursor: zoom-in; }
.formato-vista-ampliar { border: 0; cursor: pointer; font-family: inherit; box-shadow: 0 4px 12px rgba(2, 81, 151, 0.25); }
.formato-vista-ampliar:hover { background: var(--azul-oscuro); }

/* Esquela de ejemplo en grande (ventana con <dialog>): ocupa casi toda la pantalla y, como sus textos
   van en cqw, se ve exactamente igual que en el visor pero más grande */
.fv-ampliada {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}
.fv-ampliada::backdrop { background: rgba(6, 31, 61, 0.93); }
.fv-ampliada[open] { display: flex; flex-direction: column; }
.fv-ampliada-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    color: #fff;
}
.fv-ampliada-cabecera p { margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 600; }
.fv-ampliada-cerrar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--tinta);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.fv-ampliada-cerrar:hover { transform: rotate(90deg); background: var(--oro-claro); }
.fv-ampliada-cerrar:focus-visible { outline: 3px solid var(--oro-claro); outline-offset: 3px; }
.fv-ampliada-lienzo {
    --alto-max: calc(100vh - 110px);
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px 24px;
}
.fv-ampliada-lienzo .fv-esquela { width: min(100%, 900px, calc(var(--alto-max) * var(--r))); border-width: 3px; padding: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
@media (prefers-reduced-motion: no-preference) {
    .fv-ampliada[open] .fv-esquela { animation: fv-entra 0.35s cubic-bezier(.2, .8, .3, 1); }
}
.sin-desplazamiento { overflow: hidden; }

/* Ventana en grande con comparativa (lupas de la página de tarifas): la esquela de muestra y, a su lado,
   la página de EL MUNDO (319 × 246 mm) con texto simulado en cinco columnas y la misma esquela en
   miniatura, a escala, en el hueco que ocupa (--ancho-pct / --alto-pct los pone js/web.js) */
.fv-comparativa { display: flex; align-items: center; justify-content: center; gap: 44px; width: 100%; height: 100%; }
.fv-comparativa-esquela { min-width: 0; display: flex; justify-content: center; }
.fv-comparativa-esquela .fv-esquela { width: min(56vw, 760px, calc(var(--alto-max) * var(--r))); }
.fv-comparativa-pagina { flex-shrink: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fv-pagina {
    position: relative;
    height: min(calc(var(--alto-max) - 80px), 64vh);
    aspect-ratio: 246 / 319;
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(20% - 3px), #fff calc(20% - 3px) 20%),
        repeating-linear-gradient(180deg, #e3e9f0 0 2px, transparent 2px 7px) 0 9% / 100% 91% no-repeat,
        #fff;
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.6);
}
.fv-pagina-cabecera {
    position: absolute;
    inset: 0 0 auto;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6%;
    border-bottom: 2px solid #111;
    background: #fff;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(9px, 1.4vh, 13px);
    color: #111;
}
.fv-pagina-cabecera span { font-family: 'Inter', sans-serif; font-size: 0.8em; letter-spacing: 0.15em; color: var(--azul); }
.fv-pagina-hueco {
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--ancho-pct);
    height: var(--alto-pct);
    display: flex;
    background: #fff;
    outline: 2px solid var(--oro);
    box-shadow: 0 0 0 5px rgba(224, 196, 143, 0.35), 0 0 26px rgba(224, 196, 143, 0.55);
}
.fv-ampliada-lienzo .fv-pagina-hueco .fv-esquela { width: 100%; height: 100%; padding: 1px; border-width: 1px; box-shadow: none; animation: none; }
.fv-comparativa-pagina figcaption { max-width: 300px; text-align: center; color: rgba(255, 255, 255, 0.78); font-size: 13px; line-height: 1.45; }
.fv-comparativa-pagina figcaption strong { display: block; margin-bottom: 2px; font-family: 'Source Serif 4', Georgia, serif; font-size: 20px; color: var(--oro-claro); }
@media (prefers-reduced-motion: no-preference) {
    .fv-ampliada[open] .fv-pagina-hueco { animation: fv-hueco 2.4s ease-in-out 0.4s 2; }
}
@keyframes fv-hueco {
    0%, 100% { box-shadow: 0 0 0 5px rgba(224, 196, 143, 0.35), 0 0 26px rgba(224, 196, 143, 0.55); }
    50% { box-shadow: 0 0 0 9px rgba(224, 196, 143, 0.2), 0 0 40px rgba(224, 196, 143, 0.85); }
}
@media (max-width: 760px) {
    .fv-ampliada-lienzo:has(.fv-comparativa) { align-items: flex-start; overflow-y: auto; }
    .fv-comparativa { flex-direction: column; gap: 18px; height: auto; }
    .fv-comparativa-esquela { width: 100%; }
    .fv-comparativa-esquela .fv-esquela { width: min(100%, calc(46vh * var(--r))); }
    .fv-pagina { height: 32vh; }
    .fv-comparativa-pagina figcaption strong { font-size: 17px; }
}
@media (max-width: 600px) {
    .fv-ampliada-cabecera { padding: 10px 12px; }
    .fv-ampliada-cabecera p { font-size: 16px; }
    .fv-ampliada-lienzo { --alto-max: calc(100vh - 90px); padding: 0 10px 14px; }
}

/* Ventana abierta desde una lupa de tabla (.con-formatos, js/web.js): edición sobre el título, precios
   de la fila debajo de la esquela y flechas laterales para pasar al formato anterior o siguiente */
.fv-ampliada-edicion { display: none; }
.fv-ampliada-precios, .fv-ampliada-flecha { display: none; }
.con-formatos .fv-ampliada-edicion {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--oro-claro);
}
.con-formatos .fv-ampliada-lienzo { --alto-max: calc(100vh - 210px); padding-left: 88px; padding-right: 88px; padding-bottom: 12px; }
.con-formatos .fv-ampliada-precios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    padding: 0 20px 18px;
}
.fv-ampliada-precio {
    margin: 0;
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 0 10px;
    padding: 8px 16px;
    border-radius: 12px;
    background: #fff;
    color: var(--texto);
    line-height: 1.3;
}
.fv-ampliada-precio span { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--oro-texto); }
.fv-ampliada-precio b { font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; color: var(--azul); white-space: nowrap; }
.fv-ampliada-precio small { font-size: 12.5px; color: var(--texto-suave); white-space: nowrap; }
.fv-ampliada-contador { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.78); }
.con-formatos .fv-ampliada-flecha {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--azul);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transform: translateY(-50%);
    transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.fv-ampliada-anterior { left: 18px; }
.fv-ampliada-siguiente { right: 18px; }
.con-formatos .fv-ampliada-flecha:hover:not(:disabled) { background: var(--oro-claro); transform: translateY(-50%) scale(1.06); }
.con-formatos .fv-ampliada-flecha:focus-visible { outline: 3px solid var(--oro-claro); outline-offset: 3px; }
.con-formatos .fv-ampliada-flecha:disabled { opacity: 0.25; cursor: default; box-shadow: none; }
@media (max-width: 760px) {
    /* En móvil la esquela y la página van una debajo de otra con desplazamiento: las flechas
       pasan a la franja de precios, abajo, para no tapar la esquela */
    .con-formatos .fv-ampliada-lienzo { --alto-max: calc(100vh - 230px); padding-left: 10px; padding-right: 10px; }
    .con-formatos .fv-ampliada-precios { gap: 8px; padding: 10px 70px 14px; position: relative; }
    .fv-ampliada-precio { padding: 6px 12px; }
    .fv-ampliada-precio b { font-size: 18px; }
    .con-formatos .fv-ampliada-flecha { top: auto; bottom: 14px; width: 50px; height: 50px; transform: none; }
    .con-formatos .fv-ampliada-flecha:hover:not(:disabled) { transform: none; }
    .fv-ampliada-anterior { left: 10px; }
    .fv-ampliada-siguiente { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .con-formatos .fv-ampliada-flecha { transition: none; }
}
.razones-imagen { background: #f7f7f5; padding: 28px; }
.razones-imagen img { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
/* Con dos precios por celda la tabla necesita sitio: las medidas pasan debajo del formato antes */
@media (max-width: 1180px) {
    .tabla-tarifas .col-medidas { display: none; }
    .tarifa-medidas { display: block; }
}

/* Ediciones de La Razón: la esquela 1/2 deja un recuadro estrecho para la etiqueta del precio */
.tp-etiqueta { white-space: nowrap; }
@container (max-width: 110px) {
    .tp-etiqueta { align-self: flex-start; padding: 3px 7px; border-radius: 8px; }
    .tp-precio { font-size: 15px; }
    .tp-precio-sin { display: none; }
}
/* Retrato de la portada: tarjeta de esquinas redondeadas, algo inclinada sobre otra tarjeta azul apilada detrás,
   con un indicador de «llamada en curso» (barras de audio) en cristal esmerilado. Al pasar el ratón la tarjeta
   se endereza, la de detrás se abre en abanico y las barras vuelven a moverse (nunca más de 5 s: WCAG 2.2.2) */
.confianza .retrato-tarjeta::before {
    inset: 0;
    border: 0;
    border-radius: 30px;
    background: linear-gradient(150deg, #4f9be0 0%, var(--azul) 60%, var(--azul-oscuro) 100%);
    transform: rotate(8deg) translate(10px, 4px);
    opacity: 1;
    animation: retrato-tarjeta-abanico 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s backwards;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.confianza .retrato-tarjeta::after {
    inset: 0;
    border: 2px solid rgba(2, 81, 151, 0.35);
    border-radius: 30px;
    transform: rotate(-12deg) translate(-8px, 6px);
    animation: retrato-tarjeta-abanico 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.7s ease;
}
.retrato-tarjeta .retrato-foto {
    border: 0;
    border-radius: 28px;
    transform: rotate(-3deg);
    box-shadow: 0 24px 40px -18px rgba(2, 31, 61, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.7s ease;
}
.retrato-tarjeta .retrato-foto img { transform: scale(1.08); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.retrato-tarjeta .retrato-foto::after { display: none; }
.confianza:hover .retrato-tarjeta::before,
.confianza:hover .retrato-tarjeta::after { animation: none; }
.confianza:hover .retrato-tarjeta::before { transform: rotate(14deg) translate(18px, 2px); }
.confianza:hover .retrato-tarjeta::after { transform: rotate(-18deg) translate(-16px, 8px); border-color: rgba(2, 81, 151, 0.6); }
.confianza:hover .retrato-tarjeta .retrato-foto { transform: rotate(0) translateY(-6px); box-shadow: 0 34px 50px -20px rgba(2, 31, 61, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.confianza:hover .retrato-tarjeta .retrato-foto img { transform: scale(1.16); }
@keyframes retrato-tarjeta-abanico { from { transform: rotate(0) translate(0, 0); opacity: 0; } }
/* Indicador de llamada: pastilla de cristal con barras de audio, arriba a la derecha */
.retrato-llamada {
    position: absolute;
    z-index: 2;
    top: -12px;
    right: -16px;
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 34px;
    padding: 9px 11px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
            backdrop-filter: blur(10px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 22px -8px rgba(2, 31, 61, 0.35);
    transform: rotate(4deg);
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.retrato-llamada span {
    width: 4px;
    height: 100%;
    border-radius: 2px;
    background: var(--azul);
    transform-origin: bottom;
    transform: scaleY(0.45);
    animation: retrato-audio 0.9s ease-in-out 3;
}
.retrato-llamada span:nth-child(2) { animation-delay: 0.15s; transform: scaleY(0.8); }
.retrato-llamada span:nth-child(3) { animation-delay: 0.3s; transform: scaleY(0.6); }
.retrato-llamada span:nth-child(4) { animation-delay: 0.45s; transform: scaleY(0.35); }
.confianza:hover .retrato-llamada { transform: rotate(0) translateY(-4px); }
.confianza:hover .retrato-llamada span { animation-name: retrato-audio-repeticion; }
@keyframes retrato-audio { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes retrato-audio-repeticion { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
    .confianza .retrato-tarjeta::before, .confianza .retrato-tarjeta::after, .retrato-llamada span { animation: none; }
    .confianza .retrato-tarjeta::before, .confianza .retrato-tarjeta::after, .retrato-tarjeta .retrato-foto, .retrato-tarjeta .retrato-foto img, .retrato-llamada { transition: none; }
}/* Portada: esquela de defunción de ejemplo maquetada en HTML (sustituye a la imagen en «¿Por qué publicar…?») */
.razones-esquela { margin: 0; padding: 28px; cursor: default; background: #f1efe9; }
.razones-esquela figcaption { margin-top: 14px; text-align: center; font-size: 12px; letter-spacing: 0.4px; color: var(--texto-suave); }
.esquela-tipo {
    padding: 6px;
    background: #fff;
    border: 3px solid #111;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.razones-esquela:hover .esquela-tipo { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16); }
.esquela-tipo-marco {
    padding: 22px 20px 20px;
    border: 1px solid #111;
    text-align: center;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #111;
}
.esquela-tipo-marco p { margin: 0 0 10px; }
.esquela-tipo-marco p:last-child { margin-bottom: 0; }
.esquela-tipo-cruz { display: block; margin: 0 auto 12px; color: #111; }
.esquela-tipo-rogad { font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; }
.esquela-tipo-nombre { margin-bottom: 4px !important; font-size: 25px; font-weight: 700; line-height: 1.12; text-transform: uppercase; letter-spacing: 0.3px; }
.esquela-tipo-cargo { font-style: italic; }
.esquela-tipo-dep { margin: 14px 0 !important; font-size: 18px; font-weight: 700; letter-spacing: 3px; }
.esquela-tipo-ruegan { font-size: 14.5px; }
.esquela-tipo-ruegan b { letter-spacing: 1px; text-transform: uppercase; }
.esquela-tipo-funeral { font-size: 12.5px; }
@media (max-width: 600px) {
    .razones-esquela { padding: 16px; }
    .esquela-tipo-marco { padding: 18px 14px 16px; font-size: 12.5px; }
    .esquela-tipo-nombre { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .esquela-tipo { transition: none; } }
/* Portada: reclamo de la plantilla (sustituye al taller con formulario). Franja azul con una hoja de
   plantilla ilustrada, ligeramente girada, que se endereza al pasar el ratón */
.reclamo-plantilla {
    margin: 24px 0 56px;
    padding: 72px 0;
    color: #fff;
    background:
        radial-gradient(ellipse at 10% 100%, rgba(165, 132, 79, 0.22), rgba(165, 132, 79, 0) 55%),
        linear-gradient(115deg, #032c55 0%, var(--azul-oscuro) 50%, var(--azul) 100%);
    overflow: hidden;
}
.reclamo-plantilla-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 72px; align-items: center; }
.reclamo-hoja { position: relative; display: block; justify-self: center; width: 100%; max-width: 360px; aspect-ratio: 3 / 3.6; text-decoration: none; }
.reclamo-hoja-fondo, .reclamo-hoja-papel { position: absolute; inset: 0; border-radius: 4px; }
.reclamo-hoja-fondo { background: rgba(255, 255, 255, 0.14); transform: rotate(6deg) translate(14px, 6px); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reclamo-hoja-papel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 32px;
    background: #fffdf8;
    color: #1a1a1a;
    box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.55);
    transform: rotate(-4deg);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reclamo-hoja-cruz { align-self: center; }
.reclamo-hoja-titulo { margin-bottom: 4px; text-align: center; font-family: 'Source Serif 4', Georgia, serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid #1a1a1a; padding-bottom: 10px; }
.reclamo-hoja-campo { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 10px; }
.reclamo-hoja-campo small { font-family: 'Inter', sans-serif; font-size: 11px; color: #6b6455; white-space: nowrap; }
.reclamo-hoja-campo i { display: block; height: 1px; border-bottom: 1.5px dotted #b9b2a2; }
.reclamo-hoja-campo i + i { grid-column: 1 / -1; margin-top: 10px; }
.reclamo-hoja-doble { grid-template-columns: auto 1fr auto 0.6fr; }
.reclamo-hoja-doble i + small { margin-left: 4px; }
.reclamo-hoja-doble i + i, .reclamo-hoja-doble small + i { grid-column: auto; margin-top: 0; }
.reclamo-hoja-dep { margin-top: auto; text-align: center; font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; letter-spacing: 3px; }
.reclamo-hoja-pluma { position: absolute; right: -26px; bottom: -18px; color: var(--oro-claro); transform: rotate(8deg); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
.reclamo-plantilla:hover .reclamo-hoja-papel { transform: rotate(0deg) translateY(-6px); }
.reclamo-plantilla:hover .reclamo-hoja-fondo { transform: rotate(9deg) translate(20px, 8px); }
.reclamo-plantilla:hover .reclamo-hoja-pluma { transform: rotate(-4deg) translate(-10px, -12px); }
.reclamo-texto .antetitulo { color: var(--oro-claro); }
.reclamo-texto h2 { margin: 8px 0 16px; color: #fff; font-size: 44px; }
.reclamo-texto p { margin: 0 0 22px; max-width: 560px; font-size: 18px; color: rgba(255, 255, 255, 0.88); }
.reclamo-ventajas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }
.reclamo-ventajas li { padding: 7px 14px 7px 32px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; font-size: 14px; position: relative; }
.reclamo-ventajas li::before { content: "✓"; position: absolute; left: 13px; color: var(--oro-claro); font-weight: 700; }
.reclamo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.reclamo-boton {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 30px; border-radius: 999px;
    background: #fff; color: var(--azul);
    font-size: 18px; font-weight: 700; text-decoration: none;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, background 0.25s ease;
}
.reclamo-boton span { transition: transform 0.25s ease; }
.reclamo-boton:hover { background: var(--azul-claro); transform: translateY(-2px); }
.reclamo-boton:hover span { transform: translateX(4px); }
.reclamo-telefono { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.reclamo-plantilla :focus-visible { outline-color: #fff !important; }
@media (max-width: 900px) {
    .reclamo-plantilla { padding: 56px 0; }
    .reclamo-plantilla-layout { grid-template-columns: 1fr; gap: 48px; }
    .reclamo-hoja { max-width: 280px; }
    .reclamo-texto { text-align: center; }
    .reclamo-texto p { margin-left: auto; margin-right: auto; }
    .reclamo-ventajas, .reclamo-acciones { justify-content: center; }
    .reclamo-texto h2 { font-size: 36px; }
}
@media (max-width: 600px) {
    .reclamo-hoja-papel { padding: 22px 22px; gap: 11px; }
    .reclamo-hoja-pluma { width: 70px; height: 70px; right: -14px; }
    .reclamo-texto h2 { font-size: 30px; }
    .reclamo-texto p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .reclamo-hoja-papel, .reclamo-hoja-fondo, .reclamo-hoja-pluma, .reclamo-boton, .reclamo-boton span { transition: none; }
}
@media (max-width: 600px) {
    .reclamo-hoja { max-width: 240px; }
    .reclamo-ventajas { flex-direction: column; align-items: center; gap: 6px; }
    .reclamo-ventajas li { padding: 0 0 0 20px; border: 0; border-radius: 0; }
    .reclamo-ventajas li::before { left: 0; }
}

/* Portada: tipos de esquelas («La esquela acompaña diferentes momentos»). Cuatro tarjetas como esquelas
   enmarcadas (marco exterior fino y filete dorado interior), cada una con un sello en rombo sobre el borde
   superior; una línea dorada une los sellos como una línea del tiempo. La de defunción va en azul tinta.
   Al pasar el ratón la tarjeta sube, el filete se marca y el sello se rellena de oro. Al llegar a la sección
   (js/web.js añade .momentos-visible) la línea se dibuja y las tarjetas aparecen una tras otra. */
.momentos {
    margin: 0 0 56px;
    padding: 52px 40px 40px;
    border: 1px solid #e8dfcd;
    border-radius: 28px;
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(224, 196, 143, 0.22), transparent 70%),
        linear-gradient(180deg, #fbf8f2 0%, #fff 100%);
}
.momentos-cabecera { max-width: 640px; margin: 0 auto 30px; text-align: center; }
.momentos-cabecera .antetitulo::after { content: ""; width: 36px; height: 1px; background: var(--oro); }
.momentos-cabecera h2 { margin: 12px 0 12px; font-size: clamp(30px, 3.6vw, 42px); }
.momentos-cabecera p { margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; line-height: 1.55; color: var(--texto-suave); }

.momentos-lista {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 34px 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}
/* Línea del tiempo que une los sellos */
.momentos-lista::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 4%;
    right: 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--oro) 12%, var(--oro) 88%, transparent);
    transform-origin: left;
}
.momento { position: relative; z-index: 1; display: flex; }
.momento a {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 22px 24px;
    border: 1px solid rgba(6, 31, 61, 0.22);
    border-radius: 6px;
    background: #fff;
    color: inherit;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(6, 31, 61, 0.04), 0 14px 30px -18px rgba(6, 31, 61, 0.22);
    transition: transform 0.45s cubic-bezier(.2, .8, .3, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}
/* Filete dorado interior, como el marco de una esquela */
.momento a::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(165, 132, 79, 0.35);
    border-radius: 3px;
    pointer-events: none;
    transition: border-color 0.45s ease, inset 0.45s ease;
}
.momento a:hover,
.momento a:focus-visible { transform: translateY(-8px); border-color: rgba(6, 31, 61, 0.4); box-shadow: 0 1px 0 rgba(6, 31, 61, 0.04), 0 28px 44px -20px rgba(6, 31, 61, 0.32); }
.momento a:hover::before,
.momento a:focus-visible::before { border-color: var(--oro); inset: 8px; }
/* Sello en rombo montado sobre el borde superior */
.momento-icono {
    position: absolute;
    top: 0;
    left: 50%;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--oro);
    border-radius: 8px;
    background: #fff;
    color: var(--azul);
    box-shadow: 0 0 0 6px #fdfbf7, 0 8px 18px -8px rgba(6, 31, 61, 0.35);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: background-color 0.45s ease, color 0.45s ease, transform 0.6s cubic-bezier(.2, .8, .3, 1);
}
.momento-icono svg { width: 22px; height: 22px; transform: rotate(-45deg); transition: transform 0.6s cubic-bezier(.2, .8, .3, 1); }
/* El rombo gira, pero el icono gira al revés a la vez para quedarse quieto y derecho */
.momento a:hover .momento-icono svg,
.momento a:focus-visible .momento-icono svg { transform: rotate(-225deg); }
.momento a:hover .momento-icono,
.momento a:focus-visible .momento-icono { background: var(--oro); color: #fff; transform: translate(-50%, -50%) rotate(225deg); }
.momento-cuando {
    margin-bottom: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--oro-texto);
}
.momento h3 { margin: 0 0 14px; font-size: 25px; color: var(--tinta); }
/* Ornamento bajo el título: filete – ✦ – filete */
.momento h3::after {
    content: "✦";
    display: block;
    width: 110px;
    margin: 10px auto 0;
    font-size: 10px;
    line-height: 1;
    color: var(--oro);
    background: linear-gradient(90deg, transparent, var(--oro) 40%, transparent 42%, transparent 58%, var(--oro) 60%, transparent) center / 100% 1px no-repeat;
}
.momento p { margin: 0 0 22px; font-family: 'Source Serif 4', Georgia, serif; font-size: 15.5px; line-height: 1.6; color: var(--texto-suave); }
.momento-enlace {
    position: relative;
    margin-top: auto;
    padding-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--azul);
}
.momento-enlace::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--oro);
    transform: scaleX(0.35);
    transition: transform 0.4s ease;
}
.momento-enlace::after { content: " →"; display: inline-block; transition: transform 0.3s ease; }
.momento a:hover .momento-enlace::before,
.momento a:focus-visible .momento-enlace::before { transform: scaleX(1); }
.momento a:hover .momento-enlace::after { transform: translateX(4px); }

/* Defunción, en azul tinta */
.momento-destacado a {
    border-color: var(--tinta);
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(224, 196, 143, 0.18), transparent 70%),
        linear-gradient(180deg, var(--azul) 0%, var(--tinta) 80%);
    box-shadow: 0 22px 40px -18px rgba(6, 31, 61, 0.55);
}
.momento-destacado a::before { border-color: rgba(224, 196, 143, 0.45); }
.momento-destacado .momento-icono { background: var(--tinta); color: var(--oro-claro); border-color: var(--oro-claro); }
.momento-destacado .momento-cuando { color: var(--oro-claro); }
.momento-destacado h3 { color: #fff; }
.momento-destacado p { color: rgba(255, 255, 255, 0.84); }
.momento-destacado .momento-enlace { color: var(--oro-claro); }
.momento-destacado a:hover .momento-icono { color: var(--tinta); background: var(--oro-claro); }
/* Franja de notas sobre la foto de las velas */
.momentos-notas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 32px;
    margin-top: 36px;
    padding: 26px 32px;
    border-radius: 20px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(6, 31, 61, 0.96) 0%, rgba(6, 31, 61, 0.86) 55%, rgba(6, 31, 61, 0.6) 100%),
        url('../img/tres-velas-encendidas.jpg') right center / cover no-repeat;
}
.momentos-notas .antetitulo { grid-column: 1 / -1; color: var(--oro-claro); white-space: nowrap; }
.momentos-notas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: nota; }
.momentos-notas li { position: relative; padding-left: 34px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); counter-increment: nota; }
.momentos-notas li::before {
    content: counter(nota);
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--oro-claro);
    border-radius: 50%;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 13px;
    color: var(--oro-claro);
}
.momentos-curiosos {
    padding: 11px 18px;
    border: 1px solid rgba(224, 196, 143, 0.6);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.momentos-curiosos span { display: inline-block; color: var(--oro-claro); transition: transform 0.25s ease; }
.momentos-curiosos:hover { background: var(--oro-claro); color: var(--tinta); }
.momentos-curiosos:hover span { color: var(--tinta); transform: translateX(4px); }

/* Entrada al llegar a la sección: la línea se dibuja y las tarjetas aparecen una tras otra */
@media (prefers-reduced-motion: no-preference) {
    .momentos-preparado .momentos-lista::before { transform: scaleX(0); }
    .momentos-preparado .momento { opacity: 0; transform: translateY(26px); }

    .momentos-visible .momentos-lista::before { transform: none; transition: transform 1.2s cubic-bezier(.6, 0, .2, 1); }
    .momentos-visible .momento { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.8s cubic-bezier(.2, .8, .3, 1); }
    .momentos-visible .momento-icono { animation: momento-sello 0.6s cubic-bezier(.3, 1.5, .5, 1) 0.4s backwards; }
    .momentos-visible .momento:nth-child(2) { transition-delay: 0.18s; }
    .momentos-visible .momento:nth-child(2) .momento-icono { animation-delay: 0.58s; }
    .momentos-visible .momento:nth-child(3) { transition-delay: 0.36s; }
    .momentos-visible .momento:nth-child(3) .momento-icono { animation-delay: 0.76s; }
    .momentos-visible .momento:nth-child(4) { transition-delay: 0.54s; }
    .momentos-visible .momento:nth-child(4) .momento-icono { animation-delay: 0.94s; }
}
@keyframes momento-sello { from { transform: translate(-50%, -50%) rotate(45deg) scale(0.3); } }
@media (prefers-reduced-motion: reduce) {
    .momento a, .momento a::before, .momento-icono, .momento-icono svg, .momento-enlace::before, .momento-enlace::after { transition: none; }
}

@media (max-width: 1060px) {
    .momentos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 52px; }
    .momentos-lista::before { display: none; }
    .momentos-notas { grid-template-columns: 1fr; }
    .momentos-notas ul { grid-template-columns: 1fr; gap: 12px; }
    .momentos-curiosos { justify-self: start; }
}
@media (max-width: 600px) {
    .momentos { margin-bottom: 40px; padding: 32px 16px 18px; border-radius: 22px; }
    .momentos-cabecera { margin-bottom: 20px; }
    .momentos-cabecera p { font-size: 16.5px; }
    .momentos-lista { grid-template-columns: 1fr; row-gap: 46px; }
    .momento a { padding: 46px 20px 22px; }
    .momentos-notas { padding: 22px 18px; border-radius: 16px; }
}
/* ============ TIPOS DE ESQUELA: «LA CÁMARA DEL REDACTOR» (js/animacion-tipos.js) ============ */
/* A la izquierda, la guía con el paso; a la derecha, un visor en el que el papel se mueve y se escala
   (la cámara se acerca a cada parte). Las partes aún no compuestas son un boceto: barras grises que
   ocupan el mismo sitio que el texto, para que el encuadre no salte cuando aparecen. */
.an-camara .an-formulario { display: none; }
.an-camara:not(.an-js) .an-escena { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.an-camara .an-escena {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 26px;
    align-items: stretch;
    background: linear-gradient(135deg, #fffdf9 0%, #f3f6fb 100%);
}
.an-camara.an-js .an-rotulo { display: none; }
.an-camara.an-js .an-barra { grid-template-columns: 1fr auto; }
.an-camara.an-js .an-controles { grid-column: 2; grid-row: 1; }
.an-camara.an-js .an-puntos { grid-column: 1; grid-row: 1; align-self: center; }

/* Guía */
.cm-guia {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 26px 26px 22px;
    border: 1px solid var(--borde);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 30px -20px rgba(6, 31, 61, 0.4);
}
.cm-cifra { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.cm-num { font-family: 'Source Serif 4', Georgia, serif; font-size: 68px; font-weight: 700; line-height: 1; color: var(--oro); letter-spacing: -1px; }
.cm-de { font-size: 14px; font-weight: 600; color: var(--texto-suave); }
.cm-titulo { margin: 0 0 10px; font-family: 'Source Serif 4', Georgia, serif; font-size: 24px; line-height: 1.2; color: var(--azul); }
.cm-texto { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--texto); }
.cm-siguiente { margin: 0; padding-top: 14px; border-top: 1px dashed var(--borde); font-size: 13.5px; font-weight: 600; color: var(--oro-texto); }
.cm-entra { animation: cm-entra 0.6s cubic-bezier(.2, .8, .3, 1); }
@keyframes cm-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Visor de la cámara */
.an-camara.an-js .an-papel-marco { display: flex; flex-direction: column; align-items: stretch; }
.cm-visor {
    position: relative;
    height: 470px;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 255, 255, 0.9), transparent 75%),
        #ebe7de;
    box-shadow: inset 0 0 0 1px rgba(6, 31, 61, 0.08), inset 0 18px 40px -30px rgba(6, 31, 61, 0.5);
}
/* Esquinas de encuadre, como el visor de una cámara */
.cm-visor::before {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 2;
    pointer-events: none;
    --c: rgba(165, 132, 79, 0.75);
    background:
        linear-gradient(var(--c), var(--c)) left top / 22px 2px,
        linear-gradient(var(--c), var(--c)) left top / 2px 22px,
        linear-gradient(var(--c), var(--c)) right top / 22px 2px,
        linear-gradient(var(--c), var(--c)) right top / 2px 22px,
        linear-gradient(var(--c), var(--c)) left bottom / 22px 2px,
        linear-gradient(var(--c), var(--c)) left bottom / 2px 22px,
        linear-gradient(var(--c), var(--c)) right bottom / 22px 2px,
        linear-gradient(var(--c), var(--c)) right bottom / 2px 22px;
    background-repeat: no-repeat;
}
.cm-visor .an-papel {
    position: absolute;
    top: 0;
    left: 0;
    width: min(440px, calc(100% - 40px));
    max-width: none;
    margin: 0;
    transform-origin: 0 0;
    transition: transform 1.1s cubic-bezier(.65, 0, .35, 1);
}
.an-camara .an-papel-pie { align-self: center; }

/* Boceto: el texto se oculta y en su lugar se ve una barra gris del mismo tamaño */
.an-camara .an-linea { border-radius: 4px; transition: color 0.8s ease, background-size 0.8s ease, box-shadow 0.8s ease, opacity 0.8s ease; background: linear-gradient(#dfe5ed, #dfe5ed) center / 86% 0.55em no-repeat; background-size: 0 0.55em; }
.an-camara .an-linea.cm-boceto { color: transparent; background-size: 86% 0.55em; }
.an-camara .an-linea.cm-boceto strong { color: transparent; }
.an-camara .an-l-cruz.cm-boceto { opacity: 0.15; background: none; }
.an-camara .an-linea.cm-actual { box-shadow: 0 0 0 6px rgba(224, 196, 143, 0.35); background-color: rgba(224, 196, 143, 0.28); animation: cm-tinta 1s ease; }
@keyframes cm-tinta { from { color: transparent; box-shadow: 0 0 0 14px rgba(224, 196, 143, 0); } }

/* Regla de pasos: barras finas que se rellenan */
.an-camara .an-punto.hecho::before { background: var(--azul); }

@media (prefers-reduced-motion: reduce) {
    .cm-visor .an-papel, .an-camara .an-linea { transition: none; }
    .cm-entra, .an-camara .an-linea.cm-actual { animation: none; }
}
@media (max-width: 900px) {
    .an-camara .an-escena { grid-template-columns: 1fr; }
    .cm-guia { padding: 18px 18px 16px; gap: 12px; }
    .cm-num { font-size: 48px; }
    .cm-titulo { font-size: 20px; }
    .cm-texto { font-size: 14.5px; }
    .cm-visor { height: 360px; }
    .an-camara.an-js .an-barra { grid-template-columns: 1fr; }
    .an-camara.an-js .an-controles { grid-column: 1; grid-row: 2; justify-content: center; }
    .an-camara.an-js .an-puntos { grid-row: 1; }
}
/* «¿Por qué publicar…?»: la esquela de ejemplo (HTML, datos inventados) en lugar de la imagen; se abre en grande */
.razones-imagen.fv-tarjeta > .fv-esquela { width: 100%; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14); transition: transform 0.5s ease; }
.razones-imagen.fv-tarjeta:hover > .fv-esquela { transform: scale(1.02); }
button.razones-ampliar { border: 0; font-family: inherit; cursor: pointer; }
button.razones-ampliar:hover { background: #fff; color: var(--azul-oscuro); }
button.razones-ampliar:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
/* Cuando la tarjeta de una galería es estrecha, el botón «Ver» va debajo del texto */
.fv-tarjeta { container-type: inline-size; }
@container (max-width: 260px) {
    .fv-tarjeta .pie { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============ PÁGINAS DE CADA TIPO DE ESQUELA (fallecimiento, agradecimiento, aniversario, empresa) ============ */
/* Accesos a los cuatro tipos, con el actual marcado */
.tm-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; padding: 0; list-style: none; }
.tm-tipos a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--borde); border-radius: 999px; background: #fff; color: var(--azul); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease; }
.tm-tipos a:hover { border-color: var(--azul); }
.tm-tipos a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
/* Qué es + ejemplo: texto a la izquierda y la esquela de muestra sobre una mesa a la derecha */
.tm-ejemplo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.tm-ejemplo h2 { margin-top: 10px; }
.tm-muestra {
    margin: 0;
    padding: 40px 28px 22px;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 70% 70% at 20% 0%, rgba(255, 246, 225, 0.95), transparent 70%),
        repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(120, 92, 50, 0.07) calc(20% - 1px) 20%),
        #efe8da;
    box-shadow: inset 0 0 0 1px rgba(165, 132, 79, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tm-muestra .fv-esquela {
    --alto-max: 400px;
    width: min(100%, calc(var(--alto-max) * var(--r)));
    transform: rotate(-1.2deg);
    box-shadow: 0 1px 2px rgba(60, 40, 10, 0.2), 0 18px 30px -14px rgba(60, 40, 10, 0.45);
    transition: transform 0.5s cubic-bezier(.2, .8, .3, 1);
}
.tm-muestra:hover .fv-esquela { transform: rotate(0) translateY(-4px); }
.tm-muestra figcaption { margin-top: 18px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--texto-suave); }
.tm-muestra figcaption strong { color: var(--tinta); }
@media (max-width: 900px) {
    .tm-ejemplo { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
    .tm-muestra { padding: 28px 16px 18px; }
    .tm-muestra .fv-esquela { --alto-max: 320px; }
}

/* Animación de la muestra (js/animacion-muestra.js): cada parte de la esquela se «imprime» de izquierda a
   derecha y la que entra queda resaltada con un recuadro dorado; debajo, la guía explica qué es cada parte */
.tm-anim .fv-esquela { transform: none; }
.tm-anim .fv-marco [data-paso] {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: opacity 0.35s ease, clip-path 0.9s cubic-bezier(.6, 0, .3, 1), background-color 0.4s ease, outline-color 0.4s ease;
    outline: 1.5px dashed transparent;
    outline-offset: 0.25em;
    border-radius: 2px;
}
.tm-anim .fv-marco [data-paso].tm-visible { opacity: 1; clip-path: inset(-0.5em -40% -0.5em -40%); }
.tm-anim .fv-marco [data-paso].tm-actual { outline-color: var(--oro); background-color: rgba(224, 196, 143, 0.22); }
.tm-guia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(165, 132, 79, 0.3);
}
.tm-guia[hidden] { display: none; }
.tm-guia-pasos { grid-column: 1 / -1; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tm-guia-pasos li { flex: 1; height: 3px; border-radius: 2px; background: rgba(165, 132, 79, 0.22); transition: background-color 0.4s ease; }
.tm-guia-pasos li.hecho { background: var(--oro); }
.tm-guia-texto { margin: 0; min-height: 2.9em; font-size: 14px; line-height: 1.45; color: var(--tinta); }
.tm-guia-texto strong { margin-right: 4px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oro-texto); }
.tm-guia-boton {
    padding: 7px 14px;
    border: 1px solid var(--oro);
    border-radius: 999px;
    background: #fff;
    color: var(--tinta);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.tm-guia-boton:hover { background: var(--oro-claro); }

/* Botón de pausa del recorrido de la portada (lo muestra js/web.js): detiene todo el movimiento continuo */
.publicacion-pausa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 14px;
    border: 1px solid rgba(224, 196, 143, 0.55);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--oro-claro);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.publicacion-pausa::before { content: "❚❚"; font-size: 10px; letter-spacing: -1px; }
.publicacion-pausa[aria-pressed="true"]::before { content: "▶"; letter-spacing: 0; }
.publicacion-pausa:hover { background: rgba(224, 196, 143, 0.16); }
.publicacion-pausa[hidden] { display: none; }
.publicacion-pausada,
.publicacion-pausada *,
.publicacion-pausada *::before,
.publicacion-pausada *::after,
.publicacion-pausada::before,
.publicacion-pausada::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .publicacion-pausa { display: none; } }