/* ==========================================================================
   OpsyLab — core.css
   Variáveis de marca, reset, tipografia base, acessibilidade, utilitários
   Carregar PRIMEIRO em toda página.
   ========================================================================== */

/* === Brand tokens === */
:root{
  --ink:#132349;        /* azul escuro */
  --ink-2:#0c1730;
  --ink-3:#1a2d5c;
  --teal:#2EA4A5;       /* azul claro / teal da órbita */
  --teal-soft:#7ac5c6;
  --orange:#E58624;     /* laranja pontual */
  --paper:#F6F4EF;      /* warm off-white */
  --paper-2:#EDEAE2;
  --line:#d9d5c9;
  --muted:#5e6377;
  --white:#ffffff;

  /* responsive breakpoints (apenas referência — usar nos media queries) */
  --bp-sm: 640px;
  --bp-md: 960px;
  --bp-lg: 1280px;

  --header-h: 88px;
}

/* === Reset + base === */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
}
body{
  font-family:'Inter', system-ui, sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
  overflow-x:clip;            /* não cria contexto de scroll */
  min-width:320px;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}

/* Filhos flex/grid não devem extrapolar containers — bug clássico */
.nav,.hero-inner,.row,.f-grid,.section-head,.detail-grid,.cta .inner{min-width:0}

img,video,svg{max-width:100%; height:auto; display:block}

a{color:inherit; text-decoration:none}

h1,h2,h3,h4{
  font-family:'Inter',sans-serif; font-weight:700;
  letter-spacing:-.02em; margin:0;
  text-wrap:balance;
}
p{text-wrap:pretty; overflow-wrap:break-word; hyphens:auto}

/* === Acessibilidade === */
/* Foco apenas em navegação por teclado, com outline forte */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:4px;
}
.btn:focus-visible{outline-offset:4px}

/* Skip link — pular para conteúdo principal */
.skip-link{
  position:absolute; top:-100px; left:16px; z-index:200;
  padding:12px 20px; background:var(--ink); color:#fff;
  font-weight:600; font-size:14px; border-radius:6px;
  transition:top .2s;
}
.skip-link:focus-visible{top:16px; outline-offset:4px}

/* Reduced motion — desabilita animações para quem precisa */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* === Wrap (container responsivo com safe-area) === */
.wrap{
  max-width:1280px;
  margin:0 auto;
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}
@media (min-width:640px){
  .wrap{
    padding-left:max(28px, env(safe-area-inset-left));
    padding-right:max(28px, env(safe-area-inset-right));
  }
}
@media (min-width:960px){
  .wrap{
    padding-left:max(32px, env(safe-area-inset-left));
    padding-right:max(32px, env(safe-area-inset-right));
  }
}

/* === Utilitários === */
.mono{font-family:'JetBrains Mono', ui-monospace, monospace; letter-spacing:-.01em}
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:20px; height:1px; background:currentColor; display:inline-block;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* === Inputs: 16px no mobile para evitar zoom no iOS === */
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],
input[type="number"],input[type="url"],textarea,select{
  font-size:16px;
  font-family:inherit;
}
@media (min-width:640px){
  input[type="text"],input[type="email"],input[type="tel"],input[type="search"],
  input[type="number"],input[type="url"],textarea,select{font-size:15px}
}