/* Proyecto El Estanquillo - Popayán · Concesionario ERG Vías Ciudad Blanca S.A.S.
   Lenguaje visual común con la Autopista Ankara – Niğde (ERG), con azul marino en lugar del naranja.
   Estilo plano y sobrio: superficies blancas con borde fino, esquinas de 4 a 6 px, sin acentos decorativos.
   Tipografía: Source Sans Pro (SIL Open Font License 1.1, © 2010-2020 Adobe), alojada en el propio dominio: sin cookies ni servicios externos.
   Íconos: Lucide (licencia ISC). Accesibilidad: WCAG 2.1 AA / Resolución MinTIC 1519 de 2020, Anexo 1. */

@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fuentes/source-sans-pro-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fuentes/source-sans-pro-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fuentes/source-sans-pro-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fuentes/source-sans-pro-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fuentes/source-sans-pro-latin-900-normal.woff2") format("woff2"); }

:root {
  --marino: #13265a;        /* azul marino principal (reemplaza el naranja de Ankara – Niğde) */
  --marino-profundo: #0b1a3d;
  --azul: #264388;          /* azul del logo */
  --azul-oscuro: #1a2f63;
  --azul-claro: #edf1f8;
  --amarillo: #f5c400;      /* amarillo de bloques y pie, como en Ankara – Niğde */
  --verde: #2b7a3d;
  --granate: #8c1d3c;
  --petroleo: #006a78;
  --grafito: #262a30;
  --grafito-2: #1b1e23;
  --texto: #1f2329;
  --texto-suave: #4f5662;
  --fondo: #ffffff;
  --fondo-suave: #f4f6f9;
  --borde: #dde2ea;
  --borde-fuerte: #c5ccd8;
  --foco: #f5c400;
  --obra-texto: #7a4f00;  --obra-fondo: #fff6e0;  --obra-marca: #c78a00;
  --cierre-texto: #9b1418; --cierre-fondo: #fdeeee; --cierre-marca: #c62828;
  --incidente-texto: #8a3a00; --incidente-fondo: #fdf0e6; --incidente-marca: #d9640f;
  --normal-texto: #1d6236; --normal-fondo: #e8f4ec;
  --info-texto: #1a2f63;   --info-fondo: #edf1f8;
  --radio: 4px;
  --radio-grande: 6px;
  --sombra: 0 1px 2px rgba(11,26,61,.05);
  --sombra-fuerte: 0 10px 30px rgba(11,26,61,.18);
  --texto-pequeno: .8125rem;   /* notas, fuentes, ayudas y avisos legales */
  --ancho: 1240px;
  /* Íconos de las notas (data URI: permitido por la política de seguridad de contenido) */
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --ico-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --ico-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --ico-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: "Source Sans Pro", Arial, Helvetica, sans-serif; font-size: 1.0625rem; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--azul); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--marino); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; box-shadow: 0 0 0 6px var(--marino); }
h1, h2, h3, h4 { font-family: inherit; line-height: 1.2; color: var(--marino); margin: 0 0 .6rem; letter-spacing: -.005em; }
h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); font-weight: 900; letter-spacing: -.015em; }
h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem); font-weight: 700; margin-top: 2.75rem; margin-bottom: 1rem; }
h3 { font-size: 1.2rem; font-weight: 700; margin-top: 1.75rem; }
h4 { font-size: 1.0625rem; font-weight: 700; margin-top: 1.25rem; }
h5 { font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--texto); margin: .9rem 0 .3rem; }
h5 + ul { margin-top: 0; }
h2 + h3 { margin-top: 1rem; }
p, ul, ol, dl, table { margin: 0 0 1rem; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: .3em; }
small { font-size: var(--texto-pequeno); }
hr { border: 0; border-top: 1px solid var(--borde); margin: 2rem 0; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 720px) { .contenedor { padding: 0 1.5rem; } }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: .5rem; top: -4rem; z-index: 100; background: var(--marino); color: #fff; padding: .6rem 1rem; border-radius: var(--radio); font-weight: 600; }
.saltar:focus { top: .5rem; color: #fff; }
main:focus { outline: none; }

/* ---------- Revisión ---------- */
.barra-revision { background: #fff1b8; border-bottom: 1px solid #e0c060; padding: .5rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: center; font-size: .9375rem; }
.barra-revision p { margin: 0; }
.cinta-ejemplo { background: #7a1fa2; color: #fff; text-align: center; font-weight: 700; padding: .35rem 1rem; flex-basis: 100%; margin: 0; border-radius: var(--radio); }
mark.pendiente { background: #fff1b8; color: #4a3800; border-radius: 3px; padding: 0 .3em; font-size: .92em; box-shadow: inset 0 0 0 1px #e0c060; }
mark.proximo { background: #e6edf9; color: #1a2f63; border-radius: 3px; padding: 0 .3em; font-size: .92em; box-shadow: inset 0 0 0 1px #b9c8e6; }

/* ---------- Alerta de crisis (A.T. 8 s. 8.7) ---------- */
.alerta-crisis { background: var(--cierre-texto); color: #fff; }
.alerta-crisis .contenedor { padding-top: 1rem; padding-bottom: 1rem; }
.alerta-crisis h2 { color: #fff; margin: 0 0 .25rem; font-size: 1.25rem; }
.alerta-crisis p { margin: 0; }
.alerta-crisis a { color: #fff; }

/* ---------- Barra superior ---------- */

/* ---------- Cabecera y menú ---------- */
/* Cabecera fija: la barra superior se va con el desplazamiento; la fila del logo y el menú se ocultan al bajar y vuelven al subir (app.js) */
.cabecera { background: #fff; border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 1000; transition: transform .35s var(--curva, ease), box-shadow .25s ease; }
.cabecera.fija { box-shadow: 0 6px 24px rgba(11, 26, 61, .1); }
.cabecera.oculta { transform: translateY(-100%); box-shadow: none; }
html { scroll-padding-top: 9.5rem; }
@media (max-width: 999px) { html { scroll-padding-top: 5.5rem; } }
#mapa { position: relative; z-index: 0; }
.cabecera-principal { display: flex; align-items: center; gap: 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.marca { display: flex; align-items: center; text-decoration: none; margin-right: auto; flex: none; }
.marca img { width: 138px; height: auto; display: block; }
.acciones-cabecera { display: flex; align-items: center; gap: .75rem; }
/* Botones de solo ícono (buscar, menú, cerrar): 44 × 44 px */
.boton-icono { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; color: var(--marino); cursor: pointer; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.boton-icono:hover { background: var(--azul-claro); color: var(--azul); }
.boton-icono .ico { width: 24px; height: 24px; }
/* Asistencia en la vía: botón amarillo de la cabecera (llamada directa) */
.pildora-asistencia { display: inline-flex; align-items: center; gap: .5rem; background: var(--amarillo); color: var(--marino-profundo); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: .35rem 1rem .35rem .4rem; line-height: 1.2; text-decoration: none; min-height: 44px; white-space: nowrap; transition: background-color .2s ease, box-shadow .2s ease; }
.pildora-asistencia:hover { color: var(--marino-profundo); background: #ffd83d; box-shadow: 0 4px 14px rgba(242, 183, 5, .35); }
.asistencia-icono { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--marino-profundo); color: var(--amarillo); }
/* El círculo es un contenedor aparte: si el fondo redondo va en el propio ícono, algunos navegadores de celular le recortan el auricular. */
.asistencia-icono .ico { display: block; width: 1.3em; height: 1.3em; overflow: visible; }
.pildora-asistencia .numero { font-size: 1.15em; }
/* Texto en movimiento: solo en celulares (en pantallas grandes el texto cabe completo) */
.marquesina { display: none; }
@keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Menú de tres líneas; se convierte en una X al abrirse */
.boton-menu { display: none; }
.hamburguesa { position: relative; width: 24px; height: 18px; display: block; }
.hamburguesa span { position: absolute; right: 0; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s ease, width .3s cubic-bezier(.2,.7,.2,1), top .3s cubic-bezier(.2,.7,.2,1); }
.hamburguesa span:nth-child(1) { top: 0; width: 24px; }
.hamburguesa span:nth-child(2) { top: 7.75px; width: 24px; }
.hamburguesa span:nth-child(3) { top: 15.5px; width: 15px; background: var(--amarillo-oscuro, #d9a400); }
.boton-menu:hover .hamburguesa span:nth-child(3) { width: 24px; }
.boton-menu[aria-expanded="true"] .hamburguesa span:nth-child(1) { top: 7.75px; transform: rotate(45deg); }
.boton-menu[aria-expanded="true"] .hamburguesa span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.boton-menu[aria-expanded="true"] .hamburguesa span:nth-child(3) { top: 7.75px; width: 24px; transform: rotate(-45deg); background: currentColor; }

/* Buscador a pantalla completa */
.busqueda-pantalla { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--marino-profundo); color: #fff; overflow-y: auto; }
.busqueda-pantalla::backdrop { background: transparent; }
.busqueda-pantalla[open] { animation: aparecer .25s ease-out; }
.busqueda-pantalla[open] .busqueda-pantalla-interior { animation: subir .45s cubic-bezier(.2,.7,.2,1); }
.busqueda-pantalla-interior { position: relative; max-width: 52rem; padding-top: clamp(5rem, 18vh, 10rem); padding-bottom: 3rem; }
.cerrar-busqueda { position: absolute; top: 1.25rem; right: 1rem; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.cerrar-busqueda:hover { background: rgba(255,255,255,.1); color: var(--amarillo); }
.busqueda-titulo { margin: 0 0 1rem; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--amarillo); }
.buscador-grande { display: flex; align-items: center; gap: .5rem; border-bottom: 2px solid rgba(255,255,255,.6); transition: border-color .2s ease; }
.buscador-grande:focus-within { border-bottom-color: var(--amarillo); }
.buscador-grande input[type=search] { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font-size: clamp(1.5rem, 1rem + 2.5vw, 2.5rem); font-weight: 700; padding: .4rem 0; min-height: 0; height: auto; -webkit-appearance: none; appearance: none; }
.buscador-grande input[type=search]::placeholder { color: rgba(255,255,255,.55); font-weight: 400; }
.buscador-grande input[type=search]:focus-visible { outline: none; box-shadow: none; }
.buscador-grande button { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--amarillo); color: var(--marino-profundo); cursor: pointer; transition: transform .2s ease, background-color .2s ease; }
.buscador-grande button:hover { background: #ffd83d; transform: scale(1.05); }
.buscador-grande button .ico { width: 24px; height: 24px; }
.busqueda-accesos-titulo { margin: 2.25rem 0 .75rem; font-size: var(--texto-pequeno); color: rgba(255,255,255,.75); }
.busqueda-accesos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.busqueda-accesos li { margin: 0; }
.busqueda-accesos a { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem 1rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: .9375rem; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.busqueda-accesos a:hover { background: #fff; border-color: #fff; color: var(--marino); }
html.sin-desplazamiento { overflow: hidden; }
/* Celulares y pantallas angostas: el botón queda en la fila del logo; ícono del teléfono y el texto «Asistencia en la vía 320 802 7545»
   en movimiento. Se detiene al pasar el puntero o al enfocarlo, y queda quieto (solo el número) si el celular pide
   reducir el movimiento. */
@media (max-width: 639px) {
  .cabecera-principal { gap: .5rem; }
  .acciones-cabecera { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: .25rem; }
  .pildora-asistencia { flex: 0 1 6rem; min-width: 0; gap: .3rem; padding-left: .3rem; padding-right: .6rem; }
  .asistencia-textos { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .marquesina { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: .9375rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .marquesina-pista { display: inline-flex; white-space: nowrap; animation: marquesina 10s linear infinite; will-change: transform; }
  .marquesina-pista > span { padding-right: 1.75rem; }
  .pildora-asistencia:hover .marquesina-pista, .pildora-asistencia:focus-visible .marquesina-pista { animation-play-state: paused; }
}
@media (max-width: 419px) { .cabecera-principal .marca img { width: 100px; } }
@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  .marquesina { display: none; }
  .asistencia-textos { position: static; width: auto; height: auto; margin: 0; overflow: hidden; clip: auto; text-overflow: ellipsis; min-width: 0; font-size: .875rem; letter-spacing: .01em; }
  .pildora-asistencia .numero { font-size: 1em; }
  .pildora-asistencia { flex-basis: auto; }
  .asistencia-etiqueta { display: none; }
}
}
.navegacion { border-top: 1px solid var(--borde); }
.menu { list-style: none; display: flex; flex-wrap: wrap; gap: 0 .25rem; margin: 0 auto; }
.menu > li { position: relative; margin: 0; }
.menu-enlace, .menu-boton { display: flex; align-items: center; padding: .85rem .9rem .75rem; color: var(--marino); font-weight: 700; font-size: .9375rem; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; background: none; border: 0; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; min-height: 48px; }
.menu > li:first-child > .menu-enlace { padding-left: 0; }
.menu-boton::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.2em) rotate(45deg); }
.menu-boton[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); }
.menu-enlace:hover, .menu-boton:hover, .menu-enlace[aria-current="page"], .menu-grupo.activo > .menu-boton, .menu-boton[aria-expanded="true"] { color: var(--azul); border-bottom-color: var(--amarillo); }
/* Escritorio: todas las pestañas en una sola línea; la letra y el espacio se reducen un poco en pantallas angostas. */
@media (min-width: 1000px) {
  .menu { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
  .menu-enlace, .menu-boton { font-size: clamp(13px, 5.7px + .75vw, 15px); letter-spacing: .02em; padding-left: clamp(.3rem, -.45rem + 1.2vw, .6rem); padding-right: clamp(.3rem, -.45rem + 1.2vw, .6rem); white-space: nowrap; }
  .menu > li:last-child > .menu-enlace { padding-right: 0; }
}
.submenu { list-style: none; margin: 0; padding: .4rem 0; background: #fff; border: 1px solid var(--borde); border-radius: 0 0 var(--radio-grande) var(--radio-grande); box-shadow: var(--sombra-fuerte); min-width: 19rem; position: absolute; left: 0; top: 100%; z-index: 50; }
.submenu li { margin: 0; }
.submenu a { display: block; padding: .6rem 1.15rem; text-decoration: none; color: var(--texto); font-weight: 600; }
.submenu a:hover, .submenu a[aria-current="page"] { background: var(--azul-claro); color: var(--marino); }
@media (max-width: 999px) {
  .marca img { width: 112px; }
  .boton-menu { display: grid; }
  .acciones-cabecera { gap: .35rem; }
  .navegacion { display: none; }
  .navegacion.abierta { display: block; animation: desplegar .3s cubic-bezier(.2,.7,.2,1); max-height: calc(100vh - var(--alto-principal, 76px)); max-height: calc(100dvh - var(--alto-principal, 76px)); overflow-y: auto; overscroll-behavior: contain; }
  .menu { flex-direction: column; padding-bottom: .75rem; }
  .menu > li:first-child > .menu-enlace { padding-left: .25rem; }
  .menu-enlace, .menu-boton { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--borde); padding: .85rem .25rem; justify-content: space-between; }
  .submenu { position: static; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 .5rem .5rem; background: var(--fondo-suave); }
}

/* Pantallas muy angostas (320 px): todo cabe en una fila */
@media (max-width: 359px) {
  .cabecera-principal { gap: .5rem; }
  .cabecera-principal .marca img { width: 92px; }
  .acciones-cabecera { gap: .1rem; }
  .acciones-cabecera .boton-icono { width: 40px; height: 40px; }
}

/* ---------- Botones y formularios ---------- */
input, select, textarea, button { font: inherit; }
input[type=text], input[type=search], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea {
  border: 1px solid #8a92a0; border-radius: var(--radio); padding: .55rem .75rem; background: #fff; color: var(--texto); min-height: 44px; width: 100%; max-width: 100%; }
textarea { min-height: 9rem; resize: vertical; }
select, input[type=file] { max-width: 100%; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .55rem 1.35rem;
  border: 1px solid var(--marino); background: var(--marino); color: #fff; border-radius: 999px; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.2; }
.boton:hover { background: var(--azul); border-color: var(--azul); color: #fff; }
.boton-secundario { background: #fff; color: var(--marino); }
.boton-secundario:hover { background: var(--azul-claro); color: var(--marino); border-color: var(--marino); }
.boton-amarillo { background: var(--amarillo); border-color: var(--amarillo); color: var(--marino-profundo); }
.boton-amarillo:hover { background: #fff; border-color: #fff; color: var(--marino-profundo); }
.boton-pequeno { min-height: 36px; padding: .3rem .95rem; font-size: .9375rem; }
.boton[disabled] { opacity: .6; cursor: not-allowed; }
.boton .ico { width: 1.1em; height: 1.1em; }
/* Botones uno al lado del otro: separación también cuando bajan a otra línea en el celular */
.grupo-botones { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin: 1.5rem 0 0; }

/* ---------- Banda de página interior ---------- */
.banda-pagina { background: var(--marino); color: #fff; position: relative; overflow: hidden; margin-bottom: 2.5rem; border-bottom: 4px solid var(--amarillo); }
.banda-pagina::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px); pointer-events: none; }
.banda-pagina .contenedor { position: relative; }
.migas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; font-size: .875rem; padding-top: 1.25rem; color: #c9d3ea; }
.migas li { margin: 0; }
.migas li + li::before { content: "/"; margin: 0 .5rem 0 .25rem; color: #8ea0c8; }
.migas a { color: #fff; text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.encabezado-pagina { padding-top: .5rem; padding-bottom: 2.75rem; }
.encabezado-pagina h1 { color: #fff; margin: .5rem 0 .6rem; max-width: 28ch; }
.encabezado-pagina .entradilla { font-size: 1.15rem; color: #dfe6f3; max-width: 64ch; margin: 0; }

/* ---------- Secciones ---------- */
.seccion { padding-top: 0; padding-bottom: 1rem; }
.seccion-gris { background: var(--fondo-suave); padding-top: 3.5rem; padding-bottom: 3.5rem; margin-top: 3.5rem; }
.prosa { max-width: 74ch; }
.prosa h2:first-child, .prosa h3:first-child { margin-top: 0; }
/* Títulos de las secciones de la portada: mismo tamaño y estilo en todas */
.titulo-grande, .panel-noticias h2, .bloque h2 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.85rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0; line-height: 1.1; }
.titulo-grande { margin: 0 0 .75rem; }
#titulo-corredor { margin-top: 3.5rem; margin-bottom: 1rem; }
.titulo-grande + .entradilla-seccion { color: var(--texto-suave); font-size: 1.125rem; max-width: 60ch; margin: 0 0 2rem; }

/* ---------- Portada ---------- */
.portada { position: relative; color: #fff; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; background: var(--marino); }
.portada-fondo, .portada-fondo .foto { position: absolute; inset: 0; margin: 0; }
.portada-fondo .foto img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 65%; border-radius: 0; }
.portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,26,61,.92) 0%, rgba(11,26,61,.7) 38%, rgba(11,26,61,.15) 75%), linear-gradient(0deg, rgba(11,26,61,.6), transparent 45%); }
.portada-texto { position: relative; z-index: 1; padding-top: 4rem; padding-bottom: 9.5rem; }
.portada h1 { color: #fff; margin: .75rem 0 .75rem; max-width: 16ch; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); line-height: 1.02; text-transform: uppercase; }
.portada p { font-size: 1.2rem; max-width: 46ch; margin: 0; color: #fff; }
.portada .etiqueta-portada { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .8125rem; background: var(--amarillo); color: var(--marino-profundo); padding: .3rem .75rem; border-radius: 2px; }

/* Accesos rápidos de colores (como en Ankara – Niğde) */
.accesos-rapidos { list-style: none; padding: 0; margin: -7rem 0 0; position: relative; z-index: 3; display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); box-shadow: var(--sombra-fuerte); border-radius: var(--radio-grande); overflow: hidden; }
.accesos-rapidos li { margin: 0; }
.acceso-rapido { display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: 1.6rem 1.5rem 1.5rem; color: #fff; text-decoration: none; position: relative; min-height: 220px; }
.acceso-rapido:hover { color: #fff; filter: brightness(1.08); }
.acceso-rapido .ico { width: 42px; height: 42px; stroke-width: 1.6; margin-bottom: .25rem; }
.acceso-rapido strong { font-size: 1.15rem; font-weight: 900; text-transform: uppercase; line-height: 1.15; letter-spacing: .02em; }
.acceso-rapido span.texto { color: rgba(255,255,255,.9); font-size: .9375rem; line-height: 1.45; }
.acceso-rapido .pildora { margin-top: auto; align-self: flex-start; background: #fff; color: var(--marino); border-radius: 999px; padding: .35rem 1rem; font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: .4rem; }
.acceso-rapido .pildora .ico { width: 1em; height: 1em; stroke-width: 2.5; margin: 0; }
.color-marino { background: var(--marino); }
.color-verde { background: var(--verde); }
.color-granate { background: var(--granate); }
.color-petroleo { background: var(--petroleo); }
@media (max-width: 899px) { .accesos-rapidos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -5rem; } .acceso-rapido { min-height: 0; } }
@media (max-width: 520px) { .accesos-rapidos { grid-template-columns: minmax(0, 1fr); } .portada { min-height: 480px; } }
/* Todas las cajas del mismo alto en cualquier pantalla (las filas toman el alto de la caja más alta). */
.accesos-rapidos { grid-auto-rows: 1fr; }
/* En escritorio, el título, el texto y el botón de las cuatro cajas quedan alineados entre sí (subgrid). */
@media (min-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .accesos-rapidos { grid-auto-rows: auto; grid-template-rows: auto auto 1fr auto; }
    .accesos-rapidos li { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    .acceso-rapido { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: .55rem; justify-items: start; height: auto; }
    .acceso-rapido strong, .acceso-rapido span.texto { justify-self: stretch; }
  }
}

/* ---------- Notas, avisos y estados vacíos ---------- */
.nota, .aviso-desactualizado, .estado-normal { position: relative; background: var(--info-fondo); color: var(--texto); border: 1px solid #d3dcee; border-radius: var(--radio-grande); padding: 1rem 1.25rem 1rem 3.1rem; margin: 0 0 1.5rem; }
.nota::before, .aviso-desactualizado::before, .estado-normal::before { content: ""; position: absolute; left: 1.1rem; top: 1.1rem; width: 1.25rem; height: 1.25rem; background: var(--azul); -webkit-mask: var(--ico-info) center / contain no-repeat; mask: var(--ico-info) center / contain no-repeat; }
.nota p:last-child { margin-bottom: 0; }
.nota-advertencia, .aviso-desactualizado { background: var(--obra-fondo); border-color: #f0dcae; }
.nota-advertencia::before, .aviso-desactualizado::before { background: var(--obra-marca); -webkit-mask-image: var(--ico-alerta); mask-image: var(--ico-alerta); }
.aviso-desactualizado { color: var(--obra-texto); font-weight: 600; }
.estado-normal { background: var(--normal-fondo); border-color: #cfe6d7; color: var(--normal-texto); font-weight: 600; }
.estado-normal::before { background: var(--normal-texto); -webkit-mask-image: var(--ico-ok); mask-image: var(--ico-ok); }
.vacio { background: var(--fondo-suave); border-radius: var(--radio-grande); padding: 1rem 1.25rem; color: var(--texto-suave); margin: 0 0 1rem; }
/* Texto secundario: notas, fuentes, ayudas y avisos legales */
.nota-pequena, .fuente-contractual, .fuente-clima, .notas-tabla, .foto figcaption, .figura-diagrama figcaption { font-size: var(--texto-pequeno); line-height: 1.5; color: var(--texto-suave); }
.nota-pequena { margin-top: .75rem; }

/* ---------- Estado de la vía ---------- */
.tarjeta-estado { background: #fff; border-radius: var(--radio-grande); border: 1px solid var(--borde); box-shadow: var(--sombra); padding: 1.75rem 1.75rem 1.5rem; margin-top: 2.5rem; position: relative; }
.tarjeta-estado h2 { margin: 0; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
.tarjeta-estado h3 { margin-top: 2rem; }
.tarjeta-estado .nota-pequena { margin-bottom: 0; }
.estado-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.estado-cabecera h2 { margin-top: 0; }
.estado-actualizado { margin: 0; color: var(--texto-suave); font-size: .9375rem; }
.estado-controles { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin: 1.5rem 0 0; }
.estado-controles label { display: inline-flex; gap: .45rem; align-items: center; }
/* Resumen por tipo: cinco tarjetas del mismo alto; en pantallas pequeñas la última fila queda centrada */
.resumen-estado { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .75rem; list-style: none; padding: 0; margin: 0 0 1.25rem; }
.resumen-estado li { grid-column: span 2; margin: 0; border-radius: var(--radio-grande); padding: .9rem 1rem; border: 1px solid var(--borde); background: #fff; color: var(--texto-suave); font-size: .9375rem; line-height: 1.35; }
.resumen-estado li:nth-child(5) { grid-column: 2 / span 2; }
@media (min-width: 600px) {
  .resumen-estado { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .resumen-estado li:nth-child(4) { grid-column: 2 / span 2; }
  .resumen-estado li:nth-child(5) { grid-column: 4 / span 2; }
}
@media (min-width: 1000px) {
  .resumen-estado { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .resumen-estado li, .resumen-estado li:nth-child(4), .resumen-estado li:nth-child(5) { grid-column: auto; }
}
.resumen-estado .cifra { display: block; font-size: 2rem; font-weight: 900; line-height: 1; margin-bottom: .35rem; color: var(--evento-color, var(--marino)); }
.lista-eventos { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.lista-eventos + .tabla-envoltura, .lista-eventos + p { margin-top: 1.25rem; }
/* Color de cada tipo de evento (cabecera de la tarjeta y cifra del resumen). Texto blanco con contraste de 4,5:1 o más. */
.tipo-cierre { --evento-color: #8c1d3c; }
.tipo-incidente { --evento-color: #c62828; }
.tipo-obra { --evento-color: #b45309; }
.tipo-paso_urbano { --evento-color: var(--marino); }
.tipo-otro { --evento-color: #4b5563; }
.evento { margin: 0; border: 1px solid var(--borde); border-top-color: var(--evento-color, var(--borde)); border-radius: var(--radio-grande); padding: 0 1.25rem 1rem; background: #fff; overflow: hidden; }
.evento h3, .evento h4 { margin: 0 0 .35rem; font-size: 1.075rem; color: var(--texto); }
/* El tipo ocupa toda la parte superior de la tarjeta */
.evento > :is(h3, h4) > .insignia { display: flex; margin: 0 -1.25rem .85rem; padding: .55rem 1.25rem; border-radius: 0; background: var(--evento-color, var(--marino)); color: #fff; font-size: .875rem; font-weight: 700; letter-spacing: .01em; vertical-align: baseline; }
.evento > :is(h3, h4) > .insignia::before { display: none; }
.evento p { margin: .25rem 0; }
.evento .meta { font-size: var(--texto-pequeno); color: var(--texto-suave); margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; }
.insignia { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 700; padding: .15rem .55rem; border-radius: var(--radio); background: var(--info-fondo); color: var(--info-texto); margin-right: .5rem; vertical-align: .1em; }
.insignia::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.insignia.tipo-cierre { background: var(--cierre-fondo); color: var(--cierre-texto); }
.insignia.tipo-obra { background: var(--obra-fondo); color: var(--obra-texto); }
.insignia.tipo-incidente { background: var(--incidente-fondo); color: var(--incidente-texto); }
.insignia.tipo-normal { background: var(--normal-fondo); color: var(--normal-texto); }

/* Clima por sector */
.clima { list-style: none; padding: 0; margin: .75rem 0 .75rem; display: grid; grid-auto-rows: 1fr; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); }
.clima li { margin: 0; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1rem 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sector ico" "temp temp" "lectura lectura"; gap: .35rem .75rem; align-items: start; align-content: start; }
.clima .ico { grid-area: ico; width: 30px; height: 30px; color: var(--azul); }
.clima .sector { grid-area: sector; font-weight: 700; color: var(--marino); line-height: 1.25; font-size: .9375rem; }
.clima .temp { grid-area: temp; font-weight: 900; color: var(--marino); font-size: 1.6rem; line-height: 1.1; white-space: nowrap; }
.clima .temp:empty { display: none; }
.clima .lectura { grid-area: lectura; font-size: var(--texto-pequeno); color: var(--texto-suave); line-height: 1.4; }
.clima .nw { white-space: nowrap; }
@media (min-width: 600px) { .clima .sector { min-height: 2.5em; } }
/* En el celular: una lista compacta, una fila por sector (ícono, sector y detalle, temperatura a la derecha) */
@media (max-width: 599px) {
  .clima { gap: 0; grid-auto-rows: 1fr; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); overflow: hidden; }
  .clima li { border: 0; border-radius: 0; border-bottom: 1px solid var(--borde); padding: .6rem .85rem; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "ico sector temp" "ico lectura temp"; gap: .05rem .7rem; align-items: center; }
  .clima li:last-child { border-bottom: 0; }
  .clima .ico { width: 24px; height: 24px; align-self: center; }
  .clima .sector { font-size: .9375rem; }
  .clima .temp { font-size: 1.25rem; text-align: right; }
  .tarjeta-estado { padding: 1.35rem 1rem 1.25rem; }
  .clima .lectura { line-height: 1.35; }
}
.fuente-clima { margin: 0 0 1rem; }

/* ---------- Panel de noticias (gris oscuro, como en Ankara – Niğde) ---------- */
.panel-noticias { background: var(--grafito); color: #fff; margin-top: 4rem; }
.panel-noticias .contenedor { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .panel-noticias .contenedor { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.panel-noticias .columna-texto { padding: 3rem 0 3rem; }
@media (min-width: 900px) { .panel-noticias .columna-texto { padding-right: 3rem; } }
.panel-noticias h2 { color: #fff; margin: 0 0 1.5rem; }
.panel-noticias a { color: #fff; }
.panel-noticias .vacio { background: rgba(255,255,255,.07); color: #e3e6ea; }
.panel-noticias .boton { margin-top: .5rem; }
.lista-numerada { list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: noticia; }
.lista-numerada > li { counter-increment: noticia; margin: 0; padding: 1.1rem 0 1.1rem 4.5rem; border-bottom: 1px solid rgba(255,255,255,.14); position: relative; }
.lista-numerada > li:first-child { padding-top: 0; }
.lista-numerada > li::before { content: counter(noticia, decimal-leading-zero); position: absolute; left: 0; top: .75rem; font-size: 2.5rem; font-weight: 900; color: var(--amarillo); line-height: 1; }
.lista-numerada > li:first-child::before { top: -.3rem; }
.lista-numerada .meta { color: #c3c9d2; font-size: .875rem; margin: 0; }
.lista-numerada .titulo-noticia { color: var(--amarillo); text-transform: uppercase; font-size: 1.05rem; font-weight: 700; margin: .2rem 0 .35rem; letter-spacing: .02em; }
.lista-numerada .titulo-noticia a { color: var(--amarillo); }
.lista-numerada p { margin: 0; color: #e8ebef; }
.panel-noticias .noticia { border-bottom-color: rgba(255,255,255,.14); display: block; }
.panel-noticias .noticia .meta { color: #c3c9d2; }
.panel-noticias .noticia .titulo-noticia, .panel-noticias .noticia .titulo-noticia a { color: var(--amarillo); }
.panel-noticias a.boton-amarillo, .panel-noticias a.boton-amarillo:hover { color: var(--marino-profundo); }
.panel-noticias .foto-panel { position: relative; min-height: 280px; }
.panel-noticias .foto-panel .foto { position: absolute; inset: 0; margin: 0; }
.panel-noticias .foto-panel .foto img { height: 100%; aspect-ratio: auto; border-radius: 0; }
@media (max-width: 899px) { .panel-noticias .foto-panel { margin: 0 -1rem; } }

/* ---------- Información del proyecto ---------- */
.info-proyecto { padding-top: 4.5rem; padding-bottom: 1rem; }
.info-proyecto .rejilla-info { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1000px) { .info-proyecto .rejilla-info { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.cifras-iconos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.cifras-iconos.auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin-bottom: 2rem; }
.cifras-iconos li { margin: 0; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.15rem 1.15rem 1.05rem; display: flex; flex-direction: column; gap: .25rem; }
.cifras-iconos .ico { width: 40px; height: 40px; color: #fff; background: var(--marino); border-radius: var(--radio-grande); padding: 8px; margin-bottom: .6rem; }
.cifras-iconos .valor { font-size: 1.85rem; font-weight: 900; color: var(--marino); line-height: 1; }
.cifras-iconos .etiqueta { color: var(--texto-suave); font-size: .9375rem; line-height: 1.35; }
.figura-diagrama { margin: 0; }
.figura-diagrama .diagrama { width: 100%; height: auto; display: block; }
.figura-diagrama figcaption { margin-top: .75rem; }
.leyenda-numerada { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .6rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); font-size: .9375rem; }
.leyenda-numerada li { margin: 0; display: flex; gap: .65rem; align-items: flex-start; line-height: 1.4; }
.leyenda-numerada .num-circulo { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--amarillo); color: var(--marino); border: 2px solid var(--marino); font-weight: 900; display: grid; place-items: center; font-size: .875rem; margin-top: -.1rem; }
.leyenda-simbolos { list-style: none; padding: 1rem 0 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; font-size: .9375rem; border-top: 1px solid var(--borde); }
.leyenda-simbolos li { margin: 0; display: inline-flex; align-items: center; gap: .55rem; }
.simbolo { display: inline-block; flex: none; }
.simbolo-existente { width: 34px; height: 8px; background: #9aa3b2; border-radius: 4px; }
.simbolo-variante { width: 34px; height: 10px; background: var(--marino); border-radius: 5px; box-shadow: inset 0 0 0 1px var(--amarillo); }
.simbolo-segunda { width: 34px; height: 8px; background: var(--azul); border-radius: 4px; }
.simbolo-tunel { width: 14px; height: 18px; background: #0a1634; border: 2px solid #fff; outline: 1px solid #0a1634; border-radius: 3px; }
.simbolo-peaje { width: 18px; height: 18px; background: var(--amarillo); border: 2px solid var(--marino); border-radius: 4px; }
.desplazable { overflow-x: auto; }
.desplazable .diagrama { min-width: 760px; }
.caja-diagrama { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.5rem; margin: 1rem 0 1.5rem; }

/* ---------- Bloques amarillo y verde ---------- */
.bloques { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 3.5rem; }
.bloque { padding: 3rem 1rem; display: flex; flex-direction: column; }
@media (min-width: 720px) { .bloque { padding: 3rem 1.5rem; } }
.bloque h2 { margin: 0 0 .5rem; }
.bloque > p { margin: 0 0 1.5rem; }
.bloque > .boton { align-self: flex-start; margin-top: 1.75rem; }
.bloque-amarillo { background: var(--amarillo); color: var(--marino-profundo); }
.bloque-amarillo h2 { color: var(--marino-profundo); }
.bloque-amarillo a:not(.boton) { color: var(--marino-profundo); }
.bloque-verde { background: var(--verde); color: #fff; }
.bloque-verde h2, .bloque-verde a:not(.boton) { color: #fff; }
/* Categorías de vehículos: tres arriba y dos abajo (centradas), todas del mismo alto */
.categorias { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.categorias li { grid-column: span 2; margin: 0; background: rgba(255,255,255,.6); border-radius: var(--radio-grande); padding: 1rem .9rem; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.categorias li:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
.categorias li:nth-child(3n + 1):last-child { grid-column: 3 / span 2; }
.categorias .silueta { height: 40px; width: 100%; max-width: 100%; color: var(--marino-profundo); margin-bottom: .7rem; }
.categorias .cat { font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; }
.categorias .precio { font-weight: 900; font-size: 1.35rem; line-height: 1.1; margin-bottom: .4rem; }
.categorias .desc { font-size: .8125rem; line-height: 1.35; }
@media (max-width: 599px) {
  .categorias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .categorias li:nth-child(3n + 1):nth-last-child(2), .categorias li:nth-child(3n + 1):last-child { grid-column: span 2; }
  .categorias li:last-child:nth-child(2n + 1) { grid-column: 2 / span 2; }
}
@media (max-width: 459px) {
  .categorias { grid-template-columns: minmax(0, 1fr); }
  .categorias li, .categorias li:last-child:nth-child(2n + 1), .categorias li:nth-child(3n + 1):nth-last-child(2), .categorias li:nth-child(3n + 1):last-child { grid-column: auto; }
}
/* Servicios: los cuatro botones del mismo tamaño */
.enlaces-icono { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
@media (min-width: 700px) and (max-width: 1099px) { .enlaces-icono { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Bloques lado a lado: las filas de tarjetas de los dos bloques comparten el alto (subgrid),
   así las tarjetas de servicios miden lo mismo que las de tarifas y quedan alineadas */
@media (min-width: 1100px) {
  .bloques { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr 1fr auto; }
  .bloque { padding: 3.5rem max(1.5rem, calc((100vw - var(--ancho)) / 2 + 1.5rem)); }
  .bloque-amarillo { padding-right: 2.5rem; }
  .bloque-verde { padding-left: 2.5rem; }
  @supports (grid-template-rows: subgrid) {
    .bloque { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .bloque > .categorias, .bloque > .enlaces-icono { grid-row: span 2; grid-template-rows: subgrid; row-gap: .75rem; }
    .bloque > .boton { justify-self: start; align-self: start; }
  }
}
.enlaces-icono li { margin: 0; display: flex; }
.enlaces-icono a { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: .75rem; padding: 1.15rem 1.1rem; min-height: 8.5rem; border: 1px solid rgba(255,255,255,.5); border-radius: var(--radio-grande); text-decoration: none; font-weight: 700; line-height: 1.3; }
.enlaces-icono a:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.enlaces-icono .ico { width: 32px; height: 32px; stroke-width: 1.7; }
/* Flecha al pie de cada servicio: completa la tarjeta y anima al pasar el cursor */
.enlaces-icono a::after { content: ""; margin-top: auto; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--ico-flecha) no-repeat center / contain; mask: var(--ico-flecha) no-repeat center / contain; opacity: .85; transition: transform .3s var(--curva, ease); }
.enlaces-icono a:hover::after { transform: translateX(4px); opacity: 1; }

/* ---------- Tarjetas y rejillas ---------- */
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); list-style: none; padding: 0; margin: 0 0 1.5rem; }
.rejilla > li { margin: 0; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.35rem 1.4rem; height: 100%; display: flex; flex-direction: column; }
.tarjeta h2, .tarjeta h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.tarjeta p { margin: 0 0 .75rem; color: var(--texto-suave); }
.tarjeta .mas { margin-top: auto; font-weight: 700; color: var(--azul); }
.acceso { position: relative; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.acceso:hover { border-color: var(--marino); box-shadow: var(--sombra-fuerte); color: inherit; }
.acceso h3 { color: var(--marino); }
.icono { width: 44px; height: 44px; border-radius: var(--radio-grande); background: var(--marino); color: #fff; display: inline-grid; place-items: center; margin-bottom: .9rem; }
.icono svg { width: 24px; height: 24px; }

/* Pasos (PQRS) */
.pasos { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); counter-reset: paso; }
.pasos li { counter-increment: paso; margin: 0; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.15rem 1.15rem 1.2rem; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-content: start; }
.pasos li::before { content: "Paso " counter(paso); grid-column: 2; grid-row: 1; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); line-height: 1.4; }
.pasos .ico { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; padding: 10px; background: var(--marino); color: #fff; border-radius: var(--radio-grande); }
.pasos strong { grid-column: 2; display: block; color: var(--marino); font-size: 1.025rem; line-height: 1.3; margin: .1rem 0 .3rem; }
.pasos span { grid-column: 2; font-size: .9375rem; color: var(--texto-suave); line-height: 1.45; display: block; }

/* ---------- Tablas ---------- */
.tabla-envoltura { overflow-x: auto; margin: 0 0 1rem; border: 1px solid var(--borde); border-radius: var(--radio-grande); position: relative; max-width: 100%; }
.tabla-envoltura:focus-visible { outline-offset: 0; }
table { border-collapse: collapse; width: 100%; font-size: .9875rem; margin: 0; }
caption { text-align: left; font-weight: 700; padding: .85rem 1rem; color: var(--marino); background: #fff; border-bottom: 1px solid var(--borde); }
th, td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
thead th { background: var(--marino); color: #fff; font-weight: 700; font-size: .9375rem; }
tbody:last-child tr:last-child th, tbody:last-child tr:last-child td { border-bottom: 0; }
tbody + tbody { border-top: 2px solid var(--borde-fuerte); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.abscisa { min-width: 8.25rem; }
.tabla-tarifas td.valor { font-weight: 900; color: var(--marino); font-size: 1.1rem; white-space: nowrap; }
.tabla-tarifas .silueta { height: 30px; width: auto; max-width: 9rem; color: var(--marino); display: block; margin-bottom: .35rem; }
.tabla-envoltura + p, .tabla-envoltura + .nota-pequena, .tabla-envoltura + .fuente-contractual, .tabla-envoltura + .notas-tabla { margin-top: .5rem; }

/* ---------- Contactos ---------- */
.contactos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-bottom: 1rem; }
.contactos > * { min-width: 0; }
.contacto { border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.25rem 1.35rem; background: #fff; }
.contacto h3 { margin-top: 0; margin-bottom: .6rem; font-size: 1.1rem; }
.contacto p { margin: .35rem 0; }
.contacto a, .lateral a, .lista-lugares a { overflow-wrap: anywhere; }

/* ---------- Definiciones ---------- */
dl.datos { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: .5rem 1.25rem; }
dl.datos dt { font-weight: 600; color: var(--texto-suave); }
dl.datos dd { margin: 0; }
@media (max-width: 600px) { dl.datos { grid-template-columns: minmax(0, 1fr); gap: .15rem; } dl.datos dd { margin-bottom: .6rem; } }
dl.datos-compactos { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
dl.datos-compactos dt { margin-top: .5rem; font-size: .875rem; }
dl.cifras dt { font-weight: 600; color: var(--texto-suave); font-size: .875rem; }
dl.cifras dd { margin: 0 0 .85rem; font-size: 1.05rem; font-weight: 700; color: var(--marino); }
dl.definiciones dt { font-weight: 700; margin-top: .75rem; }
dl.definiciones dd { margin: 0; }
dl.ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
dl.ficha dt { font-weight: 700; color: var(--texto-suave); margin-top: .6rem; }
dl.ficha dd { margin: 0; }

/* ---------- Formularios ---------- */
.formulario { max-width: 46rem; }
/* Formulario de PQRS de Galgo (pqrs.html), dentro de un marco. Sin el mensaje de altura de Galgo, el marco ocupa casi toda la
   pantalla y el formulario se desplaza dentro de él; con el mensaje, el marco toma la altura exacta del formulario. */
.marco-pqrs { margin: 0 0 .5rem; border: 1px solid var(--borde); border-radius: var(--radio-grande); overflow: hidden; background: #fff; }
.marco-pqrs iframe { display: block; width: 100%; border: 0; height: 85vh; height: 85svh; min-height: 560px; background: #fff; }
.marco-pqrs iframe.alto-automatico { min-height: 0; }
.formulario fieldset { border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.25rem 1.35rem 1.35rem; margin: 0 0 1.5rem; min-width: 0; }
.formulario legend { font-weight: 700; color: var(--marino); padding: 0 .5rem; font-size: 1.075rem; }
.formulario > .nota-pequena:first-child { margin-top: 0; margin-bottom: 1rem; }
.campo { margin: 0 0 1.1rem; }
.campo label, .campo .etiqueta { display: block; font-weight: 600; margin-bottom: .3rem; }
.campo label.opcion { font-weight: 400; display: flex; margin: 0; }
.campo .ayuda, .ayuda { display: block; font-size: var(--texto-pequeno); line-height: 1.45; color: var(--texto-suave); margin: -.1rem 0 .4rem; }
fieldset > .ayuda { margin: .25rem 0 .75rem; }
.obligatorio { color: var(--cierre-texto); font-weight: 700; }
.fila { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: end; }
.fila > *, .directorio > *, .rejilla > * { min-width: 0; }
.opciones { display: grid; gap: .45rem; }
.opcion { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.opcion input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; flex: none; accent-color: var(--marino); }
.campo-error input, .campo-error select, .campo-error textarea { border: 2px solid var(--cierre-texto); }
.mensaje-error { color: var(--cierre-texto); font-weight: 600; display: block; margin-top: .3rem; font-size: .9375rem; }
.resumen-errores { border: 1px solid #efc1c1; background: var(--cierre-fondo); border-radius: var(--radio-grande); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.resumen-errores h2 { margin: 0 0 .4rem; font-size: 1.1rem; color: var(--cierre-texto); }
.resultado-formulario { border-radius: var(--radio-grande); padding: 1rem 1.25rem; margin: 1rem 0; }
.resultado-formulario.exito { background: var(--normal-fondo); color: var(--normal-texto); }
.resultado-formulario.info { background: var(--info-fondo); color: var(--info-texto); }
.autorizacion { background: var(--fondo-suave); border-radius: var(--radio-grande); padding: 1rem 1.15rem; font-size: .9375rem; margin: 0 0 1.5rem; }
.autorizacion p { font-size: var(--texto-pequeno); line-height: 1.5; color: var(--texto-suave); margin: 0 0 .75rem; }
input[type=file] { padding: .4rem 0; font-size: .9375rem; color: var(--texto-suave); }
input[type=file]::file-selector-button { font: inherit; font-weight: 700; color: var(--marino); background: #fff; border: 1px solid var(--marino); border-radius: 999px; padding: .45rem 1rem; margin-right: .75rem; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--azul-claro); }
.oculto-bots { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.termino { font-weight: 600; color: var(--marino); margin: .75rem 0 0; font-size: .9375rem; }

/* ---------- Filtros, noticias y documentos ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; margin: 0 0 1.5rem; }
.filtros .campo { margin: 0; min-width: min(100%, 12rem); }
.paginacion { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0; }
.lista-noticias { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.noticia { margin: 0; border-bottom: 1px solid var(--borde); padding-bottom: 1.25rem; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .noticia.con-foto { grid-template-columns: 15rem minmax(0, 1fr); } }
.noticia .foto { margin: 0; }
.noticia .foto img { aspect-ratio: 4 / 3; }
.noticia .titulo-noticia { margin: .25rem 0 .4rem; font-size: 1.2rem; }
.noticia .meta { font-size: .875rem; color: var(--texto-suave); margin: 0; }
.noticia .credito { font-size: .75rem; color: var(--texto-suave); }
.noticia details { margin-top: .5rem; }
.noticia summary { cursor: pointer; color: var(--azul); font-weight: 600; }
.lista-documentos { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--borde); }
.lista-documentos li { margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between; }
.lista-documentos .meta { color: var(--texto-suave); font-size: .875rem; }
.lista-servicios li { margin-bottom: .4rem; }
.notas-tabla { list-style: none; padding: 0; }
.mapa-sitio li { margin: .4rem 0; }
.mapa-sitio > li { font-weight: 600; margin-top: 1rem; }
.mapa-sitio ul li { font-weight: 400; }
.lista-enlaces { padding-left: 1.1em; }
.lista-enlaces li { margin: .45rem 0; }

/* ---------- Video de la página de inicio ---------- */
.seccion-video { padding-top: 3.5rem; }
/* Panel azul marino que se desvanece hacia el video. El texto va en blanco sobre la parte sólida del azul.
   Celular: el azul baja desde arriba (detrás del texto) y se desvanece detrás del video.
   Escritorio: el azul va de izquierda a derecha y se desvanece alrededor del video. */
.video-caja { --alto-video: calc((min(100vw, var(--ancho)) - 2rem - 2.5rem) * .5625);
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding: 2.25rem 1.25rem 1.25rem; border-radius: var(--radio-grande); }
.video-caja::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--marino-profundo) 0, var(--marino) calc(100% - var(--alto-video) - 1.25rem), rgba(19, 38, 90, 0) calc(100% - var(--alto-video) * .3)); }
@media (min-width: 900px) {
  .video-caja { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 3.5rem; padding: 3rem 2.5rem 3rem 3rem; }
  .video-caja::before { background: linear-gradient(90deg, var(--marino-profundo) 0, var(--marino) 34%, var(--marino) 39%, rgba(19, 38, 90, .82) 45%, rgba(19, 38, 90, .5) 52%, rgba(19, 38, 90, .24) 60%, rgba(19, 38, 90, .08) 67%, rgba(19, 38, 90, 0) 74%); }
}
.video-texto::before { content: ""; display: block; width: 3rem; height: 4px; margin-bottom: 1.1rem; background: var(--amarillo); border-radius: 2px; }
.video-texto .titulo-grande { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.4rem); margin-bottom: .85rem; color: #fff; }
.video-texto p { margin: 0; color: #dbe2f0; max-width: 32rem; line-height: 1.55; }
.video-marco { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radio-grande); background: var(--marino-profundo); }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-portada { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; display: grid; place-items: center; cursor: pointer; background: linear-gradient(135deg, var(--marino), var(--marino-profundo)); }
.video-portada:focus-visible { outline-offset: -6px; }
.video-portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva, ease), filter .3s ease; }
.video-portada:hover img { transform: scale(1.03); filter: brightness(.88); }
.video-reproducir { position: relative; width: clamp(64px, 11vw, 92px); height: clamp(64px, 11vw, 92px); border-radius: 50%; border: 3px solid #fff; background: rgba(11, 26, 61, .35); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.video-reproducir::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
.video-portada:hover .video-reproducir, .video-portada:focus-visible .video-reproducir { transform: scale(1.08); background: var(--amarillo); border-color: var(--amarillo); }
.video-portada:hover .video-reproducir::after, .video-portada:focus-visible .video-reproducir::after { border-left-color: var(--marino-profundo); }

/* ---------- Boletines: carrusel de la página de inicio ---------- */
.seccion-boletines { padding-top: 3.5rem; }
.boletines-cabecera { display: grid; gap: 1rem 3rem; grid-template-columns: minmax(0, 1fr); align-items: end; margin-bottom: 1.75rem; }
@media (min-width: 900px) { .boletines-cabecera { grid-template-columns: minmax(0, 1fr) auto; } }
.boletines-intro { position: relative; max-width: 46rem; padding-top: 1.35rem; }
.boletines-intro::before { content: ""; position: absolute; top: 0; left: 0; width: min(75%, 26rem); height: 4px; background: var(--amarillo); }
.boletines-intro p { color: var(--texto-suave); }
.boletines-intro p:last-child { margin-bottom: 0; }
.enlace-flecha { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 900; font-size: 1.125rem; color: var(--marino); text-decoration: none; }
.enlace-flecha .ico { width: 22px; height: 22px; flex: none; transition: transform .25s var(--curva, ease); }
.enlace-flecha:hover { color: var(--azul); text-decoration: underline; }
.enlace-flecha:hover .ico { transform: translateX(4px); }
.carrusel-pista { list-style: none; margin: -8px; padding: 8px 8px 12px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3rem) / 3); column-gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista > li { margin: 0; min-width: 0; scroll-snap-align: start; }
@media (max-width: 899px) { .carrusel-pista { grid-auto-columns: calc((100% - 1.25rem) / 2); column-gap: 1.25rem; } }
@media (max-width: 559px) { .carrusel-pista { grid-auto-columns: 84%; column-gap: 1rem; } }
.tarjeta-boletin { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; border-radius: var(--radio-grande); }
.tarjeta-boletin .portada-boletin { aspect-ratio: 5 / 4; }
.tarjeta-boletin:hover .portada-boletin img { transform: scale(1.04); }
.tarjeta-boletin h3 { margin: 0 0 .4rem; font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.tarjeta-boletin:hover h3 { color: var(--azul); text-decoration: underline; text-decoration-thickness: 2px; }
.tarjeta-boletin .meta { margin-top: auto; font-size: var(--texto-pequeno); color: var(--texto-suave); }
.carrusel-controles { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }
.carrusel-controles[hidden] { display: none; }
.carrusel-controles .boton-icono { border: 2px solid var(--marino); }
.carrusel-controles .boton-icono:disabled { opacity: .3; cursor: default; background: transparent; }

/* Portada de boletín (carrusel y página Boletines) */
.portada-boletin, .portada-mini { display: block; overflow: hidden; background: var(--azul-claro); }
.portada-boletin { border-radius: var(--radio-grande); }
.portada-mini { border-radius: var(--radio); aspect-ratio: 4 / 3; }
.portada-boletin img, .portada-mini img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva, ease); }
.sin-imagen { display: grid; place-items: center; color: var(--azul); background: linear-gradient(135deg, var(--azul-claro), #dbe3f1); }
.sin-imagen .ico { width: 34%; max-width: 72px; height: auto; }
.etiqueta-boletin { display: block; margin: 1rem 0 .3rem; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--azul); }

/* Página Boletines: el más reciente con su portada a la izquierda; los anteriores en un desplegable */
.boletin-destacado { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin: 1rem 0; padding: 1.1rem; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: #fff; }
.boletin-destacado .portada-boletin { aspect-ratio: 4 / 3; }
.boletin-destacado .etiqueta-boletin { margin-top: 0; }
.boletin-destacado h3 { margin: 0 0 .35rem; font-size: 1.2rem; }
.boletin-destacado .meta { margin: 0 0 .85rem; font-size: .875rem; color: var(--texto-suave); }
.boletin-destacado .boton .ico { margin-right: .4rem; }
@media (max-width: 479px) { .boletin-destacado { grid-template-columns: 6.75rem minmax(0, 1fr); gap: .9rem; padding: .85rem; } .boletin-destacado h3 { font-size: 1.0625rem; } }
.historial-boletines { margin: 0 0 2rem; }
.lista-boletines { list-style: none; margin: 0; padding: 0 1.1rem 1rem; }
.lista-boletines li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .9rem; align-items: center; margin: 0; padding: .85rem 0; border-top: 1px solid var(--borde); }
.lista-boletines a { font-weight: 700; }
.lista-boletines .meta { display: block; font-size: .875rem; color: var(--texto-suave); }
@media (max-width: 479px) { .lista-boletines { padding: 0 .85rem .85rem; } .lista-boletines li { grid-template-columns: 4.5rem minmax(0, 1fr); } }

/* ---------- Mapa ---------- */
#mapa { height: 580px; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--fondo-suave); }
@media (max-width: 600px) { #mapa { height: 440px; } }
/* Filtros sobre el mapa: un botón por categoría; el activo queda en azul oscuro */
.filtros-mapa { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .4rem; }
.filtro-mapa { display: inline-flex; align-items: center; justify-content: flex-start; text-align: left; gap: .15rem; min-height: 44px; padding: .45rem 1.05rem; border: 2px solid var(--marino); border-radius: 999px; background: #fff; color: var(--marino); font-weight: 700; line-height: 1.15; cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.filtro-mapa:hover { background: var(--azul-claro); }
.filtro-mapa[aria-pressed="true"] { background: var(--marino); color: #fff; }
.filtro-mapa[aria-pressed="true"] .muestra { box-shadow: 0 0 0 2px #fff; }
@media (max-width: 559px) { .filtros-mapa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .filtro-mapa { padding: .45rem .45rem .45rem .75rem; font-size: .9375rem; }
  .filtro-mapa:not(:has(.muestra))::before { content: ""; flex: none; width: .85rem; margin-right: .35rem; } }   /* «Todo» alineado con los demás textos */
.estado-filtro { min-height: 1.5em; margin: 0 0 .6rem; font-size: var(--texto-pequeno); color: var(--texto-suave); }
/* Desplegable (details): resumen con flecha propia; se usa en las capas del mapa y en el historial de boletines */
.desplegable { border: 1px solid var(--borde); border-radius: var(--radio-grande); background: #fff; }
.desplegable > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .6rem 1.1rem; font-weight: 700; color: var(--marino); border-radius: var(--radio-grande); }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after { content: ""; flex: none; width: .55em; height: .55em; margin: -.25em .25rem 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.desplegable[open] > summary::after { transform: rotate(-135deg); margin-top: .3em; }
.desplegable > summary:hover { background: var(--azul-claro); }
details.capas { margin: .75rem 0 1rem; }
details.capas + .nota { margin-bottom: 2.5rem; }
details.capas fieldset { border: 0; padding: 0 1.1rem 1.1rem; margin: 0; min-width: 0; }
@media (min-width: 700px) { details.capas .opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }
.muestra { display: inline-block; flex: none; width: .85rem; height: .85rem; border-radius: 50%; margin-right: .35rem; vertical-align: -.08rem; }
.muestra-linea { width: 1.15rem; height: .3rem; border-radius: 2px; vertical-align: .15rem; }

/* ---------- Lugares y valores ---------- */
.galeria { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin: 0 0 2rem; }
.galeria .foto { margin: 0; }
.galeria-dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.lista-lugares { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1rem; }
.lista-lugares li { margin: 0; border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.1rem 1.25rem; background: #fff; }
.lista-lugares h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.lista-lugares p { margin: .3rem 0; }
.lista-lugares .tipo { font-size: .8125rem; color: var(--texto-suave); font-weight: 600; }
/* Sitios de interés cultural: un grupo por municipio. En el celular, las tarjetas se deslizan de lado. */
.municipio-sitios { margin: 0 0 2.75rem; }
.municipio-sitios h2 { margin-bottom: .35rem; }
.municipio-sitios > p { color: var(--texto-suave); max-width: 62rem; margin: 0 0 1.1rem; }
.sitios-fila { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sitio { margin: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); overflow: hidden; }
.sitio img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fondo-suave); }
.sitio-texto { flex: 1; display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.15rem 1.15rem; }
.sitio h3 { margin: 0; font-size: 1.125rem; }
.sitio p { margin: 0; }
.sitio .sitio-ubicacion { margin-top: auto; padding-top: .4rem; display: flex; gap: .4rem; align-items: flex-start; font-size: .9375rem; color: var(--texto-suave); }
.sitio-ubicacion .ico { flex: none; width: 1.1em; height: 1.1em; margin-top: .2em; color: var(--marino); }
.sitios-pista { display: none; }
.sitios-desliza { position: relative; }   /* contiene los textos solo para lectores de pantalla (posición absoluta) */
@media (max-width: 759px) {
  .sitios-pista { display: flex; align-items: center; gap: .35rem; margin: -.4rem 0 .6rem; font-size: .875rem; font-weight: 600; color: var(--marino); }
  .sitios-pista .ico { width: 1em; height: 1em; }
  .sitios-desliza { margin: 0 -1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .sitios-fila { display: flex; gap: .85rem; width: max-content; padding: .15rem 1rem 1rem; }
  .sitio { flex: none; width: min(80vw, 20rem); scroll-snap-align: start; }
}
.valores { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
@media (min-width: 640px) { .valores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .valores { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.valores li { margin: 0; background: var(--fondo-suave); border-radius: var(--radio-grande); padding: 1rem 1.15rem; display: flex; align-items: center; }
.valores strong { display: block; color: var(--marino); font-size: 1rem; line-height: 1.3; }

/* ---------- Fotografías ---------- */
.foto { margin: 0 0 1.25rem; }
.foto img { display: block; width: 100%; height: auto; border-radius: var(--radio-grande); aspect-ratio: 3 / 2; object-fit: cover; background: var(--fondo-suave); }
.foto figcaption { margin-top: .5rem; }

/* ---------- Utilidades ---------- */
.mt-0 { margin-top: 0; }
.separado { margin-top: 1.5rem; }
.dos-columnas { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; } }
.columnas-iguales { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .columnas-iguales { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.lateral { background: var(--fondo-suave); border-radius: var(--radio-grande); padding: 1.5rem 1.5rem 1.25rem; align-self: start; }
.lateral h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
.lateral h2 + * { margin-top: 0; }
.lateral h2:not(:first-child) { margin-top: 1.75rem; }
.en-linea { display: inline; }
a[href^="tel:"] { white-space: nowrap; }

/* ---------- Logos institucionales (Manual de Identidad Visual 2024 de la ANI: Vigilado SuperTransporte, concesión, ANI) ---------- */
.franja-logos { background: var(--fondo-suave); padding: 2.5rem 0; margin-top: 4rem; }
.seccion-gris + .pie .franja-logos, .bloques + .pie .franja-logos { margin-top: 0; }
.seccion-gris + .pie .franja-logos { border-top: 1px solid var(--borde); }
.logos-institucionales { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.logos-institucionales li { margin: 0; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); display: flex; align-items: center; justify-content: center; padding: 1rem 1.5rem; height: 132px; }
/* Mismo peso visual: los logos anchos van más bajos y el vertical más alto */
.logos-institucionales img { display: block; width: auto; max-width: 100%; object-fit: contain; }
.logos-institucionales li:has(> a) { padding: 0; }
.logos-institucionales li > a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem 1.5rem; border-radius: inherit; }
.logos-institucionales .logo-horizontal { height: 52px; }
.logos-institucionales .logo-medio { height: 72px; }
.logos-institucionales .logo-vertical { height: 94px; }
@media (max-width: 640px) { .logos-institucionales { grid-template-columns: minmax(0, 1fr); } .logos-institucionales li { height: 120px; } .logos-institucionales .logo-horizontal { height: 46px; } .logos-institucionales .logo-medio { height: 64px; } .logos-institucionales .logo-vertical { height: 84px; } }

/* ---------- Pie: banda amarilla de navegación y base oscura ---------- */
.pie { margin-top: 0; font-size: .9375rem; }
.pie-navegacion { background: var(--amarillo); color: var(--marino-profundo); padding: 2.75rem 0 2.5rem; }
.pie-navegacion .rejilla-pie { display: grid; gap: 1.75rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.pie-navegacion h2 { font-size: .875rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 900; color: var(--marino-profundo); margin: 0 0 .75rem; }
.pie-navegacion ul { list-style: none; padding: 0; margin: 0; }
.pie-navegacion li { margin: .4rem 0; }
.pie-navegacion a { color: var(--marino-profundo); text-decoration: none; font-weight: 600; }
.pie-navegacion a:hover { text-decoration: underline; }
.pie-oscuro { background: var(--grafito); color: #e3e6ea; padding: 2.75rem 0 2.25rem; }
.pie-oscuro a { color: #fff; }
.pie-oscuro h2, .pie-oscuro h3 { color: #fff; }
.pie-titulo { margin: 0 0 1.5rem; font-size: 1.25rem; text-transform: uppercase; font-weight: 900; }
.directorio { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.directorio h3 { font-size: .8125rem; margin: 0 0 .75rem; text-transform: uppercase; letter-spacing: .08em; color: #aeb6c2; font-weight: 700; }
.directorio h3.separado { margin-top: 1.75rem; }
.directorio p { margin: 0 0 .6rem; line-height: 1.5; }
@media (min-width: 900px) { .directorio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 2.5rem; } }
.pie-subtitulo { margin: 1.25rem 0 .5rem !important; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: #aeb6c2; font-weight: 700; }
.redes-pie { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.redes-pie li { margin: 0; }
.redes-pie a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); color: #fff; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.redes-pie a:hover, .redes-pie a:focus-visible { background: var(--amarillo); border-color: var(--amarillo); color: var(--marino-profundo); }
.redes-pie .ico { width: 18px; height: 18px; }
.lista-pie { margin: 0 0 .6rem; padding-left: 1.1rem; }
.lista-pie li { margin: 0 0 .3rem; line-height: 1.45; }
.pie mark.pendiente { background: #fff1b8; color: #4a3800; }
.pie mark.proximo { background: #e6edf9; color: #1a2f63; }
.pie-base { background: var(--grafito-2); color: #b9c0ca; padding: 1.25rem 0; font-size: var(--texto-pequeno); }
.pie-base .contenedor { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; justify-content: space-between; align-items: center; }
.pie-base p { margin: 0; }
.pie-base ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.pie-base li { margin: 0; }
.pie-base a { color: #fff; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* ---------- Movimiento (sutil; desactivado si el usuario pidió reducir el movimiento) ---------- */
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes desplegar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes acercar { from { transform: scale(1.07); } to { transform: scale(1); } }
:root { --curva: cubic-bezier(.2, .7, .2, 1); }
/* Transiciones de los elementos interactivos */
.boton, .acceso-rapido, .enlaces-icono a, .menu-enlace, .menu-boton, .submenu a, .lista-enlaces a { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease, transform .25s var(--curva), filter .2s ease; }
.boton .ico, .acceso-rapido .ico, .enlaces-icono .ico { transition: transform .3s var(--curva); }
.boton:hover .ico:last-child, .acceso-rapido:hover .pildora .ico { transform: translateX(3px); }
.acceso-rapido:hover > .ico:first-child { transform: translateY(-3px); }
.enlaces-icono a:hover { transform: translateY(-3px); }
.enlaces-icono a:hover .ico { transform: scale(1.08); }
.logos-institucionales li { transition: transform .3s var(--curva), box-shadow .3s ease, border-color .3s ease; }
.logos-institucionales li:has(> a):hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11,26,61,.1); border-color: var(--borde-fuerte); }
@media (prefers-reduced-motion: no-preference) {
  /* Portada y banda de título de cada página */
  .portada-fondo .foto img { animation: acercar 2.8s var(--curva) both; }
  .portada-texto > * { animation: subir .8s var(--curva) both; }
  .portada-texto > :nth-child(2) { animation-delay: .1s; }
  .portada-texto > :nth-child(3) { animation-delay: .2s; }
  .banda-pagina h1, .banda-pagina h1 ~ p { animation: subir .7s var(--curva) both; }
  .banda-pagina h1 ~ p { animation-delay: .1s; }
  /* Aparición al desplazarse (la clase .anim la pone app.js; sin JavaScript todo se ve de inmediato) */
  .anim .revelar { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: calc(var(--i, 0) * 70ms); }
  .anim .revelar.visible { opacity: 1; transform: none; }
  /* El esquema del corredor dibuja la nueva variante */
  .anim .revelar .trazo { stroke-dasharray: 1 1.02; stroke-dashoffset: 1; }
  .anim .revelar.visible .trazo { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1) .3s; }
  .anim .revelar.visible .trazo-2 { transition-delay: 1.4s; transition-duration: .6s; }
  .anim .revelar.visible .trazo-3 { transition-delay: 1.8s; transition-duration: .8s; }
  .anim .revelar .tras-trazo { opacity: 0; }
  .anim .revelar.visible .tras-trazo { opacity: 1; transition: opacity .6s ease 1.5s; }
}

@media print {
  .anim .revelar, .anim .revelar .tras-trazo { opacity: 1 !important; transform: none !important; }
  .anim .revelar .trazo { stroke-dasharray: none !important; }
  .barra-revision, .cinta-ejemplo, .navegacion, .acciones-cabecera, .busqueda-pantalla, .pie-navegacion, .saltar, .accesos-rapidos { display: none !important; }
  .banda-pagina, .pie-oscuro, .pie-base, .panel-noticias { background: none !important; color: #000 !important; }
  .banda-pagina h1, .pie-oscuro a, .pie-oscuro h2, .pie-oscuro h3 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* Noticia a la que se llega desde la página de inicio (#noticia-...) */
.noticia.resaltada { background: var(--azul-claro); box-shadow: 0 0 0 .75rem var(--azul-claro); border-radius: 2px; }
.noticia:focus { outline: none; }
.noticia:focus-visible { outline: 3px solid var(--foco); outline-offset: .75rem; }

/* Oficinas de atención al usuario (Canales de atención) */
.lista-oficinas { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1rem; }
.lista-oficinas li { margin: 0; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--amarillo); border-radius: var(--radio-grande); }
.lista-oficinas h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.lista-oficinas p { margin: 0 0 .2rem; }

/* Mapa de tramos e intervenciones (El Proyecto > Unidades Funcionales) */
.figura-mapa-uf { margin: 1.5rem 0 2rem; }
.figura-mapa-uf img { display: block; width: 100%; height: auto; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: #fff; }
.figura-mapa-uf figcaption { margin-top: .5rem; font-size: var(--texto-pequeno); color: var(--texto-suave); }

/* Gobierno corporativo: objetivos con letras como en el Manual y listas de principios y órganos */
.lista-letras { list-style-type: lower-alpha; }
.principios li, .lista-letras li { margin-bottom: .5rem; }