/*
 * Aura Laser — depilação a laser.
 *
 * Azul-noite e prata, Newsreader (serifa de notícia, sóbria) e Public Sans.
 * Depilação a laser vende segurança e previsibilidade, não aconchego: por isso
 * a grade é rígida, os números são tabulares e não há curva em lugar nenhum.
 *
 * Assinatura: a tabela de áreas — quantas sessões, quanto tempo, quanto custa,
 * tudo antes de a pessoa precisar perguntar.
 */

:root {
  --paper: #0f1722;
  --paper-2: #16202e;
  --paper-3: #1f2c3d;
  --ink: #eaf0f6;
  --ink-soft: #b6c3d1;
  --muted: #7f8fa1;
  --accent: #6ea8c9;
  --accent-soft: #9cc7de;
  --line: rgb(234 240 246 / 0.16);

  --scrim: rgb(234 240 246 / 0.96);
  --scrim-mid: rgb(234 240 246 / 0.8);
  --scrim-top: rgb(234 240 246 / 0.78);
  --scrim-flat: rgb(6 12 20 / 0.72);
  --on-media: #eaf0f6;
  --hero-paper: #eaf0f6;
  --hero-ink: #0f1722;
  --hero-ink-soft: #2f4052;
  --hero-accent: #285f7e;

  --display: "Newsreader", Georgia, serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 300;
  --display-leading: 1.08;
  --display-tracking: -0.014em;
  --wordmark-tracking: 0.22em;
  --radius: 0px;
  --btn-radius: 0px;

  --footer-bg: #0a111a;
  --footer-ink: rgb(234 240 246 / 0.62);
  --footer-strong: #eaf0f6;
}

.btn--solid {
  background: var(--accent);
  color: #0f1722;
}

.btn--solid:hover {
  background: var(--accent-soft);
}

.btn--light {
  background: var(--ink);
  color: #0f1722;
}

.hero__title em {
  font-style: italic;
  color: var(--hero-accent);
}

.hero__media img {
  filter: saturate(0.55) brightness(0.82) contrast(1.06);
}

.quotes {
  background: var(--paper-3);
}

.service:hover {
  background: var(--paper-2);
}

.sticky-cta {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}

/* Números tabulares em todo lugar: é um site que fala em sessões e medidas. */
.fact__n,
.areas td {
  font-variant-numeric: tabular-nums;
}

/* ─── assinatura: tabela de áreas ────────────────────────────────────────── */

/*
 * A pergunta real de quem procura laser é "quantas sessões e quanto custa na
 * minha área". Responder isso numa tabela aberta é mais honesto — e vende mais
 * — do que esconder atrás de "consulte valores".
 */
.areas-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.areas {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: start;
}

.areas caption {
  padding: var(--space-m);
  text-align: start;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-block-end: 1px solid var(--line);
}

.areas th,
.areas td {
  padding: 0.95rem var(--space-m);
  border-block-end: 1px solid var(--line);
  vertical-align: baseline;
}

.areas thead th {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: start;
}

.areas tbody th {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--step-1);
  text-align: start;
  white-space: nowrap;
}

.areas tbody tr:last-child th,
.areas tbody tr:last-child td {
  border-block-end: 0;
}

.areas tbody tr {
  transition: background-color 0.4s var(--ease-out);
}

.areas tbody tr:hover {
  background: var(--paper-2);
}

.areas .num {
  text-align: end;
  white-space: nowrap;
}

.areas .price {
  text-align: end;
  white-space: nowrap;
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--accent-soft);
}

/* ─── grade de segurança ─────────────────────────────────────────────────── */

.safety {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.safety > div {
  padding: var(--space-m);
  background: var(--paper);
}

.safety h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.2;
}

.safety p {
  margin-block-start: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

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

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