/* CAREIZA — Custom styles that Tailwind CDN doesn't handle */

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

.industrial-grid {
    background-image: radial-gradient(#00000010 1px, transparent 1px);
    background-size: 32px 32px;
}

.metallic-texture {
    background-image: linear-gradient(135deg,
        rgba(255,255,255,0.06) 25%, transparent 25%,
        transparent 50%, rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.06) 75%, transparent 75%, transparent);
    background-size: 4px 4px;
}

/* 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: #1e2328;
}

/* 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;
}