/* Explain: Premium visual effects and animations for enhanced user experience. */
/* ============================================================
   PRESENCIA DIGITAL 360° — Efectos premium, luz y profundidad
   ============================================================ */

/* ---------- Escenario de la portada ---------- */
.hero-stage {
    min-height: 76vh;
}

@media (min-width: 1024px) {
    .hero-stage {
        min-height: 86vh;
    }
}

/* ---------- Iluminación ambiental ---------- */
.hero-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(100px);
    opacity: 0.5;
    pointer-events: none;
}

.hero-glow--turquoise {
    top: -10%;
    right: -8%;
    width: 500px;
    height: 500px;
    background: var(--glow-turquoise);
}

.hero-glow--sky {
    bottom: -16%;
    left: -10%;
    width: 440px;
    height: 440px;
    background: var(--glow-sky);
}

.hero-glow--yellow {
    top: 26%;
    left: 42%;
    width: 280px;
    height: 280px;
    background: var(--glow-yellow);
    opacity: 0.26;
}

/* ---------- Entrada escalonada de la portada ---------- */
@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-rise {
    opacity: 0;
    animation: heroRise 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-rise--1 { animation-delay: 0.08s; }
.hero-rise--2 { animation-delay: 0.24s; }
.hero-rise--3 { animation-delay: 0.42s; }
.hero-rise--4 { animation-delay: 0.6s; }

/* ---------- Conectores luminosos entre dispositivos ---------- */
.hero-link {
    position: absolute;
    z-index: 5;
    height: 2px;
    border-radius: 999px;
    opacity: 0.7;
    animation: heroLinkPulse 4s ease-in-out infinite;
}

.hero-link--turquoise {
    background: linear-gradient(90deg, transparent, var(--turquoise-color), transparent);
}

.hero-link--gold {
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    animation-delay: 0.9s;
}

.hero-link--a {
    top: 30%;
    right: 20%;
    width: 32%;
    transform: rotate(20deg);
}

.hero-link--b {
    bottom: 32%;
    left: 18%;
    width: 30%;
    transform: rotate(-18deg);
}

@keyframes heroLinkPulse {
    0%, 100% { opacity: 0.28; }
    50% { opacity: 0.9; }
}

/* ---------- Degradados de texto ---------- */
.text-gradient-turquoise {
    background: linear-gradient(100deg, #8bf5ea, #14e0d0 50%, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Banda oscura animada ---------- */
.band-animated {
    position: relative;
    overflow: hidden;
    background: var(--grad-band);
    background-size: 220% 220%;
    animation: bandShift 18s ease infinite;
}

.band-animated > * {
    position: relative;
    z-index: 1;
}

.band-animated::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(720px 380px at 82% 10%, rgba(20, 224, 208, 0.22), transparent 60%);
    pointer-events: none;
}

@keyframes bandShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- Divisor de secciones ---------- */
.section-divider {
    height: 1px;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg, transparent, rgba(20, 224, 208, 0.5), rgba(255, 197, 66, 0.4), transparent);
}

/* ---------- Tarjetas con vidrio ---------- */
.glass-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transition: transform 0.35s ease, border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

.glass-card:hover {
    transform: translateY(-6px);
    border-color: rgba(20, 224, 208, 0.55);
    box-shadow: var(--shadow-glow);
}

/* ---------- Planes premium ---------- */
.plan-card--featured {
    box-shadow: 0 44px 96px -36px rgba(20, 224, 208, 0.65), 0 0 0 1px rgba(255, 197, 66, 0.3);
}

.plan-card--featured::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px 220px at 50% 0%, rgba(255, 197, 66, 0.18), transparent 70%);
    pointer-events: none;
}

/* ---------- Demostraciones premium ---------- */
.demo-card--premium {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.demo-card--premium:hover {
    border-color: rgba(20, 224, 208, 0.5);
    box-shadow: var(--shadow-glow);
}

/* ---------- Antes / después premium ---------- */
.ba-panel--after {
    box-shadow: 0 30px 64px -30px rgba(20, 224, 208, 0.7);
}

.ba-panel--before {
    box-shadow: 0 20px 46px -30px rgba(15, 23, 42, 0.5);
}

/* ---------- Realce de imágenes al pasar el mouse ---------- */
.zoom-frame {
    overflow: hidden;
}

.zoom-frame img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.zoom-frame:hover img {
    transform: scale(1.06);
}

/* ---------- Indicador de desplazamiento de la portada ---------- */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    transform: translateX(-50%);
    animation: floaty 2.6s ease-in-out infinite;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.hero-scroll:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(21, 214, 209, 0.7);
}

/* ---------- Accesibilidad: reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-rise,
    .hero-link,
    .hero-scroll,
    .band-animated,
    .float-slow,
    .float-slower {
        animation: none !important;
    }

    .hero-rise {
        opacity: 1;
    }
}