/* ==========================================================================
   ELENA ROSS
   CONTACTO
========================================================================== */


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

#contacto{

    position: relative;

    width: 100%;

    background:
    linear-gradient(
        to top,
        var(--color-cuaternario) 0%,
        transparent 100%
    );

}


/* ==========================================================================
   CONTENIDO
========================================================================== */

.contacto-contenido{

    width: 100%;
    max-width: var(--ancho-maximo-web);

    margin: 0 auto;

    padding-top: 100px;

    text-align: center;

}


/* ==========================================================================
   ENCABEZADO
========================================================================== */



/* ==========================================================================
   TÍTULO
========================================================================== */

.contacto-encabezado h3{

    font-family: var(--fuente-romana);

    font-size: var(--size-titulos);

    letter-spacing: 0.1rem;

    font-weight: 400;

    line-height: 0.9;

    color: var(--color-principal);

    text-transform: uppercase;

    margin: 0;

}


/* ==========================================================================
   SUBTÍTULO
========================================================================== */

.contacto-encabezado p{

    font-family: var(--fuente-script);

    font-size: var(--size-subtitulos);

    font-weight: 100;

    line-height: 0.65;
    padding-top: 10px;
    padding-left: 35px;
    padding-right: 35px;

    color: var(--color-texto-subtitulo-marron);

    margin: 0;

    transform: translateY(-20px);

}


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

.contacto-info{

    width: 100%;
    max-width: var(--ancho-maximo-estrecho);

    margin: 50px auto 0;

    padding-left: 35px;
    padding-right: 35px;

}


/* ==========================================================================
   TEXTO
========================================================================== */

.contacto-texto{

    font-family: var(--fuente-textos);

    font-size: var(--size-texto);

    font-weight: 300;

    line-height: 1.3;

    color: var(--color-texto-marron);

}


/* ==========================================================================
   BOTÓN
========================================================================== */

.boton-contacto{

    display: inline-block;
    font-family: var(--fuente-textos);
    font-size: var(--size-subtitulo-adicional);
    color: var(--color-boton-estandar-marron);
    letter-spacing: 0.025rem;
    text-decoration: none;

    border: 1px solid var(--color-texto-marron);

    padding: 10px 20px;

    margin: 35px 0 35px 0;

    font-weight: 600;

    cursor: pointer;

    transition:
    color var(--duracion-transicion) var(--curva-transicion),
    transform var(--duracion-transicion) var(--curva-transicion),
    border-color var(--duracion-transicion) var(--curva-transicion);

}

.boton-contacto:hover{
    border: 1px solid var(--color-texto-verde);
    color: var(--color-boton-estandar-verde);
}