:root {
  --red: #b12028;
  --white: #ffffff;
  --warm-gray: #F7F2EA;
  --umbra: #6F514A;
  --hero-height: 75vh;
  --dark-red: #721116;
}
html{
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Noto Serif", serif;
    color: var(--umbra);
}
*{
    box-sizing: border-box;
}
h1, h2, h3, p {
    margin: 0;
}
section {
    padding: 4rem 2rem 0;
}
span.star {
    color: var(--red);
    margin-right: 8px;
}
span.star-top {
    display: block;
}
section h2 {
    font-weight: normal;
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 2rem;
}
.container {
    width: 100%;
    max-width: 1137px;
    margin: auto;
}
.header{
    padding: 2rem;
}
.header-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
}

ul.nav-list {
    list-style: none;
    display: flex
;
    gap: 1rem;
}
a.nav-link {
    color: var(--umbra);
    text-decoration: none;
    font-weight: 500;
}
ol li{
    font-family: 'Noto Sans', sans-serif;
    font-size: 1rem;
}
section.hero {
    background: var(--warm-gray);
    position: relative;
    min-height: var(--hero-height);
    overflow: hidden;
    padding: 0 2rem;
}
.hero-content {
    display: flex;
    align-items: stretch;
    margin: auto;
    width: 100%;
    max-width: 1120px;
    justify-content: space-between;
    position: relative;
    min-height: var(--hero-height);
}
h1.hero-title {
    font-size: 3.35rem;
    font-weight: normal;
    line-height: 120%;
    margin: 0;
}
.hero-text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 48%;
    max-width: 552px;
    align-self: center;
    height: 100%;
    padding: 0 0 3rem 0;
}
.hero-image {
    width: 48%;
    position: relative;
    background: var(--warm-gray);
    overflow: visible;
    height: var(--hero-height);
    top: 0;
}

img.hero-img {
    min-height: 100%;
    object-position: left;
    display: block;
    width: calc(100% + 25vw);
    object-fit: cover;
    object-position: center;
}
.hero-buttons {
    display: flex
;
    gap: 1rem;
}
.btn {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1rem;
    border: 2px solid transparent;
    padding: 1rem 1.5rem;
    font-weight: 500;
    border-radius: 8px;
    line-height: 100%;
    background-color: var(--red);
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    transition: background-color 0.5s ease;
}
.btn-secondary {
    background: transparent;
    color: var(--red);
    border: 2px solid var(--red);
    transition: all 0.5s ease;
}
button.btn.btn-tertiary {
    background: transparent;
    border: 2px solid white;
}
.btn:hover{
    background-color: var(--dark-red);
}
.btn-secondary:hover{
    background: transparent;
    border-color: var(--dark-red);
    color: var(--dark-red);
}
.section-header {
    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 640px;
    margin: 2rem auto;
    gap: 1rem;
}
h2.section-title {
    font-size: 2rem;
    font-weight: 500;
    margin: 0;
}
.about-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 24px;
    gap: 24px;
}
.about-image-large {
    width: 100%;
    margin-bottom: 1.5rem;
}
.about-images-small {
    width: 100%;
    justify-content: center;
    display: flex
;
    gap: 24px;
}
.about-image-item {
    width: 50%;
}
img.about-img {
    max-width: 100%;
    border-radius: 8px;
}
section.products-home{
    background-color: #f0f0f0;
}
.products-content {
    padding: 2rem 1.5rem;
    display: flex;
    border-radius: 1rem;
}
.products-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
section.products-home {
    background-color: #f0f0f0;
    background-image: url(../img/box.jpg);
    background-size: 65%;
    background-position: right center;
    background-repeat: no-repeat;
    padding-bottom: 4rem;
}
.business-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 720px;
    margin: auto;
    background: #F7F2EA;
    padding: 1.5rem 0 1.5rem 1.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
}
.business-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
.business-text{
    width: 50%;
}
.business-image{width: 230px;}
.business-image img {
    width: 100%;
}
footer {
    background-image: url(../img/bg-footer.svg);
    background-color: white;
    padding: 4rem 2rem;
    color: white;
    background-position: left;
    background-size: cover;
    position: relative;
    z-index: 2;
}
.footer-content {
    max-width: 60%;
    display: flex
;
    gap: 4rem;
}
.footer-info p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 150%;
}
.footer-logo {
    height: 40px;
}
.footer-logo img {
    height: 100%;
}
.wapp {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    }
    .wapp a {
    color: white;
}
/*PRODUCTS*/
.hero-products .hero-content {
    height: auto;
    min-height: auto;
}
.hero-products .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-products .hero-text {
    width: 100%;
    max-width: 840px;
    margin: auto;
    text-align: center;
}
/*.hero-products .hero-title {
    font-size: 4rem;
}*/
.products-options {
    margin: auto;
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 400px;
    font-weight: normal;
    justify-content: space-between;
}
.products-options a {
    display: flex;
    width: 50%;
    height: 100%;
    border: 1px dashed #dbc3c3;
    text-decoration: none;
    color: #b12028;
}
.options-item {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}
.products-options a:first-child {
    border-right: 0;
}
.options-item h4 {
    font-weight: normal;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.grid-row {
    display: flex;
}
.text-cell, .img-cell {
    width: 50%;
}
.img-cell img {
    width: 100%;
    border-radius: 8px;
    height: 100%;
    object-fit: cover;
}
.text-cell {
    width: 50%;
    background-color: var(--warm-gray);
    border-radius: 8px;
    padding: 1.5rem;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}
.text-cell h2{margin-bottom: 0;}
.text-cell ol {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 1.5rem;
}
.grid-row {
    display: flex;
    gap: 1.5rem;
    box-sizing: border-box;
    justify-content: space-between;
    margin: 0 0 1.5rem 0;
}
/*.products h2 {
    font-size: 40px;
    font-weight: normal;
}*/
h2.section-title span {
    color: var(--red);
}
.boxes-wrapper {
    display: flex;
    gap: 24px;
    justify-content: space-between;
}
.product-box img {
    width: 100%;
}
/*SUDAMERICA*/
.hero-sudamerica{
    background-image: url(../img/hero-southamerica.jpg);
    background-position: top;
    background-attachment: fixed;
    color: white;
    background-repeat: no-repeat;
    background-size: cover;
}
section.hero-sudamerica .hero-text{
    height: auto;
}
section.hero-sudamerica .hero-content {
    justify-content: flex-start;
    text-align: center;
    align-items: center;
    min-width: auto;
    min-height: 60vh;
    height: auto;
    flex-direction: column;
}
.heading-ventajas {
    padding: 6rem 0;
    position: relative;
    min-height: 480px;
}
.ventajas h2 {
    font-size: 78px;
    font-weight: normal;
    max-width: 840px;
    width: 100%;
    position: relative;
    z-index: 2;
    text-transform: none;
}
.ventajas p{
    position: relative;
    z-index: 2;
}
.heading-ventajas img {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 25%;
}
.main {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 4rem 0;
}
.main img{
    width: 100%;
    border-radius: 8px;
}
.col-left, .col-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 50%;
}
 
.info-card {
    background: #5A492D;
    color: white;
    padding: 4rem 1.5rem;
    border-radius: 0.5rem;
}
.col-right .info-card {
    background: #266579;
}
.icon-heading {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}
.info-card h3{
    font-size: 28px;
    font-weight: normal;
}
.icon-heading img
 {
    height: 48px;
    width: 48px;
}
.info-card ol {
    padding-left: 1.5rem;
    gap: 1rem;
    display: flex
;
    flex-direction: column;
}

section.numbers {
    background: #874444;
    color: white;
    padding: 3.5rem 2rem;
}
.numbers-content {
    display: flex
;
}
.number-box {
    width: 25%;
    padding: 1.5rem;
}
p.number {
    font-size: 4.8rem;
    text-align: center;
}
p.details {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1REM;
    text-align: center;
}

/*MERCADOS*/
section.mercados {
    padding: 5rem 0;
}
.mercados-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mercados-txt {
    width: 45%;
}
.countries {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.country {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
    border: 1px solid;
    border-radius: 4px;
    height: 96px;
    justify-content: center;
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.875rem;
}
.country img {
    max-width: 24px;
    margin-bottom: 8px;
}
.mercados h2 {
    font-weight: normal;
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 2rem;
}
.mercados-img {
    width: 50%;
}
.mercados-img img {
    max-width: 640px;
    width: 100%;
}
section.sustentabilidad, .products-meat {
    background: #62783E;
    color: white;
    text-align: center;
    padding: 3.5rem 2rem;
}

.sustentabilidad .items-wrap, .products-meat .items-wrap {
    display: flex;
    font-family: 'Noto Sans';
    gap: 1.5rem;
    margin-top: 4rem;
}
.products-meat .items-wrap{
    justify-content: center;
    gap: 0;
}
.products-meat .item{
    width: 33%;
}
.products-meat .item:last-child {
    border: 0;
}
.item {
    width: 25%;
    padding: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

section.products-meat {
    background: #874444;
}

.sustentabilidad .items-wrap {
    display: flex;
    font-family: 'Noto Sans';
    gap: 1.5rem;
    margin-top: 4rem;
}
.item {
    width: 25%;
    padding: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

/*HEADER*/
.header {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            top: 0;
            width: 100%;
            z-index: 1000;
        }


        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: auto;
        }

        .logo-img {
            height: 48px;
            width: auto;
        }

        /* Navegación Desktop */
        .nav-list {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-link {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: color 0.3s ease;
        }

        .nav-link:hover {
            color: #d32f2f;
        }

        /* Botón hamburguesa */
        .menu-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 0.5rem;
            background: none;
            border: none;
            z-index: 1001;
        }

        .hamburger-line {
            width: 25px;
            height: 3px;
            background-color: #333;
            margin: 3px 0;
            transition: all 0.3s ease;
            transform-origin: center;
        }

        /* Animación del hamburger */
        .menu-toggle.active .hamburger-line:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }

        .menu-toggle.active .hamburger-line:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.active .hamburger-line:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }

        /* Mobile Styles */
        @media (max-width: 768px) {
            .menu-toggle {
                display: flex;
            }

            .nav {
                position: fixed;
                top: 70px;
                left: 0;
                width: 100%;
                height: calc(100vh - 70px);
                background: white;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
                box-shadow: 0 4px 20px rgba(0,0,0,0.1);
                z-index: 8;
            }

            .nav.active {
                transform: translateX(0);
            }

            .nav-list {
                flex-direction: column;
                gap: 0;
                height: 100%;
                padding: 2rem 0;
                z-index: 11;
                position: relative;
            }

            .nav-list li {
                border-bottom: 1px solid #f0f0f0;
            }

            .nav-link {
                display: block;
                padding: 1.5rem 2rem;
                font-size: 1.1rem;
                color: #333;
                transition: all 0.3s ease;
            }

            .nav-link:hover {
                background-color: #f8f8f8;
                color: #d32f2f;
                padding-left: 2.5rem;
            }

            /* Overlay */
            .nav-overlay {
                position: fixed;
                top: 70px;
                left: 0;
                width: 100%;
                height: calc(100vh - 70px);
                background: rgba(0,0,0,0.5);
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
                z-index: 5;
            }

            .nav-overlay.active {
                opacity: 1;
                visibility: visible;
            }
        }

        /* Estilos adicionales para el demo */
        .demo-content {
            margin-top: 70px;
            padding: 2rem;
            height: 200vh;
            background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
        }

        .demo-content h1 {
            color: #333;
            margin-bottom: 1rem;
        }

/*CONTACTO*/
section.contact-section {
    padding: 2rem;
}
.contact-content {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}
.contact-form-container {
    display: flex;
    width: 60%;
    justify-content: center;
    padding: 1.5rem 1rem;
}
form#contactForm {
    width: 100%;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 1.5rem;
    border-radius: 0.5rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.form-row .form-group {
    width: 50%;
}
.form-row {
    width: 100%;
    display: flex;
    gap: 2rem;
}
label.form-label {
    font-family: 'Noto Sans';
    font-size: 0.77rem;
    padding-bottom: 8px;
    color: white;
}
input {
    padding: 1rem 0.5rem;
    border-radius: 0.5rem;
    border: 0;
    background: white;
}
select {
    padding: 16px;
    border-radius: 8px;
}
textarea#message {
    border-radius: 0.5rem;
    padding: 1rem;
    font-family: 'Noto Sans';
}
button.form-submit {
    width: 100%;
    cursor: pointer;
}
.container.contact {
    position: relative;
    z-index: 2;
    padding: 2rem;
    color: white;
    min-height: 100vh;
}
.contact-background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
}
.contact-background img {
    width: 100%;
    border-radius: 0.5rem;
}
h1.contact-title {
    font-size: 3.35rem;
    font-weight: normal;
}
.contact-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.contact-details {
    margin: 1rem 0;
}

/*MOBILE*/
@media screen and (max-width: 768px){
    section, section.hero, section.contact-section {
        padding: 1.5rem;
    }
    h1.hero-title{font-size: 2.75rem;}
    .logo-img{height: 32px;}
    .hero-content {
        flex-direction: column;
        padding: 3rem 0;
        align-items: center;
        text-align: center;
    }   
    img.hero-img{
        width: 100%;
        border-radius: 8px;
    }
    .hero-text{
        width: 100%;
    }
     .hero-buttons{
        justify-content: center;
     }
    .hero-image {
        width: 100%;
        height: auto;
    }
    .btn{
        width: 100%;
    max-width: 320px;
    }
    .products-text {
    width: 100%;
    align-items: center;
    text-align: center;
}
    .ventajas h2{
        font-size: 48px;
    }
    .main {
        flex-direction: column;
    }
    .col-left, .col-right {
        width: 100%;
    }
    .numbers-content {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .number-box {
        width: 100%;
    }
    .mercados-content{
        flex-direction: column;
    }
    .mercados-txt {
    width: 100%;
}
    .countries{
        justify-content: center;
        margin-bottom: 2rem;
    }
    .country{
        width: 45%;
    }
    .mercados h2{
        text-align: center;
    }
    span.star {
    display: block;
    text-align: center;
    margin: 0;
    }
    .mercados-img {
        width: 90%;
    }
    .mercados-img img {
        max-width: 100%;
    }
    .business-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        padding: 1rem;
    }
    .business-text {
        width: 100%;
        align-items: center;
        text-align: center;
    }
    .business-image {
        border: 2px solid #dfdad3;
        border-radius: 8px;
        padding: 24px 0 24px 24px;
    }
    .footer-content {
        max-width: 100%;
        gap: 2rem;
        flex-direction: column;
        padding: 1.5rem;
        align-items: center;
        text-align: center;
        font-size: 0.85rem;
        line-height: 155%;
    }
    
    section.products-home{background-image: none;}
    section.sustentabilidad{
        padding: 1.5rem;
    }
    .sustentabilidad .items-wrap, .products-meat .items-wrap{
        flex-direction: column;
        margin-top: 0;
    }
    .item {
        width: 100%;
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        border-right: 0;
    }
    .item:last-child {
        border: 0;
    }
    .products-meat .item {
        width: 100%;
    }
    .grid-row {
        flex-direction: column;
    }
    .grid-row:nth-child(2){
        flex-direction: column-reverse;
    }
    .text-cell, .img-cell {
        width: 100%;
    }
    .container.contact{padding: 1rem;}
    .contact-content{flex-direction: column;}
    .contact-form-container {
        justify-content: center;
        padding: 0;
        width: 100%;
    }
    .contact-background img {
        height: 100%;
        object-fit: cover;
    }
    
}

@media screen and (max-width: 479px){
    section, section.hero, section.contact-section {
        padding: 1rem;
    }
    section h2, h2.section-title{
        font-size: 1.35rem;
    }
    h1.hero-title{
        font-size: 2.35rem;
    }
    .hero-products .hero-title {
        font-size: 3.3rem;
    }
    .hero-buttons{
        flex-direction: column;
        align-items: center;
    }
    .hero-products .hero-content{
        padding: 0;
    }
    .boxes-wrapper {
        flex-direction: column;
    }
    .container.contact, form#contactForm {
        padding: 0.5rem;
    }
    h1.contact-title{font-size: 3rem;}
    .form-row{
        flex-direction: column;
    }
    .hero-sudamerica{
        background-attachment: scroll;
        background-color: #192019;
        /*background-image: none;*/
    }
    .form-row .form-group {
    width: 100%;
    }
    .products-options{
        flex-direction: column;
    }
    .options-item{
        width: 100%;
    }
    .options-item:first-child {
        border-right: 1px dashed #dbc3c3;
        border-bottom: 0;
    }
    p.number{
       font-size: 3.625rem;
    }
    
}