/* ============================================================
   AGIL — extras.css  (premium FX layer · v3 · pra agil-tema)
   Carregue DEPOIS do style.css principal. Compatível com classes ag-*
   Brandbook: #111D58 navy · #9FB1D4 sky · #C8CEC6 sage · #272727 ink
   ============================================================ */

:root {
  --ag-navy:  #111D58;
  --ag-deep:  #0B1440;
  --ag-sky:   #9FB1D4;
  --ag-sage:  #B8C4B0;
  --ag-coral: #EC6255;

  --ag-blur:      blur(22px) saturate(170%);
  --ag-blur-soft: blur(12px) saturate(140%);
  --ag-ease:      cubic-bezier(.2,.7,.2,1);
  --ag-ease-out:  cubic-bezier(.16,1,.3,1);

  --mx: 50%;
  --my: 50%;
}
@property --ag-angle {
  syntax: "<angle>"; inherits: false; initial-value: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

::selection { background: rgba(159,177,212,.32); color: #0a1140; }
:focus-visible { outline: 2px solid rgba(159,177,212,.85); outline-offset: 3px; border-radius: 4px; }
html { scroll-padding-top: 90px; }

/* ----------------------------------------------------------
   1. Scroll progress bar
   ---------------------------------------------------------- */
.ag-scroll-progress {
  position: fixed; top: 0; left: 0;
  z-index: 9999;
  height: 2px;
  width: var(--ag-progress, 0%);
  background: linear-gradient(90deg, #9fb1d4 0%, #c4d4ec 50%, #ec6255 100%);
  box-shadow: 0 0 16px rgba(159,177,212,.6);
  transition: width .12s linear;
  pointer-events: none;
}

/* ----------------------------------------------------------
   2. Header — logo branca + lang-switcher refinado
   ---------------------------------------------------------- */
.agil-header {
  border-bottom: 1px solid rgba(159,177,212,.14) !important;
  transition:
    background .35s var(--ag-ease),
    box-shadow .35s var(--ag-ease),
    border-color .35s var(--ag-ease) !important;
}
.agil-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159,177,212,.45), transparent);
  opacity: 0;
  transition: opacity .35s var(--ag-ease);
  pointer-events: none;
}
.agil-header.scrolled::after { opacity: 1; }

/* Logo: imagem PNG/SVG do brandbook */
.agil-logo-img {
  height: 38px !important;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  /* Já vem branco no brandbook export — só garantir que fique branco no header escuro */
  filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(159,177,212,.18));
  transition: filter .35s var(--ag-ease), transform .35s var(--ag-ease);
}
.agil-logo:hover .agil-logo-img {
  transform: translateY(-1px);
  filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(159,177,212,.45));
}

/* Lang switcher — visual mais Apple, com bandeiras circulares */
.lang-switcher {
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}
.lang-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.78) !important;
  font-family: var(--font-mono) !important;
  font-size: .62rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  transition: color .25s var(--ag-ease), background .25s var(--ag-ease), transform .25s var(--ag-ease);
}
.lang-btn img {
  width: 18px !important;
  height: 18px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.lang-btn:hover {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.lang-btn.active {
  background: linear-gradient(135deg, rgba(159,177,212,.35), rgba(196,212,236,.18)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(11,20,64,.45);
}
.lang-btn.active img { border-color: rgba(255,255,255,.85); }

/* Esconder marca d'água do Google Translate ainda mais agressivamente */
.goog-te-banner-frame, .skiptranslate, #google_translate_element,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .goog-tooltip, .goog-tooltip:hover,
.goog-text-highlight { display: none !important; box-shadow: none !important; background: none !important; }
body { top: 0 !important; }

/* Underline animado já está no theme — reforço gradiente */
.nav-links a::after {
  background: linear-gradient(90deg, var(--ag-sky), var(--ag-sage)) !important;
  height: 1px !important;
}

/* ----------------------------------------------------------
   3. Hero — aurora extra + raio diagonal + título refinado
   ---------------------------------------------------------- */
.ag-hero { isolation: isolate; }

/* Aurora animada por trás do vídeo (só visível enquanto o vídeo carrega) */
.ag-hero > .ag-aurora {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 36% at 22% 30%, rgba(159,177,212,.35), transparent 60%),
    radial-gradient(34% 30% at 80% 22%, rgba(196,212,236,.28), transparent 60%),
    radial-gradient(30% 28% at 70% 80%, rgba(236,98,85,.18), transparent 60%);
  filter: blur(40px) saturate(140%);
  animation: agAurora 28s linear infinite alternate;
  mix-blend-mode: screen;
}
@keyframes agAurora {
  0%   { transform: translate3d(0,0,0)     rotate(0deg); }
  50%  { transform: translate3d(-4%,3%,0)  rotate(8deg); }
  100% { transform: translate3d(3%,-2%,0)  rotate(-6deg); }
}

/* Raio luminoso diagonal sobre o hero */
.ag-hero > .ag-shine {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  width: 60vw; max-width: 800px;
  height: 2px;
  right: -8vw; top: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(-18deg);
  filter: blur(.4px);
  animation: agShine 7s ease-in-out infinite;
}
@keyframes agShine {
  0%, 100% { opacity: .25; transform: rotate(-18deg) translateX(0); }
  50%      { opacity: .85; transform: rotate(-18deg) translateX(-40px); }
}

/* Título do hero com text-wrap pra quebra elegante */
.ag-hero__title { text-wrap: balance; }
.ag-hero__title strong {
  background: linear-gradient(180deg, #ffffff 0%, #c4d4ec 90%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Stats do hero — pequeno hover */
.ag-stat { transition: background .3s var(--ag-ease); }
.ag-stat:hover { background: rgba(255,255,255,.04); }

/* ----------------------------------------------------------
   4. Cards (ag-card, ag-solucao, ag-case, ag-paraquem-item) — spotlight + tilt
   ---------------------------------------------------------- */
.ag-card,
.ag-solucao,
.ag-case,
.ag-paraquem-item,
.ag-numero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Spotlight que segue o cursor */
.ag-card::after,
.ag-case::after,
.ag-paraquem-item::after,
.ag-numero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--mx) var(--my),
              rgba(159,177,212,.16),
              transparent 50%);
  opacity: 0;
  transition: opacity .35s var(--ag-ease);
  pointer-events: none;
  z-index: 0;
}
.ag-card:hover::after,
.ag-case:hover::after,
.ag-paraquem-item:hover::after,
.ag-numero:hover::after { opacity: 1; }

.ag-card > *,
.ag-case > *,
.ag-paraquem-item > *,
.ag-numero > * { position: relative; z-index: 1; }

/* Borda gradiente sutil no hover dos cards de diferenciais */
.ag-card { transition: transform .35s var(--ag-ease-out), box-shadow .35s var(--ag-ease-out), background .35s var(--ag-ease-out); }
.ag-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(159,177,212,.55), rgba(184,196,176,.4), rgba(159,177,212,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ag-ease);
  pointer-events: none;
}
.ag-card:hover::before { opacity: 1; }

/* Solução: hover com indicador */
.ag-solucao { transition: background .3s var(--ag-ease), transform .3s var(--ag-ease); }
.ag-solucao:hover { transform: translateX(4px); }
.ag-solucao__num {
  transition: color .3s var(--ag-ease), transform .3s var(--ag-ease);
}
.ag-solucao:hover .ag-solucao__num {
  color: var(--ag-navy);
  transform: scale(1.06);
}

/* Cases: shimmer no accent line */
.ag-case__accent {
  background: linear-gradient(90deg, var(--ag-navy), var(--ag-sky), var(--ag-navy)) !important;
  background-size: 200% 100% !important;
  animation: agShimmerLine 4s linear infinite;
}
@keyframes agShimmerLine {
  to { background-position: 200% 0; }
}

/* ----------------------------------------------------------
   5. Botões — magnetic + shimmer
   ---------------------------------------------------------- */
.ag-btn { position: relative; overflow: hidden; will-change: transform; isolation: isolate; }

.ag-btn--white::after,
.ag-btn--navy::after,
.nav-cta::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left .8s var(--ag-ease);
  pointer-events: none;
}
.ag-btn--navy::after {
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
}
.ag-btn:hover::after,
.nav-cta:hover::after { left: 130%; }

.ag-btn--white:hover {
  box-shadow:
    0 4px 28px rgba(255,255,255,.35),
    0 0 0 1px rgba(255,255,255,.6) inset !important;
}
.ag-btn--outline:hover {
  background: rgba(255,255,255,.08) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 4px 24px rgba(159,177,212,.25) !important;
}

/* CTA do header com aro luminoso ao hover */
.nav-cta {
  position: relative;
  overflow: hidden;
  border-radius: 2px !important;
}
.nav-cta:hover {
  box-shadow: 0 4px 18px rgba(196,212,236,.4), 0 0 0 1px rgba(255,255,255,.45) inset !important;
}

/* ----------------------------------------------------------
   6. Bridge / CTA / Coverage — particles glow
   ---------------------------------------------------------- */
.ag-bridge::after,
.ag-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 80px 80px, 130px 130px;
  background-position: 0 0, 30px 40px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  opacity: .5;
  pointer-events: none;
}

.ag-bridge__text strong {
  background: linear-gradient(180deg, #ffffff, #c4d4ec 90%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ag-cta__title strong {
  background: linear-gradient(180deg, #ffffff, #c4d4ec);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Light-beam diagonal no CTA escuro */
.ag-cta__inner {
  position: relative !important;
  isolation: isolate;
}
.ag-cta__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 480px; height: 2px;
  right: -120px; top: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: rotate(-18deg);
  filter: blur(.4px);
  animation: agShine 7s ease-in-out infinite;
}

/* ----------------------------------------------------------
   7. Números (ag-numero) — count-up + shimmer já existem; reforça glow
   ---------------------------------------------------------- */
.ag-numero {
  transition: background .3s var(--ag-ease), transform .3s var(--ag-ease);
}
.ag-numero:hover {
  background: linear-gradient(180deg, rgba(159,177,212,.06), transparent 60%);
  transform: translateY(-3px);
}

/* ----------------------------------------------------------
   8. Photo split — moldura de vidro sobre a foto
   ---------------------------------------------------------- */
.ag-photo-split {
  position: relative;
  overflow: hidden;
}
.ag-photo-split__img {
  position: relative;
  filter: saturate(105%) contrast(102%);
}
.ag-photo-split__img::after {
  content: "";
  position: absolute;
  inset: 32px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 24px 60px rgba(11,20,64,.18) inset;
}

/* Quote refinada */
.ag-quote {
  position: relative;
  background: linear-gradient(135deg, rgba(159,177,212,.1), transparent);
  padding: 18px 22px !important;
  border-radius: 2px;
}
.ag-quote::before {
  content: "“";
  position: absolute;
  top: -8px; left: 14px;
  font-size: 3rem;
  line-height: 1;
  color: var(--ag-sage);
  opacity: .5;
  font-family: Georgia, serif;
}

/* ----------------------------------------------------------
   9. Fullphoto — overlay com grain leve
   ---------------------------------------------------------- */
.ag-fullphoto__overlay {
  background: linear-gradient(135deg, rgba(11,20,64,0.86) 0%, rgba(17,29,88,0.74) 60%, rgba(11,20,64,0.82) 100%) !important;
}
.ag-fullphoto__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
  pointer-events: none;
  opacity: .4;
}

/* ----------------------------------------------------------
  10. Marquee — máscara nas bordas pra fade-out elegante
   ---------------------------------------------------------- */
.ag-marquee-overflow {
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) !important;
}
.ag-marquee-item img {
  filter: none !important;
  opacity: 1 !important;
  transition: filter .4s var(--ag-ease), opacity .4s var(--ag-ease), transform .4s var(--ag-ease) !important;
}
.ag-marquee-item:hover img {
  filter: none !important;
  transform: scale(1.06);
}

.ag-case__logo img {
  filter: none !important;
  opacity: 1 !important;
}

/* ----------------------------------------------------------
  11. Inputs / Form — focus ring premium
   ---------------------------------------------------------- */
.ag-form { position: relative; isolation: isolate; }
.ag-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(159,177,212,.4), rgba(184,196,176,.25), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ag-field input,
.ag-field textarea,
.ag-field select { transition: border-color .25s var(--ag-ease), box-shadow .25s var(--ag-ease), background .25s var(--ag-ease) !important; }

/* ----------------------------------------------------------
  12. WhatsApp float — anel pulsante extra
   ---------------------------------------------------------- */
.ag-whatsapp { isolation: isolate; }
.ag-whatsapp::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid #25d366;
  opacity: .55;
  animation: agPing 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes agPing {
  0%   { transform: scale(.9);  opacity: .55; }
  80%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ----------------------------------------------------------
  13. Reveal (ag-fade) — opcional: slideUp suave
   ---------------------------------------------------------- */
.ag-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s var(--ag-ease-out), transform .85s var(--ag-ease-out);
}
.ag-fade-up.is-visible {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------
  14. Footer — gradiente sutil no topo
   ---------------------------------------------------------- */
.agil-footer {
  position: relative;
  background:
    linear-gradient(180deg, rgba(11,20,64,.95) 0%, rgba(28,28,30,1) 100%) !important;
}
.agil-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159,177,212,.4), transparent);
}
.footer-tag {
  transition: border-color .25s var(--ag-ease), color .25s var(--ag-ease);
}
.footer-tag:hover {
  border-color: rgba(159,177,212,.5) !important;
  color: rgba(255,255,255,.6) !important;
}

/* ----------------------------------------------------------
  15. Mobile — desliga blurs pesados
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .ag-card::after,
  .ag-case::after,
  .ag-paraquem-item::after,
  .ag-numero::after { display: none; }

  .ag-hero > .ag-shine,
  .ag-cta__inner::before { display: none !important; }

  .lang-btn span { display: none; }
  .lang-btn { padding: 6px !important; }
  .lang-switcher { padding: 3px; }
  .lang-btn img { width: 16px !important; height: 16px !important; }
}