@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Roboto:ital,wght@0,100..900;1,100..900&family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --fte-ppal: 'Roboto', sans-serif;
    --fte-banner: 'Concert One', sans-serif;
    --fte-adicional: 'Winky Sans', sans-serif;
    
    /* colores */
    --color-principal: #131313;
    --azul: #0F3877;
    --azul-claro: #3A63A1;
    --naranja: #F17E26;
    --verde: #88A494;
    --verde-claro: #D8E2CF;
    --gris: #707070;
}

body {
    background-color: #fff; font-family: var(--fte-ppal); font-size: 1rem; color: var(--color-principal);
}
img {
    height: 100%;
}
h1 { font-size: 2.5rem; text-transform: uppercase}
h2 { font-size: 2rem;}
h3, h4 { font-size: 1.5rem;}
.titulogrande {
    text-transform: uppercase; font-size: 2.5rem; font-weight: 800; color: var(--azul)
}

/** enlaces y botones  **/
a { text-decoration: none; color: var(--azul); }
a:hover { color: var(--naranja); }
.boton { margin: auto; padding: 8px 15px; color: var(--azul); border-radius: 3px; }
.boton:hover { background-color: var(--azul-claro) }
.b__ppal {  background-color: var(--naranja); color: #fff }
.b__ppal:hover { background-color: var(--azul-claro); color: #fff; }
.b__gris { background-color: var(--verde); color: #fff }
.b__gris:hover { background-color: var(--verde-claro); }
/** fin enlaces y botones  **/

/** textp  */
p.titulo {
    font-family: var(--fte-banner); color: var(--azul); font-size: 2rem; text-transform: uppercase; margin: 0;
}

/**  ELEMENTOS DEL FORMULARIO  **/
form {
    display: flex; flex-direction: column; margin: auto; width: 80%; align-items: center; justify-content: space-between;  flex-wrap: wrap;
}

fieldset {
    border: 1px solid #707070;
}
legend {
    text-transform: uppercase; color: var(--gris); font-optical-sizing: auto; margin-top: 20px;
}
fieldset em {
    color: var(--verde); font-size: .8rem;
}
label { 
    font-size: 0.8rem; color: var(--gris);
}

label i {
    color: var(--naranja);
}

input, textarea, select {
    margin: auto; margin-top: 5px; margin-bottom: 20px; width: 100%; display: inline-block; height: 40px; border: 1px solid #707070; padding: 15px; box-sizing: border-box;
}
textarea {
    min-height: 200px;
}
button {
    padding: 8px 15px; border-radius: 20px; background-color: var(--verde); color:#eaeaea; text-decoration: none; font-weight: 400; border: 0px; margin: auto;
}
/**  FIN ELEMENTOS DEL FORMULARIO  **/

/** CUERPO DEL SITIO  **/   
    /** estructuras  **/
section {
    display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 100vw;
}
.contenedor {
    margin: auto; width: min(90vw, 2100px); display: flex;
}
.presentacion {
    margin: auto; width: min(90vw, 2100px); display: flex; flex-direction: column; justify-content:center; align-items: center; padding: 30px 0px; box-sizing: border-box;
}
/** ENCABEZADO CON LOGO Y MENU PRINCIPAL */
.barra__superior {
    height: 30px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: var(--color-principal); border-bottom: 1px solid rgba(115, 115, 115, 0.5);
}
    .barra__superior a { color: #363636; }
    .barra__superior a:hover {color: #fff; }
.encabezado {
    height: 100px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #fff;
}
    .logo, .menu { margin: auto 0px; }
    .logo img { width: 250px; }
/**  MENU PRINCIPAL */
#check__menu, label.iconmenu { display: none; }
.menu ul {
    list-style-type: none; padding: 0; margin: 0; display: flex;
}
    .menu ul li { margin: 0; font-size: 1.2rem;}
    .menu ul li a { padding: 10px 10px; border-radius: 5px; }
    .menu ul li a:hover { background-color: var(--azul-claro); color: #fff; }
/** FIN MENU PRINCIPAL */
/** FIN ENCABEZADO */
        
    .buscador {
        margin: auto; height: 50px; display: flex; justify-content: space-around; background:rgb(15,56,119);
        background: linear-gradient(90deg, rgba(15,56,119,1) 0%, rgba(13,87,200,1) 100%);
    }
/**  BANNER DE LAS PAGINAS  */
.banner {
        margin: auto; height: auto; min-height: 400px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around;
        background: #ededed;
        background: linear-gradient(90deg, rgba(237, 237, 237, 1) 0%, rgba(200, 200, 204, 1) 37%, rgba(199, 199, 199, 1) 100%);
        word-spacing: 20%;
    }
    .banner-azul{
        background: #a1ffe1;
        background: linear-gradient(90deg,rgba(161, 255, 225, 1) 0%, rgba(27, 177, 222, 1) 36%, rgba(0, 206, 247, 1) 100%);
    }
    .banner .contenido {
        position: relative; margin: auto;
        width: min(90vw, 800px); display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
    }
    .banner h2 {
        font-size: 3rem;
    }
    .banner .texto {
        font-size: 1.8rem;
    }
    .banner .imagen {
        position: relative;
        height: 100%; max-height: 380px; display: flex; justify-content: center; margin: auto; overflow: hidden;
    }
    .banner .imagen img {
        height: auto; width: 100%; object-fit: contain;
    }
    .banner .boton { color: #fff; font-size: 1.3rem }
    /** fin estructuras  **/


.contenido {
    width: 90%; min-width: 300px; margin: auto; display: flex; justify-content: space-between;
}

    /**  GRIDS  **/
    .grid {
        position: relative; width: 100%; display: grid; gap: 20px;
    }

    .g-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gr-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    /**  FIN GRIDS  **/

    /**  CLASES DE FORMULARIOS  **/
    .buscador {
        position: relative; width: 90%;
    }
    /**  FIN CLASES DE FORMULARIOS  **/

/** ESTRUCTURAS DE PRESENTACIÓN DE PLANES */
.planes {
    display: flex; margin: auto; width: min(90vw, 1800px); flex-wrap: wrap;
}

    .card__planes {
        position: relative; margin: auto; width: 300px; height: 450px; transition: all .3s; display: flex; flex-direction: column; justify-content: space-between; border-radius: 25px;
    }
    .card__planes:hover { box-shadow: 2px 5px 10px rgba(115, 115, 115, 0.282) }

    .card__planes .imagen {
        position: relative; width: 100%; height: 240px; background-color: var(--azul-claro); border-radius: 15px; display: flex; overflow: hidden;
    }
    .card__planes .imagen img {
        position: relative; margin: auto; object-fit: contain;
    }

    .card__planes .content {
        position: relative; width: 100%; height: 200px; border-radius: 15px; border-top-left-radius: 0px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding: 10px; box-sizing: border-box;
    }

    .card__planes .content .price {
        position: absolute; top: -80px; left: 0; height: 70px; width: 50%; background-color: #fff; border-top: 10px solid #fff; border-right: 10px solid #fff; border-top-right-radius: 25px; display: flex; justify-content: space-around; color: var(--azul); font-size: 2rem; font-family: var(--fte-banner);
    }
    .card__planes .content .price em {
        font-size: .5em; bottom: 0;
    }
    /** car productos  */
    .card__productos {
        position: relative; margin: auto; margin-top: 25px; width: 250px; height: 350px; transition: all .3s; display: flex; flex-direction: column; justify-content: space-between; border-radius: 15px; border: 1px solid var(--azul-claro)
    }
    .card__productos:hover { box-shadow: 2px 5px 10px rgba(115, 115, 115, 0.282) }

    .card__productos .imagen {
        position: relative; width: 100%; height: 150px; border-radius: 15px; display: flex; overflow: hidden; background-color: #efefef;
    }
    .card__productos .imagen img {
        position: relative; margin: auto; object-fit: contain;
    }
    .card__productos .titulo {
        font-size: 1rem;
    }

    .card__productos .content {
        position: relative; width: 100%; height: 180px; border-radius: 15px; border-top-left-radius: 0px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding: 10px; box-sizing: border-box;
    }

    .card__productos .content .price {
        position: absolute; top: -50px; left: 0; height: 50px; width: 50%; background-color: #fff; border-top: 10px solid #fff; border-right: 10px solid #fff; border-top-right-radius: 25px; display: flex; justify-content: space-around; color: var(--azul); font-size: 1.5rem; font-family: var(--fte-banner);
    }
    .card__productos .content .price em {
        font-size: .5em; bottom: 0;
    }
    .beneficio {
        position: relative; margin: auto; width: 350px; height: auto; transition: all .3s; display: flex; flex-direction: column; justify-content: space-between; border-radius: 25px; text-align: center; padding: 15px; box-sizing: border-box;
    }
    .beneficio:hover { box-shadow: 2px 5px 10px rgba(115, 115, 115, 0.282) }
    
/** FIN PLANES */



/** FIN CUERPO DEL SITIO  **/

/** FOOTER  **/
.footer {
    clear: both; margin-top: 30px;
    background-color: #243E55; color: #fff; padding: 20px 0px; height: auto;
}
.footer__content {
    width: 90%; margin: auto; display: grid; gap: 1.5rem; justify-items: center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
    "logo social afip"
    "logo pie afip";
}
.footer__logopie {
    width: min(90%, 250px); overflow: hidden; margin: 0 auto;
    grid-area: logo;
}
.footer__logopie img {
    width: 250px; height: auto;
}
.footer__copy {
    width: min(90%, 450px);
    grid-area: info;
}
.footer__social {
    display: flex; flex-direction: column; justify-content: center;
    grid-area: social;
}
.footer__social nav {
    position: relative;
}
.footer__local {
    grid-area: pie;
}
.footer__links {
    text-align: center;
}
.footer__afip {
    grid-area: afip;
}
.footer__afip img {
    width: 60px; height: auto;
}
/** FIN FOOTER **/

/**  MEDIAS  **/
@media (width < 985px){
    .logo img { width: min(150px, 450px); }
    /** header menu  **/
    .encabezado .menu {
        width: 60px;
    }
    /***  MENU PRINCIPAL   **/
    label.iconmenu { display: flex; font-size: 2rem; margin: auto; padding: 10px;  }
    nav {position: absolute; width: 100%; margin: auto; left: 5px; }
    nav ul { flex-direction: column; background-color: #fff; position: relative; left: 0; top: 15px; width: 100%; height: auto; transition: all 300ms ease; z-index: 150; opacity: 0; visibility: hidden; }
    nav ul li { position: relative; width: 100%; height: 50px; text-align: left; padding: 0;  }
    nav ul li a { color: #082776; width: 100%; display: block;}
    nav ul li:hover ul { position: relative; display: flex; visibility: visible; opacity: 1; top: 10px; left: 5px; }
    nav ul li ul li { display: flex;margin:0;padding:0; }
    nav ul li ul::before { left: 50px; }
    #check__menu { display: none; }
    #check__menu:checked ~ nav > ul { height: auto; visibility: visible; opacity: 1; width: 100%; top: 10px; }
    /** FIN MENU **/
    /** footer  **/
    .footer__content {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        "logo social"
        "info afip"
        "pie pie";
    }
}

@media (width < 660px ){
    /** footer  **/
    .footer__content {
        grid-template-columns: 1fr;
        grid-template-areas:
        "logo"
        "info"
        "social"
        "afip"
        "pie";
    }
}