/* ============================================================
   VALLOR ACADEMY — TEMA "CAMPO" (caloroso e legível)
   Creme + verde de lavoura. Pensado para leitura fácil no sol.
   Nomes de classes mantidos para não quebrar o academy.js.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

:root {
    --bone:    #F4F7FB;   /* azul-acinzentado bem claro (superfície suave) */
    --bone-2:  #FFFFFF;   /* cards e campos */
    --ink:     #1B2330;   /* texto principal (azul-marinho quase preto) */
    --ink-2:   #122A4A;   /* azul profundo (seção de vídeos) */
    --signal:  #2F80ED;   /* azul de ação */
    --signal-d:#1F65C7;
    --blue:    #2F80ED;   /* azul (info no mural) */
    --muted:   #5C6675;   /* texto secundário legível */
    --line:    rgba(27, 35, 48, 0.13);
    --line-d:  rgba(244, 247, 251, 0.16);
    --red:     #D14D2E;
    --amber:   #E0992E;
}

* { -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bone);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

/* ---- Tipografia ---- */
.font-display { font-family: 'Bricolage Grotesque', sans-serif; }
.font-mono    { font-family: 'Plus Jakarta Sans', sans-serif; }  /* neutraliza o visual "código" */

.title-xl {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.02;
}
.kicker {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal-d);
}

/* ---- Botões ---- */
.btn-signal {
    background: var(--signal);
    color: var(--ink);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    border-radius: 16px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    box-shadow: 0 10px 22px -10px rgba(47, 128, 237, 0.55);
}
.btn-signal:hover { background: var(--signal-d); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(31,101,199,.6); }

.btn-ink {
    background: var(--ink);
    color: var(--bone);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    border-radius: 14px;
    transition: all .2s ease;
}
.btn-ink:hover { background: #29354a; transform: translateY(-2px); }

/* ---- Cards / linhas ---- */
.hair { border: 1px solid var(--line); }
.card {
    background: var(--bone-2);
    border: 1px solid var(--line);
    border-radius: 24px;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.card:hover { border-color: var(--signal); transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(27,35,48,.35); }

.notch { border-radius: 28px; }

/* ---- Hero / superfícies claras frias ---- */
.hero-console {
    background:
        radial-gradient(120% 90% at 85% 0%, rgba(47,128,237,0.12), transparent 55%),
        linear-gradient(165deg, #F4F7FB 0%, #E4ECF7 100%);
    color: var(--ink);
}

/* ---- Hero com banner de drone agrícola (texto continua legível) ---- */
.hero-banner {
    background:
        linear-gradient(150deg, rgba(244,247,251,0.96) 0%, rgba(244,247,251,0.82) 42%, rgba(18,42,74,0.5) 100%),
        url('https://static.xag.cn/img/products2025/p150max/p150max-header-phone.jpg?imageMogr2/format/webp');
    background-size: cover;
    background-position: center right;
    color: var(--ink);
}
@media (max-width: 768px) {
    .hero-banner {
        background:
            linear-gradient(180deg, rgba(244,247,251,0.93) 0%, rgba(244,247,251,0.85) 50%, rgba(18,42,74,0.55) 100%),
            url('https://static.xag.cn/img/products2025/p150max/p150max-header-phone.jpg?imageMogr2/format/webp');
        background-size: cover;
        background-position: center;
    }
}

/* ---- Chips de modelo (contexto claro) ---- */
.chip {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    border: 1.5px solid var(--line);
    color: var(--ink);
    background: var(--bone-2);
    border-radius: 999px;
    padding: 9px 18px;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.chip:hover { border-color: var(--signal); color: var(--signal-d); }
.chip.active { background: var(--signal); color: var(--ink); border-color: var(--signal); font-weight: 700; }

/* ---- Seção escura (vídeos) — azul profundo ---- */
.section-dark {
    background: var(--ink-2);
    background-image: radial-gradient(110% 80% at 90% 0%, rgba(47,128,237,0.18), transparent 50%);
    color: var(--bone);
}

/* ---- Playlist item ---- */
.video-item {
    border: 1px solid var(--line-d);
    border-left: 3px solid transparent;
    border-radius: 16px;
    transition: all .25s ease;
}
.video-item:hover { background: rgba(244,247,251,0.06); border-color: rgba(47,128,237,.5); }
.video-item.is-done {
    border-left: 3px solid var(--signal);
    background: rgba(47, 128, 237, 0.12);
}
.video-item.is-done .done-flag { display: inline-flex !important; }

/* ---- Accordion ---- */
.accordion-content { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.4,0,.2,1); }
.accordion-open .accordion-content { max-height: 1400px; }

/* ---- Scrollbar ---- */
.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: var(--signal); border-radius: 10px; }

/* ---- Carrossel de peças (calmo) ---- */
@keyframes scroll-slow { 0% { transform: translateX(0);} 100% { transform: translateX(-33.33%);} }
.animate-scroll-slow { display: flex; width: max-content; animation: scroll-slow 50s linear infinite; }
.animate-scroll-slow:hover { animation-play-state: paused; }

.card-peca {
    width: 190px; margin-right: 1.25rem; flex-shrink: 0;
    background: var(--bone-2); border: 1px solid var(--line);
    border-radius: 20px; padding: 1.25rem; text-align: center;
    transition: all .3s ease;
}
.card-peca:hover { border-color: var(--signal); transform: translateY(-4px); }

/* ---- Animações ---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px);} to { opacity: 1; transform: translateY(0);} }
.fade-up { animation: fadeUp .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeIn { from { opacity: 0;} to { opacity: 1;} }
.animate-fadeIn { animation: fadeIn .4s ease both; }
@keyframes blip { 0%,100% { opacity: 1;} 50% { opacity: .3;} }
.blip { animation: blip 1.6s ease-in-out infinite; }

/* ---- Netlify (legado) ---- */
#netlify-identity-widget .netlify-identity-menu { background-color: var(--ink) !important; color: #fff !important; }

/* ---- Widget de condições de voo ---- */
.voo-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.voo-bom    { color: #178045; } .voo-bom-bg    { background: rgba(31,157,85,.12); }
.voo-alerta { color: #B97A1B; } .voo-alerta-bg { background: rgba(224,153,46,.15); }
.voo-ruim   { color: #C03E20; } .voo-ruim-bg   { background: rgba(209,77,46,.12); }
.voo-metric { background: var(--bone); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }