/* ── Scrollbar invisible (quita la línea vertical derecha) ── */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(174, 220, 129, 0.5) transparent;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(174, 220, 129, 0.55);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(140, 200, 80, 0.8);
}

/* ── Parallax hero ─────────────────────────────── */
#header {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);  /* fuerza capa GPU propia → borde derecho limpio */
}

/* Capa parallax: tinte verde que se mueve más lento.
    El degradado verde→blanco lo sigue dando .header en styles.css,
    así el corte inferior siempre queda perfecto. */
#hero-parallax-bg {
    position: absolute;
    inset: -80px 0 0 0;
    background: radial-gradient(ellipse 90% 70% at 60% 10%,
        rgba(140, 200, 80, 0.30) 0%,
        transparent 70%);
    will-change: transform;
    z-index: 0;
    pointer-events: none;
}

/* El contenido del header queda por encima del fondo */
#dynamicContainer {
    position: relative;
    z-index: 1;
}

/* ── Animaciones de entrada del hero ──────────── */
@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Título principal */
#dynamicContainer .h2-large {
    opacity: 0;
    animation: hero-fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.1s;
}

/* Párrafo subtítulo */
#dynamicContainer .p-large {
    opacity: 0;
    animation: hero-fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.28s;
}

/* Badges Google Play / App Store */
#dynamicContainer .flex.items-center.gap-3 {
    opacity: 0;
    animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.46s;
}

/* Flotación suave del móvil cuando no hay scroll */
@keyframes ok-float {
    0%,  100% { transform: translateY(0px);    }
    50%        { transform: translateY(-14px);  }
}
.hero-float {
    animation: ok-float 4.5s ease-in-out infinite;
    will-change: transform;
}
/* Pausa la flotación mientras se hace scroll (se maneja en JS) */
.hero-float-paused {
    animation-play-state: paused;
}

/* ══════════════════════════════════════════════════════════
    Cards-1 — Entrada scroll + hover dinámico
    ══════════════════════════════════════════════════════════ */

/* Estado inicial (invisible, desplazadas hacia abajo) */
.cards-1 .card {
    opacity: 0;
    transform: translateY(52px);
    will-change: transform, opacity, box-shadow;
}

/* Cuando el IntersectionObserver las hace visibles */
.cards-1 .card.card-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity    0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform  0.65s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.35s ease;
}

/* Hover: sube, sombra verde, fondo más vivo */
.cards-1 .card.card-visible:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 28px 52px rgba(70, 140, 20, 0.28);
    background-color: rgba(148, 213, 90, 1);
}

/* Icono: rebote con ligera rotación al hacer hover */
.cards-1 .card-image img {
    transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cards-1 .card.card-visible:hover .card-image img {
    transform: scale(1.22) rotate(-8deg);
}

/* Título de la sección de funciones: parallax de entrada */
#features h4 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#features h4.features-title-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Mosaico de iconos – fondo global (toda la landing) ── */
#page-icons {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease 0.5s;
}
#page-icons.loaded { opacity: 1; }
#page-icons svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* ── Mosaico de iconos – hero ──────────────────────────── */
#hero-icons {
    position: absolute;
    inset: 0;              /* exactamente el tamaño del header, sin desbordamiento */
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease 0.5s;
}
#hero-icons.loaded { opacity: 1; }
#hero-icons svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}