/*
  Home — CSS agregado das seções 2-9 (seção 1 = componente reutilizável cta-hero.css).
  rules/figma.md — node 112:2136 (desktop) / 300:1083 (mobile).
  Base = desktop (1920, fonte real do Figma). Breakpoints 1515/1366/1025/890/550/390 sem
  frame próprio no Figma (rules/responsive.md seção 2) — interpolados via um bloco tablet
  (max-width: 1024px) e um bloco mobile (max-width: 767px), refinado em 390 quando necessário.
*/

/* ---------------------------------------------------------------------------------------- */
/* Tokens locais da página                                                                    */
/* ---------------------------------------------------------------------------------------- */

#page-home {
  overflow-x: clip;
}

#page-home section {
  padding-block: 96px;
}

#page-home h2 {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.11;
  color: #11161f;
}

#page-home .container {
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------------------------------------------------------------------------------------- */
/* Seção 2 — barra de localização + diferenciais (node 112:2170 / 306:363)                    */
/* ---------------------------------------------------------------------------------------- */

#page-home .home-info-bar {
  background-color: var(--color-navy);
  backdrop-filter: blur(6px);
  padding-block: 16px;
}

.home-info-bar__track {
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 34px;
}

.home-info-bar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.home-info-bar__item img {
  flex-shrink: 0;
}

.home-info-bar__item--location {
  font-size: 14px;
  line-height: 20px;
  gap: 6px;
}

.home-info-bar__item--location span span {
  color: rgba(255, 255, 255, 0.5);
  margin-inline: 4px;
}

.home-info-bar__mobile {
  display: none;
}

/* Marquee mobile — mesma técnica do stats-bar (rules/responsive.md 3.1, estrutura própria).
   Track duplicado 1x (5 itens + 5 itens aria-hidden), largura max-content, translateX(-50%) em
   loop contínuo, sem "salto" visível ao voltar ao início. */
.home-info-bar__marquee {
  overflow: hidden;
}

.home-info-bar__marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 34px;
  animation: home-info-bar-marquee 26s linear infinite;
}

/* Item do marquee — mesmo visual de .home-info-bar__item, mas SEM entrar no scroll-reveal
   (opacity:0 inicial não combina com um ticker que já deve estar girando ao carregar). */
.home-info-bar__marquee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: #ffffff;
  font-family: var(--font-heading);
  /* 20px, não 16 — Figma real confirmado (node 300:1083, "São Paulo"/"Ambientes
     sofisticados..." etc., todos 20px). Deslizou na implementação original (reaproveitei o
     valor mobile de .home-info-bar__item sem reconferir contra o Figma). */
  font-size: 20px;
  line-height: 20px;
  white-space: nowrap;
}

.home-info-bar__marquee-item img {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .home-info-bar__marquee-track {
    animation: none;
  }
}

@keyframes home-info-bar-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .home-info-bar__desktop {
    display: none;
  }

  .home-info-bar__mobile {
    display: block;
  }
}

/* ---------------------------------------------------------------------------------------- */
/* Seção 3 — "O espaço certo para cada grande objetivo" (node 112:2203 / 300:1173+306:364)    */
/* ---------------------------------------------------------------------------------------- */

.rooms-section {
  background-color: #f9f4ee;
}

.rooms-section__header {
  max-width: 700px;
  margin: 0 auto 64px;
  text-align: center;
}

/* Menor que o padrão de 44px de #page-home h2 e com quebra manual em "para" (pedido do
   usuário, 2026-08-24) — não vem do Figma, ajuste direto de layout. */
.rooms-section__header h2 {
  font-size: 32px;
}

.rooms-section__header p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 29px;
  color: #4f5661;
}

.rooms-grid {
  max-width: 1520px;
  margin: 0 auto 40px;
  padding-inline: 24px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.room-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 353 / 470.66;
}

.room-card__link-wrap {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.room-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zoom suave no hover — pedido do usuário (2026-08-21), não vem do Figma
     (rules/core.md: comportamento de interação decidido com o usuário, registrado aqui).
     O .room-card pai já tem overflow:hidden, então o scale fica contido no card. */
  transition: transform 0.5s ease;
  will-change: transform;
}

.room-card__link-wrap:hover .room-card__bg,
.room-card__link-wrap:focus-visible .room-card__bg {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .room-card__bg {
    transition: none;
  }

  .room-card__link-wrap:hover .room-card__bg,
  .room-card__link-wrap:focus-visible .room-card__bg {
    transform: none;
  }
}

.room-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(19, 33, 57, 0.9),
    rgba(19, 33, 57, 0.4) 50%,
    rgba(19, 33, 57, 0)
  );
}

.room-card__content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.room-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
}

.room-card__description {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  color: #ffffff;
}

.room-card__explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-brand-orange);
}

.rooms-section__cta-wrap {
  text-align: center;
}

.rooms-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding-inline: 28px;
  border-radius: 9999px;
  background-color: var(--color-brand-orange);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .rooms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .rooms-grid {
    grid-template-columns: 1fr;
  }

  /* 24px, não 32 — Figma real confirmado em 6 headings de seção mobile (rooms, transform,
     ecosystem, flexible-rental, cities, final-cta: todos 24px/700, node 300:1083). Como
     #page-home h2 é seletor por ID, ele já vence qualquer `.section h2` de classe sozinha
     (especificidade — 1 ID bate 1 classe, não importa quantos "h2" a mais do lado da classe),
     então esse valor único já cai pra todas as seções, sem precisar tocar cada uma. */
  #page-home h2 {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------------------------------------- */
/* Seção 4 — "Transformamos espaços em experiências" (node 112:2253 / 306:343)                */
/* ---------------------------------------------------------------------------------------- */

.transform-section {
  background-color: #ffffff;
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.transform-section__text p {
  margin: 0 0 20px;
  max-width: 460px;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 29.25px;
  color: #4f5661;
}

.transform-section__highlight {
  display: block;
  color: var(--color-brand-orange);
}

.transform-section__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-brand-orange);
  text-decoration: none;
}

.transform-section__media {
  position: relative;
}

.transform-section__media img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 24px;
  aspect-ratio: 835 / 626;
  object-fit: cover;
}

/*
  Quadrado laranja que sobressai no canto da imagem. z-index NEGATIVO some: o pai
  .transform-section tem background-color proprio, e o accent ia parar atras dele. A imagem
  (irma posterior) recebe z-index: 1 e cobre a parte sobreposta; o resto do quadrado aparece.
*/
.transform-section__accent {
  position: absolute;
  left: -32px;
  bottom: -32px;
  width: 96px;
  height: 96px;
  background-color: #ec5a00;
  border-radius: 16px;
}

@media (max-width: 1024px) {
  .transform-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 767px) {
  /* Figma mobile (node 306:343) mostra texto ANTES da imagem — o order:-1 daqui de baixo
     tava invertendo (imagem primeiro), bug real. Sem order nenhum, cai na ordem natural do
     DOM (texto, depois imagem), que já bate com o Figma — não precisa de valor específico. */
  .transform-section__media img {
    border-radius: 10px;
  }

  .transform-section {
    gap: 25px;
    padding-inline: 50px;
  }
}

/* ---------------------------------------------------------------------------------------- */
/* Seção 5 — "Muito mais do que infraestrutura" (node 112:2527 / 306:344 "CARROSSEL MARCAS")  */
/* ---------------------------------------------------------------------------------------- */

.ecosystem-section {
  background-color: #f9f4ee;
}

.ecosystem-section__header {
  max-width: 700px;
  margin: 0 auto 64px;
  text-align: center;
}

.ecosystem-section__header p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 29.25px;
  color: #4f5661;
}

.ecosystem-grid {
  max-width: 1000px;
  margin: 0 auto 40px;
  padding-inline: 24px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ecosystem-card {
  border: 1px solid #000000;
  border-radius: 25px;
  padding: 32px 24px;
  text-align: center;
  /* Sem background: o Figma desenha o card só com borda, sobre o bege da seção
     (pedido do usuário, 2026-08-21). O fundo branco anterior fazia o tile branco da UNE
     Eventos sumir dentro do card. */
  background-color: transparent;
}

.ecosystem-card__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 5px;
  background-size: cover;
  margin-bottom: 16px;
}

/*
  Cada logo/ícone tem proporção intrínseca própria (de 0.79 a 5.08) — com width/height fixos
  em 32x32 no HTML todas eram esticadas pra quadrado (object-fit padrão é `fill`). `contain`
  + max-* preserva a proporção de cada uma dentro do tile de 56px.
*/
.ecosystem-card__tile img {
  width: auto;
  height: auto;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}

.ecosystem-card__title {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #11161f;
}

.ecosystem-card__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  color: #11161f;
}

.ecosystem-card__description {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 20px;
  color: #4f5661;
}

.ecosystem-section__cta {
  text-align: center;
}

.ecosystem-section__link {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #11161f;
  text-decoration: underline;
}

.ecosystem-section__desktop {
  display: block;
}

.ecosystem-section__mobile {
  display: none;
}

/* Cards com a mesma altura no carrossel (pedido do usuário 2026-08-31) — .ecosystem-card
   {height:100%} sozinho não bastava: o .swiper-slide pai do Swiper tem height:auto (do
   próprio swiper-bundle.min.css), então o filho não tinha altura de referência pra resolver
   os 100%. align-items:stretch faz cada slide esticar até a altura do maior do grupo — só
   então o height:100% do card funciona de verdade. */
.ecosystem-swiper.swiper,
.ecosystem-swiper .swiper-wrapper {
  align-items: stretch;
}

.ecosystem-swiper .swiper-slide {
  height: auto;
}

.ecosystem-swiper .ecosystem-card {
  height: 100%;
}

@media (max-width: 1024px) {
  .ecosystem-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
  }
}

@media (max-width: 767px) {
  .ecosystem-section__desktop {
    display: none;
  }

  .ecosystem-section__mobile {
    display: block;
  }

  /* Só padding-left (não inline) — pedido do usuário 2026-08-31, carrossel cola na direita. */
  .ecosystem-swiper-wrap {
    padding-left: 24px;
    padding-right: 0;
  }

  /* Espaço entre o carrossel e o link "Conheça todas as soluções" logo abaixo. */
  .ecosystem-section__cta {
    margin-top: 32px;
  }

  .ecosystem-section__header {
    padding: 0 50px;
  }
}

/* ---------------------------------------------------------------------------------------- */
/* Seção 6 — "Locação que se adapta ao formato do seu evento" (node 129:5831 / 300:1354)      */
/* ---------------------------------------------------------------------------------------- */

.flexible-rental-section {
  background-color: #ffffff;
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.flexible-rental-section__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--color-brand-orange);
}

.flexible-rental-section h2 {
  font-size: 36px;
}

.flexible-rental-section__highlight {
  display: block;
  font-style: italic;
  color: var(--color-brand-orange);
}

.flexible-rental-section__description {
  margin: 0 0 24px;
  max-width: 460px;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 29.25px;
  color: #4f5661;
}

.flexible-rental-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flexible-rental-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #11161f;
}

.flexible-rental-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-brand-orange);
  border-radius: 10px;
  flex-shrink: 0;
}

.flexible-rental-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding-inline: 28px;
  border-radius: 9999px;
  background-color: var(--color-brand-orange);
  box-shadow:
    0px 10px 15px -3px rgba(236, 90, 0, 0.25),
    0px 4px 6px -4px rgba(236, 90, 0, 0.25);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}

.flexible-rental-section__media {
  position: relative;
}

.flexible-rental-section__media img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 24px;
  aspect-ratio: 696 / 522;
  object-fit: cover;
}

/* Mesmo caso do .transform-section__accent acima. */
.flexible-rental-section__accent {
  position: absolute;
  right: -32px;
  bottom: -32px;
  width: 96px;
  height: 96px;
  background-color: #ec5a00;
  border-radius: 16px;
}

@media (max-width: 1024px) {
  .flexible-rental-section {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 767px) {
  /* Mobile (Figma node 300:1354) é BEM diferente do desktop escalado que tava valendo aqui —
     não é o mesmo layout encolhido: texto centralizado, lista de modalidades em grid 2x2 com
     ícone EM CIMA do texto (não do lado), ícone menor, quadrado laranja bem menor e mais
     colado na imagem. rules/responsive.md 3.1 — estrutura própria, não é só CSS de reflow. */
  .flexible-rental-section__text {
    text-align: center;
  }

  .flexible-rental-section__eyebrow {
    font-size: 12px;
  }

  .flexible-rental-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 28px;
    max-width: 280px;
    margin-inline: auto;
  }

  .flexible-rental-list li {
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
  }

  .flexible-rental-list__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  /* 45px, não 96 — e mais colado na imagem (Figma: só ~12px pra fora da borda, não 32px). */
  .flexible-rental-section__accent {
    width: 45px;
    height: 45px;
    right: -12px;
    bottom: -12px;
  }
}

/* ---------------------------------------------------------------------------------------- */
/* Seção 7 — "Grandes profissionais, marcas e empresas confiam" (node 129:5757 / 306:335)     */
/* ---------------------------------------------------------------------------------------- */

.brands-section {
  background-color: #f9f4ee;
}

.brands-section__header {
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
}

.brands-section__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: #4f5661;
}

.brands-section h2 {
  font-size: 30px;
  line-height: 36px;
}

/* Quebra manual só no desktop (pedido do usuário, 2026-08-24) — no mobile/tablet o texto
   segue quebra natural pela largura do container. */
.brands-section__header-break {
  display: none;
}

@media (min-width: 1025px) {
  .brands-section__header-break {
    display: block;
  }
}

.brands-grid {
  max-width: 900px;
  margin: 0 auto;
  padding-inline: 24px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.brands-grid__card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
  /* Logo em cinza por padrão; cor original no hover — pedido do usuário, 2026-08-21
     (não vem do Figma; rules/core.md, comportamento de interação decidido com o usuário).
     O grayscale/opacity fica na IMAGEM, não no card, pra não apagar o fundo branco/sombra. */
}

.brands-grid__card img {
  max-width: 70%;
  max-height: 60%;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: 0.7;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
}

.brands-grid__card:hover img,
.brands-grid__card:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .brands-grid__card img {
    transition: none;
  }
}

.brands-section__desktop {
  display: block;
}

.brands-section__mobile {
  display: none;
}

@media (max-width: 1024px) {
  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
  }
}

@media (max-width: 767px) {
  .brands-section__desktop {
    display: none;
  }

  .brands-section__mobile {
    display: block;
  }

  /* Só padding-left (não inline) — mesmo padrão do .ecosystem-swiper-wrap, carrossel cola na
     direita. */
  .brands-swiper-wrap {
    padding-left: 24px;
    padding-right: 0;
  }

  .brands-grid__card {
    height: 140px;
  }

  /* Sem cinza no carrossel mobile (pedido do usuário 2026-08-31) — sem hover em touch, o
     logo ficava sempre apagado (filter:grayscale + opacity:0.7 do desktop). Figma mobile
     (node 306:335) mostra os logos em cor cheia direto. */
  .brands-swiper-wrap .brands-grid__card img {
    filter: none;
    opacity: 1;
  }

  /* Eyebrow/heading do cabeçalho da seção — Figma real confirmado via get_design_context
     (node 300:1419): eyebrow 8,4px/letter-spacing 1,67px (bem menor que o 14px/2,8px do
     desktop), heading 24px (já bate, herdado do fix global de #page-home h2). */
  .brands-section__eyebrow {
    font-size: 8px;
    letter-spacing: 1.67px;
  }
}

/* ---------------------------------------------------------------------------------------- */
/* Seção 8 — "Três cidades. Uma experiência." (node 132:3 / 306:339)                          */
/* ---------------------------------------------------------------------------------------- */

.cities-section {
  background-color: #ffffff;
  /* Alvo da âncora #cidades (CTA da seção 3) — respiro pro título não colar no topo. */
  scroll-margin-top: 24px;
}

.cities-section__header {
  max-width: 700px;
  margin: 0 auto 40px;
  text-align: center;
}

/* Uma linha só (pedido do usuário, 2026-08-24) — max-width alargado + nowrap; reduz o
   font-size no mobile pra continuar cabendo numa linha em telas estreitas. */
.cities-section h2 {
  font-size: 36px;
  white-space: nowrap;
}

@media (max-width: 550px) {
  .cities-section h2 {
    font-size: 22px;
  }
}

.cities-section__highlight {
  /* display:block — mesmo padrão de .transform-section__highlight/.flexible-rental-section__
     highlight (2ª linha do heading, sempre quebrada aqui, não "onde couber"). Sem isso, o
     h2 tem white-space:nowrap (pedido do usuário 2026-08-24) e o texto inteiro numa linha só
     no mobile passava da largura da tela, "Uma experiência" saindo pela direita — bug real,
     reportado pelo usuário. Com o span quebrando em bloco, cada metade ("Três cidades." /
     "Uma experiência.") já cabe sozinha, sem precisar mexer no nowrap. Bate com o Figma
     mobile também (node 306:339 — heading em 2 linhas). */
  display: block;
  color: var(--color-brand-orange);
}

.cities-section__header p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
}

.cities-grid {
  max-width: 1520px;
  margin: 0 auto;
  padding-inline: 24px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.city-card {
  border-radius: 16px;
  overflow: hidden;
  background-color: #f0eeeb;
  box-shadow:
    0px 10px 15px -3px rgba(0, 0, 0, 0.1),
    0px 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.city-card__media {
  position: relative;
  aspect-ratio: 469 / 293;
}

/* Filho DIRETO: o seletor descendente pegava tambem o <img> do pin dentro de
   .city-card__address, esticando o icone pra caixa toda do endereco (barra branca sobre o
   texto). */
.city-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.city-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(19, 33, 57, 0.8),
    rgba(19, 33, 57, 0.2) 50%,
    rgba(19, 33, 57, 0)
  );
}

.city-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: #ffffff;
  backdrop-filter: blur(4px);
  border-radius: 9999px;
  padding: 8px 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-navy);
}

.city-card__name {
  position: absolute;
  left: 24px;
  bottom: 62px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
}

.city-card__address {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 27px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
}

.city-card__address img {
  flex: 0 0 auto;
  width: 12px;
  height: 15px;
}

.city-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background-color: #ffffff;
  border-top: 1px solid #e1ddd7;
}

.city-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #11161f;
  text-decoration: none;
  white-space: nowrap;
}

.city-card__video {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.city-card__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background-color: #f0eeeb;
  flex-shrink: 0;
}

.city-card__video--soon {
  color: rgba(79, 86, 97, 0.6);
}

.city-card__video--tour {
  color: #4f5661;
}

@media (max-width: 1024px) {
  .cities-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
}

@media (max-width: 767px) {
  /* Card mobile (Figma node 306:339) é o MESMO componente do desktop, só reduzido por um
     fator ~0,584x — confirmado via get_design_context em 6+ propriedades independentes
     (fonte do badge, nome, endereço, link, vídeo, radius do card: todas na mesma proporção
     em relação ao valor desktop). Valores abaixo = desktop × 0,584, arredondado. Container
     (padding/gap) usa o valor REAL medido no frame (não escalado — é o layout em si, não o
     componente clonado). */
  .cities-section__header {
    padding-inline: 73px;
  }

  .cities-grid {
    padding-inline: 73px;
    gap: 30px;
  }

  .city-card {
    border-radius: 9px;
  }

  .city-card__badge {
    top: 9px;
    right: 9px;
    padding: 5px 7px;
    font-size: 7px;
    line-height: 9px;
  }

  .city-card__name {
    left: 14px;
    bottom: 36px;
    font-size: 12px;
    line-height: 16px;
  }

  .city-card__address {
    left: 14px;
    right: 14px;
    bottom: 16px;
    gap: 5px;
    font-size: 8px;
    line-height: 12px;
  }

  .city-card__address img {
    width: 7px;
    height: 9px;
  }

  .city-card__footer {
    flex-wrap: wrap;
    padding: 9px;
    gap: 7px;
  }

  .city-card__link,
  .city-card__video {
    gap: 5px;
    font-size: 8px;
    line-height: 12px;
  }

  .city-card__play {
    width: 19px;
    height: 19px;
  }
}

/* ---------------------------------------------------------------------------------------- */
/* Seção 9 — CTA final "Venha tomar um café..." (node 132:4 / 306:340)                        */
/* ---------------------------------------------------------------------------------------- */

/* Fundo bege ocupa a largura toda da seção; o max-width fica no wrapper interno, senão o
   bege parava nos 800px do conteúdo. */
.final-cta-section {
  background-color: #f9f4ee;
  padding-inline: 24px;
  text-align: center;
}

.final-cta-section__inner {
  max-width: 670px;
  margin-inline: auto;
}

.final-cta-section h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 48px;
  line-height: 48px;
  margin: 0 0 24px;
}

.final-cta-section__highlight {
  font-style: italic;
  color: var(--color-brand-orange);
}

.final-cta-section p {
  margin: 0 0 32px;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
}

.final-cta-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding-inline: 32px;
  border-radius: 9999px;
  background-color: var(--color-brand-orange);
  box-shadow:
    0px 10px 15px -3px rgba(236, 90, 0, 0.25),
    0px 4px 6px -4px rgba(236, 90, 0, 0.25);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  text-decoration: none;
}

@media (max-width: 767px) {
  .final-cta-section h2 {
    font-size: 32px;
    line-height: 1.2;
  }
}

/* ---------------------------------------------------------------------------------------- */
/* Fontes de descrição de seção no mobile — CORREÇÃO: essa mesma regra existia antes logo    */
/* após a seção 3 (bem no topo do CSS responsivo), ANTES da regra base .transform-section__  */
/* text p (18px) e das outras 5 — mesma especificidade (classe+tag), então quem vem depois   */
/* no arquivo ganha. A base (18px), mais abaixo, sempre vencia; o fix nunca surtia efeito de  */
/* verdade. Só funciona posicionado DEPOIS de toda regra base — por isso mora aqui, no fim.  */
/* ---------------------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* 14px, não 18 — Figma real confirmado nas descrições de seção mobile (node 300:1083):
     "Cada evento possui características únicas..." (rooms), "A UNE Eventos nasceu..."
     (transform), "Espaço, filmagem, marketing..." (ecosystem), "Sim. Nossos espaços se
     adaptam..." (flexible-rental) — todas 14px/400. cities/final-cta reaproveitam o mesmo
     padrão de texto de seção, mesmo ajuste. line-height 20px, mesmo par font-size/line-height
     já usado nas páginas de unidade pro mesmo tipo de texto. */
  .rooms-section__header p,
  .transform-section__text p,
  .ecosystem-section__header p,
  .flexible-rental-section__description,
  .cities-section__header p,
  .final-cta-section p {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ---------------------------------------------------------------------------------------- */
/* Ajuste global de padding de seção no mobile                                                */
/* ---------------------------------------------------------------------------------------- */

@media (max-width: 767px) {
  #page-home section {
    padding-block: 64px;
  }
}

/* ---------------------------------------------------------------------------------------- */
/* Scroll reveal — mesmo efeito já usado nas páginas de unidade (fade + slide de baixo pra    */
/* cima ao entrar na viewport). Pedido do usuário, 2026-08-21: replicar em todas as páginas.  */
/* Lista precisa bater com js/page-home.js.                                     */
/* ---------------------------------------------------------------------------------------- */

.home-info-bar__item,
.rooms-section__header,
.room-card,
.rooms-section__cta-wrap,
.transform-section__text,
.transform-section__media,
.ecosystem-section__header,
.ecosystem-card,
.ecosystem-section__cta,
.flexible-rental-section__text,
.flexible-rental-section__media,
.brands-section__header,
.brands-grid__card,
.cities-section__header,
.city-card,
.final-cta-section__inner {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.home-info-bar__item.is-visible,
.rooms-section__header.is-visible,
.room-card.is-visible,
.rooms-section__cta-wrap.is-visible,
.transform-section__text.is-visible,
.transform-section__media.is-visible,
.ecosystem-section__header.is-visible,
.ecosystem-card.is-visible,
.ecosystem-section__cta.is-visible,
.flexible-rental-section__text.is-visible,
.flexible-rental-section__media.is-visible,
.brands-section__header.is-visible,
.brands-grid__card.is-visible,
.cities-section__header.is-visible,
.city-card.is-visible,
.final-cta-section__inner.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-info-bar__item,
  .rooms-section__header,
  .room-card,
  .rooms-section__cta-wrap,
  .transform-section__text,
  .transform-section__media,
  .ecosystem-section__header,
  .ecosystem-card,
  .ecosystem-section__cta,
  .flexible-rental-section__text,
  .flexible-rental-section__media,
  .brands-section__header,
  .brands-grid__card,
  .cities-section__header,
  .city-card,
  .final-cta-section__inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}