/* ---------------------------------------------------------------------
   contacto.css  •  Estilos exclusivos para resources/views/contacto.blade.php
   ---------------------------------------------------------------------
   Autor: Grupo GR
   Descripción:
   - Diseño responsive de la sección de contacto.
   - Tipografía y colores consistentes con la imagen de marca.
   - Grid adaptable para información de contacto, mapa e imágenes.
   - Formularios accesibles con foco visible.
   ------------------------------------------------------------------ */

/* 1. Variables de color (puedes añadirlas a :root si prefieres) */
:root {
    --primary: #009FE3;   /* Azul corporativo */
    --primary-dark: #0084bf;
    --brand-dark: #001C54; /* Azul marino títulos */
    --bg-input: #F2F3F5;  /* Fondo de campos de formulario */
    --text-base: #4B5563; /* Gris texto principal */
}

/* 2. Reseteo mínimo para coherencia */
.contacto * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 3. Contenedor principal */
.contacto {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 1.25rem;        /* 64 px 20 px */
    text-align: center;
}

/* 4. Encabezado */
.contacto__title {
    font-size: clamp(2.25rem, 5vw, 3rem);  /* 36-48 px fluid */
    font-weight: 800;
    color: var(--brand-dark);
    line-height: 1.2;
}

.contacto__intro {
    max-width: 560px;
    margin: 1rem auto 3rem;
    color: var(--text-base);
    font-size: 1rem;             /* 16 px */
    line-height: 1.6;
}

/* 5. Formulario */
.contacto__form-wrapper {
    max-width: 480px;
    margin: 0 auto;
}

.contacto__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;                   /* 16 px */
}

.contacto__input,
.contacto__textarea {
    width: 100%;
    border: 0;
    border-radius: 6px;
    padding: 0.9rem 1rem;        /* 14-16 px */
    background: var(--bg-input);
    font-size: 0.95rem;
    color: #111827;              /* Gris oscuro */
}

.contacto__input::placeholder,
.contacto__textarea::placeholder {
    color: #9CA3AF;              /* Placeholder gris */
}

.contacto__input:focus,
.contacto__textarea:focus {
    outline: 3px solid var(--primary);
    background: #fff;
}

.contacto__textarea {
    resize: none;
    min-height: 140px;
}

.contacto__btn {
    align-self: center;
    margin-top: 0.3rem;
    padding: 0.7rem 3rem;        /* 11-48 px */
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 9999px;       /* Pill button */
    cursor: pointer;
    transition: background 0.2s ease-in-out, transform 0.15s ease;
}

.contacto__btn:hover {
    background: var(--primary-dark);
}

.contacto__btn:active {
    transform: scale(0.97);
}

/* 6. Bloques de información (Contactos | Dirección | Horario) */
.contacto__info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;                 /* 40 px */
    margin-top: 4rem;
}

.contacto__info-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--brand-dark);
    font-size: 1.125rem;         /* 18 px */
}

.contacto__link {
    color: var(--primary);
    text-decoration: none;
}

.contacto__link:hover {
    text-decoration: underline;
}

/* 7. Mapa + imágenes */
.contacto__media-grid {
    display: grid;
    grid-template-columns: 1fr;         /* móvil: una sola columna */
    gap: 1.5rem;
    margin-top: 3.5rem;
}

/* mapa */
.contacto__map iframe {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    object-fit: cover;
}

/* imagen */
.contacto__image img {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    object-fit: cover;
    object-position: top;       /* Aquí indicamos que se muestre la parte superior */
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}


/* 8. Estados de foco accesibles para enlaces */
.contacto a:focus-visible {
    outline: 3px dashed var(--primary);
    outline-offset: 2px;
}

/* 9. Media queries para pantallas medianas y grandes */
@media (min-width: 768px) {
    .contacto__info-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .contacto__media-grid { grid-template-columns: 2fr 3fr; };
}

/* 10. Ajustes para desktop grande */
@media (min-width: 1024px) {
    .contacto__intro {
        font-size: 1.0625rem;   /* 17 px */
    }

    .contacto__input,
    .contacto__textarea {
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------------------
   Fin de contacto.css
   ------------------------------------------------------------------ */