:root {
    --green-primary: #3b7925;
    /* Verde oscuro de las flechas y montañas */
    --green-secondary: #78a748;
    /* Verde claro de las montañas */
    --gold-metallic: #c29641;
    /* Dorado metálico de "TRADE" y la flecha */
    --blue-map: #397dce;
    /* Azul del mapa */
    --dark-green-arrow: #225b31;
    /* Verde oscuro de las flechas */
    --light-gold: #f0d59e;
    /* Dorado claro, reflejos */
    --gray-dark: #4c4c4c;
    /* Gris oscuro del borde del texto */
    --black-soft: #1a1a1a;
    /* Casi negro, usado en sombras o bordes */
    --white-soft: #fff;
}

/* reset.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    font-family: sans-serif;
    line-height: 1.5;
    background-color: #fff;
    color: #000;
    scroll-behavior: smooth;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

h2 {
    font-weight: 200;
}

/* HEADER */
/* HEADER */
.main__header {

    background: linear-gradient(116deg, #c5dbbe, #e7e7e7);
    background-size: 120% 120%;
    animation: gradient-animation 6s ease infinite;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



/* HEADER BASE */
.main__header {
    background: linear-gradient(116deg, #c5dbbe, #e7e7e7);
    background-size: 120% 120%;
    animation: gradient-animation 6s ease infinite;
}

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1rem; /* Cambié el porcentaje por rem para mayor estabilidad */
}

/* 🔥 CORRECCIÓN 1: Logo fluido */
.header__logo {
    width: 100%;
    max-width: 600px; /* Tope máximo en PC para que no ocupe toda la pantalla */
    height: auto; /* Mantiene la proporción sin aplastar la imagen */
}

.header__nav {
    text-align: center;
    width: 100%;
}

.header__menu {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap; /* 🔥 CORRECCIÓN 2: Permite que los ítems bajen si no caben */
}

.header__item {
    position: relative;
}

/* 🔥 CORRECCIÓN 3: Ajuste del Hover */
.header__link {
    font-weight: 500;
    font-size: 1.05rem;
    color: #1d4726;
    transition: all 0.3s ease;
    padding: 8px 12px; /* Puse el padding aquí fijo para que el menú no "salte" al hacer hover */
    border-radius: 5px;
    display: inline-block;
}

.header__link:hover {
    background-color: rgb(214, 230, 214);
}

/* 🔥 CORRECCIÓN 4: Media Query para Móviles */
@media screen and (max-width: 768px) {
    .header__logo {
        max-width: 80%; /* El logo se reduce un poco en móviles */
    }

    .header__menu {
        flex-direction: column; /* Apila los enlaces verticalmente */
        gap: 1rem; /* Reduce el espacio entre enlaces */
    }
}

@media screen and (max-width: 768px) {
    .header__nav {
        display: none;
    }
}

/* HERO BASE */
.hero {
    width: 100%;
    min-height: 85vh;
    display: flex;
    align-items: center;
    padding-left: 8%;
    padding-right: 0;
}

.hero__content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero__text {
    flex: 0 0 45%;
}

.hero__text h1 {
    text-align: center;
    margin-bottom: 1.5rem; /* Espacio debajo del título */
}

.hero__text ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2.5rem; /* Espacio antes del botón Ver más */
}

.hero__text ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 15px;
    text-align: justify;
}

.hero__text ul li::before {
    content: "-";
    position: absolute;
    left: 0;
    font-weight: bold;
}

.hero__image {
    flex: 0 0 55%;
    display: flex;
    justify-content: flex-end;
}

/* 🔥 CORRECCIÓN: Evitar desbordamiento de imagen */
.hero__image img {
    width: 100%; 
    max-width: 120%; /* Le damos un poco del tamaño extra que querías, pero controlado */
    height: auto; /* Mantiene la proporción */
    object-fit: contain;
}

/* 🔥 ADAPTACIÓN A MÓVILES */
@media screen and (max-width: 768px) {
    .hero {
        padding: 3rem 1.5rem; /* Quitamos el 8% de la izquierda para centrar el contenido */
        min-height: auto; /* Permite que la altura se ajuste al contenido */
    }

    .hero__content {
        flex-direction: column; /* Apila el texto arriba y la imagen abajo */
        text-align: center;
        gap: 2rem;
    }

    .hero__text, 
    .hero__image {
        flex: 1 1 100%; /* Ambos toman el 100% del ancho disponible */
        width: 100%;
    }

    .hero__text ul li {
        text-align: left; /* La lista se lee mejor alineada a la izquierda en móviles */
    }

    .hero__image img {
        max-width: 100%; /* En móviles la imagen no debe salirse del borde */
    }
}

/*MMain description*/

.main__description {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    max-width: 1280px;
    margin-left: 25%;
}

.description__logo {
    width: 150px;
    height: auto;
}

.description__brand {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--black-soft);
}

/* 🔥 ADAPTACIÓN A MÓVILES */
@media screen and (max-width: 768px) {
    .main__description {
        flex-direction: column; /* Apila el logo arriba y el texto abajo */
        margin-left: 0; /* Quitamos el 25% para recuperar el espacio en la pantalla */
        padding: 2rem 1.5rem; /* Añadimos un poco de margen interno para que no toque los bordes */
        text-align: center; /* Centramos el texto para que se vea más armónico con el logo arriba */
    }
}

/* CONTENEDOR PRINCIPAL */
.main__ubication {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 1.5rem; /* Mejor espacio alrededor */
    gap: 2rem; /* Reemplaza el <br> y da un respiro entre el título y el mapa */
    background-color: var(--white-soft); /* Fondo limpio */
}

/* TÍTULO */
.main__subtitle {
    color: var(--green-primary);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
}

/* Línea decorativa debajo del título (opcional pero se ve genial) */
.main__subtitle::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--gold-metallic);
    border-radius: 2px;
}

/* 🗺️ MAPA ESTILIZADO */
.ubication__map {
    width: 100%;
    max-width: 900px; /* Tamaño máximo en pantallas grandes */
    height: 450px;
    border: none; /* Quitamos el borde por defecto de Google */
    border-radius: 16px; /* Bordes bien redondeados */
    box-shadow: rgba(50, 50, 93, 0.15) 0px 25px 50px -12px, 
                rgba(0, 0, 0, 0.25) 0px 15px 30px -20px; /* Sombra elegante */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto sutil al pasar el mouse */
.ubication__map:hover {
    transform: translateY(-4px);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 40px 80px -20px, 
                rgba(0, 0, 0, 0.35) 0px 20px 40px -30px;
}

/* 🔥 ADAPTACIÓN A MÓVILES */
@media screen and (max-width: 768px) {
    .main__ubication {
        padding: 3rem 1rem;
    }

    .main__subtitle {
        font-size: 2rem;
    }

    .ubication__map {
        height: 350px; /* Hacemos el mapa un poco más corto en celulares para que no ocupe toda la pantalla de alto */
        border-radius: 12px; /* Reducimos un poco el radio del borde para pantallas pequeñas */
    }
}
.main__subtitle h2 {
    justify-content: left;
    /* alinea el título a la izquierda */
    margin-bottom: 1rem;
    font-size: 3rem;
    color: #333;
    padding-left: 1rem;
    /* opcional: separa el título del borde izquierdo */
}

.ubication__map {
    border-radius: 15px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    width: 600px;
    height: 450px;
    border: 0;
}

/*Main products*/

.main__products {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin-top: 5%;
    margin-bottom: 5%;
}

.products__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.products__review {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--gray-dark);
    text-align: center;
    background: rgba(255, 255, 255, 0.49);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 20px;
    border-radius: 10px;
}

products__review-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.products__review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    background-color: transparent;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.products__review-item {
    background: rgba(255, 255, 255, 0.49);
    color: var(--black-soft);
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid white;
}

.products__review-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.49);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 20px;
    color: var(--gray-dark);
    font-weight: bold;
    z-index: 10;
}

.products__review-text {
    margin: 0.2rem 0;
}

.review__title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.review__description {
    font-size: 1rem;
    margin-bottom: 15px;
}

.review__button {
    background-color: var(--green);
    /* reemplaza por tu color */
    color: var(--dark-green-arrow);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

/*main SERVICES*/



/* main contactus */

/* CONTENEDOR PRINCIPAL Y FONDO */
.main__contact {
    padding: 4rem 1.5rem; /* Más espacio arriba y abajo */
    font-family: 'Inter', sans-serif;
    background-image: url('/assets/logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 300px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra todo el bloque */
    gap: 2.5rem; /* Espacio entre el título y la tarjeta */
}

/* CAJA DE CRISTAL (GLASSMORPHISM) */
.contact__container {
    display: flex;
    flex-direction: row; /* En PC están uno al lado del otro */
    width: 100%;
    max-width: 800px;
    background: rgba(255, 255, 255, 0.49);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    overflow: hidden; /* Evita que los bordes rectos de los hijos salgan del borde redondeado */
}

/* PANEL IZQUIERDO: INFO */
.contact__info {
    background-color: var(--green-primary);
    color: var(--white-soft);
    padding: 2.5rem 2rem;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info__item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.info__item i {
    font-size: 1.5rem;
    color: var(--light-gold);
    margin-top: 4px; /* Alinea el ícono un poco mejor con el texto */
}

.info__title {
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 1.1rem;
}

.info__text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9); /* Un blanco un poco más suave */
}

/* PANEL DERECHO: FORMULARIO */
.contact__form {
    width: 60%;
    padding: 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form__title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: var(--green-primary); /* Cambiado al verde principal para más armonía */
}

.form__input,
.form__textarea {
    border: none;
    border-bottom: 2px solid var(--gray-dark);
    padding: 0.5rem 0; /* Quitamos padding lateral para que la línea se vea más limpia */
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    background: transparent;
    outline: none;
    color: var(--black-soft);
    transition: border-color 0.3s ease;
}

.form__input:focus,
.form__textarea:focus {
    border-color: var(--green-secondary); /* Resalta la línea inferior al escribir */
}

.form__textarea {
    resize: vertical; /* Permite al usuario hacer más grande la caja de texto solo hacia abajo */
}

.form__button {
    padding: 0.8rem 2rem; /* Botón un poco más grande */
    background: var(--green-primary);
    border-radius: 40px;
    color: var(--white-soft);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease, transform 0.2s ease;
    align-self: flex-start;
    border: none;
}

.form__button:hover {
    background-color: var(--green-secondary);
    transform: scale(1.05); /* Pequeño efecto de crecimiento al pasar el mouse */
}

/* 🔥 ADAPTACIÓN A MÓVILES (Tablets y celulares) */
@media screen and (max-width: 768px) {
    .contact__container {
        flex-direction: column; /* Apila la información arriba y el formulario abajo */
    }

    .contact__info,
    .contact__form {
        width: 100%; /* Ambos toman todo el ancho disponible */
        padding: 2rem 1.5rem; /* Reducimos un poco el padding interior */
    }

    .form__button {
        width: 100%; /* En móviles, el botón se ve mejor si ocupa todo el ancho */
        text-align: center;
    }
}

/*main footer*/

.main__footer {
    background-color: var(--green-secondary);
    height: 60vh;
}


/* =========================
   ESTILOS GENERALES PÁGINA NOSOTROS
========================= */
.main__about {
    padding: 2rem 0;
}

.about__block {
    flex: 1;
    min-width: 280px;
    max-width: 900px; /* Limitamos el ancho para que no se vea desproporcionado en pantallas muy grandes */
    padding: 2.5rem;
    margin: 3rem auto; /* Centrado horizontal y separación entre bloques */
    background-color: var(--white-soft);
    border-radius: 16px;
    box-shadow: rgba(50, 50, 93, 0.15) 0px 25px 50px -12px,
                rgba(0, 0, 0, 0.25) 0px 15px 30px -20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about__block:hover {
    transform: translateY(-6px);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 40px 80px -20px,
                rgba(0, 0, 0, 0.35) 0px 20px 40px -30px;
}

.about__title {
    color: var(--green-primary);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--green-primary);
    padding-bottom: 0.5rem;
    text-transform: uppercase; /* Uniformamos todos los títulos a mayúsculas */
}

/* =========================
   GRILLA: TEXTO + IMAGEN
========================= */
.about__body {
    display: grid;
    grid-template-columns: 1fr 350px; /* 1 Fracción para el texto, 350px fijos para la imagen en PC */
    align-items: center; 
    gap: 3rem; /* Buen espacio entre el texto y la foto */
}

/* =========================
   TIPOGRAFÍA Y LISTAS
========================= */
.about__text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--gray-dark);
    text-align: justify;
    margin-bottom: 1rem;
}

.about__list--large {
    list-style: none;
    padding-left: 0;
}

.about__list--large li {
    font-size: 1.15rem;
    color: var(--gray-dark);
    position: relative;
    padding-left: 20px;
    margin-bottom: 1rem;
    line-height: 1.6;
    text-align: justify;
}

.about__list--large li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--green-primary); /* Guion de la lista en color corporativo */
    font-weight: bold;
}

/* =========================
   IMÁGENES
========================= */
.block__image {
    width: 100%;
    max-width: 350px; /* Define el tamaño máximo de la caja */
    aspect-ratio: 1 / 1; /* 👈 MAGIA: Fuerza a que el alto sea exactamente igual al ancho (Cuadrado perfecto) */
    object-fit: cover; /* Asegura que la foto llene el cuadrado sin estirarse ni deformarse */
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    transition: transform 0.3s ease;
    margin: 0 auto; /* Centra la imagen si el contenedor es más grande */
    display: block;
}

.about__block:hover .block__image {
    transform: scale(1.02); 
}

/* =========================
   🔥 ADAPTACIÓN A MÓVILES
========================= */
@media screen and (max-width: 900px) {
    .about__block {
        max-width: 95%; 
        padding: 2rem 1.5rem; 
    }

    .about__title {
        font-size: 1.8rem;
    }

    .about__body {
        grid-template-columns: 1fr; 
        gap: 2rem;
        text-align: center; /* Centramos el contenido general en móviles */
    }

    .block__image {
        max-width: 280px; /* 👈 En móviles será un cuadrado perfecto de 280x280px */
        order: -1; /* Pone la imagen ARRIBA del texto. Si la quieres abajo, borra esta línea */
    }

    .about__text,
    .about__list--large li {
        text-align: left; 
    }
}

/* =========================
   COMERCIO SENSATO
========================= */

.about__block--sensato .about__body {
    grid-template-columns: 1fr 430px; /* imagen más ancha */
    align-items: center;
}

.about__block--sensato .about__text {
    font-size: 1.2rem; /* texto un poco más grande */
    text-align: left;
}

.block__image--horizontal {
    
    width: 100%;
    max-width: 650px; /* un poco más grande */
}


/* =========================
   COMERCIO SENSATO AJUSTADO
========================= */

.about__block--sensato .about__body {
    grid-template-columns: 1fr 520px; /* imagen más grande */
    align-items: center; /* centra vertical */
}

.about__block--sensato h3 {
    margin-bottom: 0.5rem;
}

.about__block--sensato .about__list--sensato {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.about__block--sensato .about__list--sensato li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 1.3rem; /* texto un poco más grande */
    line-height: 1.6;
}

.about__block--sensato .about__list--sensato li::before {
    content: "—";
    position: absolute;
    left: 0;
    font-weight: bold;
}

.block__image--sensato {
   
    width: 90%;
    
}

/* =========================
   TRANSFERENCIA - TEXTO PERSONALIZADO
========================= */

.about__text--large {
    font-size: 1.2rem;  /* tú luego puedes cambiarlo */
    line-height: 1.8;
    color: var(--gray-dark);
    margin-bottom: 1rem;
    text-align: left;
}

.about__list--large {
    list-style: none;
    padding-left: 0;
}

.about__list--large li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    line-height: 1.6;
}

.about__list--large li::before {
    content: "—";
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* =========================
   LOGÍSTICA DINÁMICA
========================= */

.about__body--dinamica {
    grid-template-columns: 1fr 520px; /* imagen más grande */
    align-items: center; /* centra vertical */
}

.about__text--dinamica {
    font-size: 1.2rem;
    text-align: left;
    margin-bottom: 1rem;
}

.about__list--dinamica {
    list-style: none;
    padding-left: 0;
}

.about__list--dinamica li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 1.15rem;
    line-height: 1.6;
}

.about__list--dinamica li::before {
    content: "—";
    position: absolute;
    left: 0;
    font-weight: bold;
}

.block__image--dinamica {
    
    width: 100%;
    max-width: 520px;
}

/* =========================
   PROYECCIÓN CON FUNDAMENTO
========================= */

.about__body--fundamento {
    grid-template-columns: 1fr 500px; /* imagen más grande */
    align-items: center;
}

.about__text--fundamento {
    font-size: 1.25rem;
    text-align: left;
    margin-bottom: 1rem;
}

.about__list--fundamento {
    list-style: none;
    padding-left: 0;
}

.about__list--fundamento li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 1.2rem;
    line-height: 1.6;
}

.about__list--fundamento li::before {
    content: "—";
    position: absolute;
    left: 0;
    font-weight: bold;
}

.block__image--fundamento {

    width: 100%;
    max-width: 500px;
}

/* =========================
   🔥 ADAPTACIÓN A MÓVILES
========================= */
@media screen and (max-width: 900px) {
    .about__block {
        max-width: 95%; /* Toma casi todo el ancho de la tablet/celular */
        padding: 2rem 1.5rem; /* Reducimos el padding interno */
    }

    .about__title {
        font-size: 1.8rem;
    }

    .about__body {
        grid-template-columns: 1fr; /* 👈 LA MAGIA: Pasa de 2 columnas a 1 sola columna */
        gap: 2rem;
    }

    .block__image {
        max-height: 250px; /* La imagen es más baja en móviles */
        width: 100%; /* La imagen toma todo el ancho disponible */
        order: -1; /* Opcional: Esto pone la imagen ARRIBA del texto en móviles. Si la prefieres abajo, borra esta línea */
    }

    .about__text,
    .about__list--large li {
        text-align: left; /* En móviles se lee mejor alineado a la izquierda que justificado */
    }
}

.usa-section {
    padding: 4rem 2rem;
    background: var(--white-soft);
    text-align: center;
}

.usa-container {
    max-width: 900px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.usa-title {
    font-size: 2.5rem;
    color: var(--green-primary);
    border-bottom: 2px solid var(--green-primary);
    padding-bottom: 0.5rem;
}

.usa-flag {
    width: 180px;
    height: auto;
    border-radius: 8px;
    box-shadow: rgba(0,0,0,0.15) 0px 8px 20px;
}

.usa-text {
    font-size: 1.2rem;
    max-width: 600px;
    line-height: 1.6;
}

.usa-button {
    padding: 12px 22px;
    background: var(--green-primary);
    color: white;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: all .3s ease;
}

.usa-button:hover {
    background: var(--green-secondary);
    transform: translateY(-2px);
}


.services__products {
    padding: 4rem 2rem;
    background-color: #fff;
    text-align: center;
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.services__item {
    background-color: #f3f3f3;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 450px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.services__title {
    color: #4a641e;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.services__description {
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 1rem;
}

.services__image {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.services__button {
    margin-top: auto;
    /* 👈 esto hace que baje al fondo */
}

.services__button label {
    padding: 10px 15px;
    background-color: var(--green-primary);
    color: white;
    border-radius: 40px;
    cursor: pointer;
    transition: all 300ms ease;
    display: inline-block;
    position: relative;
}

.services__button label:hover {
    background-color: var(--green-secondary);
}


/* =========================
   LOGÍSTICA DINÁMICA
========================= */

.about__body--dinamica {
    grid-template-columns: 1fr 520px; /* imagen más grande */
    align-items: center; /* centra vertical */
}

.about__text--dinamica {
    font-size: 1.2rem;
    text-align: left;
    margin-bottom: 1rem;
}

.about__list--dinamica {
    list-style: none;
    padding-left: 0;
}

.about__list--dinamica li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 1.15rem;
    line-height: 1.6;
}

.about__list--dinamica li::before {
    content: "—";
    position: absolute;
    left: 0;
    font-weight: bold;
}

.block__image--dinamica {
    
    width: 100%;
    max-width: 520px;
}


/* =========================
   PROYECCIÓN CON FUNDAMENTO
========================= */

.about__body--fundamento {
    grid-template-columns: 1fr 500px; /* imagen más grande */
    align-items: center;
}

.about__text--fundamento {
    font-size: 1.25rem;
    text-align: left;
    margin-bottom: 1rem;
}

.about__list--fundamento {
    list-style: none;
    padding-left: 0;
}

.about__list--fundamento li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 1.2rem;
    line-height: 1.6;
}

.about__list--fundamento li::before {
    content: "—";
    position: absolute;
    left: 0;
    font-weight: bold;
}

.block__image--fundamento {

    width: 100%;
    max-width: 500px;
}

/* Ocultar checkbox */
.modal__toggle {
    display: none;
}

/* Modal general */
.services__modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Contenido del modal */
.modal__content {
    width: 90%;
    max-width: 400px;
    background: linear-gradient(to bottom, #2c2b2b, #1f1f1f);
    /* fondo oscuro degradado */
    padding: 2rem;
    border-radius: 14px;
    position: relative;
    text-align: left;

    /* Borde exterior similar al de la imagen */
    border: 1px solid #555;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        /* brillo interior */
        0 3px 8px rgba(0, 0, 0, 0.6),
        /* sombra exterior */
        0 0 0 1px rgba(255, 255, 255, 0.05);
    /* borde tenue */
    color: #ddd;
    /* texto claro sobre fondo oscuro */
}


.modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgb(219, 25, 25);
    color: #fff;
    font-weight: 800;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Mostrar el modal correspondiente al checkbox */
#modal-toggle-1:checked~.services__modal--1,
#modal-toggle-2:checked~.services__modal--2,
#modal-toggle-3:checked~.services__modal--3,
#modal-toggle-4:checked~.services__modal--4,
#modal-toggle-5:checked~.services__modal--5,
#modal-toggle-6:checked~.services__modal--6{
    display: flex;
}

/*servicios extra*/

.services__extras {
    padding: 4rem 2rem;
    background-color: #f7f7f7;
    text-align: center;
}

.services__extras-container {
    max-width: 1100px;
    margin: 0 auto;
}

.services__extras-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #222;
}

.services__extras-text {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    color: #444;
}

.services__extras-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.services__extras-benefit {
    flex: 1 1 280px;
    background-color: #fff;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.services__extras-benefit:hover {
    transform: translateY(-5px);
}

.services__extras-benefit-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #1f1f1f;
}

.services__extras-benefit-text {
    font-size: 1rem;
    color: #555;
}

.services__extras-cta {
    margin-top: 3rem;
}

.services__extras-button {
    padding: 0.8rem 2rem;
    background-color: #1f1f1f;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.services__extras-button:hover {
    background-color: #444;
}

.main__footer {
    background-color: #111;
    /* fondo muy oscuro */
    color: #ccc;
    padding: 3rem 1.5rem;
    font-family: 'Helvetica', sans-serif;
    height: 400px;
}

.footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1000px;

    margin: 0 auto;
}

.footer__section {
    flex: 1 1 250px;
    margin: 1rem;
}

.footer__title {
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.footer__text,
.footer__link {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.6;
    text-decoration: none;
}

.footer__link:hover {
    color: #fff;
    text-decoration: underline;
}

.footer__social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.footer__social-icon {
    background-color: transparent;
    border: 1px solid #aaa;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #aaa;
    transition: all 0.3s ease;
}

.footer__social-icon:hover {
    border-color: #fff;
    color: #fff;
}

.footer__bottom {
    text-align: center;
    margin-top: 2rem;
    color: #666;
    font-size: 0.85rem;
    border-top: 1px solid #222;
    padding-top: 1.5rem;
}


.about_body {
    text-align: left;
}

.about_body h3 {
    font-size: 2rem;
    /* título un poco más grande */
    margin-bottom: 0.6rem;
}

.about_text {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.8rem;
    /* texto más grande */
}

.about_text li {
    display: block;
    margin-bottom: 0.7rem;
}

.about_body {
    text-align: left;
}

.about__title {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.about_description {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.about_text {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.8rem;
}

.about_text li {
    display: block;
    margin-bottom: 0.7rem;
}

/*HAMBURGUER MENU*/

.panels {
    position: fixed;
    z-index: 998;
    background: rgba(255, 255, 255, 0.59);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.6px);
    -webkit-backdrop-filter: blur(8.6px);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    transition: transform .3s ease;
    transform: translate(0, -100%);
}


.panels.is-active{
    transform: translate(0,0);
}

.panel-btn {
    position: fixed;
    z-index: 999;
    bottom: 1vh;
    right: 1vh;
    width: 4rem;
    height: 4rem;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(10, 214, 54, 0.38);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.9px);
    -webkit-backdrop-filter: blur(8.9px);
    order: 1px solid rgba(255, 255, 255, 0.67);
}

.menu {
    width: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}

.menu a{
    padding: 2.3rem;
    width: inherit;
    display: block;
    font-size: 1.5rem;
    text-decoration: none;
    color: var(--black-soft);
    transition: all 0.5s ease;
}

.menu a:hover{
    font-weight: bold;
    background: rgba(10, 214, 54, 0.38);
    -webkit-backdrop-filter: blur(8.9px);
    order: 1px solid rgba(255, 255, 255, 0.67);
}


.section {
    padding: 2rcap;
    padding-top: 4rem;
    padding-left: auto;
    padding-right: auto;
    width: 100%;
    max-width: 100%;
    min-height: 150vh;
    text-align: center;
}

/* Contenedor principal */
.brands {
  width: 100%;
  padding: 40px 0;
  background-color: #fff; /* O el color de fondo de tu web */
  overflow: hidden; /* Importante: oculta lo que sale de la pantalla */
}

/* El "carril" que se mueve */
.brands__slider {
  display: flex;
  width: 100%;
}

.brands__track {
  display: flex;
  width: calc(200px * 20); /* Ajusta según el ancho de imagen x total (10 orig + 10 copias) */
  animation: scroll 40s linear infinite; /* 40s define la velocidad, lineal para que no pare */
}

/* Estilo de cada imagen */
.brands__track img {
  width: 250px; /* Tamaño ideal para logos */
  height: 400px;
  object-fit: contain;
  margin: 0 40px; /* Espaciado entre logos */
  filter: grayscale(0%); /* Opcional: logos en gris */
  transition: filter 0.3s ease;
}

.brands__track img:hover {
  filter: grayscale(0%); /* Color al pasar el mouse */
}

/* Animación: De derecha a izquierda */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Se mueve exactamente la mitad (el primer set de imágenes) */
    transform: translateX(calc(-150px * 10 - 800px)); 
    /* Nota: El cálculo es (ancho de img * cantidad) + (margen total) */
  }
}

/* Responsive */
@media (max-width: 768px) {
  .brands__track img {
    width: 100px; /* Logos más pequeños en móviles */
    margin: 0 20px;
  }
  
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100px * 10 - 400px)); }
  }
}