/* 
===========================================
    VARIABLES GLOBALES Y RESET
===========================================
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

:root {
    --primary-bg: #FEF2DC;
    /* Primary / Yllw 100 */
    --text-color: #333333;
    --font-family: 'Inter', sans-serif;
    /* Asumiremos Inter hasta que nos des otra */
    --nav-font: 'Montserrat', sans-serif;
    --container-width: 1440px;
    /* Aumentado por defecto para dar espacio al gap grande */
}

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

body {
    font-family: var(--font-family);
    background-color: #ffffff;
    color: var(--text-color);
    /* Resto del body no se especificó color aún */
    line-height: 1.6;
}

/* Utilidades Base */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
    /* Padding base a los lados */
}

/* 
===========================================
    COMPONENTES: HEADER & NAV
=========================================== 
*/
.main-header {
    background-color: var(--primary-bg);
    width: 100%;
    /* Figma design shows header starting at top: 18px. We apply padding-top to body or header to reflect this distance from upper viewport */
    padding-top: 18px;
    padding-bottom: 18px;
    /* Assuming symmetry below */
    display: flex;
    justify-content: flex-start;
}

.container {
    /* Mantenemos un container flexible pero permitimos el 'left: 34px' via padding si está en un entorno full-width, o mejor usamos margin para centrar el bloque exacto de 1066px */
    width: 100%;
    display: flex;
    justify-content: center;
    /* Asumiendo que el header visualmente va centrado en pantallas grandes aunque Figma diga left 34 en un canvas específico */
}

.navbar {
    display: flex;
    align-items: center;
    /* Box completa Logo + Nav */
    width: 100%;
    max-width: 1300px;
    height: 83px;
    justify-content: space-between;
}

.logo-container {
    /* El logo-container ahora solo asume su tamaño natural o el del contenido */
    display: flex;
    align-items: center;
}

.logo-img {
    width: 160px;
    height: 83px;
    object-fit: contain;
    display: block;
}

.nav-links {
    list-style: none;
    display: flex;
    height: 24px;
    align-items: center;
    gap: 35px;
    /* Crea una separación natural sin aplastar el contenido */
}

.nav-links li {
    display: flex;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    font-family: var(--nav-font);
    color: #000000;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 1.25;
    /* 125% */
    letter-spacing: -0.02em;
    /* -2% */
    white-space: nowrap;
    /* Evita que el texto de enlaces largos salte de línea */
}

.nav-links a:hover {
    opacity: 0.7;
    /* Hover sutil temporal */
}

/* 
===========================================
    COMPONENTES: HERO SECTION
=========================================== 
*/

@font-face {
    font-family: 'MergePro-Bold';
    src: url('../fonts/merge-pro-cdnfonts/MergePro.otf') format('opentype');
    font-weight: bold;
    /* Volvemos a cargarlo forzosamente como Bold */
    font-style: normal;
}

.hero {
    background-color: #50BBE8;
    /* var(--Primary-Blue-400) */
    width: 100%;
    /* Figma dice height: 5977, pero eso es probablemente todo el documento. Usaremos min-height por ahora para que la caja crezca natural, o un height enorme si realmente es tan alta */
    display: flex;
    justify-content: center;
    position: relative;
    /* Remover padding-bottom temporal que pusimos para la img */
}

.hero-content {
    width: 1448px;
    position: relative;
    height: 700px;
    z-index: 10;
    /* Por encima del vector y las imágenes */
}

.hero-title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 120px;
    line-height: 120px;
    /* Aumentado considerablemente desde los 109px para separar el punto de la i */
    letter-spacing: -0.02em;
    color: #FEF2DC;

    /* Aumentamos dramáticamente el trazo a 6px para simular un Black/ExtraBold */
    -webkit-text-stroke: 6px #FEF2DC;

    position: absolute;
    top: 20px;
    /* Subido al borde superior de .hero-content */
    width: 1440px;
    height: 240px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

.hero-subtitle {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 42px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #FEF2DC;

    /* Aumentamos el trazo a 1px para el subtítulo (disminuido al gusto del usuario) */
    -webkit-text-stroke: 1px #FEF2DC;

    position: absolute;
    top: 285px;
    /* Recalculado: 503 - (218 - 20) = 305px aprox */
    width: 1448px;
    height: 105px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 10;
}

/* 
===========================================
    HERO GRAPHICS & VECTOR CURVE
=========================================== 
*/
.hero-graphics {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    /* Cambiado a visible para que los iconos SVG embebidos sean visibles */
    z-index: 1;
}

.curve-vector-svg {
    position: absolute;
    width: 100%;
    /* Responsive: siempre llenará el ancho del contenedor */
    height: auto;
    /* La altura se calcula proporcionalmente al viewBox */
    top: 423px;
    left: 0;
    overflow: visible;
    /* Para que los <image> con coordenadas negativas sean visibles */
}

.floating-icon {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

/* 
   El sol baja por la izquierda, se coloca a la altura del borde izquierdo del Broccoli.
   En la curva SVG, cuando x≈300 la línea baja hasta y≈200. 
   En coordenadas del .hero-graphics (top: 423 + 200 = 623px en el hero).
*/
.icon-sun {
    /* Matemáticamente sobre la curva: SVG point ≈ (290, 2). 
       Section top = 423 + 2 - 60(centrado) = 365px. Left = -4 + 290 - 60 = 226px */
    top: 365px;
    left: 226px;
    width: 120px;
}

/*
   La hoja sube por la derecha, en la zona del montículo. 
   En la curva cuando x≈1100 la línea está aprox en y≈100. 
   En coordenadas del hero: top: 423 + 100 = 523px.
*/
.icon-leaf {
    /* Matemáticamente sobre el nuevo arco de 1/4 de círculo: punto t=0.5 ≈ (925, 130).
       Section top = 423 + 130 - 50 = 503px. Left = -4 + 925 - 50 = 871px */
    top: 503px;
    left: 871px;
    width: 100px;
}


/* 
===========================================
    HERO PRODUCTS
=========================================== 
*/
.hero-products {
    position: absolute;
    /* Usaremos top 0/left 50% como referencia base para usar las coordenadas absolutas de Figma referidas a la caja de 1440px */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1440px;
    height: 100%;
    z-index: 4;
    /* Encima de la curva */
    pointer-events: none;
    /* Dejamos clickear a través hasta llegar directo a la imagen */
}

.product-img {
    position: absolute;
    pointer-events: auto;
    object-fit: contain;
}

/* BroccoliSprouts.png */
.product-left {
    width: 296.42px;
    height: 419.73px;
    top: 408px;
    left: 453px;
    transform: rotate(-15deg);
    z-index: 1;
}

/* alfalfaSprouts.png */
.product-right {
    width: 296.42px;
    height: 419.73px;
    top: 404px;
    left: 678.04px;
    transform: rotate(15deg);
    z-index: 2;
}

/* 
===========================================
    SECCIÓN 2: AMARILLA (Explore our Products)
=========================================== 
*/
.section-yellow {
    background-color: #FEF2DC;
    /* var(--Primary-Yllw-100) */
    width: 100%;
    /* Mantenemos un alto que englobe desde donde empieza (debajo del hero) hasta el botón.
       Figma dice que la Sección verde empieza en top 1436. Si hero termina en ~786, el espacio es de ~650px. */
    height: 650px;
    margin-top: 0;
    position: relative;
    /* Clave para que slider y textos absolute se basen en ella */
    z-index: 5;
    /* Encima del hero-products (z-index:4) y del vector (z-index:1) */
}

.section-yellow__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 70px;
    line-height: 1.25;
    /* 125% */
    letter-spacing: -0.02em;
    /* -2% */
    text-transform: capitalize;
    color: #24AAE2;
    /* Primary Blue per Figma */
    -webkit-text-stroke: 2px #24AAE2;
    /* Engrosa la fuente del mismo color */

    /* Posición Figma: top 838px - section top 786px = 52px desde arriba de la sección */
    position: absolute;
    top: 52px;
    left: 146px;
    width: 667px;
    height: 88px;
    margin: 0;
}

/* 
===========================================
    SLIDER DE PRODUCTOS (Sección 2)
=========================================== 
*/
.product-slider {
    position: absolute;
    top: 168px;
    /* 954px (Figma top cards) - 786px (Figma top section) */
    left: 0;
    width: 100%;
}

/* Contenedor de las tarjetas */
.slider-track {
    display: flex;
    justify-content: center;
    gap: 40px;
    /* Separación estimada entre tarjetas */
    width: 100%;
    margin-top: 0;
}

/* Flechas de navegación */
.slider-arrow {
    position: absolute;
    /* top 1093px (Figma center) - 954px (Figma cards top) = 139px */
    top: 139px;
    width: 150px;
    /* Ampliado para contener icono 3x grande */
    height: 150px;
    background-color: transparent;
    /* Fondo transparente pedido por el usuario */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

/* Solo centrado vertical, ancladas a los bordes para ser responsivas en pantallas grandes */
.slider-arrow--left {
    left: 40px;
    /* Más cerca del borde izquierdo */
    transform: translateY(-50%);
}

.slider-arrow--right {
    left: auto;
    /* Anulamos el left harcodeado original */
    right: 40px;
    /* Anclado al borde derecho para que no se mueva en monitores anchos */
    transform: translateY(-50%);
}

.slider-arrow svg {
    /* Hacemos el icono SVG 3 veces más grande (48px * 3) */
    width: 144px;
    height: 144px;
}

/* Item completo que agrupa tarjeta y título */
.slider-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Tarjetas individuales (solo el fondo y la imagen) */
.product-card {
    width: 257px;
    height: 341px;
    border-radius: 40px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    /* #00000040 es 25% opacidad */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centra la imagen perfectamente */
}

/* Colores de fondo de cada tarjeta */
.card-bg-1 {
    background-color: #DAE6A9;
}

.card-bg-2 {
    background-color: #FFD4E9;
}

.card-bg-3 {
    background-color: #FFBBBC;
}

.card-bg-4 {
    background-color: #FFD1AB;
}

/* Imagen del producto dentro de la tarjeta */
.product-card__img {
    height: 248px;
    width: auto;
    /* Permite que la imagen mantenga su proporción basándose solo en la altura */
    object-fit: contain;
    z-index: 2;
}

/* Título debajo de la tarjeta en la sección amarilla */
.product-card__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    /* 125% */
    letter-spacing: -0.02em;
    /* -2% */
    text-align: center;
    color: #222;
    margin-top: 25px;
    /* Espacio entre la tarjeta y el texto */
    text-transform: capitalize;
}

/* Botón inferior "Ver Todos / See More" */
.section-yellow__btn {
    position: absolute;
    /* top 1370px (Figma absoluto) - 786px (Figma top section) = 584px */
    top: 584px;
    left: 50%;
    transform: translateX(-50%);
    /* Centrado matemático perfecto en cualquier pantalla */
    width: 130px;
    /* Ampliado (original: 102px) */
    height: 48px;
    /* Ampliado (original: 39px) */
    border-radius: 24px;
    /* Aumentado en proporción a la altura */
    background-color: #24AAE2;
    /* var(--Primary-Blue-500) */
    padding: 12px 20px;
    border: none;
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    /* Letra más grande para acompañar el botón */
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* 
===========================================
    SECCIÓN 3: VERDE (Discover Where Freshness...)
=========================================== 
*/
.section-green {
    position: relative;
    /* Devuelve la sección al flujo natural de la pág */
    width: 100%;
    /* Estira al ancho completo de la ventana */
    height: 506px;
    /* Altura original de Figma */
    background-color: #D7F2CE;
    /* var(--Primary-Grn-100) */
    z-index: 5;
    box-sizing: border-box;
}

.section-green__columns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    /* Para que las columnas tengan todo el espacio disponible */
    max-width: 1472px;
    /* Topamos en la ventana original de 1472px para respetar tu layout interno en pantallas enormes */
    margin: 0 auto;
    /* Centra el contenido si la pantalla es más grande a 1472px */
    padding-left: 156px;
    padding-right: 116px;
    box-sizing: border-box;
    /* Previene desbordamiento en bordes por el padding */
}

.section-green__left {
    display: flex;
    flex-direction: column;
    max-width: 667px;
    /* Mismo ancho que Explore our Products */
}

.section-green__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 70px;
    line-height: 1.25;
    /* 125% */
    letter-spacing: -0.02em;
    /* -2% */
    color: #469B2A;
    /* Verde de la fuente */
    -webkit-text-stroke: 2px #469B2A;
    /* Grosor requerido */
    margin: 0 0 20px 0;
}

.section-green__text {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    /* Tamaño body estimado */
    color: #000000;
    margin: 0 0 40px 0;
}

/* El botón igualito al See More de la sección anterior */
.section-green__btn {
    width: 130px;
    height: 48px;
    border-radius: 24px;
    background-color: #24AAE2;
    padding: 12px 20px;
    border: none;
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    /* Evita que el flex column lo estire a lo ancho entero de la col */
    text-decoration: none;
}

/* Imagen Cesta (Derecha) */
.cesta-wrapper {
    position: relative;
    /* Redimensionado +10% respecto a Figma (365x457) */
    width: 401px;
    height: 502px;
    /* Subimos un poquito el margen superior para compensar el +10% */
    margin-top: -15px;
}

.cesta-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.4s ease-in-out;
}

/* Estado normal: Cesta 1 visible, Cesta 2 oculta */
.cesta-img--main {
    opacity: 1;
}

.cesta-img--hover {
    opacity: 0;
}

/* Estado Hover: Cesta 1 se oculta, Cesta 2 aparece */
.cesta-wrapper:hover .cesta-img--main {
    opacity: 0;
}

.cesta-wrapper:hover .cesta-img--hover {
    opacity: 1;
}

/* 
===========================================
    SECCIÓN 4: AMARILLA IMÁGENES
=========================================== 
*/
.section-yellow-images {
    position: relative;
    width: 100%;
    /* Alto de 1124px exacto de Figma */
    height: 1124px;
    background-color: #FEF2DC;
    /* var(--Primary-Yllw-100) */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* La imagen 1 va pegada arriba (al inicio de la sección) */
.section-yellow-images__top-img {
    width: 100%;
    /* Altura automática basándonos en el ancho, o ajustada a su proporción original */
    height: auto;
    object-fit: contain;
    /* La mantenemos pegada arriba */
    align-self: flex-start;
}

/* Wrapper para centrar vertical y horizontalmente la segunda imagen (spicesprouts3) 
   en el espacio restante de los 1124px */
.section-yellow-images__center-wrapper {
    flex: 1;
    /* Toma todo el espacio sobrante hacia abajo */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Contenedor central de la bolsa y las características */
.product-features {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 700px;
    /* Altura principal para posicionar alrededor de la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-features__img {
    height: 100%;
    max-height: 650px;
    object-fit: contain;
    z-index: 2;
}

/* Elementos de texto flotantes con sus líneas */
.feature-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 280px;
    /* Ancho para estabilizar el quiebre de líneas de texto */
    z-index: 1;
}

.feature-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #000;
    text-align: center;
    line-height: 1.25;
    margin: 0;
}

/* Líneas SVG individuales */
.feature-line {
    position: absolute;
}

/* --- Posiciones individualizadas alrededor de la bolsa --- */

/* 1. Izquierda Superior */
.feature-item--left-1 {
    top: 10%;
    left: 0%;
}

.feature-item--left-1 .feature-line {
    width: 100px;
    height: 120px;
    top: 70%;
    left: 80%;
}

/* 2. Izquierda Medio */
.feature-item--left-2 {
    top: 45%;
    left: -5%;
}

.feature-item--left-2 .feature-line {
    width: 130px;
    height: 60px;
    top: 30%;
    left: 90%;
}

/* 3. Izquierda Inferior */
.feature-item--left-3 {
    bottom: 5%;
    left: 0%;
}

.feature-item--left-3 .feature-line {
    width: 100px;
    height: 120px;
    bottom: 50%;
    left: 80%;
}

/* 4. Derecha Superior */
.feature-item--right-1 {
    top: 15%;
    right: 0%;
}

.feature-item--right-1 .feature-line {
    width: 100px;
    height: 120px;
    top: 60%;
    right: 70%;
}

/* 5. Derecha Inferior */
.feature-item--right-2 {
    bottom: 20%;
    right: -5%;
}

.feature-item--right-2 .feature-line {
    width: 130px;
    height: 100px;
    bottom: 60%;
    right: 80%;
}

/* 
===========================================
    SECCIÓN 5: RECETAS (Fondo Celeste)
=========================================== 
*/
.section-light-blue {
    position: relative;
    width: 100%;
    height: 625px;
    /* Altura de Figma */
    background-color: #D3EEF9;
    /* var(--Primary-Blue-100) */
    overflow: hidden;
    /* Cortamos la imagen que sobresale a la izquierda (-133px) */
    display: flex;
    justify-content: center;
}

/* Contenedor centralizado como las demás secciones */
.section-light-blue__container {
    width: 100%;
    max-width: 1486px;
    /* Ancho de la sección en el layout de Figma */
    height: 100%;
    position: relative;
    display: flex;
}

/* Columna izquierda con la imagen de la comida flotando absolute */
.section-light-blue__left {
    position: absolute;
    left: -133px;
    /* Como en Figma */
    top: 0;
    width: 943px;
    height: 625px;
    z-index: 1;
}

.fotocomida-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ajusta la imagen sin recortar */
}

/* Columna derecha con los textos y botones alineados a la derecha */
.section-light-blue__right {
    position: relative;
    z-index: 2;
    margin-left: auto;
    /* Empuja hasta la derecha */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    /* Alinea elementos a la derecha */
    text-align: right;
    /* Alinea texto a la derecha */
    width: 600px;
    /* Fija un ancho generoso para el texto */
    padding-right: 60px;
    /* Separación del borde derecho en un layout normal */
    height: 100%;
}

.section-light-blue__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 65px;
    line-height: 1;
    /* 100% */
    letter-spacing: -0.02em;
    /* -2% */
    color: #24AAE2;
    -webkit-text-stroke: 2px #24AAE2;
    margin: 0 0 20px 0;
    max-width: 550px;
}

.section-light-blue__text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    /* 125% */
    letter-spacing: -0.02em;
    /* -2% */
    color: #000;
    margin: 0 0 40px 0;
    max-width: 500px;
}

.section-light-blue__btn {
    width: 160px;
    height: 48px;
    border-radius: 24px;
    background-color: #24AAE2;
    padding: 12px 20px;
    border: none;
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* 
===========================================
    SECCIÓN 6: ABOUT US (Fondo Amarillo)
=========================================== 
*/
.section-yellow-about {
    position: relative;
    width: 100%;
    height: 594px;
    /* Altura de Figma */
    background-color: #FEF2DC;
    /* var(--Primary-Yllw-100) */
    display: flex;
    justify-content: center;
}

.section-yellow-about__container {
    width: 100%;
    max-width: 1472px;
    /* Ancho de Figma */
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 151px;
    /* Posición X izquierda del título en Figma */
    padding-right: 100px;
    /* Margen derecho aproximado para balancear la foto */
    box-sizing: border-box;
}

/* Columna Izquierda: Textos */
.section-yellow-about__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 693px;
    /* Ancho exacto del título en Figma */
}

.section-yellow-about__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    /* Igualaremos el grosor que venimos usando */
    font-size: 70px;
    line-height: 1;
    /* 100% de Figma */
    letter-spacing: -0.02em;
    /* -2% */
    color: #469B2A;
    /* Verde especificado */
    -webkit-text-stroke: 2px #469B2A;
    /* Para el weight abultado */
    margin: 0 0 20px 0;
}

.section-yellow-about__text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    /* 125% */
    letter-spacing: -0.02em;
    /* -2% */
    color: #000000;
    max-width: 628px;
    /* Ancho exacto del párrafo en Figma */
    margin: 0 0 35px 0;
}

.section-yellow-about__btn {
    width: 200px;
    /* Suficiente espacio para "Discover Our Story" */
    height: 48px;
    border-radius: 24px;
    background-color: #24AAE2;
    padding: 12px 20px;
    border: none;
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    /* Evita que el botón se estire */
    text-decoration: none;
}

/* Columna Derecha: Imagen Circular */
.section-yellow-about__right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-img-wrapper {
    /* Creamos un círculo perfecto usando la altura disponible */
    width: 450px;
    height: 450px;
    border-radius: 50%;
    overflow: hidden;
    /* Corta la imagen fuera del círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    /* Efecto sombra elegante opcional */
}

.about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Asegura que la imagen llene el círculo cortando los bordes extra */
}

/* 
===========================================
    SECCIÓN 7: FOOD SAFETY (Fondo Verde Claro)
=========================================== 
*/
.section-green-safety {
    position: relative;
    width: 100%;
    height: 541px;
    /* Figma Height */
    background-color: #D7F2CE;
    /* var(--Primary-Grn-100) */
    display: flex;
    justify-content: center;
    overflow: hidden;
    /* Evita scrolls horizontales si la foto crece */
}

/* Contenedor central a 1472px máximo */
.section-green-safety__container {
    width: 100%;
    max-width: 1472px;
    /* Ancho referencial de Figma */
    height: 100%;
    display: flex;
    justify-content: space-between;
    /* Izquierda y Derecha separados */
    align-items: center;
    position: relative;
    margin: 0 auto;
}

/* Columna Izquierda: Imagen (Safe Food) */
.section-green-safety__left {
    width: 50%;
    /* Mitad del espacio reservado para la imagen */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Imagen cubriendo su lado */
.safety-img {
    height: 100%;
    /* Toma todo el alto de la sección */
    width: 100%;
    object-fit: cover;
    /* Recorta la imagen llenando el área */
    object-position: left center;
}

/* Columna Derecha: Textos y Botón */
.section-green-safety__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    /* Alinea los elementos hacia la derecha internamente */
    text-align: right;
    /* Justifica el texto a la derecha */
    width: 50%;
    /* Mitad del espacio reservado para los textos */
    padding: 0 40px;
    /* Espacio lateral para que respire, en lugar del padding derecho de antes */
}

/* Título */
.section-green-safety__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 60px;
    /* Tamaño adaptado para encajar bien */
    line-height: 1.1;
    letter-spacing: -0.02em;
    /* -2% */
    color: #469B2A;
    /* Verde especificado en títulos parecidos */
    -webkit-text-stroke: 2px #469B2A;
    margin: 0 0 25px 0;
}

/* Texto */
.section-green-safety__text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    /* Tamaño de lectura */
    line-height: 1.4;
    /* Espaciado legible */
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0 0 30px 0;
    max-width: 480px;
    /* Fija un ancho coherente con los quiebres de línea de Figma */
}

/* Botón (Learn More) celeste alineado a la derecha */
.section-green-safety__btn {
    width: 160px;
    height: 48px;
    border-radius: 24px;
    background-color: #24AAE2;
    padding: 12px 20px;
    border: none;
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

/* 
===========================================
    SECCIÓN 8: CONTACT FORM (Fondo Amarillo)
=========================================== 
*/
.section-contact {
    position: relative;
    width: 100%;
    min-height: 681px;
    /* Permite crecer si es necesario */
    background-color: #FEF2DC;
    /* var(--Primary-Yllw-100) */
    display: flex;
    justify-content: center;
    padding-top: 40px;
    /* Margen superior para el titular */
    padding-bottom: 60px;
    /* Margen inferior para mostrar el amarillo */
    box-sizing: border-box;
}

/* Modificador para la página de Contacto donde el fondo debe ser Verde */
.section-contact--green {
    background-color: #D7F2CE;
    /* var(--Primary-Grn-100) */
}

.section-contact__container {
    width: 100%;
    max-width: 1288px;
    /* Ancho de Figma para el contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Encabezados centrados */
.section-contact__header {
    text-align: center;
    margin-bottom: 30px;
}

.section-contact__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 50px;
    line-height: 1;
    /* 100% */
    letter-spacing: -0.02em;
    /* -2% */
    color: #24AAE2;
    -webkit-text-stroke: 1.5px #24AAE2;
    margin: 0 0 10px 0;
}

.section-contact__subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    /* 125% */
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0;
}

/* Caja azul del formulario */
.contact-form-box {
    width: 100%;
    max-width: 1100px;
    /* Ancho visual de la caja azul */
    background-color: #A5DBF3;
    /* Azul clarito vibrante (aproximado a la imagen) */
    border-radius: 40px;
    /* Esquinas muy redondeadas */
    padding: 50px 80px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
    /* Sombra suave para dar volumen */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* Contenedor del form */
.contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Espacio vertical entre filas */
    align-items: center;
}

/* Filas gemelas de inputs */
.form-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 30px;
    /* Espacio horizontal entre los 2 inputs */
}

/* Estilo general para inputs */
.form-input {
    flex: 1;
    /* Se estiran ambas mitades por igual */
    height: 60px;
    border-radius: 30px;
    background-color: #FEF2DC;
    /* Mismo amarillo de la sección */
    border: none;
    padding: 0 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #000;
}

.form-input::placeholder {
    color: #333;
}

.form-input:focus {
    outline: 2px solid #469B2A;
    /* Pequeño feedback visual de foco verde */
}

/* Área de texto grande */
.form-textarea {
    width: 100%;
    height: 200px;
    border-radius: 30px;
    background-color: #FEF2DC;
    border: none;
    padding: 25px 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #000;
    resize: none;
    /* Bloquea que el usuario rompa el layout */
    box-sizing: border-box;
}

.form-textarea::placeholder {
    color: #333;
}

.form-textarea:focus {
    outline: 2px solid #469B2A;
}

/* Botón de envío modificado para centrarse en azul clásico */
.contact-form-btn {
    width: 220px;
    height: 48px;
    border-radius: 24px;
    background-color: #24AAE2;
    border: none;
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Extra margin top para separarlo del text-area como en Figma */
    margin-top: 10px;
}

.contact-form-btn:hover {
    background-color: #1c8cb9;
}

/* 
===========================================
    PÁGINA: HEALTH BENEFITS
=========================================== 
*/
.page-health {
    position: relative;
    width: 100%;
    /* Quitamos el fondo amarillo porque cada section tiene el suyo */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Mantiene las secciones centradas si la pantalla es ultra wide */
}

/* --- Sección Superior Verde --- */
.section-health-top {
    position: relative;
    width: 100%;
    height: 530px;
    /* Altura original Figma */
    background-color: #D7F2CE;
    /* Verde claro */
    display: flex;
    justify-content: flex-start;
    /* Izquierda alineado */
    overflow: hidden;
    /* Corta la imagen si excede el tamaño de la caja */
}

.section-health-top__container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    height: 100%;
    /* Permite que el flex vertical del 'left' funcione */
}

.section-health-top__left {
    width: 60%;
    height: 100%;
    padding-left: 0;
    /* Al centrar el contenedor a 1300px igual que el nav, el padding no es necesario, empieza justo bajo el logo */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centrado vertical del texto */
}

.section-health-top__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 70px;
    line-height: 1.25;
    /* Ajustado por petición del usuario */
    letter-spacing: -0.02em;
    color: #24AAE2;
    /* Azul */
    -webkit-text-stroke: 2px #24AAE2;
    margin: 0 0 15px 0;
}

.section-health-top__text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    /* 140% */
    letter-spacing: -0.02em;
    color: #000;
    margin: 0;
    max-width: 631px;
}

.section-health-top__right {
    width: 40%;
    /* El final debe estar cortado según diseño */
    height: 100%;
    display: flex;
    justify-content: flex-end;
    /* La imagen se alinea al final */
    margin-right: -150px;
    /* Empuja la imagen fuera del contenedor de 1300px hacia la derecha */
}

.health-sprouts-img {
    height: 100%;
    object-fit: contain;
    /* o cover si queremos llenarlo, pero el requerimiento dicen que no se ve toda */
    object-position: right center;
    /* Alineada a la derecha simulando el corte */
}

/* --- Círculo Logo Superpuesto --- */
.health-logo-circle {
    /* Absoluto respecto al contenedor 'page-health' o lo centramos via margin negativo en la sección de abajo */
    position: absolute;
    top: 530px;
    /* Altura de la seccion verde a donde debe solaparse exactamente la mitad */
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centrado justo al medio de ambas secciones */
    width: 114px;
    height: 114px;
    border-radius: 50%;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.health-logo-img {
    width: 64px;
    height: 79px;
    object-fit: contain;
}

/* --- Sección Inferior Azul Curva --- */
.section-health-bottom {
    position: relative;
    /* Rectángulo y bordes rectos al ancho total */
    width: 100%;
    min-height: 350px;
    /* Altura ajustada a petición del usuario */
    background-color: #D3EEF9;
    /* Azul claro */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 30px;
    /* Espaciado extra para cuando cae el círculo */
    box-sizing: border-box;
}

.section-health-bottom__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #24AAE2;
    -webkit-text-stroke: 1px #24AAE2;
    margin: 0 0 10px 0;
}

.section-health-bottom__text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    /* 125% */
    letter-spacing: -0.02em;
    color: #000;
    max-width: 1026px;
    margin: 0;
}

/* --- Sección 3: Beneficios en grilla (Fondo Amarillo) --- */
.section-health-features {
    width: 100%;
    /* La altura en figma es 380, usamos min-height por adaptabilidad y sumamos paddings */
    min-height: 380px;
    background-color: #FEF2DC;
    /* Amarillo pálido */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
    /* Espaciado arriba y abajo */
}

.section-health-features__container {
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Dos columnas */
    gap: 40px 80px;
    /* Separación vertical 40px, horizontal 80px */
    padding: 0 40px;
}

.health-feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    /* Espacio entre el ícono y el texto */
}

.health-feature__icon-box {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-color: #D3EEF9;
    /* Círculo de fondo azul claro según Figma */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    /* Evita que el circulo se aplaste si hay mucho texto */
}

.health-feature__icon {
    width: 45px;
    /* Tamaño del icono ajustado al centro del circulo */
    height: auto;
    object-fit: contain;
    transform: rotate(-22.72deg);
}

.health-feature__text-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 5px;
    /* Pequeño ajuste para alinear el titulo con el centro visual del ícono */
}

.health-feature__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* Bold */
    font-size: 20px;
    color: #000;
    margin: 0 0 5px 0;
}

.health-feature__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    /* Regular */
    font-size: 16px;
    line-height: 1.4;
    color: #333;
    margin: 0;
}


/* 
===========================================
    PÁGINA: ABOUT US
=========================================== 
*/
.page-about {
    width: 100%;
}

.section-about-intro {
    width: 100%;
    min-height: 506px;
    /* Según Figma */
    background-color: #D7F2CE;
    display: flex;
    justify-content: center;
    padding-top: 100px;
    /* Margen interior superior */
    padding-bottom: 80px;
    /* Margen interior inferior */
    box-sizing: border-box;
}

.section-about-intro__container {
    width: 100%;
    max-width: 1200px;
    /* Permite que los anchos de 693 y 1192 fluyan alineados a la izquierda */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px;
}

.section-about-intro__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #469B2A;
    -webkit-text-stroke: 2px #469B2A;
    margin: 0 0 25px 0;
    max-width: 693px;
    width: 100%;
}

.section-about-intro__text {
    width: 100%;
    max-width: 1192px;
}

.section-about-intro__text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    /* 125% */
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0 0 20px 0;
}

.section-about-intro__text p:last-child {
    margin: 0;
}

/* --- 100% Natural Goodness Section --- */
.section-about-goodness {
    width: 100%;
    background-color: #E7FEDF;
    /* Continuación del fondo verde */
    padding-top: 60px;
    /* Separación del texto de intro */
    padding-bottom: 80px;
    /* Margen inferior */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.goodness-container {
    width: 100%;
    max-width: 1300px;
    /* Ancho para las 3 columnas */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
    margin-bottom: 80px;
    /* Espacio antes del GIF */
    box-sizing: border-box;
}

.goodness-title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 50px;
    color: #24AAE2;
    -webkit-text-stroke: 1.5px #24AAE2;
    text-align: center;
    margin: 0 0 60px 0;
    letter-spacing: -0.02em;
}

.goodness-features {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
}

.goodness-feature {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    /* Iguales anchos, 3 columnas */
}

.goodness-feature__icon-box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #FDE9BF;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.goodness-feature__icon {
    width: 45px;
    /* Tamaño referencial */
    height: auto;
    object-fit: contain;
}

.goodness-feature__text {
    display: flex;
    flex-direction: column;
}

.goodness-feature__text h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #000;
    margin: 0 0 5px 0;
}

.goodness-feature__text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #333;
    /* Soft black */
    margin: 0;
    max-width: 250px;
    /* Restriccion para que haga salto de linea estilo maqueta */
}

/* --- Block Media (Stripe + GIF + Text) --- */
.goodness-media {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0;
    /* Padding extra para que el GIF sobresalga sobre el fondo verde */
}

.goodness-media__bg-stripe {
    position: absolute;
    width: 100%;
    height: 176px;
    background-color: #24AAE2;
    /* Azul brillante */
    top: 50%;
    transform: translateY(-50%);
    /* Centrado verticalmente respecto al bloque media */
    z-index: 1;
}

.goodness-media__content {
    position: relative;
    z-index: 2;
    /* Sobre la franja */
    width: 100%;
    max-width: 1300px;
    /* Alineación contenedor */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
}

.goodness-media__gif-container {
    flex: 1;
    max-width: 650px;
    /* Fija un ancho aprox de Figma */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.15);
    /* Sombra elegante */
}

.goodness-media__gif {
    width: 100%;
    height: auto;
    display: block;
    /* Elimina espacio inferior inline */
}

.goodness-media__text-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    /* Alinea a la derecha del contenedor */
    padding-left: 40px;
    /* Para no pegarse al GIF */
}

.goodness-media__text {
    font-family: 'MergePro-Bold', sans-serif;
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: right;
    color: #FFF;
    /* Blanco sobre la franja azul brillante */
    max-width: 493px;
    margin: 0;
}

/* --- FAQ Section --- */
.section-about-faq {
    width: 100%;
    background-color: #E7FEDF;
    /* Mismo fondo de la sección anterior */
    padding-top: 30px;
    /* Reducido para no separar tanto del GIF */
    padding-bottom: 100px;
    display: flex;
    justify-content: center;
}

.faq-container {
    width: 100%;
    max-width: 1000px;
    /* Adjusting container width for the FAQ list */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
}

.faq-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Espacio entre cada tarjeta de FAQ */
}

.faq-item {
    background-color: #FEF2DC;
    /* Color crema cuando está cerrado */
    border-radius: 15px;
    overflow: hidden;
    /* Oculta el texto de respuesta cuando max-height es 0 */
    transition: background-color 0.3s ease;
}

.faq-item.active {
    background-color: #D3EEF9;
    /* Color celeste claro cuando está abierto */
}

.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #000;
    text-align: left;
    outline: none;
}

/* Icono + y - dibujado con CSS */
.faq-icon {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 20px;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background-color: #24AAE2;
    /* Azul para el ícono */
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-icon::before {
    width: 20px;
    height: 4px;
    /* Barra horizontal (-) */
}

.faq-icon::after {
    width: 4px;
    height: 20px;
    /* Barra vertical del (+) */
}

/* Al abrir (.active), se esconde la barra vertical rotando formando el signo (-) */
.faq-item.active .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.faq-answer {
    max-height: 0;
    padding: 0 30px;
    /* Padding vertical 0 cuando está cerrado para no robar espacio */
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.faq-answer p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

/* Expande el contenedor al estar activo */
.faq-item.active .faq-answer {
    max-height: 600px;
    /* Altura máxima arbitraria segura para el texto más largo */
    padding: 0 30px 25px 30px;
    /* Padding inferior activo */
}


/*
===========================================
    PÁGINA: WHERE TO BUY
===========================================
*/
.page-wheretobuy {
    width: 100%;
}

.section-where-to-buy {
    width: 100%;
    /* Quitamos el min-height excesivo para que se adapte al contenido más los paddings reales */
    background-color: #D7F2CE;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80px;
    /* Reducido desde 194px para quitar espacio encima del título */
    padding-bottom: 60px;
    /* Reducido desde 100px para quitar espacio debajo de las cards */
    box-sizing: border-box;
}

.where-to-buy__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #469B2A;
    -webkit-text-stroke: 2px #469B2A;
    /* Bold feeling */
    text-align: center;
    margin: 0 0 80px 0;
    /* Espacio antes de los cards */
    width: 100%;
    max-width: 1440px;
    padding: 0 20px;
    box-sizing: border-box;
}

.where-to-buy__grid {
    display: grid;
    /* 4 columnas exactas para calzar el diseño */
    grid-template-columns: repeat(4, 246.92px);
    gap: 40px 45px;
    /* Espaciado vertical 40px, horizontal 45px */
    justify-content: center;
    /* Centrar la grilla completa */
    width: 100%;
    max-width: 1200px;
}

.retailer-card {
    width: 247px;
    /* 246.92 redondeado */
    height: 161px;
    background-color: #FEF2DC;
    border-radius: 40px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    /* #00000040 es transparencia 25% */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 25px;
    /* Evita que los logos toquen los bordes curvos */
    box-sizing: border-box;
}

.retailer-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* 
===========================================
    COMPONENTES: FOOTER COMPLEJO
=========================================== 
*/
.main-footer {
    width: 100%;
    background-color: #D3EEF9;
    /* var(--Primary-Blue-100) */
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
    /* Margen inferior extra para respirar */
}

.footer-container {
    width: 100%;
    max-width: 1200px;
    /* Ancho referencial de alineamiento del contenido */
    display: flex;
    flex-direction: column;
}

/* 1. Navegación superior con líneas */
.footer-nav {
    border-top: 3px solid #24AAE2;
    border-bottom: 3px solid #24AAE2;
    padding: 15px 0;
    margin-top: 40px;
    /* Espacio desde el tope del footer */
    margin-bottom: 50px;
    /* Espacio hacia el centro */
}

.footer-nav__list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav__list a {
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000;
    transition: color 0.3s;
}

.footer-nav__list a:hover {
    color: #24AAE2;
}

/* 2. Tres Columnas Centrales */
.footer-middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    /* Espacio antes del bloque inferior */
    padding: 0 40px;
}

.footer-col {
    flex: 1;
    /* Distribuye las 3 columnas equitativamente */
}

/* Columna Izquierda: Contacto */
.footer-col--contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-col__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #000;
    margin: 0 0 15px 0;
}

.footer-col__text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #444;
    /* Un gris muy oscuro o negro */
    margin: 0 0 8px 0;
}

/* Columna Central: Logo */
.footer-col--logo {
    display: flex;
    justify-content: center;
}

.footer-logo {
    max-width: 140px;
    /* Ajustado para logo vertical (más alto que ancho) */
    height: auto;
}

/* Columna Derecha: Redes Sociales */
.footer-col--social {
    display: flex;
    justify-content: flex-end;
    /* Alineados a la derecha de su columna */
}

.social-icons {
    display: flex;
    width: 245px;
    /* Medida Figma */
    height: 53px;
    /* Medida Figma */
    gap: 11px;
    /* Espaciado Figma */
}

.social-icon {
    width: 53px;
    /* Para que sea un círculo perfecto con base en la altura 53px */
    height: 53px;
    border-radius: 50%;
    background-color: #FFC033;
    /* Amarillo/naranja tipo yema usado en tus redes */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #FFF;
    font-size: 24px;
    /* Un poco más grande para el círculo de 53px */
    font-weight: bold;
    font-family: sans-serif;
    transition: transform 0.2s;
}

.social-icon:hover {
    transform: scale(1.1);
}

/* 3. Bloque Inferior: Newsletter y Copyright */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    /* Input a la izq, texto a la hr */
    align-items: center;
    padding: 0 40px;
}

/* Cajita amarilla del newsletter y el botón separados */
.newsletter {
    display: flex;
    align-items: center;
    width: 450px;
    justify-content: flex-start;
    gap: 15px;
    /* Separación entre el input y el botón */
}

.newsletter__input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    background-color: #FEF2DC;
    /* Amarillo pálido */
    border-radius: 25px;
    /* Píldora */
    padding: 10px 20px;
    /* Buen espaciado interno */
}

.newsletter__icon {
    font-size: 18px;
    color: #24AAE2;
}

.newsletter__input {
    border: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #000;
    width: 100%;
}

.newsletter__input:focus {
    outline: none;
}

.newsletter__btn {
    background-color: #FFC033;
    /* Amarillo botón */
    color: #FFF;
    border: none;
    border-radius: 20px;
    padding: 10px 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.newsletter__btn:hover {
    opacity: 0.9;
}

/* Derechos y copyright */
.copyright p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #444;
    /* Gris sutil */
    margin: 0;
}

/* 
===========================================
    PÁGINA: RECIPES
=========================================== 
*/
.page-recipes {
    width: 100%;
    margin-top: 0;
}

.section-recipes-intro {
    width: 100%;
    height: 514px;
    /* Ajustado para mostrar toda la altura de la imagen */
    background-color: #D3EEF9;
    /* Fondo azul claro */
    position: relative;
    display: flex;
    justify-content: center;
    overflow: visible;
    /* Permitimos que se vea toda la imagen si sobresale ligeramente */
}

.recipes-intro__container {
    width: 100%;
    max-width: 1440px;
    position: relative;
    display: flex;
}

/* Columna Izquierda (Imagen flotante) */
.recipes-intro__image-col {
    position: absolute;
    left: -38px;
    top: 0;
    /* Subido al borde superior para eliminar margen */
    width: 710px;
    height: 514px;
    z-index: 2;
}

.recipes-intro__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* o contain dependiendo de si no debe deformarse, asumo cover si es recortado */
    object-position: left top;
}

/* Columna Derecha (Textos) */
.recipes-intro__text-col {
    position: absolute;
    /* Usado para igualar las coordinadas `left: 724px; top: 226px` */
    left: 724px;
    top: 111px;
    /* Ajustado (226 - 115 = 111px) para coincidir con el diseño relativo */
    width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Según texto "text-align: center" */
    z-index: 2;
}

.recipes-intro__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    /* Solicitado expresamente 400 en lugar de 900 esta vez */
    font-size: 70px;
    line-height: 1;
    letter-spacing: -0.02em;
    -webkit-text-stroke: 2px #24AAE2;
    color: #24AAE2;
    text-align: center;
    margin: 0 0 30px 0;
    width: 100%;
}

.recipes-intro__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    /* Suponiendo standard como en las otras */
    letter-spacing: -0.02em;
    color: #000;
    text-align: center;
    margin: 0;
    max-width: 580px;
    /* Para que rompa línea como el diseño */
}


/* SECCIÓN: RECIPES SLIDER */
.section-recipes-slider {
    width: 100%;
    min-height: 500px;
    background-color: #FEF2DC;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recipes-slider__header {
    width: 100%;
    max-width: 1300px;
    margin-bottom: 40px;
}

.recipes-slider__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 70px;
    color: #469B2A;
    margin: 0;
    text-align: left;
    -webkit-text-stroke: 2px #469B2A;
}

.recipes-slider__container {
    width: 100%;
    max-width: 1440px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    /* Reducido para que queden las flechas y las 4 cards */
    position: relative;
    padding: 0 20px;
}

.recipes-slider__track {
    display: flex;
    justify-content: center;
    /* Centra las tarjetas para que se vean las 4 */
    gap: 24px;
    /* Espacio entre tarjetas un poco más ajustado */
    overflow: visible;
    /* Permitimos ver todo el conjunto */
    scroll-behavior: smooth;
    padding: 10px 0 20px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.recipes-slider__track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.recipe-card {
    flex: 0 0 271px;
    height: 326px;
    background-color: #FDE9BF;
    border-radius: 40px;
    box-shadow: 0px 4px 4px 0px #00000040;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding-bottom: 20px;
}

.recipe-card__image-container {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

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

.recipe-card__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #000;
    text-align: center;
    margin: 15px 15px auto 15px;
}

.recipe-card__btn {
    background-color: #24AAE2;
    color: #FFF;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.recipe-card__btn:hover {
    transform: scale(1.05);
}

/* Reutilización y ajuste de flechas para el slider de recetas */
.section-recipes-slider .slider-arrow {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 60px;
    height: 60px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.section-recipes-slider .slider-arrow:hover {
    opacity: 0.7;
}

.section-recipes-slider .slider-arrow svg {
    width: 60px;
    height: 60px;
}

.section-recipes-slider .slider-arrow svg path {
    stroke-width: 3px;
}

/* 
===========================================
    PÁGINA: PRODUCTS (FILTRABLE)
=========================================== 
*/
.products-page {
    width: 100%;
}

.section-products {
    background-color: #FDE9BF;
    /* Fondo de la sección única */
    padding: 80px 0;
    min-height: 800px;
}

.section-products .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.products-title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 50px;
    color: #24AAE2;
    -webkit-text-stroke: 2px #24AAE2;
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
}

/* Tabs de navegación */
.products-tabs {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 60px;
    border-bottom: 2px solid rgba(36, 170, 226, 0.1);
    padding-bottom: 25px;
    /* Más espacio para la línea azul */
    flex-wrap: wrap;
    /* Por si el texto es muy largo en móviles */
}

.tab-btn {
    background: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    /* ExtraBold inicial */
    font-size: 20px;
    color: #24AAE2;
    cursor: pointer;
    position: relative;
    padding: 10px 0;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.tab-btn:hover {
    opacity: 1;
}

.tab-btn.active {
    opacity: 1;
    font-weight: 600;
    /* SemiBold según prompt cuando se selecciona */
    transform: scale(1.1);
    /* Efecto de que se pone más grande */
}

/* Línea azul debajo del tab activo */
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #24AAE2;
    border-radius: 2px;
}

/* Grid de productos */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columnas */
    gap: 40px;
    width: 100%;
}

.product-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.4s ease;
}

/* Estilo de la tarjeta (Reutilizando diseño previo) */
.product-item .product-card {
    width: 100%;
    max-width: 271px;
    height: 360px;
    border-radius: 40px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.product-item .product-card__img {
    width: 85%;
    height: auto;
    object-fit: contain;
}

.product-item .product-card__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #000;
    text-align: center;
    margin-bottom: 15px;
}

/* Botón See More estilo píldora */
.product-card__btn {
    background-color: #24AAE2;
    color: #FFF;
    border: none;
    border-radius: 24px;
    padding: 10px 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.product-card__btn:hover {
    transform: scale(1.1);
}

/* Estilos para animación de filtrado (ocultar) */
.product-item.hidden {
    display: none;
}

/* Ajustes Responsive para el Grid */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .products-tabs {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* 
===========================================
    PÁGINA: FOOD SAFETY
=========================================== 
*/
.safety-page {
    width: 100%;
}

/* Sección 1: Hero Commitment */
.section-safety-hero {
    background-color: #D3EEF9;
    /* var(--Primary-Blue-100) */
    width: 100%;
    height: 496px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.safety-hero__container {
    display: flex;
    width: 100%;
    height: 100%;
}

.safety-hero__text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding-left: 240px;
    /* Aumentado para mover todo el bloque a la derecha */
    padding-right: 40px;
}

.safety-hero__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 60px;
    line-height: 100%;
    color: #469B2A;
    -webkit-text-stroke: 2px #469B2A;
    margin-bottom: 25px;
    max-width: 639px;
    letter-spacing: -0.02em;
}

.safety-hero__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 125%;
    color: #333;
    max-width: 550px;
    letter-spacing: -0.02em;
}

.safety-hero__image-col {
    flex: 1;
    height: 100%;
}

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

/* Sección 2: Four Keys */
.section-safety-keys {
    background-color: #FEF2DC;
    padding: 80px 0;
    min-height: 390px;
    display: flex;
    align-items: center;
}

.section-safety-keys .container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.safety-keys__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 100%;
    color: #469B2A;
    -webkit-text-stroke: 1.5px #469B2A;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: -0.02em;
}

.safety-keys__grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.safety-key-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.safety-key__item-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 125%;
    color: #000;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.safety-key__item-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    /* Ajustado de 20px para legibilidad en grid */
    line-height: 125%;
    color: #333;
    letter-spacing: -0.02em;
}

/* Ajustes Responsivos Safety */
@media (max-width: 1100px) {
    .section-safety-hero {
        height: auto;
        padding: 40px 0;
    }

    .safety-hero__container {
        flex-direction: column;
    }

    .safety-hero__text-col {
        padding-left: 40px;
        margin-bottom: 30px;
    }

    .safety-keys__grid {
        flex-direction: column;
        align-items: center;
    }

    .safety-key-col {
        max-width: 600px;
    }
}

/* Sección 3: Safety Detail & Quality */
.section-safety-details {
    background-color: #D7F2CE; /* var(--Primary-Grn-100) */
    padding: 100px 0;
}

.safety-details__grid {
    display: flex;
    justify-content: space-between;
    gap: 80px;
}

.safety-details-col {
    flex: 1;
}

.safety-details__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 46px;
    line-height: 100%;
    color: #469B2A;
    -webkit-text-stroke: 1.5px #469B2A;
    margin-bottom: 20px;
}

.safety-details__subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 140%;
    color: #000;
    margin-bottom: 30px;
}

.safety-details__list {
    list-style: none;
    margin-bottom: 30px;
}

.safety-details__list li {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.safety-icon-circle {
    width: 68px;
    height: 68px;
    background-color: #D3EEF9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.safety-list-icon {
    width: 45px;
    height: auto;
    object-fit: contain;
    transform: rotate(-22.72deg);
}

.safety-details__list span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 125%;
    color: #333;
}

.safety-details__footer-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 140%;
    color: #000;
}

/* Sección 4: Mission Statement */
.section-safety-mission {
    background-color: #FEF2DC;
    height: 147px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.safety-mission__text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 140%;
    color: #333;
    text-align: center;
}

.safety-mission__highlight {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 900;
    font-size: 30px;
    color: #469B2A;
    -webkit-text-stroke: 1px #469B2A;
}

@media (max-width: 900px) {
    .safety-details__grid {
        flex-direction: column;
        gap: 50px;
    }
    .section-safety-mission {
        height: auto;
        padding: 40px 20px;
    }
}

/* 
===========================================
    PÁGINA: BLOG
=========================================== 
*/
.section-blog {
    background-color: #D3EEF9;
    /* var(--Primary-Blue-100) */
    padding: 80px 0;
    min-height: 1014px;
}

.section-blog .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Alinea los filtros con el inicio de la card */
    max-width: 1221px;
    /* Ancho exacto de tus cards */
    margin: 0 auto;
    /* Centra todo el bloque de 1221px en la sección */
    width: 100%;
}

.blog-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 50px;
}

/* Cambio de fondo de footer solo para el Blog */
.blog-page+.main-footer {
    background-color: #FEF2DC;
}

.blog-tab {
    width: 114px;
    height: 42px;
    background-color: #FEF2DC;
    border: none;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-tab.active {
    background-color: #D7F2CE;
    /* var(--Primary-Grn-100) */
}

/* Tarjeta de Blog */
.blog-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.blog-card {
    display: flex;
    width: 100%;
    max-width: 1221px;
    height: 393px;
    background-color: #FEF2DC;
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.blog-card__image-container {
    flex: 0 0 415px;
    /* Ancho ajustado según post2 coordinates */
    height: 100%;
}

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

.blog-card__content {
    flex: 1;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-card__author-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.blog-card__logo-circle {
    width: 74px;
    height: 74px;
    background-color: #D3EEF9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-card__logo {
    width: 51px;
    height: 62px;
    object-fit: contain;
}

.blog-card__meta {
    display: flex;
    flex-direction: column;
}

.blog-card__author {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #333;
}

.blog-card__date {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #666;
}

.blog-card__title {
    font-family: 'MergePro-Bold', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.25;
    color: #469B2A;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
}

.blog-card__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.25;
    color: #333;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.blog-card__btn {
    background-color: #24AAE2;
    color: #FFF;
    border: none;
    border-radius: 24px;
    padding: 10px 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    align-self: flex-start;
    transition: transform 0.2s ease;
}

.blog-card__btn:hover {
    transform: scale(1.05);
}

/* Ocultar post al filtrar */
.blog-card.hidden {
    display: none;
}

/* Responsive Blog */
@media (max-width: 1000px) {
    .blog-card {
        flex-direction: column;
        height: auto;
    }

    .blog-card__image-container {
        flex: 0 0 300px;
    }
}