/* ═══════════════════════════════════════════════════════════════════════
   PROPUESTA — página Colonias completa

   No es una maqueta aparte: carga el CSS real del sitio y solo añade lo
   nuevo encima, con la clase `page-propuesta`. Si se aprueba, esto se
   fusiona; si no, se borra un archivo y no queda rastro.

   EL DIAGNÓSTICO
   La página tenía secciones buenas sueltas —el mosaico, las cifras— sin
   nada que las hilara. Cada una empezaba de cero, con su propio tono y su
   propia tipografía. Eso es lo que se percibe como "no junta ni pega": no
   es que las piezas sean feas, es que no hay documento.

   LA PROPUESTA
   Convertir la página en un documento con espina dorsal:

   - Cada sección se abre con un número y un rótulo (01…05) sobre un filete
     de tinta. El número no es adorno: dice cuánto falta y en qué parte
     estás, que es lo que una página larga de fotos nunca dice.
   - Alternancia deliberada de campo: crema, oscuro, crema, oscuro, foto.
     No alternan al azar — el campo oscuro entra donde hay que leer un dato
     y frenar, el crema donde hay que mirar fotos.
   - Se agrega la única sección que faltaba: cómo funcionan las colonias.
     La página mostraba mucho y explicaba nada; quien evalúa un fondo
     necesita saber la mecánica, no solo ver niños contentos.
   - El carrusel de talleres pasa a lista indexada. Un carrusel esconde seis
     de siete talleres detrás de una flecha; la lista los muestra todos y
     de paso saca la dependencia de Swiper (una librería externa menos).

   Todo el contenido es el verificado. Ninguna cifra nueva.
   ═══════════════════════════════════════════════════════════════════════ */

.page-propuesta {
  --tinta-14: color-mix(in srgb, var(--oscuro) 14%, transparent);
  --tinta-30: color-mix(in srgb, var(--oscuro) 30%, transparent);
  --tinta-62: color-mix(in srgb, var(--oscuro) 62%, transparent);
  --luz-18: color-mix(in srgb, var(--crema) 18%, transparent);
  --luz-58: color-mix(in srgb, var(--crema) 58%, transparent);
  --sale: cubic-bezier(.16, 1, .3, 1);
  --masa: cubic-bezier(.32, .72, 0, 1);
}

/* ─── Título de sección ──────────────────────────────────────────────
   Las cintas numeradas (01 · POR QUÉ EXISTEN · DATO NACIONAL) se
   eliminaron: prometían una estructura de documento que el contenido no
   necesitaba, y en un campo oscuro el filete de dos píxeles cruzando la
   pantalla entera se leía como un borde suelto. Queda el titular solo. */

.page-propuesta .sec-titulo {
  margin: 0;
  font-family: var(--font-h);
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.045em;
  margin-left: -.04em;
  text-wrap: balance;
}

.page-propuesta .sec-titulo em { font-style: normal; color: var(--magenta); }
.page-propuesta .campo-oscuro .sec-titulo em { color: var(--verde); }

.page-propuesta .campo-oscuro {
  background: var(--oscuro);
  color: var(--crema);
}


/* ═══════════════════════════════════════════════════════════════════════
   PORTADA — el sistema del hero de inicio, adaptado

   No es una portada nueva: es la misma máquina que usa la portada de
   inicio, con esta foto y este texto. Fui a leer cómo está hecha allá
   antes de replicarla; son seis piezas y están las seis:

     1. foto a sangre, sin recorte de forma;
     2. scrim DIRECCIONAL en dos ejes —uno que carga por la izquierda y
        abre a la derecha, otro que sube desde el pie— en vez de un velo
        parejo. Eso es lo que la hace ver como escena iluminada y no como
        foto tapada;
     3. un halo MAGENTA radial anclado a la esquina inferior izquierda.
        Acá está el color: la portada de inicio ya lo mete exactamente
        así, con un radial al 48% en esa esquina;
     4. grano al 4%;
     5. contenido abajo a la izquierda, nunca centrado;
     6. el titular en dos líneas, cada una en una caja con el desborde
        oculto y el interior subiendo con retardo entre líneas.

   LO QUE CAMBIA POR LA FOTO
   El toldo de esta imagen es mucho más claro que el gimnasio de la foto
   del equipo, así que el eje vertical del scrim carga también por arriba.
   Y el halo va más abierto —42% contra 34%— porque el bloque de texto de
   Colonias es más ancho que el de inicio.

   LA CORTINA
   Resuelta en CSS y no con GSAP: esta página no carga la librería, y el
   efecto es una transición de `transform` sobre una caja con
   `overflow: hidden`. Misma curva y mismos tiempos que allá.
   ═══════════════════════════════════════════════════════════════════════ */

/* UNA PANTALLA EXACTA, en cualquier dispositivo.

   `100svh` y no `100vh`: en el teléfono, `vh` mide la ventana SIN la barra
   del navegador, así que la portada quedaba más alta que la pantalla y
   siempre asomaba un trozo de la sección siguiente. `svh` mide la ventana
   chica —con la barra visible— que es lo que se ve al cargar.

   Y no lleva proporción fija. Atarla a 3:2 fue el error anterior: en un
   teléfono de 375px daba 250px de alto y en un monitor de 1400px daba 933,
   más alto que la propia ventana. La proporción de la foto no puede mandar
   sobre el alto de la pantalla; manda la pantalla, y la foto se acomoda. */
.page-propuesta .portada {
  position: relative;
  display: grid;
  align-content: end;
  height: 100svh;
  max-height: 100svh;
  min-height: 30rem;
  padding: calc(var(--nav-h) + clamp(1rem, 3vw, 2.5rem)) clamp(1.25rem, 6vw, 4rem) clamp(1.5rem, 3.5vw, 3rem);
  overflow: hidden;
  background: var(--oscuro);
  color: #fff;
}

.page-propuesta .portada-foto { position: absolute; z-index: 0; inset: 0; }

.page-propuesta .portada-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Más de la mitad del encuadre original es techo y estructura del
     patio techado. Bajamos el punto de foco para que la ronda de niños
     -el contenido real- ocupe la pantalla en vez de perderse abajo. */
  object-position: 50% 82%;
  filter: saturate(.94) contrast(1.05);
}

/* Scrim direccional: carga a la izquierda y en el pie, abre a la derecha.
   La tercera capa —la de arriba— es el ajuste propio de esta foto. */
.page-propuesta .portada-foto::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(25,9,19,.9) 0%, rgba(25,9,19,.58) 42%, rgba(25,9,19,.06) 77%),
    linear-gradient(0deg, rgba(25,9,19,.88) 0%, transparent 52%),
    linear-gradient(180deg, rgba(25,9,19,.62) 0%, transparent 34%);
  pointer-events: none;
  content: '';
}

.page-propuesta .portada-halo {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(circle at 12% 84%, rgba(136,45,91,.52), transparent 42%);
  pointer-events: none;
}

.page-propuesta .portada-grano {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}

.page-propuesta .portada-alto {
  position: relative;
  z-index: 3;
  width: min(72%, 60rem);
}

.page-propuesta .portada-titulo {
  margin: 0;
  /* "Protest Strike" no se carga en ninguna página del sitio -no hay
     @font-face ni link a Google Fonts para ella-, así que solo aparecía
     si estaba instalada localmente en el equipo de turno. Eso hacía que
     esta portada se viera distinta del resto según la máquina. Se saca
     y queda la misma familia y el mismo peso que usan los demás heros. */
  font-family: var(--font-h);
  /* Atado al ancho Y al alto: `min()` toma el menor de los dos, así que en
     una ventana baja el titular baja aunque haya ancho de sobra. Es lo que
     evita que el bloque empuje al pie fuera de la pantalla. */
  font-size: min(clamp(3rem, 6.4vw, 6rem), 13vh);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: none;
  text-wrap: balance;
}

/* La cortina. `i` no aporta semántica: es el gancho más corto para la caja
   interior que se desplaza. */
.page-propuesta .portada-titulo .linea { display: block; overflow: hidden; }

.page-propuesta .portada-titulo .linea > i {
  display: block;
  font-style: normal;
  transform: translateY(110%);
  animation: portada-sube 1s cubic-bezier(.16, 1, .3, 1) .1s forwards;
}

.page-propuesta .portada-titulo .linea:nth-child(2) > i { animation-delay: .22s; }

.page-propuesta .portada-pie {
  position: relative;
  z-index: 3;
  width: min(100%, 46ch);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  opacity: 0;
  animation: portada-asoma .8s cubic-bezier(.16, 1, .3, 1) .6s forwards;
}

.page-propuesta .portada-marca {
  margin: 0 0 .45rem;
  font-family: var(--font-h);
  font-size: clamp(.62rem, 1.1vw, .72rem);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 251, 231, .82);
}

.page-propuesta .portada-regla {
  margin: 0;
  font-family: var(--font-h);
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--verde);
}

.page-propuesta .portada-bajada {
  max-width: 43rem;
  margin: clamp(.6rem, 1.2vw, .9rem) 0 0;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.45;
  color: rgba(255, 251, 231, .86);
}

@keyframes portada-sube { to { transform: none; } }
@keyframes portada-asoma { to { opacity: 1; } }

@media (max-width: 800px) {
  .page-propuesta .portada-alto { width: 100%; }
  .page-propuesta .portada-titulo { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  /* En una pantalla angosta y alta, "cover" ya usa el 100% del alto de
     la foto -no queda margen vertical- así que object-position no mueve
     nada. Para sacar el techo del cuadro hay que ampliar la imagen desde
     un punto bajo: lo que quede lejos de ese punto (el techo) sale del
     encuadre; lo que quede cerca (la ronda) se mantiene a la vista. */
  .page-propuesta .portada-foto img {
    transform: scale(1.4);
    transform-origin: 50% 85%;
  }
  /* El halo sube y se corre: con los valores de escritorio queda por
     debajo del bloque de texto y no se ve. */
  .page-propuesta .portada-halo {
    background: radial-gradient(circle at 20% 88%, rgba(136,45,91,.58), transparent 52%);
  }
}

/* Ventana baja —un portátil de 13" o el teléfono en horizontal—: el texto
   tiene que caber igual en una pantalla, así que la tipografía cede. */
@media (max-height: 620px) {
  .page-propuesta .portada-titulo { font-size: clamp(2rem, 7vh, 3.25rem); }
  .page-propuesta .portada-bajada { font-size: .98rem; }
  .page-propuesta .portada-pie { margin-top: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-propuesta .portada-titulo .linea > i,
  .page-propuesta .portada-pie {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ─── (reemplazado) ──────────────────────────────────────────────────── */

.page-propuesta #hero-lienzo { min-height: min(88svh, 48rem); }

.page-propuesta .hero-ficha {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 0;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1rem;
  border-top: 1px solid var(--luz-18);
  grid-template-columns: minmax(0, 1fr);
}

.page-propuesta .hero-ficha > div {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--luz-18);
}

.page-propuesta .hero-ficha b {
  font-family: var(--font-h);
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--verde);
}

.page-propuesta .hero-ficha span {
  font-family: var(--font-h);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--luz-58);
}

@media (min-width: 780px) {
  .page-propuesta .hero-ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-propuesta .hero-ficha > div {
    padding: .85rem clamp(.75rem, 2vw, 1.75rem) .95rem 0;
    border-bottom: 0;
    border-right: 1px solid var(--luz-18);
  }
  .page-propuesta .hero-ficha > div:last-child { border-right: 0; }
}

/* ─── 01 · El dato ───────────────────────────────────────────────────── */

.page-propuesta #deficit {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(4rem, 8vw, 7rem) 6%;
}

.page-propuesta #deficit h2 {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-h);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.page-propuesta #deficit strong { color: var(--verde); font-weight: 800; }
.page-propuesta #deficit p { margin: 0; }

.page-propuesta #deficit a {
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--luz-18);
  color: var(--luz-58);
  font-family: var(--font-h);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms ease, border-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page-propuesta #deficit a:hover,
  .page-propuesta #deficit a:focus-visible { border-color: var(--verde); color: var(--verde); }
}

/* ─── 02 · Cómo funciona ─────────────────────────────────────────────── */

.page-propuesta #mecanica {
  padding: clamp(4rem, 8vw, 7rem) 6%;
  background: var(--crema);
}


.page-propuesta .mec-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.page-propuesta .mec-lista {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-propuesta .mec-lista li {
  display: grid;
  gap: .25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--tinta-14);
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: baseline;
}

.page-propuesta .mec-lista li:first-child { border-top: 1px solid var(--tinta-14); }

.page-propuesta .mec-lista b {
  font-family: var(--font-h);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--magenta);
}

.page-propuesta .mec-lista strong {
  font-family: var(--font-h);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.page-propuesta .mec-lista p {
  margin: .3rem 0 0;
  grid-column: 2;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--tinta-62);
}

.page-propuesta .mec-foto { overflow: hidden; }

/* 3:2, que es lo que mide el archivo. Con 4/5 se recortaba un tercio. */
.page-propuesta .mec-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-propuesta .mec-foto figcaption {
  margin-top: .7rem;
  font-size: .85rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--tinta-62);
}

@media (min-width: 900px) {
  .page-propuesta .mec-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}

/* ─── 03 · El mosaico ────────────────────────────────────────────────── */

.page-propuesta #grid-fotos { padding-top: clamp(4rem, 8vw, 7rem); }


/* La cabecera vieja del mosaico la reemplaza la espina numerada. */
.page-propuesta .mosaico-cab { display: none; }

/* ─── 04 · Los talleres, como lista indexada ─────────────────────────── */

.page-propuesta #talleres {
  padding: clamp(4rem, 8vw, 7rem) 6%;
}


/* ─── 05 · Cierre ────────────────────────────────────────────────────── */

.page-propuesta #cierre-colonias .cierre-content h2 { text-wrap: balance; }

/* ─── Movimiento ─────────────────────────────────────────────────────────
   Una entrada por bloque, una sola vez, y solo transform y opacity. La
   clase que esconde la pone el script: sin JS, la página se ve entera. */

.page-propuesta.mov-lista .revelar {
  opacity: 0;
  transform: translateY(clamp(16px, 2.5vw, 28px));
  transition:
    opacity 760ms var(--sale) var(--pausa, 0ms),
    transform 880ms var(--masa) var(--pausa, 0ms);
}

.page-propuesta.mov-lista .revelar.a-la-vista {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-propuesta.mov-lista .revelar,
  .page-propuesta.mov-lista .revelar.a-la-vista {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .page-propuesta .tal-foto img { transition: none; }
}


/* ─── Qué son las colonias ───────────────────────────────────────────── */

.page-propuesta .mec-que {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--tinta-14);
}

.page-propuesta .mec-que p {
  margin: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* El primer párrafo es el contexto histórico y el segundo la definición
   propia. La entradilla de mayor tamaño marca esa diferencia sin ponerle
   un rótulo encima. */
.page-propuesta .mec-que p:first-child {
  margin-bottom: 1rem;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.45;
  color: var(--oscuro);
}

.page-propuesta .mec-que p + p { color: var(--tinta-62); }

/* La fila sin cifra ocupa las dos columnas: sin número, la sangría de la
   columna del número deja un hueco que se lee como error. */
.page-propuesta .mec-lista li.sin-cifra { grid-template-columns: minmax(0, 1fr); }
.page-propuesta .mec-lista li.sin-cifra p { grid-column: 1; }

/* ─── Talleres: galería ──────────────────────────────────────────────── */

.page-propuesta .tal-galeria {
  display: grid;
  gap: clamp(.5rem, 1.2vw, 1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
  .page-propuesta .tal-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.page-propuesta .tal-galeria figure { margin: 0; }

/* Cada foto con SU proporción, no con una común: seis son 3:2 y la de
   bisutería es 2:3. Forzarlas a una sola caja recortaba a una o a las
   otras. `height: auto` además es obligatorio porque `estilo.css` trae un
   `img { height: 100% }` global que gana sobre la proporción.
   La rejilla alinea al tope, así que las alturas distintas se leen como
   tira de contactos y no como error. */
.page-propuesta .tal-galeria { align-items: start; }

.page-propuesta .tal-galeria img {
  width: 100%;
  height: auto;
}

.page-propuesta .tal-tipografico {
  width: 100%;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--magenta) 76%, var(--oscuro));
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(1.15rem, 2.3vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.page-propuesta .tal-galeria figcaption {
  margin-top: .6rem;
  font-family: var(--font-h);
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -.015em;
}