/* ==========================================================================
   Locatto Consultoria — sistema visual base
   Roxo profundo (ametista/vinho) + grafite + off-white + champanhe
   Sóbrio, institucional, nível big4 com camada contemporânea.
   ========================================================================== */

:root {
  --roxo: #431E48;
  --roxo-esc: #2A1030;
  --roxo-prof: #37183D;
  --roxo-toque: #5E2D64;
  --grafite: #1A1A22;
  --grafite-suave: #3A3A44;
  --offwhite: #F5F2EC;
  --offwhite-2: #EFEBE2;
  --champanhe: #B79A6B;
  --champanhe-claro: #CBB588;
  --texto: #23222A;
  --texto-suave: #6A6672;
  --linha: rgba(67, 30, 72, 0.14);
  --linha-clara: rgba(255, 255, 255, 0.14);
  --sombra: 0 24px 60px -30px rgba(42, 16, 48, 0.5);
  --max: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  color: var(--texto);
  background: var(--offwhite);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; color: var(--roxo); line-height: 1.2; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 26px; }

/* Eyebrow / etiqueta ---------------------------------------------------- */
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--champanhe); display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--champanhe); display: inline-block; }
.eyebrow.centro { justify-content: center; }

/* Botões ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer; transition: all 0.22s ease; text-align: center;
}
.btn-primario { background: var(--roxo); color: #fff; }
.btn-primario:hover { background: var(--roxo-toque); transform: translateY(-1px); }
.btn-borda { border-color: var(--roxo); color: var(--roxo); }
.btn-borda:hover { background: var(--roxo); color: #fff; }
.btn-clara { background: #fff; color: var(--roxo); border-color: rgba(255,255,255,0.2); }
.btn-clara:hover { background: var(--offwhite-2); }
.btn-fantasma { border-color: rgba(255,255,255,0.4); color: #fff; }
.btn-fantasma:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn .seta { transition: transform 0.22s ease; }
.btn:hover .seta { transform: translateX(3px); }

/* Header ---------------------------------------------------------------- */
header.topo {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245, 242, 236, 0.9); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 26px; max-width: var(--max); margin: 0 auto; }

/* Marca (wordmark + monograma) */
.marca { display: flex; align-items: center; gap: 13px; }
.monograma { width: 40px; height: 40px; flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nome { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--roxo); }
.marca-sub { font-family: 'Montserrat', sans-serif; font-size: 8.5px; font-weight: 600; letter-spacing: 0.44em; text-transform: uppercase; color: var(--texto-suave); margin-top: 4px; }

nav.menu { display: flex; align-items: center; gap: 30px; }
nav.menu a { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--grafite-suave); transition: color 0.2s; white-space: nowrap; }
nav.menu a:hover, nav.menu a.ativo { color: var(--roxo); }
.topo-cta { display: inline-flex; }

.menu-check { display: none; }
.menu-abre { display: none; cursor: pointer; padding: 8px; }
.menu-abre span { display: block; width: 24px; height: 2px; background: var(--roxo); margin: 5px 0; transition: 0.25s; }

@media (max-width: 900px) {
  .menu-abre { display: block; }
  nav.menu {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--offwhite); border-bottom: 1px solid var(--linha);
  }
  nav.menu a { padding: 15px 26px; border-top: 1px solid var(--linha); }
  .menu-check:checked ~ nav.menu { display: flex; }
  .topo .topo-cta { display: none; }
}

/* Seções genéricas ------------------------------------------------------ */
section { position: relative; }
.bloco { padding: 96px 0; }
.bloco-escuro { background: var(--roxo-esc); color: rgba(255,255,255,0.86); }
.bloco-escuro h1, .bloco-escuro h2, .bloco-escuro h3 { color: #fff; }
.bloco-alt { background: var(--offwhite-2); }
.titulo-secao { font-size: clamp(27px, 3.4vw, 40px); margin-top: 18px; max-width: 20ch; }
.titulo-secao.centro { margin-left: auto; margin-right: auto; text-align: center; }
.intro-secao { color: var(--texto-suave); max-width: 62ch; margin-top: 18px; font-size: 16.5px; }
.intro-secao.centro { margin-left: auto; margin-right: auto; text-align: center; }
.bloco-escuro .intro-secao { color: rgba(255,255,255,0.72); }

/* Rodapé ---------------------------------------------------------------- */
footer.rodape { background: var(--grafite); color: rgba(255,255,255,0.66); padding: 74px 0 30px; }
footer.rodape h4 { color: #fff; font-size: 15px; letter-spacing: 0.02em; margin-bottom: 18px; font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: uppercase; }
.rodape-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.rodape a { color: rgba(255,255,255,0.66); font-size: 14px; line-height: 2.1; transition: color 0.2s; }
.rodape a:hover { color: var(--champanhe-claro); }
.rodape .marca-nome { color: #fff; }
.rodape .marca-sub { color: rgba(255,255,255,0.5); }
.rodape p { font-size: 14px; line-height: 1.9; color: rgba(255,255,255,0.6); }
.rodape-base { margin-top: 54px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,0.45); }
.rodape-aviso { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 14px; max-width: 46ch; }
@media (max-width: 820px) { .rodape-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rodape-grid { grid-template-columns: 1fr; } }

/* Utilidades ------------------------------------------------------------ */
.linha-champanhe { width: 66px; height: 1px; background: var(--champanhe); margin: 22px 0; }
.linha-champanhe.centro { margin-left: auto; margin-right: auto; }
.selo-linha { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--texto-suave); }
.selo-linha b { color: var(--roxo); font-weight: 600; }

/* ==========================================================================
   MOVIMENTO E EXPERIÊNCIA
   ========================================================================== */

/* Barra de progresso de leitura */
#barra-progresso { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 100; background: linear-gradient(90deg, var(--champanhe), var(--champanhe-claro)); transition: width 0.1s linear; }

/* Header que encolhe ao rolar */
header.topo { transition: padding 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
header.topo.encolhido { box-shadow: 0 10px 30px -18px rgba(42,16,48,0.4); }
header.topo.encolhido .topo-inner { padding-top: 10px; padding-bottom: 10px; }

/* Nav com sublinhado animado */
nav.menu a { position: relative; }
@media (min-width: 901px) {
  nav.menu a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--roxo); transition: right 0.3s cubic-bezier(0.22,0.7,0.2,1); }
  nav.menu a:not(.btn):hover::after { right: 0; }
}

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s cubic-bezier(0.22,0.7,0.2,1), transform 0.75s cubic-bezier(0.22,0.7,0.2,1); will-change: opacity, transform; }
.reveal.visivel { opacity: 1; transform: none; }
.reveal.esq { transform: translateX(-32px); }
.reveal.dir { transform: translateX(32px); }
.reveal.esc { transform: scale(0.96); }
.reveal.esq.visivel, .reveal.dir.visivel, .reveal.esc.visivel { transform: none; }
/* Stagger dentro de grupos */
.stagger > .reveal:nth-child(1) { transition-delay: 0.04s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.12s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.20s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.28s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.36s; }
.stagger > .reveal:nth-child(6) { transition-delay: 0.44s; }
.stagger > .reveal:nth-child(7) { transition-delay: 0.52s; }
.stagger > .reveal:nth-child(8) { transition-delay: 0.60s; }

/* Botões com brilho ao passar */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-18deg); transition: left 0.6s ease; }
.btn:hover::after { left: 130%; }

/* ==========================================================================
   ÍCONES
   ========================================================================== */
.icone { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linha); color: var(--roxo); margin-bottom: 20px; transition: 0.25s; }
.icone svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card-sol:hover .icone, .tema:hover .icone { border-color: var(--champanhe); background: rgba(183,154,107,0.08); }
.card-sol.destaque .icone { border-color: rgba(255,255,255,0.24); color: #fff; }
.icone-mini { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   FAIXA DE CONFIANÇA (logos de clientes)
   ========================================================================== */
.confia { padding: 40px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: var(--offwhite); }
.confia .rotulo { text-align: center; font-family: 'Montserrat'; font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 26px; }
.confia-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; }
.logo-ph { height: 40px; min-width: 130px; padding: 0 22px; border: 1px dashed var(--linha); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat'; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); opacity: 0.75; transition: 0.25s; }
.logo-ph:hover { opacity: 1; border-color: var(--champanhe); color: var(--roxo); }

/* ==========================================================================
   GRÁFICO DE MATURIDADE (motion graphic)
   ========================================================================== */
.grafico-bloco { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .grafico-bloco { grid-template-columns: 1fr; gap: 44px; } }
.grafico-card { background: #fff; border: 1px solid var(--linha); padding: 40px; box-shadow: var(--sombra); }
.bloco-escuro .grafico-card, .grafico-card.escuro { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); box-shadow: none; }
.anel-wrap { display: flex; align-items: center; gap: 30px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--linha); }
.grafico-card.escuro .anel-wrap { border-color: rgba(255,255,255,0.12); }
.anel { position: relative; width: 128px; height: 128px; flex: none; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel .trilho { stroke: rgba(67,30,72,0.1); }
.grafico-card.escuro .anel .trilho { stroke: rgba(255,255,255,0.12); }
.anel .prog { stroke: var(--champanhe); stroke-linecap: round; transition: stroke-dashoffset 1.5s cubic-bezier(0.3,0.8,0.3,1); }
.anel-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anel-centro .num { font-family: 'Montserrat', serif; font-size: 34px; font-weight: 600; color: var(--roxo); line-height: 1; }
.grafico-card.escuro .anel-centro .num { color: #fff; }
.anel-centro .num small { font-size: 18px; }
.anel-legenda h3 { font-size: 21px; margin-bottom: 6px; }
.anel-legenda p { font-family: 'Montserrat'; font-size: 13.5px; color: var(--texto-suave); }
.grafico-card.escuro .anel-legenda p { color: rgba(255,255,255,0.6); }
.barras { display: flex; flex-direction: column; gap: 16px; }
.barra { }
.barra .top { display: flex; justify-content: space-between; font-family: 'Montserrat'; font-size: 13.5px; margin-bottom: 6px; }
.barra .top b { font-weight: 600; color: var(--roxo); }
.grafico-card.escuro .barra .top b { color: var(--champanhe-claro); }
.barra .trilha { height: 7px; background: rgba(67,30,72,0.08); overflow: hidden; }
.grafico-card.escuro .barra .trilha { background: rgba(255,255,255,0.08); }
.barra .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--roxo), var(--roxo-toque)); transition: width 1.4s cubic-bezier(0.3,0.8,0.3,1); }
.grafico-card.escuro .barra .fill { background: linear-gradient(90deg, var(--champanhe), var(--champanhe-claro)); }
.grafico-nota { font-family: 'Montserrat'; font-size: 12px; color: var(--texto-suave); margin-top: 22px; font-style: italic; }
.grafico-card.escuro .grafico-nota { color: rgba(255,255,255,0.5); }

/* ==========================================================================
   MÉTODO com linha conectora animada
   ========================================================================== */
.metodo-fluxo { position: relative; }
.metodo-linha { position: absolute; top: 30px; left: 6%; right: 6%; height: 1px; background: var(--linha); z-index: 0; }
.metodo-linha::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--champanhe); transition: width 1.8s ease; }
.metodo-fluxo.visivel .metodo-linha::after { width: 100%; }
@media (max-width: 900px) { .metodo-linha { display: none; } }

/* ==========================================================================
   REDUZIR MOVIMENTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation: none !important; }
  .anel .prog, .barra .fill, .metodo-linha::after { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   ACABAMENTO PREMIUM
   ========================================================================== */

/* Grão de material sobre a página inteira (profundidade sutil) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0.05; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Mais respiro (whitespace = luxo) */
.bloco { padding: 112px 0; }
.eyebrow { font-size: 11px; letter-spacing: 0.3em; }
.eyebrow::before { width: 30px; }
.titulo-secao { line-height: 1.14; margin-top: 20px; }

/* Botões mais refinados */
.btn { padding: 16px 34px; letter-spacing: 0.13em; font-size: 12.5px; }

/* Sombra e realce dos cartões */
.card-sol, .tema, .grafico-card { position: relative; }
.card-sol:hover, .tema:hover, .grafico-card:hover { box-shadow: 0 30px 70px -34px rgba(42,16,48,0.55); }
/* Filete dourado que cresce no topo ao passar */
.card-sol:not(.destaque)::after, .tema::after {
  content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--champanhe), var(--champanhe-claro)); transition: width 0.35s cubic-bezier(0.22,0.7,0.2,1);
}
.card-sol:not(.destaque):hover::after, .tema:hover::after { width: 46px; }
.bloco-escuro .tema::after { background: var(--champanhe-claro); }

/* Cantos dourados no cartão do gráfico */
.grafico-card { position: relative; }
.grafico-card::before, .grafico-card::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
}
.grafico-card::before { top: -1px; left: -1px; border-top: 2px solid var(--champanhe); border-left: 2px solid var(--champanhe); }
.grafico-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--champanhe); border-right: 2px solid var(--champanhe); }

/* Monograma d'água discreto em blocos escuros */
.selos-hero, .rodape-base { position: relative; }

/* Indicador de rolagem no hero */
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,0.5); font-family: 'Montserrat'; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; }
.scroll-cue span { width: 1px; height: 42px; background: linear-gradient(rgba(183,154,107,0.8), transparent); position: relative; overflow: hidden; }
.scroll-cue span::after { content: ""; position: absolute; top: -14px; left: 0; width: 1px; height: 14px; background: var(--champanhe-claro); animation: desce 1.8s ease-in-out infinite; }
@keyframes desce { 0% { top: -14px; } 60%,100% { top: 42px; } }