/* ==================================================
   CONTACTO SELAH
   Estilos exclusivos de la sección Contacto
================================================== */





/* ==================================================
   VARIABLES LOCALES
================================================== */

.pagina-contacto {

    --contacto-fondo:#f7f7f5;

    --contacto-blanco:#ffffff;

    --contacto-texto:#1f1f1f;

    --contacto-texto-secundario:#666666;

    --contacto-borde:#e7e7e2;

    --contacto-suave:#f1f1ed;

    --contacto-negro:#111111;

    --contacto-radio:18px;

    --contacto-sombra:0 12px 35px rgba(0,0,0,.07);

}





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

.pagina-contacto {

    background:#ffffff;

    color:var(--contacto-texto);

}



.pagina-contacto main {

    width:100%;

    overflow:hidden;

}



.pagina-contacto img {

    max-width:100%;

    display:block;

}





/* ==================================================
   ENCABEZADO DE CONTACTO
================================================== */

.encabezado-contacto {

    position:relative;

    width:100%;

    min-height:430px;

    padding:95px 30px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            rgba(0,0,0,.68),
            rgba(0,0,0,.68)
        ),
        url("../img/contacto/portada-contacto.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}



.encabezado-contacto-contenido {

    position:relative;

    z-index:1;

    width:100%;

    max-width:850px;

    margin:0 auto;

    text-align:center;

}



.encabezado-contacto .contacto-etiqueta {

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

}



.encabezado-contacto h1 {

    margin:0;

    font-size:54px;

    line-height:1.12;

    font-weight:700;

    letter-spacing:-1.5px;

    color:#ffffff;

}



.encabezado-contacto p {

    max-width:680px;

    margin:24px auto 0;

    font-size:17px;

    line-height:1.85;

    font-weight:400;

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

}



/* ==================================================
   SUBTITULOS PEQUEÑOS
================================================== */

.contacto-subtitulo {

    display:block;

    margin-bottom:12px;

    font-size:12px;

    font-weight:700;

    letter-spacing:2.5px;

    text-transform:uppercase;

    color:var(--contacto-texto-secundario);

}





/* ==================================================
   PRESENTACION
================================================== */

.contacto-presentacion {

    width:100%;

    padding:100px 30px;

    background:#ffffff;

}



.contacto-contenedor {

    width:100%;

    max-width:1120px;

    margin:0 auto;

    display:grid;

    grid-template-columns:minmax(300px, 430px) minmax(0, 1fr);

    gap:80px;

    align-items:center;

}





/* ==================================================
   FOTOGRAFIA
================================================== */

.contacto-fotografia {

    position:relative;

    width:100%;

    max-width:430px;

    margin:0 auto;

}



.contacto-fotografia::before {

    content:"";

    position:absolute;

    top:22px;

    left:22px;

    width:100%;

    height:100%;

    border:1px solid var(--contacto-borde);

    border-radius:var(--contacto-radio);

    z-index:0;

}



.contacto-fotografia img {

    position:relative;

    z-index:1;

    width:100%;

    aspect-ratio:4 / 5;

    object-fit:cover;

    object-position:center;

    border-radius:var(--contacto-radio);

    box-shadow:var(--contacto-sombra);

    background:var(--contacto-suave);

}





/* ==================================================
   INFORMACION PERSONAL
================================================== */

.contacto-informacion {

    width:100%;

}



.contacto-informacion h2 {

    margin:0 0 30px;

    font-size:38px;

    line-height:1.2;

    font-weight:700;

    letter-spacing:-.8px;

    color:var(--contacto-negro);

}



.contacto-descripcion {

    width:100%;

    max-width:650px;

}



.contacto-descripcion p {

    margin:0 0 22px;

    font-size:16px;

    line-height:1.95;

    font-weight:400;

    color:#444444;

}



.contacto-descripcion p:last-child {

    margin-bottom:0;

}





/* ==================================================
   MEDIOS DE CONTACTO
================================================== */

.medios-contacto {

    width:100%;

    padding:100px 30px;

    background:var(--contacto-fondo);

    border-top:1px solid var(--contacto-borde);

    border-bottom:1px solid var(--contacto-borde);

}



.medios-contacto-contenedor {

    width:100%;

    max-width:1050px;

    margin:0 auto;

}



.medios-contacto-encabezado {

    width:100%;

    max-width:720px;

    margin:0 auto 55px;

    text-align:center;

}



.medios-contacto-encabezado h2 {

    margin:0;

    font-size:38px;

    line-height:1.2;

    font-weight:700;

    letter-spacing:-.8px;

    color:var(--contacto-negro);

}



.medios-contacto-encabezado p {

    max-width:650px;

    margin:22px auto 0;

    font-size:16px;

    line-height:1.85;

    color:var(--contacto-texto-secundario);

}





/* ==================================================
   TARJETAS DE CONTACTO
================================================== */

.contacto-opciones {

    width:100%;

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:28px;

}



.contacto-opcion {

    position:relative;

    padding:42px 36px;

    background:var(--contacto-blanco);

    border:1px solid var(--contacto-borde);

    border-radius:var(--contacto-radio);

    box-shadow:0 8px 25px rgba(0,0,0,.04);

    text-align:center;

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        border-color .3s ease;

}



.contacto-opcion:hover {

    transform:translateY(-5px);

    box-shadow:0 16px 38px rgba(0,0,0,.08);

    border-color:#d6d6d0;

}



.contacto-opcion-icono {

    width:62px;

    height:62px;

    margin:0 auto 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--contacto-suave);

    color:var(--contacto-negro);

}



.contacto-opcion-icono svg {

    width:27px;

    height:27px;

}



.contacto-opcion h3 {

    margin:0 0 14px;

    font-size:21px;

    line-height:1.3;

    font-weight:700;

    color:var(--contacto-negro);

}



.contacto-opcion p {

    min-height:52px;

    margin:0 auto 25px;

    max-width:330px;

    font-size:15px;

    line-height:1.75;

    color:var(--contacto-texto-secundario);

}





/* ==================================================
   BOTONES
================================================== */

.boton-contacto {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:170px;

    min-height:48px;

    padding:13px 24px;

    border:1px solid var(--contacto-negro);

    border-radius:999px;

    background:var(--contacto-negro);

    color:#ffffff;

    font-family:inherit;

    font-size:14px;

    line-height:1;

    font-weight:600;

    text-decoration:none;

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease;

}



.boton-contacto:hover {

    background:transparent;

    color:var(--contacto-negro);

    transform:translateY(-2px);

}



.boton-contacto:focus-visible {

    outline:3px solid rgba(0,0,0,.18);

    outline-offset:4px;

}





/* ==================================================
   DATO DE CONTACTO
================================================== */

.contacto-dato {

    display:block;

    margin-top:18px;

    font-size:13px;

    line-height:1.6;

    color:#777777;

    overflow-wrap:anywhere;

}





/* ==================================================
   MENSAJE FINAL
================================================== */

.contacto-mensaje {

    width:100%;

    padding:95px 30px;

    background:#ffffff;

}



.contacto-mensaje-contenido {

    width:100%;

    max-width:820px;

    margin:0 auto;

    text-align:center;

}



.contacto-mensaje-contenido p {

    margin:0 auto;

    font-size:20px;

    line-height:1.85;

    font-weight:400;

    color:#333333;

}





/* ==================================================
   ESTADO ACTIVO DEL MENU
================================================== */

.pagina-contacto .menu a[aria-current="page"] {

    font-weight:700;

}





/* ==================================================
   TABLETS
================================================== */

@media(max-width:900px){


    .encabezado-contacto {

        padding:80px 25px 70px;

    }



    .encabezado-contacto h1 {

        font-size:46px;

    }



    .contacto-presentacion {

        padding:80px 25px;

    }



    .contacto-contenedor {

        grid-template-columns:1fr;

        gap:60px;

        max-width:720px;

    }



    .contacto-fotografia {

        max-width:390px;

    }



    .contacto-informacion {

        text-align:center;

    }



    .contacto-descripcion {

        max-width:650px;

        margin:0 auto;

        text-align:left;

    }



    .contacto-informacion h2 {

        font-size:34px;

    }



    .medios-contacto {

        padding:80px 25px;

    }



    .medios-contacto-encabezado h2 {

        font-size:34px;

    }



    .contacto-opciones {

        grid-template-columns:1fr;

        max-width:600px;

        margin:0 auto;

    }



    .contacto-opcion p {

        min-height:auto;

    }



    .contacto-mensaje {

        padding:80px 25px;

    }



    .contacto-mensaje-contenido p {

        font-size:18px;

    }


}





/* ==================================================
   MOVILES
================================================== */

@media(max-width:600px){


    .encabezado-contacto {

        padding:65px 20px 60px;

    }



    .contacto-etiqueta {

        margin-bottom:14px;

        font-size:11px;

        letter-spacing:2.3px;

    }



    .encabezado-contacto h1 {

        font-size:38px;

        letter-spacing:-1px;

    }



    .encabezado-contacto p {

        margin-top:18px;

        font-size:15px;

        line-height:1.8;

    }



    .contacto-presentacion {

        padding:65px 20px;

    }



    .contacto-contenedor {

        gap:48px;

    }



    .contacto-fotografia {

        max-width:320px;

    }



    .contacto-fotografia::before {

        top:14px;

        left:14px;

    }



    .contacto-informacion h2 {

        margin-bottom:24px;

        font-size:29px;

        letter-spacing:-.5px;

    }



    .contacto-descripcion p {

        margin-bottom:19px;

        font-size:15px;

        line-height:1.85;

    }



    .medios-contacto {

        padding:65px 20px;

    }



    .medios-contacto-encabezado {

        margin-bottom:40px;

    }



    .medios-contacto-encabezado h2 {

        font-size:29px;

    }



    .medios-contacto-encabezado p {

        margin-top:18px;

        font-size:15px;

        line-height:1.8;

    }



    .contacto-opciones {

        gap:20px;

    }



    .contacto-opcion {

        padding:34px 22px;

        border-radius:16px;

    }



    .contacto-opcion-icono {

        width:56px;

        height:56px;

        margin-bottom:20px;

    }



    .contacto-opcion h3 {

        font-size:19px;

    }



    .contacto-opcion p {

        font-size:14px;

        line-height:1.7;

    }



    .boton-contacto {

        width:100%;

        max-width:260px;

    }



    .contacto-dato {

        font-size:12px;

    }



    .contacto-mensaje {

        padding:65px 20px;

    }



    .contacto-mensaje-contenido p {

        font-size:16px;

        line-height:1.8;

    }


}





/* ==================================================
   MOVILES PEQUEÑOS
================================================== */

@media(max-width:380px){


    .encabezado-contacto h1 {

        font-size:34px;

    }



    .contacto-fotografia {

        max-width:280px;

    }



    .contacto-informacion h2 {

        font-size:26px;

    }



    .medios-contacto-encabezado h2 {

        font-size:26px;

    }



    .contacto-opcion {

        padding:30px 18px;

    }


}





/* ==================================================
   ACCESIBILIDAD
================================================== */

@media(prefers-reduced-motion:reduce){


    .contacto-opcion,

    .boton-contacto {

        transition:none;

    }



    .contacto-opcion:hover,

    .boton-contacto:hover {

        transform:none;

    }


}