.elementor-widget-breadcrumbs{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-5303 .elementor-element.elementor-element-dafda43{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-40a019e{width:100%;max-width:100%;}.elementor-5303 .elementor-element.elementor-element-40a019e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-bfc48a0{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-20e6122{width:100%;max-width:100%;}.elementor-5303 .elementor-element.elementor-element-20e6122 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-59e0394{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-92bf088{width:100%;max-width:100%;}.elementor-5303 .elementor-element.elementor-element-92bf088 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-41ddd90{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-82a74b7{width:100%;max-width:100%;}.elementor-5303 .elementor-element.elementor-element-82a74b7 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-ea9e72a{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-6fd49df{width:100%;max-width:100%;}.elementor-5303 .elementor-element.elementor-element-6fd49df > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-4d05583{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-afe2079{width:100%;max-width:100%;}.elementor-5303 .elementor-element.elementor-element-afe2079 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-4f84476{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-01e2be2{width:100%;max-width:100%;}.elementor-5303 .elementor-element.elementor-element-01e2be2 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-475b1e6{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-2fb6947{width:100%;max-width:100%;}.elementor-5303 .elementor-element.elementor-element-2fb6947 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-7099adf{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-b1ba830{width:100%;max-width:100%;}.elementor-5303 .elementor-element.elementor-element-b1ba830 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-7559187{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-059e042{width:100%;max-width:100%;}.elementor-5303 .elementor-element.elementor-element-059e042 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-3bf1cce{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5303 .elementor-element.elementor-element-5bcb5fa{width:100%;max-width:100%;}.elementor-5303 .elementor-element.elementor-element-5bcb5fa > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS *//* ============================================
   ESTILOS GLOBALES - VERDE Y AMARILLO PATITO
   ============================================ */

/* ============================================
   1. VARIABLES DE COLORES
   ============================================ */
:root {
    /* VERDES */
    --verde-oscuro: #1B5E20;
    --verde-medio: #2E7D32;
    --verde-claro: #4CAF50;
    --verde-muy-claro: #66BB6A;
    --verde-pastel: #A5D6A7;
    --verde-bg: #1a4a1e;
    
    /* AMARILLOS PATITO */
    --amarillo-oscuro: #F9A825;
    --amarillo-medio: #FDD835;
    --amarillo-claro: #FFEE58;
    --amarillo-patito: #FFD54F;
    --amarillo-muy-claro: #FFF9C4;
    --amarillo-bg: #FFF3CD;
    
    /* BLANCOS Y GRISES */
    --blanco: #FFFFFF;
    --blanco-humo: #F5F5F5;
    --gris-claro: #E0E0E0;
    --gris-medio: #BDBDBD;
    --texto-oscuro: #263238;
    --texto-medio: #546E7A;
    
    /* SOMBRAS */
    --sombra-verde: rgba(46, 125, 50, 0.25);
    --sombra-amarilla: rgba(253, 216, 53, 0.3);
    --sombra-oscura: rgba(0, 0, 0, 0.2);
}

/* ============================================
   2. CLASES DE FONDO
   ============================================ */

/* Fondo Verde Oscuro */
.bg-verde-oscuro {
    background: var(--verde-oscuro);
}

/* Fondo Verde Medio */
.bg-verde-medio {
    background: var(--verde-medio);
}

/* Fondo Verde Claro */
.bg-verde-claro {
    background: var(--verde-claro);
}

/* Fondo Verde con Gradiente */
.bg-verde-gradiente {
    background: linear-gradient(135deg, var(--verde-oscuro), var(--verde-medio));
}

/* Fondo Verde con Degradado Claro */
.bg-verde-gradiente-claro {
    background: linear-gradient(135deg, var(--verde-medio), var(--verde-claro));
}

/* Fondo Verde con Patrón */
.bg-verde-pattern {
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 213, 79, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 238, 88, 0.05) 0%, transparent 50%),
        var(--verde-oscuro);
}

/* Fondo con Textura de Líneas */
.bg-verde-lineas {
    background: 
        repeating-linear-gradient(45deg, 
            rgba(255, 213, 79, 0.03) 0px, 
            rgba(255, 213, 79, 0.03) 2px,
            transparent 2px, 
            transparent 8px
        ),
        var(--verde-oscuro);
}

/* ============================================
   3. CLASES DE TEXTO
   ============================================ */

/* Texto Blanco */
.text-blanco {
    color: var(--blanco);
}

.text-blanco-humo {
    color: var(--blanco-humo);
}

/* Texto Amarillo */
.text-amarillo-oscuro {
    color: var(--amarillo-oscuro);
}

.text-amarillo-medio {
    color: var(--amarillo-medio);
}

.text-amarillo-claro {
    color: var(--amarillo-claro);
}

.text-amarillo-patito {
    color: var(--amarillo-patito);
}

.text-amarillo-muy-claro {
    color: var(--amarillo-muy-claro);
}

/* Texto Verde */
.text-verde-oscuro {
    color: var(--verde-oscuro);
}

.text-verde-medio {
    color: var(--verde-medio);
}

.text-verde-claro {
    color: var(--verde-claro);
}

/* Texto con Sombra */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.text-shadow-light {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Texto con Degradado Amarillo */
.text-gradiente-amarillo {
    background: linear-gradient(135deg, var(--amarillo-patito), var(--amarillo-medio));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Texto con Degradado Verde */
.text-gradiente-verde {
    background: linear-gradient(135deg, var(--verde-claro), var(--verde-oscuro));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   4. CLASES DE ENLACES Y BOTONES
   ============================================ */

/* Botón Primario - Amarillo sobre Verde */
.btn-verde-amarillo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--amarillo-medio), var(--amarillo-patito));
    color: var(--verde-oscuro);
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(255, 213, 79, 0.3);
}

.btn-verde-amarillo:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 213, 79, 0.5);
    background: linear-gradient(135deg, var(--amarillo-claro), var(--amarillo-medio));
    border-color: var(--blanco);
    color: var(--verde-oscuro);
}

/* Botón Secundario - Transparente */
.btn-verde-borde {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--blanco);
    padding: 16px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 213, 79, 0.3);
}

.btn-verde-borde:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--amarillo-patito);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    color: var(--blanco);
}

/* Enlace Simple Amarillo */
.link-amarillo {
    color: var(--amarillo-patito);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.link-amarillo:hover {
    color: var(--amarillo-claro);
    border-bottom-color: var(--amarillo-claro);
}

/* ============================================
   5. CLASES DE TÍTULOS
   ============================================ */

/* Títulos H1 en Blanco con Sombra */
.titulo-h1-blanco {
    font-family: 'Georgia', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--blanco);
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Títulos H2 en Blanco */
.titulo-h2-blanco {
    font-family: 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--blanco);
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Títulos con Destacado Amarillo */
.titulo-destacado-amarillo {
    color: var(--blanco);
}

.titulo-destacado-amarillo span {
    display: inline-block;
    background: linear-gradient(135deg, var(--amarillo-patito), var(--amarillo-medio));
    color: var(--verde-oscuro);
    padding: 2px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(255, 213, 79, 0.3);
}

/* ============================================
   6. CLASES DE TEXTOS
   ============================================ */

/* Texto Introductorio Blanco */
.texto-intro-blanco {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.15rem;
    line-height: 1.8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.texto-intro-blanco strong {
    color: var(--amarillo-patito);
    font-weight: 600;
}

/* Texto Cuerpo Blanco */
.texto-cuerpo-blanco {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Texto Cuerpo con Destacados Amarillos */
.texto-cuerpo-blanco strong {
    color: var(--amarillo-claro);
    font-weight: 600;
}

/* ============================================
   7. BADGES Y ETIQUETAS
   ============================================ */

.badge-amarillo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 213, 79, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 213, 79, 0.25);
    border-radius: 50px;
    padding: 6px 18px 6px 14px;
    color: var(--amarillo-claro);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.badge-amarillo:hover {
    background: rgba(255, 213, 79, 0.25);
    transform: translateY(-2px);
}

/* ============================================
   8. DIVISORES
   ============================================ */

.divisor-amarillo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 20px 0;
}

.divisor-amarillo .linea {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--amarillo-patito), transparent);
    border-radius: 2px;
}

.divisor-amarillo .icono {
    font-size: 1.5rem;
    color: var(--amarillo-patito);
    filter: drop-shadow(0 2px 8px rgba(255, 213, 79, 0.3));
}

/* ============================================
   9. TARJETAS Y CONTENEDORES
   ============================================ */

/* Tarjeta con Fondo Semitransparente */
.card-verde-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s ease;
}

.card-verde-glass:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 213, 79, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Tarjeta con Fondo Verde Claro */
.card-verde-claro {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s ease;
}

.card-verde-claro:hover {
    background: rgba(76, 175, 80, 0.2);
    transform: translateY(-4px);
}

/* ============================================
   10. STATS Y CONTADORES
   ============================================ */

.stats-verde {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 213, 79, 0.15);
}

.stat-verde-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-verde-item .numero {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--amarillo-patito);
    line-height: 1.1;
}

.stat-verde-item .label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    margin-top: 4px;
}

.stat-verde-divisor {
    color: rgba(255, 213, 79, 0.2);
    font-size: 1.4rem;
    font-weight: 300;
}

/* ============================================
   11. ANIMACIONES UTILITARIAS
   ============================================ */

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-fade-in-up {
    animation: fadeInUp 0.6s ease-out both;
}

/* Float */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

.anim-float {
    animation: float 6s ease-in-out infinite;
}

/* ============================================
   12. CLASES DE BORDE Y SOMBRA
   ============================================ */

.border-amarillo {
    border: 2px solid var(--amarillo-patito);
}

.border-verde {
    border: 2px solid var(--verde-claro);
}

.shadow-verde {
    box-shadow: 0 8px 30px rgba(46, 125, 50, 0.2);
}

.shadow-amarillo {
    box-shadow: 0 8px 30px rgba(255, 213, 79, 0.2);
}

/* ============================================
   13. RESPONSIVE
   ============================================ */

@media (max-width: 992px) {
    .titulo-h1-blanco {
        font-size: 2.8rem;
    }
    .titulo-h2-blanco {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .titulo-h1-blanco {
        font-size: 2.2rem;
    }
    .titulo-h2-blanco {
        font-size: 1.7rem;
    }
    .texto-intro-blanco {
        font-size: 1rem;
    }
    .stats-verde {
        gap: 20px;
    }
    .stat-verde-item .numero {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .titulo-h1-blanco {
        font-size: 1.8rem;
    }
    .titulo-h2-blanco {
        font-size: 1.4rem;
    }
    .texto-intro-blanco {
        font-size: 0.95rem;
    }
    .btn-verde-amarillo,
    .btn-verde-borde {
        padding: 12px 20px;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }
    .stats-verde {
        flex-direction: column;
        gap: 12px;
    }
    .stat-verde-divisor {
        display: none;
    }
    .stat-verde-item {
        flex-direction: row;
        gap: 10px;
    }
    .stat-verde-item .label {
        margin-top: 0;
    }
}/* End custom CSS */