/* ============================================================
   THUSS — animations.css
   Todo lo agregado en el refactor vive acá. style.css queda tal
   cual estaba (con 2 ajustes puntuales de display->opacity para
   poder animar svc-panel y mob-menu, documentados en el handoff).
   ============================================================ */

/* Respeta a quien prefiere menos movimiento: apaga todo lo
   decorativo y deja el contenido visible sin más. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* -------------------- SCROLL REVEAL -------------------- */
/* Sin JS (o antes de que cargue) se usa el reveal por sección de siempre */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.8,.24,1),
              transform .7s cubic-bezier(.16,.8,.24,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Estilo Fulgi: cada elemento aparece solo, corto y con frenado suave; --d
   escalona a los hermanos (lo pone animations.js) */
.anim .rv{
  opacity: 0; transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.2,.7,.2,1) var(--d,0s),
              transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0s);
}
.anim .rv.izq{ transform: translateX(-34px); }
.anim .rv.der{ transform: translateX(34px); }
.anim .rv.zoom{ transform: scale(.96); }
.anim .rv.in{ opacity: 1; transform: none; }
/* al marcar los elementos se esconden de golpe; la transición es solo para aparecer */
.anim-inicio .rv{ transition: none !important; }
/* en el celular no entran de costado (no hay lugar y correría la página) */
@media (max-width: 768px){
  .anim .rv.izq, .anim .rv.der{ transform: translateY(26px); }
  .anim .rv.izq.in, .anim .rv.der.in{ transform: none; }
}

/* barrita de progreso del scroll, con los colores del logo */
.progreso{
  position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 300;
  transform-origin: left; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, #E63B6F, #F47B20, #B8972A);
}

/* -------------------- HERO: secuencia de entrada -------------------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-tag   { animation: heroFadeUp .75s cubic-bezier(.2,.7,.2,1) both; }
.hero h1    { animation: heroFadeUp .75s cubic-bezier(.2,.7,.2,1) .1s both; }
.hero-desc  { animation: heroFadeUp .75s cubic-bezier(.2,.7,.2,1) .25s both; }
.hero-btns  { animation: heroFadeUp .75s cubic-bezier(.2,.7,.2,1) .35s both; }
.brief-cta  { animation: heroFadeUp .75s cubic-bezier(.2,.7,.2,1) .2s both; }

/* -------------------- NAV -------------------- */
nav{ transition: box-shadow .3s ease, background .3s ease; }
nav.scrolled{ box-shadow: 0 8px 24px rgba(0,0,0,.35); }

.nav-links a{ position: relative; }
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:-6px;
  width:0; height:1px; background:#FFF;
  transition: width .3s ease;
}
.nav-links a:hover::after{ width:100%; }

/* menú mobile: ahora anima en vez de aparecer/desaparecer de golpe */
.mob-menu{ transition: opacity .35s ease, visibility .35s ease; }
.mob-menu a{
  opacity:0; transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease;
}
.mob-menu.open a{ opacity:1; transform: translateY(0); }
.mob-menu.open a:nth-child(2){ transition-delay:.05s; }
.mob-menu.open a:nth-child(3){ transition-delay:.1s; }
.mob-menu.open a:nth-child(4){ transition-delay:.15s; }
.mob-menu.open a:nth-child(5){ transition-delay:.2s; }
.mob-menu.open a:nth-child(6){ transition-delay:.25s; }
.mob-menu.open a:nth-child(7){ transition-delay:.3s; }

/* -------------------- BOTONES -------------------- */
.btn-dark, .btn-border, .btn-submit{
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-dark:hover, .btn-submit:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.btn-border:hover{ transform: translateY(-2px); }
.btn-dark:active, .btn-border:active, .btn-submit:active{ transform: translateY(0); }

/* -------------------- SERVICIOS: crossfade entre paneles -------------------- */
.svc-panel{
  transition: opacity .4s ease, visibility .4s ease;
}
.svc-panel.active{
  animation: svcPanelIn .45s cubic-bezier(.16,.8,.24,1) both;
}
@keyframes svcPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* en mobile el contenedor tiene 1.5rem de padding, no 3rem */
@media (max-width:768px){
  .svc-panel{ left:1.5rem; right:1.5rem; }
}

/* -------------------- TRABAJOS (carrusel) -------------------- */
.work-card{ transition: background .35s ease; }
.work-card:hover{ background: #171717; }
.work-logo img{ transition: opacity .3s ease; }
.work-card:hover .work-logo img{ opacity: 1 !important; }
.carousel-btn{ transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease; }

/* -------------------- METODOLOGÍA (línea de tiempo) -------------------- */
/* El bloque .tl es el que dispara el observer, pero no se desvanece entero:
   la línea se dibuja y las etapas entran en cascada. */
/* La línea "crece" y las etapas aparecen en cascada corta, como en Fulgi */
.tl.reveal{ opacity: 1; transform: none; }
.tl-line{ transition: transform .7s cubic-bezier(.2,.7,.2,1) .05s; }
.tl.reveal:not(.in-view) .tl-line{ transform: scaleX(0); }
.tl-arrow{ transition: opacity .3s ease .7s, transform .3s ease; }
.tl.reveal:not(.in-view) .tl-arrow{ opacity: 0; }
/* La etapa entera solo se desvanece; lo que sube es el botón (número y
   nombre). Si la etapa tuviera transform, el panel de detalle se mediría con
   el ancho de la etapa y no de toda la línea: se reservaba espacio de más y,
   al terminar la animación, la página se achicaba de golpe (salto antes de
   Contacto). */
.tl-step{ transition: opacity .75s cubic-bezier(.2,.7,.2,1); }
.tl-step .tl-node{ transition: transform .75s cubic-bezier(.2,.7,.2,1); }
.tl.reveal:not(.in-view) .tl-step{ opacity: 0; }
.tl.reveal:not(.in-view) .tl-step .tl-node{ transform: translateY(26px); }
.tl.reveal.in-view .tl-step:nth-child(1), .tl.reveal.in-view .tl-step:nth-child(1) .tl-node{ transition-delay: .05s; }
.tl.reveal.in-view .tl-step:nth-child(2), .tl.reveal.in-view .tl-step:nth-child(2) .tl-node{ transition-delay: .17s; }
.tl.reveal.in-view .tl-step:nth-child(3), .tl.reveal.in-view .tl-step:nth-child(3) .tl-node{ transition-delay: .29s; }
.tl.reveal.in-view .tl-step:nth-child(4), .tl.reveal.in-view .tl-step:nth-child(4) .tl-node{ transition-delay: .41s; }
.tl.reveal.in-view .tl-step:nth-child(5), .tl.reveal.in-view .tl-step:nth-child(5) .tl-node{ transition-delay: .53s; }

.tl-dot{ transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.16,.8,.24,1); }
.tl-node:not(.tl-node--end):hover .tl-dot{ transform: scale(1.1); }

/* detalle (desktop): aparece con fade + leve subida */
.tl-detail{
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,.8,.24,1), visibility .35s;
}
.tl-step.is-open .tl-detail{ opacity: 1; visibility: visible; transform: translateY(0); }
.tl-hint{ transition: opacity .3s ease, visibility .3s; }
.tl.has-open .tl-hint{ opacity: 0; visibility: hidden; }

@media (max-width: 768px){
  /* mobile: acordeón. El alto se anima con grid-template-rows 0fr -> 1fr */
  .tl.reveal:not(.in-view) .tl-line{ transform: scaleY(0); }
  .tl-arrow{ transition: opacity .3s ease 1.3s; }
  .tl-detail{
    opacity: 1; transform: none;
    transition: grid-template-rows .4s cubic-bezier(.16,.8,.24,1), visibility .4s;
  }
}

/* -------------------- TICKER: pausa al pasar el mouse -------------------- */
.ticker:hover .ticker-track{ animation-play-state: paused; }

/* -------------------- WHATSAPP FLOTANTE -------------------- */
@keyframes waPulse{
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.35); }
  50%      { box-shadow: 0 4px 30px rgba(37,211,102,.7); }
}
.wa{ animation: waPulse 2.6s ease-in-out infinite; }
.wa:hover{ animation-play-state: paused; }

/* -------------------- FORM -------------------- */
.fg input, .fg select, .fg textarea{
  transition: border-color .2s ease, transform .2s ease;
}