/* Valverde Design House — Custom styles that Tailwind CDN doesn't handle */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Reveal on scroll — igual que Stitch */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Compensar header fixed */
main { padding-top: 80px; }

/* Smooth open/close for FAQ details */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

html { scroll-behavior: smooth; }

/* Gallery image placeholder when file missing */
.gallery-item {
    background-color: #E5E0D8;
}

/* Form input reset for consistent cross-browser look */
input, select, textarea {
    -webkit-appearance: none;
    appearance: none;
}

/* ── Animaciones de scroll ────────────────────────────────────────────────── */
/*    Solo si el usuario no pidió movimiento reducido (accesibilidad)          */
@media (prefers-reduced-motion: no-preference) {

    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.55s ease, transform 0.55s ease;
    }
    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Cards en grid aparecen escalonadas */
    .reveal-stagger > * {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .reveal-stagger.is-visible > * {
        opacity: 1;
        transform: translateY(0);
    }
    .reveal-stagger.is-visible > *:nth-child(1) { transition-delay:   0ms; }
    .reveal-stagger.is-visible > *:nth-child(2) { transition-delay:  70ms; }
    .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
    .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
    .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
    .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }
    .reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 420ms; }
    .reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 490ms; }
}

/* ── Validación de formulario ─────────────────────────────────────────────── */
.field-invalid {
    box-shadow: 0 0 0 2px #f87171 !important;
}

.field-error-msg {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 600;
    color: #fca5a5;
    letter-spacing: 0.03em;
}