/* Castorix · landing page
   Cores, fontes e medidas do Guia Visual (Identidade visual/Castorix_Identidade_Visual.pdf). */

:root {
  --azul: #173B52;        /* institucional, navegação e títulos */
  --verde: #1E817A;       /* ação principal, foco e seleção */
  --verde-escuro: #176A64;
  --grafite: #1C2B36;     /* texto e valores */
  --apoio: #63727D;       /* legendas e metadados */
  --nevoa: #F5F8F8;       /* fundo geral */
  --branco: #FFFFFF;
  --borda: #E1E8EB;
  --sucesso: #22815D; --sucesso-bg: #E3F4EB;
  --atencao: #A86616; --atencao-bg: #FFF2DB;
  --erro: #B34449;    --erro-bg: #FBE9E9;
  --info: #346DAB;    --info-bg: #E8F1FB;

  --titulo: "Manrope", system-ui, sans-serif;
  --texto: "DM Sans", system-ui, sans-serif;
  --raio: 12px;
  --raio-p: 8px;
  --largura: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nevoa);
  color: var(--grafite);
  font: 400 16px/1.5 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); }
h1, h2, h3 { font-family: var(--titulo); color: var(--azul); margin: 0; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(30, 129, 122, .15); border-radius: 4px; }

.wrap { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.estreito { max-width: 780px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--azul); color: #fff; padding: 8px 16px; border-radius: var(--raio-p); z-index: 100; }
.skip:focus { left: 16px; }

/* Botões: alvo de toque de 44px */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--raio-p);
  font: 600 16px/1 var(--texto); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: background-color .15s, border-color .15s;
}
.btn--acao { background: var(--verde); color: #fff; }
.btn--acao:hover { background: var(--verde-escuro); }
.btn--linha { background: var(--branco); color: var(--azul); border-color: var(--borda); }
.btn--linha:hover { border-color: var(--azul); }
.btn--claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--claro:hover { border-color: #fff; }
.btn--p { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--bloco { width: 100%; }

.tag { display: inline-block; padding: 4px 12px; border-radius: 999px; font: 700 12px/1.6 var(--texto); letter-spacing: .04em; text-transform: uppercase; }
.tag--info { background: #E2F0EE; color: var(--verde); }
.tag--sucesso { background: var(--sucesso-bg); color: var(--sucesso); }

/* Topo */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--borda); backdrop-filter: saturate(1.2) blur(6px); }
.topo__in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.marca { display: flex; align-items: center; gap: 8px; }
.marca img:first-child { width: 44px; }
.marca__nome { width: 118px; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a { color: var(--grafite); text-decoration: none; font-weight: 500; font-size: 15px; }
.menu a:hover { color: var(--verde); }
.menu .btn--acao, .menu .btn--acao:hover { color: #fff; }
.menu__entrar { color: var(--azul) !important; font-weight: 600 !important; }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--branco); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg, .ico { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.menu-btn svg { stroke: var(--azul); }

/* Abertura */
.hero { padding: 72px 0 80px; }
.hero__in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.selo { color: var(--verde); font: 700 13px/1 var(--texto); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.hero h1 { font-size: clamp(34px, 4.4vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.hero__sub { margin-top: 20px; font-size: 18px; color: var(--apoio); max-width: 34em; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__nota { margin-top: 16px; font-size: 14px; color: var(--apoio); }

/* Ilustração do painel */
.painel { margin: 0; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; }
.painel__barra { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.painel__titulo { font: 700 18px/1.2 var(--titulo); color: var(--azul); }
.painel__kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kpi { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi span, .kpi small { font-size: 12px; color: var(--apoio); }
.kpi strong { font: 700 24px/1.15 var(--titulo); color: var(--azul); font-variant-numeric: tabular-nums; white-space: nowrap; }
.painel__baixo { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin-top: 10px; }
.graf, .atencao { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 12px; }
.graf__titulo, .atencao__titulo { display: block; font: 700 13px/1.3 var(--titulo); color: var(--azul); margin-bottom: 8px; }
.graf svg { width: 100%; height: auto; display: block; }
.graf__grade path { stroke: var(--borda); stroke-width: 1; }
.graf__real, .graf__prev { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.graf__real { stroke: var(--verde); }
.graf__prev { stroke: #8FA1AD; stroke-dasharray: 5 5; }
.graf__meses { display: flex; justify-content: space-between; font-size: 11px; color: var(--apoio); margin-top: 4px; }
.atencao { list-style: none; margin: 0; }
.atencao li:not(.atencao__titulo) { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--apoio); padding: 8px 0; border-top: 1px solid var(--borda); }
.atencao b { color: var(--azul); font-variant-numeric: tabular-nums; }
.painel figcaption { margin-top: 12px; font-size: 12px; color: var(--apoio); text-align: right; }

/* Seções */
.secao { padding: 88px 0; }
.secao--branca { background: var(--branco); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.secao__titulo { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; max-width: 22em; }
.secao__sub { margin-top: 12px; font-size: 17px; color: var(--apoio); max-width: 40em; }

.dores { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dores li { background: var(--branco); border: 1px solid var(--borda); border-left: 3px solid var(--atencao); border-radius: var(--raio-p); padding: 18px 20px; }

.fluxo { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: none; }
.fluxo li { position: relative; }
.fluxo li:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: 52px; right: -8px; height: 2px; background: var(--borda); }
.fluxo__n { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: var(--azul); color: #fff; align-items: center; justify-content: center; font: 700 16px/1 var(--titulo); position: relative; z-index: 1; }
.fluxo h3 { font-size: 18px; font-weight: 700; margin: 16px 0 8px; }
.fluxo p { font-size: 15px; color: var(--apoio); }

.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; }
.cartao .ico { width: 32px; height: 32px; stroke: var(--verde); }
.cartao h3 { font-size: 19px; font-weight: 700; margin: 14px 0 12px; }
.cartao ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cartao li { position: relative; padding-left: 20px; font-size: 15px; }
.cartao li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; background: var(--verde); border-radius: 2px; }

.pessoas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 40px; }
.pessoa { border-top: 3px solid var(--verde); padding-top: 16px; }
.pessoa h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.pessoa p { font-size: 15px; color: var(--apoio); }

/* Preço */
.preco { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: center; }
.plano { background: var(--branco); border: 2px solid var(--verde); border-radius: var(--raio); padding: 32px; }
.plano__valor { margin-top: 16px; font: 800 56px/1 var(--titulo); color: var(--azul); font-variant-numeric: tabular-nums; }
.plano__moeda { font-size: 24px; vertical-align: top; margin-right: 4px; position: relative; top: 8px; }
.plano__per { font-size: 20px; font-weight: 600; color: var(--apoio); margin-left: 4px; }
.plano__por { color: var(--apoio); margin-top: 6px; }
.plano__lista { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 10px; }
.plano__lista li { position: relative; padding-left: 28px; }
.plano__lista li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 14px; height: 8px; border-left: 2px solid var(--sucesso); border-bottom: 2px solid var(--sucesso); transform: rotate(-45deg); }
.plano__nota { margin-top: 14px; text-align: center; font-size: 14px; color: var(--apoio); }

/* Perguntas */
details { border-bottom: 1px solid var(--borda); }
details:first-of-type { margin-top: 32px; border-top: 1px solid var(--borda); }
summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 600 17px/1.4 var(--titulo); color: var(--azul); min-height: 44px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 400 24px/1 var(--texto); color: var(--verde); }
details[open] summary::after { content: "−"; }
details p { padding: 0 0 20px; color: var(--apoio); max-width: 42em; }

/* Chamada final */
.chamada { background: var(--azul); color: #fff; padding: 88px 0; text-align: center; }
.chamada__in { display: flex; flex-direction: column; align-items: center; }
.chamada__simbolo { width: 96px; margin-bottom: 24px; }
.chamada h2 { color: #fff; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.15; }
.chamada > .wrap > p { margin-top: 12px; font-size: 18px; color: #C9D6DE; }
.chamada__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.chamada__email { margin-top: 20px; font-size: 15px; }
.chamada__email a { color: #fff; font-weight: 600; }

/* Rodapé */
.rodape { background: var(--branco); border-top: 1px solid var(--borda); padding: 28px 0; font-size: 14px; color: var(--apoio); }
.rodape__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rodape__in img { width: 100px; }
.rodape nav { display: flex; gap: 24px; flex-wrap: wrap; }
.rodape a { color: var(--apoio); text-decoration: none; }
.rodape a:hover { color: var(--verde); }

/* Tablet */
@media (max-width: 1024px) {
  .hero__in { grid-template-columns: 1fr; gap: 48px; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .pessoas { grid-template-columns: repeat(3, 1fr); }
  .fluxo { grid-template-columns: 1fr; gap: 0; }
  .fluxo li { display: grid; grid-template-columns: 40px 1fr; column-gap: 20px; padding-bottom: 28px; }
  .fluxo li:not(:last-child)::after { top: 48px; bottom: 4px; left: 19px; right: auto; width: 2px; height: auto; }
  .fluxo h3 { margin: 8px 0 6px; }
  .fluxo p { grid-column: 2; }
  .fluxo__n { grid-row: span 2; }
  .preco { grid-template-columns: 1fr; gap: 32px; }
  .dores { grid-template-columns: repeat(2, 1fr); }
}

/* Celular: menu recolhido, blocos empilhados */
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .menu-btn { display: inline-flex; }
  .menu { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--branco); border-bottom: 1px solid var(--borda); padding: 8px 16px 16px; }
  .menu--aberto { display: flex; }
  .menu a { padding: 12px 0; min-height: 44px; border-bottom: 1px solid var(--borda); }
  .menu .btn { margin-top: 12px; border-bottom: 0; }
  .hero { padding: 40px 0 56px; }
  .hero__sub { font-size: 17px; }
  .hero__acoes .btn { flex: 1 1 100%; }
  .painel { padding: 14px; }
  .kpi strong { font-size: 20px; }
  .painel__baixo { grid-template-columns: 1fr; }
  .secao, .chamada { padding: 64px 0; }
  .dores, .grade, .pessoas { grid-template-columns: 1fr; }
  .plano { padding: 24px; }
  .chamada__acoes .btn { flex: 1 1 100%; }
  .rodape__in { flex-direction: column; align-items: flex-start; }
}