/* ============================================================
   AURLINE · capa de movimiento premium
   Tipografía cinética, líneas que se dibujan, microinteracciones.
   Todo se desactiva con prefers-reduced-motion.
   ============================================================ */

/* ---------- 1 · transición entre páginas ---------- */
@media (prefers-reduced-motion: no-preference){
  body{ animation:pageIn .5s ease both; }
  html.leaving body{ opacity:.45; transition:opacity .42s ease; animation:none; }
}
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }

/* telón de salida: barrido forest con filo dorado («la línea») */
.veil{ position:fixed; inset:0; z-index:240; pointer-events:none;
  background:linear-gradient(180deg, var(--forest-3), var(--forest-2));
  transform:translateY(101%); }
.veil::before{ content:""; position:absolute; top:-2px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--sand-deep), var(--sand), var(--sand-deep)); }
html.leaving .veil{ transform:translateY(0); transition:transform .42s cubic-bezier(.65,.05,.36,1); }
@media (prefers-reduced-motion: reduce){ .veil{ display:none; } }

/* ---------- 2 · header: se retira al bajar, vuelve al subir ---------- */
.site-head{
  transition:background .4s var(--ease), padding .4s var(--ease),
             box-shadow .4s, transform .5s var(--ease);
}
.site-head.hide{ transform:translateY(-105%); }

/* ---------- 3 · nav: subrayado que se desliza ---------- */
.nav a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--sand); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:not(.nav__cta):hover::after{ transform:scaleX(1); }
.nav a.active::after{ transform:scaleX(1); }

/* ---------- 4 · hero cinético (index) ---------- */
.hl{ display:block; }
html.js .hl{ overflow:hidden; }
html.js .hl__in{ display:block; transform:translateY(112%); transition:transform 1s var(--ease); }
html.js .hl:nth-child(2) .hl__in{ transition-delay:.12s; }
html.js .hl:nth-child(3) .hl__in{ transition-delay:.24s; }
body.hero-go .hl__in{ transform:none; }

html.js .hero-rise{ opacity:0; transform:translateY(18px);
  transition:opacity .85s var(--ease), transform .85s var(--ease); }
html.js .hero-rise.hr1{ transition-delay:.4s; }
html.js .hero-rise.hr2{ transition-delay:.55s; }
html.js .hero-rise.hr3{ transition-delay:.7s; }
body.hero-go .hero-rise{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html.js .hl__in, html.js .hero-rise{ transform:none; opacity:1; transition:none; }
}

/* red de seguridad global: si los scripts de animación no confirman a tiempo,
   se fuerza la visibilidad del titular cinético, los rise del hero y los
   titulares palabra a palabra (cubre fallo de carga / error de JS). */
html.reveal-all .hl__in,
html.reveal-all .hero-rise,
html.reveal-all [data-words] .wm__in{ transform:none !important; opacity:1 !important; transition:none !important; }
html.reveal-all .wfill .w{ opacity:1 !important; }

/* ---------- 5 · cita que se enciende palabra a palabra ---------- */
.wfill .w{ opacity:.14; transition:opacity .5s ease; }
.wfill .w.on{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .wfill .w{ opacity:1; } }

/* ---------- 6 · filas de servicio: línea dorada + flecha ---------- */
.svc{ position:relative; }
.svc::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--sand-deep); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease); z-index:1;
}
.svc:hover::before{ transform:scaleX(1); }
.svc::after{
  content:"→"; position:absolute; right:8px; top:34px;
  font-family:var(--sans); font-size:1.5rem; color:var(--sand-deep);
  opacity:0; transform:translateX(-16px); transition:.4s var(--ease);
}
.svc:hover::after{ opacity:1; transform:none; }
.svc__t{ transition:transform .45s var(--ease); }
.svc:hover .svc__t{ transform:translateX(8px); }
@media (prefers-reduced-motion: reduce){
  .svc::before, .svc::after, .svc__t{ transition:none; }
}
@media (max-width:620px){ .svc::after{ display:none; } }

/* ---------- 7 · método: líneas que se dibujan ---------- */
.method__list li{ border-top:0; position:relative; }
.method__list li::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:rgba(205,180,137,.28); transform:scaleX(0); transform-origin:left;
  transition:transform 1.05s var(--ease);
}
.reveal.in .method__list li:nth-child(1)::before{ transform:scaleX(1); transition-delay:.15s; }
.reveal.in .method__list li:nth-child(2)::before{ transform:scaleX(1); transition-delay:.32s; }
.reveal.in .method__list li:nth-child(3)::before{ transform:scaleX(1); transition-delay:.49s; }
@media (prefers-reduced-motion: reduce){
  .method__list li::before{ transform:scaleX(1); transition:none; }
}

/* ---------- 8 · promesas: hairline dorada que se traza ---------- */
.promise{ position:relative; padding-top:34px; }
.promise::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:rgba(205,180,137,.4); transform:scaleX(0); transform-origin:left;
  transition:transform 1.15s var(--ease) .2s;
}
.promise.in::before{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .promise::before{ transform:scaleX(1); transition:none; }
}

/* ---------- 9 · marquesina de disciplinas ---------- */
.ticker{
  overflow:hidden; background:var(--paper);
  border-top:1px solid var(--paper-3); border-bottom:1px solid var(--paper-3);
  padding:clamp(26px,4vh,42px) 0;
}
.ticker__track{ display:flex; gap:52px; width:max-content; align-items:center; }
.ticker__half{ display:flex; gap:52px; align-items:center; }
.ticker span{
  font-family:var(--sans); font-weight:700; white-space:nowrap;
  font-size:clamp(1.5rem,2.8vw,2.4rem); letter-spacing:-.01em;
  color:var(--paper-3);
}
@supports (-webkit-text-stroke: 1px #000){
  .ticker span{ color:transparent; -webkit-text-stroke:1px var(--sand-deep); }
}
.ticker i{ font-style:normal; color:var(--sand); font-size:.85rem; }
@media (prefers-reduced-motion: no-preference){
  .ticker__track{ animation:tick 44s linear infinite; }
  .ticker:hover .ticker__track{ animation-play-state:paused; }
}
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ---------- 10 · cursor contextual (solo puntero fino) ---------- */
.cursor-pill{
  position:fixed; top:0; left:0; z-index:120; pointer-events:none;
  background:var(--forest); color:var(--sand);
  font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; padding:11px 18px; border-radius:100px; white-space:nowrap;
  box-shadow:0 8px 30px rgba(15,42,46,.25);
  transform:translate(-50%,-50%) scale(0); transition:transform .28s var(--ease);
  display:inline-flex; align-items:center; gap:.5em;
}
.cursor-pill::after{ content:"→"; }
.cursor-pill.on{ transform:translate(-50%,-50%) scale(1); }
@media (pointer:coarse), (prefers-reduced-motion: reduce){ .cursor-pill{ display:none; } }

/* ---------- 11 · botones magnéticos ---------- */
[data-magnetic]{ transition:transform .3s var(--ease); will-change:transform; }

/* ---------- 12 · showcase scrollytelling de disciplinas ---------- */
.show__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,96px); align-items:start; }
.show__pin{ position:sticky; top:130px; }
.show__idx{ font-family:var(--sans); font-weight:700; line-height:.9; letter-spacing:-.04em;
  font-size:clamp(5rem,10vw,9rem); color:var(--paper-3); display:flex; align-items:baseline; }
@supports (-webkit-text-stroke: 1px #000){
  .show__idx .show__cur{ color:transparent; -webkit-text-stroke:1.5px var(--sand-deep); }
}
.show__of{ font-size:clamp(1.1rem,1.8vw,1.5rem); color:var(--sand-deep); margin-left:.25em; font-weight:600; letter-spacing:0; }
.show__names{ position:relative; margin-top:22px; min-height:3em; }
.show__name{ position:absolute; top:0; left:0; right:0;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.25; color:var(--ink); text-wrap:balance;
  opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease); }
.show__name.on{ opacity:1; transform:none; }
.show__item{ min-height:44vh; align-content:center; }
.show__list .svc:last-child{ border-bottom:1px solid var(--paper-3); }
@media (max-width:880px){
  .show__grid{ grid-template-columns:1fr; }
  .show__pin{ display:none; }
  .show__item{ min-height:0; }
}
@media (prefers-reduced-motion: reduce){ .show__name{ transition:none; } }

/* ---------- 13 · compromisos: contadores ---------- */
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(26px,3.5vw,44px); }
@media (max-width:900px){ .stats__grid{ grid-template-columns:repeat(2,1fr); } }
.stat{ border-top:1px solid rgba(205,180,137,.28); padding-top:20px; }
.stat__n{ font-family:var(--sans); font-weight:600; letter-spacing:-.03em; line-height:1;
  font-size:clamp(2.6rem,5vw,4.4rem); color:#fff; font-variant-numeric:tabular-nums; }
.stat__l{ color:var(--mist); font-size:.95rem; line-height:1.5; margin:10px 0 0; max-width:26ch; }

/* ---------- 14 · CTA destacado · sobrio y profesional ---------- */
.mega{ display:inline-flex; align-items:center; gap:.35em; position:relative;
  font-family:var(--sans); font-weight:600; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(1.7rem,3.2vw,2.7rem); color:var(--forest);
  padding-bottom:8px; transition:color .35s var(--ease); }
.mega:hover, .mega:focus-visible{ color:var(--sand-text); }
/* sobre fondos oscuros el CTA debe ser blanco (legibilidad) */
.on-dark .mega, .on-deep .mega{ color:#fff; }
.on-dark .mega:hover, .on-dark .mega:focus-visible,
.on-deep .mega:hover, .on-deep .mega:focus-visible{ color:var(--sand); }
.on-dark .mega::after, .on-deep .mega::after{ background:rgba(205,180,137,.28); }
.mega::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--paper-3); }
.mega::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--sand); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease); z-index:1; }
.mega:hover::before, .mega:focus-visible::before{ transform:scaleX(1); }
.mega__arr{ transition:transform .4s var(--ease); }
.mega:hover .mega__arr{ transform:translateX(.18em); }
@media (prefers-reduced-motion: reduce){ .mega, .mega::before, .mega__arr{ transition:none; } }

/* ---------- 15 · foco que sigue al cursor (tarjetas) ---------- */
@media (pointer:fine) and (prefers-reduced-motion: no-preference){
  .promise, .value, .seal, .pack, .door, .eco, .sd-block, .sd-when__list li{ position:relative; }
  .promise::after, .value::after, .seal::after, .pack::after, .door::after, .eco::after,
  .sd-block::after, .sd-when__list li::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
    background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),
      rgba(205,180,137,.13), transparent 65%);
    transition:opacity .45s ease;
  }
  .promise:hover::after, .value:hover::after, .seal:hover::after,
  .pack:hover::after, .door:hover::after, .eco:hover::after,
  .sd-block:hover::after, .sd-when__list li:hover::after{ opacity:1; }
}

/* ---------- 16 · líneas dibujadas en heros interiores ---------- */
.hero-lines{ position:absolute; inset:0; pointer-events:none; }
.hero-lines svg{ width:100%; height:100%; display:block; }
.dline{ stroke:rgba(205,180,137,.34); stroke-width:1.2; fill:none;
  stroke-dasharray:2600; stroke-dashoffset:2600; }
.dline.soft{ stroke:rgba(205,180,137,.16); }
body.hero-go .dline{ animation:dDraw 3s var(--ease) .25s forwards; }
body.hero-go .dline.soft{ animation-duration:3.6s; animation-delay:.45s; }
@keyframes dDraw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  .dline{ stroke-dashoffset:0; animation:none !important; }
}

/* ---------- 17 · listas con líneas que se trazan ---------- */
.pillars li{ border-top:0; position:relative; }
.pillars li::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--paper-3); transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease);
}
.reveal.in .pillars li:nth-child(1)::before{ transform:scaleX(1); transition-delay:.1s; }
.reveal.in .pillars li:nth-child(2)::before{ transform:scaleX(1); transition-delay:.26s; }
.reveal.in .pillars li:nth-child(3)::before{ transform:scaleX(1); transition-delay:.42s; }
@media (prefers-reduced-motion: reduce){
  .pillars li::before{ transform:scaleX(1); transition:none; }
}

/* ---------- 18 · deriva horizontal sutil al scroll ---------- */
[data-drift]{ will-change:transform; }

/* ---------- 19 · titulares: revelado palabra a palabra con máscara ---------- */
html.js [data-words] .wm{ display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.12em; margin-bottom:-.12em; }
html.js [data-words] .wm__in{ display:inline-block; transform:translateY(114%);
  transition:transform .95s var(--ease); }
html.js [data-words].go .wm__in{ transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js [data-words] .wm__in{ transform:none; transition:none; }
}

/* ---------- 20 · tilt 3D sutil en tarjetas (lo aplica motion.js) ---------- */
@media (pointer:fine) and (prefers-reduced-motion: no-preference){
  [data-tilt]{ will-change:transform; }
}

/* ---------- 21 · táctil: las tarjetas se «encienden» al entrar en viewport ---------- */
@media (hover:none) and (prefers-reduced-motion: no-preference){
  .pack.in-view::before, .door.in-view::before{ transform:scaleX(1); }
  .pack.in-view .pack__arr{ transform:none; opacity:1; }
  .door.in-view .door__go .arr{ transform:translateX(5px); }
  .eco.in-view{ border-color:rgba(205,180,137,.45); }
}

/* ---------- 22 · táctil: deriva del hero ligada al scroll ---------- */
@media (hover:none){
  .hero-lines, .page-hero__glow{ will-change:transform; }
}

/* ---------- 23 · sello de cierre del formulario ---------- */
.ok .seal-svg{ display:block; margin:0 0 16px; }
.ok .seal-ring{ stroke-dasharray:150; stroke-dashoffset:150; }
.ok.sealed .seal-ring{ animation:sealDraw 1.1s cubic-bezier(.22,1,.36,1) .15s forwards; }
.ok .seal-core{ transform-origin:32px 32px; transform:scale(0); }
.ok.sealed .seal-core{ animation:sealPop .55s cubic-bezier(.34,1.56,.64,1) .95s forwards; }
@keyframes sealDraw{ to{ stroke-dashoffset:0; } }
@keyframes sealPop{ to{ transform:scale(1); } }
[data-contact-form].sent > :not(.ok){ opacity:.35; transition:opacity .7s ease; }
@media (prefers-reduced-motion: reduce){
  .ok .seal-ring{ stroke-dashoffset:0; animation:none; }
  .ok .seal-core{ transform:scale(1); animation:none; }
  [data-contact-form].sent > :not(.ok){ transition:none; }
}

/* nodo sobre fondos profundos */
.on-deep .node::before{ background:var(--forest-2); border-color:var(--sand); }

/* ---------- 24 · artículos (Insights): revelado de cuerpo escalonado ----------
   Pre-ocultación por CSS (antes del primer pintado, sin parpadeo); motion.js
   solo añade .in al entrar en viewport. Mismo lenguaje que .reveal del sitio. */
@media (prefers-reduced-motion: no-preference){
  html.js body[data-page="insight"] .art-body > *:not(.art-quote),
  html.js body[data-page="insight"] .art-cta,
  html.js body[data-page="insight"] .art-more .kicker,
  html.js body[data-page="insight"] .art-more .h3,
  html.js body[data-page="insight"] .more-card{
    opacity:0; transform:translateY(22px);
    transition:opacity .85s var(--ease), transform .85s var(--ease);
  }
  html.js body[data-page="insight"] .art-body > .in,
  html.js body[data-page="insight"] .art-cta.in,
  html.js body[data-page="insight"] .art-more .kicker.in,
  html.js body[data-page="insight"] .art-more .h3.in,
  html.js body[data-page="insight"] .more-card.in{ opacity:1; transform:none; }
  html.js body[data-page="insight"] .more-card:nth-child(2){ transition-delay:.08s; }
  html.js body[data-page="insight"] .more-card:nth-child(3){ transition-delay:.16s; }
}

/* ---------- 25 · View Transitions entre documentos ----------
   En navegadores compatibles la navegación entre páginas se convierte en una
   transición nativa: el contenido sale hacia arriba, el nuevo entra con el
   mismo ritmo del sitio y la cabecera persiste (morph) entre páginas.
   motion.js desactiva el telón JS cuando esta vía está disponible. */
@view-transition{ navigation: auto; }
@media (prefers-reduced-motion: no-preference){
  .site-head{ view-transition-name: site-head; }
  html::view-transition-old(root){
    animation: vtOut .38s cubic-bezier(.65,.05,.36,1) both;
  }
  html::view-transition-new(root){
    animation: vtIn .55s cubic-bezier(.22,1,.36,1) .06s both;
  }
  html::view-transition-group(site-head){
    animation-duration:.45s; animation-timing-function:cubic-bezier(.22,1,.36,1);
  }
}
@keyframes vtOut{ to{ opacity:0; transform:translateY(-16px); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(20px); } }
@media (prefers-reduced-motion: reduce){
  html::view-transition-group(*),
  html::view-transition-old(*),
  html::view-transition-new(*){ animation:none !important; }
}

/* ---------- 26 · animaciones ligadas al scroll (hilo del compositor) ----------
   Donde el navegador soporta scroll-driven animations, el parallax del hero y
   la deriva horizontal se mueven en el compositor: cero trabajo en el hilo
   principal, sincronía perfecta con el desplazamiento. motion.js detecta el
   soporte y cede el control a esta capa (no hay doble animación). */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .hero__bg{
      animation: heroPar linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    [data-drift]{
      animation: driftX linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes heroPar{ to{ transform: translateY(14vh); } }
@keyframes driftX{ from{ transform: translateX(-28px); } to{ transform: translateX(28px); } }