/* DeMark, capa de secciones (la pinta js/secciones.js).
   Misma regla que sitio.css y movimiento.css: sin este fichero, sin JS o con
   menos movimiento la pagina se ve completa. Aqui no hay ningun estado de
   partida escondido: todo lo que se oculta lo aplica el JS al arrancar, con
   clases sec-* o variables --sec-* en linea, y todas las variables valen por
   defecto el estado final (linea entera, punto encendido, brillo fuera).
   Solo se anima transform, opacity, clip-path y background-position: nada de
   lo que hay aqui mueve la maquetacion. */

/* ---- 1. filetes que se trazan ----
   a) Los que ya son un ::before/::after de una linea (filas, tabla tipografica,
      banda). El JS marca el anfitrion con .sec-f-a (::before) o .sec-f-b
      (::after), copia la imagen original de la linea en --sec-imagen-a/b y
      mueve --sec-trazo-* (0 a 1) y --sec-brillo-* (posicion del brillo en px).
      Sin la clase no cambia nada, y la clase nunca va en el HTML servido. */
/* La clase va doblada a proposito: `.sitio .filas > .fila:last-child::after`
   pesa cuatro clases y su `background` pisaria el brillo con tres. */
.sitio.sitio .sec-f-a.sec-f-a::before, .sitio.sitio .sec-f-b.sec-f-b::after { transform-origin: 0 50%; background-repeat: no-repeat, repeat; background-size: 180px 100%, auto; }
.sitio.sitio .sec-f-a.sec-f-a::before {
  transform: scaleX(var(--sec-trazo-a, 1));
  background-image: linear-gradient(90deg, transparent, var(--verde) 50%, transparent), var(--sec-imagen-a, none);
  background-position: var(--sec-brillo-a, -400px) 0, 0 0;
}
.sitio.sitio .sec-f-b.sec-f-b::after {
  transform: scaleX(var(--sec-trazo-b, 1));
  background-image: linear-gradient(90deg, transparent, var(--verde) 50%, transparent), var(--sec-imagen-b, none);
  background-position: var(--sec-brillo-b, -400px) 0, 0 0;
}

/* b) Los que son un border: el JS pinta encima un span propio del mismo color
      (--sec-color) y pone ese lado del borde transparente mientras dura el
      trazo; al acabar quita el span y devuelve el borde tal cual. */
.sitio .sec-borde-anfitrion { position: relative; }
.sitio .sec-filete {
  position: absolute; left: 0; right: 0; height: 1px; z-index: 1; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background-color: var(--sec-color, var(--linea));
  background-image: linear-gradient(90deg, transparent, var(--verde) 50%, transparent);
  background-repeat: no-repeat; background-size: 180px 100%;
  background-position: var(--sec-brillo, -400px) 0;
}
.sitio .sec-filete-arriba { top: -1px; }
.sitio .sec-filete-abajo { bottom: -1px; }

/* Centinelas: 1 px invisible donde esta cada linea de pseudo-elemento, para
   que el observador sepa cuando la linea (y no su fila entera) entra. */
.sitio .sec-centinela { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }
.sitio .sec-centinela-arriba { top: 0; }
.sitio .sec-centinela-abajo { bottom: 0; }

/* ---- 2. titulares por lineas ----
   El JS parte el h2 en palabras solo mientras dura la entrada y al acabar
   devuelve los nodos originales. inline-block para poder moverlas; los
   espacios quedan como texto entre ellas, asi que las lineas no cambian. */
.sitio .sec-palabra { display: inline-block; }

/* ---- 3. cifras ----
   Mientras cuenta, el numero va en una caja con el ancho de la cifra final
   (min-width en linea): ni la columna ni la fila saltan. */
.sitio [data-sec-cifra] { font-variant-numeric: lining-nums tabular-nums; }
.sitio .sec-cifra-num { display: inline-block; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }

/* ---- 4. proceso: linea que se traza y puntos que se encienden ----
   --sec-trazo en la lista y --sec-punto / --sec-luz en cada paso. Por defecto
   1, 1 y 0: la linea entera y los puntos encendidos, sin halo. */
.sitio [data-sec-proceso]::before { transform-origin: 0 50%; transform: scaleX(var(--sec-trazo, 1)); }
.sitio [data-sec-proceso] > .proceso-paso::before {
  transform: scale(calc(.4 + .6 * var(--sec-punto, 1)));
  opacity: calc(.3 + .7 * var(--sec-punto, 1));
  box-shadow: 0 0 calc(var(--sec-luz, 0) * 22px) calc(var(--sec-luz, 0) * 4px) rgba(43, 106, 159, .35);
}
.sitio [data-sec-proceso] > .proceso-paso > .dato { opacity: calc(.35 + .65 * var(--sec-punto, 1)); }
@media (max-width: 900px) {
  .sitio [data-sec-proceso]::before { transform-origin: 50% 0; transform: scaleY(var(--sec-trazo, 1)); }
}

/* ---- 5. capturas: cortina y parallax ----
   La cortina es un rectangulo del color del fondo que el JS pone encima de la
   imagen y retira hacia arriba, con el canto azul. El parallax escribe en la
   propiedad individual `translate`, que se compone con el `transform` que
   sitio.js deja en las laminas reveladas sin pisarlo. */
.sitio .sec-cortina-padre { position: relative; }
.sitio .sec-cortina { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; border-radius: var(--radio); }
.sitio .sec-cortina-pano { position: absolute; inset: 0; background: var(--fondo); box-shadow: inset 0 -1px 0 var(--azul); }
.sitio .sec-paralaje-vivo { translate: 0 var(--sec-paralaje, 0px); }

/* ---- 6. franja de la llamada final: sin reglas propias ----
   El barrido es un clip-path en linea que el JS pone y quita. */

/* ---- 7. luz de puntero ----
   Capa fija por debajo de todo el contenido (z-index -1, la misma altura que
   el grano de .sitio::before): las franjas con fondo propio la tapan, nunca
   queda encima de un texto ni de un boton y no recibe eventos.
   Sobre el fondo claro el halo tine en lugar de iluminar (multiply y no
   screen: en screen sobre blanco no se veria nada), y va en azul pastel. */
.sitio .sec-luz { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; mix-blend-mode: multiply; opacity: 0; }
.sitio .sec-luz-halo {
  position: absolute; left: -600px; top: -600px; width: 1200px; height: 1200px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 223, 243, 1), rgba(201, 223, 243, .4) 45%, rgba(201, 223, 243, 0));
  will-change: transform;
}

/* ---- 8. barra de lectura ----
   Dentro de la cabecera y justo debajo de su borde inferior (100 % es el alto
   sin el borde de 1 px, de ahi el +1px): cuando movimiento.js aparta la
   cabecera con translate -100 %, ese borde queda en lo alto de la ventana y
   la barra se queda en top 0 sin mas codigo. */
.sitio .sec-progreso {
  position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--linea), var(--azul) 60%, var(--verde));
  transform-origin: 0 50%; transform: scaleX(0);
}
/* Con el menu movil abierto la barra cruzaria el panel del menu. */
.sitio .cabecera:has(.menu-boton[aria-expanded="true"]) .sec-progreso { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* El JS ya sale sin tocar nada; esto es por si el visitante cambia la
     preferencia con la pagina abierta: todo a su estado final. */
  .sitio.sitio .sec-f-a.sec-f-a::before, .sitio.sitio .sec-f-b.sec-f-b::after { transform: none; background-position: -400px 0, 0 0; }
  .sitio [data-sec-proceso]::before { transform: none; }
  .sitio [data-sec-proceso] > .proceso-paso::before { transform: none; opacity: 1; box-shadow: none; }
  .sitio [data-sec-proceso] > .proceso-paso > .dato { opacity: 1; }
  .sitio .sec-filete { transform: none !important; background-image: none; }
  .sitio .sec-palabra { opacity: 1 !important; transform: none !important; }
  .sitio .sec-paralaje-vivo { translate: none; }
  .sitio .sec-cortina, .sitio .sec-luz, .sitio .sec-progreso { display: none; }
  .sitio [data-sec-franja], .sitio [data-sec-franja] h2 { clip-path: none !important; opacity: 1 !important; transform: none !important; }
}