/* ============================================================
   Dr. William Andrade — Site Institucional
   Skeumorphism contido ("quiet skeumorphism") — ver 04-SITE/03-UI-DESIGN-DIRECTION.md
   Tokens em tokens.css — este arquivo só consome var(--token), nada de valor mágico
   ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }
ul { list-style: none; }

body {
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-base);
  color: var(--color-text);
  background: var(--color-surface-base);
  /* Textura sutil de papel/linho — só em pseudo-elemento fixo, nunca em container com scroll */
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(47,62,83,.015) 0px, rgba(47,62,83,.015) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(47,62,83,.012) 0px, rgba(47,62,83,.012) 1px, transparent 1px, transparent 3px);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p { max-width: 65ch; }
.eyebrow-label {
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-surface-shelf);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (max-width: 599px) {
  .container { padding-inline: var(--space-4); }
}

.section {
  padding-block: var(--space-24);
}
@media (max-width: 767px) {
  .section { padding-block: var(--space-16); }
}

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-surface-card);
  box-shadow: 0 1px 0 rgba(47,62,83,.08), 0 4px 12px rgba(47,62,83,.06);
  height: 72px;
}
.nav {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-brand img { width: 40px; height: 40px; object-fit: contain; }
.nav-brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.1;
}
.nav-brand-text span {
  display: block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: .75rem;
  color: var(--color-surface-shelf);
  letter-spacing: .02em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: 500;
}
.nav-links a {
  position: relative;
  padding-block: var(--space-2);
  transition: color var(--dur-fast) var(--ease-tactile);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-tactile);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 767px) {
  .nav-links {
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--color-surface-card);
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-8) var(--space-6);
    gap: var(--space-6);
    font-size: 1.125rem;
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-tactile);
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-toggle { display: inline-flex; }
}

/* ---------- BOTÕES (emboss real — estados táteis) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: var(--text-body);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-tactile), box-shadow var(--dur-fast) var(--ease-tactile);
}
.btn-primary {
  background: var(--color-text);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-card);
}
.btn-primary:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.btn-primary:active { box-shadow: var(--shadow-button-pressed); transform: translateY(1px); }
.btn-primary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.btn-secondary {
  background: var(--color-accent-cta-alt);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-card);
}
.btn-secondary:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.btn-secondary:active { box-shadow: var(--shadow-button-pressed); transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  padding-inline: var(--space-4);
}
.btn-ghost:hover { background: var(--color-surface-card); }

/* ---------- HERO ---------- */
.hero {
  padding-block: var(--space-16) var(--space-24);
}
.hero .container {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-16);
  align-items: center;
}
.hero-content h1 { margin-bottom: var(--space-4); }
/* Kicker de identidade (logo + nome + CRM) acima da headline — pequeno de propósito. */
.hero-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.hero-kicker img { width: 32px; height: 32px; flex-shrink: 0; }
.hero-kicker > div { display: flex; flex-direction: column; line-height: 1.3; }
.hero-kicker-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--color-text);
}
.hero-kicker-crm {
  font-size: var(--text-label);
  font-weight: 400;
  color: var(--color-surface-shelf);
}
/* Hero mobile (fundo de foto/vídeo): logo maior e texto garantidamente branco, com
   text-shadow — sem isso, em trechos mais claros do vídeo por trás (aventais, luzes
   de sala cirúrgica), o branco perde contraste e "some" visualmente. */
.hero-video-wrap .hero-kicker img { width: 44px; height: 44px; filter: drop-shadow(0 1px 3px rgba(5,6,7,.5)); }
.hero-video-wrap .hero-kicker-name {
  color: var(--color-text-inverse);
  text-shadow: 0 1px 4px rgba(5,6,7,.55);
}
.hero-video-wrap .hero-kicker-crm {
  color: rgba(242,241,236,.95);
  text-shadow: 0 1px 4px rgba(5,6,7,.55);
}
/* Hero desktop usa <p role="heading" aria-level="1"> em vez de <h1> literal, pra não
   duplicar H1 no DOM junto com o hero mobile (os dois existem no HTML, só um é exibido
   por vez via CSS). Estilo idêntico ao h1 real. */
.hero-heading-desktop {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  max-width: 65ch;
}
.hero-content p {
  font-size: 1.125rem;
  color: var(--color-surface-shelf);
  margin-bottom: var(--space-8);
}
.hero-photo {
  position: relative;
  justify-self: center;
}
.hero-photo img,
.hero-photo video {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-card);
  border: 8px solid var(--color-surface-card);
  box-shadow: var(--shadow-photo-frame);
}
/* Vídeo real (apresentação) — moldura igual à foto, mas na proporção vertical
   nativa do vídeo (9/16), pra ele aparecer completo, sem cortar as bordas. */
.hero-photo video { aspect-ratio: 9 / 16; background: #050607; display: block; }

@media (max-width: 899px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-photo { order: -1; }
  .hero-photo img,
  .hero-photo video { max-width: 280px; margin-inline: auto; }
}

/* ---------- Hero "Sobre" com vídeo abaixo do título (não é o grid padrão do .hero) ---------- */
.sobre-hero-video .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
}
.sobre-hero-video-caption {
  font-size: 1.0625rem;
  color: var(--color-surface-shelf);
  margin-bottom: var(--space-8);
}
.sobre-hero-video .hero-photo { margin-bottom: var(--space-8); order: 0; }
.sobre-hero-video-text {
  font-size: 1.125rem;
  color: var(--color-surface-shelf);
  margin-bottom: var(--space-6);
}

/* ---------- FAIXA (proposta central — "prateleira") ---------- */
.faixa {
  background: var(--color-surface-shelf);
  color: var(--color-text-inverse);
  padding-block: var(--space-16);
}
.faixa-intro { text-align: center; }
.faixa-intro h2 { color: var(--color-text-inverse); max-width: 20ch; margin-inline: auto; margin-bottom: var(--space-3); }
.faixa-intro p { color: rgba(242,241,236,.85); max-width: 55ch; margin-inline: auto; }

/* Bloco de vídeo dentro da faixa — mesma seção, não mais um bloco branco separado
   embaixo (ficava sem diferenciação visual com a seção "Quem é o Dr. William" logo
   abaixo, que também é clara). Herda o fundo azul-ardósia da .faixa. */
.faixa-video-block {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--space-16);
  align-items: center;
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid rgba(242,241,236,.18);
}
.faixa-video-block .eyebrow-label { color: rgba(242,241,236,.75); }
.faixa-video-block h3 { color: var(--color-text-inverse); margin-top: var(--space-2); margin-bottom: var(--space-4); }
.faixa-video-block p { color: rgba(242,241,236,.85); margin-bottom: var(--space-6); }
.faixa-video-block .btn-ghost { color: var(--color-text-inverse); }
.faixa-video-block .btn-ghost:hover { background: rgba(242,241,236,.12); }

.video-featured-media { justify-self: center; }
.video-featured-media video {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 8px solid var(--color-surface-card);
  box-shadow: var(--shadow-photo-frame);
  background: #050607;
  display: block;
}
@media (max-width: 899px) {
  .faixa-video-block {
    grid-template-columns: 1fr;
    margin-top: var(--space-12);
    padding-top: var(--space-12);
  }
  .video-featured-media video { max-width: 280px; margin-inline: auto; }
}

/* ---------- ÁREAS DE ATUAÇÃO (bento assimétrico — nunca 3 cards iguais) ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: repeat(2, auto);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.card {
  position: relative;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-tactile), box-shadow var(--dur-base) var(--ease-tactile);
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }

/* Card em destaque: ocupa as 2 linhas, fundo escuro com ícone grande — não é só uma borda colorida */
.card--destaque {
  grid-row: span 2;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
}
.card--destaque::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../img/pattern/elementos/planeta.png");
  background-repeat: no-repeat;
  background-position: top -20px right -30px;
  background-size: 220px;
  opacity: .18;
  pointer-events: none;
}
.card--destaque h3, .card--destaque p { position: relative; color: var(--color-text-inverse); }
.card--destaque p { color: rgba(242,241,236,.8); }
.card--destaque .card-tag {
  align-self: flex-start;
  background: var(--color-accent);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-badge);
  margin-bottom: var(--space-6);
}

/* Cards menores: fundo claro, ícone no topo */
.card--simples {
  background: var(--color-surface-card);
  min-height: 190px;
}
.card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-badge);
  background: rgba(240,169,147,.15);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.card-icon svg { width: 20px; height: 20px; color: var(--color-text); }

.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--color-surface-shelf); font-size: var(--text-label); }

@media (max-width: 899px) {
  .cards-grid { grid-template-columns: 1fr; }
  .card--destaque { grid-row: auto; min-height: 320px; }
}

/* ---------- BLOCO EDITORIAL ---------- */
.editorial {
  max-width: 720px;
}
.editorial h2 { margin-bottom: var(--space-6); font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem); }
.editorial p { font-size: 1.125rem; color: var(--color-surface-shelf); }

/* ---------- CREDENCIAIS (lockup horizontal, sem card) ---------- */
.credenciais {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
  border-top: 1px solid rgba(47,62,83,.12);
  padding-top: var(--space-8);
}
.credencial-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  flex: 1 1 260px;
}
.credencial-badge {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: var(--radius-badge);
  background: rgba(240,169,147,.15);
  box-shadow: inset 0 1px 2px rgba(47,62,83,.08);
  display: flex; align-items: center; justify-content: center;
}
.credencial-badge svg { width: 22px; height: 22px; color: var(--color-text); }
.credencial-item strong { display: block; margin-bottom: var(--space-1); }
.credencial-item p { font-size: var(--text-label); color: var(--color-surface-shelf); }

/* ---------- FAQ (accordion — "afunda" ao abrir) ---------- */
.faq-item {
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-4);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-tactile);
}
.faq-item:hover { box-shadow: var(--shadow-card-hover); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  text-align: left;
}
.faq-question .faq-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) var(--ease-tactile);
}
.faq-item[data-open="true"] { box-shadow: var(--shadow-button-pressed); }
.faq-item[data-open="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-tactile);
}
.faq-answer p {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--color-surface-shelf);
}

/* ---------- CTA FINAL (inversão de tema — único ponto do site) ---------- */
.cta-final {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  text-align: center;
  padding-block: var(--space-16);
}
.cta-final h2 { color: var(--color-text-inverse); margin-bottom: var(--space-6); }
.cta-final .btn-primary {
  background: var(--color-accent);
  color: var(--color-text);
}

/* ---------- FORMULÁRIO (Contato) ---------- */
.form-group { margin-bottom: var(--space-6); }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: var(--text-label);
  margin-bottom: var(--space-2);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-input);
  border: 1px solid rgba(47,62,83,.2);
  background: var(--color-surface-card);
  font-family: var(--font-text);
  font-size: var(--text-body);
  color: var(--color-text);
  box-shadow: inset 0 1px 3px rgba(47,62,83,.06);
  transition: border-color var(--dur-fast) var(--ease-tactile), box-shadow var(--dur-fast) var(--ease-tactile);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: inset 0 1px 3px rgba(47,62,83,.06), 0 0 0 3px rgba(240,169,147,.25);
}
.form-status {
  padding: var(--space-4);
  border-radius: var(--radius-input);
  font-size: var(--text-label);
  font-weight: 600;
  display: none;
}
.form-status[data-state="success"] { display: block; background: rgba(84,94,87,.12); color: var(--color-success); }
.form-status[data-state="error"] { display: block; background: rgba(133,93,81,.12); color: var(--color-error); }

/* ---------- WHATSAPP FLUTUANTE ---------- */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 50;
  width: 56px; height: 56px;
  border-radius: var(--radius-badge);
  background: var(--color-text);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card-hover);
  transition: transform var(--dur-fast) var(--ease-tactile);
}
.whatsapp-float:hover { transform: scale(1.05); }
.whatsapp-float:active { transform: scale(.96); }
.whatsapp-float svg { width: 26px; height: 26px; color: var(--color-text-inverse); }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--color-surface-card);
  border-top: 1px solid rgba(47,62,83,.1);
  padding-block: var(--space-12);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  font-size: var(--text-label);
  color: var(--color-surface-shelf);
}
.footer-grid strong { color: var(--color-text); }
.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(47,62,83,.1);
  font-size: var(--text-label);
  color: var(--color-surface-shelf);
}
@media (max-width: 599px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- PÁGINA: ÁREAS DE ATUAÇÃO (blocos alternados) ---------- */
.area-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-16);
  border-bottom: 1px solid rgba(47,62,83,.1);
}
.area-block:last-of-type { border-bottom: none; }
.area-visual {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  /* FIX corte de rosto: a caixa era 4/3 (paisagem) mas as fotos do Dr. William são
     3/4 (retrato) — forçava um corte vertical pesado que nenhum object-position
     resolvia direito. 3/4 casa com a proporção real da foto, corte praticamente zero. */
  aspect-ratio: 3/4;
}
.area-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.area-content .eyebrow-label { margin-bottom: var(--space-2); display: block; }
.area-content h2 { margin-bottom: var(--space-4); }
.area-content p { color: var(--color-surface-shelf); margin-bottom: var(--space-3); }
.area-content p strong { color: var(--color-text); }

@media (max-width: 767px) {
  .area-block { grid-template-columns: 1fr; }
  .area-block .area-visual { order: -1; }
}

/* ---------- SOBRE: valores (grid assimétrico) ---------- */
.valores-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.valor-card {
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.valor-card h3 { font-size: 1.125rem; margin-bottom: var(--space-2); }
.valor-card p { font-size: var(--text-label); color: var(--color-surface-shelf); }
@media (max-width: 767px) {
  .valores-grid { grid-template-columns: 1fr; }
}

/* ---------- Reveal on scroll (motion motivado — hierarquia de entrada) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease-tactile), transform var(--dur-base) var(--ease-tactile);
  transition-delay: calc(var(--reveal-index, 0) * 80ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   REVISÃO — mais dinâmico (MOTION_INTENSITY: 6)
   Grafismo como textura de fundo, elementos flutuantes, seções novas
   ============================================================ */

/* ---------- Grafismos flutuantes (elementos individuais, técnica igual à Viva) ----------
   Cada seção que usa .graphic-zone pode conter 1-2 <img class="graphic-bg"> posicionados
   via style inline (top/right/bottom/left), com leve flutuação e opacidade calibrada.
   Nunca em cor cheia cobrindo texto — sempre nos cantos, atrás do conteúdo. */
.graphic-zone { position: relative; overflow: hidden; }
.graphic-bg {
  position: absolute;
  pointer-events: none;
  opacity: .4;
  z-index: 0;
  animation: float-symbol 8s ease-in-out infinite;
}
.graphic-bg--slow { animation-duration: 11s; animation-delay: -4s; }
.graphic-bg--fast { animation-duration: 6s; animation-delay: -1.5s; }
.graphic-zone > .container { position: relative; z-index: 1; }

@keyframes float-symbol {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .graphic-bg { animation: none; }
}

/* ---------- Alternância Hero: mobile usa vídeo de fundo, desktop usa foto emoldurada ----------
   Pedido do Victor: no mobile o hero em vídeo/foto de fundo ficou bom, mantido igual.
   No desktop, volta pro layout anterior (headline+CTA à esquerda, foto emoldurada à
   direita, textura de grafismo no fundo). São 2 blocos de HTML diferentes — nunca os
   dois ao mesmo tempo — controlados só por este breakpoint. */
/* Especificidade reforçada (section.classe, não só .classe) — garante que este toggle
   sempre vence outras regras de display (ex: .hero-video-wrap { display:flex }), não
   importa a ordem no arquivo. Bug anterior: mesma especificidade + ordem no arquivo
   fazia o hero de vídeo (mobile) continuar visível no desktop, duplicando a seção. */
section.hero-mobile-only { display: block; }
section.hero-desktop-only { display: none; }
@media (min-width: 768px) {
  section.hero-mobile-only { display: none; }
  section.hero-desktop-only { display: block; }
}

/* ---------- Textura de grafismo (fundo do hero desktop) — igual à primeira versão ---------- */
.textura-grafismo {
  position: relative;
  overflow: hidden;
}
.textura-grafismo::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: url("../img/pattern/grafismo-textura.png");
  background-repeat: repeat;
  background-size: 340px;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.textura-grafismo > .container { position: relative; z-index: 1; }

/* ---------- Hero com vídeo/foto de fundo (mobile) — loop, mudo, sem controles ----------
   FIX (2ª tentativa): flex + align-items:flex-end dependia da altura do texto pra empurrar
   pro rodapé — nem sempre desce o suficiente. Trocado por posicionamento absoluto do bloco
   de texto grudado no rodapé (bottom:0 + padding), o que garante a mesma distância do
   rodapé sempre, sem depender de quanto texto tem. O rosto fica na área de cima, que
   sobra sempre livre porque a altura mínima do hero é maior que o bloco de texto. */
.hero-video-wrap {
  position: relative;
  min-height: 660px;
  overflow: hidden;
}
.hero-video-wrap video,
.hero-video-wrap .hero-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
}
/* Foto fica por cima do vídeo (que já roda por baixo, autoplay) até o JS liberar
   o crossfade — mínimo de 2s de exibição, ver site.js. */
.hero-video-wrap .hero-video-poster {
  z-index: 1;
  transition: opacity .8s ease;
}
.hero-video-wrap .hero-video-poster.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.hero-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(47,62,83,0) 0%, rgba(47,62,83,.4) 60%, rgba(47,62,83,.85) 100%);
}
.hero-video-wrap .container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-bottom: var(--space-12);
}
.hero-video-wrap .hero-content h1,
.hero-video-wrap .hero-content p { color: var(--color-text-inverse); }
.hero-video-wrap .hero-content p { color: rgba(242,241,236,.9); }
@media (max-width: 767px) {
  .hero-video-wrap { min-height: 640px; }
  .hero-video-wrap .container { padding-bottom: var(--space-8); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-wrap video { display: none; }
  .hero-video-wrap .hero-video-poster { display: block; }
}

/* ---------- Seção "Pra quem é" ---------- */
.publico-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.publico-col {
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
}
.publico-col h3 { margin-bottom: var(--space-4); }
.publico-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.publico-col li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-label);
  color: var(--color-surface-shelf);
}
.publico-col li svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.publico-col--sim li svg { color: var(--color-success); }
.publico-col--nao li svg { color: var(--color-error); }
@media (max-width: 767px) {
  .publico-grid { grid-template-columns: 1fr; }
}

/* ---------- Seção "Sobre" (preview na Home) ----------
   Mobile: ordem de leitura é rótulo → vídeo → título/texto/botão (pedido explícito,
   não é a ordem "natural" do DOM em coluna única — por isso os 3 filhos diretos do
   .container usam order). Desktop: volta pro layout de 2 colunas via grid-template-areas,
   vídeo à esquerda ocupando as 2 linhas, rótulo+texto empilhados à direita. */
.sobre-preview .container {
  display: grid;
  gap: var(--space-4);
}
.sobre-preview-label { order: 1; }
.sobre-preview-video { order: 2; }
.sobre-preview-text { order: 3; }

.sobre-preview-video {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 8px solid var(--color-surface-card);
  box-shadow: var(--shadow-photo-frame);
  background: #050607;
  display: block;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .sobre-preview .container {
    grid-template-columns: .9fr 1.1fr;
    grid-template-areas:
      "video label"
      "video text";
    column-gap: var(--space-16);
    row-gap: var(--space-2);
    align-items: center;
  }
  .sobre-preview-video { grid-area: video; align-self: center; margin-inline: 0; }
  .sobre-preview-label { grid-area: label; align-self: end; }
  .sobre-preview-text { grid-area: text; align-self: start; }
}

/* ---------- Seção "Conheça o Consultório" (galeria, separada da localização) ---------- */
.consultorio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.consultorio-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-tactile), box-shadow var(--dur-base) var(--ease-tactile);
}
.consultorio-grid img:hover { box-shadow: var(--shadow-card-hover); transform: scale(1.02); }
.consultorio-grid .item-grande { grid-column: span 2; grid-row: span 2; aspect-ratio: 8/7; }
@media (max-width: 767px) {
  .consultorio-grid { grid-template-columns: 1fr 1fr; }
  .consultorio-grid .item-grande { grid-column: span 2; aspect-ratio: 16/10; }
}
/* FIX desktop (≥768px): a foto grande com aspect-ratio 8/7 span 2 linhas brigava com a
   altura implícita das linhas (definida pelas fotos menores em 4/3) — o grid ficava com
   linhas de tamanho inconsistente e a foto grande desproporcional. Linha de altura fixa
   resolve: todas as fotos (inclusive a grande) preenchem a mesma grade sem conflito de
   aspect-ratio. Só entra a partir de 768px — mobile continua exatamente como estava. */
@media (min-width: 768px) {
  .consultorio-grid { grid-auto-rows: 200px; }
  .consultorio-grid img { height: 100%; aspect-ratio: unset; }
  .consultorio-grid .item-grande { aspect-ratio: unset; }
}

/* ---------- Seção "Localização" (endereço + mapa, separada da galeria) ---------- */
.localizacao-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--space-12);
  margin-top: var(--space-8);
  align-items: stretch;
}
.localizacao-info { display: flex; flex-direction: column; gap: var(--space-4); }
.local-info-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.mapa-embed {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 320px;
}
.mapa-embed iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
@media (max-width: 899px) {
  .localizacao-grid { grid-template-columns: 1fr; }
}

/* ---------- Vídeos — cards com link direto (sem widget nativo do Instagram) ----------
   FIX desktop: sem max-width, o card esticava pra preencher a coluna inteira do grid
   (~560px) e o aspect-ratio 9/13 virava um card de ~800px de altura — gigante e
   desproporcional. Trava a largura e centraliza a coluna em vez de esticar. */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
  justify-items: center;
}
/* 3º card (placeholder) preenche melhor em 3 colunas no desktop — só a partir de 900px
   pra não espremer os cards antes disso. */
@media (min-width: 900px) {
  .videos-grid { grid-template-columns: repeat(3, 1fr); }
}
.video-link-card--placeholder img { opacity: .55; }
.video-link-card--placeholder .play-button svg { margin-left: 0; }
.video-link-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 300px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 9/13;
  transition: transform var(--dur-base) var(--ease-tactile), box-shadow var(--dur-base) var(--ease-tactile);
}
.video-link-card:hover { box-shadow: var(--shadow-card-hover); transform: scale(1.015); }
.video-link-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.video-link-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(47,62,83,0) 45%, rgba(47,62,83,.85) 100%);
}
.video-link-card .play-button {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: var(--radius-badge);
  background: rgba(242,241,236,.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card-hover);
  transition: transform var(--dur-fast) var(--ease-tactile);
}
.video-link-card:hover .play-button { transform: translate(-50%, -50%) scale(1.08); }
.video-link-card .play-button svg { width: 24px; height: 24px; color: var(--color-text); margin-left: 3px; }
.video-link-card .video-caption {
  position: absolute;
  left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  color: var(--color-text-inverse);
  font-weight: 600;
  font-size: var(--text-label);
}
.video-link-card .video-badge {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  background: rgba(242,241,236,.92);
  border-radius: var(--radius-badge);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-text);
  display: flex; align-items: center; gap: 4px;
}
.video-badge svg { width: 12px; height: 12px; }
@media (max-width: 767px) {
  /* Mobile já estava bom antes do fix de desktop acima — restaura o comportamento
     original (card esticando full-width da coluna) pra não alterar o que já aprovou. */
  .videos-grid { grid-template-columns: 1fr; justify-items: stretch; }
  .video-link-card { max-width: none; }
}

/* ---------- Instagram / redes sociais CTA ---------- */
.instagram-cta {
  text-align: center;
  margin-top: var(--space-12);
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
}
.instagram-cta p { margin: 0 auto var(--space-4); color: var(--color-surface-shelf); }

/* ---------- Blog (listagem) ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.blog-card {
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-tactile), box-shadow var(--dur-base) var(--ease-tactile);
}
.blog-card:hover { box-shadow: var(--shadow-card-hover); transform: scale(1.01); }
.blog-card-body { padding: var(--space-6); }
.blog-card .eyebrow-label { display: block; margin-bottom: var(--space-2); }
.blog-em-breve {
  text-align: center;
  padding: var(--space-24) var(--space-6);
  background: var(--color-surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
@media (max-width: 899px) {
  .blog-grid { grid-template-columns: 1fr; }
}