/* ---------- VARIABLES GLOBALES ---------- */
:root{
    --rojo-AF: #F13131;
    --guindo-AF: #82000D;
    --gris-AF: #E2E2E2;
    --gris-bordes-AF: #7d7c7c;
    --height-top-elementos-vh: 8.5vh;
    --radios-grandes: 35px;
    --radios-chicos: 7.5px;
    --bordes-gruesos-top: 3px;
}
body, html{
    font-family: "Poppins";
}





/* ---------- ELEMENTOS EN COMÚN ---------- */
.secciones{
    min-height: 100vh;
}
.spansTextoRojo{
    color: var(--rojo-AF);
}
.textosMayusculas{
    text-transform: uppercase;
}
.titulos{
    margin: 0px;
}
.columnaFlexCentrar{
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
}
.textosCuadrosRojos{
    color: white;
}
.textosJustificar{
    text-align: justify;
}
.textosPadding{
    padding: 15px 30px;
}
.textosClampCuadrosRojos{
    max-width: 40ch;
}
@media screen and (max-width: 767px) {
    .columnaSuperiorFlex{
        order: 1;
    }
    .columnaInferiorFlex{
        order: 2;
    }
}
.backgrounds-grises{
    background-color: var(--gris-AF);
}
@media screen and (max-width: 767px) {
    .textosCentrarAntesMD{
        text-align: center;
    }
}
.backgrounds-rojos{
    background-color: var(--rojo-AF);
}





/* ---------- PRIMERA SECCIÓN ---------- */
/* ---------- Logo ---------- */
#logoAlertaFamiliaMain{
    height: 150%;
    margin-left: 10%;
    transform: translateY(50%);
    min-height: 30px;
}
/* ---------- Onda de fondo ---------- */
#separadorContenido{
    height: 5vh;
    background-color: var(--gris-AF);
    border-left: solid 0.55vw var(--gris-bordes-AF);
    border-right: solid 0.71vw var(--gris-bordes-AF);
}
#rowContenido-Seccion1::before{
    content: url('../SVG/CABECERA.svg');
    width: 100%;
    position: absolute;
    z-index: -1;
    top: -1.5%;
}
/* ---------- Reglas para breakpoints ---------- */
@media screen and (max-width: 767px) {
    #separadorContenido{
        border-left: none;
        border-right: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #rowContenido-Seccion1::before{
        content: "";
        left: 0px;
        right: 0px;
        bottom: 25%;
        position: absolute;
        z-index: -1;
        top: -1%;
        background-image: url('../SVG/CABECERA.svg');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 250%;
    }
    #logoAlertaFamiliaMain{
        height: 100%;
    }
    #divImgCirculo{
        margin-top: 7.5vh;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    #logoAlertaFamiliaMain{
        height: 125%;
        transform: translateY(45%);
    }
    #tituloAlertaFamilia-1{
        margin-top: 5vh;
    }
}
/* ---------- Círculo con celular AF ---------- */
#divImgCirculo::after{
    position: absolute;
    content: "";
    background-image: url('../IMG/telefono_af1.png');
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
/* ---------- Pregunta AF ---------- */
#tituloAlertaFamilia-1{
    max-width: 14ch;
}
/* ---------- Cuadro rojo con información AF ---------- */
#infoAlertaFamilia{
    max-width: 90%;
    margin-top: 15px;
}
#infoAlertaFamilia::after{
    position: absolute;
    background-color: var(--rojo-AF);
    content: "";
    z-index: -1;
    border-radius: 15px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    transform: rotate(2.5deg);
}
#infoAlertaFamilia::before{
    position: absolute;
    background-color: var(--guindo-AF);
    content: "";
    z-index: -1;
    border-radius: 15px;
    top: 0px;
    bottom: 0px;
    left: 2.5%;
    right: 2.5%;
    transform: rotate(-2.5deg);
}





/* ---------- SEGUNDA SECCIÓN ---------- */
#seccion2-innovacion{
    background-image: url('../SVG/innova_bg.svg');
    background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
    #seccion2-innovacion::before{
        position: absolute;
        content: "";
        top: 16.5%;
        right: 0px;
        left: 0px;
        bottom: 0px;
        background-color: var(--gris-AF);
        z-index: -1;
    }
    #rowIMGDesc-1{
        justify-content: center!important;
        align-items: center!important;
    }
}
@media screen and (min-width: 768px) {
    #seccion2-innovacion::before{
        position: absolute;
        content: "";
        top: 55%;
        right: 0px;
        left: 0px;
        bottom: 0px;
        background-color: var(--gris-AF);
        z-index: -1;
    }
    #seccion2-innovacion{
        background-position-y: 20%;
        background-size: 100%;
        background-position-x: 100%;
        background-image: url('../SVG/innova_bg.svg');
        background-repeat: no-repeat;
    }
}
/* ---------- Heading Innovacion ---------- */
#divContenedorHeading-Innovacion{
    width: fit-content;
    background-color: var(--rojo-AF);
    color: white;
    z-index: 1;
    position: relative;
}
#divContenedorHeading-Innovacion::after{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    content: "";
    min-height: 185%;
    width: 25%;
    aspect-ratio: 1 / 1;
    background-color: var(--rojo-AF);
    border-radius: 50rem;
    transform: translateX(-50%);
    z-index: -1;
}
#divContenedorHeading-Innovacion-2{
    background-color: var(--guindo-AF);
    color: var(--guindo-AF);
    transform: rotate(2deg);
    top: 0px;
    right: 0px;
    z-index: 0;
    position: relative;
}
#divContenedorHeading-Innovacion-2::after{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    content: "";
    width: 25%;
    min-height: 185%;
    aspect-ratio: 1 / 1;
    background-color: var(--guindo-AF);
    border-radius: 50rem;
    transform: translateX(-50%);
    z-index: -1;
}
.contenedoresRellenoInnovacion{
    padding-right: 10vw!important;
}
/*#headinInnovacion::before{
    content: "";
    display: block;
    width: 60%;
    height: 120%;
    position: absolute;
    border-radius: 55%;
    top: 100%;
    left: 13.5%;
    z-index: -1;
    box-shadow: -2em -0.85em 0 0 var(--rojo-AF);
}*/
#divContenedorHeading-Innovacion::before{
    content: url('../SVG/innova2.svg');
    height: 2em;
    width: 2em;
    position: absolute;
    top: 95%;
    left: 10%;
}
@media screen and (min-width: 768px) and (max-width: 1250px) {
    #divContenedorHeading-Innovacion::before{
        top: 95%;
        left: 8%;
    }
}
@media screen and (max-width: 767px) {
    #divContenedorHeading-Innovacion::before{
        content: "";
    }
}
@media screen and (max-width: 767px) {
    #divContenedorHeading-Innovacion-2::after, #divContenedorHeading-Innovacion::after{
        min-height: 155%;
        width: 22.5%;
    }
}
/* ---------- Descripción App ---------- */
/*@media screen and (min-width: 768px) {
    #textosPiramideInnovacion{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
    }
    .spansTextoPiramidal{
        width: 100%;
        text-align: end;
    }
}*/
#imgBannerInnovacion{
    height: auto;
    max-height: 20rem;
    width: auto;
    max-width: 100%;
}





/* ---------- TERCERA SECCIÓN ---------- */
/* ---------- Descripción Seguridad ---------- */
#sMayusHeading{
    z-index: 1;
}
#sMayusHeading::before{
    position: absolute;
    content: "";
    height: 1.25em;
    width: 1.25em;
    aspect-ratio: 1 / 1;
    background-color: var(--rojo-AF);
    border-radius: 50rem;
    z-index: -1;
    transform: translate(-25%, 0%);
}
#textoDesc-1{
    max-width: 65ch;
    text-align: justify;
}
/* ---------- Heading Acciones Preventivas ---------- */
#spanMainPrev, #sPrevHeading{
    z-index: 1;
}
#sPrevHeading::before{
    position: absolute;
    content: url('../SVG/acciones.svg');
    height: 1.25em;
    width: 1.25em;
    aspect-ratio: 1 / 1;
    background-color: var(--rojo-AF);
    border-radius: 50rem;
    z-index: -1;
    transform: translate(25%, 0%);
    right: 0px;
}
/* ---------- Cards Características App ---------- */
.textosDescCardInfoPTag{
    font-size: 0.85rem;
}
.cardsInformativas{
    background-color: white;
    border-radius: var(--radios-chicos);
    height: 100%;
    padding-bottom: 50%!important;
    max-width: 25ch;

    background-repeat: no-repeat;
    background-size: 130%;
    background-position: bottom;
    background-position-y: 122.5%;
}
#cardInfo-1{
    background-image: url('../IMG/ubicacion.png');
}
#cardInfo-2{
    background-image: url('../IMG/geocerca.png');
}
#cardInfo-3{
    background-image: url('../IMG/abordar.png');
}
#cardInfo-4{
    background-image: url('../IMG/info_medica.png');
}
@media screen and (min-width: 992px) {
    .cardsInformativas{
        background-position-y: 150%;
    }
    #cardInfo-2{
        background-size: 115%;
    }
}
#rowMaxChars{
    max-width: 105ch;
}
#divBackSeguridad{
    z-index: 1;
}
#divBackSeguridad::after{
    position: absolute;
    content: "";
    top: 90%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: var(--rojo-AF);
    z-index: -1;
}





/* ---------- CUARTA SECCIÓN ---------- */
/* ---------- Tipos de alertas ---------- */
#imgAlertaFamiliaApp, #imgAlertaFamiliaFiesta{
    width: auto;
    max-width: 100%;
    height: auto;
}
.textosAlertas{
    position: relative;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
}
.textosAlertas::after{
    position: absolute;
    content: "";
    width: 1rem;
    height: 1rem;
    bottom: 0px;
    left: 0px;
    transform: translate(-65%, 50%);
    border-radius: 50rem;
    background-color: white;
}
.textosDescAlerta{
    color: white;
    text-align: justify;
}
.cuadrosTipoAlertas{
    border-left: 4px solid white;
}
#divTiposAlertasMain{
    z-index: 1;
}
#divTiposAlertasMain::after{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-image: url('../SVG/rojo_crop.svg');
    background-repeat: no-repeat;
    background-size: 100vw;
    background-position: bottom right;
}
@media screen and (max-width: 767px) {
    #divTiposAlertasMain::after{
        background-image: url('../SVG/circulo_rojo.svg');
        background-repeat: no-repeat;
        background-size: 300% 300%;
        background-position: center right;
        background-position-x: 2.5vw;
    }
}





/* ---------- QUINTA SECCIÓN ---------- */
/* ---------- Vámonos de fiesta ---------- */
#divVamonosFiesta{
    z-index: 1;
}
#divVamonosFiesta::before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-image: url('../SVG/confeti.svg');
    background-repeat: no-repeat;
    background-size: 150vh 150vh;
    background-position: top right;
    background-position-y: -50vh;
    background-position-x: -25vw;
}
#divVamonosFiesta::after{
    content: "";
    position: absolute;
    z-index: -2;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-image: url('../SVG/amarillo_crop.svg');
    background-repeat: no-repeat;
    background-size: 100vw;
    background-position: top right;
}
@media screen and (max-width: 767px) {
    #divVamonosFiesta::after{
        background-image: url('../SVG/circulo_amarillo.svg');
        background-repeat: no-repeat;
        background-size: 300% 300%;
        background-position: center left;
        background-position-x: -150vw;
    }

    #divVamonosFiesta::before{
        background-repeat: no-repeat;
        background-size: 300vw 300vh;
        background-position: top right;
        background-position-y: -95vh;
        background-position-x: -85vw;
    }
}
@media screen and (min-width: 992px) {
    #divVamonosFiesta::before{
        background-position-x: 0vw;
    }
}
/* ---------- Contenedor te quieres divertir ---------- */
#infoTeQuieresDivertir{
    max-width: 50ch;
    margin-top: 15px;
    z-index: 2;
}
#textoHeadDivFiesta{
    max-width: 20ch;
}
#infoTeQuieresDivertir::after{
    position: absolute;
    background-color: var(--rojo-AF);
    content: "";
    z-index: -1;
    border-radius: 25px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    transform: skewX(-10deg);
}
#infoTeQuieresDivertir::before{
    position: absolute;
    background-color: var(--guindo-AF);
    content: "";
    z-index: -1;
    border-radius: 25px;
    top: 0px;
    bottom: 0px;
    left: 10%;
    right: 10%;
    transform: rotate(20deg) skewX(-10deg);
}
@media screen and (max-width: 480px) {
    #infoTeQuieresDivertir::before{
        transform: rotate(10deg) skewX(-5deg);
        overflow: hidden;
    }
    #infoTeQuieresDivertir::after{
        left: 5%;
        right: 5%;
        overflow: hidden;
        transform: skewX(-5deg);
    }
}
/* ---------- Contenedor se te pasaron los tragos ---------- */
#divBlancoFiesta{
    z-index: 2;
    max-width: 50ch;
    background-color: white;
    border-radius: 15px;
    background-image: url('../IMG/bebida.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 50%;
    background-position-y: 120%;
    background-position-x: 110%;
    padding-bottom: 15%!important;
}





/* ---------- SEXTA SECCIÓN ---------- */
#divMonitoreoNav{
    z-index: 1;
}
.imgCelularesNavMon{
    width: auto;
    max-width: 100%;
    height: auto;
}
#textoInfoMapas-1, #textoInfoMapas-2{
    font-size: 0.85rem;
    max-width: 35ch;
}

#divMonitoreoNav::after{
    content: url('../SVG/nav_mon_2.svg');
    position: absolute;
    background-color: white;
    left: 0px;
    right: 0px;
    bottom: -45%;
    z-index: -1;
}
@media screen and (min-width: 768px) and (orientation: portrait) {
    #divMonitoreoNav::after{
        bottom: -25%;
    }
}
@media screen and (max-width: 767px) {
    #divMonitoreoNav::after{
        bottom: -24.5%;
    }
}
@media screen and (max-width: 350px) {
    #divMonitoreoNav::after{
        bottom: -20%!important;
    }
}
@media screen and (orientation: portrait) {
    #divMonitoreoNav::after{
        bottom: -24%;
    }
}
@media screen and (min-width: 1550px) and (max-width: 1650px) {
    #divMonitoreoNav::after{
        bottom: -50%;
    }
}
@media screen and (min-width: 1651px) and (max-width: 1900px) {
    #divMonitoreoNav::after{
        bottom: -60%;
    }
}
@media screen and (min-width: 1901px) {
    #divMonitoreoNav::after{
        bottom: -75%;
    }
}
/* ---------- Imagen del final de contenedor (separador) ---------- */
#imgSeparador1{
    background-color: transparent;
    z-index: 5;
    margin-top: -25%;
}
#containerDivMonNav{
    transform: translateY(-15%);
}
@media screen and (min-width: 768px) and (orientation: portrait) {
    #containerDivMonNav{
        transform: translateY(-10%);
    }
}
@media screen and (max-width: 767px) {
    #rowMainMonNav{
        display: none;
    }
    #rowSecMonNav{
        display: initial!important;
    }
    #containerDivMonNav{
        transform: none;
    }
}





/* ---------- SÉPTIMA SECCIÓN ---------- */
#divBtnBT{
    z-index: 1;
}
@media screen and (max-width: 767px) {
    #headingDescBtnBT{
        text-align: center!important;
    }
    #textoDescBtnBT{
        text-align: justify!important;
    }
}
@media screen and (min-width: 768px) and (orientation: portrait) {
    #containerBtnBT{
        padding-top: 0px!important;
    }
    #containerBtnBT{
        padding-top: 0px!important;
    }
}





/* ---------- OCTAVA SECCIÓN ---------- */
#seccionDescargar{
    z-index: 1;
}
#seccionDescargar::before{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: calc(100% - 50px);
    content: "";
    z-index: -1;
    border-bottom: 50px solid var(--gris-AF);
    border-right: 100vw solid transparent;
    background-color: white;
}
#seccionDescargar::after{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -50%;
    content: url('../SVG/descarga_2.svg');
    background-color: white;
    z-index: -1;
}
#textoDesDescApp{
    max-width: 30ch;
}
.btnRojosAF{
    background-color: var(--rojo-AF);
}
@media screen and (max-width: 767px) {
    .btnRojosAF{
        width: 15ch;
    }
    #seccionDescargar::after{
        bottom: -15%;
    }
}
@media screen and (min-width: 1550px) and (max-width: 1650px) {
    #seccionDescargar::after{
        bottom: -50%;
    }
    #seccionDescargar{
        margin-top: 8%;
    }
}
@media screen and (min-width: 1651px) and (max-width: 1900px) {
    #seccionDescargar::after{
        bottom: -75%;
    }
    #seccionDescargar{
        margin-top: 8%;
    }
}
@media screen and (min-width: 1901px) {
    #seccionDescargar::after{
        bottom: -90%;
    }
    #seccionDescargar{
        margin-top: 8%;
    }
}





/* ---------- NOVENA SECCIÓN ---------- */
#seccionCostos{
    z-index: 1;
    margin-top: 15%;
}
@media screen and (min-width: 1550px) {
    #seccionCostos{
        margin-top: 20%;
    }
}
@media screen and (max-width: 767px) {
    #seccionCostos{
        margin-top: 25%;
    }
}
@media screen and (min-width: 768px) and (orientation: portrait) {
    #seccionCostos{
        margin-top: 20%;
    }
}
.cuadrosRojosCostos{
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 20ch;
}
.cuadrosRojosCostos::after{
    z-index: -1;
    content: "";
    position: absolute;
    background-color: var(--rojo-AF);
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border-radius: var(--radios-chicos);
    transform: skewX(1.5deg) rotate(2.5deg);
}
.cuadrosRojosCostos::before{
    z-index: -2;
    content: "";
    position: absolute;
    background-color: var(--guindo-AF);
    top: -2%;
    bottom: -2%;
    left: 10%;
    right: 10%;
    border-radius: var(--radios-chicos);
    transform: skewX(1.5deg) rotate(-5deg);
}
.textosCuadrosRojosCostos{
    text-align: center;
    color: white;
}
p.textosCuadrosRojosCostos{
    font-size: 0.85em;
}
.textosPautasCuadrosRojos{
    font-weight: 200;
    text-transform: uppercase;
}





/* ---------- DÉCIMA SECCIÓN ---------- */
@media screen and (max-width: 767px) {
    #headingManualesTop{
        display: initial!important;
    }
    #headingManualesBottom{
        display: none;
    }
    #divBotonesDescarga{
        justify-content: center!important;
        align-items: center!important;
    }
}
.btnManuales{
    background-color: var(--rojo-AF);
    line-height: 1;
    min-width: 25ch;
}
#divManualUsuario::after{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -55%;
    content: url('../SVG/pie.svg');
    z-index: -1;
}
@media screen and (max-width: 767px) {
    #divManualUsuario::after{
        bottom: -12.5%;
    }
}
@media screen and (min-width: 768px) and (orientation: portrait) {
    #divManualUsuario::after{
        bottom: -55%;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
    #divManualUsuario::after{
        bottom: -65%;
    }
}
@media screen and (min-width: 768px) and (max-width: 950px) {
    #divManualUsuario::after{
        bottom: -65%;
    }
}
@media screen and (min-width: 951px) and (max-width: 1199px) {
    #divManualUsuario::after{
        bottom: -75%;
    }
}





/* ---------- ONCEAVA SECCIÓN ---------- */
#iconosRedesSociales{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
}
.iconosRedesSocialesFooter{
    font-size: 1rem;
    padding: 0.35rem;
    line-height: 1;
    width: 1.5rem;
    height: 1.5rem;
    background-color: white;
    color: var(--rojo-AF);
    border-radius: 50rem;
}
#footerRedesSociales{
    margin-top: 24vh;
}

@media screen and (max-width: 350px) {
    #footerRedesSociales{
        margin-top: 12.5vh;
    }
}
@media screen and (min-width: 351px) and (max-width: 400px) {
    #footerRedesSociales{
        margin-top: 9.75vh;
    }
}
@media screen and (min-width: 401px) and (max-width: 479px) {
    #footerRedesSociales{
        margin-top: 10vh;
    }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
    #footerRedesSociales{
        margin-top: 9vh;
    }
}
@media screen and (min-width: 768px) and (max-width: 950px) {
    #footerRedesSociales{
        margin-top: 18vh;
    }
}

/*@media screen and (max-width: 450px) {
    #footerRedesSociales{
        margin-top: 20%!important;
    }
}
@media screen and (max-width: 767px) {
    #footerRedesSociales{
        margin-top: 15%;
    }
    #iconosRedesSociales{
        justify-content: center;
    }
}
@media screen and (min-width: 768px) and (orientation: portrait) {
    #footerRedesSociales{
        margin-top: 24%!important;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
    #footerRedesSociales{
        margin-top: 16%!important;
    }
}
@media screen and (min-width: 768px) and (max-width: 950px) {
    #divManualUsuario::after{
        bottom: -65%;
    }
    #footerRedesSociales{
        margin-top: 15%;
    }
}
@media screen and (min-width: 951px) and (max-width: 1199px) {
    #divManualUsuario::after{
        bottom: -75%;
    }
    #footerRedesSociales{
        margin-top: 15%;
    }
}*/