/*
 * Estampado decorativo de hojas de fondo en Conócenos — ver el bloque
 * .conocenos-hojas-fondo en page-conocenos.php (posiciones/tamaños/giros
 * de cada hoja) y conocenos-hojas.js (crecimiento al cargar + balanceo
 * al pasar el cursor cerca de cada una).
 *
 * #main ya es position:relative + overflow:hidden en style.css para
 * todas las páginas — aprovechado aquí para que esta capa se estire al
 * alto real de #main (inset:0, con top/bottom resueltos contra la
 * altura ya calculada de #main a partir de su contenido en flujo
 * normal, ver el porqué en el comentario de arriba) y quede recortada
 * en los bordes sin desbordar el layout.
 */
.conocenos-hojas-fondo {
  position: absolute;
  inset: 0;
  /* Oculta unos instantes al cargar (ver la animación más abajo) — a
     petición expresa: con la carga en frío (fuentes web / bios largas
     todavía por reflow) el alto real de #main cambia justo después del
     primer pintado, y como cada hoja se posiciona en % de ESE alto (ver
     el comentario de arriba sobre top/bottom resueltos contra #main),
     se veían todas amontonadas cerca del borde superior — "dos
     montones" a los lados, ya que "left" solo alterna entre pegado al
     borde y algo más adentro — antes de saltar de golpe a su posición
     final en cuanto el layout se asienta. Retrasar el momento en que la
     capa se hace visible evita enseñar ese estado intermedio roto, sin
     depender de JS (funciona igual con o sin conocenos-hojas.js/GSAP;
     la regla global de prefers-reduced-motion en style.css deja el
     retraso intacto y solo fuerza la propia transición de opacidad a
     ser instantánea). 0.4s de margen: de sobra para un intercambio de
     fuente típico, sin notarse como una espera para quien navega. */
  opacity: 0;
  animation: conocenos-hojas-fondo-reveal 0.01s linear 0.4s forwards;
  /* Negativo, no 0: sin esto, un descendiente position:absolute sin
     z-index pinta POR ENCIMA del contenido normal en flujo (.page-header,
     .section), aunque estos vengan antes en el DOM — el orden de pintado
     de la especificación pone los "positioned descendants" por delante
     de los bloques normales no posicionados. Con z-index negativo pasa
     a pintarse detrás de ellos, delante solo del color de fondo plano
     del body (body.bg-tint-melocoton-fuerte, ver tokens.css/header.php). */
  z-index: -1;
  /*
   * Puramente decorativo de verdad: todo pointer-events:none, la capa
   * entera y cada hoja. No hace falta que ninguna hoja sea "clicable"
   * ni reciba eventos propios — conocenos-hojas.js detecta la cercanía
   * del cursor por coordenadas (un único listener en window, con las
   * posiciones de las hojas cacheadas de antemano), no esperando a que
   * el navegador decida que el ratón está "sobre" la hoja exacta. Se
   * probó primero la vía contraria (pointer-events:auto en cada hoja +
   * "pointermove"/"pointerleave" propios): en un layout con varias
   * capas de contenedores anchos y contenido centrado dentro (.section,
   * .team-profiles y demás — ver style.css), cualquiera de esos
   * contenedores intermedios sigue "ganando" el hit-test en su propio
   * margen transparente aunque no se vea nada suyo ahí, así que el
   * ratón nunca llegaba a tocar la hoja de verdad; habría hecho falta
   * ir añadiendo pointer-events:none a cada contenedor ancho que
   * apareciera por delante, sin garantía de no dejarse alguno. La
   * detección por coordenadas no depende de eso en absoluto: un
   * "pointermove" en window llega igual, sea cual sea el elemento que
   * el navegador considere "tocado" en ese punto.
   */
  pointer-events: none;
}

@keyframes conocenos-hojas-fondo-reveal {
  to {
    opacity: 1;
  }
}

.conocenos-hoja {
  position: absolute;
  top: var(--hoja-top);
  left: var(--hoja-left);
  width: var(--hoja-size);
  /* Estado por defecto sin JS/con motion reducido — mejora progresiva,
     igual que el resto de esta capa. Con "transform" (no la propiedad
     CSS individual "rotate") a propósito: conocenos-hojas.js anima esta
     misma hoja con las propiedades clásicas de GSAP ("scale"/
     "rotation", que también escriben en "transform"), nunca con la
     propiedad "rotate" suelta — probado en el navegador que este GSAP
     la hornea de todos modos dentro de "transform" en cuanto entra en
     juego cualquier tween, así que fijar aquí la propiedad "rotate"
     individual solo arriesgaba que las dos (la de CSS y la que GSAP
     acaba escribiendo) se sumasen entre sí. Usando "transform" en los
     dos sitios, JS simplemente sobrescribe este mismo valor inicial,
     sin dos mecanismos compitiendo. */
  transform: rotate(var(--hoja-rotate));
}

.conocenos-hoja svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Menos protagonismo en pantallas pequeñas: los márgenes laterales se
   estrechan mucho (el contenido pasa a ocupar casi todo el ancho), así
   que hojas al mismo tamaño quedarían mucho más encima del contenido
   que en escritorio. */
@media (max-width: 40rem) {
  .conocenos-hoja {
    width: calc(var(--hoja-size) * 0.62);
  }
}