/* =========================================================
   CONTACTO - INGENIEROS Y ASOCIADOS
========================================================= */


/* =========================================================
   HERO
========================================================= */

.contacto-hero{
    position:relative;

    min-height:540px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(7,26,52,.94) 0%,
            rgba(10,38,74,.82) 50%,
            rgba(10,38,74,.42) 100%
        ),
        url('../img/contacto.png');

    background-size:cover;
    background-position:center;
}


.overlay-contacto{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03),
            rgba(0,0,0,.12)
        );
}


.hero-contacto-contenido{
    position:relative;

    z-index:2;

    color:#fff;
}


.etiqueta-hero{
    display:inline-flex;

    align-items:center;

    padding:9px 17px;

    margin-bottom:23px;

    border:1px solid rgba(255,255,255,.24);

    border-radius:50px;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.04em;

    backdrop-filter:blur(5px);
}


.hero-contacto-contenido h1{
    max-width:850px;

    margin:0 0 23px;

    color:#fff;

    font-size:clamp(2.7rem,5vw,4.2rem);

    line-height:1.06;

    letter-spacing:-.035em;

    font-weight:800;
}


.hero-contacto-contenido p{
    max-width:730px;

    margin:0;

    color:#e3edf8;

    font-size:1.1rem;

    line-height:1.72;
}


.hero-contacto-canales{
    display:flex;

    flex-wrap:wrap;

    gap:12px 24px;

    margin-top:35px;

    padding-top:25px;

    max-width:650px;

    border-top:1px solid rgba(255,255,255,.18);
}


.hero-contacto-canales span{
    display:flex;

    align-items:center;

    gap:8px;

    color:rgba(255,255,255,.88);

    font-size:.84rem;

    font-weight:600;
}


.hero-contacto-canales i{
    color:#86d8ea;
}


/* =========================================================
   GENERAL
========================================================= */

.etiqueta{
    display:inline-block;

    margin-bottom:13px;

    color:var(--ing-primary);

    font-size:.8rem;

    font-weight:800;

    letter-spacing:.10em;

    text-transform:uppercase;
}


/* =========================================================
   CONTACTO
========================================================= */

.contacto-section{
    padding:105px 0;

    background:#fff;
}


.contacto-grid{
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:65px;

    align-items:start;
}


.contacto-info h2{
    margin-bottom:17px;

    color:var(--ing-dark);

    font-size:clamp(2rem,3vw,2.65rem);

    line-height:1.15;

    letter-spacing:-.025em;
}


.contacto-desc{
    margin-bottom:35px;

    color:var(--ing-muted);

    font-size:.98rem;

    line-height:1.75;
}


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

.info-lista{
    display:flex;

    flex-direction:column;

    gap:14px;
}


.info-item{
    display:flex;

    align-items:center;

    gap:16px;

    min-width:0;

    padding:18px 20px;

    border:1px solid #e2e8ef;

    border-radius:16px;

    background:#fff;

    color:inherit;

    text-decoration:none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


a.info-item:hover{
    transform:translateX(4px);

    border-color:rgba(11,78,162,.25);

    box-shadow:
        0 14px 30px rgba(11,35,71,.07);
}


.icono-info{
    width:46px;
    height:46px;

    min-width:46px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:13px;

    background:var(--ing-light);

    color:var(--ing-primary);

    font-size:1rem;
}


.icono-info.whatsapp{
    color:#159447;

    background:#eefaf2;
}


.info-item > div:last-child{
    min-width:0;
}


.info-item strong{
    display:block;

    margin-bottom:4px;

    color:var(--ing-dark);

    font-size:.91rem;
}


.info-item span{
    display:block;

    color:var(--ing-muted);

    font-size:.86rem;

    line-height:1.5;

    overflow-wrap:break-word;
}


/* =========================================================
   FORMULARIO
========================================================= */

.formulario-contacto{
    padding:38px;

    border:1px solid #e1e8ef;

    border-radius:22px;

    background:#f8fafc;

    box-shadow:
        0 24px 55px rgba(11,35,71,.07);
}


.orientacion-icono{
    width:58px;
    height:58px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:22px;

    border-radius:16px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #16bbd0,
            var(--ing-primary)
        );

    font-size:1.25rem;

    box-shadow:
        0 12px 25px rgba(11,78,162,.16);
}


.formulario-contacto > h2{
    margin-bottom:13px;

    color:var(--ing-dark);

    font-size:2rem;

    line-height:1.2;
}


.formulario-intro{
    margin-bottom:25px;

    color:var(--ing-muted);

    font-size:.96rem;

    line-height:1.7;
}


.formulario-acciones{
    margin-bottom:20px;
}


.btn-whatsapp-contacto{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    padding:13px 21px;

    border-radius:50px;

    background:#159447;

    color:#fff;

    font-size:.9rem;

    font-weight:700;

    text-decoration:none;

    transition:
        background .25s ease,
        transform .25s ease;
}


.btn-whatsapp-contacto:hover{
    background:#117c3b;

    transform:translateY(-2px);
}


/* =========================================================
   FORMULARIO DESPLEGABLE
========================================================= */

.formulario-desplegable{
    overflow:hidden;

    border:1px solid #dfe6ed;

    border-radius:17px;

    background:#fff;
}


.formulario-desplegable summary{
    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    list-style:none;

    cursor:pointer;

    transition:background .25s ease;
}


.formulario-desplegable summary::-webkit-details-marker{
    display:none;
}


.formulario-desplegable summary:hover{
    background:#f6f9fc;
}


.summary-icono{
    width:43px;
    height:43px;

    min-width:43px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:var(--ing-light);

    color:var(--ing-primary);
}


.summary-texto{
    flex:1;

    min-width:0;
}


.summary-texto strong{
    display:block;

    margin-bottom:3px;

    color:var(--ing-dark);

    font-size:.92rem;
}


.summary-texto span{
    display:block;

    color:var(--ing-muted);

    font-size:.78rem;

    line-height:1.4;
}


.summary-flecha{
    color:#8794a5;

    font-size:.8rem;

    transition:transform .25s ease;
}


.formulario-desplegable[open] .summary-flecha{
    transform:rotate(180deg);
}


.formulario-desplegable-contenido{
    padding:28px;

    border-top:1px solid #e6ebf0;
}


.form-header{
    margin-bottom:25px;
}


.form-header h3{
    margin-bottom:8px;

    color:var(--ing-dark);

    font-size:1.32rem;
}


.form-header p{
    color:var(--ing-muted);

    font-size:.88rem;

    line-height:1.6;
}


.form-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}


.form-group{
    margin-bottom:18px;
}


.form-group label{
    display:block;

    margin-bottom:8px;

    color:var(--ing-dark);

    font-size:.84rem;

    font-weight:700;
}


.form-group input,
.form-group select,
.form-group textarea{
    width:100%;

    padding:14px 15px;

    border:1px solid #dce3ea;

    border-radius:12px;

    outline:none;

    background:#f8fafc;

    color:var(--ing-dark);

    font-family:inherit;

    font-size:.9rem;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.form-group textarea{
    min-height:125px;

    resize:vertical;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--ing-primary);

    background:#fff;

    box-shadow:
        0 0 0 3px rgba(11,78,162,.08);
}


.btn-contacto{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    width:100%;

    padding:14px 20px;

    border:none;

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            var(--ing-primary),
            #145dbf
        );

    color:#fff;

    font-size:.91rem;

    font-weight:800;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.btn-contacto:hover{
    transform:translateY(-2px);

    box-shadow:
        0 15px 30px rgba(11,78,162,.20);
}


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

.mapa-section{
    padding:95px 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(79,163,220,.10),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #ffffff 100%
        );
}


.mapa-header{
    max-width:700px;

    margin:0 auto 42px;

    text-align:center;
}


.mapa-header h2{
    margin:8px 0 14px;

    color:var(--ing-dark);

    font-size:clamp(2rem,3vw,2.5rem);

    letter-spacing:-.02em;
}


.mapa-header p{
    color:var(--ing-muted);

    font-size:.98rem;

    line-height:1.7;
}


.mapa-card{
    display:grid;

    grid-template-columns:.8fr 1.45fr;

    overflow:hidden;

    border:1px solid #e3e8ef;

    border-radius:22px;

    background:#fff;

    box-shadow:
        0 24px 55px rgba(11,35,71,.09);
}


.mapa-info{
    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:21px;

    padding:38px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #0b2347 0%,
            #123c73 100%
        );
}


.ubicacion-dato{
    display:flex;

    align-items:flex-start;

    gap:14px;
}


.ubicacion-dato i{
    width:42px;
    height:42px;

    min-width:42px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:rgba(255,255,255,.10);

    color:#8fd9ea;

    font-size:1rem;
}


.ubicacion-dato h3{
    margin-bottom:4px;

    color:#fff;

    font-size:.94rem;
}


.ubicacion-dato p{
    color:rgba(255,255,255,.78);

    font-size:.86rem;

    line-height:1.5;
}


.btn-mapa{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    align-self:flex-start;

    margin-top:4px;

    padding:12px 19px;

    border-radius:50px;

    background:#fff;

    color:var(--ing-primary);

    font-size:.86rem;

    font-weight:800;

    text-decoration:none;

    transition:
        transform .25s ease,
        background .25s ease;
}


.btn-mapa:hover{
    transform:translateY(-2px);

    background:#eaf5fc;
}


.mapa{
    min-height:410px;
}


.mapa iframe{
    display:block;

    width:100%;

    height:100%;

    min-height:410px;
}


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

html,
body{
    overflow-x:hidden;
}


.contacto-grid,
.contacto-info,
.formulario-contacto,
.form-grid{
    min-width:0;
}


@media(max-width:950px){

    .contacto-hero{
        min-height:460px;
    }


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

        gap:45px;
    }


    .contacto-info{
        max-width:700px;

        margin:0 auto;

        width:100%;
    }


    .formulario-contacto{
        max-width:760px;

        margin:0 auto;

        width:100%;
    }


    .mapa-card{
        grid-template-columns:1fr;
    }


    .mapa-info{
        padding:32px;
    }


    .mapa,
    .mapa iframe{
        min-height:360px;
    }

}


@media(max-width:600px){

    .contacto-hero{
        min-height:500px;

        background-position:65% center;
    }


    .hero-contacto-contenido h1{
        font-size:2.35rem;
    }


    .hero-contacto-contenido p{
        font-size:.95rem;

        line-height:1.65;
    }


    .hero-contacto-canales{
        gap:10px 16px;

        margin-top:28px;
    }


    .hero-contacto-canales span{
        font-size:.75rem;
    }


    .contacto-section{
        padding:70px 0;
    }


    .contacto-info h2{
        font-size:1.85rem;
    }


    .contacto-desc{
        font-size:.9rem;

        margin-bottom:25px;
    }


    .info-item{
        padding:16px;

        gap:13px;

        border-radius:14px;
    }


    .icono-info{
        width:40px;
        height:40px;

        min-width:40px;

        border-radius:11px;

        font-size:.88rem;
    }


    .info-item strong{
        font-size:.85rem;
    }


    .info-item span{
        font-size:.78rem;
    }


    .formulario-contacto{
        padding:25px 19px;

        border-radius:18px;
    }


    .orientacion-icono{
        width:50px;
        height:50px;

        border-radius:14px;

        font-size:1.05rem;
    }


    .formulario-contacto > h2{
        font-size:1.65rem;
    }


    .formulario-intro{
        font-size:.87rem;
    }


    .btn-whatsapp-contacto{
        width:100%;

        font-size:.84rem;
    }


    .formulario-desplegable summary{
        padding:15px;
    }


    .summary-icono{
        width:38px;
        height:38px;

        min-width:38px;
    }


    .summary-texto strong{
        font-size:.84rem;
    }


    .summary-texto span{
        font-size:.71rem;
    }


    .formulario-desplegable-contenido{
        padding:21px 16px;
    }


    .form-grid{
        grid-template-columns:1fr;

        gap:0;
    }


    .mapa-section{
        padding:70px 0;
    }


    .mapa-header{
        margin-bottom:30px;
    }


    .mapa-header h2{
        font-size:1.8rem;
    }


    .mapa-header p{
        font-size:.88rem;
    }


    .mapa-card{
        border-radius:18px;
    }


    .mapa-info{
        padding:25px 20px;
    }


    .btn-mapa{
        width:100%;
    }


    .mapa,
    .mapa iframe{
        min-height:300px;
    }
    /* =====================================================
   AVISO CAMPOS OBLIGATORIOS
===================================================== */

.form-aviso {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 24px;
    padding: 12px 15px;

    background: #f4f8fd;
    border-left: 3px solid #0056b3;
    border-radius: 6px;

    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.form-aviso i {
    color: #0056b3;
    font-size: 15px;
    flex-shrink: 0;
}

.form-aviso span {
    display: block;
}


/* Asterisco de campos obligatorios */

.campo-obligatorio {
    color: #0056b3;
    font-weight: 700;
    margin-left: 2px;
}

}