/* ============================================================================
   INSTITUTO ROCCA — site final · /o-instituto/ (só o que é desta página)
   ----------------------------------------------------------------------------
   Lê brand/tokens.css, shared/base.css e site/site.css. Aqui entra apenas o
   que a página "O instituto" acrescenta: o hero sobre a foto da recepção, os
   rótulos duplos do mosaico, a lista do percurso, os tiles de vídeo e o bloco
   "Onde fica". Mobile-first; breakpoints 640 / 900 / 1200 / 1440; sem
   border-radius. URLs em CSS resolveriam a partir daqui: ../../assets/…
   ============================================================================ */

/* ---- Hero: a recepção em tela cheia, em cores naturais; o degradê da base (tinta quente, não bordô — o cliente pediu a imagem sem vermelho) só para o texto ---- */
.casa-hero h1 { max-width: 22ch; }
.casa-hero .hero__fundo::after {
  background: linear-gradient(to top, rgba(42, 26, 22, .84) 0%, rgba(42, 26, 22, .58) 30%, rgba(42, 26, 22, .24) 54%, rgba(42, 26, 22, .05) 76%, rgba(42, 26, 22, 0) 92%);
}
/* véu leve no topo: a nav transparente fica sobre o teto e a luminária, a parte mais clara do render
   (o botão creme "Agendar avaliação" sumia dentro da luminária: 1,08:1 → 3,1:1) */
.casa-hero .hero__fundo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none;
  height: clamp(140px, 24vh, 240px);
  background: linear-gradient(to bottom, rgba(42, 26, 22, .5) 0%, rgba(42, 26, 22, .26) 55%, rgba(42, 26, 22, 0) 100%);
}
/* sobre a parede clara da foto o areia some: o rótulo vai em creme, com a sombra leve do sistema */
.casa-hero .eyebrow { color: var(--cor-creme); opacity: .88; text-shadow: 0 1px 12px rgba(42, 26, 22, .5); }
.casa-hero .hero__sub { margin-top: 1.6rem; max-width: 40ch; }
.casa-hero .hero__nota { margin-top: .9rem; font-size: 1rem; line-height: 1.6; max-width: 44ch; color: var(--cor-creme-60); }
.casa-hero .pendente { color: var(--cor-creme-60); }
@media (max-width: 639.98px) {
  /* "E um médico que fica." cabe numa linha só de 390 px para cima */
  .casa-hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
}

/* ---- 01 · Mosaico: rótulo em caixa alta + sub-rótulo em caixa baixa ---- */
/* as fotos são claras (e o croqui da bioimpedância, quase branco): base mais escura e mais alta que a do sistema */
.casa-mosaico .mosaico__item::after { height: 60%; background: linear-gradient(to top, rgba(42, 26, 22, .84), rgba(42, 26, 22, .48) 45%, transparent); }
.casa-mosaico .mosaico__legenda { right: 14px; }
.casa-mosaico .mosaico__texto { display: grid; gap: .3rem; }
.casa-mosaico .mosaico__sub {
  font-size: .8125rem; font-weight: 300; line-height: 1.4; letter-spacing: .01em; text-transform: none;
  color: var(--cor-creme); opacity: .92; max-width: 30ch;
}
@media (max-width: 639.98px) {
  /* no celular, uma peça por linha: legenda com duas linhas precisa de largura */
  .casa-mosaico .mosaico { grid-template-columns: minmax(0, 1fr); }
  .casa-mosaico .mosaico__item--a, .casa-mosaico .mosaico__item--d { grid-column: auto; }
}
@media (min-width: 900px) {
  .casa-mosaico .mosaico__legenda { right: 18px; }
  .casa-mosaico .mosaico__sub { font-size: .9rem; }
}

/* ---- 02 · O percurso: lista numerada, texto à esquerda e a foto do espaço à direita ---- */
.percurso { list-style: none; margin: 0; padding: 0; counter-reset: passo; border-top: 1px solid var(--linha); }
.percurso__passo {
  counter-increment: passo;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem var(--coluna-gap);
  padding: clamp(1.8rem, 3.2vw, 2.8rem) 0 clamp(1.8rem, 3.2vw, 2.8rem) 3.2rem;
  border-bottom: 1px solid var(--linha);
}
.percurso__passo::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute; left: 0; top: calc(clamp(1.8rem, 3.2vw, 2.8rem) + .45em);
  font-size: .875rem; font-weight: 400; letter-spacing: .2em; line-height: 1;
  color: var(--cor-madeira);
  font-variant-numeric: tabular-nums;
}
.percurso__titulo { font-size: var(--h3); font-weight: 300; line-height: 1.25; }
.percurso__texto { margin-top: .7rem; color: var(--fg-2); max-width: 44ch; }
.percurso__foto { margin: 0; width: 100%; max-width: 480px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cor-bordo-profundo); }
.percurso__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-imagem) var(--ease-out); }
.percurso__passo:hover .percurso__foto img { transform: scale(1.04); }
@media (min-width: 640px) {
  .percurso__passo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .percurso__foto { justify-self: end; }
}
@media (min-width: 900px) {
  .percurso__passo { grid-template-columns: 5rem minmax(0, 6fr) minmax(0, 4fr); padding-left: 0; }
  .percurso__passo::before { position: static; padding-top: .5em; }
}

/* ---- 03 · A casa, por dentro: três tiles de vídeo 16:9 ---- */
.casa-videos .tile__media { aspect-ratio: 16 / 9; }
.casa-videos .tile__sub .pendente { color: var(--fg-2); }
/* sob o vídeo de cada médico, o link "Conheça o médico →" */
.casa-videos .tile__corpo > .botao { margin-top: calc(1.1rem - 12px); }   /* os 12 px descontam a área de toque do .botao--secundario (site.css) */
@media (min-width: 900px) { .casa-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- 04 · Onde fica: dados à esquerda, mapa (placeholder em osso) à direita ---- */
.casa-onde .grid-12 { align-items: center; row-gap: var(--espaco-5); }
.casa-onde__dados { margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; gap: 1.2rem; }
.casa-onde__dados > div { padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.casa-onde__dados dt { margin-bottom: .45rem; }
.casa-onde__dados dd { margin: 0; max-width: 40ch; line-height: 1.7; }
.casa-onde .acoes { margin-top: 2.4rem; }
.casa-onde__mapa .mapa { width: 100%; }