/* ============================================================
   Muévete — capa de campaña
   Bloques con fotografía. Encima de estilos.css y paginas.css.
   Mismos tokens. Añade solo dos colores derivados y medidos.
   ============================================================ */

:root{
  /* Sin colores fuera de la paleta de marca. El unico anadido es --velo,
     que no es un color: es el negro de los degradados sobre fotografia. */
  --velo:11 58 66;              /* profundo en componentes, para rgb()/ */
}

/* ============================================================
   1 · CABECERA SOBRE FOTO  (solo en la portada)
   ============================================================ */
/* Sigue siendo sticky: la home es larga y el menu tiene que acompanar.
   Base solida (fallback seguro). Si el navegador soporta animacion ligada
   al scroll, arranca transparente sobre la foto y se solidifica al bajar. */
.cabecera--sobre-foto{
  position:fixed;inset-inline:0;top:0;z-index:50;
  background:rgb(var(--velo) / .86);
  border-bottom:1px solid rgb(255 255 255 / .14);
  backdrop-filter:blur(10px);
}
@supports (animation-timeline:scroll()){
  .cabecera--sobre-foto{
    background:transparent;border-bottom-color:transparent;backdrop-filter:none;
    animation:cabecera-solida linear both;
    animation-timeline:scroll();
    animation-range:0 14rem;
  }
  @keyframes cabecera-solida{
    from{background:rgb(var(--velo) / 0);border-bottom-color:rgb(255 255 255 / 0);backdrop-filter:blur(0px)}
    to  {background:rgb(var(--velo) / .86);border-bottom-color:rgb(255 255 255 / .14);backdrop-filter:blur(10px)}
  }
  /* sin animaciones, la cabecera se quedaria transparente sobre fondo claro
     y el texto blanco desapareceria: se vuelve solida desde el principio */
  @media(prefers-reduced-motion:reduce){
    .cabecera--sobre-foto{
      background:rgb(var(--velo) / .86);
      border-bottom-color:rgb(255 255 255 / .14);
      backdrop-filter:blur(10px);
    }
  }
}
.cabecera--sobre-foto .menu a{color:#fff}
.cabecera--sobre-foto .menu a:hover{color:var(--turquesa)}
.cabecera--sobre-foto .menu .boton{
  background:rgb(255 255 255 / .14);
  border:1px solid rgb(255 255 255 / .42);
  backdrop-filter:blur(6px);
}
.cabecera--sobre-foto .menu .boton:hover{background:var(--turquesa);border-color:transparent}
.cabecera--sobre-foto .nav__boton{color:#fff;border-color:rgb(255 255 255 / .45)}
.cabecera--sobre-foto .nav__rayas,
.cabecera--sobre-foto .nav__rayas::before,
.cabecera--sobre-foto .nav__rayas::after{background:#fff}
.cabecera--sobre-foto .menu--desplegado a{color:var(--tinta)}
.cabecera--sobre-foto .menu--desplegado .boton{background:var(--turquesa);color:var(--profundo);border:0}

/* ============================================================
   2 · PORTADA CON FOTOGRAFÍA
   ============================================================ */
.portada-foto{
  position:relative;isolation:isolate;
  min-height:min(94svh,52rem);
  display:grid;align-items:center;
  background:var(--profundo);color:#fff;
  overflow:hidden;
}
.portada-foto__foto{
  position:absolute;top:0;left:0;z-index:-2;
  width:134%;height:100%;object-fit:cover;object-position:50% 68%;
}
@media(max-width:900px){
  .portada-foto__foto{width:100%;object-position:56% 66%}
}
/* Velo LATERAL, no vertical, y en negro en vez de en azul profundo:
   el azul sobre un atardecer dorado lo vira a verde turbio y mata la foto.
   Oscurece la izquierda —donde va el texto— y deja limpia la derecha,
   que es donde esta el nino y el sol. Medido sobre la foto: blanco
   sobre el cielo sin velo da 2,60:1 (falla); con este velo pasa de 9:1. */
.portada-foto__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,
      rgb(0 0 0 / .74) 0%,
      rgb(0 0 0 / .62) 26%,
      rgb(0 0 0 / .30) 48%,
      rgb(0 0 0 / .04) 66%,
      rgb(0 0 0 / 0) 80%),
    linear-gradient(180deg,
      rgb(0 0 0 / .46) 0%,
      rgb(0 0 0 / .24) 12%,
      rgb(0 0 0 / 0) 30%,
      rgb(0 0 0 / 0) 62%,
      rgb(0 0 0 / .42) 100%);
}

/* El nino esta en el centro de la foto y es lo mejor que tiene.
   El texto se queda en una columna estrecha a la izquierda para no taparlo. */
.portada-foto__cuerpo{
  padding-block:clamp(9rem,16vw,11rem) clamp(3rem,6vw,4.5rem);
}
.portada-foto__texto{max-width:min(100%,33rem)}
.portada-foto__kicker{
  color:rgb(255 255 255 / .82);
  margin-bottom:clamp(1rem,2.4vw,1.75rem);
}
/* Los tokens de tamano estaban atados a las clases del diseno anterior
   (.portada h1, .bloque__cabecera h2). Aqui se reconectan a los bloques nuevos.
   El display baja de 9,4vw a 5vw: la columna es estrecha porque manda la foto. */
.portada-foto h1{font-size:clamp(2.5rem,5vw,3.9rem)}
.portada-foto h1.lockup span+span{margin-left:1.2em}
.portada-foto h1.lockup span{
  text-shadow:0 2px 30px rgb(0 0 0 / .55);
}
.titulo-bloque{font-size:var(--h2)}
.portada-foto h1.lockup span+span{color:var(--turquesa)}

.portada-foto__declara{
  max-width:24ch;
  margin-top:clamp(1.5rem,3.4vw,2.5rem);
  font-size:clamp(1.35rem,2.5vw,2rem);
  font-weight:700;line-height:1.24;letter-spacing:-.02em;
  color:#fff;
  text-wrap:balance;
}
.portada-foto__acciones{
  display:flex;flex-wrap:wrap;gap:.85rem;
  margin-top:clamp(2rem,4vw,2.75rem);
}
.portada-foto__acciones .boton--linea{
  color:#fff;border-color:rgb(255 255 255 / .55);
  background:rgb(255 255 255 / .08);backdrop-filter:blur(6px);
}
.portada-foto__acciones .boton--linea:hover{background:#fff;color:var(--profundo);border-color:#fff}

/* franja inferior: los datos del registro, sin robar protagonismo */
.portada-foto__sello{
  max-width:min(100%,33rem);
  border-top:1px solid rgb(255 255 255 / .22);
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.1rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;align-items:baseline;
  font-size:var(--etiqueta);color:rgb(255 255 255 / .74);
}
.portada-foto__sello b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.portada-foto__sello a{color:var(--turquesa);text-decoration-thickness:1px;text-underline-offset:.28em}

/* ============================================================
   3 · QUÉ ESTÁ PASANDO — tarjetas de problema
   ============================================================ */
.problemas{
  display:grid;gap:clamp(.9rem,1.6vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
  margin-top:clamp(2.25rem,4.5vw,3.25rem);
}
.problema{
  background:var(--blanco);
  border:1px solid rgb(32 110 120 / .16);
  border-radius:var(--radio);
  padding:clamp(1.5rem,2.6vw,2rem);
  display:flex;flex-direction:column;gap:.85rem;
  position:relative;overflow:hidden;
}
.problema::before{
  content:"";position:absolute;inset-inline:0;top:0;height:4px;
  background:var(--acento,var(--turquesa));
}
.problema__etiqueta{
  font-size:var(--etiqueta);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--turquesa-texto);
}
.problema__frase{
  font-size:clamp(1.125rem,1.7vw,1.3125rem);
  font-weight:700;line-height:1.3;letter-spacing:-.015em;
  color:var(--tinta);text-wrap:balance;
}
.problema__nota{font-size:.9375rem;color:var(--tinta-suave);line-height:1.55}
.problema__eje{
  margin-top:auto;padding-top:.35rem;
  font-size:var(--etiqueta);font-weight:700;
  color:var(--turquesa-texto);text-decoration:none;
}
.problema__eje:hover{text-decoration:underline;text-underline-offset:.28em}

/* Acentos por tema, solo en la barra superior: son los mismos colores que
   ya codificaban los temas en Actualidad (punto--vivienda, --entorno...). */
.problema--vivienda {--acento:var(--coral)}
.problema--servicios{--acento:var(--turquesa)}
.problema--calles   {--acento:var(--ambar)}
.problema--entorno  {--acento:var(--verde)}
.problema--deporte  {--acento:var(--teal)}
.problema--economia {--acento:var(--turquesa-display)}

/* ============================================================
   4 · MÉTODO — escuchar · proponer · actuar
   ============================================================ */
.metodo{position:relative;overflow:hidden}
.metodo__onda{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:130%;opacity:.08;fill:var(--turquesa);pointer-events:none;
}
.metodo__cita{
  font-size:var(--declaracion);font-weight:800;line-height:1.14;
  letter-spacing:-.03em;max-width:22ch;text-wrap:balance;color:#fff;
}
.metodo__cita em{font-style:normal;color:var(--turquesa)}

.pasos{
  display:grid;gap:clamp(1.25rem,2.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  margin-top:clamp(2.75rem,5.5vw,4rem);
}
.paso{
  padding-top:1.25rem;
  border-top:3px solid rgb(20 184 166 / .45);
}
.paso__n{
  font-size:var(--etiqueta);font-weight:800;letter-spacing:.16em;
  color:var(--turquesa);margin-bottom:.6rem;
}
.paso__t{
  font-size:clamp(1.5rem,2.4vw,1.875rem);font-weight:800;
  letter-spacing:-.025em;color:#fff;margin-bottom:.55rem;
}
.paso__d{color:var(--sobre-profundo);line-height:1.6}

/* ============================================================
   5 · COMPROMISOS — mosaico mixto foto / color
   ============================================================ */
.compromisos{
  display:grid;gap:clamp(.9rem,1.6vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
  margin-top:clamp(2.25rem,4.5vw,3.25rem);
}
.compromiso{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radio);
  min-height:15.5rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.35rem,2.4vw,1.75rem);
  text-decoration:none;color:inherit;
  transition:transform .28s ease;
}
.compromiso:hover{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.compromiso:hover{transform:none}}

.compromiso__n{
  font-size:2.5rem;font-weight:800;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  opacity:.6;margin-bottom:auto;
}
.compromiso__t{
  font-size:clamp(1.1875rem,1.9vw,1.4375rem);font-weight:800;
  letter-spacing:-.022em;line-height:1.15;margin-bottom:.4rem;
}
.compromiso__d{font-size:.9375rem;line-height:1.5;opacity:.88}

/* con fotografía */
.compromiso--foto{color:#fff}
.compromiso--foto img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
}
.compromiso--foto::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgb(0 0 0 / .06) 0%,
    rgb(0 0 0 / .34) 46%,
    rgb(0 0 0 / .80) 100%);
}
.compromiso--foto .compromiso__n{opacity:.78}

/* planos de color */
.compromiso--teal    {background:var(--teal);color:#EAF3F2}
.compromiso--profundo{background:var(--profundo);color:var(--sobre-profundo)}
.compromiso--crema   {background:var(--blanco);color:var(--tinta);border:1px solid rgb(32 110 120 / .16)}
.compromiso--crema .compromiso__n{color:var(--turquesa-display);opacity:1}


/* el séptimo, a lo ancho */
.compromiso--ancho{grid-column:1 / -1;min-height:11rem}
.compromiso--ancho .compromiso__n{margin-bottom:1rem}

/* ============================================================
   6 · TIRA A SANGRE con declaración
   ============================================================ */
.tira{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(64svh,34rem);
  display:grid;align-items:center;
  background:var(--profundo);color:#fff;
}
.tira img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:50% 55%;
}
.tira::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(92deg,
    rgb(0 0 0 / .78) 0%,
    rgb(0 0 0 / .60) 44%,
    rgb(0 0 0 / .18) 82%,
    rgb(0 0 0 / .06) 100%);
}
.tira__texto{
  max-width:26ch;
  font-size:var(--declaracion);font-weight:800;line-height:1.14;
  letter-spacing:-.03em;text-wrap:balance;
  text-shadow:0 2px 30px rgb(var(--velo) / .5);
}
.tira__texto em{font-style:normal;color:var(--turquesa)}
.tira__pie{
  margin-top:clamp(1.25rem,2.6vw,1.75rem);
  font-size:var(--lead);color:rgb(255 255 255 / .84);max-width:34ch;
}

/* ============================================================
   7 · LLAMADA — banda turquesa
   ============================================================ */
/* Teal de la paleta, que es el mismo fondo que ya usaba el bloque de
   cierre. El turquesa vivo como plano grande no encaja con el resto de
   fondos (crema, blanco, teal, profundo): se queda como acento fino. */
.llamada{background:var(--teal);color:#EAF3F2}
/* sin esto hereda el turquesa-texto general y desaparece sobre el teal */
.llamada .kicker{color:#EAF3F2}
.llamada h2{font-size:var(--h2);text-wrap:balance;max-width:16ch}
.llamada__cabecera{
  display:grid;gap:clamp(1.25rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:end;margin-top:clamp(.75rem,1.5vw,1rem);
}
@media(max-width:820px){.llamada__cabecera{grid-template-columns:1fr}}
.llamada__lead{
  font-size:var(--lead);color:#EAF3F2;
  max-width:42ch;
}
.vias{
  display:grid;gap:clamp(.9rem,1.6vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  margin-top:clamp(2.25rem,4.5vw,3rem);
}
/* El teal es un fondo claro (5,89:1 con blanco): aclarar las tarjetas las
   hundiria (al 12% de blanco el texto baja a 3,96). Van hacia oscuro. */
.via{
  background:rgb(11 58 66 / .30);
  border:1px solid rgb(255 255 255 / .22);
  border-radius:var(--radio);
  padding:clamp(1.35rem,2.4vw,1.75rem);
  text-decoration:none;color:#fff;
  display:flex;flex-direction:column;gap:.5rem;
  transition:background .22s ease;
}
.via:hover{background:rgb(11 58 66 / .46)}
.via__t{font-size:1.1875rem;font-weight:800;letter-spacing:-.02em}
.via__d{font-size:.9375rem;color:#EAF3F2;line-height:1.5}
.via__flecha{
  margin-top:auto;padding-top:.5rem;
  font-size:var(--etiqueta);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}

/* ============================================================
   8 · AJUSTES DE PANTALLA PEQUEÑA
   ============================================================ */
/* la cabecera fija taparia el inicio de una seccion enlazada por ancla */
[id]{scroll-margin-top:6.5rem}

@media(max-width:900px){
  .portada-foto__texto,.portada-foto__sello{max-width:100%}
}

@media(max-width:640px){
  .portada-foto{min-height:min(96svh,44rem)}
  .portada-foto__cuerpo{padding-block:clamp(7.5rem,26vw,9.5rem) 2.5rem}
  .tira::after{
    background:linear-gradient(180deg,
      rgb(0 0 0 / .42) 0%,
      rgb(0 0 0 / .78) 100%);
  }
  .compromiso--ancho{min-height:13rem}
}

/* ============================================================
   9 · HERO INTERIOR CON FOTOGRAFIA
   Misma estructura que .hero (kicker, h1, lead, ancla): solo
   cambia el fondo. Se aplica a las tres paginas que ganan algo
   con una imagen; el resto sigue en plano de color, porque una
   playa detras de un organigrama es relleno.
   ============================================================ */
.hero--foto{
  isolation:isolate;color:#fff;background:var(--profundo);
  padding-block:clamp(5.5rem,11vw,8.5rem);
}
.hero--foto .hero__fondo{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
}
/* mismo criterio que en la portada: negro, no azul, y con mas peso
   a la izquierda, que es donde cae el titulo */
.hero--foto::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    /* Velo aligerado (8-sep): medido sobre las siete fotos de hero, en la
       banda donde cae el texto. Peor caso con este velo: 6,3:1 en blanco,
       muy por encima del 4,5 que pide AA. */
    linear-gradient(94deg,
      rgb(0 0 0 / .56) 0%,
      rgb(0 0 0 / .42) 34%,
      rgb(0 0 0 / .22) 62%,
      rgb(0 0 0 / .08) 100%),
    linear-gradient(180deg,
      rgb(0 0 0 / .20) 0%,
      rgb(0 0 0 / .06) 40%,
      rgb(0 0 0 / .24) 100%);
}
.hero--foto .hero__lead{color:rgb(255 255 255 / .86)}
.hero--foto .hero__kicker{color:rgb(255 255 255 / .82)}
.hero--foto h1{text-shadow:0 2px 30px rgb(0 0 0 / .5)}
.hero--foto .lockup span+span{color:var(--turquesa)}
.hero--foto .ancla{border-top-color:rgb(255 255 255 / .5)}
.hero--foto .ancla__nota a,
.hero--foto .ancla__nota .enlace{color:var(--turquesa)}
.hero--foto .indice a{color:#fff;border-color:rgb(255 255 255 / .3)}
.hero--foto .indice a:hover{background:rgb(255 255 255 / .14)}
/* la onda no aporta encima de una foto */
.hero--foto .hero__onda{display:none}

@media(max-width:640px){
  .hero--foto::after{
    background:linear-gradient(180deg,
      rgb(0 0 0 / .48) 0%,
      rgb(0 0 0 / .68) 100%);
  }
}

/* El ancla cae en la mitad derecha, donde el velo es mas suave para no
   tapar la foto. Con un atardecer detras, el turquesa ahi no contrasta.
   Se le da fondo propio: asi la legibilidad no depende de la imagen. */
.hero--foto .ancla{
  background:rgb(0 0 0 / .62);
  backdrop-filter:blur(8px);
  border:1px solid rgb(255 255 255 / .22);
  border-top:2px solid rgb(255 255 255 / .55);
  border-radius:var(--radio);
  padding:1.15rem clamp(1.1rem,2vw,1.5rem) 1.35rem;
}
.hero--foto .ancla__valor{color:#fff}
.hero--foto .ancla__etiqueta,
.hero--foto .ancla__nota{opacity:.88}
/* El turquesa NO se usa encima de fotografia: con un sol detras baja a
   1,39:1 aunque haya velo. Los enlaces del ancla van en blanco subrayado,
   que en el peor caso (placa al 62% sobre blanco puro) da 6,19:1. */
.hero--foto .ancla a{
  color:#fff;text-decoration:underline;
  text-decoration-color:rgb(255 255 255 / .5);
  text-decoration-thickness:1px;text-underline-offset:.28em;
}
.hero--foto .ancla a:hover{text-decoration-color:#fff}

/* ==== PARCHE 2026-08-28 · LA ONDA ES LA TILDE DE «MUÉVETE» Y EL HERO OCUPA
   LA PANTALLA ====
   Ordenes de Antonio: (1) «sustituye la tilde del texto por la onda animada,
   de la misma forma que la onda lo hace en el logo de Muévete»; (2) que el
   hero ocupe la pantalla entera antes de hacer scroll.
   Va aqui y no al final de estilos.css —donde vive el parche del video— porque
   campana.css se carga DESPUES: un .portada-foto de igual especificidad puesto
   en estilos.css lo perderia contra el de aqui.

   (1) LA TILDE. En el logotipo el acento de la «é» ES la onda, y la regla se
   ha MEDIDO sobre marca/logo-turquesa-560.png (560x278), no supuesto:
     · onda-acento 94 x 45 px sobre una altura de x de 100 -> el ancho de la
       onda es 0,94 x la altura de la x (y ~la anchura de la letra que corona:
       la «e» final del logo mide 101; en Manrope 800 la tinta de la «e» mide
       1,03 x la altura de la x — la misma relacion);
     · aire onda->letra 19 px sobre esa x de 100 -> 0,19 x la altura de la x
       (el encargo decia 18; la medicion propia da 19 y mandan los numeros);
     · centrada sobre la letra (desvio en el logo: 1,5 px sobre 94);
     · el trazo del logo (28 px) sale solo del ancho —la forma de la onda fija
       trazo = 0,2993 x ancho— y aqui queda en 9,6 px a 1920 contra un asta de
       9,0: sigue pesando «mas o menos lo mismo que la linea del texto», que
       fue la correccion de Antonio a la onda suelta.
   Pasadas a Manrope 800, con la fuente cargada y medida en lienzo: altura de
   la x = 0,545 del cuerpo, descenso = 0,3045 del cuerpo, y la TINTA de la «e»
   sube a 0,561 del cuerpo (el rebase optico de las redondas: 35 px sobre una
   x de 34 a cuerpo 62,4 — en el logo pasa igual, 2 px sobre 100, y su aire de
   19 esta medido hasta la tinta). De ahi las dos constantes de abajo:
   ancho = 0,94 x 0,545 = ,5123 x cuerpo; bottom (desde el borde bajo de la
   caja de la «e», que es descenso por debajo de la base)
   = 0,3045 + 0,561 + 0,19 x 0,545 = ,9689 x cuerpo. Cuelgan de
   --display-portada, el valor que ya tenia el h1: si el display cambia, la
   tilde le sigue sola. Hay que recalcularlas si cambia la fuente o el peso.
   La onda va ABSOLUTA (fuera del flujo): el lockup no cambia de caja, y la
   FORMA no se toca — escala uniforme, lo unico que la anticolision permite.

   EL GESTO 5 · MAREA: la fase viaja UN PERIODO (100 unidades del viewBox; en
   SVG px = unidad de usuario, asi que vale a cualquier tamano), lineal
   obligado —cualquier curva de tiempo meteria costura en el bucle— y --t-marea
   por periodo (3s aqui, no los 9s del gesto: el porque, en el token). El easing vertical lo pone la propia sinusoide: cada punto sube y
   baja como cos(t), que es la fisica del agua. Solo transform: ni layout ni
   pintura de mas, y por eso la onda NO lleva la placa de sombra del lockup —un
   filtro sobre lo que se anima repinta cada fotograma (la «e» si conserva la
   text-shadow del lockup: es texto y no se anima).

   (2) LA PANTALLA ENTERA. El tope era min(94svh,52rem): a 1920x1080 el hero
   media 832 px y dejaba 248 de la seccion siguiente asomando. Se quita el tope
   y se baja el relleno superior, que estaba calculado para un hero de 832 y en
   uno de 1080 empujaba el bloque demasiado abajo. svh y no vh: en movil, vh
   mide con la barra del navegador retraida y el sello se iria bajo el pliegue.

   Y ALIGN-CONTENT:CENTER, que no es cosmetica: <picture> es un ITEM DE REJILLA
   mas (su <img> esta absoluto, asi que su fila mide 0). Con dos filas y el
   reparto por defecto, el sobrante se repartia entre las dos y el bloque de
   texto caia 84 px por debajo del centro. Con 832 px de hero eran 45 px y no se
   veian; con 1080 son 169 y el hero salia visiblemente descentrado hacia abajo.
   ================================================================ */
:root{
  --display-portada:clamp(2.5rem,5vw,3.9rem);  /* el que ya tenia .portada-foto h1 */
  /* 3s y no los 9s del gesto, por orden de Antonio (28-08, noche: «acelera mas
     la animacion, ahora va demasiado lenta»). El 9s se afino para una marea de
     ~245 px de periodo (27 px/s en la web de Cartel); en la tilde el periodo
     son 35 px y a 9s la fase viaja a 3,9 px/s — imperceptible. A 3s cada punto
     ondula cada 3s (11,7 px/s a 1920): visible y sin nervio. Lo demas del
     gesto no se toca: UN periodo por vuelta, lineal, solo transform. */
  --t-marea:3s;
}
.portada-foto h1{font-size:var(--display-portada)}

/* .lockup span{display:block} (estilos.css) alcanzaria tambien a este span
   interior y partiria la palabra en tres lineas: se le gana en especificidad */
.lockup span.lockup__acento{display:inline;position:relative}
.portada-foto__onda{
  position:absolute;
  /* centrada sobre la TINTA de la «e», como el logo. El +.0225 corrige que la
     tinta no esta centrada en el avance del glifo (hombro izq 2 px, der 1 a
     cuerpo 62,4): sin el, la onda cae 1,4 px a la izquierda del centro optico */
  left:50%;translate:calc(-50% + var(--display-portada) * .0225);
  width:calc(var(--display-portada) * .5123);    /* 0,94 x la altura de la x */
  bottom:calc(var(--display-portada) * .9689);   /* descenso + tinta de la e + aire 0,19x */
}
.portada-foto__onda path{fill:var(--turquesa)}
@media (prefers-reduced-motion:no-preference){
  .portada-foto__onda path{animation:marea var(--t-marea) linear infinite}
}
@keyframes marea{to{transform:translateX(100px)}}

.portada-foto{
  min-height:100vh;          /* respaldo para quien no tenga svh */
  min-height:100svh;
  align-content:center;
}
.portada-foto__cuerpo{
  padding-block:clamp(7rem,13vw,8.5rem) clamp(3rem,6vw,4.5rem);
}
@media(max-width:640px){
  .portada-foto{min-height:100svh}
  .portada-foto__cuerpo{padding-block:clamp(6.5rem,22vw,8rem) 2.5rem}
}

/* (3) EL VELO INFERIOR, RECALIBRADO — no es cosmetica, es una regresion medida.
   El velo vertical va de 0 en el 62 % del hero a .42 en el 100 %, asi que la
   densidad que recibe un texto depende de EN QUE PORCENTAJE del hero cae. Al
   crecer el hero, el sello sube: a 375 px pasaba del 90,7 % al 84,7 %, donde el
   mismo degradado da .251 en vez de .317. Sumado a que el video movil se recorta
   distinto en una caja mas alta, «Los papeles, publicados» caia de 4,97:1 a
   4,40:1 — un FALLO AA NUEVO, y traido por esta composicion, no por el deposito.
   Se devuelve la densidad subiendo el ultimo tramo a .55: .55x(84,7-62)/38 =
   .329, que es la que tenia. Solo se toca el punto final del degradado vertical;
   el lateral —el que sostiene el texto de la columna— no se toca ni una coma. */
.portada-foto__velo{
  /* Lateral aligerado el 8-sep (mas luz en la portada, peticion del cliente).
     El degradado VERTICAL de debajo NO se toca: es el que sostiene el sello
     «Los papeles, publicados» en movil, calibrado al limite. */
  background:
    linear-gradient(96deg,
      rgb(0 0 0 / .62) 0%,
      rgb(0 0 0 / .52) 26%,
      rgb(0 0 0 / .34) 48%,
      rgb(0 0 0 / .10) 66%,
      rgb(0 0 0 / 0) 82%),
    linear-gradient(180deg,
      rgb(0 0 0 / .46) 0%,
      rgb(0 0 0 / .24) 12%,
      rgb(0 0 0 / 0) 30%,
      rgb(0 0 0 / 0) 62%,
      rgb(0 0 0 / .55) 100%);
}

/* ==== PARCHE 2026-08-28 · LA ONDA DEL METODO SE MUEVE: EL GESTO 5 · MAREA
   EN EL FONDO DE «COMO TRABAJAMOS» ====
   Orden de Antonio (chat, 28-08, sobre la captura de esta seccion): estudiar
   como animar la onda del fondo basandose en la animacion de la onda ya
   aprobada, y ejecutarlo.

   LA ONDA NO SE HA REDIBUJADO NI MOVIDO. .metodo__onda ya es la tira de DOS
   PERIODOS de la marca (periodo = 100 unidades del viewBox; sale de
   generar-onda.py): esa tira existe exactamente para deslizar la fase sin
   costura. El gesto es el 5 · MAREA — la fase viaja UN PERIODO, lineal
   obligado (cualquier curva de tiempo mete costura en el bucle), solo
   transform — y REUTILIZA los @keyframes marea que el parche del hero (v9)
   dejo en esta hoja: translateX(100px) vale aqui igual, porque la tira es
   de periodo 100 en unidades de usuario del SVG, a cualquier tamano.

   TIEMPO PROPIO: --t-marea vale 3 s desde la v9, afinado para la tilde de
   ~35 px (11,7 px/s). El periodo del metodo renderiza a 411/1.404/2.105 px
   (375/1280/1920): a 3 s serian ~700 px/s. Se sirve a 9 s — el tiempo del
   gesto original, el mismo que el rescate del 24-08 dio a la onda grande de
   la portada de la propuesta (periodos comparables, Antonio lo vio) —, o sea
   ~234 px/s a 1920. Si Antonio lo quiere mas sereno, el mando es ESTE token.

   En fase 0 el desplazamiento es 0: EL REPOSO DE LA NORMA ES LA FASE 0, y
   con prefers-reduced-motion la seccion queda exactamente como estaba (el
   matamovimiento de estilos.css ademas alcanza a este path por ser elemento
   real, no pseudoelemento).
   La caja no se mueve: la ventana del viewBox recorta y la tira la cubre en
   todas las fases (borde izquierdo -104,4 → -4,4 ≤ 0; derecho 95,6 → 195,6,
   siempre > 91,2).
   OJO — CON ESTO LA HOME LLEVA DOS MAREAS: la tilde del hero (norma v9) y
   esta. La regla dura 8 dice que la marea es unica por pagina: este parche
   es un ESTUDIO para elegir, no puede promoverse sin resolver eso antes.
   ================================================================ */
:root{--t-marea-metodo:9s}   /* el tiempo del gesto original; el de la tilde (3 s) es de la tilde */
@media (prefers-reduced-motion:no-preference){
  .metodo__onda path{animation:marea var(--t-marea-metodo) linear infinite}
}

/* ==== PARCHE 2026-08-28 · REPARTO DE PESOS EN LA HOME ====
   Orden de Antonio (chat, 28-08): «en la home principal todos los titulos
   estan a la izquierda y el cuerpo del texto a la derecha. ocurre lo mismo
   en todas las secciones. reparte los pesos visuales para que este mas
   compensado.» Aprobado el mismo dia sobre la preview muevete-pesos, CON UN
   RECORTE SUYO: «revierte la posicion de esta seccion en concreto [Que esta
   pasando]. el resto esta aprobado, consolidalo» — asi que la cabecera de
   «Que esta pasando» NO esta aqui: sigue en el carril izquierdo de la
   norma, y devolverla a la derecha necesitaria orden nueva.
   Deroga la decision de composicion 1 del sistema («un solo eje
   izquierdo… no hay composicion alternada», de Azpi, v1-v10): versionada
   en la directriz sistema-visual-del-partido (v12).

   EL REPARTO, POR SECCIONES — y por que cada una va donde va:
   · Portada y tira a sangre NO se tocan: su texto esta a la izquierda
     porque los velos estan calibrados ahi y el sujeto de la foto (el nino,
     la costa) ocupa la derecha. El equilibrio de esas dos lo pone la
     propia imagen (directriz fotografia-y-velo).
   · «Que esta pasando» queda como la norma (cabecera izquierda): el carril
     derecho se estudio y Antonio lo revirtio mirandolo.
   · «Como trabajamos» CENTRA la cita sobre la onda, que ya esta centrada
     (left:50%). Banda de voz -> eje central.
   · «Participa» CENTRA su cabecera sobre las tres vias iguales. La otra
     banda de voz. (Solo la home: en Quienes somos e Ideario la banda sigue
     con su forma anterior — unificar el componente es decision PENDIENTE
     de Antonio, registrada en la tarea del reparto.)
   · «Antes de prometer» se ESPEJA: la placa registral a la izquierda
     (1,15fr) y el titulo a la derecha (,85fr) — mismas proporciones que la
     rejilla original, espejadas. El DOM no cambia: en movil (una columna)
     el titulo sigue saliendo antes que la placa, que es su orden de
     lectura.
   · Compromisos y Actualidad conservan su cabecera de barra (titulo +
     enlace + regla gruesa a todo el ancho): esa barra ya reparte sola.
   Secuencia de ejes resultante, de arriba abajo:
   izq(foto) -> izq -> CENTRO -> izq -> izq(foto) -> CENTRO -> DER -> izq.

   TODO ACOTADO A ESCRITORIO (>=901px; la banda de Participa a >=821, que
   es su punto de corte propio): en movil todo es una columna al eje
   izquierdo y no hay desequilibrio que repartir — movil queda identico.
   Ni un color, ni un tamano, ni un velo, ni un font-size tocados: solo
   alineacion, anclaje y orden de rejilla. El contraste medido de la norma
   no se mueve (mismos pares texto/fondo sobre fondos planos).
   ================================================================ */
@media (min-width:901px){
  /* como trabajamos -> centrado sobre la onda */
  .inicio .metodo .kicker{text-align:center}
  .inicio .metodo__cita{margin-inline:auto;text-align:center}

  /* antes de prometer -> espejo: placa izquierda, titulo derecha */
  .inicio .prueba__rejilla{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .inicio .prueba__rejilla>div:first-child{order:2}
}
@media (min-width:821px){
  /* participa -> cabecera centrada */
  .inicio .llamada .kicker{text-align:center}
  .inicio .llamada__cabecera{
    grid-template-columns:minmax(0,1fr);justify-items:center;
    text-align:center;gap:clamp(1rem,2vw,1.5rem);
  }
}

/* ==== VERSION FINAL 2026-08-30 · LA DEUDA DE LA NORMA, SALDADA ====
   Orden de Antonio (chat, 30-08): version final, mejorar todo lo que lo
   necesite, libertad sobre las decisiones nuestras. Este bloque devuelve a la
   norma lo que las directrices vigentes exigian y el deposito verbatim no
   traia (sistema-campana/LEEME.md §3): cada pieza se PORTA del historico
   sistema-partido/ —donde ya estaba construida y medida— adaptada a los
   selectores de esta hoja; nada se reinventa. Los cambios de dato y de enlace
   van en el HTML; aqui solo vive el CSS. */

:root{
  --foco:3px;              /* anillo de foco: grosor y hueco */
  --foco-hueco:3px;
  /* De la escalera de identidad v7. Aqui es el acento pequeno de la banda del
     metodo: sobre profundo + onda al 8% el --turquesa se queda en 4,35:1
     (AA exige 4,5) y este da 5,72:1 medido sobre la banda compuesta. */
  --turquesa-claro:#17D3BE;
}

/* ---------- 1 · ENLACE DE SALTO AL CONTENIDO (SC 2.4.1, nivel A) ----------
   Nunca display:none ni visibility:hidden (sacarian el enlace del arbol de
   accesibilidad): se esconde fuera del lienzo, que lo conserva enfocable. */
.saltar{
  position:absolute;left:0;top:0;z-index:100;
  background:var(--profundo);color:#fff;                 /* 12,6:1 */
  font-weight:800;font-size:1rem;
  padding:.75rem 1.25rem;border-radius:0 0 var(--radio) 0;
  text-decoration:none;
  transform:translateY(-105%);
}
.saltar:focus-visible{transform:translateY(0)}

/* ---------- 2 · FOCO VISIBLE (SC 1.4.11 / 2.4.13) ----------
   Doble anillo tinta+blanco: funciona sobre las superficies claras sin una
   regla por superficie. Sobre campo oscuro o fotografia se invierte.
   `outline` y no `border`: no entra en el box model y sobrevive en
   forced-colors. El deposito no traia NI UN indicador de foco. */
:focus-visible{
  outline:var(--foco) solid var(--tinta);
  outline-offset:var(--foco-hueco);
  box-shadow:0 0 0 calc(var(--foco) + var(--foco-hueco)) #fff;
}
.f-profundo :focus-visible,.f-teal :focus-visible,.llamada :focus-visible,
.portada-foto :focus-visible,.tira :focus-visible,.hero--foto :focus-visible,
.cabecera--sobre-foto :focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 calc(var(--foco) + var(--foco-hueco)) var(--profundo);
}
@media (forced-colors: active){
  :focus-visible{outline:var(--foco) solid;box-shadow:none}
}

/* ---------- 3 · LA PAGINA ACTUAL SE MARCA TAMBIEN EN ESCRITORIO ----------
   El deposito solo estilaba aria-current dentro del desplegable movil. */
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

/* ---------- 4 · BANNER DE CONSENTIMIENTO · AEPD ----------
   Portado de sistema-partido (alli era marcado sin logica; la logica vive en
   js/consentimiento.js: analitica solo tras aceptar, decision con fecha y
   caducidad de 24 meses, reapertura desde el pie). Rechazar no pesa menos que
   aceptar: mismo tamano, mismo peso, misma altura de diana. Es requisito
   contratado (directriz consentimiento-de-cookies v2), no criterio. */
.cookies{
  position:fixed;inset:auto 0 0 0;z-index:70;
  background:var(--profundo);color:var(--sobre-profundo);
  padding:.6rem var(--canalon);border-top:2px solid var(--turquesa);
}
.cookies[hidden]{display:none}
.cookies p{font-size:.9375rem;line-height:1.5;max-width:60ch;margin:0}
.cookies a{color:#fff}
.cookies__acciones{margin-top:.75rem;display:flex;gap:.5rem}
.cookies__acciones button{
  flex:1 1 0;min-height:44px;min-width:44px;border:0;border-radius:var(--radio);
  font:inherit;font-size:.9375rem;font-weight:800;cursor:pointer;padding:12px 20px;
}
.cookies__si{background:var(--turquesa-accion);color:#fff}   /* 4,59:1 */
.cookies__no{background:var(--crema);color:var(--tinta)}     /* 10,0:1 */
@media (min-width:52rem){
  .cookies{display:flex;align-items:center;justify-content:space-between;gap:2.5rem}
  .cookies__acciones{margin-top:0;flex:0 0 auto}
  .cookies__acciones button{flex:0 0 auto}
}

/* ---------- 5 · EL KICKER DE PORTADA, SIN PLACA POR ORDEN DE ANTONIO ----
   El 30-08 se le puso placa propia (regla §6 de fotografia-y-velo: velo .62 +
   blur, el patron del ancla) porque el peor fotograma del video daba 3,83:1
   a 1920 (exige 4,5) y bajaba con cada recorte de cabeza. Antonio la vio y
   ordeno quitar el recuadro el mismo dia: una decision de diseno propia que
   el cliente contradice no se defiende, se versiona (fotografia-y-velo v10).
   Lo que queda: el color SOLIDO (regla 4: ni alfa en texto — el deposito
   traia blanco al 82%). El ratio que vuelve esta re-medido a 32 fotogramas
   y registrado como deuda declarada, no escondido: ver MEDICIONES.md §7. */
.portada-foto__kicker{
  color:var(--sobre-profundo);
}

/* ---------- 6 · BAJO 900 px EL VELO LATERAL NO SIRVE: SE PONE VERTICAL ----
   Regla §3 de fotografia-y-velo, vigente y hasta hoy incumplida: por debajo
   de 900 px el texto ocupa el ancho entero y se sale de la banda oscura de la
   izquierda (el degradado de 96° lo dejaba encima del cielo: kicker 2,30:1,
   lockup «con nosotros» 1,04:1, declaracion 2,34:1 a 375 — los tres fallos AA
   heredados del deposito). Valores portados del arreglo medido de
   sistema-partido; re-medidos aqui sobre el ciclo del video (32 fotogramas). */
@media(max-width:900px){
  .portada-foto__velo{
    background:linear-gradient(180deg,
      rgb(0 0 0 / .66) 0%,
      rgb(0 0 0 / .60) 46%,
      rgb(0 0 0 / .46) 74%,
      rgb(0 0 0 / .56) 100%);
  }
}

/* ---------- 7 · EL TURQUESA PEQUENO DE LA BANDA DEL METODO ----------
   Deuda del deposito aflorada el 28-08 (punto 4 de la tarea de accesibilidad):
   el kicker y los tres `paso__n` descansan sobre la banda de la onda al 8% y
   el --turquesa se queda en 4,35:1. Sube a --turquesa-claro: 5,72:1 sobre la
   banda compuesta, 6,54:1 sobre profundo limpio. La cita grande no se toca
   (texto grande, exige 3: pasa de sobra con el turquesa de marca). */
.metodo .kicker,.metodo .paso__n{color:var(--turquesa-claro)}

/* ---------- 8 · EL MATAMOVIMIENTO ALCANZA LOS PSEUDOELEMENTOS ----------
   `*` no selecciona pseudoelementos: con reduce puesto quedaban 26 con
   movimiento (nav__rayas::before/::after, el boton del menu movil, solo
   visible bajo 900 px). Dos reglas separadas a proposito: si el navegador no
   conoce ::details-content invalidaria la lista entera de selectores. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}
@media(prefers-reduced-motion:reduce){
  *::details-content{transition:none !important}
}

/* ---------- 9 · PAGINAS LEGALES: dos apoyos minimos ----------
   Las tres legales se componen entera con piezas que ya existian (hero ligero
   de utilidad, placa, hueco, prosa); esto es lo unico nuevo. */
.hueco--nota{margin-top:2rem;min-height:11rem}
.cookies__cambiar{margin-block:2rem}

/* Un valor de placa que no cabe (el correo en la placa de Privacidad a 320 px)
   parte antes que desbordar. Solo actua cuando haria falta scroll. */
.placa dd{overflow-wrap:anywhere}

/* ---------- 10 · TRES FALLOS AA DEL DEPOSITO SOBRE COLOR PLANO ----------
   Cazados por sonda-aa.js sobre esta version (8 nodos, 3 causas), los tres
   son la violacion de la regla 4 de la casa: ni alfa ni opacity en texto.
   (a) El lockup «Esta web» ponia --turquesa sobre la banda teal: 2,37:1 con
       3 exigidos. El remedio es el de la escalera de identidad v7: sobre teal
       el turquesa solo entra como texto grande con --turquesa-claro (3,11:1).
   (b) «Eje NN del ideario» en el ancla de las paginas de tema: el
       opacity:.75 de .ancla__nota arrastraba el enlace de 4,54 a 3,01:1 —
       el caso exacto que hizo escribir la regla 4. Fuera el opacity (solo en
       el hero plano: sobre fotografia el ancla lleva su placa y su propio
       ajuste) y el matiz lo pone un color solido.
   (c) Las etiquetas de las metricas de «Esta web»: blanco al 85% sobre teal,
       4,26:1 con 4,5 exigidos. Color solido de la banda: #EAF3F2 (5,22:1). */
.f-teal .lockup span+span{color:var(--turquesa-claro)}
.hero.f-crema .ancla__nota{opacity:1;color:var(--tinta-suave)}
.metrica__etiqueta{opacity:1;color:#EAF3F2}

/* ==== PARCHE 2026-08-30 (3) · EL CTA DEL MENU CONSERVA SU BLANCO EN :HOVER ====
   Orden de Antonio, con el raton encima del boton: «al pasar el raton por
   encima quiero que este texto aparezca en blanco».

   NO ERA GUSTO, ERA UN FALLO, y es LA MISMA trampa que estilos.css documenta en
   su linea 108 —«.menu a gana en especificidad a .boton y le robaba el color»—,
   resuelta alli SOLO para el estado de reposo. En :hover vuelve a ganar:
     · `.menu a:hover` (0,2,1) > `.menu .boton` (0,2,0)  -> en las cabeceras
       crema el texto pasa a --turquesa-texto Y `.boton:hover` pone EL MISMO
       --turquesa-texto de fondo: medido, 1:1. Texto del color exacto de su
       fondo, en 15 de las 16 paginas.
     · `.cabecera--sobre-foto .menu a:hover` (0,3,1) > `...menu .boton` (0,3,0)
       -> en la portada, --turquesa sobre --turquesa-accion: 1,86:1.
   Las once sondas de la casa lo daban por bueno porque TODAS miden el reposo:
   un control que solo falla cuando lo tocas es invisible para un instrumento
   que nunca lo toca. De ahi la sonda nueva `sonda-hover.js`.

   Se gana en especificidad, que es lo unico que arregla esto de verdad:
   (0,3,0) y (0,4,0) contra los (0,2,1) y (0,3,1) de arriba. Medido despues:
   5,55:1 en crema y 4,63:1 sobre foto. */
.menu .boton:hover,
.cabecera--sobre-foto .menu .boton:hover{color:var(--profundo)}

/* Y un tercero que aparecio al medir, del deposito: el hover de los enlaces de
   la navegacion sobre foto va en --turquesa vivo sobre el velo de la cabecera,
   y segun lo que la foto tenga debajo cae hasta 4,45:1 (exige 4,5; el liston de
   la casa pide +0,20). Sobre campo oscuro la escalera de identidad v7 ya tiene
   el peldano: --turquesa-claro, que por ser MAS claro sube el ratio sobre un
   fondo oscuro. El reposo (#fff) no se toca. */
.cabecera--sobre-foto .menu a:hover{color:var(--turquesa-claro)}

/* ==== INTEGRACION 2026-08-31 · LA V2 DE BORJA: PARTICIPA Y LOS DIEZ PROBLEMAS ====
   Delta de Muevete_web_2026-08-31_v2.zip aplicado CALCADO sobre la norma; el
   inventario del delta y el criterio de cada colision estan en
   entrega-integrar-v2-borja/INVENTARIO-DELTA.md. Aqui viven los componentes de
   participa.html (su §11) y las cuatro tarjetas nuevas de «Que esta pasando».
   Su §10 (la tira con panel) SI esta, abajo: Antonio eligio la OPCION B el
   2026-08-31, mirando las cuatro medidas. Con ella la tira pierde el video de
   la costa (era el plano oscuro que esta decision sustituye); el nuevo, que se
   genera desde la propia foto clara, entra aqui en cuanto exista.
   TRES ADAPTACIONES DE CASA, senaladas abajo donde tocan:
   (1) sobre la banda teal no hay turquesa pequeno (regla 4, identidad v7):
       los numerales de .derechos y .pasos-lista usan alli #EAF3F2 (5,22:1);
   (2) ni alfa ni opacity en texto (misma regla): .red__d baja del blanco al
       74% a --sobre-profundo solido (7,60:1 sobre la pastilla);
   (3) su arreglo del lockup sobre teal (#91F3E8) NO entra: la norma ya lo
       resuelve con var(--turquesa-claro) desde el 30-08 (§10.a del bloque de
       fallos AA) — mismo diagnostico, gana el token del sistema. */


/* ============================================================
   10 · TIRA CON PANEL
   El cliente pide una imagen mas clara y con luz. Con una foto
   luminosa, el texto blanco exigiria un velo fuerte que apagaria
   justo la luz que se busca. Asi que la foto se deja limpia y el
   texto va en un panel de color solido, con su contraste propio.
   Es tambien el formato que necesitara la foto de grupo.
   (Aplicado el 2026-08-31 por decision de Antonio: opcion B.)
   ============================================================ */
.tira--panel::after{content:none}          /* sin velo: la foto se ve entera */
.tira--panel{align-items:stretch;padding:0}
.tira--panel .contenedor{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;padding-block:0;
}
.tira__panel{
  background:rgb(var(--velo) / .93);
  backdrop-filter:blur(2px);
  border-radius:var(--radio);
  padding:clamp(2rem,4vw,3.25rem);
  margin-block:clamp(2.5rem,6vw,5rem);
}
.tira--panel .tira__texto{
  max-width:100%;
  font-size:clamp(1.5rem,3vw,2.5rem);
  text-shadow:none;
}
.tira--panel .tira__pie{max-width:100%;color:var(--sobre-profundo)}

@media(max-width:900px){
  .tira--panel .contenedor{grid-template-columns:1fr}
  .tira__panel{margin-block:clamp(9rem,32vw,13rem) clamp(2rem,5vw,3rem)}
}
/* saltos de la cabecera de Participa: tres tarjetas-ancla */
.saltos{
  display:grid;gap:clamp(.9rem,1.6vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
}
.salto{
  display:flex;flex-direction:column;gap:.5rem;
  padding:clamp(1.35rem,2.4vw,1.75rem);
  border:1px solid rgb(32 110 120 / .18);
  border-radius:var(--radio);
  background:var(--blanco);
  text-decoration:none;color:var(--tinta);
  transition:border-color .2s ease;
}
.salto:hover{border-color:var(--turquesa-accion)}
.salto__t{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.salto__d{font-size:.9375rem;color:var(--tinta-suave);line-height:1.5}
.salto__pie{
  margin-top:auto;padding-top:.6rem;
  font-size:var(--etiqueta);font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--turquesa-texto);
}

/* bloque de cada via */
.via-detalle{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:900px){.via-detalle{grid-template-columns:1fr}}
.via-detalle h2{font-size:var(--h2)}
.via-detalle__lead{margin-top:1.4rem;font-size:var(--lead);line-height:1.55;max-width:44ch}
.f-profundo .via-detalle__lead,.f-teal .via-detalle__lead{color:#EAF3F2}   /* 10,95 y 5,22:1 */

/* los diez derechos del articulo 7 */
.derechos{list-style:none;margin:0;padding:0;counter-reset:d;display:grid;gap:.85rem}
.derechos li{
  counter-increment:d;position:relative;padding-left:2.6rem;
  line-height:1.55;
}
.derechos li::before{
  content:counter(d,decimal-leading-zero);
  position:absolute;left:0;top:.1em;
  font-size:var(--etiqueta);font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--turquesa-texto);
  letter-spacing:.06em;
}
.f-profundo .derechos li::before{color:var(--turquesa)}   /* 4,97:1 */
/* ADAPTACION (1): Borja ponia turquesa tambien sobre teal (2,37:1). */
.f-teal .derechos li::before{color:#EAF3F2}               /* 5,22:1 */

/* cuotas */
.cuotas{display:grid;gap:.75rem;margin-top:clamp(1.5rem,3vw,2rem)}
.cuota{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  padding:1rem 1.25rem;border-radius:var(--radio);
  background:rgb(20 184 166 / .1);
  border:1px solid rgb(32 110 120 / .18);
}
.cuota__importe{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--turquesa-texto)}
.cuota__quien{font-size:.9375rem;color:var(--tinta-suave)}

/* el marco legal de las donaciones, como argumento y no como letra pequena */
.marco{
  border-top:3px solid var(--turquesa);
  padding-top:1.25rem;display:grid;gap:.9rem;
}
.marco__t{font-size:var(--etiqueta);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#EAF3F2}  /* el turquesa sobre teal daria 2,37:1 */
.marco dl{display:grid;gap:.7rem;margin:0}
.marco dt{font-weight:800;font-size:.9375rem}
.marco dd{margin:0;font-size:.9375rem;line-height:1.55;color:#EAF3F2}   /* --sobre-profundo sobre teal se queda en 4,46 */
.marco__pie{font-size:var(--etiqueta);color:#EAF3F2;margin-top:.3rem}

/* pendiente de dato del cliente */
.pendiente{
  display:inline-block;padding:.15em .6em;border-radius:6px;
  background:rgb(236 164 0 / .18);border:1px dashed rgb(236 164 0 / .55);
  font-size:.9375rem;font-weight:700;color:#6E4C00;
}
.f-profundo .pendiente,.f-teal .pendiente{color:#FFF6E4;border-color:rgb(236 164 0 / .6)}   /* 3,96 -> 4,75:1 */

/* redes sociales */
.redes{
  display:grid;gap:clamp(.9rem,1.6vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));
  margin-top:clamp(2rem,4vw,2.75rem);
}
.red{
  display:flex;align-items:center;gap:.9rem;
  padding:1.1rem 1.35rem;border-radius:var(--radio);
  border:1px solid rgb(255 255 255 / .24);
  background:rgb(255 255 255 / .07);
  text-decoration:none;color:#fff;
  transition:background .2s ease;
}
.red:hover{background:rgb(255 255 255 / .16)}
.red svg{width:22px;height:22px;flex:none;fill:currentColor}
.red__t{font-weight:800;letter-spacing:-.01em}
/* ADAPTACION (2): era rgb(255 255 255 / .74) — alfa en texto, regla 4. */
.red__d{font-size:var(--etiqueta);color:var(--sobre-profundo);display:block;margin-top:.1em}   /* 7,60:1 */

/* La placa alinea los valores a la derecha y usa --tinta-suave en las
   etiquetas: sirve para un CIF o una fecha, no para frases ni sobre
   fondo de color. Estos dos bloques llevan componente propio. */
.pasos-lista{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:1rem}
.pasos-lista li{display:grid;grid-template-columns:auto 1fr;gap:.2rem .95rem;align-items:baseline}
.pasos-lista__n{
  font-size:var(--etiqueta);font-weight:800;letter-spacing:.1em;
  color:var(--turquesa-texto);font-variant-numeric:tabular-nums;
}
.pasos-lista__t{font-weight:800;grid-column:2}
.pasos-lista__d{grid-column:2;line-height:1.55;color:var(--tinta-suave);font-size:.9375rem}
.f-profundo .pasos-lista__n{color:var(--turquesa)}   /* 4,97:1 */
/* ADAPTACION (1), misma razon que en .derechos */
.f-teal .pasos-lista__n{color:#EAF3F2}
.f-profundo .pasos-lista__d,.f-teal .pasos-lista__d{color:#EAF3F2}

.datos-cuenta{border-top:3px solid var(--turquesa);padding-top:1.2rem;display:grid;gap:.9rem}
.datos-cuenta__t{
  font-size:var(--etiqueta);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#EAF3F2;
}
.datos-cuenta dl{margin:0;display:grid;gap:.75rem}
.datos-cuenta dt{font-size:var(--etiqueta);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#EAF3F2}
.datos-cuenta dd{margin:.15rem 0 0;font-size:1.0625rem;font-weight:700;color:#fff}
.datos-cuenta__pie{font-size:var(--etiqueta);color:#EAF3F2;line-height:1.55}

/* acentos de las cuatro tarjetas anadidas el 31-ago (mismos colores que ya
   codificaban temas en Actualidad; --acento lo consume .problema::before) */
.problema--agua      {--acento:var(--turquesa)}
.problema--transporte{--acento:var(--ambar)}
.problema--primario  {--acento:var(--verde)}
.problema--territorio{--acento:var(--teal)}

/* Con 10 tarjetas y rejilla de tres la ultima queda huerfana. Si es la
   primera de su fila, ocupa el ancho entero. Es automatico: si manana
   son 11 o 12, la regla deja de aplicar sola.
   ADAPTACION MEDIDA (colision 6 del inventario): Borja la disparaba a
   52rem (832px), pero la rejilla es auto-fit y entre 832 y ~990px rinde
   DOS columnas (medido con rejilla-problemas.js: 2 col a 960 sin barra de
   scroll y a 974 con ella; 3 col desde ~973/990) — alli su regla dejaba a
   la NOVENA tarjeta sola: huerfana inducida por la regla que venia a
   quitarla. A 63rem (1008px) hay tres columnas con y sin barra, con
   margen. En la ventana 973-1008 la decima queda como tarjeta suelta
   normal, que es el estado natural de la rejilla, no un defecto. */
@media(min-width:63rem){
  .problema:last-child:nth-child(3n+1){
    grid-column:1 / -1;
    display:grid;grid-template-columns:auto minmax(0,26ch) minmax(0,1fr) auto;
    align-items:center;gap:1rem 2.5rem;
  }
  .problema:last-child:nth-child(3n+1) .problema__eje{margin-top:0;padding-top:0;white-space:nowrap}
}

/* El compromiso 07 va a ancho completo: con foto, el degradado vertical
   de .compromiso--foto deja el texto sobre la parte clara. Aqui va lateral,
   como en la portada, para que el texto tenga fondo y la plaza se vea. */
.compromiso--foto.compromiso--ancho::after{
  background:
    linear-gradient(95deg,
      rgb(0 0 0 / .82) 0%,
      rgb(0 0 0 / .68) 38%,
      rgb(0 0 0 / .34) 68%,
      rgb(0 0 0 / .16) 100%);
}
@media(max-width:640px){
  .compromiso--foto.compromiso--ancho::after{
    background:linear-gradient(180deg, rgb(0 0 0 / .34) 0%, rgb(0 0 0 / .84) 100%);
  }
}

/* ============================================================
   12 · ORGANIGRAMA CON RETRATOS  (fotos del partido, 7-sep)
   ============================================================ */
.cargo{overflow:hidden}
.cargo__foto{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:var(--radio);margin-bottom:1rem;background:var(--crema);
}
.cargo--principal .cargo__foto{max-width:15rem}
.cargos__subtitulo{
  font-size:var(--etiqueta);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--turquesa-texto);
  margin:clamp(2.5rem,5vw,3.5rem) 0 1.25rem;
  padding-top:1.25rem;border-top:1px solid rgb(32 110 120 / .2);
}
@media(min-width:52rem){
  .cargos__fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem)}
  .cargo--principal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
  .cargo--principal .cargo__foto{margin-bottom:0}
}
@media(max-width:52rem){
  .cargos__fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:1.25rem}
}

/* foto de grupo (provisional: el partido la va a repetir con mejor tiempo) */
.grupo{margin:0}
.grupo img{width:100%;height:auto;border-radius:var(--radio);display:block}

/* bloque «Próximamente»: para lo que existira pero aun no tiene contenido */
.proximamente{
  border:1px dashed rgb(32 110 120 / .38);
  border-radius:var(--radio);
  padding:clamp(2rem,5vw,3.25rem);
  text-align:center;
  background:rgb(20 184 166 / .06);
}
.proximamente__t{
  font-size:clamp(1.5rem,3vw,2rem);font-weight:800;
  letter-spacing:-.025em;color:var(--turquesa-texto);
}
.proximamente__d{
  margin-top:.75rem;color:var(--tinta-suave);line-height:1.6;
  max-width:46ch;margin-inline:auto;
}
.f-profundo .proximamente,.f-teal .proximamente{
  border-color:rgb(255 255 255 / .3);background:rgb(255 255 255 / .06);
}
.f-profundo .proximamente__t,.f-teal .proximamente__t{color:var(--turquesa)}
.f-profundo .proximamente__d,.f-teal .proximamente__d{color:#EAF3F2}

/* ============================================================
   NOTICIAS — las paginas de entrada (15-sep-2026)
   Solo tres piezas: el subtitulo dentro del texto, la cita
   destacada y el pie con los enlaces de vuelta.
   ============================================================ */

/* Los subtitulos del cuerpo. Pesan menos que el h1 del hero pero
   tienen que cortar el texto de verdad, que las notas de prensa
   vienen con parrafos largos. */
.prosa__sub{
  font-size:clamp(1.1875rem,2.2vw,1.4375rem);
  font-weight:800;letter-spacing:-.02em;line-height:1.25;
  color:var(--turquesa-texto);
  margin:2.4rem 0 1rem;
}
.prosa__sub:first-child{margin-top:0}

/* La cita. Barra a la izquierda en vez de comillas gigantes: las
   comillas decorativas obligan a un tamano que en movil se come
   la pantalla. */
.cita-noticia{
  margin:2rem 0;padding:1.1rem 0 1.1rem 1.4rem;
  border-left:4px solid var(--turquesa);
  font-size:clamp(1.125rem,2.1vw,1.375rem);
  font-weight:600;font-style:normal;line-height:1.45;
  letter-spacing:-.015em;color:var(--tinta);
}

/* Pie de la noticia: separado con una regla, y en tamano de meta
   para que no compita con el cuerpo. */
.noticia__pie{
  max-width:60ch;margin-top:2.6rem;padding-top:1.4rem;
  border-top:1px solid rgb(32 110 120 / .22);
}
.noticia__pie p+p{margin-top:.6rem}

/* Al envolver titulo y descripcion en `.lista__cuerpo` dejan de ser hijos
   directos del grid, que era quien los convertia en bloque. Y la meta, en
   una columna de 11rem, se lee mucho mejor apilada que en fila. */
.lista__cuerpo{display:block;min-width:0}
.lista__t,.lista__d{display:block}
.lista .noticia__meta{flex-direction:column;align-items:flex-start;gap:.35rem;margin-bottom:0}
.lista .noticia__meta .fecha{line-height:1.3}

/* En la home la lista vive en la columna estrecha de `.noticias`: ahi el
   grid de 11rem para la meta se come media caja. Se apila en una sola
   columna y la meta vuelve a ir en fila, que es lo que cabe. */
.noticias .lista a{grid-template-columns:minmax(0,1fr);gap:.75rem}
.noticias .lista .noticia__meta{flex-direction:row;align-items:center;gap:.7rem}