/* ============================================================
   Muévete — propuesta de composición
   Mismos tokens de marca que la demo. Cambia la composición.
   ============================================================ */

:root{
  --crema:#F1E8DF; --blanco:#FEFEFE;
  --turquesa:#14B8A6; --turquesa-display:#109688; --turquesa-texto:#0D766B;
  --turquesa-accion:#0E8377; --teal:#206E78; --profundo:#0B3A42;
  --tinta:#113B41; --tinta-suave:#18545C; --sobre-profundo:#D8E2E0;
  --coral:#E76F51; --ambar:#ECA400; --verde:#8CB369;

  --fuente:"Manrope", ui-sans-serif, system-ui, sans-serif;

  --display:clamp(2.75rem, 9.4vw, 8.25rem);
  --h2:clamp(2rem, 5.4vw, 4rem);
  --declaracion:clamp(1.65rem, 3.9vw, 3.25rem);
  --numeral:clamp(3rem, 6.4vw, 5.5rem);
  --lead:clamp(1.125rem, 1.72vw, 1.375rem);
  --cuerpo:1rem;
  --etiqueta:0.8125rem;

  --contenedor:74rem;
  --canalon:clamp(1.5rem, 6vw, 5rem);
  --seccion:clamp(4.5rem, 10vw, 9rem);
  --radio:12px;
}

@font-face{
  font-family:"Manrope";
  src:url("fuentes/manrope-var.woff2") format("woff2-variations");
  font-weight:200 800; font-display:swap; font-style:normal;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}
body{
  margin:0; font-family:var(--fuente); font-size:var(--cuerpo);
  line-height:1.62; color:var(--tinta); background:var(--crema);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}

.contenedor{width:100%;max-width:var(--contenedor);margin-inline:auto;padding-inline:var(--canalon)}

/* ---------- fondos: ninguno se repite dos veces seguidas ---------- */
.f-crema{background:var(--crema);color:var(--tinta)}
.f-blanco{background:var(--blanco);color:var(--tinta)}
.f-profundo{background:var(--profundo);color:var(--sobre-profundo)}
.f-teal{background:var(--teal);color:#EAF3F2}

.seccion{padding-block:var(--seccion)}

/* ---------- tipografía ---------- */
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.028em;line-height:1.02}
p{margin:0}

.kicker{
  font-size:var(--etiqueta); font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--turquesa-texto);
}
.f-profundo .kicker{color:var(--turquesa)}          /* 4,97:1 */
.f-teal .kicker{color:#EAF3F2}                      /* el turquesa sobre teal da 2,37:1 */

/* lockup: réplica de la estructura del logo (muéve / te) */
.lockup{display:block;width:fit-content;max-width:100%}
.lockup span{display:block;line-height:.87}
.lockup span+span{margin-left:1.6em;margin-top:-.04em;color:var(--turquesa-display)}
.f-profundo .lockup span+span,.f-teal .lockup span+span{color:var(--turquesa)}

/* ---------- botones ---------- */
.boton{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.95em 1.6em;border-radius:var(--radio);
  /* Turquesa del logo, como pidio el cliente (indicaciones 6-sep).
     Con texto blanco daria 2,49:1 y falla: el texto va en profundo, 4,97:1. */
  background:var(--turquesa);color:var(--profundo);
  font-weight:800;font-size:1.0625rem;text-decoration:none;
  border:2px solid transparent;
  transition:transform 200ms cubic-bezier(.22,1,.36,1), background 200ms;
}
.boton:hover{background:var(--turquesa-display);color:#fff;transform:translateY(-2px)}
.boton--linea{background:transparent;color:var(--tinta);border-color:rgb(17 59 65 / .25)}
.boton--linea:hover{background:transparent;border-color:var(--tinta);transform:translateY(-2px)}
.f-teal .boton{background:#fff;color:var(--teal)}
.f-teal .boton:hover{background:var(--crema)}

.enlace{
  display:inline-flex;align-items:center;gap:.4em;
  font-weight:700;text-decoration:none;color:var(--turquesa-texto);
  border-bottom:2px solid rgb(13 118 107 / .3);padding-bottom:2px;
  transition:border-color 200ms;
}
.enlace:hover{border-bottom-color:var(--turquesa-texto)}
.f-profundo .enlace,.f-teal .enlace{color:var(--turquesa);border-bottom-color:rgb(20 184 166 / .4)}

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:50;background:rgb(241 232 223 / .92);
  backdrop-filter:blur(10px);border-bottom:1px solid rgb(32 110 120 / .18);
}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.1rem}
.cabecera__logo img{width:104px}
.menu{display:flex;align-items:center;gap:1.55rem;list-style:none;margin:0;padding:0}
/* `.menu a` gana en especificidad a `.boton` y le robaba el color:
   el boton del menu salia en tinta sobre turquesa (2,63:1). */
.menu .boton{color:var(--profundo)}   /* el boton usa el turquesa del logo:
   con blanco daria 2,49:1 y con profundo 4,97:1 */
.menu a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--tinta);transition:color 180ms}
.menu a:hover{color:var(--turquesa-texto)}

/* ============================================================
   PORTADA
   ============================================================ */
.portada{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:var(--seccion)}
.portada__marca{position:relative;width:fit-content;max-width:100%}
.portada__onda{
  width:clamp(7rem,17vw,14rem);
  margin-left:clamp(4rem,20vw,17rem);
  margin-bottom:-.35em;
}
.portada__onda path{fill:var(--turquesa)}
.portada h1{font-size:var(--display)}

.portada__pie{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.portada__lead{font-size:var(--lead);line-height:1.55;max-width:34ch;color:var(--tinta-suave)}
.portada__acciones{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.9rem}

/* placa de datos — patrón de documento, reutilizable */
.placa{border-top:2px solid var(--tinta);padding-top:1rem}
.placa__titulo{font-size:var(--etiqueta);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.placa dl{margin:1rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.1rem 1.5rem}
.placa dt{font-size:var(--etiqueta);color:var(--tinta-suave);padding-block:.62rem}
.placa dd{margin:0;font-weight:700;text-align:right;padding-block:.62rem;font-variant-numeric:tabular-nums}
.placa dt,.placa dd{border-bottom:1px solid rgb(32 110 120 / .16)}
.placa__pie{margin-top:.9rem}

/* ============================================================
   DECLARACIÓN — antes era media pantalla vacía
   ============================================================ */
.declaracion{position:relative;overflow:hidden;text-align:center}
.declaracion__onda{
  position:absolute;inset-inline:-10%;top:50%;translate:0 -50%;
  width:120%;opacity:.07;pointer-events:none;
}
.declaracion__onda path{fill:var(--turquesa)}
.declaracion__texto{
  position:relative;font-size:var(--declaracion);font-weight:800;
  letter-spacing:-.025em;line-height:1.14;max-width:22ch;margin-inline:auto;
  color:#fff;
}
.declaracion__texto em{font-style:normal;color:var(--turquesa)}
.declaracion .enlace{margin-top:2.5rem;position:relative}

/* ============================================================
   PRUEBA — cabecera izquierda + documento a la derecha
   ============================================================ */
.prueba__rejilla{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.prueba h2{font-size:var(--h2)}
.prueba__apoyo{margin-top:1.6rem;max-width:26ch;color:var(--tinta-suave);font-size:1.0625rem}
.prueba .enlace{margin-top:1.4rem}

/* ============================================================
   EJES — mismo patrón de cabecera que Actualidad, orden por filas
   ============================================================ */
.bloque__cabecera{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
  padding-bottom:1.6rem;border-bottom:2px solid var(--tinta);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.bloque__cabecera h2{font-size:var(--h2)}

.ejes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,4.5rem)}
.eje{
  display:grid;grid-template-columns:auto 1fr;gap:0 clamp(1rem,2.2vw,1.8rem);
  padding-block:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid rgb(32 110 120 / .22);
}
.eje:nth-child(1),.eje:nth-child(2){border-top:0;padding-top:0}
.eje__n{
  font-size:var(--numeral);font-weight:800;line-height:.82;
  color:var(--turquesa-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;
}
.eje__t{font-size:1.3125rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.5rem}
.eje__d{color:var(--tinta-suave);font-size:1rem;line-height:1.55;max-width:38ch}

/* el séptimo cierra a ancho completo, no queda huérfano */
.eje--cierre{
  grid-column:1 / -1;background:rgb(20 184 166 / .09);
  border-radius:var(--radio);border-top:0;
  padding:clamp(1.8rem,3.4vw,2.6rem) clamp(1.6rem,3vw,2.4rem);
  margin-top:clamp(1.6rem,3vw,2.4rem);align-items:center;
}
.eje--cierre .eje__d{max-width:52ch}

/* ============================================================
   ACTUALIDAD — tres piezas, la primera con peso
   ============================================================ */
.noticias{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.noticia__meta{display:flex;align-items:center;gap:.7rem;font-size:var(--etiqueta);color:var(--tinta-suave);margin-bottom:.9rem}
.punto{width:.55rem;height:.55rem;border-radius:2px;display:inline-block}
.punto--entorno{background:var(--verde)}
.punto--vivienda{background:var(--coral)}
.punto--institucional{background:var(--ambar)}
.tema{font-weight:700;color:var(--tinta)}
.fecha{font-variant-numeric:tabular-nums}

.destacada a{text-decoration:none;display:block}
.destacada__t{font-size:clamp(1.5rem,2.9vw,2.25rem);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.destacada a:hover .destacada__t{color:var(--turquesa-texto)}
.destacada__d{margin-top:1rem;color:var(--tinta-suave);max-width:40ch}

.secundarias{list-style:none;margin:0;padding:0;border-top:1px solid rgb(32 110 120 / .22)}
.secundarias li{border-bottom:1px solid rgb(32 110 120 / .22)}
.secundarias a{display:block;padding-block:1.4rem;text-decoration:none;transition:padding-left 200ms}
.secundarias a:hover{padding-left:.5rem}
.secundarias__t{font-size:1.125rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.secundarias a:hover .secundarias__t{color:var(--turquesa-texto)}

/* ============================================================
   CIERRE
   ============================================================ */
.cierre__rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.cierre h2{font-size:var(--h2)}
.cierre__texto{font-size:var(--lead);max-width:34ch}
.cierre__texto strong{color:#fff}
.cierre .boton{margin-top:1.8rem}

/* ============================================================
   PIE
   ============================================================ */
.pie{padding-block:clamp(3rem,6vw,4.5rem)}
.pie__rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem)}
.pie__logo img{width:104px;margin-bottom:1.6rem}
.pie__menu{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;list-style:none;margin:0;padding:0}
.pie__menu a{text-decoration:none;font-weight:700;font-size:.95rem}
.pie__menu a:hover{color:var(--turquesa)}
.pie__datos{font-size:.9375rem;line-height:1.75}
.pie__legal{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;
  border-top:1px solid rgb(216 226 224 / .22);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.875rem;
}
.pie__legal a{color:var(--sobre-profundo)}

/* ============================================================
   MÓVIL
   ============================================================ */
@media(max-width:900px){
  .menu{display:none}
  .portada__pie,.prueba__rejilla,.ejes,.noticias,.cierre__rejilla,.pie__rejilla{grid-template-columns:minmax(0,1fr)}
  .eje:nth-child(2){border-top:1px solid rgb(32 110 120 / .22);padding-top:clamp(1.6rem,3vw,2.4rem)}
  .eje--cierre{border-top:0}
  .lockup span+span{margin-left:.9em}
  .portada__onda{margin-left:clamp(2rem,12vw,6rem)}
  .declaracion__texto{max-width:none}
}

/* ============================================================
   AJUSTES DE AFINADO (segunda pasada)
   ============================================================ */

/* la declaración respiraba mal en tres líneas cortas */
.declaracion__texto{max-width:26ch}
.declaracion .enlace{margin-top:3rem;font-size:1.0625rem}

/* la columna izquierda de PRUEBA pesaba poco frente a la tabla */
.prueba__apoyo{font-size:var(--lead);line-height:1.5;max-width:24ch}

/* el séptimo eje: el contenido se quedaba a la izquierda del bloque */
.eje--cierre{grid-template-columns:auto minmax(0,1fr)}
.eje--cierre>div{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:0 clamp(1.5rem,3vw,2.5rem);align-items:baseline}
.eje--cierre .eje__t{margin-bottom:0;white-space:nowrap}
.eje--cierre .eje__d{max-width:46ch}

/* la destacada de actualidad necesitaba más peso frente a las dos de al lado */
.destacada{border-top:2px solid var(--tinta);padding-top:1.6rem}
.destacada__d{font-size:1.0625rem}

/* «y hablamos» se iba demasiado a la derecha con el desplazamiento general */
.cierre .lockup span+span{margin-left:.85em}

/* la placa: menos río entre etiqueta y dato */
.placa dl{grid-template-columns:max-content minmax(0,1fr);gap:.1rem clamp(1rem,2.5vw,2rem)}

@media(max-width:900px){
  .eje--cierre>div{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .eje--cierre .eje__t{white-space:normal}
}

/* ==== PARCHE SOLO-VPS 2026-08-28 · vídeo aprobado sobre el verbatim ====
   Única adición al depósito de Azpi: capa de vídeo sobre la foto y bajo el
   velo, cero JavaScript, en bucle continuo y a corte seco (sin fundido de
   costura: orden de Antonio), y el matamovimiento la apaga. */
.portada-foto__video{
  position:absolute;top:0;left:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
}
@media(max-width:900px){
  .portada-foto__video{object-position:56% 66%}
}
.tira__video{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:50% 55%;
}
@media (prefers-reduced-motion: reduce){
  .portada-foto__video,.tira__video{display:none}
}