/* =========================================================================
   HOME LICONIC — folha única.
   Tokens herdados do design-system.md do Ecogerador (mesma identidade).
   H1: esqueleto — tokens, header, grade de 4 colunas, hover base.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS  (cópia do design-system — NÃO reinventar; manter em sincronia)
   ------------------------------------------------------------------------- */
:root {
  --tinta:        #0A0A0A;
  --papel:        #FFFFFF;
  --cinza-95:     #F4F4F4;
  --cinza-80:     #CCCCCC;
  --cinza-45:     #737373;
  --verde:        #4BA512;   /* só em número acima de 24px */
  --verde-texto:  #3D860E;   /* legível sobre branco — 4,55:1 */
  --verde-claro:  #5CAD29;   /* legível sobre tinta — 7,04:1 */

  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --t-mono-rotulo: 13px;
  --t-corpo-peq:   15px;
  --t-corpo:       18px;
  --t-destaque:    23px;
  --t-titulo-3:    29px;
  --t-titulo-2:    clamp(32px, 4vw, 44px);
  --t-titulo-1:    clamp(34px, 5.4vw, 69px);

  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 40px;
  --e5: 64px; --e6: 104px; --e7: 168px;

  --largura-max: 1280px;
  --respiro-lateral: var(--e3);
  --alt-cab: 72px;
}
@media (min-aspect-ratio: 1/1) { :root { --respiro-lateral: var(--e5); } }

/* -------------------------------------------------------------------------
   2. RESET E BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--t-corpo);
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.pular {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--tinta); color: #fff; padding: var(--e2);
}
.pular:focus { left: var(--e2); top: var(--e2); }

/* conteúdo só para leitores de tela (h1 da página) */
.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;
}

/* -------------------------------------------------------------------------
   3. HEADER (fonte única — partials/header.html)
   ------------------------------------------------------------------------- */
.cab {
  position: sticky; top: 0; z-index: 50;
  height: var(--alt-cab);
  background: var(--papel);
  border-bottom: 1px solid var(--cinza-80);   /* separação por linha, sem sombra */
}
.cab__interno {
  max-width: var(--largura-max);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--respiro-lateral);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
}
.cab__logo { display: flex; align-items: center; }
.cab__logo img { height: 40px; width: auto; }
.cab__nav { display: flex; align-items: center; gap: var(--e4); }
.cab__nav > a {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-corpo-peq);
  letter-spacing: .01em; color: var(--tinta);
  padding: var(--e1) 0; position: relative;
  transition: color .2s ease;
}
.cab__nav > a:hover { color: var(--verde-texto); }            /* estado ativo = verde permitido */
.cab__nav > a[aria-current="page"] { color: var(--verde-texto); }
.cab__nav > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -22px;
  height: 2px; background: var(--verde-texto);
}

/* Seletor de idioma — mono, discreto */
.cab__lang {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--t-mono-rotulo); font-weight: 500;
  color: var(--cinza-45); padding-left: var(--e2);
  border-left: 1px solid var(--cinza-80);
}
.cab__lang a { color: var(--cinza-45); transition: color .2s ease; }
.cab__lang a:hover { color: var(--tinta); }
.cab__lang a[aria-current="true"] { color: var(--tinta); }

/* Hambúrguer (vira X quando aberto) */
.cab__menu { display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 8px;
  flex-direction: column; justify-content: center; gap: 5px; }
.cab__menu span { display: block; height: 2px; width: 100%; background: var(--tinta);
  border-radius: 1px; transition: transform .3s ease, opacity .2s ease; }
.cab__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cab__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cab__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   4. GRADE DAS 4 COLUNAS
   ------------------------------------------------------------------------- */
.grade {
  display: flex;
  height: calc(100svh - var(--alt-cab));
  min-height: 520px;
}
.col {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  display: flex; align-items: flex-end;
  border-left: 1px solid rgba(255,255,255,.14);
  transition: flex-grow .5s cubic-bezier(.22,.61,.36,1),
              filter .5s ease, opacity .5s ease;
}
.col:first-child { border-left: 0; }

/* imagem de fundo (contida no repouso; cobre no hover) */
.col__foto {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(.9) brightness(.82);
  transition: filter .5s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
/* Duas camadas de escurecimento sobre a foto:
   ::before = véu chapado de REPOUSO (legibilidade do texto branco).
   ::after  = scrim em GRADIENTE que surge no hover/toque (reveal direcional).
   No hover o chapado some (opacity 0) e o gradiente aparece (opacity 1). */
.col::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(10,10,10,.42);
  opacity: 1;
  transition: opacity .5s ease, background .5s ease;
  pointer-events: none;
}
.col::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  /* direção definida por proporção (web: esquerda→30%; mobile: base→centro) */
  background: linear-gradient(to right, rgba(10,10,10,.82) 0%, rgba(10,10,10,0) 30%);
}

.col__conteudo {
  position: relative; z-index: 2;
  padding: var(--e4);
  color: #fff;
  max-width: 34ch;
}
.col__faixa {
  font-family: var(--mono); font-weight: 500; font-size: var(--t-mono-rotulo);
  letter-spacing: .08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: #fff; opacity: .85;
  display: inline-block; margin-bottom: var(--e2);
}
.col__titulo {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--t-titulo-2); line-height: 1.1;
  transition: color .35s ease;
}
.col__sub {
  font-family: var(--sans); font-weight: 400; font-size: var(--t-corpo);
  margin-top: var(--e1); opacity: .9;
}
.col__desc {
  font-family: var(--sans); font-size: var(--t-corpo-peq); line-height: 1.55;
  margin-top: var(--e2); opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .4s ease, max-height .5s ease;
}

/* ---- HOVER / ATIVO: a coluna "brilha", as outras recuam --------------- */
@media (hover: hover) and (min-aspect-ratio: 1/1) {
  .grade:hover .col { flex-grow: .7; }
  .grade:hover .col:hover { flex-grow: 2; }
  .grade:hover .col:not(:hover) { filter: saturate(.6); }
  .grade:hover .col:not(:hover)::before { background: rgba(10,10,10,.62); }
}
.col:hover .col__foto,
.col.ativo .col__foto { filter: saturate(1) brightness(1); }
.col:hover::before,
.col.ativo::before { opacity: 0; }                        /* some o véu chapado */
.col:hover::after,
.col.ativo::after  { opacity: 1; }                        /* surge o gradiente direcional */
.col:hover .col__titulo,
.col.ativo .col__titulo { color: var(--verde-claro); }   /* título verde no estado ativo */
.col:hover .col__desc,
.col.ativo .col__desc { opacity: .95; max-height: 8em; }

.col:focus-visible { outline: 3px solid var(--verde-claro); outline-offset: -3px; }

/* ---- Especiais: imagem vertical no web, horizontal no mobile ---------- */
.col__foto--especiais { background-image: url('../img/especiais.webp'); }        /* mobile (linha larga) */
@media (min-aspect-ratio: 1/1) {
  .col__foto--especiais { background-image: url('../img/especiais-vertical.webp'); }
}


/* -------------------------------------------------------------------------
   5. MOBILE  (< 1:1 — empilha; toque ativa)
   ------------------------------------------------------------------------- */
@media (max-aspect-ratio: 1/1) {
  .grade { flex-direction: column; height: auto; min-height: 0; }
  .col {
    flex: 1 1 auto; min-height: 30svh;
    border-left: 0; border-top: 1px solid rgba(255,255,255,.14);
  }
  .col:first-child { border-top: 0; }
  .col__foto { filter: saturate(1) brightness(.9); }
  .col::before { background: rgba(10,10,10,.34); }
  .col__desc { opacity: .92; max-height: 8em; }   /* no celular a descrição já aparece */

  /* mobile: o gradiente do reveal vai da BASE (escuro) ao CENTRO (transparente) */
  .col::after {
    background: linear-gradient(to top, rgba(10,10,10,.82) 0%, rgba(10,10,10,0) 50%);
  }
  .cab__nav {
    display: none; position: absolute; top: var(--alt-cab); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--papel);
    border-bottom: 1px solid var(--cinza-80);
  }
  .cab__nav--aberto { display: flex; }
  .cab__nav > a {
    padding: var(--e2) var(--respiro-lateral); min-height: 44px;
    display: flex; align-items: center;
    border-top: 1px solid var(--cinza-95);
  }
  .cab__nav > a[aria-current="page"]::after { display: none; }   /* sem sublinhado no dropdown */
  .cab__lang {
    border-left: 0; border-top: 1px solid var(--cinza-80);
    padding: var(--e2) var(--respiro-lateral); min-height: 44px;
    font-size: var(--t-corpo-peq);
  }
  .cab__menu { display: flex; }
}

/* -------------------------------------------------------------------------
   6. MOVIMENTO REDUZIDO
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}