:root {
  color-scheme: light;
  --fondo: #f4f6f8;
  --texto: #17202a;
  --suave: #627181;
  --borde: #dce2e8;
  --azul: #075eb8;
  --azul-suave: #eaf3fc;
  --blanco: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.5;
}

.contenedor {
  width: min(100% - 2rem, 52rem);
  margin: auto;
  padding: 3.5rem 0;
}

.cabecera-sitio {
  margin-bottom: 3.5rem;
}

.identidad {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: inherit;
  text-decoration: none;
}

.identidad-texto {
  display: grid;
  gap: .04rem;
}

.identidad-nombre {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.015em;
}

.identidad-dominio {
  color: var(--suave);
  font-size: .76rem;
  letter-spacing: .02em;
}

.identidad:focus-visible {
  outline: 3px solid #79b9ff;
  outline-offset: 5px;
  border-radius: .5rem;
}

.portada { margin-bottom: 2.5rem; }

.portada h1,
.encabezado-ruta h1 {
  margin: 0;
  font-size: clamp(1.8rem, 6vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.portada > p:last-child,
.encabezado-ruta p {
  margin: .65rem 0 0;
  color: var(--suave);
}

h2 {
  margin: 0 0 1rem;
  font-size: 1rem;
  letter-spacing: .02em;
}

.lista-rutas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}

.tarjeta-ruta {
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: .85rem;
  background: var(--blanco);
}

.encabezado-tarjeta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem;
  background: linear-gradient(120deg, var(--blanco), var(--azul-suave));
}

.encabezado-tarjeta h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
}

.encabezado-tarjeta p {
  margin: .25rem 0 0;
  color: var(--suave);
  font-size: .875rem;
}

.numero {
  display: grid;
  min-width: 3.5rem;
  height: 2.35rem;
  padding: 0 .6rem;
  place-items: center;
  border-radius: .4rem;
  background: var(--azul);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}

.lista-sentidos { border-top: 1px solid var(--borde); }

.sentido {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 4.2rem;
  padding: .85rem 1.15rem;
  color: inherit;
  text-decoration: none;
}

.sentido + .sentido { border-top: 1px solid var(--borde); }

.sentido:hover { background: #f8fbfe; }

.datos-sentido {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.datos-sentido strong { line-height: 1.25; }

.resumen-sentido {
  color: var(--suave);
  font-size: .8rem;
}

.flecha {
  margin-left: auto;
  color: var(--azul);
  font-size: 1.35rem;
}

.ruta:focus-visible,
.sentido:focus-visible,
.volver:focus-visible {
  outline: 3px solid #79b9ff;
  outline-offset: 3px;
}

.volver {
  display: inline-block;
  margin-bottom: 2.25rem;
  color: var(--azul);
  font-weight: 650;
  text-decoration: none;
}

.encabezado-ruta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 2.75rem;
}

.numero-grande {
  min-width: 4.5rem;
  height: 3.2rem;
  font-size: 1.25rem;
}

.estado {
  padding: 1rem;
  border: 1px dashed var(--borde);
  border-radius: .8rem;
  color: var(--suave);
  text-align: center;
}

.publicacion {
  padding: 1.15rem;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--azul);
  border-radius: .8rem;
  background: var(--blanco);
}

.lista-publicaciones {
  display: grid;
  gap: .75rem;
}

.publicacion p {
  margin: 0;
  white-space: pre-wrap;
}

.metadatos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1rem;
  margin: 0 0 .9rem;
  color: var(--suave);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.fecha-publicacion {
  color: var(--texto);
  font-size: 1.1rem;
  font-weight: 750;
}

.antiguedad {
  color: var(--suave);
  font-size: .95rem;
  font-weight: 500;
}

.fuente {
  font-size: .9rem;
  font-weight: 650;
}

.ruta-oficial {
  margin: 0 !important;
  font-size: .85rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.introduccion-ruta {
  margin: -1.5rem 0 2.5rem;
  color: var(--suave);
}

.actualizacion {
  margin: 0 0 1rem;
  color: var(--suave);
  font-size: .925rem;
}

.actualizacion time { color: var(--texto); font-weight: 700; }

.sin-publicaciones {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--borde);
  border-radius: .8rem;
  color: var(--suave);
  text-align: center;
}

.sentido-opuesto { margin-top: 1.5rem; }

.sentido-opuesto a {
  color: var(--azul);
  font-weight: 650;
}

.informacion {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
  color: var(--suave);
}

.informacion h2 { color: var(--texto); }

.informacion p { margin: 0; }

.pie {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
  font-size: .9rem;
}

.pie a,
.documento-legal a {
  color: var(--azul);
}

.enlace-preferencias {
  margin-left: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--azul);
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  text-decoration: underline;
}

.pagina-legal { margin-bottom: 2rem; }

.documento-legal {
  max-width: 48rem;
}

.documento-legal h2 {
  margin-top: 2rem;
}

.documento-legal p,
.documento-legal ul {
  margin-top: .75rem;
}

.documento-legal li + li { margin-top: .55rem; }

.documento-legal code {
  padding: .1rem .25rem;
  border-radius: .25rem;
  background: var(--azul-suave);
  font-size: .9em;
}

.aviso-consentimiento {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 10;
  padding: 1rem;
  border: 1px solid var(--borde);
  border-radius: .8rem;
  background: var(--blanco);
  box-shadow: 0 .35rem 1.5rem rgb(23 32 42 / 15%);
}

.contenido-consentimiento {
  width: min(100%, 52rem);
  margin: auto;
}

.aviso-consentimiento h2,
.aviso-consentimiento p { margin: 0; }

.aviso-consentimiento h2 { margin-bottom: .35rem; }

.aviso-consentimiento p + p { margin-top: .35rem; }

.aviso-consentimiento a {
  color: var(--azul);
  font-size: .9rem;
}

.acciones-consentimiento {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: .8rem;
}

.acciones-consentimiento button {
  padding: .55rem .8rem;
  border: 1px solid var(--azul);
  border-radius: .35rem;
  background: var(--blanco);
  color: var(--azul);
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
}

.acciones-consentimiento button:last-child {
  background: var(--azul);
  color: var(--blanco);
}

.acciones-consentimiento button:focus-visible {
  outline: 3px solid #79b9ff;
  outline-offset: 2px;
}

@media (max-width: 32rem) {
  .contenedor { padding: 2rem 0; }
  .encabezado-ruta { align-items: flex-start; }
  .encabezado-tarjeta { align-items: flex-start; }
}