/* =========================================================
   Mateus Vilela — Tattoo Artist
   Tudo que é tema (cor, tipografia, ritmo) está aqui no topo.
   ========================================================= */

:root {
  --mv-ornamento-vermelho: #b0544c;
  /* Cores */
  --cor-preto: #0a0a0a;
  --cor-preto-suave: #141414;
  --cor-claro: #f6f6f4;
  --cor-branco: #ffffff;

  --cor-texto: #17171a;          /* sobre fundo claro  — 15.9:1 */
  --cor-texto-suave: #55555c;    /* sobre fundo claro  —  7.3:1 */
  --cor-texto-inverso: #f2f2f0;  /* sobre fundo preto  — 16.4:1 */
  --cor-texto-inverso-suave: #b8b8b4; /* sobre fundo preto — 9.2:1 */

  --cor-linha: rgba(23, 23, 26, 0.14);
  --cor-linha-inversa: rgba(255, 255, 255, 0.18);
  --cor-aspas: #d9d9d5;
  --cor-foco: #ffffff;
  --cor-whatsapp: #1f9c4d;
  --cor-whatsapp-hover: #17803e;

  /* Tipografia */
  --fonte-display: "Bodoni Moda", "Times New Roman", serif;
  --fonte-aspas: "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-titulo: "Oswald", "Arial Narrow", sans-serif;
  --fonte-corpo: "Jost", "Trebuchet MS", sans-serif;

  --tam-corpo: clamp(0.9rem, 0.83rem + 0.35vw, 1.02rem);
  --tam-corpo-p: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
  --tam-titulo-secao: clamp(2rem, 1.3rem + 3.4vw, 3.4rem);
  --tam-titulo-pagina: clamp(2.4rem, 1.4rem + 4.6vw, 4.6rem);

  --altura-linha: 1.85;
  --espaco-letra-titulo: 0.01em;
  --espaco-letra-kicker: 0.34em;

  /* Ritmo e formas */
  --largura-max: 78rem;
  --respiro-lateral: clamp(1.5rem, 5vw, 4.5rem);
  --respiro-secao: clamp(3.5rem, 8vw, 7.5rem);
  --gap-galeria: clamp(0.5rem, 1.4vw, 1.25rem);
  --raio: 0px;
  --toque-min: 44px;
  --transicao: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overscroll-behavior-x: none; }

body {
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  max-width: 100%;
  background: var(--cor-claro);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--tam-corpo);
  line-height: var(--altura-linha);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.05; }

p { margin: 0 0 1.2em; text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover { color: var(--cor-texto-suave); }

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

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular-para-conteudo {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--cor-branco);
  color: var(--cor-texto);
  font-size: 0.85rem;
}
.pular-para-conteudo:focus { transform: translate(-50%, 0); }

/* ---------- Blocos utilitários ---------- */
.secao { padding-block: var(--respiro-secao); }
.secao--clara { background: var(--cor-claro); color: var(--cor-texto); }
.secao--escura { background: var(--cor-preto); color: var(--cor-texto-inverso); }

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--respiro-lateral);
}

.titulo-secao {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--tam-titulo-secao);
  letter-spacing: var(--espaco-letra-titulo);
  text-transform: uppercase;
}

.kicker {
  font-family: var(--fonte-titulo);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.texto-justo { text-align: left; }

/* Link em caixa alta usado como CTA discreto */
.link-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  font-family: var(--fonte-titulo);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--transicao);
}
.link-cta:hover { opacity: 0.65; color: inherit; }

/* Botão de vidro */
.botao-vidro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: clamp(1rem, 2.2vw, 1.5rem);
  font-family: var(--fonte-titulo);
  font-size: clamp(0.66rem, 1.1vw, 0.74rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cor-branco);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: background var(--transicao), border-color var(--transicao);
}
.botao-vidro:hover {
  color: var(--cor-branco);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
}
.botao-vidro--escuro {
  color: var(--cor-texto);
  background: rgba(23, 23, 26, 0.05);
  border-color: rgba(23, 23, 26, 0.24);
  box-shadow: none;
}
.botao-vidro--escuro:hover {
  color: var(--cor-texto);
  background: rgba(23, 23, 26, 0.1);
  border-color: rgba(23, 23, 26, 0.45);
}

.acoes-centro {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* a galeria já respira por conta das fotos: o rodapé da seção pode ser menor */
.secao--trabalhos { padding-bottom: var(--respiro-secao); }

/* mobile: o botão de orçamento fica mais perto do "Entre em contato" */
@media (max-width: 767.98px) {
  .secao--trabalhos { padding-bottom: var(--respiro-secao); }
  .secao--trabalhos .acoes-centro { margin-top: 1.5rem; }
  #contato.secao { padding-top: 1.75rem; }
}

/* atalho para conferir a versão mobile */
.ver-mobile {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--cor-preto);
  color: var(--cor-texto-inverso);
  font-family: var(--fonte-titulo);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.ver-mobile:hover { opacity: 0.85; }

/* =========================================================
   Cabeçalho e navegação
   ========================================================= */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1.5rem) var(--respiro-lateral);
  pointer-events: none;
}
.cabecalho > * { pointer-events: auto; }

/* Botão hambúrguer (mobile) */
.botao-menu {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 4vw, 1.25rem);
  z-index: 120;
  display: grid;
  place-items: center;
  gap: 5px;
  width: var(--toque-min);
  height: var(--toque-min);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.botao-menu__traco {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--cor-texto-inverso);
  transition: transform var(--transicao), opacity var(--transicao);
}
.botao-menu__traco:nth-child(1) { transform: translateY(-3.5px); }
.botao-menu__traco:nth-child(2) { transform: translateY(3.5px); }
.botao-menu[aria-expanded="true"] .botao-menu__traco:nth-child(1) { transform: rotate(45deg); }
.botao-menu[aria-expanded="true"] .botao-menu__traco:nth-child(2) { transform: rotate(-45deg); }
.botao-menu__traco:nth-child(1),
.botao-menu__traco:nth-child(2) { grid-area: 1 / 1; }

/* Painel de navegação */
.nav { }

.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.5vw, 0.75rem);
}

.nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque-min);
  padding-inline: clamp(0.75rem, 1.4vw, 1.1rem);
  color: var(--cor-texto-inverso);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 999px;
  transition: color var(--transicao), background var(--transicao);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--cor-branco); background: rgba(255, 255, 255, 0.1); }
.nav__link[aria-current="page"] { color: var(--cor-branco); }

/* Mobile: mesma pílula de vidro do desktop, em escala menor */
@media (max-width: 767.98px) {
  .botao-menu { display: none; }
  .nav {
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    max-width: 100%;
  }
  .nav__lista { gap: 0; }
  .nav__link {
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    padding: 0.8rem 0.7rem;
  }
}

/* Desktop: pílula flutuante */
@media (min-width: 768px) {
  .botao-menu { display: none; }
  .nav {
    background: rgba(10, 10, 10, 0.86);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 0.25rem 1rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  background: var(--cor-preto);
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}
.hero__imagem {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* mobile: a arte já traz o nome — ocupa a tela inteira */
@media (max-width: 767.98px) {
  .hero { padding-bottom: 0; }
  .hero__imagem {
    width: 100%;
    display: block;
  }
  /* o botão fica logo abaixo do nome, que está a ~71% da altura da arte */
  .hero__cta { bottom: 16%; }
}
.hero__cta {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 5%, 3.5rem);
  transform: translateX(-50%);
}

@media (min-width: 768px) and (max-width: 1100px) {
  .hero { display: flex; flex-direction: column; align-items: center; padding-bottom: clamp(2rem, 4vw, 3rem); }
  .hero__cta { position: static; transform: none; margin-top: 1.5rem; }
}

/* Hero curto das páginas internas */
.hero-interno {
  background: var(--cor-preto);
  color: var(--cor-texto-inverso);
  padding-block: clamp(7rem, 16vw, 12rem) clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.hero-interno__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--tam-titulo-pagina);
  letter-spacing: var(--espaco-letra-titulo);
  text-transform: uppercase;
  line-height: 1.02;
}
.hero-interno__kicker {
  margin-top: 1.25rem;
  color: var(--cor-texto-inverso-suave);
  letter-spacing: var(--espaco-letra-kicker);
}

/* Página "quem sou eu" */
.sobre-topo {
  background: #000;
  color: var(--cor-texto-inverso);
  padding-block: clamp(3.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem);
  text-align: center;
}
.sobre-topo__figura {
  margin: 0 auto;
  max-width: min(100%, 38rem);
}
.sobre-topo__imagem {
  width: 100%;
  height: auto;
}
@media (max-width: 767.98px) {
  .sobre-topo { padding-top: 5.5rem; }
  .sobre-topo__figura { max-width: 80%; }
}
/* o título fica sobre a base da foto, que já é preta */
.sobre-topo__titulo {
  position: relative;
  margin-top: clamp(-10rem, -16vw, -4.5rem);
  margin-bottom: 0;
}
.sobre-topo__texto {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  text-align: left;
}

/* Processo de trabalho */
.processo,
.processo-titulo {
  max-width: 46rem;
  margin-inline: auto;
}
.processo-titulo { margin-bottom: clamp(2rem, 4vw, 3rem); }
.processo { text-wrap: pretty; }

/* cada passo é um bloco de vidro, igual aos cuidados */
.processo__passo {
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.9rem);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 24px rgba(23, 23, 26, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background var(--transicao);
}
.processo__passo + .processo__passo { margin-top: 0.6rem; }
.processo__passo:hover { background: rgba(255, 255, 255, 0.85); }

.processo__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  color: var(--cor-texto);
}
.processo__corpo p {
  margin-bottom: 0;
  color: var(--cor-texto-suave);
  font-size: var(--tam-corpo-p);
  line-height: 1.8;
}
.processo__nota { margin-top: 1.1rem; font-style: italic; }

.processo__lista {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.9rem;
  color: var(--cor-texto-suave);
  font-size: var(--tam-corpo-p);
}
.processo__lista li { display: flex; gap: 0.7rem; line-height: 1.7; }
.processo__lista li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 0.72em;
  border-radius: 999px;
  background: var(--cor-texto);
}
.processo__lista strong { color: var(--cor-texto); font-weight: 600; }

/* cuidados pós: cartões de vidro */
.cuidados-painel { margin-top: 1.25rem; }
.cuidados {
  display: grid;
  align-items: start;
  gap: 0.6rem;
}
@media (min-width: 620px) { .cuidados li { padding: 1.05rem 1.35rem; } }
.cuidados li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 24px rgba(23, 23, 26, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--cor-texto-suave);
  font-size: var(--tam-corpo-p);
  line-height: 1.6;
  transition: background var(--transicao), transform var(--transicao);
}
.cuidados li:hover {
  background: rgba(255, 255, 255, 0.85);
}
.cuidados__num {
  flex: 0 0 auto;
  min-width: 1.9rem;
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cor-texto);
}

/* =========================================================
   Depoimentos (carrossel)
   ========================================================= */
.depoimentos { position: relative; }
/* espaço abaixo das bolinhas = espaço acima das aspas */
@media (min-width: 768px) {
  .secao.depoimentos { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
}

.depoimentos__palco {
  position: relative;
  padding-top: clamp(1.25rem, 2.4vw, 1.75rem);
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 6vw, 3.5rem);
}

.depoimentos__aspas {
  position: absolute;
  font-family: var(--fonte-aspas);
  font-weight: 900;
  font-size: clamp(4.5rem, 11.5vw, 7.5rem);
  line-height: 0.78;
  color: var(--cor-aspas);
  user-select: none;
  pointer-events: none;
}
.depoimentos__aspas--abre { top: -0.3em; left: -0.24em; }
.depoimentos__aspas--fecha { bottom: -0.44em; right: -0.24em; }

/* mobile: sem aspas decorativas, sem cruzamento entre os depoimentos */
@media (max-width: 767.98px) {
  .depoimentos__aspas { display: none; }
  .secao.depoimentos { padding-block: clamp(2rem, 9vw, 2.75rem) calc(clamp(2rem, 9vw, 2.75rem) - 7px); }
  .depoimentos__palco { padding-top: 0; }
  .depoimento__texto { margin-bottom: 1.25rem; line-height: 1.75; }
  .depoimento { transition: none; }
  .depoimentos__palco { touch-action: pan-y; }
}

/* todos os depoimentos ocupam a mesma célula: a altura fica estável e
   a troca automática não empurra o resto da página */
.depoimentos__pilha { display: grid; align-items: center; }
.depoimento {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 480ms ease;
}
.depoimento[data-ativo="true"] {
  opacity: 1;
  visibility: visible;
}
.depoimento__texto {
  margin: 0 0 1.75rem;
  font-size: var(--tam-corpo-p);
  color: var(--cor-texto-suave);
  line-height: 1.9;
}
.depoimento__autor {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
}
.depoimento__nome { font-weight: 600; color: var(--cor-texto); }
.depoimento__papel { color: var(--cor-texto-suave); }
.depoimento__divisor { color: var(--cor-linha); }

/* mobile: um depoimento por vez, sem cruzamento */
@media (max-width: 767.98px) {
  .depoimentos .depoimento { display: none; transition: none; }
  .depoimentos .depoimento[data-ativo="true"] { display: flex; }
  .depoimentos .depoimentos__pilha { align-items: start; }
}

.carrossel-pontos {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
}
.carrossel-ponto {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: var(--toque-min);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.carrossel-ponto::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--cor-linha);
  transition: background var(--transicao), box-shadow var(--transicao);
}
.carrossel-ponto[aria-selected="true"]::after {
  background: var(--cor-texto-suave);
  box-shadow: inset 0 0 0 1px var(--cor-texto-suave);
}

/* =========================================================
   Minha história
   ========================================================= */
.historia__grade {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.historia__figura { position: relative; margin: 0; }
.historia__imagem {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 30% center;
}
.historia__figura::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 45%;
  background: linear-gradient(to top, var(--cor-preto), transparent);
  pointer-events: none;
}
.historia__conteudo { max-width: 34rem; }

/* mobile: a foto encosta no topo da seção e mostra o rosto dele */
@media (max-width: 767.98px) {
  .secao--historia { padding-top: 0; }
  .historia__grade { gap: clamp(1.5rem, 5vw, 2rem); }
  .historia__imagem { aspect-ratio: 800 / 754; object-position: center top; }
}
.historia__texto {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  color: var(--cor-texto-inverso-suave);
  font-size: var(--tam-corpo-p);
  line-height: 1.95;
  text-align: justify;
  hyphens: auto;
}
.historia__cta { margin-top: 0.5rem; }

.texto-longo {
  max-width: 46rem;
  margin-inline: auto;
  color: var(--cor-texto-inverso-suave);
  font-size: var(--tam-corpo-p);
  line-height: 1.95;
  text-align: justify;
  hyphens: auto;
}
.texto-longo p + p { margin-top: 0.2em; }

@media (min-width: 768px) {
  .secao--historia { padding-block: 0; }
  .historia__grade {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
  }
  .historia__figura { height: 100%; }
  .historia__imagem {
    aspect-ratio: auto;
    height: 100%;
    min-height: 32rem;
    object-fit: cover;
    object-position: 60% center;
  }
  .historia__figura::after {
    content: "";
    inset: 0 -1px 0 auto;
    width: 38%;
    height: auto;
    background: linear-gradient(to left, var(--cor-preto) 12%, transparent);
  }
  .historia__conteudo {
    align-self: center;
    padding: clamp(3rem, 7vw, 6rem) var(--respiro-lateral) clamp(3rem, 7vw, 6rem) clamp(1rem, 3vw, 2.5rem);
  }
}

/* =========================================================
   Galeria de trabalhos
   ========================================================= */
.galeria-esteira {
  margin-top: clamp(1.75rem, 4vw, 3rem);
  overflow: hidden;
}

.galeria {
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: deslizar var(--duracao-esteira, 60s) linear infinite;
}
@media (hover: hover) and (pointer: fine) {
  .galeria-esteira:hover .galeria { animation-play-state: paused; }
}

/* cada coluna repete o mosaico do layout: duas fotos empilhadas,
   com alturas alternadas para dar o escalonamento vertical */
.galeria__coluna {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-galeria);
  margin-right: var(--gap-galeria);
  width: clamp(150px, 19vw, 250px);
}
.galeria__coluna--baixa { padding-top: clamp(2rem, 4vw, 4.5rem); }

.galeria__item { margin: 0; list-style: none; }

.galeria__item--curto { height: clamp(140px, 17vw, 220px); }
.galeria__item--alto { height: clamp(180px, 22vw, 290px); }

.galeria__botao {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.galeria__botao img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1), filter var(--transicao);
}

@keyframes deslizar {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--deslocamento-esteira, -50%), 0, 0); }
}
.galeria__botao:hover img,
.galeria__botao:focus-visible img { transform: scale(1.04); filter: brightness(1.06); }

/* =========================================================
   Lightbox
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  touch-action: none;
  overscroll-behavior: contain;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 6, 6, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao), visibility var(--transicao);
}
.lightbox[data-aberto="true"] { opacity: 1; visibility: visible; }
.lightbox__imagem {
  max-width: min(100%, 60rem);
  max-height: 86vh;
  width: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lightbox__fechar {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border: 1px solid var(--cor-linha-inversa);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cor-texto-inverso);
  cursor: pointer;
  transition: background var(--transicao);
}
.lightbox__fechar:hover { background: rgba(255, 255, 255, 0.16); }
.lightbox__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  color: var(--cor-branco);
  cursor: pointer;
  transition: background var(--transicao);
}
.lightbox__seta:hover { background: rgba(255, 255, 255, 0.16); }
.lightbox__seta--anterior { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__seta--proxima { right: clamp(0.5rem, 2vw, 1.5rem); }
@media (max-width: 767.98px) {
  .lightbox__seta { display: none; }
  .lightbox__imagem { max-height: 78vh; }
}

/* =========================================================
   Contato
   ========================================================= */
.contato__grade { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
#contato { padding-block: calc(var(--respiro-secao) / 2) var(--respiro-secao); }
.contato__bloco { max-width: 30rem; }
.contato__local {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contato__descricao {
  margin-top: 0.9rem;
  color: var(--cor-texto-suave);
  font-size: var(--tam-corpo-p);
}
.contato__lista { display: grid; gap: 0.15rem; margin-block: 1.25rem; }
.contato__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--toque-min);
  font-size: var(--tam-corpo-p);
}
.contato__item a { text-decoration: none; }
.contato__item a:hover { text-decoration: underline; }
.contato__icone { flex: 0 0 auto; width: 15px; height: 15px; }

.contato__arte { display: flex; justify-content: center; align-items: center; }
.contato__arte img {
  display: block;
  width: min(100%, 30.4rem);
  height: auto;
  mix-blend-mode: multiply;
}
@media (max-width: 767.98px) {
  #contato .contato__arte { display: none; }
}

@media (min-width: 768px) {
  .contato__grade { grid-template-columns: 1fr 1fr; align-items: start; }
  .contato__arte { grid-column: 1; grid-row: 1; }
  .contato__bloco { grid-column: 2; grid-row: 1; }
}

/* =========================================================
   Rodapé
   ========================================================= */
.rodape {
  background: var(--cor-preto);
  color: var(--cor-texto-inverso);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.rodape__grade { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.rodape__marca { font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; }
.rodape__tagline { margin: 0.4rem 0 0; color: var(--cor-texto-inverso-suave); font-size: var(--tam-corpo-p); }
.rodape__redes {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1rem;
  margin-left: -0.6rem;
}
.rodape__social {
  display: inline-grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  color: var(--cor-texto-inverso-suave);
  transition: color var(--transicao);
}
.rodape__social:hover { color: var(--cor-branco); }
.rodape__titulo { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.35rem; }
.rodape__link {
  display: flex;
  align-items: center;
  min-height: var(--toque-min);
  color: var(--cor-texto-inverso-suave);
  font-size: var(--tam-corpo-p);
  text-decoration: none;
}
.rodape__link:hover { color: var(--cor-branco); }
.rodape__base {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--cor-linha-inversa);
  color: var(--cor-texto-inverso-suave);
  font-size: 0.78rem;
}

@media (min-width: 768px) {
  .rodape__grade { grid-template-columns: 1.6fr 1fr; }
}

/* mobile: bolinhas do carrossel bem pequenas e juntas (fica no fim para vencer a base) */
@media (max-width: 767.98px) {
  .carrossel-pontos { margin-top: 0.35rem; gap: 0; }
  .carrossel-ponto { width: 16px; height: 18px; min-height: 0; }
  .carrossel-ponto::after { width: 3px; height: 3px; }
}

/* =========================================================
   Movimento
   ========================================================= */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

[data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-revelar][data-visivel="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
  .galeria { animation: none; }
  .galeria-esteira { overflow-x: auto; }
}

/* =========================================================
   NOVA IDENTIDADE VISUAL (sobrescreve o tema acima)
   ========================================================= */
:root {
  --mv-preto: #141312;
  --mv-vinho-claro: #44121a;
  --mv-vinho: #370d13;
  --mv-vinho-escuro: #26080b;
  --mv-vermelho: #b0544c;
  --mv-bege: #d2b199;
  --mv-dourado: #e2c5ae;
  --cor-preto: var(--mv-preto);
  --cor-preto-suave: #1c1a18;
  --cor-claro: #f3ece5;
  --cor-texto: #141312;
  --cor-texto-suave: #5b4d44;
  --cor-texto-inverso: #eadcd0;
  --cor-texto-inverso-suave: #c7b3a4;
  --cor-linha: rgba(20, 19, 18, 0.14);
  --cor-linha-inversa: rgba(226, 197, 174, 0.22);
  --cor-aspas: #e2cdbd;
  --fonte-display: "Cormorant Garamond", Georgia, serif;
  --fonte-titulo: "Cormorant Garamond", Georgia, serif;
  --fonte-corpo: "Jost", "Trebuchet MS", sans-serif;
  --tam-titulo-secao: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  --altura-linha: 1.6;
}

a:hover { color: var(--mv-vermelho); }

.titulo-secao,
.hero-interno__titulo { font-weight: 500; letter-spacing: 0.2em; line-height: 1.1; }
.titulo-secao::after {
  content: "";
  display: block;
  width: 110px;
  height: 10px;
  margin-top: 0.9rem;
  background: url("../fotos/marcador-titulo.svg") left center / contain no-repeat;
}
.processo-titulo { text-align: center; }
.processo-titulo::after,
.sobre-topo__titulo::after { content: ""; display: block; margin: 1rem auto 0; width: 180px; height: 20px; background: url("../fotos/divisor-vermelho.svg") center / contain no-repeat; }

.kicker, .hero-interno__kicker { font-weight: 500; font-style: italic; text-transform: none; letter-spacing: 0.04em; font-size: 1.1rem; color: var(--mv-dourado); }
.link-cta, .botao-vidro { font-family: "Oswald", "Arial Narrow", sans-serif; }
.botao-vidro--escuro { border-color: rgba(55, 13, 19, 0.35); }
.botao-vidro--escuro:hover { background: var(--mv-vinho); border-color: var(--mv-vinho); color: var(--cor-texto-inverso); }
.nav__link { font-family: "Jost", "Trebuchet MS", sans-serif; color: var(--cor-texto-inverso); }
.nav__link[aria-current="page"] { color: var(--mv-dourado); }
.nav { background: rgba(55, 13, 19, 0.72) !important; border-color: rgba(226, 197, 174, 0.18) !important; }

.hero { position: relative; display: block; padding: 0; overflow: hidden; background: #000; }
.hero picture { display: block; }
.hero__imagem { position: static; display: block; width: 100%; height: auto; }
.hero::after { content: none; }
.hero__marca { position: absolute; left: 50%; top: 83%; transform: translateX(-50%); z-index: 1; display: flex; justify-content: center; width: auto; padding: 0; }
.hero__cta { position: static; transform: none; margin: 0; white-space: nowrap; }
@media (min-width: 768px) {
  .hero__marca { top: 87%; }
}

.depoimentos__aspas { color: var(--mv-bege); opacity: 0.45; }
.depoimento__nome { letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.9rem; }
.depoimento__papel { font-style: italic; }
.carrossel-ponto[aria-selected="true"]::after { background: var(--mv-vermelho); box-shadow: inset 0 0 0 1px var(--mv-vermelho); }

.processo__passo, .cuidados li { background: rgba(255, 252, 248, 0.6); border-color: rgba(210, 177, 153, 0.45); box-shadow: 0 10px 24px rgba(55, 13, 19, 0.05); }
.processo__passo:hover, .cuidados li:hover { background: rgba(255, 252, 248, 0.9); }
.processo__titulo { font-weight: 600; letter-spacing: 0.18em; font-size: clamp(1.05rem, 2vw, 1.2rem); }
.processo__lista li::before { background: var(--mv-vermelho); }
.cuidados__num { color: var(--mv-vermelho); font-weight: 700; }

.contato__local { letter-spacing: 0.2em; color: var(--mv-vermelho); }
.contato__icone { color: var(--mv-vermelho); }

.rodape {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, var(--mv-vinho-claro) 0%, var(--mv-vinho) 55%, var(--mv-vinho-escuro) 100%);
  color: var(--cor-texto-inverso);
}
.rodape {
  --S: clamp(56px, 6vw, 88px);
  --M: clamp(0.6rem, 1.4vw, 1.1rem);
  --B: calc(var(--S) * 0.2);
  --C: calc(var(--S) * 0.8);
  --g: calc(var(--C) * 0.42);
  --o1: calc(var(--S) * 0.193);
  --t1: max(1.5px, calc(var(--S) * 0.026));
  --o2: calc(var(--S) * 0.415);
  --t2: max(1px, calc(var(--S) * 0.02));
  --mc: var(--mv-ornamento-vermelho, #b0544c);
}
.rodape::after, .rodape::before { content: none; }
.rodape { --baseH: 3.75rem; padding-block: 0; }
.rodape > .container { padding-top: clamp(2.75rem, 5vw, 3.75rem); padding-bottom: 0; padding-inline: var(--respiro-lateral); }
.rodape__grade { padding-bottom: clamp(2.75rem, 5vw, 3.75rem); }
.rodape .rodape__base { border-top: 1px solid var(--cor-linha-inversa) !important; }
.rodape .rodape__base { height: var(--baseH); margin: 0; padding: 0; border: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.rodape::before {
  content: none;
  position: absolute;
  inset: calc(var(--M) - var(--B)) calc(var(--M) - var(--B)) calc(var(--baseH) - var(--B));
  pointer-events: none;
  background:
    url("../fotos/cruz-vermelha.svg") center top calc(var(--B) + var(--S) * 0.31 - var(--C) / 2) / var(--C) no-repeat,
    url("../fotos/cruz-vermelha.svg") center bottom calc(var(--B) + var(--S) * 0.31 - var(--C) / 2) / var(--C) no-repeat,
    url("../fotos/cruz-vermelha-v.svg") left calc(var(--B) + var(--S) * 0.31 - var(--C) / 2) center / var(--C) no-repeat,
    url("../fotos/cruz-vermelha-v.svg") right calc(var(--B) + var(--S) * 0.31 - var(--C) / 2) center / var(--C) no-repeat,
    url("../fotos/canto-vermelho-tl.webp") left var(--B) top var(--B) / var(--S) no-repeat,
    url("../fotos/canto-vermelho-tr.webp") right var(--B) top var(--B) / var(--S) no-repeat,
    url("../fotos/canto-vermelho-bl.webp") left var(--B) bottom var(--B) / var(--S) no-repeat,
    url("../fotos/canto-vermelho-br.webp") right var(--B) bottom var(--B) / var(--S) no-repeat,
    linear-gradient(var(--mc), var(--mc)) left calc(var(--B) + var(--S)) top calc(var(--B) + var(--o1)) / calc(50% - var(--B) - var(--S) - var(--g)) var(--t1) no-repeat,
    linear-gradient(var(--mc), var(--mc)) right calc(var(--B) + var(--S)) top calc(var(--B) + var(--o1)) / calc(50% - var(--B) - var(--S) - var(--g)) var(--t1) no-repeat,
    linear-gradient(var(--mc), var(--mc)) left calc(var(--B) + var(--S)) bottom calc(var(--B) + var(--o1)) / calc(50% - var(--B) - var(--S) - var(--g)) var(--t1) no-repeat,
    linear-gradient(var(--mc), var(--mc)) right calc(var(--B) + var(--S)) bottom calc(var(--B) + var(--o1)) / calc(50% - var(--B) - var(--S) - var(--g)) var(--t1) no-repeat,
    linear-gradient(var(--mc), var(--mc)) left calc(var(--B) + var(--o1)) top calc(var(--B) + var(--S)) / var(--t1) calc(50% - var(--B) - var(--S) - var(--g)) no-repeat,
    linear-gradient(var(--mc), var(--mc)) left calc(var(--B) + var(--o1)) bottom calc(var(--B) + var(--S)) / var(--t1) calc(50% - var(--B) - var(--S) - var(--g)) no-repeat,
    linear-gradient(var(--mc), var(--mc)) right calc(var(--B) + var(--o1)) top calc(var(--B) + var(--S)) / var(--t1) calc(50% - var(--B) - var(--S) - var(--g)) no-repeat,
    linear-gradient(var(--mc), var(--mc)) right calc(var(--B) + var(--o1)) bottom calc(var(--B) + var(--S)) / var(--t1) calc(50% - var(--B) - var(--S) - var(--g)) no-repeat,
    linear-gradient(var(--mc), var(--mc)) left calc(var(--B) + var(--S)) top calc(var(--B) + var(--o2)) / calc(50% - var(--B) - var(--S) - var(--g)) var(--t2) no-repeat,
    linear-gradient(var(--mc), var(--mc)) right calc(var(--B) + var(--S)) top calc(var(--B) + var(--o2)) / calc(50% - var(--B) - var(--S) - var(--g)) var(--t2) no-repeat,
    linear-gradient(var(--mc), var(--mc)) left calc(var(--B) + var(--S)) bottom calc(var(--B) + var(--o2)) / calc(50% - var(--B) - var(--S) - var(--g)) var(--t2) no-repeat,
    linear-gradient(var(--mc), var(--mc)) right calc(var(--B) + var(--S)) bottom calc(var(--B) + var(--o2)) / calc(50% - var(--B) - var(--S) - var(--g)) var(--t2) no-repeat,
    linear-gradient(var(--mc), var(--mc)) left calc(var(--B) + var(--o2)) top calc(var(--B) + var(--S)) / var(--t2) calc(50% - var(--B) - var(--S) - var(--g)) no-repeat,
    linear-gradient(var(--mc), var(--mc)) left calc(var(--B) + var(--o2)) bottom calc(var(--B) + var(--S)) / var(--t2) calc(50% - var(--B) - var(--S) - var(--g)) no-repeat,
    linear-gradient(var(--mc), var(--mc)) right calc(var(--B) + var(--o2)) top calc(var(--B) + var(--S)) / var(--t2) calc(50% - var(--B) - var(--S) - var(--g)) no-repeat,
    linear-gradient(var(--mc), var(--mc)) right calc(var(--B) + var(--o2)) bottom calc(var(--B) + var(--S)) / var(--t2) calc(50% - var(--B) - var(--S) - var(--g)) no-repeat;
}
.rodape .container { position: relative; z-index: 1; }
.rodape__marca img { width: min(100%, 202px); height: auto; }
.rodape__titulo { font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.85rem; color: var(--mv-dourado); }
.rodape__link, .rodape__social { color: var(--cor-texto-inverso); }
.rodape__link:hover, .rodape__social:hover { color: var(--mv-dourado); }
.rodape__base { color: var(--cor-texto-inverso-suave); border-top-color: var(--cor-linha-inversa); font-size: 0.85rem; letter-spacing: 0.04em; }
.rodape .botao-vidro { border-color: rgba(226, 197, 174, 0.45); background: rgba(226, 197, 174, 0.08); }
.rodape .botao-vidro:hover { background: var(--mv-dourado); color: var(--mv-vinho-escuro); }
@media (max-width: 767.98px) {
  .rodape { --S: 40px; --M: 0.5rem; --baseH: 3.25rem; }
  .rodape > .container { padding-top: 2.5rem; padding-inline: 1.5rem; }
  .rodape .rodape__marca { margin: 0 0 0.75rem; }
  .rodape__redes { margin-top: 0; }
  .rodape__redes + p { margin-top: 0.75rem !important; }
  .rodape__grade { padding-bottom: 2.5rem; justify-items: center; text-align: center; }
  .rodape__grade > div { display: flex; flex-direction: column; align-items: center; }
  .rodape__grade > div, .rodape__marca { width: 100%; }
  .rodape .rodape__marca { display: flex; justify-content: center; margin-inline: auto; }
  .rodape .rodape__marca img { display: block; margin-inline: auto; }
  .rodape .rodape__base { flex-direction: column; gap: 0.15rem; line-height: 1.4; height: auto; min-height: var(--baseH); padding-block: 0.6rem; }
  .rodape__direitos { display: block; }
  .rodape__redes { justify-content: center; }
  .rodape nav[aria-label="Navegação do rodapé"] { display: none; }
  .rodape .rodape__base { font-size: 0.75rem; padding-inline: 1rem; }
}

.whats-flutuante {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--mv-vinho-claro) 0%, var(--mv-vinho) 60%, var(--mv-vinho-escuro) 100%);
  color: var(--mv-dourado, #e2c5ae);
  border: 1px solid rgba(226, 197, 174, 0.35);
  box-shadow: 0 8px 22px rgba(20, 19, 18, 0.28);
  transition: transform 200ms ease, background 200ms ease;
}
.whats-flutuante:hover { transform: translateY(-2px); color: #fff; }
@media (max-width: 767.98px) { .whats-flutuante { width: 50px; height: 50px; } }

.so-mobile { display: none; }
@media (max-width: 767.98px) { .so-mobile { display: inline; } }

/* botões de orçamento: todos no vinho da marca */
.botao-vidro, .botao-vidro--escuro, .rodape .botao-vidro {
  background: radial-gradient(ellipse at 50% 40%, var(--mv-vinho-claro) 0%, var(--mv-vinho) 70%, var(--mv-vinho-escuro) 100%);
  color: var(--mv-dourado);
  border: 1px solid rgba(226, 197, 174, 0.3);
  box-shadow: 0 8px 20px rgba(20, 19, 18, 0.22);
}
.botao-vidro:hover, .botao-vidro--escuro:hover, .rodape .botao-vidro:hover {
  background: var(--mv-vinho-claro);
  color: #fff;
  border-color: rgba(226, 197, 174, 0.55);
}

.link-cta { color: var(--mv-vermelho); border-bottom-color: var(--mv-vermelho); text-decoration-color: var(--mv-vermelho); }
.link-cta:hover { color: var(--mv-vinho); border-bottom-color: var(--mv-vinho); text-decoration-color: var(--mv-vinho); opacity: 1; }
.link-cta.historia__cta { color: var(--mv-dourado); border-bottom-color: var(--mv-dourado); text-decoration-color: var(--mv-dourado); }
.link-cta.historia__cta:hover { color: #fff; border-bottom-color: #fff; text-decoration-color: #fff; }

/* depoimentos sobre o vinho da marca */
.secao--vermelha.depoimentos { background: radial-gradient(ellipse at 50% 42%, var(--mv-vinho-claro) 0%, var(--mv-vinho) 55%, var(--mv-vinho-escuro) 100%); color: var(--cor-texto-inverso); }
.secao--vermelha .depoimento__texto { color: var(--cor-texto-inverso); }
.secao--vermelha .depoimento__nome { color: var(--mv-dourado); }
.secao--vermelha .depoimento__papel { color: var(--cor-texto-inverso-suave); }
.secao--vermelha .depoimento__divisor { color: rgba(226, 197, 174, 0.35); }
.secao--vermelha .depoimentos__aspas { color: var(--mv-vermelho); opacity: 0.6; }
.secao--vermelha .carrossel-ponto::after { background: transparent; box-shadow: inset 0 0 0 1px rgba(226, 197, 174, 0.55); }
.secao--vermelha .carrossel-ponto[aria-selected="true"]::after { background: var(--mv-dourado); box-shadow: inset 0 0 0 1px var(--mv-dourado); }
.secao--vermelha .link-cta { color: var(--mv-dourado); border-bottom-color: var(--mv-dourado); text-decoration-color: var(--mv-dourado); }
.secao--vermelha .link-cta:hover { color: #fff; border-bottom-color: #fff; text-decoration-color: #fff; }
.contato__arte img[src$="brilhos.webp"] { width: min(100%, 17rem); mix-blend-mode: multiply; transform: translateY(2.5rem); }

/* Minha história: fundo preto puro */
.secao--historia { background: #000; }
.secao--historia .historia__figura::after { background: linear-gradient(to top, #000, transparent); }
@media (min-width: 768px) { .secao--historia .historia__figura::after { background: linear-gradient(to left, #000 12%, transparent); } }
@media (max-width: 767.98px) {
  .historia__grade { gap: 0; }
  .historia__conteudo { position: relative; z-index: 1; margin-top: -3rem; }
}
.contato__traco { display: inline-block; width: 0.7em; height: 1px; background: currentColor; vertical-align: 0.34em; margin-inline: 0.35em 0.55em; }