/* ==========================================================================
   CONTACTO — Estilos exclusivos de la página
   --------------------------------------------------------------------------
   El héroe, la rejilla de tarjetas y el encabezado de sección son componentes
   compartidos y viven en `global.css`. Aquí están el horario del héroe, los
   canales, el formulario y los datos prácticos.
   ========================================================================== */

/* ==========================================================
   1. HÉROE DE CONTACTO — #contact_hero
   Sin color de acento no se puede usar el verde de siempre,
   así que el estado se lee por la forma: cuadrado en el canto.
   ========================================================== */

#contact_hero .contact-hero__schedule {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--dark-border-color);
    font-family: var(--mono-font);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--inverse-muted-color);
}

#contact_hero .contact-hero__schedule-mark {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    background-color: var(--inverse-color);
}

#contact_hero .contact-hero__claims {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

#contact_hero .contact-hero__claim {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--dark-border-color);
    font-family: var(--mono-font);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--inverse-muted-color);
}

#contact_hero .contact-hero__claim-icon {
    display: flex;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
}

@media (max-width: 767px) {
    #contact_hero .contact-hero__schedule {
        width: 100%;
    }
}

/* ==========================================================
   2. CANALES DIRECTOS — #contact_channels
   ========================================================== */

#contact_channels {
    padding-block: clamp(4.5rem, 9vw, var(--section-padding-y));
}

#contact_channels .contact-channels__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

#contact_channels .contact-channels__item {
    display: flex;
}

#contact_channels .contact-channels__card {
    flex: 1;
    gap: var(--space-3);
    padding: var(--space-6);
}

#contact_channels .contact-channels__icon {
    display: flex;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
}

#contact_channels .contact-channels__value {
    font-family: var(--display-font);
    font-weight: 700;
    font-size: 1.1875rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

#contact_channels .contact-channels__value--email {
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    word-break: break-all;
}

/* ==========================================================
   3. FORMULARIO Y DATOS PRÁCTICOS — #contact_quote
   ========================================================== */

#contact_quote {
    padding-block: clamp(4.5rem, 9vw, var(--section-padding-y));
    background-color: var(--alt-color);
}

#contact_quote .contact-quote__container {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(var(--space-6), 6vw, var(--space-9));
    align-items: start;
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

#contact_quote .contact-quote__form-column,
#contact_quote .contact-quote__details-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* El espacio entre bloques se reparte con `gap` y nunca con margen en cada
   hijo: la casilla del captcha que inyecta el plugin es un bloque más y tiene
   que heredar esa separación. */
#contact_quote .contact-form {
    display: grid;
    gap: var(--space-5);
}

#contact_quote .contact-form__field {
    display: grid;
    gap: var(--space-2);
}

#contact_quote .contact-form__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--mono-font);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-color);
}

/* Se marca lo opcional, no lo obligatorio: hay menos que señalar. */
#contact_quote .contact-form__optional {
    letter-spacing: 0.1em;
    text-transform: none;
    color: var(--muted-color);
}

#contact_quote .contact-form__control {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding-inline: var(--space-4);
    border: 1px solid var(--border-color);
    background-color: var(--body-color);
    transition: border-color 0.25s var(--ease-curve), box-shadow 0.25s var(--ease-curve);
}

#contact_quote .contact-form__control--textarea {
    align-items: flex-start;
    padding-block: var(--space-3);
}

#contact_quote .contact-form__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--muted-color);
}

#contact_quote .contact-form__control--textarea .contact-form__icon {
    margin-top: 0.35rem;
}

#contact_quote .contact-form__input {
    width: 100%;
    padding-block: var(--space-3);
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--body-font);
    /* 16 px es el mínimo que evita que iOS haga zoom al enfocar. */
    font-size: 1rem;
    color: var(--text-color);
}

#contact_quote .contact-form__input:focus {
    outline: none;
}

#contact_quote .contact-form__input::placeholder {
    color: var(--muted-color);
    opacity: 1; /* Firefox baja la opacidad por defecto */
}

#contact_quote select.contact-form__input {
    cursor: pointer;
}

#contact_quote .contact-form__input--textarea {
    min-height: 140px;
    resize: vertical;
}

#contact_quote .contact-form__control:hover {
    border-color: var(--muted-color);
}

/* El foco se pinta en el contenedor, no en el campo. */
#contact_quote .contact-form__control:focus-within {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

#contact_quote .contact-form__control:focus-within .contact-form__icon {
    color: var(--text-color);
}

/* Error: sin color de acento, se señala con una banda en el canto del campo. */
#contact_quote .contact-form__control.is-invalid {
    border-color: var(--error-color);
    box-shadow: inset 4px 0 0 var(--error-color);
}

#contact_quote .contact-form__error {
    font-family: var(--mono-font);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--error-color);
}

/* Aviso de protección de datos: información de apoyo, no un campo más. */
#contact_quote .contact-form__privacy {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-left: 3px solid var(--primary-color);
    background-color: var(--body-color);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--muted-color);
}

#contact_quote .contact-form__privacy-title {
    font-family: var(--mono-font);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-color);
}

#contact_quote .contact-form__privacy-list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
}

#contact_quote .contact-form__privacy-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
}

#contact_quote .contact-form__privacy-term {
    font-weight: 500;
    color: var(--text-color);
}

#contact_quote .contact-form__privacy-value {
    margin: 0;
}

#contact_quote .contact-form__privacy-link {
    color: var(--text-color);
    text-underline-offset: 3px;
}

#contact_quote .contact-form__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 0.875rem;
    color: var(--muted-color);
    cursor: pointer;
}

#contact_quote .contact-form__checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 5px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* La trampa anti-spam sale de pantalla sin usar `display: none`, que algunos
   robots detectan y esquivan. */
#contact_quote .contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#contact_quote .contact-form__submit {
    justify-self: start;
}

#contact_quote .contact-form__message {
    padding: var(--space-4);
    border: 1px solid var(--primary-color);
    background-color: var(--body-color);
    font-family: var(--mono-font);
    font-size: 0.75rem;
    line-height: 1.6;
}

#contact_quote .contact-form__message.is-error {
    box-shadow: inset 4px 0 0 var(--error-color);
}

/* Datos prácticos */
#contact_quote .contact-details {
    display: grid;
    gap: var(--space-5);
}

#contact_quote .contact-details__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}

#contact_quote .contact-details__term {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--mono-font);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-color);
}

#contact_quote .contact-details__icon {
    display: flex;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
}

#contact_quote .contact-details__value {
    font-size: 1.0625rem;
}

#contact_quote .contact-quote__map {
    align-self: flex-start;
}

@media (max-width: 1024px) {
    #contact_quote .contact-quote__container {
        grid-template-columns: 1fr;
    }
}