/* castelar.com.br · Grupo Castelar: estrutura premium da família Zaran (Fraunces + Inter Tight), com paleta própria */
@font-face { font-family: "Fraunces"; src: url("fontes/fraunces-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fontes/fraunces-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fontes/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fontes/inter-tight-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fontes/inter-tight-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fontes/inter-tight-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fontes/inter-tight-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Paleta: todas as cores do site saem daqui. */
:root {
  /* Paleta "Vinho e rosé" */
  --g0: #1F0E12; --g1: #2B151A; --g2: #3A1D24; --g3: #4A2730;     /* fundos escuros, do mais fundo ao mais claro */
  --topo: rgba(31, 14, 18, .92);
  --claro: #F7F2F0; --claro2: #EEE4E1; --claro3: #F3ECE9; --linha: #E3D5D1; --linha2: #D5C2BD;
  --acento: #E8B9A8; --acento-hover: #F0CDBF; --acento-esc: #8E4A3A;
  --sob: #D3C6C8; --sob2: #EFE6E7; --sob3: #937F83;               /* textos sobre fundo escuro */
  --ok: #A6DBC2; --ok-fundo: #E5F3EC; --ok-tx: #1E6B4D;
  --tx: #2A1A1E; --tx2: #463238; --tx3: #574349; --mut: #6E5C61; --mut-esc: #AE9EA2;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--claro); color: var(--tx); font: 400 16px/1.6 "Inter Tight", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 500; letter-spacing: -.015em; margin: 0; }
.g-largura { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.pular { position: absolute; left: -9999px; } .pular:focus { left: 16px; top: 12px; z-index: 30; background: #fff; padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* topo */
.g-topo { position: sticky; top: 0; z-index: 20; background: var(--topo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.g-topo-in { display: flex; align-items: center; gap: 32px; height: 68px; }
.g-marca { font: 500 22px/1 Fraunces, Georgia, serif; letter-spacing: -.01em; color: var(--claro); text-decoration: none; white-space: nowrap; }
.g-marca span { color: var(--acento); }
.g-nav { display: flex; gap: 26px; margin-left: auto; }
.g-nav a { color: var(--sob); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.g-nav a:hover { color: #fff; }

/* botões */
.g-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background .15s, border-color .15s; white-space: nowrap; }
.g-botao-claro { min-height: 40px; padding: 0 18px; background: var(--claro); color: var(--g1); font-size: 14px; }
.g-botao-claro:hover { background: #fff; }
.g-botao-acento { background: var(--acento); color: var(--g0); }
.g-botao-acento:hover { background: var(--acento-hover); }
.g-botao-linha { border: 1px solid rgba(255, 255, 255, .22); color: var(--sob2); }
.g-botao-linha:hover { border-color: rgba(255, 255, 255, .5); }
.g-botao-grande { min-height: 58px; padding: 0 28px; font-size: 17px; }

/* hero */
.g-hero { background: radial-gradient(1000px 560px at 78% 30%, var(--g2) 0%, transparent 70%), var(--g0); color: var(--claro); padding: 92px 0 108px; overflow: hidden; }
.g-hero-in { display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: center; }
.g-hero h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -.025em; }
.g-hero h1 .g-l { display: block; }
.g-destaque { color: var(--acento); }
.g-lead { margin: 26px 0 0; max-width: 34em; font-size: 18.5px; line-height: 1.6; color: var(--sob); }
.g-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ilustração: o grupo e suas frentes */
.g-org { margin: 0; background: #fff; color: var(--tx); border-radius: 20px; padding: 26px 24px 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 30px 70px -20px rgba(0, 0, 0, .7); transform: rotate(-1.2deg); }
.g-org-topo { margin: 0 auto; width: max-content; text-align: center; background: var(--g1); color: var(--claro); border-radius: 12px; padding: 12px 22px; }
.g-org-topo b { display: block; font: 500 19px Fraunces, Georgia, serif; }
.g-org-topo span { font-size: 12px; color: var(--mut-esc); }
.g-org-linhas { display: block; width: 100%; height: 40px; }
.g-org-linhas path { fill: none; stroke: var(--linha2); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.g-org-frentes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.g-org-frentes > div { border: 1px solid var(--claro2); border-radius: 14px; padding: 16px 12px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.g-org-frentes b { font-size: 14.5px; font-weight: 600; }
.g-org-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--claro); color: var(--acento-esc); display: flex; align-items: center; justify-content: center; }
.g-org-ico .g-ico { width: 24px; height: 24px; }
.g-tag { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--claro3); color: var(--mut); }
.g-tag-on { background: var(--ok-fundo); color: var(--ok-tx); }
.g-tag-claro { align-self: flex-start; margin-top: auto; }

/* faixa */
.g-faixa { background: var(--g1); color: var(--sob2); border-top: 1px solid rgba(255, 255, 255, .06); }
.g-faixa-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.g-faixa-in > div { display: flex; gap: 14px; align-items: flex-start; padding: 28px 22px; border-left: 1px solid rgba(255, 255, 255, .08); }
.g-faixa-in > div:first-child { border-left: 0; padding-left: 0; }
.g-faixa .g-ico { width: 24px; height: 24px; flex: none; color: var(--acento); margin-top: 2px; }
.g-faixa p { margin: 0; } .g-faixa b { display: block; font-size: 15.5px; font-weight: 600; color: #fff; }
.g-faixa span { font-size: 13.5px; color: var(--mut-esc); line-height: 1.45; }

/* seções */
.g-secao { padding: 104px 0; }
.g-secao-clara { background: #fff; }
.g-tit { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; }
.g-sub { margin: 12px 0 0; font-size: 17px; color: var(--mut); }
.g-grupo { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.g-grupo h2 { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.06; }
.g-grupo-txt p { margin: 0 0 18px; font-size: 19px; line-height: 1.65; color: var(--tx2); }
.g-grupo-txt p:last-child { margin: 0; }

/* frentes */
.g-frentes { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; margin-top: 44px; }
.g-frente { background: var(--claro); border: 1px solid var(--linha); border-radius: 20px; padding: 32px 30px; display: flex; flex-direction: column; }
.g-frente h3 { font-size: 28px; margin: 22px 0 12px; }
.g-frente p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.6; color: var(--tx3); }
.g-frente-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--g1); color: var(--acento); display: flex; align-items: center; justify-content: center; }
.g-frente-ico .g-ico { width: 26px; height: 26px; }
.g-frente-grande { background: var(--g1); border-color: var(--g1); color: var(--claro); }
.g-frente-grande .g-frente-ico { background: var(--acento); color: var(--g0); }
.g-frente-grande h3 { font-size: 34px; }
.g-frente-grande p { color: var(--sob); font-size: 17.5px; }
.g-frente-lista { list-style: none; margin: 0 0 22px; padding: 0; }
.g-frente-lista li { position: relative; padding: 9px 0 9px 26px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 15px; color: var(--sob2); }
.g-frente-lista li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 10px; height: 6px; border-left: 2px solid var(--acento); border-bottom: 2px solid var(--acento); transform: rotate(-45deg); }
.g-mais { margin-top: auto; align-self: flex-start; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 2px solid var(--acento); padding-bottom: 2px; }
.g-mais:hover { border-color: currentColor; }

/* lojas */
.g-escura { background: var(--g0); color: var(--claro); }
.g-escura .g-sub { color: var(--mut-esc); }
.g-lojas { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; margin-top: 44px; }
.g-mini { font: 600 13px "Inter Tight", sans-serif; letter-spacing: .02em; color: var(--acento); margin: 0 0 16px; }
.g-cats { list-style: none; margin: 0; padding: 0; }
.g-cats li { font: 500 26px/1.2 Fraunces, Georgia, serif; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.g-cats li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.g-canais { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g-canal { background: var(--g1); border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px; padding: 24px 22px; }
.g-canal b { display: block; font: 500 23px Fraunces, Georgia, serif; }
.g-canal span { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ok); }
.g-canal span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; }

/* princípios */
.g-principios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 44px; }
.g-principios article { border-top: 2px solid var(--g1); padding-top: 22px; }
.g-principios h3 { font-size: 24px; margin: 0 0 10px; }
.g-principios p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--tx3); }

/* contato final */
.g-final { background: radial-gradient(800px 400px at 85% 100%, var(--g2) 0%, transparent 70%), var(--g0); color: var(--claro); padding: 96px 0; }
.g-final-in { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.g-final h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; }
.g-final p { margin: 14px 0 0; font-size: 18px; color: var(--sob); }

/* páginas internas */
.g-pagina-cab { background: var(--g0); color: var(--claro); padding: 72px 0 64px; }
.g-pagina-cab h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; }
.g-pagina-cab p { margin: 14px 0 0; font-size: 18px; color: var(--sob); }
.g-pagina-cab a { color: var(--acento); }
.g-texto { max-width: 760px; margin-left: max(0px, calc((100% - 1160px) / 2)); }
.g-texto h2 { font-size: 26px; margin: 36px 0 10px; } .g-texto h2:first-child { margin-top: 0; }
.g-texto p { margin: 0 0 14px; font-size: 17.5px; line-height: 1.7; color: var(--tx2); }

/* rodapé */
.g-rodape { background: var(--g0); color: var(--sob); border-top: 1px solid rgba(255, 255, 255, .08); padding: 56px 0 28px; }
.g-rodape-in { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 40px; align-items: start; }
.g-rodape-marca p { margin: 12px 0 0; font-size: 14px; color: var(--mut-esc); }
.g-rodape-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin: 0; }
.g-rodape-dados dt { font-size: 12px; font-weight: 600; color: var(--sob3); margin-bottom: 2px; }
.g-rodape-dados dd { margin: 0; font-size: 14.5px; color: var(--sob2); }
.g-rodape-dados a { text-decoration: none; } .g-rodape-dados a:hover { text-decoration: underline; }
.g-rodape-links { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.g-rodape-links a { text-decoration: none; } .g-rodape-links a:hover { color: #fff; text-decoration: underline; }
.g-copy { margin-top: 44px; padding-top: 20px !important; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: var(--sob3); }

@media (max-width: 960px) {
  .g-nav { display: none; }
  .g-topo-in { justify-content: space-between; }
  .g-hero { padding: 64px 0 80px; }
  .g-hero-in, .g-grupo, .g-lojas { grid-template-columns: 1fr; gap: 44px; }
  .g-org { transform: none; max-width: 520px; }
  .g-faixa-in { grid-template-columns: 1fr 1fr; }
  .g-faixa-in > div { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .g-frentes { grid-template-columns: 1fr; }
  .g-principios { grid-template-columns: 1fr; gap: 28px; }
  .g-rodape-in { grid-template-columns: 1fr; }
  .g-secao { padding: 76px 0; }
}
@media (max-width: 560px) {
  .g-largura { padding: 0 20px; }
  .g-marca { font-size: 20px; }
  .g-botao-claro { padding: 0 14px; }
  .g-faixa-in { grid-template-columns: 1fr; }
  .g-org-frentes { grid-template-columns: 1fr; }
  .g-org-linhas { display: none; }
  .g-org-topo { margin-bottom: 12px; }
  .g-canais { grid-template-columns: 1fr; }
  .g-cats li { font-size: 22px; }
  .g-rodape-dados { grid-template-columns: 1fr; }
  .g-botao-grande { width: 100%; font-size: 15px; white-space: normal; text-align: center; }
}