/* =============================================================================
   ADORNOS — Los adornos en tinta solar, generados por código (js/adornos.js)
   =============================================================================

   Se carga en todas las páginas, después de sello.css.
   El catálogo está en docs/catalogo-adornos.md.

     .adorno        → el contenedor de cada adorno (lo marca el script)
     .a-l / .a-l2 / .a-l3 → líneas: principal (oro), fina (zafiro) y muy fina
     .a-f           → formas llenas (oro)
     .a-centro      → el punto del centro, en rubí (lo marca el script)
     .a-jade / .a-oro → una línea fina que va en jade o en oro
     .is-trazado    → el adorno ya entró en pantalla y se dibuja
   ============================================================================= */

.adorno {
  display: block;
  line-height: 0;
}

.adorno svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Líneas: pathLength="1" en cada una, así el trazo va de 1 a 0 */
.a-l,
.a-l2,
.a-l3 {
  fill: none;
  stroke: url(#adorno-oro);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* --i es el turno de la pieza (de 0 a 1): las líneas se trazan una tras otra */
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--i, 0) * 1.3s);
}

/* Dos pesos y dos tintas (2026-10-11): la línea principal engrosa y va en oro;
   la fina se afina y va en zafiro. */
.a-l  { stroke-width: 1.9; }
.a-l2 { stroke-width: 0.8; stroke: url(#adorno-zafiro); }
.a-l3 { stroke-width: 0.4; }

.a-l2.a-jade { stroke: url(#adorno-jade); }
.a-l2.a-oro  { stroke: url(#adorno-oro); }

/* Formas llenas: aparecen en su turno */
.a-f {
  fill: url(#adorno-oro);
  opacity: 0;
  transition: opacity 0.6s ease calc(var(--i, 0) * 1.3s);
}

.adorno.is-trazado .a-l,
.adorno.is-trazado .a-l2,
.adorno.is-trazado .a-l3 { stroke-dashoffset: 0; }

.adorno.is-trazado .a-f { opacity: 1; }

/* El punto del centro, en rubí, como el del sello: es lo último en llegar y
   se enciende con un pequeño rebote. */
.a-f.a-centro {
  fill: var(--ink-red-light);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.2);
  transition: opacity 0.45s ease calc(var(--i, 0) * 1.3s + 0.25s),
              transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i, 0) * 1.3s + 0.25s);
}

.adorno.is-trazado .a-f.a-centro { transform: scale(1); }

/* Las alas van en zafiro, como en el sello */
[data-adorno="ala"] .a-f,
[data-adorno="par-alas"] .a-f { fill: url(#adorno-zafiro); }

@media (prefers-reduced-motion: reduce) {
  .a-l,
  .a-l2,
  .a-l3,
  .a-f,
  .a-f.a-centro { transition: none; }
  .a-f.a-centro { transform: none; }
}

/* Los adornos que toman el lugar de un ícono PNG se ven a pleno: el PNG iba
   atenuado por su clase; la línea fina ya es liviana. */
span[data-adorno] { opacity: 1; }

/* A tamaño chico la línea engrosa, para que el dibujo se siga leyendo.
   El script marca el tamaño al montar cada adorno. */
.adorno--medio .a-l  { stroke-width: 2.6; }
.adorno--medio .a-l2 { stroke-width: 1.2; }
.adorno--medio .a-l3 { stroke-width: 0.6; }

.adorno--chico .a-l  { stroke-width: 4.2; }
.adorno--chico .a-l2 { stroke-width: 2.2; }
.adorno--chico .a-l3 { stroke-width: 1; }

/* Dibujos a mano: se descubren desde el centro hacia afuera */
.adorno--descubre svg {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.adorno--descubre.is-trazado svg { clip-path: circle(75% at 50% 50%); }

.adorno--descubre .a-f { opacity: 1; transition: none; }

/* Algunos dibujos se descubren de abajo hacia arriba, como si una pluma los
   fuera trazando: en las manos, de las muñecas al sol. En los fondos lo
   marca el scroll, con --p. */
.adorno--descubre.adorno--sube svg {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 2.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.adorno--descubre.adorno--sube.is-trazado svg { clip-path: inset(0 0 0 0); }

.adorno-fondo.adorno--descubre.adorno--sube svg {
  clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0);
  transition: none;
}

/* La luz de las manos (manos-luz): el sol gira muy despacio y respira */
.a-luz,
.a-luz-sol {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes luz-gira { to { transform: rotate(360deg); } }

@keyframes luz-respira {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@media (prefers-reduced-motion: no-preference) {
  .a-luz     { animation: luz-gira 90s linear infinite; }
  .a-luz-sol { animation: luz-respira 5.5s ease-in-out infinite; }
}

/* Láminas ilustradas (tabla LAMINAS de js/adornos.js): cada capa lleva su
   tinta y, si lo pide, su movimiento alrededor del eje que le da el script. */
.a-f.a-zafiro { fill: url(#adorno-zafiro); }
.a-f.a-jade   { fill: url(#adorno-jade); }
.a-f.a-rubi   { fill: var(--ink-red-light); }

.a-gira,
.a-respira,
.a-mece { transform-box: view-box; }

@keyframes lamina-titila {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@keyframes lamina-mece {
  0%, 100% { transform: rotate(calc(var(--giro, 1) * -0.5deg)); }
  50%      { transform: rotate(calc(var(--giro, 1) * 0.5deg)); }
}

@media (prefers-reduced-motion: no-preference) {
  .a-f.a-gira    { animation: luz-gira 120s linear infinite; }
  .a-f.a-respira { animation: luz-respira 5.5s ease-in-out infinite; }
  .a-f.a-titila  { animation: lamina-titila 4.8s ease-in-out infinite; }
  .a-f.a-mece    { animation: lamina-mece 7s ease-in-out infinite; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FONDOS
   Adornos grandes, como vistos con lupa, que asoman por un borde de la sección
   y se dibujan con el scroll. js/adornos.js los siembra (tabla FONDOS) y
   actualiza --p, el avance de 0 a 1, en cada uno.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* La sección recorta lo que sobresale y deja el fondo detrás de su contenido */
.tiene-fondo {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

span[data-adorno].adorno-fondo {
  --p: 0;
  --lado: clamp(420px, 48vw, 760px);
  position: absolute;
  z-index: -1;
  width: var(--lado);
  pointer-events: none;
}

/* Posiciones: cuánto del adorno queda dentro de la sección.
   Del lado izquierdo el fondo se detiene antes de la columna de los íconos:
   --asoma es lo que entra, y nunca pasa del margen libre de la página. */
.adorno-fondo--der        { right: calc(var(--lado) * -0.42); top: 50%; transform: translateY(-50%); }
.adorno-fondo--der-abajo  { right: calc(var(--lado) * -0.34); bottom: calc(var(--lado) * -0.34); }
.adorno-fondo--der-arriba { right: calc(var(--lado) * -0.30); top: calc(var(--lado) * -0.30); }

.adorno-fondo--izq,
.adorno-fondo--izq-abajo,
.adorno-fondo--izq-arriba {
  --asoma: min(var(--lado) * 0.58, max(110px, (100vw - 900px) / 2 - 28px));
  left: calc(var(--asoma) - var(--lado));
}

.adorno-fondo--izq        { top: 50%; transform: translateY(-50%); }
.adorno-fondo--izq-abajo  { bottom: calc(var(--lado) * -0.34); }
.adorno-fondo--izq-arriba { top: calc(var(--lado) * -0.30); }

.adorno-fondo--centro      { left: 50%; bottom: calc(var(--lado) * -0.46); transform: translateX(-50%); }
.adorno-fondo--centro-bajo { left: 50%; bottom: calc(var(--lado) * -0.62); transform: translateX(-50%); }

/* El avance de cada pieza: --p es el avance del fondo y --i el turno de la
   pieza. Cada una empieza cuando le toca y completa su trazo en un tramo
   corto del recorrido: así el dibujo se arma del centro hacia afuera. */
.adorno-fondo .a-l,
.adorno-fondo .a-l2,
.adorno-fondo .a-l3,
.adorno-fondo .a-f {
  --t: clamp(0, (var(--p) - var(--i, 0) * 0.74) / 0.26, 1);
  transition: none;
}

.adorno-fondo .a-l,
.adorno-fondo .a-l2,
.adorno-fondo .a-l3 { stroke-dashoffset: calc(1 - var(--t)); }

/* A este tamaño la línea se afina: el oro va a pleno y la liviandad la da
   el trazo, como de compás. */
.adorno-fondo .a-l  { stroke-width: 0.36; }
.adorno-fondo .a-l2 { stroke-width: 0.17; }
.adorno-fondo .a-l3 { stroke-width: 0.09; }

.adorno-fondo .a-f { opacity: calc(var(--t) * 0.78); }

/* En los fondos el punto del centro sigue en oro: a ese tamaño el rubí
   sería una mancha detrás del texto. Lo dibuja el scroll, sin rebote. */
.adorno-fondo .a-f.a-centro { fill: url(#adorno-oro); transform: none; transition: none; }

.adorno-fondo.adorno--descubre svg {
  clip-path: circle(calc(var(--p) * 75%) at 50% 50%);
  transition: none;
}

.adorno-fondo.adorno--descubre .a-f { opacity: 1; }

/* Los símbolos PNG que cada hero llevaba de fondo ceden su lugar al sello */
.c-hero::after { display: none; }

/* En celular el fondo queda detrás del texto: más chico y más tenue */
@media (max-width: 767px) {
  span[data-adorno].adorno-fondo {
    --lado: 92vw;
    opacity: 0.4;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ANIMACIÓN PÉNDULO LUZ
   ═══════════════════════════════════════════════════════════════════════════════ */
.adorno-fondo .luz-pendulo {
  /* Duración total 4.5s. Seq 0, 1, 2 = 0s, -1.5s, -3.0s */
  animation: resplandor-pendulo 4.5s infinite ease-in-out calc(var(--seq) * -1.5s);
}

@keyframes resplandor-pendulo {
  0%, 33%, 100% {
    opacity: 0.2;
    filter: none;
  }
  11%, 22% {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(var(--gold-leaf-rgb), 0.8));
  }
}

@media (prefers-reduced-motion: reduce) {
  .adorno-fondo .luz-pendulo {
    animation: none;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BRILLO DE LOS BOTONES
   El satinado del zafiro recorre el botón al pasar el cursor o al enfocarlo.
   Vive aquí porque esta hoja se carga en las ocho páginas, después de las demás.
   ═══════════════════════════════════════════════════════════════════════════════ */

.c-btn-primary,
.cta-final-btn,
.formacion-btn-primary,
.site-nav-cta,
.hero-ctas .btn-primary {
  background-size: 240% 100%;
  background-position: 0% 50%;
  transition: background-position 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, box-shadow 0.2s ease;
}

.c-btn-primary:hover,
.c-btn-primary:focus-visible,
.cta-final-btn:hover,
.cta-final-btn:focus-visible,
.formacion-btn-primary:hover,
.formacion-btn-primary:focus-visible,
.site-nav-cta:hover,
.site-nav-cta:focus-visible,
.hero-ctas .btn-primary:hover,
.hero-ctas .btn-primary:focus-visible {
  background-position: 100% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .c-btn-primary,
  .cta-final-btn,
  .formacion-btn-primary,
  .site-nav-cta,
  .hero-ctas .btn-primary { transition: none; }
}