/* Archivo: effects.css
   Funcion: Efectos visuales generales del sitio publico (animaciones al escrolear,
   micro-interacciones de botones/tarjetas, navbar que reacciona al scroll). Vive aparte
   del resto del CSS a proposito, igual que hero.css, para poder ajustar los efectos sin
   tocar el resto del sitio.

   Importante: los efectos de :hover solo se activan en dispositivos que realmente tienen
   raton (@media (hover: hover)), para que en movil/tablet un dedo no deje un boton o una
   tarjeta "atascados" en estado hover tras tocarlos. */

/* ---------- Aparicion de contenido al escrolear ---------- */
/* La clase .reveal la añade el JS (initScrollReveal en app.js) a elementos ya visibles
   por defecto: si el JS no llega a ejecutarse por cualquier motivo, el contenido nunca
   se queda oculto. */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variantes que entran desde un lado (para layouts de dos columnas, ej. puntos de venta):
   se marcan a mano en el HTML de la pagina, no las añade el JS automaticamente. */
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal-left {
    transform: translateX(-32px);
}

.reveal-right {
    transform: translateX(32px);
}

.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- Navbar: mas compacta y con sombra al escrolear ---------- */
.navbar {
    transition: box-shadow 0.4s var(--ease-smooth);
}

.navbar-inner {
    transition: padding 0.4s var(--ease-smooth);
}

.navbar.is-scrolled {
    box-shadow: var(--shadow-md);
}

.navbar.is-scrolled .navbar-inner {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* ---------- Botones: feedback al presionar + brillo al pasar el raton ---------- */
.btn {
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.btn:active {
    transform: translateY(0) scale(0.96);
}

.btn-primary,
.btn-whatsapp,
.btn-secondary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-primary::after,
.btn-whatsapp::after,
.btn-secondary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}

@media (hover: hover) {
    /* Antes se levantaba el boton con translateY: si el raton quedaba justo en el borde
       inferior, el boton se movia fuera del cursor, el hover se desactivaba, el boton volvia
       a bajar, el cursor volvia a quedar dentro... y asi en bucle (efecto "vibracion"). Una
       sombra no cambia la caja del elemento, asi que no puede disparar ese bucle. */
    .btn:hover {
        box-shadow: var(--shadow-md);
    }

    .btn-primary:hover::after,
    .btn-whatsapp:hover::after,
    .btn-secondary:hover::after {
        left: 130%;
        transition: left 0.85s var(--ease-smooth);
    }

    .filter-chip:hover:not(.is-active) {
        background: var(--color-gray-light);
    }

    .navbar-lang a:hover:not(.is-active) {
        background: var(--color-gray-soft);
        color: var(--color-primary-dark);
    }
}

/* ---------- Tarjetas ---------- */
.announcement-card:active {
    transform: scale(0.98);
}

/* ---------- Tarjetas: relieve + zoom de imagen al pasar el raton ---------- */
@media (hover: hover) {
    .card:hover,
    .announcement-card:hover {
        box-shadow: var(--shadow-lg);
    }

    .card:hover {
        border-top-color: var(--color-primary);
    }

    .expert-card,
    .store-spotlight-info,
    .info-box,
    .price-sheet,
    .value-card,
    .value-chip {
        transition: box-shadow var(--transition);
    }

    .expert-card:hover,
    .value-card:hover {
        box-shadow: var(--shadow-lg);
    }

    .value-chip:hover {
        box-shadow: var(--shadow-md);
    }

    .store-spotlight-info:hover {
        box-shadow: var(--shadow-lg);
    }

    .card-media img,
    .announcement-card .media img {
        transition: transform 0.5s var(--ease-smooth);
    }

    .card:hover .card-media img,
    .announcement-card:hover .media img {
        transform: scale(1.06);
    }
}

/* ---------- FAQ: resalte sutil al pasar el raton por la pregunta ---------- */
@media (hover: hover) {
    .faq-question {
        transition: background var(--transition);
    }

    .faq-question:hover {
        background: var(--color-gray-soft);
    }

    .history-arrow:hover:not(:disabled) {
        background: var(--color-primary);
        color: var(--color-white);
    }

    .footer-social a:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
}

/* ---------- Foco de teclado bien visible (accesibilidad + coherente con el resto) ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.card:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* ---------- Respeta a quien ha pedido reducir el movimiento en su sistema ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right {
        opacity: 1 !important;
        transform: none !important;
    }
}