/*
 * kit.css — os componentes que todo exemplo usa, escritos só em cima de tokens.
 *
 * Nenhuma cor, fonte ou raio literal mora aqui: tudo vem das variáveis que o
 * site.css de cada nicho define. É o que permite oito marcas diferentes sem
 * oito implementações de botão — e, ao mesmo tempo, impede que elas se pareçam,
 * porque paleta, tipografia, hero e a seção-assinatura continuam sendo de cada
 * uma.
 *
 * Tokens esperados do site:
 *   --paper --paper-2 --paper-3 --ink --ink-soft --muted --accent --accent-soft
 *   --line --display --body --radius
 */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
}

/* ─── átomos tipográficos ────────────────────────────────────────────────── */

.display {
  font-family: var(--display);
  font-weight: var(--display-weight, 400);
  line-height: var(--display-leading, 1.05);
  letter-spacing: var(--display-tracking, -0.02em);
  text-wrap: balance;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 1.9rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

/* Variante centrada: filete dos dois lados. Usada nos layouts editoriais. */
.eyebrow--center {
  justify-content: center;
}

.eyebrow--center::after {
  content: "";
  width: 1.9rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink-soft);
}

/* ─── botões e links ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 2rem;
  border-radius: var(--btn-radius, 999px);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color 0.4s var(--ease-out),
    color 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--solid {
  background: var(--ink);
  color: var(--paper);
}

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

.btn--light {
  background: var(--paper);
  color: var(--ink);
}

.btn--light:hover {
  background: #fff;
}

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/*
 * Variante WhatsApp: verde claro, sempre com tinta escura por cima. É o único
 * botão que sai da paleta do nicho de propósito — o agendamento é a ação que
 * precisa saltar em qualquer um dos oito sites.
 */
.btn--wa {
  background: var(--wa, #5cc27f);
  color: var(--wa-ink, #0a2b17);
}

.btn--wa:hover {
  background: var(--wa-hover, #74d194);
  color: var(--wa-ink, #0a2b17);
}

.link {
  display: inline-block;
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  padding-block-end: 0.25rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s var(--ease-out);
}

.link:hover {
  background-size: 100% 1px;
}

/* ─── hero full-bleed ────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: var(--hero-min, 100svh);
  display: grid;
  align-items: end;
  isolation: isolate;
  overflow: hidden;
  color: var(--hero-ink, var(--ink));
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, center 38%);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--scrim) 0%, var(--scrim-mid) 50%, transparent 82%),
    linear-gradient(to bottom, var(--scrim-top) 0%, transparent 28%);
}

.hero__inner {
  padding-block: var(--space-2xl) clamp(3.5rem, 2rem + 7vw, 6rem);
}

.hero .eyebrow {
  color: var(--hero-accent, var(--accent));
}

.hero__title {
  margin-block-start: var(--space-m);
  font-size: var(--step-6);
  max-width: 16ch;
  text-shadow: none;
}

.hero__sub {
  margin-block-start: var(--space-m);
  max-width: 44ch;
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.9;
  color: var(--hero-ink-soft, var(--hero-ink, var(--ink)));
  text-shadow: none;
}

.hero .eyebrow {
  text-shadow: none;
}

.hero .hero__title em {
  color: var(--hero-accent, var(--accent));
}

.hero__actions {
  margin-block-start: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.hero__actions .btn--ghost {
  border-color: color-mix(in srgb, var(--hero-ink, var(--ink)) 38%, transparent);
  color: var(--hero-ink, var(--ink));
}

.hero__actions .btn--ghost:hover {
  background: var(--hero-ink, var(--ink));
  color: var(--hero-paper, var(--paper));
  border-color: var(--hero-ink, var(--ink));
}

/* ─── header ─────────────────────────────────────────────────────────────── */

.header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10;
  padding-block: var(--space-m);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.wordmark {
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: var(--wordmark-tracking, 0.3em);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hero-ink, var(--ink));
}

.wordmark span {
  display: block;
  margin-block-start: 0.15rem;
  font-family: var(--body);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  opacity: 0.68;
}

.nav {
  display: none;
  gap: clamp(1.2rem, 2.2vw, 2.4rem);
}

.nav a {
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hero-ink, var(--ink));
  opacity: 0.82;
  transition: opacity 0.3s var(--ease-out);
}

.nav a:hover {
  opacity: 1;
}

.header .btn {
  display: none;
  padding: 0.8rem 1.5rem;
}

@media (min-width: 900px) {
  .nav,
  .header .btn {
    display: inline-flex;
  }
}

/* ─── faixa de números ───────────────────────────────────────────────────── */

.facts {
  border-block-end: 1px solid var(--line);
  background: var(--paper-2);
}

/*
 * Faixa alternada: aplicada a uma ou duas seções de texto por página para dar
 * ritmo de cor. Usa o tom já existente da paleta, não introduz cor nova.
 */
.section--tint {
  background: var(--paper-2);
  box-shadow:
    inset 0 1px 0 var(--line),
    inset 0 -1px 0 var(--line);
}

.section--tint + .section--tint {
  background: var(--paper);
}

.facts__grid {
  display: grid;
  gap: var(--space-m);
  padding-block: var(--space-l);
}

.fact__n {
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.02em;
}

.fact__label {
  margin-block-start: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 720px) {
  .facts__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-l);
  }

  .fact + .fact {
    padding-inline-start: var(--space-l);
    border-inline-start: 1px solid var(--line);
  }
}

/* ─── cabeçalho de seção ─────────────────────────────────────────────────── */

.section__head {
  display: grid;
  gap: var(--space-m);
  margin-block-end: var(--space-xl);
}

.section__title {
  font-size: var(--step-4);
  max-width: 18ch;
}

@media (min-width: 900px) {
  .section__head {
    grid-template-columns: 1.1fr 1fr;
    align-items: end;
    gap: var(--space-xl);
  }
}

/* ─── serviços: sumário de revista ───────────────────────────────────────── */

.service {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-l);
  border-block-start: 1px solid var(--line);
  align-items: start;
}

.service__index {
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.service__name {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.service__text {
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 46ch;
}

.service__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
}

.service__price {
  font-family: var(--display);
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}

.service__time {
  font-size: 0.82rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.service__thumb {
  border-radius: var(--radius, 2px);
  overflow: hidden;
  order: -1;
}

.service__thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

@media (min-width: 900px) {
  .service {
    grid-template-columns: 4rem 1fr 15rem 12rem;
    gap: var(--space-l);
    align-items: center;
    padding-block: var(--space-m);
    transition: background-color 0.5s var(--ease-out);
  }

  .service:hover {
    background: color-mix(in srgb, var(--paper-2) 60%, transparent);
  }

  .service__thumb {
    order: 0;
  }

  .service__thumb img {
    aspect-ratio: 3 / 2;
  }

  .service:hover .service__thumb img {
    transform: scale(1.04);
  }
}

/* ─── split editorial ────────────────────────────────────────────────────── */

.split {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.split__media {
  position: relative;
}

.split__media img {
  width: 100%;
  border-radius: var(--radius, 2px);
}

.split__media::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: var(--space-m);
  inset-inline-start: calc(-1 * var(--space-m));
  width: 60%;
  height: 70%;
  background: var(--paper-3);
}

.split__body {
  --flow: var(--space-m);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .split--reverse .split__media {
    order: 2;
  }

  .split--reverse .split__media::after {
    inset-inline: auto calc(-1 * var(--space-m));
  }
}

.signature {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--accent);
  line-height: 1.1;
}

.signature span {
  display: block;
  margin-block-start: 0.55rem;
  font-family: var(--body);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── galeria assimétrica ────────────────────────────────────────────────── */

.gallery {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(2, 1fr);
}

.gallery figure {
  overflow: hidden;
  border-radius: var(--radius, 2px);
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.gallery figure:hover img {
  transform: scale(1.05);
}

.gallery__tall {
  grid-row: span 2;
}

/* As faixas somam 12 colunas por linha, então a grade fecha sem buraco. */
@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-m);
    grid-auto-rows: 11rem;
  }

  .gallery__a {
    grid-column: span 7;
    grid-row: span 2;
  }

  .gallery__b {
    grid-column: span 5;
    grid-row: span 4;
  }

  .gallery__c {
    grid-column: span 4;
    grid-row: span 2;
  }

  .gallery__d {
    grid-column: span 3;
    grid-row: span 2;
  }
}

/* ─── depoimentos ────────────────────────────────────────────────────────── */

.quotes {
  background: var(--paper-3);
  box-shadow:
    inset 0 1px 0 var(--line),
    inset 0 -1px 0 var(--line);
}

.quotes__track {
  display: grid;
  gap: var(--space-xl);
}

.quote {
  --flow: var(--space-m);
}

.quote__text {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.quote__text::before {
  content: "“";
  color: var(--accent-soft);
}

.quote__who {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 900px) {
  .quotes__track {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
  }
}

/* ─── visita ─────────────────────────────────────────────────────────────── */

.visit {
  display: grid;
  gap: var(--space-xl);
}

.hours {
  border-block-start: 1px solid var(--line);
}

.hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--line);
}

.hours dt {
  color: var(--ink-soft);
}

.hours dd {
  font-variant-numeric: tabular-nums;
}

.address {
  font-style: normal;
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .visit {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

/* ─── faq ────────────────────────────────────────────────────────────────── */

.faq details {
  border-block-end: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-inline-end: 1px solid var(--accent);
  border-block-end: 1px solid var(--accent);
  transform: rotate(45deg) translate(-0.15rem, -0.15rem);
  transition: transform 0.4s var(--ease-out);
}

.faq details[open] summary::after {
  transform: rotate(225deg) translate(-0.2rem, -0.2rem);
}

.faq p {
  padding-block-end: var(--space-m);
  max-width: 62ch;
  color: var(--ink-soft);
  font-weight: 300;
}

/* ─── chamada final ──────────────────────────────────────────────────────── */

.closing {
  position: relative;
  isolation: isolate;
  color: var(--on-media, #fff);
  text-align: center;
  overflow: hidden;
}

.closing img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-flat);
}

.closing__inner {
  padding-block: var(--space-3xl);
  display: grid;
  justify-items: center;
  gap: var(--space-m);
}

.closing__title {
  font-size: var(--step-5);
  max-width: 17ch;
}

.closing p {
  max-width: 46ch;
  font-weight: 300;
  opacity: 0.86;
}

/* ─── rodapé ─────────────────────────────────────────────────────────────── */

.footer {
  background: var(--footer-bg, var(--ink));
  color: var(--footer-ink, rgb(255 255 255 / 0.72));
  font-size: 0.88rem;
  padding-block-end: calc(var(--space-xl) + 4.5rem);
}

.footer__grid {
  display: grid;
  gap: var(--space-l);
  padding-block-start: var(--space-2xl);
}

.footer .wordmark {
  color: var(--footer-strong, #fff);
}

.footer .address {
  font-size: 0.9rem;
  color: inherit;
}

.footer a {
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}

.footer a:hover {
  color: var(--footer-strong, #fff);
}

.footer__blurb {
  margin-block-start: var(--space-s);
  max-width: 34ch;
  font-weight: 300;
  color: inherit;
}

.footer__col-title {
  margin-block-end: var(--space-s);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--footer-strong, #fff);
  opacity: 0.75;
}

.footer__links {
  display: grid;
  gap: 0.55rem;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.3rem;
}

.footer__social a {
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer__contact {
  display: grid;
  gap: 0.55rem;
}

.footer__legal {
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid rgb(255 255 255 / 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--space-m);
  justify-content: space-between;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
    gap: var(--space-xl);
  }

  .footer {
    padding-block-end: var(--space-xl);
  }
}

/* ─── CTA persistente ────────────────────────────────────────────────────── */

.sticky-cta {
  position: fixed;
  z-index: 40;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--line);
}

.sticky-cta .btn {
  width: 100%;
}

@media (min-width: 900px) {
  .sticky-cta {
    inset: auto var(--gutter) var(--gutter) auto;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: 0;
  }

  .sticky-cta .btn {
    width: auto;
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.26);
  }
}