:root{
    --verdeMenta: #1ab79a;
    --verdeIntenso: #39de66;
    --azul: #234f5c;
    --azulOscuro: #0a1b2b;
    --blanco:#ffffff;
}
@font-face {
    font-family: sherikaMedium;
    src: url(../font/Sherika\ Medium.otf);
}
@font-face {
    font-family: sherikaBlack;
    src: url(../font/Sherika\ Black.otf);
}
@font-face {
    font-family: sherikaRegular;
    src: url(../font/Sherika\ Regular.otf);
}
@font-face {
    font-family: sherikaBold;
    src: url(../font/Sherika\ Bold.otf);
}
html{
    box-sizing: border-box;
    font-size: 62.5%;
}
*,*::before, *::after{
    box-sizing: inherit;
}
/* GLOBALES */
a{
    font-size: 1.2rem;
    font-family: sherikaMedium;
    color: var(--blanco);
    text-decoration: none;
}
p{
    font-size: 1.5rem;
    font-family: sherikaRegular;
    line-height: 1.5;
}
h1{
    color: var(--blanco);
    font-size: 2.5rem;
    font-weight: bold;
    font-family: sherikaBlack ;
}
h1 span{
    color: var(--verdeIntenso);
    font-size: 2rem;
    line-height: 2;
}
.bold{
    font-weight: bold;
}
@media (min-width: 768px) {
    a{
        font-size: 1.5rem;
    }
    p{
        font-size: 2.5rem;
    }
    h1{
        font-size: 4rem;
    }
    h1 span{
        font-size: 2.7rem;
    }
}
@media (min-width: 1140px) {
    a{
        font-size: 2rem;
    }
    p{
        font-size: 3rem;
    }
    h1{
        font-size: 4.8rem;
    }
    h1 span{
        font-size: 3.5rem;
    }
}
/* HEADER  */
.header{
    height: 50vh;
    width: 100%;
    background-image: url(../img/banner_head.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;

}
.header_content{
    width: 90%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}
.header_content_banderas{
    width: 20%;
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    top: 2rem;
    right: 0;
}
.bandera{
    width: 2rem;
}
nav{
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

@media (min-width: 1140px) {
    .header{
        width: 100%;
        height: 90rem;
        background-position: top center;
    }    
    .header_content{
        align-items: center;
    }
    .header_content_banderas{
        top: 4rem;
    }
    .bandera{
        width: 3rem;
    }
    nav{
        width: 60%;
    }
    .header_content div{
        width: 80%;
        display: flex;
        justify-content: end;
    }
}
/* SABIAS */
.sabias{
    width: 80%;
    margin: 4rem auto;
    text-align: center;
}
@media (min-width: 1140px) {
    .sabias{
        width: 55%;
        margin: 10rem auto;
    }
}
.curva_superior{
    background-image: url(../img/curva-superior_body_seccion_1.jpg);
    background-size: cover;
    height: 10rem;
}
@media (min-width: 768px) {
    .curva_superior{
        height: 20rem;
    }
}
@media (min-width: 1140px) {
    .curva_superior{
        height: 40rem;
    }
}
/* COMO MEJORAR */
.como_mejorar{
    background-color: var(--azulOscuro);
    background-image: url(../img/detalle-logo-linea_body_izquierdo.png);
    background-repeat: no-repeat;
    color: var(--blanco);
    text-align: center;
}
.como_mejorar h2{
    margin: 0;
}
.mejorar{
    font-family: sherikaRegular;
    font-size: 3rem;
}
.tolerancia{
    font-size: 4rem;
}
.tolerancia,
.calor{
    font-family: sherikaBlack;
    
}
.calor{
    color: var(--verdeIntenso);
    font-size: 5rem;
}
@media (min-width: 768px) {
    .mejorar{
        font-size: 4rem;
    }
    .tolerancia{
        font-size: 5rem;
    }
    .calor{
        font-size: 6rem;
    }
}
@media (min-width: 1140px) {
    .mejorar{
        font-size: 7.5rem;
    }
    .tolerancia{
        font-size: 8.7rem;
    }
    .calor{
        font-size: 12.8rem;
    }
}
/* MEJORAMIENTO GENETICO */
.mejora_genetica{
    width: 100%;
}
.mejoramiento_genetico p{
    width: 80%;
    margin: 3rem auto;
    text-align: center;
}
.mejoramiento_genetico div {
    width: 100%;
    background-image: url(../img/logo-linea_body_derecho.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}
.beneficios{
    width: 80%;
}
.curva_inferior{
    background-image: url(../img/curva-inferior_body_seccion_1.jpg);
    background-size: cover;
    height: 10rem;
}
@media (min-width: 768px) {
    .curva_inferior{
        height: 20rem;
    }
}
@media (min-width: 1140px) {
    .mejoramiento_genetico p{
        width: 60%;
        margin: 10rem auto;
    }
    .curva_inferior{
        height: 40rem;
    }
}
/* EL NUEVO GIROLANDO */
.nuevo_girolando{
    width: 80%;
    margin: 0 auto;
}
.nuevo_girolando h2{
    font-size: 2.5rem;
    font-family: sherikaBlack;
    color: var(--azul);
}
.vaca_ngirolando{
    width: 100%;
}
@media (min-width: 768px) {
    .nuevo_girolando h2{
        font-size: 4rem;
    }
}
@media (min-width: 1140px) {
    .nuevo_girolando{
        width: 90%;
        display: flex;
        justify-content: space-between;
    }
    .nuevo_girolando h2{
        font-size: 6rem;
        width: 50%;
    }
}
/* SLIDER */
.slider{
    width: 100%;
    margin: 0 auto;
    display: flex;
}
.slider img{
    width: 33.3%;
}
/* PROYECTOS */
.proyectos{
    background: linear-gradient(0deg, #1ab79a 70%, #15927b 100%);
}
.proyectos h2{
    font-family: sherikaBlack;
    color: var(--blanco);
    font-size:3rem; 
    text-align: center;
    margin-top:0 ;
    padding-top: 5rem;
}
.proyectos h2 span{
    color: #234f5c;
    font-size: 2rem;
}
.proyectos p{
    color: var(--blanco);
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.proyectos p:first-of-type{
    margin-bottom: 2rem;
}
.curva_inferior_verde{
    background-image: url(../img/curva_body_seccion_2.jpg);
    background-size: cover;
    height: 10rem;
}
@media (min-width: 768px) {
    .proyectos h2{
        
        font-size: 5rem;
    }
    .proyectos h2 span{
        font-size: 3.5rem;
    }
    .curva_inferior_verde{
        height: 20rem;
    }
}
@media (min-width: 1140px) {
    .proyectos h2{
        font-size: 8.7rem;
        padding-top: 10rem;
        text-shadow: 0 2rem 3rem black;
    }
    .proyectos h2 span{
        font-size: 6.8rem;
        text-shadow: none;
    }
    .curva_inferior_verde{
        height: 30rem;
    }
}
/* LIDER */
.lider{
    width: 80%;
    margin: 0 auto;
    color: var(--azul);
    text-align: center;
}
.lider span{
    font-family: sherikaBlack;
}
.detalle_izquierdo{
    background-image: url(../img/detalle-logo-linea_body_izquierdo.png);
    height: 5rem;
    background-size: contain;
    background-repeat: no-repeat;
}
.encontraras{
    width: 90%;
    margin: 0 auto;
}
.encontraras h2{
    font-family: sherikaBlack;
    font-size: 2.5rem;
    color: var(--verdeMenta);
    text-align: center;
}
.encontraras h2 span{
    font-size: 2rem;
    color: var(--azul);
}
.encontraras p{
    text-align: center;
}
@media (min-width: 768px) {
    .detalle_izquierdo{
        height: 10rem;
    }
    .encontraras h2{
        font-size: 4rem;
    }
    .encontraras h2 span{
        font-size: 3rem;
    }
}
@media (min-width: 1140px) {
    .lider{
        width: 60%;
    }
    .lider p{
        font-size: 4rem;
    }
    .detalle_izquierdo{
        height: 15rem;
    }
    .encontraras h2{
        font-size: 6rem;
    }
    .encontraras h2 span{
        font-size: 4rem;
    }
}
/* CARRUSEL */
.carrusel{
    width: 90%;
    margin: 0 auto;
}
.carrusel_slider{
    width: 90%;
    margin: 1rem auto;
    overflow: hidden;
}
.carrusel_track{
    display: flex;
    column-gap: 3rem;
    animation: scroll 15s linear infinite;
    width: calc(50rem* 7);
}
.carrusel_foto{
    width: 15rem;
    height: 20rem;
    display: flex;    
}
.carrusel_foto img{
    max-width: 100%;
}
@keyframes scroll{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translate(-160rem)
    }
}
@media (min-width: 1140px) {
    .carrusel_foto{
        width: auto;
        height: 30rem;
        display: flex;    
    }
}
.carrusel p{
    text-align: center;
}
/* TECNOLOGIA */
.tecnologia{
    width: 100%;
}
.tecnologia img{
    width: 100%;
}
.detalle_derecho{
    height: 5rem;
    background-image: url(../img/detalle-logo-linea_body_derecho.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}
@media (min-width:768px ) {
    .detalle_derecho{
        height: 10rem;
    }
}
@media (min-width: 1140px) {
    .detalle_derecho{
        min-height: 15rem;
    }
}
/* OTRAS RAZAS */
.razas h2{
    font-family: sherikaBlack;
    font-size: 2.5rem;
    text-align: center;
    color: var(--azul);
}
.razas span{
    color: var(--verdeMenta);
}
.razas p{
    color: var(--azul);
    text-align: center;
}
.razas_izquierda,
.razas_derecha{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 2rem auto;
}
.raza_a,
.raza_b,
.raza_c,
.raza_d,
.raza_e,
.raza_f{
    height: 5rem;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    text-align: center;
    justify-content: center;
}
.raza_a{
    background-image: url(../img/listado-bg_selector_izquierdo_1.png);
}
.raza_b{
    background-image: url(../img/listado-bg_selector_izquierdo_2.png);
}
.raza_c{
    background-image: url(../img/listado-bg_selector_izquierdo_3.png);
}
.raza_d{
    background-image: url(../img/listado-bg_selector_derecho_2.png);
}
.raza_e{
    background-image: url(../img/listado-bg_selector_derecho_1.png);
}
.razas_izquierda p,
.razas_derecha p{
    color: var(--blanco);
}
@media (min-width: 768px) {
    .razas h2{
        font-size: 3.5rem;
    }
    .raza_a,
    .raza_b,
    .raza_c{
        background-position: left;
        width: 70%;
    }
    .raza_d,
    .raza_e{
        background-position: right;
        width: 70%;
    }
    .razas_izquierda p,
    .razas_derecha p{
        color: var(--blanco);
        margin: 1rem 0;
    }
}
@media (min-width: 1140px) {
    .razas h2{
        font-size: 5rem;
    }
    .otras_razas{
        width: 80%;
        height: 40rem;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
    .razas_derecha{
        justify-content: center;
    }
    .raza_a,
    .raza_b,
    .raza_c,
    .raza_d,
    .raza_e,
    .raza_f{
        width: 90%;
        height: 6rem;
    }
    .raza_a,
    .raza_b,
    .raza_c{
        background-position: top;
    }
    .raza_d,
    .raza_e,
    .raza_f{
        background-position: bottom;
    }
}
/* OFRECEMOS */
.ofrecemos{
    width: 85%;
    margin: 10rem auto;
}
.ofrecemos p{
    color: var(--azul);
    text-align: center;
}
/* FOOTER */
.footer{
    height: 70rem;
    background-image: url(../img/image_bg_footer.png);
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
}
.footer_info,
.footer_logo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.footer_info p{
    width: 80%;
    font-family: sherikaBold;
    font-size: 2rem;
    color: var(--blanco);
}
.footer_logo a{
    font-size: 2rem;
    padding: 2rem 0;
}
@media (min-width: 768px) {
    .footer{
        height: auto;
        justify-content: space-evenly;
    }
    .footer_info p{
        font-size: 2.5rem;
        text-align: center;
        margin: 14rem 0 10rem 0;
    }
}
@media (min-width: 1140px) {
    .footer{
        background-size: cover;
        flex-direction: row;
        align-items: end;
        padding-bottom: 5rem;
        margin-top: 15rem;
    }
    .footer_info{
        width: 50%;
        align-items: flex-start;
    }
    .footer_info p{
        font-family: sherikaBlack;
        font-size: 3.5rem;
        text-align: left;
    }
}
.whatsapp_flotante {
    position: fixed;
    height: 8rem;
    width: 8rem;
    bottom: 1.5rem;
    right: 1.5rem;
}