/* =========================================================
   Salvatierra Odontologia — Landing page
   Tokens do Guia de Identidade Visual (Você Marketing)
   #232F47 · #8B6637 · #F4D78F · #DFCA99 · #FFFFFF · Poppins
   ========================================================= */

:root {
  --navy:        #232F47;
  --navy-deep:   #141C2C;
  --navy-lift:   #2D3B57;
  --bronze:      #8B6637;
  --gold:        #F4D78F;
  --gold-sand:   #DFCA99;
  --white:       #FFFFFF;
  --cream:       #FAF6EE;
  --cream-deep:  #F2E9D9;
  --line:        #E6DCCA;
  --line-dark:   rgba(244,215,143,.22);
  --ink:         #1B2434;
  --ink-soft:    #5A6478;

  --font: "Poppins", "Segoe UI", system-ui, sans-serif;
  --s--2: clamp(.72rem, .7rem + .1vw, .78rem);
  --s--1: clamp(.85rem, .82rem + .14vw, .93rem);
  --s-0:  clamp(1rem, .96rem + .2vw, 1.1rem);
  --s-1:  clamp(1.18rem, 1.08rem + .45vw, 1.45rem);
  --s-2:  clamp(1.5rem, 1.28rem + .95vw, 2.1rem);
  --s-3:  clamp(1.95rem, 1.5rem + 2vw, 3.1rem);
  --s-4:  clamp(2.4rem, 1.65rem + 3.4vw, 4.6rem);

  --gutter: clamp(1.15rem, 4.5vw, 2.25rem);
  --wrap: 1200px;
  --block: clamp(4rem, 9vw, 7.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

body {
  margin: 0; font-family: var(--font); font-size: var(--s-0); line-height: 1.68;
  color: var(--ink); background: var(--white); overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { margin: 0 0 .55em; color: var(--navy); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: var(--s-4); font-weight: 300; }
h2 { font-size: var(--s-3); font-weight: 300; }
h3 { font-size: var(--s-1); font-weight: 500; letter-spacing: -.015em; }
p { margin: 0 0 1.15em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

:focus-visible { outline: 3px solid var(--bronze); outline-offset: 4px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.block { padding-block: var(--block); }
.lede { font-size: var(--s-1); font-weight: 300; line-height: 1.52; color: var(--ink-soft); }
.skip { position: absolute; left: -9999px; background: var(--navy); color: #fff; padding: .8rem 1.2rem; z-index: 100; }
.skip:focus { left: .5rem; top: .5rem; }

/* ---- Fio dourado: divisor de seção com a estrela ---- */
.rule { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.6rem; color: var(--bronze); }
.rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-sand), transparent); }
.rule span { font-size: var(--s--1); font-weight: 500; letter-spacing: .01em; }
.sec--navy .rule { color: var(--gold); }
.sec--navy .rule::after { background: linear-gradient(90deg, rgba(244,215,143,.5), transparent); }

/* Estrela da marca */
.star { width: 1em; height: 1em; flex: none; background: currentColor;
  -webkit-mask: var(--star) center/contain no-repeat; mask: var(--star) center/contain no-repeat; }
:root { --star: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 0c4 26 20 46 50 50-30 4-46 24-50 50-4-26-20-46-50-50C30 46 46 26 50 0z"/></svg>'); }

/* ---- Pattern de arcos da marca ---- */
.arcs { position: absolute; pointer-events: none; opacity: .5; }
.arcs path { fill: none; }

/* ---- Botões ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: var(--s-0); text-decoration: none; cursor: pointer;
  padding: 1rem 1.9rem; border: 1.5px solid transparent; border-radius: 999px; line-height: 1.25;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background-color .18s, color .18s, border-color .18s, box-shadow .18s;
}
.btn--primary {
  background: var(--gold); color: var(--navy); position: relative; overflow: hidden;
  box-shadow: 0 10px 28px -12px rgba(244,215,143,.85);
  animation: cta-pulsa 2.8s ease-in-out infinite;
}
/* brilho que atravessa o botao de tempos em tempos */
.btn--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(255,255,255,.72) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: cta-brilho 4.6s ease-in-out infinite;
}
.btn--primary:hover { background: #fff; transform: translateY(-2px) scale(1.02); animation-play-state: paused; }
.btn--primary:hover::after { animation-play-state: paused; opacity: 0; }

@keyframes cta-pulsa {
  0%, 100% { transform: scale(1);     box-shadow: 0 10px 28px -12px rgba(244,215,143,.85); }
  50%      { transform: scale(1.035); box-shadow: 0 16px 38px -10px rgba(244,215,143,1); }
}
@keyframes cta-brilho {
  0%, 62%  { transform: translateX(-130%); }
  88%, 100%{ transform: translateX(130%); }
}
.btn--line { border-color: rgba(255,255,255,.4); color: #fff; }
.btn--line:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn--dark { border-color: var(--navy); color: var(--navy); }
.btn--dark:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

/* ---- Cabeçalho ---- */
.head {
  position: sticky; top: 0; z-index: 60; background: rgba(20,28,44,.92);
  backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--line-dark);
  padding-top: env(safe-area-inset-top, 0px);
}
.head__in { display: flex; align-items: center; gap: 1rem; min-height: 70px; }
.head__logo img { width: clamp(104px, 12vw, 132px); }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.7rem, 2.2vw, 2.1rem); }
.nav a { text-decoration: none; font-size: var(--s--1); font-weight: 400; color: rgba(255,255,255,.82); padding: .35rem 0; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.nav .btn { padding: .68rem 1.35rem; font-size: var(--s--1); }
.nav__toggle { display: none; margin-left: auto; width: 46px; height: 42px; cursor: pointer;
  background: none; border: 1px solid var(--line-dark); border-radius: 6px; color: var(--gold); }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 20px; height: 1.5px; background: currentColor; margin-inline: auto; position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }
@media (max-width: 920px) {
  .nav__toggle { display: block; }
  .nav { position: fixed; inset: 70px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-deep); padding: .5rem var(--gutter) 1.6rem; margin: 0;
    transform: translateY(-120%); transition: transform .28s ease; max-height: calc(100dvh - 70px); overflow-y: auto; }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding: 1rem 0; border-bottom: 1px solid var(--line-dark); }
  .nav .btn { margin-top: 1.2rem; }
}

/* ---- Hero ---- */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; }
.hero__arcs { top: -14%; right: -16%; width: min(58rem, 95vw); z-index: 0; opacity: .55; }
.hero__glow { position: absolute; z-index: 0; inset: auto auto -30% -20%; width: 42rem; height: 42rem;
  background: radial-gradient(circle, rgba(244,215,143,.14), transparent 64%); pointer-events: none; }
.hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(3.2rem, 7vw, 6rem); }
.hero__mark { width: clamp(158px, 19vw, 215px); margin-bottom: clamp(1.5rem, 2.6vw, 2rem); }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { color: rgba(255,255,255,.8); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero__meta { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; font-size: var(--s--1); color: rgba(255,255,255,.62); }
.hero__meta span { display: flex; align-items: center; gap: .5rem; }
.hero__meta .star { color: var(--gold); font-size: .8em; }

.hero__figure { position: relative; }
.hero__figure::before {
  content: ""; position: absolute; inset: 1.6rem -1.6rem -1.6rem 1.6rem;
  border: 1px solid var(--line-dark); border-radius: 240px 240px 18px 18px;
}
.hero__figure img { position: relative; border-radius: 240px 240px 18px 18px; width: 100%;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.65); }
.hero__score {
  position: absolute; z-index: 3; left: -1.2rem; bottom: 2.2rem;
  background: #fff; color: var(--navy); border-radius: 14px; padding: .95rem 1.2rem;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.5); max-width: 13.5rem;
}
.hero__score b { display: block; font-size: 1.7rem; font-weight: 600; line-height: 1; }
.hero__score i { display: block; font-style: normal; color: var(--bronze); letter-spacing: .1em; font-size: .85rem; margin: .25rem 0 .3rem; }
.hero__score small { font-size: var(--s--2); color: var(--ink-soft); line-height: 1.4; display: block; }
@media (max-width: 920px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__figure { order: -1; max-width: 400px; margin-inline: auto; }
  .hero__figure::before { inset: 1rem -1rem -1rem 1rem; }
  .hero__mark { margin-inline: auto; }
  .hero__in > div:last-child { text-align: left; }
}

/* ---- Barra de credibilidade ---- */
.strip { background: var(--cream); border-bottom: 1px solid var(--line); }
.strip ul { list-style: none; margin: 0; padding-block: 1.5rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem 2.5rem; }
.strip li { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--s--1); color: var(--navy); }
.strip .star { color: var(--bronze); margin-top: .35rem; font-size: .8rem; }

/* ---- Seções ---- */
.sec--cream { background: var(--cream); }
.sec--navy { background: var(--navy); color: rgba(255,255,255,.8); position: relative; overflow: hidden; }
.sec--navy h2, .sec--navy h3 { color: #fff; }
.sec--navy .lede { color: rgba(255,255,255,.7); }
.sec__head { max-width: 48rem; margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }

/* ---- Sinais / dores ---- */
.signs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-dark);
  border: 1px solid var(--line-dark); border-radius: 16px; overflow: hidden; }
.signs li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.5rem;
  background: var(--navy); font-size: var(--s-0); color: rgba(255,255,255,.86); }
.signs .star { color: var(--gold); margin-top: .4rem; font-size: .75rem; }
@media (min-width: 760px) { .signs { grid-template-columns: 1fr 1fr; } }

/* ---- Tratamentos ---- */
.treat { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.treat__row { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(1.8rem, 4.5vw, 3.5rem); align-items: center; }
.treat__row:nth-child(even) .treat__fig { order: 2; }
.treat__fig { position: relative; }
.treat__fig img { border-radius: 18px; width: 100%; }
.treat__fig::after { content: ""; position: absolute; inset: auto -.9rem -.9rem auto; width: 60%; height: 60%;
  border-right: 1px solid var(--gold-sand); border-bottom: 1px solid var(--gold-sand); border-radius: 0 0 18px 0; z-index: -1; }
.treat__tag { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--s--1); color: var(--bronze); margin-bottom: .9rem; }
.treat ul { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .6rem; }
.treat ul li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--s--1); color: var(--ink-soft); }
.treat ul .star { color: var(--gold-sand); margin-top: .35rem; font-size: .7rem; }
.treat .btn { margin-top: 1.8rem; }
@media (max-width: 860px) {
  .treat__row, .treat__row:nth-child(even) .treat__fig { grid-template-columns: 1fr; order: 0; }
  .treat__fig { max-width: 420px; }
}

/* ---- Casos: fileira única com rolagem contínua ---- */
.marquee { position: relative; overflow: hidden; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee__track { display: flex; gap: clamp(.9rem, 2vw, 1.4rem); width: max-content;
  animation: marquee 46s linear infinite; will-change: transform; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - clamp(.45rem, 1vw, .7rem))); } }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__track > * { flex: none; }
.marquee--quotes .marquee__track { animation-duration: 54s; align-items: stretch; }
.marquee--quotes .quote { width: clamp(262px, 29vw, 330px); }
.marquee figure { margin: 0; flex: none; width: clamp(238px, 26vw, 310px);
  background: var(--navy-deep); border: 1px solid var(--line-dark); border-radius: 16px; overflow: hidden; }
.marquee img { width: 100%; }
.marquee figcaption { padding: .9rem 1.1rem; font-size: var(--s--2); color: rgba(255,255,255,.62); line-height: 1.5; }

/* Sem animação: vira carrossel de rolagem manual */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask: none; mask: none; }
  .marquee__track { animation: none; }
  .marquee figure { scroll-snap-align: start; }
}

.cases__legal { margin-top: 1.8rem; font-size: var(--s--2); color: rgba(255,255,255,.5); max-width: 62ch; line-height: 1.6; }

/* ---- Autoridade ---- */
.dr { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.dr__fig { position: relative; }
.dr__fig img { border-radius: 18px; width: 100%; }
.dr__fig::before { content: ""; position: absolute; inset: -1.1rem -1.1rem 2.5rem 2.5rem;
  border: 1px solid var(--gold-sand); border-radius: 18px; z-index: -1; }
.dr__sig { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line);
  font-size: var(--s--1); color: var(--ink-soft); }
.dr ul { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .8rem; }
.dr ul li { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--s--1); }
.dr ul .star { color: var(--bronze); margin-top: .35rem; font-size: .78rem; }
@media (max-width: 860px) { .dr { grid-template-columns: 1fr; } .dr__fig { max-width: 360px; } }

/* ---- Bastidores ---- */
.inside { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); align-items: start; }
.inside figure { margin: 0; border-radius: 18px; overflow: hidden; position: relative; }
.inside img { width: 100%; }
.inside figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.3rem 1.1rem;
  background: linear-gradient(transparent, rgba(20,28,44,.88)); color: #fff; font-size: var(--s--1); }
@media (max-width: 900px) { .inside { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .inside { grid-template-columns: 1fr; } }

/* ---- Depoimentos ---- */
.quote { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; }
.quote i { font-style: normal; color: var(--bronze); letter-spacing: .14em; font-size: .9rem; margin-bottom: .9rem; }
.quote blockquote { margin: 0 0 1.2rem; font-size: var(--s--1); line-height: 1.65; flex: 1; color: var(--ink); }
.quote cite { font-style: normal; font-weight: 600; font-size: var(--s--1); color: var(--navy); }
.quote small { color: var(--ink-soft); font-size: var(--s--2); }

/* ---- FAQ ---- */
.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.25rem 2.6rem 1.25rem 0; font-weight: 500;
  font-size: var(--s-0); color: var(--navy); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .6rem; top: 1.75rem; width: 9px; height: 9px;
  border-right: 1.5px solid var(--bronze); border-bottom: 1.5px solid var(--bronze); transform: rotate(45deg); transition: transform .22s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding-bottom: 1.4rem; font-size: var(--s--1); color: var(--ink-soft); }

/* ---- CTA final ---- */
.end { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.end__arcs { bottom: -28%; left: -14%; width: min(44rem, 85vw); opacity: .4; }
.end__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.end h2 { color: #fff; }
.end p { color: rgba(255,255,255,.78); }
.end__card { background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); border-radius: 18px; padding: clamp(1.6rem, 3.5vw, 2.1rem); }
.end__card h3 { color: #fff; font-size: var(--s-0); }
.end__card dl { margin: 1.3rem 0 1.6rem; display: grid; gap: .9rem; font-size: var(--s--1); }
.end__card dt { color: var(--gold); font-weight: 500; }
.end__card dd { margin: 0; color: rgba(255,255,255,.82); }
.map { border: 0; width: 100%; height: clamp(200px, 30vw, 270px); border-radius: 12px; filter: saturate(.8) contrast(1.05); }
@media (max-width: 880px) { .end__in { grid-template-columns: 1fr; } }

/* ---- Rodapé ---- */
.foot { background: var(--navy-deep); color: rgba(255,255,255,.6); font-size: var(--s--1); }
.foot__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.2rem; padding-block: clamp(2.8rem, 5vw, 3.8rem); }
.foot img { width: 190px; margin-bottom: 1.2rem; }
.foot h4 { color: #fff; font-size: var(--s--1); font-weight: 600; margin: 0 0 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--gold); }
.foot__legal { border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.6rem; font-size: var(--s--2); line-height: 1.7; color: rgba(255,255,255,.44); }
@media (max-width: 760px) { .foot__in { grid-template-columns: 1fr; } }

/* ---- Barra fixa mobile ---- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; gap: .6rem;
  padding: .7rem var(--gutter); padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.97); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
.dock .btn { flex: 1; padding: .9rem .8rem; font-size: var(--s--1); }
.dock .btn--primary { animation: none; }
@media (max-width: 760px) { .dock { display: flex; } body { padding-bottom: 5.2rem; } }