/* ============================================================
   IKIGAI · SITE INSTITUCIONAL
   Construído sobre ikigai-design-system.css. Nenhuma cor nova,
   nenhum raio além de var(--raio). Carregar depois do design system.
   ============================================================ */

body{ padding: 0; font-weight: 400; }

img{ max-width: 100%; display: block; }

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}

a{ color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--roxo);
  outline-offset: 3px;
}

/* Sombra única do sistema. Baixa opacidade, bem difusa: dá plano, não pesa. */
:root{ --sombra: 0 24px 48px -28px rgba(36,29,38,.28), 0 2px 6px -2px rgba(36,29,38,.06); }

/* ---------- avisos internos ---------- */
#proposal-bar{
  position: sticky; top: 0; z-index: 60;
  background: var(--tinta); color: var(--giz); font-size: 13px;
}
#proposal-bar .container{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 9px; padding-bottom: 9px;
}
#proposal-bar strong{ color: var(--papel); font-weight: 600; }
#proposal-bar button{
  background: none; border: 1px solid rgba(231,224,229,0.35); color: var(--giz);
  border-radius: var(--raio); width: 22px; height: 22px; line-height: 1; cursor: pointer;
  flex: none; font-size: 13px;
}
#proposal-bar button:hover{ border-color: var(--giz); }
#proposal-bar.hidden{ display: none; }

/* ---------- nav ---------- */
header.nav{
  position: sticky; top: 0; z-index: 50;
  background: var(--papel);
  border-bottom: var(--borda);
}
header.nav .container{
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--e4); padding-bottom: var(--e4);
}
header.nav .mark{ height: 20px; width: auto; }
header.nav nav{ display: flex; align-items: center; gap: var(--e6); }
header.nav nav a.navlink{
  font-size: 14.5px; font-weight: 400; text-decoration: none; color: var(--tinta);
  opacity: 0.72; transition: opacity 0.15s;
}
header.nav nav a.navlink:hover{ opacity: 1; }
@media (max-width: 780px){
  header.nav nav a.navlink{ display: none; }
}

/* ---------- ritmo de seção ---------- */
/* Compensa a barra de aviso + o menu (ambos position:sticky) na hora de
   pular direto pra uma âncora, senão o topo da seção fica coberto por eles. */
section[id]{ scroll-margin-top: 112px; }
section{ padding-top: clamp(64px, 10vw, 120px); padding-bottom: clamp(64px, 10vw, 120px); }
section.tight{ padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(48px, 7vw, 84px); }
section.faixa-prof{ background: var(--prof); color: var(--papel); }
section.faixa-prof .ik-rotulo{ color: var(--lilas); }
section.on-giz{ background: var(--nevoa); }

.reveal{ opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; transition: none; } }

/* ---------- hero ---------- */
.hero{ padding-top: clamp(40px, 7vw, 76px); }
.hero-grid{
  display: grid; grid-template-columns: 1.05fr 0.85fr;
  gap: clamp(28px, 6vw, 56px); align-items: center;
}
.hero h1{ font-size: clamp(2.3rem, 4.6vw, 3.8rem); margin-top: var(--e4); max-width: 15ch; }
.hero .sub{ margin-top: var(--e5); font-size: 18px; color: var(--cinza); max-width: 50ch; }
.hero .ctas{ display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }

.hero-photo{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.hero-photo img.tela{ width: 100%; height: 100%; object-fit: cover; }
.hero-photo .selo{
  position: absolute; left: var(--e4); bottom: var(--e4);
  display: flex; align-items: center; gap: var(--e2);
  background: rgba(250,247,242,.92); backdrop-filter: blur(2px);
  border-radius: var(--raio); padding: 9px 14px;
}
.hero-photo .selo img{ height: 16px; }
.hero-photo .selo span{ font-family: var(--display); font-style: italic; font-size: 13px; color: var(--prof); }
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-photo{ order: -1; aspect-ratio: 16/10; }
}

/* ---------- rigor / franqueza ---------- */
.stat-row{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5);
  margin-top: var(--e6); padding-bottom: var(--e6); border-bottom: 1px solid rgba(201,179,199,.25);
}
.stat-row .num{ font-family: var(--display); font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; color: var(--papel); }
.stat-row .lbl{ margin-top: var(--e2); font-size: 13.5px; color: var(--lilas); max-width: 18ch; }
@media (max-width: 640px){ .stat-row{ grid-template-columns: 1fr; gap: var(--e4); text-align: left; } }

.split{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 72px); margin-top: var(--e6); }
.split h3{ font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.5rem; color: var(--lilas); margin-bottom: var(--e3); }
.split p{ color: var(--giz); }
@media (max-width: 700px){ .split{ grid-template-columns: 1fr; } }

/* ---------- o que não é ---------- */
.naoe-head{ max-width: 40ch; }
.naoe-head h2{ margin-top: var(--e3); }
.naoe-grid{
  margin-top: var(--e6);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--giz); border: var(--borda);
  box-shadow: var(--sombra);
}
.naoe-cell{ background: var(--papel); padding: var(--e5) var(--e4); }
.naoe-cell .line-icon{ width: 42px; height: 42px; color: var(--roxo); margin-bottom: var(--e4); }
.naoe-cell .word{ font-family: var(--display); font-style: italic; font-size: 1.15rem; }
.naoe-cell .small{ font-size: 13px; color: var(--cinza); margin-top: var(--e1); }
@media (max-width: 900px){ .naoe-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- diagnóstico (o quiz real monta dentro de #app) ---------- */
.diag-frame{
  margin-top: var(--e6);
  background: #fff; border: var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.diag-frame #app{ padding: clamp(24px, 5vw, 48px) 0; }
.diag-frame .qz-wrap{ padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }

/* ---------- para quem ---------- */
.icp-center{
  margin-top: var(--e6);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--roxo); border-radius: var(--raio); overflow: hidden;
  box-shadow: var(--sombra);
}
.icp-center > div{ padding: clamp(26px,4vw,40px); }
.icp-center .left{ background: var(--prof); color: var(--papel); }
.icp-center .left p.big{ font-family: var(--display); font-size: clamp(1.35rem,2.4vw,1.8rem); margin-top: var(--e3); line-height: 1.32; }
.icp-center .right{ background: var(--papel); display: flex; flex-direction: column; justify-content: center; }
.icp-center .right p{ font-size: 15.5px; color: var(--cinza); }
@media (max-width: 720px){ .icp-center{ grid-template-columns: 1fr; } }

.icp-rings{ margin-top: var(--e6); }
.icp-rings .ring-label{ font-size: 13px; font-weight: 600; color: var(--cinza); margin-bottom: var(--e3); }
.pill-row{ display: flex; flex-wrap: wrap; gap: var(--e2); }
.marca-pill{
  font-size: 13.5px; padding: 8px 14px; border-radius: var(--raio); border: var(--borda);
  background: #fff; white-space: nowrap; color: var(--cinza);
}
.marca-pill.decisor{ border-color: var(--roxo); color: var(--roxo); }

/* ---------- formatos (esteira) ---------- */
.path{ margin-top: var(--e7); }
.path-item{
  display: grid; grid-template-columns: 56px 1fr; gap: var(--e4);
  padding: var(--e5) 0; border-top: var(--borda);
}
.path-item:last-child{ border-bottom: var(--borda); }
.path-num{ font-family: var(--display); font-style: italic; font-size: 1.6rem; color: var(--lilas-fraco); }
.path-item h4{ font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.path-item p{ margin-top: var(--e1); font-size: 15px; color: var(--cinza); max-width: 56ch; }
.path-note{ margin-top: var(--e5); font-size: 14.5px; font-style: italic; color: var(--cinza); max-width: 52ch; }

/* ---------- sobre ---------- */
.about-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px,6vw,72px); align-items: center; }
.about-photo{
  position: relative;
  aspect-ratio: 4/5; border-radius: var(--raio); overflow: hidden;
  box-shadow: var(--sombra);
}
.about-photo img.tela{ width: 100%; height: 100%; object-fit: cover; }
.about-photo .scrim{
  position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(78,42,75,.15) 0%, rgba(36,29,38,.86) 92%);
}
.about-photo .conteudo{
  position: absolute; left: var(--e5); right: var(--e5); bottom: var(--e5);
  color: var(--papel);
}
.about-photo .conteudo img{ height: 30px; opacity: .9; margin-bottom: var(--e3); }
.about-photo .conteudo p{
  font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.35;
}
.about-photo .conteudo .foto-nota{
  margin-top: var(--e4); font-family: var(--corpo); font-style: normal; font-size: 11.5px;
  color: var(--lilas-fraco); letter-spacing: .04em;
}
.about-sig{ margin-top: var(--e5); display: flex; align-items: center; gap: var(--e3); }
.about-sig img{ height: 26px; opacity: 0.75; }
.about-sig .name{ font-family: var(--display); font-style: italic; font-size: 1.2rem; }
@media (max-width: 820px){ .about-grid{ grid-template-columns: 1fr; } .about-photo{ max-width: 340px; } }

/* ---------- prova ---------- */
.quote-card{
  margin-top: var(--e6); padding: clamp(28px,5vw,52px); border: 1px dashed var(--lilas);
  border-radius: var(--raio); background: #fff; position: relative;
  box-shadow: var(--sombra);
}
.quote-card .tag{
  position: absolute; top: -11px; left: clamp(24px,4vw,40px);
  background: var(--roxo); color: var(--papel); font-size: 11px; font-weight: 600;
  padding: 3px 11px; border-radius: var(--raio); letter-spacing: 0.08em; text-transform: uppercase;
}
.quote-card blockquote{
  font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-style: italic;
  line-height: 1.4; margin: 0; color: var(--cinza);
}
.quote-card .who{ margin-top: var(--e3); font-size: 14px; color: var(--roxo); font-weight: 600; }

/* ---------- cta final ---------- */
.cta-final h2{ max-width: 16ch; }
.cta-final .sub{ margin-top: var(--e4); font-size: 17px; color: var(--giz); max-width: 48ch; }
.cta-final .ctas{ display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e6); }
.cta-final .handle{ margin-top: var(--e7); font-size: 14px; color: var(--lilas); }
.cta-final .handle b{ color: var(--papel); font-weight: 600; }

.ik-btn--vazio-escuro{
  background: transparent; color: var(--papel); border: 1px solid var(--lilas-fraco);
  font-weight: 400;
}
.ik-btn--vazio-escuro:hover{ background: rgba(250,247,242,0.08); opacity: 1; }

/* ---------- footer ---------- */
footer{ background: var(--prof); color: var(--giz); }
footer .container{ padding-top: var(--e8); padding-bottom: var(--e5); }
footer a{ text-decoration: none; }

.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--e6);
}
.footer-brand .foot-mark{ height: 20px; margin-bottom: var(--e3); }
.footer-brand .taglinewrap{
  font-family: var(--display); font-style: italic; font-size: 15px; color: var(--lilas);
}
.footer-brand .foot-desc{
  margin-top: var(--e3); font-size: 13.5px; line-height: 1.6; color: var(--lilas-fraco); max-width: 32ch;
}

.footer-col{ display: flex; flex-direction: column; gap: var(--e2); }
.foot-heading{
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lilas-fraco); margin-bottom: var(--e2);
}
.footer-col a, .footer-col .foot-static{
  font-size: 14px; color: var(--giz); opacity: .82; transition: opacity .15s;
}
.footer-col a:hover{ opacity: 1; text-decoration: underline; }
.footer-col .foot-static{ opacity: .6; }

@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; margin-bottom: var(--e3); }
}
@media (max-width: 520px){
  .footer-grid{ grid-template-columns: 1fr; }
}

footer .ik-regua{ margin: var(--e6) 0 var(--e5); background: rgba(201,179,199,0.2); }
footer .bottom{ display: flex; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; font-size: 12px; color: var(--lilas-fraco); }

/* ============================================================
   Telas do quiz (quiz.js). Movido do index.html original do
   diagnóstico standalone para cá, sem nenhuma alteração de regra.
   ============================================================ */
.qz-wrap{ max-width: 640px; margin: 0 auto; }
.qz-barra{ margin-bottom: var(--e7); }
.qz-tela{ animation: qz-entra .25s ease; }
@keyframes qz-entra{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.qz-tela--inicio{ padding-top: var(--e2); }
.qz-selos{ display:flex; gap:var(--e5); flex-wrap:wrap; margin-top:var(--e6); }
.qz-opcoes{ display:flex; flex-direction:column; gap:var(--e3); margin-top:var(--e6); }
.qz-opcao{
  text-align:left;
  background:#fff; border:1px solid var(--giz); border-radius:var(--raio);
  padding: var(--e4) var(--e5);
  font:inherit; font-size:16px; color:var(--tinta);
  cursor:pointer; transition: border-color .15s, background .15s;
}
.qz-opcao:hover{ border-color:var(--roxo); background:var(--nevoa); }
.qz-opcao:active{ transform: translateY(1px); }
.qz-form{ display:flex; flex-direction:column; gap:var(--e3); margin-top:var(--e6); max-width:440px; }
.qz-privacidade{ margin-top:var(--e3); font-size:12px; color:var(--cinza); }
.qz-tela--resultado .ik-corpo{ margin-top:var(--e4); }
.qz-video-slot{ border:1px dashed var(--lilas); }
@media (max-width:640px){ .qz-opcao{ padding: var(--e3) var(--e4); } }