/* ─────────────────────────────────────────────────────────────────────────
   E2 Visa Justice — Custom Styles
   Complementa la configuración de Tailwind de includes/head.php
   ───────────────────────────────────────────────────────────────────────── */

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}

/* Glass card — usado en sections/factors.php */
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(201, 197, 203, 0.3);
}

/* Scroll suave para anclas de navegación */
html {
    scroll-behavior: smooth;
}

/* Offset del scroll para compensar la nav fija */
[id] {
    scroll-margin-top: 88px;
}

/* ── Formulario ──────────────────────────────────────────────────────────── */

/* Honeypot: invisible para humanos */
.hp-field {
    display: none !important;
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

/* Focus en inputs del formulario — usa el gold del design system */
input:focus,
textarea:focus,
select:focus {
    border-color: #E8B806 !important;
    outline: none;
}

/* Fecha — normaliza el color del placeholder en date inputs */
input[type="date"]:not(:valid) {
    color: #48464b;
}

/* ── Animaciones de feedback del formulario ──────────────────────────────── */

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

#contact-form [role="alert"] {
    animation: slideDown 0.25s ease-out;
}

/* ── Mobile menu ─────────────────────────────────────────────────────────── */

#mobile-menu {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

#mobile-menu.open {
    max-height: 600px;
    opacity: 1;
}

/* ── Process section animations ─────────────────────────────────────────── */

/* Estado inicial: oculto y desplazado hacia abajo */
.process-step {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Estado final: visible */
.process-step.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Línea horizontal: se dibuja de izquierda a derecha */
#process-line {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

#process-line.animated {
    transform: scaleX(1);
}

/* Pulso en el cuadrado numerado al aparecer */
@keyframes stepPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(232, 184, 6, 0.2); }
    100% { transform: scale(1); box-shadow: none; }
}

.process-number.pulse {
    animation: stepPulse 0.45s ease forwards;
}

/* ── Utilidades tipográficas ─────────────────────────────────────────────── */

/* Asegura que font-display-lg sea responsive en móvil */
@media (max-width: 768px) {
    .text-display-lg {
        font-size: 40px !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 480px) {
    .text-display-lg {
        font-size: 32px !important;
    }
}