/* =========================================================
   CAPA DE MOVIMIENTO — identidad de motion Cascanueces
   Todo lo animado vive acá, gateado por html.motion (la clase
   se agrega solo con JS y sin prefers-reduced-motion). Sin la
   clase, la página queda exactamente como antes: nada se oculta.
   Solo se animan transform / opacity / clip-path (GPU).
   ========================================================= */

:root{
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  interpolate-size: allow-keywords; /* permite animar height:auto en el FAQ (Chrome) */
}

/* ---------- Keyframes base ---------- */
@keyframes m-rise{
  from{ opacity:0; transform:translateY(26px); }
  to{   opacity:1; transform:none; }
}
@keyframes m-fade{
  from{ opacity:0; }
  to{   opacity:1; }
}

/* =========================================================
   REVEALS AL SCROLL
   Reemplaza al .reveal viejo. El JS etiqueta grupos y asigna
   --d (delay escalonado) por hijo.
   ========================================================= */
html.motion .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease-out-quint) var(--d, 0ms),
             transform .7s var(--ease-out-quint) var(--d, 0ms);
}
html.motion .reveal.in{ opacity:1; transform:none; }

/* Variante para el bloque de testimonio: entra con leve zoom */
html.motion .reveal-zoom{ transform:translateY(18px) scale(.975); }
html.motion .reveal-zoom.in{ transform:none; }

/* Variante para fotos grandes (galería): cortina hacia abajo */
html.motion .reveal-photo{
  clip-path:inset(0 0 100% 0 round var(--radius, 18px));
  transition:clip-path 1s var(--ease-out-expo) var(--d, 0ms);
}
html.motion .reveal-photo.in{ clip-path:inset(0 0 0 0 round var(--radius, 18px)); }

/* =========================================================
   HERO HOME — coreografía de entrada (momento firma)
   ========================================================= */
html.motion .hero .eyebrow{      animation:m-rise .6s var(--ease-out-quint) .05s both; }
html.motion .hero h1{            animation:m-rise .75s var(--ease-out-quint) .16s both; }
html.motion .hero p.lead{        animation:m-rise .65s var(--ease-out-quint) .32s both; }
html.motion .hero .hero-ctas{    animation:m-rise .6s var(--ease-out-quint) .46s both; }
html.motion .hero .hero-note{    animation:m-fade .6s ease .62s both; }
html.motion .hero .hero-clients{ animation:m-fade .7s ease .72s both; }
html.motion .hc-row span{        animation:m-rise .5s var(--ease-out-quint) both; }
html.motion .hc-row span:nth-child(1){ animation-delay:.80s; }
html.motion .hc-row span:nth-child(2){ animation-delay:.86s; }
html.motion .hc-row span:nth-child(3){ animation-delay:.92s; }
html.motion .hc-row span:nth-child(4){ animation-delay:.98s; }
html.motion .hc-row span:nth-child(5){ animation-delay:1.04s; }
html.motion .hc-row span:nth-child(6){ animation-delay:1.10s; }
html.motion .hc-row span:nth-child(7){ animation-delay:1.16s; }
html.motion .hc-row span:nth-child(8){ animation-delay:1.22s; }

/* La foto entra como cortina + leve rise (la más dramática) */
@keyframes m-photo-in{
  from{ opacity:0; clip-path:inset(6% 0 42% 0 round 28px); transform:translateY(22px); }
  to{   opacity:1; clip-path:inset(0 0 0 0 round 28px); transform:none; }
}
html.motion .hero-foto{ animation:m-photo-in 1.05s var(--ease-out-expo) .3s both; }

/* Cartel "MENOS PLÁSTICO": cae, se acomoda y queda meciéndose */
@keyframes m-tag-in{
  from{ opacity:0; transform:translateY(-18px) rotate(12deg); }
  to{   opacity:1; transform:translateY(0) rotate(6deg); }
}
@keyframes m-tag-sway{
  0%,100%{ transform:translateY(0) rotate(6deg); }
  50%{     transform:translateY(-4px) rotate(8.5deg); }
}
html.motion .tag-sinplastico{
  animation:m-tag-in .7s var(--ease-out-quint) 1.05s both,
            m-tag-sway 6.5s ease-in-out 2.2s infinite;
}

/* Chip de +15.000: pop de entrada y flotación suave permanente */
@keyframes m-chip-in{
  from{ opacity:0; transform:translateY(16px) scale(.95); }
  to{   opacity:1; transform:none; }
}
@keyframes m-chip-float{
  0%,100%{ transform:translateY(0); }
  50%{     transform:translateY(-5px); }
}
html.motion .hero-chip{
  animation:m-chip-in .6s var(--ease-out-quint) 1.15s both,
            m-chip-float 5.5s ease-in-out 2.4s infinite;
}
html.motion .hero-pills span{ animation:m-rise .5s var(--ease-out-quint) both; }
html.motion .hero-pills span:nth-child(1){ animation-delay:1.05s; }
html.motion .hero-pills span:nth-child(2){ animation-delay:1.13s; }
html.motion .hero-pills span:nth-child(3){ animation-delay:1.21s; }

/* Subrayado que se dibuja bajo el destacado del h1 */
html.motion .hero h1 em{
  background:linear-gradient(currentColor, currentColor) left 94% / 0% .09em no-repeat;
  animation:m-underline .8s var(--ease-out-expo) 1.15s forwards;
}
@keyframes m-underline{ to{ background-size:100% .09em; } }

/* Parallax sutil de la foto (el JS mueve translateY; acá solo el zoom base
   para que nunca se vean bordes). Solo desktop. */
@media (min-width: 901px){
  html.motion .hero-foto img{ transform:scale(1.045); will-change:transform; }
}

/* =========================================================
   HERO DE PÁGINAS DE SERVICIO
   ========================================================= */
html.motion .service-hero .eyebrow{   animation:m-rise .55s var(--ease-out-quint) .05s both; }
html.motion .service-hero h1{         animation:m-rise .7s var(--ease-out-quint) .15s both; }
html.motion .service-hero p{          animation:m-rise .6s var(--ease-out-quint) .3s both; }
html.motion .service-hero .hero-ctas{ animation:m-rise .55s var(--ease-out-quint) .44s both; }

/* =========================================================
   HEADER — sombra al scrollear + subrayado animado del nav
   ========================================================= */
html.motion header{ transition:box-shadow .35s ease; }
html.motion header.scrolled{ box-shadow:0 8px 28px rgba(2,58,59,.10); }

@media (min-width: 901px){
  html.motion nav.links a{ position:relative; }
  html.motion nav.links a:hover{ border-bottom-color:transparent; }
  html.motion nav.links a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:var(--naranja);
    transform:scaleX(0); transform-origin:left center;
    transition:transform .32s var(--ease-out-quint);
  }
  html.motion nav.links a:hover::after,
  html.motion nav.links a:focus-visible::after{ transform:scaleX(1); }
}

/* Menú mobile: despliegue con fade + slide y links en cascada */
@keyframes m-menu-in{
  from{ opacity:0; transform:translateY(-10px); }
  to{   opacity:1; transform:none; }
}
@media (max-width: 900px){
  html.motion nav.links.open{ animation:m-menu-in .3s var(--ease-out-quint); }
  html.motion nav.links.open a{ animation:m-rise .35s var(--ease-out-quint) both; }
  html.motion nav.links.open a:nth-child(1){ animation-delay:.03s; }
  html.motion nav.links.open a:nth-child(2){ animation-delay:.07s; }
  html.motion nav.links.open a:nth-child(3){ animation-delay:.11s; }
  html.motion nav.links.open a:nth-child(4){ animation-delay:.15s; }
  html.motion nav.links.open a:nth-child(5){ animation-delay:.19s; }
  html.motion nav.links.open a:nth-child(6){ animation-delay:.23s; }
}

/* =========================================================
   BOTONES — respuesta al toque + brillo en el CTA principal
   ========================================================= */
html.motion .btn{
  transition:transform .18s var(--ease-out-quint), box-shadow .18s ease,
             background .18s ease, color .18s ease, border-color .18s ease;
}
html.motion .btn:active{ transform:translateY(0) scale(.965); transition-duration:.09s; }

@media (hover: hover) and (pointer: fine){
  html.motion .btn-primary{ position:relative; overflow:hidden; }
  html.motion .btn-primary::before{
    content:""; position:absolute; top:0; bottom:0; left:-45%; width:38%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
    transform:skewX(-18deg) translateX(-120%);
    pointer-events:none;
  }
  html.motion .btn-primary:hover::before{
    animation:m-sheen .7s var(--ease-out-quint) .05s;
  }
}
@keyframes m-sheen{ to{ transform:skewX(-18deg) translateX(460%); } }

html.motion .tab-btn{ transition:background .2s ease, border-color .2s ease, transform .15s var(--ease-out-quint); }
html.motion .tab-btn:active{ transform:scale(.96); }

/* =========================================================
   TARJETAS — hover con más intención
   ========================================================= */
html.motion .card{
  transition:transform .4s var(--ease-out-quint), box-shadow .4s var(--ease-out-quint);
}
@media (hover: hover) and (pointer: fine){
  html.motion .card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(2,58,59,.13); }
  html.motion .card .icon{ transition:transform .4s var(--ease-out-quint); }
  html.motion .card:hover .icon{ transform:rotate(-7deg) scale(1.1); }
  html.motion .card-photo img, html.motion .foto-ph img,
  html.motion .prod-ph img, html.motion .service-photo img{
    transition:transform .9s var(--ease-out-quint);
  }
  html.motion .card-photo:hover img, html.motion .foto-ph:hover img,
  html.motion .prod-ph:hover img, html.motion .service-photo:hover img{
    transform:scale(1.06);
  }
}

/* Logos de clientes: recuperan color al pasar el mouse */
@media (hover: hover) and (pointer: fine){
  html.motion .clientes .logos img{ transition:filter .45s ease, opacity .45s ease; }
  html.motion .clientes .logos img:hover{ filter:none; opacity:1; }
}

/* =========================================================
   CÓMO FUNCIONA — pasos en cascada al cambiar de pestaña
   ========================================================= */
html.motion .tab-panel.active .tab-note{ animation:m-fade .4s ease both; }
html.motion .tab-panel.active .step{ animation:m-rise .55s var(--ease-out-quint) both; }
html.motion .tab-panel.active .step:nth-child(1){ animation-delay:.05s; }
html.motion .tab-panel.active .step:nth-child(2){ animation-delay:.13s; }
html.motion .tab-panel.active .step:nth-child(3){ animation-delay:.21s; }
html.motion .tab-panel.active .step:nth-child(4){ animation-delay:.29s; }
html.motion .tab-panel.active .step:nth-child(5){ animation-delay:.37s; }
html.motion .tab-panel.active .step:nth-child(6){ animation-delay:.45s; }

/* =========================================================
   FAQ — apertura fluida
   ========================================================= */
html.motion .faq summary::after{ transition:transform .35s var(--ease-out-quint), color .2s ease; }
html.motion .faq summary{ transition:color .2s ease; }
html.motion .faq summary:hover{ color:var(--naranja); }
html.motion .faq details[open] p{ animation:m-rise .45s var(--ease-out-quint) both; }

/* Altura animada nativa donde el navegador lo soporte (Chrome/Edge) */
@supports (interpolate-size: allow-keywords){
  html.motion .faq details::details-content{
    height:0; overflow:clip;
    transition:height .45s var(--ease-out-quint), content-visibility .45s allow-discrete;
  }
  html.motion .faq details[open]::details-content{ height:auto; }
}

/* =========================================================
   FORMULARIOS — foco y estados con transición
   ========================================================= */
html.motion input, html.motion select, html.motion textarea{
  transition:border-color .2s ease, box-shadow .2s ease;
}
@keyframes m-status-in{
  from{ opacity:0; transform:translateY(8px); }
  to{   opacity:1; transform:none; }
}
html.motion .form-status.ok,
html.motion .form-status.error,
html.motion .form-status.info{ animation:m-status-in .45s var(--ease-out-quint); }

/* =========================================================
   WHATSAPP FLOTANTE — entra tarde, saluda al hover
   ========================================================= */
@keyframes m-wa-in{
  from{ opacity:0; transform:translateY(80px); }
  to{   opacity:1; transform:none; }
}
@keyframes m-wa-ring{
  0%,100%{ transform:rotate(0); }
  25%{ transform:rotate(-12deg); }
  60%{ transform:rotate(9deg); }
}
html.motion .wa-float{
  animation:m-wa-in .65s var(--ease-out-quint) 1.5s both;
  transition:transform .25s var(--ease-out-quint), box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine){
  html.motion .wa-float:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 34px rgba(0,0,0,.28); }
  html.motion .wa-float:hover svg{ animation:m-wa-ring .55s ease; }
}
html.motion .wa-float:active{ transform:scale(.96); }

/* =========================================================
   ÍCONOS SOCIALES — ya tienen transición; refuerzo del lift
   ========================================================= */
@media (hover: hover) and (pointer: fine){
  html.motion .social-icon:hover{ transform:translateY(-2px) scale(1.06); }
}

/* =========================================================
   CARRUSEL — el JS lo hace derivar solo; acá, cursor y snap
   ========================================================= */
/* La deriva automática asigna scrollLeft por frame: sin smooth nativo
   (las flechas siguen suaves porque usan scrollBy con behavior:'smooth') */
html.motion .carrusel{ scroll-snap-type:none; scroll-behavior:auto; }
html.motion .carousel-arrow{ transition:transform .2s var(--ease-out-quint), color .2s ease; }
html.motion .carousel-arrow:hover{ transform:translateY(-50%) scale(1.15); }
html.motion .carousel-arrow:active{ transform:translateY(-50%) scale(.92); }