/* =============================================================
   contacto.css — Página de contacto
   Elicon System WEB 5.0
   ============================================================= */


/* -------------------------------------------------------------
   Sección principal
   ------------------------------------------------------------- */
.contacto-section {
    padding:    64px 0;
    background: var(--color-bg-soft);
}

.contacto-card {
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    var(--shadow-md);
}


/* -------------------------------------------------------------
   Columna izquierda — información de contacto (estilo WEB 4.0)
   ------------------------------------------------------------- */
.contacto-info-col {
    background-color: #1a2e45;
}

.contacto-info {
    padding: 3rem 2.5rem;
    height:  100%;
}

.contacto-grupo {
    margin-bottom: 0.5rem;
}

.contacto-grupo-titulo {
    color:         #ffffff;
    font-weight:   600;
    font-size:     1.1rem;
    margin-bottom: 0.5rem;
    margin-top:    1.5rem;
}

.contacto-grupo:first-child .contacto-grupo-titulo {
    margin-top: 0;
}

.contacto-grupo-lista {
    margin:         0;
    padding-left:   2rem;
    list-style:     none;
}

.contacto-grupo-lista li {
    position:    relative;
    padding:     3px 0;
    font-size:   0.9375rem;
    line-height: 1.55;
}

/* Icono antes de cada ítem via Bootstrap Icons */
.contacto-grupo-lista li::before {
    font-family: "bootstrap-icons";
    position:    absolute;
    left:        -1.6rem;
    color:       rgba(255, 255, 255, 0.7);
    font-size:   1rem;
    top:         4px;
}

.contacto-grupo-lista li.icono-telefono::before { content: "\F5C1"; }
.contacto-grupo-lista li.icono-email::before    { content: "\F32F"; }
.contacto-grupo-lista li.icono-horario::before  { content: "\F293"; }

.contacto-grupo-lista li a {
    color:           #ced9f0;
    text-decoration: none;
    transition:      color var(--transition);
}

.contacto-grupo-lista li a:hover {
    color: #ffffff;
}

.contacto-grupo-lista li p {
    margin:    0;
    color:     #ced9f0;
    font-size: 0.875rem;
}

.contacto-grupo-lista li p strong {
    color: #ffffff;
}


/* -------------------------------------------------------------
   Columna derecha — formulario
   ------------------------------------------------------------- */
.contacto-form-col {
    background-color: #ffffff;
}

.contacto-form-wrap {
    padding: 3rem 2.5rem;
}

.contacto-form-titulo {
    font-size:     1.875rem;
    font-weight:   600;
    line-height:   1.2;
    color:         var(--color-text);
    margin-bottom: 1.5rem;
}


/* Bloque LOPD */
.contacto-lopd {
    background:    var(--color-bg-soft);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       0.875rem 1.125rem;
    font-size:     0.75rem;
    color:         var(--color-text-muted);
    line-height:   1.6;
}

.contacto-lopd strong {
    color: var(--color-text);
}

.contacto-lopd a {
    color: var(--color-acento);
}


/* Estado de éxito */
.contacto-exito {
    display:    none;
    text-align: center;
    padding:    60px 20px;
}

.contacto-exito .bi {
    font-size:     3rem;
    color:         #38a169;
    display:       block;
    margin-bottom: 1rem;
}

.contacto-exito h3 {
    font-size:     1.35rem;
    font-weight:   700;
    color:         var(--color-text);
    margin-bottom: 0.75rem;
}

.contacto-exito p {
    font-size:   0.95rem;
    color:       var(--color-text-muted);
    max-width:   380px;
    margin:      0 auto;
    line-height: 1.7;
}


/* -------------------------------------------------------------
   Sección departamentos (fondo y colores como WEB 4.0)
   ------------------------------------------------------------- */
.contacto-departamentos {
    padding:    64px 0;
    background: #ecf0fb;
}

.contacto-dept-eyebrow {
    font-size:     1.05rem;
    font-weight:   600;
    color:         #103457;
    margin-bottom: 1rem;
}

.contacto-dept-titulo {
    font-size:   clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 600;
    color:       #0c4da2;
    line-height: 1.25;
    margin:      0;
}

.contacto-dept-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.5rem 2.5rem;
    padding-left:          2.5rem;
}

.contacto-dept-item {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.contacto-dept-nombre {
    font-size:   0.9375rem;
    font-weight: 600;
    color:       #103457;
    display:     block;
}

.contacto-dept-item a {
    font-size:       0.9rem;
    color:           #56697c;
    text-decoration: none;
    transition:      color var(--transition);
}

.contacto-dept-item a::after {
    content:     "\F144";
    font-family: "bootstrap-icons";
    color:       #0c4da2;
    padding-left: 8px;
    font-size:   0.85rem;
}

.contacto-dept-item a:hover {
    color: #7090af;
}


/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .contacto-info {
        padding: 2.5rem 1.75rem;
    }

    .contacto-form-wrap {
        padding: 2.5rem 1.75rem;
    }

    .contacto-dept-grid {
        padding-left: 0;
    }
}

@media (max-width: 575.98px) {
    .contacto-info,
    .contacto-form-wrap {
        padding: 2rem 1.25rem;
    }

    .contacto-dept-grid {
        grid-template-columns: 1fr;
    }
}