/* =========================================================================
   Monte Sião v2 · páginas, transições e fundo animado
   Carregado depois de style.css.
   ========================================================================= */

html { background: #f1ede2; }

/* Camadas sobre fotografia (cards, slideshow, cortina) usam texto claro sobre
   verde-escuro: tokens locais, para o resto do site seguir claro. */
.tile, .slides-page, .pt, .pt-clone, .ronda {
  --ink-rgb: 14, 32, 22;
  --fg-rgb: 246, 242, 230;
  --ink: #0e2016;
  --ink-2: #14301f;
  --fg: #f6f2e6;
  --fg-2: #dfe3d4;
  --muted: #b3bfae;
  --line: rgba(246, 242, 230, .14);
  --line-2: rgba(246, 242, 230, .3);
  --signal: #9fd08a;
  --signal-deep: #b4dc9f;
  --signal-ink: #0e2016;
  color: var(--fg);
}
.slides-page { background: #0e2016; }

/* ------------------------- fundo animado (canvas fixo) ------------------- */
.bgfx {
  position: fixed; inset: 0; z-index: var(--z-bg);
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ------------------------ transição entre páginas -----------------------
   Duas camadas de colunas (verde-sinal na frente, tinta atrás) sobem para
   cobrir a página, mostram o nome do destino e descem na página nova.
   Fora do JS, a cobertura só existe se a classe pt-cover estiver no <html>. */
.pt { position: fixed; inset: 0; z-index: var(--z-pt); pointer-events: none; visibility: hidden; }
.pt.is-live, .pt-cover .pt { visibility: visible; }
.pt__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.pt__col { background: #14301f; transform: scaleY(0); transform-origin: 50% 100%; will-change: transform; }
.pt__cols--a .pt__col { background: #8fc17b; }
.pt__cols--b .pt__col { box-shadow: -1px 0 0 rgba(var(--fg-rgb), .05); }
.pt-cover .pt__col { transform: scaleY(1); }

.pt__img { position: absolute; inset: 0; background: var(--ink-2) var(--pt-img, none) 50% 50% / cover no-repeat; opacity: 0; filter: saturate(.82) contrast(1.05) brightness(.78); }
.pt-img .pt__img { opacity: 1; }
.pt-img .pt__cols { display: none; }

.pt__label { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--fg); text-align: center; }
.pt__mark { width: 64px; height: 43px; color: var(--signal); }
.pt__name { display: block; overflow: hidden; padding: .1em .05em; font-size: clamp(2.4rem, 8vw, 7rem); font-weight: 850; font-stretch: 125%; letter-spacing: -0.045em; line-height: .95; }
.pt__name span { display: inline-block; }
.pt-img .pt__label { display: none; }

.pt-clone { position: fixed; z-index: calc(var(--z-pt) - 1); overflow: hidden; border-radius: var(--r); margin: 0; pointer-events: none; will-change: left, top, width, height; }
.pt-clone img { width: 100%; height: 100%; object-fit: cover; }

noscript .pt, .no-js .pt { display: none; }

/* ------------------------------ cabeçalho ------------------------------- */
.swap--first { padding-top: clamp(120px, 18vh, 170px); }

/* ---------------------------- serviços em bento -------------------------- */
.tiles-sec { padding-block: clamp(100px, 16vh, 180px) clamp(70px, 11vh, 120px); }
.tiles-sec__title { margin-bottom: 40px; max-width: 16ch; }
.tiles {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(230px, 30vh, 310px); gap: 12px;
}
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: clamp(18px, 2vw, 28px); overflow: hidden; isolation: isolate;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--ink-2); transition: border-color .4s;
}
.tile--a { grid-column: span 5; grid-row: span 2; }
.tile--b { grid-column: span 4; }
.tile--c { grid-column: span 3; }
.tile--d { grid-column: span 3; }
.tile--e { grid-column: span 4; }
.tile > img, .tile > video {
  position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.82) contrast(1.05) brightness(.78);
  transition: transform 1.4s var(--ease), filter .7s var(--ease);
}
.tile::before {
  /* tratamento comum a todas as fotos: leve tom verde e sombra para o texto */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, rgba(14, 40, 26, .22) 0%, rgba(9, 17, 14, .15) 35%, rgba(9, 17, 14, .92) 100%);
}
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 50% at var(--mx, 50%) var(--my, 50%), rgba(159, 208, 138, .28), transparent 70%);
  transition: opacity .5s;
}
.tile:hover { border-color: rgba(159, 208, 138, .6); }
.tile:hover::after { opacity: 1; }
.tile:hover > img, .tile:hover > video { transform: scale(1.07); filter: saturate(.95) contrast(1.05) brightness(.9); }
.tile__icon { position: absolute; left: clamp(18px, 2vw, 28px); top: clamp(18px, 2vw, 28px); width: 48px; height: 48px; border-radius: var(--r); display: grid; place-items: center; font-size: 24px; background: var(--signal); color: var(--signal-ink); }
.tile__go {
  position: absolute; right: clamp(18px, 2vw, 28px); top: clamp(18px, 2vw, 28px);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 19px;
  border: 1px solid var(--line-2); background: rgba(var(--ink-rgb), .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .6s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.tile:hover .tile__go { transform: rotate(45deg); background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.tile__title { font-size: clamp(1.45rem, 2.3vw, 2.3rem); font-weight: 800; font-stretch: 115%; letter-spacing: -0.035em; line-height: 1; }
.tile--a .tile__title { font-size: clamp(2rem, 3.4vw, 3.4rem); }
.tile__text { color: var(--fg-2); font-size: 15px; max-width: 38ch; }
.tile--c .tile__text, .tile--d .tile__text { display: none; }

/* --------------------------- faixa de chamada --------------------------- */
.band { padding-block: clamp(90px, 15vh, 170px); }
.band__title { max-width: 14ch; margin-bottom: 30px; font-size: clamp(2.3rem, 5.4vw, 5.4rem); font-weight: 850; font-stretch: 122%; letter-spacing: -0.045em; line-height: .94; text-wrap: balance; }
.band__title span { color: var(--signal-deep); }
.band__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------- próxima página ------------------------------ */
.nextpage {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-top: 1px solid var(--line);
  padding: clamp(46px, 9vh, 96px) var(--gutter);
}
.nextpage__in { max-width: var(--max); margin-inline: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.nextpage__k { display: block; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; transition: color .4s; }
.nextpage__name { display: block; font-size: clamp(2.4rem, 8.4vw, 8.4rem); font-weight: 860; font-stretch: 125%; letter-spacing: -0.05em; line-height: .88; }
.nextpage__arrow { flex: none; width: clamp(56px, 7vw, 96px); height: clamp(56px, 7vw, 96px); border-radius: 50%; display: grid; place-items: center; font-size: clamp(24px, 3vw, 40px); border: 1px solid var(--line-2); transition: transform .7s var(--ease), background-color .4s, color .4s, border-color .4s; }
.nextpage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal); transform: translateY(101%); transition: transform .8s var(--ease); }
.nextpage:hover::before { transform: none; }
.nextpage:hover { color: var(--signal-ink); }
.nextpage:hover .nextpage__k { color: rgba(246, 242, 230, .75); }
.nextpage:hover .nextpage__arrow { transform: rotate(-45deg); background: var(--signal-ink); color: var(--signal); border-color: var(--signal-ink); }

/* ------- como atuamos: seções contínuas (rolagem controlada por gesto) -------
   Referência: GSAP Observer, "Animated Continuous Sections". A tela não rola:
   cada gesto troca a seção; a seção nova entra por um cortinado duplo. */
.slides-page { height: 100dvh; overflow: hidden; }
.slides { position: fixed; inset: 0; z-index: var(--z-page); }
.slide { position: absolute; inset: 0; visibility: hidden; }
.slide__outer, .slide__inner { width: 100%; height: 100%; overflow: hidden; }
.slide__bg { position: absolute; inset: 0; isolation: isolate; }
.slide__bg img {
  position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; z-index: -2;
  filter: saturate(.8) contrast(1.06) brightness(.8); will-change: transform;
}
.slide__bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb), .8) 0%, rgba(var(--ink-rgb), 0) 34%, rgba(var(--ink-rgb), 0) 46%, rgba(var(--ink-rgb), .94) 100%),
    linear-gradient(135deg, rgba(14, 40, 26, .3), transparent 60%);
}
.slide__content { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(40px, 8vh, 90px); display: grid; gap: clamp(14px, 2vh, 24px); z-index: 2; }
.slide__word {
  font-size: 12vw; font-weight: 880; font-stretch: 125%;
  line-height: .84; letter-spacing: -0.05em; white-space: nowrap;
  overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em;
}
.slide__word .ch { display: inline-block; will-change: transform; }
.slide__word .wd { display: inline-block; white-space: nowrap; }
.slide:nth-child(even) .slide__word { color: var(--signal-deep); }
.slide__content p { max-width: 44ch; color: var(--fg-2); font-size: clamp(1rem, 1.3vw, 1.2rem); }
.slides__title {
  position: fixed; z-index: calc(var(--z-page) + 2); top: clamp(104px, 15vh, 150px); left: var(--gutter);
  font-size: clamp(1.35rem, 2.1vw, 1.95rem); font-weight: 760; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1.05;
  pointer-events: none;
}
.slides__rail {
  position: fixed; z-index: calc(var(--z-page) + 2); right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: grid; gap: 6px; justify-items: end;
}
.slides__rail button {
  display: inline-flex; align-items: center; gap: 12px; padding: 7px 14px; border-radius: var(--pill);
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-2); background: rgba(var(--ink-rgb), .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color .35s, color .35s;
}
.slides__rail button::before { content: ""; width: 14px; height: 2px; background: currentColor; opacity: .5; transition: width .5s var(--ease), opacity .3s; }
.slides__rail button:hover { color: var(--fg); }
.slides__rail button.is-on { background: var(--signal); color: var(--signal-ink); }
.slides__rail button.is-on::before { width: 28px; opacity: 1; }
.slides__arrows { position: fixed; z-index: calc(var(--z-page) + 2); right: var(--gutter); bottom: clamp(24px, 5vh, 48px); display: flex; gap: 10px; }
/* o último slide mantém o texto embaixo, sobre o asfalto, para não cobrir a placa da fachada */
.slide--end .slide__bg img { object-position: 50% 40%; }
.slide--end .slide__word { font-size: clamp(2rem, 4.4vw, 4.6rem); white-space: normal; line-height: .98; max-width: 18ch; }
.slide--end .band__ctas { margin-top: 10px; }

.slides-page.is-static { height: auto; overflow: visible; }
.is-static .slides { position: static; }
.is-static .slide { position: relative; visibility: visible; min-height: 100dvh; }
.is-static .slide__outer, .is-static .slide__inner { min-height: 100dvh; }
.is-static .slides__rail, .is-static .slides__arrows, .is-static .slides__title { display: none; }

/* --------------------------- páginas internas --------------------------- */
.page-gap { height: clamp(40px, 8vh, 90px); }

/* ------------------------------ responsivo ------------------------------ */
@media (max-width: 1080px) {
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile--a { grid-column: span 6; grid-row: span 1; }
  .tile--b, .tile--c, .tile--d, .tile--e { grid-column: span 3; }
  .tile--e { grid-column: span 6; }
  .tile--c .tile__text, .tile--d .tile__text { display: block; }
}
@media (max-width: 767px) {
  .tiles { grid-template-columns: 1fr; grid-auto-rows: 250px; }
  .tile--a, .tile--b, .tile--c, .tile--d, .tile--e { grid-column: 1; }
  .nextpage__in { align-items: center; }
  .slides__rail { top: auto; bottom: 24px; left: var(--gutter); right: auto; transform: none; display: flex; gap: 4px; }
  .slides__rail button { padding: 6px 8px; }
  .slides__rail button span { display: none; }
  .slides__rail button::before { width: 18px; }
  .slides__rail button.is-on::before { width: 18px; }
  .slides__title { max-width: 12ch; }
  .slides__arrows { bottom: 20px; }
  .slide__content { bottom: 90px; }
  .pt__cols { grid-template-columns: repeat(4, 1fr); }
  .pt__col:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pt { display: none !important; }
  .tile > img, .tile > video, .nextpage::before { transition: none !important; }
}