/* =====================================================================
   Sistema de movimiento y componentes interactivos.
   Se carga DESPUÉS de app.css. Usa los tokens de :root.
   Todo el movimiento se neutraliza con prefers-reduced-motion.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Revelado al scroll  ([data-reveal])
   --------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}
[data-reveal="izquierda"] { transform: translateX(-32px); }
[data-reveal="derecha"]   { transform: translateX(32px); }
[data-reveal="escala"]    { transform: scale(0.94); }
[data-reveal="difuminado"] { filter: blur(8px); transition: opacity 0.7s, transform 0.7s, filter 0.7s; }
[data-reveal].es-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ---------------------------------------------------------------------
   2. Barra de progreso de scroll
   --------------------------------------------------------------------- */
.barra-progreso {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--gold), var(--magenta));
    z-index: 110;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   3. Modales
   --------------------------------------------------------------------- */
body.modal-abierto { overflow: hidden; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2rem);
    background: color-mix(in srgb, var(--ink) 58%, transparent);
    backdrop-filter: blur(7px);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.modal[hidden] { display: none; }
.modal.esta-abierto { opacity: 1; }

.modal__panel {
    position: relative;
    width: min(580px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--porcelain);
    border: 1px solid var(--line);
    border-radius: var(--radio-xl);
    box-shadow: var(--sombra-alta);
    padding: clamp(1.6rem, 4vw, 2.6rem);
    transform: translateY(22px) scale(0.96);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease;
}
.modal--ancho .modal__panel { width: min(840px, 100%); }
.modal.esta-abierto .modal__panel { transform: none; opacity: 1; }

.modal__cerrar {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--ink);
    transition: background-color var(--transicion), transform var(--transicion);
}
.modal__cerrar:hover { background: var(--porcelain-2); transform: rotate(90deg); }

/* ---------------------------------------------------------------------
   4. Acordeón (FAQ)
   --------------------------------------------------------------------- */
.acordeon__item {
    border-bottom: 1px solid var(--line);
}
.acordeon__boton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: var(--paso-1);
    color: var(--ink);
}
.acordeon__icono {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    position: relative;
    transition: transform var(--transicion);
}
.acordeon__icono::before,
.acordeon__icono::after {
    content: "";
    position: absolute;
    inset: 50% 4px auto 4px;
    height: 2px;
    background: var(--magenta);
    transition: transform var(--transicion);
}
.acordeon__icono::after { transform: rotate(90deg); }
.acordeon__item.esta-abierto .acordeon__icono::after { transform: rotate(0); }
.acordeon__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}
.acordeon__item.esta-abierto .acordeon__panel { grid-template-rows: 1fr; }
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p {
    padding-bottom: 1.3rem;
    color: var(--texto-tenue);
    max-width: 62ch;
}

/* ---------------------------------------------------------------------
   5. Filtros (chips) + items filtrables
   --------------------------------------------------------------------- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.filtro-chip {
    font-family: var(--fuente-mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.55rem 1.1rem;
    border-radius: 100px;
    border: 1.5px solid var(--line);
    background: var(--white);
    color: var(--ink-soft);
    cursor: pointer;
    transition: all var(--transicion);
}
.filtro-chip:hover { border-color: var(--marca, var(--plum)); color: var(--ink); }
.filtro-chip.es-activo {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}
[data-grupo].esta-oculto {
    display: none;
}
[data-grupo] {
    animation: aparecer-item 0.5s both;
}

/* ---------------------------------------------------------------------
   6. Marquee infinito
   --------------------------------------------------------------------- */
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__pista {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    width: max-content;
    animation: desplazar 30s linear infinite;
}
.marquee:hover .marquee__pista { animation-play-state: paused; }

/* ---------------------------------------------------------------------
   7. Tooltip de WhatsApp
   --------------------------------------------------------------------- */
.wsp-tip {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: calc(clamp(1rem, 3vw, 2rem) + 4rem);
    z-index: 91;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.7rem 1rem;
    box-shadow: var(--sombra-alta);
    font-size: 0.85rem;
    max-width: 220px;
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 0.4s, transform 0.4s;
}
.wsp-tip.es-visible { opacity: 1; transform: none; }
.wsp-tip::after {
    content: "";
    position: absolute;
    right: 26px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: var(--white);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transform: rotate(45deg);
}

/* ---------------------------------------------------------------------
   8. Keyframes
   --------------------------------------------------------------------- */
@keyframes desplazar { to { transform: translateX(-50%); } }
@keyframes dibujar-trazo { to { stroke-dashoffset: 0; } }
@keyframes aparecer-item { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes latido-wsp {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, #25d366 60%, transparent); }
    70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes gradiente-mov {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes brillo {
    100% { transform: translateX(220%); }
}
@keyframes spark-parpadeo {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.82); }
}
@keyframes subir-entrada {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
}

/* Utilidades de animación continua */
.anim-flotar { animation: flotar 6s ease-in-out infinite; }
.anim-spark { animation: spark-parpadeo 2.6s ease-in-out infinite; }
.wsp { animation: latido-wsp 2.6s infinite; }

/* ---------------------------------------------------------------------
   9. Movimiento reducido: desactivar todo
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
    .marquee__pista,
    .anim-flotar,
    .anim-spark,
    .wsp { animation: none !important; }
    [data-grupo] { animation: none !important; }
}