/* Estilos comunes de abcesquelas.com (basados en elpaisesquelas.com) */

/* 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: #02457f;
    --azul-claro: #e8f2fc;
    --fondo: #f6f9fc;
    --texto: #1f2d3d;
    --texto-suave: #52627a;
    --borde: #dde7f2;
    --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: #0b2340;
}

* { 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,
.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);
}
.logo span {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    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: 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; }
    .logo span { font-size: 10px; letter-spacing: 1px; }
}
/* 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; }
}

/* ============ CABECERA (HERO) CON IMAGEN DE FONDO ============ */
.hero {
    position: relative;
    color: #fff;
    background:
        linear-gradient(100deg, rgba(1, 45, 90, 0.92) 0%, rgba(2, 81, 151, 0.78) 55%, rgba(2, 81, 151, 0.35) 100%),
        url('../imagenes-de-esquelas/Reloj y arbol.jpg') center / cover no-repeat;
    padding: 80px 0 90px;
}
/* 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(1, 45, 90, 0.92) 0%, rgba(2, 81, 151, 0.86) 100%),
            url('../imagenes-de-esquelas/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: 28px 0 34px; }
.hero.hero-pagina h1 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 10px; max-width: 820px; }
.hero.hero-pagina p { font-size: 16.5px; max-width: 720px; margin-bottom: 18px; }
/* 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(32px, 5vw, 52px);
    margin: 0 0 16px;
    max-width: 680px;
}
.hero p {
    font-size: 18px;
    max-width: 600px;
    margin: 0 0 30px;
    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: 22px; 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, #01325f 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: línea de tiempo clara con tarjetas explicadas */
.publicacion {
    padding: 28px 36px 24px;
    border: 1px solid #c9daed;
    border-radius: 18px;
    background: #e1ecf8 radial-gradient(rgba(2, 81, 151, 0.1) 1px, transparent 1px) 0 0 / 18px 18px;
}
.publicacion-cabecera { text-align: center; margin-bottom: 22px; }
.publicacion-cabecera .antetitulo::after { content: ""; width: 36px; height: 1px; background: var(--oro); }
.publicacion-titulo { font-size: clamp(22px, 2.4vw, 27px); margin: 6px 0 0; }
.publicacion-pasos {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
/* Línea que une los números, de azul claro a azul */
.publicacion-pasos::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, #b9d3ee, var(--azul));
}
.publicacion-paso { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.publicacion-marca {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--azul);
    background: #fff;
    box-shadow: 0 0 0 6px #e1ecf8;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--azul);
}
.publicacion-paso:last-child .publicacion-marca { background: var(--azul); border-color: var(--oro); color: #fff; }
.publicacion-tarjeta {
    flex: 1;
    width: 100%;
    margin-top: 12px;
    padding: 14px 16px 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.publicacion-tarjeta:hover { transform: translateY(-3px); border-color: #b9d3ee; box-shadow: 0 12px 26px rgba(2, 81, 151, 0.1); }
.publicacion-icono {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: var(--azul-claro);
    color: var(--azul);
}
.publicacion-tarjeta h4 { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--tinta); margin: 0 0 4px; }
.publicacion-tarjeta p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.publicacion-cta { text-align: center; margin: 18px 0 0; font-size: 15px; color: #3f4f66; }
.publicacion-cta a { font-weight: 600; }

@media (max-width: 900px) {
    .publicacion { padding: 26px 22px 22px; }
    .publicacion-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
    .publicacion-pasos::before { display: none; }
}
@media (max-width: 600px) {
    /* En móvil, línea vertical: número a la izquierda y tarjeta a la derecha */
    .publicacion { padding: 24px 14px 20px; }
    .publicacion-pasos { grid-template-columns: 1fr; gap: 16px; }
    .publicacion-paso:not(:last-child)::before { content: ""; position: absolute; top: 48px; bottom: -16px; left: 23px; width: 2px; background: #b9d3ee; }
    .publicacion-paso { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; }
    .publicacion-marca { width: 48px; height: 48px; font-size: 21px; }
    .publicacion-tarjeta { margin-top: 0; padding: 16px; }
    .publicacion-icono { display: none; }
}

@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: #b9d3ee; box-shadow: 0 10px 24px rgba(2, 81, 151, 0.08); 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, 69, 127, 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, #01325f 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(11, 35, 64, 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);
    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: asistente paso a paso */
/* La barra de pasos se queda fija bajo el menú mientras se baja por la plantilla guiada */
.asistente-progreso {
    position: sticky;
    top: var(--alto-menu);
    z-index: 4;
    margin: 22px -12px 18px;
    padding: 12px 12px 10px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--borde);
    backdrop-filter: blur(6px);
}
.asistente-pasos { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.asistente-pasos button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: #fff;
    color: var(--texto-suave);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.asistente-pasos button span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fondo);
    color: var(--azul);
    font-size: 12px;
}
.asistente-pasos button:hover { border-color: var(--azul); color: var(--azul); }
.asistente-pasos button.hecho { color: var(--azul); }
.asistente-pasos button.hecho span { background: var(--azul-claro); }
.asistente-pasos button[aria-current="step"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.asistente-pasos button[aria-current="step"] span { background: #fff; color: var(--azul); }
.asistente-barra { height: 6px; border-radius: 999px; background: var(--azul-claro); overflow: hidden; }
.asistente-barra span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--azul), var(--oro)); transition: width 0.35s ease; }
.asistente-estado { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--azul); }
.asistente.generador { margin-top: 0; gap: 20px; }
.asistente .generador-paso { background: #fff; box-shadow: var(--sombra); }
.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; }
@media (max-width: 600px) {
    .asistente-pasos button { font-size: 0; gap: 0; padding: 6px; }
    .asistente-pasos button span { font-size: 12px; }
    /* En móvil la barra fija ocupa lo mínimo: el número marcado ya indica el paso */
    .asistente-progreso { padding: 8px 12px 8px; }
    .asistente-pasos { margin-bottom: 8px; }
    .asistente-estado { display: none; }
}
@media (prefers-reduced-motion: reduce) { .asistente-barra span { transition: none; } }

.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-ir-vista { display: none; }
@media (max-width: 960px) {
    .generador-ir-vista {
        position: sticky;
        bottom: 16px;
        z-index: 5;
        display: block;
        width: max-content;
        margin: 18px auto 0;
        padding: 12px 22px;
        border-radius: 999px;
        background: var(--azul);
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 10px 24px -8px rgba(2, 81, 151, 0.6);
    }
}
.generador-aviso { min-height: 20px; font-size: 13px; font-weight: 600; color: var(--azul); }
@media (min-width: 961px) {
    /* En escritorio la vista previa acompaña al usuario mientras baja por el formulario */
    .generador-vista-interior { position: sticky; top: calc(var(--alto-menu) + 20px); }
}
@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 #c9dbee; }
.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 #c9dbee; }
}
@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, 69, 127, 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: #fafcff; }

/* 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); }
.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: #d9e9f9; }
.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(11, 35, 64, 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, #e6ebf1 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: #c9d2dd; }
.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; }
}

/* ============ EJEMPLOS: PASE DE ESQUELAS (animación) ============ */
.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-escena { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.ej-pagina { padding: 14px 16px 0; background: #fff; border: 1px solid var(--borde); box-shadow: 0 24px 40px -18px rgba(11, 35, 64, 0.45); overflow: hidden; }
.ej-pagina-cabecera { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid #111; font-family: 'Source Serif 4', Georgia, serif; font-size: 11px; letter-spacing: 0.08em; color: #111; }
.ej-pagina-cabecera span { font-size: 14px; color: var(--azul); }
.ej-diapos { position: relative; height: 340px; }
.ej-diapo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px 0; border: 0; background: transparent; cursor: zoom-in; }
.ej-diapo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.ej-diapo:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }
.ej-js .ej-diapo { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(0.97); transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s; }
.ej-js .ej-diapo.activa { opacity: 1; visibility: visible; transform: none; transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s; }
.ej-demo:not(.ej-js) .ej-diapo:not(:first-child),
.ej-demo:not(.ej-js) .ej-ficha { display: none; }
.ej-demo:not(.ej-js) .ej-escena { grid-template-columns: minmax(0, 1fr); }
.ej-progreso { height: 3px; margin: 0 -16px; background: var(--borde); }
.ej-progreso span { display: block; width: 0; height: 100%; background: var(--oro); }
.ej-progreso.corriendo span { animation: ej-progreso 4.5s linear forwards; }
@keyframes ej-progreso { to { width: 100%; } }
.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 14px; font-family: 'Source Serif 4', Georgia, serif; font-size: 26px; line-height: 1.2; color: var(--azul); }
.ej-ficha-datos { margin: 0 0 14px; }
.ej-ficha-datos div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.ej-ficha-datos dt { font-size: 14px; color: var(--texto-suave); }
.ej-ficha-datos dd { margin: 0; font-size: 14.5px; font-weight: 600; text-align: right; color: var(--texto); }
.ej-ficha-descripcion { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--texto-suave); }
.ej-ficha-enlace { display: inline-block; margin-bottom: 20px; }
@media (max-width: 760px) {
    .ej-escena { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ej-diapos { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    .ej-js .ej-diapo, .ej-js .ej-diapo.activa { transition: none; transform: none; }
}

/* ============ PORTADA: MOVIMIENTO SOBRIO ============ */
/* Cabecera de la portada: la foto se acerca muy despacio y el texto aparece con un 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('../imagenes-de-esquelas/Reloj y arbol.jpg') center / cover no-repeat;
    transform-origin: 70% 50%;
    animation: hero-respira 40s ease-in-out infinite alternate;
}
.hero:not(.hero-pagina)::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(1, 45, 90, 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(1, 45, 90, 0.92) 0%, rgba(2, 81, 151, 0.86) 100%); }
}
.hero:not(.hero-pagina) .contenedor > * { animation: hero-entrada 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero:not(.hero-pagina) .contenedor > :nth-child(2) { animation-delay: 0.25s; }
.hero:not(.hero-pagina) .contenedor > :nth-child(3) { animation-delay: 0.5s; }
.hero:not(.hero-pagina) .contenedor > :nth-child(4) { animation-delay: 0.75s; }
@keyframes hero-respira { from { transform: scale(1); } to { transform: scale(1.08) translateX(-1%); } }
@keyframes hero-entrada { from { opacity: 0; transform: translateY(14px); } }

/* 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(5, 20, 40, 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 #c9dbee;
    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, #01325f 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: #5f6e84; opacity: 1; }
.formulario input:hover, .formulario textarea:hover { border-color: #b9cde3; }
.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; }
}

/* 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, #01325f 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; }

/* ==================== 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: #d5e1ee; }
.dc-uso-barra span.lleno { background: var(--azul); }
.dc-uso-1 .dc-uso-barra span.lleno { background: #8a99ad; }
.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), #3a7cc4); }
.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, #01325f 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, #01325f 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: #b9d3ee; 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 #b9d3ee; }
.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%, #e9f1fa 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(11, 35, 64, 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: #b9d3ee; }
.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; }
}