/* =====================================================================
   Base — reset, elementos globais, keyframes e utilitários de layout.
   ===================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--gc-ancora-topo);
  scrollbar-width: thin;
  scrollbar-color: var(--gc-verde) var(--gc-fundo);
}

body {
  margin: 0;
  background: var(--gc-fundo);
  color: var(--gc-txt-claro);
  font-family: var(--gc-fonte-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--gc-verde);
  text-decoration: none;
}

a:hover {
  color: var(--gc-verde-hover);
}

h1,
h2,
h3 {
  font-family: var(--gc-fonte-titulo);
  font-weight: 700;
  margin: 0;
}

p {
  margin: 0;
}

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

input,
textarea,
select,
button {
  font-family: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: rgba(var(--gc-verde-rgb), .3);
  color: var(--gc-branco);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--gc-fundo);
}

::-webkit-scrollbar-thumb {
  background: var(--gc-verde);
  border-radius: 6px;
}

/* --- casca da página ---------------------------------------------- */

/* clip (e não hidden) — com hidden as abas sticky de #segmentos param de colar. */
.gc-site {
  background: var(--gc-fundo);
  color: var(--gc-txt-claro);
  overflow-x: clip;
}

.gc-secao {
  padding: var(--gc-secao-y) var(--gc-secao-x);
}

.gc-secao--clara {
  background: var(--gc-claro);
  color: var(--gc-txt-corpo);
}

.gc-secao--branca {
  background: var(--gc-branco);
  color: var(--gc-txt-corpo);
}

.gc-secao--escura {
  background: var(--gc-escuro);
  color: var(--gc-txt-claro);
}

.gc-secao--nevoa {
  background: var(--gc-nevoa);
  color: var(--gc-txt-corpo);
}

.gc-container {
  max-width: var(--gc-container);
  margin: 0 auto;
}

.gc-container--relativo {
  position: relative;
}

/* --- utilitários --------------------------------------------------- */

/* Variantes que convivem no DOM (aba de segmento, estado do formulário,
   overlay de zoom): o app.js só liga e desliga esta classe, sem recriar a
   árvore — assim as animações contínuas da página não reiniciam. */
.is-oculto {
  display: none !important;
}

.gc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- ícones inline (SVG injetado pelo app.js) --------------------- */

.gc-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  color: inherit;
}

.gc-ico > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- keyframes ---------------------------------------------------- */

@keyframes gcFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes gcSpin {
  to { transform: rotate(360deg); }
}

@keyframes gcPulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.06); }
}

@keyframes gcDash {
  to { background-position: 200% 0; }
}

@keyframes gcDashV {
  to { background-position: 0 200%; }
}

@keyframes gcMarquee {
  to { transform: translateX(calc(-100% / var(--gc-marquee-copias))); }
}

@keyframes gcBar {
  0%, 100% { transform: scaleY(.55); }
  50% { transform: scaleY(1); }
}

@keyframes gcEntrada {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

/* --- acessibilidade: movimento reduzido -------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}