/* Landing (templates/inicio.html) — estados iniciales de los efectos de js/landing-fx.js.
   Todo cuelga de html.fx: sin JS o con prefers-reduced-motion la clase no
   está y la página queda estática (el ejemplo de uso, video con controles). */

/* Lo que entra con resorte arranca invisible; el JS escribe opacity y
   transform cuadro a cuadro y, al asentarse, limpia el estilo inline. */
html.fx .landing-page .hero-section .lead,
html.fx .landing-page .hero-section .btn-landing,
html.fx .landing-page .hero-icon-container,
html.fx .landing-page .section-title + p,
html.fx .landing-page .feature-card,
html.fx .landing-page .pricing-card,
html.fx .landing-page .benefit-item,
html.fx .landing-page .faq-panel .accordion-item,
html.fx .landing-page .cta-panel .lead,
html.fx .landing-page .cta-panel .btn-landing,
html.fx .footer > .container > .row:first-child > [class*="col-"],
html.fx .whatsapp-float {
    opacity: 0;
}

/* Titulares cinéticos: cada palabra sube desde atrás de una máscara.
   El padding compensa los descendentes (g, p, q) que la máscara cortaría. */
.fx-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}
.fx-wi {
    display: inline-block;
    will-change: transform;
}
html.fx .fx-split .fx-wi { transform: translateY(110%); }

/* El latido del ícono del hero lo maneja el JS (un golpe que resuena),
   así que se apaga su animación CSS de keyframes. */
html.fx .hero-main-icon { animation: none; display: inline-block; }

/* La marca del hero viaja al logo de la barra al hacer scroll. */
html.fx .hero-icon-container { will-change: transform, opacity; transform-origin: center; }
html.fx .landing-navbar .landing-logo-text { display: inline-block; }

/* Botones y tarjetas reciben un anillo de escala al tocarlos. */
html.fx .btn-landing,
html.fx .card-action,
html.fx .feature-icon,
html.fx .benefit-icon { will-change: transform; }
html.fx .whatsapp-float:hover { transform: none; }

/* El transform lo escribe el JS con resortes: las transiciones CSS de la
   landing (base.html) se limitan a color y sombra para no suavizarlo dos veces,
   y los :hover que movían por CSS quedan en manos del JS. */
html.fx .feature-card,
html.fx .pricing-card,
html.fx .btn-landing,
html.fx .btn-nav-landing {
    transition-property: box-shadow, background-color, border-color, color;
}
html.fx .feature-card:hover,
html.fx .pricing-card:hover,
html.fx .btn-primary-landing:hover,
html.fx .btn-secondary-landing:hover,
html.fx .btn-nav-landing:hover {
    transform: none;
}

/* La barra queda fija arriba (el sticky-top de la barra sola no actúa porque
   su <header> mide lo mismo que ella): así el logo está siempre en cuadro y
   la marca del hero tiene dónde posarse. La marca viaja por encima. */
html.fx .landing-page > header {
    position: sticky;
    top: 0;
    z-index: 1030;
}
/* Sólo en escritorio, donde viaja (en celular no: pasaría sobre la barra al scrollear). */
@media (min-width: 992px) {
    html.fx .hero-icon-container { position: relative; z-index: 1031; }
}

/* La línea bajo cada título se dibuja desde el centro (--fx-line la escribe
   el JS cuando terminan de subir las palabras). */
html.fx .section-title.fx-split::after {
    transform: translateX(-50%) scaleX(var(--fx-line, 0));
}

/* Brillo que sigue al cursor dentro de cada tarjeta. Arranca afuera, arriba. */
html.fx .landing-page .feature-card {
    background-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, -40%),
                                      rgba(58, 123, 213, 0.10), transparent 70%);
}

/* Halo del hero que persigue al mouse (--hx/--hy), sobre los dos halos fijos
   de la landing (base.html). */
html.fx .page-hero {
    background: radial-gradient(520px circle at var(--hx, 68%) var(--hy, 45%), rgba(0, 210, 255, 0.10), transparent 70%),
                radial-gradient(ellipse 40% 60% at 68% 45%, rgba(0, 210, 255, 0.12), transparent 70%),
                radial-gradient(ellipse 30% 40% at 25% 35%, rgba(58, 123, 213, 0.10), transparent 70%);
}

/* Barra de progreso de lectura, pegada al borde inferior del header. */
.fx-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/* ── Ejemplo de uso: el escenario de #discapacidad ───────────────────────
   Reproduce solo al entrar en pantalla, sin controles. Las pestañas cambian
   qué video se ve. Sin
   html.fx (JS caído o movimiento reducido) es un video común con controles. */
.demo-block { margin-top: 0; }

.demo-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--landing-border);
    border-radius: 999px;
    background: var(--landing-surface);
}
.demo-tab {
    border: 0;
    background: transparent;
    color: #555;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.demo-tab:hover { color: var(--primary); }
.demo-tab.is-active { background: var(--gradient-primary); color: #fff; }

.demo-title { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.15; margin-bottom: 0.75rem; }
.demo-lead { margin-bottom: 1.25rem; }
.demo-panel .card-text { margin-bottom: 0; }

.demo-steps { margin: 0; }
.demo-steps li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.4rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 10px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.35s ease, background-color 0.25s ease;
}
.demo-steps li:hover,
.demo-steps li:focus-visible { background: var(--landing-accent-soft); opacity: 0.85; outline: none; }
.demo-steps li.is-done { opacity: 0.7; }
.demo-steps li.is-active { opacity: 1; }
.demo-steps strong { display: block; font-size: 1rem; }
.demo-steps span:not(.demo-num) { display: block; font-size: 0.88rem; color: var(--bs-secondary-color, #6c757d); }
.demo-num {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    border: 2px solid currentColor;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.demo-steps li.is-active .demo-num,
.demo-steps li.is-done .demo-num {
    color: #fff;
    background: var(--gradient-primary);
    border-color: transparent;
}

/* El video no es un reproductor: sin marco ni sombra, sus bordes se
   desvanecen y el multiply le presta el tono del fondo de la página. */
.demo-stage { position: relative; }
.demo-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: opacity 0.22s ease;
    -webkit-mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 60%, transparent 100%);
            mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 60%, transparent 100%);
}
.demo-stage.is-swapping .demo-video { opacity: 0; }
.demo-progress {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 2%;
    height: 3px;
    border-radius: 3px;
    background: var(--landing-border);
    overflow: hidden;
}
.demo-progress span {
    display: block;
    height: 100%;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left center;
}
html:not(.fx) .demo-progress { display: none; }
html:not(.fx) .demo-video { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; border-radius: 12px; }
html.fx .demo-tabs,
html.fx .demo-panel,
html.fx .demo-stage { opacity: 0; }

/* Celular: primero el video, a todo el ancho; debajo pestañas y pasos. */
@media (max-width: 991.98px) {
    .demo-block > .col-lg-8 { order: -1; }
    .demo-stage { margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem)); }
    .demo-video {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    }
    .demo-lead { display: none; }
    /* las tres pestañas en una sola línea, repartidas a lo ancho */
    .demo-tabs { display: flex; flex-wrap: nowrap; width: 100%; }
    .demo-tab { flex: 1 1 auto; padding: 0.4rem 0.5rem; font-size: 0.8rem; white-space: nowrap; }
}