/*
  Rediseño "Ciudad" (2026-10-06). Se carga después de main.css y sustituye a la capa "En movimiento".
  Dirección: luz, amplitud y calidez; tecnología integrada en la ciudad; elegancia y confianza.
  - Base de blancos cálidos y grises muy claros; azul marino de marca para textos y zonas puntuales;
    azul luminoso para acciones; azul claro y cian con moderación.
  - Titulares en Atkinson Hyperlegible Next con peso medio (600), no contundentes.
  - Bordes finos, sombras suaves, esquinas suavemente redondeadas. Sin franjas oscuras, puntos ni líneas de carretera.
  - Todo el contenido está visible desde la carga: no hay apariciones al hacer scroll.
  Todos los colores salen de tokens.css y están auditados en scripts/contraste.py.
*/

/* 1. Tipografía: jerarquía clara, títulos con peso medio */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; }
h1 { line-height: 1.06; letter-spacing: -0.03em; }
h2 { line-height: 1.12; }
h3 { line-height: 1.25; letter-spacing: -0.01em; }
.entradilla { color: var(--c-texto-suave); line-height: 1.55; }
.antetitulo { color: var(--c-tecno); letter-spacing: 0.12em; font-weight: 700; }
.cabecera-seccion { margin-bottom: var(--e-7); }
.cabecera-seccion h2 { margin-bottom: var(--e-3); }
.cifra__valor, .tarjeta__meta, .articulo-meta { font-variant-numeric: tabular-nums; }

/* Enlaces del texto: subrayado fino que se engrosa */
a { transition: color var(--dur-corta) ease, text-decoration-thickness var(--dur-corta) ease; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; text-decoration: none; min-height: var(--objetivo-min); }
.enlace-flecha::after { content: "→" / ""; transition: transform var(--dur-media) var(--curva); }
.enlace-flecha:hover { text-decoration: underline; }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* 2. Cabecera ligera */
.cabecera { background: var(--c-fondo); border-bottom: 1px solid var(--c-linea); }
.cabecera__fila { min-height: 4.75rem; }
.nav-principal a { font-weight: 600; }
.nav-principal a[aria-current="page"] { color: var(--c-tecno); }
@media (min-width: 75rem) {
  .nav-principal ul { flex-wrap: nowrap; gap: 0.15rem; }
  .nav-principal a { font-size: 1rem; padding-inline: 0.7rem; border-bottom: 0; position: relative; }
  .nav-principal li:not(.nav-cta) a::after {
    content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.45rem; height: 2px; border-radius: 2px;
    background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-media) var(--curva);
  }
  .nav-principal li:not(.nav-cta) a:hover::after, .nav-principal a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-principal .nav-cta { margin-left: var(--e-4); }
}

/* Portada: la cabecera flota sobre la foto, transparente, con logotipo y menú en blanco */
.pagina-inicio .cabecera { position: absolute; top: 0; left: 0; right: 0; background: rgba(1, 23, 46, 0.25); border-bottom: 0; --foco: var(--c-acento-sobre-marino); }
/* El velo marino de la cabecera refuerza el degradado superior de la foto: el menú blanco nunca queda sobre una zona clara */
.pagina-inicio .cabecera .logo .logo__img--claro { display: none; }
.pagina-inicio .cabecera .logo .logo__img--oscuro { display: block; }
.pagina-inicio .menu-boton { background: rgba(1, 23, 46, 0.55); color: var(--c-sobre-marino); border-color: rgba(255, 255, 255, 0.85); }
@media (min-width: 75rem) {
  .pagina-inicio .nav-principal li:not(.nav-cta) a { color: var(--c-sobre-marino); }
  .pagina-inicio .nav-principal li:not(.nav-cta) a:hover { color: var(--c-sobre-marino); }
  .pagina-inicio .nav-principal a[aria-current="page"] { color: var(--c-sobre-marino); }
}
@media (max-width: 74.99rem) {
  /* Menú desplegado en móvil: panel claro con texto oscuro */
  .pagina-inicio .nav-principal.abierto { --foco: var(--c-foco); box-shadow: var(--sombra-2); }
}

/* 3. Botones: redondeados, con estados claros al pasar, enfocar y pulsar */
.boton, .nav-principal .nav-cta a {
  border-radius: 999px; padding: 0.7rem 1.5rem; border-width: 1px;
  box-shadow: var(--sombra-boton);
  /* box-shadow no se anima: el anillo de foco tiene que aparecer de golpe, nunca a medio camino */
  transition: background-color var(--dur-corta) ease, border-color var(--dur-corta) ease, color var(--dur-corta) ease,
              transform var(--dur-corta) ease;
}
.nav-principal .nav-cta a[aria-current="page"] { color: var(--c-sobre-tecno); }
.boton:hover, .nav-principal .nav-cta a:hover { text-decoration: none; transform: translateY(-1px); }
.boton:active, .nav-principal .nav-cta a:active { transform: translateY(1px); box-shadow: none; background: var(--c-tecno-hover); }
.boton--secundario { background: var(--c-superficie); color: var(--c-tecno); border-color: var(--c-tecno); box-shadow: none; }
.boton--secundario:hover { background: var(--c-superficie-2); color: var(--c-tecno-hover); border-color: var(--c-tecno-hover); }
.boton--secundario:active { background: var(--c-superficie-2); color: var(--c-tecno-hover); }
/* En la portada y en el pie (fondo oscuro): principal azul luminoso, secundario translúcido con borde fino */
.hero .boton:not(.boton--secundario), .banda-marino .boton:not(.boton--secundario) {
  background: var(--c-tecno); border-color: var(--c-tecno); color: var(--c-sobre-tecno);
}
.hero .boton:not(.boton--secundario):hover, .banda-marino .boton:not(.boton--secundario):hover {
  background: var(--c-tecno-hover); border-color: var(--c-tecno-hover); color: var(--c-sobre-tecno);
}
.hero .boton--secundario {
  background: rgba(1, 23, 46, 0.35); color: var(--c-sobre-marino); border-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero .boton--secundario:hover, .hero .boton--secundario:active { background: rgba(1, 23, 46, 0.6); color: var(--c-sobre-marino); border-color: var(--c-sobre-marino); }
.hero .boton:not(.boton--secundario):focus-visible,
.pagina-inicio .nav-principal .nav-cta a:focus-visible { box-shadow: 0 0 0 2px var(--c-marino), 0 0 0 5px var(--c-sobre-marino); }

.grupo-botones > .boton, main p > a.boton:only-child, main li > a.boton:only-child { display: inline-flex; align-items: center; justify-content: center; }

/* 4. Primera pantalla: foto panorámica, degradado oscuro localizado detrás del texto */
.hero { background: var(--c-marino); }
.pagina-inicio .hero { min-height: min(94vh, 54rem); display: flex; flex-direction: column; justify-content: center; }
.hero__foto img { object-position: 72% 55%; }
.hero::before {
  --fin-texto: calc(max(var(--margen), (100% - var(--ancho)) / 2 + var(--margen)) + 34rem);
  background:
    linear-gradient(180deg, rgba(1, 23, 46, 0.7) 0, rgba(1, 23, 46, 0) 8rem),
    linear-gradient(90deg, var(--capa-foto-fuerte) 0, var(--capa-foto) var(--fin-texto), rgba(1, 23, 46, 0) calc(var(--fin-texto) + 22rem));
}
@media (max-width: 47.99rem) {
  .hero::before { background: linear-gradient(180deg, rgba(1, 23, 46, 0.72) 0%, var(--capa-foto) 35%, var(--capa-foto-fuerte) 100%); }
}
.hero__contenido { max-width: 36rem; padding-block: 8.5rem 4rem; }
@media (min-width: 64rem) { .pagina-inicio .hero__contenido { padding-block: 9rem 12rem; } }
.hero h1 { font-size: var(--t-hero); font-weight: 600; margin-bottom: var(--e-5); text-wrap: balance; }
.hero__destacado { color: var(--c-acento-sobre-marino); }
.hero__sub { color: var(--c-sobre-marino); font-size: var(--t-l); line-height: 1.5; max-width: 32rem; }
.hero__claim {
  font-size: var(--t-s); font-weight: 600; letter-spacing: 0.14em; color: var(--c-sobre-marino-suave);
  width: auto !important; margin-bottom: var(--e-5);
}
.hero__claim-sep { color: var(--c-acento-sobre-marino); }
.hero__pie {
  max-width: none; margin: 0; font-size: var(--t-s); color: var(--c-sobre-marino-suave);
  padding: 0 var(--margen) var(--e-5);
}
@media (min-width: 64rem) {
  .hero__pie {
    position: absolute; right: var(--margen); bottom: 8.5rem; z-index: 1; max-width: 26rem; padding: 0.35rem 0.75rem;
    font-size: var(--t-xs); text-align: right; background: var(--capa-foto); border-radius: var(--radio);
  }
}
.pagina-inicio .hero > .contenedor { position: relative; z-index: 1; width: 100%; }

/* 5. Tarjetas: fondo claro, esquinas suaves, sombra discreta */
.tarjeta {
  background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--radio-l);
  box-shadow: var(--sombra-1); transition: box-shadow var(--dur-media) ease, transform var(--dur-media) var(--curva), border-color var(--dur-media) ease;
}
.tarjeta:hover { background: var(--c-superficie); box-shadow: var(--sombra-2); transform: translateY(-3px); }
.tarjeta__cuerpo { padding: var(--e-5); gap: var(--e-2); }
.tarjeta :is(h2, h3, h4) { font-size: var(--t-l); font-weight: 600; }
.tarjeta :is(h2, h3, h4) a { text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); }
.tarjeta .foto { position: relative; overflow: hidden; margin: 0; }
.tarjeta .foto img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; transition: transform 700ms var(--curva); }
.tarjeta:hover .foto img { transform: scale(1.03); }
/* Imagen generada con IA: la identificación queda como etiqueta sobre la propia imagen */
.tarjeta figure.foto figcaption {
  position: absolute; left: 0.6rem; bottom: 0.6rem; right: auto; max-width: calc(100% - 1.2rem);
  padding: 0.2rem 0.6rem; border-radius: 999px; line-height: 1.35;
  background: var(--capa-foto); color: var(--c-sobre-marino); font-size: var(--t-xs);
}
.tarjeta__icono { color: var(--c-tecno); display: inline-flex; }
.tarjeta__icono .icono { width: 1.9rem; height: 1.9rem; stroke-width: 1.5; }
.tarjeta__ir {
  margin-top: auto; align-self: flex-end; display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--c-linea); color: var(--c-tecno);
  transition: background-color var(--dur-corta) ease, color var(--dur-corta) ease, transform var(--dur-media) var(--curva);
}
.tarjeta__ir .icono { width: 1.1rem; height: 1.1rem; }
.tarjeta:hover .tarjeta__ir, .tarjeta:focus-within .tarjeta__ir { background: var(--c-tecno); color: var(--c-sobre-tecno); border-color: var(--c-tecno); transform: translateX(2px); }
.etiqueta { border: 0; background: var(--c-superficie-2); border-radius: 999px; padding: 0.15rem 0.6rem; }

/* 6. Áreas de trabajo: seis tarjetas que se solapan con la foto en escritorio */
.rejilla--areas { display: grid; gap: var(--e-5); grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
.rejilla--areas > li { margin: 0; max-width: none; }
@media (min-width: 40rem) { .rejilla--areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .rejilla--areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.areas { padding-top: var(--e-6); }
@media (min-width: 64rem) {
  .pagina-inicio .areas { position: relative; z-index: 2; margin-top: -8rem; padding-top: 0; }
}

/* 7. Introducción editorial: texto y foto real */
.intro__rejilla { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 64rem) { .intro__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--e-9); } }
.intro__texto > * { max-width: 40rem; }
.intro__texto .entradilla { font-size: var(--t-l); color: var(--c-texto); }
.intro__foto img { border-radius: var(--radio-l); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--sombra-2); }
.intro__foto figcaption { padding-top: var(--e-3); }

/* 8. Cifras: una fila clara con separadores finos */
.impacto { padding-top: 0; }
.cifras {
  gap: 0; background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--radio-l);
  box-shadow: var(--sombra-1); padding: var(--e-3) var(--e-5);
}
.cifras li { border-top: 0 !important; padding: var(--e-5) var(--e-4); }
@media (min-width: 75rem) {
  .cifras li + li { border-left: 1px solid var(--c-linea); padding-left: var(--e-5); }
}
@media (max-width: 74.99rem) {
  .cifras li + li { border-top: 1px solid var(--c-linea) !important; }
}
.cifra__valor { color: var(--c-tecno); font-size: var(--t-xxl); font-weight: 600; letter-spacing: -0.03em; }
.cifra__etiqueta { color: var(--c-texto-suave); }

/* 9. Bandas: gris cálido muy claro en lugar de franjas oscuras */
.banda-calida { background: var(--c-superficie-2); }
.seccion { padding-block: var(--e-9); }
.seccion--compacta { padding-block: var(--e-7); }

/* 10. Esquemas técnicos: dentro de una tarjeta clara, trazos suaves y números en pastilla */
.infografia { gap: var(--e-7); align-items: center; }
.infografia__imagen img { border-radius: var(--radio-l); box-shadow: var(--sombra-1); border: 1px solid var(--c-linea); }
.infografia > svg {
  background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--radio-l);
  box-shadow: var(--sombra-1); padding: var(--e-5); color: var(--c-texto-suave);
}
.infografia .trazo-acento { stroke: var(--c-tecno); }
.infografia .relleno-acento { fill: var(--c-tecno); }
.lista-numerada li { padding-left: 3rem; }
.lista-numerada li + li { margin-top: var(--e-4); }
.lista-numerada li::before {
  width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--c-tecno) 12%, var(--c-superficie)); color: var(--c-tecno);
}

/* 11. Proyectos y logotipos */
.rejilla--2 .tarjeta .foto img { aspect-ratio: 16 / 9; }
.franja-logos__lista { gap: var(--e-5); }
.franja-logos__enlace {
  height: 4rem; padding: 0.75rem 1.25rem; background: #ffffff; border: 1px solid var(--c-linea); border-radius: var(--radio);
  transition: box-shadow var(--dur-media) ease;
}
.franja-logos__enlace:hover { box-shadow: var(--sombra-1); }

/* 12. Pie: invitación a unirse y enlaces, en azul marino de marca */
.pie { padding-block: var(--e-9) var(--e-6); }
.pie__titular { font-size: var(--t-xxl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--e-3); }
.pie .suave { font-size: var(--t-l); max-width: 40rem; }
.pie .boton { margin-top: var(--e-3); }
.pie__rejilla { margin-top: var(--e-8); padding-top: var(--e-7); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.pie__legal { border-top-color: rgba(255, 255, 255, 0.16); }

/* 13. Páginas interiores */
.cabecera-pagina { padding-block: var(--e-8) var(--e-7); }
.cabecera-pagina h1 { font-size: var(--t-xxl); font-weight: 600; letter-spacing: -0.03em; max-width: 24ch; }
.cabecera-pagina .entradilla { font-size: var(--t-l); max-width: 44rem; }
.migas { color: var(--c-texto-suave); }
.foto img { border-radius: var(--radio-l); }
.tarjeta .foto img { border-radius: 0; }
.rejilla-territorio > .foto--territorio { border-radius: var(--radio-l); box-shadow: var(--sombra-1); }
.ficha-datos, .ficha-datos > div { border-color: var(--c-linea); }
.opcion { border-width: 1px; border-color: var(--c-borde); background: var(--c-superficie); transition: background-color var(--dur-corta) ease, border-color var(--dur-corta) ease; }
.opcion:hover { border-color: var(--c-tecno); }
.opcion:has(input:checked) { background: var(--c-superficie-2); }
.filtros { border-top-color: var(--c-linea); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="search"], .campo input[type="tel"], .campo select, .campo textarea {
  border-width: 1px; border-radius: var(--radio); padding: 0.65rem 0.9rem; background: var(--c-superficie);
  transition: border-color var(--dur-corta) ease, box-shadow var(--dur-corta) ease;
}
.campo :is(input, select, textarea):hover { border-color: var(--c-texto-suave); }
.campo [aria-invalid="true"] { border-width: 2px; }
.aviso, .aviso-pendiente, .resumen-errores, .mensaje-ok { border-radius: var(--radio); }
.articulo blockquote { border-left-color: var(--c-tecno); font-family: var(--f-texto); font-weight: 500; }
.red svg { background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--radio-l); padding: var(--e-4); box-shadow: var(--sombra-1); }
.red .arista { stroke: var(--c-linea); stroke-width: 2; }
.red .nodo-centro { fill: var(--c-marino); }
.resultados-busqueda li { border-bottom-color: var(--c-linea); }
.vacio { border-top-color: var(--c-linea); }
.compartir { border-top-color: var(--c-linea); }
.muestras li, .componente { border-color: var(--c-linea); }

/* 14. Actualidad (data/actualidad.json). Solo existe en el HTML si hay entradas vigentes. */
.actualidad .cabecera-seccion { margin-bottom: var(--e-5); }
.actualidad__lista {
  list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.actualidad__lista > li { margin: 0; max-width: none; }
.actualidad__pieza {
  height: 100%; display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5);
  background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--radio-l); box-shadow: var(--sombra-1);
}
.actualidad__pieza > * { margin: 0; }
.actualidad__pieza h3 { font-size: var(--t-l); }
.actualidad__pieza h3 a { color: var(--c-texto); }
.actualidad__fecha { font-size: var(--t-s); font-weight: 700; color: var(--c-senal-profundo); font-variant-numeric: tabular-nums; }
.actualidad__pieza .fuente { margin-top: auto; }
/* Aviso de la entrada destacada en la portada, en lugar del lema */
.hero__estado {
  display: inline-flex; align-items: center; gap: var(--e-2); max-width: 100%;
  padding: 0.4rem 0.95rem; margin-bottom: var(--e-5); border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45); background: var(--c-marino-2);
  font-size: var(--t-s); font-weight: 700; color: var(--c-sobre-marino);
}
.hero__estado a { color: var(--c-sobre-marino); }
.hero__estado a:hover { color: var(--c-acento-sobre-marino); }
.hero__estado-punto { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-acento-sobre-marino); }

/* 15. Movimiento: solo transiciones cortas en respuesta a la persona; nada aparece ni se mueve solo */
.aparece.preparado { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tarjeta:hover, .tarjeta:hover .foto img, .boton:hover, .tarjeta:hover .tarjeta__ir { transform: none; }
}
@media (forced-colors: active) {
  .tarjeta, .cifras, .actualidad__pieza, .infografia > svg { border: 1px solid CanvasText; }
  .hero__pie, .tarjeta figure.foto figcaption { border: 1px solid CanvasText; }
}
@media print {
  .pagina-inicio .cabecera { position: static; }
  .pagina-inicio .areas { margin-top: 0; }
}