/*Todos los textos deben tener el mismo estilo de fuente "Rethink Sans", sans-serif
aqui se cargan y las demas propiedades como tamaño,color, decoración 
se aplican en el contexto donde se encuentre la etiqueta
se deja un tamaño de fuente base de 16px se deja en medida del ancho de la ventana (vw)
para que sea responsive, se deja:
- font-weight: 400 es de grosor regular para ver https://fonts.google.com/specimen/Rethink+Sans
SE DEJA EN MEDIDAS DE LA VENTANA de px a vw

*/
* {
    margin: 0;
    font-family: "Rethink Sans", sans-serif;
    /* font-size: 1.171vw; */
    /*16px; aprox.*/
    /* font-weight: 400; */
}

/* Este contenedor da un padding de 100px a la derecha e izquierda de la 
pantalla se usa para contener los componentes de cada seccion de la pagina  
se le cambian las propiedades dentro de cada seccion si es necesario */
.contenedorInterno {
    height: 100%;
    width: 100%;
    padding: 0 7.321vw;
    display: flex;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Le quita todos los estilos del elemento */
i,
a,
button {
    all: unset;
    cursor: pointer;
}

p {
    white-space: normal;
    word-break: break-word;
}


/* margenes de 50px en las secciones */

.contenedorPaginaInicioEnlacesRapidos,
.contenedorSeccionNoticiasPaginaPrincipal
{
    padding: 3.66vw 0;
}

.margenSecciones50PX{
    padding-top: 3.66vw;
    padding-bottom: 3.66vw;
}

/* estilos con display flex y alineacion centrada  */
.botonesNavegadorPaginaPrincipal,
#botonSelectNavegadorNosotros,
#botonSelectNavegadorPortales,
.contenedorSeccionNoticiasPaginaPrincipal .contenedorInterno,
.inicioPaginaPrincipal .contenedorBannerPiePagina .contenedorInterno,
.carruselDiasAgendaDiaria,
.diaCarrusel,
.contenedorFlexCentrado
{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* estilos con display flex pero alineados en colimna */
.contenedorSeccionNoticiasPaginaPrincipal,
.contenedorCalendarioPaginaPrincipal,
.contenedorCalendario,
#contenedorPopupMes .opciones,
.contenedorFlexColumna
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* estilos con bordes de 10px */
#botonSelectNavegadorPortales,
.tarjetaNoticiaContenidoBoton form button,
.tarjetaNoticiaContenido form button,
.tarjetaNoticiaContenidoGrande form button,
.botonBannerPiePagina,
.contenedorCalendarioAgenda,
.botonVerMas,
.bordeRedondeadoBotones
{
   border-radius: 0.732vw
}

/* estilos para select con listas personalizadas */
.contenedorOpcionesFiltro {
    display: none;
    background-color: transparent;
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
}

.contenedorOpcionesFiltro .opciones {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 6px 6px 4px 1px rgba(0, 0, 0, 0.04), -6px -6px 4px 1px rgba(0, 0, 0, 0.04);
    margin-top: 0.952vw;
}

.contenedorOpcionesMenuPaginaPrincipal{
    right: 5.3vw;
}

/* sombreado de componentes */
.bordeSombreado{
    box-shadow: 0px 0.22vw 0.732vw rgba(0, 0, 0, 0.04);
}

/* color de botones con degradado */
.tarjetaNoticiaContenidoBoton form button,
.tarjetaNoticiaContenido form button,
.tarjetaNoticiaContenidoGrande form button,
#botonSelectNavegadorPortales:hover

{
   background: linear-gradient(96deg, #387B2F 0%, #A8CF44 100%);
}
/* botones con borde blanco */
.botonBordeBlanco,
.botonBannerPiePagina{
    display: flex;
    align-items: center;
    column-gap: 1.025vw;
    width: max-content;
    padding: 0.732vw 1.977vw;
    color: #FFFFFF;
    font-size: 1.464vw;
    font-weight: 700;
    border: 0.146vw solid #FFFFFF;
}
/* botones con borde verde  */
.botonVerMas{
    width: max-content;
    color: #387B2F;
    font-size: 1.464vw;
    font-weight: 700;
    border: 0.146vw solid #A8CF44;
    padding: 0.732vw 2.928vw;
}

/* botones con borde verde  */
.botonLeerMas{
    width: max-content;
    color: #FFFFFF;
    font-size: 1.025vw;
    font-weight: 700;
    padding: 0.512vw 0.732vw;
    background: linear-gradient(96deg, #387B2F 0%, #A8CF44 100%);
}


/* cambio de color hover verde */
.botonEnlaceRapido:hover{
    color: #FFFFFF;
    background: linear-gradient(96deg, #A8CF44  0%, #387B2F  100%);
    border-bottom: 0.366vw solid transparent;
}
/* RELLENO BLANCO OPACO */
.componenteBlancoTransparente,
.botonBordeBlanco:hover{
    background: #E1E1E145;
}

/* botones con escala blancos */
.botonBannerPiePagina:hover{
    background: #E1E1E145;
    transform: scale(1.1);
}
/* botones con escala verde */
.botonVerMas:hover{
    background: linear-gradient(270deg, #387B2F 0%, #A8CF44 100%);
    color: white;
    border: 0px;
}

/* color fondo gris */
.contenedorSeccionGris{
    background-color: #ECECEC;
}

/* color fondo blanca */
.contenedorSeccionBlanca{
    background-color: #FFFFFF;
}

/* margen de 65px arriba y abajo, con una separacion de 65px */
.margenSeccionesNosotros{
    padding: 4.758vw 0;
    row-gap: 4.758vw;
}



/*con una separacion de 40px */
.margenSecciones{
    margin: 2.928vw 0;
}

/* imagen ocupa la mitad del componente */
.imagenMitad{
    width: 50%;
}
.imagenMargenCompleta{
    width: 100%;
}
.imagenMargenCompletaComponente{
    width: 100%;
    height: 100%;
}

.alinearContenidoIzquierda{
    justify-content: center;
    align-items: baseline;
}

.separacionExtremos{
    justify-content: space-between;
}
.centrarContenido{
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
}
/* margen de 63px arriba y 65 abajo */
.margenPaginaServicios{
padding: 4.612vw 7.321vw 4.758vw 7.321vw;
}

/* quitar scroll horizontal */
.margenSinScrollHorizontal{
    overflow: hidden;
}

.margenImagenesPiePagina{
    width: 100%;
    height: 26.94vw;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
}

.contenedorBannerCentradoPiePagina{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 5.051vw 0 4.026vw 0;
    row-gap: 1.684vw;
    text-align: center;
    box-sizing: border-box;
}

/* sobreponer componente sobre otros */
.componenteSuperior{
    z-index: 3;
}

/* Componentes de los Select de los formularios */

.inputFormularioCotizacion i{
    color: #387B2F;
}
.inputFormularioSelect{
    outline: None;
    border: None;
    border-radius: 10px;
    width: 34vw;
    height: 5vw;
    font-size: 1.537vw;
    background-color: #FFFFFF;
    color: #4C4C4C;
    opacity: 66%;
    font-style: italic;
    padding-left: 2vw;
}

.opcionSelectFormulario{
    font-size: 1.245vw;
    font-weight: 500;
    color: #4C4C4C;
    padding-left: 1.684vw;
    height: 2.782vw;
    align-items: center;
    display: flex;
}

.opcionSelectFormulario:hover{
    background-color: #D2ECCE;
}

.contenedorOpcionesSelect{
    border-radius: 10px;
    width: 39.9vw;
    background: #FFFFFF;
    box-shadow: 6px 6px 4px 1px rgba(0, 0, 0, 0.04), -6px -6px 4px 1px rgba(0, 0, 0, 0.04);
    margin-top: 1.464vw;
    position: absolute;
}

.contenedorInternoSelect{
    margin: 0.952vw 0;
    width: 100%;
}

/* ESTILO DE TÍTULO DE PÁGINA */

.textoAplastadoCentrado{
    line-height: 100%;
    padding: 0 2vw 4vw 0;
}

.tituloAltura{
    line-height: 150%;
}

.tituloBajoAltura{
    line-height: 30%;
}

.tituloAltura50{
    line-height: 0.5;
}

/* ESTILO DE PÁRRAFO JUSTIFICADO */

.justificado{
    text-align: justify;
}

/* ANIMACION ENTRADA COMPONENTE */
@keyframes mostrarDesdeIzquierda {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
} 

@keyframes mostrarDesdeAbajo {
    0% {
        transform: translateY(+100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
} 

/* ejemplos */