/**
 * Página Contacto. Los primitivos base (.section, .section-head) viven en
 * layout.css — este archivo solo tiene lo que es específico de esta
 * página.
 */

.contacto-marcas .section-head {
    display: none;
}

/* "Envíanos un mensaje": form + tarjeta de ubicación lado a lado. */
.contacto-formulario-grid {
    display: grid;
    gap: 2.5rem;
}

.contacto-formulario .section-head {
    margin: 0 0 1.5rem;
    text-align: left;
}

.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contacto-form-row {
    display: grid;
    gap: 1.25rem;
}

.contacto-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contacto-form-field label {
    font-size: var(--text-label-sm);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-body);
}

.contacto-form-field input,
.contacto-form-field textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-standard);
    background: var(--color-white);
    color: var(--color-body);
    font-family: inherit;
    font-size: var(--text-body);
}

.contacto-form-field textarea {
    resize: vertical;
    min-height: 8rem;
}

/* El selector de país (.ax-tel-select, ver inc/telefono-pais.php en el tema)
   trae por defecto el fondo gris y el tamaño más compacto (12px) de los
   modales angostos (WhatsApp, Registrarse, Mi Panel, cotizador, catálogo) —
   acá, junto al resto de los campos blancos de este formulario, se pareja al
   fondo, tamaño y padding de los demás para que las dos mitades del campo
   Teléfono no se vean descalzadas. El padding-right queda fijo en 1.5rem: es
   el espacio para la flecha del desplegable. */
.contacto-form-field .ax-tel-select {
    padding: 0.7rem 1.5rem 0.7rem 0.9rem;
    font-size: var(--text-body);
    background-color: var(--color-white);
}

.contacto-form-field input::placeholder,
.contacto-form-field textarea::placeholder {
    color: var(--color-gray-texto);
}

.contacto-form-field input:focus,
.contacto-form-field textarea:focus {
    outline: 2px solid var(--color-brand-red);
    outline-offset: 1px;
}

/* Honeypot antispam: fuera de pantalla, no display:none — algunos bots
   ignoran los campos ocultos así, pero sí los que no están en el viewport. */
.contacto-form-trampa {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.contacto-form-feedback {
    font-size: var(--text-body-sm);
    font-weight: 600;
}

.contacto-form-feedback:empty {
    display: none;
}

.contacto-form-feedback[data-estado="ok"] {
    color: #1a7f37;
}

.contacto-form-feedback[data-estado="error"] {
    color: var(--color-brand-red);
}

.contacto-form button[type="submit"] {
    align-self: flex-start;
}

/* Tarjeta de ubicación: mismo mapa embebido (iframe "output=embed", sin API
   key) que el showroom de Nosotros — ver andexport_mapa_embed_url(). */
.contacto-mapa {
    min-height: 20rem;
    height: 100%;
    border-radius: var(--radius-large);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.contacto-mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 20rem;
    border: 0;
}

/* Tarjetas Dirección/Teléfono/Email. */
.contacto-info {
    background: var(--color-bg-muted);
}

.contacto-info-grid {
    display: grid;
    gap: 1.25rem;
}

.contacto-info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1.5rem;
    border-radius: var(--radius-large);
    background: var(--color-white);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.contacto-info-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-full);
    background: rgba(222, 26, 28, 0.1);
    color: var(--color-brand-red);
}

.contacto-info-icono svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Ícono propio de una tarjeta extra (imagen subida en el panel). */
.contacto-info-icono-imagen {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
}

.contacto-info-card h3 {
    font-size: var(--text-title-h6);
}

.contacto-info-card p,
.contacto-info-card p a {
    color: var(--color-gray-01);
    font-size: var(--text-body);
}

.contacto-info-card p a:hover {
    color: var(--color-brand-red);
}

@media (min-width: 1024px) {
    .contacto-formulario-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }
}

@media (min-width: 768px) {
    .contacto-form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Tres tarjetas de siempre; con más o menos (Más tarjetas / Mostrar), se reparten solas. */
    .contacto-info-grid {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }
}

/* Bloque "Formulario de contacto (simple)": una sola columna, sin mapa. */
.contacto-formulario-simple-caja {
    max-width: 760px;
}

/* Mapa apagado (campo «Mostrar el mapa»): el formulario ocupa su columna sola, centrada. */
@media (min-width: 1024px) {
    .contacto-formulario-grid.contacto-formulario-grid--sin-mapa {
        grid-template-columns: minmax(0, 46rem);
        justify-content: center;
    }
}