/*
 * QueVer.info — «Panel de salidas».
 * Guía de viajes: el tablero negro de un aeropuerto con el amarillo de la señalética (y del sol del logotipo antiguo),
 * el rojo de la marca y las fotos como postales. Sofia Sans Extra Condensed para los destinos, Sofia Sans para leer,
 * Spline Sans Mono para los datos del tablero.
 */

:root {
  --tablero: #16181d;
  --tablero-2: #1f2228;
  --tablero-3: #2a2e36;
  --tablero-linea: #383c45;
  --tablero-texto: #e9eaec;
  --tablero-tenue: #a7abb3;
  --amarillo: #ffc61a;
  --amarillo-claro: #ffe27a;
  --rojo: #b9232b;
  --rojo-oscuro: #8f1a20;
  --papel: #f6f4ef;
  --blanco: #fff;
  --tinta: #1b1c20;
  --tenue: #5a5d65;
  --borde: #dcd8cf;

  --rotulo: 'Sofia Sans Extra Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --texto: 'Sofia Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --e-1: .5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4rem;
  --e-7: 6rem;
  --margen: clamp(1.25rem, 4vw, 2.5rem);
  --ancho: 76rem;
  --medida: 40rem;
  --radio: 4px;

  --ancho-texto: var(--medida);
  --color-texto: var(--tinta);
  --color-fondo: var(--papel);
  --color-suave: #ece8df;
  --color-borde: var(--borde);
  --color-acento: var(--rojo);
  --color-acento-texto: #fff;
  --color-tenue: var(--tenue);
  --fuente-texto: var(--texto);
  --fuente-titulos: var(--rotulo);
  color-scheme: light;
  accent-color: var(--rojo);
  scrollbar-color: var(--tablero-3) var(--papel);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { background: var(--amarillo); color: var(--tablero); }
img { max-width: 100%; height: auto; }
a { color: var(--rojo); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .18s ease; }
a:hover { color: var(--rojo-oscuro); }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
main { display: block; outline: none; }
.envoltorio { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.x-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icono { flex: none; }
.saltar { position: absolute; left: var(--e-2); top: -4rem; z-index: 100; padding: .75rem 1.25rem; background: var(--amarillo); color: var(--tablero); font-weight: 700; border-radius: var(--radio); }
.saltar:focus { top: var(--e-2); }

.antetitulo { margin: 0 0 var(--e-1); font: 600 .9375rem/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--rojo); }

.boton, .contenido .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .7rem 1.4rem;
  border: 0; border-radius: var(--radio); background: var(--tablero); color: #fff; font: 700 1rem/1.1 var(--texto);
  text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.boton:hover, .contenido .boton:hover { background: var(--rojo); color: #fff; transform: translateY(-1px); box-shadow: none; }
.boton .icono { transition: transform .2s ease; }
.boton:hover .icono-flecha { transform: translateX(3px); }

/* señal luminosa del tablero */
.tablero-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 var(--e-2); font: 600 .8125rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); }
.tablero-rotulo a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.tablero-rotulo a:hover { color: #fff; }
.tablero-luz { width: 8px; height: 8px; border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 0 4px rgba(255, 198, 26, .18); }
@media (prefers-reduced-motion: no-preference) { .tablero-luz { animation: parpadeo 2.4s ease-in-out infinite; } }
@keyframes parpadeo { 50% { opacity: .35; } }

.sol { display: block; color: var(--amarillo); }

/* ------------------------------------------------------------------ cabecera */

.cabecera { position: sticky; top: 0; z-index: 50; background: var(--tablero); color: var(--tablero-texto); border-bottom: 1px solid var(--tablero-linea); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 64px; }
.marca { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; color: #fff; text-decoration: none; }
.marca:hover { color: #fff; }
.marca-sol { width: 30px; height: 30px; transition: transform .6s ease; }
.marca:hover .marca-sol { transform: rotate(45deg); }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nombre { font: 800 1.75rem/.9 var(--rotulo); letter-spacing: .005em; }
.marca-nombre span { color: var(--amarillo); }
.marca-lema { margin-top: .25rem; font: 500 .6875rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tablero-tenue); }

.menu-boton { display: inline-flex; align-items: center; gap: .5rem; min-width: 44px; min-height: 44px; padding: 0 .85rem; margin-right: -.5rem; border: 1px solid var(--tablero-linea); border-radius: var(--radio); background: transparent; color: #fff; font: 700 .9375rem/1 var(--texto); cursor: pointer; }
.menu-boton:hover { border-color: var(--amarillo); }
.menu-boton-icono { display: inline-grid; }
.menu-boton-icono .icono { grid-area: 1 / 1; }
.menu-boton .icono-cerrar, .menu-boton-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .icono-cerrar, .menu-boton[aria-expanded="true"] .menu-boton-cerrar { display: inline; }
.menu-boton[aria-expanded="true"] .icono-menu, .menu-boton[aria-expanded="true"] .menu-boton-abrir { display: none; }
.navegacion .menu { list-style: none; margin: 0; padding: 0; }
.navegacion a { text-decoration: none; }

@media (max-width: 63.99rem) {
  .navegacion { position: fixed; inset: 64px 0 0 0; z-index: 40; display: none; flex-direction: column; gap: var(--e-3); padding: var(--e-3) var(--margen) calc(var(--e-5) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--tablero); }
  .navegacion.abierto { display: flex; animation: aparecer .2s ease; }
  html.menu-abierto, html.menu-abierto body { overflow: hidden; }
  .navegacion .menu a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--tablero-linea); font: 800 2rem/1 var(--rotulo); text-transform: uppercase; color: #fff; letter-spacing: .01em; }
  .navegacion .menu a[aria-current] { color: var(--amarillo); }
  .navegacion-buscar { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; border-radius: var(--radio); background: var(--amarillo); color: var(--tablero); font: 700 1.0625rem/1 var(--texto); }
  .navegacion-rotulo { margin: 0 0 var(--e-1); font: 600 .8125rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tablero-tenue); }
  .navegacion-destinos ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e-2); list-style: none; margin: 0; padding: 0; }
  .navegacion-destinos a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--tablero-2); color: var(--tablero-texto); font-weight: 600; }
  .navegacion-destinos a[aria-current] { color: var(--amarillo); }
}
@media (min-width: 64rem) {
  .cabecera-fila { min-height: 76px; }
  .menu-boton, .navegacion-destinos { display: none; }
  .navegacion { display: flex; align-items: center; gap: var(--e-3); }
  .navegacion .menu { display: flex; gap: var(--e-3); }
  .navegacion .menu a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font: 600 .9375rem/1 var(--texto); color: var(--tablero-texto); }
  .navegacion .menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--amarillo); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
  .navegacion .menu a:hover, .navegacion .menu a[aria-current] { color: #fff; }
  .navegacion .menu a:hover::after, .navegacion .menu a[aria-current]::after { transform: scaleX(1); }
  .navegacion-buscar { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border-radius: var(--radio); background: var(--amarillo); color: var(--tablero); font: 700 .9375rem/1 var(--texto); transition: background-color .2s ease; }
  .navegacion-buscar:hover { background: var(--amarillo-claro); color: var(--tablero); }
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ portada: salidas */

.salidas { background: var(--tablero) repeating-linear-gradient(180deg, transparent 0 63px, rgba(255, 255, 255, .025) 63px 64px); color: var(--tablero-texto); padding-block: var(--e-5) var(--e-6); }
.salidas-fila { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 64rem) { .salidas-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--e-6); } }
.salidas-titulo { margin: 0 0 var(--e-3); font: 900 clamp(3rem, 1.6rem + 6vw, 6.25rem)/.88 var(--rotulo); text-transform: uppercase; letter-spacing: -.005em; color: #fff; }
.salidas-titulo span { display: block; color: var(--amarillo); }
.salidas-intro { margin: 0 0 var(--e-4); max-width: 34rem; font-size: 1.1875rem; line-height: 1.55; color: #d5d7db; }
.salidas-buscador .x-buscador { display: flex; gap: .5rem; max-width: 34rem; }
.x-buscador label { flex: 1; }
.x-buscador input { width: 100%; min-height: 56px; padding: .75rem 1.1rem; border: 2px solid transparent; border-radius: var(--radio); background: #fff; color: var(--tinta); font: 500 1.0625rem/1.2 var(--texto); }
.x-buscador input:focus { outline: none; border-color: var(--amarillo); box-shadow: 0 0 0 4px rgba(255, 198, 26, .3); }
.x-buscador button { min-height: 56px; padding: 0 1.5rem; border: 0; border-radius: var(--radio); background: var(--amarillo); color: var(--tablero); font: 800 1.0625rem/1 var(--texto); cursor: pointer; transition: background-color .2s ease; }
.x-buscador button:hover { background: var(--amarillo-claro); transform: none; box-shadow: none; }
.salidas-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: var(--e-3) 0 0; }
.salidas-atajos span { font: 600 .8125rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tablero-tenue); margin-right: .25rem; }
.salidas-atajos a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border: 1px solid var(--tablero-linea); border-radius: 999px; color: #fff; font-weight: 600; font-size: .9375rem; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.salidas-atajos a:hover { border-color: var(--amarillo); color: var(--amarillo); }

.mosaico { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b c" "d e"; list-style: none; margin: 0; padding: 0; }
.mosaico-1 { grid-area: a; } .mosaico-2 { grid-area: b; } .mosaico-3 { grid-area: c; } .mosaico-4 { grid-area: d; } .mosaico-5 { grid-area: e; }
@media (min-width: 40rem) { .mosaico { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(8rem, 1fr)); grid-template-areas: "a a b" "a a c" "d e e"; } }
.mosaico a { position: relative; display: block; height: 100%; min-height: 8rem; overflow: hidden; border-radius: var(--radio); background: var(--tablero-2); }
.mosaico-1 a { min-height: 14rem; }
.mosaico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mosaico a:hover img { transform: scale(1.04); }
.mosaico a::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(10, 11, 14, .78)); }
.mosaico span { position: absolute; z-index: 1; left: .75rem; bottom: .55rem; font: 800 1.375rem/1 var(--rotulo); text-transform: uppercase; color: #fff; letter-spacing: .01em; }
.mosaico-1 span { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); left: 1rem; bottom: .8rem; }

/* tablero de salidas */
.tablero { background: var(--tablero-2); color: var(--tablero-texto); padding-block: var(--e-6); border-top: 1px solid var(--tablero-linea); }
.tablero-cabecera { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-4); }
.tablero-titulo { display: flex; align-items: center; gap: .75rem; margin: 0; font: 900 clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem)/1 var(--rotulo); text-transform: uppercase; color: #fff; }
.tablero-titulo .icono { width: 2.25rem; height: 2.25rem; color: var(--amarillo); }
.tablero-texto { margin: 0; color: var(--tablero-tenue); max-width: 32rem; }
.tablero-panel { border: 1px solid var(--tablero-linea); border-radius: 6px; background: var(--tablero); overflow: hidden; }
.tablero-columnas, .tablero-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem var(--e-2); align-items: center; }
.tablero-columnas { display: none; margin: 0; padding: .75rem var(--e-3); border-bottom: 1px solid var(--tablero-linea); font: 600 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tablero-tenue); }
.tablero-filas { list-style: none; margin: 0; padding: 0; }
.tablero-filas li + li { border-top: 1px solid var(--tablero-3); }
.tablero-fila { padding: .75rem var(--e-2); color: var(--tablero-texto); text-decoration: none; font: 500 .9375rem/1.3 var(--mono); transition: background-color .15s ease; }
.tablero-fila:hover { background: var(--tablero-3); color: #fff; }
.tf-destino { grid-row: 1; font: 800 1.75rem/1.05 var(--rotulo); text-transform: uppercase; letter-spacing: .03em; color: var(--amarillo); }
.tf-pais { grid-row: 2; grid-column: 1; color: var(--tablero-tenue); }
.tf-fecha, .tf-num { display: none; font-variant-numeric: tabular-nums; }
.tf-ver { grid-row: 1 / 3; grid-column: 2; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--tablero-linea); border-radius: var(--radio); font: 700 .875rem/1 var(--texto); text-transform: uppercase; letter-spacing: .06em; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.tablero-fila:hover .tf-ver { background: var(--amarillo); border-color: var(--amarillo); color: var(--tablero); }
@media (min-width: 48rem) {
  .tablero-columnas, .tablero-fila { grid-template-columns: minmax(0, 1fr) 11rem 6.5rem 4rem 6.5rem; }
  .tablero-columnas { display: grid; }
  .tablero-fila { padding: .55rem var(--e-3); min-height: 64px; }
  .tf-destino, .tf-pais, .tf-fecha, .tf-num, .tf-ver { grid-row: 1; grid-column: auto; }
  .tf-fecha, .tf-num { display: block; }
  /* puntos guía del destino hasta el país, como en un horario */
  .tf-destino { display: flex; align-items: baseline; gap: .75rem; font-size: 2rem; }
  .tf-destino::after { content: ""; flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--tablero-linea); transform: translateY(-.3em); }
  .tablero-fila:hover .tf-destino::after { border-color: rgba(255, 198, 26, .45); }
  .tf-ver { justify-self: end; }
}

/* zonas y postales */
.zona { padding-block: var(--e-6); }
.zona-cabecera { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-1) var(--e-3); margin-bottom: var(--e-4); }
.zona-cabecera > .antetitulo { flex-basis: 100%; }
.zona-titulo { margin: 0; font: 900 clamp(2.75rem, 1.8rem + 4vw, 5rem)/.9 var(--rotulo); text-transform: uppercase; color: var(--tinta); letter-spacing: -.005em; }
.zona-titulo--medio { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }
.zona-texto { flex-basis: 100%; margin: var(--e-1) 0 0; max-width: 44rem; color: var(--tenue); }
.zona-enlace { margin: 0; }
.zona-enlace a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; text-decoration: none; }

.rejilla-postales { display: grid; gap: var(--e-4) var(--e-3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .rejilla-postales { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .rejilla-postales { grid-template-columns: repeat(3, 1fr); } }
.rejilla-mundo { display: grid; gap: var(--e-4) var(--e-3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .rejilla-mundo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .rejilla-mundo { grid-template-columns: repeat(4, 1fr); } .rejilla-mundo .postal-grande { grid-column: span 2; } }

.postal { display: flex; flex-direction: column; gap: .7rem; }
.postal-enlace { position: relative; display: block; padding: .5rem; background: var(--blanco); border-radius: 3px; box-shadow: 0 1px 2px rgba(22, 24, 29, .08), 0 14px 30px -20px rgba(22, 24, 29, .5); color: #fff; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.postal-enlace:hover { color: #fff; transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 1px 2px rgba(22, 24, 29, .08), 0 22px 36px -20px rgba(22, 24, 29, .55); }
.postal-foto { position: relative; display: block; overflow: hidden; background: #e6e2d8; border-radius: 2px; }
.postal-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.postal-grande .postal-foto img { aspect-ratio: 16 / 10; }
.postal-foto::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(10, 11, 14, .72)); }
.postal-rotulo { position: absolute; z-index: 1; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.postal-ante { padding: .2rem .45rem; background: var(--amarillo); color: var(--tablero); font: 600 .75rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-radius: 2px; }
.postal-destino { margin: 0; font: 900 clamp(2rem, 1.6rem + 1vw, 2.5rem)/.92 var(--rotulo); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.postal-grande .postal-destino { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); }
.postal-datos { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding-inline: .25rem; font-size: .9375rem; color: var(--tenue); }
.postal-datos > span { display: inline-flex; align-items: center; gap: .35rem; }
.postal-datos .icono { width: 17px; height: 17px; color: var(--rojo); }
.postal-lugar { color: var(--tinta); font-weight: 600; }

/* banda «gratis» */
.banda { background: var(--amarillo); color: var(--tablero); padding-block: var(--e-5); }
.banda-fila { display: grid; gap: var(--e-3); align-items: center; }
@media (min-width: 48rem) { .banda-fila { grid-template-columns: 6rem minmax(0, 1fr); gap: var(--e-5); } }
.banda-sol { width: 5rem; height: 5rem; color: var(--tablero); }
@media (prefers-reduced-motion: no-preference) { .banda-sol { animation: girar 40s linear infinite; } }
@keyframes girar { to { transform: rotate(360deg); } }
.banda-texto { margin: 0; max-width: 54rem; font: 700 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.4 var(--texto); }

/* guía a fondo */
.a-fondo { background: var(--blanco); padding-block: var(--e-6); border-block: 1px solid var(--borde); }
.a-fondo-fila { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 64rem) { .a-fondo-fila { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--e-6); } }
.a-fondo-principal { display: block; overflow: hidden; border-radius: var(--radio); max-width: 48rem; }
.a-fondo-principal img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.a-fondo-tira { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.a-fondo-tira img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.a-fondo-titulo { margin: 0 0 var(--e-3); font: 900 clamp(3rem, 2rem + 4vw, 5.25rem)/.88 var(--rotulo); text-transform: uppercase; color: var(--tinta); }
.a-fondo-titulo span { display: block; font-size: .42em; line-height: 1.1; color: var(--rojo); letter-spacing: .02em; }
.a-fondo-extracto { margin: 0 0 var(--e-4); font-size: 1.125rem; color: var(--tinta); }
.a-fondo-rotulo { margin: 0 0 var(--e-1); font: 600 .8125rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.a-fondo-lugares { counter-reset: lugar; list-style: none; margin: 0 0 var(--e-4); padding: 0; border-top: 1px solid var(--borde); }
@media (min-width: 40rem) { .a-fondo-lugares { columns: 2; column-gap: var(--e-3); } }
.a-fondo-lugares li { counter-increment: lugar; break-inside: avoid; border-bottom: 1px solid var(--borde); }
.a-fondo-lugares a { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding-block: .4rem; color: var(--tinta); font-weight: 600; text-decoration: none; line-height: 1.25; }
.a-fondo-lugares a::before { content: counter(lugar, decimal-leading-zero); flex: none; font: 600 .8125rem/1 var(--mono); color: var(--rojo); }
.a-fondo-lugares a:hover { color: var(--rojo); }

/* otras webs */
.otras { padding-block: var(--e-6); }
.otras-lista { display: grid; gap: var(--e-3); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .otras-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .otras-lista { grid-template-columns: repeat(4, 1fr); } }
.otras-lista a { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: var(--e-3); border-top: 4px solid var(--tablero); background: var(--blanco); color: var(--tinta); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.otras-lista a:hover { border-color: var(--amarillo); transform: translateY(-2px); color: var(--tinta); }
.otras-nombre { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font: 800 1.75rem/1 var(--rotulo); color: var(--tinta); }
.otras-nombre .icono { width: 18px; height: 18px; color: var(--tenue); }
.otras-texto { color: var(--tenue); font-size: 1rem; }

/* ------------------------------------------------------------------ guía */

.guia-cabecera { background: var(--tablero) repeating-linear-gradient(180deg, transparent 0 63px, rgba(255, 255, 255, .025) 63px 64px); color: var(--tablero-texto); padding-block: var(--e-5); }
.guia-cabecera-fila { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 64rem) { .guia-cabecera-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: var(--e-6); padding-block: var(--e-3); } }
.guia-titulo { margin: 0 0 var(--e-4); color: #fff; }
.guia-ante { display: block; font: 700 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1 var(--rotulo); text-transform: uppercase; letter-spacing: .04em; color: var(--amarillo); }
.guia-destino { display: block; margin-top: .25rem; font: 900 clamp(3.5rem, 2rem + 7vw, 7.5rem)/.85 var(--rotulo); text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: anywhere; }
.guia-ficha { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.guia-ficha li { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .8rem; border: 1px solid var(--tablero-linea); border-radius: 999px; font: 500 .9375rem/1.2 var(--texto); color: var(--tablero-texto); }
.guia-ficha .icono { width: 17px; height: 17px; color: var(--amarillo); }
.guia-postal { position: relative; margin: 0; justify-self: center; width: 100%; max-width: 34rem; padding: .6rem .6rem 2.4rem; background: #fff; border-radius: 2px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); transform: rotate(1.2deg); }
.guia-postal img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.guia-sello { position: absolute; right: -.75rem; bottom: -.9rem; display: grid; place-items: center; width: 6.5rem; height: 6.5rem; border-radius: 50%; border: 2px dashed var(--rojo); background: rgba(255, 255, 255, .92); color: var(--rojo); transform: rotate(-12deg); text-align: center; }
.guia-sello span { max-width: 5.25rem; font: 800 1.125rem/1 var(--rotulo); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }

.guia-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); padding-block: var(--e-5) var(--e-5); }
.guia-indice, .guia-texto { min-width: 0; }
@media (min-width: 64rem) { .guia-cuerpo { grid-template-columns: 16rem minmax(0, var(--medida)); gap: var(--e-6); justify-content: center; } }
.guia-indice { align-self: start; }
@media (min-width: 64rem) { .guia-indice { position: sticky; top: 6.5rem; max-height: calc(100vh - 8rem); overflow-y: auto; } }
.guia-indice-titulo { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--e-2); font: 600 .8125rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rojo); }
.guia-indice ol { list-style: none; margin: 0; padding: 0; }
@media (max-width: 63.99rem) {
  .guia-indice ol { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); scrollbar-width: thin; }
  .guia-indice li { flex: none; }
  .guia-indice a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--blanco); color: var(--tinta); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
}
@media (min-width: 64rem) {
  .guia-indice ol { border-left: 2px solid var(--borde); }
  .guia-indice a { display: block; padding: .45rem 0 .45rem 1rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--tinta); font-size: .9375rem; line-height: 1.3; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
  .guia-indice .nivel-2 a { font-weight: 700; }
  .guia-indice .nivel-3 a { padding-left: 1.6rem; color: var(--tenue); }
  .guia-indice a:hover, .guia-indice a.activo { border-left-color: var(--rojo); color: var(--rojo); }
}

.contenido { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.7; padding-inline: var(--margen); }
.guia-texto, .pagina-texto { padding-inline: 0; }
.pagina-texto { padding: var(--e-5) var(--margen) var(--e-6); }
.contenido > * { max-width: var(--medida); }
.contenido p { margin-block: 0 1.1em; }
.contenido strong { font-weight: 650; color: var(--tinta); }
.contenido h2 { margin: 1.8em auto .6em; font: 900 clamp(2rem, 1.6rem + 1.4vw, 2.625rem)/.98 var(--rotulo); text-transform: uppercase; color: var(--tinta); letter-spacing: 0; }
.contenido h3 { position: relative; margin: 1.7em auto .5em; padding-left: 1.1rem; font: 800 1.375rem/1.2 var(--texto); color: var(--tinta); }
.contenido h3::before { content: ""; position: absolute; left: 0; top: .32em; width: .55rem; height: .55rem; background: var(--amarillo); box-shadow: 0 0 0 2px var(--tablero); }
.contenido h2:first-child, .contenido h3:first-child { margin-top: 0; }
.contenido ul, .contenido ol { padding-left: 1.3em; }
.contenido li { margin-bottom: .5em; }
.contenido li::marker { color: var(--rojo); }
.contenido figure.foto { margin: var(--e-4) auto; text-align: center; }
.contenido figure.foto img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; padding: .45rem; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(22, 24, 29, .08), 0 14px 28px -20px rgba(22, 24, 29, .5); }
.guia-despedida { display: flex; align-items: center; gap: .75rem; margin-top: var(--e-5) !important; padding-top: var(--e-3); border-top: 2px solid var(--tablero); font: 900 2rem/1 var(--rotulo); text-transform: uppercase; color: var(--tinta); }
.guia-despedida .sol { width: 2.5rem; height: 2.5rem; color: var(--amarillo); filter: drop-shadow(0 0 0 var(--tablero)); }

.vecinos { display: grid; gap: var(--e-2); padding-bottom: var(--e-4); }
@media (min-width: 40rem) { .vecinos { grid-template-columns: 1fr 1fr; } }
.vecino { display: flex; flex-direction: column; gap: .4rem; padding: var(--e-3); background: var(--tablero); border-radius: 6px; color: var(--tablero-texto); text-decoration: none; transition: background-color .2s ease; }
.vecino:hover { background: var(--tablero-3); color: #fff; }
.vecino-sig { align-items: flex-end; text-align: right; }
.vecino-etiqueta { display: inline-flex; align-items: center; gap: .4rem; font: 600 .8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tablero-tenue); }
.vecino-destino { font: 900 2.25rem/1 var(--rotulo); text-transform: uppercase; color: var(--amarillo); }
.mas-destinos { padding-top: var(--e-4); }

/* ------------------------------------------------------------------ listados, búsqueda, 404, páginas */

.lista-cabecera, .error { background: var(--tablero) repeating-linear-gradient(180deg, transparent 0 63px, rgba(255, 255, 255, .025) 63px 64px); color: var(--tablero-texto); padding-block: var(--e-5); }
.lista-titulo { margin: 0 0 var(--e-1); font: 900 clamp(3rem, 2rem + 4vw, 5.5rem)/.9 var(--rotulo); text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.lista-titulo--pagina { font-size: clamp(2.5rem, 1.8rem + 3vw, 4.25rem); }
.pagina .lista-cabecera .envoltorio { max-width: calc(var(--medida) + 2 * var(--margen)); }
.lista-cuenta { margin: 0 0 var(--e-3); font: 500 .9375rem/1.4 var(--mono); color: var(--tablero-tenue); }
.lista-descripcion { max-width: var(--medida); color: #d5d7db; }
.lista { padding-block: var(--e-5) var(--e-6); }
.vacio { margin: 0 0 var(--e-4); font-size: 1.25rem; font-weight: 600; }
.resultados-paginas { list-style: none; margin: var(--e-5) 0 0; padding: 0; border-top: 1px solid var(--borde); }
.resultados-paginas a { display: flex; flex-direction: column; gap: .25rem; padding: var(--e-2) 0; border-bottom: 1px solid var(--borde); color: var(--tinta); text-decoration: none; }
.resultados-paginas strong { font: 800 1.5rem/1.1 var(--rotulo); text-transform: uppercase; }
.resultados-paginas span { color: var(--tenue); }
.resultados-paginas a:hover strong { color: var(--rojo); }
.destinos-todos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--e-4); }
.destinos-todos a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: var(--radio); background: var(--tablero); color: var(--amarillo); font: 800 1.25rem/1 var(--rotulo); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; transition: background-color .15s ease; }
.destinos-todos a:hover { background: var(--tablero-3); color: #fff; }
.error-panel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-bottom: var(--e-4); padding: .75rem 1.25rem; border: 1px solid var(--tablero-linea); border-radius: 6px; background: var(--tablero-2); }
.error-panel .tf-destino { font-size: 3rem; }
.error-estado { font: 600 1rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #ff8a80; }
@media (prefers-reduced-motion: no-preference) { .error-estado { animation: parpadeo 1.6s steps(2, jump-none) infinite; } }

.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-5); font-weight: 700; }
.paginacion-numeros { display: flex; gap: .25rem; }
.paginacion a, .paginacion span[aria-current] { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .9rem; border-radius: var(--radio); text-decoration: none; }
.paginacion a { color: var(--tinta); border: 1px solid var(--borde); background: var(--blanco); }
.paginacion a:hover { border-color: var(--tablero); }
.paginacion span[aria-current] { background: var(--tablero); color: var(--amarillo); }

/* ------------------------------------------------------------------ pie */

.pie { background: var(--tablero); color: var(--tablero-tenue); padding-block: var(--e-6) var(--e-3); margin-top: var(--e-4); }
.pie a { color: var(--tablero-texto); text-decoration: none; }
.pie a:hover { color: var(--amarillo); }
.pie-cabeza { display: grid; gap: var(--e-2); padding-bottom: var(--e-4); }
.pie-marca { display: flex; align-items: center; gap: .75rem; margin: 0; font: 800 2.75rem/1 var(--rotulo); color: #fff; }
.pie-marca span span { color: var(--amarillo); }
.pie-sol { width: 2.75rem; height: 2.75rem; }
.pie-texto { margin: 0; max-width: 40rem; color: var(--tablero-tenue); }
.pie-titulo { margin: 0 0 var(--e-2); font: 600 .8125rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); }
.pie-destinos { padding-block: var(--e-4); border-top: 1px solid var(--tablero-linea); }
.pie-destinos ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--e-3); list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .pie-destinos ul { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .pie-destinos ul { grid-template-columns: repeat(5, 1fr); } }
.pie-destinos a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding-block: .25rem; border-bottom: 1px solid var(--tablero-2); font: 800 1.25rem/1 var(--rotulo); text-transform: uppercase; letter-spacing: .02em; }
.pie-destinos a span { margin-top: .2rem; font: 500 .75rem/1.2 var(--mono); text-transform: none; letter-spacing: 0; color: var(--tablero-tenue); }
.pie-columnas { display: grid; gap: var(--e-4); padding-block: var(--e-4); border-top: 1px solid var(--tablero-linea); }
@media (min-width: 40rem) { .pie-columnas { grid-template-columns: repeat(3, 1fr); } }
.pie-lista { list-style: none; margin: 0; padding: 0; }
.pie-lista a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 500; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--tablero-linea); font: 500 .875rem/1.5 var(--mono); }
.pie-legal p { margin: 0; }
.pie-despedida { color: var(--amarillo); }
.pie :focus-visible { outline-color: var(--amarillo); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .cabecera, .pie, .vecinos, .mas-destinos, .guia-indice, .menu-boton, .saltar { display: none !important; }
  body { background: #fff; }
  .guia-cabecera { background: #fff; color: #000; }
  .guia-titulo, .guia-ante, .guia-ficha li { color: #000; }
  .guia-postal { box-shadow: none; transform: none; }
  .contenido figure.foto img { box-shadow: none; }
}