/* ==========================================================================
   Animaciones de la web (hover, aparición al bajar, brillos).
   Archivo aparte de styles.css para poder sumarlo a cualquier página:
   <link rel="stylesheet" href="animaciones.css"> + <script src="animaciones.js" defer></script>
   Todo se apaga con "reducir movimiento" del sistema.
   ========================================================================== */

:root { --ease-salto: cubic-bezier(.2, .8, .2, 1); }

/* ---------- Tarjetas que se levantan ---------- */
.tarjeta, .extra, .modulos article, .caso, .pilares li, .mq-kpi, .agente__lista li, .faq details, .pregunta, .solucion {
  transition: transform .35s var(--ease-salto), box-shadow .35s var(--ease-salto), border-color .3s, background-color .3s;
}

/* Servicios */
.tarjeta { position: relative; }
.tarjeta img { transition: transform .6s var(--ease-salto), filter .4s; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(10, 43, 55, .13); }
.tarjeta:hover img { transform: scale(1.04); }
.tarjeta { overflow: hidden; }
.tarjeta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--naranja); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-salto); }
.tarjeta:hover::after { transform: scaleX(1); }
.tarjeta h3 { transition: color .3s; }
.tarjeta:hover h3 { color: var(--naranja); }

.extra { position: relative; overflow: hidden; }
.extra:hover { transform: translateY(-3px); background-color: #dde9ec; box-shadow: 0 14px 30px rgba(10, 43, 55, .1); }

/* Tarjetas oscuras (NaIA): brillo que sigue al mouse */
.modulos article, .pilares li, .agente { position: relative; overflow: hidden; }
.modulos article::before, .pilares li::before, .agente::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(243, 154, 95, .18), transparent 65%);
}
.modulos article:hover::before, .pilares li:hover::before, .agente:hover::before { opacity: 1; }
.modulos article:hover { transform: translateY(-3px); border-color: rgba(243, 154, 95, .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.modulos article h3 { transition: transform .35s var(--ease-salto); }
.modulos article:hover h3 { transform: translateX(3px); }
.pilares li:hover { transform: translateY(-2px); background: rgba(4, 22, 29, .9); }

/* Industrias */
.industria { transition: transform .4s var(--ease-salto), box-shadow .4s; }
.industria:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(10, 43, 55, .24); }
.industria img { transition: transform .8s var(--ease-salto), filter .5s; }
.industria:hover img { transform: scale(1.05); }
.industria div { transition: transform .45s var(--ease-salto); }
.industria:hover div { transform: translateY(-3px); }
.industria h3 { position: relative; display: inline-block; }
.industria h3::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2.5px; border-radius: 2px; background: var(--naranja-claro); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-salto); }
.industria:hover h3::after { transform: scaleX(1); }

/* Diagnóstico */
.pregunta:hover { border-color: #c9d3d8; box-shadow: 0 8px 20px rgba(10, 43, 55, .06); }
.sino span, .normas span { transition: all .2s var(--ease-salto); }
.sino label:hover span, .normas label:hover span { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(12, 74, 99, .12); }
.sino input:checked + span, .normas input:checked + span { animation: marca .35s var(--ease-salto); }
@keyframes marca { 50% { transform: scale(1.04); } }
.semaforo__luz { animation: latido 2.2s ease-in-out infinite; }
.semaforo[data-nivel="vacio"] .semaforo__luz { animation: none; }
@keyframes latido { 50% { box-shadow: 0 0 0 9px transparent, 0 0 0 4px currentColor; } }
.solucion:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(12, 74, 99, .15); }
.solucion:not([hidden]) { animation: entra .5s var(--ease-salto); }

/* Casos y preguntas */
.caso:hover { transform: translateY(-3px); border-color: var(--naranja-claro); box-shadow: 0 16px 34px rgba(10, 43, 55, .1); }
.faq details:hover { border-color: #c9d3d8; transform: translateX(2px); }
.faq details[open] { border-color: var(--petroleo); box-shadow: 0 10px 24px rgba(12, 74, 99, .08); }
.faq details[open] p { animation: entra .35s var(--ease-salto); }
.faq summary::after { transition: transform .3s var(--ease-salto); }
.faq details[open] summary::after { transform: rotate(180deg); }

/* Agente NaIA */
.agente__lista li:hover { transform: translateX(3px); }
.agente__lista li::before { transition: transform .3s var(--ease-salto), background .3s; }
.agente__lista li:hover::before { transform: scale(1.1); background: rgba(243, 154, 95, .35); }
.chat { transition: transform .4s var(--ease-salto), box-shadow .4s; }
.chat:hover { transform: translateY(-4px); box-shadow: 0 30px 64px rgba(0, 0, 0, .38); }
.agente-logo::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(243, 154, 95, .45); animation: onda 3.2s ease-out infinite; }
@keyframes onda { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }

/* Video y tablero */
.video-naia, .maqueta { transition: transform .5s var(--ease-salto), box-shadow .5s; }
.video-naia:hover { transform: translateY(-3px); box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.mq-kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(10, 43, 55, .12); }
.mq-vivo i { animation: latido-vivo 1.6s ease-in-out infinite; }
@keyframes latido-vivo { 50% { opacity: .35; transform: scale(.7); } }

/* Burbuja del agente: flota */
.burbuja { animation: aparece .6s .6s both, flota 5s 1.4s ease-in-out infinite; transition: box-shadow .3s; }
.burbuja:hover { animation-play-state: paused; box-shadow: 0 26px 60px rgba(6, 30, 40, .3); }
@keyframes flota { 50% { transform: translateY(-5px); } }

/* ---------- Botones ---------- */
.btn { position: relative; overflow: hidden; }
.btn--naranja::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s var(--ease-salto); pointer-events: none; }
.btn--naranja:hover::after { left: 130%; }
.btn--naranja:hover { box-shadow: 0 10px 24px rgba(194, 65, 12, .35); }
.btn--borde:hover, .btn--claro:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.link-flecha { transition: transform .3s var(--ease-salto); }
.link-flecha:hover { transform: translateX(3px); }

/* ---------- Títulos de sección: rayita que se dibuja al aparecer ---------- */
.eyebrow { position: relative; display: inline-block; }
.eyebrow::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: currentColor; opacity: .5; transform: scaleX(0); transform-origin: left; transition: transform .8s .2s var(--ease-salto); }
.anim-visto .eyebrow::after, .eyebrow.anim-visto::after { transform: scaleX(1); }

/* ---------- Aparición al bajar (solo si el script está activo) ---------- */
.anim-js [data-aparece] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-salto), transform .8s var(--ease-salto); transition-delay: var(--retraso, 0s); }
.anim-js [data-aparece].anim-visto { opacity: 1; transform: none; }
.anim-js [data-aparece="izq"] { transform: translateX(-20px); }
.anim-js [data-aparece="der"] { transform: translateX(20px); }
.anim-js [data-aparece="zoom"] { transform: scale(.96); }

/* Hero: entrada en cascada al cargar */
.anim-js .hero__chip, .anim-js .hero h1, .anim-js .hero__fila, .anim-js .pilares, .anim-js .hero__captura { animation: entra .9s var(--ease-salto) both; }
.anim-js .hero h1 { animation-delay: .1s; }
.anim-js .hero__fila { animation-delay: .25s; }
.anim-js .pilares { animation-delay: .4s; }
.anim-js .hero__captura { animation-delay: .55s; }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } }



/* ---------- Páginas por servicio ---------- */
.bloque, .otro, .autodiag, .lista-check li, .pagina-hero__img, .con-naia__img { transition: transform .35s var(--ease-salto), box-shadow .35s var(--ease-salto), border-color .3s, background-color .3s; }
.bloque { position: relative; overflow: hidden; }
.bloque::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--naranja); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-salto); }
.bloque:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(10, 43, 55, .12); }
.bloque:hover::after { transform: scaleX(1); }
.bloque h3 { transition: color .3s; }
.bloque:hover h3 { color: var(--naranja); }
.bloque__num { transition: transform .35s var(--ease-salto), color .3s; transform-origin: left; }
.bloque:hover .bloque__num { transform: scale(1.06); color: var(--naranja); }
.seccion--oscura .bloque:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.otro { position: relative; overflow: hidden; }
.otro:hover { transform: translateY(-4px); border-color: var(--naranja-claro); }
.otro .kicker::after { display: inline-block; transition: transform .3s var(--ease-salto); }
.otro:hover .kicker::after { transform: translateX(4px); }
.autodiag:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(10, 43, 55, .1); border-color: #c9d3d8; }
.lista-check li:hover { transform: translateX(3px); }
.lista-check li::before { transition: transform .3s var(--ease-salto), background .3s; }
.lista-check li:hover::before { transform: scale(1.1); background: #f8d6bf; }
.pagina-hero__img img, .con-naia__img img { transition: transform .8s var(--ease-salto); }
.pagina-hero__img:hover img, .con-naia__img:hover img { transform: scale(1.04); }
.pagina-hero__img:hover { box-shadow: 0 36px 80px rgba(0, 0, 0, .45); }
/* Encabezado de cada página: entrada en cascada al cargar */
.anim-js .pagina-hero .migas, .anim-js .pagina-hero h1, .anim-js .pagina-hero__bajada, .anim-js .pagina-hero .hero__ctas, .anim-js .pagina-hero__img { animation: entra .9s var(--ease-salto) both; }
.anim-js .pagina-hero h1 { animation-delay: .08s; }
.anim-js .pagina-hero__bajada { animation-delay: .2s; }
.anim-js .pagina-hero .hero__ctas { animation-delay: .32s; }
.anim-js .pagina-hero__img { animation-delay: .4s; }

@media (hover: none) {
  .tarjeta:hover, .extra:hover, .industria:hover, .modulos article:hover, .caso:hover, .chat:hover, .bloque:hover, .otro:hover, .autodiag:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .anim-js [data-aparece] { opacity: 1 !important; transform: none !important; }
  .burbuja, .agente-logo::after, .semaforo__luz, .mq-vivo i { animation: none !important; }
}