/* ─── Recursos más solicitados — grid 4 columnas ───────────────────────────── */
.recursos-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
}
@media (min-width: 1024px) {
    .recursos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─── Hero backgrounds ─────────────────────────────────────────────────────── */
/* La ruta a la imagen usa ../ porque este archivo vive en /css/                */
.hero-bg {
    background-image: linear-gradient(rgba(19, 61, 52, 0.55), rgba(19, 61, 52, 0.45)), url('../IMG/maiz_frijol_arroz.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero-bg-tecnico {
    background-image: linear-gradient(rgba(10, 35, 28, 0.68), rgba(14, 50, 40, 0.60)), url('https://images.unsplash.com/photo-1625246333195-78d9c38ad449?ixlib=rb-4.0.3&auto=format&fit=crop&w=1400&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* En móvil, fixed-attachment produce parpadeo en WebKit — se desactiva */
@media (max-width: 768px) {
    .hero-bg        { background-attachment: scroll; }
    .hero-bg-tecnico { background-attachment: scroll; }
}

/* ─── Scrollbar oculto (permite scroll sin mostrar la barra) ────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ─── Hero ChatBot — transiciones ───────────────────────────────────────────── */

/* Intro: sube y se desvanece al enviar el primer mensaje */
@keyframes heroIntroExit {
    from { opacity: 1; transform: translateY(0);     }
    to   { opacity: 0; transform: translateY(-20px); }
}
.hero-intro-exit {
    animation: heroIntroExit 0.28s ease-in forwards;
    pointer-events: none;
}

/* Historial: aparece subiendo desde abajo */
@keyframes heroHistoryEnter {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.hero-history-enter {
    animation: heroHistoryEnter 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Mensajes individuales — slide-up + fade + spring scale */
@keyframes msgEnter {
    from { opacity: 0; transform: translateY(10px) scale(0.90); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
/* hero chat */
.hero-msg-user {
    animation: msgEnter 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: bottom right;
}
.hero-msg-bot {
    animation: msgEnter 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: bottom left;
}
/* popup chat */
.msg-enter-user {
    animation: msgEnter 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: bottom right;
}
.msg-enter-bot {
    animation: msgEnter 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: bottom left;
}

/* ─── Catálogo — aparición escalonada de tarjetas ───────────────────────────── */
@keyframes cardReveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card-reveal {
    animation: cardReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Modal de módulo — entrada animada ─────────────────────────────────────── */
@keyframes modalEnter {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.modal-enter {
    animation: modalEnter 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (max-width: 767px) {
    @keyframes modalEnterMobile {
        from { opacity: 0; transform: translateY(48px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .modal-enter { animation: modalEnterMobile 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
}

/* ─── Skeleton shimmer (iframes de video cargando) ──────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton-shimmer {
    background: linear-gradient(90deg, #e8f0ee 25%, #d0e6e1 50%, #e8f0ee 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ─── Hero ChatBot — placeholder claro ──────────────────────────────────────── */
#heroInput::placeholder {
    color: rgba(30, 91, 79, 0.38);
}

/* ─── Hero ChatBot — layout dos columnas (≥768px) ───────────────────────────── */
@media (min-width: 768px) {
    .md-row        { flex-direction: row !important; }
    .md-col-left   { border-bottom: none !important; border-right: 1px solid rgba(30,91,79,0.10) !important; }
    .md-divider    { display: block !important; }
}

/* ─── Hero chat history — scrollbar dorado ──────────────────────────────────── */
#heroChatHistory::-webkit-scrollbar {
    width: 4px;
}
#heroChatHistory::-webkit-scrollbar-track {
    background: transparent;
}
#heroChatHistory::-webkit-scrollbar-thumb {
    background: rgba(165, 127, 44, 0.35);
    border-radius: 99px;
}
#heroChatHistory::-webkit-scrollbar-thumb:hover {
    background: rgba(165, 127, 44, 0.60);
}
#heroChatHistory {
    scrollbar-width: thin;
    scrollbar-color: rgba(165, 127, 44, 0.35) transparent;
}

/* ─── Scroll indicator ───────────────────────────────────────────────────────── */
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0);    opacity: 0.4; }
    50%       { transform: translateY(7px); opacity: 0.9; }
}
.scroll-indicator {
    animation: scrollBounce 1.8s ease-in-out infinite;
}