/*
  Composicao das secoes da Up Imbé.
  Identidade e componentes vivem em brand.css; aqui fica so o arranjo.
*/

/* ============================================================
   HERO — a fachada e o fundo, nao um card ao lado do texto
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--ticker-h) + var(--header-h) + var(--space-6));
  padding-bottom: var(--space-8);
  overflow: hidden;
  isolation: isolate;
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.hero__photo {
  position: absolute;
  inset: -6% 0 -6% 0;
  will-change: transform;
  transform: translate3d(0, var(--hero-shift, 0px), 0);
}

.hero__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 46%;
}

/* Escurece o suficiente para o texto ficar em AAA sobre a foto. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 9, 12, 0.9) 0%, rgba(7, 9, 12, 0.4) 32%, rgba(7, 9, 12, 0.84) 78%, var(--night) 100%),
    linear-gradient(96deg, rgba(7, 9, 12, 0.97) 0%, rgba(7, 9, 12, 0.95) 34%, rgba(7, 9, 12, 0.91) 52%, rgba(7, 9, 12, 0.55) 70%, rgba(7, 9, 12, 0.22) 84%, rgba(7, 9, 12, 0.58) 100%);
}

/* A luz que segue o ponteiro: e a luz do letreiro, de baixa intensidade. */
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    26rem 26rem at var(--pointer-x, 50%) var(--pointer-y, 40%),
    rgba(240, 216, 120, 0.16),
    rgba(24, 175, 224, 0.05) 42%,
    transparent 68%
  );
  mix-blend-mode: screen;
  transition: opacity var(--duration-base) var(--ease-out);
}

.hero__content {
  position: relative;
  width: 100%;
  display: grid;
  gap: var(--space-5);
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-black);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 12ch;
}

/* Mascara por palavra: cada palavra sobe de dentro da propria linha. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.16;
}

.word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--duration-scene) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

html[data-js="off"] .word > span,
.hero__title[data-revealed] .word > span { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .word > span {
    transform: none;
    transition: none;
  }
}

.hero__title + .rule { margin-top: var(--space-1); }

.hero__lede {
  max-width: 44ch;
  font-size: var(--text-md);
  color: #c6d0d5;
  margin: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

@media (max-width: 30rem) {
  /* Em telas estreitas os dois botoes viram um bloco unico, sem borda irregular. */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .button { width: 100%; }
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-7);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(238, 242, 240, 0.14);
}

.hero__meta div { display: grid; gap: 2px; }

.hero__meta dt {
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-on-photo);
}

.hero__meta dd {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-bold);
  font-size: 1.16rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

@media (min-width: 62rem) {
  .hero__photo img { object-position: 64% 46%; }
}

/*
  Acima de 74rem o texto ocupa pouco mais de metade da largura e a fachada fica
  respirando a direita. Nao ha mais recorte do letreiro sobreposto: a fotografia
  de fundo ja mostra o letreiro, e a copia pequena so denunciava a resolucao da
  origem.
*/
@media (min-width: 74rem) {
  .hero__content { max-width: 62%; }
  .hero__photo img { object-position: 58% 46%; }
}

.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-subtle);
}

.hero__cue i {
  display: block;
  width: 1px;
  height: 2.2rem;
  background: linear-gradient(180deg, var(--up-green), transparent);
  transform-origin: top center;
  animation: cue-pulse 2.4s var(--ease-inout) infinite;
}

@keyframes cue-pulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.5; }
  45% { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .hero__cue i {
    animation: none;
    transform: scaleY(1);
  }

  html:not([data-motion="full"]) .hero__photo {
    transform: none !important;
  }

  html:not([data-motion="full"]) .hero__glow {
    display: none;
  }
}

@media (max-width: 61.99rem) {
  /*
    Ate 62rem a fotografia nao e fundo de pagina inteira: e um bloco superior
    de altura fixa, com o titulo cavalgando sobre o terco de baixo. Assim da
    para enquadrar o letreiro em vez de mostrar telhado e ceu.
  */
  .hero { min-height: auto; padding-top: 0; padding-bottom: var(--space-7); }
  .hero__photo { top: var(--ticker-h); }
  .hero__photo {
    inset: 0 0 auto 0;
    height: 62vh;
    min-height: 22rem;
    transform: none !important;
  }
  .hero__photo img { object-position: 52% 44%; }
  /* o scrim acompanha o bloco da foto, nao a altura toda do hero */
  .hero__scrim {
    inset: 0 0 auto 0;
    height: 62vh;
    min-height: 22rem;
    background:
      linear-gradient(180deg, rgba(7, 9, 12, 0.88) 0%, rgba(7, 9, 12, 0.16) 20%, rgba(7, 9, 12, 0.3) 48%, rgba(7, 9, 12, 0.9) 78%, var(--night) 100%);
  }
  .hero__content { padding-top: 48vh; }
  .hero__title { max-width: 100%; }
  .hero__cue { display: none; }
  .hero__glow { display: none; }
}

/* ============================================================
   CONCEITO
   ============================================================ */

/*
  Divisao editorial: titulo a esquerda, argumento a direita. Antes havia um
  close do letreiro na coluna da direita, tirado de uma origem de baixa
  resolucao; sem ele a secao ficou mais firme, e a fotografia continua fazendo
  seu trabalho no hero, na faixa de estrutura e na secao imersiva.
*/
.concept__grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 62rem) {
  .concept__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); }
}

.concept__lead h2 {
  font-size: var(--text-2xl);
  margin: var(--space-4) 0 0;
}

.concept__body p {
  font-size: var(--text-md);
  color: #b9c4ca;
}

.concept__body p:last-child { margin-bottom: 0; }

/* ============================================================
   DIFERENCIAIS
   ============================================================ */

.edges {
  display: grid;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 46rem) { .edges { grid-template-columns: 1fr 1fr; } }

@media (min-width: 46rem) and (max-width: 61.999rem) {
  .edge:last-child { grid-column: 1 / -1; }
}

@media (min-width: 62rem) and (max-width: 73.999rem) {
  .edges { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .edge { grid-column: span 2; }
  .edge:nth-last-child(-n + 2) { grid-column: span 3; }
}

@media (min-width: 74rem) { .edges { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.edge { display: grid; gap: var(--space-3); align-content: start; }

.edge__index {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--up-green);
}

.edge h3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.edge p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }

/* ============================================================
   ESTRUTURA — faixa fotografica larga
   ============================================================ */

.band {
  position: relative;
  margin-top: var(--space-7);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.band__media { position: relative; overflow: hidden; }

.band__media img {
  width: 100%;
  height: clamp(18rem, 46vw, 32rem);
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.08) translate3d(0, var(--band-shift, 0px), 0);
  will-change: transform;
}

.band__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 9, 12, 0.28), rgba(7, 9, 12, 0.1) 40%, rgba(7, 9, 12, 0.88));
}

.band__captions {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-5);
}

.band__captions li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #d8e0e3;
}

html[data-js="on"] .band__captions li {
  opacity: 0;
  transform: translate3d(-1.4rem, 0, 0);
  transition: opacity var(--duration-reveal) var(--ease-soft),
              transform var(--duration-reveal) var(--ease-soft);
}

html[data-js="on"] .band[data-revealed] .band__captions li {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.band[data-revealed] .band__captions li:nth-child(2) { transition-delay: 120ms; }
.band[data-revealed] .band__captions li:nth-child(3) { transition-delay: 240ms; }
.band[data-revealed] .band__captions li:nth-child(4) { transition-delay: 360ms; }

.band__captions li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--led);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .band__media img {
    transform: scale(1.02);
  }
}

/* ============================================================
   MODALIDADES E COMUNIDADE — slots
   ============================================================ */

.slot-grid {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 44rem) { .slot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70rem) { .slot-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.slot-note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-subtle);
  max-width: 60ch;
}

/* ============================================================
   ONDE FICA — mapa do Google, escurecido para a pagina
   ============================================================

   O embed sem chave de API nao aceita estilo escuro, entao o escurecimento e
   feito por filtro. Um desenho proprio em SVG chegou a ocupar este lugar: ficava
   coerente com a pagina, mas nao mostrava quarteirao, vizinho nem ponto de
   referencia — que e exatamente para o que a pessoa olha um mapa.

   O que isso custa: e a unica requisicao a terceiro da pagina, e traz o
   rastreamento do Google junto. Registrado no DESIGN.md.
   ============================================================ */

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

@media (min-width: 62rem) {
  .place {
    grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 0.65fr);
    gap: var(--space-8);
    align-items: stretch;
  }
}

.place__map {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--night-2);
}

.place__map__live {
  display: block;
  width: 100%;
  min-height: min(30rem, 78svh);
  aspect-ratio: 1 / 1;
  border: 0;
  /*
    `invert` derruba o fundo claro do mapa; `hue-rotate` devolve a agua ao azul
    e o alfinete ao vermelho, que o invert tinha trocado. Saturacao e contraste
    baixos para o mapa nao competir com o verde da marca. O filtro e moderado de
    proposito: a atribuicao do Google continua legivel.

    Para voltar ao mapa claro, remova esta linha.
  */
  filter: invert(92%) hue-rotate(186deg) brightness(0.94) contrast(0.9) saturate(0.55);
}

@media (min-width: 62rem) {
  .place__map__live {
    min-height: clamp(34rem, 46vw, 42rem);
    aspect-ratio: 16 / 10;
  }
}

/*
  Em telas de toque o mapa nao captura o gesto: arrastar com um dedo tem de
  rolar a pagina, nao mover o mapa. Quem quiser explorar usa "Abrir no mapa".
*/
@media (pointer: coarse) {
  .place__map__live { pointer-events: none; }
}

.place__map figcaption {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-subtle);
}

/* --- coluna ao lado --- */

.place__side { display: grid; gap: var(--space-5); align-content: center; }

.place__word {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-black);
  font-size: clamp(3rem, 1.9rem + 5.4vw, 6.2rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--color-border-strong);
}

/*
  So vira contorno onde `-webkit-text-stroke` existe. Sem isso, a palavra
  continua solida em cinza: nunca some.
*/
@supports (-webkit-text-stroke: 1px black) {
  .place__word {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-border-strong);
  }
}

/*
  A copia solida por cima. `-webkit-text-fill-color` e herdado: como o pai o
  computa em `transparent`, precisa ser reposto aqui, senao o texto fica
  invisivel mesmo com `color` definido.
*/
.place__word span {
  position: absolute;
  inset: 0;
  color: var(--bone);
  -webkit-text-fill-color: var(--bone);
  -webkit-text-stroke-width: 0;
  clip-path: inset(0 var(--place-fill, 100%) 0 0);
  transition: clip-path 1400ms var(--ease-out) 200ms;
}

.place__word[data-revealed] span { --place-fill: 0%; }

.place__list { display: grid; gap: var(--space-4); margin: 0; padding: 0; }

.place__list div {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.place__list dt {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.place__list dd { margin: 0; color: var(--bone); line-height: 1.45; }

.place__list dd a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--up-green);
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .place__word span {
    transition: none;
    clip-path: inset(0 0 0 0);
  }

}

/* ============================================================
   CTA FINAL
   ============================================================ */

.cta {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background:
    radial-gradient(60rem 26rem at 78% 12%, rgba(240, 216, 120, 0.12), transparent 62%),
    var(--night-2);
  padding: var(--space-8) var(--space-6);
  text-align: left;
}

.cta__inner {
  display: grid;
  gap: var(--space-5);
  max-width: 46rem;
}

.cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-black);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
  line-height: 1.02;
}

.cta p { margin: 0; color: var(--color-muted); font-size: var(--text-md); max-width: 44ch; }

.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (min-width: 48rem) {
  .cta { padding: var(--space-9) var(--space-8); }
}