/* =====================================================================
   Gurizada — reset, elementos e componentes de base
   ===================================================================== */

@layer reset, base, componentes, utilidades;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

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

  body {
    min-height: 100svh;
    font-family: var(--fonte-texto);
    font-size: var(--t-base);
    line-height: 1.65;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

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

  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  table { border-collapse: collapse; width: 100%; }

  :focus-visible {
    outline: 3px solid var(--gz-azul);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }

  ::selection {
    background: color-mix(in oklab, var(--gz-amarelo) 45%, transparent);
    color: var(--texto);
  }

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

@layer base {
  h1, h2, h3, h4, h5 {
    font-family: var(--fonte-marca);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-3xl); }
  h2 { font-size: var(--t-2xl); }
  h3 { font-size: var(--t-xl); }
  h4 { font-size: var(--t-lg); }

  p { text-wrap: pretty; }

  strong, b { font-weight: 700; }

  code, kbd, samp {
    font-family: var(--fonte-mono);
    font-size: .9em;
    background: var(--fundo-3);
    padding: .15em .4em;
    border-radius: var(--r-sm);
  }

  hr {
    border: none;
    border-top: 1px solid var(--borda);
    margin-block: var(--e-6);
  }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--fundo-2); }
  ::-webkit-scrollbar-thumb {
    background: var(--borda-forte);
    border-radius: var(--r-pill);
    border: 2px solid var(--fundo-2);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--texto-fraco); }
}

@layer componentes {
  /* ------------------------------------------------------------------
     MARCA
     ------------------------------------------------------------------ */
  .gz-marca {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--fonte-marca);
  }
  .gz-marca__icone { width: 2.5rem; height: 2.5rem; flex: none; }

  .gz-palavra {
    font-family: var(--fonte-marca);
    font-weight: 600;
    font-size: 1.65rem;
    letter-spacing: -0.03em;
    line-height: 1;
    display: inline-flex;
  }
  .gz-palavra span { display: inline-block; }
  .gz-palavra .l1 { color: var(--gz-azul); }
  .gz-palavra .l2 { color: var(--gz-verde); }
  .gz-palavra .l3 { color: var(--gz-roxo); }
  .gz-palavra .l4 { color: var(--gz-amarelo); }
  .gz-palavra .l5 { color: var(--gz-rosa); }
  .gz-palavra .l6 { color: var(--gz-azul); }
  .gz-palavra .l7 { color: var(--gz-grama); }
  .gz-palavra .l8 { color: var(--gz-amarelo); }

  /* ------------------------------------------------------------------
     BOTÕES — coloridos, arredondados, com sombra sólida que "afunda"
     ------------------------------------------------------------------ */
  .btn {
    --btn-cor: var(--gz-azul);
    --btn-fundo-sombra: var(--gz-azul-fundo);
    --btn-texto: #fff;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;

    padding: .8em 1.6em;
    min-height: 3rem;

    font-family: var(--fonte-marca);
    font-weight: 600;
    font-size: var(--t-base);
    letter-spacing: -0.01em;
    white-space: nowrap;

    color: var(--btn-texto);
    background: var(--btn-cor);
    border-radius: var(--r-pill);
    box-shadow: 0 4px 0 var(--btn-fundo-sombra), var(--sombra-md);

    transition:
      transform var(--rapido),
      box-shadow var(--rapido),
      background-color var(--rapido),
      filter var(--rapido);
    will-change: transform;
    user-select: none;
  }

  .btn:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--btn-fundo-sombra), var(--sombra-lg);
  }

  .btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--btn-fundo-sombra), var(--sombra-sm);
  }

  .btn[disabled], .btn[aria-disabled='true'] {
    opacity: .55;
    pointer-events: none;
    transform: none;
  }

  .btn--verde   { --btn-cor: var(--gz-verde);   --btn-fundo-sombra: var(--gz-verde-fundo); }
  .btn--roxo    { --btn-cor: var(--gz-roxo);    --btn-fundo-sombra: var(--gz-roxo-fundo); }
  .btn--rosa    { --btn-cor: var(--gz-rosa);    --btn-fundo-sombra: var(--gz-rosa-fundo); }
  .btn--amarelo { --btn-cor: var(--gz-amarelo); --btn-fundo-sombra: var(--gz-amarelo-fundo); --btn-texto: #3A2A00; }

  .btn--grande { font-size: var(--t-lg); padding: .95em 2em; min-height: 3.75rem; }
  .btn--pequeno { font-size: var(--t-sm); padding: .5em 1.1em; min-height: 2.25rem; }
  .btn--bloco  { width: 100%; }

  .btn--fantasma {
    color: var(--gz-azul);
    background: transparent;
    box-shadow: inset 0 0 0 2.5px currentColor;
  }
  .btn--fantasma:hover {
    background: var(--gz-azul-suave);
    box-shadow: inset 0 0 0 2.5px currentColor, var(--sombra-md);
  }
  .btn--fantasma:active { transform: translateY(1px); }

  .btn--suave {
    color: var(--gz-azul);
    background: var(--gz-azul-suave);
    box-shadow: none;
  }
  .btn--suave:hover { box-shadow: var(--sombra-md); }

  .btn--icone {
    padding: 0;
    width: 2.75rem;
    height: 2.75rem;
    min-height: 0;
    border-radius: var(--r-pill);
  }

  /* Brilho que atravessa o botão principal */
  .btn--brilho { overflow: hidden; isolation: isolate; }
  .btn--brilho::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / .38), transparent);
    transform: skewX(-18deg);
    animation: gz-brilho 3.6s var(--suave) infinite;
  }
  @keyframes gz-brilho {
    0%, 62% { left: -60%; }
    100%    { left: 130%; }
  }

  /* ------------------------------------------------------------------
     CARTÕES
     ------------------------------------------------------------------ */
  .cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-xl);
    padding: var(--e-5);
    box-shadow: var(--sombra-sm);
    transition: transform var(--normal), box-shadow var(--normal), border-color var(--normal);
  }
  .cartao--flutua:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-lg);
    border-color: var(--borda-forte);
  }

  /* ------------------------------------------------------------------
     ETIQUETAS
     ------------------------------------------------------------------ */
  .etiqueta {
    --etq-cor: var(--gz-azul);
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .3em .85em;
    font-family: var(--fonte-marca);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--etq-cor);
    background: color-mix(in oklab, var(--etq-cor) 14%, transparent);
    border-radius: var(--r-pill);
    white-space: nowrap;
  }
  .etiqueta--verde   { --etq-cor: var(--gz-verde); }
  .etiqueta--roxo    { --etq-cor: var(--gz-roxo); }
  .etiqueta--rosa    { --etq-cor: var(--gz-rosa); }
  .etiqueta--amarelo { --etq-cor: var(--gz-amarelo); }
  .etiqueta--cinza   { --etq-cor: var(--texto-fraco); }

  /* ------------------------------------------------------------------
     FORMULÁRIOS
     ------------------------------------------------------------------ */
  .campo { display: grid; gap: .4rem; }

  .campo__rotulo {
    font-family: var(--fonte-marca);
    font-weight: 500;
    font-size: var(--t-sm);
    color: var(--texto-suave);
  }

  .campo__entrada,
  .campo__area,
  .campo__selecao {
    width: 100%;
    padding: .8rem 1.05rem;
    font-size: var(--t-base);
    color: var(--texto);
    background: var(--superficie);
    border: 2px solid var(--borda);
    border-radius: var(--r-md);
    transition: border-color var(--rapido), box-shadow var(--rapido), background-color var(--rapido);
  }
  .campo__area { min-height: 7rem; resize: vertical; }

  .campo__entrada::placeholder,
  .campo__area::placeholder { color: var(--texto-fraco); }

  .campo__entrada:focus,
  .campo__area:focus,
  .campo__selecao:focus {
    outline: none;
    border-color: var(--gz-azul);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--gz-azul) 18%, transparent);
  }

  .campo--erro .campo__entrada,
  .campo--erro .campo__area { border-color: var(--gz-rosa); }

  .campo__ajuda { font-size: var(--t-xs); color: var(--texto-fraco); }
  .campo__erro  { font-size: var(--t-xs); color: var(--gz-rosa); font-weight: 600; }

  .campo__selecao {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8CA8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
    padding-right: 2.75rem;
  }

  /* ------------------------------------------------------------------
     AVATAR
     ------------------------------------------------------------------ */
  .avatar {
    --tam: 2.5rem;
    width: var(--tam);
    height: var(--tam);
    flex: none;
    display: grid;
    place-items: center;
    font-family: var(--fonte-marca);
    font-weight: 600;
    font-size: calc(var(--tam) * .38);
    color: #fff;
    background: var(--gz-azul);
    border-radius: var(--r-pill);
    overflow: hidden;
    box-shadow: 0 0 0 3px var(--superficie), 0 0 0 5px color-mix(in oklab, var(--gz-azul) 30%, transparent);
  }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .avatar--g { --tam: 4rem; }
  .avatar--p { --tam: 1.85rem; }

  /* ------------------------------------------------------------------
     AVISOS
     ------------------------------------------------------------------ */
  .aviso {
    --aviso-cor: var(--gz-azul);
    display: flex;
    gap: .75rem;
    padding: .9rem 1.1rem;
    background: color-mix(in oklab, var(--aviso-cor) 10%, var(--superficie));
    border-left: 4px solid var(--aviso-cor);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
  }
  .aviso--sucesso { --aviso-cor: var(--gz-verde); }
  .aviso--erro    { --aviso-cor: var(--gz-rosa); }
  .aviso--atencao { --aviso-cor: var(--gz-amarelo); }
}

@layer utilidades {
  .container {
    width: min(100% - 2.5rem, var(--largura-max));
    margin-inline: auto;
  }
  .container--estreito { --largura-max: 780px; }
  .container--largo    { --largura-max: 1400px; }

  .empilha    { display: grid; gap: var(--e-4); }
  .empilha--g { gap: var(--e-6); }
  .empilha--p { gap: var(--e-2); }

  .linha {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    flex-wrap: wrap;
  }
  .linha--entre { justify-content: space-between; }
  .linha--centro { justify-content: center; }

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

  .texto-centro   { text-align: center; }
  .texto-suave    { color: var(--texto-suave); }
  .texto-fraco    { color: var(--texto-fraco); }
  .texto-marca    { font-family: var(--fonte-marca); }
  .texto-pequeno  { font-size: var(--t-sm); }
  .texto-mini     { font-size: var(--t-xs); }

  .rolagem-x {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  [hidden] { display: none !important; }
}