/*==================================================
    BASE.CSS
    Grupo Vivexa
    Estilos Globales
==================================================*/

/*==================================================
    VARIABLES GLOBALES
==================================================*/

:root{

    --azul:#0B1F3A;
    --azul-secundario:#163A67;

    --dorado:#FFC107;
    --dorado-hover:#E0A800;

    --blanco:#FFFFFF;
    --gris:#F8F9FA;
    --gris-claro:#EFEFEF;

    --texto:#444444;
    --texto-claro:#777777;

    --radio:18px;

    --sombra:0 12px 30px rgba(0,0,0,.08);

    --transicion:.30s ease;

}

/*==================================================
    RESET
==================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

/*==================================================
    BODY
==================================================*/

body{

    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;

    background:#fff;

    color:var(--texto);

    overflow-x:hidden;

    line-height:1.6;

}

/*==================================================
    ENLACES
==================================================*/

a{

    text-decoration:none;

    transition:var(--transicion);

}

a:hover{

    text-decoration:none;

}

/*==================================================
    IMÁGENES
==================================================*/

img{

    max-width:100%;

    height:auto;

    display:block;

}

/*==================================================
    SECCIONES
==================================================*/

section{

    padding:90px 0;

}

/*==================================================
    CONTENEDOR
==================================================*/

.container{

    position:relative;

}

/*==================================================
    TÍTULOS
==================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--azul);

    font-weight:700;

    margin-bottom:20px;

}

h1{

    font-size:3.5rem;

}

h2{

    font-size:2.5rem;

}

h3{

    font-size:2rem;

}

/*==================================================
    PÁRRAFOS
==================================================*/

p{

    color:var(--texto);

    margin-bottom:20px;

    line-height:1.8;

}

/*==================================================
    LISTAS
==================================================*/

ul{

    list-style:none;

    padding:0;

    margin:0;

}

/*==================================================
    FORMULARIOS
==================================================*/

input,
textarea,
select{

    border-radius:12px;

    transition:var(--transicion);

}

textarea{

    resize:none;

}

/*==================================================
    SOMBRAS
==================================================*/

.sombra{

    box-shadow:var(--sombra);

}

/*==================================================
    FONDOS
==================================================*/

.bg-vivexa{

    background:var(--azul);

    color:#fff;

}

.bg-gris{

    background:var(--gris);

}

/*==================================================
    TEXTOS
==================================================*/

.text-vivexa{

    color:var(--azul);

}

.text-dorado{

    color:var(--dorado);

}

/*==================================================
    ESPACIADOS
==================================================*/

.py-100{

    padding-top:100px;
    padding-bottom:100px;

}

.mt-60{

    margin-top:60px;

}

.mb-60{

    margin-bottom:60px;

}

/*==================================================
    ANIMACIONES
==================================================*/

.fade{

    transition:var(--transicion);

}

.zoom:hover{

    transform:scale(1.03);

}

/*==================================================
    SELECCIÓN DE TEXTO
==================================================*/

::selection{

    background:var(--dorado);

    color:#000;

}