/* ==========================================================================
   NO CAPRICHO — vitrine mobile-first
   ========================================================================== */

:root {
  --creme-100: #FDF7E9;
  --creme-200: #F7E9C9;
  --creme-300: #EEDCB4;
  --creme-borda: #E0CCA4;

  --vermelho: #B0161C;
  --vermelho-escuro: #7C0E13;
  --vermelho-claro: #D8262D;

  --preto: #171514;
  --grafite: #3A3230;
  --cinza: #6B605C;

  --zap: #1FA855;
  --zap-escuro: #17803F;

  --sombra-sm: 0 2px 8px rgba(23, 21, 20, .10);
  --sombra-md: 0 10px 28px rgba(23, 21, 20, .14);
  --sombra-btn: 0 6px 0 var(--vermelho-escuro);
  --sombra-btn-zap: 0 6px 0 var(--zap-escuro);

  --raio: 16px;
  --raio-lg: 24px;

  --shell: 34rem;
  --gutter: 1.25rem;
  --barra-h: 4.75rem;

  --display: 'Anton', 'Arial Black', system-ui, sans-serif;
  --texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--preto);
  background: var(--creme-100);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom));
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--vermelho); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .95;
  text-transform: uppercase;
  margin: 0;
}

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

:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.pular {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  background: var(--preto); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 10px 10px;
  text-decoration: none; z-index: 100;
}
.pular:focus { transform: translate(-50%, 0); }

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec { padding-block: 2.75rem; }

.sec__titulo {
  font-size: clamp(1.6rem, 7.5vw, 2.1rem);
  text-align: center;
}

.sec__linha {
  width: 68px; height: 5px; margin: .85rem auto 0;
  border-radius: 99px;
  background: var(--vermelho);
}

.sec__apoio {
  margin-top: .85rem;
  text-align: center;
  color: var(--cinza);
}

.hero {
  position: relative;
  isolation: isolate;
  background: var(--creme-200);
  padding: 1.6rem 0 2.25rem;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--vermelho), var(--vermelho-claro), var(--vermelho));
}

.marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin-inline: auto;
}

.marca__topo {
  display: flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
}

.marca__chapeu { width: clamp(52px, 15vw, 72px); flex: none; }

.marca__no,
.marca__capricho {
  font-family: var(--display);
  line-height: .88;
  display: block;
}

.marca__no {
  font-size: clamp(2.1rem, 10.5vw, 3rem);
  color: var(--vermelho);
  letter-spacing: -.01em;
}

.marca__capricho {
  font-size: clamp(2.6rem, 13.5vw, 3.9rem);
  color: var(--preto);
  letter-spacing: -.02em;
  margin-top: -.04em;
}

.marca__base {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  margin-top: .2rem;
}

.marca__risco { flex: 1; height: 12px; }
.marca__coracao { width: clamp(24px, 7vw, 34px); flex: none; }

.tagline {
  margin-top: 1rem;
  text-align: center;
  font-weight: 600;
  font-size: clamp(.95rem, 4.1vw, 1.1rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grafite);
}
.tagline strong { display: block; color: var(--vermelho); font-weight: 700; }

.status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: fit-content;
  margin: 1.15rem auto 0;
  padding: .42rem .95rem;
  border-radius: 99px;
  background: #fff;
  border: 1px solid var(--creme-borda);
  box-shadow: var(--sombra-sm);
  font-size: .88rem;
  font-weight: 600;
  color: var(--grafite);
}

.status__ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cinza); flex: none;
}

.status[data-aberto="sim"] .status__ponto {
  background: var(--zap);
  box-shadow: 0 0 0 0 rgba(31, 168, 85, .55);
  animation: pulso 2s ease-out infinite;
}

.status[data-aberto="nao"] .status__ponto { background: var(--vermelho); }

@keyframes pulso {
  70%  { box-shadow: 0 0 0 9px rgba(31, 168, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 168, 85, 0); }
}

/* só aparece com a loja fechada: lembra que dá para agendar assim mesmo */
.agendamento {
  margin: .6rem auto 0;
  max-width: 22rem;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  color: var(--vermelho);
}

.hero__ctas {
  display: grid;
  gap: .7rem;
  margin-top: 1.35rem;
}

.btn {
  --btn-bg: var(--vermelho);
  --btn-sombra: var(--sombra-btn);
  --btn-sombra-ativa: 0 2px 0 var(--vermelho-escuro);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.5rem;
  padding: .9rem 1.1rem;
  border: 0;
  border-radius: 14px;
  background: var(--btn-bg);
  box-shadow: var(--btn-sombra);
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.02rem, 4.4vw, 1.18rem);
  letter-spacing: .035em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn:hover { filter: brightness(1.06); }

.btn:active {
  transform: translateY(4px);
  box-shadow: var(--btn-sombra-ativa);
}

.btn svg { width: 1.35em; height: 1.35em; flex: none; }

.btn--zap {
  --btn-bg: var(--zap);
  --btn-sombra: var(--sombra-btn-zap);
  --btn-sombra-ativa: 0 2px 0 var(--zap-escuro);
}

.selos {
  display: grid;
  gap: .55rem;
  margin-top: 1.5rem;
}

.selo {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .9rem;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--creme-borda);
  border-radius: 12px;
}

.selo__icone {
  width: 2.35rem; height: 2.35rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vermelho);
  color: #fff;
}
.selo__icone svg { width: 1.25rem; height: 1.25rem; }

.selo__texto {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.selo__texto span {
  display: block;
  margin-top: .12rem;
  font-weight: 400;
  font-size: .88rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cinza);
}

.cupom {
  position: relative;
  margin-top: 1.5rem;
  padding: 1.5rem 1.35rem 1.35rem;
  background: #fff;
  border: 2px dashed var(--creme-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
  text-align: center;
}

.cupom__selo {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: 99px;
  background: var(--vermelho);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cupom__titulo {
  margin-top: .9rem;
  font-family: var(--display);
  font-size: clamp(1.45rem, 6.6vw, 1.85rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--preto);
}

/* a linha tracejada, com os recortes laterais que dão cara de ticket */
.cupom__divisor {
  position: relative;
  margin: 1.15rem -1.35rem;
  border: 0;
  border-top: 2px dashed var(--creme-borda);
  overflow: visible;
}

.cupom__divisor::before,
.cupom__divisor::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24px; height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--creme-100);
  border: 2px dashed var(--creme-borda);
}

/* cada círculo fica centrado na borda do cupom: só a metade de dentro aparece */
.cupom__divisor::before { left: -13px; clip-path: inset(0 0 0 50%); }
.cupom__divisor::after  { right: -13px; clip-path: inset(0 50% 0 0); }

.cupom__label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cinza);
}

.cupom__codigo {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  margin-top: .6rem;
}

.cupom__valor {
  flex: 1;
  display: grid;
  place-items: center;
  padding: .75rem .5rem;
  border: 2px solid var(--preto);
  border-radius: 12px;
  background: var(--creme-200);
  font-family: var(--display);
  font-size: clamp(1.3rem, 6.4vw, 1.6rem);
  letter-spacing: .08em;
  color: var(--preto);
  word-break: break-all;
}

.copiar {
  flex: none;
  width: 3.6rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--preto);
  border-radius: 12px;
  background: var(--preto);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.copiar svg { width: 1.3rem; height: 1.3rem; }
.copiar[data-copiado="sim"] { background: var(--zap); border-color: var(--zap); }

.cupom__feedback {
  margin-top: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--zap-escuro);
}
.cupom__feedback:empty { display: none; }

.cupom__regra {
  margin-top: .9rem;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--cinza);
}

.cupom__cta { margin-top: 1.1rem; }

.cupom__aviso {
  margin-top: .8rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--vermelho);
}

.cupom--vazio .cupom__titulo { font-size: 1.25rem; }
.cupom--vazio .cupom__aviso { display: none; }

.sec--garantia {
  position: relative;
  overflow: hidden;
  background: var(--vermelho);
  color: var(--creme-200);
  text-align: center;
}

.sec--garantia::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .14), transparent 62%);
  pointer-events: none;
}

.garantia__relogio { width: 3.4rem; margin: 0 auto 1rem; color: var(--creme-200); }

.garantia__titulo {
  font-size: clamp(2.1rem, 11vw, 3rem);
  line-height: .92;
  color: #fff;
}
.garantia__titulo span { display: block; color: var(--creme-300); }

.garantia__texto {
  margin-top: 1rem;
  line-height: 1.5;
  color: rgba(253, 247, 233, .92);
}

.passos {
  display: grid;
  gap: .8rem;
  margin-top: 1.6rem;
  counter-reset: passo;
}

.passo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--creme-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
}

.passo::before {
  counter-increment: passo;
  content: counter(passo);
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--creme-200);
  color: var(--vermelho);
  font-family: var(--display);
  font-size: 1.3rem;
}

.passo h3 { font-size: 1.12rem; }
.passo p { margin-top: .3rem; font-size: .95rem; color: var(--cinza); }

.sec--horarios { background: var(--creme-200); }

.horarios {
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid var(--creme-borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}

.horario {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .8rem 1.05rem;
  border-bottom: 1px solid var(--creme-200);
  font-size: .96rem;
}
.horario:last-child { border-bottom: 0; }

.horario__dia { white-space: nowrap; }
.horario__valor { font-weight: 600; color: var(--grafite); text-align: right; }
.horario--fechado .horario__valor { color: var(--cinza); font-weight: 400; }

.horario--hoje {
  background: var(--creme-100);
  box-shadow: inset 4px 0 0 var(--vermelho);
}
.horario--hoje .horario__dia { font-weight: 700; }

.horario--hoje .horario__dia::after {
  content: 'hoje';
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .45rem;
  border-radius: 99px;
  background: var(--vermelho);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}

.horarios__nota {
  margin-top: 1.1rem;
  text-align: center;
  font-weight: 600;
  color: var(--grafite);
}
.horarios__nota:empty { display: none; }

.horarios__cta { margin-top: 1rem; }

.rodape {
  background: var(--preto);
  color: var(--creme-200);
  padding: 2.5rem 0 2rem;
  text-align: center;
}

.rodape .marca__no { color: var(--vermelho-claro); }
.rodape .marca__capricho { color: #fff; }

.rodape__contatos {
  display: grid;
  gap: .6rem;
  margin-top: 1.6rem;
}

.contato {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.1rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(253, 247, 233, .25);
  border-radius: 12px;
  color: var(--creme-200);
  font-weight: 600;
  text-decoration: none;
}
.contato:hover { background: rgba(253, 247, 233, .08); }
.contato svg { width: 1.25rem; height: 1.25rem; flex: none; }

.rodape__area {
  margin-top: 1.5rem;
  font-size: .9rem;
  color: rgba(253, 247, 233, .7);
}

.rodape__creditos {
  margin-top: 1.1rem;
  font-size: .8rem;
  color: rgba(253, 247, 233, .45);
}

.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(253, 247, 233, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--creme-borda);
  box-shadow: 0 -6px 20px rgba(23, 21, 20, .10);
}

.barra__interna {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .55rem;
}

.barra .btn { min-height: 3.35rem; box-shadow: 0 4px 0 var(--vermelho-escuro); }

.barra .btn--zap {
  width: 3.9rem;
  padding: 0;
  box-shadow: 0 4px 0 var(--zap-escuro);
}
.barra .btn--zap svg { width: 1.6rem; height: 1.6rem; }

/* O estado escondido só existe quando o JavaScript está rodando: sem ele,
   nada some da página — e o cupom é a última coisa que pode sumir. */
.js .revela {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.js .revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .revela { opacity: 1; transform: none; }
}

@media (min-width: 46rem) {
  :root {
    --gutter: 2rem;
    --shell: 46rem;
  }

  .hero { padding-block: 3rem 3.25rem; }
  .sec { padding-block: 4rem; }

  .hero__ctas { grid-template-columns: 1fr 1fr; }
  .selos { grid-template-columns: repeat(3, 1fr); }
  .selo { flex-direction: column; text-align: center; gap: .55rem; padding: 1.1rem .8rem; }
  .passos { grid-template-columns: repeat(3, 1fr); }
  .rodape__contatos { grid-auto-flow: column; justify-content: center; }
  .contato { padding-inline: 1.4rem; }
}