:root {
    --color-amarillo: rgb(231, 231, 22);
    --color-fondoClaro: rgba(128, 128, 128, 0.493);
    --color-parrafosGrisClaro: rgb(197, 196, 196);
    --color-fondoGrisOscuro: rgb(100, 99, 99);
    --letra-titulos: monospace;
    --letra-parrafos: 'Courier New', Courier, monospace;
}

@media (max-width: 990px) {

    /* PORTADA */

    #SectionPortada {
        padding-top: 20px;
        height: 140vh;
        min-height: 100vh;
        padding-bottom: 30px;
    }

    .divContenedorPortada {
        height: 100%;
        margin-top: 40px;
        flex-direction: column;
        width: max (700px 90%);
    }

    .divImg {
        width: 100%;
        height: 35%;
        background-color: rgb(231, 231, 22);
        background-image: url(./jsPortadaChica.PNG);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        border: none;
    }

    .divTexto {

        flex-direction: column;
        justify-content: center;
        width: 100%;
        order: 2;
        border: none;
        box-shadow: 10px 10px 15px;
        gap: 15px;
    }

    .textLeft {
        width: 100%;
    }

    .textLeft h1,
    .textLeft h2,
    .textRight h3,
    .textRight h4 {
        font-size: 1.5rem;
        padding: 0;
        margin: 0;
    }

    .textRight {
        width: 100%;
    }

    /* ***********************************************    CARROUSEL    ********************************************************* */
    #SectionCarrousel {
        padding-top: 10px;
    }

    #SectionCarrousel h1 {
        font-size: 1.2rem;
    }

    #SectionCarrousel h2 {
        font-size: 0.9rem;
    }

    .carouselContenedor {

        height: auto;
        margin: 50px 0px;
        width: 95%;
    }

    .carouselContenedor:hover {
        transform: scale(1.00);
    }


    .divTitulos {
        width: 90%;
        padding: 15px 0px;
    }



    /* ***********************************************    CONTACTANOS    ********************************************************* */


    #sectionContacto {
        min-height: 100vh;
    }


    .divContactoContenedor {
        height: 100%;
        flex-direction: column;
        margin: 30px 0px;
    }

    .divImgContacto {
        height: 45%;
        width: 100%;
        background-position: bottom;
    }

    .divFormContacto {
        width: 100%;
    }

    .contactoForm {
        gap: 2px;
    }


    /* ******************************************      USUARIOS REGISTRO INICIAR SESION     **************************************** */
    #usuarioSection {
        min-height: 160vh;
    }


    .usuarioDiv {
        margin-top: 0px;
        flex-direction: column;
        min-height: 150vh;
        align-items: none;
    }

    .divImgHola {
        background-image: url(./imagenesChicas/bienvenido2.jpg);
        height: 45%;
        width: 100%;
        border-bottom: solid 3px var(--color-amarillo);
    }

    .ingresarDiv,
    .registrarseDiv {
        width: 100%;
    }



    /* FOOTER */
    .footer h3 {
        font-size: 1rem;
    }

    /* Consigna 11b imagen de messi */
    .messiResponsive {
        width: 100%;
    }


}

  /* *************************************************      MAS FUNCIONES   ************************************************ */

  @media (max-width: 768px) {

    /* div contenedor de msjs de error */
    .divMensaje {
        width: min(420px, 85%);
    }

    PARA MENU HAMBURGUESA

    /* SECTION DE MAS FUNCIONES */
    .sectionGeneral {
        width: 100%;
        padding: 0;
        padding-bottom: 40px;
    }

    .sectionGeneral h1 {
        width: 90%;
    }

    .sectionGeneral div {
        width: 92%;
    }

    #divBtnRes {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .btnsMasFunciones {
        width: 95%;
        padding: 0
    }

    .pResultado {
        width: 95%;
    }

    /* tabla en resoluciones chicas */
    .div9 {
        padding: 15px 0;
    }

    .div9 h3 {
        padding-left: 20px;
    }

    #divBtnRes9 {
        width: 100%;
    }

    .p9 {
        width: 100%;
        padding: 0;
    }

    /* Consigba 10b segunda imagen de messi al pasar el mouse por la primera */
    .messiResponsive2 {
        background-size: cover;
    }


    /* ESTILOS INDEX TEMPLATES DE NOTICIAS */
    #contenedorNoticias, #contenedorNoticiasOpc2, #contenedorNoticiasOpc3{
        flex-direction: column;
    }

    #divNoticiaPrincipal, #divNoticiaPrincipalOpc2, #divNoticiaPrincipalOpc3{
        width: 100%;
    }

    .contenedorCardsChicas{
        width: 100%;
        justify-content: center;
        flex-direction: column;

    }

    #cardNoticia, #cardNoticiaOpc2, #cardNoticiaOpc3{
        width: 100%;
    }
}

/* MEDIA PARA CARROUSEL IMAGENES CEL EN VERTICAL */
@media (max-width: 721px) {



    /* MENU HAMBURGUESA */
    /* oculto el menu horizontal */
    .ulHeader {
        display: none;
    }

    /* muestra el icono menu hamburguesa */
    #MenuHamburugesa {
        display: block;
    }

    nav {
        justify-content: flex-end;
    }

    /* class agregada con js al ulHeader anterior */
    .menuResponsive {
        background-color: var(--color-amarillo);
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
        top: 65px;
        width: 100%;
        padding: 40px 0;
        padding-right: 20px;
        box-shadow: 0px 10px 15px;
        z-index: 2;
    }

    .menuResponsive a {
        font-size: 1rem;
        font-weight: 900;
        letter-spacing: 1px;
    }

    #SectionPortada {
        padding-top: 35px;
    }


    /* CARROUSEL */
    /* agrego hidden en x , al estirar las imagenes salen del ancho. */
    #SectionCarrousel {
        overflow-x: hidden;
    }

    .carouselContenedor,
    .divImgCarrousel {
        width: 140%;
    }

    #imagen {
        height: 60vh;
    }

    .btnAnterior {
        left: 15%;
    }

    .btnSiguiente {
        right: 15%;
    }
  


}

@media (max-width: 576px){
  

}