/* ==========================================================================
   Centrocor Cardiologia — sistema visual
   Site escuro: preto, grafite e vinho nos fundos, prata nos detalhes
   ========================================================================== */

:root {
  /* Marca */
  --wine: #5f1107;
  --wine-deep: #3e0a04;
  --wine-soft: #7a1f13;
  --wine-bg: #4a0d05;
  --graphite: #303030;
  --graphite-bg: #1f1f1f;
  --ink: #1c1c1c;
  --night: #151515;
  --mist: #e1e5e6;
  --mist-top: #eef0f1;
  --white: #ffffff;

  /* Prata */
  --silver: #b8bdc1;
  --silver-light: #dde0e2;
  --silver-dark: #868c91;
  --metal: linear-gradient(115deg, #8e9499 0%, #eceeef 26%, #b3b8bc 50%, #f5f6f6 74%, #979ca1 100%);
  --metal-text: linear-gradient(115deg, #b3b8bc 0%, #f5f6f6 45%, #a9aeb2 100%);

  /* Textura sutil sobre os fundos escuros */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Tipografia */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Letra do logotipo */
  --brand: "Montserrat", "Jost", system-ui, sans-serif;

  /* Medidas */
  --container: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(36px, 3.8vw, 58px);
  --header-h: 76px;
  --curve: clamp(48px, 7vw, 110px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Temas de seção
   Cada seção define as cores que os componentes dentro dela usam.
   ========================================================================== */

:root,
.section--night,
.section--graphite {
  --bg-solid: var(--night);
  --fg: #a9aeb2;
  --fg-soft: #eceeef;
  --fg-strong: #ffffff;
  --line: rgba(184, 189, 193, 0.24);
  --line-strong: rgba(184, 189, 193, 0.55);
  --accent: var(--silver-light);
  --mark: var(--silver);
  --em-bg: var(--metal-text);
  --fill: var(--metal);
  --tint: rgba(255, 255, 255, 0.05);
  --card-bg: rgba(255, 255, 255, 0.035);
  --card-fill: linear-gradient(135deg, #f5f6f6 0%, #b8bdc1 100%);
  --card-fg-hover: var(--ink);
  --card-muted-hover: #3c3f42;
  --card-mark-hover: var(--wine);
  --panel-bg: radial-gradient(90% 80% at 100% 0%, rgba(122, 31, 19, 0.95) 0%, rgba(122, 31, 19, 0) 65%),
    linear-gradient(160deg, #56100a 0%, #2f0703 100%);
  --media-bg: radial-gradient(120% 90% at 85% 10%, #4a4a4a 0%, rgba(74, 74, 74, 0) 55%),
    linear-gradient(160deg, #353535 0%, #1b1b1b 100%);
  --media-label: rgba(236, 238, 239, 0.6);
  --icon: var(--silver-light);
  --icon-accent: rgba(221, 224, 226, 0.5);
  --halo: rgba(221, 224, 226, 0.16);
  --focus: var(--silver-light);
  --select: var(--white);
  --pill-bg: var(--silver-light);
  --pill-fg: var(--ink);
  --beat: rgba(221, 224, 226, 0.22);
}

.section--graphite {
  --bg-solid: var(--graphite-bg);
}

.section--wine {
  --bg-solid: var(--wine-bg);
  --fg: rgba(255, 255, 255, 0.76);
  --fg-soft: #ffffff;
  --fg-strong: #ffffff;
  --line: rgba(255, 255, 255, 0.2);
  --line-strong: rgba(255, 255, 255, 0.5);
  --accent: var(--silver-light);
  --mark: var(--silver-light);
  --em-bg: var(--metal-text);
  --fill: var(--metal);
  --tint: rgba(255, 255, 255, 0.06);
  --card-bg: rgba(0, 0, 0, 0.2);
  --card-fill: linear-gradient(135deg, #f5f6f6 0%, #b8bdc1 100%);
  --card-fg-hover: var(--ink);
  --card-muted-hover: #3c3f42;
  --card-mark-hover: var(--wine);
  --panel-bg: radial-gradient(90% 80% at 100% 0%, #333333 0%, rgba(51, 51, 51, 0) 62%), var(--night);
  --media-bg: radial-gradient(120% 90% at 85% 10%, #4a4a4a 0%, rgba(74, 74, 74, 0) 55%),
    linear-gradient(160deg, #2c2c2c 0%, #151515 100%);
  --media-label: rgba(236, 238, 239, 0.6);
  --icon: #ffffff;
  --icon-accent: rgba(255, 255, 255, 0.5);
  --halo: rgba(255, 255, 255, 0.14);
  --focus: var(--white);
}

.section--light,
.section--white,
.profile {
  --bg-solid: var(--mist-top);
  --select: var(--wine);
  --pill-bg: var(--wine);
  --pill-fg: var(--white);
  --beat: rgba(95, 17, 7, 0.16);
  --fg: #5e6367;
  --fg-soft: #2b2b2b;
  --fg-strong: var(--ink);
  --line: var(--silver);
  --line-strong: var(--silver-dark);
  --accent: var(--wine);
  --mark: var(--wine);
  --em-bg: linear-gradient(var(--wine), var(--wine));
  --fill: linear-gradient(90deg, var(--wine-deep), var(--wine) 60%, var(--wine-soft));
  --tint: rgba(95, 17, 7, 0.05);
  --card-bg: var(--white);
  --card-fill: radial-gradient(120% 120% at 100% 0%, #3a3a3a 0%, rgba(58, 58, 58, 0) 55%), var(--night);
  --card-fg-hover: var(--white);
  --card-muted-hover: #a9aeb2;
  --card-mark-hover: var(--silver);
  --panel-bg: radial-gradient(90% 80% at 100% 0%, rgba(122, 31, 19, 0.5) 0%, rgba(122, 31, 19, 0) 62%),
    var(--night);
  --media-bg: linear-gradient(150deg, #eef0f1 0%, #d3d8db 55%, #e6e9ea 100%);
  --media-label: var(--silver-dark);
  --icon: var(--wine);
  --icon-accent: var(--silver-dark);
  --halo: rgba(95, 17, 7, 0.08);
  --focus: var(--wine);
}

.section--white {
  --bg-solid: var(--white);
}

/* Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--fg-strong);
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.85rem, 3.1vw, 2.85rem);
}

h2 {
  font-size: clamp(1.85rem, 2.9vw, 2.65rem);
}

h3 {
  font-size: clamp(1.3rem, 1.6vw, 1.5rem);
  line-height: 1.2;
}

h1 em,
h2 em {
  font-style: italic;
  font-weight: 500;
  color: transparent;
  background: var(--em-bg);
  -webkit-background-clip: text;
  background-clip: text;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--wine);
  color: var(--white);
  transition: top 0.2s;
}

.skip-link:focus {
  top: 16px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Elementos recorrentes
   ========================================================================== */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mark));
}

.lead {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--fg);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 16px 34px;
  border: 1px solid transparent;
  border-radius: 1px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}

/* Botão de agendamento: brilho prateado animado.
   Em fundo escuro é prata metálico; em fundo claro é vinho com reflexo prata. */
.btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--metal);
  background-size: 240% 100%;
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 16px 36px -18px rgba(0, 0, 0, 0.9);
  /* --tx e --ty vêm do cursor: o botão se inclina levemente na direção do mouse */
  transform: translate(var(--tx, 0px), var(--ty, 0px));
  animation: metal-flow 8s ease-in-out infinite alternate;
}

.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.95) 50%, transparent 68%);
  transform: translateX(-130%);
  animation: metal-sheen 4.8s var(--ease) infinite;
}

.btn--primary:hover {
  transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 2px));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 34px rgba(221, 224, 226, 0.5),
    0 22px 44px -20px rgba(0, 0, 0, 0.9);
}

.section--light .btn--primary,
.section--white .btn--primary,
.profile .btn--primary,
.site-header.is-scrolled .btn--primary,
.site-header.is-menu-open .btn--primary {
  background: linear-gradient(115deg, var(--wine-deep) 0%, var(--wine) 40%, var(--wine-soft) 70%, var(--wine) 100%);
  background-size: 240% 100%;
  color: var(--white);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(221, 224, 226, 0.4), 0 16px 36px -18px rgba(95, 17, 7, 0.8);
}

.section--light .btn--primary::before,
.section--white .btn--primary::before,
.profile .btn--primary::before,
.site-header.is-scrolled .btn--primary::before,
.site-header.is-menu-open .btn--primary::before {
  background: linear-gradient(105deg, transparent 32%, rgba(236, 238, 239, 0.6) 50%, transparent 68%);
}

.section--light .btn--primary:hover,
.section--white .btn--primary:hover,
.profile .btn--primary:hover,
.site-header.is-scrolled .btn--primary:hover,
.site-header.is-menu-open .btn--primary:hover {
  box-shadow: inset 0 0 0 1px rgba(236, 238, 239, 0.75), 0 0 30px rgba(184, 189, 193, 0.5),
    0 22px 44px -20px rgba(95, 17, 7, 0.9);
}

@keyframes metal-flow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@keyframes metal-sheen {
  0%,
  55% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}

.btn--outline,
.btn--outline-light {
  border-color: var(--line-strong);
  color: var(--fg-strong);
  background: transparent;
}

.btn--outline:hover,
.btn--outline-light:hover {
  border-color: var(--fg-strong);
  background: var(--tint);
}

.btn--sm {
  min-height: 46px;
  padding: 12px 20px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-strong);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.link-arrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s var(--ease);
}

.link-arrow:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.link-arrow:hover::after {
  width: 34px;
}

.link-arrow--light {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.link-arrow--light:hover {
  color: var(--silver-light);
  border-color: var(--silver);
}

/* Espaços de imagem (a foto cobre o fundo assim que o arquivo existir) */

.media {
  position: relative;
  overflow: hidden;
  background: var(--media-bg);
  isolation: isolate;
}

.media::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 24px 22px 24px;
  z-index: 0;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--media-label);
}

.media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--wine {
  background: radial-gradient(120% 90% at 85% 10%, #84261a 0%, rgba(132, 38, 26, 0) 55%),
    linear-gradient(160deg, #6a150a 0%, #3a0903 100%);
}

.media--graphite {
  background: radial-gradient(120% 90% at 85% 10%, #4a4a4a 0%, rgba(74, 74, 74, 0) 55%),
    linear-gradient(160deg, #353535 0%, #1b1b1b 100%);
}

.media--silver {
  background: linear-gradient(150deg, #c9cdd0 0%, #8e9499 55%, #b8bdc1 100%);
}

.media--wine::after,
.media--graphite::after {
  color: rgba(236, 238, 239, 0.62);
}

.media--silver::after {
  color: var(--ink);
}

/* Cabeçalho: transparente sobre a foto, branco ao rolar
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.site-header.is-scrolled,
.site-header.is-menu-open {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--silver-light);
}

.site-header.is-scrolled {
  box-shadow: 0 18px 40px -30px rgba(28, 28, 28, 0.5);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: var(--header-h);
}

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--wine-soft), var(--silver) 60%, var(--silver-light));
  transform: scaleX(var(--scroll, 0));
  transform-origin: left;
  pointer-events: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--white);
  flex: none;
  transition: color 0.45s var(--ease);
}

.site-header.is-scrolled .brand,
.site-header.is-menu-open .brand {
  color: var(--wine);
}

.site-header.is-scrolled .brand__tag,
.site-header.is-menu-open .brand__tag {
  color: var(--wine);
}

.brand__mark {
  flex: none;
  width: 42px;
  height: 42px;
  fill: currentColor;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name {
  font-family: var(--brand);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Assinatura alinhada à direita do nome, na mesma cor */
.brand__tag {
  align-self: flex-end;
  margin-top: 4px;
  margin-right: -0.44em;
  font-family: var(--brand);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.44em;
  color: inherit;
}

.brand img {
  height: 46px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  padding: 3px 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  /* Prata escovada, levemente translúcida sobre a foto */
  background: linear-gradient(
    115deg,
    rgba(142, 148, 153, 0.9) 0%,
    rgba(236, 238, 239, 0.94) 26%,
    rgba(179, 184, 188, 0.9) 50%,
    rgba(245, 246, 246, 0.94) 74%,
    rgba(151, 156, 161, 0.9) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 14px 26px -18px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.site-header.is-scrolled .nav__list {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav__link {
  position: relative;
  display: block;
  padding: 10px 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.3s;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--wine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.nav__link:hover,
.nav__link.is-active,
.nav__link[aria-current="page"] {
  color: var(--wine);
}

.nav__link:hover::after,
.nav__link.is-active::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header.is-scrolled .nav__link {
  color: var(--graphite);
}

.site-header.is-scrolled .nav__link::after {
  background: var(--wine);
}

.site-header.is-scrolled .nav__link:hover,
.site-header.is-scrolled .nav__link.is-active,
.site-header.is-scrolled .nav__link[aria-current="page"] {
  color: var(--wine);
}

.site-header.is-scrolled .nav-toggle,
.site-header.is-menu-open .nav-toggle {
  border-color: var(--silver-light);
  background: transparent;
}

.site-header.is-scrolled .nav-toggle span,
.site-header.is-menu-open .nav-toggle span {
  background: var(--ink);
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 1px;
  background: rgba(21, 21, 21, 0.3);
  cursor: pointer;
  transition: border-color 0.4s, background-color 0.4s;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  margin: 6px auto;
  background: var(--white);
  transition: transform 0.35s var(--ease), opacity 0.2s, background-color 0.4s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--fg-soft);
  z-index: 3;
  border-bottom-right-radius: var(--curve);
}

/* Home: foto em tela cheia. O texto começa na altura da cintura da equipe,
   sem cobrir nenhum rosto.
   --img-h: altura da foto na largura da tela · --box-h: altura visível */
.hero--photo {
  --offset: 0px;
  --img-h: 56.25vw;
  --box-h: min(var(--img-h), 92vh);
  --text-top: calc(var(--img-h) * 0.525 - (var(--img-h) - var(--box-h)) * 0.3);
  min-height: calc(var(--offset) + var(--box-h));
  padding: 0 0 clamp(36px, 3.6vw, 52px);
}

.hero__bg {
  position: absolute;
  inset: var(--offset, 0px) 0 auto 0;
  height: var(--box-h);
  /* Segura a foto dentro da área do degradê enquanto ela faz o zoom */
  overflow: hidden;
  /* A própria foto some no fundo na base, sem linha de corte */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 99%);
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform-origin: 50% 30%;
  animation: hero-zoom 22s ease-in-out infinite alternate;
}

@keyframes hero-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Três camadas: topo (cabeçalho), mancha suave atrás do texto e
     base que some no preto só no fim, para a foto continuar aparecendo */
  background: linear-gradient(180deg, rgba(21, 21, 21, 0.5) 0%, rgba(21, 21, 21, 0) 18%),
    radial-gradient(
      58% 40% at 50% 74%,
      rgba(21, 21, 21, 0.6) 0%,
      rgba(21, 21, 21, 0.34) 55%,
      rgba(21, 21, 21, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(21, 21, 21, 0) 40%,
      rgba(21, 21, 21, 0.26) 54%,
      rgba(21, 21, 21, 0.46) 70%,
      rgba(21, 21, 21, 0.7) 86%,
      rgba(21, 21, 21, 0.92) 95%,
      var(--night) 99%
    );
}

.hero__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--offset, 0px) + var(--text-top));
  text-align: center;
}

/* Entrada do texto em sequência, sem depender de script */
.hero__center > * {
  animation: hero-in 1.1s var(--ease) both;
}

.hero__center > :nth-child(1) {
  animation-delay: 0.15s;
}

.hero__center > :nth-child(2) {
  animation-delay: 0.3s;
}

.hero__center > :nth-child(3) {
  animation-delay: 0.45s;
}

.hero__center > :nth-child(4) {
  animation-delay: 0.6s;
}

.hero__center > :nth-child(5) {
  animation-delay: 0.75s;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero .eyebrow {
  justify-content: center;
  margin-bottom: 18px;
}

.hero .eyebrow::after {
  content: "";
  flex: none;
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--silver), transparent);
}

.hero h1 {
  max-width: 880px;
  line-height: 1.14;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 22px rgba(0, 0, 0, 0.6);
}

/* O trecho em prata usa preenchimento em degradê: a sombra comum apareceria
   por dentro das letras e escureceria o texto, então ela vai por filtro */
.hero h1 em {
  background: linear-gradient(115deg, #d5d9db 0%, #ffffff 45%, #c4c9cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45));
}

.hero .eyebrow,
.hero .lead {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 14px rgba(0, 0, 0, 0.55);
}

.hero .lead {
  max-width: 640px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.92);
}

.hero .lead + .lead {
  margin-top: 10px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 32px;
}

/* Páginas internas: mesmo modelo, com a foto cobrindo o bloco inteiro.
   Sem foto, fica o fundo escuro com a linha de eletrocardiograma animada. */
.hero--page {
  display: flex;
  align-items: flex-end;
  min-height: clamp(540px, 80vh, 780px);
  padding: calc(var(--header-h) + 56px) 0 clamp(44px, 4.6vw, 68px);
}

.hero--page .hero__bg {
  inset: 0;
  height: auto;
  -webkit-mask-image: none;
  mask-image: none;
  background: radial-gradient(70% 60% at 82% 12%, rgba(122, 31, 19, 0.7) 0%, rgba(122, 31, 19, 0) 70%),
    radial-gradient(60% 50% at 10% 90%, rgba(74, 74, 74, 0.5) 0%, rgba(74, 74, 74, 0) 70%), var(--night);
}

.hero--page .hero__bg img {
  position: absolute;
  inset: 0;
  object-position: 50% 30%;
}

.hero--page .hero__bg::after {
  background: linear-gradient(180deg, rgba(21, 21, 21, 0.5) 0%, rgba(21, 21, 21, 0) 22%),
    linear-gradient(180deg, rgba(21, 21, 21, 0) 25%, rgba(21, 21, 21, 0.55) 62%, rgba(21, 21, 21, 0.88) 92%, var(--night) 100%);
}

.hero--page .hero__center {
  width: 100%;
  padding-top: 0;
}

.hero__pulse {
  position: absolute;
  left: 0;
  top: 30%;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero__pulse path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pulse-draw 5.5s var(--ease) infinite;
}

@keyframes pulse-draw {
  0% {
    stroke-dashoffset: 1;
    opacity: 0.9;
  }
  70% {
    stroke-dashoffset: 0;
    opacity: 0.9;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@supports (height: 1svh) {
  .hero--photo {
    --box-h: min(var(--img-h), 92svh);
  }
}

/* Seções
   ========================================================================== */

.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section);
  color: var(--fg);
}

.section--night {
  background: radial-gradient(70% 60% at 0% 100%, #262626 0%, rgba(38, 38, 38, 0) 65%), var(--night);
}

.section--graphite {
  background: radial-gradient(90% 70% at 100% 0%, #343434 0%, rgba(52, 52, 52, 0) 60%), var(--graphite-bg);
}

.section--wine {
  background: radial-gradient(70% 80% at 0% 100%, rgba(122, 31, 19, 0.85) 0%, rgba(122, 31, 19, 0) 65%),
    radial-gradient(50% 60% at 60% 40%, rgba(95, 17, 7, 0.7) 0%, rgba(95, 17, 7, 0) 70%), var(--wine-bg);
}

.section--light {
  background: linear-gradient(180deg, var(--mist-top) 0%, #e4e8e9 100%);
}

.section--white {
  background: var(--white);
}

/* Textura sobre os fundos escuros */
.section--night::after,
.section--graphite::after,
.section--wine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--grain);
  opacity: 0.07;
  pointer-events: none;
}

/* Canto arredondado da primeira dobra, repetido em algumas seções.
   A seção seguinte sobe por baixo do canto, então o recorte mostra o fundo
   real dela (com degradê e textura), sem diferença de tom. */
.curve-br {
  z-index: 2;
  border-bottom-right-radius: var(--curve);
}

.hero + .section,
.curve-br + .section {
  margin-top: calc(var(--curve) * -1);
  padding-top: calc(var(--section) + var(--curve));
}

.hero + .section--tight,
.curve-br + .section--tight {
  padding-top: calc(clamp(30px, 3.2vw, 46px) + var(--curve));
}

/* Luz que acompanha o cursor */
.section[data-glow]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 0%), rgba(221, 224, 226, 0.12), transparent 65%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.section[data-glow]:hover::before {
  opacity: 1;
}

/* Seção mais enxuta e seção que termina na faixa de destaque */
.section--tight {
  padding-block: clamp(30px, 3.2vw, 46px);
}

.section--ribbon {
  padding-bottom: 0;
}

.section-head {
  max-width: 820px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head--center .eyebrow::after {
  content: "";
  flex: none;
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--mark), transparent);
}

.section-head__lead {
  margin-top: 20px;
  max-width: 700px;
  font-size: 1.0625rem;
}

.section-head--center .section-head__lead {
  margin-inline: auto;
}

/* Cabeçalho largo: o texto de apoio corre em uma linha só quando há espaço */
.section-head--wide,
.section-head--wide .section-head__lead {
  max-width: none;
}

.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: none;
}

.section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: clamp(28px, 3.2vw, 44px);
}

.section__actions--center {
  justify-content: center;
}

.section__note {
  max-width: 820px;
  margin-top: clamp(24px, 3vw, 36px);
  padding-left: 24px;
  border-left: 1px solid var(--line-strong);
  font-size: 1rem;
}

/* Pilares: três colunas com ícone de linha e divisórias verticais
   ========================================================================== */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pillar {
  position: relative;
  padding: 4px clamp(20px, 3.4vw, 48px);
  text-align: center;
  transition: opacity 0.5s var(--ease);
}

.pillar + .pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}

.pillar__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  color: var(--icon);
  transition: transform 0.6s var(--ease);
}

.pillar__icon::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo), transparent);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.pillar__icon svg {
  position: relative;
  width: 64px;
  height: 64px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.pillar__icon svg .accent {
  stroke: var(--icon-accent);
}

.pillar h3 {
  margin-bottom: 6px;
}

.pillar p {
  font-size: 0.95rem;
  line-height: 1.55;
}

.pillar p {
  max-width: 330px;
  margin-inline: auto;
}

/* Valores: cada um em uma cápsula de contorno prateado */
.pillar__values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 8px;
  max-width: 340px;
  margin: 4px auto 0;
}

.pillar__values li {
  padding: 5px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--fg-soft);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.pillar__values li:hover {
  border-color: transparent;
  background: var(--metal);
  color: var(--ink);
}

/* Essência: visão, missão e valores em três cartões sobre o vinho.
   Os das pontas são de vidro; o do meio é prata, como nos outros mosaicos do site. */
.essence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}

.essence__card {
  --essence-fg: var(--white);
  --essence-text: rgba(255, 255, 255, 0.84);
  --essence-mark: var(--silver-light);
  --essence-line: rgba(255, 255, 255, 0.22);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(22px, 2.2vw, 32px);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  border-bottom-right-radius: clamp(36px, 4vw, 56px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 34px 50px -40px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--essence-text);
}

/* A entrada usa a transição comum; a subida ao passar o mouse responde na hora */
.js .essence__card[data-reveal] {
  transition: opacity 1s var(--ease) var(--delay, 0s), transform 1s var(--ease) var(--delay, 0s),
    translate 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

.essence__card:hover {
  translate: 0 -6px;
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 44px 60px -40px rgba(0, 0, 0, 0.9);
}

/* Filete prateado no topo, que se estende ao passar o mouse */
.essence__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--metal);
  transform: scaleX(0.22);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.essence__card:hover::before {
  transform: none;
}

.essence__card--silver {
  --essence-fg: var(--ink);
  --essence-text: #3c3f42;
  --essence-mark: var(--wine);
  --essence-line: rgba(28, 28, 28, 0.2);
  background: linear-gradient(135deg, #f5f6f6 0%, #cfd3d6 45%, #eceeef 70%, #b8bdc1 100%);
  border-color: transparent;
  box-shadow: inset 0 1px 0 #ffffff, 0 34px 50px -40px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.essence__card--silver::before {
  background: var(--fill);
}

.essence__card--silver:hover {
  border-color: transparent;
  box-shadow: inset 0 1px 0 #ffffff, 0 44px 60px -40px rgba(0, 0, 0, 0.9);
}

.essence__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(18px, 2vw, 28px);
}

.essence__num {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--essence-mark);
}

.essence__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--essence-line);
  border-radius: 50%;
  color: var(--essence-mark);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
}

.essence__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.essence__icon svg .accent {
  opacity: 0.6;
}

.essence__card:hover .essence__icon {
  border-color: transparent;
  background: var(--metal);
  color: var(--wine);
}

.essence__card--silver:hover .essence__icon {
  background: var(--wine);
  color: var(--white);
}

.essence__card h3 {
  margin-bottom: 10px;
  font-size: clamp(1.7rem, 2.3vw, 2.1rem);
  line-height: 1.05;
  color: var(--essence-fg);
}

.essence__card p {
  font-size: 1rem;
  line-height: 1.55;
}

/* Valores em lista, com o losango da marca */
.essence__values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 14px;
}

/* O primeiro valor é o mais longo: fica sozinho na linha, sem quebrar */
.essence__values li:first-child {
  grid-column: 1 / -1;
}

.essence__values li {
  position: relative;
  padding-left: 18px;
  font-size: 1rem;
  line-height: 1.35;
}

.essence__values li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--essence-mark);
  transform: rotate(45deg);
  transition: background-color 0.4s var(--ease);
}

.essence__card:hover .essence__values li::before {
  background: var(--essence-mark);
}

@media (max-width: 900px) {
  .essence {
    grid-template-columns: minmax(0, 1fr);
  }

  .essence__top {
    margin-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .essence__card:hover {
    translate: none;
  }
}

/* Os ícones se desenham quando a coluna entra na tela */
.js .pillar[data-reveal] .pillar__icon svg * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease);
  transition-delay: calc(var(--delay, 0s) + 0.3s);
}

.js .pillar[data-reveal].is-visible .pillar__icon svg * {
  stroke-dashoffset: 0;
}

@media (hover: hover) {
  .pillars:hover .pillar:not(:hover) {
    opacity: 0.45;
  }

  .pillar:hover .pillar__icon {
    transform: translateY(-8px);
  }

  .pillar:hover .pillar__icon::before {
    opacity: 1;
    transform: none;
  }
}

/* Bloco dividido (texto + imagem)
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(44px, 7vw, 112px);
}

.split--reverse {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.split--reverse .split__media {
  order: 2;
}

.split__media {
  position: relative;
  margin-left: 20px;
  margin-bottom: 20px;
}

.split--reverse .split__media {
  margin-left: 0;
  margin-right: 20px;
}

.split__media::before {
  content: "";
  position: absolute;
  inset: 20px 20px -20px -20px;
  border: 1px solid var(--line-strong);
  border-bottom-right-radius: 72px;
  pointer-events: none;
}

.split--reverse .split__media::before {
  inset: 20px -20px -20px 20px;
}

.split__media .media {
  aspect-ratio: 4 / 5;
  border-bottom-right-radius: 72px;
}

.split__media .media img {
  top: -8%;
  height: 116%;
  transform: translate3d(0, calc(var(--parallax, 0) * 1%), 0);
  will-change: transform;
}

.split__year {
  position: absolute;
  right: -18px;
  top: 40px;
  z-index: 2;
  padding: 3px;
  background: var(--metal);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 2.2rem;
  line-height: 1;
  box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.9);
}

.split__year span {
  display: block;
  padding: 16px 24px;
  background: linear-gradient(160deg, var(--wine-soft), var(--wine-deep));
  color: var(--white);
}

.split__year small {
  display: block;
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.split__body h2 {
  margin-bottom: 26px;
}

.split__body p + p {
  margin-top: 16px;
}

.split__body .section__actions {
  margin-top: 36px;
}

/* Mosaico de fotos em slides, com o símbolo da marca no centro
   ========================================================================== */

.split--mosaic {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 76px);
  padding-bottom: var(--section);
}

.mosaic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  aspect-ratio: 1 / 1.02;
}

.mosaic__col {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 14px);
  min-height: 0;
}

.mosaic__tile {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: var(--media-bg);
  cursor: zoom-in;
}

/* Alturas alternadas, como no mosaico de referência */
.mosaic__col:first-child .mosaic__tile:first-child,
.mosaic__col:last-child .mosaic__tile:last-child {
  flex-grow: 1.38;
}

.mosaic__col:last-child .mosaic__tile:last-child {
  border-bottom-right-radius: clamp(40px, 5vw, 72px);
}

.mosaic__tile::before {
  content: attr(data-label);
  position: absolute;
  inset: auto 16px 14px 16px;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-align: left;
  text-transform: uppercase;
  color: var(--media-label);
}

.mosaic__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(62, 10, 4, 0) 45%, rgba(62, 10, 4, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.mosaic__tile img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.3s var(--ease), transform 7s linear;
}

.mosaic__tile img.is-current,
html:not(.js) .mosaic__tile img:first-of-type {
  opacity: 1;
  transform: scale(1);
}

.mosaic__tile:hover::after,
.mosaic__tile:focus-visible::after {
  opacity: 1;
}

.mosaic__tile.is-empty {
  cursor: default;
}

.mosaic__tile.is-empty::after {
  content: none;
}

.mosaic__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: clamp(84px, 9vw, 118px);
  aspect-ratio: 1;
  padding: clamp(5px, 0.6vw, 8px);
  border-radius: 50%;
  background: var(--bg-solid);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mosaic__badge span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--wine-soft), var(--wine-deep)) padding-box, var(--metal) border-box;
  color: var(--white);
  box-shadow: 0 18px 30px -16px rgba(62, 10, 4, 0.8);
}

.mosaic__badge svg {
  width: 52%;
  height: 52%;
  fill: currentColor;
}

/* Faixa de destaque no pé da seção */
.ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 28px;
  padding: 16px var(--gutter);
  background: var(--metal);
  background-size: 200% 100%;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  animation: metal-flow 12s ease-in-out infinite alternate;
}

.ribbon span + span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 28px;
  background: var(--wine);
  transform: rotate(45deg) translateY(-2px);
}

/* Galeria em tela cheia */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(15, 15, 15, 0.94);
  color: var(--white);
}

.lightbox::backdrop {
  background: rgba(15, 15, 15, 0.6);
}

.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: lightbox-in 0.35s var(--ease);
}

@keyframes lightbox-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-light);
}

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 clamp(16px, 7vw, 96px);
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  animation: lightbox-in 0.4s var(--ease);
}

.lightbox__caption {
  padding: 14px var(--gutter) 20px;
  font-family: var(--serif);
  font-size: 1.15rem;
  text-align: center;
  color: var(--silver-light);
}

.lightbox__btn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(221, 224, 226, 0.45);
  border-radius: 50%;
  background: rgba(21, 21, 21, 0.5);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.lightbox__btn:hover {
  background: var(--silver-light);
  border-color: var(--silver-light);
  color: var(--ink);
}

.lightbox__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.lightbox__btn--prev,
.lightbox__btn--next {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
}

.lightbox__btn--prev {
  left: clamp(8px, 2vw, 28px);
}

.lightbox__btn--next {
  right: clamp(8px, 2vw, 28px);
}

.lightbox :focus-visible {
  outline-color: var(--silver-light);
}

/* Trilho arrastável (equipe, depoimentos)
   ========================================================================== */

.rail {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.rail.is-dragging a,
.rail.is-dragging img {
  pointer-events: none;
}

.rail > * {
  flex: 0 0 clamp(236px, 23vw, 292px);
  scroll-snap-align: start;
}

.rail--wide > * {
  flex-basis: clamp(280px, 32vw, 400px);
}

.rail-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 52px);
}

.rail-progress {
  position: relative;
  flex: 1;
  height: 1px;
  margin-right: 12px;
  background: var(--line);
}

.rail-progress span {
  position: absolute;
  top: -1px;
  left: 0;
  width: 30%;
  height: 3px;
  background: var(--fill);
  transition: left 0.2s linear;
}

.rail-btn {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--fg-strong);
  cursor: pointer;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease),
    opacity 0.3s, transform 0.4s var(--ease);
}

.rail-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.rail-btn:hover:not(:disabled) {
  background: var(--pill-bg);
  border-color: var(--pill-bg);
  color: var(--pill-fg);
  transform: scale(1.06);
}

.rail-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Equipe: retratos que se expandem
   O retrato em destaque abre em cor, com nome, registro e áreas.
   ========================================================================== */

.team {
  display: flex;
  gap: clamp(6px, 0.8vw, 12px);
  height: clamp(440px, 42vw, 580px);
}

.team__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 85% 10%, #84261a 0%, rgba(132, 38, 26, 0) 55%),
    linear-gradient(160deg, #6a150a 0%, #3a0903 100%);
  border-radius: 3px;
  cursor: pointer;
  transition: flex-grow 0.8s var(--ease), border-radius 0.8s var(--ease), box-shadow 0.8s var(--ease);
}

.team__card:nth-child(even) {
  background: radial-gradient(120% 90% at 85% 10%, #4a4a4a 0%, rgba(74, 74, 74, 0) 55%),
    linear-gradient(160deg, #353535 0%, #1b1b1b 100%);
}

.team__card.is-active {
  flex-grow: 4.4;
  border-bottom-right-radius: clamp(40px, 5vw, 72px);
  box-shadow: 0 40px 70px -40px rgba(62, 10, 4, 0.75);
  cursor: default;
}

/* Iniciais para quem ainda não tem foto */
.team__card::before {
  content: attr(data-initials);
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  letter-spacing: 0.04em;
  color: transparent;
  background: linear-gradient(135deg, #b3b8bc 0%, #ffffff 48%, #a9aeb2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(-40px);
}

.team__card img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform 1.4s var(--ease);
}

.team__card.is-active img {
  transform: scale(1.03);
}

/* Degradê vinho na base, para o texto */
.team__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(40, 8, 4, 0) 46%, rgba(40, 8, 4, 0.62) 74%, rgba(40, 8, 4, 0.94) 100%);
  transition: opacity 0.6s var(--ease);
}

/* Nome na vertical enquanto o retrato está recolhido */
.team__tab {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  transition: opacity 0.4s var(--ease);
}

.team__card.is-active .team__tab {
  opacity: 0;
}

.team__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: clamp(22px, 2.6vw, 36px);
  padding-right: clamp(36px, 5vw, 72px);
  color: rgba(255, 255, 255, 0.86);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}

.team__card.is-active .team__info,
html:not(.js) .team__info {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0.3s;
}

.team__reg {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--silver-light);
}

.team__info h3 {
  margin-top: 8px;
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  white-space: nowrap;
  color: var(--white);
}

.team__role {
  margin-top: 4px;
  white-space: nowrap;
}

.team__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  background: none;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.team__more::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease);
}

.team__more:hover {
  color: var(--silver-light);
  border-color: var(--silver-light);
}

.team__more:hover::after {
  width: 40px;
}

.team__more:focus-visible {
  outline-color: var(--white);
}

.team__hint {
  margin-top: 18px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--fg);
}

@media (max-width: 900px) {
  /* No celular os retratos empilham e abrem na vertical */
  .team {
    flex-direction: column;
    height: auto;
  }

  .team__card {
    flex: none;
    height: 72px;
    transition: height 0.7s var(--ease), border-radius 0.7s var(--ease);
  }

  .team__card.is-active {
    height: min(118vw, 520px);
  }

  .team__card::before {
    transform: none;
    position: absolute;
    right: 20px;
    font-size: 1.5rem;
    opacity: 0.7;
  }

  .team__card.is-active::before {
    position: static;
    font-size: 3rem;
    opacity: 1;
    transform: translateY(-40px);
  }

  .team__card:not(.is-active)::after {
    background: linear-gradient(90deg, rgba(40, 8, 4, 0.9) 0%, rgba(40, 8, 4, 0.55) 60%, rgba(40, 8, 4, 0.2) 100%);
  }

  .team__card:not(.is-active) img {
    object-position: 50% 22%;
  }

  .team__tab {
    left: 20px;
    bottom: auto;
    top: 50%;
    writing-mode: horizontal-tb;
    transform: translateY(-50%);
  }

  .team__info h3,
  .team__role,
  .team__reg {
    white-space: normal;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Perfil do médico (janela) */
.profile {
  width: min(940px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--fg);
  border-bottom-right-radius: clamp(40px, 6vw, 84px);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.8);
  overflow: auto;
}

.profile::backdrop {
  background: rgba(15, 15, 15, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.profile[open] {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  animation: profile-in 0.45s var(--ease);
}

@keyframes profile-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.profile__photo {
  display: grid;
  place-items: center;
  min-height: 420px;
}

.profile__photo::after {
  content: none;
}

.profile__photo::before {
  content: attr(data-initials);
  font-family: var(--serif);
  font-size: 5rem;
  letter-spacing: 0.04em;
  color: transparent;
  background: linear-gradient(135deg, #6f757a 0%, #d5d9db 48%, #787e83 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.profile__photo img {
  object-position: 50% 20%;
}

.profile__body {
  padding: clamp(28px, 4vw, 52px);
  padding-right: clamp(28px, 5vw, 68px);
}

.profile__body .eyebrow {
  margin-bottom: 10px;
}

.profile__body h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.12;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.chips li {
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--fg-soft);
}

.profile__cv,
.profile__text {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--silver-light);
}

.profile__cv li {
  position: relative;
  padding-left: 22px;
  line-height: 1.5;
}

.profile__cv li + li {
  margin-top: 9px;
}

.profile__cv li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--wine);
  transform: rotate(45deg);
}

.profile__note {
  margin-top: 16px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wine);
}

.profile__body .btn {
  margin-top: 26px;
}

.profile__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--silver);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.profile__close:hover {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--white);
}

.profile__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* Especialidades: mosaico de cartões em tamanhos diferentes
   Foto da clínica, vinho, prata e branco. O cartão inclina levemente
   na direção do cursor (--rx e --ry vêm do script).
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: clamp(10px, 1.2vw, 16px);
}

.bento__tile {
  --tile-fg: var(--ink);
  --tile-muted: #5e6367;
  --tile-mark: var(--wine);
  --tile-line: var(--silver);
  --tile-glow: rgba(95, 17, 7, 0.1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(18px, 1.8vw, 26px);
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 4px;
  border-bottom-right-radius: clamp(36px, 4vw, 56px);
  color: var(--tile-muted);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
  will-change: transform;
}

.bento__tile--tall {
  grid-row: span 2;
}

.bento__tile:hover,
.bento__tile:focus-within {
  --lift: -6px;
  box-shadow: 0 44px 70px -46px rgba(62, 10, 4, 0.7);
}

/* Entrada em sequência feita por animação, para não atrasar a inclinação */
.js .bento__tile[data-reveal] {
  opacity: 0;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
  transition-delay: 0s;
}

.js .bento__tile[data-reveal].is-visible {
  opacity: 1;
  animation: bento-in 0.9s var(--ease) var(--delay, 0s) backwards;
}

@keyframes bento-in {
  from {
    opacity: 0;
    transform: perspective(1000px) translateY(28px);
  }
}

/* Luz que segue o cursor dentro do cartão */
.bento__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--tile-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.bento__tile:hover::after {
  opacity: 1;
}

/* Sobre foto, nenhuma luz acompanha o cursor */
.bento__tile--photo::after {
  display: none;
}

.bento__tile--wine {
  --tile-fg: var(--white);
  --tile-muted: rgba(255, 255, 255, 0.8);
  --tile-mark: var(--silver-light);
  --tile-line: rgba(255, 255, 255, 0.4);
  --tile-glow: rgba(255, 255, 255, 0.16);
  background: radial-gradient(90% 80% at 0% 100%, rgba(122, 31, 19, 0.95) 0%, rgba(122, 31, 19, 0) 65%),
    linear-gradient(160deg, #5f1107 0%, #3e0a04 100%);
  border-color: transparent;
}

.bento__tile--silver {
  --tile-muted: #3c3f42;
  --tile-line: rgba(28, 28, 28, 0.35);
  --tile-glow: rgba(255, 255, 255, 0.7);
  background: linear-gradient(135deg, #f5f6f6 0%, #cfd3d6 45%, #eceeef 70%, #b8bdc1 100%);
  border-color: transparent;
}

.bento__tile--photo {
  --tile-fg: var(--white);
  --tile-muted: rgba(255, 255, 255, 0.86);
  --tile-mark: var(--white);
  --tile-line: rgba(255, 255, 255, 0.45);
  --tile-glow: rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, #6a150a 0%, #3a0903 100%);
  border-color: transparent;
}

.bento__tile img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.bento__tile:hover img {
  transform: scale(1.06);
}

/* Véu vinho sobre a foto, para o texto */
.bento__tile--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(40, 8, 4, 0.4) 0%, rgba(40, 8, 4, 0.66) 36%, rgba(40, 8, 4, 0.94) 100%);
}

.bento__tile--tall.bento__tile--photo::before {
  background: linear-gradient(180deg, rgba(40, 8, 4, 0.3) 0%, rgba(40, 8, 4, 0.08) 30%, rgba(40, 8, 4, 0.6) 58%, rgba(40, 8, 4, 0.94) 100%);
}

.bento__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bento__num {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--tile-mark);
}

.bento__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--tile-line);
  border-radius: 50%;
  color: var(--tile-fg);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease),
    transform 0.45s var(--ease);
}

.bento__arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bento__tile:hover .bento__arrow,
.bento__tile:focus-within .bento__arrow {
  background: var(--tile-fg);
  border-color: var(--tile-fg);
  color: var(--white);
  transform: rotate(45deg);
}

.bento__tile--wine:hover .bento__arrow,
.bento__tile--wine:focus-within .bento__arrow,
.bento__tile--photo:hover .bento__arrow,
.bento__tile--photo:focus-within .bento__arrow {
  color: var(--wine);
}

.bento__icon {
  width: 42px;
  height: 42px;
  margin-bottom: 8px;
  color: var(--tile-mark);
  transition: transform 0.6s var(--ease);
}

.bento__tile:hover .bento__icon {
  transform: translateY(-4px);
}

.bento__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.bento__icon svg .accent {
  opacity: 0.6;
}

.js .bento__tile[data-reveal] .bento__icon svg * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease);
  transition-delay: calc(var(--delay, 0s) + 0.35s);
}

.js .bento__tile[data-reveal].is-visible .bento__icon svg * {
  stroke-dashoffset: 0;
}

.bento__tile h3 {
  margin-bottom: 6px;
  font-size: clamp(1.3rem, 1.6vw, 1.5rem);
  color: var(--tile-fg);
}

.bento__tile--tall h3 {
  font-size: clamp(1.6rem, 2.2vw, 2rem);
}

.bento__tile p {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* O link cobre o cartão inteiro */
.bento__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bento__link:focus-visible {
  outline: none;
}

.bento__tile:has(.bento__link:focus-visible) {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
}

.bento__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tile-fg);
}

.bento__cta::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease);
}

.bento__tile:hover .bento__cta::after {
  width: 42px;
}

@media (max-width: 1000px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento__tile--tall {
    grid-row: span 1;
    grid-column: span 2;
    min-height: 380px;
  }

  .bento__tile:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .bento__tile--tall,
  .bento__tile:last-child {
    grid-column: auto;
  }

  .bento__tile {
    min-height: 0;
  }

  .bento__tile--tall {
    min-height: 420px;
  }

  /* No celular o ícone cairia em cima da TV com a marca que aparece na foto */
  .bento__tile--tall .bento__icon {
    display: none;
  }
}

/* Mosaico nas páginas internas: colunas iguais e cartões informativos (sem link) */

.bento--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(240px, auto);
}

.bento--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(240px, auto);
}

.bento--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(210px, auto);
}

/* Mosaico em lista: dois cartões compactos por linha, número ao lado do título */
.bento--list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
}

.bento--list .bento__tile {
  justify-content: flex-start;
  gap: 8px;
  padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 28px);
  border-bottom-right-radius: clamp(28px, 3vw, 40px);
}

.bento__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.bento__head h3 {
  margin-bottom: 0;
}

.bento--list .bento__num {
  flex: none;
  font-size: 1.2rem;
}

.bento--list .bento__tile p {
  font-size: 0.95rem;
}

/* Aviso de espaço reservado: some assim que a foto existe */
.bento__slot {
  padding: 5px 12px;
  border: 1px dashed var(--tile-line);
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tile-muted);
}

.bento__tile img ~ .bento__top .bento__slot {
  display: none;
}

/* Lista de sinais ao lado de uma foto */
.listing {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  align-items: stretch;
  gap: clamp(24px, 3.4vw, 56px);
}

.listing__photo {
  min-height: 320px;
  border-radius: 3px;
  border-bottom-right-radius: clamp(40px, 5vw, 72px);
}

.listing__photo img {
  transition: transform 1.4s var(--ease);
}

.listing__photo:hover img {
  transform: scale(1.05);
}

/* Momentos: cartões com a foto em cima e o bloco de cor embaixo */
.moments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}

.moment {
  --moment-fg: var(--white);
  --moment-muted: rgba(255, 255, 255, 0.82);
  --moment-mark: var(--silver-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
  border-bottom-right-radius: clamp(36px, 4vw, 56px);
  box-shadow: 0 30px 50px -40px rgba(62, 10, 4, 0.55);
}

/* A entrada usa a transição comum; a subida ao passar o mouse responde na hora */
.js .moment[data-reveal] {
  transition: opacity 1s var(--ease) var(--delay, 0s), transform 1s var(--ease) var(--delay, 0s),
    translate 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.moment:hover {
  translate: 0 -6px;
  box-shadow: 0 44px 64px -40px rgba(62, 10, 4, 0.75);
}

.moment__photo {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: var(--mist);
}

.moment__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.moment:hover .moment__photo img {
  transform: scale(1.04);
}

.moment__body {
  position: relative;
  flex: 1;
  padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 30px);
  color: var(--moment-muted);
}

/* Filete prateado entre a foto e o bloco de cor */
.moment__body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--metal);
}

.moment--wine .moment__body {
  background: radial-gradient(90% 80% at 0% 100%, rgba(122, 31, 19, 0.95) 0%, rgba(122, 31, 19, 0) 65%),
    linear-gradient(160deg, #5f1107 0%, #3e0a04 100%);
}

.moment--silver {
  --moment-fg: var(--ink);
  --moment-muted: #3c3f42;
  --moment-mark: var(--wine);
}

.moment--silver .moment__body {
  background: linear-gradient(135deg, #f5f6f6 0%, #cfd3d6 45%, #eceeef 70%, #b8bdc1 100%);
}

.moment--silver .moment__body::before {
  background: var(--fill);
}

.moment__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}

.moment__num {
  flex: none;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--moment-mark);
}

.moment h3 {
  color: var(--moment-fg);
}

.moment p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Quatro cartões na mesma linha */
.moments--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.moments--4 .moment__body {
  padding: clamp(16px, 1.5vw, 22px) clamp(16px, 1.5vw, 22px) clamp(20px, 2vw, 28px);
}

.moments--4 .moment__head {
  gap: 10px;
}

.moments--4 .moment h3 {
  font-size: clamp(1.15rem, 1.4vw, 1.3rem);
}

.moments--4 .moment p {
  font-size: 0.9rem;
}

@media (max-width: 1100px) {
  .moments--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Fotos horizontais (16:9) aparecem inteiras; em telas médias, dois cartões por linha */
.moments--wide .moment__photo {
  aspect-ratio: 16 / 9;
}

@media (max-width: 900px) {
  .moments {
    grid-template-columns: minmax(0, 1fr);
  }

  .moments--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .moments--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .moment:hover {
    translate: none;
  }

  .moment:hover .moment__photo img {
    transform: none;
  }
}

/* Cena: foto de fundo na seção, nítida, com um véu bem leve só na borda esquerda.
   O conteúdo fica em um painel de vidro à esquerda; a pessoa da foto aparece à direita, sem nada por cima. */
.section--scene {
  overflow: hidden;
}

.scene__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}

.scene__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 28%;
}

.scene__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(238, 240, 241, 0.28) 0%, rgba(238, 240, 241, 0.12) 30%, rgba(238, 240, 241, 0) 48%);
}

/* Painel de vidro que recebe o texto */
.scene__content {
  width: min(100%, 610px);
  padding: clamp(20px, 2vw, 28px);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.72) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  border-bottom-right-radius: clamp(36px, 4vw, 56px);
  box-shadow: inset 0 1px 0 #ffffff, 0 40px 70px -44px rgba(28, 28, 28, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}

.scene__content .section-head {
  margin-bottom: clamp(14px, 1.5vw, 18px);
}

.scene__content .eyebrow {
  margin-bottom: 8px;
}

.scene__content h2 {
  font-size: clamp(1.6rem, 2.3vw, 2.05rem);
}

.scene__content .section__actions {
  margin-top: clamp(16px, 1.6vw, 22px);
}

/* Sinais de atenção: cartões de vidro, dois por linha */
.signs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sign {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 9px 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--silver-light);
  border-radius: 3px;
  border-bottom-right-radius: 22px;
  box-shadow: 0 18px 30px -26px rgba(62, 10, 4, 0.55);
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--fg-soft);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.4s var(--ease),
    opacity 0.8s var(--ease) calc(var(--i, 0) * 60ms + 0.15s), translate 0.8s var(--ease) calc(var(--i, 0) * 60ms + 0.15s);
}

/* Quando sobra um cartão sozinho na última linha, ele ocupa a largura toda */
.sign:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Os cartões entram um depois do outro quando a lista aparece */
.js .signs[data-reveal] .sign {
  opacity: 0;
  translate: 0 18px;
}

.js .signs[data-reveal].is-visible .sign {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .signs[data-reveal] .sign {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* Filete vinho que cresce na lateral */
.sign::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--fill);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease);
}

.sign__mark {
  flex: none;
  width: 9px;
  height: 9px;
  border: 1px solid var(--wine);
  transform: rotate(45deg);
  transition: background-color 0.4s var(--ease), transform 0.6s var(--ease);
}

.sign:hover {
  transform: translateX(4px);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 26px 38px -26px rgba(62, 10, 4, 0.7);
}

.sign:hover::before {
  transform: none;
}

.sign:hover .sign__mark {
  background: var(--wine);
  transform: rotate(225deg);
}

.scene__content .section__note {
  max-width: none;
  margin-top: clamp(14px, 1.5vw, 20px);
  padding-left: 16px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fg-soft);
}

@media (max-width: 960px) {
  /* No celular a foto vira uma faixa no topo e o conteúdo vem embaixo */
  .section--scene {
    padding-top: 0;
  }

  .scene__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 16 / 10;
    margin-bottom: 22px;
  }

  .scene__bg img {
    object-position: 88% 30%;
  }

  .scene__bg::after {
    background: linear-gradient(180deg, rgba(238, 240, 241, 0) 82%, var(--mist-top) 100%);
  }

  /* Sobre o fundo liso o painel não é necessário */
  .scene__content {
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 640px) {
  .signs {
    grid-template-columns: minmax(0, 1fr);
  }

  .sign {
    min-height: 0;
  }
}

/* Enquanto a foto não existe, o bloco some no celular e a seção fica só com o fundo claro */
.scene__bg:not(:has(img)) {
  display: none;
}

@media (max-width: 960px) {
  .section--scene:not(:has(.scene__bg img)) {
    padding-top: var(--section);
  }
}

/* Cena com painel até a metade da página */
.scene__content--half {
  width: min(100%, 560px);
}

.scene__content--half h2 {
  font-size: clamp(1.5rem, 2vw, 1.8rem);
}

.scene__content .section-head__lead {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Lista numerada: número e título na mesma linha, texto menor embaixo */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--silver);
}

.step {
  position: relative;
  padding: 9px 0 9px 2px;
  border-top: 1px solid var(--silver);
  transition: padding-left 0.5s var(--ease), opacity 0.8s var(--ease) calc(var(--i, 0) * 80ms + 0.15s),
    translate 0.8s var(--ease) calc(var(--i, 0) * 80ms + 0.15s);
}

/* Linha vinho que avança sobre a divisória */
.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
  background: var(--fill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}

.step:hover {
  padding-left: 12px;
}

.step:hover::before {
  transform: none;
}

.step__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.step__num {
  flex: none;
  min-width: 26px;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--wine);
}

.step h3 {
  font-size: clamp(1.15rem, 1.4vw, 1.3rem);
}

.step p {
  margin-top: 1px;
  padding-left: 38px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--fg);
}

.js .steps[data-reveal] .step {
  opacity: 0;
  translate: 0 16px;
}

.js .steps[data-reveal].is-visible .step {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .steps[data-reveal] .step {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* Perguntas frequentes: título e botão ao lado das perguntas */
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
}

.faq-wrap__aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.faq-wrap__aside .section-head {
  margin-bottom: 0;
}

.faq-wrap__aside .btn {
  margin-top: 24px;
}

.faq-wrap .faq {
  max-width: none;
  margin: 0;
}

@media (max-width: 1000px) {
  .bento--4,
  .bento--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento--4 .bento__tile:last-child,
  .bento--2 .bento__tile:last-child {
    grid-column: auto;
  }

  .bento--3 .bento__tile:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

@media (max-width: 960px) {
  .listing,
  .faq-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-wrap__aside {
    position: static;
  }

  .listing__photo {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 640px) {
  .bento--4,
  .bento--3,
  .bento--2,
  .bento--list {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .bento--3 .bento__tile:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Jornada: as etapas acendem em sequência e a linha vinho avança entre elas
   ========================================================================== */

.path {
  --path-gap: clamp(14px, 1.8vw, 26px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--path-gap);
}

.path__step {
  position: relative;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.path__body {
  position: relative;
  padding-top: 32px;
}

.path__body::before,
.path__body::after {
  content: "";
  position: absolute;
  left: 0;
}

.path__body::before {
  right: calc(var(--path-gap) * -1);
  top: 7px;
  height: 1px;
  background: var(--line);
}

.path__body::after {
  top: 6px;
  width: 0;
  height: 3px;
  background: var(--fill);
  transition: width 0.9s var(--ease);
}

.path__step:last-child .path__body::before {
  right: 0;
}

.path__step.is-on .path__body::after,
html:not(.js) .path__body::after {
  width: calc(100% + var(--path-gap));
}

.path__step:last-child.is-on .path__body::after {
  width: 100%;
}

.path__dot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 15px;
  height: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-solid);
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.path__step.is-on .path__dot,
html:not(.js) .path__dot {
  border-color: var(--mark);
  background: var(--mark);
  box-shadow: 0 0 0 6px var(--tint);
}

/* Ao passar o mouse, o ponto da etapa pulsa */
.path__step:hover .path__dot {
  animation: dot-beat 1.6s ease-in-out infinite;
}

@keyframes dot-beat {
  0%,
  100% {
    box-shadow: 0 0 0 5px var(--beat);
  }
  50% {
    box-shadow: 0 0 0 12px transparent;
  }
}

.path__num {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  font-weight: 400;
  line-height: 1;
  color: transparent;
  background: var(--em-bg);
  -webkit-background-clip: text;
  background-clip: text;
  font-variant-numeric: lining-nums;
}

.path__step h3 {
  margin: 6px 0 6px;
}

.path__step p {
  font-size: 0.95rem;
  line-height: 1.55;
}

.js .path__step:not(.is-on) {
  opacity: 0.45;
  transform: translateY(8px);
}

@media (max-width: 900px) {
  .path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .path__step:nth-child(even) .path__body::before {
    right: 0;
  }

  .path__step:nth-child(even).is-on .path__body::after {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .path {
    grid-template-columns: minmax(0, 1fr);
  }

  .path__body::before {
    right: 0;
  }

  .path__step.is-on .path__body::after {
    width: 100%;
  }
}

/* Lista de verificação
   ========================================================================== */

.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 80px);
  border-top: 1px solid var(--line);
}

.checklist li {
  position: relative;
  padding: 15px 16px 15px 40px;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--fg-soft);
  transition: padding-left 0.5s var(--ease), color 0.4s var(--ease), background-color 0.5s var(--ease);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 23px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--mark);
  transform: rotate(45deg);
  transition: background-color 0.4s var(--ease), transform 0.5s var(--ease), left 0.5s var(--ease);
}

.checklist li:hover {
  padding-left: 52px;
  color: var(--fg-strong);
  background: linear-gradient(90deg, var(--tint), transparent 70%);
}

.checklist li:hover::before {
  left: 16px;
  background: var(--mark);
  transform: rotate(225deg);
}

/* Por que escolher: foto da marca + cartões que se preenchem de prata
   ========================================================================== */

.reasons {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
  gap: clamp(28px, 4vw, 64px);
}

.reasons__aside {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.reasons__aside .section-head {
  margin-bottom: 0;
}

.reasons__photo {
  flex: 1;
  min-height: 260px;
  border-radius: 3px;
  border-bottom-right-radius: clamp(40px, 5vw, 72px);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.7);
}

.reasons__photo img {
  transition: transform 1.4s var(--ease);
}

.reasons__photo:hover img {
  transform: scale(1.05);
}

.reasons__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: clamp(8px, 1vw, 14px);
}

.reason {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 26px);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  border-bottom-right-radius: 30px;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.3;
  color: var(--fg-soft);
  transition: transform 0.6s var(--ease), color 0.5s var(--ease), border-color 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}

.reason:last-child:nth-child(odd) {
  grid-column: span 2;
}

/* Preenchimento prateado a partir do ponto em que o cursor entra */
.reason::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--card-fill);
  clip-path: circle(0% at var(--mx, 50%) var(--my, 100%));
  transition: clip-path 0.7s var(--ease);
}

.reason__num {
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--accent);
  transition: color 0.5s var(--ease);
}

.reason:hover {
  transform: translateY(-4px);
  border-color: transparent;
  color: var(--card-fg-hover);
  box-shadow: 0 30px 50px -34px rgba(0, 0, 0, 0.8);
}

.reason:hover::before {
  clip-path: circle(170% at var(--mx, 50%) var(--my, 100%));
}

.reason:hover .reason__num {
  color: var(--card-mark-hover);
}

@media (max-width: 960px) {
  .reasons {
    grid-template-columns: minmax(0, 1fr);
  }

  .reasons__photo {
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 560px) {
  .reasons__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .reason:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* FAQ
   ========================================================================== */

.faq {
  max-width: 920px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
  interpolate-size: allow-keywords;
}

.faq__item {
  border-bottom: 1px solid var(--line);
  transition: background-color 0.5s var(--ease);
}

.faq__item[open] {
  background: linear-gradient(90deg, var(--tint), transparent);
}

.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.5s var(--ease), content-visibility 0.5s allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
}

.faq__item summary {
  position: relative;
  display: block;
  padding: 19px 64px 19px 20px;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg-strong);
  cursor: pointer;
  list-style: none;
  transition: color 0.3s, padding-left 0.5s var(--ease);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover,
.faq__item[open] summary {
  color: var(--accent);
  padding-left: 28px;
}

.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--mark);
  transition: transform 0.5s var(--ease);
}

.faq__item summary::after {
  transform: rotate(90deg);
}

.faq__item[open] summary::after {
  transform: rotate(0deg);
}

.faq__item[open] summary::before {
  transform: rotate(180deg);
}

.faq__answer {
  padding: 0 64px 22px 28px;
}

/* Depoimentos, Instagram e convênios
   ========================================================================== */

/* Depoimentos: cartões de vidro no trilho arrastável */

/* Luzes em vinho e prata que passam por trás do vidro */
.glass-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.glass-scene span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
  animation: glass-drift 22s ease-in-out infinite alternate;
}

.glass-scene span:nth-child(1) {
  left: 4%;
  top: 34%;
  width: clamp(260px, 30vw, 460px);
  aspect-ratio: 1;
  background: rgba(95, 17, 7, 0.42);
}

.glass-scene span:nth-child(2) {
  right: 6%;
  top: 22%;
  width: clamp(240px, 26vw, 400px);
  aspect-ratio: 1;
  background: rgba(150, 46, 30, 0.3);
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}

.glass-scene span:nth-child(3) {
  left: 38%;
  bottom: -18%;
  width: clamp(280px, 34vw, 520px);
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.9);
  animation-duration: 34s;
}

@keyframes glass-drift {
  from {
    transform: translate3d(-6%, -4%, 0) scale(1);
  }

  to {
    transform: translate3d(8%, 6%, 0) scale(1.12);
  }
}

/* O trilho corta o que sai dele: folga para a sombra e para o cartão subir */
.section--glass .rail {
  padding-block: 14px 44px;
  margin-block: -14px -44px;
}

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 236px;
  padding: clamp(24px, 2.4vw, 34px);
  overflow: hidden;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  border-bottom-right-radius: 48px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    0 30px 44px -34px rgba(62, 10, 4, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), background-color 0.6s var(--ease);
}

/* Sem suporte a desfoque de fundo, o cartão fica mais opaco */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .review {
    background: rgba(255, 255, 255, 0.9);
  }
}

/* Aspas grandes ao fundo */
.review::before {
  content: "\201C";
  position: absolute;
  right: 22px;
  top: 2px;
  font-family: var(--serif);
  font-size: 6.5rem;
  line-height: 1;
  color: rgba(95, 17, 7, 0.1);
}

/* Resumo da avaliação: sem aspas, porque não é citação */
.review--summary::before {
  content: none;
}

/* Reflexo que atravessa o vidro */
.review::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -70%;
  width: 46%;
  height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

.review:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    0 40px 54px -34px rgba(62, 10, 4, 0.62);
}

.review:hover::after {
  left: 130%;
  opacity: 1;
  transition: left 1.1s var(--ease), opacity 0.3s;
}

.review__stars {
  position: relative;
  display: flex;
  gap: 5px;
  color: var(--wine);
}

.review__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.review__text {
  position: relative;
  flex: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);
  line-height: 1.4;
  color: var(--ink);
}

.review__author {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(95, 17, 7, 0.14);
}

/* Inicial de quem avaliou */
.review__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, #7a1d10 0%, var(--wine) 60%, #3e0a04 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 14px -8px rgba(62, 10, 4, 0.7);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
  color: var(--silver-light);
}

.review__name {
  display: grid;
  gap: 2px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink);
}

.review__name small {
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--text-muted, #5e6367);
}

@media (prefers-reduced-motion: reduce) {
  .glass-scene span {
    animation: none;
  }

  .review::after {
    display: none;
  }
}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
}

.insta-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  transition: transform 0.7s var(--ease), border-radius 0.7s var(--ease);
}

.insta-tile img {
  transition: transform 1s var(--ease);
}

.insta-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(62, 10, 4, 0.72);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.insta-tile__icon {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: var(--white);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.insta-tile__icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.insta-tile:hover,
.insta-tile:focus-visible {
  transform: translateY(-6px);
  border-bottom-right-radius: 48px;
}

.insta-tile:hover::before,
.insta-tile:focus-visible::before {
  opacity: 1;
}

.insta-tile:hover .insta-tile__icon,
.insta-tile:focus-visible .insta-tile__icon {
  opacity: 1;
  transform: none;
}

.insta-tile:hover img {
  transform: scale(1.08);
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
}

.marquee.is-ready .marquee__track {
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Segunda faixa corre no sentido contrário */
.marquee--reverse {
  margin-top: clamp(10px, 1.2vw, 16px);
}

.marquee--reverse.is-ready .marquee__track {
  animation-direction: reverse;
  animation-duration: 44s;
}

.insurer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  min-height: 64px;
  margin-right: clamp(10px, 1.2vw, 16px);
  padding: 14px 30px 14px 26px;
  border: 1px solid var(--silver-light);
  border-radius: 3px;
  border-bottom-right-radius: 22px;
  background: var(--white);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease), background-color 0.4s var(--ease),
    color 0.4s var(--ease);
}

.insurer::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid var(--wine);
  transform: rotate(45deg);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.insurer:hover {
  border-color: var(--wine);
  background: var(--wine);
  color: var(--white);
  transform: translateY(-4px);
}

.insurer:hover::before {
  border-color: var(--silver-light);
  background: var(--silver-light);
}

/* Convênio com logo: cartão branco, logo em cores */
.insurer--logo {
  justify-content: center;
  min-width: 168px;
  min-height: 84px;
  padding: 14px 28px;
}

.insurer--logo::before {
  content: none;
}

.insurer--logo:hover {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 26px 40px -30px rgba(62, 10, 4, 0.5);
}

.insurer img {
  display: block;
  width: auto;
  height: auto;
  max-width: 150px;
  max-height: 50px;
  object-fit: contain;
  transition: transform 0.5s var(--ease);
}

.insurer:hover img {
  transform: scale(1.05);
}

.insurer__note {
  padding-left: 14px;
  border-left: 1px solid var(--silver-light);
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: normal;
  max-width: 96px;
  color: var(--text-muted, #5e6367);
}

/* Localização: mapa grande, cartão de informações e painel da marca
   ========================================================================== */

.place {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(200px, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
}

.place__map {
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  min-height: 480px;
  padding: 1px;
  background: var(--metal);
  border-radius: 4px;
}

.place__map iframe {
  width: 100%;
  height: 100%;
  min-height: 478px;
  border: 0;
  border-radius: 3px;
  filter: grayscale(0.85) contrast(1.04);
  transition: filter 0.8s var(--ease);
}

.place__map:hover iframe {
  filter: none;
}

.place__info {
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--white);
  border: 1px solid var(--silver-light);
  border-radius: 4px;
}

.place__details > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--silver-light);
}

.place__details > div:first-child {
  padding-top: 0;
}

.place__details dt {
  padding-top: 3px;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wine);
}

.place__details dd {
  color: var(--fg-soft);
  line-height: 1.55;
}

.place__details a {
  border-bottom: 1px solid var(--silver);
  transition: border-color 0.3s, color 0.3s;
}

.place__details a:hover {
  color: var(--wine);
  border-color: var(--wine);
}

.place__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.place__actions .btn {
  min-height: 50px;
  padding: 14px 24px;
  font-size: 0.72rem;
}

/* Marca em branco sobre o vinho, no centro do painel */
.place__brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 0.8vw, 11px);
  min-height: 200px;
  overflow: hidden;
  border-radius: 4px;
  border-bottom-right-radius: clamp(40px, 5vw, 64px);
  background: radial-gradient(120% 90% at 85% 10%, #84261a 0%, rgba(132, 38, 26, 0) 55%),
    linear-gradient(160deg, #6a150a 0%, #3a0903 100%);
  color: var(--white);
}

/* Reflexo prateado que cruza o painel */
.place__brand::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(221, 224, 226, 0.22) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}

.place__brand:hover::after {
  left: 130%;
  transition: left 1.2s var(--ease);
}

.place__brand-mark {
  flex: none;
  width: clamp(52px, 5vw, 68px);
  height: clamp(52px, 5vw, 68px);
  fill: currentColor;
  transition: transform 0.8s var(--ease);
}

.place__brand:hover .place__brand-mark {
  transform: scale(1.06);
}

.place__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.place__brand-name {
  font-family: var(--brand);
  font-size: clamp(1.9rem, 2.9vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.place__brand-tag {
  align-self: flex-end;
  margin-top: 7px;
  margin-right: -0.44em;
  font-family: var(--brand);
  font-size: clamp(0.74rem, 1.1vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.44em;
  color: inherit;
}

@media (max-width: 960px) {
  .place {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .place__map {
    grid-row: auto;
    min-height: 360px;
  }

  .place__map iframe {
    min-height: 358px;
  }

  .place__brand {
    min-height: 180px;
  }
}

@media (max-width: 560px) {
  .place__details > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .place__actions .btn {
    width: 100%;
  }
}

/* Rodapé
   ========================================================================== */

.site-footer {
  position: relative;
  background: #0c0c0c;
  border-top: 1px solid rgba(184, 189, 193, 0.14);
  color: #a9aeb2;
  font-size: 0.95rem;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-block: clamp(44px, 5vw, 68px) clamp(36px, 4vw, 48px);
}

.site-footer .brand__tag {
  color: inherit;
}

.site-footer__about {
  max-width: 380px;
  margin-top: 26px;
}

.site-footer__title {
  margin-bottom: 22px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--silver-light);
}

.site-footer__list li + li {
  margin-top: 10px;
}

.site-footer a {
  transition: color 0.3s;
}

.site-footer a:hover {
  color: var(--white);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 28px;
  border-top: 1px solid rgba(184, 189, 193, 0.18);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #8a8f93;
}

/* Botão flutuante de WhatsApp
   ========================================================================== */

.whats-float {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding: 2px;
  border-radius: 50%;
  background: var(--metal);
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.9);
  transition: transform 0.4s var(--ease);
}

.whats-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--silver);
  animation: ring 3s var(--ease) infinite;
}

@keyframes ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  70%,
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

.whats-float:hover {
  transform: translateY(-4px) scale(1.04);
}

.whats-float span {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--wine-soft), var(--wine-deep));
  color: var(--white);
}

.whats-float svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* Animação de entrada
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--delay, 0s);
}

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

/* Fotos entram como uma cortina que se abre de cima para baixo */
.js .split__media[data-reveal] {
  opacity: 1;
  transform: none;
}

.js .split__media[data-reveal] .media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.3s var(--ease);
  transition-delay: var(--delay, 0s);
}

.js .split__media[data-reveal].is-visible .media {
  clip-path: inset(0);
}

.js .split__media[data-reveal]::before,
.js .split__media[data-reveal] .split__year {
  opacity: 0;
  transition: opacity 0.9s var(--ease) 0.7s;
}

.js .split__media[data-reveal].is-visible::before,
.js .split__media[data-reveal].is-visible .split__year {
  opacity: 1;
}

/* Transição suave ao trocar de página (navegadores compatíveis) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .js .split__media[data-reveal] .media {
    clip-path: none;
  }

  .js .pillar[data-reveal] .pillar__icon svg *,
  .js .bento__tile[data-reveal] .bento__icon svg * {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .bento__tile,
  .js .bento__tile[data-reveal],
  .js .bento__tile[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .js .split__media[data-reveal]::before,
  .js .split__media[data-reveal] .split__year {
    opacity: 1;
  }

  .mosaic__tile img {
    transform: none;
  }

  .ribbon,
  .hero__bg img,
  .btn--primary,
  .btn--primary::before,
  .whats-float::before,
  .marquee.is-ready .marquee__track,
  .journey__step.is-current .journey__dot {
    animation: none;
  }

  .hero__pulse path,
  .explorer__panel.is-active .explorer__pulse path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .marquee {
    overflow-x: auto;
  }

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

/* Responsivo
   ========================================================================== */

@media (min-width: 1200px) {
  .site-header.is-scrolled {
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
  }
}

@media (max-width: 1199px) {
  .nav-toggle {
    display: block;
  }

  .site-header.is-scrolled,
  .site-header.is-menu-open {
    background: var(--white);
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 36px;
    padding: calc(var(--header-h) + 32px) var(--gutter) 48px;
    background: var(--white);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__list,
  .site-header.is-scrolled .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--silver-light);
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav__link,
  .site-header.is-scrolled .nav__link {
    padding: 20px 0;
    border-bottom: 1px solid var(--silver-light);
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
  }

  .nav__link::after {
    content: none;
  }

  .nav__link:hover,
  .nav__link.is-active,
  .nav__link[aria-current="page"],
  .site-header.is-scrolled .nav__link.is-active,
  .site-header.is-scrolled .nav__link[aria-current="page"] {
    color: var(--wine);
  }
}

@media (max-width: 960px) {
  :root {
    --header-h: 70px;
  }

  .split,
  .split--reverse,
  .split--mosaic,
  .why__grid,
  .location,
  .explorer {
    grid-template-columns: minmax(0, 1fr);
  }

  .mosaic {
    max-width: 560px;
  }

  .profile[open] {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile__photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .ribbon {
    letter-spacing: 0.16em;
  }

  .ribbon span + span::before {
    margin-right: 16px;
  }

  .split__media {
    max-width: 520px;
  }

  .split--reverse .split__media {
    order: 0;
  }

  /* Pilares empilhados, com divisória horizontal */
  .pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .pillar {
    padding: 44px 0;
  }

  .pillar:first-child {
    padding-top: 0;
  }

  .pillar:last-child {
    padding-bottom: 0;
  }

  .pillar + .pillar::before {
    left: 12%;
    right: 12%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
  }

  .insta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-head--row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 700px) {
  /* No celular a foto fica abaixo do cabeçalho e é cortada nas laterais,
     mantendo os cinco médicos visíveis */
  .hero--photo {
    --offset: var(--header-h);
    --img-h: 94vw;
    --box-h: var(--img-h);
    --text-top: calc(var(--img-h) * 0.56);
  }

  .hero--photo .hero__bg img {
    object-position: 50% 50%;
    transform-origin: 50% 50%;
  }

  /* A foto é baixa no celular: o degradê precisa de mais espaço para
     sumir no preto sem deixar uma linha marcada */
  .hero--photo .hero__bg::after {
    background: linear-gradient(
      180deg,
      rgba(21, 21, 21, 0) 40%,
      rgba(21, 21, 21, 0.3) 55%,
      rgba(21, 21, 21, 0.6) 70%,
      rgba(21, 21, 21, 0.85) 84%,
      rgba(21, 21, 21, 0.96) 93%,
      var(--night) 99%
    );
  }

  .hero .eyebrow::before,
  .hero .eyebrow::after {
    content: none;
  }

  .hero--page {
    min-height: 560px;
  }
}

@media (max-width: 640px) {
  .brand__mark {
    width: 38px;
    height: 38px;
  }

  .brand__name {
    font-size: 1.34rem;
  }

  .eyebrow {
    letter-spacing: 0.2em;
    font-size: 0.68rem;
  }

  .eyebrow::before,
  .section-head--center .eyebrow::after {
    width: 28px;
  }

  .hero__actions .btn,
  .section__actions .btn {
    width: 100%;
  }

  .hero__actions {
    gap: 22px;
  }

  .glow-cards,
  .glow-cards--4,
  .checklist {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail > * {
    flex-basis: 72vw;
  }

  .rail--wide > * {
    flex-basis: 82vw;
  }

  .faq__item summary {
    padding: 22px 48px 22px 12px;
  }

  .faq__item summary:hover,
  .faq__item[open] summary {
    padding-left: 16px;
  }

  .faq__item summary::before,
  .faq__item summary::after {
    right: 12px;
  }

  .faq__answer {
    padding: 0 16px 26px 16px;
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Marca: arquivo oficial em imagem
   ========================================================================== */

.brand {
  position: relative;
}

.brand .brand__logo {
  display: block;
  width: auto;
  height: 44px;
  transition: opacity 0.45s var(--ease);
}

/* Sobre a foto aparece a branca; com o cabeçalho branco, a vinho */
.brand .brand__logo--color {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.site-header.is-scrolled .brand__logo--color,
.site-header.is-menu-open .brand__logo--color {
  opacity: 1;
}

.site-header.is-scrolled .brand__logo--light,
.site-header.is-menu-open .brand__logo--light {
  opacity: 0;
}

.site-footer .brand .brand__logo {
  height: 48px;
}

.place__brand-logo {
  width: min(64%, 310px);
  height: auto;
  transition: transform 0.8s var(--ease);
}

.place__brand:hover .place__brand-logo {
  transform: scale(1.03);
}

.mosaic__badge img {
  width: 48%;
  height: auto;
}

@media (max-width: 960px) {
  .brand .brand__logo {
    height: 38px;
  }
}

/* Menu: item com submenu (Especialidades)
   ========================================================================== */

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.nav__trigger svg {
  flex: none;
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease);
}

.nav__item--sub.is-open .nav__trigger svg {
  transform: rotate(180deg);
}

/* Página atual dentro de Especialidades */
.nav__trigger.is-current,
.site-header.is-scrolled .nav__trigger.is-current {
  color: var(--wine);
}

.nav__trigger.is-current::after {
  transform: scaleX(1);
}

.nav__sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 250px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--silver-light);
  border-radius: 4px;
  border-bottom-right-radius: 26px;
  box-shadow: 0 30px 50px -30px rgba(28, 28, 28, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0.3s;
}

/* Ponte invisível: o mouse não perde o menu no caminho até a lista */
.nav__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.nav__item--sub.is-open .nav__sub,
html:not(.js) .nav__item--sub:hover .nav__sub,
html:not(.js) .nav__item--sub:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav__sublink {
  position: relative;
  display: block;
  padding: 11px 16px 11px 18px;
  border-radius: 2px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--graphite);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), padding-left 0.4s var(--ease);
}

/* Filete vinho que cresce na lateral do item */
.nav__sublink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--wine);
  transform: scaleY(0);
  transition: transform 0.4s var(--ease);
}

.nav__sublink:hover,
.nav__sublink:focus-visible,
.nav__sublink[aria-current="page"] {
  padding-left: 24px;
  background: rgba(95, 17, 7, 0.05);
  color: var(--wine);
}

.nav__sublink:hover::before,
.nav__sublink:focus-visible::before,
.nav__sublink[aria-current="page"]::before {
  transform: none;
}

@media (min-width: 1200px) {
  /* A barra do menu fica no centro exato da página; a marca e o botão ficam nas pontas */
  .site-header__inner {
    position: relative;
  }

  .site-header .nav__list {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 1199px) {
  /* No menu do celular o submenu abre como sanfona, dentro da lista */
  .nav__trigger,
  .site-header.is-scrolled .nav__trigger {
    width: 100%;
    justify-content: space-between;
    font-family: var(--serif);
    text-align: left;
  }

  .nav__trigger svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }

  .nav__item--sub .nav__sub,
  .nav__item--sub.is-open .nav__sub {
    position: static;
    display: none;
    min-width: 0;
    padding: 4px 0 8px 18px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--silver-light);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav__item--sub.is-open .nav__sub {
    display: block;
  }

  .nav__sub::before {
    content: none;
  }

  .nav__sublink {
    padding: 13px 0 13px 16px;
    font-family: var(--serif);
    font-size: 1.22rem;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    color: #3c3f42;
  }

  .nav__sublink:hover,
  .nav__sublink:focus-visible,
  .nav__sublink[aria-current="page"] {
    padding-left: 22px;
    background: none;
  }
}

/* Camada de brilho e interação
   Efeitos somados ao desenho existente: nada aqui muda cores, medidas ou textos.
   ========================================================================== */

/* Primeira dobra: a foto fica parada, na nitidez original */
.hero--photo .hero__bg img {
  animation: none;
  transform: none;
}

/* Reflexo que percorre os trechos em destaque dos títulos */
.hero h1 em {
  background-image: linear-gradient(
    100deg,
    #cfd3d6 0%,
    #ffffff 20%,
    #c4c9cc 42%,
    #ffffff 50%,
    #c4c9cc 58%,
    #ffffff 80%,
    #cfd3d6 100%
  );
  background-size: 300% 100%;
  animation: text-sheen 7s ease-in-out infinite;
}

.section--light h2 em,
.section--white h2 em {
  background-image: linear-gradient(
    100deg,
    var(--wine) 0%,
    var(--wine) 38%,
    #c4563f 50%,
    var(--wine) 62%,
    var(--wine) 100%
  );
  background-size: 300% 100%;
  animation: text-sheen 6s ease-in-out infinite;
}

.section--wine h2 em,
.section--graphite h2 em,
.section--night h2 em {
  background-image: linear-gradient(
    100deg,
    #b3b8bc 0%,
    #f5f6f6 30%,
    #a9aeb2 44%,
    #ffffff 50%,
    #a9aeb2 56%,
    #f5f6f6 70%,
    #b3b8bc 100%
  );
  background-size: 300% 100%;
  animation: text-sheen 7s ease-in-out infinite;
}

@keyframes text-sheen {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0% 50%;
  }
}

/* Títulos entram como uma cortina; a linha do rótulo se desenha em seguida */
.js [data-reveal] h2 {
  clip-path: inset(0 0 100% 0);
  transform: translateY(16px);
  transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--delay, 0s) + 0.12s);
}

.js [data-reveal].is-visible h2 {
  clip-path: inset(-0.3em -0.2em);
  transform: none;
}

.js [data-reveal] .eyebrow::before,
.js [data-reveal] .eyebrow::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--delay, 0s) + 0.35s);
}

.js [data-reveal] .eyebrow::after {
  transform-origin: right;
}

.js [data-reveal].is-visible .eyebrow::before,
.js [data-reveal].is-visible .eyebrow::after {
  transform: none;
}

.place__info {
  position: relative;
  transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.place__info:hover {
  border-color: var(--silver);
  box-shadow: 0 34px 54px -40px rgba(62, 10, 4, 0.5);
}

/* Painel da marca: reflexo só ao passar o mouse e coração que pulsa */
.place__brand::after {
  opacity: 0;
}

.place__brand:hover::after {
  opacity: 1;
  transition: left 1.2s var(--ease), opacity 0.2s;
}

.place__brand:hover .place__brand-mark,
.brand:hover .brand__mark {
  animation: heart-beat 1.3s ease-in-out infinite;
}

@keyframes heart-beat {
  0%,
  56%,
  100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.14);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.08);
  }
}

/* Menu: cápsula de luz que desliza até o item sob o cursor */
.nav__list {
  position: relative;
}

.nav__list li {
  position: relative;
  z-index: 1;
}

.nav__list .nav__glider {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  z-index: 0;
  width: var(--gw, 0px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 8px 16px -10px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateX(var(--gl, 0px));
  transition: transform 0.45s var(--ease), width 0.45s var(--ease), opacity 0.3s var(--ease);
  pointer-events: none;
}

.nav__list.has-glider .nav__glider {
  opacity: 1;
}

.site-header.is-scrolled .nav__list .nav__glider {
  background: rgba(95, 17, 7, 0.07);
  box-shadow: none;
}

/* Botões de contorno: reflexo prateado ao passar o mouse */
.btn--outline,
.btn--outline-light {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn--outline::before,
.btn--outline-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(184, 189, 193, 0.5) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.9s var(--ease);
}

.btn--outline:hover::before,
.btn--outline-light:hover::before {
  transform: translateX(130%);
}

/* Faixa prateada: um reflexo cruza de tempos em tempos */
.ribbon {
  position: relative;
  overflow: hidden;
}

.ribbon::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-18deg);
  animation: ribbon-sheen 7s var(--ease) infinite;
  pointer-events: none;
}

@keyframes ribbon-sheen {
  0%,
  60% {
    transform: translateX(-120%) skewX(-18deg);
  }
  100% {
    transform: translateX(580%) skewX(-18deg);
  }
}

/* Convênios: reflexo sobre a logo */
.insurer--logo {
  overflow: hidden;
}

.insurer--logo::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -70%;
  width: 40%;
  height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(184, 189, 193, 0.4) 50%, transparent 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

.insurer--logo:hover::after {
  left: 140%;
  opacity: 1;
  transition: left 0.9s var(--ease), opacity 0.2s;
}

/* Pilares: os ícones flutuam de leve, cada um no seu tempo */
.pillar__icon svg {
  animation: icon-float 6s ease-in-out infinite;
}

.pillar:nth-child(2) .pillar__icon svg {
  animation-delay: -2s;
}

.pillar:nth-child(3) .pillar__icon svg {
  animation-delay: -4s;
}

@keyframes icon-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}

@media (max-width: 1199px) {
  .nav__list .nav__glider {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 em,
  h2 em,
  .ribbon::after,
  .pillar__icon svg,
  .place__brand:hover .place__brand-mark,
  .brand:hover .brand__mark {
    animation: none;
  }

  .js [data-reveal] h2 {
    clip-path: none;
    transform: none;
    transition: none;
  }

  .js [data-reveal] .eyebrow::before,
  .js [data-reveal] .eyebrow::after {
    transform: none;
    transition: none;
  }

  .insurer--logo::after,
  .ribbon::after {
    display: none;
  }
}