@import 'colors.css';

/* ============================================================
   ANIMACIONES — precio flotante, reveal al scroll, hover tarjetas
   ============================================================ */

/* ---------- PRECIO FLOTANTE (hero) ---------- */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
/* OCULTO A PEDIDO: el cartel flotante "Desde $35 /mes" no se muestra.
   Para reactivarlo, volver 'display: none' a 'inline-flex'. El markup
   sigue en section_ini.php y las claves hero_from / hero_mo en translations.json. */
.hero-price {
    display: none;
    align-items: baseline;
    gap: 7px;
    background: #fff;
    border: 1px solid #e3edf3;
    box-shadow: 0 12px 28px rgba(1, 94, 137, 0.18);
    border-radius: 14px;
    padding: 10px 20px;
    margin-bottom: 24px;
    animation: floatY 3s ease-in-out infinite;
    font-family: "MiFuente", sans-serif;
}
.hero-price-from {
    font-size: 11.5px; color: var(--pale-sky); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.6px;
}
.hero-price-amt { font-size: 27px; font-weight: 800; color: var(--azul1); line-height: 1; }
.hero-price-mo { font-size: 13px; color: var(--pale-sky); font-weight: 600; }

/* ---------- REVEAL AL SCROLL ---------- */
.reveal-init {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}
.reveal-init.reveal-in {
    opacity: 1;
    transform: none;
}

/* ---------- HOVER DE TARJETAS (más vivo) ---------- */
.why-card, .val-card, .plan-desc-card {
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.28s ease, background 0.28s ease;
}
.why-ic, .val-ic, .plan-desc-ic {
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Tarjetas sobre fondo claro: elevación + sombra */
.val-card:hover, .plan-desc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(8, 30, 53, 0.15);
}
/* Tarjetas sobre fondo azul: elevación + aclarado */
.why-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.16);
}
/* Rebote del ícono al pasar el mouse */
.val-card:hover .val-ic,
.plan-desc-card:hover .plan-desc-ic,
.why-card:hover .why-ic {
    transform: translateY(-4px) scale(1.1);
}

/* ---------- ACCESIBILIDAD: respeta "menos movimiento" ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal-init { opacity: 1 !important; transform: none !important; transition: none; }
    .hero-price { animation: none; }
}

/* ---------- Precio en móvil ---------- */
@media (max-width: 859px) {
    .hero-price { margin-left: auto; margin-right: auto; }
}