
:root{
  --bg:#050505;
  --bg2:#0a0a0a;
  --panel:#0e0e0e;
  --gold:#d79a12;
  --gold2:#f0bd45;
  --text:#fff;
  --muted:#a7a7a7;
  --line:rgba(215,154,18,.28);
  --max:1240px;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(92%,var(--max));margin:auto}
.site-header{height:78px;background:rgba(5,5,5,.95);border-bottom:1px solid rgba(215,154,18,.14);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand img{width:190px;height:48px;object-fit:cover;object-position:left center}
.nav{display:flex;gap:28px;font-size:14px;color:#d9d9d9}
.nav a:hover{color:var(--gold2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 28px;border-radius:7px;background:linear-gradient(135deg,var(--gold2),var(--gold) 55%,#ac7100);border:1px solid rgba(255,221,144,.4);color:#fff;font-weight:800;text-transform:uppercase;font-size:14px;box-shadow:0 12px 34px rgba(215,154,18,.18);transition:.25s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 16px 38px rgba(215,154,18,.28)}
.btn-small{min-height:44px;padding:0 18px;font-size:12px}
.hero{overflow:hidden;background:radial-gradient(circle at 74% 42%,rgba(215,154,18,.14),transparent 30%),linear-gradient(90deg,#050505 0%,#050505 55%,#090909 100%)}
.hero-grid{min-height:640px;display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:56px}
.hero-copy{padding:72px 0}
.eyebrow{display:inline-block;color:var(--gold);font-weight:800;font-size:13px;letter-spacing:.08em;margin-bottom:14px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(42px,4.7vw,66px);line-height:1.02;letter-spacing:-.045em;margin-bottom:22px}
h1 span{color:var(--gold2)}
.hero-copy>p{max-width:650px;font-size:18px;line-height:1.65;color:var(--muted);margin-bottom:26px}
.hero-badges{display:flex;flex-wrap:wrap;gap:18px 24px;color:#d6d6d6;font-size:13px;margin-bottom:30px}
.hero-image-wrap{align-self:stretch;display:flex;align-items:flex-end;justify-content:center;position:relative}
.hero-image{width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:screen;opacity:.96}
.section{padding:92px 0;background:#f8f8f8;color:#111}
.section.dark{background:linear-gradient(180deg,#070707,#0b0b0b);color:#fff}
.section-head.center{text-align:center;max-width:900px;margin:0 auto 46px}
.section-head h2{font-size:clamp(32px,3.6vw,50px);line-height:1.08;letter-spacing:-.035em;margin-bottom:14px}
.section-head p{color:#747474;line-height:1.7;font-size:17px}
.dark .section-head p{color:var(--muted)}
.cards{display:grid;gap:18px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.five{grid-template-columns:repeat(5,1fr)}
.card{border:1px solid #e4e4e4;background:#fff;border-radius:var(--radius);padding:30px 26px;min-height:300px;box-shadow:0 18px 40px rgba(0,0,0,.04)}
.dark .card,.service{background:linear-gradient(145deg,#101010,#090909);color:#fff;border-color:var(--line)}
.card-gold{background:linear-gradient(145deg,#e8ad23,#cb8900);color:#111;border-color:#e8ad23}
.icon{width:54px;height:54px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:800;font-size:24px;margin-bottom:24px}
.card-gold .icon{color:#fff;border-color:rgba(255,255,255,.45)}
.card h3{font-size:22px;line-height:1.2;margin-bottom:14px}
.card p{color:#737373;line-height:1.65;font-size:14px}
.dark .card p,.service p{color:var(--muted)}
.service{min-height:320px}
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.audience-card{border:1px solid var(--line);border-radius:var(--radius);padding:40px;background:linear-gradient(145deg,#0f0f0f,#090909);position:relative;overflow:hidden}
.audience-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 50%,rgba(215,154,18,.09),transparent 34%);pointer-events:none}
.audience-card>*{position:relative}
.audience-icon{display:flex;width:70px;height:70px;align-items:center;justify-content:center;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-size:28px;margin-bottom:22px}
.audience-card h3{font-size:30px;margin-bottom:8px}
.audience-card p{color:#b9b9b9;line-height:1.6}
.audience-card ul{padding-left:20px;color:#ddd;line-height:1.9;margin:22px 0 28px}
.audience-card li::marker{color:var(--gold)}
.btn-outline{background:transparent;color:var(--gold2);border:1px solid var(--gold);box-shadow:none}
.btn-outline:hover{background:rgba(215,154,18,.08)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.timeline:before{content:"";position:absolute;top:34px;left:11%;right:11%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold),transparent)}
.timeline article{text-align:center;position:relative;padding:0 18px}
.timeline article>span{width:70px;height:70px;border:1px solid var(--gold);background:#fafafa;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--gold);font-size:18px;font-weight:800;position:relative;z-index:2}
.timeline h3{font-size:20px;margin-bottom:9px}
.timeline p{color:#777;line-height:1.55;font-size:14px}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.doctor-card{display:grid;grid-template-columns:42% 58%;align-items:stretch;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(145deg,#111,#090909)}
.doctor-card img{width:100%;height:100%;object-fit:cover;object-position:top center}
.doctor-card>div{padding:34px 28px}
.doctor-card h3{font-size:24px;margin-bottom:8px}
.doctor-card strong{color:var(--gold2);font-size:13px}
.doctor-card ul{padding-left:18px;color:#ccc;line-height:1.6;font-size:14px;margin:20px 0 0}
.form-section{background:radial-gradient(circle at 80% 40%,rgba(215,154,18,.10),transparent 32%),#050505;color:#fff}
.form-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.form-copy h2{font-size:clamp(36px,4vw,54px);line-height:1.06;letter-spacing:-.04em;margin-bottom:18px}
.form-copy p{color:var(--muted);line-height:1.7;font-size:16px}
.mini-badges{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px;color:#d7d7d7;font-size:13px}
.smart-form{background:#fff;color:#151515;border-radius:18px;padding:34px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.form-title{margin-bottom:18px}
.profile-switch{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e4e4e4;border-radius:9px;overflow:hidden;margin-bottom:26px}
.profile-btn{height:52px;border:0;background:#fff;font:inherit;font-weight:800;cursor:pointer}
.profile-btn.active{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.smart-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;color:#444}
.smart-form input,.smart-form select,.smart-form textarea{width:100%;border:1px solid #dedede;border-radius:7px;padding:13px 14px;font:inherit;background:#fff;color:#222;outline:none}
.smart-form input:focus,.smart-form select:focus,.smart-form textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(215,154,18,.10)}
.full{margin-top:16px}
.dynamic-fields{display:none;margin-top:16px}
.dynamic-fields.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.submit{width:100%;border:0;cursor:pointer;margin-top:22px}
.privacy{display:block;color:#7d7d7d;line-height:1.5;margin-top:13px}
.footer{border-top:1px solid var(--line);padding:32px 0;background:#050505}
.footer-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px}
.footer img{width:180px;height:46px;object-fit:cover;object-position:left center}
.footer p{color:#a5a5a5;font-size:13px;line-height:1.5;margin:0}
.footer strong{color:var(--gold2)}
@media(max-width:1100px){
  .nav{display:none}
  .cards.five{grid-template-columns:repeat(3,1fr)}
  .team-grid{grid-template-columns:1fr}
}
@media(max-width:800px){
  .header-inner>.btn{display:none}
  .brand img{width:160px}
  .hero-grid{grid-template-columns:1fr;min-height:auto}
  .hero-copy{padding:72px 0 28px}
  .hero-image-wrap{height:420px}
  .cards.three,.cards.five,.audience-grid,.timeline,.form-grid{grid-template-columns:1fr}
  .timeline:before{display:none}
  .team-grid{grid-template-columns:1fr}
  .doctor-card{grid-template-columns:1fr}
  .doctor-card img{height:360px}
  .grid2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer img{margin:auto}
}
@media(max-width:480px){
  .site-header{height:70px}
  h1{font-size:38px}
  .section{padding:70px 0}
  .smart-form{padding:22px 16px}
  .audience-card{padding:30px 22px}
}


/* =========================================================
   CORREÇÕES V2 — MOBILE / LOGO / HERO
   ========================================================= */

/* A logo agora é PNG transparente; não criar caixa/retângulo em volta */
.brand,
.footer img {
  background: transparent !important;
}

.brand img {
  width: 225px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

.footer img {
  width: 210px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

/* Hero sem corte excessivo */
.hero-image-wrap {
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: auto;
  max-height: 610px;
  object-fit: contain;
  object-position: bottom center;
  mix-blend-mode: normal;
}

/* Evita que o conteúdo do hero fique por baixo do header */
.hero {
  scroll-margin-top: 78px;
}

/* Formulário continua ocupando a largura útil no mobile */
.smart-form {
  width: 100%;
}

@media (max-width: 800px) {

  .site-header {
    height: 68px;
  }

  .header-inner {
    justify-content: center;
  }

  .brand img {
    width: 185px;
    max-height: 46px;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: auto;
  }

  .hero-copy {
    width: 100%;
    padding: 56px 0 28px;
    position: relative;
    z-index: 2;
  }

  .hero-copy h1 {
    font-size: clamp(37px, 10.5vw, 49px);
    line-height: 1.04;
  }

  .hero-copy > p {
    font-size: 16px;
    line-height: 1.6;
  }

  .hero-badges {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero-image-wrap {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    align-items: flex-end;
  }

  .hero-image {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    object-position: bottom center;
  }

  .footer-grid {
    gap: 18px;
  }

  .footer img {
    width: 190px;
  }

  .smart-form {
    border-radius: 14px;
  }
}

@media (max-width: 480px) {

  .container {
    width: min(93%, var(--max));
  }

  .brand img {
    width: 170px;
  }

  .hero-copy {
    padding-top: 46px;
  }

  .hero-copy h1 {
    font-size: 36px;
  }

  .hero-image {
    max-height: 390px;
  }

  .smart-form {
    padding: 22px 16px;
  }

  .profile-btn {
    font-size: 15px;
  }

  .footer img {
    width: 170px;
  }
}


/* =========================================================
   V3 — 3 PERFIS + FOTOS ORIGINAIS + ANIMAÇÕES
   ========================================================= */

body {
  overflow-x: hidden;
}

/* Hero com a foto original enviada */
.hero-image-wrap {
  overflow: visible;
}
.hero-image {
  width: 100%;
  height: auto;
  max-height: 650px;
  object-fit: contain;
  object-position: bottom center;
  mix-blend-mode: normal;
  filter: drop-shadow(0 18px 42px rgba(215,154,18,.08));
}

/* Três públicos */
.audience-grid {
  grid-template-columns: repeat(3, 1fr);
}
.audience-card {
  min-height: 470px;
  display: flex;
  flex-direction: column;
}
.audience-card .btn {
  margin-top: auto;
}

/* Seletor do formulário com 3 opções */
.profile-switch {
  grid-template-columns: repeat(3, 1fr);
}

/* ---------- Animações de entrada ---------- */
.reveal,
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .75s cubic-bezier(.2,.7,.2,1),
    transform .75s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible,
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.33s}

/* Hero animado sem depender do scroll */
.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy > p,
.hero-badges,
.hero-copy > .btn {
  opacity: 0;
  transform: translateY(22px);
  animation: heroIn .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-copy h1{animation-delay:.10s}
.hero-copy > p{animation-delay:.20s}
.hero-badges{animation-delay:.30s}
.hero-copy > .btn{animation-delay:.40s}
.hero-image {
  opacity: 0;
  transform: translateX(26px) scale(.985);
  animation: heroImageIn .9s .18s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes heroIn {
  to {opacity:1;transform:translateY(0)}
}
@keyframes heroImageIn {
  to {opacity:1;transform:translateX(0) scale(1)}
}

/* Movimento sutil na imagem principal */
@media (min-width: 801px) {
  .hero-image-wrap::after {
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    right:12%;
    bottom:8%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(215,154,18,.16),transparent 68%);
    filter:blur(12px);
    animation:pulseGlow 4s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes pulseGlow {
    0%,100% {transform:scale(.95);opacity:.55}
    50% {transform:scale(1.08);opacity:.9}
  }
}

/* Cards mais vivos */
.card,
.audience-card,
.doctor-card {
  transition:
    transform .32s cubic-bezier(.2,.7,.2,1),
    border-color .32s ease,
    box-shadow .32s ease;
}
.card:hover,
.audience-card:hover,
.doctor-card:hover {
  transform: translateY(-7px);
  border-color: rgba(215,154,18,.72);
  box-shadow: 0 22px 50px rgba(0,0,0,.22);
}
.audience-icon,
.icon,
.timeline article > span {
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.card:hover .icon,
.audience-card:hover .audience-icon {
  transform: translateY(-3px) scale(1.04);
  background: rgba(215,154,18,.08);
}

/* Botão com brilho passando */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content:"";
  position:absolute;
  top:-40%;
  left:-70%;
  width:45%;
  height:180%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .55s ease;
}
.btn:hover::after {
  left:135%;
}

/* Transição mais elegante dos formulários */
.dynamic-fields.active {
  animation: formSlide .34s cubic-bezier(.2,.7,.2,1);
}
@keyframes formSlide {
  from {opacity:0;transform:translateY(10px)}
  to {opacity:1;transform:translateY(0)}
}

/* Imagens da equipe */
.doctor-card img {
  object-fit: cover;
  object-position: center top;
}

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 1100px) {
  .audience-grid {
    grid-template-columns: 1fr 1fr;
  }
  .audience-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
  .audience-card:last-child {
    grid-column: auto;
  }
  .audience-card {
    min-height: auto;
  }
  .profile-switch {
    grid-template-columns: repeat(3, 1fr);
  }
  .profile-btn {
    padding: 0 8px;
    font-size: 13px;
  }
  .hero-image {
    max-height: 430px;
  }
}

@media (max-width: 430px) {
  .profile-switch {
    grid-template-columns: 1fr;
    border-radius: 10px;
  }
  .profile-btn {
    width: 100%;
    min-height: 48px;
  }
}


/* =========================================================
   V4 — MOBILE CENTRALIZADO + FORMULÁRIO OBJETIVO
   ========================================================= */

.form-title {
  display:flex;
  flex-direction:column;
  gap:5px;
}
.form-title span {
  color:#8b8b8b;
  font-size:12px;
  font-weight:500;
}
.optional {
  font-size:11px;
  color:#9a9a9a;
  font-weight:500;
}
.compact-grid {
  margin-top:0;
}
.smart-form textarea {
  min-height:100px;
}

/* Form mais compacto no desktop */
.smart-form {
  max-width: 760px;
  margin-left:auto;
  margin-right:auto;
}
.form-grid {
  grid-template-columns: .72fr 1.28fr;
  gap:55px;
}
.grid2 {
  gap:14px;
}
.dynamic-fields {
  margin-top:14px;
}
.smart-form input,
.smart-form select {
  min-height:48px;
}

/* MOBILE: centraliza completamente a abertura da página */
@media (max-width: 800px) {

  .hero {
    text-align:center;
  }

  .hero-grid {
    width:min(92%, 680px);
    margin:0 auto;
    align-items:center;
  }

  .hero-copy {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:48px 0 24px;
  }

  .hero-copy .eyebrow {
    width:100%;
    text-align:center;
  }

  .hero-copy h1 {
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .hero-copy > p {
    max-width:590px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .hero-badges {
    width:100%;
    max-width:430px;
    margin-left:auto;
    margin-right:auto;
    justify-items:center;
    text-align:center;
  }

  .hero-copy > .btn {
    width:auto;
    min-width:230px;
    margin-left:auto;
    margin-right:auto;
  }

  .hero-image-wrap {
    display:flex;
    justify-content:center;
    width:100%;
    margin:0 auto;
  }

  .hero-image {
    display:block;
    width:min(100%, 560px);
    margin:0 auto;
  }

  /* Formulário mais enxuto no mobile */
  .form-grid {
    grid-template-columns:1fr;
    gap:30px;
  }

  .form-copy {
    text-align:center;
  }

  .form-copy h2,
  .form-copy p {
    margin-left:auto;
    margin-right:auto;
  }

  .mini-badges {
    justify-content:center;
  }

  .smart-form {
    max-width:620px;
    margin:0 auto;
  }
}

@media (max-width: 480px) {

  .container {
    width:92%;
  }

  .hero-grid {
    width:92%;
  }

  .hero-copy {
    padding-top:40px;
  }

  .hero-copy h1 {
    font-size:34px;
    line-height:1.06;
    max-width:340px;
  }

  .hero-copy > p {
    font-size:15px;
    line-height:1.62;
    max-width:335px;
  }

  .hero-badges {
    max-width:330px;
    gap:8px;
    font-size:12px;
  }

  .hero-copy > .btn {
    width:auto;
    min-width:220px;
    padding:0 22px;
  }

  .profile-switch {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
  }

  .profile-btn {
    min-height:48px;
    padding:0 5px;
    font-size:12px;
  }

  .smart-form {
    padding:20px 14px;
  }

  .grid2 {
    grid-template-columns:1fr;
    gap:12px;
  }

  .smart-form textarea {
    min-height:92px;
  }

  .privacy {
    font-size:11px;
  }
}
