@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root { 
    --nunito: 'Nunito', sans-serif;
}
body { background: #ddd; }

.bg-light { background: #fff; }
.btn.bg-light:hover { background: #ddd; }

.portada { width: 100vw; min-height: calc(100vh + 200px); height: auto; overflow: hidden;
    background: linear-gradient(45deg, var(--clr-second) 0%, var(--clr-main) 25%, var(--clr-main) 75%, var(--clr-second) 100%); }
.portada .contenido { width: 100vw; min-height: 100vh; height: auto; position: relative; display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center; z-index: 3; }
.portada .fondo { width: 100%; height: calc(100% + 200px); background-image: url('../img/fondoCollage.png'); background-size: 16%;
    background-attachment: fixed; position: absolute; left: 0; top: 0; z-index: 2; filter: invert(100%); opacity: 0.6; }
.hero-div { width: 35vw; height: 35vw; position: relative; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; }
.hero-div img { width: 100%; height: fit-content; }
.hero-txt { width: 45%; height: auto;  padding: 2rem; border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; z-index: 2; }
.hero-txt h1 { height: fit-content; font-size: 5vw; font-weight: 700; color: #A1E8AF; text-shadow: 8px 8px 16px #0005; }
.hero-txt h2 { height: fit-content; font-size: 3vw; color: #fff; text-shadow: 8px 8px 16px #0005; }
.hero-txt .btn { margin: 0.25rem; font-size: 1.25rem; font-weight: 400; position: relative; z-index: 4; box-shadow: 8px 8px 16px #0003; }
.hero-txt .btn:not(.bg-light) { background: #A1E8AF; color: var(--clr-main); }
.hero-txt .btn:not(.bg-light):hover { background: #7ec08b; }

.portada .transicion { width: 100%; height: 200px; position: relative; z-index: 11; filter: brightness(0) invert(100%); }
.portada .transicion img { width: 100%; position: absolute; bottom: 0; }

.informacion-01, .informacion-02 { background: #fff; padding: 7rem 15%; display: flex; flex-wrap: wrap; position: relative; z-index: 20; }
.informacion-01 .grid { margin: auto; }
.informacion-02 .contenido { width: 50%; padding: 2rem; }
.informacion-01 .grafico, .informacion-02 .grafico { width: 50%; padding: 1rem; }
.grafico img { width: 100%; height: auto; }
.informacion-01 { flex-direction: row; }
.informacion-02 { flex-direction: row; }
.informacion-02 h3 { line-height: 3rem; }

.oferta { text-align: center; }
.oferta .oferta-icono { width: 30%; margin: 10% auto; transition: 0.3s all ease; }
.oferta h3 { font-size: 1.5rem; }
.oferta:hover { transform: scale(1.1); }

.informacion-02 .btn { background: #fff; color: var(--clr-main); border: 1px solid var(--clr-main); width: 100%;
    display: flex; flex-wrap: wrap; justify-content: center; }
.informacion-02 .btn:hover { background: var(--clr-main); color: #fff; }
.informacion-02 .btn.whatsapp { margin: 1rem 0; background: #128C7E; color: #fff; border: none; }
.informacion-02 .btn.whatsapp:hover { background: #075E54; color: #fff; }
.informacion-02 .btn.whatsapp img { filter: invert(100%); height: 70%; margin: auto 0.25rem; }

/* Tamaño Mediano */
@media screen and (max-width: 992px) {
    .hero-div { width: 40vw; height: 40vw; }
    .hero-txt { width: 50%; height: auto; }
}

/* Tamaño pequeño */
@media screen and (max-width: 576px) {
    .hero-txt { width: 95%; top: 50%; right: 2.5%; padding: 5rem 2rem; text-align: center; }
    .hero-txt .btn { margin: 1rem auto; }
    .hero-txt h1 { width: 100%; font-size: 8vw; text-align: center; }
    .hero-txt h2 { font-size: 6vw; }
    .hero-div { width: 100vw; height: 100vw; }
    .portada .fondo { background-size: 25%; }

    .informacion-02 { padding: 7rem 2rem; }
    .informacion-02 .contenido { width: 100%; padding: 0; }
    .informacion-02 .grafico { width: 100%; padding: 0; }
    
    .titulo { font-size: 11vw; }
}