/* assets/css/contacto.css – Versión COMPACTA, ELEGANTE y 100% RESPONSIVE 2025 */

.contacto-section {
    background: var(--verde-urbano);
    padding: 70px 0;                    /* reducido de 100px → más respirable */
    color: var(--blanco);
}

.contacto-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--padding-x);
}

.contacto-title {
    font-family: var(--font-secondary);
    font-size: clamp(1.7rem, 3vw, 2.1rem);   /* un poco más pequeño y refinado */
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2.8rem;                  /* reducido */
    color: var(--blanco);
}

/* GRID PRINCIPAL – más compacto y equilibrado */
.contacto-grid-principal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;                              /* reducido de 6rem → más contenido en pantalla */
    align-items: start;                     /* ya no fuerza altura completa innecesaria */
}

/* Formulario – más compacto */
.contacto-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;                              /* espacio interno más limpio */
}

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem 2.8rem;                     /* reducido y más cómodo */
    margin-bottom: 1rem;
}

.contacto-field { display: flex; flex-direction: column; }
.contacto-field.full { grid-column: 1 / -1; }

.contacto-field label {
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blanco);
    margin-bottom: 0.4rem;
    opacity: 0.88;
}

.contacto-field input,
.contacto-field textarea {
    font-family: var(--font-primary);
    font-size: 0.94rem;
    padding: 0.5rem 0;
    border: none;
    border-bottom: 1px solid rgba(var(--blanco-rgb), 0.35);
    background: transparent;
    color: var(--blanco);
}

.contacto-field input:focus,
.contacto-field textarea:focus {
    outline: none;
    border-bottom-color: var(--maiz);
}

.contacto-field textarea {
    resize: vertical;
    min-height: 100px;                      /* reducido un poco */
}

/* Checkbox y botón más cerca */
.contacto-checkbox {
    gap: 0.7rem;
    margin: 1.4rem 0 1.8rem;
    font-size: 0.82rem;
    opacity: 0.92;
}

.contacto-checkbox input[type="checkbox"] {
    accent-color: var(--maiz);
}

/* Botón más compacto y elegante */
.contacto-submit button {
    background: var(--gris-medio);
    color: var(--blanco);
    font-size: 0.88rem;
    padding: 0.85rem 2.8rem;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.contacto-submit button:hover {
    background: var(--gris-medio-translucido);
    transform: translateY(-2px);
    box-shadow: var(--sombra-suave);
}

/* MAPA – ahora más compacto pero perfectamente visible */
.contacto-map-wrapper {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--sombra-card);
    height: 100%;                           /* se adapta al formulario */
    min-height: 480px;                      /* altura más razonable en escritorio */
    aspect-ratio: 4 / 3;               /* proporción más cuadrada y moderna */
}

.contacto-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.contacto-map-title {
    top: 18px;
    left: 18px;
    padding: 0.7rem 1.4rem;
    font-size: 0.9rem;
    border-radius: 6px;
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* RESPONSIVE – mucho más cómodo en móvil */
@media (max-width: 991px) {
    .contacto-section { padding: 60px 0; }

    .contacto-grid-principal {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contacto-grid { 
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .contacto-map-wrapper {
        order: -1;
        min-height: 420px;                  /* mapa grande pero no exagerado */
        height: 420px;
        aspect-ratio: unset;
    }

    .contacto-title { margin-bottom: 2.2rem; }
}

@media (max-width: 480px) {
    .contacto-section { padding: 50px 0; }
    .contacto-map-wrapper { height: 380px; }
    .contacto-title { font-size: 1.8rem; }
}