/* =============================================================================
   JATAÍ LANDING — layout 2 colunas (mais denso em informação, adequado
   ao público B2B), motor leve sem Elementor. Vidro simulado (gradiente +
   brilho de borda) em vez de backdrop-filter real.
============================================================================= */

:root {
  --jl-bg: #04080f;
  --jl-navy: #0b1830;
  --jl-accent-a: #8fb4ff;
  --jl-accent-b: #b98bff;
  --jl-text: #f3f6fb;
  --jl-text-dim: rgba(243, 246, 251, 0.75);
  --jl-text-faint: rgba(243, 246, 251, 0.45);
  --jl-radius: 22px;
}

.jl-page { background: var(--jl-bg); color: var(--jl-text); font-family: "Inter", sans-serif; }
.jl-page * { box-sizing: border-box; }

.jl-statement {
  font-family: "Michroma", sans-serif;
  font-weight: 400;
  line-height: 1.35;
  font-size: clamp(22px, 2.6vw, 36px);
  max-width: 900px;
  margin: 0 0 4vh;
  text-align: center;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
.jl-statement--center { max-width: 720px; font-size: clamp(24px, 3vw, 40px); margin-bottom: 0; }
.jl-row-scene__title { margin-bottom: 4.5vh; }

.jl-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jl-accent-a);
  margin-bottom: 14px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.8);
}
.jl-kicker--center { justify-content: center; margin-bottom: 22px; }
.jl-kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--jl-accent-a), var(--jl-accent-b));
  box-shadow: 0 0 12px 2px rgba(143, 180, 255, 0.6);
}
.jl-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "Michroma", sans-serif; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--jl-accent-a); margin-bottom: 16px;
}
.jl-eyebrow::after { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, var(--jl-accent-a), transparent); }

/* -----------------------------------------------------------------------
   VIDRO
----------------------------------------------------------------------- */
.jl-glass {
  position: relative;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0.05) 100%),
    linear-gradient(180deg, rgba(20, 42, 78, 0.80), rgba(9, 20, 40, 0.90));
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--jl-radius);
  box-shadow:
    0 30px 70px -25px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(143, 180, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.jl-glass::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.07) 42%, rgba(255, 255, 255, 0.02) 58%, transparent 75%);
  pointer-events: none;
}
.jl-glass::after {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  pointer-events: none;
}

/* -----------------------------------------------------------------------
   PALCO
----------------------------------------------------------------------- */
.jl-stage { position: relative; height: 100vh; overflow: hidden; background: #000; contain: layout paint; }
.jl-stage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.jl-sticky-wrapper { position: relative; }

.jl-scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  padding: 5vh 6vw;
  text-align: center;
}

/* -----------------------------------------------------------------------
   Bem-vindo / Logo
----------------------------------------------------------------------- */
.jl-welcome__badge {
  width: 96px; height: 96px; border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.jl-welcome__badge img { width: 56px; height: 56px; object-fit: contain; }
.jl-logo__img { width: min(340px, 38vw); filter: drop-shadow(0 10px 40px rgba(0,0,0,0.45)); }

/* -----------------------------------------------------------------------
   Cenas de 2 colunas (Sobre / Nossa Forma) — título em cima, card+visual
   lado a lado, tudo visível junto (como no design original).
----------------------------------------------------------------------- */
.jl-row-scene { justify-content: flex-start; padding-top: 7vh; }
.jl-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  width: 100%;
  max-width: 1180px;
  align-items: stretch;
  text-align: left;
}
.jl-row__col { min-width: 0; }

.jl-panel { padding: 38px 36px; }
.jl-panel p { color: var(--jl-text-dim); font-size: 14.5px; line-height: 1.7; margin: 0 0 14px; }
.jl-panel p:last-child { margin-bottom: 0; }

/* Duas imagens empilhadas (coluna direita do "Sobre") */
.jl-stack { display: flex; flex-direction: column; gap: 16px; }
.jl-stack__frame { margin: 0; padding: 8px 8px 0; display: flex; flex-direction: column; flex: 1; }
.jl-stack__frame img { display: block; width: 100%; height: 100%; min-height: 140px; object-fit: cover; border-radius: calc(var(--jl-radius) - 8px); flex: 1; }
.jl-stack__frame figcaption {
  padding: 10px 4px 12px; text-align: center;
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 12.5px;
  color: var(--jl-text-dim);
}

/* Lista de "Nossa Forma" (coluna direita) — linha conectora simples via
   borda esquerda dos itens, sem pseudo-elemento solto que pode vazar. */
.jl-timeline { display: flex; flex-direction: column; gap: 18px; }
.jl-timeline__row { display: flex; gap: 16px; align-items: flex-start; }
.jl-timeline__icon {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50% !important;
  overflow: hidden !important; padding: 4px;
}
.jl-timeline__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% !important; display: block; }
.jl-timeline__text h3 { font-family: "Inter", sans-serif; font-weight: 700; font-size: 14.5px; margin: 4px 0 3px; color: var(--jl-text); }
.jl-timeline__text p { font-size: 12.5px; color: var(--jl-text-dim); margin: 0; line-height: 1.45; }

/* -----------------------------------------------------------------------
   Telhas de Serviços
----------------------------------------------------------------------- */
.jl-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; width: 100%; max-width: 1380px; }
.jl-tile {
  position: relative; border-radius: var(--jl-radius); overflow: hidden;
  min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 25px 55px -25px rgba(0, 0, 0, 0.8);
}
.jl-tile__img { position: absolute; inset: 0; }
.jl-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jl-tile__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,8,15,0) 30%, rgba(4,8,15,0.55) 65%, rgba(4,8,15,0.92) 100%);
}
.jl-tile__label {
  position: relative; z-index: 1; padding: 16px 16px 18px; text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(8, 14, 26, 0.35), rgba(4, 8, 15, 0.75));
}
.jl-tile__label h3 { font-family: "Inter", sans-serif; font-weight: 700; font-size: 14px; margin: 0 0 5px; line-height: 1.3; }
.jl-tile__label p { font-size: 11.5px; color: var(--jl-text-dim); margin: 0; line-height: 1.4; }

/* -----------------------------------------------------------------------
   CTA
----------------------------------------------------------------------- */
.jl-cta { gap: 28px; }
.jl-cta__button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06);
  color: var(--jl-text); font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px;
  text-decoration: none; transition: transform 0.25s ease, background 0.25s ease;
}
.jl-cta__button:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }

/* -----------------------------------------------------------------------
   RODAPÉ
----------------------------------------------------------------------- */
.jl-footer { position: relative; background: var(--jl-navy); padding: 8vh 8vw 0; overflow: hidden; }
.jl-footer__bg { position: absolute; inset: 0; opacity: 0.25; z-index: 0; }
.jl-footer__bg img { width: 100%; height: 100%; object-fit: cover; }
.jl-footer__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1200px; margin: 0 auto; padding-bottom: 6vh; }
.jl-footer__brand { display: flex; flex-direction: column; gap: 28px; }
.jl-footer__logo { width: min(280px, 60%); }
.jl-footer__social { display: flex; gap: 14px; }
.jl-footer__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; color: var(--jl-text); transition: background 0.2s ease; }
.jl-footer__social a:hover { background: rgba(255,255,255,0.1); }
.jl-footer__form h3 { font-family: "Inter", sans-serif; font-weight: 600; font-size: 22px; margin: 0 0 20px; }
.jl-footer__field { margin-bottom: 14px; }
.jl-footer__field input, .jl-footer__field textarea { width: 100%; padding: 14px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); color: var(--jl-text); font-family: "Inter", sans-serif; font-size: 14px; outline: none; }
.jl-footer__field textarea { border-radius: 20px; resize: vertical; min-height: 100px; }
.jl-footer__field input::placeholder, .jl-footer__field textarea::placeholder { color: var(--jl-text-faint); }
.jl-footer__submit { width: 100%; padding: 15px; border-radius: 999px; border: none; background: linear-gradient(90deg, var(--jl-accent-a), var(--jl-accent-b)); color: #051022; font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: opacity 0.2s ease; }
.jl-footer__submit:hover { opacity: 0.9; }
.jl-footer__submit:disabled { opacity: 0.6; cursor: default; }
.jl-footer__form-status { font-size: 13px; margin-top: 10px; min-height: 18px; }
.jl-footer__form-status[data-state="success"] { color: #7ee787; }
.jl-footer__form-status[data-state="error"] { color: #ff8080; }
.jl-footer__bar { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--jl-text-faint); }
.jl-footer__bee { width: 20px; height: 20px; }

/* =============================================================================
   PRELOADER
============================================================================= */
#jl-preloader { position: fixed; inset: 0; z-index: 999999; background: var(--jl-bg); display: flex; align-items: center; justify-content: center; transition: opacity 0.8s ease, visibility 0.8s ease; }
#jl-preloader.jl-preloader--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#jl-preloader .jl-preloader__inner { text-align: center; }
#jl-preloader .jl-preloader__brand { font-family: "Michroma", sans-serif; font-size: clamp(1rem, 3vw, 1.3rem); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 1.4rem; }
#jl-preloader .jl-preloader__percent { font-family: "Inter", sans-serif; font-weight: 600; font-size: clamp(2.4rem, 8vw, 4.2rem); color: #fff; }
#jl-preloader .jl-preloader__bar { width: min(240px, 60vw); height: 3px; background: rgba(255,255,255,0.15); border-radius: 999px; overflow: hidden; margin: 1.4rem auto 0; }
#jl-preloader .jl-preloader__bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--jl-accent-a), var(--jl-accent-b)); border-radius: 999px; transition: width 0.2s ease-out; }
#jl-preloader .jl-preloader__label { font-family: "Inter", sans-serif; font-size: clamp(0.75rem, 2vw, 0.9rem); color: rgba(255,255,255,0.5); margin-top: 0.9rem; }
#jl-preloader.jl-preloader--ready { cursor: pointer; }
#jl-preloader.jl-preloader--ready .jl-preloader__percent, #jl-preloader.jl-preloader--ready .jl-preloader__bar { opacity: 0; }
#jl-preloader.jl-preloader--ready .jl-preloader__label { color: #fff; font-size: clamp(1rem, 3vw, 1.2rem); font-weight: 500; animation: jlPulse 1.6s ease-in-out infinite; }
@keyframes jlPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

body:not(.jl-loaded):not(.elementor-editor-active) { overflow: hidden !important; }

/* =============================================================================
   MOBILE — colunas viram empilhadas
============================================================================= */
@media (max-width: 768px) {
  .jl-scene { padding: 4vh 5vw; }
  .jl-statement { font-size: clamp(18px, 5.2vw, 24px); }
  .jl-row { grid-template-columns: 1fr; gap: 20px; max-width: 92vw; }
  .jl-panel { padding: 26px 24px; }
  .jl-panel p { font-size: 13.5px; }
  .jl-stack { flex-direction: row; }
  .jl-timeline__row { gap: 12px; }
  .jl-timeline__icon { width: 44px; height: 44px; }
  .jl-tiles { grid-template-columns: 1fr; max-width: 82vw; gap: 12px; }
  .jl-tile { min-height: 220px; }
  .jl-footer__inner { grid-template-columns: 1fr; gap: 40px; }
  .jl-footer__logo { width: 220px; }
}