@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
:root {
    /*===== Colores =====*/
    /* Paleta de colores */
    /* Primario */
    --primario-color: #ff274b;
    --luz-color-primario: #FF5A75;
    --sombra1-primario-color: #D0203E;
    --sombra2-primario-color: #A01A31;
    /* Secundario */
    --secundario-color: #60C7B6;
    --luz-color-secundario: #89D6C9;
    --sombra1-secundario-color: #4BA595;
    --sombra2-secundario-color: #3A8578;
    /* Acento */
    --acento-color: #ffd432;
    --luz-color-acento: #FFE066;
    --sombra1-acento-color: #D4AF2A;
    --sombra2-acento-color: #A78921;

    --bg-color-light: #fefefe;
    --bg-color-dark: #080808;
    /*===== Fuente y tipografia =====*/
    --body-font: 'Poppins', sans-serif;
  }

body {
    font-family: var(--body-font);
    background-color: var(--bg-color-dark);
    color: var(--bg-color-light);
    margin-top: 0px;
}
/* NAV + HERO */
.nav-inicio-grande {
    height: 80vh;
    background-image: url('../img/fondo-inicio.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; 
    padding: 0px 30px;
}

nav {
    width: 100%;
    font-size: clamp(11px, 1vw, 14px);
    /* padding: 10px; */
}

.contenedor-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 15px 0px;
}

.contenedor-nav > div:first-child {
    width: 50%;
    display: flex;
    align-items: center;
}
.contenedor-nav > div:first-child img {
    width:220px;
    height: 55px;
}

.contenedor-nav > div:last-child {
    width: 50%;
    display: flex;
    justify-content: flex-end;
}

.contenedor-ul-nav ul {
    display: flex;
    list-style: none;
    padding: 0px 20px 0px 0px;
    margin: 0;
    justify-content: space-between;
    align-items: center;
}


.contenedor-ul-nav ul a {
    text-decoration: none;
    color: var(--bg-color-light);
}

.contenedor-ul-nav ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 10px 20px 10px 20px;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}

.contenedor-ul-nav ul li:hover {
    background-color: #ffffff27;
}

.contenedor-ul-nav ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    gap: 5px;
}

.btn-prueba-gratis-nav {
    border: none;
    padding: 14px 20px;
    margin-left: 10px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
}

.btn-prueba-gratis-nav.hero {
    margin-top: 3rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 16px;
    padding: 20px 40px;
    background-color: var(--primario-color);
    color: var(--bg-color-light);
}

.btn-prueba-gratis-nav:hover {
    background-color: var(--primario-color);
    color: var(--bg-color-light);
}

.btn-prueba-gratis-nav.hero:hover {
    background-color: var(--luz-color-primario);
}

/* Hero nav*/
.nav-inicio-grande .contenedor-hero {
    display: flex;
    justify-content: space-around;
    /* gap: 100px; */
}
.nav-inicio-grande .contenedor-hero .contenedor-hero-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.nav-inicio-grande .contenedor-hero .contenedor-hero-texto h1 {
    font-size: 2.5rem;
    margin: 0px;
}
.nav-inicio-grande .contenedor-hero .contenedor-hero-texto p {
    font-size: 1.1rem;
}

/* ---------------------------------------------------------- */

/* Seccion PLANES */
section.planes {
    background: linear-gradient(90deg, #0f0f0f 0%, #000000 81%);
    text-align: center;
    padding: 50px 20px;
    margin-bottom: 60px;
}
section.planes h1.h1-planes {
    font-size: 2.3rem;
    margin-bottom: 10px;
}
section.planes .contenedor-planes {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    gap: 20px;
    margin-top: 40px;
}
section.planes .contenedor-plan {
    border-radius: 15px;
    border:solid 1px #89d6c97d;
    width: max-content;
    min-width: 340px;
    min-height: 210px;
    box-sizing: border-box;
    text-align: left;
    padding: 15px;
}

/* Me rompia el diseño */

/* section.planes .contenedor-plan.recomendado {
    display: flex;
    flex-direction: column;
    border-radius: 0 0 8px 8px;
    border-top: none;
    height: 440px;
}
.contenedor-plan.recomendado .contenedor-data-popular {
    position:relative;
    top:-56px;
}
.el-mas-popular {
    display: flex;
    justify-content: center;
    position: relative;
    top: -73px;
    right: 15px;
    width: 100%;
    margin: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: var(--secundario-color);
    padding: 0px 15px;
}
section.planes .contenedor-plan.recomendado .el-mas-popular {
    background-color: var(#60c7b6ba);
} */

.contenedor-plan .costo {
    font-size: 0.9rem;
}
.contenedor-plan .costo span {
    font-size: 2.5rem;
}
.contenedor-plan hr {
    border: none;
    height: 2px;
    background-color: #2C2C2C;
    margin: 20px 0;
}
.contenedor-plan .emnpezar-ahora {
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    margin-top: 30px;
    margin-bottom: 0px;
    cursor: pointer;
    color: #60c7b6eb;
    background-color: transparent;
    border:solid 1px #60C7B6;
}
.contenedor-plan .emnpezar-ahora:hover {
    background-color: #60c7b6eb;
    color: rgb(224, 224, 224);
}
section.planes .contenedor-plan:hover {
    box-shadow: 3px 2px 8px rgba(163, 163, 163, 0.289);
    background-color: #111111;
}
section.planes .contenedor-plan h2 {
    color: var(--bg-color-light);
    font-weight: 600;
    margin: 7px;
    font-size: 0.9rem;
}
section.planes .contenedor-plan h3 {
    margin: 7px;
}
section.planes .contenedor-plan h4 {
    font-weight: 400;
    margin: 7px;
}
.contenedor-plan .ul-planes p {
    display: flex;
    gap: 10px;
    font-size: 0.7rem;
    color: #fefefee8;
}
.contenedor-plan .ul-planes p.incluye {
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 20px;
}


.btn-prueba-gratis-nav.planes {
    margin-top: 3rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 16px;
    padding: 20px 40px;
    background-color: var(--acento-color);
    color: var(--bg-color-light);
}

.btn-prueba-gratis-nav.planes:hover {
    background-color: var(--sombra1-acento-color);
}

/* Section carousel */
section.carousel-container {
    overflow: hidden;
    width: 100%;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.carousel {
    display: flex;
    transition: transform 0.3s ease-out;
}

.carousel img {
    width: auto;
    height: 150px;
    margin: 0 10px;
}
/* ----------------------------------------------------------- */
/* Section FAQ */
section.faq {
    margin-top: 5rem;
}
section.faq h1.titulo-faq {
    text-align: center;
    font-size: 3.5rem;
}
section.faq .contenedor-faq {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}
section.faq .contenedor-faq div {
    width: 32%;
}
section.faq .contenedor-faq div h1 {
    font-size: 1.6rem;
}
section.faq .contenedor-faq div p {
    font-size: 1rem;
}

/* ---------------------------------------------------------- */
/* Footer inicio */
footer.footer-inicio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15vh;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #151515;
}
footer.footer-inicio .footer-logo img {
    width: 200px;
}
footer.footer-inicio .footer-center ul {
 list-style: none;
 display: flex;
 justify-content: space-around;
 gap: 40px;
}
.footer-center ul li, footer.footer-inicio .footer-center ul li a {
    display: flex;
    gap: 5px;
    font-size: 16px;
    text-decoration: none;
    color: var(--bg-color-light);
    cursor: pointer;
}
.footer-center ul li:hover {
    text-decoration: underline;
}
footer.footer-inicio .footer-icons {
    display: flex;
    gap: 15px;
}
footer.footer-inicio .footer-icons img {
    width: 42px;
}

@media only screen and (min-width:1300px) {
    .nav-inicio-grande .contenedor-hero .contenedor-hero-texto h1 {
        font-size: 3.8rem;
        margin: 0px;
    }
    .contenedor-plan .ul-planes p {
        display: flex;
        gap: 10px;
        font-size: 0.8rem;
        color: #fefefee8;
    }
}

@media only screen and (min-width:1800px) {

nav {
    width: 100%;
    /* font-size: 25px; */
}

.contenedor-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 20px 0px;
}

.contenedor-nav > div:first-child {
    width: 50%;
    display: flex;
    align-items: center;
}
.contenedor-nav > div:first-child img {
    width:200px;
    height: 45px;
}

.contenedor-nav > div:last-child {
    width: 50%;
    display: flex;
    justify-content: center;
}

.contenedor-ul-nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
    padding: 0px 10px 0px 0px;
    margin: 0;
    justify-content: space-between;
    align-items: center;
}


.contenedor-ul-nav ul a {
    text-decoration: none;
    color: var(--bg-color-light);
}

.contenedor-ul-nav ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 10px 20px 10px 20px;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}

.contenedor-ul-nav ul li:hover {
    background-color: #ffffff27;
}

.contenedor-ul-nav ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    gap: 5px;
}

.btn-prueba-gratis-nav {
    border: none;
    padding: 15px 22px;
    margin-left: 10px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
}

.btn-prueba-gratis-nav.hero {
    margin-top: 3rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 16px;
    padding: 20px 30px;
}

/* Hero nav*/
.contenedor-hero {
    height: 80%;
}
.contenedor-hero img {
    height: 100%;
}
.nav-inicio-grande .contenedor-hero .contenedor-hero-texto h1 {
    font-size: 4.2rem;
}
.nav-inicio-grande .contenedor-hero .contenedor-hero-texto p {
    font-size: 1.2rem;
}

/* ---------------------------------------------------------- */

/* Seccion PLANES */
section.planes {
    background: linear-gradient(90deg, #161616 0%, #000000 81%);
    text-align: center;
    padding: 50px 20px;
    margin-bottom: 60px;
}
section.planes h1.h1-planes {
    font-size: 3rem;
    margin-bottom: 20px;
}
section.planes .subtitulo-planes {
    font-size: 1.1rem;
}
section.planes img.img-usuarios {
    width: 180px;
}
section.planes img {
    width: 25px;
}


.contenedor-plan .costo {
    font-size: 1.2rem;
}
.contenedor-plan .costo span {
    font-size: 3.2rem;
}

.contenedor-plan .emnpezar-ahora {
    padding: 16px;
    font-size: 1rem;
    margin-bottom: 20px;
}

section.planes .contenedor-plan h2 {
    color: var(--bg-color-light);
    font-weight: 600;
    margin: 7px;
    font-size: 1.1rem;
}

.contenedor-plan .ul-planes p {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    color: #fefefee8;
}
.contenedor-plan .ul-planes p.incluye {
    font-size: 1rem;
    margin-bottom: 25px;
}


/* Section carousel */
section.carousel-container {
    overflow: hidden;
    width: 100%;
    margin-top: 10vh;
    margin-bottom: 10vh;
}

.carousel {
    display: flex;
    transition: transform 0.3s ease-out;
}

.carousel img {
    width: auto;
    height: auto;
}
/* ----------------------------------------------------------- */
/* Section FAQ */
section.faq {
    margin-top: 10rem;
}
section.faq h1.titulo-faq {
    text-align: center;
    font-size: 4rem;
}
section.faq .contenedor-faq {
    display: flex;
    justify-content: center;
    gap: 100px;
    flex-wrap: wrap;
}
section.faq .contenedor-faq div {
    width: 35%;
}
section.faq .contenedor-faq div h1 {
    font-size: 1.8rem;
}
section.faq .contenedor-faq div p {
    font-size: 1.2rem;
}

/* ---------------------------------------------------------- */
    /* Footer inicio */
    footer.footer-inicio {
        padding: 20px 140px;
    }
    footer.footer-inicio .footer-logo img {
        width: 200px;
    }
    footer.footer-inicio .footer-center ul {
        gap: 100px;
    }
    .footer-center ul li, footer.footer-inicio .footer-center ul li a {
        gap: 10px;
        font-size: 17px;
    }
    footer.footer-inicio .footer-icons {
        display: flex;
        gap: 25px;
    }
    footer.footer-inicio .footer-icons img {
        width: 40px;
    }
}