/* Landing: secretária de IA para médicos. Usa os tokens e o hero de base.css. */

/* ---------- hero com chat de exemplo ---------- */
.hero__grade--chat { align-items: center; padding-bottom: clamp(52px, 7vw, 88px); }
.hero__grade--chat .hero__texto { padding-bottom: 0; }
.aviso-ia { margin-top: 22px; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; line-height: 1.6; color: var(--cinza); max-width: 520px; }


/* ---------- seções ---------- */
.sec { padding-block: clamp(56px, 8vw, 96px); }
.sec--osso { background: var(--osso); }
.sec--escura { position: relative; overflow: hidden; background: var(--tinta); color: var(--osso); }
.sec--escura::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,219,77,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,219,77,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, #000 20%, transparent 80%); }
.sec > .container { position: relative; z-index: 1; }
.sec__topo { max-width: 780px; margin-bottom: clamp(28px, 4vw, 44px); }
.sec__topo .rotulo { margin-bottom: 20px; }
.sec--osso .rotulo { color: var(--teal-texto); }
.sec--osso .rotulo::before { background: var(--teal-escuro); box-shadow: none; }
.sec__lead { margin-top: 18px; font-size: clamp(1.02rem, 1.5vw, 1.14rem); line-height: 1.55; color: var(--cinza-escuro); }
.sec--escura h2.titulo { color: var(--osso); }
.sec--escura h2.titulo em { color: var(--teal-claro); }
.sec--escura .sec__lead { color: var(--cinza); }
.sec__fecho { max-width: 780px; margin-top: 30px; font-size: 1.12rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.45; }
.sec__fecho strong { color: var(--teal-escuro); }

/* ---------- dores ---------- */
.dores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dor { padding: 26px; border: 1px solid var(--linha); border-radius: 18px; background: var(--osso-2); }
.dor__n { display: block; margin-bottom: 18px; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .2em; color: var(--teal-texto); }
.dor h3 { margin-bottom: 8px; font-weight: 700; font-size: 1.4rem; letter-spacing: -.035em; line-height: 1.1; }
.dor p { font-size: .95rem; line-height: 1.55; color: var(--cinza-escuro); }

/* ---------- mecanismo ---------- */
.mec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mec__item { padding: 26px; border: 1px solid rgba(255,219,77,.22); border-radius: 18px; background: rgba(16,16,16,.7); }
.mec__item svg { width: 28px; height: 28px; margin-bottom: 16px; color: var(--teal-claro); }
.mec__item h3 { margin-bottom: 8px; font-weight: 700; font-size: 1.35rem; letter-spacing: -.035em; }
.mec__item p { font-size: .95rem; line-height: 1.55; color: var(--cinza); }
.limite { margin-top: 22px; padding: 16px 20px; border: 1px dashed rgba(255,219,77,.4); border-radius: 14px; font-size: .95rem; line-height: 1.5; color: var(--osso); }
.limite strong { color: var(--teal-claro); }

/* ---------- caminhos ---------- */
.caminhos { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: stretch; }
.via { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--linha); border-radius: 20px; background: var(--osso-2); }
.via__tag { align-self: flex-start; margin-bottom: 16px; padding: 4px 10px; border: 1px solid var(--teal-escuro); border-radius: 999px; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-texto); }
.via h3 { margin-bottom: 8px; font-weight: 700; font-size: 1.8rem; letter-spacing: -.04em; line-height: 1.05; }
.via__lead { margin-bottom: 18px; font-size: .98rem; line-height: 1.5; color: var(--cinza-escuro); }
.via ul { display: grid; gap: 10px; margin-bottom: 22px; }
.via li { position: relative; padding-left: 26px; font-size: .94rem; line-height: 1.45; }
.via li::before { content: ""; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); box-shadow: inset 0 0 0 4px var(--osso-2); outline: 1.5px solid var(--teal); }
.via__nota { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linha); font-size: .8rem; line-height: 1.5; color: var(--cinza-escuro); }
.via .pilula { margin-top: 20px; align-self: flex-start; }
.via--forte { border-color: rgba(255,219,77,.32); background: var(--tinta); color: var(--osso); box-shadow: 0 0 70px rgba(255,200,0,.18); }
.via--forte .via__tag { border-color: rgba(255,219,77,.5); color: var(--teal-claro); }
.via--forte .via__lead { color: var(--cinza); }
.via--forte li::before { box-shadow: inset 0 0 0 4px var(--tinta); }
.via--forte .via__nota { border-top-color: rgba(243,242,237,.14); color: var(--cinza); }
.pilula--osso { border: 1px solid var(--tinta); color: var(--tinta); }
.pilula--osso:hover { border-color: var(--teal-escuro); }

/* ---------- linha do tempo ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.etapa { padding: 28px; border: 1px solid rgba(255,219,77,.22); border-radius: 18px; background: rgba(16,16,16,.7); }
.etapa__n { display: block; margin-bottom: 20px; font-family: var(--mono); font-size: 2.2rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--teal-claro); }
.etapa h3 { margin-bottom: 6px; font-weight: 700; font-size: 1.35rem; letter-spacing: -.035em; line-height: 1.1; }
.etapa__dur { display: block; margin-bottom: 14px; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); }
.etapa p { font-size: .93rem; line-height: 1.55; color: var(--cinza); }
.etapa ul { display: grid; gap: 8px; margin-top: 4px; }
.etapa li { position: relative; padding-left: 18px; font-size: .93rem; line-height: 1.45; color: var(--osso); }
.etapa li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 1.5px; background: var(--teal); }
.prazo { margin-top: 22px; font-size: .92rem; line-height: 1.55; color: var(--cinza); max-width: 760px; }
.prazo strong { color: var(--osso); font-weight: 500; }

/* ---------- quem conduz ---------- */
.conduz { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.conduz__foto { overflow: hidden; border-radius: 20px; border: 1px solid var(--linha); aspect-ratio: 4 / 5; }
.conduz__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.conduz p { margin-top: 14px; max-width: 560px; font-size: 1.05rem; line-height: 1.55; color: var(--cinza-escuro); }

/* ---------- fora do escopo ---------- */
.fora { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; margin-bottom: 26px; }
.fora li { position: relative; padding: 16px 18px 16px 46px; border: 1px solid var(--linha); border-radius: 14px; background: var(--osso-2); font-size: .96rem; line-height: 1.4; }
.fora li::before { content: "×"; position: absolute; left: 18px; top: 50%; transform: translateY(-52%); font-family: var(--mono); font-size: 1.2rem; color: var(--cinza-escuro); }
.promessa { max-width: 780px; padding: 22px 24px; border-left: 3px solid var(--teal); background: var(--osso-2); border-radius: 0 14px 14px 0; font-size: 1.02rem; line-height: 1.55; }
.promessa strong { color: var(--teal-texto); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { border: 1px solid var(--linha); border-radius: 14px; background: var(--osso-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: 1.3rem; font-weight: 400; color: var(--teal-escuro); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; font-size: .96rem; line-height: 1.6; color: var(--cinza-escuro); }
/* FAQ em seção escura */
.sec--escura .faq details { border-color: rgba(243,242,237,.1); background: rgba(255,255,255,.04); transition: border-color .2s ease; }
.sec--escura .faq details[open], .sec--escura .faq details:hover { border-color: rgba(255,219,77,.32); }
.sec--escura .faq summary { color: var(--osso); }
.sec--escura .faq summary::after { color: var(--teal-claro); }
.sec--escura .faq details p { color: var(--cinza); }

/* ---------- ajustes da chamada final ---------- */
.chamada .nota { margin-top: 16px; font-size: .82rem; line-height: 1.5; color: var(--cinza); max-width: 560px; margin-inline: auto; }

/* ---------- telas menores ---------- */
@media (max-width: 960px) {
  .hero__grade--chat { grid-template-columns: 1fr; gap: 36px; }
  .dores, .passos { grid-template-columns: 1fr; }
  .mec, .caminhos, .fora { grid-template-columns: 1fr; }
  .conduz { grid-template-columns: 150px 1fr; }
}
@media (max-width: 520px) {
  .conduz { grid-template-columns: 1fr; }
  .conduz__foto { max-width: 200px; }
  .via, .dor, .mec__item, .etapa { padding: 22px; }
  .via .pilula { width: 100%; }
}

/* título do hero é mais longo que o da home */
.hero__grade--chat h1 { font-size: clamp(2.4rem, 5.4vw, 4.3rem); max-width: 720px; }
.conduz .rotulo { margin-bottom: 16px; }

/* =====================================================================
   Peças da página completa: comparativo, perfil, começar, formulário,
   botão fixo e página de privacidade
   ===================================================================== */
.sec--osso + .sec--osso { border-top: 1px solid var(--linha); }

/* ---------- comparativo ---------- */

/* ---------- para quem é ---------- */
.perfil { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.perfil__col { padding: 30px; border: 1px solid rgba(255,219,77,.22); border-radius: 18px; background: rgba(16,16,16,.7); }
.perfil__col h3 { margin-bottom: 18px; font-weight: 700; font-size: 1.4rem; letter-spacing: -.035em; }
.perfil__col ul { display: grid; gap: 14px; }
.perfil__col li { position: relative; padding-left: 30px; font-size: .97rem; line-height: 1.5; color: var(--osso); }
.perfil__sim li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 13px; height: 7px; border-left: 2px solid var(--teal-claro); border-bottom: 2px solid var(--teal-claro); transform: rotate(-45deg); }
.perfil__nao li { color: var(--cinza); }
.perfil__nao li::before { content: "×"; position: absolute; left: 2px; top: -.1em; font-family: var(--mono); font-size: 1.25rem; color: var(--cinza); }

/* ---------- como começar ---------- */
.comecar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.passo-c { padding: 28px; border: 1px solid var(--linha); border-radius: 18px; background: var(--osso-2); }
.passo-c__n { display: block; margin-bottom: 18px; font-family: var(--mono); font-size: 2.2rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--teal-texto); }
.passo-c h3 { margin-bottom: 8px; font-weight: 700; font-size: 1.35rem; letter-spacing: -.035em; line-height: 1.1; }
.passo-c p { font-size: .95rem; line-height: 1.55; color: var(--cinza-escuro); }

/* ---------- contato: tudo vai direto para o WhatsApp ---------- */
.contato .avatar { margin-inline: auto; }
.contato .tel a { color: var(--teal-claro); text-underline-offset: 4px; }

/* ---------- botão fixo ---------- */
.flutuante { position: fixed; z-index: 60; right: 18px; bottom: 18px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.flutuante--visivel { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- página de privacidade ---------- */
.legal-topo { background: var(--tinta); color: var(--osso); }
.legal-topo .topo { padding-block: 22px; }
.legal { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 84px) var(--lateral); }
.legal h1 { margin-bottom: 10px; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.legal__data { margin-bottom: 30px; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza-escuro); }
.legal h2 { margin: 34px 0 8px; font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; }
.legal p, .legal li { font-size: 1rem; line-height: 1.65; color: var(--cinza-escuro); }
.legal ul { display: grid; gap: 6px; padding-left: 22px; list-style: disc; }
.legal a { color: var(--teal-texto); text-underline-offset: 3px; }

/* ---------- telas menores ---------- */
@media (max-width: 960px) {
  .perfil, .comecar { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .flutuante { left: 16px; right: 16px; bottom: 14px; }
  .perfil__col, .passo-c { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .flutuante { transition: none; } }

/* foco visível também em botões e resumos do FAQ */
button:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 12px; }

/* botões de verdade (formulário) com o mesmo visual dos links em pílula */
button.pilula { border: 0; cursor: pointer; font-family: var(--grot); }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 12px; }

/* =====================================================================
   Página do CRM com IA: direta, com poucos textos e a oferta em destaque
   ===================================================================== */
.dores4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dor4 { display: flex; align-items: flex-start; gap: 22px; padding: 30px; border: 1px solid var(--linha); border-radius: 18px; background: var(--osso-2); }
.dor4__n { flex: none; padding-top: .55rem; font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .2em; color: var(--teal-texto); }
.dor4 p { font-weight: 700; font-size: clamp(1.25rem, 2.1vw, 1.65rem); letter-spacing: -.035em; line-height: 1.15; }

.inclui { display: grid; gap: 12px; margin-bottom: 18px; }
.inclui__item { display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: start; padding: 24px 28px; border: 1px solid var(--linha); border-radius: 16px; background: var(--osso-2); }
.inclui__n { padding-top: 4px; font-family: var(--mono); font-size: 1.7rem; letter-spacing: -.04em; line-height: 1; color: var(--teal-texto); }
.inclui__item h3 { margin-bottom: 4px; font-weight: 700; font-size: clamp(1.3rem, 2.1vw, 1.7rem); letter-spacing: -.035em; line-height: 1.1; }
.inclui__item p { font-size: 1.02rem; line-height: 1.45; color: var(--cinza-escuro); }
.semlimite { display: flex; align-items: center; gap: 16px; padding: 22px 26px; border-radius: 16px; background: var(--tinta); color: var(--osso); font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 1.45rem); letter-spacing: -.03em; line-height: 1.25; }
.semlimite::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 14px var(--teal); }

.invest { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px; align-items: stretch; }
.preco-card { display: flex; flex-direction: column; padding: 32px; border: 1px solid rgba(255,219,77,.22); border-radius: 20px; background: rgba(16,16,16,.72); }
.preco-card__rotulo { margin-bottom: 20px; font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-claro); }
.preco { font-weight: 700; font-size: clamp(2.7rem, 4.6vw, 4rem); letter-spacing: -.05em; line-height: 1; color: var(--osso); }
.preco small { display: block; margin-top: 10px; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }
.preco-card p { margin-top: 20px; font-size: 1.02rem; line-height: 1.5; color: var(--cinza); }
.preco-card p strong { font-weight: 500; color: var(--osso); }
.preco-card .preco-card__nota { margin-top: auto; padding-top: 18px; font-size: .86rem; color: var(--teal-claro); }
.preco-card--destaque { border-color: rgba(255,219,77,.5); background: linear-gradient(180deg, rgba(255,200,0,.16), rgba(16,16,16,.82)); box-shadow: 0 0 70px rgba(255,200,0,.2); }
.invest__regras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.invest__regras p { padding: 20px 22px; border: 1px solid rgba(243,242,237,.12); border-radius: 14px; font-size: .98rem; line-height: 1.5; color: var(--cinza); }
.invest__regras strong { font-weight: 500; color: var(--osso); }
.invest__cta { margin-top: 30px; }


.avatar { width: 78px; height: 78px; margin-bottom: 22px; overflow: hidden; border: 2px solid rgba(255,219,77,.5); border-radius: 50%; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.7); transform-origin: 48% 26%; } /* aproxima o rosto no círculo */

@media (max-width: 960px) {
  .invest { grid-template-columns: 1fr; }
  .invest__regras, .dores4 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .preco-card, .dor4, .inclui__item { padding: 22px; }
  .inclui__item { grid-template-columns: 40px 1fr; gap: 12px; }
}

/* =====================================================================
   Página comercial: a IA faz o atendimento inteiro (sem preço nem prazo)
   ===================================================================== */

.faz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.faz__item { padding: 28px; border: 1px solid rgba(255,219,77,.22); border-radius: 18px; background: rgba(16,16,16,.7); }
.faz__n { display: block; margin-bottom: 22px; font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .2em; color: var(--teal-claro); }
.faz__item h3 { margin-bottom: 12px; font-weight: 700; font-size: clamp(1.45rem, 2.1vw, 1.85rem); letter-spacing: -.04em; line-height: 1.05; }
.faz__item p { font-size: 1.02rem; line-height: 1.5; color: var(--cinza); }

.sec--escura .inclui__item { border-color: rgba(255,219,77,.22); background: rgba(16,16,16,.7); }
.sec--escura .inclui__n { color: var(--teal-claro); }
.sec--escura .inclui__item p { color: var(--cinza); }
.sec--escura .semlimite { border: 1px solid rgba(255,219,77,.45); background: rgba(255,200,0,.14); }
.oferta__cta { margin-top: 28px; }


@media (max-width: 1100px) { .faz { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) {
}
@media (max-width: 560px) {
  .faz { grid-template-columns: 1fr; }
  .faz__item { padding: 22px; }
}

/* ---------- quem é o Lucas ---------- */
.quem__grade { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.quem__foto { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 26px; background: var(--tinta); box-shadow: 0 40px 80px -40px rgba(5,5,5,.55), 0 0 70px -10px rgba(255,200,0,.35); }
.quem__foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid rgba(255,219,77,.35); background: linear-gradient(180deg, rgba(5,5,5,0) 60%, rgba(5,5,5,.35) 100%); }
.quem__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.quem__texto .rotulo { margin-bottom: 18px; }
.quem__texto h2 { margin-bottom: 22px; }
.quem__texto p { max-width: 560px; font-size: 1.08rem; line-height: 1.6; color: var(--cinza-escuro); }
.quem__texto p + p { margin-top: 14px; }
.quem__texto p strong { color: var(--tinta); }
.quem__numeros { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 34px; margin: 28px 0 30px; padding-top: 24px; border-top: 1px solid var(--linha); }
.quem__numeros strong { display: block; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--teal-texto); }
.quem__numeros span { display: block; margin-top: 6px; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza-escuro); }
@media (max-width: 960px) {
  .quem__grade { grid-template-columns: 1fr; }
  .quem__foto { width: min(100%, 420px); }
}
@media (max-width: 520px) {
  .quem__numeros { grid-template-columns: repeat(3, 1fr); gap: 10px 14px; }
  .quem__texto .pilula { width: 100%; }
}