:root {
  /* ═══════════════════════════════════════
     PALETA DE COLORES
     ═══════════════════════════════════════ */
  --color-primary:       #1a3018;    /* Verde oscuro — textos, fondos hero */
  --color-secondary:     #0c2526;    /* Verde profundo — acentos oscuros */
  --color-accent:        #5c9b63;    /* Verde medio — CTA, iconos, destacados */
  --color-neutral:       #e2e2d3;    /* Beige claro — fondos suaves, bordes */
  --color-white:         #ffffff;
  --color-black:         #000000;

  /* Opacidades recurrentes */
  --opacity-subtle:      0.05;
  --opacity-light:       0.10;
  --opacity-soft:        0.20;
  --opacity-medium:      0.30;
  --opacity-overlay:     0.75;

  /* ═══════════════════════════════════════
     TIPOGRAFÍA — Familia: Helvena
     ═══════════════════════════════════════ */
  --font-family:         'Helvena', sans-serif;

  /* Pesos */
  --fw-light:            300;
  --fw-regular:          400;
  --fw-semibold:         600;
  --fw-bold:             700;
  --fw-extrabold:        800;

  /* Escala tipográfica (font-size / line-height) */
  --text-xs:             0.8125rem;  /* 13px */
  --text-sm:             1rem;       /* 16px */
  --text-base:           1.125rem;   /* 18px */
  --text-md:             1.25rem;    /* 20px */
  --text-lg:             1.5rem;     /* 24px */
  --text-xl:             1.75rem;    /* 28px */
  --text-2xl:            2.5rem;     /* 40px */
  --text-3xl:            3.5rem;     /* 56px */
  --text-4xl:            3.75rem;    /* 60px */
  --text-5xl:            4rem;       /* 64px */
  --text-6xl:            4.75rem;    /* 76px */

  --lh-tight:            1.15;       /* headings grandes */
  --lh-snug:             1.21;       /* 56/68, 40/48 */
  --lh-normal:           1.33;       /* 24/32 */
  --lh-relaxed:          1.56;       /* 18/28 */
  --lh-loose:            1.80;       /* 20/36 */

  /* Letter-spacing */
  --ls-none:             0;
  --ls-sm:               0.01em;     /* 1% */
  --ls-md:               0.03em;     /* 3% */
  --ls-lg:               0.05em;     /* 5% */

  /* ═══════════════════════════════════════
     ESPACIADO
     ═══════════════════════════════════════ */
  --space-1:             0.25rem;    /*  4px */
  --space-1-5:           0.375rem;   /*  6px */
  --space-2:             0.5rem;     /*  8px */
  --space-2-5:           0.625rem;   /* 10px */
  --space-4:             1rem;       /* 16px */
  --space-5:             1.125rem;   /* 18px */
  --space-6:             1.25rem;    /* 20px */
  --space-7:             1.5rem;     /* 24px */
  --space-8:             1.75rem;    /* 28px */
  --space-9:             2rem;       /* 32px */
  --space-10:            2.25rem;    /* 36px */
  --space-11:            2.5rem;     /* 40px */
  --space-12:            3rem;       /* 48px */
  --space-14:            3.25rem;    /* 52px */
  --space-16:            4rem;       /* 64px */
  --space-24:            6.25rem;    /* 100px */
  --space-36:            8.75rem;    /* 140px */

  /* ═══════════════════════════════════════
     BORDES
     ═══════════════════════════════════════ */
  --radius-md:           1.25rem;    /* 20px */
  --radius-lg:           1.875rem;   /* 30px */

  /* ═══════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════ */
  --container-width:     1440px;
  --page-bg:             var(--color-white);
}
/* =========================================
   ESTILOS BASE
========================================= */
body {
    font-family: var(--font-family);
    background-color: var(--page-bg);
    color: var(--color-black);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

/* =========================================
   CLASES GLOBALES REUTILIZABLES
========================================= */
.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    padding: var(--space-2-5) var(--space-7);
    border-radius: var(--radius-lg);
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-accent:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.bg-primary-custom{
    background-color: var(--color-primary);
}

/* =========================================
   TOP BAR (Redes Sociales)
========================================= */
.top-bar {
    background-color: var(--color-secondary);
    padding: var(--space-2) 0;
}

.top-bar-icon {
    color: var(--color-white);
    opacity: var(--opacity-overlay); 
    font-size: var(--text-sm);
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.top-bar-icon:hover {
    opacity: 1;
    color: var(--color-white);
}

/* =========================================
   HEADER & NAVBAR (Original al inicio, Sticky al bajar)
========================================= */
.main-header {
    position: absolute; /* Estado original sin scroll */
    top: 35px; 
    padding-top: var(--space-2);
    width: 100%;
    z-index: 1030;
    transition: all 0.3s ease;
}

/* Logo con transición fluida */
.main-header .navbar-brand img {
    transition: height 0.3s ease;
}

/* Cuando se hace scroll, pasa a sticky, muestra el fondo verde y reduce el logo */
.main-header.scrolled {
    position: fixed;
    top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(26, 48, 24, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.main-header.scrolled .navbar-brand img {
    height: 40px; 
}

/* Menú Píldora Transparente */
.nav-pill-wrapper {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-lg);
}

.nav-pill-wrapper .nav-link {
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--fw-light);
    letter-spacing: var(--ls-sm);
    opacity: 0.85;
    transition: all 0.3s ease;
}

.nav-pill-wrapper .nav-link.active,
.nav-pill-wrapper .nav-link:hover {
    font-weight: var(--fw-semibold);
    opacity: 1;
}

/* =========================================
   HERO BANNER & TITLES
========================================= */
.hero-section {
    min-height: 100vh; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding-top: 200px;
    padding-bottom: 80px; 
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 10% 90%, rgba(26, 48, 24, 0.95) 0%, rgba(26, 48, 24, 0.6) 40%, rgba(12, 37, 38, 0.1) 80%);
    z-index: 0;
}

.hero-watermark {
    position: absolute;
    top: 82%;
    left: -47px;
    transform: translateY(-50%);
    width: 545px;
    max-width: 80vw;
    opacity: var(--opacity-light);
    z-index: 0;
    pointer-events: none;
}

.hero-title {
    font-size: var(--text-4xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-white);
    margin-bottom: var(--space-4);
    letter-spacing: -0.01em;
}

.hero-subtitle {
    font-size: var(--text-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin-bottom: var(--space-8);
}

/* =========================================
   CINTA INFERIOR 
========================================= */
.features-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(180deg, transparent 0%, rgba(12, 37, 38, 0.5) 100%);
    padding: var(--space-5) 0;
    z-index: 3;
}

.feature-text {
    font-size: var(--text-sm);
    font-weight: var(--fw-light);
    color: var(--color-neutral);
    letter-spacing: var(--ls-md);
}

.bullet-point {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .main-header {
        top: 40px;
    }
    
    .main-header.scrolled {
        top: 0;
    }

    .nav-pill-wrapper {
        background: var(--color-primary);
        border: none;
        border-radius: var(--radius-md);
        padding: var(--space-4);
        margin-top: var(--space-4);
    }
    
    .nav-pill-wrapper .nav-link.active {
        background-color: rgba(255, 255, 255, 0.2);
        font-weight: var(--fw-bold);
    }

    .hero-title {
        font-size: var(--text-2xl);
    }
    
    .hero-subtitle {
        font-size: var(--text-sm);
    }
    
    .hero-watermark {
        opacity: var(--opacity-subtle);
        width: 120%;
    }
}
/* =========================================
   SECCIÓN: INFORMACIÓN IEPS
========================================= */
.ieps-info-section {
    background-color: var(--color-secondary); 
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}


.ieps-title {
    font-size: var(--text-2xl);
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
}

.ieps-paragraph {
    font-size: var(--text-md);
    line-height: var(--lh-relaxed);
    opacity: 0.95;
}


.ieps-divider {
    border-color: var(--color-white);
    opacity: 0.3;
    width: 70%; 
    margin-left: 0;
}

.ieps-disclaimer {
    color: var(--color-white);
    font-size: var(--text-md);
    font-weight: var(--fw-light);
    opacity: 0.6;
}


.decor-circle {
    width: 320px;
    height: 320px;
  
    border: 45px solid var(--color-accent);
    border-radius: 50%;
  
    transform: translate(-50%, 50%);
    pointer-events: none; 
}

/* =========================================
   RESPONSIVO 
========================================= */
@media (max-width: 991px) {
    .ieps-info-section {
        padding-top: var(--space-11);
        padding-bottom: var(--space-11);
    }
    
    .ieps-title {
        font-size: var(--text-2xl);
    }
    
    .ieps-paragraph {
        font-size: var(--text-sm);
    }
    
  
    .decor-circle {
        width: 200px;
        height: 200px;
        border-width: 30px;
    }
    
    .ieps-divider {
        width: 100%; 
    }
}


.text-primary-custom {
    color: var(--color-primary);
}

.section-title {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-primary);
    letter-spacing: -0.01em;
}


.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    padding: var(--space-2-5) var(--space-8);
    border-radius: var(--radius-lg);
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* =========================================
   SECCIÓN: REQUISITOS
========================================= */
.requisitos-section {
    background-color: var(--page-bg);
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}


.req-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
}

.req-card {
    background: rgba(226, 226, 211, 0.33);
    border-radius: var(--radius-md); 
    padding: var(--space-6) var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #E5E5E5; 
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
        width: 220px;
    height: 230px;
}


.req-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.req-icon {
    width: auto;
    height: 65px; 
    margin-bottom: var(--space-5);
}

.req-text {
    color: var(--color-primary);
    font-size: var(--text-sm); 
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    margin: 0;
}

/* =========================================
   RESPONSIVO 
========================================= */
/* Pantallas medianas / Tablets */
@media (max-width: 1199px) {
    .req-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width: 767px) {
    .section-title {
        font-size: var(--text-2xl);
    }
    .req-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .req-card{
        width: 100%;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    .req-grid {
        grid-template-columns: 1fr; 
    }

     .req-card{
        width: 100%;
    }
}


.bg-neutral-custom { background: rgba(226, 226, 211, 0.30); }


.img-rounded-custom {
    border-radius: var(--radius-md); 
    object-fit: cover;
}

/* =========================================
   SECCIÓN: ESPECIALISTAS
========================================= */
.specialist-section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}


.title-decorator {
    width: 120px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 3px;
    margin-bottom: var(--space-4);
}

/* Tipografía de la sección */
.specialist-title {
    font-size: var(--text-2xl);
    font-weight: var(--fw-extrabold); 
    color: var(--color-primary);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-4);
    letter-spacing: -0.01em;
}

.specialist-subtitle {
    font-size: var(--text-base); 
    color: var(--color-primary);
    margin-bottom: var(--space-6);
    opacity: 0.85;
}


.custom-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2-5);
    margin-bottom: var(--space-2-5);
    font-size: var(--text-sm); 
    color: var(--color-primary);
    line-height: var(--lh-relaxed);
}

.custom-check-list li i {
    color: var(--color-accent); 
    font-size: var(--text-base); 
    margin-top: 4px; 
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .specialist-section {
        padding-top: var(--space-11);
        padding-bottom: var(--space-11);
    }
    
    .specialist-title {
        font-size: var(--text-2xl);
    }
    
    .title-decorator {
        margin-top: var(--space-4);
    }
}

/* =========================================
   SECCIÓN: ¿CÓMO TRABAJAMOS?
========================================= */
.how-we-work-section {
    background-color: var(--page-bg);
}


.how-we-work-swiper {
    padding-bottom: var(--space-4);
    overflow: visible !important; 

}

/* Estructura de la Tarjeta */
.work-card {
    position: relative;
    border-radius: var(--radius-md); 
    overflow: hidden;
    height: 480px; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}


.work-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: linear-gradient(to bottom, rgba(12, 37, 38, 0.7) 0%, rgba(12, 37, 38, 0.1) 40%, rgba(12, 37, 38, 0.9) 100%);
    z-index: 1;
}

.work-card-content {
    position: relative;
    z-index: 2;
    padding: var(--space-8) var(--space-6) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    height: 100%;
}


.work-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.work-step-num {
    font-size: var(--text-5xl);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    line-height: 1;
}

.work-step-divider {
    width: 2px;
    height: 45px;
    background-color: var(--color-white);
    opacity: 0.6;
}

.work-step-title {
    font-size: var(--text-md); 
    font-weight: var(--fw-bold);
    color: var(--color-white);
    line-height: var(--lh-tight);
    margin: 0;
}


.work-step-desc {
    font-size: var(--text-sm);
    font-weight: var(--fw-light);
    color: var(--color-white);
    line-height: var(--lh-relaxed);
    margin: 0;
    opacity: 0.9;
}

/* =========================================
   BOTÓN SWIPER PERSONALIZADO
========================================= */
.custom-swiper-next {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    right: 20px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.custom-swiper-next:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    transform: scale(1.05);
}

.custom-swiper-next::after {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-white);
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 767px) {
    .work-card {
        height: 420px;
    }
    .work-step-num {
        font-size: var(--text-4xl);
    }
    .work-step-title {
        font-size: var(--text-sm);
    }
    .custom-swiper-next {
        width: 45px;
        height: 45px;
        right: 10px;
    }
    .custom-swiper-next::after {
        font-size: 18px;
    }
}

/* =========================================
   SECCIÓN: HONORARIOS
========================================= */
.fees-section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.fees-title {
    font-size: var(--text-4xl); 
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-4);
    letter-spacing: -0.01em;
}


.badge-outline {
    display: inline-block;
    padding: var(--space-1-5) var(--space-5);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50px; 
    font-size: var(--text-sm);
    font-weight: var(--fw-light);
    color: var(--color-white);
    letter-spacing: var(--ls-sm);
}

.fees-highlight {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-4);
}

.fees-desc {
    font-size: var(--text-base); 
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    opacity: 0.85;
    margin: 0;
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .fees-section {
        padding-top: var(--space-11);
        padding-bottom: var(--space-11);
    }
    
    .fees-title {
        font-size: var(--text-2xl);
    }
    
    .fees-highlight {
        font-size: var(--text-base);
    }
    
    .fees-desc {
        font-size: var(--text-sm);
    }
}

/* =========================================
   VARIANTE DE PÍLDORA
========================================= */

.badge-outline-dark {
    display: inline-block;
    padding: var(--space-1-5) var(--space-5);
    border: 1px solid rgba(26, 48, 24, 0.5);
    border-radius: 50px;
    font-size: var(--text-sm);
    font-weight: var(--fw-regular);
    color: var(--color-primary);
    letter-spacing: var(--ls-sm);
}

/* =========================================
   SECCIÓN: EXPERIENCIA
========================================= */
.experience-section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.experience-title {
    font-size: var(--text-3xl); 
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-4);
    letter-spacing: -0.01em;
}

.experience-highlight {
    font-size: var(--text-lg); 
    font-weight: var(--fw-bold);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-4);
}

.experience-desc {
    font-size: var(--text-base); 
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    opacity: 0.85; 
    margin: 0;
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .experience-section {
        padding-top: var(--space-11);
        padding-bottom: var(--space-11);
    }
    
    .experience-title {
        font-size: var(--text-2xl);
    }
    
    .experience-highlight {
        font-size: var(--text-base);
    }
    
    .experience-desc {
        font-size: var(--text-sm);
    }
}

/* =========================================
   SECCIÓN: CTA FINAL
========================================= */
.cta-bottom-section {
    min-height: 600px; 
    background-size: cover;
    background-position: center 30%; 
    background-repeat: no-repeat;
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}


.cta-overlay {
    background: linear-gradient(90deg, rgba(12, 37, 38, 0.95) 0%, rgba(12, 37, 38, 0.5) 55%, rgba(12, 37, 38, 0) 100%),
                linear-gradient(0deg, rgba(26, 48, 24, 0.9) 0%, rgba(26, 48, 24, 0) 50%);
}

.cta-title {
    font-size: var(--text-3xl); 
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

.cta-subtitle {
    font-size: var(--text-lg); 
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    opacity: 0.9;
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .cta-bottom-section {
        min-height: 500px;
        background-position: right center; 
    }
    
    .cta-title {
        font-size: var(--text-2xl);
    }
    
    .cta-subtitle {
        font-size: var(--text-base);
    }
}


/* =========================================
   FOOTER
========================================= */
.main-footer-section {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Enlaces del footer */
.footer-nav-row .nav-link {
    font-size: var(--text-base);
    letter-spacing: var(--ls-sm);
    transition: opacity 0.3s ease;
}

.footer-nav-row .nav-link:hover {
    opacity: 1 !important;
}


.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    border-radius: 50%;
    font-size: var(--text-sm);
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-social-icon:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
    transform: translateY(-2px);
}


.footer-legal {
    font-size: var(--text-xs);
    font-weight: var(--fw-light);
    color: var(--color-neutral);
    opacity: 0.7;
    letter-spacing: var(--ls-sm);
}

.footer-privacy-link {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.footer-privacy-link:hover {
    opacity: 1;
    color: var(--color-accent) !important;
}

.footer-leaves-left {
    bottom: 0;
    left: 0;
    width: 180px;
    opacity: 0.85;
    pointer-events: none;
}

.footer-leaves-right {
    bottom: 0;
    right: 0;
    width: 180px;
    opacity: 0.85;
    pointer-events: none;
    transform: scaleX(-1); 
}

/* =========================================
   RESPONSIVO FOOTER
========================================= */
@media (max-width: 991px) {
    .footer-nav-row .nav {
        flex-direction: column;
        gap: var(--space-3) !important;
    }
    
    .footer-leaves-left,
    .footer-leaves-right {
        width: 100px; 
    }
}



/* =========================================
   SECCIÓN: PROGRAMA DE CONTINUIDAD
========================================= */
.continuity-section {
    background-color: var(--page-bg); 
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.continuity-title {
    font-size: var(--text-2xl); /* 60px */
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

.continuity-desc {
    font-size: var(--text-base); /* 18px */
    line-height: var(--lh-relaxed);
    opacity: 0.9;
    margin: 0;
}

.continuity-highlight {
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    line-height: var(--lh-relaxed);
    margin: 0;
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .continuity-section {
        padding-top: var(--space-11);
        padding-bottom: var(--space-11);
    }
    
    .continuity-title {
        font-size: var(--text-2xl); /* 36px/40px en móvil */
    }
}


/* =========================================
   ESTILOS COMPLETOS PARA BOTONES (CTA)
   Incluye: Base, Hover elegante y Destello adaptativo
========================================= */

/* 1. Estilos base compartidos */
.btn-accent, .btn-primary {
    position: relative;
    overflow: hidden; /* Fundamental para contener el destello dentro del borde redondeado */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    padding: var(--space-2-5) var(--space-7);
    border-radius: var(--radius-lg);
    border: none;
    text-decoration: none;
    cursor: pointer;
    /* Transición fluida para transformaciones, colores y sombras */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 2. Colores específicos por variante */
.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

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

/* 3. Configuración del Destello (Shimmer) por defecto (Brillo blanco) */
.btn-accent::after, .btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    /* Franja de luz diagonal blanca por defecto */
    background: linear-gradient(
        120deg, 
        transparent, 
        rgba(255, 255, 255, 0.55), 
        transparent
    );
    transform: skewX(-20deg);
    animation: subtleShimmer 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes subtleShimmer {
    0% {
        left: -150%;
    }
    30% {
        left: 200%;
    }
    100% {
        left: 200%;
    }
}

/* 4. Efectos al hacer Hover (Elevación + Cambio de color) */
.btn-accent:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 5. Comportamiento del destello en el Hover */
/* Para btn-primary: Acelera el destello blanco (porque su fondo sigue siendo oscuro) */
.btn-primary:hover::after {
    animation: subtleShimmer 1.2s ease-in-out infinite;
}

/* Para btn-accent en hover: Cambiamos el destello a un tono oscuro/translúcido 
   porque su fondo ahora es BLANCO, y aceleramos la animación */
.btn-accent:hover::after {
    background: linear-gradient(
        120deg, 
        transparent, 
        rgba(0, 0, 0, 0.15), 
        transparent
    );
    animation: subtleShimmer 1.2s ease-in-out infinite;
}

/* =========================================
   HERO BANNER: INTERIOR / NOSOTROS
========================================= */
.hero-interior-section {
    min-height: 100vh; /* Un poco menos de pantalla completa para que luzca la foto y de paso a lo siguiente */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

/* Degradado vertical oscuro que nace desde el suelo/cultivo hacia arriba */
.hero-interior-overlay {
    background: linear-gradient(180deg, rgba(26, 48, 24, 0.00) 63.95%, rgba(26, 48, 24, 0.90) 100%), linear-gradient(180deg, rgba(26, 48, 24, 0.00) 55.77%, rgba(26, 48, 24, 0.80) 100%), linear-gradient(195deg, rgba(255, 255, 255, 0.43) -6.9%, rgba(255, 255, 255, 0.00) 15.91%), linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), 143.107% no-repeat;
}

.hero-interior-title {
    font-size: var(--text-4xl); /* 64px */
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .hero-interior-section {
        min-height: 80vh;
        padding-top: 100px;

        background-position: right;
    }
    
    .hero-interior-title {
        font-size: var(--text-2xl); /* Se adapta perfectamente a tablets y móviles */
    }
    
    .nav-pill-wrapper {
        background: var(--color-primary);
        border: none;
        border-radius: var(--radius-md);
        padding: var(--space-4);
        margin-top: var(--space-4);
    }
}



/* =========================================
   SECCIÓN: OBJETIVO (NOSOTROS) - HOJAS
========================================= */
.about-objective-section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.objective-main-title {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

.objective-subtitle {
    font-size: var(--text-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    opacity: 0.95;
}

.objective-divider {
    width: 60px;
    border-width: 2px !important;
    opacity: 0.4 !important;
}

.objective-desc {
    font-size: var(--text-base);
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    opacity: 0.85;
}

/* Contenedor anclado al borde inferior derecho */
.objective-leaves-bg {
    right: 120px !important;
    bottom: 0;
    z-index: 0;
}

/* Control estricto de la altura del SVG para que cubra de abajo hacia arriba con elegancia */
.objective-leaves-img {
    height: 95%; /* Ocupa casi toda la altura de la sección pero nace desde el suelo */
    max-height: 520px;
    width: auto;
    object-fit: contain;
    /* Le da ese tono ligeramente más vivo sobre el fondo oscuro sin perder sobriedad */
    filter: brightness(1.15) saturate(1.1); 
    opacity: 0.35; 
}

/* =========================================
   RESPONSIVO PARA LA SECCIÓN DE OBJETIVO
========================================= */
@media (max-width: 991px) {
    .about-objective-section {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }
    
    .objective-main-title {
        font-size: var(--text-2xl); /* 32px / 36px para pantallas medianas */
        line-height: 1.2;
    }
    
    .objective-subtitle {
        font-size: var(--text-base); /* 18px más cómodo para lectura móvil */
    }
    
    .objective-desc {
        font-size: var(--text-sm); /* 16px en dispositivos móviles */
    }
}

@media (max-width: 576px) {
    .about-objective-section {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
        text-align: left; /* Mantiene la alineación limpia a la izquierda en celulares */
    }
    
    .objective-main-title {
        font-size: var(--text-2xl); /* Título optimizado para smartphones */
    }
    
    /* El botón abarca un espacio cómodo o se ajusta al toque táctil */
    .about-objective-section .btn-accent {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* =========================================
   SECCIÓN: ZIG-ZAG CLARO (NOSOTROS)
========================================= */
.about-zig-zag-section {
    background-color: var(--page-bg, #ffffff); /* Fondo blanco o neutro claro */
}


.section-lead {
    font-size: var(--text-base); /* 18px */
    line-height: var(--lh-relaxed);
}

.section-desc {
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    opacity: 0.85;
}



/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .about-zig-zag-section {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }
    
    .section-title {
        font-size: var(--text-2xl);
    }
}

/* =========================================
   SECCIÓN: ATENCIÓN EN LÍNEA (MÉXICO)
========================================= */
.mexico-coverage-section {
    background-color: var(--page-bg, #ffffff);
}

.coverage-main-title {
    font-size: var(--text-2xl); /* 40px - 48px */
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    
}

/* Tarjeta contenedora con fondo sutil y esquinas elegantes */
.coverage-card {
    background-color: var(--color-neutral-light, #f6f7f4); /* Un tono neutro cálido muy claro */
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.coverage-card-title {
    font-size: var(--text-xl); /* 22px / 24px */
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

.coverage-desc {
    font-size: var(--text-base); /* 18px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    opacity: 0.85;
}

/* Ajustes estéticos para la imagen del mapa */
.map-mexico-img {
    max-height: 380px;
    width: auto;
    object-fit: contain;
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .coverage-card {
        padding: var(--space-4) !important;
    }
    
    .coverage-main-title {
        font-size: var(--text-2xl);
        text-align: start;
    }
    
    .coverage-card-title {
        font-size: var(--text-lg);
    }
}


/* =========================================
   SECCIÓN: RECUPERA EL IEPS ACREDITABLE
========================================= */
.recover-ieps-section {
    padding-top: var(--space-16);
  
}

.recover-title {
    font-size: var(--text-4xl); /* 40px - 48px */
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

.recover-desc {
    font-size: var(--text-base); /* 18px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    opacity: 0.9;
}

.recover-divider {
    width: 100%;
    max-width: 100%;
    border-width: 1px !important;
    opacity: 0.25 !important;
}

.recover-legal {
    font-size: var(--text-xs); /* 14px o más chico para nota al pie */
    font-weight: var(--fw-light);
    line-height: var(--lh-normal);
    opacity: 0.7;
}

/* Estilo para la imagen del productor para que funda limpiamente abajo */
.farmer-img {
    max-height: 480px;
    width: auto;
    object-fit: contain;
}

/* =========================================
   FORMA CIRCULAR DECORATIVA (UBICACIÓN EXACTA)
========================================= */
.farmer-decorative-shape {
    position: absolute;
    /* Ubicado en la esquina inferior izquierda, saliendo del borde */
    bottom: -110px;
    left: -110px;
    width: 320px;
    height: 320px;
    /* Anillo verde claro */
    border: 45px solid var(--color-accent); 
    border-radius: 50%;
    /* Se queda por detrás del productor */
    z-index: 5; 
    pointer-events: none;
    opacity: 0.95;
}

/* Contenedor de la imagen al frente */
.farmer-img {
    position: relative;
    z-index: 1;
    max-height: 480px;
    width: auto;
    object-fit: contain;
}

/* Ajuste responsivo para móviles */
@media (max-width: 991px) {
    .farmer-decorative-shape {
        width: 200px;
        height: 200px;
        border-width: 30px;
        bottom: -70px;
        left: -70px;
    }
}
/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .recover-ieps-section {
        padding-top: var(--space-12);
     
    }
    
    .recover-title {
        font-size: var(--text-3xl);
    }
    
   
}


/* =========================================
   SECCIÓN: DOCUMENTOS PARA ENTREVISTA INICIAL
========================================= */
.documents-section {
    background-color: #F5F5F0;
}

.documents-main-title {
    font-size: var(--text-3xl); /* 40px - 48px */
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

.documents-subtitle {
    font-size: var(--text-lg); /* 20px */
    font-weight: var(--fw-regular);
}

/* Línea divisoria sutil entre cada ítem del listado */
.document-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: var(--text-base);
    color: var(--color-primary);
    display: flex;
    align-items: flex-start;
}

/* Estilo para los números del listado */
.doc-number {
    min-width: 28px; /* Asegura que los números de dos dígitos alineen perfecto con los de uno */
    display: inline-block;
}

.doc-text {
    opacity: 0.9;
    line-height: var(--lh-normal);
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .documents-main-title {
        font-size: var(--text-2xl);
        text-align: start;
    }
    
    .documents-subtitle {
        font-size: var(--text-base);
        text-align: start;

    }
    
    /* En móvil ajustamos los paddings de la lista */
    .document-item {
        padding-top: var(--space-3) !important;
        padding-bottom: var(--space-3) !important;
    }
}




/* =========================================
   SECCIÓN: HONORARIOS Y COSTOS (ADAPTATIVA)
========================================= */
.fees-section-honorarios {
    background-color: #F5F5F0;
}

.fees-main-title {
    font-size: var(--text-4xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

.fees-subtitle {
    font-size: var(--text-lg);
}

.fees-desc {
    font-size: var(--text-base);
    opacity: 0.85;
}

.fees-year-badge {
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: var(--fw-bold);
    color: rgba(26, 48, 24, 0.08);
    line-height: 1;
    display: inline-block;
}

/* Contenedor de la tabla en escritorio */
.fees-table-container {
    background-color: #fafbf9;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.custom-fees-table {
    margin: 0;
    width: 100%;
}

.custom-fees-table thead th {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--fw-bold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none;
}

.custom-fees-table tbody td {
    font-size: var(--text-sm);
    color: var(--color-primary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.custom-fees-table tbody tr:last-child td {
    border-bottom: none;
}

.custom-fees-table tbody tr:hover td {
    background-color: rgba(26, 48, 24, 0.02);
}

/* =========================================
   ESTILOS PARA TARJETAS MÓVILES (.fee-card-mobile)
========================================= */
.fee-card-mobile {
    background-color: #fafbf9;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.fee-card-concept {
    font-size: 1rem;
    line-height: 1.4;
    max-width: 65%;
}

.fee-card-price {
    font-size: 0.85rem;
    font-weight: 600;
}

.fee-card-condition {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Ajustes responsivos generales */
@media (max-width: 991px) {
    .fees-main-title {
        font-size: var(--text-32xl);
    }
    
    .fees-year-badge {
        display: none;
    }
}

/* =========================================
   SECCIÓN: PREGUNTAS FRECUENTES (FAQ)
========================================= */
.faq-section {
    background-color: #F5F5F0;
}

.faq-main-title {
    font-size: var(--text-4xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

/* Personalización de los elementos del acordeón */
.custom-faq-accordion .accordion-item {
    background-color: #F5F5F0;
    border: 0.7px solid #1A3018;
    border-radius: 24px !important; /* Radio moderno y fluido */
    overflow: hidden;
    margin-bottom: 1rem;
}

.accordion-collapse, .accordion-button {
    background-color: #F5F5F0 !important; 
}

.custom-faq-accordion .accordion-button {
    background-color: transparent;
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-5);
    box-shadow: none !important;
    /* CLAVE PARA MÓVIL: Flexbox para alinear texto y flecha sin que se salgan */
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

/* Aseguramos que la flecha nativa de Bootstrap no flote raro */
.custom-faq-accordion .accordion-button::after {
    flex-shrink: 0;
    margin-left: 1rem;
}

.custom-faq-accordion .accordion-button:not(.collapsed) {
    background-color: rgba(26, 48, 24, 0.03);
    color: var(--color-primary);
}

.custom-faq-accordion .accordion-body {
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    padding: 0 var(--space-5) var(--space-5) var(--space-5);
    opacity: 0.85;
}

/* =========================================
   RESPONSIVO MÓVIL
========================================= */
@media (max-width: 991px) {
    .faq-main-title {
        font-size: var(--text-2xl);
        text-align: start;
    }
    
    .custom-faq-accordion .accordion-item {
        border-radius: 18px !important; /* Ajuste proporcional para celulares */
    }

    .custom-faq-accordion .accordion-button {
        font-size: 0.92rem;
        padding: 14px 18px; /* Padding optimizado para pantallas chicas */
    }
    
    .custom-faq-accordion .accordion-body {
        padding: 0 18px 18px 18px;
        font-size: 0.88rem;
    }
}

/* =========================================
   SECCIÓN: HERO / ESTÍMULO FISCAL
========================================= */
.hero-fiscal-section {
    background-color: var(--color-primary); /* Verde oscuro institucional */
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.hero-main-title {
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
}

.hero-subtitle-secondary {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: var(--fw-semibold);
    color: var(--color-accent); /* Verde claro característico */
    line-height: var(--lh-snug);
    max-width: 900px;
    margin: 0 auto;
}

.hero-desc {
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    max-width: 600px;
}

/* Anillo decorativo inferior izquierdo */
.hero-shape-left {
    position: absolute;
    bottom: -90px;
    left: -90px;
    width: 260px;
    height: 260px;
    border: 38px solid var(--color-accent);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.9;
    z-index: 0;
}

/* Anillo decorativo inferior derecho */
.hero-shape-right {
    position: absolute;
    bottom: -90px;
    right: -90px;
    width: 260px;
    height: 260px;
    border: 38px solid var(--color-accent);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.9;
    z-index: 0;
}

/* Animación sutil de rebote para la flecha indicadora */
.hero-scroll-indicator {
    display: flex;
    justify-content: center;
    animation: bounceDown 2s infinite;
}

.hero-scroll-indicator > i{
    font-size: 2.5rem !important;
}

@keyframes bounceDown {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(8px); }
    60% { transform: translateY(4px); }
}

/* =========================================
   RESPONSIVO MÓVIL
========================================= */
@media (max-width: 991px) {
    .hero-fiscal-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    
    .hero-shape-left,
    .hero-shape-right {
        width: 160px;
        height: 160px;
        border-width: 24px;
        bottom: -60px;
    }
    
    .hero-shape-left { left: -60px; }
    .hero-shape-right { right: -60px; }
}


/* =========================================
   LISTA CON VIÑETA SVG PERSONALIZADA (DOT)
========================================= */
.custom-checklist li {
    position: relative;
    padding-left: 28px; /* Espacio para que el punto no encime al texto */
    margin-bottom: 12px;
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    opacity: 0.85;
}

/* Inyectamos el punto SVG como un icono de fondo alineado a la izquierda */
.custom-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
       top: 7px;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    /* SVG de un círculo (dot) pintado con tu variable de acento o color primario */
    background-image: url("../img/check-li.svg");
}


/* =========================================
   SECCIÓN 1: REQUISITOS CON FONDO DE CAMPO
========================================= */
.requirements-bg-section {
    /* Reemplaza la ruta con la ubicación real de tu imagen del campo con agricultores */
    background-image: url('../img/Estimulo/campo-agricultores.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Capa semitransparente oscura para asegurar legibilidad sobre la foto */
.requirements-bg-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 48, 24, 0.35); /* Tinte verde oscuro sutil */
    z-index: 0;
}

.requirements-glass-card {
    background-color: #1A3018; /* Tarjeta verde oscura sólida y elegante */
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
}

.requirements-card-title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
color: var(--color-white);
}

.requirements-check-list li {
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
}

.text-success-custom {
    color: var(--color-accent) !important; /* Verde claro para las palomitas */
    font-size: 1.1rem;
}

.requirements-legal {
    font-size: 0.8rem;
    line-height: var(--lh-normal);
}


/* =========================================
   SECCIÓN 2: BENEFICIOS (3 TARJETAS)
========================================= */
.benefit-cards-section {
    background-color: var(--color-white);
}

.benefit-main-title {
    font-size: var(--text-4xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

.benefit-card {
    background-color: #F5F5F0; /* Fondo neutro cálido suave */
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06) !important;
}

.benefit-icon-box {
  
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.benefit-card-title {
    font-size: 1.25rem;
    line-height: var(--lh-snug);
}

.benefit-card-desc {
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
    opacity: 0.85;
    color: #1A3018;
}

/* =========================================
   RESPONSIVO MÓVIL
========================================= */
@media (max-width: 991px) {
    .requirements-bg-section {
        background-position: 70% center; /* Enfoca a los agricultores en pantallas verticales */
    }
    
    .benefit-main-title {
        font-size: var(--text-2xl);
        text-align: start;
    }
}

.text-highlight{
    color: #5C9B63 !important;
}


/* =========================================
   SECCIÓN: ATENCIÓN 100% EN LÍNEA Y FORMULARIO
========================================= */
.online-support-section {
    background-color: var(--page-bg, #F5F5F0);
}

.support-main-title {
    font-size: var(--text-4xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

/* Círculos de iconos en la columna izquierda */
.support-icon-circle {
    width: 48px;
    height: 48px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.support-label {
    font-size: var(--text-sm);
}

.support-value {
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
}

/* Tarjeta contenedora del formulario */
.support-form-card {
    background-color: #fafbf9;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Estilo para los inputs y selects del formulario */
.custom-form-input {
    background-color: #f0f2ec !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    padding: 0 16px;
    font-size: var(--text-sm);
    color: var(--color-primary);
    box-shadow: none !important;
}

.custom-form-input:focus {
    border-color: var(--color-primary) !important;
    background-color: #ffffff !important;
}

/* Botón de evaluación */
.submit-eval-btn {
    background-color: var(--color-primary) !important;
    border: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.submit-eval-btn:hover {
    background-color: #244120 !important;
    transform: translateY(-2px);
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width: 991px) {
    .support-main-title {
        font-size: var(--text-2xl);
    }
    
    .support-form-card {
        padding: 2rem !important;
        border-radius: 18px;
    }
}


.whatsapp-container {
  position: fixed;
  bottom: 69px;
  right: 20px;
  display: flex;
  align-items: center;
  z-index: 1000;
}

.whatsapp-tooltip {
  background-color: #ffffff;
  color: #333;
  padding: 10px 45px 10px 18px;
  border-radius: 30px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  white-space: nowrap;
  margin-right: -25px;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: slideIn 0.6s ease-out 0.3s forwards;
}

.whatsapp {
  background-color: #25D366;
  color: #fff;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 37px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  animation: pulse 2.2s infinite;
  transition: transform 0.2s ease;
}

.whatsapp:hover {
  background-color: #1ebe57;
  transform: scale(1.08);
}

/* La leyenda entra deslizándose desde la derecha */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* El botón "late" para llamar la atención */
@keyframes pulse {
  0% { box-shadow: 0 4px 10px rgba(0,0,0,0.25), 0 0 0 0 rgba(37, 211, 102, 0.6); }
  70% { box-shadow: 0 4px 10px rgba(0,0,0,0.25), 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 4px 10px rgba(0,0,0,0.25), 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 991px) {
    .whatsapp-container{
        bottom: 40px;
    }
}

/* =========================================
   ESTILOS PARA MENÚ SECUNDARIO / FOOTER
========================================= */
.footer-menu .nav-link {
    transition: opacity 0.3s ease, font-weight 0.3s ease;
}

/* Cuando el enlace está activo o se pasa el cursor por encima */
.footer-menu .nav-link.active,
.footer-menu .nav-link:hover {
    opacity: 1 !important;
    font-weight: var(--fw-bold);
}

/* =========================================
   ESTILO PARA EL BOTÓN DE CONTACTO ACTIVO
========================================= */
.btn-accent.active-btn {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); /* Un halo o borde exterior sutil */
    filter: brightness(1.1);                         /* Realza ligeramente el tono del botón */
    font-weight: var(--fw-bold);
    background-color: white;
}

/* =========================================
   HEADER SÓLIDO VERDE (Página de Privacidad)
========================================= */
.main-header.header-solid-green {
 
    background-color: rgba(26, 48, 24, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 
}
.privacy-policy-container{
    margin-top: 150px;
}


/* =========================================
   SECCIÓN DE EVALUACIÓN Y FORMULARIO
========================================= */
.evaluation-section {
    background-color: #f7f9f6; /* Fondo sutil de soporte */
    position: relative;
}

/* Tarjeta contenedora del formulario */
.support-form-card {
    background-color: #ffffff;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid rgba(26, 48, 24, 0.08);
}


/* Botón de envío del formulario */
.submit-eval-btn {
    background-color: var(--color-primary, #1A3018) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.submit-eval-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 48, 24, 0.2);
}

/* =========================================
   BLOQUE DE CONTACTO INFERIOR
========================================= */
/* Círculos para los iconos de contacto */
.support-icon-circle {
    width: 45px;
    height: 45px;
    background-color: rgba(26, 48, 24, 0.08);
    color: var(--color-primary, #1A3018);
    border-radius: 50%;
    display: flex;
    align-items-center;
    justify-content-center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.support-icon-circle:hover {
    background-color: var(--color-primary, #1A3018);
    color: #ffffff;
}

/* Textos e hipervínculos de contacto */
.support-label {
    font-size: var(--text-sm, 0.9rem);
}

.support-value {
    font-size: var(--text-sm, 0.9rem);
    transition: color 0.2s ease;
}

.support-value:hover {
    color: var(--color-primary, #1A3018) !important;
}

/* Decorador superior de títulos */
.title-decorator {
    width: 50px;
    height: 3px;
    background-color: var(--color-primary, #1A3018);
    border-radius: 2px;
}

/* =========================================
   AJUSTE DE ESPACIADO PARA EL HERO Y FORMULARIO
========================================= */
.hero-section {
    padding-bottom: 120px !important; /* Da espacio suficiente en la parte baja del banner verde */
}

.floating-form-card {
    margin-top: -160px !important; /* Controla qué tanto sube la tarjeta para que encaje perfecto */
    position: relative;
    z-index: 2;
}