/* ═══════════════════════════════════════════════════════════════
   FUNDACIÓN PRODE · sistema de motion

   REGISTRO: atlético, no lujoso. Rápido, seco, con corte — como una
   transmisión deportiva. Nada de fundidos lentos ni cámara lenta
   melancólica: el documento de marca lo prohíbe expresamente y además
   no es lo que hace una cancha.

   Todo lo que se mueve usa transform/opacity/clip-path. Donde el
   navegador lo soporta, la animación va atada al scroll por CSS
   (`animation-timeline`), que corre en el compositor y no toca el
   hilo principal: es lo que permite que esto ande en un teléfono de
   gama media. Donde no, hay respaldo por IntersectionObserver.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────── 1 · REVELADO POR LÍNEAS ───────────────────
   Cada línea del titular se recorta y sube desde su propia caja.
   Es más nítido que hacerlo por palabra: las palabras sueltas se
   leen como confeti, las líneas se leen como una persiana.        */
/* El recorte necesita aire vertical.

   Con interlínea .88 la caja de línea es MÁS BAJA que la tinta del
   glifo: los acentos de Á/Í/Ó y los descendentes de q/p/g/j quedan
   fuera y `overflow:hidden` se los come. El relleno agranda la caja
   de recorte y el margen negativo devuelve el espacio, así el
   interlineado visual no cambia.

   `text-wrap:normal` es obligatorio: el titular original usa
   `balance`, que reparte los renglones de otra manera. Si se mide con
   balance y se reconstruye sin él, la línea reconstruida no entra y
   se parte en dos adentro de la caja recortada. */
.lin{
  display:block;overflow:hidden;
  padding-block:.26em;margin-block:-.26em;
  text-wrap:normal;
}
.lin > i{
  display:block;font-style:inherit;
  transform:translate3d(0,120%,0);
  transition:transform 760ms var(--sal);
  transition-delay:var(--lin-d,0ms);
  will-change:transform;
}
/* El contenedor partido tampoco puede balancear: ya no hay un bloque
   de texto que balancear, hay una pila de líneas fijas. */
.mot-lineas{text-wrap:normal}
.mot-lineas.visto .lin > i{transform:none}

/* ─────────────────── 2 · ENTRADAS SIMPLES ─────────────────── */
.mot{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity 640ms var(--sal),transform 640ms var(--sal);
  transition-delay:var(--mot-d,0ms);
}
.mot.visto{opacity:1;transform:none}

.mot-izq{opacity:0;transform:translate3d(-34px,0,0)}
.mot-der{opacity:0;transform:translate3d(34px,0,0)}
.mot-izq,.mot-der{transition:opacity 640ms var(--sal),transform 640ms var(--sal);transition-delay:var(--mot-d,0ms)}
.mot-izq.visto,.mot-der.visto{opacity:1;transform:none}

/* Cortina: la pieza se descubre de abajo hacia arriba */
.mot-cortina{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 900ms var(--sal);
  transition-delay:var(--mot-d,0ms);
}
.mot-cortina.visto{clip-path:inset(0 0 0 0)}

/* ─────────────────── 3 · ATADO AL SCROLL ───────────────────
   `view()` mide cuánto de la pieza entró en pantalla. No hace
   falta JavaScript y corre en el compositor.                    */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){

    /* Paralaje: la media sube un poco más lento que la página */
    .parx{
      animation:parx linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes parx{
      from{transform:translate3d(0,7%,0)}
      to  {transform:translate3d(0,-7%,0)}
    }

    /* La media entra creciendo apenas.

       El zoom va en el CONTENIDO, no en el contenedor. Escalar el
       contenedor agranda su caja visual y lo saca de la pantalla: a
       768px el comparador medía 783px de ancho en un viewport de 768
       y desbordaba la página. El contenedor recorta y lo de adentro
       crece dentro de ese recorte. */
    .zoom-sc{overflow:hidden}
    .zoom-sc > *{
      animation:zoomSc linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 45%;
    }
    @keyframes zoomSc{
      from{transform:scale(1.10)}
      to  {transform:scale(1)}
    }

    /* Barra de progreso del relato, sin una línea de JS */
    #progreso{
      width:100%;transform-origin:0 50%;
      animation:progreso linear both;
      animation-timeline:scroll(root block);
    }
    @keyframes progreso{ from{transform:scaleX(0)} to{transform:scaleX(1)} }

  }
}

/* ─────────────────── 3.5 · ENCAJE POR SECCIONES ───────────────
   Cada scroll tiene que terminar en una sección entera, nunca a
   mitad de una y mitad de la siguiente.

   UN SOLO motor, el del navegador, para todos los dispositivos.
   Antes eran dos: `scroll-snap` en táctil y un encaje escrito a mano
   en motion.js para el mouse, porque el controlador de rueda tomaba
   el scroll y el encaje nativo hubiera peleado con él. Sostener dos
   reglas que tenían que sentirse igual sin poder compararlas nunca en
   la misma pantalla salía caro, y la de a mano se disparaba desde
   media pantalla de distancia: te movía cuando ya estabas donde
   querías. Se fue el controlador de rueda; queda éste, que es el
   mismo que el visitante ya conoce de cualquier otro sitio.

   `proximity` y NO `mandatory`: varias secciones son más altas que la
   pantalla —el riel de las escuelas mide más de una pantalla y media,
   y en celular las secciones cargadas se pasan de largo—. Con
   `mandatory` el navegador está obligado a descansar en un borde, así
   que el medio de esas secciones sería inalcanzable: te empuja hacia
   afuera apenas soltás. `proximity` encaja cuando hay un borde cerca
   y te deja quieto cuando no lo hay, que es exactamente la regla que
   hace falta. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity}
  main > section[data-sec]{
    scroll-snap-align:start;
    /* Cancela el `scroll-padding-top` del header, que existe para
       que un ancla no quede tapada por la barra. Aplicado al
       encaje dejaba la sección 76 px más abajo, o sea con una
       franja de la anterior asomando arriba —justo lo que el
       encaje viene a evitar—. Las secciones ya reservan el alto
       del header en su propio padding, así que no lo necesitan. */
    scroll-margin-top:calc(-1 * (var(--header-h) + 16px));
  }
  /* El riel se recorre por dentro: si encajara en su borde, cada
     pausa devolvería al visitante al principio de las escuelas. */
  main > section.riel{scroll-snap-align:none}

  /* En celular, `/#escuelas` NO tiene que dejarte en el borde de la
     sección. Ahí la ficha de entrada ocupa el ancho entero y de la
     primera escuela se ve un 25% cortado por el costado: el visitante
     que toca «Canchas» aterriza en un bloque de texto y una tarjeta a
     medias, y parece que el enlace lo llevó a otro lado.

     El riel se recorre POR DENTRO —la pista avanza con el scroll
     vertical—, así que el lugar donde se ven las canchas no es un
     elemento al que se pueda apuntar: es un punto del recorrido. Se
     llega con un `scroll-margin-top` negativo, que corre el aterrizaje
     hacia adentro. Los 270px están MEDIDOS: se barrió el recorrido de
     60 en 60 px y a +240 la primera ficha ya se ve al 100%, en iPhone
     y en Pixel. Se suma la cancelación del `scroll-padding` del
     header, igual que la regla de arriba.

     Sólo abajo de 900px: en escritorio la entrada y dos fichas entran
     juntas y no hay nada que corregir. */
  @media (max-width:900px){
    main > section.riel{
      scroll-margin-top:calc(-1 * (var(--header-h) + 16px) - 270px);
    }
  }
}

/* ─────────────────── 4 · SCROLL HORIZONTAL ───────────────────
   La sección se queda pegada mientras el contenido corre de lado.
   Es scroll vertical: el desplazamiento lateral lo calcula el JS a
   partir de cuánto avanzaste dentro de la sección.               */
.riel{position:relative}
.riel-pegado{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;overflow:hidden;
}
.riel-pista{
  display:flex;gap:clamp(20px,3vw,44px);
  padding-inline:var(--pad);
  will-change:transform;
}
/* El bloque de texto que abre el riel. Arriba de 1100px el índice de
   capítulos va fijo sobre el borde izquierdo y le caía encima: el
   relleno lo corre lo justo para despejarlo, sin mover las fichas. */
.riel-pista > .riel-intro{width:clamp(280px,30vw,420px)}
@media (min-width:1100px){
  .riel-pista > .riel-intro{width:clamp(320px,32vw,470px);padding-left:64px}
}
.riel-ficha{
  flex:0 0 auto;
  width:clamp(260px,26vw,380px);
  display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:3/4;padding:clamp(22px,2.4vw,32px);
  border:1px solid var(--linea-viva,var(--linea));
  border-radius:var(--radio);
  background:var(--fondo,var(--blanco));
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 50px -30px rgba(0,0,0,.5);
  position:relative;overflow:hidden;
  transition:background-color 900ms var(--sal),border-color 900ms var(--sal);
}
.riel-ficha .num{
  position:absolute;top:clamp(16px,2vw,26px);right:clamp(16px,2vw,26px);
  font-family:var(--cuerpo);font-weight:700;font-size:12px;
  letter-spacing:.14em;color:var(--texto-3,var(--gris-suave));
}
.riel-ficha .nom{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,2.6vw,36px);line-height:.98;letter-spacing:-.03em;
  color:var(--texto,var(--tinta));
}
.riel-ficha .barrio{
  margin-top:8px;font-size:14.5px;color:var(--texto-2,var(--gris));
}
.riel-ficha .horario{
  margin-top:14px;padding-top:12px;
  border-top:1px solid var(--linea-viva,var(--linea));
  font-size:13px;color:var(--texto-3,var(--gris-suave));
}
/* En celular el riel funciona IGUAL que en escritorio: avanza solo
   con el scroll vertical. Antes era un carrusel que había que
   arrastrar con el dedo, y eso obligaba a cambiar de gesto en medio
   de la página —además de que quien no lo descubría se perdía tres de
   las cuatro escuelas.

   Lo único que cambia es la medida: fichas más angostas y algo más
   altas, para que entre una y media en pantalla y se vea que hay
   más al costado. */
@media (max-width:900px){
  .riel-pegado{height:100svh}
  .riel-pista{padding-inline:var(--pad);gap:18px}
  .riel-ficha{width:min(74vw,300px);aspect-ratio:4/5;padding:22px}
  .riel-ficha .nom{font-size:clamp(26px,7.4vw,34px)}
  .riel-ficha .barrio{font-size:15px}
}

/* ─────────────────── 5 · FICHAS QUE SE APILAN ───────────────────
   Cada tarjeta se queda pegada bajo el header y la siguiente le
   pasa por encima. La de abajo se encoge y se apaga un poco, así
   se lee la profundidad.                                          */
.pila-sc{display:flex;flex-direction:column;gap:clamp(18px,3vw,34px)}
.pila-sc > .ficha{
  position:sticky;
  top:calc(var(--header-h) + clamp(16px,4vh,48px));
  background:var(--fondo,var(--blanco));
  border:1px solid var(--linea-viva,var(--linea));
  border-radius:var(--radio);
  padding:clamp(24px,3vw,40px);
  transition:background-color 900ms var(--sal),border-color 900ms var(--sal);
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .pila-sc > .ficha{
      animation:apilar linear both;
      animation-timeline:view();
      animation-range:exit -20% exit 100%;
      transform-origin:50% 0;
    }
    @keyframes apilar{
      to{transform:scale(.90);opacity:.35}
    }
  }
}

/* ─────────────────── 6 · CIFRA CLAVADA ───────────────────
   El número se queda quieto mientras el texto que lo explica
   pasa al lado. Es el gesto que le da peso a un dato.        */
.clavado{position:sticky;top:calc(var(--header-h) + clamp(24px,10vh,90px));align-self:start}
@media (max-width:900px){ .clavado{position:static} }


/* ─────────────────── 8 · TRANSICIÓN ENTRE PÁGINAS ───────────────
   Una cortina naranja cruza la pantalla al navegar. Corta el salto
   en blanco entre página y página.                                */
#cortina{
  position:fixed;inset:0;z-index:300;
  background:var(--naranja);
  transform:translate3d(0,100%,0);
  pointer-events:none;
}
#cortina.entra{
  transform:translate3d(0,0,0);
  transition:transform 420ms cubic-bezier(0.77,0,0.175,1);
}
#cortina.sale{
  transform:translate3d(0,-100%,0);
  transition:transform 520ms cubic-bezier(0.77,0,0.175,1);
}
@media (prefers-reduced-motion:reduce){ #cortina{display:none} }

/* ─────────────────── 9 · ÍNDICE DE CAPÍTULOS ───────────────────
   Marca en qué punto del relato estás. Sólo en pantalla ancha.   */
/* El índice aparece recién pasado el hero: ahí el titular sangra
   hacia los costados y los dos se pisan. */
/* El lugar que ocupa la regla, en un solo sitio. Sale de su propia
   geometría: arranca en calc(var(--pad) * .55), mide 72px de ancho, y
   se le suman 20px de aire. Si se mueve la regla, se mueve esto y los
   contenedores la siguen solos. */
:root{ --regla-lugar:calc(var(--pad) * .55 + 92px); }

/* Dos casos distintos, misma causa: el contenido arranca antes de donde
   termina la regla.

   1) El contenido dentro de .env, entre 1241px y 1400px. Más ancho que
      eso .env ya queda centrado y sobra lugar. La home no entra acá:
      su texto vive en la columna del dúo.
   2) Los paneles A SANGRE, que no pasan por .env y llevan su propia
      sangría: el bloque negro de «El sueño» del CAR y la fila de ejes
      de abajo. Esos quedan debajo de la regla a CUALQUIER ancho, porque
      su padding tope es de 64 y 72px y la regla termina en 107. Acá el
      parche por rango no servía, por eso seguía tapando. */
@media (min-width:1241px) and (max-width:1399px){
  body.con-regla main .env,
  body.con-regla .fu .env{padding-left:var(--regla-lugar)}
}
@media (min-width:1241px){
  body.con-regla .car-q-texto,
  body.con-regla .car-q-ejes,
  /* El hero del CAR está en `position:fixed`: sigue en pantalla mucho
     después de que el índice aparece, y su bajada va a sangre. */
  body.con-regla .car-ui{padding-left:var(--regla-lugar)}
}

/* Las diapositivas de los valores también van a sangre: el panel de la
   descripción arranca a 22px del borde y la regla termina en 107, así
   que le quedaba encima. Se vio midiendo el contraste del panel: los
   píxeles claros que aparecían adentro no eran la foto, eran los
   números del índice.

   Pero acá el relleno va por los DOS lados, y ésa es toda la
   diferencia: el marco de la diapositiva es una caja centrada sobre
   naranja a sangre, así que empujarlo sólo desde la izquierda dejaba
   130px de naranja de un lado contra 46 del otro. Eso es lo que se
   leía como una sección torcida. Empujando parejo el marco queda
   angosto pero centrado. */
@media (min-width:1241px){
  body.con-regla .vc-lam{padding-inline:var(--regla-lugar)}
}

/* El índice es del RELATO. Sobre el pie no va: ahí quedaba encima de
   la marca y de las columnas de enlaces. */

.indice{
  opacity:0;visibility:hidden;
  transition:opacity 400ms var(--sal),visibility 400ms var(--sal);
  position:fixed;left:calc(var(--pad) * .55);top:50%;
  transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:9px;
  pointer-events:none;
  /* La pelota sangra hasta el borde izquierdo en las secciones con
     lado="izq" y pasa justo por detrás del índice. Un velo apenas
     desenfocado lo mantiene legible sobre cualquier cosa, sin meter
     un color que no esté en la paleta. */
  padding:14px 14px 14px 10px;
  border-radius:var(--radio-s);
  background:color-mix(in srgb, var(--fondo,#FFFFFF) 62%, transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background-color 900ms var(--sal),opacity 400ms var(--sal),visibility 400ms var(--sal);
}
/* Cada capítulo lleva su número y su nombre, como en la referencia.
   El número siempre visible da la sensación de recorrido; el nombre
   aparece en el activo y al pasar el mouse. */
.indice button{
  pointer-events:auto;display:grid;
  grid-template-columns:22px auto;align-items:center;gap:10px;
  background:none;border:0;cursor:pointer;padding:3px 0;
  font-family:var(--cuerpo);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-3,var(--gris-suave));
  transition:color 300ms var(--sal);
}
.indice button::before{
  content:'';width:22px;height:1.5px;background:currentColor;
  opacity:.30;transform:scaleX(.4);transform-origin:left;
  transition:transform 300ms var(--sal),background-color 300ms var(--sal),opacity 300ms var(--sal);
}
.indice .n{
  font-variant-numeric:tabular-nums;opacity:.55;
  transition:opacity 300ms var(--sal);
}
.indice button[aria-current="true"] .n{opacity:1}
body.pasado-hero .indice{opacity:1;visibility:visible}
/* El índice es del RELATO: sobre el pie no va. Queda encima de la
   marca y de las columnas de enlaces.

   Va DESPUÉS de la regla de arriba a propósito: las dos tienen
   especificidad (0,2,1) y cuando empatan decide el orden del
   archivo. Puesta antes, la clase se aplicaba y no pasaba nada —
   la misma trampa que ya costó una verificación con los dibujos
   del hero y con `.val-fig`. */
body.pie-a-la-vista .indice{opacity:0;visibility:hidden}
.indice button[aria-current="true"]{color:var(--naranja)}
.indice button[aria-current="true"]::before{opacity:1;transform:scaleX(1);background:var(--naranja)}
.indice button:hover::before{opacity:.7}
/* La etiqueta sólo al pasar el mouse, y absoluta para que no empuje
   el ancho del índice: con el nombre siempre visible, la columna se
   metía dentro del texto de la página. El número y la marca alcanzan
   para saber dónde estás. */
.indice .txt{
  position:absolute;left:56px;white-space:nowrap;
  opacity:0;transform:translateX(-6px);
  transition:opacity 260ms var(--sal),transform 260ms var(--sal);
}
.indice button{position:relative}
.indice button:hover .txt{opacity:1;transform:none}
.indice button:hover{color:var(--naranja)}
@media (max-width:1240px){ .indice{display:none} }

/* ─────────────────── 10 · BOTONES MAGNÉTICOS ─────────────────── */
@media (hover:hover) and (pointer:fine){
  .iman{transition:transform 320ms var(--sal)}
}

/* ─────────────────── 11 · CINTA ───────────────────
   Se mueve sola y cambia de sentido según hacia dónde scrolleás. */
.cinta{display:flex;white-space:nowrap;will-change:transform}

/* ─────────────────── RESPALDO SIN MOTION ───────────────────
   Con reduced-motion todo queda quieto y visible. Menos y más
   suave, no cero: se conserva el fundido.                      */
@media (prefers-reduced-motion:reduce){
  .lin > i{transform:none}
  .lin{overflow:visible}
  .mot,.mot-izq,.mot-der{transform:none;transition:opacity 300ms ease}
  .mot-cortina{clip-path:none}
  .parx,.zoom-sc,.zoom-sc > *{animation:none}
  .pila-sc > .ficha{position:static;animation:none}
  .clavado{position:static}
  .riel-pegado{position:static;height:auto;display:block}
  .riel-pista{overflow-x:auto;transform:none !important}
}