:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Cuadrícula tenue superpuesta al hero (igual que en Términos y Condiciones) */
.hero-grid {
    background-image:
        linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Iconos de línea (Lucide) del sprite de la página */
.lucide-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.custom-section-heading {
    color: #0F172A;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.step-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background-color: rgb(1 51 162 / 0.08);
    color: #0133A2;
    font-family: Montserrat, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
}

.form-label {
    display: block;
    margin-bottom: 0.375rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 500;
}

.form-hint {
    margin-top: 0.375rem;
    color: #64748B;
    font-size: 0.75rem;
    line-height: 1.1rem;
}

/* :is() sube la especificidad sobre el plugin forms de Tailwind, que se inyecta después de esta hoja */
:is(input, select, textarea).form-custom-input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid #CBD5E1;
    border-radius: 0.75rem;
    background-color: #FFFFFF;
    color: #1E293B;
    /* 16px evita que iOS haga zoom al enfocar el campo */
    font-size: 1rem;
    line-height: 1.5rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

select.form-custom-input {
    padding-right: 2.5rem;
    cursor: pointer;
}

:is(input, select, textarea).form-custom-input::placeholder {
    color: #94A3B8;
}

:is(input, select, textarea).form-custom-input:focus {
    outline: none;
    border-color: #0133A2;
    box-shadow: 0 0 0 3px rgb(1 51 162 / 0.15);
}

/* El error se marca solo después de que la persona interactúa o intenta enviar */
:is(input, select, textarea).form-custom-input:user-invalid {
    border-color: #DC2626;
}

:is(input, select, textarea).form-custom-input:user-invalid:focus {
    box-shadow: 0 0 0 3px rgb(220 38 38 / 0.15);
}

/* Tarjetas de tipo de solicitud (radio nativo oculto) */
.complaint-option {
    position: relative;
    display: block;
    padding: 1rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    background-color: #FFFFFF;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.complaint-option:has(:checked) {
    border-color: #0133A2;
    background-color: rgb(1 51 162 / 0.04);
    box-shadow: 0 0 0 1px #0133A2;
}

.complaint-option:has(:focus-visible) {
    box-shadow: 0 0 0 1px #0133A2, 0 0 0 4px rgb(1 51 162 / 0.2);
}

.complaint-option__dot {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border: 1px solid #CBD5E1;
    border-radius: 9999px;
    background-color: #FFFFFF;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.complaint-option:has(:checked) .complaint-option__dot {
    border-color: #0133A2;
    box-shadow: inset 0 0 0 4px #0133A2;
}

/* Zona del voucher: toda la caja abre el selector de archivos */
.voucher-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px dashed #CBD5E1;
    border-radius: 0.75rem;
    background-color: #FFFFFF;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.voucher-drop:has(:focus-visible) {
    border-color: #0133A2;
    box-shadow: 0 0 0 3px rgb(1 51 162 / 0.15);
}

.voucher-drop[data-state="selected"] {
    border-style: solid;
}

.voucher-drop[data-state="selected"] .voucher-drop__text {
    color: #1E293B;
    font-weight: 500;
}

.voucher-drop:has(:user-invalid),
.voucher-drop[data-state="error"] {
    border-color: #DC2626;
}

.voucher-drop[data-state="error"] .voucher-drop__text {
    color: #B91C1C;
}

@media (hover: hover) and (pointer: fine) {
    .complaint-option:hover {
        border-color: #94A3B8;
    }

    .complaint-option:has(:checked):hover {
        border-color: #0133A2;
    }

    .voucher-drop:hover {
        border-color: #0133A2;
        background-color: rgb(1 51 162 / 0.03);
    }

    .submit-button:enabled:hover {
        background-color: rgb(1 51 162 / 0.9);
    }
}

.submit-button {
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms var(--ease-out), background-color 150ms ease, opacity 150ms ease;
}

.submit-button:enabled:active {
    transform: scale(0.97);
}

/* Entrada del aviso de envío; sin movimiento si la persona lo prefiere */
@media (prefers-reduced-motion: no-preference) {
    #submission-notice {
        transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
    }

    @starting-style {
        #submission-notice {
            opacity: 0;
            transform: translateY(8px);
        }
    }
}