/* Variables */
:root{
    --colorPrincipal: #191d23;
    --colorArgoa: #2193b7;
    --colorArgoaDos: #046280;
    --colorArgoaClaro: #0cbffb;
    --colorArgoaVerde: #2A9689;
    --colorBlanco: #f5f5f4;
    --colorCards: #F5F5F4;

    --margenSector: 24px 0;
    --bordesRadio: 8px;
}

main{
    margin-top: 90px;
    padding: 24px;}

h1, h2, h3, h4, h5, h6{
    font-size: 28px; 
    color: #fff; text-align: center;
    margin: 16px 0;}

h1{font-size: clamp(2.1rem, 1.2rem + 2vw, 2.5rem); margin-bottom: 32px; font-weight: 800;}
h1 span{color: var(--colorArgoaClaro);}
main p{color: #fff; font-size: clamp(1.125rem, 0.9rem + 0.5vw, 1rem); margin-bottom: 32px;}

.lineaGeneral{border-color: rgba(255, 255, 255, 0.7);}

/* Ejemplos y Plan */
#ruta{
    font-size: 1rem;
    margin: 0;
    text-align: center;}

#ruta a{color: var(--colorBlanco);}

.tituloOculto{display: none;}

#intro{margin: 0;}
#textoIntro{width: 100%;}

#precios{font-size: 1.2rem;}
#precios span{font-size: 1.5rem;}

.botonUno{
    width: 100%;
    height: 40px;
    margin: 0 auto 24px 0;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--bordesRadio);
    background-color: var(--colorArgoaVerde);
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3);}

#mensajePago{
    text-align: center;
    line-height: 25px;
}

#contratarModalLabel{
    margin-top: 0;
    font-weight: 700;
    font-size: 1.5rem !important;
    color: var(--colorArgoa);}

#formContratar{width: 100%; margin: auto; padding: 0 24px;}

#formContratar label, #formContratar input{display: block;}

#formContratar input{
    width: 100%;
    height: 40px;
    text-align: left;
    padding-left: 8px;
    margin-bottom: 24px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

#plan{font-weight: 700; margin-bottom: 32px !important;}

#botonContratar{
    width: 100%;
    height: 40px;
    border-radius: 6px;
    margin-top: 16px;
    color: var(--colorBlanco);
    border: none;
    font-weight: 700;
    background-color: var(--colorArgoa);
}

#demos{
    width: 100%;
    margin-top: 50px;}

#demos h2{font-size: 24px; font-weight: 500;}

#demosEjemplos{width: 100%;}

#demosEjemplos a{
    width: 100%; 
    display: block; 
    margin-bottom: 24px;
    border-radius: var(--bordesRadio);}

#demosEjemplos img{width: 100%; border-radius: var(--bordesRadio);}

/* Modal */
.img-thumbnail{padding: 0px; border: none; background-color: transparent;}




/* //////////////////////////// */

@media (min-width: 760px){
    main{padding: 50px 100px;}

    h1{text-align: left;}

    /* Ejemplos y Plan */
    #ruta{
    font-size: 1rem;
    margin: 0;
    text-align: left;}

    #ruta a{color: var(--colorBlanco);}

    #intro{margin: 0;}
    #textoIntro{width: 100%;}

    #precios{font-size: 1.2rem; text-align: center;}
    #precios span{font-size: 1.5rem;}

    .botonUno{
    width: 324px;
    height: 40px;
    margin: 0 auto 24px auto;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--bordesRadio);
    background-color: var(--colorArgoaVerde);}

    #demos{
    width: 100%;
    margin-top: 50px;}

    #demos h2{font-size: 24px;}
}

@media (min-width: 1024px){
    main{padding: 50px;}

/* Ejemplos y Plan */
    #ruta{
    font-size: 1rem;
    margin: 0;
    text-align: left;}

    #ruta a{color: var(--colorBlanco);}

    #intro{
    margin: 0;
    display: flex;
    justify-content: space-between;}

    #textoIntro{width: 48%;}

    #precios{font-size: 1.2rem; text-align: left;}
    #precios span{font-size: 1.5rem;}

    .botonUno{
    width: 324px;
    height: 40px;
    margin: 0 auto 24px 0;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--bordesRadio);
    background-color: var(--colorArgoaVerde);}

    #mensajePago{
    text-align: left;
    line-height: 25px;
    }

    #demos{
    width: 48%;
    height: 300px;
    margin: 0;}

    #demos h2{display: none;}  
    
    #demosEjemplos{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;}

    #demosEjemplos a{width: 48%; height: 106px; display: block; margin-bottom: 10%;}
    #demosEjemplos img{width: 100%;}
    
}

@media (min-width: 1200px){
    main{width: 80%; margin: 90px auto; padding: 50px 0;}

    h1{text-align: left;}

    #ruta a:hover{color: var(--colorArgoa);}

    #intro{
    margin: 0;
    display: flex;
    justify-content: space-between;}

    #textoIntro{width: 48%;}

    #precios{font-size: 1.2rem; text-align: left;}
    #precios span{font-size: 1.5rem;}

    .botonUno{
    width: 324px;
    height: 40px;
    margin: 0 auto 24px 0;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--bordesRadio);
    background-color: var(--colorArgoaVerde);}

    .botonUno:hover{box-shadow: 0 0 20px rgba(42, 150, 137, 0.7);}

    #demos{
    width: 48%;
    margin: 0;}

    #demos h2{display: none;}  
    
    #demosEjemplos{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    row-gap: 24px;
    justify-content: space-between;
    align-items: center;}

    #demosEjemplos a{width: 48%;}
    #demosEjemplos img{width: 100%;}






}