/* =========================================================================
   Histórica Gestión Cultural
   Hoja de estilos única. Orden: variables, reset, base, layout,
   componentes, secciones de página, utilidades, responsive.
   ========================================================================= */

/* ---------- 1. Variables ------------------------------------------------ */
:root {
    /* --- Paleta de marca: los seis colores permitidos --- */
    --teal:          #087272;   /* color principal */
    --tinta:         #0d0d0d;   /* textos y fondos muy oscuros */
    --blanco:        #fcfcff;
    --agua:          #8abdaf;   /* verde claro */
    --arena:         #e4dcbf;   /* crema */
    --dorado:        #99720e;   /* ocre */

    /* --- Tonos de trabajo: mezclas de dos colores de la paleta --- */
    --teal-oscuro:   #095e5e;   /* teal + 20 % tinta */
    --teal-hondo:    #0a4f4f;   /* teal + 35 % tinta */
    --teal-noche:    #0b3333;   /* teal + 62 % tinta */
    --dorado-oscuro: #80600e;   /* ocre + 18 % tinta */
    --agua-hondo:    #5e7f76;   /* agua + 35 % tinta */
    --agua-claro:    #dceae9;   /* agua + 72 % blanco */
    --arena-claro:   #f6f4ef;   /* crema + 25 % blanco */
    --tinta-suave:   #555556;   /* tinta + 30 % blanco */
    --linea:         #d3cbb1;   /* crema +  8 % tinta */
    --gris-01:       #f4f1e9;   /* blanco + 35 % crema */
    --gris-02:       #efeadc;   /* blanco + 55 % crema */
    --gris-03:       #eae4cf;   /* blanco + 75 % crema */

    /* Único color ajeno a la paleta: los errores de formulario tienen que
       leerse como errores. */
    --error:         #c0392b;

    /* Tipografía */
    --tipo-titulo: 'Montserrat', system-ui, sans-serif;
    --tipo-texto:  'Crimson Text', Georgia, 'Times New Roman', serif;
    --tipo-ui:     'Lato', system-ui, sans-serif;
    --tipo-script: 'Caveat', cursive;

    /* Escala fluida */
    --t-xs:  0.8125rem;
    --t-sm:  0.9375rem;
    --t-base: clamp(1.0625rem, 0.99rem + 0.36vw, 1.25rem);
    --t-md:  clamp(1.1875rem, 1.10rem + 0.42vw, 1.4375rem);
    --t-lg:  clamp(1.375rem, 1.19rem + 0.90vw, 1.875rem);
    --t-xl:  clamp(1.75rem, 1.40rem + 1.70vw, 2.75rem);
    --t-2xl: clamp(2.125rem, 1.55rem + 2.80vw, 3.75rem);

    /* Espaciado */
    --e-1: 0.5rem;
    --e-2: 1rem;
    --e-3: 1.5rem;
    --e-4: 2rem;
    --e-5: 3rem;
    --e-6: 4rem;
    --e-7: clamp(3.5rem, 2rem + 6vw, 7rem);

    /* Medidas */
    --ancho:       1240px;
    --ancho-texto: 74ch;
    --radio:       4px;
    --transicion:  180ms ease;
}

/* ---------- 2. Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--blanco);
    color: var(--tinta);
    font-family: var(--tipo-texto);
    font-size: var(--t-base);
    line-height: 1.65;
    overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    font-family: var(--tipo-titulo);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 var(--e-2);
    text-wrap: balance;
}

h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
h4 { font-size: var(--t-base); letter-spacing: .04em; text-transform: uppercase; }

p, ul, ol { margin: 0 0 var(--e-2); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--dorado-oscuro); }

:focus-visible {
    outline: 3px solid var(--dorado);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--dorado); color: var(--tinta); }

/* ---------- 3. Layout --------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.contenedor--estrecho { max-width: 920px; }

.bloque { padding-block: var(--e-7); }
.bloque--fino { padding-block: var(--e-5); }

.bloque--gris   { background: var(--gris-02); }
.bloque--claro  { background: var(--gris-01); }
.bloque--teal   { background: var(--teal); color: var(--blanco); }

.bloque--teal h1, .bloque--teal h2, .bloque--teal h3 { color: var(--blanco); }
.bloque--teal a { color: var(--blanco); }

/* Bloque con foto de fondo y velo de color */
.bloque--foto {
    position: relative;
    background-size: cover;
    background-position: center;
    color: var(--blanco);
}
.bloque--foto::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11, 51, 51, .87);
}

/* Cuando la cabecera es la foto del propio sitio (lugares y visitas), el velo
   se afloja para que se vea de qué se está hablando. El degradado deja el pie
   más oscuro, que es donde cae el título. */
.bloque--foto.rotulo--sitio::before {
    background: linear-gradient(to bottom,
                rgba(11, 51, 51, .55),
                rgba(11, 51, 51, .72) 55%,
                rgba(11, 51, 51, .82));
}
.rotulo--sitio h1 { text-shadow: 0 2px 18px rgba(11, 51, 51, .55); }
.bloque--foto > * { position: relative; }

/* Enlace de salto para lectores de pantalla y teclado */
.saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--teal);
    color: var(--blanco);
    padding: var(--e-2) var(--e-3);
    font-family: var(--tipo-ui);
}
.saltar:focus { left: 0; }

/* ---------- 4. Cabecera ------------------------------------------------- */
/* Una sola cabecera en todo el sitio: logo a la izquierda y menú a la
   derecha. En la portada (.cabecera--sobre) se apoya sobre las fotos en
   lugar de ocupar una banda blanca propia. */
.cabecera {
    position: relative;
    z-index: 20;
    background: var(--blanco);
    border-top: 5px solid var(--teal);
}

.cabecera__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    /* El menú tiene nueve entradas: necesita algo más de ancho que el resto
       del sitio para no partirse en dos líneas. */
    max-width: 1420px;
    padding-block: var(--e-2);
}

.cabecera__logo img {
    width: 108px;
    height: auto;
    transition: opacity var(--transicion);
}
.cabecera__logo:hover img { opacity: .75; }

/* Portada: cabecera transparente encima del carrusel de fotos. */
.cabecera--sobre {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
}
/* El velo que le da contraste al menú lo pinta la propia portada
   (.portada::after), que es quien conoce el alto de las fotos. */
.cabecera--sobre .cabecera__logo img { width: 128px; }

.cabecera--sobre .menu > ul > li > a,
.cabecera--sobre .menu__desplegar {
    color: var(--blanco);
    text-shadow: 0 1px 10px rgba(13, 13, 13, .55);
}
.cabecera--sobre .menu > ul > li > a::after { background: var(--arena); }
.cabecera--sobre .menu > ul > li > a:hover,
.cabecera--sobre .menu > ul > li > a[aria-current="page"],
.cabecera--sobre .menu__grupo.en-rama > a,
.cabecera--sobre .menu__grupo.en-rama > .menu__desplegar { color: var(--arena); }

.cabecera--sobre .menu-boton { color: var(--blanco); border-color: rgba(252, 252, 255, .55); }
.cabecera--sobre .menu-boton__barras,
.cabecera--sobre .menu-boton__barras::before,
.cabecera--sobre .menu-boton__barras::after { background: var(--blanco); }

/* Menú */
.menu > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(.4rem, 1.25vw, 1.15rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu a {
    display: block;
    padding: .45rem .25rem;
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    color: var(--tinta);
    text-decoration: none;
    position: relative;
    transition: color var(--transicion);
}

.menu a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--dorado);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transicion);
}

.menu a:hover { color: var(--teal); }
.menu a:hover::after,
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--teal); font-weight: 700; }

/* Submenú desplegable */
.menu__grupo { position: relative; display: flex; align-items: center; }

.menu__desplegar {
    display: grid;
    place-items: center;
    padding: .45rem .35rem;
    border: 0;
    background: none;
    color: var(--tinta);
    cursor: pointer;
}
.menu__flecha {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--transicion);
}

.menu__sub { list-style: none; margin: 0; padding: 0; }
.menu__sub a::after { display: none; }

.menu__grupo.en-rama > a { color: var(--teal); font-weight: 700; }
.menu__grupo.en-rama > .menu__desplegar { color: var(--teal); }

@media (min-width: 67.0625em) {
    .menu__sub {
        position: absolute;
        top: 100%;
        left: -1rem;
        z-index: 30;
        min-width: 15.5rem;
        padding-block: .4rem;
        background: var(--blanco);
        border-top: 2px solid var(--dorado);
        box-shadow: 0 18px 34px -20px rgba(13, 13, 13, .6);
        opacity: 0;
        visibility: hidden;
        translate: 0 6px;
        transition: opacity var(--transicion), translate var(--transicion), visibility var(--transicion);
    }
    .menu__grupo:hover .menu__sub,
    .menu__grupo:focus-within .menu__sub,
    .menu__grupo.abierto .menu__sub {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
    }
    .menu__grupo:hover .menu__flecha,
    .menu__grupo:focus-within .menu__flecha { transform: rotate(180deg); }

    .menu__sub a { padding: .55rem 1.1rem; white-space: nowrap; }
    .menu__sub a:hover { background: var(--gris-01); color: var(--teal); }
    .menu__sub a[aria-current="page"] { background: var(--gris-01); color: var(--teal); font-weight: 700; }
}

/* Botón hamburguesa */
.menu-boton {
    display: none;
    align-items: center;
    gap: .6rem;
    background: none;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: .55rem .85rem;
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    color: var(--tinta);
    cursor: pointer;
}
.menu-boton__barras,
.menu-boton__barras::before,
.menu-boton__barras::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--tinta);
    transition: transform var(--transicion), opacity var(--transicion);
}
.menu-boton__barras { position: relative; }
.menu-boton__barras::before,
.menu-boton__barras::after { content: ''; position: absolute; left: 0; }
.menu-boton__barras::before { top: -6px; }
.menu-boton__barras::after  { top: 6px; }

.menu-boton[aria-expanded="true"] .menu-boton__barras { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__barras::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__barras::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5. Portada: slider ------------------------------------------ */
.portada {
    position: relative;
    display: grid;
    place-items: center;
    /* Ocupa casi toda la pantalla: la cabecera va encima, así que el hueco
       de arriba es el que necesita para no taparle el claim. */
    min-height: clamp(480px, 84vh, 860px);
    padding-top: clamp(4.5rem, 11vh, 8rem);
    overflow: hidden;
    background: var(--teal-oscuro);
}

.portada__foto {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.portada__foto.activa { opacity: 1; }

/* Velo superior: la cabecera va encima de las fotos y el menú tiene que
   leerse sea cual sea la que toque. Va después de las fotos, así que las
   cubre. */
.portada::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: min(45%, 320px);
    background: linear-gradient(to bottom,
                rgba(13, 13, 13, .70),
                rgba(13, 13, 13, .42) 45%,
                rgba(13, 13, 13, 0));
    pointer-events: none;
}

.portada__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: acercar 12s ease-out both;
}
.portada__foto.activa img { animation-play-state: running; }

@keyframes acercar {
    from { transform: scale(1.06) translateX(-1.5%); }
    to   { transform: scale(1.13) translateX(1.5%); }
}

.portada__claim {
    position: relative;
    z-index: 3;
    margin: 0;
    padding-inline: var(--e-3);
    font-family: var(--tipo-script);
    font-weight: 400;
    font-size: clamp(2.75rem, 1.2rem + 7vw, 6.875rem);
    line-height: 1.1;
    color: var(--blanco);
    text-align: center;
    text-shadow: 0 2px 24px rgba(13, 13, 13, .45);
}

.portada__control {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 13, 13, .45);
    color: var(--blanco);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transicion);
}
.portada__control:hover { background: rgba(13, 13, 13, .85); }
.portada__control--ant { left: 20px; }
.portada__control--sig { right: 20px; }

/* ---------- 6. Cabecera de sección interior ----------------------------- */
.rotulo {
    display: grid;
    place-items: center;
    min-height: clamp(190px, 26vh, 300px);
    text-align: center;
}
/* Los rótulos van en minúscula, pero se escriben así en su sitio, no se
   fuerzan desde aquí: un text-transform también se llevaba por delante los
   nombres propios («en soria», «el burgo de osma», «san baudelio») y las
   siglas («propuesta mice»). Al escribir cada título tal cual debe verse,
   los que salen de los datos —localidades, rutas— conservan sus mayúsculas. */
.rotulo h1 {
    margin: 0;
    font-size: var(--t-2xl);
    color: var(--blanco);
    letter-spacing: .01em;
}

/* Lema de las tres secciones principales (tirar del hilo, hilvanar, tejer):
   banda a todo el ancho con la frase manuscrita y un adorno de hilo a cada
   lado, que abre la sección crema que sigue a la presentación. Es una imagen
   (ver inc/lema.php), pensada para ir a 2000px de ancho, así que en
   escritorio escala con la ventana. En móvil, escalada entera la frase
   quedaría ilegible: se le fija la altura y se recorta por los lados, que
   son solo hilo, dejando la frase centrada. */
.bloque--lema { padding-top: var(--e-4); }
.lema {
    margin: 0 0 var(--e-5);
}
.lema img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 47.99em) {
    .lema img {
        height: 3.5rem;
        object-fit: cover;
        object-position: center;
    }
}

/* ---------- 7. Botones -------------------------------------------------- */
.boton {
    display: inline-block;
    padding: .8em 2.2em;
    border: 2px solid var(--teal);
    border-radius: 999px;
    background: transparent;
    color: var(--dorado-oscuro);
    font-family: var(--tipo-texto);
    font-size: var(--t-base);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--blanco);
}

.boton--oscuro { border-color: var(--tinta); color: var(--tinta); }
.boton--oscuro:hover { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }

.boton--claro { border-color: var(--blanco); color: var(--blanco); }
.boton--claro:hover { background: var(--blanco); color: var(--teal); }

.boton--solido {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--blanco);
    font-family: var(--tipo-ui);
    font-weight: 700;
}
.boton--solido:hover { background: var(--teal-hondo); border-color: var(--teal-hondo); color: var(--blanco); }

/* ---------- 8. Presentación (inicio) ------------------------------------ */
.presenta {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
@media (min-width: 62em) {
    .presenta { grid-template-columns: 1.35fr 1fr; }
}

.presenta h1 { color: var(--teal); margin-bottom: var(--e-3); }
.presenta__acciones { margin-top: var(--e-4); }

/* Foto con sombra dura dorada, como en el diseño original.
   El hueco de la sombra se reserva con padding para que nunca desborde. */
.foto-marco {
    position: relative;
    isolation: isolate;
    padding: 0 var(--sombra, 22px) var(--sombra, 22px) 0;
}
.foto-marco img { width: 100%; }
.foto-marco::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: var(--sombra, 22px) 0 0 var(--sombra, 22px);
    background: var(--dorado);
}

/* Retrato vertical: se recorta por altura para que no estire la columna. */
.foto-marco--vertical img {
    max-height: 32rem;
    object-fit: cover;
    object-position: center 22%;
}

/* ---------- 9. Investigar y transmitir ---------------------------------- */
.destacado-teal { background: var(--teal); color: var(--blanco); }

.destacado-teal__rejilla {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding-block: var(--e-5);
}
@media (min-width: 62em) {
    .destacado-teal__rejilla { grid-template-columns: 1fr 1.6fr; }
    /* La foto sobresale del bloque, como en el original */
    .destacado-teal__foto { margin-block: calc(var(--e-5) * -1 - 1.5rem); }
}
.destacado-teal h2 { color: var(--blanco); margin-bottom: var(--e-2); }
.destacado-teal strong { color: var(--blanco); }

/* ---------- 9 bis. Servicio destacado de la portada --------------------- */
.estrella { text-align: center; }
.estrella__interior { max-width: 54rem; margin-inline: auto; }
/* Rótulo pequeño en versales que va encima de un título. Dos versiones: la
   de fondo oscuro (crema) y la de fondo claro (ocre). */
.estrella__epigrafe,
.epigrafe {
    margin: 0 0 var(--e-2);
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.estrella__epigrafe { color: var(--arena); }
.epigrafe           { color: var(--dorado); }
.estrella h2 { margin-bottom: var(--e-3); font-size: var(--t-xl); color: var(--blanco); }
.estrella p { font-size: var(--t-md); }
.estrella .boton { margin-top: var(--e-3); }

/* ---------- 10. Rejilla de servicios de la portada ---------------------- */
.servicios {
    display: grid;
    gap: clamp(1rem, 2.5vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.servicios__rotulo {
    display: grid;
    place-items: center;
    min-height: 12rem;
    padding: var(--e-3);
    background: var(--blanco);
    font-family: var(--tipo-titulo);
    font-size: var(--t-lg);
    font-weight: 700;
    text-align: center;
}
.servicios__rotulo--gris { background: var(--gris-02); }

.tarjeta {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 12rem;
    color: var(--blanco);
    text-decoration: none;
    background: var(--teal-oscuro);
}
.tarjeta img {
    width: 100%;
    height: 100%;
    min-height: 12rem;
    object-fit: cover;
    transition: transform 500ms ease, opacity var(--transicion);
}
.tarjeta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 51, 51, .82) 0%, rgba(11, 51, 51, .35) 55%, rgba(11, 51, 51, .15) 100%);
    transition: background var(--transicion);
}
.tarjeta__titulo {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    margin: 0;
    padding: var(--e-3);
    font-family: var(--tipo-titulo);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--blanco);
    text-shadow: 0 1px 8px rgba(13, 13, 13, .5);
}
.tarjeta:hover img { transform: scale(1.06); }
.tarjeta:hover::after { background: linear-gradient(to top, rgba(11, 51, 51, .92) 0%, rgba(11, 51, 51, .55) 100%); }

/* ---------- 11. Llamada a la acción ------------------------------------- */
.llamada {
    background-size: cover;
    background-position: center;
    position: relative;
}
.llamada::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(252, 252, 255, .3);
}
.llamada__rejilla {
    position: relative;
    display: grid;
    gap: var(--e-4);
    align-items: center;
    text-align: center;
}
@media (min-width: 52em) {
    .llamada__rejilla { grid-template-columns: 1.8fr auto; text-align: left; }
}
.llamada p { font-size: var(--t-md); }

/* ---------- 12. Sellos y logotipos -------------------------------------- */
.sellos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--e-4);
}
.sellos img { max-height: 62px; width: auto; }

/* ---------- 13. Contenido de texto -------------------------------------- */
.texto { max-width: var(--ancho-texto); }
.texto--centrado { margin-inline: auto; }
.texto p + p { margin-top: var(--e-2); }
.texto ul { padding-left: 1.25em; }
.texto li { margin-bottom: .4em; }
.texto h2 { margin-top: var(--e-4); }
.texto h2:first-child { margin-top: 0; }

/* Prosa larga a dos columnas: a una sola, tiradas como la de los tres caminos
   de la portada dejan una mancha de texto demasiado alta. Hay que soltar el
   ancho de línea de .texto, porque aquí lo marca cada columna. Los párrafos no
   se parten y el aire va debajo, no encima, para que las dos columnas empiecen
   a la misma altura. Por debajo de 52em vuelve a una sola.

   OJO: va SIEMPRE dentro de un .contenedor, nunca en la misma etiqueta. Si se
   juntan las dos clases, este max-width le gana al del contenedor y el bloque
   se estira a todo el ancho de la ventana. */
/* Las tres frases que enhebran los tres caminos de la portada —tirar del hilo,
   hilvanar, tejer— van en la letra manuscrita de la marca, para que se lean
   como un hilo cosido por encima del texto corrido.
   OJO: Caveat solo se carga en redonda, así que nada de negritas aquí: el
   navegador se las inventaría y quedarían emborronadas. Va en el ocre oscuro
   porque el ocre normal se queda corto de contraste sobre la banda crema. */
.hilo {
    font-family: var(--tipo-script);
    font-weight: 400;
    font-size: 1.5em;
    line-height: 1;
    color: var(--dorado-oscuro);
    /* Caveat es más ancha y va inclinada: sin este respiro se pega a la
       palabra siguiente y parece que falta el espacio. */
    margin-inline: .08em;
}

.texto.dos-columnas { max-width: none; }
.texto.dos-columnas > p { margin: 0 0 var(--e-3); break-inside: avoid; }
.texto.dos-columnas > p:last-child { margin-bottom: 0; }

@media (min-width: 52em) {
    .dos-columnas {
        columns: 2;
        column-gap: clamp(2rem, 5vw, 4rem);
    }
}

/* Páginas legales: texto largo con muchos encabezados */
.legal h2 { margin-top: var(--e-5); font-size: var(--t-md); color: var(--teal); text-transform: none; }
.legal h3 { margin-top: var(--e-4); font-size: var(--t-base); color: var(--teal); }
.legal h4 { margin-top: var(--e-3); font-size: var(--t-base); letter-spacing: normal; text-transform: none; }
.legal h1 + h2 { margin-top: var(--e-3); }
.legal p, .legal li { font-size: var(--t-sm); line-height: 1.7; }
.legal ul { padding-left: 1.25em; }

/* Bloque de preguntas */
.preguntas {
    margin: var(--e-4) 0;
    padding: var(--e-3) 0 var(--e-3) var(--e-3);
    border-left: 3px solid var(--dorado);
    list-style: none;
}
.preguntas li {
    margin: 0 0 var(--e-2);
    font-size: var(--t-md);
    font-style: italic;
    color: var(--tinta-suave);
}
.preguntas li:last-child { margin-bottom: 0; }

/* Claim destacado de rutas */
.claim {
    margin: 0 0 var(--e-4);
    text-align: center;
}
.claim__titulo {
    margin: 0 0 var(--e-1);
    font-family: var(--tipo-titulo);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.claim__cita {
    margin: 0;
    font-size: var(--t-md);
    font-style: italic;
    color: var(--teal);
}

/* Enlace a la sección hermana (conferencias <-> organización de eventos) */
.hermana {
    margin-top: var(--e-4);
    padding: var(--e-2) var(--e-3);
    border-left: 3px solid var(--teal);
    border-radius: var(--radio);
    background: var(--gris-01);
    font-size: var(--t-sm);
}

/* ---------- 13 bis. Rejilla de "Otros servicios" ------------------------ */
.servicios-lista {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.75rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.servicio {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.servicio:hover {
    border-color: var(--teal);
    box-shadow: 0 10px 28px -18px rgba(13, 13, 13, .5);
    transform: translateY(-2px);
}
.servicio__foto { display: block; height: 200px; overflow: hidden; background: var(--gris-02); }
.servicio__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.servicio:hover .servicio__foto img { transform: scale(1.05); }
.servicio__cuerpo { display: flex; flex-direction: column; flex: 1; padding: var(--e-3); }
.servicio__titulo { margin: 0 0 var(--e-2); font-size: var(--t-md); }
.servicio__titulo a { color: var(--tinta); text-decoration: none; }
.servicio__titulo a::after { content: ''; position: absolute; inset: 0; }
.servicio:hover .servicio__titulo a { color: var(--teal); }
.servicio__texto { margin: 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.servicio__mas {
    margin-top: auto;
    padding-top: var(--e-2);
    font-family: var(--tipo-ui);
    font-size: var(--t-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dorado-oscuro);
}

/* ---------- 13 ter. Trío de servicios principales (portada) ------------- */
/* Banda a ancho completo, fondo oscuro para que corte con los bloques
   blancos de arriba y abajo. Tres zonas iguales separadas por una línea
   fina; toda la zona es un enlace a su sección. */
.trio {
    background: var(--teal-noche);
    color: var(--blanco);
}

/* Línea que presenta los tres servicios, dentro ya de la banda oscura. */
.trio__entrada {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: var(--e-5) var(--e-3) var(--e-4);
    font-family: var(--tipo-ui);
    font-size: var(--t-md);
    font-weight: 700;
    text-align: center;
    color: var(--blanco);
}

.trio__rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: rgba(252, 252, 255, .12);
}

@media (min-width: 48em) {
    .trio__rejilla { grid-template-columns: repeat(3, 1fr); }
}

.trio__zona { background: var(--teal-noche); }

.trio__enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    transition: background var(--transicion);
}
.trio__enlace:hover { background: rgba(252, 252, 255, .04); }
.trio__enlace:focus-visible { outline: 2px solid var(--arena); outline-offset: -3px; }

.trio__foto {
    display: block;
    position: relative;
    height: clamp(220px, 24vw, 330px);
    overflow: hidden;
    background: var(--teal-hondo);
}
.trio__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}
.trio__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11, 51, 51, 0) 45%, var(--teal-noche) 100%);
}
.trio__enlace:hover .trio__foto img { transform: scale(1.06); }

.trio__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(1.75rem, 2.6vw, 2.75rem);
}

.trio__titulo {
    display: block;
    font-family: var(--tipo-titulo);
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1.2;
    color: var(--blanco);
}
.trio__titulo::after {
    content: '';
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-top: var(--e-2);
    background: var(--arena);
    transition: width var(--transicion);
}
.trio__enlace:hover .trio__titulo::after { width: 4.5rem; }

.trio__texto {
    display: block;
    margin-top: var(--e-3);
    font-family: var(--tipo-texto);
    font-size: var(--t-base);
    line-height: 1.65;
    color: rgba(252, 252, 255, .84);
}

.trio__mas {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    padding-top: var(--e-4);
    font-family: var(--tipo-ui);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--arena);
}
.trio__mas::after {
    content: '→';
    transition: transform var(--transicion);
}
.trio__enlace:hover .trio__mas::after { transform: translateX(5px); }

/* ---------- 14. Listado de proyectos ------------------------------------ */
.grupo + .grupo { margin-top: var(--e-6); }
.grupo__titulo {
    margin-bottom: var(--e-1);
    padding-bottom: var(--e-1);
    border-bottom: 2px solid var(--dorado);
    color: var(--teal);
}
.grupo__texto { max-width: var(--ancho-texto); margin-bottom: var(--e-3); }

.listado {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.75rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    margin-top: var(--e-3);
    padding: 0;
    list-style: none;
}

.proyecto {
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.proyecto:hover {
    border-color: var(--teal);
    box-shadow: 0 10px 28px -18px rgba(13, 13, 13, .5);
    transform: translateY(-2px);
}
/* Altura fija: los carteles verticales y las fotos apaisadas conviven en la
   misma rejilla y todas las fichas deben quedar alineadas. */
.proyecto__foto { height: 210px; overflow: hidden; background: var(--gris-02); }
.proyecto__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.proyecto__cuerpo { display: flex; flex-direction: column; flex: 1; padding: var(--e-3); }
.proyecto__titulo {
    margin: 0 0 var(--e-1);
    font-size: var(--t-base);
    line-height: 1.3;
}
.proyecto__titulo a { color: var(--tinta); text-decoration: none; }
.proyecto__titulo a::after { content: ''; position: absolute; inset: 0; }
.proyecto { position: relative; }
.proyecto:hover .proyecto__titulo a { color: var(--teal); }
/* El subtítulo es unas veces un año y otras una frase larga: en versales
   resultaría ilegible. */
.proyecto__fecha {
    margin: 0 0 var(--e-2);
    font-family: var(--tipo-ui);
    font-size: var(--t-xs);
    line-height: 1.45;
    color: var(--teal);
}
.proyecto__resumen { margin: 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.proyecto__mas {
    margin-top: auto;
    padding-top: var(--e-2);
    font-family: var(--tipo-ui);
    font-size: var(--t-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dorado-oscuro);
}

/* ---------- 15. Ficha de proyecto --------------------------------------- */
.miga {
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    color: var(--tinta-suave);
}
.miga a { color: var(--tinta-suave); }
.miga a:hover { color: var(--teal); }

.ficha__fecha {
    margin: 0 0 var(--e-3);
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    color: var(--teal);
}

.galeria {
    display: grid;
    gap: var(--e-2);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin: var(--e-4) 0;
    padding: 0;
    list-style: none;
}
.galeria img { width: 100%; border-radius: var(--radio); }

/* ---------- 15 bis. Galería de fotos de lugares y visitas ----------------
   Va en columnas de mampostería, no en rejilla: así cada foto conserva su
   proporción y ninguna se recorta (hay fotos con el crédito del autor
   sobreimpreso, y cortarlas sería borrarlo). */
.fotos {
    columns: 3;
    column-gap: var(--e-2);
    margin: var(--e-4) 0 var(--e-2);
    padding: 0;
    list-style: none;
}
.fotos__pieza {
    break-inside: avoid;
    margin-bottom: var(--e-2);
}
.fotos__enlace {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--gris-02);
    line-height: 0;
}
.fotos__enlace img {
    width: 100%;
    height: auto;
    transition: transform 320ms ease, filter var(--transicion);
}
.fotos__enlace:hover img,
.fotos__enlace:focus-visible img { transform: scale(1.03); filter: brightness(1.05); }

/* La lupa aparece al pasar por encima: avisa de que la foto se amplía. */
.fotos__lupa {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(13, 13, 13, .55);
    opacity: 0;
    transition: opacity var(--transicion);
}
.fotos__lupa::before,
.fotos__lupa::after {
    content: '';
    position: absolute;
    background: none;
    border: 2px solid var(--blanco);
}
.fotos__lupa::before {
    width: 13px; height: 13px;
    top: 9px; left: 9px;
    border-radius: 50%;
}
.fotos__lupa::after {
    width: 0; height: 7px;
    top: 20px; left: 21px;
    border-width: 0 0 0 2px;
    transform: rotate(-45deg);
}
.fotos__enlace:hover .fotos__lupa,
.fotos__enlace:focus-visible .fotos__lupa { opacity: 1; }

.fotos__pista {
    margin: 0;
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    color: var(--tinta-suave);
    text-align: center;
}

@media (max-width: 60em) { .fotos { columns: 2; } }
@media (max-width: 34em) { .fotos { columns: 1; } }

/* ---------- 15 ter. Visor de fotografías --------------------------------- */
body.sin-desplazar { overflow: hidden; }

/* El display de aquí abajo gana al que pone el navegador con [hidden], así que
   hay que apagarlo a mano; si no, al cerrar el visor se queda la caja puesta
   con la foto ya vaciada. Lo mismo con las flechas cuando hay una sola foto. */
.visor[hidden],
.visor__boton[hidden] { display: none; }

.visor {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(11, 51, 51, .94);
}
.visor__marco {
    margin: 0;
    max-width: 100%;
    text-align: center;
}
.visor__foto {
    /* Entera, nunca recortada. */
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    border-radius: var(--radio);
    box-shadow: 0 30px 60px -30px rgba(13, 13, 13, .9);
}
.visor__pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--e-2);
    margin-top: var(--e-2);
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    color: var(--blanco);
    text-wrap: balance;
}
.visor__cuenta { color: var(--arena); }

.visor__boton {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 13, 13, .45);
    color: var(--blanco);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transicion);
}
.visor__boton:hover { background: rgba(13, 13, 13, .85); }
.visor__cerrar { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); font-size: 1.1rem; }
.visor__ant    { top: 50%; left: clamp(.5rem, 2vw, 1.5rem); translate: 0 -50%; }
.visor__sig    { top: 50%; right: clamp(.5rem, 2vw, 1.5rem); translate: 0 -50%; }

@media (max-width: 34em) {
    .visor__foto { max-height: 68vh; }
    .visor__boton { width: 40px; height: 40px; }
}

/* ---------- 16. Contacto ------------------------------------------------ */
.contacto {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
@media (min-width: 58em) {
    .contacto { grid-template-columns: 5fr 7fr; }
}

.vias { padding: var(--e-4); background: var(--teal); color: var(--blanco); border-radius: var(--radio); }
.via { display: flex; gap: var(--e-3); align-items: flex-start; padding-block: var(--e-3); }
.via + .via { border-top: 1px solid rgba(252, 252, 255, .28); }
.via__icono { flex: none; width: 34px; color: var(--arena); }
.via h2 {
    margin: 0 0 .2em;
    font-size: var(--t-base);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blanco);
}
.via a, .via p { color: var(--blanco); margin: 0; overflow-wrap: anywhere; }

/* Formulario */
.formulario { display: grid; gap: var(--e-3); }
.formulario__fila { display: grid; gap: var(--e-3); }
@media (min-width: 40em) {
    .formulario__fila--dos { grid-template-columns: 1fr 1fr; }
}

.campo { display: grid; gap: .35rem; }
.campo label {
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--tinta-suave);
}
.campo input,
.campo textarea {
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
    font-family: var(--tipo-ui);
    font-size: var(--t-base);
    color: var(--tinta);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:focus,
.campo textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(8, 114, 114, .15);
    outline: none;
}
.campo textarea { min-height: 9rem; resize: vertical; }

.campo--check { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.campo--check input { width: 1.15rem; height: 1.15rem; margin-top: .35rem; }
.campo--check label { font-weight: 400; font-family: var(--tipo-texto); color: var(--tinta); }

.formulario__nota { font-size: var(--t-sm); color: var(--tinta-suave); }

/* Trampa antispam: invisible pero no con display:none */
.trampa {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

.aviso {
    padding: var(--e-3);
    border-left: 4px solid var(--teal);
    border-radius: var(--radio);
    background: var(--gris-01);
}
.aviso--error { border-left-color: var(--error); }
.aviso--ok    { border-left-color: var(--teal); }
.aviso ul { margin: var(--e-1) 0 0; padding-left: 1.25em; }


/* ---------- 17. Redes sociales ------------------------------------------ */
.redes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.redes a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
}
.redes a:hover span { text-decoration: underline; }
.redes__icono { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- 18. Subir al inicio ----------------------------------------- */
.subir {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 50;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--teal);
    color: var(--blanco);
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicion), visibility var(--transicion), background var(--transicion);
}
.subir.visible { opacity: .92; visibility: visible; }
.subir:hover { background: var(--teal-hondo); opacity: 1; }

/* ---------- 19. Utilidades ---------------------------------------------- */
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.centrado { text-align: center; }
.requerido { color: var(--error); }

/* ---------- 20. Responsive ---------------------------------------------- */
@media (max-width: 67em) {
    .menu-boton { display: inline-flex; }

    .cabecera__logo img { width: 100px; }
    .cabecera--sobre .cabecera__logo img { width: 108px; }

    /* El desplegable del móvil es un panel blanco: dentro, los enlaces
       vuelven al color normal aunque la cabecera vaya sobre las fotos. */
    .cabecera--sobre .menu > ul > li > a,
    .cabecera--sobre .menu__desplegar {
        color: var(--tinta);
        text-shadow: none;
    }
    .cabecera--sobre .menu > ul > li > a:hover,
    .cabecera--sobre .menu > ul > li > a[aria-current="page"],
    .cabecera--sobre .menu__grupo.en-rama > a,
    .cabecera--sobre .menu__grupo.en-rama > .menu__desplegar { color: var(--teal); }

    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 40;
        background: var(--blanco);
        border-top: 1px solid var(--linea);
        box-shadow: 0 18px 34px -22px rgba(13, 13, 13, .55);
        max-height: 0;
        overflow: hidden;
        transition: max-height 260ms ease;
    }
    .menu.abierto { max-height: 80vh; overflow-y: auto; }
    /* align-items:center sirve para la barra horizontal, pero en columna
       encogería cada entrada al ancho de su texto. */
    .menu > ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--e-1) 0; }
    .menu > ul > li { border-bottom: 1px solid var(--gris-02); }
    .menu > ul > li:last-child { border-bottom: 0; }
    .menu a { padding: .9rem clamp(1rem, 4vw, 2.5rem); font-size: var(--t-base); }
    .menu a::after { display: none; }
    .menu a[aria-current="page"] { background: var(--gris-01); }

    /* El desplegable se convierte en un acordeón dentro de la lista */
    .menu__grupo { display: grid; grid-template-columns: 1fr auto; align-items: center; }
    .menu__desplegar { padding: .9rem clamp(1rem, 4vw, 2.5rem); }
    .menu__sub {
        grid-column: 1 / -1;
        max-height: 0;
        overflow: hidden;
        background: var(--gris-01);
        transition: max-height 240ms ease;
    }
    .menu__grupo.abierto .menu__sub { max-height: 22rem; }
    .menu__grupo.abierto .menu__flecha { transform: rotate(180deg); }
    .menu__sub li + li { border-top: 1px solid var(--gris-02); }
    .menu__sub a {
        padding-left: calc(clamp(1rem, 4vw, 2.5rem) + 1.1rem);
        font-size: var(--t-sm);
    }

    .foto-marco { --sombra: 14px; }
    .portada__claim { font-size: clamp(2.25rem, 1rem + 6vw, 4rem); }
    .portada__control { width: 38px; height: 38px; }
    .portada__control--ant { left: 8px; }
    .portada__control--sig { right: 8px; }
}

/* ---------- 21. Movimiento reducido e impresión ------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .portada__foto img { animation: none; }
    /* El anillo del mapa se queda quieto alrededor de la chincheta. */
    .mapa__anillo { animation: none; transform: scale(.75); opacity: .6; }
}

@media print {
    .cabecera, .pie, .subir, .portada__control, .llamada { display: none !important; }
    body { font-size: 11pt; }
    a::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}


/* Y dentro del panel de contacto, el blanco del panel. */
.via .redes { margin-top: .35em; }
.via .redes a { color: var(--blanco); }
.via .redes a:hover { color: var(--arena); }

/* =========================================================================
   Visitas guiadas privadas: mapas, rutas y cuestionarios
   ========================================================================= */

/* ---------- Rótulo alto de la portada de sección ------------------------ */
.rotulo--alto { min-height: clamp(240px, 34vh, 380px); }
.rotulo__bajada {
    margin: var(--e-2) 0 0;
    font-family: var(--tipo-ui);
    font-size: var(--t-md);
    color: rgba(252, 252, 255, .92);
}

.subtitulo {
    margin: 0;
    font-size: var(--t-md);
    font-style: italic;
    color: var(--teal);
}

/* ---------- Mapas ------------------------------------------------------- */
.mapa { margin: var(--e-4) 0 0; }
.mapa__svg { width: 100%; height: auto; overflow: visible; }

.mapa__tierra    { fill: var(--gris-03); stroke: var(--blanco); stroke-width: 1.2; }
.mapa__soria     { fill: var(--teal); stroke: var(--blanco); stroke-width: 2; }
.mapa__ciudad    { fill: var(--teal-oscuro); }
.mapa__provincia { fill: var(--agua-claro); stroke: var(--teal); stroke-width: 3; }

.mapa__rotulo {
    font-family: var(--tipo-ui);
    font-size: 15px;
    fill: var(--tinta);
    paint-order: stroke;
    stroke: var(--blanco);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.mapa--peninsula .mapa__rotulo { font-size: 20px; }
.mapa--provincia .mapa__rotulo { font-size: 26px; }

.mapa__soria-rotulo {
    font-family: var(--tipo-titulo);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .12em;
    fill: var(--blanco);
    paint-order: stroke;
    stroke: var(--teal);
    stroke-width: 4px;
    stroke-linejoin: round;
}

/* Puntos que llevan a cada localidad */
.mapa__punto { cursor: pointer; }
.mapa__halo  { fill: var(--teal); opacity: 0; transition: opacity var(--transicion); }
.mapa__chincheta {
    fill: var(--teal);
    stroke: var(--blanco);
    stroke-width: 3;
    transition: fill var(--transicion);
}
.mapa__punto:hover .mapa__halo,
.mapa__punto:focus-visible .mapa__halo { opacity: .18; }
.mapa__punto:hover .mapa__chincheta,
.mapa__punto:focus-visible .mapa__chincheta { fill: var(--dorado-oscuro); }
.mapa__punto:hover .mapa__rotulo { fill: var(--teal); font-weight: 700; }
.mapa__punto:focus-visible { outline: none; }
.mapa__punto:focus-visible .mapa__chincheta { stroke: var(--dorado); stroke-width: 5; }

/* Localidades que no forman parte de la ruta que se está viendo */
.mapa__punto.apagado .mapa__chincheta { fill: var(--agua-hondo); }
.mapa__punto.apagado .mapa__rotulo    { fill: var(--tinta-suave); }

/* La localidad de la que trata la página: chincheta dorada, halo encendido y
   un anillo que late despacio, para que se vea de un vistazo cuál es. */
.mapa__punto.destacado .mapa__halo { opacity: .16; }
.mapa__punto.destacado .mapa__chincheta {
    fill: var(--dorado);
    stroke-width: 4;
}
.mapa__anillo {
    fill: none;
    stroke: var(--dorado);
    stroke-width: 3;
    opacity: .55;
    transform-box: fill-box;
    transform-origin: center;
    animation: latido 2.6s ease-out infinite;
}
@keyframes latido {
    from { transform: scale(.55); opacity: .65; }
    to   { transform: scale(1.5);  opacity: 0; }
}
.mapa__punto.destacado .mapa__rotulo {
    fill: var(--teal-hondo);
    font-weight: 700;
    stroke-width: 5px;
}
.mapa--provincia .mapa__punto.destacado .mapa__rotulo { font-size: 30px; }

/* ---------- Distancias -------------------------------------------------- */
.distancias {
    display: grid;
    gap: var(--e-2);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    margin: var(--e-4) 0 0;
    padding: 0;
    list-style: none;
}
.distancias li {
    padding: var(--e-2) var(--e-3);
    border-left: 3px solid var(--dorado);
    background: var(--gris-01);
}
.distancias strong {
    display: block;
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    color: var(--teal);
}
.distancias span { font-size: var(--t-sm); }

/* ---------- Los dos pasos ----------------------------------------------- */
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: var(--e-3) 0 0; }
.pasos li {
    counter-increment: paso;
    position: relative;
    margin-bottom: var(--e-2);
    padding-left: 2.75rem;
}
.pasos li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: .1em;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--teal);
    color: var(--blanco);
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    font-weight: 700;
}

/* ---------- Las dos puertas de entrada ---------------------------------- */
.puertas {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-top: var(--e-4);
}
@media (min-width: 52em) { .puertas { grid-template-columns: 1fr 1fr; } }

.puerta {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--linea);
    border-top: 4px solid var(--dorado);
    border-radius: var(--radio);
    background: var(--blanco);
}
.puerta h3 { color: var(--teal); }
.puerta p:last-child { margin-top: auto; padding-top: var(--e-3); }
/* Los dos botones de las puertas, iguales en tamaño aunque su estilo difiera. */
.puerta .boton { min-width: min(18rem, 100%); }

/* ---------- Rejilla de rutas -------------------------------------------- */
.rutas {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.75rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    margin: var(--e-3) 0 0;
    padding: 0;
    list-style: none;
}
.ruta {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.ruta:hover {
    border-color: var(--teal);
    box-shadow: 0 10px 28px -18px rgba(13, 13, 13, .5);
    transform: translateY(-2px);
}
.ruta__foto { position: relative; height: 190px; overflow: hidden; background: var(--gris-02); }
.ruta__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Portada de marca para las rutas que aún no tienen foto */
.ruta__foto--marca {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-hondo) 100%);
}
.ruta__marca {
    font-family: var(--tipo-script);
    font-size: 2rem;
    color: rgba(252, 252, 255, .5);
}

.ruta__sello {
    position: absolute;
    top: .75rem;
    left: .75rem;
    padding: .25em .7em;
    border-radius: 999px;
    background: var(--dorado);
    color: var(--tinta);
    font-family: var(--tipo-ui);
    font-size: var(--t-xs);
    font-weight: 700;
}

.ruta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: var(--e-3); }
.ruta__titulo { margin: 0 0 var(--e-1); font-size: var(--t-base); line-height: 1.3; }
.ruta__titulo a { color: var(--tinta); text-decoration: none; }
.ruta__titulo a::after { content: ""; position: absolute; inset: 0; }
.ruta:hover .ruta__titulo a { color: var(--teal); }
.ruta__resumen { margin: 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.ruta__pie {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: auto;
    padding-top: var(--e-2);
    font-family: var(--tipo-ui);
    font-size: var(--t-xs);
}
.ruta__pie span {
    padding: .2em .6em;
    border-radius: 999px;
    background: var(--gris-01);
    color: var(--tinta-suave);
}
.ruta__pie .ruta__lugar { background: var(--agua-claro); color: var(--teal); }

/* ---------- Ficha de ruta ----------------------------------------------- */
.ruta__entradilla { font-size: var(--t-md); color: var(--tinta-suave); }

.ficha-datos {
    display: grid;
    gap: var(--e-2) var(--e-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    margin: var(--e-4) 0;
    padding: var(--e-3);
    border-radius: var(--radio);
    background: var(--gris-01);
}
.ficha-datos dt {
    font-family: var(--tipo-ui);
    font-size: var(--t-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.ficha-datos dd { margin: .2em 0 0; font-size: var(--t-sm); }

.ruta__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }

.video { position: relative; margin: var(--e-4) 0; aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radio); }

/* ---------- Bloque de la Luxury Box ------------------------------------- */
.luxury__interior { max-width: 46rem; }
.luxury h2 { color: var(--blanco); font-size: var(--t-xl); }

/* Cuando el bloque enseña la caja, el rótulo va a un lado y el texto al otro.
   La imagen es un cartel claro: sobre el velo verde se lee sin más adorno. */
.luxury__reparto {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
@media (min-width: 62em) {
    .luxury__reparto { grid-template-columns: minmax(0, 19rem) 1fr; }
}
.luxury__caja {
    margin: 0 auto;
    max-width: 19rem;
    line-height: 0;
}
.luxury__caja img {
    width: 100%;
    border-radius: var(--radio);
    box-shadow: 0 18px 44px rgba(11, 51, 51, .5);
}

/* ---------- Cuestionarios ----------------------------------------------- */
.campo-grupo {
    margin: 0;
    padding: var(--e-3);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}
.campo-grupo legend {
    padding-inline: .5em;
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--teal);
}
.campo-grupo .campo { margin-top: var(--e-3); }

.casillas {
    display: grid;
    gap: .5rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.casilla {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: var(--t-sm);
    cursor: pointer;
}
.casilla input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .3em; }
.casilla:hover span { color: var(--teal); }

/* El mapa de situación se centra y no supera el ancho cómodo de lectura */
.mapa--peninsula .mapa__svg { max-width: 620px; margin-inline: auto; display: block; }
.mapa--provincia .mapa__svg { max-width: 1000px; margin-inline: auto; display: block; }
.distancias { max-width: 900px; margin-inline: auto; }

/* El conjunto mapa + distancias respira respecto al texto que lo presenta. */
.situacion { margin-top: var(--e-5); }
.situacion .mapa { margin: 0; }

/* En pantalla ancha las distancias se recogen en el hueco que dejarían las
   Baleares, a la derecha de la península, en vez de ir debajo del mapa. */
@media (min-width: 62em) {
    .situacion { position: relative; max-width: 920px; min-height: 34rem; margin-inline: auto; }
    .situacion .mapa { width: 72%; }
    .situacion .mapa__svg { max-width: none; }
    .situacion .distancias {
        position: absolute;
        left: 62%;
        top: 45%;
        width: 19rem;
        max-width: none;
        margin: 0;
        gap: .45rem;
        grid-template-columns: 1fr;
    }
    /* Fichas ligeras, para que floten sobre el mar sin pesar más que el mapa. */
    .situacion .distancias li {
        padding: .5rem .8rem;
        border: 1px solid var(--linea);
        border-left: 2px solid var(--dorado);
        border-radius: var(--radio);
        background: var(--blanco);
        box-shadow: 0 1px 2px rgb(13 13 13 / .04);
    }
    .situacion .distancias strong {
        font-size: var(--t-xs);
        letter-spacing: .03em;
        text-transform: uppercase;
    }
    .situacion .distancias span { font-size: var(--t-xs); color: var(--tinta-suave); }
}

/* Las dos actividades preferentes que acompañan a las visitas guiadas */
.servicios--dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.tarjeta--alta { min-height: 16rem; }
.tarjeta--alta img { min-height: 16rem; }
.tarjeta--alta .tarjeta__titulo { font-size: var(--t-lg); }

/* Lista de localidades bajo el mapa: en móvil los rótulos del SVG quedan
   pequeños, y además así los enlaces son rastreables. */
.mapa__ayuda {
    margin: var(--e-3) 0 var(--e-2);
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    color: var(--tinta-suave);
    text-align: center;
}
.lugares-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lugares-lista a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4em 1em;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--blanco);
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    color: var(--tinta);
    text-decoration: none;
    transition: border-color var(--transicion), color var(--transicion);
}
.lugares-lista a:hover { border-color: var(--teal); color: var(--teal); }
.lugares-lista span {
    display: grid;
    place-items: center;
    min-width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background: var(--teal);
    color: var(--blanco);
    font-size: var(--t-xs);
}

/* =========================================================================
   Eventos corporativos (MICE)
   ========================================================================= */

/* ---------- La alianza con la agencia ----------------------------------- */
.alianza {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-top: var(--e-5);
}
@media (min-width: 52em) { .alianza { grid-template-columns: 1fr 1fr; } }

.alianza__parte {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-left: 4px solid var(--teal);
    border-radius: var(--radio);
    background: var(--gris-01);
}
.alianza__parte h2 {
    margin-bottom: var(--e-2);
    font-size: var(--t-md);
    color: var(--teal);
}
.alianza__parte p { font-size: var(--t-sm); }

.fee {
    max-width: 60rem;
    margin: var(--e-4) auto 0;
    padding: var(--e-3);
    border: 2px solid var(--dorado);
    border-radius: var(--radio);
    background: var(--arena-claro);
    text-align: center;
    font-size: var(--t-sm);
}

/* ---------- Servicios técnicos ------------------------------------------ */
.servicios-mice {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.5rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    margin: var(--e-3) 0 0;
    padding: 0;
    list-style: none;
}
.servicios-mice li {
    padding: var(--e-3);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
}
/* h4 en la página de eventos, que cuelga de un h3; h3 en las secciones, que
   cuelgan directamente del h2 de la presentación. Se ven igual. */
.servicios-mice h4,
.servicios-mice h3 {
    margin-bottom: .4em;
    font-size: var(--t-sm);
    letter-spacing: .03em;
    color: var(--teal);
}
.servicios-mice p { margin: 0; font-size: var(--t-sm); color: var(--tinta-suave); }

/* Párrafo que cierra el desglose de servicios y aviso destacado que le sigue. */
.servicios-mice__pie {
    max-width: var(--ancho-texto);
    margin: var(--e-4) auto 0;
    font-size: var(--t-md);
    text-align: center;
    text-wrap: balance;
}
.nota-servicio { margin: var(--e-5) auto 0; padding-inline: 0; }
/* En la nota no hay botón que empujar al fondo, así que el último párrafo
   no necesita el hueco que .puerta reserva para los botones. */
.nota-servicio .puerta p:last-child { margin-top: 0; padding-top: 0; }

/* Llamada de cierre de la banda de servicios, ya fuera del recuadro. */
.seccion__accion { margin: var(--e-4) 0 0; }
.seccion__accion .boton { min-width: min(18rem, 100%); }

/* ---------- Formulario por pasos ---------------------------------------- */
.paso-num {
    display: inline-grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    margin-right: .5em;
    border-radius: 50%;
    background: var(--teal);
    color: var(--blanco);
}
.opcional { font-weight: 400; color: var(--tinta-suave); }

.campo select {
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
    font-family: var(--tipo-ui);
    font-size: var(--t-base);
    color: var(--tinta);
}
.campo select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(8, 114, 114, .15);
    outline: none;
}

.campo input[type="file"] {
    width: 100%;
    padding: .6rem;
    border: 1px dashed var(--linea);
    border-radius: var(--radio);
    background: var(--gris-01);
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
}
.campo input[type="file"]::file-selector-button {
    margin-right: .8rem;
    padding: .45em 1.1em;
    border: 1px solid var(--teal);
    border-radius: 999px;
    background: var(--blanco);
    color: var(--teal);
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
    cursor: pointer;
}
.campo input[type="file"]::file-selector-button:hover {
    background: var(--teal);
    color: var(--blanco);
}

/* =========================================================================
   Pie de página
   ========================================================================= */
.pie {
    position: relative;
    overflow: hidden;
    padding-top: var(--e-6);
    background: var(--teal-hondo);
    color: rgba(252, 252, 255, .82);
    border-top: 4px solid var(--arena);
}

/* El mandala del logotipo, muy tenue, como marca de agua */
.pie__marca {
    position: absolute;
    top: 50%;
    right: -10rem;
    translate: 0 -50%;
    width: min(30rem, 55%);
    aspect-ratio: 1;
    background: url('/assets/img/logo-blanco.webp') center / contain no-repeat;
    opacity: .045;
    pointer-events: none;
}

.pie a { color: rgba(252, 252, 255, .82); text-decoration: none; }
.pie a:hover { color: var(--arena); }

.pie__rejilla {
    position: relative;
    display: grid;
    gap: var(--e-5) var(--e-4);
    padding-bottom: var(--e-6);
}
@media (min-width: 46em) {
    .pie__rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 68em) {
    .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--e-5); }
}

/* ---------- Columna de marca -------------------------------------------- */
.pie__logo img {
    width: 150px;
    transition: opacity var(--transicion);
}
.pie__logo:hover img { opacity: .75; }

.pie__claim {
    margin: var(--e-2) 0 var(--e-2);
    font-family: var(--tipo-script);
    font-size: 2rem;
    line-height: 1;
    color: var(--arena);
}
.pie__nota {
    margin: 0;
    max-width: 26ch;
    font-size: var(--t-sm);
    color: rgba(252, 252, 255, .62);
}

/* ---------- Columnas de enlaces ----------------------------------------- */
.pie h2 {
    position: relative;
    margin-bottom: var(--e-3);
    padding-bottom: .6rem;
    font-family: var(--tipo-ui);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--blanco);
}
.pie h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2rem;
    height: 2px;
    background: var(--arena);
}

.pie__col ul { list-style: none; margin: 0; padding: 0; }
.pie__col li { margin-bottom: .55em; }
.pie__col a {
    position: relative;
    font-size: var(--t-sm);
    padding-left: 0;
    transition: padding-left var(--transicion), color var(--transicion);
}
.pie__col a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1px;
    background: var(--arena);
    translate: 0 -50%;
    transition: width var(--transicion);
}
.pie__col a:hover { padding-left: 1.1rem; }
.pie__col a:hover::before { width: .8rem; }

/* ---------- Contacto ----------------------------------------------------- */
.pie__dato { margin: 0 0 .5em; overflow-wrap: anywhere; font-size: var(--t-sm); }
.pie__telefono {
    font-family: var(--tipo-titulo);
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--blanco) !important;
}
.pie__telefono:hover { color: var(--arena) !important; }

.pie .redes { margin-top: var(--e-3); }
.pie .redes a { color: rgba(252, 252, 255, .82); }
.pie .redes a:hover { color: var(--arena); }
.pie__accion { margin-top: var(--e-3); }
.pie__accion .boton { padding: .6em 1.8em; font-size: var(--t-sm); }

/* ---------- Franja legal ------------------------------------------------- */
.pie__legal {
    position: relative;
    padding-block: var(--e-2);
    background: rgba(13, 13, 13, .22);
    font-family: var(--tipo-ui);
    font-size: var(--t-xs);
}
.pie__legal-interior {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem var(--e-3);
}
.pie__legal p { margin: 0; }
.pie__copia { color: rgba(252, 252, 255, .6); }
.pie__marca-nombre { color: var(--blanco); font-weight: 700; letter-spacing: .04em; }

.pie__enlaces { display: flex; flex-wrap: wrap; gap: .4rem var(--e-2); }
.pie__enlaces a { color: rgba(252, 252, 255, .6); }
.pie__enlaces a:hover { color: var(--arena); }
.pie__enlaces a + a { position: relative; padding-left: var(--e-2); }
.pie__enlaces a + a::before {
    content: '·';
    position: absolute;
    left: 0;
    color: rgba(252, 252, 255, .3);
}

@media (max-width: 46em) {
    .pie__legal-interior { justify-content: center; text-align: center; }
    .pie__enlaces { justify-content: center; }
    .pie__marca { right: -8rem; opacity: .04; }
}

/* =========================================================================
   Detalles: ornamentos, matices de profundidad y aparición al desplazar
   ========================================================================= */

/* ---------- Filete dorado bajo los encabezados centrados ---------------- */
.centrado > h2::after,
h2.centrado::after,
.texto--centrado h2::after {
    content: '';
    display: block;
    width: 3.5rem;
    height: 3px;
    margin: var(--e-2) auto 0;
    border-radius: 2px;
    background: var(--dorado);
}
/* En los bloques oscuros el filete se mantiene dorado, pero más luminoso */
.bloque--foto .centrado > h2::after,
.bloque--foto h2.centrado::after { background: var(--arena); opacity: .9; }

/* ---------- Rótulos de sección con algo de profundidad ------------------ */
.bloque--foto::before {
    background:
        linear-gradient(180deg, rgba(11, 51, 51, .35) 0%, rgba(11, 51, 51, .12) 45%, rgba(11, 51, 51, .45) 100%),
        rgba(11, 51, 51, .84);
}
.rotulo h1 { text-shadow: 0 2px 18px rgba(13, 13, 13, .25); }

/* ---------- Botones: un leve impulso al pasar el ratón ------------------ */
.boton {
    box-shadow: 0 0 0 0 rgba(13, 13, 13, 0);
    will-change: transform;
}
.boton:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -12px rgba(13, 13, 13, .55);
}
.boton:active { transform: translateY(0); }

/* ---------- La cita del claim, entre comillas de verdad ----------------- */
.claim__cita {
    position: relative;
    display: inline-block;
    padding-inline: 1.6rem;
}
.claim__cita::before,
.claim__cita::after {
    position: absolute;
    top: -.15em;
    font-family: var(--tipo-texto);
    font-size: 2.4em;
    line-height: 1;
    color: var(--dorado);
    opacity: .55;
}
.claim__cita::before { content: '\201C'; left: 0; }
.claim__cita::after  { content: '\201D'; right: 0; }

/* ---------- Tarjetas: sombra algo más presente al pasar ----------------- */
.proyecto:hover,
.ruta:hover,
.servicio:hover { box-shadow: 0 16px 34px -20px rgba(10, 79, 79, .55); }

/* ---------- Bloque de preguntas: comilla decorativa --------------------- */
.preguntas { position: relative; }

/* ---------- Aparición suave al desplazar --------------------------------
   Solo se aplica si el JavaScript ha marcado el documento; sin JS todo se
   ve desde el primer momento. */
.js .revelar {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 620ms ease, transform 620ms cubic-bezier(.22, .61, .36, 1);
}
.js .revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .revelar { opacity: 1; transform: none; transition: none; }
    .boton:hover { transform: none; }
}

/* El botón de volver arriba flota sobre la esquina: se le deja sitio en la
   franja legal para que no tape los enlaces en pantallas estrechas. */
@media (max-width: 46em) {
    .pie__legal-interior { padding-right: 3.5rem; }
    .distancias { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 30em) {
    .distancias { grid-template-columns: 1fr; }
}