/* ===== Fonts (self-hosted, latin subset) ===== */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===== Tokens ===== */
:root {
  --paper: #F6F4EF;
  --ink: #121210;
  --ink-70: rgba(18,18,16,.72);
  --ink-45: rgba(18,18,16,.62);
  --line: rgba(18,18,16,.22);
  --line-strong: #121210;
  --accent: #A1281B;
  --accent-ink: #F6F4EF;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-4xl: clamp(2.5rem, 9vw, 4.5rem);
  --text-monument: clamp(5.5rem, 28vw, 13rem);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 6rem;

  --radius: 0px;
  --max-width: 760px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 56px; /* room for the fixed mobile call-bar */
}
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }

h1, h2, h3 { font-weight: 900; text-wrap: balance; }
h2[id], #topo { scroll-margin-top: 88px; }

/* ===== Skip link ===== */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75em 1.25em;
  z-index: 100;
}
.skip-link:focus {
  left: var(--space-sm);
  top: var(--space-sm);
}

/* ===== Focus states ===== */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== Masthead header ===== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line-strong);
}
.masthead__row {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem var(--space-sm);
}
.masthead__mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 900;
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
}
.masthead__mark svg { color: var(--ink); flex-shrink: 0; }

/* Header call buttons: hidden on mobile (the fixed call-bar covers mobile),
   shown from 700px where the header row has room for both numbers. */
.masthead__calls {
  display: none;
  gap: 0.6rem;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1rem;
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn--call {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--call:hover { background: #841f15; border-color: #841f15; }
.btn:hover { background: #2a2a26; }

/* ===== Fixed mobile call bar ===== */
.call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-strong);
  background: var(--accent);
}
.call-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  min-height: 56px;
  padding: 0.4em 0.5em;
  color: var(--accent-ink);
}
.call-bar a:first-child { border-right: 1px solid rgba(246,244,239,.35); }
.call-bar__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.call-bar__number {
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ===== Layout wrapper ===== */
section, .site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-sm);
}

/* ===== Hero ===== */
.hero {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-md);
}
.kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-45);
  margin-bottom: var(--space-sm);
}
.hero__title {
  font-size: var(--text-4xl);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.hero__lead {
  font-size: var(--text-lg);
  line-height: 1.5;
  max-width: 42ch;
  color: var(--ink-70);
  margin-bottom: var(--space-md);
}
.hero__aside { margin-top: var(--space-md); }
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}
.hero__tags li {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.6em 0.9em 0.6em 0;
  border-bottom: 1px solid var(--line-strong);
  flex-grow: 1;
}
.hero__tags li:not(:last-child) {
  border-right: 1px solid var(--line);
  padding-right: 0.9em;
}

/* ===== In-page contents nav ===== */
.toc {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}
.toc__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-45);
  margin-bottom: 0.6em;
}
.toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5em;
}
.toc__list a {
  font-size: var(--text-sm);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.1em;
  display: inline-block;
}
.toc__list a:hover { color: var(--accent); border-color: var(--accent); }

/* ===== Since 1990 ===== */
.since {
  border-top: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.since__number {
  font-size: var(--text-monument);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.since__text h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-xs);
}
.since__text p {
  color: var(--ink-70);
  max-width: 48ch;
  font-size: var(--text-base);
}

/* ===== Services index ===== */
.index-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  border-bottom: 2px solid var(--line-strong);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
}
.index-section__head h2 { font-size: var(--text-3xl); }
.index-section__count {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.index-group + .index-group { margin-top: var(--space-lg); }

.index-cat {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-xs);
}
.index-cat__mark {
  width: 0.5em;
  height: 0.5em;
  background: var(--accent);
  flex-shrink: 0;
}

.index-list {
  border-top: 1px solid var(--line-strong);
}
.index-list li {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  column-gap: var(--space-sm);
  align-items: baseline;
  padding: 0.65em 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
.idx {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-45);
  font-size: var(--text-sm);
}
.idx-name {
  font-size: var(--text-base);
  font-weight: 600;
}
.idx-note {
  grid-column: 2 / 3;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-70);
  margin-top: 0.3em;
  max-width: 48ch;
}

/* ===== Dia da Noiva feature ===== */
.feature__frame {
  border: 2px solid var(--line-strong);
  padding: var(--space-md) var(--space-sm);
}
.feature__frame h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-xs);
}
.feature__frame p {
  color: var(--ink-70);
  max-width: 48ch;
}

/* ===== Placeholder photo frame ===== */
.placeholder-section { padding-top: 0; }
.placeholder-frame {
  position: relative;
  border: 1px dashed var(--line-strong);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-45);
}
.placeholder-frame__marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ink-45);
}
.placeholder-frame p {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 1.5em;
}
.placeholder-frame p span {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0.4em;
  font-size: var(--text-xs);
}

/* ===== Hours ===== */
.hours h2 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
.hours__list { border-top: 1px solid var(--line-strong); margin-bottom: var(--space-md); }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.85em 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-lg);
  font-weight: 600;
}
.hours__row dd { font-variant-numeric: tabular-nums; color: var(--ink-70); font-weight: 400; }
.hours__address {
  font-size: var(--text-base);
  color: var(--ink-70);
  margin-bottom: var(--space-xs);
}
.link-maps {
  display: inline-block;
  font-weight: 600;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.1em;
}

/* ===== Contact ===== */
.contact h2 { font-size: var(--text-3xl); margin-bottom: var(--space-xs); }
.contact__note { color: var(--ink-45); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.contact__phones {
  border-top: 1px solid var(--line-strong);
  margin-bottom: var(--space-md);
}
.contact__phone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding: 1em 0;
  border-bottom: 1px solid var(--line);
  min-height: 48px;
}
.contact__phone-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-45);
}
.contact__phone-number {
  font-size: var(--text-2xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.contact__instagram {
  display: inline-block;
  font-weight: 600;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.1em;
}

/* ===== FAQ ===== */
.faq h2 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item:first-of-type { border-top: 1px solid var(--line-strong); }
.faq__item summary {
  cursor: pointer;
  padding: 1em 0;
  font-weight: 600;
  font-size: var(--text-lg);
  min-height: 48px;
  display: flex;
  align-items: center;
}
.faq__item summary::marker { color: var(--accent); }
.faq__item p {
  padding-bottom: 1.2em;
  color: var(--ink-70);
  max-width: 55ch;
}

/* ===== Footer ===== */
.site-footer {
  border-top: 2px solid var(--line-strong);
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
}
.site-footer__brand { font-weight: 600; margin-bottom: 0.4em; }
.site-footer__meta { color: var(--ink-70); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.site-footer__credit { color: var(--ink-45); font-size: var(--text-xs); }

/* ===== Responsive ===== */
@media (min-width: 700px) {
  :root { --max-width: 880px; }
  body { padding-bottom: 0; }
  .call-bar { display: none; }
  .masthead__row { padding: 1rem var(--space-md); }
  .masthead__calls { display: flex; }
  section, .site-footer { padding-left: var(--space-md); padding-right: var(--space-md); }
  .since { flex-direction: row; align-items: center; gap: var(--space-xl); }
  .since__number { flex-shrink: 0; }
  .hero__tags li { flex-grow: 0; }
  .index-list li { grid-template-columns: 3em 1fr; }
}

@media (min-width: 1000px) {
  :root { --max-width: 1180px; }

  .hero {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    column-gap: var(--space-xl);
    align-items: start;
  }
  .hero__aside {
    margin-top: 0;
    border-left: 1px solid var(--line-strong);
    padding-left: var(--space-lg);
  }
  .hero__tags { display: block; border-top: 1px solid var(--line-strong); }
  .hero__tags li {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
    padding: 0.6em 0;
  }

  .index-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-xl);
    grid-template-areas:
      "cabelo cabelo"
      "maquiagem corpo"
      "sobrancelhas corpo";
  }
  .index-group--cabelo { grid-area: cabelo; }
  .index-group--maquiagem { grid-area: maquiagem; }
  .index-group--sobrancelhas { grid-area: sobrancelhas; }
  .index-group--corpo { grid-area: corpo; }

  .index-list--split {
    columns: 2;
    column-gap: var(--space-xl);
  }
  .index-list--split li { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}