/* Importa tus variables globales si están en un archivo separado, por ejemplo: */
/* @import 'global.css'; */

/* Base styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-primary);
    line-height: 1.6;
    color: var(--path-color-strong);
    background-color: var(--bg-color-page);
}

/* Header styles */
.main-header {
    display: flex;
    justify-content: center; /* Centra el header-inner dentro del main-header */
    align-items: center;
    padding: var(--scale-l-16) var(--padding-site); /* Padding vertical y lateral (mobile por defecto) */
    background: var(--bg-color-header);
    border-radius: var(--corner-box-sm);
    position: sticky;
    top: 0;
    width: 100%;
      z-index: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    min-height: var(--scale-l-72); /* Mínima altura para el header */
}

.header-inner { /* Contenedor para alinear logo, nav y CTA */
    display: flex;
    justify-content: space-between; /* Empuja logo a la izquierda, nav/CTA a la derecha */
    align-items: center;
    width: 100%; /* Ocupa el 100% del ancho disponible en main-header */
    max-width: var(--viewport-size); /* Mobile max-width (414px) por defecto */
    margin: 0 auto; /* Centrar header-inner */
    /* No hay 'gap' aquí en móvil, ya que el nav estará apilado verticalmente */
}

.logo img {
    height: var(--scale-l-40); /* Altura del logo en móvil (ej. 40px) */
    width: auto;
    display: block;
}

/* Mobile styles for navigation - Default state (hidden) */
.main-nav {
    display: none; /* Oculto por defecto en móvil */
    flex-direction: column; /* Apilado verticalmente cuando se muestra */
    width: 100%;
    background: var(--bg-color-header);
    position: absolute;
    top: 100%; /* Justo debajo del header */
    left: 0;
    padding: var(--space-sm) var(--padding-site); /* Padding para el menú desplegado */
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    border-radius: var(--corner-box-sm);
    box-sizing: border-box; /* Incluir padding en el ancho total */
}

.main-nav.is-open { /* Clase que JS activaría para mostrar el menú */
    display: flex;
}

.main-nav .nav-list {
    list-style: none;
    display: flex;
    flex-direction: column; /* Ítems apilados en móvil */
    gap: var(--scale-l-16); /* Espacio entre ítems de lista */
    padding-bottom: var(--scale-l-16); /* Espacio antes del CTA si no es el último */
}

.nav-link {
    color: var(--path-color-strong);
    font-family: var(--font-family-primary);
    font-size: var(--body-lg); /* Tamaño de texto para móvil (20px) */
    font-weight: var(--fontweight-bold); /* Peso de texto para móvil (700) */
    line-height: normal;
    text-decoration: none;
    display: block; /* Para que toda el área sea clickeable */
    padding: var(--scale-l-8) var(--scale-l-0); /* Pequeño padding para el área clickeable */
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--a-accent-darker); /* Color de hover para móvil */
}

/* Contact CTA Button - Mobile styles */
.btn-contact-cta {
    display: flex;
    padding: var(--scale-l-22) var(--scale-l-24); /* Padding de Figma (22px vert, 24px horiz) */
    justify-content: center;
    align-items: center;
    gap: var(--scale-l-6);
    border-radius: var(--corner-box-sm);
    background: var(--brand-primary);
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-family-primary);
    font-weight: var(--fontweight-bold); /* Peso de texto para móvil (700) */
    font-size: var(--button-text); /* Tamaño de texto para móvil (18px) */
    white-space: nowrap;
    width: 100%; /* Ocupa todo el ancho en móvil */
    margin-top: var(--scale-l-0); /* No hay margen superior extra en móvil */
    transition: background-color 0.3s ease;
}

.btn-contact-cta:hover {
    background: var(--path-color-brand-secondary);
}

/* Hamburger menu button - Mobile styles */
.hamburger-menu {
    display: flex; /* Visible en móvil */
    flex-direction: column;
    justify-content: space-around;
    width: var(--scale-l-30); /* Ancho del icono */
    height: var(--scale-l-24); /* Alto del icono */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: var(--z-index-dropdown); /* Para que esté sobre el contenido */
}

.hamburger-menu .bar {
    display: block;
    width: 100%;
    height: var(--scale-l-2); /* Grosor de las líneas */
    background: var(--path-color-strong);
    border-radius: var(--scale-l-2);
    transition: all 0.3s ease-in-out;
}

/* Hamburger active state (para animación al abrir/cerrar) */
.hamburger-menu.is-active .bar:nth-child(1) { transform: translateY(var(--scale-l-8)) rotate(45deg); }
.hamburger-menu.is-active .bar:nth-child(2) { opacity: 0; }
.hamburger-menu.is-active .bar:nth-child(3) { transform: translateY(calc(var(--scale-l-8) * -1)) rotate(-45deg); }


/* Desktop styles - A partir de breakpoint-lg (1025px) */
@media (min-width: 1025px) { /* --breakpoint-lg */
    .main-header {
        padding: var(--scale-l-16) var(--padding-site); /* El padding-site para desktop */
        /* width: 1517px; from Figma, pero max-width es más flexible */
    }

    .header-inner {
        max-width: 1517px; /* Usamos el ancho de Figma para desktop, ajusta si es necesario */
        justify-content: space-between; /* Empuja logo a la izquierda, nav/CTA a la derecha */
        /* Reajustar el gap si es necesario para el layout horizontal */
    }

    .hamburger-menu {
        display: none; /* Oculta el menú hamburguesa en desktop */
    }

    .main-nav {
        display: flex; /* Muestra la navegación en desktop */
        flex-direction: row; /* Ítems de navegación en fila */
        width: auto; /* El ancho se ajusta al contenido */
        position: static; /* Quita el posicionamiento absoluto */
        padding: var(--scale-l-0); /* Elimina el padding de menú desplegable */
        box-shadow: none; /* Elimina la sombra */
        gap: var(--space-md); /* Espacio entre la lista de navegación y el botón CTA */
        align-items: center; /* Centra verticalmente los ítems de navegación y el botón */
    }

    .main-nav .nav-list {
        flex-direction: row; /* Ítems de la lista en fila */
        gap: var(--scale-l-32); /* Espacio entre los ítems de navegación (ej. 32px) */
        padding-bottom: var(--scale-l-0); /* No hay padding extra abajo en desktop */
    }

    .nav-link {
        font-size: var(--body-lg); /* Tamaño de texto de navegación para desktop (18px) */
        font-weight: var(--fontweight-regular); /* Peso de texto para desktop (400) */
        padding: var(--scale-l-0); /* No hay padding extra en ítems de desktop */
    }

    .nav-link:hover {
        color: var(--a-accent-dark); /* Color de hover para desktop */
    }

    .btn-contact-cta {
        width: auto; /* Ancho se ajusta al contenido del botón */
        margin-top: var(--scale-l-0); /* Elimina margen superior */
        font-size: var(--button-text); /* Tamaño de texto del botón para desktop (30px) */
        font-weight: var(--fontweight-bold); /* Peso de texto del botón (700) */
    }
}

/* Laptop/Tablet styles (ajuste entre móvil y desktop) */
/* Usaremos breakpoint-md (769px) como el inicio de tablet */
@media (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px)) {
    .main-header {
        padding: var(--scale-l-16) var(--space-md); /* Ajusta padding para tablet */
    }

    .header-inner {
        max-width: 90%; /* Ancho más contenido para tablets */
        /* Puede que quieras ajustar el gap aquí también si es diferente al desktop */
    }

    .hamburger-menu {
        display: none; /* Oculta la hamburguesa en tablets si quieres menú abierto */
    }

    .main-nav {
        display: flex; /* Muestra la navegación en tablets */
        flex-direction: row; /* Ítems de navegación en fila */
        width: auto;
        position: static;
        padding: var(--scale-l-0);
        box-shadow: none;
        gap: var(--space-sm); /* Espacio más pequeño entre ítems de navegación para tablets */
        align-items: center;
    }

    .main-nav .nav-list {
        flex-direction: row;
        gap: var(--scale-l-24); /* Espacio entre ítems de lista en tablet */
    }

    .nav-link {
        font-size: var(--body-lg); /* Tamaño de texto de navegación para tablet (14px) */
    }

    .btn-contact-cta {
        font-size: var(--body-md); /* Tamaño de texto del botón para tablet (18px) */
    }
}
.container{
    margin: 0 6%;
}

/* ... (Tus variables globales y estilos del header aquí) ... */

/* ========================================================================= */
/* --- HERO BANNER SECTION --- */

.hero-banner {
    /* El contenedor principal de la sección */
    padding: var(--space-md) var(--padding-site); /* Padding general de la sección (ej. 24px en mobile, 20px padding-site) */
    background-color: var(--bg-color-page); /* Color de fondo de la página */
    display: flex;
    justify-content: center; /* Centrar el wrapper interno */
    align-items: flex-start; /* Alineación inicial en mobile */
    flex-direction: column; /* MOBILE: Apilar imagen y texto */
}

.hero-content-wrapper {
    /* Este es el contenedor que Figma describe con display: flex; align-items: flex-start; gap: 24px; flex: 1 0 0; */
    /* En mobile, lo trataremos de forma diferente, apilando los elementos */
    display: flex;
    flex-direction: column; /* MOBILE: Apilar los elementos (imagen primero, luego texto) */
    align-items: center; /* Centrar contenido horizontalmente en mobile */
    width: 100%; /* Ocupa el 100% del ancho disponible */
    max-width: var(--viewport-size); /* Limitar al ancho del viewport mobile (414px) */
    margin: 0 auto; /* Centrar wrapper */
    gap: var(--space-md); /* Espacio entre imagen y texto (24px) */
}

.hero-image-container {
    /* MOBILE: Imagen arriba */
    width: 100%; /* Ocupa todo el ancho disponible */
    /* Las dimensiones de Figma son width: 718.579px; height: 664.854px; para desktop.
       En mobile, simplemente la hacemos responsive al ancho. */
    height: auto; /* Mantiene la proporción */
    flex-shrink: 0;
    order: -1; /* Mueve la imagen al principio en mobile */
    /* background: url(<path-to-image>) lightgray 50% / cover no-repeat;
       Usaremos la etiqueta <img> para mayor control y accesibilidad. */
    display: flex;
    justify-content: center; /* Centrar la imagen dentro de su contenedor si no ocupa el 100% */
}

.hero-image-container img {
    width: 100%; /* La imagen ocupa el 100% de su contenedor */
    max-width: 100%;
    height: auto; /* Mantiene la proporción */
    display: block;
    border-radius: var(--corner-box-md); /* Pequeño redondeo en la imagen */
}


.hero-text-content {
    /* MOBILE: Texto debajo de la imagen */
    /* Figma: width: 760px; flex-direction: column; align-items: flex-start; gap: 24px; */
    width: 100%; /* Ocupa todo el ancho disponible en mobile */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar el texto en mobile */
    gap: var(--space-md); /* Espacio entre título, párrafo y CTA (24px) */
    text-align: center; /* Centrar el texto */
}

.hero-text-content h1 {
    /* Estilos base para H1 */
    font-family: var(--font-family-primary);
    font-size: var(--heading-lg); /* 44px en mobile, 80px en desktop */
    font-weight: 600;
    line-height: var(--lh-heading-lg); /* 50px en mobile, 88px en desktop */
    color: var(--path-color-strong);
    margin-bottom: var(--scale-l-0); /* El gap ya maneja el espacio */
}



    

.hero-text-content h1 .highlight-text {
    /* Estilos para el span de acento */
    color: var(--path-color-accent-A, #468124);
}

.hero-paragraph {
    /* Estilos para el párrafo */
    align-self: stretch; /* Se estira para ocupar el ancho disponible */
    color: var(--path-color-strong);
    font-family: var(--font-family-primary);
    font-size: var(--body-lg); /* 20px en mobile, 24px en desktop */
    font-weight: var(--fontweight-regular);
    line-height: var(--lh-body-lg); /* 28px en mobile, 36px en desktop */
    letter-spacing: -0.48px;
    margin-bottom: var(--scale-l-0); /* El gap ya maneja el espacio */
}

.btn-primary-cta {
    /* Estilos para el CTA "Conoce más" */
    /* Figma: display: flex; padding: var(--scale-l-22) var(--scale-l-24); justify-content: center; align-items: center; gap: 6px; */
    /* Figma: border-radius: var(--spacing-xs, 4px); background: var(--A-state-color-default, #468124); */
    display: flex;
    padding: var(--scale-l-22) var(--scale-l-24);
    justify-content: center;
    align-items: center;
    gap: var(--scale-l-6); /* 6px */
    border-radius: var(--corner-box-sm); /* Usando var(--corner-box-sm, 8px) o var(--spacing-xs, 4px); - Figma dice spacing-xs pero la var es scale-l-4. Usaré corner-box-sm que es 8px */
    background: var(--a-state-color-default); /* Color de acento verde */
    color: var(--white); /* Texto blanco */
    text-decoration: none; /* Sin subrayado */
    font-family: var(--font-family-primary);
    font-weight: var(--fontweight-bold); /* Bold para CTA */
    font-size: var(--button-text); /* 18px en mobile */
    white-space: nowrap; /* Evita que el texto se rompa */
    transition: background-color 0.3s ease;
    width: 80%; /* Para que el botón no sea demasiado ancho en mobile, pero se ajuste */
    max-width: 300px; /* Limitar el ancho del botón en mobile */
}

.btn-primary-cta:hover {
    background: var(--a-state-color-hover); /* Color de hover para el botón (verde más oscuro) */
}


/* ========================================================================= */
/* --- MEDIA QUERIES PARA RESPONSIVIDAD DEL HERO BANNER --- */

/* Tablet (desde 769px) */
@media (min-width: 769px) { /* --breakpoint-md */
    .hero-banner {
        padding: var(--space-lg) var(--padding-site); /* Aumentar padding de la sección para tablets (48px) */
        align-items: center; /* Centrar verticalmente el wrapper en tablet */
        flex-direction: column; /* Mantener la disposición en columna por ahora, ajustar para laptop si quieres fila */
    }

    .hero-content-wrapper {
        flex-direction: column; /* Mantener texto y imagen apilados en tablet, si no hay espacio para lado a lado */
        max-width: 700px; /* Limitar el ancho del wrapper en tablets */
        gap: var(--space-lg); /* Aumentar el gap entre elementos (48px) */
    }

    .hero-image-container {
        order: -1; /* Imagen sigue arriba */
        width: 80%; /* Hacer la imagen un poco más grande en tablets */
    }

    .hero-text-content {
        width: 90%; /* Ancho del texto en tablets */
        align-items: center; /* Centrar texto */
        text-align: center; /* Centrar el texto */
    }

    .hero-text-content h1 {
       font-size: var(--heading-lg);
        line-height: 85px;
        font-weight: 600;
    }

    .hero-paragraph {
        font-size: var(--body-lg); /* 24px en tablet */
        line-height: var(--lh-body-lg); /* 36px en tablet */
    }

    .btn-primary-cta {
        width: auto; /* Ancho automático para el botón en tablet */
        font-size: var(--body-lg); /* Tamaño del botón para tablet (24px) */
        padding: var(--scale-l-24) var(--scale-l-28); /* Ajustar padding si es necesario */
    }
}

/* Desktop (desde 1025px) */
@media (min-width: 1025px) { /* --breakpoint-lg */
    .hero-banner {
        padding: var(--space-xl) var(--padding-site); /* Más padding para desktop (120px) */
        flex-direction: row; /* Volver a flex-direction: row, aunque el wrapper la maneja */
    }

    .hero-content-wrapper {
        flex-direction: row; /* Organizar texto a la izquierda, imagen a la derecha */
        justify-content: space-between; /* Espaciar texto e imagen */
        align-items: flex-start; /* Alinear arriba si los contenidos tienen alturas diferentes */
        max-width: 1517px; /* Ancho total del contenido principal de Figma */
        gap: var(--space-lg); /* Espacio entre texto e imagen (80px) */
    }

    .hero-text-content {
        order: 0; /* Texto a la izquierda (orden normal) */
        width: 760px; /* Ancho fijo para el contenedor de texto de Figma */
        align-items: flex-start; /* Alinear texto a la izquierda */
        text-align: left; /* Alinear el texto a la izquierda */
    }

    .hero-text-content h1 {
          font-size: var(--heading-xl);
 line-height: 85px;
        font-weight: 600;
    }

    .hero-paragraph {
        font-size: var(--body-lg); /* 24px en desktop */
        line-height: var(--lh-body-lg); /* 36px en desktop */
        /* align-self: stretch; ya está, pero no es tan relevante con un width fijo */
    }

    .btn-primary-cta {
        width: auto; /* Ancho automático para el botón */
        font-size: var(--button-text); /* 30px en desktop */
    }

    .hero-image-container {
        order: 1; /* Imagen a la derecha */
        width: 50%; /* Ancho fijo de Figma para la imagen */
        flex-shrink: 0; /* No permite que la imagen se encoja */
    }
}


/* ... (Tus variables globales, estilos del header y hero-banner aquí) ... */

/* ========================================================================= */
/* --- CLIENTS SECTION --- */

.clients-section {
    padding: var(--margin-section) var(--padding-site); /* Espacio general de la sección (ej. 48px mobile, 120px desktop) */
    background-color: var(--bg-color-page); /* O un color de fondo diferente si deseas */
    text-align: center;
}

.clients-heading {
    /* Estilos del título "Clientes" de Figma */
    color: var(--path-color-strong); /* #324036 */
    text-align: center;
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--heading-md); /* Mobile: 26px, Desktop: 36px/56px */
    font-weight: 700; /* 700 */
    line-height: 100%; /* 100% de la font-size, como 56px de 56px */
    /* text-feature-settings no es una propiedad CSS directa, se refiere más a configuraciones de fuente OpenType.
       Si Figma te lo da así, es para un control tipográfico más fino, pero no es un CSS estándar para aplicar directamente.*/
    margin-bottom: var(--space-lg); /* Espacio debajo del título (ej. 48px) */
}

.logos-carousel-container {
    width: 100%;
    overflow: hidden; /* Oculta los logos que están fuera del contenedor */
    white-space: nowrap; /* Asegura que los logos se mantengan en una sola línea */
    padding: var(--space-md) var(--scale-l-0); /* Padding vertical dentro del contenedor del carrusel */
    position: relative; /* Necesario para que el pseudo-elemento de fade funcione si lo agregamos */
}

.logos-carousel {
    display: inline-flex; /* Permite que el contenido se expanda y se alinee horizontalmente */
    align-items: center;
    /* La duración de la animación dependerá del número de logos y del "ancho" total a animar */
    /* ajusta 25s o 30s según te parezca más suave */
    animation: scroll-logos 25s linear infinite; 
}

.logos-carousel img {
    height: var(--scale-l-67); /* Alto de 67px para mobile/tablet (si --scale-l-67 está en tu mobile/tablet variables) */
                                /* O puedes usar un valor fijo como 65px */
    width: auto; /* Mantiene la proporción */
 width: 208x; /* Ancho de cada logo */
 height: 61px;
    margin: 0 var(--space-md); /* Espacio entre logos (24px) */
    display: block; /* Elimina espacio extra */
    flex-shrink: 0; /* Evita que los logos se encojan en pantallas pequeñas */
    opacity: var(--opacity-subtle); /* Semitransparente por defecto (80%) */
    transition: opacity 0.3s ease;
}

:hover {
    opacity: 1; /* Opacidad completa al pasar el ratón */
}

/* Animación de desplazamiento infinito para los logos */
@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }
    /* El 50% es porque duplicamos los logos en el HTML. Se mueve la mitad del ancho total */
    100% {
        transform: translateX(-50%); 
    }
}

/* ========================================================================= */
/* --- RESPONSIVE PARA LA SECCIÓN CLIENTES --- */

/* Tablet (desde 769px) */
@media (min-width: 769px) { /* --breakpoint-md */
    .clients-section {
        padding: var(--margin-section) var(--padding-site); /* Usar margin-section de tablet (48px) */
    }

    .clients-heading {
        font-size: var(--heading-lg); /* Tamaño de título para tablet (44px) */
    }

    .logos-carousel img {
        height: var(--scale-l-72); /* Altura un poco más grande para tablet (72px) */
       width: 208x; /* Ancho de cada logo */
 height: 61px;
        margin: 0 var(--space-lg); /* Más espacio entre logos para tablet (48px) */
    }
}

/* Desktop (desde 1025px) */
@media (min-width: 1025px) { /* --breakpoint-lg */
    .clients-section {
        padding: var(--margin-section) var(--padding-site); /* Usar margin-section de desktop (120px) */
    }

    .clients-heading {
        font-size: var(--heading-lg); /* O var(--heading-xl) si quieres el de 80px */
        /* Si tu heading-lg para desktop es 56px, entonces usa heading-lg aquí. */
        /* Si en Figma heading-lg es 44px en laptop y heading-xl 80px en desktop, y quieres 56px, tendrías que definir una variable nueva o usar el valor directo. */
        font-size: 56px; /* Valor directo de 56px para desktop h2 clientes */
        line-height: 100%;
    }

    .logos-carousel img {
        height: var(--scale-l-80); /* Altura aún más grande para desktop (80px) */
  width: 208x; /* Ancho de cada logo */
 height: 61px;
        margin: 0 var(--space-xl); /* Más espacio entre logos para desktop (120px) */
    }
}

/* --- PRODUCTO DESTACADO SECTION --- */

.product-highlight-section {
    padding: var(--margin-section) var(--padding-site); /* Espaciado general de la sección */
    background-color: var(--bg-color-page); /* Fondo de la página */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alineación inicial */
}

.product-content-wrapper {
    display: flex;
    flex-direction: column; /* MOBILE: La imagen y el texto se apilan */
    align-items: center; /* Centrar contenido en mobile */
    width: 100%;
    max-width: 1200px; /* Un max-width general para el contenido */
    margin: 0 auto;
    gap: var(--space-lg); /* Espacio entre imagen y texto (ej. 48px) */
}

.product-image-container {
    width: 100%; /* Ocupa todo el ancho disponible en mobile */
    height: auto;
    order: -1; /* MOBILE: La imagen va arriba */
    display: flex;
    justify-content: center; /* Centrar la imagen si es más pequeña que el 100% */
}

.product-image-container img {
    width: 100%; /* La imagen ocupa el 100% de su contenedor */
    max-width: 100%; /* Asegura que no desborde */
    height: auto;
    display: block;
    border-radius: var(--corner-box-md); /* Redondeo de esquinas */
}

.product-text-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* MOBILE: Centrar todos los elementos de texto */
    text-align: center; /* Centrar el texto */
    width: 100%; /* Ocupa todo el ancho disponible */
    max-width: 760px; /* Ancho máximo para el texto en móvil/tablet antes de ir a desktop */
    margin: 0 auto;
    gap: var(--space-md); /* Espacio entre elementos de texto (24px) */
}

.product-subtitle {
    /* Estilos para el "Sobre título" */
    color: var(--path-color-accent-a); /* Color de acento (#468124) */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--heading-md); /* Mobile: 26px, Tablet/Desktop: 36px */
    font-weight: var(--fontweight-bold); /* 700 */
    line-height: var(--lh-body-lg); /* 36px */
    letter-spacing: -0.72px;
 
}

.product-title {
    /* Estilos para el Título principal */
    color: var(--path-color-strong); /* #324036 */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--heading-lg); /* Mobile: 28px, Tablet: 44px, Desktop: 56px */
    font-weight: var(--fontweight-bold); /* 700 */
    line-height: var(--lh-heading-lg); /* Mobile: 28px, Tablet: 54px, Desktop: 64px */
    letter-spacing: -1.12px;
    margin-top: var(--scale-l-0); /* El gap ya maneja el espacio */
    margin-bottom: var(--scale-l-0);
}

.product-description {
    /* Estilos para la Bajada */
    color: var(--path-color-strong); /* #324036 */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--body-lg); /* Mobile: 20px, Tablet/Desktop: 24px */
    font-weight: var(--fontweight-regular); /* 400 */
    line-height: var(--lh-body-lg); /* 28px en mobile, 36px en desktop */
    letter-spacing: -0.48px;
    margin-bottom: var(--scale-l-0);
}

.product-features {
    list-style: none; /* Elimina los bullets por defecto */
    padding-left: var(--scale-l-0); /* Asegura que no haya padding de lista */
    display: flex;
    flex-direction: column;
    gap: var(--scale-l-8); /* Espacio entre cada bullet (8px) */
    width: 100%;
    max-width: 400px; /* Limitar el ancho de la lista para mejor legibilidad */
    text-align: left; /* Alinear los bullets a la izquierda dentro de su contenedor */
    margin: var(--space-sm) auto; /* Centrar la lista y darle margen */
}

.product-features li {
    color: var(--path-color-strong);
    font-family: var(--font-family-primary);
    font-size: var(--body-md); /* 14px en mobile, 16px en tablet/desktop */
    font-weight: var(--fontweight-regular);
    line-height: var(--lh-body-md); /* 20px en mobile, 24px en tablet/desktop */
    position: relative;
    padding-left: var(--space-md); /* Espacio para el bullet custom */
}

.product-features li::before {
    content: '✓'; /* Carácter de checkmark */
    color: var(--path-color-accent-a); /* Color del checkmark */
    font-weight: var(--fontweight-bold);
    position: absolute;
    left: 0;
    top: 0;
    line-height: inherit; /* Asegura que el checkmark se alinee con el texto */
}

.btn-product-cta {
    /* Estilos para el botón CTA "Ver más" */
    display: flex;
    padding: var(--scale-l-22) var(--scale-l-24); /* 22px vert, 24px horiz */
    justify-content: center;
    align-items: center;
    gap: var(--scale-l-6); /* 6px */
    border-radius: var(--corner-box-sm); /* 8px */
    background: var(--a-state-color-hover); /* #304324 */
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-family-primary);
    font-weight: var(--fontweight-bold); /* 700 */
    font-size: var(--button-text); /* 18px en mobile */
    white-space: nowrap;
    transition: background-color 0.3s ease;
    width: 80%; /* Para que el botón no sea demasiado ancho en mobile */
    max-width: 300px; /* Limitar el ancho del botón */
    margin-top: var(--space-md); /* Margen superior (24px) */
}

.btn-product-cta:hover {
    background: var(--path-color-brand-primary); /* Un color de hover ligeramente diferente */
}

/* ... (Tus variables globales y estilos de secciones anteriores aquí) ... */

/* ========================================================================= */
/* --- GENERIC CONTENT SECTION (REUTILIZABLE) --- */

.content-section {
    padding: var(--margin-section) var(--padding-site); /* Espaciado general de la sección */
    background-color: var(--bg-color-page); /* Fondo de la página */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alineación inicial */
}

.content-wrapper {
    display: flex;
    flex-direction: column; /* MOBILE: La imagen y el texto se apilan (imagen primero por default HTML) */
    align-items: flex-start; /* Centrar contenido en mobile */
    width: 100%;
    max-width: 1200px; /* Un max-width general para el contenido */
    margin: 0 auto;
    gap: var(--space-lg); /* Espacio entre imagen y texto (ej. 48px) */
}

.content-image-container {
    width: 100%; /* Ocupa todo el ancho disponible en mobile */
    height: auto;
    order: -1; /* MOBILE: La imagen va arriba, sin importar si es reversed o no */
    display: flex;
    justify-content: center; /* Centrar la imagen si es más pequeña que el 100% */
}

.content-image-container img {
    width: 100%; /* La imagen ocupa el 100% de su contenedor */
    max-width: 100%; /* Asegura que no desborde */
    height: auto;
    display: block;
    border-radius: var(--corner-box-md); /* Redondeo de esquinas */
}

.content-text-block {
    display: flex;
    flex-direction: column;
    align-items: center; /* MOBILE: Centrar todos los elementos de texto */
    text-align: center; /* Centrar el texto */
    width: 100%; /* Ocupa todo el ancho disponible */
    max-width: 760px; /* Ancho máximo para el texto en móvil/tablet antes de ir a desktop */
    margin: 0 auto;
    gap: var(--space-md); /* Espacio entre elementos de texto (24px) */
}

.content-subtitle {
    /* Estilos para el "Sobre título" */
    color: var(--path-color-accent-a); /* Color de acento (#468124) */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--heading-md); /* Mobile: 26px, Tablet/Desktop: 36px */
    font-weight: 700; /* 700 */
    line-height: var(--lh-body-lg); /* 36px */
    letter-spacing: -0.72px;
}

.content-title {
    /* Estilos para el Título principal */
    color: var(--path-color-strong); /* #324036 */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--heading-lg); /* Mobile: 28px, Tablet: 44px, Desktop: 56px */
    font-weight: 700; /* 700 */
    line-height: var(--lh-heading-lg); /* Mobile: 28px, Tablet: 54px, Desktop: 64px */
    letter-spacing: -1.12px;
    margin-top: var(--scale-l-0);
    margin-bottom: var(--scale-l-0);
}

.content-description {
    /* Estilos para la Bajada */
    color: var(--path-color-strong); /* #324036 */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--body-lg); /* Mobile: 20px, Tablet/Desktop: 24px */
    font-weight: var(--fontweight-regular); /* 400 */
    line-height: var(--lh-body-lg); /* 28px en mobile, 36px en desktop */
    letter-spacing: -0.48px;
    margin-bottom: var(--scale-l-0);
}

.content-features {
    list-style: none;
    padding-left: var(--scale-l-0);
    display: flex;
    flex-direction: column;
    gap: var(--scale-l-8); /* Espacio entre cada bullet (8px) */
    width: 100%;
    max-width: 400px;
    text-align: left;
    margin: var(--space-sm) auto; /* Centrar la lista y darle margen */
}

.content-features li {
    color: var(--path-color-strong);
    font-family: var(--font-family-primary);
    font-size: var(--body-lg); /* 24px */
    line-height: var(--lh-body-lg); /* 36px */
    font-weight: var(--fontweight-regular);
    position: relative;
    padding-left: var(--space-md); /* Espacio para el bullet custom */
}

.content-features li::before {
    content: '✓';
    color: var(--path-color-accent-a);
    font-weight: var(--fontweight-bold);
    position: absolute;
    left: 0;
    top: 0;
    line-height: inherit;
}

.btn-content-cta {
    /* Estilos para el botón CTA "Ver más" */
    display: flex;
    padding: var(--scale-l-22) var(--scale-l-24);
    justify-content: center;
    align-items: center;
    gap: var(--scale-l-6);
    border-radius: var(--corner-box-sm);
    background: var(--a-state-color-hover); /* #304324 */
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-family-primary);
    font-weight: var(--fontweight-bold);
    font-size: var(--button-text); /* 18px en mobile */
    white-space: nowrap;
    transition: background-color 0.3s ease;
    width: 80%;
    max-width: 300px;
    margin-top: var(--space-md);
}

.btn-content-cta:hover {
    background: var(--path-color-brand-primary);
}

/* ========================================================================= */
/* --- RESPONSIVE PARA LA SECCIÓN DE CONTENIDO (GENÉRICA) --- */

/* Tablet (desde 769px) */
@media (min-width: 769px) { /* --breakpoint-md */
    .content-section {
        padding: var(--margin-section) var(--padding-site);
    }

    .content-wrapper {
        flex-direction: column; /* Sigue en columna por defecto en tablet */
        gap: var(--space-xl);
        max-width: 900px;
    }

    .content-image-container {
        width: 80%;
    }

    .content-text-block {
        width: 90%;
        gap: var(--space-lg);
    }

    .content-subtitle {
        font-size: var(--heading-md);
        line-height: var(--lh-body-lg);
    }

     {
        font-size: var(--heading-lg); /* 44px */
        line-height: var(--lh-heading-lg); /* 54px */
    }

    .content-description {
        font-size: var(--body-lg); /* 24px */
        line-height: var(--lh-body-lg); /* 36px */
    }

    .content-features li {
        font-size: var(--body-lg); /* 24px */
        line-height: var(--lh-body-lg); /* 36px */
    }

    .btn-content-cta {
        width: auto;
        font-size: var(--body-lg); /* 24px */
        padding: var(--scale-l-24) var(--scale-l-28);
        max-width: 350px;
    }
}

/* Desktop (desde 1025px) */
@media (min-width: 1025px) { /* --breakpoint-lg */
    .content-section {
        padding: var(--margin-section) var(--padding-site); /* 120px padding */
    }

    .content-wrapper {
        flex-direction: row; /* DESKTOP: Imagen izquierda, texto derecha por defecto */
        justify-content: center;
        align-items: flex-start;
        gap: var(--space-xl); /* Espacio generoso entre imagen y texto (120px) */
        max-width: 1517px; /* Ancho total del contenido principal de Figma */
    }

    .content-image-container {
        width: 50%; /* Ancho fijo de la imagen de Figma */
    
        order: 0; /* Imagen en su orden normal (izquierda) */
        flex-shrink: 0;
    }
    .content-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content-text-block {
        width: 760px; /* Ancho fijo para el contenedor de texto de Figma */
        align-items: flex-start; /* Alinear texto a la izquierda */
        text-align: left; /* Alinear el texto a la izquierda */
        margin: var(--scale-l-0);
        gap: var(--space-md);
    }

    .content-subtitle {
        font-size: var(--heading-md);
        line-height: var(--lh-body-lg);
    }

     {
        font-size: var(--heading-lg); /* 56px */
        line-height: var(--lh-heading-lg); /* 64px */
    }

    .content-description {
        font-size: var(--body-lg); /* 24px */
        line-height: var(--lh-body-lg); /* 36px */
    }

    .content-features {
        width: auto;
        margin-left: var(--scale-l-0);
        margin-right: var(--scale-l-0);
    }
    
    .btn-content-cta {
        width: auto;
        font-size: var(--button-text); /* 30px */
        padding: var(--scale-l-22) var(--scale-l-24);
        max-width: none;
        margin-top: var(--space-md);
    }

    /* CLASE MODIFICADORA: Para invertir el orden de la imagen y el texto en DESKTOP */
    .content-section--reversed .content-wrapper {
        flex-direction: row-reverse; /* Invierte el orden: Imagen a la derecha, Texto a la izquierda */
    }

    /* Si necesitas ajustes específicos para texto/imagen cuando el orden está invertido */
    .content-section--reversed .content-text-block {
        /* Ejemplo: si el texto debe seguir alineado a la izquierda, no necesitas cambiar nada */
        /* Si quieres que se alinee a la derecha cuando la imagen está a la izquierda (el texto a la derecha), puedes hacer: */
        /* align-items: flex-end; */
        /* text-align: right; */
    }
}



/* ... (Tus variables globales y estilos de secciones anteriores aquí) ... */

/* ========================================================================= */
/* --- SERVICIOS SECTION --- */

.services-section {
    padding: var(--margin-section) var(--padding-site); /* Espaciado general de la sección */
    background-color: var(--bg-color-page); /* Fondo de la página */
    text-align: center; /* Centrar el título y los elementos en mobile */
}

.services-section-title {
    /* Estilos del Título de sección */
    color: var(--path-color-strong); /* #324036 */
    text-align: center;
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--heading-lg); /* Mobile: 28px, Tablet: 44px, Desktop: 56px */
    font-weight: 700; /* 700 */
    line-height: 100%; /* 56px */
    margin-bottom: var(--space-xl); /* Espacio debajo del título (ej. 48px mobile, 120px desktop) */
    /* font-feature-settings no es una propiedad CSS directa, se refiere a características de OpenType */
}

.services-grid {
    display: flex;
    flex-direction: column; /* MOBILE: Las columnas se apilan verticalmente */
    gap: var(--space-lg); /* Espacio entre las columnas apiladas (ej. 48px) */
    max-width: 1200px; /* Ancho máximo para el grid de servicios */
    margin: 0 auto; /* Centrar el grid */
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar contenido dentro de cada columna */
    text-align: center; /* Centrar texto dentro de cada columna */
    padding: var(--space-md); /* Padding interno de cada item (ej. 24px) */
    border-radius: var(--corner-box-md); /* Bordes redondeados (16px) */
}

.service-icon {
    width: var(--scale-l-64); /* Tamaño del icono (ej. 64px) */
    height: var(--scale-l-64); /* Tamaño del icono (ej. 64px) */
    border-radius: 50%; /* Icono circular */
    margin-bottom: var(--space-sm); /* Espacio debajo del icono (ej. 16px) */
    display: flex; /* Para centrar el contenido del icono si fuera una SVG o imagen */
    justify-content: center;
    align-items: center;
    /* Colores dummy para los iconos */
    background-color: var(--gray200); /* Color base si no se especifica */
}

.service-icon.icon-green {
    background-color: var(--deco-green); /* Color del primer icono (verde) */
}

.service-icon.icon-yellow {
    background-color: var(--deco-orange-choca); /* Color del segundo icono (naranja/choque) */
}

.service-icon.icon-blue {
    background-color: var(--system-info); /* Color del tercer icono (azul) */
}


.service-item .service-title {
    /* Estilos para el Título de cada columna */
    color: var(--path-color-strong); /* #324036 */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--heading-md); /* Mobile: 26px, Tablet/Desktop: 36px */
    font-weight: 700; /* 700 */
    line-height: var(--lh-body-lg); /* 36px */
    letter-spacing: -0.72px;
    margin-bottom: var(--scale-l-8); /* Espacio debajo del título (8px) */
}

.service-item .service-description {
    /* Estilos para la Bajada de cada columna */
    color: var(--path-color-strong); /* #324036 */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--body-lg); /* Mobile: 20px, Tablet/Desktop: 24px */
    font-weight: var(--fontweight-regular); /* 400 */
    line-height: var(--lh-body-lg); /* 28px en mobile, 36px en desktop */
    letter-spacing: -0.48px;
    margin-bottom: var(--scale-l-0); /* No hay margen inferior si el padding del item lo maneja */
}


/* ========================================================================= */
/* --- RESPONSIVE PARA LA SECCIÓN SERVICIOS --- */

/* Tablet (desde 769px) */
@media (min-width: 769px) { /* --breakpoint-md */
    .services-section-title {
        font-size: var(--heading-lg); /* 44px */
        line-height: 100%;
        margin-bottom: var(--space-xl); /* Espacio más grande (48px) */
    }

    .services-grid {
        /* Puedes decidir si en tablet las columnas se apilan de a 2, o van las 3 en fila si hay espacio */
        /* Para 3 columnas: */
        flex-direction: row; /* Columnas en fila */
        flex-wrap: wrap; /* Permite que las columnas se envuelvan si no caben */
        justify-content: center; /* Centrar las columnas */
        gap: var(--space-lg); /* Espacio entre columnas (48px) */
    }

    .service-item {
        flex: 1 1 calc(33.33% - var(--space-lg) * 2 / 3); /* 3 columnas con espacio entre ellas */
        /* Asegurarse de que no sean demasiado pequeñas si el contenido es largo */
        min-width: 280px; /* Ancho mínimo para cada tarjeta */
        max-width: 350px; /* Ancho máximo para cada tarjeta */
        padding: var(--space-lg); /* Más padding interno */
    }

    .service-icon {
        width: var(--scale-l-72); /* Icono un poco más grande (72px) */
        height: var(--scale-l-72);
        margin-bottom: var(--space-md); /* Espacio debajo del icono (24px) */
    }

    .service-item .service-title {
        font-size: var(--heading-md); /* 36px */
        line-height: var(--lh-body-lg); /* 36px */
    }

    .service-item .service-description {
        font-size: var(--body-lg); /* 24px */
        line-height: var(--lh-body-lg); /* 36px */
    }
}

/* Desktop (desde 1025px) */
@media (min-width: 1025px) { /* --breakpoint-lg */
    .services-section {
        padding: var(--margin-section) var(--padding-site); /* 120px padding */
    }

    .services-section-title {
        font-size: var(--heading-lg); /* 56px */
        line-height: 100%;
        margin-bottom: var(--space-xl); /* 120px */
    }

    .services-grid {
        flex-direction: row; /* Asegura que siguen en fila */
        gap: var(--space-xl); /* Espacio más grande entre columnas (120px) */
    }

    .service-item {
        /* Cal_width para 3 columnas con un gap fijo de space-xl */
        flex: 1 1 calc(33.33% - (var(--space-xl) * 2 / 3)); /* Para 3 columnas en fila con 120px gap */
        max-width: none; /* Eliminar max-width para que se ajusten al flex */
    }

    .service-icon {
        width: var(--scale-l-80); /* Icono aún más grande (80px) */
        height: var(--scale-l-80);
        margin-bottom: var(--space-lg); /* Espacio debajo del icono (48px) */
    }

    .service-item .service-title {
        font-size: var(--heading-md); /* 36px */
        line-height: var(--lh-body-lg); /* 36px */
    }

    .service-item .service-description {
        font-size: var(--body-lg); /* 24px */
        line-height: var(--lh-body-lg); /* 36px */
    }
}




/* ... (Tus variables globales y estilos de secciones anteriores aquí) ... */

/* ========================================================================= */
/* --- NÚMEROS CLAVE SECTION --- */

.key-numbers-section {
    padding: var(--margin-section) var(--padding-site); /* Espaciado general de la sección */
    text-align: center;
}

.key-numbers-section-title {
    /* Estilos del Título de sección "Números clave" */
    color: var(--path-color-strong); /* #324036 */
    text-align: center;
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--heading-lg); /* Mobile: 28px, Tablet: 44px, Desktop: 56px */
    font-weight: 700; /* 700 */
    line-height: 100%; /* 56px */
    margin-bottom: var(--space-xl); /* Espacio debajo del título (ej. 48px mobile, 120px desktop) */
}

.numbers-grid {
    display: flex;
    flex-direction: column; /* MOBILE: Las columnas se apilan verticalmente */
    gap: var(--space-lg); /* Espacio entre las columnas apiladas (ej. 48px) */
    max-width: 1200px; /* Ancho máximo para la cuadrícula */
    margin: 0 auto; /* Centrar la cuadrícula */
}

.number-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar contenido dentro de cada columna */
    text-align: center; /* Centrar texto dentro de cada columna */
    padding: var(--space-md); /* Padding interno de cada item (ej. 24px) */
    background-color: var(--white); /* Fondo blanco para cada item */
    border-radius: var(--corner-box-md); /* Bordes redondeados (16px) */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra sutil */
}

.number-item .number-title {
    /* Estilos del Título (número) de cada columna */
    color: var(--path-color-accent-a); /* #468124 */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: 48px; /* Valor directo como especificaste (48px) */
    font-weight: 700; /* 700 */
    line-height: 100%; /* 48px */
    margin-bottom: var(--scale-l-10); /* Espacio debajo del título (ej. 10px) */
}

.number-item .number-description {
    /* Estilos de la Bajada de cada columna */
    color: var(--path-color-strong); /* #324036 */
    text-align: center;
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--body-lg); /* Mobile: 20px, Tablet/Desktop: 24px */
    font-weight: var(--fontweight-regular); /* 400 */
    line-height: var(--lh-body-lg); /* 28px en mobile, 36px en desktop */
    letter-spacing: -0.48px;
    margin-bottom: var(--scale-l-0);
}


/* ========================================================================= */
/* --- RESPONSIVE PARA LA SECCIÓN NÚMEROS CLAVE --- */

/* Tablet (desde 769px) */
@media (min-width: 769px) { /* --breakpoint-md */
    .key-numbers-section-title {
        font-size: var(--heading-lg); /* 44px */
        line-height: 100%;
        margin-bottom: var(--space-xl); /* 48px */
    }

    .numbers-grid {
        flex-direction: row; /* Tablet: Las columnas se ponen en fila */
        flex-wrap: wrap; /* Permite que se envuelvan si no caben las 4 */
        justify-content: center; /* Centrar las columnas */
        gap: var(--space-lg); /* Espacio entre columnas (48px) */
    }

    .number-item {
        /* Para que 2 columnas se vean bien en tablet, y luego 4 en desktop */
        flex: 1 1 calc(50% - var(--space-lg) / 2); /* 2 columnas con espacio entre ellas */
        max-width: calc(50% - var(--space-lg) / 2); /* Asegura que no ocupen más del 50% */
        min-width: 280px; /* Ancho mínimo para evitar que se vean muy pequeños */
        padding: var(--space-lg); /* Más padding interno */
    }

    .number-item .number-title {
        font-size: 48px; /* Mantiene 48px */
    }

    .number-item .number-description {
        font-size: var(--body-lg); /* 24px */
        line-height: var(--lh-body-lg); /* 36px */
    }
}

/* Desktop (desde 1025px) */
@media (min-width: 1025px) { /* --breakpoint-lg */
    .key-numbers-section-title {
        font-size: var(--heading-lg); /* 56px */
        line-height: 100%;
        margin-bottom: var(--space-xl); /* 120px */
    }

    .numbers-grid {
        flex-direction: row; /* Asegura que sigan en fila */
        flex-wrap: wrap; /* Permite que se envuelvan si no caben las 4 */
        justify-content: space-between; /* Distribuye uniformemente */
        gap: var(--space-md); /* Espacio entre las 4 columnas (24px) */
    }

    .number-item {
        /* Para 4 columnas, cada una ocupa un 25% menos el gap */
        flex: 1 1 calc(25% - (var(--space-md) * 3 / 4)); /* 4 columnas con espacio entre ellas */
        max-width: none; /* Elimina el max-width para que se ajusten al flex */
        padding: var(--space-lg); /* Mantener padding */
    }

    .number-item .number-title {
        font-size: 48px; /* Mantiene 48px */
    }

    .number-item .number-description {
        font-size: var(--body-lg); /* 24px */
        line-height: var(--lh-body-lg); /* 36px */
    }
}





/* ... (Tus variables globales y estilos de secciones anteriores aquí) ... */

/* ========================================================================= */
/* --- TESTIMONIALS SECTION --- */

.testimonials-section {
    padding: var(--margin-section) var(--padding-site); /* Espaciado general de la sección */
    background-color: var(--bg-color-page); /* Fondo de la página */
    text-align: center;
}

.testimonials-section-title {
    /* Estilos del Título de sección "Testimoniales" */
    color: var(--path-color-strong); /* #324036 */
    text-align: center;
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--heading-lg); /* Mobile: 28px, Tablet: 44px, Desktop: 56px */
    font-weight: v700; /* 700 */
    line-height: 100%; /* 56px */
    margin-bottom: var(--space-xl); /* Espacio debajo del título (ej. 48px mobile, 120px desktop) */
}

.testimonials-carousel-container {
    width: 100%;
    overflow: hidden; /* Oculta los testimonios fuera de vista */
    position: relative;
    padding: var(--space-md) var(--scale-l-0); /* Padding vertical para el carrusel */
}

.testimonials-carousel {
    display: inline-flex; /* Permite que los elementos se dispongan horizontalmente */
    align-items: flex-start; /* Alinea los testimonios al inicio (arriba) */
    width: fit-content; /* Se ajusta al contenido para la animación */
    animation: scroll-testimonials 35s linear infinite; /* Animación de desplazamiento, ajusta tiempo según fluidez */
}

.testimonial-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar contenido dentro de cada testimonio */
    text-align: center;
    flex-shrink: 0; /* Evita que los testimonios se encojan */
    width: 90vw; /* MOBILE: Cada testimonio ocupa el 90% del ancho del viewport */
    max-width: 400px; /* Ancho máximo en mobile para legibilidad */
    margin: var(--scale-l-0) var(--space-md); /* Espacio entre testimonios (ej. 24px) */
    padding: var(--space-lg) var(--space-md); /* Padding interno del item (48px vert, 24px horiz) */
    background-color: var(--white);
    border-radius: var(--corner-box-md); /* Bordes redondeados (16px) */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra sutil */
}

.testimonial-avatar img {
    width: var(--scale-l-64); /* Tamaño del avatar (ej. 64px) */
    height: var(--scale-l-64);
    border-radius: 50%; /* Circular */
    object-fit: cover; /* Asegura que la imagen cubra el círculo */
    margin-bottom: var(--space-sm); /* Espacio debajo del avatar (16px) */
    background-color: var(--neutral-light); /* Fondo para avatars dummy */
}

.testimonial-quote {
    /* Estilos del texto del testimonio */
    color: var(--path-color-strong); /* #324036 */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--body-md); /* Mobile: 18px */
    font-weight: var(--fontweight-regular); /* 400 */
    line-height: var(--lh-body-md); /* 28px */
    letter-spacing: -0.36px;
    margin-bottom: var(--space-sm); /* Espacio debajo de la cita */
    font-style: italic; /* Cita en cursiva */
}

.testimonial-author {
    /* Estilos del autor */
    color: var(--path-color-strong); /* #324036 */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--body-lg); /* Mobile: 20px */
    font-weight: var(--fontweight-bold); /* 700 */
    line-height: var(--lh-body-lg); /* 36px */
    letter-spacing: -0.48px;
    margin-bottom: var(--scale-l-4); /* Pequeño espacio debajo del autor (4px) */
}

.testimonial-role,
.testimonial-company {
    /* Estilos del cargo y la empresa */
    color: var(--path-color-strong); /* #324036 */
    font-family: var(--font-family-primary); /* Roboto */
    font-size: var(--body-sm); /* Mobile: 14px */
    font-weight: var(--fontweight-regular); /* 400 (para cargo) */
    line-height: 100%; /* 14px */
    letter-spacing: -0.28px;
    margin-bottom: var(--scale-l-0); /* No margen inferior */
}

.testimonial-company {
    font-weight: var(--fontweight-bold); /* 700 para la empresa */
    line-height: var(--scale-l-32); /* 32px como indicaste, aunque es mucho para 14px de font-size, ajustaré a lo común si es un error tipográfico de Figma */
    /* Si 32px es un line-height intencional para separar, déjalo, si no, usa normal o un valor menor */
}


/* Animación de desplazamiento infinito para testimonios */
@keyframes scroll-testimonials {
    0% {
        transform: translateX(0);
    }
    /* Mueve la mitad del ancho total del carrusel para el loop infinito */
    100% {
        transform: translateX(calc(-50%)); 
    }
}


/* ========================================================================= */
/* --- RESPONSIVE PARA LA SECCIÓN TESTIMONIALS --- */

/* Tablet (desde 769px) */
@media (min-width: 769px) { /* --breakpoint-md */
    .testimonials-section-title {
        font-size: var(--heading-lg); /* 44px */
        margin-bottom: var(--space-xl); /* 48px */
    }

    .testimonial-item {
        width: calc(50vw - var(--space-lg)); /* 2 testimonios por fila en tablet (50% del viewport - margin/gap) */
        max-width: 450px; /* Ancho máximo para cada tarjeta de testimonio */
        margin: var(--scale-l-0) var(--space-md); /* Espacio entre testimonios (24px) */
        padding: var(--space-xl) var(--space-lg); /* Más padding interno */
    }
    
    .testimonials-carousel {
        /* Ajustar la animación para 2 items por vista en tablet */
        animation: scroll-testimonials-tablet 25s linear infinite; 
    }

    /* Nueva animación para tablet */
    @keyframes scroll-testimonials-tablet {
        0% { transform: translateX(0); }
        /* Calcula el 50% del ancho del carrusel cuando hay 2 items visibles */
        100% { transform: translateX(calc(-50%)); } 
    }

    .testimonial-avatar img {
        width: var(--scale-l-80); /* Icono más grande (80px) */
        height: var(--scale-l-80);
        margin-bottom: var(--space-md); /* 24px */
    }

    .testimonial-quote {
        font-size: var(--body-lg); /* 24px */
        line-height: var(--lh-body-lg); /* 36px */
    }

    .testimonial-author {
        font-size: var(--body-lg); /* 24px */
        line-height: var(--lh-body-lg); /* 36px */
    }
}

/* Desktop (desde 1025px) */
@media (min-width: 1025px) { /* --breakpoint-lg */
    .testimonials-section-title {
        font-size: 56px; /* Valor directo de 56px */
        margin-bottom: var(--space-xl); /* 120px */
    }

    .testimonial-item {
        /* Para 3 testimonios por fila en desktop */
        width: calc(33.33vw - var(--space-xl) * 2 / 3); /* Aproximadamente 33% del viewport - gap */
        max-width: 500px; /* Limitar el ancho máximo para evitar que sea gigante */
        margin: var(--scale-l-0) var(--space-md); /* Espacio entre testimonios (24px) */
        padding: var(--space-xl) var(--space-lg); /* Mantener padding */
    }
    
    .testimonials-carousel {
        /* Ajustar la animación para 3 items por vista en desktop */
        animation: scroll-testimonials-desktop 30s linear infinite; 
    }

    /* Nueva animación para desktop */
    @keyframes scroll-testimonials-desktop {
        0% { transform: translateX(0); }
        /* Calcula el 50% del ancho del carrusel cuando hay 3 items visibles */
        100% { transform: translateX(calc(-50%)); } 
    }

    .testimonial-avatar img {
        width: var(--scale-l-88); /* Icono aún más grande (88px) */
        height: var(--scale-l-88);
        margin-bottom: var(--space-lg); /* 48px */
    }

    .testimonial-quote {
        font-size: var(--body-lg); /* 24px */
        line-height: var(--lh-body-lg); /* 36px */
    }
}







/* ... (Tus variables globales y estilos de secciones anteriores aquí) ... */

/* ========================================================================= */
/* --- FOOTER SECTION (EXISTENTE) --- */
/* (Este es el inicio de tu sección footer ya existente) */
.main-footer {
    padding: var(--margin-section) var(--padding-site);
    background-color: var(--bg-color-footer);
    color: var(--white);
    /* Asegúrate de que este padding sea suficiente para el contenido de arriba Y el de abajo */
}

.footer-content-wrapper {
    display: flex;
    flex-direction: row; /* Mobile: Columnas apiladas */
    gap: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
    /* Añadir padding-bottom si el footer-bottom no tiene su propio padding */
    padding-bottom: var(--space-lg); /* Espacio entre las columnas superiores y la fila de cierre */
    place-content: space-between;
}

/* ... (Tus estilos para .footer-col, .footer-branding, .footer-heading, etc. aquí) ... */

/* ========================================================================= */
/* --- FOOTER BOTTOM (NUEVA FILA DE CIERRE) --- */

.footer-bottom {
    display: flex;
    flex-direction: column; /* MOBILE: Copyright y enlaces apilados */
    align-items: center; /* Centrar horizontalmente en mobile */
    gap: var(--space-sm); /* Espacio entre copyright y enlaces (16px) */
    width: 100%;
    max-width: 1200px; /* Ancho máximo para que se alinee con el resto del contenido */
    margin: var(--space-lg) auto var(--scale-l-0) auto; /* Margen superior para separar, centrado, sin margen inferior extra */
    padding-top: var(--space-md); /* Pequeño padding interno superior */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea divisoria sutil */
}

.footer-copyright {
    font-family: var(--font-family-primary);
    font-size: var(--body-xs); /* Tamaño de texto pequeño (13px) */
    font-weight: var(--fontweight-regular);
    color: var(--neutral-light); /* Un gris más claro para el copyright */
    margin-bottom: var(--scale-l-0); /* El gap ya maneja el espacio */
}

.footer-legal-links {
    display: flex;
    flex-direction: column; /* MOBILE: Enlaces legales apilados */
    gap: var(--scale-l-8); /* Espacio entre los enlaces legales (8px) */
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-legal-links .footer-link {
    font-family: var(--font-family-primary);
    font-size: var(--body-xs); /* 13px */
    font-weight: var(--fontweight-regular);
    color: var(--neutral-light); /* Color del enlace legal */
    transition: color 0.3s ease;
}

.footer-legal-links .footer-link:hover {
    color: var(--a-accent-light); /* Color de hover */
}


/* ========================================================================= */
/* --- RESPONSIVE PARA EL FOOTER BOTTOM --- */

/* Tablet (desde 769px) */
@media (min-width: 769px) { /* --breakpoint-md */
    .footer-content-wrapper {
        padding-bottom: var(--space-xl); /* Asegura un buen espacio entre las columnas y el bottom en tablet */
    }

    .footer-bottom {
        flex-direction: row; /* Tablet: Copyright y enlaces en fila */
        justify-content: space-between; /* Espacia copyright a la izquierda, enlaces a la derecha */
        margin-top: var(--space-xl); /* Más margen superior para separar (48px) */
        padding-top: var(--space-lg); /* Más padding interno (48px) */
    }

    .footer-copyright {
        font-size: var(--body-sm); /* 14px */
    }

    .footer-legal-links {
        flex-direction: row; /* Tablet: Enlaces legales en fila */
        gap: var(--space-sm); /* Espacio entre enlaces legales (16px) */
    }

    .footer-legal-links .footer-link {
        font-size: var(--body-sm); /* 14px */
    }
}

/* Desktop (desde 1025px) */
@media (min-width: 1025px) { /* --breakpoint-lg */
    .footer-content-wrapper {
        padding-bottom: var(--space-xl); /* Mantener espacio */
    }

    .footer-bottom {
        margin-top: var(--space-xl); /* Mantener margen superior (120px en desktop) */
        padding-top: var(--space-lg); /* Mantener padding (48px) */
    }

    .footer-copyright {
        font-size: var(--body-md); /* 18px */
    }

    .footer-legal-links .footer-link {
        font-size: var(--body-md); /* 18px */
        gap: var(--space-md); /* Espacio entre enlaces legales (24px) */
    }
}