body {
            font-family: 'Poppins', sans-serif;
            background-color: #ffffff;
            color: #0C342C;
            overflow-x: hidden;
        }

        :root {
            --crema-claro: #FFFDEE;
            --verde-menta: #E2FBCE;
            --verde-lima: #E3EF26;
            --verde-esmeralda: #076653;
            --verde-oscuro: #0C342C;
        }

        .header-gradient {
            background: linear-gradient(180deg, rgba(226, 251, 206, 0.5) 0%, rgba(227, 239, 38, 0.18) 45%, rgba(255, 255, 255, 0) 100%);
        }

        .btn-gradient {
            background: linear-gradient(135deg, var(--verde-lima) 0%, #52b788 50%, var(--verde-esmeralda) 100%);
            color: #ffffff !important;
            font-weight: 700 !important;
            text-shadow: 0px 1px 2px rgba(12, 52, 44, 0.25);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-gradient:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(7, 102, 83, 0.3);
            filter: brightness(1.05);
        }

        .macro-hero-encapsulado {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-radius: 24px;
        }

        @media (min-width: 768px) {
            .macro-hero-encapsulado {
                max-width: 1152px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 0px;
                min-height: 540px;
                border: 1px solid rgba(12, 52, 44, 0.06);
                box-shadow: 0 15px 35px rgba(12, 52, 44, 0.02);
            }
        }

        .bg-hero-layer {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            z-index: 1;
            transition: opacity 0.8s ease-in-out;
        }
        .bg-hero-layer.active { opacity: 1; }

        .capa-contraste {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
            z-index: 2;
            pointer-events: none;
        }

        .slider-wrapper { position: relative; width: 100%; }
        .slide-texto { display: none; }
        .slide-texto.active { display: block; }
        
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .agent-card {
            transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
        }

        .marquee-container { overflow: hidden; white-space: nowrap; display: flex; width: 100%; }
        .marquee-content { display: flex; animation: marquee-infinite 20s linear infinite; width: max-content; }
        .marquee-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 280px; }
        @keyframes marquee-infinite { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

        .chat-bubble { opacity: 0; transform: translateY(15px); }
        .typing-dots span { animation: typingBlink 1.4s infinite both; color: var(--verde-esmeralda); }
        .typing-dots span:nth-child(2) { animation-delay: .2s; }
        .typing-dots span:nth-child(3) { animation-delay: .4s; }
        @keyframes typingBlink { 0% { opacity: .2; } 20% { opacity: 1; } 100% { opacity: .2; } }

/* ============================================================
   FONDO ESTATICO RADIAL - LORO IA
   #fondo-organico-loroia: degradado FIJO (sin animation). Se quito la
   animacion de background-position porque esa propiedad no es
   acelerada por GPU: el navegador tenia que repintar un lienzo de
   950px de alto en cada frame, de forma infinita, incluso con la
   pestana en reposo. Esto competia por CPU justo en el momento de
   abrir el modal de login, haciendolo sentir lento. El desvanecido
   hacia blanco lo sigue haciendo el div aparte (#fondo-organico-loroia-fade)
   encima, sin cambios.
   ============================================================ */

#fondo-organico-loroia {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 950px;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(90deg, #00545f, #ecffb6, #d6fb00, #00545f);
    background-size: 300% 100%;
    background-position: 50% 50%;
}

#fondo-organico-loroia-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 950px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 74% 48%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.25) 30%, transparent 55%),
        linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.12) 45%, #ffffff 92%);
}

@media (max-width: 767px) {
    #fondo-organico-loroia-fade {
        background:
            radial-gradient(circle at 50% 35%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.25) 30%, transparent 55%),
            linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.12) 45%, #ffffff 92%);
    }
}

@media (max-width: 767px) {
    #fondo-organico-loroia, #fondo-organico-loroia-fade { height: 700px; }
}

.header-gradient {
    display: none;
}

.seccion-cristal {
    background-color: rgba(255, 255, 255, 0.78) !important;
    background-image: none !important;
}

/* ============================================================
   HERO SIN TARJETA - loro flotando sobre el degradado
   ============================================================ */

.hero-sin-tarjeta { min-height: 480px; }

/* Escenario donde se apilan los 3 loros (uno por slide). Necesita
   tamano fijo porque las imagenes adentro son position:absolute. */
.loro-hero-stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 420px;
    margin: 0 auto;
}

/* Trunco blanco -> transparente sin editar el PNG: multiply hace que
   el blanco del fondo del PNG "desaparezca" visualmente y se quede
   solo el loro, mostrando el degradado detras. Position absolute para
   que los 3 se apilen exactamente en el mismo lugar y solo se vea el
   activo (fade entre ellos al cambiar de slide). */
.loro-hero-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}
.loro-hero-layer.active { opacity: 1; }

@media (max-width: 767px) {
    .loro-hero-stage { max-width: 260px; height: 260px; }
}

/* Sombra de anclaje: sin esto el loro se ve "flotando" sin peso.
   Es un blob difuminado oscuro justo debajo/detras. */
.loro-hero-sombra {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 18%;
    background: rgba(12, 52, 44, 0.25);
    filter: blur(30px);
    border-radius: 50%;
    z-index: 1;
}

/* Sin la tarjeta blanca de fondo, el texto necesita un poco de
   sombra para no perderse cuando el degradado pasa por zonas claras. */
.hero-texto-sombra {
    text-shadow: 0 2px 12px rgba(255, 255, 255, 0.7);
}


/* Franja blanco -> transparente SOLO detras del nav, para que el
   logo "Loro IA" se lea bien apenas carga la pagina, sin depender
   del punto exacto en que este el degradado animado de fondo. */
#fondo-nav-blanco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 220px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.5) 55%, transparent 100%);
}