/* =====================================================================
   AMANECER — capa de movimiento de Umbral (10-oct-2026)
   Sensación: «la luz llega antes que el titular».
   Todo estado oculto vive bajo html[data-motion], que pone motion.js
   solo si el visitante no pidió movimiento reducido. Sin JS: todo visible.
   Regla madre: la disrupción nunca toca la evidencia — las fichas,
   formación y credenciales solo se funden, nunca se desplazan.
   ===================================================================== */

:root{ --rise:22px; --dur:950ms; }

/* máscara de palabras: el colchón inferior evita cortar g, p, y */
.w{display:inline-block; overflow:hidden; vertical-align:top;
   padding-bottom:.22em; margin-bottom:-.22em}
.w > span{display:inline-block}

/* barra de lectura: única pieza ligada al scroll */
.a-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:70;
  background:var(--amber); transform-origin:0 50%; transform:scaleX(0); pointer-events:none}

/* botón de pausa de la capa ambiental */
.a-pause{
  position:absolute; left:max(28px, calc((100vw - 1240px)/2 + 28px)); bottom:22px; z-index:3;
  display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 2px;
  font:inherit; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist); background:none; border:0; cursor:pointer;
}
.a-pause::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); opacity:.8}
.a-pause[aria-pressed="true"]::before{background:var(--mist)}
.a-pause:hover, .a-pause:focus-visible{color:var(--bone)}

/* FAQ: la respuesta se despliega (navegadores que lo soportan; el resto abre en seco) */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  @media (prefers-reduced-motion: no-preference){
    .u-faq details::details-content{
      block-size:0; overflow:clip;
      transition:block-size .45s var(--ease), content-visibility .45s allow-discrete;
    }
    .u-faq details[open]::details-content{block-size:auto}
  }
}

@media (prefers-reduced-motion: no-preference){

  /* ---------- gestos de entrada (pausados hasta .is-in) ---------- */
  [data-motion] .a-rise,
  [data-motion] .a-fade,
  [data-motion] .a-scan,
  [data-motion] .a-words .w > span,
  [data-motion] .a-light img{
    animation-duration:var(--dur); animation-timing-function:var(--ease);
    animation-fill-mode:both; animation-play-state:paused;
    animation-delay:var(--d, 0ms);
  }
  [data-motion] .a-rise{animation-name:a-rise}
  [data-motion] .a-fade{animation-name:a-fade; animation-duration:800ms; animation-timing-function:ease-out}
  [data-motion] .a-scan{animation-name:a-scan; animation-duration:900ms}
  [data-motion] .a-words .w > span{animation-name:a-word; animation-duration:1000ms}
  [data-motion] .a-light img{animation-name:a-light; animation-duration:1400ms}

  [data-motion] .a-rise.is-in,
  [data-motion] .a-fade.is-in,
  [data-motion] .a-scan.is-in,
  [data-motion] .a-words.is-in .w > span,
  [data-motion] .a-light.is-in img{animation-play-state:running}

  /* el filete de cada capa: la luz lo recorre y se apaga */
  [data-motion] .a-line{position:relative}
  [data-motion] .a-line::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:var(--amber); transform-origin:0 50%; transform:scaleX(0); opacity:1;
    animation:a-sweep 1600ms var(--ease) var(--d, 0ms) both paused;
  }
  [data-motion] .a-line.is-in::after{animation-play-state:running}

  /* ---------- portada: el amanecer ---------- */
  [data-motion] .u-glow{transition:none; opacity:1;
    animation:a-dawn 2200ms var(--ease) 80ms both}
  [data-motion] .u-portrait img{
    animation:a-emerge 2000ms var(--ease) 420ms both;
  }
  [data-motion] .u-horizon span{transition:width 1.4s var(--ease) 1.25s}

  /* capa ambiental: respira solo tras el amanecer */
  [data-motion] .a-amb .u-glow{
    animation:a-dawn 2200ms var(--ease) 80ms both,
              a-breathe 9s ease-in-out 2400ms infinite alternate;
  }
  [data-motion] .a-amb .u-portrait{transform-origin:70% 25%;
    animation:a-near 16s ease-in-out 2400ms infinite alternate}
  [data-motion] .a-amb:hover .u-glow, [data-motion] .a-amb:hover .u-portrait,
  [data-motion] .a-amb:focus-within .u-glow, [data-motion] .a-amb:focus-within .u-portrait,
  [data-motion] .a-amb.is-paused .u-glow,
  [data-motion] .a-amb.is-paused .u-portrait,
  [data-motion] .a-amb.is-offscreen .u-glow,
  [data-motion] .a-amb.is-offscreen .u-portrait,
  [data-motion][data-hidden] .a-amb .u-glow,
  [data-motion][data-hidden] .a-amb .u-portrait{animation-play-state:paused}

  /* el tramo ámbar del horizonte recorre la línea, ida y vuelta */
  [data-motion] .u-horizon.on span{animation:a-travel 11s ease-in-out 2900ms infinite alternate}
  [data-motion][data-amb-paused] .u-glow,
  [data-motion][data-amb-paused] .u-portrait,
  [data-motion][data-amb-paused] .u-horizon span,
  [data-motion][data-hidden] .u-horizon span,
  [data-motion] .u-horizon.is-offscreen span,
  [data-motion] .u-horizon:hover span{animation-play-state:paused}

  /* ---------- barra de lectura ---------- */
  @supports (animation-timeline: scroll()){
    [data-motion] .a-progress{animation:a-progress linear both; animation-timeline:scroll(root)}
  }

  /* ---------- microinteracciones ---------- */
  /* botón principal: gana temperatura desde abajo */
  .u-b1{position:relative; overflow:hidden; isolation:isolate}
  .u-b1::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(to top, #FFC46B, rgba(255,196,107,0));
    transform:translateY(101%); transition:transform .45s var(--ease);
  }
  .u-b1:hover::before, .u-b1:focus-visible::before{transform:none}

  /* enlaces: el subrayado ámbar se traza de izquierda a derecha */
  .u-b2, .u-more, .u-unit .go, .u-contact a:not(.u-b1d){position:relative}
  .u-b2::after, .u-more::after, .u-unit .go::after, .u-contact a:not(.u-b1d)::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--amber); transform-origin:0 50%; transform:scaleX(0);
    transition:transform .5s var(--ease);
  }
  .u-b2:hover::after, .u-more:hover::after, .u-unit .go:hover::after,
  .u-contact a:not(.u-b1d):hover::after,
  .u-b2:focus-visible::after, .u-more:focus-visible::after{transform:scaleX(1)}

  /* imágenes de medios: se acercan dentro de su marco */
  .u-media figure{overflow:hidden}
  .u-media figure img{transition:transform .9s var(--ease)}
  .u-media figure:hover img{transform:scale(1.03)}
}

@keyframes a-rise{from{opacity:0; transform:translateY(var(--rise))}}
@keyframes a-fade{from{opacity:0}}
@keyframes a-scan{from{opacity:0; clip-path:inset(0 100% 0 0)} to{opacity:1; clip-path:inset(0 0 0 0)}}
@keyframes a-word{from{transform:translateY(135%); opacity:0} 18%{opacity:0} 45%{opacity:1}}
@keyframes a-light{from{opacity:0; transform:scale(1.04)}}
@keyframes a-sweep{0%{transform:scaleX(0); opacity:1} 55%{transform:scaleX(1); opacity:1} 100%{transform:scaleX(1); opacity:0}}
@keyframes a-dawn{from{opacity:0; transform:translateY(14%)}}
@keyframes a-emerge{from{opacity:0; transform:scale(1.06)}}
@keyframes a-breathe{from{transform:scale(1) translate(0,0)} to{transform:scale(1.24) translate(-5%,-6%)}}
@keyframes a-near{from{transform:scale(1)} to{transform:scale(1.09)}}
@keyframes a-travel{to{transform:translateX(230%)}}
@keyframes a-progress{to{transform:scaleX(1)}}

@media print{ [data-motion] *, [data-motion] *::after{animation:none !important} .a-progress, .a-pause{display:none} }