/**
 * Botize Overrides CSS
 * Loaded AFTER styles.css to override animejs.com defaults.
 * No modifications to styles.css — all customizations here.
 */

/* ============================================================
   HEADER — Logo sizing and sponsor button
   ============================================================ */

/* Header logo adjustments */
#site-header .heading-logo img {
  max-height: 40px;
  width: auto;
}

/* Sponsor button (heart) → "Agendar" CTA style */
.sponsor-button.main-nav-link {
  color: var(--currentColor, currentColor);
}

/* ============================================================
   HERO — Anna button phone icon + city label
   ============================================================ */

/* Hide the copy button injected by scripts.js */
#anna-contact .copy-button,
#anna-contact .npm-copy,
#anna-contact button[class*="copy"] {
  display: none !important;
}

/* Phone icon pseudo-element on Anna button */
#anna-contact {
  position: relative;
  padding-right: 36px !important;
  cursor: pointer;
}

#anna-contact::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8a9a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .5;
  pointer-events: none;
}

#anna-contact:hover::after {
  opacity: .8;
}

#anna-contact code {
  display: flex;
  align-items: center;
  gap: .4em;
}

/* City label subdued styling */
#user-city {
  opacity: .45;
  font-size: .85em;
}

/* ============================================================
   SPONSORS → CUIDADO HUMANIZADO
   ============================================================ */

/* Hide funding level box and sponsor-related English texts */
.funding-level-box,
.company-sponsors-list,
[class*="sponsor"] .text-xxs,
sponsor-button + .funding-level-box {
  display: none !important;
}

/* Humanized care section values grid */
.botize-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}

.botize-values li {
  text-align: center;
  padding: 1.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.botize-values li strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
  .botize-values {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ============================================================
   CASES SECTION
   ============================================================ */

.botize-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}

.botize-case-card {
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.botize-case-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.botize-case-tag--atendimento {
  background: rgba(79, 195, 247, 0.15);
  color: #4fc3f7;
}

.botize-case-tag--bi {
  background: rgba(129, 199, 132, 0.15);
  color: #81c784;
}

.botize-case-city {
  font-size: 0.85rem;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.botize-case-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.botize-case-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .botize-cases-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   GET STARTED → CTA SECTION
   ============================================================ */

/* CTA links grid — reuse existing links-list-grid but Botize content */
#get-started .links-list-grid {
  max-width: 600px;
}

/* ============================================================
   FOOTER — Botize branding
   ============================================================ */

/* Footer logo sizing */
#site-footer .footer-logo img {
  max-height: 48px;
  width: auto;
}

/* Botize institutional info block */
.botize-footer-info {
  font-size: 0.85rem;
  opacity: 0.6;
  line-height: 1.6;
  margin-top: 0.5rem;
}

/* ============================================================
   MODULES SECTION — ensure Botize titles display properly
   ============================================================ */

/* No special overrides needed — titles changed directly in HTML */

/* (toolbox z-index overrides removed — using original structure) */

/* ============================================================
   TRON DESIGN SYSTEM — secondary pages (.tron-page scope)
   ============================================================
   Escopo: todas as regras abaixo são scoped em `.tron-page` (classe
   aplicada ao <body> das 10 páginas secundárias). A home do site
   (clone animejs, index.html) NÃO recebe essa classe e portanto
   não é afetada por nenhuma regra desta seção.

   Contrato com tron-bg.js:
   - body.tron-page DEVE permanecer transparente (sem background)
   - nenhum filter/backdrop-filter em <main> (mata perf WebGL)
   - canvas #tron-bg mantém z-index: 0 (definido inline nas páginas);
     conteúdo fica em .page-content com z-index: 1
   ============================================================ */

/* ---- Design tokens (scoped) ------------------------------- */
.tron-page {
  /* Paleta (alinhada ao canvas #00d4ff de tron-bg.js) */
  --tron-cyan: #00d4ff;
  --tron-cyan-soft: rgba(0, 212, 255, 0.6);
  --tron-cyan-glow: rgba(0, 212, 255, 0.35);
  --tron-cyan-faint: rgba(0, 212, 255, 0.15);
  --tron-cyan-trace: rgba(0, 212, 255, 0.08);
  --tron-mint: #00ffd4;
  --tron-mint-glow: rgba(0, 255, 212, 0.28);
  --tron-graphite: #7a8a9a;

  /* Superfícies (baixa opacidade — canvas precisa atravessar) */
  --tron-bg-card: rgba(5, 15, 25, 0.4);
  --tron-bg-card-hover: rgba(8, 22, 38, 0.55);
  --tron-border-subtle: rgba(0, 212, 255, 0.15);
  --tron-border-strong: rgba(0, 212, 255, 0.35);

  /* Famílias tipográficas (carregadas via fonts.css) */
  --tron-font-mono: 'Mono', 'BerkeleyMono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --tron-font-display: 'DIN', 'DINish', 'Space Grotesk', system-ui, sans-serif;
  --tron-font-digital: 'Digital-7', 'Mono', monospace;

  /* Glows para text-shadow (reusáveis) */
  --tron-glow-sm: 0 0 8px rgba(0, 212, 255, 0.25);
  --tron-glow-md: 0 0 16px rgba(0, 212, 255, 0.30);
  --tron-glow-lg: 0 0 28px rgba(0, 212, 255, 0.40);

  /* Sombras de card (cyan sutil, sem bleed forte) */
  --tron-shadow-card: 0 1px 0 rgba(0, 212, 255, 0.05) inset,
                      0 8px 24px rgba(0, 0, 0, 0.35),
                      0 0 0 1px rgba(0, 212, 255, 0.03);
  --tron-shadow-card-hover: 0 1px 0 rgba(0, 212, 255, 0.12) inset,
                            0 12px 36px rgba(0, 0, 0, 0.45),
                            0 0 24px rgba(0, 212, 255, 0.12);

  /* Durações (transition) */
  --tron-dur-fast: 200ms;
  --tron-dur-mid: 300ms;
  --tron-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Body: NÃO aplicar background (canvas precisa aparecer) */
.tron-page {
  font-feature-settings: "ss01", "tnum", "cv11";
}

/* ---- Tipografia scoped --------------------------------------
   Só aplica quando o elemento está dentro de .tron-page.
   Respeita estilos inline existentes nas páginas (cascata natural).
*/
.tron-page h1,
.tron-page h2,
.tron-page h3 {
  font-family: var(--tron-font-display);
  letter-spacing: -0.01em;
  font-feature-settings: "ss01", "kern";
}

.tron-page h1 {
  letter-spacing: -0.02em;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}

.tron-page h2 {
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.10);
}

/* Mono reservado para código e elementos técnicos */
.tron-page code,
.tron-page pre,
.tron-page kbd,
.tron-page samp,
.tron-page .tag,
.tron-page .badge,
.tron-page .case-tag {
  font-family: var(--tron-font-mono);
  font-feature-settings: "ss01", "zero", "tnum";
}

/* ---- Utilidades tipográficas ---- */

/* Números grandes / estatísticas técnicas em BerkeleyMono */
.tron-page .tron-stat,
.tron-page .tron-number {
  font-family: var(--tron-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}

/* HUD digital (Digital-7) — para contadores, relógio, métricas display */
.tron-page .tron-digital {
  font-family: var(--tron-font-digital);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--tron-cyan);
  text-shadow: var(--tron-glow-md);
}

/* Realce pontual — NÃO aplicar em massa */
.tron-page .tron-accent {
  color: var(--tron-cyan);
  text-shadow: var(--tron-glow-sm);
}

.tron-page .tron-accent--mint {
  color: var(--tron-mint);
  text-shadow: 0 0 12px var(--tron-mint-glow);
}

.tron-page .tron-muted {
  color: var(--tron-graphite);
}

/* Texto "HUD" uppercase com tracking amplo (tags, labels) */
.tron-page .tron-label {
  font-family: var(--tron-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* ---- Cards / containers ------------------------------------ */
.tron-page .tron-card {
  position: relative;
  background: var(--tron-bg-card);
  border: 1px solid var(--tron-border-subtle);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--tron-shadow-card);
  transition: border-color var(--tron-dur-mid) var(--tron-ease),
              box-shadow var(--tron-dur-mid) var(--tron-ease),
              transform var(--tron-dur-mid) var(--tron-ease),
              background-color var(--tron-dur-mid) var(--tron-ease);
  contain: layout paint;
}

.tron-page .tron-card:hover {
  border-color: var(--tron-border-strong);
  background: var(--tron-bg-card-hover);
  box-shadow: var(--tron-shadow-card-hover);
  transform: translateY(-2px);
}

/* Variante "frame" — canto superior-esquerdo marcado (HUD) */
.tron-page .tron-card--frame::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 1px solid var(--tron-cyan);
  border-left: 1px solid var(--tron-cyan);
  border-top-left-radius: 12px;
  pointer-events: none;
}

.tron-page .tron-card--frame::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 18px;
  height: 18px;
  border-bottom: 1px solid var(--tron-cyan);
  border-right: 1px solid var(--tron-cyan);
  border-bottom-right-radius: 12px;
  pointer-events: none;
}

/* ---- Dividers (scan-line) ---------------------------------- */
.tron-page .tron-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 212, 255, 0.4) 50%,
    transparent 100%
  );
  border: 0;
  margin: 2rem 0;
}

.tron-page .tron-divider-vertical {
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 212, 255, 0.4) 50%,
    transparent 100%
  );
}

/* Scan-line animada — passe de luz periódico (opcional) */
.tron-page .tron-divider--animated {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 212, 255, 0.1) 40%,
    rgba(0, 212, 255, 0.8) 50%,
    rgba(0, 212, 255, 0.1) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: tron-scan 4s linear infinite;
}

@keyframes tron-scan {
  0%   { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* ---- Nav hover Tron ---------------------------------------- */
.tron-page .site-nav a,
.tron-page nav a {
  transition: color var(--tron-dur-fast) var(--tron-ease),
              text-shadow var(--tron-dur-fast) var(--tron-ease);
}

.tron-page .site-nav a:hover,
.tron-page nav a:hover {
  color: var(--tron-cyan);
  text-shadow: var(--tron-glow-sm);
}

.tron-page .site-nav a.active,
.tron-page nav a.active {
  color: var(--tron-cyan);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.35);
}

/* ---- Botões CTA Tron --------------------------------------- */
.tron-page .tron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.75rem;
  font-family: var(--tron-font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tron-cyan);
  background: transparent;
  border: 1px solid var(--tron-cyan);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--tron-dur-mid) var(--tron-ease),
              color var(--tron-dur-mid) var(--tron-ease),
              box-shadow var(--tron-dur-mid) var(--tron-ease),
              transform var(--tron-dur-mid) var(--tron-ease);
}

.tron-page .tron-btn:hover {
  background: rgba(0, 212, 255, 0.08);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.25),
              inset 0 0 12px rgba(0, 212, 255, 0.08);
  transform: translateY(-1px);
}

.tron-page .tron-btn--primary {
  background: var(--tron-cyan);
  color: #04121c;
  font-weight: 600;
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.35),
              0 0 0 1px rgba(0, 212, 255, 0.5);
}

.tron-page .tron-btn--primary:hover {
  background: #26e0ff;
  box-shadow: 0 0 36px rgba(0, 212, 255, 0.6),
              0 0 0 1px rgba(0, 212, 255, 0.9);
  transform: translateY(-1px);
}

.tron-page .tron-btn--ghost {
  border-color: var(--tron-border-subtle);
  color: var(--tron-graphite);
}

.tron-page .tron-btn--ghost:hover {
  border-color: var(--tron-cyan);
  color: var(--tron-cyan);
}

/* ---- Stats destacados (cases/) ----------------------------- */
.tron-page .tron-stat-block {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tron-page .tron-stat-value {
  font-family: var(--tron-font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
  color: var(--tron-cyan);
  text-shadow: 0 0 18px rgba(0, 212, 255, 0.25);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tron-page .tron-stat-label {
  font-family: var(--tron-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  opacity: 0.6;
}

/* ---- Grid de stats (linha com dividers verticais) ---------- */
.tron-page .tron-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem;
  padding: 1.5rem 0;
}

/* ---- Scroll reveal sutil (toggle via .is-visible) ---------- */
.tron-page .tron-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--tron-ease),
              transform 600ms var(--tron-ease);
  will-change: opacity, transform;
}

.tron-page .tron-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* ---- Hero helpers ------------------------------------------ */
.tron-page .tron-hero-tag {
  display: inline-block;
  font-family: var(--tron-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tron-cyan);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--tron-border-subtle);
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.04);
}

/* ---- Listas técnicas (feature list, HUD) ------------------- */
.tron-page .tron-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tron-page .tron-list li {
  position: relative;
  padding-left: 1.4rem;
  font-family: var(--tron-font-mono);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--tron-graphite);
}

.tron-page .tron-list li::before {
  content: '>';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tron-cyan);
  font-weight: 700;
  text-shadow: var(--tron-glow-sm);
}

/* ---- Acessibilidade / redução de movimento ---------------- */
@media (prefers-reduced-motion: reduce) {
  .tron-page .tron-card,
  .tron-page .tron-btn,
  .tron-page .tron-reveal,
  .tron-page .site-nav a,
  .tron-page nav a {
    transition: none !important;
    animation: none !important;
  }

  .tron-page .tron-card:hover {
    transform: none;
  }

  .tron-page .tron-divider--animated {
    animation: none;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(0, 212, 255, 0.4),
      transparent
    );
  }

  .tron-page .tron-reveal {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* ============================================================
   BRAND TEXT — Cabecalho de todas as paginas
   No lugar da logo pequena: "Botize Artificial Intelligence"
   em dourado, fonte display. Aplica-se igualmente a home
   (animejs clone) e as internas tron-page.
   ============================================================ */

/* Token de cor da marca (dourado da paleta animejs Botize) */
:root {
  --brand-gold: #F5C638;
  --brand-gold-hover: #FFD75E;
  --brand-silver: #C0C0C0;
}

.botize-brand-text {
  display: inline-block;
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.015em;
  color: var(--brand-gold);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, opacity 0.2s ease;
  line-height: 1.1;
}

.botize-brand-text:hover {
  color: var(--brand-gold-hover);
}

/* Esconde img de logo no header quando convivendo com brand-text */
.site-header .logo a img,
#site-header .header-logo a img {
  display: none;
}

/* Layout do header das internas (.site-header) sem img */
.site-header .logo {
  display: flex;
  align-items: center;
}

/* Versao maior do brand-text no header da HOME (h1) */
#site-header .header-logo .botize-brand-text {
  font-size: 1.1875rem;
  letter-spacing: 0.02em;
}

/* Mobile: reduz fonte para nao colidir com hamburger */
@media (max-width: 640px) {
  .botize-brand-text {
    font-size: 0.9375rem;
  }
  #site-header .header-logo .botize-brand-text {
    font-size: 1rem;
  }
}

/* ============================================================
   FOOTER CREDIT — Crédito Julian Garnier no rodapé das internas
   A home (animejs) ja tem o credito embutido em .footer-copyright;
   esta regra adiciona em paginas tron-page que tem .site-footer.
   ============================================================ */

.site-footer .footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.site-footer .footer-credit {
  font-size: 0.75rem;
  color: var(--brand-silver);
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.site-footer .footer-credit a {
  color: var(--brand-silver);
  text-decoration: none;
  border-bottom: 1px dotted rgba(192, 192, 192, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer .footer-credit a:hover {
  color: var(--brand-gold);
  border-bottom-color: rgba(245, 198, 56, 0.55);
}

/* Reforço visual do credit na home (animejs original) */
#site-footer .footer-copyright {
  color: var(--brand-silver);
}

#site-footer .footer-copyright a {
  color: var(--brand-silver);
  border-bottom: 1px dotted rgba(192, 192, 192, 0.4);
  text-decoration: none;
  transition: color 0.2s ease;
}

#site-footer .footer-copyright a:hover {
  color: var(--brand-gold);
}