/* ===========================================================
   USTH by ComCargo S.R.L. — Animaciones y efectos de interacción
   (capa nueva: en la versión anterior del HERO no existía ninguna)
=========================================================== */


/* -----------------------------------------------------------
   1. FOTO CIRCULAR — revelado de escala al cargar
   Solo en desktop: en móvil el círculo se desactiva
   (responsive.css) y esta animación no aplica.
----------------------------------------------------------- */

@media (min-width:961px){

  .hero-photo{
    animation: heroPhotoReveal 1.3s cubic-bezier(.16,1,.3,1) both;
  }

  .hero-rim{
    animation: heroRimReveal 1.3s cubic-bezier(.16,1,.3,1) .05s both;
  }

}

@keyframes heroPhotoReveal{
  from{ clip-path: circle(0px at 80% 87%); }
  to{ clip-path: circle(clamp(660px, calc(0.4vw - 140px), 820px) at 80% 87%); }
}

@keyframes heroRimReveal{
  from{ clip-path: circle(0px at 80% 87%); }
  to{ clip-path: circle(clamp(667px, calc(0.4vw - 133px), 827px) at 80% 87%); }
}


/* -----------------------------------------------------------
   2. TÍTULO / SUBTÍTULO / DESTACADOS — fade-up escalonado
----------------------------------------------------------- */

.hero-content > *{
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp .8s ease forwards;
}

.hero-content > *:nth-child(1){ animation-delay: .15s; }
.hero-content > *:nth-child(2){ animation-delay: .35s; }
.hero-content > *:nth-child(3){ animation-delay: .55s; }

.hero-features li{
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .7s ease forwards;
}

.hero-features li:nth-child(1){ animation-delay: .75s; }
.hero-features li:nth-child(2){ animation-delay: .85s; }
.hero-features li:nth-child(3){ animation-delay: .95s; }

@keyframes fadeUp{
  to{ opacity: 1; transform: translateY(0); }
}


/* -----------------------------------------------------------
   3. SUBRAYADO bajo "GARANTIZA CONFIANZA" — se dibuja al final
----------------------------------------------------------- */

.hero-content h1 span::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  height: 4px;
  width: 0;
  background: var(--sage);
  border-radius: 2px;
  animation: underlineDraw .6s ease forwards;
  animation-delay: 1.05s;
}

@keyframes underlineDraw{
  to{ width: 120px; }
}


/* -----------------------------------------------------------
   4. ÍCONOS de los 3 destacados — trazo dibujado (stroke-draw)
   El largo real del trazo (stroke-dasharray/offset) lo calcula
   y aplica js/main.js vía SVGGeometryElement.getTotalLength().
   Aquí solo se define la transición.
----------------------------------------------------------- */

.hero-features svg path,
.hero-features svg circle{
  transition: stroke-dashoffset 1.1s ease;
}


/* -----------------------------------------------------------
   5. TARJETA DE VALORES — reveal al entrar en viewport + hover
   La clase .in-view la agrega js/main.js con IntersectionObserver.
----------------------------------------------------------- */

.value-strip{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}

.value-strip.in-view{
  opacity: 1;
  transform: translateY(0);
}

.value-item{
  border-radius: 12px;
  transition: background .25s ease, transform .25s ease;
}

.value-item:hover{
  background: var(--green-light);
  transform: translateY(-3px);
}


/* -----------------------------------------------------------
   CINTA DE MÉTRICAS — reveal escalonado al entrar en viewport
----------------------------------------------------------- */

.metrics-ribbon-inner li{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}

.metrics-ribbon.in-view .metrics-ribbon-inner li:nth-child(1){ transition-delay: .05s; }
.metrics-ribbon.in-view .metrics-ribbon-inner li:nth-child(2){ transition-delay: .15s; }
.metrics-ribbon.in-view .metrics-ribbon-inner li:nth-child(3){ transition-delay: .25s; }
.metrics-ribbon.in-view .metrics-ribbon-inner li:nth-child(4){ transition-delay: .35s; }

.metrics-ribbon.in-view .metrics-ribbon-inner li{
  opacity: 1;
  transform: translateY(0);
}


/* -----------------------------------------------------------
   6. BOTÓN CTA — elevación + sombra al hover
----------------------------------------------------------- */

.cta{
  transition: background .2s ease, transform .25s ease, box-shadow .25s ease;
}

.cta:hover{
  background: var(--green-dark);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(76,148,102,.35);
}


/* -----------------------------------------------------------
   7. NAV — subrayado que crece desde la izquierda al hover
   (el estado .active queda siempre visible, no solo al hover)
----------------------------------------------------------- */

nav.links a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .3s ease;
}

nav.links a:hover{
  color: var(--green);
}

nav.links a:hover::after,
nav.links a.active::after{
  transform: scaleX(1);
}


/* -----------------------------------------------------------
   8. HAMBURGUESA Y PANEL MÓVIL — transiciones de apertura
----------------------------------------------------------- */

.burger span{
  transition: transform .25s ease, opacity .25s ease;
}

.burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity: 0; }
.burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-panel{
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .2s ease;
}

.mobile-panel.open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


/* -----------------------------------------------------------
   10. NOSOTROS — reveal al entrar en viewport (fade-up escalonado)
   La clase .in-view la agrega js/main.js con IntersectionObserver,
   igual que en la tarjeta de valores del HERO.
----------------------------------------------------------- */

.section-eyebrow,
.nosotros-title,
.nosotros-body,
.nosotros-scope-label,
.scope-list li,
.nosotros-link{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.nosotros.in-view .section-eyebrow{ transition-delay: .05s; }
.nosotros.in-view .nosotros-title{ transition-delay: .15s; }
.nosotros.in-view .nosotros-body{ transition-delay: .3s; }
.nosotros.in-view .nosotros-scope-label{ transition-delay: .4s; }
.nosotros.in-view .nosotros-link{ transition-delay: .5s; }

.nosotros.in-view .section-eyebrow,
.nosotros.in-view .nosotros-title,
.nosotros.in-view .nosotros-body,
.nosotros.in-view .nosotros-scope-label,
.nosotros.in-view .scope-list li,
.nosotros.in-view .nosotros-link{
  opacity: 1;
  transform: translateY(0);
}

/* Íconos de Carga/Descarga/Almacenamiento — mismo trazo dibujado que el HERO */

.scope-list svg path,
.scope-list svg rect{
  transition: stroke-dashoffset 1.1s ease;
}


/* -----------------------------------------------------------
   SERVICIOS — reveal escalonado al entrar en viewport
----------------------------------------------------------- */

.servicios .section-eyebrow,
.servicios-title,
.servicios-scope-label,
.servicios-tags,
.servicio-madre,
.servicio-card,
.servicios-footnote,
.servicios-footnote-tag{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.servicios.in-view .section-eyebrow{ transition-delay: .05s; }
.servicios.in-view .servicios-title{ transition-delay: .15s; }
.servicios.in-view .servicios-scope-label{ transition-delay: .25s; }
.servicios.in-view .servicios-tags{ transition-delay: .32s; }
.servicios.in-view .servicio-card:nth-child(1){ transition-delay: .42s; }
.servicios.in-view .servicio-card:nth-child(2){ transition-delay: .5s; }
.servicios.in-view .servicio-card:nth-child(3){ transition-delay: .58s; }
.servicios.in-view .servicio-card:nth-child(4){ transition-delay: .66s; }
.servicios.in-view .servicio-madre{ transition-delay: .8s; }
.servicios.in-view .servicios-footnote{ transition-delay: .95s; }
.servicios.in-view .servicios-footnote-tag{ transition-delay: 1.02s; }

.servicios.in-view .section-eyebrow,
.servicios.in-view .servicios-title,
.servicios.in-view .servicios-scope-label,
.servicios.in-view .servicios-tags,
.servicios.in-view .servicio-madre,
.servicios.in-view .servicio-card,
.servicios.in-view .servicios-footnote,
.servicios.in-view .servicios-footnote-tag{
  opacity: 1;
  transform: translateY(0);
}

.servicio-madre svg path,
.servicio-madre svg circle,
.servicio-card svg path,
.servicio-card svg circle{
  transition: stroke-dashoffset 1.1s ease;
}


/* -----------------------------------------------------------
   CALIDAD — reveal escalonado al entrar en viewport
----------------------------------------------------------- */

.calidad .section-eyebrow,
.calidad-title,
.calidad-method,
.calidad-norms,
.calidad-link{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.calidad.in-view .section-eyebrow{ transition-delay: .05s; }
.calidad.in-view .calidad-title{ transition-delay: .15s; }
.calidad.in-view .calidad-method{ transition-delay: .3s; }
.calidad.in-view .calidad-norms{ transition-delay: .45s; }
.calidad.in-view .calidad-link{ transition-delay: .6s; }

.calidad.in-view .section-eyebrow,
.calidad.in-view .calidad-title,
.calidad.in-view .calidad-method,
.calidad.in-view .calidad-norms,
.calidad.in-view .calidad-link{
  opacity: 1;
  transform: translateY(0);
}

.calidad-norm-item svg path,
.calidad-norm-item svg circle{
  transition: stroke-dashoffset 1.1s ease;
}

.seguridad-step-icon path,
.seguridad-step-icon circle{
  transition: stroke-dashoffset 1.1s ease;
}


/* -----------------------------------------------------------
   SEGURIDAD — reveal escalonado al entrar en viewport
----------------------------------------------------------- */

.seguridad .section-eyebrow,
.seguridad-title,
.seguridad-method,
.seguridad-step,
.seguridad-scope{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.seguridad.in-view .section-eyebrow{ transition-delay: .05s; }
.seguridad.in-view .seguridad-title{ transition-delay: .15s; }
.seguridad.in-view .seguridad-method{ transition-delay: .3s; }
.seguridad.in-view .seguridad-step:nth-child(1){ transition-delay: .45s; }
.seguridad.in-view .seguridad-step:nth-child(2){ transition-delay: .55s; }
.seguridad.in-view .seguridad-step:nth-child(3){ transition-delay: .65s; }
.seguridad.in-view .seguridad-scope{ transition-delay: .8s; }

.seguridad.in-view .section-eyebrow,
.seguridad.in-view .seguridad-title,
.seguridad.in-view .seguridad-method,
.seguridad.in-view .seguridad-step,
.seguridad.in-view .seguridad-scope{
  opacity: 1;
  transform: translateY(0);
}


/* -----------------------------------------------------------
   CONTACTO — reveal escalonado al entrar en viewport
----------------------------------------------------------- */

.contacto-eyebrow,
.contacto-title,
.contacto-method,
.contacto-form{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.contacto.in-view .contacto-eyebrow{ transition-delay: .05s; }
.contacto.in-view .contacto-title{ transition-delay: .15s; }
.contacto.in-view .contacto-method{ transition-delay: .3s; }
.contacto.in-view .contacto-form{ transition-delay: .45s; }

.contacto.in-view .contacto-eyebrow,
.contacto.in-view .contacto-title,
.contacto.in-view .contacto-method,
.contacto.in-view .contacto-form{
  opacity: 1;
  transform: translateY(0);
}


/* -----------------------------------------------------------
   9. ACCESIBILIDAD — respeta "reducir movimiento" del sistema
----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){

  .hero-photo,
  .hero-rim,
  .hero-content > *,
  .hero-features li,
  .hero-content h1 span::after,
  .value-strip,
  .cta,
  nav.links a::after,
  .burger span,
  .mobile-panel,
  .section-eyebrow,
  .nosotros-title,
  .nosotros-body,
  .nosotros-scope-label,
  .scope-list li,
  .metrics-ribbon-inner li,
  .nosotros-link,
  .servicios-title,
  .servicios-scope-label,
  .servicio-madre,
  .servicios-tags,
  .servicio-card,
  .servicios-footnote,
.servicios-footnote-tag,
.calidad-title,
.calidad-method,
.calidad-norms,
.calidad-link,
.seguridad-title,
.seguridad-method,
.seguridad-step,
.seguridad-scope,
.contacto-eyebrow,
.contacto-title,
.contacto-method,
.contacto-form{
    animation: none !important;
    transition: none !important;
  }

  .hero-content > *,
  .hero-features li{
    opacity: 1;
    transform: none;
  }

  .hero-content h1 span::after{
    width: 120px;
  }

  .value-strip,
  .metrics-ribbon-inner li,
  .servicios-title,
  .servicios-scope-label,
  .servicio-madre,
  .servicios-tags,
  .servicio-card,
  .servicios-footnote,
.servicios-footnote-tag,
.calidad-title,
.calidad-method,
.calidad-norms,
.calidad-link,
.seguridad-title,
.seguridad-method,
.seguridad-step,
.seguridad-scope,
.contacto-eyebrow,
.contacto-title,
.contacto-method,
.contacto-form{
    opacity: 1;
    transform: none;
  }

  .section-eyebrow,
  .nosotros-title,
  .nosotros-body,
  .nosotros-scope-label,
  .scope-list li,
  .nosotros-link{
    opacity: 1;
    transform: none;
  }

}