/* ==================================================
   1. IDENTIDADE VISUAL
   ================================================== */

:root {
  /* Paleta */
  --cor-marfim: #F7F3EE;
  --cor-areia: #EDE4D9;
  --cor-linho: #D5C5B5;
  --cor-argila: #B58B78;
  --cor-cacau: #594237;
  --cor-taupe: #6F6258;
  --cor-cafe: #2B1D17;

  /* Aplicações das cores */
  --fundo-principal: var(--cor-marfim);
  --fundo-alternado: var(--cor-areia);

  --texto-principal: var(--cor-cafe);
  --texto-secundario: var(--cor-taupe);
  --texto-titulo: var(--cor-cafe);

  --cor-link: var(--cor-cacau);
  --cor-menu: var(--cor-cafe);
  --cor-sublinhado-menu: var(--cor-cacau);
  --cor-icone-destaque: var(--cor-cacau);

  --borda-decorativa: var(--cor-linho);
  --borda-campo: var(--cor-taupe);
  --acento-decorativo: var(--cor-argila);

  --botao-fundo: var(--cor-cacau);
  --botao-texto: var(--cor-marfim);
  --botao-secundario-texto: var(--cor-cacau);
  --botao-secundario-borda: var(--cor-cacau);

  --card-fundo: var(--cor-areia);
  --card-borda: var(--cor-linho);

  /* Famílias tipográficas */
  --fonte-titulos: "Cormorant Garamond", Georgia, serif;
  --fonte-textos: "Manrope", Arial, sans-serif;

  /* Pesos */
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-semibold: 600;

  /* Tamanhos iniciais mobile — equivalências com raiz de 16 px */
  --tamanho-h1: 2.25rem;       /* 36 px */
  --tamanho-h2: 1.875rem;      /* 30 px */
  --tamanho-h3: 1.5rem;        /* 24 px */

  --tamanho-texto: 1rem;      /* 16 px */
  --tamanho-legenda: 0.875rem; /* 14 px */
  --tamanho-menu: 1rem;       /* 16 px */
  --tamanho-rotulo: 1rem;     /* 16 px */
  --tamanho-botao: 1rem;      /* 16 px */

  /* Entrelinhas */
  --entrelinha-h1: 1.15;
  --entrelinha-titulos: 1.2;
  --entrelinha-texto: 1.6;
  --entrelinha-controles: 1.4;
}


/* ==================================================
   2. BASE DO DOCUMENTO
   ================================================== */

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

html {
  font-size: 100%;
}

body {
  margin: 0;
  background-color: var(--fundo-principal);
  color: var(--texto-principal);
  font-family: var(--fonte-textos);
  font-size: var(--tamanho-texto);
  font-weight: var(--peso-regular);
  line-height: var(--entrelinha-texto);
}

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

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin-block: 0;
  overflow-wrap: break-word;
}


/* ==================================================
   3. TIPOGRAFIA
   ================================================== */

h1,
h2,
h3 {
  color: var(--texto-titulo);
  font-family: var(--fonte-titulos);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-titulos);
}

h1 {
  font-size: var(--tamanho-h1);
  line-height: var(--entrelinha-h1);
}

h2 {
  font-size: var(--tamanho-h2);
}

h3 {
  font-size: var(--tamanho-h3);
}

p {
  font-size: var(--tamanho-texto);
  line-height: var(--entrelinha-texto);
}

strong,
b {
  font-weight: var(--peso-semibold);
}

.texto-secundario {
  color: var(--texto-secundario);
}

.legenda {
  color: var(--texto-secundario);
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-texto);
}

label,
.rotulo {
  font-size: var(--tamanho-rotulo);
  font-weight: var(--peso-medium);
  line-height: var(--entrelinha-controles);
}


/* ==================================================
   4. LINKS, MENU E CONTROLES
   ================================================== */

a {
  color: var(--cor-link);
  text-underline-offset: 0.2em;
}

.link-acao {
  font-weight: var(--peso-semibold);
}

.menu-link {
  color: var(--cor-menu);
  font-size: var(--tamanho-menu);
  font-weight: var(--peso-medium);
  line-height: var(--entrelinha-controles);
  text-decoration-color: var(--cor-sublinhado-menu);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-botao);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-controles);

  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.botao--principal {
  background-color: var(--botao-fundo);
  color: var(--botao-texto);
}

.botao--secundario {
  background-color: transparent;
  color: var(--botao-secundario-texto);
  border-color: var(--botao-secundario-borda);
}

/* Foco visível, inclusive sobre os fundos claros da paleta. */
:focus-visible {
  outline: 3px solid var(--cor-cacau);
  outline-offset: 4px;
}


/* ==================================================
   5. SEÇÕES E CARDS DE SERVIÇOS
   ================================================== */

.secao-servicos {
  background-color: var(--fundo-principal);
}

.secao--alternada {
  background-color: var(--fundo-alternado);

  /* Cards claros quando inseridos sobre fundo areia. */
  --card-fundo: var(--cor-marfim);
}

.card-servico {
  min-width: 0;
  background-color: var(--card-fundo);
}

/* Classe opcional para adicionar a borda decorativa. */
.card-servico--com-borda {
  border: 1px solid var(--card-borda);
}

.card-servico__titulo {
  color: var(--texto-titulo);
  font-family: var(--fonte-titulos);
  font-size: var(--tamanho-h3);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-titulos);
}

.card-servico__descricao {
  color: var(--texto-secundario);
  font-family: var(--fonte-textos);
  font-size: var(--tamanho-texto);
  font-weight: var(--peso-regular);
  line-height: var(--entrelinha-texto);
}


/* ==================================================
   6. AJUSTE INICIAL PARA TELAS MAIS LARGAS
   Ponto de partida; revisar com o conteúdo real.
   ================================================== */

@media (min-width: 48em) {
  :root {
    --tamanho-h1: 2.75rem;   /* 44 px */
    --tamanho-h2: 2.25rem;   /* 36 px */
    --tamanho-h3: 1.75rem;   /* 28 px */
    --tamanho-texto: 1.125rem; /* 18 px */
  }
}

/* ==================================================
   CABEÇALHO FIXO — CONFIGURAÇÃO MOBILE-FIRST
   ================================================== */

:root {
  --altura-cabecalho: 6rem;
}

/* Reserva o espaço ocupado pelo cabeçalho fixo. */
body {
  padding-block-start: var(--altura-cabecalho);
}

/* Evita que as âncoras fiquem atrás do cabeçalho. */
html {
  scroll-padding-top: calc(var(--altura-cabecalho) + 1rem);
}

.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;

  height: var(--altura-cabecalho);

  /*
    No mobile e tablet, o comportamento original
    é mantido.
  */
  background-color: var(--fundo-principal);
  border-bottom: 1px solid var(--borda-decorativa);

  transition:
    background-color 220ms ease-out,
    border-color 220ms ease-out,
    box-shadow 220ms ease-out,
    backdrop-filter 220ms ease-out;
}

.cabecalho__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;

  width: min(calc(100% - 2rem), 90rem);
  height: 100%;
  margin-inline: auto;
}


/* ==================================================
   LOGO
   ================================================== */

.cabecalho__marca {
  grid-column: 1;
  grid-row: 1;

  display: flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 3rem;
}

.cabecalho__logo {
  display: block;

  width: 15rem;
  max-width: 100%;
  max-height: 6rem;

  object-fit: contain;
  object-position: left center;
}


/* ==================================================
   AGENDAMENTO
   ================================================== */

.cabecalho__agendar {
  grid-column: 2;
  grid-row: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  width: 10rem;
  min-height: 3rem;
  padding: 0.5rem 0.625rem;

  background-color: var(--botao-fundo);
  color: var(--botao-texto);

  border: 1px solid var(--botao-fundo);
  border-radius: 0.375rem;

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-botao);
  font-weight: var(--peso-semibold);
  line-height: 1.3;

  text-align: center;
  text-decoration: none;
  white-space: normal;

  transition: background-color 180ms ease-out;
}

.cabecalho__agendar svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.cabecalho__agendar span {
  min-width: 0;
}


/* ==================================================
   NAVEGAÇÃO
   ================================================== */

.cabecalho__nav-desktop {
  display: none;
}

.cabecalho__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cabecalho__lista a {
  display: flex;
  align-items: center;

  min-height: 3rem;

  color: var(--cor-menu);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-menu);
  font-weight: var(--peso-medium);
  line-height: var(--entrelinha-controles);

  text-decoration: none;
}


/* ==================================================
   MENU MOBILE — SEM JAVASCRIPT
   ================================================== */

.cabecalho__menu-mobile {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}

.cabecalho__acionador {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  min-height: 3rem;
  padding: 0.75rem;

  color: var(--cor-menu);
  background-color: transparent;

  border: 1px solid var(--borda-campo);
  border-radius: 0.375rem;

  cursor: pointer;
  list-style: none;
}

.cabecalho__acionador::-webkit-details-marker {
  display: none;
}

.cabecalho__hamburguer {
  position: relative;
  display: block;

  width: 1.25rem;
  height: 1rem;
}

.cabecalho__hamburguer span {
  position: absolute;
  left: 0;

  width: 100%;
  height: 2px;

  background-color: currentColor;
}

.cabecalho__hamburguer span:nth-child(1) {
  top: 0;
}

.cabecalho__hamburguer span:nth-child(2) {
  top: calc(50% - 1px);
}

.cabecalho__hamburguer span:nth-child(3) {
  bottom: 0;
}


/* ==================================================
   MENU MOBILE ABERTO
   ================================================== */

.cabecalho__menu-mobile[open]
.cabecalho__hamburguer span:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.cabecalho__menu-mobile[open]
.cabecalho__hamburguer span:nth-child(2) {
  opacity: 0;
}

.cabecalho__menu-mobile[open]
.cabecalho__hamburguer span:nth-child(3) {
  top: calc(50% - 1px);
  bottom: auto;

  transform: rotate(-45deg);
}

.cabecalho__painel {
  position: absolute;

  inset-inline: 0;
  top: 100%;

  max-height: calc(100vh - var(--altura-cabecalho));
  max-height: calc(100dvh - var(--altura-cabecalho));

  overflow-y: auto;

  padding: 0.75rem 1rem;

  background-color: var(--fundo-principal);

  border-bottom: 1px solid var(--borda-decorativa);

  box-shadow:
    0 0.75rem 1.5rem
    rgb(43 29 23 / 8%);
}

.cabecalho__painel .cabecalho__lista {
  max-width: 90rem;
  margin-inline: auto;
}

.cabecalho__painel a {
  padding: 0.75rem;
  overflow-wrap: anywhere;
}

.cabecalho__painel li + li {
  border-top: 1px solid var(--borda-decorativa);
}


/* ==================================================
   ACESSIBILIDADE E ESTADOS
   ================================================== */

.visualmente-oculto {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip-path: inset(50%);

  white-space: nowrap;

  border: 0;
}

.cabecalho a:focus-visible,
.cabecalho summary:focus-visible {
  outline: 3px solid var(--cor-cacau);
  outline-offset: 4px;
}

.cabecalho__agendar:active {
  background-color: var(--cor-cafe);
}

@media (hover: hover) {

  .cabecalho__agendar:hover {
    background-color: var(--cor-cafe);
  }

  .cabecalho__acionador:hover,
  .cabecalho__painel a:hover {
    background-color: var(--cor-areia);
  }
}


/* ==================================================
   MAIS ESPAÇO NO MOBILE E TABLET
   ================================================== */

@media (min-width: 30em) {

  .cabecalho__container {
    gap: 1rem;
  }

  .cabecalho__agendar {
    width: auto;
    padding-inline: 1rem;
  }
}


/* ==================================================
   DESKTOP
   ================================================== */

@media (min-width: 75em) {

  :root {
    --altura-cabecalho: 6rem;
  }


  /* ==================================================
     ESTADO INICIAL DO CABEÇALHO
     ==================================================

     No topo da página:

     - fundo transparente;
     - nenhuma divisória;
     - nenhuma sombra.

     Assim, o fundo da Hero pode ser visto
     através do cabeçalho.
  */

  .cabecalho {
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }


  /* ==================================================
     CABEÇALHO APÓS ROLAGEM
     ==================================================

     A classe é adicionada pelo JavaScript.

     O cabeçalho recupera seu fundo próprio e
     a divisória inferior aparece.
  */

  .cabecalho.cabecalho--rolado {
    background-color: rgb(247 243 238 / 96%);

    border-bottom-color:
      var(--borda-decorativa);

    /*
      Blur discreto para evitar transparência
      excessiva durante a rolagem.
    */
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

    box-shadow:
      0 0.25rem 1rem
      rgb(43 29 23 / 4%);
  }


  /* ==================================================
     ESTRUTURA DESKTOP
     ================================================== */

  .cabecalho__container {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      minmax(0, 1fr);

    gap: 1.5rem;
  }

  .cabecalho__logo {
    width: 10rem;
    max-height: 7rem;
  }


  /* ==================================================
     NAVEGAÇÃO DESKTOP
     ================================================== */

  .cabecalho__nav-desktop {
    display: block;

    grid-column: 2;
    grid-row: 1;
  }

  .cabecalho__nav-desktop
  .cabecalho__lista {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 1.5rem;
  }

  .cabecalho__nav-desktop a {
    position: relative;
    white-space: nowrap;
  }

  .cabecalho__nav-desktop a::after {
    content: "";

    position: absolute;

    inset-inline: 0;
    bottom: 0.375rem;

    height: 1px;

    background-color:
      var(--cor-sublinhado-menu);

    transform: scaleX(0);
    transform-origin: left;

    transition:
      transform
      300ms
      cubic-bezier(0.16, 1, 0.3, 1);
  }

  .cabecalho__nav-desktop
  a:focus-visible::after {
    transform: scaleX(1);
  }


  /* ==================================================
     BOTÃO DE AGENDAMENTO
     ================================================== */

  .cabecalho__agendar {
    grid-column: 3;

    justify-self: end;

    width: auto;

    padding-inline: 1rem;

    white-space: nowrap;
  }


  /* ==================================================
     REMOVE MENU MOBILE
     ================================================== */

  .cabecalho__menu-mobile {
    display: none;
  }
}


/* ==================================================
   HOVER DESKTOP
   ================================================== */

@media
(min-width: 75em)
and
(hover: hover) {

  .cabecalho__nav-desktop a:hover::after {
    transform: scaleX(1);
  }
}


/* ==================================================
   MOVIMENTO REDUZIDO
   ================================================== */

@media (prefers-reduced-motion: reduce) {

  .cabecalho,
  .cabecalho__agendar,
  .cabecalho__nav-desktop a::after {
    transition: none;
  }
}/* ==================================================
   HERO — CONFIGURAÇÕES
   ================================================== */

.hero {
  /* Ajustes manuais da fotografia e da composição mobile. */
  --hero-posicao-mobile: 50% 15%;
  --hero-posicao-desktop: 50% 35%;
  --hero-espaco-modelo: clamp(22rem, 85vw, 30rem);

  position: relative;
  isolation: isolate;
  background-color: var(--fundo-principal);
}


/* ==================================================
   MOBILE — IMAGEM AO FUNDO
   ================================================== */

.hero__imagem {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero__imagem img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: var(--hero-posicao-mobile);
}

/*
  A região do texto recebe fundo sólido.
  O degradê faz a transição a partir da área da modelo.
*/
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--hero-espaco-modelo) - 8rem),
    var(--cor-marfim) var(--hero-espaco-modelo),
    var(--cor-marfim) 100%
  );
}

.hero__conteudo {
  width: min(calc(100% - 2rem), 38rem);
  margin-inline: auto;

  padding-block-start: var(--hero-espaco-modelo);
  padding-block-end: 3rem;
}

.hero__local {
  margin: 0 0 0.75rem;

  color: var(--texto-secundario);
  font-family: var(--fonte-textos);
  font-size: 0.875rem;
  font-weight: var(--peso-medium);
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.hero__titulo {
  max-width: 17ch;
  margin: 0;

  color: var(--texto-titulo);
  font-family: var(--fonte-titulos);
  font-size: var(--tamanho-h1);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-h1);
}

.hero__descricao {
  max-width: 46ch;
  margin: 1.25rem 0 0;

  color: var(--texto-secundario);
  font-family: var(--fonte-textos);
  font-size: var(--tamanho-texto);
  font-weight: var(--peso-regular);
  line-height: var(--entrelinha-texto);
}

.hero__acoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.hero__botao {
  width: 100%;
  min-width: 0;
  border-radius: 0.375rem;
  transition: background-color 180ms ease-out;
}

.hero__botao--secundario {
  background-color: var(--cor-marfim);
}


/* ==================================================
   MAIS ESPAÇO — BOTÕES LADO A LADO QUANDO COUBEREM
   ================================================== */

@media (min-width: 36em) {

  .hero__acoes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .hero__botao {
    width: auto;
  }
}


/* ==================================================
   DESKTOP — TEXTO À ESQUERDA, IMAGEM À DIREITA
   ================================================== */

@media (min-width: 64em) {

  .hero {
    /* ==================================================
       CONTROLES DA COMPOSIÇÃO DESKTOP
       ================================================== */

    /* Curvatura da fotografia e das três molduras. */
    --hero-arco-vertical: 22%;

    /*
      Espaço entre a fotografia e a primeira moldura.
    */
    --hero-imagem-recuo: 0.625rem;

    /*
      Distância das molduras 2 e 3 em relação
      à moldura principal.
    */
    --hero-moldura-2-distancia: 0.75rem;
    --hero-moldura-3-distancia: 1.5rem;


    /* ==================================================
       FUNDO DECORATIVO
       ================================================== */

    /*
      LARGURA do grande bloco de fundo.

      Pode ser alterada livremente.
      O min() impede que ultrapasse a própria Hero
      e provoque rolagem horizontal.
    */
    --hero-fundo-largura: clamp(30rem, 43vw, 42rem);

    /*
      ALTURA independente do bloco.

      Não precisa mais ser obrigatoriamente quadrado.
      Se quiser quadrado, use o mesmo valor da largura.
    */
    --hero-fundo-altura: clamp(34rem, 52vw, 46rem);

    /*
      Quanto o bloco sobe em direção ao cabeçalho.
    */
    --hero-fundo-topo: -7rem;


    /* ==================================================
       ESTRUTURA PRINCIPAL
       ================================================== */

    position: relative;

    display: grid;

    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(0, 1fr);

    align-items: stretch;

    /*
      A Hero passa a ocupar toda a largura.

      Isso permite que o fundo decorativo seja
      encostado em right: 0 sem precisar utilizar
      cálculos com 100vw.
    */
    width: 100%;
    max-width: none;

    margin-inline: 0;

    /*
      Mantém o conteúdo equivalente ao antigo
      limite aproximado de 72rem.

      Em telas grandes, o padding cresce e
      centraliza visualmente a composição.
    */
    padding-inline:
      max(
        3rem,
        calc((100% - 72rem) / 2)
      );

    padding-block: 2.5rem;

    box-sizing: border-box;

    /*
      Mantemos o overflow vertical visível,
      pois o fundo precisa subir até o header.

      Não há necessidade de esconder overflow-x:
      o elemento decorativo agora permanece
      dentro da largura da Hero.
    */
    overflow: visible;
  }


  /* ==================================================
     REMOVE O DEGRADÊ UTILIZADO NO MOBILE
     ================================================== */

  .hero::before {
    display: none;
  }


  /* ==================================================
     GRANDE BLOCO DECORATIVO DE FUNDO
     ================================================== */

  .hero::after {
    content: "";

    position: absolute;

    /*
      Encosta exatamente na borda direita da Hero,
      que no desktop agora corresponde à largura
      disponível da página.
    */
    right: 0;

    /*
      Permite que o fundo suba atrás do cabeçalho.
    */
    top: var(--hero-fundo-topo);

    /*
      A largura continua configurável, mas nunca
      poderá ser maior que a própria Hero.
    */
    width: min(
      var(--hero-fundo-largura),
      100%
    );

    height: var(--hero-fundo-altura);

    /*
      Fica acima apenas do fundo marfim da Hero
      e atrás de todo o conteúdo.
    */
    z-index: 0;

    background-color: var(--cor-areia);

    pointer-events: none;
  }


  /* ==================================================
     CONTEÚDO DE TEXTO
     ================================================== */

  .hero__conteudo {
    position: relative;
    z-index: 2;

    grid-column: 1;
    grid-row: 1;

    align-self: center;

    width: auto;
    min-width: 0;

    margin: 0;

    padding:
      3rem
      clamp(2rem, 4vw, 4rem)
      3rem
      0;
  }

  .hero__titulo {
    font-size: 2.75rem;
  }


  /* ==================================================
     CONTÊINER DA IMAGEM
     MOLDURA 1
     ================================================== */

  .hero__imagem {
    position: relative;
    inset: auto;

    z-index: 2;

    grid-column: 2;
    grid-row: 1;

    min-width: 0;
    min-height: 30rem;

    /*
      Precisa permanecer visível para que
      as molduras externas possam ultrapassar
      ligeiramente o limite da fotografia.
    */
    overflow: visible;

    isolation: isolate;

    background-color: transparent;

    /*
      MOLDURA 1
      Mais próxima da fotografia e mais evidente.
    */
    border:
      1px solid
      rgba(89, 66, 55, 0.82);

    border-radius:
      50% 50% 0 0 /
      var(--hero-arco-vertical)
      var(--hero-arco-vertical)
      0 0;
  }


  /* ==================================================
     MOLDURA 2
     ================================================== */

  .hero__imagem::before {
    content: "";

    position: absolute;

    inset:
      calc(
        var(--hero-moldura-2-distancia) * -1
      );

    z-index: 3;

    /*
      Segunda moldura:
      opacidade intermediária.
    */
    border:
      1px solid
      rgba(89, 66, 55, 0.48);

    border-radius:
      50% 50% 0 0 /
      var(--hero-arco-vertical)
      var(--hero-arco-vertical)
      0 0;

    pointer-events: none;
  }


  /* ==================================================
     MOLDURA 3
     ================================================== */

  .hero__imagem::after {
    content: "";

    position: absolute;

    inset:
      calc(
        var(--hero-moldura-3-distancia) * -1
      );

    z-index: 2;

    /*
      Terceira moldura:
      mais externa e mais transparente.
    */
    border:
      1px solid
      rgba(89, 66, 55, 0.22);

    border-radius:
      50% 50% 0 0 /
      var(--hero-arco-vertical)
      var(--hero-arco-vertical)
      0 0;

    pointer-events: none;
  }


  /* ==================================================
     FOTOGRAFIA
     ================================================== */

  .hero__imagem img {
    position: absolute;

    inset: var(--hero-imagem-recuo);

    z-index: 1;

    width:
      calc(
        100% -
        (var(--hero-imagem-recuo) * 2)
      );

    height:
      calc(
        100% -
        (var(--hero-imagem-recuo) * 2)
      );

    object-fit: cover;

    object-position:
      var(--hero-posicao-desktop);

    border-radius:
      50% 50% 0 0 /
      var(--hero-arco-vertical)
      var(--hero-arco-vertical)
      0 0;
  }
}

/* ==================================================
   ESTADOS DE INTERAÇÃO E MOVIMENTO
   ================================================== */

@media (hover: hover) {
  .hero .botao--principal:hover {
    background-color: var(--cor-cafe);
  }

  .hero__botao--secundario:hover {
    background-color: var(--cor-areia);
  }
}

.hero .botao--principal:active {
  background-color: var(--cor-cafe);
}

.hero__botao--secundario:active {
  background-color: var(--cor-areia);
}

@media (prefers-reduced-motion: reduce) {
  .hero__botao {
    transition: none;
  }
}

.hero__imagem img {
  position: static;
  display: block;

  width: 100%;
  height: auto;
  max-width: 100%;

  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;

  object-fit: contain;
}

/* ==================================================
   RODAPÉ — BASE MOBILE
   ================================================== */

.rodape {
  background-color: var(--cor-areia);
  color: var(--texto-principal);
  border-top: 1px solid var(--borda-decorativa);

  font-family: var(--fonte-textos);
  font-size: 1rem;
  line-height: 1.6;
}

.rodape__container {
  width: min(calc(100% - 2rem), 72rem);
  margin-inline: auto;
  padding-block: 3rem 1.25rem;
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.rodape__grade > * {
  min-width: 0;
}


/* ==================================================
   LOGO
   ================================================== */

.rodape__logo-link {
  display: inline-flex;
  align-items: center;

  min-height: 3rem;
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.rodape__logo {
  display: block;
  width: 10rem;
  max-width: 100%;
  height: auto;
}


/* ==================================================
   TÍTULOS E NAVEGAÇÃO
   ================================================== */

.rodape .rodape__titulo {
  margin: 0 0 0.75rem;

  color: var(--texto-titulo);
  font-family: var(--fonte-textos);
  font-size: 1rem;
  font-weight: var(--peso-semibold);
  line-height: 1.4;
}

.rodape__links,
.rodape__redes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rodape__links a {
  display: flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;
  min-height: 3rem;
  padding-block: 0.5rem;

  color: var(--cor-menu);
  font-size: 1rem;
  font-weight: var(--peso-medium);
  line-height: 1.4;

  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
}


/* ==================================================
   REDES SOCIAIS
   ================================================== */

.rodape__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.rodape__rede {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;

  color: var(--cor-cacau);
  background-color: var(--cor-marfim);
  border: 1px solid var(--cor-cacau);
  border-radius: 50%;

  text-decoration: none;
  transition:
    background-color 180ms ease-out,
    color 180ms ease-out;
}

.rodape__rede svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}


/* ==================================================
   ENDEREÇO E BOTÃO DE CONTATO
   ================================================== */

.rodape__endereco {
  display: grid;
  gap: 0.25rem;
  margin: 0;

  color: var(--texto-secundario);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.rodape__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;

  width: 100%;
  min-height: 3rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;

  color: var(--botao-texto);
  background-color: var(--botao-fundo);
  border: 1px solid var(--botao-fundo);
  border-radius: 0.375rem;

  font-family: var(--fonte-textos);
  font-size: 1rem;
  font-weight: var(--peso-semibold);
  line-height: 1.4;

  text-align: center;
  text-decoration: none;
  transition: background-color 180ms ease-out;
}

.rodape__botao svg {
  flex-shrink: 0;
}

.rodape__botao span {
  min-width: 0;
  overflow-wrap: anywhere;
}


/* ==================================================
   BASE DO RODAPÉ
   ================================================== */

.rodape__base {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;

  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borda-decorativa);
}

.rodape__base p {
  margin: 0;
  color: var(--texto-secundario);
  font-size: 0.875rem;
  line-height: 1.6;
}

.rodape__base a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;

  color: var(--cor-link);
  font-size: 0.875rem;
  font-weight: var(--peso-semibold);
  text-underline-offset: 0.25em;
}


/* ==================================================
   FOCO E INTERAÇÃO
   ================================================== */

.rodape a:focus-visible {
  outline: 3px solid var(--cor-cacau);
  outline-offset: 4px;
}

.rodape__botao:active {
  background-color: var(--cor-cafe);
}

.rodape__rede:active {
  background-color: var(--cor-cacau);
  color: var(--cor-marfim);
}

@media (hover: hover) {
  .rodape__links a:hover {
    color: var(--cor-cacau);
    text-decoration-color: currentColor;
  }

  .rodape__rede:hover {
    background-color: var(--cor-cacau);
    color: var(--cor-marfim);
  }

  .rodape__botao:hover {
    background-color: var(--cor-cafe);
  }
}


/* ==================================================
   TABLET
   ================================================== */

@media (min-width: 48em) {
  .rodape__container {
    width: min(calc(100% - 4rem), 72rem);
  }

  .rodape__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .rodape__marca {
    grid-column: 1 / -1;
  }

  .rodape__botao {
    width: fit-content;
    max-width: 100%;
  }

  .rodape__base {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}


/* ==================================================
   DESKTOP
   ================================================== */

@media (min-width: 64em) {
  .rodape__container {
    width: min(calc(100% - 6rem), 72rem);
    padding-top: 4rem;
  }

  .rodape__grade {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(0, 0.8fr)
      minmax(0, 1.2fr);

    gap: 3rem;
  }

  .rodape__marca {
    grid-column: auto;
  }

  .rodape__logo {
    width: 11rem;
  }

  .rodape__base {
    margin-top: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rodape__rede,
  .rodape__botao {
    transition: none;
  }
}

/* ==================================================
   SERVIÇOS — MOBILE-FIRST
   ================================================== */

.servicos {
  padding-block: 3rem;

  background-color: var(--cor-marfim);
  color: var(--texto-principal);
}


.servicos,
.servicos *,
.servicos *::before,
.servicos *::after,
.servico-modal,
.servico-modal *,
.servico-modal *::before,
.servico-modal *::after {
  box-sizing: border-box;
}


/* ==================================================
   CONTAINER
   ================================================== */

.servicos__container {
  width: min(
    calc(100% - 2rem),
    72rem
  );

  margin-inline: auto;
}


/* ==================================================
   CABEÇALHO
   ================================================== */

.servicos__cabecalho {
  max-width: 42rem;

  margin-bottom: 1.75rem;

  text-align: left;
}


.servicos__rotulo {
  display: inline-block;

  margin-bottom: 0.5rem;

  color: var(--cor-cacau);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-legenda);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-controles);

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.servicos .servicos__titulo {
  margin: 0;

  color: var(--cor-cafe);

  font-family: var(--fonte-titulos);
  font-size: var(--tamanho-h2);
  font-weight: var(--peso-semibold);
  line-height: 1.2;
}


.servicos__introducao {
  margin: 0.875rem 0 0;

  color: var(--cor-taupe);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-texto);
  line-height: 1.6;
}


/* ==================================================
   CARROSSEL
   ================================================== */

.servicos__carrossel {
  min-width: 0;
}


/* ==================================================
   MOBILE — CARROSSEL HORIZONTAL

   O card ocupa 86% da largura.
   Uma parte do próximo permanece visível.
   ================================================== */

.servicos__grade {
  display: grid;

  grid-auto-flow: column;

  grid-auto-columns: 86%;

  gap: 1rem;

  margin: 0;

  padding:
    0
    0
    0.25rem;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;

  overscroll-behavior-inline: contain;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  list-style: none;
}


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


/* ==================================================
   ITEM
   ================================================== */

.servicos__item {
  display: flex;

  min-width: 0;

  scroll-snap-align: start;

  scroll-snap-stop: always;
}


/* ==================================================
   CARD

   IMPORTANTE:
   O card permanece sempre visível.
   ================================================== */

.servicos__card {
  display: flex;

  flex-direction: column;

  width: 100%;
  min-width: 0;

  padding: 1.5rem;

  background-color:
    var(--cor-areia);

  border:
    1px solid
    var(--cor-linho);

  border-radius:
    0.5rem;

  text-align: left;

  opacity: 1;

  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}


/* ==================================================
   ÍCONE QUADRADO
   ================================================== */

.servicos__icone {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  width: 2.75rem;
  height: 2.75rem;

  color: var(--cor-cacau);

  background-color:
    var(--cor-marfim);

  border:
    1px solid
    var(--cor-linho);

  border-radius:
    0.375rem;
}


.servicos__icone svg {
  display: block;

  width: 1.5rem;
  height: 1.5rem;
}


/* ==================================================
   NOME
   ================================================== */

.servicos .servicos__nome {
  min-width: 0;

  margin:
    1rem
    0
    0;

  color: var(--cor-cafe);

  font-family: var(--fonte-titulos);
  font-size: var(--tamanho-h3);
  font-weight: var(--peso-semibold);
  line-height: 1.2;
}


/* ==================================================
   DESCRIÇÃO
   ================================================== */

.servicos__descricao {
  margin:
    0.625rem
    0
    0;

  color: var(--cor-taupe);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-texto);
  font-weight: var(--peso-regular);
  line-height: 1.6;
}


/* ==================================================
   AÇÃO
   ================================================== */

.servicos__acao {
  margin-top: auto;

  padding-top: 1.25rem;
}


/* ==================================================
   SABER MAIS
   ================================================== */

.servicos__saiba-mais {
  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  min-height: 2.75rem;

  padding:
    0.25rem
    0;

  color: var(--cor-cacau);

  background-color: transparent;

  border: 0;

  font-family: var(--fonte-textos);
  font-size: 0.9375rem;
  font-weight: var(--peso-semibold);
  line-height: 1.4;

  text-decoration: underline;

  text-decoration-thickness: 1px;

  text-underline-offset: 0.25em;

  cursor: pointer;

  transition:
    color 180ms ease-out;
}


.servicos__saiba-mais-seta {
  display: inline-block;

  text-decoration: none;

  transition:
    transform 180ms ease-out;
}


/* ==================================================
   NAVEGAÇÃO DO CARROSSEL — MOBILE
   ================================================== */

.servicos__navegacao {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 0.625rem;

  width: 100%;

  margin-top: 1rem;
}


/* ==================================================
   SETAS
   ================================================== */

.servicos__seta {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 3rem;
  height: 3rem;

  padding: 0;

  color: var(--cor-cafe);

  background-color:
    var(--cor-marfim);

  border:
    1px solid
    var(--cor-linho);

  border-radius: 50%;

  appearance: none;

  cursor: pointer;

  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    box-shadow 180ms ease-out,
    transform 180ms ease-out;
}


.servicos__seta svg {
  display: block;

  width: 1.25rem;
  height: 1.25rem;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.75;

  stroke-linecap: round;

  stroke-linejoin: round;

  pointer-events: none;
}


/* ==================================================
   AJUDA PARA ESCOLHER
   ================================================== */

.servicos__ajuda {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap: 1.25rem;

  margin-top: 2rem;

  padding-top: 2rem;
  padding-bottom: 2rem;

  border-top:
    1px solid
    var(--cor-linho);

  border-bottom:
    1px solid
    var(--cor-linho);
}


.servicos__ajuda-conteudo,
.servicos__ajuda-acao {
  min-width: 0;
}


.servicos .servicos__ajuda-titulo {
  margin: 0;

  color: var(--cor-cafe);

  font-family: var(--fonte-titulos);
  font-size: var(--tamanho-h3);
  font-weight: var(--peso-semibold);
  line-height: 1.2;
}


.servicos__ajuda-texto {
  max-width: 48ch;

  margin:
    0.75rem
    0
    0;

  color: var(--cor-taupe);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-texto);
  line-height: 1.6;
}


/* ==================================================
   BOTÃO DA ÁREA DE AJUDA
   ================================================== */

.servicos__botao {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  max-width: 100%;

  min-height: 3rem;

  padding:
    0.625rem
    0.75rem;

  color: var(--cor-marfim);

  background-color:
    var(--cor-cacau);

  border:
    1px solid
    var(--cor-cacau);

  border-radius:
    0.375rem;

  font-family: var(--fonte-textos);
  font-size: 1rem;
  font-weight: var(--peso-semibold);
  line-height: 1.4;

  text-align: center;

  text-decoration: none;

  white-space: normal;

  overflow-wrap: anywhere;

  transition:
    background-color 180ms ease-out,
    transform 180ms ease-out;
}


.servicos__botao--secundario {
  color: var(--cor-cacau);

  background-color:
    var(--cor-marfim);
}


/* ==================================================
   QUEBRA DE TEXTO
   ================================================== */

.servicos__titulo,
.servicos__nome,
.servicos__introducao,
.servicos__descricao,
.servicos__ajuda-titulo,
.servicos__ajuda-texto {
  overflow-wrap: anywhere;
}


/* ==================================================
   FOCO
   ================================================== */

.servicos__saiba-mais:focus-visible,
.servicos__seta:focus-visible,
.servicos__botao:focus-visible,
.servico-modal__fechar:focus-visible,
.servico-modal__agendar:focus-visible {
  outline:
    3px solid
    var(--cor-cacau);

  outline-offset: 4px;
}


/* ==================================================
   ESTADOS
   ================================================== */

.servicos__botao:active {
  background-color:
    var(--cor-cafe);

  transform:
    translateY(1px);
}


.servicos__botao--secundario:active {
  background-color:
    var(--cor-areia);
}


/* ==================================================
   MODAL
   ================================================== */

.servico-modal {
  position: fixed;

  inset: 0;

  width: min(
    calc(100% - 2rem),
    42rem
  );

  max-height: 90vh;
  max-height: 90dvh;

  margin: auto;

  padding: 0;

  overflow: hidden;

  color: var(--texto-principal);

  background-color:
    var(--cor-marfim);

  border:
    1px solid
    var(--cor-linho);

  border-radius:
    0.625rem;

  box-shadow:
    0
    1.5rem
    4rem
    rgb(43 29 23 / 24%);
}


.servico-modal:not([open]) {
  display: none;
}


/* ==================================================
   BACKDROP COM BLUR
   ================================================== */

.servico-modal::backdrop {
  background-color:
    rgb(43 29 23 / 28%);

  -webkit-backdrop-filter:
    blur(10px);

  backdrop-filter:
    blur(10px);
}


body.modal-servico-aberto {
  overflow: hidden;
}


/* ==================================================
   CONTEÚDO ROLÁVEL DO MODAL
   ================================================== */

.servico-modal__rolagem {
  max-height: 90vh;
  max-height: 90dvh;

  overflow-y: auto;

  overscroll-behavior:
    contain;
}


/* ==================================================
   BOTÃO FECHAR
   ================================================== */

.servico-modal__fechar {
  position: absolute;

  z-index: 10;

  top: 1rem;
  right: 1rem;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 2.75rem;
  height: 2.75rem;

  padding: 0;

  color: var(--cor-cafe);

  background-color:
    rgb(247 243 238 / 96%);

  border:
    1px solid
    var(--cor-linho);

  border-radius:
    0.375rem;

  box-shadow:
    0
    0.25rem
    0.875rem
    rgb(43 29 23 / 14%);

  cursor: pointer;

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);

  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    transform 180ms ease-out;
}


.servico-modal__fechar svg {
  display: block;

  width: 1.25rem;
  height: 1.25rem;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.75;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* ==================================================
   IMAGEM DO MODAL
   ================================================== */

.servico-modal__imagem {
  width: 100%;

  aspect-ratio:
    16 / 10;

  overflow: hidden;

  background-color:
    var(--cor-areia);
}


.servico-modal__imagem img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
}


/* ==================================================
   DIVISÓRIA DECORATIVA
   ================================================== */

.servico-modal__divisor {
  position: relative;

  height: 1.5rem;

  margin:
    1rem
    1.5rem
    0;
}


.servico-modal__divisor::before {
  content: "";

  position: absolute;

  top: 50%;

  left: 0;
  right: 0;

  height: 1px;

  background-color:
    var(--cor-linho);
}


.servico-modal__divisor::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 0.75rem;
  height: 0.75rem;

  background-color:
    var(--cor-marfim);

  border-right:
    1px solid
    var(--cor-argila);

  border-bottom:
    1px solid
    var(--cor-argila);

  transform:
    translate(-50%, -65%)
    rotate(45deg);
}


/* ==================================================
   TEXTO DO MODAL
   ================================================== */

.servico-modal__texto {
  padding:
    0.5rem
    1.5rem
    1.5rem;
}


.servico-modal__rotulo {
  display: inline-block;

  margin-bottom:
    0.375rem;

  color: var(--cor-cacau);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-legenda);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-controles);

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.servico-modal__titulo {
  margin: 0;

  color: var(--cor-cafe);

  font-family: var(--fonte-titulos);
  font-size: var(--tamanho-h3);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-titulos);
}


.servico-modal__descricao {
  margin:
    1rem
    0
    0;

  color: var(--texto-secundario);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-texto);
  line-height: var(--entrelinha-texto);

  overflow-wrap: anywhere;
}


/* ==================================================
   CTA DO MODAL
   ================================================== */

.servico-modal__agendar {
  width: 100%;

  margin-top:
    1.5rem;
}


/* ==================================================
   HOVER
   ================================================== */

@media
(hover: hover)
and
(pointer: fine) {

  .servicos__card:hover {
    transform:
      translateY(-3px);

    border-color:
      var(--cor-argila);

    box-shadow:
      0
      0.625rem
      1.5rem
      rgb(43 29 23 / 8%);
  }


  .servicos__saiba-mais:hover {
    color:
      var(--cor-cafe);

    text-decoration-thickness:
      2px;
  }


  .servicos__saiba-mais:hover
  .servicos__saiba-mais-seta {
    transform:
      translateX(3px);
  }


  .servicos__seta:hover {
    background-color:
      var(--cor-areia);

    border-color:
      var(--cor-argila);

    box-shadow:
      0
      0.375rem
      1rem
      rgb(43 29 23 / 12%);

    transform:
      translateY(-2px);
  }


  .servicos__botao:hover {
    background-color:
      var(--cor-cafe);
  }


  .servicos__botao--secundario:hover {
    background-color:
      var(--cor-areia);
  }


  .servico-modal__fechar:hover {
    background-color:
      var(--cor-areia);

    border-color:
      var(--cor-argila);

    transform:
      translateY(-1px);
  }

}


/* ==================================================
   TABLET
   ================================================== */

@media (min-width: 48em) {

  .servicos {
    padding-block: 4rem;
  }


  .servicos__container {
    width: min(
      calc(100% - 4rem),
      72rem
    );
  }


  .servicos__cabecalho {
    margin-bottom: 2rem;
  }


  /* -----------------------------------------------
     Sai do carrossel horizontal
     e entra na grade de 2 colunas.
     ----------------------------------------------- */

  .servicos__grade {
    grid-auto-flow: row;

    grid-auto-columns: auto;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 1.5rem;

    overflow: visible;

    scroll-snap-type: none;
  }


  .servicos__item {
    scroll-snap-align: none;

    scroll-snap-stop: normal;
  }


  /* Setas somente no mobile. */

  .servicos__navegacao {
    display: none;
  }


  .servico-modal__divisor {
    margin-inline: 2rem;
  }


  .servico-modal__texto {
    padding:
      0.75rem
      2rem
      2rem;
  }


  .servico-modal__agendar {
    width: fit-content;
  }

}


/* ==================================================
   DESKTOP
   ================================================== */

@media (min-width: 64em) {

  .servicos__container {
    width: min(
      calc(100% - 6rem),
      72rem
    );
  }


  .servicos__grade {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );

    gap: 1.25rem;
  }


  .servicos__ajuda {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    align-items: center;

    gap: 2rem;

    margin-top: 3rem;

    padding-top: 2rem;
  }


  .servicos__ajuda-acao {
    justify-self: end;

    max-width: 100%;
  }


  .servicos__ajuda-acao
  .servicos__botao {
    width: fit-content;
  }

}


/* ==================================================
   NOVA ANIMAÇÃO DE ENTRADA

   O CARD NUNCA É ESCONDIDO.

   Somente:
   - título;
   - descrição;
   - Saber mais

   fazem um pequeno movimento vertical.
   ================================================== */


/* Estado normal / fallback */

.servicos__nome,
.servicos__descricao,
.servicos__acao {
  opacity: 1;

  transform: none;
}


/* ==================================================
   PREPARAÇÃO

   Nenhuma opacity é alterada.
   ================================================== */

.servicos.servicos--animacoes-prontas
.servicos__nome {
  transform:
    translateY(8px);
}


.servicos.servicos--animacoes-prontas
.servicos__descricao {
  transform:
    translateY(8px);
}


.servicos.servicos--animacoes-prontas
.servicos__acao {
  transform:
    translateY(8px);
}


/* ==================================================
   TRANSIÇÕES

   Pequena cascata interna do texto.
   ================================================== */

.servicos.servicos--animacoes-prontas
.servicos__nome {
  transition:
    transform
    380ms
    ease-out;
}


.servicos.servicos--animacoes-prontas
.servicos__descricao {
  transition:
    transform
    420ms
    ease-out
    50ms;
}


.servicos.servicos--animacoes-prontas
.servicos__acao {
  transition:
    transform
    440ms
    ease-out
    100ms;
}


/* ==================================================
   ESTADO FINAL

   Toda a seção é liberada ao mesmo tempo.
   ================================================== */

.servicos.servicos--visiveis
.servicos__nome,

.servicos.servicos--visiveis
.servicos__descricao,

.servicos.servicos--visiveis
.servicos__acao {
  transform:
    translateY(0);
}


/* ==================================================
   DESKTOP — MOVIMENTO UM POUCO MAIOR
   ================================================== */

@media (min-width: 64em) {

  .servicos.servicos--animacoes-prontas
  .servicos__nome,

  .servicos.servicos--animacoes-prontas
  .servicos__descricao,

  .servicos.servicos--animacoes-prontas
  .servicos__acao {
    transform:
      translateY(10px);
  }


  .servicos.servicos--visiveis
  .servicos__nome,

  .servicos.servicos--visiveis
  .servicos__descricao,

  .servicos.servicos--visiveis
  .servicos__acao {
    transform:
      translateY(0);
  }

}


/* ==================================================
   MOVIMENTO REDUZIDO
   ================================================== */

@media (prefers-reduced-motion: reduce) {

  .servicos__card,
  .servicos__nome,
  .servicos__descricao,
  .servicos__acao,
  .servicos__saiba-mais,
  .servicos__saiba-mais-seta,
  .servicos__seta,
  .servicos__botao,
  .servico-modal__fechar,

  .servicos.servicos--animacoes-prontas
  .servicos__nome,

  .servicos.servicos--animacoes-prontas
  .servicos__descricao,

  .servicos.servicos--animacoes-prontas
  .servicos__acao,

  .servicos.servicos--visiveis
  .servicos__nome,

  .servicos.servicos--visiveis
  .servicos__descricao,

  .servicos.servicos--visiveis
  .servicos__acao {
    opacity: 1;

    transform: none;

    transition: none;
  }

}

/* ==================================================
   O SALÃO
   ================================================== */

.sobre-salao {
  padding-inline: 1rem;

  background-color: var(--fundo-principal);
  color: var(--texto-principal);
}

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


/* ==================================================
   CONTAINER / GRADE — MOBILE
   ================================================== */

.sobre-salao__grade {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  grid-template-areas:
    "abertura"
    "galeria"
    "historia"
    "localizacao";

  gap: 1.5rem;

  width: 100%;
  max-width: 72rem;

  margin-inline: auto;

  padding-block: 3rem;
}

.sobre-salao__grade > * {
  min-width: 0;
}


/* ==================================================
   ABERTURA
   ================================================== */

.sobre-salao__abertura {
  grid-area: abertura;
}

.sobre-salao__rotulo {
  display: inline-block;

  margin-bottom: 0.5rem;

  color: var(--cor-cacau);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-legenda);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-controles);

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sobre-salao__abertura h2 {
  margin: 0 0 1rem;

  color: var(--texto-titulo);

  font-family: var(--fonte-titulos);
  font-size: var(--tamanho-h2);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-titulos);
}

.sobre-salao__introducao {
  max-width: 52ch;

  margin: 0;

  color: var(--texto-secundario);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-texto);
  line-height: var(--entrelinha-texto);

  overflow-wrap: anywhere;
}


/* ==================================================
   HISTÓRIA
   ================================================== */

.sobre-salao__historia {
  grid-area: historia;

  max-width: 58ch;

  color: var(--texto-secundario);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-texto);
  line-height: var(--entrelinha-texto);

  overflow-wrap: anywhere;
}

.sobre-salao__historia p {
  margin: 0;
}

.sobre-salao__historia p + p {
  margin-top: 1rem;
}


/* ==================================================
   GALERIA
   ================================================== */

.sobre-salao__galeria {
  grid-area: galeria;

  min-width: 0;

  align-self: start;
}


/* ==================================================
   ÁREA DAS FOTOGRAFIAS
   ================================================== */

.sobre-salao__carrossel {
  position: relative;

  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  background-color: var(--cor-areia);

  border-radius: 0.5rem;
}


/* ==================================================
   SLIDES
   ================================================== */

.sobre-salao__slide {
  position: absolute;
  inset: 0;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 500ms ease-out,
    visibility 500ms ease-out;
}

.sobre-salao__slide.esta-ativo {
  opacity: 1;
  visibility: visible;
}

.sobre-salao__slide img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit:
    var(--salao-ajuste, cover);

  object-position:
    var(--salao-posicao, 50% 50%);
}


/* ==================================================
   INDICADOR DA QUANTIDADE DE FOTOS
   ================================================== */

.sobre-salao__contador {
  position: absolute;

  z-index: 5;

  left: 1rem;
  bottom: 1rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.25rem;

  min-height: 2.25rem;

  padding-inline: 0.875rem;

  color: var(--cor-cafe);

  background-color:
    rgb(247 243 238 / 94%);

  border:
    1px solid
    rgb(213 197 181 / 95%);

  border-radius: 999px;

  box-shadow:
    0 0.25rem 0.75rem
    rgb(43 29 23 / 14%);

  font-family: var(--fonte-textos);
  font-size: 0.875rem;
  font-weight: var(--peso-semibold);
  line-height: 1;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}


/* ==================================================
   CONTROLES ABAIXO DA FOTO
   ================================================== */

.sobre-salao__controles {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  margin-top: 1rem;
}


/* ==================================================
   NAVEGAÇÃO
   ================================================== */

.sobre-salao__navegacao {
  display: flex;

  align-items: center;

  gap: 0.625rem;
}


/* ==================================================
   SETAS
   ================================================== */

.sobre-salao__seta {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;

  padding: 0;

  color: var(--cor-cafe);

  background-color:
    var(--cor-marfim);

  border:
    1px solid
    var(--cor-linho);

  border-radius: 50%;

  cursor: pointer;

  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    box-shadow 180ms ease-out,
    transform 180ms ease-out;
}

.sobre-salao__seta svg {
  width: 1.25rem;
  height: 1.25rem;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==================================================
   LINK PARA LOCALIZAÇÃO
   ================================================== */

.sobre-salao__localizacao {
  grid-area: localizacao;

  display: inline-flex;

  align-items: center;

  justify-self: start;
  align-self: start;

  gap: 0.5rem;

  min-height: 3rem;

  max-width: 100%;

  color: var(--cor-cacau);

  font-family: var(--fonte-textos);
  font-size: 1rem;
  font-weight: var(--peso-medium);

  text-decoration: underline;
  text-underline-offset: 0.25em;
}


/* ==================================================
   FOCO
   ================================================== */

.sobre-salao__seta:focus-visible,
.sobre-salao__localizacao:focus-visible {
  outline:
    3px solid var(--cor-cacau);

  outline-offset: 4px;
}


/* ==================================================
   HOVER
   ================================================== */

@media (hover: hover) and (pointer: fine) {

  .sobre-salao__seta:hover {
    background-color:
      var(--cor-areia);

    border-color:
      var(--cor-argila);

    box-shadow:
      0 0.375rem 1rem
      rgb(43 29 23 / 12%);

    transform:
      translateY(-2px);
  }


  .sobre-salao__localizacao:hover {
    text-decoration-thickness: 2px;
  }

}


/* ==================================================
   TABLET
   ================================================== */

@media (min-width: 40rem) {

  .sobre-salao {
    padding-inline: 2rem;
  }

}


/* ==================================================
   DESKTOP
   ================================================== */

@media (min-width: 64rem) {

  .sobre-salao {
    padding-inline: 3rem;
  }


  .sobre-salao__grade {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);

    grid-template-areas:
      "abertura     galeria"
      "historia     galeria"
      "localizacao  galeria";

    column-gap: 4rem;
    row-gap: 1.5rem;

    width: 100%;
    max-width: 72rem;

    padding-block: 5rem;
  }


  .sobre-salao__galeria {
    align-self: center;
  }


  .sobre-salao__controles {
    margin-top: 1.25rem;
  }


  .sobre-salao__seta {
    width: 3.25rem;
    height: 3.25rem;
  }


  .sobre-salao__contador {
    left: 1.25rem;
    bottom: 1.25rem;
  }

}


/* ==================================================
   MOVIMENTO REDUZIDO
   ================================================== */

@media (prefers-reduced-motion: reduce) {

  .sobre-salao__slide,
  .sobre-salao__seta {
    transition: none;
  }

}

/* ========================================
   LINK PARA LOCALIZAÇÃO
======================================== */

.sobre-salao__localizacao {
  grid-area: localizacao;

  display: inline-flex;
  align-items: center;

  justify-self: start;
  align-self: start;

  gap: 0.5rem;

  min-height: 3rem;
  max-width: 100%;

  color: var(--cor-cacau);

  font-family: var(--fonte-textos);
  font-size: 1rem;
  font-weight: var(--peso-medium);

  text-decoration: underline;
  text-underline-offset: 0.25em;
}


/* ========================================
   FOCO
======================================== */

.sobre-salao__seta:focus-visible,
.sobre-salao__pausa:focus-visible,
.sobre-salao__localizacao:focus-visible {
  outline: 3px solid var(--cor-cacau);
  outline-offset: 4px;
}


/* ========================================
   INTERAÇÃO COM MOUSE
======================================== */

@media (hover: hover) and (pointer: fine) {

  .sobre-salao__seta:hover,
  .sobre-salao__pausa:hover {
    background-color: var(--cor-marfim);
    border-color: var(--cor-argila);
  }

  .sobre-salao__seta:hover {
    box-shadow:
      0 0.375rem 1.25rem
      rgb(43 29 23 / 16%);
  }

  .sobre-salao__localizacao:hover {
    text-decoration-thickness: 2px;
  }
}


/* ========================================
   TABLET
======================================== */

@media (min-width: 40rem) {

  .sobre-salao__grade {
    width: min(calc(100% - 4rem), 75rem);
  }

  .sobre-salao__seta--anterior {
    left: 1rem;
  }

  .sobre-salao__seta--proxima {
    right: 1rem;
  }
}


/* ========================================
   DESKTOP
======================================== */

@media (min-width: 64rem) {

  .sobre-salao__grade {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);

    grid-template-areas:
      "abertura     galeria"
      "historia     galeria"
      "localizacao  galeria";

    column-gap: 4rem;
    row-gap: 1.5rem;

    width: min(calc(100% - 6rem), 75rem);

    padding-block: 5rem;
  }

  .sobre-salao__galeria {
    align-self: center;
  }

  .sobre-salao__carrossel {
    aspect-ratio: 4 / 3;
  }

  .sobre-salao__seta {
    width: 3.25rem;
    height: 3.25rem;
  }

  .sobre-salao__seta--anterior {
    left: 1.25rem;
  }

  .sobre-salao__seta--proxima {
    right: 1.25rem;
  }
}


/* ========================================
   MOVIMENTO REDUZIDO
======================================== */

@media (prefers-reduced-motion: reduce) {

  .sobre-salao__slide,
  .sobre-salao__seta,
  .sobre-salao__pausa {
    transition: none;
  }

  /*
    O JavaScript também desativa a reprodução
    automática neste caso.
  */
}

/* ==================================================
   AVALIAÇÕES
   ================================================== */

.avaliacoes {
  padding-block: 4.5rem;
  background-color: var(--fundo-alternado);
}

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


/* ==================================================
   CONTAINER

   MOBILE:
   1rem de margem em cada lateral.

   TABLET:
   2rem de margem em cada lateral.

   DESKTOP:
   3rem de margem em cada lateral.

   Largura máxima:
   72rem / 1152px.
   ================================================== */

.avaliacoes__container {
  width: min(
    calc(100% - 2rem),
    72rem
  );

  margin-inline: auto;
}

/* ==================================================
   EFEITO DOS CARDS — HOVER
   ================================================== */

.avaliacao-card {
  transition:
    transform 180ms ease-out,
    box-shadow 180ms ease-out,
    border-color 180ms ease-out;
}

@media (hover: hover) and (pointer: fine) {

  .avaliacao-card:hover {
    transform: translateY(-3px);

    border-color: var(--cor-argila);

    box-shadow:
      0 0.5rem 1.25rem rgb(43 29 23 / 10%);
  }

}

/* ==================================================
   CABEÇALHO
   ================================================== */

.avaliacoes__cabecalho {
  max-width: 40rem;
  margin-bottom: 2rem;
}

.avaliacoes__rotulo {
  display: inline-block;

  margin-bottom: 0.5rem;

  color: var(--cor-cacau);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-legenda);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-controles);

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.avaliacoes__introducao {
  margin-top: 0.75rem;

  color: var(--texto-secundario);
}


/* ==================================================
   CARROSSEL
   ================================================== */

.avaliacoes__carrossel {
  min-width: 0;
}


/* ==================================================
   LISTA — MOBILE

   1 card + parte do próximo.
   ================================================== */

.avaliacoes__lista {
  display: flex;
  align-items: stretch;

  gap: 1rem;

  width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;

  overscroll-behavior-inline: contain;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

  /*
   * A barra fica escondida.
   * A navegação continua disponível por:
   * - toque/arrasto;
   * - trackpad;
   * - setas abaixo.
   */

  scrollbar-width: none;
}

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


/* ==================================================
   CARD — MOBILE

   85% deixa uma parte do próximo card aparecendo.
   ================================================== */

.avaliacao-card {
  flex: 0 0 85%;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 1.5rem;

  background-color: var(--cor-marfim);

  border: 1px solid var(--card-borda);
  border-radius: 0.75rem;
}


/* ==================================================
   CLIENTE
   ================================================== */

.avaliacao-card__cliente {
  display: flex;
  align-items: center;

  gap: 0.875rem;

  margin-bottom: 1.5rem;
}

.avaliacao-card__foto {
  flex: 0 0 auto;

  width: 3.5rem;
  height: 3.5rem;

  border-radius: 50%;

  object-fit: cover;
  object-position: center;
}


/* Placeholder para avaliações ainda sem foto */

.avaliacao-card__foto--placeholder {
  background-color: var(--cor-linho);
}


.avaliacao-card__nome {
  margin: 0;

  color: var(--texto-titulo);

  font-family: var(--fonte-textos);
  font-size: 1rem;
  font-weight: var(--peso-semibold);
  line-height: 1.4;
}

.avaliacao-card__identificacao {
  margin-top: 0.125rem;

  color: var(--texto-secundario);

  font-size: var(--tamanho-legenda);
  line-height: 1.4;
}


/* ==================================================
   COMENTÁRIO
   ================================================== */

.avaliacao-card__comentario {
  margin: 0;
  padding: 0;
}

.avaliacao-card__comentario p {
  margin: 0;

  color: var(--texto-principal);

  font-size: var(--tamanho-texto);
  line-height: var(--entrelinha-texto);
}

.avaliacao-card__comentario p::before {
  content: "“";
}

.avaliacao-card__comentario p::after {
  content: "”";
}


/* ==================================================
   CONTROLES ABAIXO DOS CARDS
   ================================================== */

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

  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 1.5rem;
}


/* ==================================================
   LINK PARA GOOGLE
   ================================================== */

.avaliacoes__google {
  display: inline-flex;
  align-items: center;

  gap: 0.5rem;

  min-height: 3rem;

  color: var(--cor-cacau);

  font-family: var(--fonte-textos);
  font-size: 1rem;
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-controles);

  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.avaliacoes__google svg {
  flex: 0 0 auto;

  width: 1.125rem;
  height: 1.125rem;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 180ms ease-out;
}


/* ==================================================
   SETAS
   ================================================== */

.avaliacoes__navegacao {
  display: flex;
  align-items: center;

  gap: 0.625rem;
}

.avaliacoes__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;

  padding: 0;

  color: var(--cor-cafe);
  background-color: var(--cor-marfim);

  border: 1px solid var(--cor-linho);
  border-radius: 50%;

  cursor: pointer;

  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    transform 180ms ease-out;
}

.avaliacoes__seta svg {
  width: 1.25rem;
  height: 1.25rem;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avaliacoes__seta:disabled {
  opacity: 0.4;
  cursor: default;
}


/* ==================================================
   FOCO
   ================================================== */

.avaliacoes__lista:focus-visible,
.avaliacoes__google:focus-visible,
.avaliacoes__seta:focus-visible {
  outline: 3px solid var(--cor-cacau);
  outline-offset: 4px;
}


/* ==================================================
   HOVER
   ================================================== */

@media (hover: hover) and (pointer: fine) {

  .avaliacoes__google:hover svg {
    transform: translateX(0.2rem);
  }

  .avaliacoes__seta:not(:disabled):hover {
    background-color: var(--cor-areia);
    border-color: var(--cor-argila);
  }

}


/* ==================================================
   TABLET
   ================================================== */

@media (min-width: 40rem) {

  .avaliacoes__container {
    width: min(
      calc(100% - 4rem),
      72rem
    );
  }

}


/* ==================================================
   DESKTOP

   Continuam aparecendo exatamente 3 cards.
   Os demais ficam fora da área visível.
   ================================================== */

@media (min-width: 48em) {

  .avaliacoes {
    padding-block: 6rem;
  }

  .avaliacoes__cabecalho {
    margin-bottom: 2.5rem;
  }

  .avaliacao-card {

    /*
     * 100% da área
     * - 2 gaps de 1rem
     * dividido por 3 cards.
     */

    flex-basis:
      calc((100% - 2rem) / 3);

    padding: 1.75rem;
  }

  .avaliacoes__controles {
    margin-top: 1.75rem;
  }

}


/* ==================================================
   DESKTOP — MARGENS LATERAIS
   ================================================== */

@media (min-width: 64rem) {

  .avaliacoes__container {
    width: min(
      calc(100% - 6rem),
      72rem
    );
  }

}


/* ==================================================
   REDUÇÃO DE MOVIMENTO
   ================================================== */

@media (prefers-reduced-motion: reduce) {

  .avaliacoes__lista {
    scroll-behavior: auto;
  }

  .avaliacoes__google svg,
  .avaliacoes__seta {
    transition: none;
  }

}

/* ==================================================
   LOCALIZAÇÃO
   Mobile first
   ================================================== */

.localizacao {
  padding-block: 3.5rem;
  padding-inline: 1rem;

  background-color: var(--fundo-alternado);
}

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


/* ==================================================
   CONTAINER
   Mesmo padrão de largura das demais seções
   ================================================== */

.localizacao__container {
  width: 100%;
  max-width: 72rem;

  margin-inline: auto;
}


/* ==================================================
   CABEÇALHO
   ================================================== */

.localizacao__cabecalho {
  max-width: 42rem;

  margin-bottom: 2rem;
}

.localizacao__rotulo {
  display: inline-block;

  margin-bottom: 0.5rem;

  color: var(--cor-cacau);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-legenda);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-controles);

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.localizacao__introducao {
  max-width: 38rem;

  margin-top: 0.75rem;

  color: var(--texto-secundario);
}


/* ==================================================
   LAYOUT
   ================================================== */

.localizacao__grade {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap: 1.25rem;
}

.localizacao__grade > * {
  min-width: 0;
}


/* ==================================================
   BLOCO DE INFORMAÇÕES
   ================================================== */

.localizacao__informacoes {
  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 1.5rem;

  background-color: var(--cor-marfim);

  border:
    1px solid
    var(--borda-decorativa);

  border-radius: 0.875rem;
}

.localizacao__bloco {
  min-width: 0;
}

.localizacao__bloco + .localizacao__bloco {
  margin-top: 1.5rem;
}

.localizacao__subtitulo {
  margin: 0 0 0.625rem;

  color: var(--texto-titulo);

  font-family: var(--fonte-titulos);
  font-size: 1.25rem;
  font-weight: var(--peso-semibold);
  line-height: 1.3;
}


/* ==================================================
   ENDEREÇO
   ================================================== */

.localizacao__endereco {
  display: flex;
  flex-direction: column;

  margin: 0;

  color: var(--texto-secundario);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-texto);
  font-style: normal;
  font-weight: var(--peso-regular);
  line-height: var(--entrelinha-texto);
}


/* ==================================================
   COMO CHEGAR
   ================================================== */

.localizacao__como-chegar {
  max-width: 42ch;

  margin: 0;

  color: var(--texto-secundario);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-texto);
  line-height: var(--entrelinha-texto);
}


/* ==================================================
   DIVISOR
   Mantido caso ainda seja usado em outra versão
   do HTML.
   ================================================== */

.localizacao__divisor {
  width: 100%;
  height: 1px;

  margin-block: 1.5rem;

  background-color:
    var(--borda-decorativa);
}


/* ==================================================
   REFERÊNCIAS
   Mantido caso ainda sejam usadas.
   ================================================== */

.localizacao__referencias {
  display: grid;

  gap: 0.75rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

.localizacao__referencias li {
  display: grid;

  grid-template-columns:
    auto minmax(0, 1fr);

  align-items: start;

  gap: 0.75rem;

  color: var(--texto-secundario);

  line-height:
    var(--entrelinha-texto);
}

.localizacao__marcador {
  width: 0.5rem;
  height: 0.5rem;

  margin-top: 0.55em;

  background-color:
    var(--cor-argila);

  border-radius: 50%;
}


/* ==================================================
   BOTÃO
   ================================================== */

.localizacao__botao {
  width: 100%;

  gap: 0.625rem;

  margin-top: 1.75rem;

  border-radius: 0.375rem;
}

.localizacao__botao-icone {
  flex: 0 0 auto;
}


/* ==================================================
   MAPA
   ================================================== */

.localizacao__mapa {
  min-width: 0;
  min-height: 17.5rem;

  overflow: hidden;

  background-color:
    var(--cor-linho);

  border:
    1px solid
    var(--borda-decorativa);

  border-radius: 0.875rem;
}

.localizacao__mapa iframe {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 17.5rem;

  border: 0;

  /*
   * Evita que o mapa capture a rolagem
   * da página em dispositivos de toque.
   */
  pointer-events: none;
}


/* ==================================================
   TABLET
   Mesmo espaçamento lateral de "Sobre o Salão"
   ================================================== */

@media (min-width: 40rem) {

  .localizacao {
    padding-inline: 2rem;
  }

}


/* ==================================================
   TABLET MAIOR
   ================================================== */

@media (min-width: 48em) {

  .localizacao {
    padding-block: 5rem;
  }


  .localizacao__cabecalho {
    margin-bottom: 2.5rem;
  }


  .localizacao__informacoes {
    padding: 1.75rem;
  }


  .localizacao__botao {
    width: fit-content;
  }


  .localizacao__mapa,
  .localizacao__mapa iframe {
    min-height: 22rem;
  }

}


/* ==================================================
   DESKTOP
   ================================================== */

@media (min-width: 64rem) {

  .localizacao {
    padding-inline: 3rem;
  }


  .localizacao__grade {
    grid-template-columns:
      minmax(18rem, 0.85fr)
      minmax(0, 1.15fr);

    gap: 2rem;

    align-items: stretch;
  }


  .localizacao__informacoes {
    padding: 2rem;
  }


  .localizacao__mapa,
  .localizacao__mapa iframe {
    min-height: 24rem;
  }

}


/* ==================================================
   MAPA INTERATIVO EM DISPOSITIVOS COM MOUSE
   ================================================== */

@media (hover: hover) and (pointer: fine) {

  .localizacao__mapa iframe {
    pointer-events: auto;
  }

}
/* ==================================================
   RESULTADOS
   MOBILE FIRST
   ================================================== */

.resultados {
  padding-block: 3.5rem;

  background-color: var(--fundo-principal);
  color: var(--texto-principal);
}


/* ==================================================
   CONTAINER
   ================================================== */

.resultados__container {
  width: min(
    calc(100% - 2rem),
    72rem
  );

  margin-inline: auto;
}


/* ==================================================
   CABEÇALHO
   ================================================== */

.resultados__cabecalho {
  max-width: 42rem;

  margin-bottom: 2rem;
}

.resultados__rotulo {
  display: inline-block;

  margin-bottom: 0.5rem;

  color: var(--cor-cacau);

  font-family: var(--fonte-textos);
  font-size: var(--tamanho-legenda);
  font-weight: var(--peso-semibold);
  line-height: var(--entrelinha-controles);

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resultados__cabecalho h2 {
  margin: 0;
}

.resultados__introducao {
  margin-top: 0.75rem;

  max-width: 55ch;

  color: var(--texto-secundario);
}


/* ==================================================
   CARROSSEL
   ================================================== */

.resultados__carrossel {
  min-width: 0;
}


/* ==================================================
   LISTA
   ================================================== */

.resultados__lista {
  display: flex;
  align-items: stretch;

  gap: 1rem;

  width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;

  overscroll-behavior-inline: contain;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}

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


/* ==================================================
   RESULTADO — MOBILE

   Aproximadamente 75% da largura disponível.
   Parte da próxima imagem continua visível.
   ================================================== */

.resultado-card {
  position: relative;

  flex: 0 0 75%;

  min-width: 0;

  margin: 0;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  border-radius: 0.5rem;

  background-color: var(--cor-areia);
}


/* ==================================================
   IMAGEM
   ================================================== */

.resultado-card img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 350ms ease-out;
}


/* ==================================================
   SOMBREAMENTO INFERIOR
   ================================================== */

.resultado-card::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent 58%,
      rgb(43 29 23 / 12%) 72%,
      rgb(43 29 23 / 68%) 100%
    );
}


/* ==================================================
   NOME DO SERVIÇO
   ================================================== */

.resultado-card__nome {
  position: absolute;
  z-index: 2;

  left: 1rem;
  right: 1rem;
  bottom: 1rem;

  margin: 0;

  color: #fff;

  font-family: var(--fonte-textos);
  font-size: 1rem;
  font-weight: var(--peso-semibold);
  line-height: 1.3;

  text-shadow:
    0 1px 4px rgb(0 0 0 / 25%);
}


/* ==================================================
   NAVEGAÇÃO
   ================================================== */

.resultados__navegacao {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 0.625rem;

  margin-top: 1.25rem;
}


/* ==================================================
   SETAS
   ================================================== */

.resultados__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;

  padding: 0;

  color: var(--cor-cafe);
  background-color: var(--cor-marfim);

  border: 1px solid var(--cor-linho);
  border-radius: 50%;

  cursor: pointer;

  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    transform 180ms ease-out;
}

.resultados__seta svg {
  width: 1.25rem;
  height: 1.25rem;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==================================================
   FOCO
   ================================================== */

.resultados__lista:focus-visible,
.resultados__seta:focus-visible {
  outline: 3px solid var(--cor-cacau);
  outline-offset: 4px;
}


/* ==================================================
   HOVER
   ================================================== */

@media (hover: hover) and (pointer: fine) {

  .resultado-card:hover img {
    transform: scale(1.025);
  }

  .resultados__seta:hover {
    background-color: var(--cor-areia);
    border-color: var(--cor-argila);
  }

}


/* ==================================================
   ANIMAÇÃO DE ENTRADA

   IMPORTANTE:
   tudo permanece visível por padrão.
   ================================================== */

.resultado-card {
  --resultado-atraso: 0ms;

  opacity: 1;
  transform: none;
}


/*
  Só escondemos os cards depois que o JavaScript
  confirma que a animação está funcionando.
*/

.resultados.resultados--animacoes-prontas
.resultado-card {
  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity 500ms ease-out
      var(--resultado-atraso),

    transform 500ms ease-out
      var(--resultado-atraso);
}


/*
  Estado final.
*/

.resultados.resultados--animacoes-prontas
.resultado-card.esta-visivel {
  opacity: 1;

  transform: translateY(0);
}


/* ==================================================
   EFEITO CASCATA

   Os quatro primeiros entram progressivamente.
   O padrão se repete nos seguintes.
   ================================================== */

.resultado-card:nth-child(4n + 1) {
  --resultado-atraso: 0ms;
}

.resultado-card:nth-child(4n + 2) {
  --resultado-atraso: 90ms;
}

.resultado-card:nth-child(4n + 3) {
  --resultado-atraso: 180ms;
}

.resultado-card:nth-child(4n + 4) {
  --resultado-atraso: 270ms;
}


/* ==================================================
   TABLET
   ================================================== */

@media (min-width: 40rem) {

  .resultados__container {
    width: min(
      calc(100% - 4rem),
      72rem
    );
  }


  /*
    Duas imagens completas.
  */

  .resultado-card {
    flex-basis:
      calc((100% - 1rem) / 2);
  }

}


/* ==================================================
   DESKTOP
   ================================================== */

@media (min-width: 64rem) {

  .resultados {
    padding-block: 5rem;
  }


  .resultados__container {
    width: min(
      calc(100% - 6rem),
      72rem
    );
  }


  .resultados__cabecalho {
    margin-bottom: 2.5rem;
  }


  /*
    Quatro resultados exatamente por vez.

    100% da largura
    - três gaps de 1rem
    dividido por quatro.
  */

  .resultado-card {
    flex-basis:
      calc((100% - 3rem) / 4);
  }


  .resultados__navegacao {
    margin-top: 1.5rem;
  }

}


/* ==================================================
   MOVIMENTO REDUZIDO
   ================================================== */

@media (prefers-reduced-motion: reduce) {

  .resultados__lista {
    scroll-behavior: auto;
  }


  .resultados.resultados--animacoes-prontas
  .resultado-card,
  .resultado-card img,
  .resultados__seta {
    opacity: 1;
    transform: none;
    transition: none;
  }

}