* {
    max-width: 100%;
}


@media (max-width: 991px) {

    html, body {
        overflow-x: hidden; /* Ocultar el desbordamiento horizontal */
    }

    
    div[title="introImage"] img[title="flechaHeader"] {
        display: none;
    }

    header {
        display: flex;
        flex-direction: column;
        padding: 2em;
    }

    header h2 {
        padding-right: 3em;
    }

    header p {
        width: 75%;
    }

    div[title="introImage"] img[title="flechaHeader"] {
        width: 80%;
        justify-items: center;
        align-items: center;
    }

    div[title="features-grid"] {
        display: flex;
        flex-direction: column;
        padding: 2em;
    }

    .features-list {
        padding: 0;
    }

    section[title="aboutus"] h5 {
        padding: 0;
    }

    .partner-logos {
        padding: 0;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, auto); 
        gap: 0.625em;
    }

    section[title="aboutus"] p {
        padding: 0;
        font-size: 1em;
        max-width: 100%;
        margin-left: 15%;
    }

    section[title="contact"] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    div[title="contact-grid"] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: auto;
    }

    div[title="image-container"] {
        display: none;
    }

    .info-container {
        flex-direction: column; 
        gap: 0.9375em;
    }

    .info-item {
        width: 100%; 
    }

    div[title="finalTitle"] h2 {
        font-size: 3.75em;
    }
}




@media (max-width: 480px) { 

    header {
        font-size: 0.875em;
    }

    div[title="introImage"] img[title="flechaHeader"] {
        display: none;
    }

    body{
        max-width: 100vw;
    }

    header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2em 3em;
    }

    div[title="introText"] {
        padding: 0;
    }

    div[title="introText"] h2 {
        font-size: 2.2em;
    }

    div[title="introText"] p {
        font-size: 1.125em;
    }

    div[title="introImage"] img[title="cosecha"] {
        margin-top: 1.25em;
    }

    div[title="introImage"] img[title="flechaHeader"] {
        width: 80%;
        justify-items: center;
        align-items: center;
    }

    section[title="process"] h5 {
        font-size: 1.5em;
    }

    div[title="process-step"] {
        padding: 0;
        margin: 0;
    }

    div[title="process-sub-step"] {
        border-bottom-style: none;
        border-bottom-width: 2px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 0.313em 2em;
        width: 100%;
    }

    div[title="process-sub-step"] h3 {
        font-size: 1.5em;
        padding-right: 2.25em;
    }
    
    div[title="process-sub-step"] span {
        padding: 0;
        padding-bottom: 0.625em;
    }   
    
    div[title="step-header"] {
        width: 100%;
    }  

    div[title="process-sub-step"] p {
        font-size: var(--body-l);
        max-width: 100%;
        padding-right: 2.25em;
    }

    div[title="step-content"] {
        padding-top: 0;
    }  

    .sub-step {
        gap: 0.313em;
        padding: 0.625em;
        width: 60%;
    }  

    section[title="benefits"] h4 {
        font-size: 0.875em;
        margin: 1em;
    }

    section[title="benefits"] h5 {
        font-size: 1.5em;
        margin: 1em;
    }

    div[title="benefits-grid"] {
        display: flex;
        flex-direction: column;
        padding: 0 2em;
    }

    .benefit-item h6 {
        font-size: 1.25em;
    }

    div[title="features-grid"] {
        display: flex;
        flex-direction: column;
        padding: 2em 0;
    }

    section[title="features"]{
        padding: 2em;
    }

    section[title="features"] h5  {
        font-size: 1.5em;
    }

    section[title="features"] p[title="intro"]  {
        margin: 0;
    }

    .features-list {
        order: 1;
        display: flex;
        flex-direction: column;
        padding-left: 0;
    }

    .features-slider {
        order: 2;
        padding: 1em;
        border-radius: 1.25em;
    }

    .slider-controls {
        margin: 0;
    }

    section[title="aboutus"] {
        margin: 0;
        margin-top: 5rem;
        padding: 4em 2em;
        border-radius: 2em;
    }

    section[title="aboutus"] h5 {
        font-size: 1.4em;
        padding: 0;
    }

    .partner-logos {
        padding: 0;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, auto); 
    }

    section[title="aboutus"] p {
        padding: 0;
        font-size: 1em;
        max-width: 100%;
    }

    #contact {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 4em 0;
    }

    #contact h5 {
        font-size: 1.5em;
        padding: 0 2em;
    }

    div[title="contact-grid"] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: auto;
    }

    div[title="image-container"] {
        display: none;
    }

    #masinfo {
        max-width: 100%;
        width: 95%;
        border-radius: 2em;
    }

    .info-container {
        flex-direction: column; 
        gap: 0.9375em;
    }

    .info-item {
        width: 100%; 
    }

    footer{
        padding: 2em 1em 0;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
    }

    .footer-left {
        max-width: 90%;
    }

    .footer-left img {
        max-width: 75%;
        width: auto;
        height: 75%;
    }

    .footer-left p {
        padding: 0;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        gap: 1em;
        text-align: left;
    }

    .footer-bottom a {
        order: 1;
        align-self: start;
    }

    .footer-bottom p {
        order: 2;
    }

    div[title="finalTitle"] h2 {
        font-size: 3.125em;
    }

    #scrollToTopBtn {
        width: 3em;
        height: 3em;
    }

}