/* =====================================================================================
   www.vera.es — hoja de estilos única («Institucional claro»)
   Se carga después de Bootstrap 4. Sustituye a custom.css y a las ~35 hojas de plantilla.

   1. Variables y base            6. Portada (inicio y turismo)
   2. Cabecera y menú             7. Bloques de portada
   3. Cabecera de página          8. Páginas interiores
   4. Componentes de Bootstrap    9. Turismo
   5. Secciones y tarjetas       10. Pie
   ===================================================================================== */

/* ---------- 1. Variables y base ---------- */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url(../fonts/jakarta/plus-jakarta-sans-latin.woff2) format("woff2");
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --rojo: #981A32;
    --rojo-oscuro: #7a1528;
    --rojo-pie: #76121f;
    --rojo-suave: #fbeef1;
    --tinta: #1b1c20;
    --texto: #3d4047;
    --gris: #666a73;
    --borde: #e6e7eb;
    --fondo-gris: #f4f5f7;
    --radio: 12px;
    --sombra: 0 1px 2px rgba(20, 20, 30, .05), 0 6px 20px rgba(20, 20, 30, .07);
    --sombra-alta: 0 2px 4px rgba(20, 20, 30, .06), 0 14px 34px rgba(20, 20, 30, .13);
    --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {scroll-behavior: smooth;}
body {font-family: var(--fuente); color: var(--texto); background: #fff; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: var(--fuente); color: var(--tinta); font-weight: 700; letter-spacing: -.015em; line-height: 1.25;}
h1 {font-size: 2.1rem;} h2 {font-size: 1.6rem;} h3 {font-size: 1.3rem;} h4 {font-size: 1.15rem;} h5 {font-size: 1.05rem;} h6 {font-size: .95rem;}
a {color: var(--rojo); text-decoration: none;}
a:hover {color: var(--rojo-oscuro); text-decoration: underline;}
/* Foco visible también en botones (Bootstrap lo anulaba) y en blanco sobre los fondos rojos */
.btn:focus-visible {outline: 3px solid #1a73e8; outline-offset: 2px;}
.nav-vera a:focus-visible, .nav-vera button:focus-visible, .barra-superior a:focus-visible, .pie a:focus-visible, .banda-roja a:focus-visible, .servicio:focus-visible, .guardia-hoy a:focus-visible, .portada a:focus-visible, .cabecera-pagina--foto a:focus-visible {outline-color: #fff;}
/* Los enlaces dentro de un texto se distinguen por algo más que el color */
main p a:not(.btn):not([class]), main li a:not(.btn):not([class]), main td a:not([class]) {text-decoration: underline; text-underline-offset: 2px;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {outline: 3px solid #1a73e8; outline-offset: 2px;}
img {max-width: 100%;}
hr {border-top-color: var(--borde);}
iframe {max-width: 100%;}
main {display: block; min-height: 30vh;}
body:not(.es-portada) main, .seccion-ayuntamiento main, .seccion-ciudad main {padding: 2rem 0 3rem;}
main > br:first-child {display: none;}
@media (min-width: 1200px) {.container {max-width: 1180px;}}

.saltar-contenido {position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; color: var(--rojo); padding: .6rem 1rem; font-weight: 700; border-radius: 0 0 8px 0;}
.saltar-contenido:focus {left: 0;}

/* ---------- 2. Cabecera y menú ---------- */
.barra-superior {background: var(--rojo-oscuro); color: #fff; font-size: .8rem; font-weight: 500;}
.barra-superior .container {display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 34px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px;}
.barra-superior a {color: #fff; opacity: .92;}
.barra-superior a:hover {opacity: 1;}
.barra-superior-izq, .barra-superior-der {display: flex; align-items: center; gap: .35rem 1.1rem; flex-wrap: wrap;}
/* En Turismo, la última entrada del menú («Web municipal») lleva a la web general: va separada con una línea */
@media (min-width: 1200px) {
    .seccion-turismo .nav-vera .navbar-nav .nav-item:last-child {margin-left: .5rem; padding-left: .5rem; border-left: 1px solid rgba(255, 255, 255, .4);}
}
/* El menú de Turismo tiene ocho entradas: en escritorio va algo más compacto para que quepa en una línea junto al logotipo y la lupa */
@media (min-width: 1200px) {
    .seccion-turismo .nav-vera .navbar-brand {flex: none; margin-right: .4rem; gap: .5rem;}
    .seccion-turismo .nav-vera .navbar-brand img {height: 36px;}
    .seccion-turismo .nav-vera-etiqueta {font-size: .72rem; letter-spacing: .08em; padding-left: .55rem;}
    .seccion-turismo .nav-vera .navbar-nav .nav-link {padding-left: .18rem; padding-right: .18rem; font-size: .84rem; letter-spacing: 0;}
    .seccion-turismo .nav-vera .navbar-nav .nav-item:last-child {margin-left: .3rem; padding-left: .3rem;}
    .seccion-turismo .nav-vera .nav-vera-buscar {margin-left: 0; width: 34px;}
}
@media (max-width: 1199.98px) {
    .seccion-turismo .nav-vera .navbar-nav .nav-item:last-child {margin-top: .4rem; padding-top: .4rem; border-top: 1px solid rgba(255, 255, 255, .3);}
}
.seccion-turismo .nav-vera .navbar-nav .nav-item:last-child .nav-link::before {content: "\f015"; font-family: FontAwesome; font-weight: 400; margin-right: .4rem;}
.barra-superior-tiempo {display: inline-flex; align-items: center; gap: .9rem;}
.barra-superior-tiempo:hover {text-decoration: none;}
@media (max-width: 767.98px) {.barra-superior-der {display: none;} .barra-superior .container {justify-content: center;}}

.nav-vera {background: var(--rojo); padding: .55rem 0; position: sticky; top: 0; z-index: 1030; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);}
.nav-vera .navbar-brand {display: flex; align-items: center; gap: .75rem; padding: 0; margin-right: 1rem;}
.nav-vera .navbar-brand img {height: 44px; width: auto;}
.nav-vera-etiqueta {color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; border-left: 1px solid rgba(255, 255, 255, .45); padding-left: .75rem;}
.nav-vera .nav-link {color: #fff !important; font-weight: 700; font-size: .92rem; padding: .55rem .8rem !important; border-radius: 8px; white-space: nowrap;}
.nav-vera .nav-link:hover, .nav-vera .nav-link.active {background: rgba(255, 255, 255, .14); text-decoration: none;}
.nav-vera .nav-link.active {box-shadow: inset 0 -2px 0 #fff;}
.nav-vera-botones {display: flex; align-items: center; gap: .5rem; order: 3; margin-left: auto;}
.nav-vera .navbar-toggler {color: #fff; border: 1px solid rgba(255, 255, 255, .6); font-size: .9rem; font-weight: 700; padding: .4rem .7rem; border-radius: 8px;}
.nav-vera-buscar {background: transparent; border: 0; color: #fff; width: 40px; height: 40px; border-radius: 8px; font-size: 1.05rem;}
.nav-vera-buscar:hover, .nav-vera-buscar[aria-expanded="true"] {background: rgba(255, 255, 255, .16);}
@media (min-width: 1200px) {.nav-vera-botones {margin-left: .5rem;}}
/* Móvil: logotipo, etiqueta de sección, lupa y menú caben en una sola línea */
@media (max-width: 575.98px) {
    .nav-vera .navbar-brand {gap: .5rem; margin-right: .5rem; min-width: 0;}
    .nav-vera .navbar-brand img {height: 38px;}
    .nav-vera-etiqueta {font-size: .7rem; letter-spacing: .08em; padding-left: .5rem;}
    .nav-vera-botones {gap: .25rem;}
    /* Las fotos flotantes dejaban el texto en una columna de pocas palabras */
    main img.float-left, main img.float-right, main img[style*="float"] {float: none !important; display: block; margin: 0 auto 1rem !important; max-width: min(100%, 280px) !important; height: auto;}
}
@media (max-width: 359.98px) {.nav-vera-etiqueta {display: none;}}
/* Con el menú plegado, la marca cede sitio (la etiqueta se recorta) antes de que los botones salten de línea */
@media (max-width: 1199.98px) {
    .nav-vera .navbar-brand {flex: 1 1 0; min-width: 0; overflow: hidden;}
    .nav-vera .navbar-brand img {flex: none;}
    .nav-vera-etiqueta {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .nav-vera-botones {flex: none;}
}
@media (max-width: 1199.98px) {
    .nav-vera .navbar-collapse {order: 4; flex-basis: 100%;}
    .nav-vera .navbar-nav {padding: .75rem 0 .25rem;}
    .nav-vera .nav-link {padding: .7rem .75rem !important;}
}
.badge-avisos {display: inline-block; background: #fff; color: var(--rojo); font-size: .72rem; font-weight: 800; line-height: 1; padding: .22em .6em; border-radius: 1rem; margin-left: .2rem; vertical-align: 1px;}

.buscador-nav {background: #fff; border-bottom: 1px solid var(--borde); box-shadow: 0 8px 20px rgba(0, 0, 0, .06);}
.buscador-nav .container {padding-top: 1rem; padding-bottom: 1rem;}
.buscador-form {display: flex; max-width: 640px; border-radius: 10px; box-shadow: var(--sombra); background: #fff;}
.buscador-nav .buscador-form {margin: 0 auto; border: 1px solid #8a8d94; box-shadow: none;}
.buscador-form input[type="search"] {flex: 1; min-width: 0; border: 0; background: transparent; padding: .85rem 1.1rem; font-size: 1rem; border-radius: 10px 0 0 10px; color: var(--tinta);}
.buscador-form input[type="search"]:focus, .buscador-form input[type="search"]:focus-visible {outline: 0;}
.buscador-form:focus-within {outline: 3px solid #1a73e8; outline-offset: 2px;}
.buscador-form button {border: 0; background: var(--rojo); color: #fff; font-weight: 700; padding: 0 1.5rem; border-radius: 0 10px 10px 0;}
.buscador-form button:hover {background: var(--rojo-oscuro);}

/* ---------- 3. Cabecera de página (interiores) ---------- */
.cabecera-pagina {background: var(--fondo-gris); border-bottom: 1px solid var(--borde); padding: 1.25rem 0 1.5rem;}
.cabecera-pagina h1 {margin: .35rem 0 0; font-size: 2rem; font-weight: 800;}
.cabecera-pagina h1::before {content: ""; display: block; width: 28px; height: 3px; background: var(--rojo); border-radius: 2px; margin-bottom: .6rem;}
.migas {list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; font-size: .85rem; color: var(--gris);}
.migas li + li::before {content: "›"; margin: 0 .5rem; color: #a3a6ad;}
.migas a {color: var(--gris); font-weight: 600;}
.migas a:hover {color: var(--rojo);}
.cabecera-pagina--foto {background-size: cover; background-position: center; position: relative; padding: 3.5rem 0 2rem; border: 0;}
.cabecera-pagina--foto::before {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 10, 14, .35), rgba(20, 10, 14, .78));}
.cabecera-pagina--foto .container {position: relative;}
.cabecera-pagina--foto h1, .cabecera-pagina--foto .migas, .cabecera-pagina--foto .migas a {color: #fff;}
.cabecera-pagina--foto .migas li + li::before {color: rgba(255, 255, 255, .7);}
.cabecera-pagina--foto h1::before {background: #fff;}
@media (max-width: 575.98px) {.cabecera-pagina h1 {font-size: 1.6rem;}}

/* Submenú de sección (Ayuntamiento y Ciudad): en móvil se desplaza en horizontal */
.subnav-vera {background: #fff; border-bottom: 1px solid var(--borde);}
.subnav-vera ul {list-style: none; display: flex; flex-wrap: wrap; margin: 0 -.75rem; padding: 0;}
.subnav-vera a {display: block; color: var(--texto); font-weight: 700; font-size: .9rem; padding: .85rem .75rem; border-bottom: 3px solid transparent; white-space: nowrap;}
.subnav-vera a:hover {color: var(--rojo); text-decoration: none;}
.subnav-vera a.active {color: var(--rojo); border-bottom-color: var(--rojo);}
@media (max-width: 991.98px) {
    .subnav-vera ul {flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
    .subnav-vera ul::-webkit-scrollbar {display: none;}
}

/* ---------- 4. Componentes de Bootstrap ---------- */
.btn {font-weight: 700; border-radius: 8px; padding: .55rem 1.1rem; font-size: .92rem;}
.btn-lg {padding: .75rem 1.5rem; font-size: 1rem; border-radius: 10px;}
.btn-sm {padding: .35rem .75rem; font-size: .82rem;}
.btn-primary, .btn-danger, .btn-asistente, .btn-primary:not(:disabled):not(.disabled):active {background: var(--rojo) !important; border-color: var(--rojo) !important; color: #fff !important;}
.btn-primary:hover, .btn-primary:focus, .btn-danger:hover, .btn-danger:focus, .btn-asistente:hover, .btn-asistente:focus {background: var(--rojo-oscuro) !important; border-color: var(--rojo-oscuro) !important; color: #fff !important; text-decoration: none;}
.btn-primary:disabled, .btn-primary.disabled {background: #8a8d94 !important; border-color: #8a8d94 !important; cursor: not-allowed;}
.btn-primary:focus, .btn-outline-primary:focus, .btn-danger:focus {box-shadow: 0 0 0 .2rem rgba(152, 26, 50, .3);}
.btn-outline-primary, .btn-outline-danger {color: var(--rojo); border-color: var(--rojo);}
.btn-outline-primary:hover, .btn-outline-danger:hover, .btn-outline-primary:not(:disabled):not(.disabled):active {background: var(--rojo); border-color: var(--rojo); color: #fff;}
.btn-secondary {background: #fff; border-color: #c9ccd3; color: var(--texto);}
.btn-secondary:hover, .btn-secondary:focus {background: var(--fondo-gris); border-color: #a9adb6; color: var(--tinta);}
.btn-light {background: #fff; border-color: #fff; color: var(--rojo);}
.btn-light:hover {background: var(--rojo-suave); border-color: var(--rojo-suave); color: var(--rojo-oscuro);}
.btn-link {color: var(--rojo);}
.btn-info, .btn-outline-info {background: #fff; border-color: var(--rojo); color: var(--rojo);}
.btn-info:hover, .btn-outline-info:hover {background: var(--rojo); border-color: var(--rojo); color: #fff;}

.card {border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: none; overflow: hidden;}
.card.shadow-sm, .card.shadow {box-shadow: var(--sombra) !important;}
.card-hover, a > .card, .card.position-relative {transition: box-shadow .2s ease, transform .2s ease;}
.card-hover:hover, a:hover > .card {box-shadow: var(--sombra-alta) !important;}
.card-header {background: var(--fondo-gris); border-bottom: 1px solid var(--borde); font-weight: 700; color: var(--tinta);}
.card-footer {background: var(--fondo-gris); border-top: 1px solid var(--borde);}
.card-title {color: var(--tinta); font-weight: 700;}
.card-title a {color: inherit;}
.card-title a:hover {color: var(--rojo);}
.card-img, .card-img-top {border-radius: 0;}
.card-img-overlay {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(20, 10, 14, .78));}
.card-img-overlay .card-title, .card-img-overlay .card-text {color: #fff;}
.card-block {padding: 1rem;}
.asistente-header, .card-aviso-view .card-header, .agenda-calendar-widget .card-header {background: var(--rojo) !important; color: #fff !important; border: 0;}
.asistente-header *, .card-aviso-view .card-header *, .agenda-calendar-widget .card-header * {color: #fff !important;}
.card-aviso-list {border-left: 4px solid var(--rojo);}

.alert {border-radius: 10px; border-width: 1px;}
.alert-info, .alert-secondary, .alert-light {background: var(--fondo-gris); border-color: var(--borde); color: var(--texto);}
.badge {font-weight: 700; border-radius: 6px; padding: .4em .65em;}
.badge-secondary, .badge-light {background: var(--fondo-gris); color: var(--texto); border: 1px solid var(--borde);}
.badge-asistente, .badge-grupo, .badge-primary, .badge-danger {background: var(--rojo) !important; color: #fff !important;}
.badge-grupo {display: inline-block; font-size: .78rem; padding: .25em .6em; border-radius: 6px; vertical-align: middle;}
.text-asistente, .text-primary, .text-danger {color: var(--rojo) !important;}
.text-info {color: var(--rojo) !important;}
.bg-light {background: var(--fondo-gris) !important;}
.border-danger {border-color: var(--rojo) !important;}
.rounded {border-radius: 10px !important;}
.img-thumbnail {border-radius: 10px; border-color: var(--borde);}
.lead {font-size: 1.12rem; color: var(--texto); font-weight: 400;}
.text-justify {text-align: left !important;}

.form-control, .custom-select, .search-slt {border-radius: 8px; border: 1px solid #8a8d94; min-height: 44px; color: var(--tinta);}
.form-control:focus, .custom-select:focus, .search-slt:focus {border-color: var(--rojo); box-shadow: 0 0 0 .2rem rgba(152, 26, 50, .18);}
label {font-weight: 600; color: var(--tinta); font-size: .92rem;}
.custom-control-input:checked ~ .custom-control-label::before {background: var(--rojo); border-color: var(--rojo);}
input[type="checkbox"], input[type="radio"] {accent-color: var(--rojo);}

.list-group-item {border-color: var(--borde);}
.list-group-item-action:hover, .list-group-item-action:focus, a.lista:hover, a.lista:focus {background: var(--rojo-suave); color: var(--rojo); text-decoration: none;}
.list-group-item.active, a.lista.active {background: var(--rojo); border-color: var(--rojo); color: #fff;}
.lista {border: 0; padding: .65rem .85rem; border-radius: 8px !important; font-weight: 600; color: var(--texto);}

.dropdown-menu {border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra-alta); padding: .4rem;}
.dropdown-item {border-radius: 6px; padding: .5rem .8rem; font-weight: 600; font-size: .92rem;}
.dropdown-item:hover, .dropdown-item:focus {background: var(--rojo-suave); color: var(--rojo);}
.dropdown-item.active, .dropdown-item:active {background: var(--rojo); color: #fff;}

.modal-content {border: 0; border-radius: var(--radio); box-shadow: var(--sombra-alta);}
.modal-header, .modal-footer {border-color: var(--borde);}
.nav-tabs .nav-link {font-weight: 700; color: var(--texto);}
.nav-tabs .nav-link.active {color: var(--rojo); border-bottom-color: #fff;}
.nav-pills .nav-link.active {background: var(--rojo);}
.table {color: var(--texto);}
.table thead th {border-bottom: 2px solid var(--borde); color: var(--tinta); font-size: .9rem;}
.table td, .table th {border-top-color: var(--borde);}
.embed-responsive, .map-container {border-radius: var(--radio); overflow: hidden;}
.map-container {padding-bottom: 56.25%; position: relative; height: 0;}
.map-container iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0;}
.blockquote-footer {color: var(--gris);}
.object-fit-cover {object-fit: cover;}

/* Paginación (pagination.php genera <ul class="pagination"><li><a>) */
ul.pagination {display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; width: 100%; list-style: none; padding: 0; margin: 1.5rem 0;}
ul.pagination li a, ul.pagination li span {display: block; min-width: 40px; padding: .45rem .7rem; text-align: center; font-weight: 700; font-size: .9rem; color: var(--texto); background: #fff; border: 1px solid var(--borde); border-radius: 8px;}
ul.pagination li a[href]:hover {background: var(--rojo-suave); border-color: var(--rojo); color: var(--rojo); text-decoration: none;}
ul.pagination li.active a {background: var(--rojo); border-color: var(--rojo); color: #fff;}
ul.pagination li.disabled a {color: #a3a6ad;}

.text-muted {color: var(--gris) !important;}
.text-warning {color: #b26a00 !important;}
#titulo-pagina:focus, #contenido:focus {outline: 0;}
@media (max-width: 575.98px) {
    /* en móvil el texto ocupa todo el ancho de la foto: velo uniforme para que se lea siempre */
    .portada::before {background: linear-gradient(180deg, rgba(20, 10, 14, .62), rgba(20, 10, 14, .5));}
    .portada-buscado {background: rgba(20, 10, 14, .35); border-radius: 10px; padding: .5rem .6rem;}
}

/* ---------- 5. Secciones y tarjetas ---------- */
.seccion {padding: 3.25rem 0;}
.seccion--ajustada {padding: 1rem 0;}
.seccion--gris {background: var(--fondo-gris);}
.seccion + .seccion:not(.seccion--gris):not(.seccion--ajustada) {padding-top: 2.25rem;}
.seccion-cabecera {display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;}
.seccion-cabecera h2 {font-size: 1.75rem; font-weight: 800; margin: 0;}
.seccion-cabecera h2::before {content: ""; display: block; width: 28px; height: 3px; background: var(--rojo); border-radius: 2px; margin-bottom: .8rem;}
.seccion-cabecera p {margin: .35rem 0 0; color: var(--gris);}
.seccion-cabecera > a {font-weight: 700; font-size: .92rem; white-space: nowrap;}

.icono {display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--rojo-suave); color: var(--rojo); font-size: 1.05rem;}

.banda-roja {display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; background: var(--rojo); color: #fff; border-radius: 16px; padding: 2.25rem 2.5rem; position: relative; overflow: hidden;}
.banda-roja::after {content: ""; position: absolute; right: -60px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none;}
.banda-roja > * {position: relative; z-index: 1;}
.banda-roja h2 {color: #fff; font-size: 1.6rem; font-weight: 800; margin: 0 0 .4rem;}
.banda-roja h2::before {content: ""; display: block; width: 28px; height: 3px; background: #fff; border-radius: 2px; margin-bottom: .8rem;}
.banda-roja p {margin: 0; max-width: 34rem; opacity: .95;}
.banda-roja--asistente {margin-bottom: 1.5rem;}
.banda-roja--asistente h2 {font-size: 1.3rem;}
.banda-roja--columna {flex-direction: column; align-items: flex-start;}
.vivelo-btns {display: flex; flex-wrap: wrap; gap: .6rem; max-width: none !important;}
.vivelo-btns a, a.vivelo-btn {display: inline-block; color: #fff; font-weight: 700; font-size: .92rem; border: 1px solid rgba(255, 255, 255, .65); border-radius: 2rem; padding: .5rem 1.15rem;}
.vivelo-btns a:hover, a.vivelo-btn:hover {background: #fff; color: var(--rojo); text-decoration: none;}
@media (max-width: 575.98px) {.banda-roja {padding: 1.75rem 1.5rem;}}

.intereses {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;}
.interes {display: flex; align-items: flex-start; gap: .85rem; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.15rem 1.1rem; color: var(--texto); transition: box-shadow .2s ease, border-color .2s ease;}
.interes:hover {text-decoration: none; color: var(--texto); border-color: var(--rojo); box-shadow: var(--sombra);}
.interes strong {display: block; color: var(--tinta); font-size: .95rem; line-height: 1.3;}
.interes span span {display: block; font-size: .82rem; color: var(--gris); line-height: 1.4; margin-top: .2rem;}
.interes span.interes-aviso {display: inline-block; background: var(--rojo); color: #fff; font-weight: 700; font-size: .72rem; border-radius: 1rem; padding: .1rem .6rem; margin-top: .45rem;}
@media (max-width: 991.98px) {.intereses {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 575.98px) {.intereses {grid-template-columns: 1fr;}}

/* ---------- 6. Portada (inicio y turismo) ---------- */
.portada {position: relative; background: #2a1118 center / cover no-repeat; color: #fff; min-height: 560px; display: flex; align-items: center; padding: 4rem 0 7rem;}
.portada::before {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 10, 14, .62) 0%, rgba(20, 10, 14, .28) 55%, rgba(20, 10, 14, .1) 100%);}
.portada .container {position: relative; z-index: 2;}
.portada h1 {color: #fff; font-size: 3.4rem; font-weight: 800; line-height: 1.05; margin: 0 0 1.4rem; text-shadow: 0 2px 16px rgba(0, 0, 0, .35);}
.portada h1 span {display: block; font-size: 1.75rem; font-weight: 500; margin-top: .5rem; letter-spacing: -.01em;}
.buscador-form--portada {max-width: 520px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);}
.buscador-form--portada input[type="search"] {padding: 1rem 1.2rem;}
.portada-buscado {margin: 1.1rem 0 0; font-size: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;}
.portada-buscado a {color: #fff; border: 1px solid rgba(255, 255, 255, .6); background: rgba(20, 10, 14, .3); border-radius: 2rem; padding: .25rem .8rem; font-weight: 600;}
.portada-buscado a:hover {background: #fff; color: var(--rojo); text-decoration: none;}
.portada-antetitulo {font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem;}
.portada-botones {display: flex; flex-wrap: wrap; gap: .7rem; margin: 0;}
.portada--video {min-height: 76vh; background-color: #000; overflow: hidden;}
.portada--video video {position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover;}
.portada--video::before {z-index: 1; background: linear-gradient(180deg, rgba(20, 10, 14, .25) 0%, rgba(20, 10, 14, .2) 40%, rgba(20, 10, 14, .7) 100%);}
.portada--video {align-items: flex-end; padding-bottom: 8rem;}
.portada--video h1 {font-size: 4rem;}
.video-controles {position: absolute; top: 1.25rem; right: 1.25rem; z-index: 3; display: flex; gap: .5rem;}
.video-controles button {width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .35); color: #fff;}
.video-controles button:hover {background: #fff; color: var(--rojo);}

.accesos {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: -3.5rem; position: relative; z-index: 3;}
.acceso {display: block; background: #fff; border-radius: var(--radio); border-top: 3px solid var(--rojo); box-shadow: var(--sombra); padding: 1.25rem 1.2rem 1.3rem; color: var(--texto); transition: box-shadow .2s ease, transform .2s ease;}
.acceso:hover {text-decoration: none; color: var(--texto); box-shadow: var(--sombra-alta); transform: translateY(-3px);}
.acceso strong {display: block; color: var(--tinta); margin: .85rem 0 .25rem; font-size: 1rem;}
.acceso > span:last-child {display: block; font-size: .84rem; color: var(--gris); line-height: 1.4;}
@media (max-width: 991.98px) {
    .accesos {grid-template-columns: repeat(2, 1fr);}
    .portada {min-height: 460px;}
    .portada h1, .portada--video h1 {font-size: 2.6rem;}
    .portada h1 span {font-size: 1.35rem;}
}
@media (max-width: 575.98px) {
    .accesos {grid-template-columns: 1fr; gap: .75rem;}
    .acceso {display: grid; grid-template-columns: 40px 1fr; column-gap: .9rem; align-items: center; padding: 1rem;}
    .acceso .icono {grid-row: 1 / span 2;}
    .acceso strong {margin: 0;}
    .portada {padding: 3rem 0 5.5rem;}
    .portada--video {min-height: 70vh;}
    .buscador-form button {padding: 0 1.1rem;}
}
@media (prefers-reduced-motion: reduce) {
    * {scroll-behavior: auto !important; transition: none !important; animation: none !important;}
}

/* ---------- 7. Bloques de portada ---------- */
.avisos-portada {display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; background: var(--rojo-suave); border-radius: 10px; padding: .6rem .75rem .6rem 1rem; font-size: .92rem;}
.avisos-portada-etiqueta {flex: none; font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;}
.avisos-portada .carousel {flex: 1; min-width: 0;}
.avisos-portada .carousel-item a {display: block; color: var(--tinta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.avisos-portada-flechas {flex: none; display: flex; gap: .25rem;}
.avisos-portada-flechas button {display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 0; color: var(--rojo); font-size: .7rem;}
.avisos-portada-flechas button:hover {background: var(--rojo); color: #fff;}
.avisos-portada-flechas a {display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: #fff; font-size: 1.1rem;}
.avisos-portada-flechas a:hover {background: var(--rojo); color: #fff; text-decoration: none;}
@media (max-width: 575.98px) {.avisos-portada-etiqueta {font-size: 0;} .avisos-portada-etiqueta .fa {font-size: 1rem;}}

.agenda-destacados {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;}
.agenda-destacado, .foto-tarjeta, .foto-destacada {position: relative; display: flex; align-items: flex-end; border-radius: var(--radio); overflow: hidden; background: #2a1118 center / cover no-repeat; color: #fff;}
.agenda-destacado {height: 240px;}
.agenda-destacado img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease;}
.agenda-destacado::after, .foto-tarjeta::after, .foto-destacada::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 10, 14, 0) 25%, rgba(20, 10, 14, .9) 78%);}
.agenda-destacado:hover img {transform: scale(1.04);}
.agenda-destacado:hover, .foto-tarjeta:hover, .foto-destacada:hover {color: #fff; text-decoration: none;}
.agenda-destacado-texto {position: relative; z-index: 1; padding: 1.25rem 1.4rem;}
.agenda-destacado-texto small {display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .3rem;}
.agenda-destacado-texto strong {font-size: 1.45rem; font-weight: 800; line-height: 1.2;}

.agenda-fichas {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;}
.agenda-ficha {display: block; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.15rem 1.2rem; color: var(--texto); transition: box-shadow .2s ease, border-color .2s ease;}
.agenda-ficha:hover {text-decoration: none; color: var(--texto); border-color: var(--rojo); box-shadow: var(--sombra);}
.agenda-ficha-fecha {display: block; color: var(--rojo); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .55rem;}
.agenda-ficha-fecha b {font-size: 1.7rem; letter-spacing: -.02em; line-height: 1;}
.agenda-ficha-fecha small {display: block; font-size: .7rem; font-weight: 700; color: var(--gris); margin-bottom: .1rem;}
.agenda-ficha strong {display: block; color: var(--tinta); line-height: 1.3; font-size: .98rem;}
.agenda-ficha > span:last-child {display: block; font-size: .83rem; color: var(--gris); margin-top: .5rem; line-height: 1.4;}
@media (max-width: 991.98px) {.agenda-fichas {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 575.98px) {.agenda-destacados, .agenda-fichas {grid-template-columns: 1fr;} .agenda-destacado {height: 200px;}}

.portada-duo {display: grid; grid-template-columns: 5fr 4fr; gap: 1.25rem;}
.saludo {display: flex; align-items: center; gap: 1.5rem; background: var(--fondo-gris); border-radius: 16px; padding: 2rem;}
.saludo img {flex: none; width: 116px; height: 116px; border-radius: 50%; object-fit: cover; object-position: top; background: #fff;}
.saludo-comillas {color: var(--rojo); font-size: 1.3rem; margin-bottom: .6rem;}
.saludo p {margin: 0 0 .8rem; font-size: .95rem;}
.saludo-firma {margin: 0 !important;}
.saludo-firma strong {display: block; color: var(--tinta);}
.saludo-firma span {font-size: .8rem; color: var(--gris);}
.saludo-firma a {font-weight: 700;}
.instalaciones-contador {border: 1px solid var(--borde); border-radius: 16px; padding: 1.6rem 1.6rem 1.4rem;}
.instalaciones-contador h2 {font-size: 1.1rem; margin: 0 0 1rem;}
.instalaciones-contador-rejilla {display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;}
.instalaciones-contador-rejilla a {display: block; background: var(--rojo-suave); border-radius: 10px; padding: .7rem .9rem; color: var(--tinta); font-size: .85rem; font-weight: 600;}
.instalaciones-contador-rejilla a:hover {background: var(--rojo); color: #fff; text-decoration: none;}
.instalaciones-contador-rejilla b {display: block; color: var(--rojo); font-size: 1.7rem; font-weight: 800; line-height: 1.15;}
.instalaciones-contador-rejilla a:hover b {color: #fff;}
@media (max-width: 991.98px) {.portada-duo {grid-template-columns: 1fr;}}
@media (max-width: 575.98px) {.saludo {flex-direction: column; align-items: flex-start; padding: 1.5rem;}}

.noticias-rejilla {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;}
.noticia {display: block; color: var(--texto);}
.noticia:hover {text-decoration: none; color: var(--texto);}
.noticia img {width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radio); background: var(--fondo-gris); margin-bottom: .9rem;}
.noticia small {display: block; color: var(--rojo); font-weight: 700; font-size: .75rem;}
.noticia strong {display: block; color: var(--tinta); font-size: 1.05rem; line-height: 1.3; margin: .25rem 0 .4rem;}
.noticia:hover strong {color: var(--rojo);}
.noticia > span {display: block; font-size: .87rem; color: var(--gris); line-height: 1.5;}
.noticia em {display: inline-block; font-style: normal; font-weight: 700; font-size: .85rem; color: var(--rojo); margin-top: .6rem;}
@media (max-width: 767.98px) {.noticias-rejilla {grid-template-columns: 1fr;}}

/* ---------- 8. Páginas interiores ---------- */
.content-page-container {background: #fff; max-width: 960px; margin: 0 auto;}
.content-page-container h1, .content-page-container > h2:first-child {font-size: 1.6rem;}
.content-page-container table {width: 100%; margin-bottom: 1rem; border: 1px solid var(--borde);}
.content-page-container table th, .content-page-container table td {padding: .7rem; vertical-align: top; border-top: 1px solid var(--borde);}
.intro h2 {font-weight: 800; margin-bottom: 1.25rem;}
.intro h2.text-center::after {content: ""; display: block; width: 28px; height: 3px; background: var(--rojo); border-radius: 2px; margin: .7rem auto 0;}
.noticias, .features-clean, .features-boxed, .team-grid, .map-clean {padding: 0;}
.news-content > p:first-child {display: inline;}
.postmeta {font-size: .85rem; color: var(--gris);}
main .col-md-9 p, main .card-text {line-height: 1.7;}
main .col-md-9 > h2, main .col-md-9 > #hmax > h2 {font-size: 1.5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--borde); margin-bottom: 1.25rem;}
.error-vera {text-align: center; padding: 2rem 0; max-width: 640px; margin: 0 auto;}
.error-vera .error-numero {display: block; font-size: 6rem; font-weight: 800; color: var(--rojo); line-height: 1;}
.error-vera .buscador-form {margin: 1.5rem auto; border: 1px solid var(--borde);}
span.error {font-size: 1rem;}

/* Accesos en caja (E-Gobierno y páginas que usan .features-boxed) */
.features-boxed .features, .features-clean .features {display: flex; flex-wrap: wrap;}
.features-boxed .item {display: flex; margin-bottom: 1.25rem;}
.features-boxed .item > a {display: flex; width: 100%; color: inherit;}
.features-boxed .item > a:hover {text-decoration: none;}
.features-boxed .box {flex: 1; position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: .9rem; align-content: start; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.15rem 1.1rem; text-align: left; transition: box-shadow .2s ease, border-color .2s ease;}
.features-boxed a:hover .box, .features-boxed .box:hover {border-color: var(--rojo); box-shadow: var(--sombra);}
.features-boxed .box .icon {grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--rojo-suave); color: var(--rojo); font-size: 1.05rem;}
.features-boxed .box .name {grid-column: 2; font-size: .98rem; margin: 0; color: var(--tinta); align-self: center;}
.features-boxed .box .description {grid-column: 2; font-size: .84rem; color: var(--gris); margin: .25rem 0 0; line-height: 1.4;}
.features-boxed .item-disabled .box {background: var(--fondo-gris); border-style: dashed;}
.features-boxed .item-disabled .box:hover {border-color: var(--borde); box-shadow: none;}
.features-boxed .item-disabled .icon {background: #e9eaee; color: #8a8d94;}
.features-boxed .item-disabled .name, .features-boxed .item-disabled .description {color: #8a8d94;}

/* Servicios de Gobierno electrónico: tarjetas grandes, distintas de los accesos de «Otros intereses» */
.servicios {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin: 1.5rem 0 1rem;}
.servicio {display: flex; flex-direction: column; background: var(--rojo); color: #fff; border-radius: 16px; padding: 1.6rem 1.5rem 1.4rem; min-height: 230px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;}
a.servicio:hover {background: var(--rojo-oscuro); color: #fff; text-decoration: none; transform: translateY(-4px); box-shadow: var(--sombra-alta);}
.servicio-icono {display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .16); font-size: 1.4rem; margin-bottom: 1.1rem;}
.servicio strong {font-size: 1.15rem; font-weight: 800; line-height: 1.25; margin-bottom: .4rem;}
.servicio > span:not(.servicio-icono) {font-size: .88rem; line-height: 1.45; opacity: .92;}
.servicio em {font-style: normal; font-weight: 700; font-size: .88rem; margin-top: auto; padding-top: 1rem;}
.servicio--inactivo {background: #fff; color: var(--gris); border: 1px dashed #c9ccd3;}
.servicio--inactivo .servicio-icono {background: var(--fondo-gris); color: #8a8d94;}
.servicio--inactivo strong {color: var(--texto);}
.servicio--inactivo em {font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris);}
@media (max-width: 991.98px) {.servicios {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 479.98px) {.servicios {grid-template-columns: 1fr;} .servicio {min-height: 0;}}

/* Farmacias de guardia */
.guardia {max-width: 900px; margin: 0 auto;}
.guardia-hoy {display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; background: var(--rojo); color: #fff; border-radius: 16px; padding: 2rem 2.25rem; margin-bottom: 1rem; position: relative; overflow: hidden;}
.guardia-hoy::after {content: ""; position: absolute; right: -60px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none;}
.guardia-hoy > * {position: relative; z-index: 1;}
.guardia-cruz {display: flex; align-items: center; justify-content: center; flex: none; width: 76px; height: 76px; border-radius: 18px; background: #fff; color: #1f8a4c; font-size: 2.4rem;}
.guardia-datos {flex: 1; min-width: 240px;}
.guardia-datos h2 {color: #fff; font-size: 1.7rem; font-weight: 800; margin: 0 0 .6rem;}
.guardia-datos p {margin: 0 0 .2rem; opacity: .95;}
.guardia-etiqueta {font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4rem !important;}
.guardia-botones {display: flex; flex-direction: column; gap: .6rem;}
.btn-outline-light:hover {color: var(--rojo);}
.guardia-titulo, .titulo-grupo {font-size: 1.25rem; font-weight: 800; margin: 2.25rem 0 1rem;}
.guardia-titulo::before, .titulo-grupo::before, .texto-pagina h2::before {content: ""; display: block; width: 28px; height: 3px; background: var(--rojo); border-radius: 2px; margin-bottom: .7rem;}
.guardia-proximas {list-style: none; margin: 0; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;}
.guardia-proximas li {display: grid; grid-template-columns: 190px 1fr auto; gap: 1rem; align-items: center; padding: .95rem 1.25rem; font-size: .92rem;}
.guardia-proximas li + li {border-top: 1px solid var(--borde);}
.guardia-proximas strong {color: var(--tinta);}
.guardia-fechas {color: var(--rojo); font-weight: 700;}
.guardia-proximas a {font-weight: 700; white-space: nowrap;}
.nota {font-size: .85rem; color: var(--gris); background: var(--fondo-gris); border-radius: 10px; padding: .8rem 1rem; margin: 1.5rem 0 0;}
@media (max-width: 767.98px) {
    .guardia-hoy {padding: 1.5rem;}
    .guardia-botones {flex-direction: row; flex-wrap: wrap; width: 100%;}
    .guardia-proximas li {grid-template-columns: 1fr; gap: .25rem;}
}

/* Páginas de texto con ficha lateral (El Pleno) */
.pagina-duo {display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; align-items: start; margin-top: 2.25rem;}
.texto-pagina p, .texto-pagina li {line-height: 1.75;}
.texto-pagina h2 {font-size: 1.3rem; font-weight: 800; margin: 2rem 0 1rem;}
.lista-marcada {list-style: none; margin: 0; padding: 0;}
.lista-marcada li {position: relative; padding: 0 0 .9rem 2rem;}
.lista-marcada li::before {content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: .25rem; width: 22px; height: 22px; border-radius: 50%; background: var(--rojo-suave); color: var(--rojo); font-size: .7rem; display: flex; align-items: center; justify-content: center;}
.ficha-lateral {background: var(--fondo-gris); border-radius: 16px; padding: 1.6rem; font-size: .92rem; position: sticky; top: 90px;}
.ficha-lateral h2 {font-size: 1.05rem; font-weight: 800; margin: 0 0 .9rem;}
.ficha-lateral h2 .fa {color: var(--rojo); margin-right: .3rem;}
.ficha-lateral a {font-weight: 700;}
.ficha-lateral p:last-child {margin-bottom: 0;}
.meses {display: flex; flex-wrap: wrap; gap: .4rem;}
.meses span {background: #fff; border: 1px solid var(--borde); border-radius: 2rem; padding: .2rem .75rem; font-weight: 700; color: var(--rojo); font-size: .82rem;}
@media (max-width: 991.98px) {.pagina-duo {grid-template-columns: 1fr; gap: 1.5rem;} .ficha-lateral {position: static;}}
/* Pasos numerados, apartados desplegables y página de wifi */
.pasos {list-style: none; counter-reset: paso; margin: 0 0 1.25rem; padding: 0;}
.pasos li {counter-increment: paso; position: relative; padding: .35rem 0 1rem 3.2rem; min-height: 2.6rem;}
.pasos li::before {content: counter(paso); position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--rojo); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;}
.nota-suave {background: var(--rojo-suave); border-radius: 10px; padding: .8rem 1rem; font-size: .92rem;}
.desplegable {border: 1px solid var(--borde); border-radius: 10px; background: #fff; margin-bottom: .5rem; padding: 0 1.15rem;}
.desplegable summary {cursor: pointer; font-weight: 700; color: var(--tinta); padding: .9rem 1.5rem .9rem 0; position: relative; list-style: none;}
.desplegable summary::-webkit-details-marker {display: none;}
.desplegable summary::after {content: "\f107"; font-family: FontAwesome; position: absolute; right: 0; top: .85rem; color: var(--rojo); font-size: 1.1rem;}
.desplegable[open] summary::after {content: "\f106";}
.desplegable[open] {padding-bottom: .5rem;}
.desplegable[open] summary {border-bottom: 1px solid var(--borde); margin-bottom: .9rem;}
.desplegable p, .desplegable li {font-size: .93rem;}
.wifi-puntos, .wifi-condiciones {margin-top: 3rem; scroll-margin-top: 90px;}
.wifi-puntos > h2, .wifi-condiciones > h2 {font-size: 1.5rem; margin-bottom: .4rem;}
.wifi-rejilla {display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem;}
.wifi-lista {list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff;}
.wifi-lista li {display: flex; align-items: stretch; border-bottom: 1px solid var(--borde);}
.wifi-lista li:last-child {border-bottom: 0;}
.wifi-lista button, .wifi-lista a.wifi-sin-mapa {flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: .75rem .9rem; font: inherit; font-size: .92rem; font-weight: 600; color: var(--tinta); cursor: pointer; text-decoration: none;}
.wifi-lista button .fa, .wifi-lista a.wifi-sin-mapa .fa {color: var(--rojo); margin-right: .45rem;}
.wifi-lista button:hover, .wifi-lista button.activo, .wifi-lista a.wifi-sin-mapa:hover {background: var(--rojo-suave); color: var(--rojo);}
.wifi-lista li > a:not(.wifi-sin-mapa) {flex: none; width: 46px; display: flex; align-items: center; justify-content: center; color: var(--rojo); border-left: 1px solid var(--borde); text-decoration: none;}
.wifi-lista li > a:not(.wifi-sin-mapa):hover {background: var(--rojo); color: #fff;}
.wifi-mapa {height: 560px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: var(--fondo-gris);}
@media (max-width: 991.98px) {.wifi-rejilla {grid-template-columns: minmax(0, 1fr);} .wifi-lista {max-height: 320px;} .wifi-mapa {height: 420px;}}

/* Entidades municipales y aviso de «sin contenido» */
.vacio {text-align: center; max-width: 560px; margin: 1.5rem auto; padding: 2.5rem 1.5rem; border: 1px dashed #c9ccd3; border-radius: 16px;}
.vacio-icono {display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--rojo-suave); color: var(--rojo); font-size: 1.6rem; margin-bottom: 1rem;}
.vacio h2 {font-size: 1.3rem; font-weight: 800;}
.vacio p {color: var(--gris);}
.vacio p:last-child {margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;}
.entes {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;}
.ente {display: flex; gap: 1.1rem; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.35rem;}
.ente > img {flex: none; width: 72px; height: 72px; object-fit: contain;}
.ente h3 {font-size: 1.05rem; margin: 0 0 .2rem;}
.ente-tipo {font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rojo); margin: 0 0 .5rem;}
.ente p {font-size: .92rem; margin-bottom: .6rem;}
.ente-documentos {list-style: none; margin: 0; padding: 0; font-size: .88rem;}
.ente-documentos a {font-weight: 700;}
@media (max-width: 767.98px) {.entes {grid-template-columns: 1fr;}}

/* Áreas municipales */
.areas-indice {background: var(--fondo-gris); border-radius: 16px; padding: 1.25rem; margin-bottom: 1.5rem;}
.areas-buscar {position: relative; max-width: 30rem;}
.areas-buscar .fa {position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--gris);}
.areas-buscar input {padding-left: 2.6rem; border-radius: 2rem; height: 2.9rem;}
.areas-indice ul {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem;}
.areas-indice li a {display: inline-block; background: #fff; border: 1px solid var(--borde); border-radius: 2rem; padding: .4rem .95rem; font-weight: 700; font-size: .9rem; color: var(--tinta); text-decoration: none;}
.areas-indice li a:hover, .areas-indice li a:focus {border-color: var(--rojo); color: var(--rojo); text-decoration: none;}
.areas-vacio {margin: 1rem 0 0;}
.area {scroll-margin-top: 6rem;}
.area[hidden] {display: none;}
.area:target {border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-suave);}
.area {display: grid; grid-template-columns: 260px 1fr; background: #fff; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; margin-bottom: 1.25rem;}
.area-foto {width: 100%; height: 100%; min-height: 200px; max-height: 320px; object-fit: cover; background: var(--fondo-gris);}
.area-foto--vacia {display: flex; align-items: center; justify-content: center; background: var(--rojo-suave); color: var(--rojo); font-size: 2.5rem;}
.area-cuerpo {padding: 1.5rem 1.75rem;}
.area h2 {font-size: 1.4rem; font-weight: 800; margin: 0 0 .3rem;}
.area-concejal {color: var(--gris); font-size: .92rem; margin: 0 0 1rem;}
.area-concejal strong {color: var(--tinta);}
.area-datos {list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.5rem; font-size: .93rem;}
.area-datos .fa {color: var(--rojo); margin-right: .25rem;}
.area-datos a {font-weight: 600; overflow-wrap: anywhere;}
.area-horario {font-size: .9rem; margin-bottom: .75rem;}
.area-horario summary {cursor: pointer; font-weight: 700; color: var(--tinta); display: inline-block;}
.area-horario summary::after {content: "\f107"; font-family: FontAwesome; margin-left: .4rem; color: var(--rojo);}
.area-horario[open] summary::after {content: "\f106";}
.area-horario summary .fa {color: var(--rojo); margin-right: .25rem;}
.area-horario ul {list-style: none; margin: .5rem 0 0; padding: .75rem 1rem; background: var(--fondo-gris); border-radius: 10px; columns: 2; column-gap: 2rem;}
.area-accesos {display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--borde);}
.area-accesos a {display: inline-flex; align-items: center; gap: .45rem; background: var(--rojo-suave); color: var(--rojo); font-weight: 700; font-size: .88rem; border-radius: 2rem; padding: .4rem 1rem;}
.area-accesos a:hover {background: var(--rojo); color: #fff; text-decoration: none;}
.filtro-area {background: var(--rojo-suave); border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1.25rem; font-size: .95rem;}
.filtro-area .fa-filter {color: var(--rojo); margin-right: .3rem;}
.filtro-area a {font-weight: 700; margin-left: .75rem; white-space: nowrap;}
@media (max-width: 767.98px) {
    .area {grid-template-columns: 1fr;}
    .area-foto {max-height: 180px; min-height: 140px;}
    .area-datos {grid-template-columns: 1fr;}
    .area-horario ul {columns: 1;}
}

/* Webcams */
.camaras {list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;}
.camara {display: block; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; color: var(--texto); transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;}
.camara:hover {text-decoration: none; color: var(--texto); border-color: var(--rojo); box-shadow: var(--sombra-alta); transform: translateY(-3px);}
.camara-foto {position: relative; display: block; background: #1b1c20;}
.camara-foto img {display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;}
.camara-directo {position: absolute; left: .6rem; top: .6rem; background: rgba(20, 10, 14, .75); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 2rem; padding: .2rem .6rem;}
.camara-directo .fa {color: #ff4d5e; font-size: .55rem; vertical-align: 1px; margin-right: .2rem;}
.camara strong {display: block; color: var(--tinta); padding: .85rem 1rem 0; line-height: 1.3;}
.camara-ver {display: block; color: var(--rojo); font-weight: 700; font-size: .85rem; padding: .25rem 1rem 1rem;}
.mapa-camaras {height: 420px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde);}
@media (max-width: 991.98px) {.camaras {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 479.98px) {.camaras {grid-template-columns: 1fr;}}

/* Estado de las playas */
.playa-estado {display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem;}
.playa-estado-dato {display: inline-flex; align-items: flex-start; gap: .5rem; margin: 0; padding: .55rem .9rem; border-radius: 10px; font-size: .93rem; background: var(--fondo-gris); color: var(--texto);}
.playa-estado--ok {background: #e6f4ea; color: #14532d;}
.playa-estado--aviso {background: #fff4d6; color: #6b4a00;}
.playa-estado--peligro {background: #fde4e6; color: #8a1220;}
.playa-estado-dato .fa {margin-top: .2rem;}
/* Portada de Turismo: mensaje centrado sobre el vídeo, franja «Hoy en Vera» y mosaicos de fotos (distinta de la portada general) */
.portada-turismo {background: #5d0f20; color: #fff;}
/* El vídeo llena la pantalla hasta la franja «Hoy en Vera» (menú 59 px + franja 51 px), sin dejar un trozo en blanco debajo */
.portada-turismo-video {min-height: 320px; height: min(calc(100vh - 110px), 56.25vw); height: min(calc(100svh - 110px), 56.25vw); padding: 0; display: block;}
.portada-turismo-video::before {background: linear-gradient(180deg, rgba(20, 10, 14, .25) 0%, rgba(20, 10, 14, 0) 22%);}
.portada-turismo-pie {position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: linear-gradient(180deg, rgba(20, 10, 14, 0) 0%, rgba(20, 10, 14, .78) 100%); padding-top: 4rem;}
.portada-turismo-pie h1, .portada-turismo-pie .portada-antetitulo {text-shadow: 0 2px 14px rgba(0, 0, 0, .5);}
.portada-turismo-pie .container {display: flex; justify-content: flex-end; text-align: right; padding-top: 1.75rem; padding-bottom: 1.75rem;}
.portada-turismo-pie h1 {color: #fff; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 .4rem;}
.portada-turismo-pie .portada-antetitulo {letter-spacing: .3em; margin-bottom: .5rem; opacity: .9;}
.hoy-en-vera {background: #5d0f20; font-size: .92rem;}
.hoy-en-vera .container {display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.75rem; padding-top: .85rem; padding-bottom: .85rem;}
.hoy-en-vera-titulo {text-transform: uppercase; letter-spacing: .14em; font-size: .75rem;}
.hoy-en-vera a {color: #fff; font-weight: 600;}
.hoy-en-vera a:hover {color: #fff; text-decoration: underline;}
.hoy-en-vera .fa {margin-right: .3rem; opacity: .85;}
.hoy-en-vera-evento {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
.organiza-iconos {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .85rem;}
.organiza-iconos a {display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem; color: var(--tinta); text-decoration: none !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.organiza-iconos a:hover {border-color: var(--rojo); box-shadow: var(--sombra); transform: translateY(-3px);}
.organiza-iconos strong {font-size: .98rem; line-height: 1.25;}
.vivelo-fila {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem;}
.vivelo-fila h2 {font-size: 1.75rem; font-weight: 800; margin: 0;}
.vivelo-fila h2::before {content: ""; display: block; width: 28px; height: 3px; background: var(--rojo); border-radius: 2px; margin-bottom: .8rem;}
.vivelo-fila p {margin: .35rem 0 0; color: var(--gris);}
.vivelo-fila ul {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem;}
.vivelo-fila li a {display: inline-flex; align-items: center; gap: .5rem; border: 2px solid var(--rojo); color: var(--rojo); font-weight: 700; border-radius: 999px; padding: .55rem 1.2rem; text-decoration: none !important; transition: background .15s ease, color .15s ease;}
.vivelo-fila li a:hover {background: var(--rojo); color: #fff;}
@media (max-width: 1199.98px) {.organiza-iconos {grid-template-columns: repeat(3, minmax(0, 1fr));}}
@media (max-width: 575.98px) {.organiza-iconos {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (prefers-reduced-motion: reduce) {.organiza-iconos a {transition: none;} .organiza-iconos a:hover {transform: none;}}
.playas-portada {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;}
.playas-portada .foto-tarjeta {height: 320px; border-radius: 16px;}
.mosaico {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 1rem;}
.mosaico .foto-tarjeta {height: auto; border-radius: 16px;}
.mosaico .foto-tarjeta:first-child {grid-column: span 2; grid-row: span 2;}
.mosaico .foto-tarjeta:first-child strong {font-size: 1.9rem;}
.playas-portada .foto-tarjeta > span, .mosaico .foto-tarjeta > span {position: relative; z-index: 1;}
.playas-portada .foto-tarjeta strong, .mosaico .foto-tarjeta strong {display: block;}
.playas-portada .foto-tarjeta small, .mosaico .foto-tarjeta small {display: block; font-size: .88rem; margin-top: .3rem; opacity: .92; line-height: 1.35;}
@media (max-width: 991.98px) {
    .playas-portada {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .playas-portada .foto-tarjeta {height: 300px;}
    .mosaico {grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px;}
}
@media (max-width: 575.98px) {
    .playas-portada .foto-tarjeta {height: 220px;}
    .mosaico {grid-auto-rows: 170px;}
    .mosaico .foto-tarjeta:first-child strong {font-size: 1.4rem;}
    .hoy-en-vera .container {gap: .25rem 1.25rem; font-size: .85rem;}
    .hoy-en-vera-titulo {flex-basis: 100%;}
}
/* Fotos flotantes dentro del texto: siempre con aire alrededor (algunas páginas antiguas no lo traían) y sin comerse el párrafo */
@media (min-width: 576px) {
    main img.float-left {margin: .3rem 1.75rem 1rem 0; max-width: 45%; height: auto;}
    main img.float-right {margin: .3rem 0 1rem 1.75rem; max-width: 45%; height: auto;}
}
/* Organiza tu viaje (página propia): tarjetas a tres columnas */
.organiza-pagina {padding-top: 2rem;}
.organiza-pagina .organiza-rejilla {grid-template-columns: repeat(3, 1fr); gap: 1.25rem;}
.organiza-pagina .organiza-tarjeta strong, .seccion--gris .organiza-tarjeta strong {font-size: 1.1rem; font-weight: 800;}
.organiza-pagina .organiza-tarjeta span, .seccion--gris .organiza-tarjeta span {font-size: .9rem;}
.organiza-pagina .organiza-tarjeta img, .seccion--gris .organiza-tarjeta img {aspect-ratio: 16 / 9;}
@media (max-width: 767.98px) {.organiza-pagina .organiza-rejilla, .seccion--gris .organiza-rejilla {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 479.98px) {.organiza-pagina .organiza-rejilla, .seccion--gris .organiza-rejilla {grid-template-columns: 1fr;}}
/* Asistente de visita: fases arriba y un panel por paso */
.asistente {padding-top: 2rem; max-width: 960px;}
.asistente-fases {list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; gap: .35rem; counter-reset: fase;}
.asistente-fases li {flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--gris); text-align: center; position: relative;}
.asistente-fases li::before {content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--borde); z-index: 0;}
.asistente-fases li:first-child::before {display: none;}
.asistente-fases li.hecha::before, .asistente-fases li.actual::before {background: var(--rojo);}
.asistente-fases li span {position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 3px solid var(--borde); color: var(--gris);}
.asistente-fases li.hecha span {background: var(--rojo); border-color: var(--rojo); color: #fff;}
.asistente-fases li.actual {color: var(--tinta);}
.asistente-fases li.actual span {border-color: var(--rojo); color: var(--rojo);}
.asistente-panel {background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 2rem; box-shadow: var(--sombra);}
.asistente-panel h2 {font-size: 1.45rem; font-weight: 800; margin: 0 0 .75rem;}
.asistente-panel h2 label {margin: 0;}
.asistente-panel legend {font-size: 1rem; font-weight: 700; margin-bottom: .6rem;}
.asistente-panel legend h2 {margin-bottom: .4rem;}
.asistente-ayuda {color: var(--gris); margin-bottom: 1.25rem;}
.asistente-opciones {display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem;}
.asistente-opciones label {margin: 0; cursor: pointer; position: relative;}
.asistente-opciones input {position: absolute; opacity: 0; inset: 0; cursor: pointer;}
.asistente-opciones span {display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border: 2px solid var(--borde); border-radius: var(--radio); font-weight: 700; color: var(--tinta); transition: border-color .15s ease, background .15s ease;}
.asistente-opciones span .fa {color: var(--rojo); width: 1.2rem; text-align: center;}
.asistente-opciones label:hover span {border-color: var(--rojo);}
.asistente-opciones input:checked + span {border-color: var(--rojo); background: var(--rojo-suave); color: var(--rojo);}
.asistente-opciones input:focus-visible + span {outline: 3px solid #1a73e8; outline-offset: 2px;}
.asistente-campos {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
.asistente-campos label {font-weight: 700; font-size: .95rem;}
.asistente-botones {display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--borde);}
.asistente-destacado {display: flex; gap: .8rem; align-items: flex-start; background: var(--fondo-gris); border-radius: var(--radio); padding: 1rem 1.25rem; font-size: 1.05rem;}
.asistente-destacado .fa {color: var(--rojo); font-size: 1.3rem; margin-top: .15rem;}
.asistente-enlaces {display: flex; flex-wrap: wrap; gap: .5rem;}
.asistente-resumen {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; margin: 0 0 1.25rem;}
.asistente-resumen > div {background: var(--fondo-gris); border-radius: var(--radio); padding: .85rem 1rem;}
.asistente-resumen dt {font-size: .8rem; font-weight: 700; color: var(--gris); margin-bottom: .15rem;}
.asistente-resumen dt .fa {color: var(--rojo); margin-right: .25rem;}
.asistente-resumen dd {margin: 0; font-weight: 800; color: var(--tinta);}
.asistente-panel .list-group-item {border-color: var(--borde);}
.asistente-panel label.list-group-item {cursor: pointer; margin: 0;}
.asistente-panel .card-header.asistente-header {border-radius: 12px 12px 0 0;}
.asistente-panel .card {border-radius: 12px; overflow: hidden;}
@media (max-width: 767.98px) {
    .asistente-panel {padding: 1.25rem;}
    .asistente-fases li {font-size: 0;}
    .asistente-fases li.actual {font-size: .78rem;}
    .asistente-fases li span {font-size: .85rem;}
    .asistente-campos {grid-template-columns: minmax(0, 1fr);}
    .asistente-botones .btn {flex: 1 1 auto;}
}
/* Playas: menú de la sección, ficha de cada playa, portada e información */
.playa-pagina {padding-top: 2rem;}
.playas-nav {margin-bottom: 1.75rem;}
.playas-nav-docs {margin-left: auto; border-color: var(--rojo) !important; color: var(--rojo) !important;}
.playas-nav-docs:hover {background: var(--rojo) !important; color: #fff !important;}
.playa-rejilla {display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 2.5rem; align-items: start;}
.playa-descripcion {line-height: 1.75;}
.playa-descripcion--portada {max-width: 60rem;}
.playa-descripcion > p:first-child, .playa-descripcion > div:first-child {font-size: 1.08rem;}
.playa-imagen-texto {max-width: min(100%, 420px); height: auto; border: 1px solid var(--borde); border-radius: 10px;}
.playa-aviso {display: flex; gap: .75rem; align-items: flex-start;}
.playa-aviso .fa {margin-top: .25rem;}
.playa-aviso p {margin: 0; display: inline;}
.playa-principal .titulo-grupo:first-of-type {margin-top: 2.25rem;}
.playa-servicios {columns: 2; column-gap: 2rem;}
.playa-servicios li {break-inside: avoid;}
.playa-pictogramas {list-style: none; margin: 1rem 0 0; padding: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; background: var(--fondo-gris); border-radius: var(--radio);}
.playa-pictogramas img {display: block; width: 48px; height: 48px; border-radius: 6px;}
.playa-lateral {display: grid; gap: 1rem; position: sticky; top: 90px;}
.playa-caja {border: 1px solid var(--borde); border-radius: 16px; padding: 1.25rem; background: #fff;}
.playa-caja h2 {font-size: 1.05rem; font-weight: 800; margin: 0 0 .9rem;}
.playa-caja h2 .fa {color: var(--rojo); margin-right: .35rem;}
.playa-caja p {font-size: .92rem;}
.playa-webcam {display: block; text-decoration: none !important;}
.playa-webcam img {display: block; width: 100%; height: 130px; object-fit: cover; border-radius: 10px; margin-bottom: .75rem;}
.playa-sello {float: right; width: 62px; height: auto; margin: 0 0 .5rem .75rem; border-radius: 6px;}
.playa-distintivos {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem;}
.playa-distintivos li {background: var(--rojo-suave); color: var(--rojo); font-weight: 700; font-size: .82rem; border-radius: 999px; padding: .25rem .75rem;}
.galeria-playa .titulo-grupo {margin-top: 2.25rem;}
.playas-fuera-temporada {margin: 0 0 1.25rem;}
.playas-tarjetas {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem;}
.playas-tarjetas a {display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; color: var(--texto); text-decoration: none !important; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;}
.playas-tarjetas a:hover {border-color: var(--rojo); box-shadow: var(--sombra); transform: translateY(-3px);}
.playas-tarjetas img {width: 100%; height: 190px; object-fit: cover;}
.playas-tarjeta-cuerpo {display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 1.1rem 1.2rem 1.2rem; font-size: .9rem; color: var(--gris);}
.playas-tarjeta-cuerpo strong {font-size: 1.15rem; font-weight: 800; color: var(--tinta);}
.playas-tarjeta-estado {display: flex; flex-wrap: wrap; gap: .4rem;}
.playas-tarjeta-estado .playa-estado-dato {padding: .25rem .65rem; font-size: .8rem;}
.playas-tarjeta-ver {margin-top: auto; padding-top: .5rem; font-weight: 700; color: var(--rojo);}
.playa-info-indice {list-style: none; margin: 0 0 .5rem; padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; background: var(--fondo-gris); border-radius: var(--radio);}
.playa-info-indice a {font-weight: 700;}
.playa-info {max-width: 60rem; scroll-margin-top: 90px; line-height: 1.75;}
.playa-info ol {padding-left: 1.25rem;}
.playa-info li {margin-bottom: .4rem;}
/* Ficha de monumento, museo o instalación (ficha_instalacion.php): usa la misma rejilla que la ficha de playa */
.ficha-volver {margin: 0 0 1.25rem; font-weight: 700;}
.ficha-volver a {text-decoration: none;}
.ficha-etiquetas {display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem;}
.ficha-etiquetas > * {display: inline-flex; align-items: center; gap: .35rem; background: var(--rojo); color: #fff; font-weight: 700; font-size: .82rem; border-radius: 999px; padding: .25rem .8rem; text-decoration: none !important;}
.ficha-etiquetas .ficha-etiqueta--suave {background: var(--rojo-suave); color: var(--rojo);}
.ficha-foto {display: block; margin-bottom: 1.5rem; border-radius: 16px; overflow: hidden; background: var(--fondo-gris);}
.ficha-foto img {display: block; width: 100%; max-height: 460px; object-fit: cover;}
.ficha-foto--pequena {float: right; width: auto; max-width: min(45%, 340px); margin: 0 0 1rem 1.5rem;}
.ficha-foto--pequena img {width: auto; max-width: 100%; max-height: none;}
.ficha-observaciones, .playa-principal section {clear: both;}
@media (max-width: 575.98px) {.ficha-foto--pequena {float: none; max-width: 100%; margin: 0 0 1.25rem; text-align: center;} .ficha-foto--pequena img {margin: 0 auto;}}
.ficha-observaciones {margin-top: 1.25rem;}
.ficha-observaciones .fa {color: var(--rojo); margin-right: .3rem;}
.ficha-audioguias {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem;}
.ficha-audioguias li {border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1rem; background: #fff;}
.ficha-audioguias span {display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .6rem;}
.ficha-audioguias audio {display: block; width: 100%; height: 40px;}
.ficha-galeria {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem;}
.ficha-galeria a {display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--fondo-gris);}
.ficha-galeria img {width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease;}
.ficha-galeria a:hover img {transform: scale(1.05);}
.ficha-datos {list-style: none; margin: 0 0 1rem; padding: 0; font-size: .93rem;}
.ficha-datos li {display: flex; gap: .5rem; padding: .3rem 0; overflow-wrap: anywhere;}
.ficha-datos .fa {color: var(--rojo); margin-top: .3rem;}
.ficha-datos a {font-weight: 700;}
.playa-caja .area-horario ul {columns: 1; font-size: .88rem;}
.playa-caja .area-horario {margin-bottom: 1rem;}
.playa-caja .ficha-datos:last-child {margin-bottom: 0;}
@media (prefers-reduced-motion: reduce) {.playas-tarjetas a {transition: none;} .playas-tarjetas a:hover {transform: none;}}
@media (max-width: 991.98px) {
    .playa-rejilla {grid-template-columns: minmax(0, 1fr); gap: 1.5rem;}
    .playa-lateral {position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
    .playas-tarjetas {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .playas-nav-docs {margin-left: 0;}
}
@media (max-width: 575.98px) {
    .playa-servicios {columns: 1;}
    .playas-tarjetas {grid-template-columns: minmax(0, 1fr);}
    .playas-tarjetas img {height: 160px;}
}

/* Filtros de los listados de Turismo */
.filtros {display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem 1.25rem; background: var(--fondo-gris); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.25rem; margin: 1.25rem 0 1.5rem;}
.filtros-campo {flex: 1 1 200px;}
.filtros-campo label {display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); margin-bottom: .25rem;}
.filtros-casillas {display: flex; flex-wrap: wrap; gap: .5rem;}
.filtros-casillas label {display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid #c9ccd3; border-radius: 2rem; padding: .45rem .9rem; margin: 0; cursor: pointer; min-height: 44px;}
.filtros-casillas label:has(input:checked) {border-color: var(--rojo); background: var(--rojo-suave); color: var(--rojo);}
.filtros-casillas .fa {color: var(--rojo);}
.filtros-botones {display: flex; gap: .5rem;}
.filtros-botones .btn {min-height: 44px;}

/* Buscadores de listados (instalaciones, empresas, ordenanzas) */
.search-sec {padding: 1.4rem 1.4rem 1rem; background: var(--fondo-gris); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 1.5rem;}
.search-titulo {color: var(--tinta); font-weight: 800; font-size: 1.1rem; margin-bottom: .9rem;}
.search-slt {display: block; width: 100%; padding: .5rem .75rem; background: #fff; margin-bottom: .6rem;}
.wrn-btn {width: 100%; min-height: 44px; margin-bottom: .6rem;}
.search-sec .form-check-label {font-weight: 600;}
.radio {padding: .5rem .6rem 0 0;}

/* Buscador de Google (página de resultados) */
.buscador-resultados {max-width: 860px; margin: 0 auto;}
.buscador-resultados .gsc-control-cse {padding: 0; border: 0; background: transparent; font-family: var(--fuente);}
.buscador-resultados form.gsc-search-box {margin-bottom: 1.25rem;}
.buscador-resultados table.gsc-search-box td.gsc-input {padding-right: 0;}
.buscador-resultados .gsc-input-box {border: 1px solid #c9ccd3; border-radius: 10px 0 0 10px; padding: .3rem .5rem;}
.buscador-resultados input.gsc-input {font-size: 1rem !important; min-height: 38px;}
.buscador-resultados button.gsc-search-button-v2 {background: var(--rojo); border-color: var(--rojo); border-radius: 0 10px 10px 0; padding: 0 1.4rem; height: 48px; margin: 0;}
.buscador-resultados button.gsc-search-button-v2:hover {background: var(--rojo-oscuro); border-color: var(--rojo-oscuro);}
.buscador-resultados .gsc-webResult.gsc-result {border: 0; border-bottom: 1px solid var(--borde); padding: 1rem 0;}
.buscador-resultados .gs-title, .buscador-resultados .gs-title * {color: var(--rojo) !important; font-weight: 700; text-decoration: none; font-size: 1.02rem !important;}
.buscador-resultados .gsc-cursor-page {color: var(--rojo) !important; font-weight: 700; padding: .25rem .6rem; border-radius: 6px;}
.buscador-resultados .gsc-cursor-current-page {background: var(--rojo); color: #fff !important;}
.buscador-resultados .gsc-orderby-container, .buscador-resultados .gsc-selected-option-container {display: none !important;}

/* Agenda: listado, calendario y ficha de evento */
.agenda-pagina {display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start;}
.agenda-filtros {display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem;}
.agenda-filtros a {padding: .45rem 1rem; border: 1px solid var(--borde); border-radius: 999px; background: #fff; color: var(--texto); font-weight: 700; font-size: .9rem; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease;}
.agenda-filtros a:hover {border-color: var(--rojo); color: var(--rojo);}
.agenda-filtros a.activo {background: var(--rojo); border-color: var(--rojo); color: #fff;}
/* Empleo privado: una tarjeta por oferta */
.empleo-pagina {padding-top: 2rem; max-width: 960px;}
.oferta {background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--rojo); border-radius: 16px; padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;}
.oferta-empresa {display: inline-block; background: var(--rojo-suave); color: var(--rojo); font-weight: 700; font-size: .8rem; border-radius: 999px; padding: .15rem .7rem; margin-bottom: .5rem;}
.oferta h2 {font-size: 1.35rem; font-weight: 800; margin: 0 0 .6rem;}
.oferta-datos {list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; color: var(--gris); font-size: .9rem;}
.oferta-datos .fa {color: var(--rojo); margin-right: .3rem;}
.oferta-texto {line-height: 1.7; overflow-wrap: anywhere;}
.oferta footer {display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--borde);}
.oferta-contacto {font-weight: 700; white-space: nowrap;}
.oferta-contacto .fa {margin-right: .3rem;}
@media (max-width: 575.98px) {.oferta {padding: 1.25rem;} .oferta footer .btn {width: 100%;}}
/* Mapa de la ciudad: filtros por tipo (botones), lista de puntos y mapa (reutiliza la rejilla de la wifi) */
.mapa-pagina {padding-top: 2rem;}
.mapa-filtros button {padding: .45rem 1rem; border: 1px solid var(--borde); border-radius: 999px; background: #fff; color: var(--texto); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;}
.mapa-filtros button:hover {border-color: var(--rojo); color: var(--rojo);}
.mapa-filtros button.activo {background: var(--rojo); border-color: var(--rojo); color: #fff;}
.mapa-filtros button span {display: inline-block; margin-left: .3rem; padding: 0 .45rem; border-radius: 999px; background: var(--fondo-gris); color: var(--gris); font-size: .78rem;}
.mapa-filtros button.activo span {background: rgba(255, 255, 255, .22); color: #fff;}
#mapa-lista li[hidden] {display: none;}
#mapa-lista button small {display: block; margin: .1rem 0 0 1.35rem; font-weight: 500; font-size: .78rem; color: var(--gris);}
.mapa-ventana {font-family: inherit; font-size: .9rem; line-height: 1.5; padding: .1rem .2rem .2rem;}
.mapa-ventana strong {display: block; font-size: 1rem; color: var(--tinta);}
.mapa-ventana span {display: block; color: var(--gris); font-size: .82rem; margin-bottom: .35rem;}
.mapa-ventana a {color: var(--rojo); font-weight: 700;}
.mapa-uno {display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem;}
.mapa-uno h2 {font-size: 1.6rem; font-weight: 800; margin: 0;}
.mapa-uno-tipo {display: inline-block; background: var(--rojo-suave); color: var(--rojo); font-weight: 700; font-size: .8rem; border-radius: 999px; padding: .15rem .7rem; margin-bottom: .4rem;}
.mapa-uno-acciones {display: flex; flex-wrap: wrap; gap: .5rem; margin: 0;}
@media (max-width: 991.98px) {
    #mapa-lista {max-height: 300px;}
    .mapa-pagina .wifi-mapa {height: 420px;}
}
.agenda-rotulo {display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; margin-bottom: 1.25rem; font-size: 1.1rem; color: var(--tinta);}
.agenda-rotulo a {font-size: .88rem; font-weight: 700;}
.agenda-vacia {text-align: center; padding: 3rem 1.5rem; background: var(--fondo-gris); border-radius: var(--radio); color: var(--gris);}
.agenda-vacia > i {font-size: 2.2rem; color: var(--rojo); margin-bottom: .75rem;}
.evento {display: grid; grid-template-columns: 210px minmax(0, 1fr); background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-bottom: 1.25rem; transition: box-shadow .2s ease, border-color .2s ease;}
.evento:hover {border-color: var(--rojo); box-shadow: var(--sombra);}
.evento-foto {display: block; background: var(--fondo-gris); min-height: 230px; position: relative;}
.evento-foto img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;}
.evento-cuerpo {padding: 1.25rem 1.5rem; display: flex; flex-direction: column; min-width: 0;}
.evento-fecha {margin: 0 0 .45rem; color: var(--rojo); font-weight: 800; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;}
.evento-en-curso {display: inline-block; margin-left: .5rem; padding: .1rem .55rem; border-radius: 999px; background: var(--rojo-suave); color: var(--rojo); font-size: .72rem; letter-spacing: .03em;}
.evento h2 {font-size: 1.3rem; line-height: 1.25; margin: 0 0 .3rem;}
.evento h2 a {color: var(--tinta); text-decoration: none;}
.evento h2 a:hover {color: var(--rojo);}
.evento-subtitulo {color: var(--gris); margin: 0 0 .6rem;}
.evento-datos {list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; padding: 0; margin: 0 0 .7rem; font-size: .9rem; color: var(--texto);}
.evento-datos i {color: var(--rojo); width: 1em; text-align: center; margin-right: .2rem;}
.evento-resumen {color: var(--texto); font-size: .95rem; margin: 0 0 1rem;}
.evento-acciones {margin: auto 0 0; display: flex; flex-wrap: wrap; gap: .5rem;}
.agenda-lateral {background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.1rem .9rem; position: sticky; top: 90px;}
.calendario-mes {display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem;}
.calendario-mes a {color: var(--tinta); text-decoration: none;}
.calendario-mes a:not(.calendario-titulo) {display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--fondo-gris); font-size: 1.1rem;}
.calendario-mes a:not(.calendario-titulo):hover {background: var(--rojo); color: #fff;}
.calendario-titulo {font-weight: 800;}
.calendario-titulo:hover {color: var(--rojo);}
.calendario table {width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 2px;}
.calendario th {font-size: .74rem; font-weight: 700; color: var(--gris); text-align: center; padding: .3rem 0;}
.calendario td {text-align: center; padding: 1px 0; font-size: .9rem;}
.calendario td a, .calendario td span {display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid transparent; color: #8a8d94; text-decoration: none !important;}
.calendario td a {background: var(--rojo-suave); color: var(--rojo); font-weight: 800;}
.calendario td a:hover, .calendario td.seleccionado a {background: var(--rojo); color: #fff;}
.calendario td.hoy a, .calendario td.hoy span {border-color: var(--tinta); color: var(--tinta); font-weight: 800;}
.calendario td.seleccionado a {border-color: var(--rojo);}
.calendario-leyenda {margin: .7rem 0 0; font-size: .8rem; color: var(--gris); display: flex; align-items: center; gap: .4rem;}
.calendario-leyenda span {width: 14px; height: 14px; border-radius: 50%; background: var(--rojo-suave); border: 1px solid var(--rojo);}
.evento-ficha {display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 2.25rem; align-items: start; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.75rem;}
.evento-ficha.sin-cartel {grid-template-columns: minmax(0, 1fr);}
.evento-ficha-cartel img {display: block; width: 100%; height: auto; border-radius: 10px;}
.evento-ficha-cartel a.thumbnail {cursor: zoom-in;}
.evento-area {margin: 0 0 .5rem; color: var(--rojo); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;}
.evento-ficha h2 {font-size: 1.9rem; line-height: 1.2; margin: 0 0 .4rem; color: var(--tinta);}
.evento-ficha .evento-subtitulo {font-size: 1.05rem; margin-bottom: 1.1rem;}
.evento-ficha-datos {list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem;}
.evento-ficha-datos li {display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; background: var(--fondo-gris); border-radius: 10px;}
.evento-ficha-datos i {flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--rojo); font-size: 1.1rem;}
.evento-ficha-datos span {font-weight: 700; color: var(--tinta); line-height: 1.3;}
.evento-ficha-datos small {display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris);}
.evento-entradas {margin-bottom: 1.4rem;}
.evento-entradas > div {margin-top: 0 !important; border: 1px solid var(--borde) !important; border-left: 4px solid var(--rojo) !important; border-radius: 10px !important; background: var(--rojo-suave) !important; text-align: left !important;}
.evento-entradas a {background: var(--rojo) !important; box-shadow: none !important; border-radius: 8px !important;}
.evento-entradas a:hover {background: var(--rojo-oscuro) !important;}
.evento-texto {margin-bottom: 1.4rem;}
.evento-texto img {max-width: 100%; height: auto;}
.evento-adjuntos {list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .5rem;}
.evento-adjuntos a {text-decoration: none !important; display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border: 1px solid var(--borde); border-radius: 10px; color: var(--tinta); font-weight: 700; text-decoration: none;}
.evento-adjuntos a:hover {border-color: var(--rojo); color: var(--rojo);}
.evento-adjuntos small {display: block; font-weight: 400; font-size: .8rem; color: var(--gris); word-break: break-all;}
.evento-ficha .compartir {margin: 0; padding: 1rem 0 0; border-bottom: 0; border-top: 1px solid var(--borde);}
.evento-galeria {margin-top: 1.5rem;}
.evento-volver {margin: 1.5rem 0 0; font-weight: 700;}
.evento-otros {margin-top: 2.5rem;}
.evento-otros > h2 {font-size: 1.4rem; margin-bottom: 1rem;}
@media (max-width: 991.98px) {
    .agenda-pagina {grid-template-columns: minmax(0, 1fr);}
    .agenda-lateral {position: static; max-width: 360px; margin: 0 auto; width: 100%;}
    .evento-ficha {grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem;}
}
@media (max-width: 767.98px) {
    .evento-ficha {grid-template-columns: minmax(0, 1fr);}
    .evento-ficha-cartel {max-width: 320px; margin: 0 auto;}
    .evento-ficha h2 {font-size: 1.5rem;}
}
@media (max-width: 575.98px) {
    .evento {grid-template-columns: 110px minmax(0, 1fr);}
    .evento-foto {min-height: 0;}
    .evento-cuerpo {padding: 1rem;}
    .evento h2 {font-size: 1.1rem;}
    .evento-resumen {display: none;}
}
@media print {.agenda-lateral, .agenda-filtros, .evento-otros, .evento-volver {display: none;}}
.agenda-sin-imagen {display: flex; align-items: center; justify-content: center; height: 100%; min-height: 160px; background: var(--rojo-suave); color: var(--rojo); font-size: 2rem;}

/* Galería con lupa (galery.js) y botones de compartir */
a.thumbnail, .lightbox {display: block; border-radius: 10px; overflow: hidden;}
a.thumbnail img, .lightbox img {transition: transform .3s ease;}
a.thumbnail:hover img, .lightbox:hover img {transform: scale(1.04);}
.img-responsive {max-width: 100%; height: auto;}
.compartir {display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--borde);}
.compartir-rotulo {font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-right: .25rem;}
.compartir a, .compartir button {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--borde); border-radius: 50%; background: #fff; color: var(--rojo); font-size: 1.05rem; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;}
.compartir a:hover, .compartir a:focus-visible, .compartir button:hover, .compartir button:focus-visible {background: var(--rojo); border-color: var(--rojo); color: #fff; text-decoration: none;}
.compartir-aviso {font-size: .85rem; color: var(--gris);}
@media print {.compartir {display: none;}}

/* ---------- 9. Turismo ---------- */
.descubre-vera .swiper-container {padding: 4px 0;}
.descubre-flechas {display: flex; gap: .5rem;}
.descubre-flechas button {width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--borde); background: #fff; color: var(--rojo);}
.descubre-flechas button:hover {background: var(--rojo); border-color: var(--rojo); color: #fff;}
.descubre-flechas button.swiper-button-disabled {opacity: .4; pointer-events: none;}
.foto-tarjeta {height: 380px; padding: 1.25rem;}
.foto-tarjeta strong {position: relative; z-index: 1; font-size: 1.3rem; font-weight: 800; line-height: 1.2;}
.foto-tarjeta, .foto-destacada, .organiza-tarjeta img {transition: transform .3s ease, box-shadow .3s ease;}
.foto-tarjeta:hover {transform: translateY(-4px); box-shadow: var(--sombra-alta);}
.foto-destacada {min-height: 380px; border-radius: 16px;}
.foto-destacada::after {background: linear-gradient(90deg, rgba(20, 10, 14, .8) 0%, rgba(20, 10, 14, .35) 60%, rgba(20, 10, 14, .05) 100%);}
.foto-destacada > span {position: relative; z-index: 1; max-width: 520px; padding: 2.5rem;}
.foto-destacada small {display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .6rem;}
.foto-destacada strong {display: block; font-size: 2rem; font-weight: 800; line-height: 1.15; margin-bottom: .8rem;}
.foto-destacada span span {display: block; margin-bottom: 1.4rem; opacity: .95;}
.foto-destacada em {font-style: normal;}
.organiza-rejilla {display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;}
.organiza-tarjeta {display: block; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; color: var(--texto); transition: box-shadow .2s ease, border-color .2s ease;}
.organiza-tarjeta:hover {text-decoration: none; color: var(--texto); border-color: var(--rojo); box-shadow: var(--sombra);}
.organiza-tarjeta img {display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.organiza-tarjeta strong {display: block; color: var(--tinta); padding: .9rem 1rem 0; line-height: 1.3;}
.organiza-tarjeta span {display: block; font-size: .83rem; color: var(--gris); padding: .35rem 1rem 1.1rem; line-height: 1.45;}
.agenda-turismo {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;}
.agenda-card {display: flex; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; color: var(--texto); min-height: 150px; transition: box-shadow .2s ease, border-color .2s ease;}
.agenda-card:hover {text-decoration: none; color: var(--texto); border-color: var(--rojo); box-shadow: var(--sombra);}
.agenda-card {position: relative;}
.agenda-card img {position: absolute; left: 0; top: 0; width: 150px; height: 100%; object-fit: cover; object-position: top; background: var(--fondo-gris);}
.agenda-card img + span {margin-left: 150px;}
.agenda-card > span {padding: 1.1rem 1.25rem; min-width: 0;}
.agenda-card small {display: block; color: var(--rojo); font-weight: 700; font-size: .78rem; margin-bottom: .3rem;}
.agenda-card strong {display: block; color: var(--tinta); line-height: 1.3;}
.agenda-card span span {display: block; font-size: .84rem; color: var(--gris); margin-top: .35rem;}
@media (max-width: 1199.98px) {.organiza-rejilla {grid-template-columns: repeat(3, 1fr);}}
@media (max-width: 767.98px) {
    .organiza-rejilla {grid-template-columns: repeat(2, 1fr);}
    .agenda-turismo {grid-template-columns: 1fr;}
    .foto-tarjeta {height: 300px;}
    .foto-destacada strong {font-size: 1.5rem;}
    .foto-destacada > span {padding: 1.5rem;}
    .descubre-flechas {display: none;}
}
@media (max-width: 479.98px) {.organiza-rejilla {grid-template-columns: 1fr;} .agenda-card img {width: 110px;} .agenda-card img + span {margin-left: 110px;}}

.directorio-contact-buttons a {display: inline-block; padding: .5rem 1rem; margin: .25rem; border-radius: 8px; background: #fff; color: var(--texto); border: 1px solid var(--borde); font-weight: 600;}
.directorio-contact-buttons a:hover {background: var(--rojo); border-color: var(--rojo); color: #fff; text-decoration: none;}
.brochure-card-img-container {position: relative; height: 220px; overflow: hidden;}
.brochure-card-img-container img {width: 100%; height: 100%; object-fit: cover;}
.turismo-organiza .organiza-card-img {min-height: 220px; background-size: cover; background-position: center;}
.timeline-container {width: 100%; overflow-x: auto; padding: 1.25rem; background: var(--fondo-gris); border: 1px solid var(--borde); border-radius: var(--radio);}
.horizontal-timeline {list-style: none; padding: 0; margin: 0; display: flex; position: relative; justify-content: space-between; z-index: 0;}
.horizontal-timeline::before {content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: var(--borde); z-index: -1;}
.timeline-item {flex: 1; text-align: center; padding: 0 5px;}
.timeline-item a {display: inline-block; padding: 10px 0; color: var(--texto); font-size: .9rem;}
.timeline-item a:hover {color: var(--rojo); text-decoration: none;}
.timeline-item a div {font-weight: 700; color: var(--rojo); margin-bottom: 5px;}
.timeline-item.active a div {background: var(--rojo); color: #fff !important; border-radius: 50%; width: 40px; height: 40px; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center;}
.highlight-red {background: var(--rojo); color: #fff; padding: 2.5rem 0;}
.highlight-red h2, .highlight-red p {color: #fff;}
.testimonials-clean .item .box {padding: 1.5rem; background: var(--fondo-gris); border-radius: var(--radio);}
.testimonials-clean .item .author {margin-top: 1rem;}
.testimonials-clean .item .name {font-weight: 700; margin-bottom: 0;}
.testimonials-clean .item .title {font-size: .85rem; color: var(--gris);}
.team-grid .item {margin-bottom: 1.5rem;}
.team-grid .item .box {position: relative; height: 280px; border-radius: var(--radio); overflow: hidden; background-size: cover; background-position: center; text-align: center;}
.team-grid .item .cover {position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 10, 14, 0) 30%, rgba(20, 10, 14, .85)); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem;}
.team-grid .item .name {color: #fff; font-weight: 800;}

/* ---------- 10. Pie ---------- */
.boletin {padding: 3rem 0 1rem;}
.boletin-caja {display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap; background: var(--tinta); color: #fff; border-radius: 16px; padding: 1.75rem 2rem;}
.boletin-caja h2 {color: #fff; font-size: 1.25rem; font-weight: 800; margin: 0 0 .2rem;}
.boletin-caja p {margin: 0; color: #c9cbd1; font-size: .95rem;}
.logos {padding: 1.5rem 0 2.5rem;}
.logos .container {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem 2.25rem; border-top: 1px solid var(--borde); padding-top: 2rem;}
.logos img {max-height: 46px; max-width: 170px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease;}
.logos a:hover img, .logos img:hover {filter: none; opacity: 1;}

.pie {background: var(--rojo-pie); color: #f3dfe3; padding: 3rem 0 1.25rem; font-size: .9rem;}
.pie h2 {color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .9rem;}
.pie a {color: #f3dfe3;}
.pie a:hover {color: #fff;}
.pie .row > div {margin-bottom: 1.75rem;}
.pie-seccion {border-bottom: 1px solid rgba(255, 255, 255, .16); margin-bottom: 2rem;}
.pie-seccion-nombre p {color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 .5rem;}
.pie-seccion-nombre a {font-weight: 700;}
.footer-links ul {list-style: none; padding: 0; margin: 0;}
.footer-links li {margin-bottom: .5rem;}
.pie-datos {list-style: none; margin: 0 0 1rem; padding: 0;}
.pie-datos li {margin-bottom: .4rem;}
.pie-datos .fa {opacity: .75; margin-right: .3rem;}
.pie-telefonos {margin: 0;}
.pie-telefonos a {display: inline-block; background: #fff; color: var(--rojo) !important; font-weight: 800; font-size: .8rem; border-radius: 6px; padding: .3rem .7rem; margin: 0 .35rem .35rem 0;}
.pie-telefonos a:hover {background: var(--rojo-suave); text-decoration: none;}
.pie-redes {display: flex; flex-wrap: wrap; gap: .45rem; margin: 0;}
.pie-redes a {display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: .95rem;}
.pie-redes a:hover {background: #fff; color: var(--rojo); text-decoration: none;}
.pie-franja {border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 2rem;}
.pie-final {display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 1.1rem; font-size: .84rem;}
main .footer-links h2 {font-size: 1.05rem; margin-bottom: .75rem;}
main .footer-links {margin-bottom: 1.25rem;}

#ir-arriba {position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1020; width: 44px; height: 44px; border-radius: 50%; background: var(--rojo); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-alta); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;}
#ir-arriba.visible {opacity: 1; visibility: visible;}
/* Botón del widget de accesibilidad (ADDAW): pestaña estrecha pegada al borde, en la parte inferior (así no se monta sobre el menú desplegado en móvil), con el texto
   «Accesibilidad» en vertical y sin icono. Su hoja de estilos usa !important; por eso aquí también, con un selector más específico. */
button#cdlpr-wba11y-open.wba11y-popup-btn {display: inline-flex !important; justify-content: center !important; width: auto !important; height: auto !important; padding: .7rem .35rem !important; top: auto !important; bottom: 1.25rem !important; transform: none; background: var(--rojo) !important; color: #fff !important; border: 0 !important; font-family: inherit !important; font-size: .8rem !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(0, 0, 0, .25) !important;}
button#cdlpr-wba11y-open.wba11y-popup-btn img {display: none !important;}
button#cdlpr-wba11y-open.wba11y-popup-btn::after {content: "Accesibilidad"; writing-mode: vertical-rl; transform: rotate(180deg);}
button#cdlpr-wba11y-open.wba11y-popup-btn.wba11y-left {left: 0 !important; border-radius: 0 10px 10px 0 !important;}
button#cdlpr-wba11y-open.wba11y-popup-btn.wba11y-right {right: 0 !important; border-radius: 10px 0 0 10px !important;}
button#cdlpr-wba11y-open.wba11y-popup-btn.wba11y-right::after {transform: none;}
button#cdlpr-wba11y-open.wba11y-popup-btn:hover {background: var(--rojo-oscuro) !important;}
button#cdlpr-wba11y-open.wba11y-popup-btn:focus-visible {outline: 3px solid #1a73e8 !important; outline-offset: 2px;}
@media (max-width: 767.98px) {
    button#cdlpr-wba11y-open.wba11y-popup-btn {font-size: .68rem !important; padding: .55rem .2rem !important;}
    #ir-arriba {right: .5rem; bottom: .75rem;}
}
@media print { button#cdlpr-wba11y-open {display: none !important;} }
#ir-arriba:hover {background: var(--rojo-oscuro); text-decoration: none;}

@media print {
    .barra-superior, .nav-vera, .buscador-nav, .subnav-vera, .boletin, .logos, .pie, #ir-arriba, .seccion--gris, .alerta-vera {display: none !important;}
    body {font-size: 11pt;}
}