/* =========================================================
   EXPENIC — animaciones
   Se carga después de expenic.css. Todo se desactiva con
   prefers-reduced-motion.
   ========================================================= */

/* Barra de progreso de lectura */
.progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; z-index: 2000; background: linear-gradient(90deg, #3b82f6, #12b5a6); border-radius: 0 4px 4px 0; transition: width 0.1s linear; }

/* Header que se compacta al bajar */
.site-header { transition: box-shadow 0.3s ease; }
.site-header.scrolled { box-shadow: 0 8px 28px rgba(13, 36, 97, 0.12); }
.site-header .wrap { transition: height 0.3s ease; }
.site-header.scrolled .wrap { height: 66px; }
@media (max-width: 860px) { .nav { top: calc(100% + 6px); } }

/* Entradas al hacer scroll (solo si hay JavaScript) */
html.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s); }
html.js .reveal.reveal-left { transform: translateX(-48px); }
html.js .reveal.reveal-right { transform: translateX(48px); }
html.js .reveal.in { opacity: 1; transform: none; }

/* Hero y cabeceras: entrada al cargar */
.hero .tag, .hero .h1, .hero .lede, .hero-actions, .page-head .tag, .page-head .h1, .page-head .lede {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero .h1, .page-head .h1 { animation-delay: 0.12s; }
.hero .lede, .page-head .lede { animation-delay: 0.26s; }
.hero-actions { animation-delay: 0.4s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.hero-media { animation: pop 1.1s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(30px) scale(0.94); } to { opacity: 1; transform: none; } }

/* Etiquetas flotantes del hero */
.chip-1 { animation: float 5s ease-in-out infinite alternate; }
.chip-2 { animation: float 6s -2s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-12px); } }

/* Brillo que sigue al cursor sobre el hero y las cabeceras */
.hero::after, .page-head::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(420px circle at var(--hx, 75%) var(--hy, 25%), rgba(255, 255, 255, 0.14), transparent 65%);
}

/* Esferas flotantes de fondo */
.orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(22px); }
@media (max-width: 860px) { .orb-1 { width: 170px; height: 170px; right: -40px; } .orb-2 { display: none; } }
.orb-1 { width: 260px; height: 260px; right: 6%; top: 12%; background: radial-gradient(circle at 30% 30%, rgba(111, 177, 255, 0.55), rgba(111, 177, 255, 0)); animation: drift 14s ease-in-out infinite alternate; }
.orb-2 { width: 180px; height: 180px; left: 42%; bottom: 18%; background: radial-gradient(circle at 30% 30%, rgba(18, 181, 166, 0.5), rgba(18, 181, 166, 0)); animation: drift 11s -4s ease-in-out infinite alternate-reverse; }
.orb-3 { width: 120px; height: 120px; left: 6%; top: 16%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)); animation: drift 9s -2s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(34px, -40px) scale(1.15); } }

/* Olas del hero */
.hero-wave { left: 0; width: 200%; animation: wave 16s linear infinite; }
.hero-wave.back { bottom: 5px; opacity: 0.4; animation-duration: 26s; animation-direction: reverse; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Botones: brillo al pasar el cursor */
.btn { position: relative; overflow: hidden; }
.btn::after {
    content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); transition: left 0.7s ease;
}
.btn:hover::after { left: 150%; }
.hero-actions .btn:not(.btn-ghost) { animation: rise 0.9s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both, glow 2.8s 1.6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); } 50% { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), 0 0 0 10px rgba(255, 255, 255, 0.16); } }

/* Tarjetas: foco de luz que sigue al cursor y movimiento del icono */
.card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 111, 237, 0.13), transparent 60%);
}
.card:hover::after { opacity: 1; }
.mvv.dark::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 60%); }
.icon-tile { transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.card:hover .icon-tile { transform: rotate(-8deg) scale(1.1); }
.stat { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.stat:hover { transform: translateY(-6px); }
.checks .tick { transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; }
.checks li:hover .tick { transform: scale(1.2) rotate(8deg); background: var(--teal); color: #fff; }
.q-list li { transition: transform 0.3s ease; }
.q-list li:hover { transform: translateX(8px); }

/* Fotos: marco que se desplaza */
.photo::before { transition: inset 0.5s ease; }
.photo:hover::before { inset: 14px -14px -14px 14px; }
.photo img { will-change: transform; }

/* Iconos que flotan */
.panel .icon-tile, .q-banner .icon-tile { animation: bob 3.6s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-6px) rotate(-4deg); } to { transform: translateY(8px) rotate(4deg); } }

/* Franja que se desplaza */
.marquee { overflow: hidden; padding: 30px 0 6px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: scroll-x 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex: none; }
.marquee-group span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -0.02em; color: var(--cobalt); white-space: nowrap; }
.marquee-group span::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, var(--teal)); flex: none; }
.marquee-group span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--cobalt); }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Cómo trabajamos */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.steps::before {
    content: ''; position: absolute; top: 31px; left: 12%; right: 12%; height: 3px; border-radius: 3px;
    background: repeating-linear-gradient(90deg, var(--blue) 0 10px, transparent 10px 20px); opacity: 0.45;
}
.step { text-align: center; position: relative; padding: 0 6px; }
.step-num {
    width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
    font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: #fff;
    background: linear-gradient(135deg, #3b82f6, var(--cobalt)); box-shadow: 0 10px 24px rgba(27, 63, 139, 0.3), 0 0 0 8px #fff;
    transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.step:hover .step-num { transform: scale(1.14) rotate(-6deg); }
.step:nth-child(2) .step-num { background: linear-gradient(135deg, #3fd6c7, var(--teal)); }
.step:nth-child(3) .step-num { background: linear-gradient(135deg, #8b8bf0, var(--indigo)); }
.step:nth-child(4) .step-num { background: linear-gradient(135deg, #4fd0ee, var(--cyan)); }
.step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.97rem; margin: 0; }
@media (max-width: 860px) {
    .steps { grid-template-columns: 1fr; gap: 30px; }
    .steps::before { display: none; }
    .step { text-align: left; display: grid; grid-template-columns: 64px 1fr; gap: 6px 20px; }
    .step-num { margin: 0; grid-row: span 2; }
}

/* Preguntas frecuentes */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 20px; margin-bottom: 14px; transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.faq details:hover { box-shadow: var(--shadow); }
.faq details[open] { border-color: var(--blue); box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+'; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
    background: var(--sky); color: var(--cobalt); transition: transform 0.35s ease, background 0.3s ease, color 0.3s ease;
}
.faq details[open] summary::after { transform: rotate(135deg); background: var(--cobalt); color: #fff; }
.faq .faq-a { padding: 0 24px 22px; color: var(--muted); animation: faq-in 0.4s ease both; }
.faq .faq-a p { margin: 0; }
.faq .faq-a a { color: var(--blue); font-weight: 600; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Botón de WhatsApp: entrada */
.wa-float { animation: pop 0.8s 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Respeto a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .progress, .orb, .marquee-track, .hero-wave, .chip, .panel .icon-tile, .q-banner .icon-tile { animation: none !important; }
    html.js .reveal { opacity: 1; transform: none; }
}

/* Evita desplazamiento horizontal por elementos animados */
body { overflow-x: clip; }