/* ELEVVO · página inicial (institucional)
   Depende de base.css (servido em /calculadora/assets/base.css). Só o que é desta página. */

section[id] { scroll-margin-top: 72px; }

/* ---------- Topo: texto + mini calculadora ---------- */
.ini-hero {
  padding: 64px 0 88px;
  background-color: var(--roxo-900);
  background-image: radial-gradient(60% 70% at 90% 10%, rgba(219, 105, 255, .16), transparent 70%), radial-gradient(rgba(139, 63, 234, .22) 1px, transparent 1px);
  background-size: auto, 22px 22px;
}
.ini-hero__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: center; }
/* até 50 px para o título caber em 2 linhas no desktop (itálico: no máximo 2 linhas) */
.ini-hero h1 { font-size: clamp(32px, 4.2vw, 50px); margin-bottom: 18px; }
.ini-hero .lead { margin-bottom: 26px; }
.ini-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.ini-hero__apoio { margin: 14px 0 0; font-size: 14px; color: var(--texto-suave-d); }

.mini { background: var(--roxo-950); border: 1px solid var(--linha-d); border-radius: 20px; padding: 24px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); }
.mini__titulo { font: 700 18px/1.3 var(--fonte-texto); font-style: normal; letter-spacing: 0; margin: 0 0 16px; }
.mini .campo > label { color: var(--branco); }
.mini__res { min-height: 158px; padding: 4px 0 18px; }
.mini__vazio { color: var(--texto-suave-d); font-size: 15px; margin: 6px 0 8px; }
.mini__sobra { margin: 14px 0 12px; }
.mini__sobra small { display: block; font-size: 14px; color: var(--texto-suave-d); margin-bottom: 4px; }
.mini__sobra b { font: italic 800 clamp(34px, 4vw, 44px)/1.05 var(--fonte-titulo); color: var(--ambar); font-variant-numeric: tabular-nums; }
.mini__sobra b.neg { color: var(--erro-d); }
.mini__margem { display: inline-block; margin-left: 10px; font: 700 17px/1 var(--fonte-texto); color: var(--branco); }
.mini__frase { margin: 10px 0 0; font-size: 15px; color: var(--texto-suave-d); }
.mini__pmin { margin: 0; font-size: 15px; color: var(--texto-suave-d); }
.mini__pmin b { color: var(--branco); font-variant-numeric: tabular-nums; }
.mini__nota { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--texto-suave-d); }
.on-dark .selo--ok { background: rgba(74, 222, 128, .14); color: var(--ok-d); }
.on-dark .selo--abaixo { background: rgba(255, 164, 92, .14); color: var(--aviso-d); }
.on-dark .selo--prejuizo { background: rgba(255, 138, 122, .14); color: var(--erro-d); }

/* ---------- Quem somos ---------- */
.ini-quem__texto { max-width: 760px; }
.ini-quem__texto p:not(.eyebrow):not(.lead) { max-width: 62ch; color: var(--n-700); }
.ini-quem__texto .lead { margin-bottom: 18px; color: var(--roxo-950); }

/* Sócios: card escuro, nome grande, pessoa recortada passando do topo, círculo da marca atrás.
   Um card largo por sócio (as fotos são largas), o segundo espelhado. */
.socios { display: grid; gap: 104px; margin-top: 120px; }
.socio {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 360px; padding: 40px 48px;
  border-radius: 20px; color: var(--branco);
  background: radial-gradient(90% 120% at 85% 0%, var(--roxo-800), transparent 65%), linear-gradient(160deg, var(--roxo-900), var(--roxo-950));
  /* a foto passa do topo; embaixo ela é cortada junto com os cantos arredondados do card */
  clip-path: inset(-140px 0 0 0 round 0 0 20px 20px);
}
.socio::before { content: ""; position: absolute; right: 80px; top: 28px; width: 290px; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(35deg, var(--roxo-600), var(--neon-400)); opacity: .9; }
.socio--inv { grid-template-columns: 400px minmax(0, 1fr); }
.socio--inv .socio__texto { grid-column: 2; }
.socio--inv::before { right: auto; left: 80px; }
/* sem sombra nem esmaecimento: a sombra vaza para o fundo branco acima do card e o esmaecimento acinzenta a roupa clara */
.socio__foto { position: absolute; right: 40px; bottom: 0; height: calc(100% + 76px); width: auto; max-width: none; }
.socio--inv .socio__foto { right: auto; left: 40px; }
.socio__texto { position: relative; z-index: 1; display: flex; flex-direction: column; }
.socio__tag { margin: 0 0 10px; font: 700 12px/1 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--neon-300); }
.socio__nome { margin: 0; font: 500 clamp(30px, 3.6vw, 46px)/1.05 var(--fonte-texto); color: var(--texto-suave-d); }
.socio__nome b { display: block; font: italic 800 clamp(36px, 4.4vw, 58px)/1.02 var(--fonte-titulo); color: var(--branco); letter-spacing: -.01em; }
.socio__nome span { display: block; margin-top: 2px; }
.socio__funcao { margin-top: auto; padding: 4px 0 4px 16px; border-left: 2px solid var(--neon-400); max-width: 44ch; }
.socio__papel { margin: 0 0 6px; font-weight: 700; font-size: 17px; color: var(--branco); }
.socio__faz { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texto-suave-d); }
.pecas__titulo { margin: 64px 0 20px; font-size: 18px; color: var(--n-700); }
.pecas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.peca { display: flex; flex-direction: column; border-top: 3px solid var(--roxo-700); padding-top: 18px; }
.peca__n { display: block; font: italic 800 15px/1 var(--fonte-titulo); color: var(--roxo-600); margin-bottom: 10px; }
.peca h3 { font-size: 18px; }
.peca p { margin: 0; color: var(--n-600); font-size: 15px; }
.peca p.peca__ajuda { margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 600; color: var(--n-700); }
.peca__ajuda span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--n-600); margin-bottom: 2px; }

/* ---------- Calculadora ---------- */
.ini-modos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ini-modo { display: flex; flex-direction: column; gap: 6px; background: var(--branco); border: 1px solid var(--n-200); border-radius: var(--raio-card); padding: 22px; color: inherit; text-decoration: none; box-shadow: var(--sombra-suave); transition: border-color .15s, transform .15s; }
.ini-modo:hover { border-color: var(--roxo-600); transform: translateY(-2px); }
.ini-modo h3 { margin: 6px 0 0; }
.ini-modo p { margin: 0; flex: 1; color: var(--n-600); font-size: 15px; }
.ini-modo__tag { align-self: flex-start; font: 700 12px/1 var(--fonte-texto); padding: 6px 10px; border-radius: var(--raio-pill); background: var(--ok-bg); color: var(--ok); }
.ini-modo__tag--cadastro { background: var(--lilas-100); color: var(--roxo-700); }
.ini-modo__abrir { margin-top: 10px; font-weight: 700; font-size: 15px; color: var(--roxo-600); text-decoration: underline; text-underline-offset: 3px; }
.ini-calc-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; }
.ini-calc-cta p { margin: 0; max-width: 60ch; }

/* ---------- Serviços (fundo escuro) ---------- */
.svc__para { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--neon-300); }
.svc h3, .svc-destaque h3 { margin: 0 0 12px; font-size: 22px; }
.svc__preco { margin: 0 0 14px; }
.svc__preco b { font: italic 800 34px/1 var(--fonte-titulo); color: var(--branco); font-variant-numeric: tabular-nums; }
.svc__preco--chave b { font-size: clamp(40px, 5vw, 52px); color: var(--ambar); }
.svc__preco span { display: block; margin-top: 6px; font-size: 14px; color: var(--texto-suave-d); }
.svc__desc { color: var(--texto-suave-d); margin: 0 0 16px; }
.svc__lista { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.svc__lista li { display: flex; gap: 10px; align-items: flex-start; }
.svc__lista li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8FFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat; }

.svc-destaque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; background: var(--roxo-800); border: 1px solid var(--neon-400); border-radius: 20px; padding: 32px; }
.svc-destaque__info .svc__desc { margin: 0; }
.svc__alem { margin: 0 0 20px; padding: 14px 16px; border-left: 3px solid var(--ambar); background: rgba(22, 10, 38, .35); border-radius: 0 10px 10px 0; font-size: 15px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.svc { display: flex; flex-direction: column; background: rgba(22, 10, 38, .45); border: 1px solid var(--linha-d); border-radius: var(--raio-card); padding: 28px; }
.svc .svc__lista { flex: 1; }
.svc .btn { align-self: flex-start; }
.svc-guia { margin: 28px 0 0; font-size: 17px; font-weight: 600; }
.svc-nota { margin: 10px 0 0; font-size: 14px; color: var(--texto-suave-d); max-width: 80ch; }

/* ---------- Perguntas e rodapé ---------- */
.ini-faq { max-width: 820px; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 6px; padding: 0; list-style: none; }
.rodape__links a { color: var(--neon-300); font-weight: 600; }

@media (max-width: 1000px) {
  .ini-modos, .pecas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ini-hero { padding: 44px 0 64px; }
  .ini-hero__in, .svc-destaque { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* coluna da foto (380px) maior que a foto (até ~365px) para o braço não passar por baixo do texto */
  .socio, .socio--inv { grid-template-columns: minmax(0, 1fr) 380px; padding: 32px; }
  .socio--inv { grid-template-columns: 380px minmax(0, 1fr); }
  .socio::before { width: 230px; right: 60px; }
  .socio--inv::before { left: 60px; }
  .socio__foto { right: 12px; height: calc(100% + 40px); }
  .socio--inv .socio__foto { left: 12px; }
  .pecas__titulo { margin-top: 48px; }
  .svc-destaque { padding: 26px 22px; gap: 20px; }
}
@media (max-width: 700px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* celular: foto em cima, passando do topo, apoiada na linha de um "palco" mais claro (268px); texto embaixo */
  .socios { gap: 96px; margin-top: 104px; }
  .socio, .socio--inv { display: block; min-height: 0; padding: 292px 22px 26px; clip-path: none;
    background: linear-gradient(to bottom, var(--roxo-800) 0 268px, transparent 268px), linear-gradient(160deg, var(--roxo-900), var(--roxo-950)); }
  .socio--inv .socio__texto { grid-column: auto; }
  .socio::before, .socio--inv::before { left: 50%; right: auto; top: 16px; width: 220px; transform: translateX(-50%); }
  /* top -72px + altura 340px = base em 268px, na linha do palco */
  .socio__foto, .socio--inv .socio__foto { left: 50%; right: auto; top: -72px; bottom: auto; height: 340px; transform: translateX(-50%); }
  .socio__funcao { margin-top: 18px; }
}
@media (max-width: 560px) {
  .ini-hero__acoes .btn, .svc .btn, .svc-destaque .btn, .ini-calc-cta .btn { width: 100%; }
  .ini-modos, .pecas { grid-template-columns: minmax(0, 1fr); }
  .mini { padding: 20px 18px; }
  .svc { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { .ini-modo:hover { transform: none; } }