@media screen and (min-width: 769px) {
    .main-content {
        display: grid;
        min-height: 100dvh;
        grid-template-rows: auto 1fr auto;
    }
}

.hero-images {
    position: relative;
    height: 500px;

    .hero-img {
        position: absolute;
        top: 20px;
        right: 20px;
    }
}

.why_us {
    background: var(--primary-green);
    color: #ffffff;
    font-family: 'Delight';
    padding-bottom: 10em;

    .hadding {
        h2 {
            font-family: 'Delight-Bold';
            color: var(--white);
            font-size: 2.5rem;

            &::after {
                content: '';
                display: block;
                width: 60px;
                height: 2px;
                background: #ffffff;
                margin: 10px auto 0;
            }
        }
    }

    .step-circle {
        width: 160px; /* Tamaño fijo para mantener la forma */
        height: 160px;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start; /* Alineado a la izquierda visualmente */
        padding: 20px;
        margin-bottom: 25px;
        transition: all 0.3s ease;

        &:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: #fff;
        }

        .step-number {
            font-size: 1.1rem;
            font-weight: 400;
            margin-bottom: 5px;
            opacity: 0.9;
        }

        .step-title {
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            line-height: 1.2;
        }
    }

    .step-content {
        .step-week {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .step-separator {
            border-top: 2px solid #ffffff;
            opacity: 1;
            margin: 0.5rem 0 1rem 0;
            width: 100%; 
        }

        .step-desc {
            font-size: 1rem;
            line-height: 1.4;
            opacity: 0.9;
        }
    }
}


.section-how-it-works {
    background-color: #fff;
    padding: 80px 0;
    overflow-x: hidden; /* Evita scroll horizontal por las rotaciones */
    font-family: 'Delight';

    h2, h3 {
        font-family: 'Delight-Bold';
        color: var(--primary-green);
        font-weight: 700;
    }

    .hadding {
        h2 {
            font-size: 2.5rem;
            font-family: 'Delight-Bold';
            color: var(--primary-green);
        }
    }

    /* Título Principal */
    .main-title {
        text-align: center;
        font-size: 3rem;
        margin-bottom: 4rem;
    }

    /* --- LOS PASOS (Pills) --- */
    .steps-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 5rem;
        position: relative;
    }

    .step-item {
        flex: 1;
        min-width: 100px; /* Ancho mínimo para responsive */
        text-align: center;
        position: relative;
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Contenedor visual de la píldora rotada */
    .pill-wrapper {
        width: 70px;
        height: 200px;
        margin-bottom: 20px;
        position: relative;
        /* Centramos el wrapper */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* La forma verde */
    .pill-shape {
        width: 100%;
        height: 100%;
        background-color: var(--primary-green);
        border-radius: 50px;
        transform: rotate(35deg); /* Rotación diagonal */
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
        position: relative;
        z-index: 2;
        overflow: hidden;
    }

    /* El número dentro de la píldora */
    .pill-number {
        font-family: 'Delight-ExtraBold';
        font-size: 8rem;
        color: #fff;
        font-weight: bold;
        transform: rotate(-35deg); /* Contrarrestar la rotación para que el número quede recto */
        line-height: 1;
    }

    /* La línea punteada */
    .dotted-line {
        position: relative;
        top: 100px; /* Ajuste para que salga desde abajo de la píldora */
        left: -80px;
        width: 1px;
        height: 60px;
        border-left: 2px dotted #999;
        z-index: 1;
        transform: translateX(-15px); /* Ajuste fino visual */
    }

    /* Texto descriptivo debajo del paso */
    .step-text {
        font-family: 'Delight-Medium';
        text-align: left;
        font-size: 1rem;
        line-height: 1.2;
        color: #000;
        width: 100%;
        margin-top: 10px;
        margin-left: 60px;
    }

    /* --- SECCIÓN INFERIOR (GROWTH) --- */
    .growth-section {
        margin-top: 60px;
    }

    .growth-title {
        font-size: 2.5rem;
        line-height: 1.1;
        color: var(--primary-green);
    }
    
    .growth-title span {
        font-family: 'Delight';
        color: #1a1a1a; /* Parte negra del título */
    }

    .growth-desc {
        font-size: 1.2rem;
        line-height: 1.6;
        color: #444;
        margin-bottom: 1.5rem;
    }

    .btn-audit {
        background-color: var(--primary-green);
        color: white;
        padding: 12px 30px;
        border-radius: 5px;
        border: none;
        font-weight: 500;
        font-size: 1rem;
        transition: background 0.3s;
    }

    .btn-audit:hover {
        background-color: var(--primary-green);
        color: white;
    }

    /* --- RESPONSIVE TWEAKS --- */
    @media (max-width: 991px) {
        .steps-container {
            justify-content: center;
        }
        .step-item {
            flex: 0 0 33%; /* 3 por fila en tablets */
            margin-bottom: 3rem;
        }
        .dotted-line {
            display: none; /* Ocultar líneas en responsive para limpieza visual */
        }
    }

    @media (max-width: 576px) {
        .step-item {
            flex: 0 0 50%; /* 2 por fila en móvil */
        }
        .main-title {
            font-size: 2rem;
        }
        .growth-title {
            font-size: 2rem;
            margin-bottom: 1.5rem;
        }
    }
}

.section-about {
    padding: 100px 0;
    background-color: #fff;
    font-family: 'Delight';

    /* Tarjeta contenedora principal (Fondo Verde Claro) */
    .zonaura-card {
        background-color: rgba(157, 200, 141, 0.35); 
        border-top-left-radius: 60px;
        border-bottom-right-radius: 60px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
        padding: 0; /* Padding manejado internamente */
        position: relative;
        padding-bottom: 50px;
    }

    /* --- TIPOGRAFÍA --- */
    h2, h3, h4 {
        font-family: 'Delight', sans-serif; /* Fallback sans-serif */
        color: #000;
    }

    .subtitle {
        font-family: 'Delight', sans-serif;
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        color: #333;
    }

    .main-heading {
        font-size: 2.7rem;
        line-height: 1.1;
        margin-bottom: 1.5rem;
        font-weight: 400;
    }

    /* Texto en verde oscuro y negrita */
    .highlight-green {
        color: var(--primary-green);
        font-family: 'Delight-ExtraBold';
    }

    .description {
        font-family: 'Delight', sans-serif;
        font-size: 1rem;
        line-height: 1.6;
        color: #222;
        margin-bottom: 1.5rem;
        max-width: 90%;
    }

    /* --- BOTONES --- */
    .btn-zonaura {
        background-color: var(--primary-green);
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 10px 20px;
        font-size: 0.95rem;
        font-weight: 500;
        margin-right: 10px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }

    .btn-zonaura:hover {
        background-color: #0f332d;
        color: #fff;
        transform: translateY(-2px);
    }

    /* --- IMAGEN --- */
    .img-container {
        height: 100%;
        min-height: 400px;
        position: relative;
        margin-top: -60px;
    }

    .img-zonaura {
        width: 90%;
        height: 90%;
        object-fit: cover;
        border-top-right-radius: 60px; 
        border-bottom-left-radius: 60px;

    }

    /* --- RESPONSIVE --- */
    @media (max-width: 991px) {
        .zonaura-card {
            padding-bottom: 0;
            border-top-right-radius: 30px;
        }
        .img-container {
            min-height: 300px;
            margin-top: 0;
        }
        .img-zonaura {
            width: 100%;
            border-radius: 0; /* Simplificar bordes en móvil */
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
        }
        .content-wrapper {
            padding: 40px 30px !important;
        }
    }
    
    .content-wrapper {
        padding: 90px 40px 60px 60px;
    }
}

.services-section {
    font-family: 'Delight', serif;
    padding: 80px 0;
    background-color: #fff;
    
    .hadding {
        h2 {
            font-family: 'Delight-Bold';
            color: var(--primary-green);
            font-size: 2.5rem;
        }

        .sub-heading {
            text-align: center;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            color: #555;
        }
    }

    .main-heading {
        text-align: center;
        font-family: 'Delight', serif; /* Fuente personalizada o fallback */
        font-size: 3rem;
        color: var(--primary-green);
        line-height: 1.1;
        margin-bottom: 60px;
        font-weight: 700;
    }

    /* --- ESTILO DE LAS TARJETAS (CARDS) --- */
    .service-card {
        border: 1px solid #333; /* Borde delgado oscuro */
        border-radius: 24px;
        padding: 40px 30px;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        position: relative;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;

        background: url('../../img/service-bg.png') no-repeat;
        background-position-x: 65px;
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    /* Icono Circular */
    .icon-circle {
        padding: 10px;
        width: 70px;
        height: 70px;
        border: 1px solid var(--primary-green);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
        background-color: #fff; /* Fondo blanco para tapar la cuadrícula detrás del icono */
        position: relative;
        z-index: 2;
    }

    /* Texto de la tarjeta */
    .card-title {
        font-family: 'Delight-ExtraBold', serif;
        color: var(--primary-green);
        font-size: 1.5rem;
        line-height: 1.2;
        margin-bottom: 15px;
        position: relative;
        z-index: 2;
    }

    .card-desc {
        font-family: 'Delight', serif;
        font-size: 1rem;
        line-height: 1.5;
        color: #222;
        margin-bottom: 30px;
        flex-grow: 1; /* Empuja el botón hacia abajo */
        position: relative;
        z-index: 2;
        background-color: rgba(255,255,255,0.7); /* Ligero fondo para legibilidad sobre la grilla */
    }

    /* Enlace "Learn More" */
    .learn-more {
        text-decoration: none;
        color: #222;
        font-weight: 500;
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .learn-more:hover {
        color: var(--primary-green);
    }

    /* Responsive tweaks */
    @media (max-width: 768px) {
        .main-heading {
            font-size: 2.2rem;
        }
        .service-card {
            padding: 30px 20px;
        }
    }
}

.section-testimonials {
    padding: 150px 0;
    background-color: #fff;
    overflow: hidden; 

    @media (min-width: 991px) {
        background-image: url('../../img/testimonial-img.png');
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
    }

    .testimonial-img-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
    }

    .testimonial-img {
        max-width: 100%;
        height: auto;
        /* Efecto de rotación leve o ajuste según la imagen real */
        object-fit: contain;
    }

    /* --- CONTENIDO DERECHA --- */
    .testimonial-content {
        padding-left: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        position: relative;
    }

    /* TÍTULO MIXTO */
    .heading-wrapper {
        font-size: 2.5rem; /* Ajustable según tamaño deseado */
        line-height: 1.1;
        margin-bottom: 2rem;
        text-transform: uppercase;
    }

    .heading-light {
        font-weight: 300; /* Letra fina */
        color: #333;
        font-family: 'Helvetica Neue', Arial, sans-serif;
    }

    .heading-bold {
        font-family: 'Delight-Bold', serif;
        color: var(--primary-green);
    }

    /* --- ITEM DEL CARRUSEL --- */
    .carousel-item {
        transition: transform .6s ease-in-out; /* Suavizar transición */
    }

    .quote-text {
        font-family: 'Delight', serif; /* O una serif negrita */
        font-size: 1.25rem;
        font-weight: 700;
        color: #111;
        margin-bottom: 1.5rem;
        font-style: italic;
    }

    .review-body {
        font-size: 1rem;
        line-height: 1.6;
        color: #555;
        margin-bottom: 1.5rem;
    }

    /* Estrellas */
    .stars {
        color: #f4a261; /* Color dorado/naranja */
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
    }

    .author-name {
        font-weight: 800;
        font-size: 1.1rem;
        color: #000;
        margin-bottom: 0;
    }

    .author-title {
        font-size: 0.95rem;
        color: #666;
    }

    /* --- CONTROLES DEL CARRUSEL (Flechas) --- */
    /* Contenedor relativo para posicionar las flechas respecto al texto */
    .carousel-controls-custom {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        display: flex;
        justify-content: space-between;
        pointer-events: none; /* Para que el click pase a través del espacio vacío */
        z-index: 10;
        left: -30px; /* Ajuste para que las flechas salgan un poco */
        width: calc(100% + 60px);
    }

    .control-btn {
        width: 45px;
        height: 45px;
        background-color: var(--primary-green);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        pointer-events: all; /* Reactivar clicks en los botones */
        transition: background-color 0.3s;
        padding: 0;
    }

    .control-btn:hover {
        background-color: #0f352e;
    }

    .control-icon {
        width: 12px;
        height: 12px;
        fill: #fff; /* Flecha blanca */
    }

    /* RESPONSIVE */
    @media (max-width: 991px) {
        .testimonial-content {
            padding-left: 0;
            margin-top: 2rem;
            text-align: center;
        }
        .heading-wrapper {
            font-size: 2rem;
        }
        .carousel-controls-custom {
            position: relative;
            top: auto;
            transform: none;
            left: 0;
            width: 200px;
            margin: 20px auto 0;
            justify-content: space-between;
        }
    }
}

.section-partners {
    padding: 80px 0;
    background-color: #fff;
    text-align: center;
    font-family: 'Delight', serif;

    /* Título Principal */
    .main-title {
        font-family: 'Delight-Light', serif;
        font-size: 2.8rem;
        margin-bottom: 3.5rem;
        color: #222;
    }

    .title-bold {
        font-family: 'Delight-ExtraBold', serif;
        color: var(--primary-green);
    }

    /* --- TARJETAS DE CONTACTO --- */
    .contact-card {
        border: 1px solid var(--primary-green);
        border-radius: 20px;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        transition: all 0.3s ease;
        background-color: #fff;
        cursor: pointer;
        text-decoration: none; /* Por si usamos <a> */
    }

    .contact-card:hover {
        background-color: #fcfcfc;
        box-shadow: 0 5px 15px rgba(22, 74, 65, 0.1);
        transform: translateY(-3px);
    }

    .contact-icon {
        font-size: 2.5rem;
        color: var(--primary-green);
        margin-bottom: 15px;
    }

    .contact-text {
        font-family: 'Delight', serif; /* O mantener sans-serif según preferencia */
        font-weight: 700;
        color: var(--primary-green);
        font-size: 1.1rem;
        margin: 0;
    }

    /* --- SECCIÓN DE LOGOS INFERIOR --- */
    .partners-area {
        margin-top: 5rem;
    }

    .partner-label {
        font-size: 1.1rem;
        color: #555;
        margin-bottom: 1rem;
        font-weight: 300;
    }
    
    .partner-label span {
        color: var(--primary-green); /* Opcional: destacar parte del texto */
    }

    .partner-logo {
        max-width: 200px;
        height: auto;
        opacity: 0.9;
        display: block;
        margin: 0 auto;
    }

    /* Ajuste específico para logos que necesiten más tamaño */
    .logo-amazon {
        max-width: 220px;
    }

    /* --- RESPONSIVE --- */
    @media (max-width: 768px) {
        .main-title {
            font-size: 2rem;
        }
        .partners-area .row > div {
            margin-bottom: 2rem;
        }
    }
}

.section-footer {
    background-color: var(--primary-green);
    background-image: url('../../img/footer-mark.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: var(--white);
    padding: 80px 0 30px 0;
    position: relative;
    overflow: hidden;
    

    /* Títulos de las columnas */
    h3.footer-title {
        font-family: 'Delight-ExtraBold', serif; /* Fuente personalizada */
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
        color: #fff;
    }

    /* Texto general */
    .footer-text {
        font-size: 0.95rem;
        line-height: 1.6;
        opacity: 0.9;
        margin-bottom: 0;
        font-weight: 300;
    }

    .footer-text a {
        color: #fff;
        text-decoration: none;
        transition: opacity 0.3s;
    }
    
    .footer-text a:hover {
        opacity: 0.7;
    }

    /* Iconos Sociales Circulares */
    .social-icons-wrapper {
        display: flex;
        gap: 10px;
        margin-top: 1.5rem;
    }

    .social-circle {
        width: 35px;
        height: 35px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #fff;
        transition: background-color 0.3s ease;
    }

    .social-circle:hover {
        background-color: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    .social-circle i {
        font-size: 0.9rem;
    }

    /* Enlaces de Navegación (Columna Derecha) */
    .footer-links-list {
        padding-top: 3em;
        list-style: none;
        margin: 0;
    }

    .footer-links-list li {
        margin-bottom: 0.1rem;
    }

    .footer-link {
        text-decoration: none;
        color: #fff;
        font-family: 'Delight', serif; /* En la imagen parecen tener la fuente brand o ser muy bold */
        font-weight: 600; 
        font-size: 1.1rem;
        transition: transform 0.2s;
        display: inline-block;
    }

    .footer-link:hover {
        color: #ccc;
        transform: translateX(5px);
    }

    /* Línea Divisoria */
    hr.footer-divider {
        border-color: rgba(255, 255, 255, 0.3);
        margin: 3rem 0 2rem 0;
        opacity: 1;
    }

    /* Bottom Bar */
    .footer-logo {
        max-width: 150px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .copyright-text {
        font-size: 0.8rem;
        opacity: 0.6;
        text-align: right;
        margin-top: 10px;
    }

    /* --- RESPONSIVE --- */
    @media (max-width: 991px) {
        .footer-links-group {
            margin-top: 0;

            .footer-links-list {
                padding-top: 0;
            }
        }
    }

    @media (max-width: 768px) {
        .section-footer {
            text-align: left;
        }
        .copyright-text {
            text-align: left;
            margin-top: 1rem;
        }
        .social-icons-wrapper {
            margin-bottom: 2rem;
        }
    }
}