/*==================================================
    CONTACTO.CSS
    Proyecto: QPERTINO
==================================================*/

/*==================================
BANNER
==================================*/

/* Corregido: fondo oscuro en lugar de #F8F8F8 */
.contact-page{

    background: var(--primary, #0A0A0C);

}

.contact-banner{

    position:relative;

    padding:180px 0 120px;

    background:var(--bg-section);

    overflow:hidden;

}

.contact-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(200,167,78,.10),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(255,255,255,.04),
    transparent 40%);

}

.contact-banner .container{

    position:relative;

    z-index:2;

}

.contact-banner h1{

    color:var(--heading);

    font-size:64px;

    font-family:"Cormorant Garamond", serif;

    margin-bottom:20px;

}

.contact-banner p{

    max-width:700px;

    color:var(--text);

    font-size:18px;

    line-height:1.9;

}

/*==================================
SECCIÓN PRINCIPAL — Corregido: fondo oscuro
==================================*/

.contact-section{

    padding:110px 0;

    /* Corregido: fondo oscuro en lugar de #FFFFFF */
    background: var(--primary, #0A0A0C);

}

/*==================================
INFORMACIÓN
==================================*/

.contact-info{

    background:var(--bg-soft);

    color:var(--heading);

    border-radius:20px;

    padding:45px;

    height:100%;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

}

.contact-info h2{

    font-size:38px;

    font-family:"Cormorant Garamond", serif;

    color:#C8A74E;

    margin-bottom:20px;

}

.contact-info p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:35px;

}

.contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

    margin-bottom:30px;

}

.contact-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#C8A74E;

    color:#111111;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    flex-shrink:0;

}

.contact-content h3{

    color:var(--heading);

    margin-bottom:8px;

    font-size:18px;

}

.contact-content span,

.contact-content a{

    color:var(--text-light);

    text-decoration:none;

    line-height:1.8;

    transition:.35s;

}

.contact-content a:hover{

    color:#C8A74E;

}

/*==================================
REDES
==================================*/

.contact-social{

    display:flex;

    gap:15px;

    margin-top:35px;

}

.contact-social a{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#1E1E1E;

    color:var(--heading);

    text-decoration:none;

    transition:.35s;

}

.contact-social a:hover{

    background:#C8A74E;

    color:#111111;

    transform:translateY(-5px);

}

/*==================================
FORMULARIO — Corregido: fondo oscuro
==================================*/

.contact-form{

    /* Corregido: fondo oscuro en lugar de #FFFFFF */
    background: var(--surface, #121318);

    border-radius:20px;

    padding:50px;

    /* Corregido: borde sutil oscuro */
    border:1px solid rgba(255,255,255,0.08);

    box-shadow:0 20px 50px rgba(0,0,0,.25);

}

/* Corregido: título del formulario en color claro */
.contact-form h2{

    font-size:38px;

    color: var(--heading, #FFFFFF);

    font-family:"Cormorant Garamond", serif;

    margin-bottom:15px;

}

/* Corregido: párrafo del formulario en color claro */
.contact-form p{

    color: var(--text-light, #A0AEC0);

    margin-bottom:35px;

    line-height:1.8;

}

/*==================================
MAPA
==================================*/

.contact-map{

    margin-top:100px;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 45px rgba(0,0,0,.25);

}

.contact-map iframe{

    width:100%;

    height:500px;

    border:0;

}

/*==================================
HORARIOS — Corregido: fondo oscuro
==================================*/

.business-hours{

    margin-top:40px;

    /* Corregido: fondo oscuro en lugar de #F6F6F6 */
    background: var(--surface-light, #1A1C23);

    padding:30px;

    border-radius:15px;

    border:1px solid rgba(255,255,255,0.07);

}

/* Corregido: título en color claro */
.business-hours h3{

    color: var(--heading, #FFFFFF);

    margin-bottom:20px;

}

.business-hours ul{

    list-style:none;

}

/* Corregido: items de horario en color claro */
.business-hours li{

    display:flex;

    justify-content:space-between;

    padding:12px 0;

    /* Corregido: borde sutil oscuro */
    border-bottom:1px solid rgba(255,255,255,0.08);

    color: var(--text-light, #A0AEC0);

}

.business-hours li:last-child{

    border:none;

}

/*==================================
FAQ — Corregido: fondo oscuro
==================================*/

.contact-faq{

    margin-top:90px;

}

/* Corregido: título FAQ en color claro */
.contact-faq h2{

    text-align:center;

    margin-bottom:50px;

    font-size:42px;

    color: var(--heading, #FFFFFF);

    font-family:"Cormorant Garamond", serif;

}

/* Corregido: fondo oscuro para items FAQ */
.faq-item{

    background: var(--surface, #121318);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:12px;

    margin-bottom:20px;

    overflow:hidden;

}

/* Corregido: pregunta FAQ en color claro */
.faq-question{

    padding:22px 30px;

    cursor:pointer;

    font-weight:600;

    color: var(--heading, #FFFFFF);

}

/* Corregido: respuesta FAQ en color claro */
.faq-answer{

    padding:0 30px 25px;

    color: var(--text-light, #A0AEC0);

    line-height:1.8;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:992px){

.contact-banner{

    padding:150px 0 90px;

}

.contact-banner h1{

    font-size:50px;

}

.contact-form{

    margin-top:40px;

}

.contact-map{

    margin-top:70px;

}

}

@media(max-width:768px){

.contact-banner{

    padding:130px 0 70px;

}

.contact-banner h1{

    font-size:38px;

}

.contact-banner p{

    font-size:16px;

}

.contact-info{

    padding:30px;

}

.contact-form{

    padding:30px;

}

.contact-info h2,

.contact-form h2{

    font-size:30px;

}

.contact-map iframe{

    height:350px;

}

.business-hours li{

    flex-direction:column;

    gap:5px;

}

.contact-social{

    flex-wrap:wrap;

}

}

/*==================================
LAYOUT EN GRID DE 2 COLUMNAS
==================================*/
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}

/*==================================
CAMPOS Y FORMULARIO (Espaciado interno)
==================================*/
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* Separación entre inputs */
}

.form-group.full {
    grid-column: span 2;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espacio entre label e input */
}

.form-group label {
    color: var(--heading, #FFFFFF);
    font-size: 14px;
    font-weight: 500;
}

/* Evita que el texto o los inputs peguen con el borde */
.form-control {
    width: 100%;
    padding: 12px 16px; 
    background: var(--surface-light, #1A1C23);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    border-color: #C8A74E;
}

.form-actions {
    margin-top: 25px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* RESPONSIVE: En móviles se ajusta a 1 sola columna */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-group.full {
        grid-column: span 1;
    }
}