/* ============================================================
   MAISON ODONTOLOGIA ESPECIALIZADA — acabamento sobre a base
   Soft Frame. Paleta extraída dos assets reais da clínica:
   marfim da parede 3D, vinho das poltronas, tinta do logotipo.
   Blocos:
   1. fontes            2. tokens             3. reset e base
   4. utilidades        5. tipografia         6. botoes
   7. masthead          8. hero               9. ticker
   10. sobre            11. casos             12. especialidades
   13. atendimento      14. convenios         15. localizacao
   16. chamada          17. rodape            18. action bar
   19. reveals+efeitos  20. movimento reduzido 21. responsivo
   ============================================================ */

/* 1. FONTES - auto-hospedadas em fonts/, nenhuma rede externa */
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-italic-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-italic-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

/* 2. TOKENS - unica fonte de cor da pagina */
:root {
  color-scheme: light;

  --paper: #f2ede4;              /* marfim da parede 3D da recepção */
  --paper-deep: #eae3d5;         /* faixa e bandas de apoio */
  --surface: #fbf8f1;            /* cartão quente */
  --surface-note: #f1e6d9;       /* painel de apoio */

  --ink: #26201a;                /* tinta do logotipo */
  --muted: #67604f;              /* cinza quente das sombras da parede */

  --red: #9c2029;                /* vinho das poltronas: acento de marca */
  --red-deep: #7c161f;           /* botão sólido, links, foco */
  --red-press: #63121a;          /* hover/press */
  --red-soft: rgba(156, 32, 41, 0.08);
  --gold: #a8853f;               /* estrelas e detalhes */

  --wine: #301318;               /* painel escuro da chamada */
  --wine-deep: #230d11;          /* rodapé */
  --on-wine: #f5ebe1;
  --on-wine-muted: #cbb09e;

  --line: rgba(38, 32, 26, 0.12);
  --line-strong: rgba(38, 32, 26, 0.22);
  --line-on-wine: rgba(245, 235, 225, 0.22);

  --shadow-card: 0 1px 2px rgba(38, 32, 26, 0.07), 0 18px 44px -24px rgba(38, 32, 26, 0.3);
  --shadow-lift: 0 2px 4px rgba(38, 32, 26, 0.08), 0 26px 54px -24px rgba(38, 32, 26, 0.36);
  --shadow-photo: 0 24px 48px -28px rgba(38, 32, 26, 0.45);

  --radius-m: 24px;              /* cartões, fotos, mapa */
  --radius-s: 14px;              /* chips, legendas */
  --wrap: 1160px;
  --masthead-h: 76px;
  --ticker-dur: 40s;             /* duração da faixa: mais rápida no mobile */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. RESET E BASE */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

::selection { background: var(--red); color: var(--on-wine); }

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

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: #c9bda6;
  border-radius: 8px;
  border: 2px solid var(--paper);
}
html { scrollbar-width: thin; scrollbar-color: #c9bda6 var(--paper); }

/* 4. UTILIDADES */
.wrap {
  width: min(100% - clamp(2.5rem, 6vw, 3rem), var(--wrap));
  margin-inline: auto;
}

.nowrap { white-space: nowrap; }

/* grão de papel fixo, muito discreto; camada removível */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--red-deep);
  color: var(--on-wine);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus-visible { transform: none; }

/* 5. TIPOGRAFIA */
.headline,
.cta-headline,
.cases-head h2,
.services-head h2,
.about-copy h2,
.care-copy h2,
.location-copy h2 {
  font-family: "Playfair Display", "Iowan Old Style", Georgia, serif;
  font-weight: 560;
}

.headline {
  margin-top: 1.4rem;
  font-size: clamp(2.5rem, 4.3vw + 0.7rem, 4.1rem);
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

/* segunda linha em itálico vinho: o gesto da marca */
.hl-2 {
  color: var(--red);
  font-style: italic;
  font-weight: 500;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.95rem 0.42rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* a marca viva da base: um arco diminuto */
.kicker::before {
  content: "";
  width: 0.66rem;
  height: 0.95rem;
  border-radius: 999px 999px 2px 2px;
  background: var(--red);
}

/* antetítulo com fio */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-deep);
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--red);
}

.support {
  margin-top: 1.5rem;
  max-width: 44ch;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--muted);
}

.chips {
  list-style: none;
  padding: 0;
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chips li {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

/* 6. BOTOES - pill com sombra de almofada */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0) translateY(var(--lift-y, 0px));
  transition:
    transform 0.25s var(--ease),
    background-color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    color 0.25s var(--ease);
}

.btn-solid:active,
.btn-light:active,
.btn-outline:active,
.btn-ghost:active {
  transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0) translateY(1px) scale(0.98);
}

.btn-solid {
  background: var(--red-deep);
  color: var(--on-wine);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(38, 32, 26, 0.22),
    0 14px 28px -14px rgba(124, 22, 31, 0.6);
}

.btn-solid:hover {
  background: var(--red-press);
  --lift-y: -2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 3px rgba(38, 32, 26, 0.22),
    0 20px 38px -16px rgba(124, 22, 31, 0.66);
}

.btn-solid:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(38, 32, 26, 0.22),
    0 8px 16px -10px rgba(124, 22, 31, 0.55);
}

/* variante clara: sobre o painel vinho da chamada */
.btn-light {
  background: var(--on-wine);
  color: var(--red-deep);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 16px 36px -14px rgba(0, 0, 0, 0.5);
}

.btn-light:hover {
  background: #ffffff;
  --lift-y: -2px;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 3px rgba(0, 0, 0, 0.3),
    0 22px 44px -16px rgba(0, 0, 0, 0.55);
}

.btn-outline {
  border-color: var(--line-on-wine);
  color: var(--on-wine);
  background: transparent;
}

.btn-outline:hover {
  border-color: rgba(245, 235, 225, 0.55);
  background: rgba(245, 235, 225, 0.08);
  --lift-y: -2px;
}

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: transparent;
}

.btn-ghost:hover {
  border-color: rgba(124, 22, 31, 0.55);
  color: var(--red-deep);
  background: var(--surface);
}

.btn-lg {
  padding: 1rem 2.05rem;
  font-size: 1.05rem;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--red-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 22, 31, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.link-more:hover {
  color: var(--red-press);
  border-color: var(--red-press);
}

/* 7. MASTHEAD - sticky: nasce abaixo do banner de preview e gruda no topo */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--masthead-h);
  display: flex;
  align-items: center;
  background: rgba(242, 237, 228, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

@media (prefers-reduced-transparency: reduce) {
  .masthead { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { flex: none; }

.brand-logo {
  width: auto;
  height: 42px;
}

/* 8. HERO */
.hero {
  position: relative;
  overflow: clip;
  min-height: min(calc(100dvh - var(--masthead-h)), 44rem);
  display: flex;
  flex-direction: column;
  padding-top: clamp(2.25rem, 6vh, 4rem);
}

/* lavagem quente do fundo; camada removível */
.halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52rem 40rem at 86% -6%, rgba(156, 32, 41, 0.09), transparent 62%),
    radial-gradient(44rem 34rem at -12% 108%, rgba(168, 133, 63, 0.1), transparent 60%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  margin-block: auto;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}

.hero-actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.vista-col {
  position: relative;
  justify-self: end;
}

/* o arco da base, agora com a foto real da recepção */
.vista {
  width: min(100%, 400px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 32px 32px;
  border: 1px solid rgba(38, 32, 26, 0.1);
  box-shadow: var(--shadow-photo);
}

.vista img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vista-caption {
  margin-top: 0.8rem;
  text-align: right;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* cartão flutuante de reputação, ancorado ao arco */
.rating-card {
  position: absolute;
  left: -1.75rem;
  bottom: 3.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: rgba(251, 248, 241, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.rating-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.rating-score {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 640;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--red-deep);
}

.rating-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.rating-stars {
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: #ddd2bc;
}

.star-fill {
  background: linear-gradient(90deg, var(--gold) 90%, #ddd2bc 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rating-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

/* 9. TICKER - faixa de especialidades em movimento contínuo */
.ticker {
  position: relative;
  border-block: 1px solid var(--line);
  background: var(--paper-deep);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-move var(--ticker-dur) linear infinite;
}

.ticker-group {
  list-style: none;
  padding: 0.95rem 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex: none;
}

.ticker-group li {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* separador: o arco diminuto da marca */
.ticker-group li::after {
  content: "";
  width: 0.5rem;
  height: 0.72rem;
  margin-inline: 1.4rem;
  border-radius: 999px 999px 1px 1px;
  background: rgba(156, 32, 41, 0.45);
}

@keyframes ticker-move {
  to { transform: translateX(-25%); }
}

/* 10. SOBRE */
.about { padding-block: clamp(4.5rem, 11vh, 7.5rem) clamp(2.5rem, 6vh, 4.5rem); }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.about-photos {
  position: relative;
  display: grid;
  gap: 1.25rem;
}

.photo {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo figcaption {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(251, 248, 241, 0.92);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.photo-main { aspect-ratio: 3 / 2; }

.photo-side {
  aspect-ratio: 16 / 9;
  width: 72%;
  justify-self: end;
  margin-top: -2.75rem;
  border: 5px solid var(--paper);
}

.about-copy h2 {
  margin-top: 1.1rem;
  font-size: clamp(1.8rem, 2.2vw + 0.7rem, 2.6rem);
  line-height: 1.14;
  max-width: 22ch;
  text-wrap: balance;
}

.about-copy > p:not(.eyebrow) {
  margin-top: 1.2rem;
  max-width: 52ch;
  line-height: 1.75;
  color: var(--muted);
}

/* 11. CASOS REAIS */
.cases {
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
}

.cases-head h2 {
  margin-top: 1.1rem;
  font-size: clamp(1.8rem, 2.2vw + 0.7rem, 2.6rem);
  line-height: 1.14;
  max-width: 24ch;
  text-wrap: balance;
}

.cases-intro {
  margin-top: 1rem;
  max-width: 54ch;
  color: var(--muted);
  line-height: 1.7;
}

.cases-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
  max-width: 720px;
}

.case-card {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.case-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.case-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.case-card figcaption {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(38, 32, 26, 0.72);
  color: var(--on-wine);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cases-more { margin-top: 2rem; }

/* 12. ESPECIALIDADES */
.services { padding-block: clamp(2.5rem, 6vh, 4.5rem); }

.services-head h2 {
  margin-top: 1.1rem;
  font-size: clamp(1.8rem, 2.2vw + 0.7rem, 2.6rem);
  line-height: 1.14;
  max-width: 26ch;
  text-wrap: balance;
}

.services-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.service-card {
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.service-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

/* numeral vazado que preenche no hover */
.service-num {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 640;
  font-size: 2.9rem;
  line-height: 1;
  color: var(--surface);
  -webkit-text-stroke: 1.4px var(--line-strong);
  transition: color 0.35s var(--ease), -webkit-text-stroke-color 0.35s var(--ease);
}

@supports not (-webkit-text-stroke: 1px black) {
  .service-num { color: #ddd2bc; }
}

.service-card:hover .service-num {
  color: var(--red);
  -webkit-text-stroke-color: var(--red);
}

.card-arch {
  display: block;
  width: 0.95rem;
  height: 1.3rem;
  border-radius: 999px 999px 2px 2px;
  border: 1.5px solid var(--red);
  background: var(--red-soft);
}

.service-card h3 {
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.service-card p {
  margin-top: 0.75rem;
  max-width: 46ch;
  color: var(--muted);
  line-height: 1.7;
}

/* 13. ATENDIMENTO */
.care { padding-block: clamp(2.5rem, 6vh, 4.5rem); }

.care-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.care-photo {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
}

.care-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.care-photo figcaption {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(251, 248, 241, 0.92);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.care-copy h2 {
  margin-top: 1.1rem;
  font-size: clamp(1.8rem, 2.2vw + 0.7rem, 2.6rem);
  line-height: 1.14;
  max-width: 20ch;
  text-wrap: balance;
}

.care-copy > p:not(.eyebrow) {
  margin-top: 1.2rem;
  max-width: 50ch;
  line-height: 1.75;
  color: var(--muted);
}

/* 14. CONVÊNIOS */
.plans { padding-block: clamp(2rem, 5vh, 3.5rem); }

.plans-label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.plans-row {
  list-style: none;
  padding: 0;
  margin: 1.6rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  max-width: 880px;
}

.plans-row li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.plans-row img {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

/* 15. LOCALIZAÇÃO */
.location { padding-block: clamp(2.5rem, 6vh, 4.5rem); }

.location-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: stretch;
}

.location-copy h2 {
  margin-top: 1.1rem;
  font-size: clamp(1.8rem, 2.2vw + 0.7rem, 2.6rem);
  line-height: 1.14;
  max-width: 18ch;
  text-wrap: balance;
}

.location-card {
  margin-top: 1.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-style: normal;
}

.location-address {
  font-size: 1.06rem;
  line-height: 1.7;
  font-weight: 600;
}

.location-tel {
  margin-top: 0.9rem;
  font-size: 1.15rem;
}

.location-tel a {
  color: var(--red-deep);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 640;
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 22, 31, 0.35);
}

.location-tel a:hover { border-color: var(--red-press); }

.location-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.location-map {
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-photo);
  min-height: 380px;
}

.location-map iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
  display: block;
}

/* 16. CHAMADA - o unico momento escuro da pagina */
.closing { padding-block: clamp(2.5rem, 7vh, 5rem); }

.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(156, 32, 41, 0.5), transparent 56%)
    var(--wine);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.75rem, 5vw, 4rem);
  text-align: center;
  box-shadow: 0 34px 70px -42px rgba(38, 32, 26, 0.6);
}

.cta-panel :focus-visible { outline-color: var(--on-wine); }

.cta-headline {
  margin-inline: auto;
  max-width: 22ch;
  color: var(--on-wine);
  font-size: clamp(1.85rem, 2.6vw + 0.6rem, 3rem);
  line-height: 1.16;
  text-wrap: balance;
}

.cta-support {
  margin: 1.25rem auto 0;
  max-width: 44ch;
  color: var(--on-wine-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.cta-actions {
  margin-top: 2.25rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* 17. RODAPE */
.footer {
  background: var(--wine-deep);
  color: var(--on-wine-muted);
  padding-block: 3.25rem 3.75rem;
}

.footer a { color: var(--on-wine); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.footer-row > * { max-width: 100%; }

.footer-logo {
  width: min(240px, 70%);
  height: auto;
}

.footer-note {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: 0.92rem;
  line-height: 1.7;
}

.footer-meta { text-align: right; }

.footer-contact { font-weight: 700; }

.footer-address {
  margin-top: 0.9rem;
  max-width: 44ch;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-left: auto;
}

.footer-copy {
  margin-top: 1rem;
  font-size: 0.85rem;
}

/* 18. ACTION BAR - conversão fixa no mobile */
.action-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 55;
  padding: 0.7rem clamp(1rem, 4vw, 1.5rem) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(242, 237, 228, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

.action-bar .btn { width: 100%; }

/* 19. REVEALS - so existem com JS; sem script, a pagina nasce inteira.
   O hero usa animacoes de entrada por linha (bloco 19b); data-reveal
   fica para as secoes reveladas em scroll. O stagger dos grids entra
   via JS (data-stagger), com delay limpo apos a entrada. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* 19b. EFEITOS DE MARCA - portados da Acende Studio e do Lume,
   adaptados ao tema claro marfim/vinho. Tudo desliga em
   prefers-reduced-motion (bloco 20). */

/* Entrada do hero: cada linha do título sobe por tras de uma mascara */
.hl { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; padding-inline: 0.08em; margin-inline: -0.08em; }

.hl-inner { display: inline-block; transform: translateY(115%); opacity: 0; filter: blur(6px); }

/* elementos que sobem juntos na abertura */
.sobe { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: no-preference) {
  .hl-inner { animation: sobe-linha 0.75s var(--ease) forwards; }
  .hl-1 .hl-inner { animation-delay: 0.15s; }
  .hl-2 .hl-inner { animation-delay: 0.27s; }
  .sobe { animation: sobe-suave 0.7s var(--ease) forwards; }
  .sobe.d0 { animation-delay: 0.05s; }
  .sobe.d1 { animation-delay: 0.45s; }
  .sobe.d2 { animation-delay: 0.55s; }
  .sobe.d3 { animation-delay: 0.42s; }
  .sobe.d4 { animation-delay: 0.56s; }
}

@keyframes sobe-linha { to { transform: none; opacity: 1; filter: blur(0); } }
@keyframes sobe-suave { to { transform: none; opacity: 1; } }

/* Specular: brilho que segue o cursor sobre os botões sólidos */
.btn-specular {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --specular-x: 50%;
  --specular-y: 50%;
  --specular-angle: 120deg;
  --specular-opacity: 0;
}

.btn-specular::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(150px circle at var(--specular-x) var(--specular-y), rgba(255, 255, 255, 0.32), transparent 64%);
  opacity: var(--specular-opacity);
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}

.btn-specular::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(from var(--specular-angle), transparent 0 25%, rgba(255, 255, 255, 0.6) 32%, transparent 40% 100%);
  opacity: var(--specular-opacity);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.5s ease;
}

.btn-specular > .btn-label { position: relative; z-index: 1; }

/* Border Glow adaptado ao tema claro: borda vinho->ouro revelada em
   cone na direção do cursor + halo externo suave. Sweep automático ao
   entrar na viewport (data-glow-sweep-onview, via JS). */
.glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: 46;
  --cone-spread: 30;
}

.service-card.glow-card {
  position: relative;
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
}

.service-card.glow-card:hover {
  transform: translate3d(0, -3px, 0.01px);
}

.glow-card > :not(.edge-light) { position: relative; z-index: 1; }

.glow-card::before,
.glow-card > .edge-light {
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.glow-card:not(:hover):not(.sweep-active)::before,
.glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.glow-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  z-index: 0;
  background:
    linear-gradient(var(--surface) 0 0) padding-box,
    linear-gradient(rgba(38, 32, 26, 0.12) 0 0) border-box,
    linear-gradient(115deg, #9c2029 0%, #a8853f 38%, #d9b06b 55%, #9c2029 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
}

.glow-card > .edge-light {
  position: absolute;
  inset: -28px;
  z-index: 0;
  border-radius: 40px;
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black 3%, transparent 11%, transparent 89%, black 97%);
  mask-image: conic-gradient(from var(--cursor-angle) at center, black 3%, transparent 11%, transparent 89%, black 97%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
}

.glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: inherit;
  box-shadow:
    0 0 1px 0 rgba(156, 32, 41, 0.55),
    0 0 6px 1px rgba(156, 32, 41, 0.32),
    0 0 18px 3px rgba(168, 133, 63, 0.22),
    0 0 38px 6px rgba(156, 32, 41, 0.14);
}

/* Tilt + brilho especular na foto em arco do hero */
.vista-col { perspective: 1100px; }

.vista {
  position: relative;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--tilt-scale, 1));
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease);
  will-change: transform;
}

.vista-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(360px circle at var(--mx, 70%) var(--my, 30%), rgba(255, 255, 255, 0.22), transparent 65%);
}

.vista:hover .vista-sheen { opacity: 1; }

/* Zoom lento nas fotos ao passar o mouse */
.case-card img,
.photo img,
.care-photo img {
  transition: transform 0.9s var(--ease);
}

.case-card:hover img,
.photo:hover img,
.care-photo:hover img {
  transform: scale(1.035);
}

/* Spotlight discreto nos chips */
.chips li,
.plans-row li {
  position: relative;
  overflow: hidden;
}

.chips li::after,
.plans-row li::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(90px circle at var(--chip-x, 50%) var(--chip-y, 50%), rgba(156, 32, 41, 0.1), transparent 70%);
}

.chips li:hover::after,
.plans-row li:hover::after {
  opacity: 1;
}

/* Selo circular girando (Lume), nas cores Maison */
.seal { width: 96px; margin: 0 auto 1.5rem; }

.seal svg {
  display: block;
  width: 100%;
  height: auto;
  animation: seal-spin 28s linear infinite;
}

.seal-text {
  fill: var(--on-wine-muted);
  font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.seal-mark {
  stroke: #c9a96e;
  stroke-width: 3.4;
  stroke-linecap: round;
}

@keyframes seal-spin {
  to { transform: rotate(1turn); }
}

@media (min-width: 900px) {
  .seal {
    position: absolute;
    top: clamp(1.5rem, 3vw, 2.5rem);
    right: clamp(1.5rem, 4vw, 3rem);
    width: 118px;
    margin: 0;
  }
}

/* Linha de luz no topo da faixa escura (Acende Studio) */
.linha-luz {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 72%);
  height: 1px;
  pointer-events: none;
  opacity: 0.9;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.85) 30%, rgba(245, 235, 225, 0.95) 50%, rgba(156, 32, 41, 0.8) 70%, transparent);
}

/* 20. MOVIMENTO REDUZIDO
   A faixa de especialidades é requisito de identidade e informação
   contínua: mantém a animação sob reduced-motion, redeclarando os
   longhands com !important sobre a regra universal (a duração continua
   a de cada breakpoint via --ticker-dur). Decisão registrada em
   VERSIONS.md. As demais animações respeitam o ajuste do aparelho. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ticker-track {
    animation-name: ticker-move !important;
    animation-duration: var(--ticker-dur) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }

  /* efeitos de marca desligados */
  .hl-inner,
  .sobe {
    animation: none;
    transform: none;
    opacity: 1;
    filter: none;
  }

  .vista { transform: none !important; }
  .vista-sheen { display: none; }

  [data-magnet] { transform: none !important; }

  .btn-solid:hover,
  .btn-light:hover,
  .btn-outline:hover { --lift-y: 0px; }

  .btn-specular::before,
  .btn-specular::after,
  .glow-card::before,
  .glow-card > .edge-light,
  .chips li::after,
  .plans-row li::after { display: none; }

  .seal svg { animation: none; }

  .case-card:hover img,
  .photo:hover img,
  .care-photo:hover img { transform: none; }
}

/* 21. RESPONSIVO */
@media (max-width: 640px) {
  :root { --ticker-dur: 24s; }
}

@media (max-width: 1020px) {
  .vista { width: min(100%, 350px); }
  .rating-card { left: -0.75rem; }
}

@media (max-width: 900px) {
  .hero {
    min-height: 0;
    padding-top: clamp(1.25rem, 3vh, 2rem);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: clamp(1rem, 3vh, 1.75rem);
  }

  .vista-col {
    justify-self: center;
    margin-top: 2.75rem;
  }

  .vista { width: min(82%, 330px); margin-inline: auto; }
  .vista-caption { text-align: center; }
  .rating-card { bottom: 2.5rem; }

  .about-grid,
  .care-grid,
  .location-grid { grid-template-columns: 1fr; }

  .about-copy .eyebrow { margin-top: 2.5rem; }
  .photo-side { width: 58%; }

  /* altura determinística: o embed do Google não repinta bem em caixas
     só com min-height durante o load mobile */
  .location-map { height: 340px; min-height: 0; }
  .location-map iframe { height: 100%; min-height: 0; }
}

@media (max-width: 640px) {
  .masthead-cta { display: none; }

  .headline { margin-top: 1rem; }

  .support {
    margin-top: 1.1rem;
    font-size: 1.05rem;
  }

  .hero-actions { margin-top: 1.7rem; }

  .services-grid { grid-template-columns: 1fr; }

  .hero-actions .btn { flex: 1 1 100%; }

  .rating-card {
    left: 50%;
    transform: translateX(-50%);
    bottom: 5rem;
    padding: 0.7rem 1rem;
    gap: 0.7rem;
  }

  .rating-card:hover { transform: translateX(-50%); }
  .rating-score { font-size: 1.6rem; }

  .photo-side { margin-top: -1.5rem; }
}

@media (max-width: 520px) {
  .cta-panel { border-radius: var(--radius-m); }

  .cases-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }

  body { padding-bottom: calc(5.4rem + env(safe-area-inset-bottom)); }

  .plans-row img { height: 32px; max-width: 120px; }
}

@media (max-width: 389px) {
  .headline {
    font-size: 2.15rem;
    letter-spacing: -0.018em;
  }

  .rating-count { font-size: 0.72rem; }
  .rating-score { font-size: 1.45rem; }
}

@media (min-width: 641px) {
  .action-bar { display: none; }
}