@layer reset, tokens, base, layout, componentes, utilitarios;

/* ============================================================
   FONTES
   ============================================================ */

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("../fonts/nunitosans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   RESET
   ============================================================ */

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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

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

  /* Precisa vir depois de svg{display:block}, senão o sprite oculto ocupa espaço. */
  [hidden] {
    display: none !important;
  }

  img {
    height: auto;
  }

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

  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  p,
  li {
    text-wrap: pretty;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }
}

/* ============================================================
   TOKENS  —  specs/design.md §2 a §9
   ============================================================ */

@layer tokens {
  :root {
    /* Marca */
    --verde-900: #0c3d31;
    --verde-700: #14634d;
    --verde-100: #e3f0ea;
    --vermelho-600: #e63329;
    --vermelho-800: #c42a21;
    /* Vermelho para texto sobre âmbar. O -800 dá só 3,6:1 sobre #FFC53D. */
    --vermelho-900: #a32017;
    --vermelho-100: #fde7e5;

    /* Cartaz */
    --ambar-500: #ffc53d;
    --ambar-100: #fff4d9;

    /* Neutros */
    --branco: #ffffff;
    --areia-50: #f7f4ed;
    --cinza-100: #f1f3f2;
    --cinza-200: #e1e7e3;
    --cinza-400: #9aa8a1;
    --tinta-600: #4a5a52;
    --tinta-900: #16241e;

    /* Semânticas */
    --sucesso: #0f7a43;
    --atencao: #8a5a00;
    --erro: #b3261e;

    /* Tipografia */
    --fonte-titulo: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fonte-corpo: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --txt-display: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
    --txt-h1: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
    --txt-h2: clamp(1.625rem, 1.4rem + 1.1vw, 2.125rem);
    --txt-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --txt-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --txt-corpo: 1.125rem;
    --txt-corpo-p: 1rem;
    --txt-rotulo: 0.9375rem;
    --txt-botao: 1.0625rem;
    --txt-destaque: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);

    /* Espaçamento */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 24px;
    --esp-6: 32px;
    --esp-7: 48px;
    --esp-8: 64px;
    --esp-9: 96px;
    --esp-10: 128px;

    /* Layout */
    --container-max: 1200px;
    --gutter: 20px;
    --grade-gap: var(--esp-6);
    --medida-texto: 65ch;
    --secao-y: var(--esp-8);

    /* Bordas */
    --raio-sm: 8px;
    --raio-md: 16px;
    --raio-lg: 24px;
    --raio-pill: 999px;
    --borda: 1px solid var(--cinza-200);

    /* Sombras — sempre esverdeadas, nunca preto puro */
    --sombra-sm: 0 1px 2px rgba(7, 48, 31, 0.06);
    --sombra-md: 0 8px 24px rgba(7, 48, 31, 0.08);
    --sombra-lg: 0 16px 40px rgba(7, 48, 31, 0.1);

    /* Movimento */
    --dur-rapida: 150ms;
    --dur-padrao: 220ms;
    --dur-lenta: 320ms;
    --curva: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Alturas fixas */
    --h-cabecalho: 64px;
  }

  @media (min-width: 900px) {
    :root {
      --gutter: 32px;
      --secao-y: var(--esp-9);
      --h-cabecalho: 80px;
    }
  }
}

/* ============================================================
   BASE
   ============================================================ */

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--h-cabecalho) + var(--esp-4));
  }

  body {
    background: var(--branco);
    color: var(--tinta-900);
    font-family: var(--fonte-corpo);
    font-size: var(--txt-corpo);
    line-height: 1.65;
  }

  h1,
  h2,
  h3 {
    font-family: var(--fonte-titulo);
    color: var(--verde-700);
  }

  h1 {
    font-size: var(--txt-h1);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
  }

  h2 {
    font-size: var(--txt-h2);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  h3 {
    font-size: var(--txt-h3);
    font-weight: 600;
    line-height: 1.3;
  }

  a {
    color: var(--verde-700);
    text-underline-offset: 3px;
  }

  a:hover {
    color: var(--verde-900);
    text-decoration-thickness: 2px;
  }

  /* Anel de foco: branco por dentro, tinta por fora.
     Funciona sobre branco, verde, vermelho e âmbar. */
  :focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--branco), 0 0 0 5px var(--tinta-900);
    border-radius: var(--raio-sm);
  }

  time,
  .tel {
    font-variant-numeric: tabular-nums;
  }

  ::selection {
    background: var(--ambar-500);
    color: var(--tinta-900);
  }
}

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

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .secao {
    padding-block: var(--secao-y);
  }

  .secao--areia {
    background: var(--areia-50);
  }

  .secao--final {
    background: var(--areia-50);
    text-align: center;
  }

  .secao__cabecalho {
    margin-block-end: var(--esp-7);
    max-width: var(--medida-texto);
  }

  .secao__cabecalho--centro {
    margin-inline: auto;
    text-align: center;
  }

  .secao__lead {
    font-size: var(--txt-lead);
    color: var(--tinta-600);
    margin-block-start: var(--esp-3);
  }

  .grade {
    display: grid;
    gap: var(--grade-gap);
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  @media (min-width: 600px) {
    .grade--2,
    .grade--3,
    .grade--4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 900px) {
    .grade--3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .grade--4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .prosa {
    max-width: var(--medida-texto);
  }

  .prosa > * + * {
    margin-block-start: var(--esp-5);
  }
}

/* ============================================================
   COMPONENTES
   ============================================================ */

@layer componentes {
  /* ---------- Pular para o conteúdo ---------- */

  .pular {
    position: absolute;
    left: var(--esp-4);
    top: var(--esp-4);
    z-index: 100;
    transform: translateY(-200%);
    background: var(--verde-700);
    color: var(--branco);
    padding: var(--esp-3) var(--esp-5);
    border-radius: var(--raio-pill);
    font-weight: 700;
    text-decoration: none;
  }

  .pular:focus {
    transform: translateY(0);
    color: var(--branco);
  }

  /* ---------- Barra de utilidade ---------- */

  .barra-utilidade {
    background: var(--verde-900);
    color: var(--branco);
    font-size: var(--txt-corpo-p);
  }

  .barra-utilidade__interior {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2) var(--esp-5);
    align-items: center;
    justify-content: center;
    padding-block: var(--esp-2);
    text-align: center;
  }

  @media (min-width: 900px) {
    .barra-utilidade__interior {
      justify-content: space-between;
      text-align: start;
    }
  }

  .barra-utilidade a {
    color: var(--branco);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: 44px;
  }

  .barra-utilidade .icone {
    color: var(--ambar-500);
  }

  /* ---------- Indicador de horário ---------- */

  .horario {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2) var(--esp-3);
  }

  .horario__estado {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    font-weight: 700;
  }

  .horario__estado .icone {
    color: currentColor;
  }

  /* Aberta e fechada nunca se distinguem só pela cor:
     o ícone e a palavra mudam junto. */
  .horario__estado--aberta {
    color: #7ee2a8;
  }

  .horario__estado--fechada {
    color: #ffb4ae;
  }

  .horario__fixo {
    color: var(--verde-100);
  }

  /* ---------- Cabeçalho ---------- */

  .cabecalho {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--branco);
    border-block-end: var(--borda);
    transition: box-shadow var(--dur-padrao) var(--curva);
  }

  .cabecalho--rolado {
    box-shadow: var(--sombra-md);
  }

  .cabecalho__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    min-height: var(--h-cabecalho);
  }

  /* ---------- Logo ---------- */

  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-3);
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
  }

  .logo__cruz {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--vermelho-600);
  }

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

  .logo__linha1 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--verde-700);
  }

  .logo__linha2 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: var(--verde-700);
    margin-block-start: 2px;
  }

  .logo__cifrao {
    color: var(--vermelho-800);
  }

  .logo__bairro {
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-600);
    margin-block-start: 3px;
  }

  @media (min-width: 900px) {
    .logo__cruz {
      width: 40px;
      height: 40px;
    }
    .logo__linha2 {
      font-size: 1.25rem;
    }
  }

  /* Versão para fundo escuro */
  .logo--claro .logo__linha1,
  .logo--claro .logo__linha2 {
    color: var(--branco);
  }

  .logo--claro .logo__cifrao {
    color: var(--ambar-500);
  }

  .logo--claro .logo__bairro {
    color: var(--verde-100);
  }

  .logo--claro .logo__cruz {
    color: var(--branco);
  }

  /* ---------- Navegação ---------- */

  .nav {
    display: none;
  }

  @media (min-width: 900px) {
    .nav {
      display: flex;
      align-items: center;
      gap: var(--esp-5);
    }

    .nav a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 44px;
      text-decoration: none;
      font-weight: 700;
      font-size: var(--txt-corpo-p);
      padding-inline: var(--esp-1);
      border-block-end: 2px solid transparent;
    }

    .nav a:hover,
    .nav a[aria-current="page"] {
      border-block-end-color: var(--vermelho-600);
    }
  }

  .cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
  }

  .cabecalho .botao--whatsapp {
    display: none;
  }

  @media (min-width: 900px) {
    .cabecalho .botao--whatsapp {
      display: inline-flex;
    }
  }

  /* ---------- Botão do menu ---------- */

  .menu-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: none;
    border: 2px solid var(--cinza-200);
    border-radius: var(--raio-sm);
    color: var(--verde-700);
    cursor: pointer;
  }

  @media (min-width: 900px) {
    .menu-botao {
      display: none;
    }
  }

  /* ---------- Menu off-canvas ---------- */

  .menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    visibility: hidden;
    /* Clipa o painel fechado, que fica deslocado para fora da viewport.
       Sem isto ele cria rolagem horizontal a 320px. */
    overflow: hidden;
  }

  .menu[data-aberto="true"] {
    visibility: visible;
  }

  .menu__fundo {
    position: absolute;
    inset: 0;
    background: rgba(12, 61, 49, 0.55);
    opacity: 0;
    transition: opacity var(--dur-padrao) var(--curva);
  }

  .menu[data-aberto="true"] .menu__fundo {
    opacity: 1;
  }

  .menu__painel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(340px, 88vw);
    background: var(--branco);
    box-shadow: var(--sombra-lg);
    padding: var(--esp-5) var(--esp-5) var(--esp-8);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur-padrao) var(--curva);
  }

  .menu[data-aberto="true"] .menu__painel {
    transform: translateX(0);
  }

  .menu__topo {
    display: flex;
    justify-content: flex-end;
    margin-block-end: var(--esp-5);
  }

  .menu__fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: none;
    border: 2px solid var(--cinza-200);
    border-radius: var(--raio-sm);
    color: var(--verde-700);
    cursor: pointer;
  }

  .menu__lista li + li {
    border-block-start: var(--borda);
  }

  .menu__lista a {
    display: flex;
    align-items: center;
    min-height: 56px;
    font-weight: 700;
    text-decoration: none;
  }

  .menu__lista a[aria-current="page"] {
    color: var(--vermelho-800);
  }

  .menu__rodape {
    margin-block-start: var(--esp-6);
    display: grid;
    gap: var(--esp-3);
  }

  /* ---------- Botões ---------- */

  .botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    min-height: 48px;
    padding: var(--esp-4) var(--esp-6);
    border: 2px solid transparent;
    border-radius: var(--raio-pill);
    font-family: var(--fonte-corpo);
    font-size: var(--txt-botao);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-rapida) var(--curva),
      transform var(--dur-rapida) var(--curva),
      box-shadow var(--dur-rapida) var(--curva);
  }

  .botao .icone {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .botao--grande {
    min-height: 56px;
    padding-inline: var(--esp-7);
  }

  .botao--primario {
    background: var(--verde-700);
    color: var(--branco);
  }

  .botao--secundario {
    border-color: var(--verde-700);
    color: var(--verde-700);
    background: transparent;
  }

  .botao--whatsapp {
    background: var(--sucesso);
    color: var(--branco);
  }

  .botao--fantasma {
    color: var(--verde-700);
    padding-inline: 0;
    min-height: 44px;
    text-decoration: underline;
    text-decoration-color: transparent;
  }

  @media (hover: hover) {
    .botao--primario:hover {
      background: var(--verde-900);
      color: var(--branco);
      transform: translateY(-1px);
      box-shadow: var(--sombra-md);
    }
    .botao--secundario:hover {
      background: var(--verde-100);
      color: var(--verde-900);
    }
    .botao--whatsapp:hover {
      background: #0c6837;
      color: var(--branco);
      transform: translateY(-1px);
    }
    .botao--fantasma:hover {
      text-decoration-color: currentColor;
      text-decoration-thickness: 2px;
    }
  }

  .acoes {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    margin-block-start: var(--esp-6);
  }

  .acoes--centro {
    align-items: center;
  }

  @media (min-width: 600px) {
    .acoes {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .acoes--centro {
      justify-content: center;
    }
  }

  /* ---------- Botão flutuante ---------- */

  .flutuante {
    position: fixed;
    inset-block-end: var(--esp-4);
    inset-inline-end: var(--esp-4);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--sucesso);
    color: var(--branco);
    box-shadow: var(--sombra-lg);
    transition: transform var(--dur-rapida) var(--curva),
      opacity var(--dur-padrao) var(--curva);
  }

  .flutuante .icone {
    width: 30px;
    height: 30px;
  }

  .flutuante[data-oculto="true"] {
    opacity: 0;
    pointer-events: none;
  }

  @media (hover: hover) {
    .flutuante:hover {
      transform: scale(1.05);
      color: var(--branco);
    }
  }

  @media (min-width: 900px) {
    .flutuante {
      width: 56px;
      height: 56px;
      inset-block-end: var(--esp-5);
      inset-inline-end: var(--esp-5);
    }
  }

  /* ---------- Selo de cartaz ---------- */

  .selo {
    display: inline-block;
    background: var(--ambar-500);
    color: var(--tinta-900);
    font-family: var(--fonte-corpo);
    font-size: var(--txt-rotulo);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--esp-2) var(--esp-4);
    border-radius: var(--raio-sm);
    rotate: -2deg;
  }

  .selo strong {
    color: var(--vermelho-900);
  }

  /* ---------- Hero ---------- */

  .hero {
    padding-block: var(--esp-8) var(--secao-y);
  }

  .hero__interior {
    display: grid;
    gap: var(--esp-7);
    align-items: center;
  }

  .hero__conteudo {
    max-width: 560px;
  }

  .hero h1 {
    font-size: var(--txt-display);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-block-start: var(--esp-4);
  }

  .hero__lead {
    font-size: var(--txt-lead);
    color: var(--tinta-600);
    margin-block-start: var(--esp-5);
  }

  .hero__midia {
    border-radius: var(--raio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-md);
  }

  .hero__midia img {
    width: 100%;
    height: auto;
  }

  @media (min-width: 900px) {
    .hero__interior {
      grid-template-columns: 1fr minmax(0, 460px);
      gap: var(--esp-9);
    }
  }

  /* ---------- Cards ---------- */

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border: var(--borda);
    border-radius: var(--raio-md);
    padding: var(--esp-5);
    box-shadow: var(--sombra-sm);
    transition: border-color var(--dur-rapida) var(--curva),
      transform var(--dur-rapida) var(--curva),
      box-shadow var(--dur-rapida) var(--curva);
  }

  @media (min-width: 900px) {
    .card {
      padding: var(--esp-6);
    }
  }

  @media (hover: hover) {
    .card--link:hover {
      border-color: var(--verde-700);
      transform: translateY(-2px);
      box-shadow: var(--sombra-md);
    }
  }

  /* Em servicos.html o título do card é h2 por hierarquia (vem logo após o
     h1 da página), mas visualmente pertence à escala de card. */
  .card h2 {
    font-size: var(--txt-h3);
    line-height: 1.3;
    letter-spacing: 0;
  }

  .card__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--verde-100);
    color: var(--verde-700);
    margin-block-end: var(--esp-4);
    flex-shrink: 0;
  }

  .card__icone .icone {
    width: 28px;
    height: 28px;
  }

  .card__texto {
    color: var(--tinta-600);
    margin-block-start: var(--esp-3);
    flex-grow: 1;
  }

  .card__acao {
    margin-block-start: var(--esp-5);
  }

  /* Link esticado: o card inteiro é clicável, o <a> real fica no título */
  .card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .card__link {
    text-decoration: none;
  }

  /* Vantagem — sem borda, sobre areia */
  .card--vantagem {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  .card--vantagem .card__icone {
    width: 48px;
    height: 48px;
    background: var(--branco);
    margin-block-end: var(--esp-3);
  }

  .card--vantagem .card__icone .icone {
    width: 24px;
    height: 24px;
  }

  /* Categoria — ícone + nome, card inteiro clicável */
  /* justify-content: center distribui a sobra quando um card da linha
     é mais alto que os outros — caso do card com selo. */
  .card--categoria {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: var(--esp-6);
  }

  .card--categoria .card__icone {
    margin-block-end: var(--esp-3);
  }

  .card--categoria .selo {
    margin-block-start: var(--esp-4);
  }

  /* Passo — número grande em vermelho */
  .card--passo {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .card__numero {
    font-family: var(--fonte-titulo);
    font-size: var(--txt-destaque);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--vermelho-600);
    margin-block-end: var(--esp-2);
  }

  /* ---------- Bloco chapado de marca ---------- */

  .bloco-marca {
    background: var(--vermelho-600);
    color: var(--branco);
    border-radius: var(--raio-lg);
    padding: var(--esp-7) var(--esp-5);
    text-align: center;
  }

  @media (min-width: 900px) {
    .bloco-marca {
      padding: var(--esp-8) var(--esp-7);
    }
  }

  .bloco-marca h2 {
    color: var(--branco);
    font-size: var(--txt-destaque);
  }

  .bloco-marca__lead {
    font-size: var(--txt-lead);
    margin-block-start: var(--esp-4);
    margin-inline: auto;
    max-width: 46ch;
  }

  .bloco-marca__fatos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--esp-3) var(--esp-6);
    margin-block-start: var(--esp-6);
    font-weight: 700;
  }

  .bloco-marca__fatos li {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
  }

  .bloco-marca .botao--secundario {
    border-color: var(--branco);
    color: var(--branco);
  }

  @media (hover: hover) {
    .bloco-marca .botao--secundario:hover {
      background: var(--branco);
      color: var(--vermelho-800);
    }
  }

  /* ---------- Faixa de fotos ---------- */

  .faixa-fotos {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: 1fr;
  }

  .faixa-fotos img {
    width: 100%;
    height: auto;
    border-radius: var(--raio-md);
  }

  .faixa-fotos figcaption {
    font-size: var(--txt-corpo-p);
    color: var(--tinta-600);
    margin-block-start: var(--esp-2);
  }

  @media (min-width: 600px) {
    .faixa-fotos {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--esp-5);
    }
  }

  /* ---------- Aviso em âmbar ---------- */

  .aviso {
    background: var(--ambar-100);
    border-inline-start: 4px solid var(--ambar-500);
    border-radius: var(--raio-sm);
    padding: var(--esp-5);
    color: var(--tinta-900);
  }

  .aviso h3 {
    color: var(--tinta-900);
    font-size: var(--txt-h3);
    margin-block-end: var(--esp-2);
  }

  /* ---------- Tabela de horários ---------- */

  .tabela-horario {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    max-width: 460px;
  }

  .tabela-horario th,
  .tabela-horario td {
    text-align: start;
    padding: var(--esp-3) 0;
    border-block-end: var(--borda);
  }

  .tabela-horario th {
    font-weight: 400;
    color: var(--tinta-600);
  }

  .tabela-horario td {
    font-weight: 700;
    text-align: end;
  }

  /* ---------- Lista de contato ---------- */

  .contatos {
    display: grid;
    gap: var(--esp-4);
  }

  .contatos li {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
  }

  .contatos .icone {
    color: var(--verde-700);
    flex-shrink: 0;
  }

  .contatos a {
    font-weight: 700;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ---------- Mapa ---------- */

  .mapa {
    border-radius: var(--raio-lg);
    overflow: hidden;
    border: var(--borda);
    background: var(--cinza-100);
  }

  .mapa iframe {
    width: 100%;
    height: 240px;
    border: 0;
  }

  .mapa__aviso {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--esp-4);
    height: 240px;
    padding: var(--esp-5);
    text-align: center;
    color: var(--tinta-600);
  }

  @media (min-width: 900px) {
    .mapa iframe,
    .mapa__aviso {
      height: 420px;
    }
  }

  .localizacao {
    display: grid;
    gap: var(--esp-7);
  }

  @media (min-width: 900px) {
    .localizacao {
      grid-template-columns: 1fr 1.2fr;
      align-items: start;
      gap: var(--esp-8);
    }
  }

  /* ---------- Rodapé ---------- */

  .rodape {
    background: var(--verde-900);
    color: var(--verde-100);
    padding-block: var(--esp-8) var(--esp-6);
    margin-block-start: var(--esp-8);
  }

  .rodape a {
    color: var(--branco);
  }

  .rodape h2,
  .rodape h3 {
    color: var(--branco);
    font-size: var(--txt-corpo);
    margin-block-end: var(--esp-4);
  }

  .rodape__grade {
    display: grid;
    gap: var(--esp-7);
  }

  @media (min-width: 600px) {
    .rodape__grade {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 900px) {
    .rodape__grade {
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: var(--esp-8);
    }
  }

  .rodape__lista {
    display: grid;
    gap: var(--esp-3);
  }

  .rodape__lista a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: var(--esp-2);
  }

  .rodape address {
    font-style: normal;
    margin-block: var(--esp-4);
  }

  .rodape .horario {
    justify-content: flex-start;
  }

  .rodape__legal {
    margin-block-start: var(--esp-7);
    padding-block-start: var(--esp-5);
    border-block-start: 1px solid rgba(255, 255, 255, 0.18);
    font-size: var(--txt-corpo-p);
    display: grid;
    gap: var(--esp-4);
  }

  .rodape__legal p {
    max-width: 78ch;
  }

  .rodape__rede {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-3);
    opacity: 0.9;
  }

  .rodape__rede img,
  .rodape__rede svg {
    width: 90px;
    height: auto;
  }

  /* ---------- Ícones ---------- */

  .icone {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .icone--cheio {
    fill: currentColor;
    stroke: none;
  }
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */

@layer utilitarios {
  .vis-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .centro {
    text-align: center;
  }

  .sem-margem-topo {
    margin-block-start: 0;
  }

  /* Revelação ao rolar.
     Sem JS o conteúdo já está visível — a classe .js só entra
     depois que o script confirma que pode animar. */
  .js .revelar {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-lenta) var(--curva),
      transform var(--dur-lenta) var(--curva);
  }

  .js .revelar--visivel {
    opacity: 1;
    transform: none;
  }

  body[data-menu-aberto="true"] {
    overflow: hidden;
  }
}

/* ============================================================
   MOVIMENTO REDUZIDO  —  design.md §9
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .revelar {
    opacity: 1;
    transform: none;
  }
}