/* =========================================
   SCROLL REVEAL ANIMATIONS
   Agrega este CSS al final de tu style.css
   ========================================= */

/* ── Estado inicial: todo invisible y desplazado ── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

/* Variante: entrada desde la izquierda */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Variante: entrada desde la derecha */
.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Variante: escala (zoom in suave) */
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ── Estado visible: cuando Intersection Observer activa la clase ── */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
    opacity: 1;
    transform: none;
}

/* ── Delays escalonados para grupos de cards ── */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.34s; }
.reveal-delay-4 { transition-delay: 0.46s; }

/* ── Hero: animación de entrada al cargar (no scroll) ── */
@keyframes heroTitleIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroTextIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroImgIn {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to   { opacity: 1; transform: translateY(-15px) scale(1); }
}

.home-hero__title {
    animation: heroTitleIn 0.8s ease forwards;
}
.home-hero__text {
    animation: heroTextIn 0.8s ease 0.2s both;
}
.home-hero__image-wrapper {
    animation: heroImgIn 0.9s ease 0.15s both;
}

/* ── Hover mejorado para cards (complementa el reveal) ── */
.info-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, opacity 0.65s ease;
}

.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease, opacity 0.65s ease;
}

/* ── Why list items: aparecen uno a uno ── */
.why-list li {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.why-list li.visible {
    opacity: 1;
    transform: none;
}

/* ── About info cards ── */
.about-info-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.65s ease;
}

/* ── FAQ items ── */
.faq-item {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ── Contact blocks (teléfono, email, etc) ── */
.contact-block {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ── Luxury list items (service areas page) ── */
.luxury-list li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.luxury-list li.visible {
    opacity: 1;
    transform: none;
}