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

/* ---------- 1. Variables ------------------------------------------------ */
:root {
    /* Color */
    --teal:          #0c6e70;
    --teal-oscuro:   #005353;
    --teal-hondo:    #06484a;
    --verde:         #167863;
    --dorado:        #efb810;
    --dorado-oscuro: #b88c19;

    --tinta:         #26292b;
    --tinta-suave:   #55595c;
    --linea:         #d9dcdd;
    --gris-01:       #f4f4f2;
    --gris-02:       #eeeeee;
    --gris-03:       #e0e0e0;
    --pie:           #585858;
    --blanco:        #ffffff;

    /* 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(0, 83, 83, .87);
}
.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: #fff;
    padding: var(--e-2) var(--e-3);
    font-family: var(--tipo-ui);
}
.saltar:focus { left: 0; }

/* ---------- 4. Cabecera ------------------------------------------------- */
.cabecera {
    position: relative;
    background: var(--blanco);
    border-top: 5px solid var(--teal);
}

.cabecera__interior {
    display: flex;
    flex-direction: column;
    align-items: center;
    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-3) var(--e-2);
}

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

/* Cabecera compacta en las páginas interiores */
.cabecera--interior .cabecera__interior {
    flex-direction: row;
    justify-content: space-between;
    padding-block: var(--e-2);
}
.cabecera--interior .cabecera__logo img { width: 108px; }

/* 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: 60.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(0, 0, 0, .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;
    min-height: clamp(340px, 56vh, 620px);
    overflow: hidden;
    background: var(--teal-oscuro);
}

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

.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;
    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(0, 0, 0, .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(0, 0, 0, .45);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transicion);
}
.portada__control:hover { background: rgba(0, 0, 0, .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;
}
.rotulo h1 {
    margin: 0;
    font-size: var(--t-2xl);
    color: var(--blanco);
    text-transform: lowercase;
    letter-spacing: .01em;
}

/* ---------- 7. Botones -------------------------------------------------- */
.boton {
    display: inline-block;
    padding: .8em 2.2em;
    border: 2px solid var(--verde);
    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(--verde);
    border-color: var(--verde);
    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);
}

/* ---------- 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; }
.estrella__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;
    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(0, 60, 60, .82) 0%, rgba(0, 60, 60, .35) 55%, rgba(0, 60, 60, .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(0, 0, 0, .5);
}
.tarjeta:hover img { transform: scale(1.06); }
.tarjeta:hover::after { background: linear-gradient(to top, rgba(0, 60, 60, .92) 0%, rgba(0, 60, 60, .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(255, 255, 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; }

/* 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(--verde);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.claim__cita {
    margin: 0;
    font-size: var(--t-md);
    font-style: italic;
    color: var(--verde);
}

/* 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(0, 0, 0, .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);
}

/* ---------- 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(0, 0, 0, .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 top; }
.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); }

/* ---------- 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(255, 255, 255, .28); }
.via__icono { flex: none; width: 34px; color: var(--dorado); }
.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(12, 110, 112, .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: #c0392b; }
.aviso--ok    { border-left-color: var(--verde); }
.aviso ul { margin: var(--e-1) 0 0; padding-left: 1.25em; }


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

/* ---------- 17. Pie ----------------------------------------------------- */
.pie {
    background: var(--pie);
    color: rgba(255, 255, 255, .92);
    padding-block: var(--e-6);
}
.pie a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.pie a:hover { color: var(--dorado); text-decoration: underline; }

.pie__rejilla {
    display: grid;
    gap: var(--e-4);
    align-items: start;
}
@media (min-width: 52em) {
    .pie__rejilla { grid-template-columns: minmax(180px, 1fr) 1.2fr 1.2fr; gap: var(--e-6); }
}

.pie__logo img { width: 175px; }
.pie__menu ul { list-style: none; margin: 0; padding: 0; }
.pie__menu li { margin-bottom: .35em; }
.pie h2 {
    margin-bottom: var(--e-2);
    font-size: var(--t-base);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blanco);
}
.pie__dato { margin: 0 0 .4em; overflow-wrap: anywhere; }

.pie-legal {
    padding-block: var(--e-2);
    background: var(--blanco);
    font-family: var(--tipo-ui);
    font-size: var(--t-xs);
    text-align: center;
    color: var(--tinta-suave);
}
.pie-legal a { color: var(--tinta-suave); text-decoration: none; }
.pie-legal a:hover { color: var(--teal); text-decoration: underline; }
.pie-legal__marca { font-weight: 700; color: var(--tinta); }
.pie-legal span { display: inline-block; }

/* ---------- 18. Aviso de cookies ---------------------------------------- */
.cookies {
    position: fixed;
    z-index: 60;
    inset: auto 1rem 1rem 1rem;
    max-width: 640px;
    margin-inline: auto;
    padding: var(--e-3);
    border-radius: var(--radio);
    background: var(--blanco);
    box-shadow: 0 14px 44px -12px rgba(0, 0, 0, .45);
    font-family: var(--tipo-ui);
    font-size: var(--t-sm);
}
.cookies[hidden] { display: none; }
.cookies__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.cookies .boton { padding: .5em 1.4em; font-size: var(--t-sm); }

/* ---------- 19. 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: #fff;
    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; }

/* ---------- 20. 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: #c0392b; }

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

    .cabecera__interior { flex-direction: row; justify-content: space-between; }
    .cabecera__logo img { width: 120px; }

    .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(0, 0, 0, .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; }
}

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

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

/* Las redes dentro del pie heredan el color del pie, no el azul de enlace. */
.pie .redes { margin-top: .35em; }
.pie .redes a { color: rgba(255, 255, 255, .92); }
.pie .redes a:hover { color: var(--dorado); }

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

/* =========================================================================
   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(255, 255, 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: #e3e6e5; stroke: #fff; stroke-width: 1.2; }
.mapa__soria     { fill: var(--dorado); stroke: var(--teal); stroke-width: 2; }
.mapa__ciudad    { fill: var(--teal-oscuro); }
.mapa__provincia { fill: #eaf1f0; stroke: var(--teal); stroke-width: 3; }

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

.mapa__soria-rotulo {
    font-family: var(--tipo-titulo);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .12em;
    fill: var(--teal-hondo);
    paint-order: stroke;
    stroke: #fff;
    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: #fff;
    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: #b8c4c3; }
.mapa__punto.apagado .mapa__rotulo    { fill: var(--tinta-suave); }

/* ---------- 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: #fff;
    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); }

/* ---------- 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(0, 0, 0, .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(255, 255, 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: #e4efee; 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); }

/* ---------- 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: 820px; margin-inline: auto; display: block; }
.mapa--provincia .mapa__svg { max-width: 1000px; margin-inline: auto; display: block; }
.distancias { max-width: 900px; margin-inline: auto; }

/* 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: #fff;
    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: #fffaf0;
    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);
}
.servicios-mice h4 {
    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); }

/* ---------- 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: #fff;
}
.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(12, 110, 112, .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);
}