/* ==========================================================
   CYBERFRACTAL
   06-responsive.css
   Arquitectura v3.0
==========================================================*/


/*==========================================================
  PANTALLAS GRANDES
==========================================================*/

@media (min-width:1600px){

    #portada{

        max-width:1000px;

    }

}


/*==========================================================
  NOTEBOOKS
==========================================================*/

@media (max-width:1200px){

    #portada{

        width:94vw;

    }

}


/*==========================================================
  NOTEBOOKS PEQUEÑAS
==========================================================*/

@media (max-width:960px){

    #portada{

        width:96vw;

        padding:22px;

        row-gap:22px;

    }

}


/*==========================================================
  TABLETS
==========================================================*/

@media (max-width:768px){

    #hero h1{

        font-size:42px;

        letter-spacing:8px;

    }

    #lema{

        font-size:15px;

    }

    .boton-principal{

        min-width:180px;

    }

}


/*==========================================================
  CELULARES
==========================================================*/

@media (max-width:640px){

    #portada{

        padding:18px;

        row-gap:18px;

    }

    #hero h1{

        font-size:34px;

        letter-spacing:5px;

    }

    #lema{

        font-size:14px;

    }

    .boton-principal{

        width:100%;

        max-width:260px;

    }

}


/*==========================================================
  PANTALLAS BAJAS
==========================================================*/

@media (max-height:900px){

    #portada{

        row-gap:18px;

        padding-top:18px;

        padding-bottom:18px;

    }

}


@media (max-height:820px){

    #hero h1{

        font-size:40px;

    }

    #observatorio{

        max-width:720px;

    }

}


@media (max-height:740px){

    #hero h1{

        font-size:34px;

        letter-spacing:6px;

    }

    #lema{

        font-size:14px;

    }

    #observatorio{

        max-width:640px;

    }

    .boton-principal{

        padding:12px 32px;

    }

}


/*==========================================================
  REDUCCIÓN EXTREMA
==========================================================*/

@media (max-height:650px){

    #portada{

        padding:12px;

        row-gap:12px;

    }

    #hero h1{

        font-size:30px;

    }

    #observatorio{

        max-width:560px;

    }

}

@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}