/* =============================================================
   GNCC USP  ·  base.css
   Variaveis da marca, reset, tipografia, botoes e formularios.
   Paleta e fontes seguem o manual de identidade visual do GNCC.
   ============================================================= */

:root{
  /* ---- cores do manual ---- */
  --navy:#2A2C6C;          /* principal */
  --navy-deep:#1E2050;     /* escurecida, para hover e rodape */
  --green:#98CC41;         /* secundaria */
  --green-pale:#D5E8AA;    /* secundaria clara */
  --mist:#C5C8D9;          /* complementar, bordas */
  --orange:#F68028;        /* complementar, uso pontual */

  /* ---- derivadas, so para superficie e texto ---- */
  --tint:#F2F3F8;          /* fundo de secao alternada */
  --paper:#FFFFFF;
  --ink:#1B1D3A;           /* texto corrido */
  --ink-soft:#4A4D72;      /* texto secundario */
  --ink-mute:#6B6E92;      /* legendas */

  /* ---- tipografia ----
     O manual pede Avenir Next e Baskerville. Avenir Next e licenciada e nao tem
     versao web gratuita. Mulish e Libre Baskerville sao os substitutos usados aqui.
     Se o GNCC tiver a licenca web da Avenir Next, basta trocar a linha abaixo. */
  --sans:"Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --serif:"Libre Baskerville", Georgia, "Times New Roman", serif;

  /* ---- medidas ---- */
  --wrap:1180px;
  --gut:clamp(20px, 5vw, 64px);
  --side:230px;            /* coluna do rotulo lateral */
  --side-gap:clamp(20px, 4vw, 56px);
  --sec-pad:clamp(56px, 7vw, 96px);
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--navy)}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--navy);
  line-height:1.2;
  letter-spacing:-.008em;
  margin:0 0 16px;
}
h1{font-size:clamp(31px, 4.2vw, 52px);line-height:1.16}
h2{font-size:clamp(24px, 2.9vw, 36px)}
h3{font-size:clamp(19px, 2vw, 23px)}
h4{font-size:18px}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.lede{
  font-size:clamp(16.5px, 1.5vw, 19px);
  color:var(--ink-soft);
  max-width:58ch;
}

.prose p{max-width:70ch;color:var(--ink-soft)}

/* rotulo lateral, regra verde no topo */
.side-label{
  font-family:var(--sans);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--navy);
  border-top:3px solid var(--green);
  padding-top:10px;
  margin:0;
}

/* linha de olho, tracinho verde antes do texto */
.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--navy);
  margin:0 0 16px;
}
.eyebrow::before{
  content:"";
  display:block;
  width:26px;
  height:3px;
  background:var(--green);
  flex:none;
}

.h-small{
  font-family:var(--sans);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--navy);
  border-top:3px solid var(--green);
  padding-top:10px;
  margin:0 0 26px;
}

.note{
  font-size:14.5px;
  color:var(--ink-mute);
  border-left:3px solid var(--mist);
  padding-left:16px;
  margin:24px 0 0;
}
.note-block{margin:0 0 40px}
.note-inline{font-size:13px;color:var(--ink-mute)}

/* ------------------------------------------------------------- botoes */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  padding:14px 26px;
  border:0;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-deep)}
.btn-line{
  background:transparent;
  color:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--navy);
  padding:12.5px 24.5px;
}
.btn-line:hover{background:var(--navy);color:#fff}
.btn-green{background:var(--green);color:var(--navy-deep)}
.btn-green:hover{background:#8abf35}
.btn-wpp{background:var(--green);color:var(--navy-deep);font-weight:800}
.btn-wpp:hover{background:#8abf35}
.btn-small{font-size:14px;padding:10px 18px}
.btn-line.btn-small{padding:8.5px 16.5px}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:26px 0 0}
.cta-row-end{margin-top:36px}

.link-go{
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:700;
  color:var(--navy);
}

/* ------------------------------------------------------------- formulario */
.field{display:block;margin:0 0 18px}
label{
  display:block;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--navy);
  margin-bottom:6px;
}
input,textarea,select{
  width:100%;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--mist);
  border-radius:var(--radius);
  padding:13px 14px;
}
textarea{resize:vertical;min-height:130px}
input:focus,textarea:focus,select:focus{
  outline:2px solid var(--green);
  outline-offset:1px;
  border-color:var(--navy);
}
.form-status{
  display:inline-block;
  margin-left:14px;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
}
.form-status.is-error{color:#B23A1F}

/* ------------------------------------------------------------- acessibilidade */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--navy);
  color:#fff;
  padding:12px 18px;
  z-index:100;
  font-weight:700;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--green);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}