/* =========================================================
   Pulido de animaciones (criterios de Emil Kowalski)
   Capa opcional: se carga DESPUÉS de styles.css y solo ajusta movimiento.
   Para quitarla basta con borrar el <link> a este archivo.
   ========================================================= */
:root{
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);      /* entradas, salidas y respuestas de la interfaz */
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);  /* elementos que se mueven o cambian de forma en pantalla */
  interpolate-size:allow-keywords;                /* permite animar hasta height:auto (preguntas frecuentes) */
}

/* 1. Respuesta al presionar: todo lo que se puede tocar se "hunde" un poco */
.pill{transition:background .2s ease,color .2s ease,transform 160ms var(--ease-out)}
.pill:active{transform:scale(.97)}
.hero-arrow{transition:opacity .2s ease,background .2s ease,transform 160ms var(--ease-out)}
.hero-arrow:active{transform:scale(.94)}
.wa-float{transition:transform 160ms var(--ease-out)}
.wa-float:active{transform:scale(.95)}
.s-next{transition:background .3s ease}
.s-next:active .s-next-t{transform:scale(.99)}
.s-next-t{transition:transform 160ms var(--ease-out)}

/* 2. Texto del carrusel: cambio más ágil y con un leve desenfoque que une el título viejo con el nuevo */
.hero-head{transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),filter .4s var(--ease-out)}
.hero-head.out{filter:blur(2px)}


/* 4. Páginas de servicio: zoom de foto y flecha más ágiles */
.s-ideal-img img{transition:transform .6s var(--ease-out)}
.s-next-t svg{transition:transform .25s var(--ease-out)}
.s-next img{transition:opacity .3s var(--ease-out),transform .4s var(--ease-out)}
.inc{transition:background .25s ease,color .25s ease}

/* 5. Efectos de "pasar el mouse" solo con mouse: en celular el toque los deja trabados */
@media (hover:none){
  .wa-float:hover{transform:none}
  .s-ideal-img:hover img{transform:none}
  .s-next:hover{background:var(--ice-2)}
  .s-next:hover svg{transform:none}
  .s-next:hover img{opacity:0}
  .inc:hover{background:#fff;color:var(--ink)}.inc:hover p{color:var(--text-2)}
  .brand-grid div:hover{filter:grayscale(1);opacity:.55}
}

/* 6. Aparición al bajar (una sola vez): títulos de sección y tarjetas de servicios.
      Las clases las pone pulido.js, así que sin JavaScript todo se ve normal. */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.svc-cards.rv{transform:none}
.svc-cards.rv .kc{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),box-shadow .35s var(--ease-out),border-color .3s ease}
.svc-cards.rv.in .kc{opacity:1;transform:none}
.svc-cards.rv.in .kc:nth-child(2){transition-delay:50ms}
.svc-cards.rv.in .kc:nth-child(3){transition-delay:100ms}
.svc-cards.rv.in .kc:nth-child(4){transition-delay:150ms}
.svc-cards.rv.in .kc:nth-child(5){transition-delay:200ms}
.svc-cards.rv.in .kc:nth-child(6){transition-delay:250ms}
.svc-cards.rv.in .kc:nth-child(7){transition-delay:300ms}
.svc-cards.rv.in .kc:nth-child(8){transition-delay:350ms}
.svc-cards.rv.done .kc{transition-delay:0s}

/* 7. Preguntas frecuentes: se abren con suavidad en lugar de saltar (navegadores modernos) */
.faq details::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .22s var(--ease-out),opacity .22s var(--ease-out),content-visibility .22s allow-discrete}
.faq details[open]::details-content{block-size:auto;opacity:1}
.faq summary::after{transition:transform .22s var(--ease-out)}

/* Reducir movimiento: se conservan los fundidos, se quitan los desplazamientos */
@media (prefers-reduced-motion:reduce){
  .rv,.svc-cards.rv .kc{transform:none!important}
  .hero-head.out{transform:none}
  .pill:active,.hero-arrow:active,.wa-float:active{transform:none}
}