/* Estilos comunes de elpaisesquelas.com */

: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: #81622f;  /* dorado para texto sobre fondos claros (contraste AA) */
    --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.8' 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 / 26px 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;
}
/* 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 cuadrado con esquinas redondeadas, marco dorado girado detrás y brillo al pasar el ratón */
.confianza-retrato {
    position: relative;
    width: 176px;
    height: 176px;
    margin: 10px 10px 10px 4px;
}
.confianza-retrato::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px solid var(--oro);
    border-radius: 30px;
    transform: rotate(-6deg);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.confianza-retrato::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: var(--tinta);
    transform: translate(12px, 12px);
    z-index: 0;
    opacity: 0.9;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.retrato-foto {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 36px -12px rgba(11, 35, 64, 0.35);
}
.retrato-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 20%;
    filter: saturate(0.85) contrast(1.03);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}
/* Velo azul suave en la parte baja y destello diagonal */
.retrato-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(11, 35, 64, 0.35), rgba(11, 35, 64, 0) 55%);
    pointer-events: none;
}
.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 .confianza-retrato::before { transform: rotate(0deg); }
.confianza:hover .confianza-retrato::after { transform: translate(6px, 6px); }
.confianza:hover .retrato-foto img { transform: scale(1.07); filter: saturate(1) contrast(1.03); }
.confianza:hover .retrato-foto::after { left: 140%; }
@media (prefers-reduced-motion: reduce) {
    .confianza-retrato::before, .confianza-retrato::after, .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;
}

@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; }

/* 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;
}
.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; max-width: 440px; margin: 0 auto; order: 0; }
}
@media (max-width: 600px) { .franja-razones { padding: 44px 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); }

/* 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; } }

.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; }
}

/* ============ 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); }

/* ============ 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 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;
    max-width: 900px;
    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); }

/* ============ 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-wrap: wrap; justify-content: space-between; gap: 18px; }
footer a { display: inline-block; padding: 6px 0; color: var(--azul); text-decoration: none; margin-right: 18px; }
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 th { padding: 8px 16px; font-size: 11px; }
.precios-variante td { padding: 8px 16px; }
.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; }
}

/* ==================== 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 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: #8b98aa; 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); }
@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; }
}

/* ============ MAPA WEB ============ */
.mapa-web-columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.mapa-web-grupo h2 { font-size: 22px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.mapa-web-grupo h2:not(:first-child) { margin-top: 32px; }
.mapa-web-grupo ul { list-style: none; margin: 0; padding: 0; }
.mapa-web-grupo li { margin: 0; }
.mapa-web-grupo a { display: block; padding: 7px 0; line-height: 1.4; }
@media (max-width: 900px) { .mapa-web-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mapa-web-columnas { grid-template-columns: 1fr; } }

/* ============ 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; }