:root {
  --laranja: #c2410c;
  --laranja-escuro: #9a3412;
  --laranja-claro: #f0915a;
  --escuro: #1f1612;
  --escuro-2: #2c201a;
  --creme: #f8f1ea;
  --areia: #ecdccf;
  --texto: #2a1d17;
  --texto-suave: #5c4a40;
  --creme-suave: #d9c8bb;

  --fonte-titulo: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --fonte-texto: "Work Sans", system-ui, sans-serif;

  --t-0: 1rem;      /* 16 */
  --t-1: 1.125rem;  /* 18 */
  --t-2: 1.5rem;    /* 24 */
  --t-3: 2.25rem;   /* 36 */
  --t-4: clamp(2.75rem, 11vw, 5.5rem);

  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-6: 48px;
  --e-8: 64px;
  --e-12: 96px;

  --raio: 8px;
  --largura: 1080px;
}

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

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

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-0);
  line-height: 1.6;
  color: var(--texto);
  background: var(--creme);
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 4px;
}
.topo :focus-visible,
.abertura :focus-visible,
.rodape :focus-visible { outline-color: var(--laranja-claro); }

.largura {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--e-3);
}

.pular {
  position: absolute;
  left: var(--e-2);
  top: -100px;
  background: var(--creme);
  color: var(--texto);
  padding: var(--e-1) var(--e-2);
  z-index: 10;
}
.pular:focus { top: var(--e-2); }

/* Botão principal — sempre igual */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--e-2) var(--e-4);
  background: var(--laranja);
  color: #fff;
  font-weight: 600;
  font-size: var(--t-1);
  text-decoration: none;
  border-radius: var(--raio);
  box-shadow: 0 4px 0 var(--laranja-escuro);
  transition: transform .15s, box-shadow .15s;
}
.botao:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--laranja-escuro); }
.botao:active { transform: translateY(4px); box-shadow: none; }

.botao--pequeno {
  min-height: 44px;
  padding: var(--e-1) var(--e-2);
  font-size: var(--t-0);
}

/* Topo */
.topo {
  background: var(--escuro);
  color: var(--creme);
  border-bottom: 1px solid var(--escuro-2);
}
.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  min-height: 72px;
}
.marca {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  text-decoration: none;
  min-height: 44px;
}
.marca__selo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--laranja-claro);
  color: var(--laranja-claro);
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: var(--t-2);
  flex-shrink: 0;
}
.marca__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-2);
  line-height: 1;
}

@media (max-width: 420px) {
  .marca__nome { display: none; }
}

/* Abertura */
.abertura {
  background: var(--escuro);
  color: var(--creme);
  padding: var(--e-8) 0 var(--e-12);
}
.abertura__lugar {
  color: var(--laranja-claro);
  font-weight: 500;
  font-size: var(--t-1);
  margin-bottom: var(--e-2);
}
.abertura__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: var(--t-4);
  max-width: 12ch;
  margin-bottom: var(--e-3);
}
.abertura__texto {
  font-size: var(--t-1);
  color: var(--creme-suave);
  max-width: 34ch;
  margin-bottom: var(--e-4);
}

/* Faixa listrada */
.listras {
  height: 24px;
  background: repeating-linear-gradient(
    -45deg,
    var(--laranja) 0 16px,
    var(--creme) 16px 32px,
    var(--escuro) 32px 48px,
    var(--creme) 48px 64px
  );
}

/* Títulos de seção */
.titulo-secao {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: var(--t-3);
  margin-bottom: var(--e-3);
}

/* Serviços */
.servicos { padding: var(--e-8) 0; }
.lista-servicos {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--texto);
}
.lista-servicos li {
  display: flex;
  gap: var(--e-3);
  align-items: baseline;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--areia);
}
.lista-servicos__num {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-2);
  color: var(--laranja);
  min-width: 2ch;
}
.lista-servicos h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  margin-bottom: var(--e-1);
}
.lista-servicos p { color: var(--texto-suave); }

/* Agenda */
.agenda {
  background: var(--areia);
  padding: var(--e-8) 0;
}
.agenda__grade {
  display: grid;
  gap: var(--e-4);
}
.agenda__texto { font-size: var(--t-1); max-width: 40ch; }

.dias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  align-content: start;
}
.dia {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 56px;
  height: 56px;
  border-radius: var(--raio);
  background: var(--escuro);
  color: var(--creme);
  font-weight: 600;
  font-size: var(--t-0);
}
.dia--fechado {
  background: transparent;
  color: var(--texto-suave);
  border: 1px dashed var(--texto-suave);
}
.dias__legenda {
  width: 100%;
  margin-top: var(--e-1);
  font-weight: 500;
}

/* Espera */
.espera { padding: var(--e-8) 0; }
.espera__grade {
  display: grid;
  gap: var(--e-4);
  align-items: center;
}
.espera p { font-size: var(--t-1); max-width: 42ch; color: var(--texto-suave); }

.espera__desenho {
  position: relative;
  height: 160px;
  max-width: 280px;
  background: #2f5a43;
  border: 12px solid #5b3a26;
  border-radius: var(--raio);
}
.bola {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.2);
}
.bola--1 { background: var(--laranja); left: 22%; top: 28%; }
.bola--2 { background: var(--creme); left: 55%; top: 50%; }
.bola--3 { background: var(--escuro); left: 70%; top: 14%; }

/* Chamada final */
.chamada {
  background: var(--laranja);
  color: #fff;
  padding: var(--e-8) 0;
  text-align: center;
}
.chamada__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  margin-bottom: var(--e-2);
}
.chamada p { font-size: var(--t-1); margin: 0 auto var(--e-4); max-width: 36ch; }
.chamada .botao {
  background: var(--escuro);
  box-shadow: 0 4px 0 #000;
}
.chamada .botao:hover { box-shadow: 0 2px 0 #000; }
.chamada :focus-visible { outline-color: #fff; }

/* Rodapé */
.rodape {
  background: var(--escuro);
  color: var(--creme-suave);
  padding: var(--e-6) 0;
}
.rodape strong { color: var(--creme); }
.rodape__linha {
  display: grid;
  gap: var(--e-3);
}
.rodape a {
  color: var(--laranja-claro);
  display: inline-block;
  padding: var(--e-1) 0;
}

@media (min-width: 760px) {
  .abertura { padding: var(--e-12) 0; }
  .agenda__grade { grid-template-columns: 1fr 1fr; align-items: center; }
  .espera__grade { grid-template-columns: 280px 1fr; gap: var(--e-8); }
  .rodape__linha { grid-template-columns: 1fr 1fr; }
}

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