/* ==========================================================================
   Home — só o que é específico desta página (o resto vem de base.css)
   ========================================================================== */

/* ---------- 2. Topo ---------- */
.capa { padding: 24px 0 64px; }
.capa__grade { display: grid; gap: 24px; align-items: center; }
/* no celular o título é menor para a foto do Estúdio AB caber na primeira tela */
.capa h1 { font-size: clamp(48px, 13vw, 128px); }
.capa__texto .sobretitulo { display: block; margin-top: 22px; }
/* margem maior embaixo de "Aluguel de" para o acento do Ú não tocar a linha */
.capa h1 .capa__pre { display: block; font-size: .44em; line-height: 1; margin-bottom: .12em; }
.capa h1 .capa__linha { display: block; }
.capa__sub { margin-top: 14px; max-width: 30ch; font-size: 17px; color: var(--texto-suave); }
.capa__texto .grupo-botoes { margin-top: 20px; }
.capa__foto { margin: 0 12px 12px 0; }
.capa__foto img { width: 100%; aspect-ratio: 1672 / 941; object-fit: cover; }
.capa__legenda {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; /* abaixo da cantoneira */
  font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-suave);
}
.capa__legenda span:first-child { flex: 1; display: flex; align-items: center; gap: 14px; }
.capa__legenda span:first-child::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

.nota-google {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linha);
  font-size: 13px;
}
.nota-google__estrela { font-size: 18px; line-height: 1; }
.nota-google strong { font-weight: 600; letter-spacing: .02em; }
.nota-google__total { color: var(--texto-suave); }
.nota-google a { margin-left: 4px; color: var(--texto-suave); text-underline-offset: 3px; }
.nota-google a:hover { color: var(--preto); }

@media (min-width: 768px) {
  .capa { padding-top: 40px; }
  .capa__sub { margin-top: 22px; }
  .capa__texto .grupo-botoes { margin-top: 32px; }
  .nota-google { margin-top: 22px; padding-top: 18px; font-size: 14px; }
  .capa__legenda { margin-top: 30px; }
}
@media (min-width: 1024px) {
  .capa { padding: 72px 0 104px; }
  .capa__grade { grid-template-columns: 4fr 6fr; gap: 72px; }
  .capa__foto { margin: 0; }
}

/* ---------- 3. Faixa de confiança ---------- */
.confianca { border-top: 1px solid var(--preto); border-bottom: 1px solid var(--preto); }
.confianca ul { display: grid; grid-template-columns: repeat(2, 1fr); }
.confianca li {
  padding: 22px 12px; text-align: center;
  font-family: var(--f-titulo); font-size: 23px; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase;
}
.confianca li:nth-child(odd) { border-right: 1px solid var(--linha); }
.confianca li:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
@media (min-width: 768px) {
  .confianca ul { grid-template-columns: repeat(4, 1fr); }
  .confianca li { padding: 30px 16px; font-size: 28px; border-bottom: 0 !important; }
  .confianca li:not(:last-child) { border-right: 1px solid var(--linha); }
}

/* ---------- 4. Unidades ---------- */
.unidades__grade { display: grid; gap: 64px; }
.unidade .card__corpo { padding-top: 28px; }
.unidade__estudios { font-weight: 600; }
.unidade__endereco { display: flex; align-items: center; gap: 8px; color: var(--texto-suave); font-size: 15px; }
.unidade__endereco svg { width: 18px; height: 18px; flex: none; }
.nota-unidade { font-size: 14px; font-weight: 600; }
.nota-unidade a { font-weight: 500; color: var(--texto-suave); text-underline-offset: 3px; }
.nota-unidade a:hover { color: var(--preto); }
.unidade .botao { align-self: flex-start; margin-top: 10px; }
@media (min-width: 768px) { .unidades__grade { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* ---------- 5. Como reservar ---------- */
.passos { display: grid; gap: 0; counter-reset: passo; }
.passo {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: start; align-content: start;
  padding: 28px 0; border-top: 1px solid var(--linha);
}
.passo:last-child { border-bottom: 1px solid var(--linha); }
.passo .icone { grid-row: span 2; }
.passo__num { font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--texto-suave); }
.passo h3 { font-family: var(--f-texto); font-size: 18px; font-weight: 600; line-height: 1.35; }
.passo p { grid-column: 2; color: var(--texto-suave); font-size: 15px; }
.reservar__acao { margin-top: 48px; text-align: center; }
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
  .passo { grid-template-columns: 1fr; padding: 40px 36px; border: 0; }
  .passo:last-child { border-bottom: 0; }
  .passo + .passo { border-left: 1px solid var(--linha); }
  .passo .icone { grid-row: auto; margin-bottom: 18px; }
  .passo p { grid-column: auto; }
}

/* ---------- 6. Incluso ---------- */
.incluso__grade { display: grid; gap: 48px; align-items: center; }
.incluso__foto { margin: 0 12px 12px 0; }
.incluso__foto img { width: 100%; aspect-ratio: 898 / 700; object-fit: cover; }
.incluso .titulo { margin-bottom: 28px; }
.incluso .miudo { margin-top: 18px; }
.incluso .link-seta { margin-top: 28px; }
@media (min-width: 900px) {
  .incluso__grade { grid-template-columns: 1fr 1fr; gap: 80px; }
  .incluso__foto { margin: 0; }
}

/* ---------- 7. Avaliações ---------- */
.avaliacoes__grade { display: grid; gap: 16px; }
.avaliacao {
  display: flex; flex-direction: column; gap: 16px; margin: 0;
  padding: 28px 24px; background: var(--branco); border: 1px solid var(--linha);
}
.avaliacao__estrelas { font-size: 15px; letter-spacing: .2em; }
.avaliacao__texto { margin: 0; flex: 1; font-size: 15px; line-height: 1.6; }
.avaliacao__texto p::before { content: "“"; }
.avaliacao__texto p::after { content: "”"; }
.avaliacao__autor { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 14px; }
.avaliacao__autor span { font-size: 12px; color: var(--texto-suave); }
.avaliacoes__acao { margin-top: 40px; text-align: center; }
@media (min-width: 768px) { .avaliacoes__grade { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1200px) { .avaliacoes__grade { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 8. Trabalhos de clientes ---------- */
.trabalhos__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 8px; align-items: start; }
.trabalho { margin: 0; }
.trabalho > a { display: block; }
.trabalho img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--papel); }
.trabalho figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.trabalho figcaption span { display: block; font-weight: 500; color: var(--texto-suave); }
.trabalho--mais {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  aspect-ratio: 4 / 5; text-align: center; text-decoration: none;
  background: var(--preto); color: var(--branco);
}
.trabalho--mais .sobretitulo { font-size: 10px; color: #b9b9b9; }
.trabalhos__acao { margin-top: 40px; text-align: center; }
@media (min-width: 768px) {
  .trabalhos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
}

/* ---------- 9. Apresentação em PDF ---------- */
.apresentacao__caixa { display: grid; gap: 28px; align-items: center; padding: 40px 28px; text-align: center; justify-items: center; }
.apresentacao__caixa p { max-width: 46ch; }
@media (max-width: 479px) { .apresentacao__caixa .botao { width: 100%; } }
@media (min-width: 900px) {
  .apresentacao__caixa { grid-template-columns: 1fr auto; padding: 56px 64px; text-align: left; justify-items: start; }
}