/* Proposta D2 (14/10/2026). Composta das secções VERDADEIRAS da A (topo, descida, modelo, escolas,
   fecho), da B (a app e o OS a montar-se) e da C (os planos com corte e a letra que atravessa).
   O CSS de cada secção vem do protótipo de origem; o que mudou foi só a letra, presa a DEZ degraus:
   320/150 · 96/42 · 64/34 · 40/28 · 24/20 · 20/18 · 18 · 16 · 14 · 12  (computador / telemóvel).
   Inter para ler; Archivo estreita (a da C) só para os números grandes. */
@font-face { font-family: 'Archivo SB'; src: url('/assets/site-d/d2/_a/fonts/archivo.woff2') format('woff2'); font-weight: 300 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --abismo: #03070F; --noite: #060E1A; --sup: #0B1120; --elev: #0B1929; --agua: #0B3A52;
  --espuma: #F1F5F9; --fraco: #94A3B8; --claro: #CBD5E1; --linha: rgba(255,255,255,.1);
  --ciano: #22D3EE; --ciano-f: #06B6D4; --ciano-e: #0891B2;
  --vazia: #34D399; --cheia: #60A5FA;
  --ease: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.77,0,.18,1);
  --gut: clamp(16px, 4vw, 48px); --max: 1200px;
  --t0: clamp(150px, 22.23vw, 320px);
  --t1: clamp(42px, 6.667vw, 96px);
  --t2: clamp(34px, 4.445vw, 64px);
  --t3: clamp(28px, 2.778vw, 40px);
  --t4: clamp(20px, 1.667vw, 24px);
  --t5: clamp(18px, 1.389vw, 20px);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { font-family: 'Inter SB', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; background: var(--noite); }
.wrap { width: min(var(--max), 100% - 2 * var(--gut)); margin-inline: auto; }
.cond, .gig, .gig-m { font-family: 'Archivo SB', 'Inter SB', sans-serif; font-stretch: 62%; font-weight: 800; letter-spacing: -.005em; line-height: .88; font-variant-numeric: tabular-nums; }
[tabindex="-1"]:focus { outline: none; }
.etq { display: block; margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ciano); }

/* ---------- títulos palavra a palavra: corte + desfoque que se resolve (sobre o base.css) ---------- */
.mo [data-split] .w { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-io); transition-delay: calc(var(--i) * 60ms + var(--d, 0ms)); }
.mo [data-split].in .w { clip-path: inset(-25% -8% -25% -8%); }
.mo [data-split] .w > span { opacity: 0; filter: blur(10px); transition: transform 1.1s var(--ease), opacity .8s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--i) * 60ms + var(--d, 0ms)); }
.mo [data-split].in .w > span { opacity: 1; filter: none; }

/* ---------- A BARRA (A) ---------- */
.nav { position: fixed; z-index: 40; top: 12px; left: 0; right: 0; margin-inline: auto; width: min(1120px, calc(100% - 24px));
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 9999px; overflow: hidden;
  background: rgba(11,17,32,.84); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px -12px rgba(0,0,0,.6); }
.mo .nav { animation: barra-desce 1.2s var(--ease) .15s both; }
@keyframes barra-desce { from { transform: translateY(-140%); opacity: 0; } to { transform: none; opacity: 1; } }
.nav-brilho { position: absolute; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.10) 45%, rgba(34,211,238,.14) 55%, transparent); transform: translateX(-120%); }
.mo .nav-brilho { animation: brilho 1.8s var(--ease-io) .9s both; }
@keyframes brilho { to { transform: translateX(520%); } }
.nav .marca { color: #fff; }
.marca { position: relative; font-weight: 800; letter-spacing: -.02em; font-size: 18px; text-decoration: none; white-space: nowrap; }
.marca b { color: var(--ciano); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { text-decoration: none; font-size: 14px; color: #DCE3EC; padding: 10px 12px; border-radius: 9999px; transition: color .2s, background-color .2s; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav > .bt { padding: 10px 10px 10px 16px; font-size: 14px; }
.mo .nav > *:not(.nav-brilho) { animation: sobe-um .9s var(--ease) both; }
.mo .nav > .marca { animation-delay: .45s; } .mo .nav > .troca { animation-delay: .55s; } .mo .nav > .nav-links { animation-delay: .65s; } .mo .nav > .bt { animation-delay: .75s; }
@keyframes sobe-um { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- O INTERRUPTOR ---------- */
.troca { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-left: 20px; padding: 4px; height: 44px; min-width: 214px;
  border: 0; border-radius: 9999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.troca-op { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; font-size: 14px; font-weight: 600; color: #DCE3EC; white-space: nowrap; transition: color .35s var(--ease); }
.troca .op-inicio, .troca.em-st .op-st { color: #fff; }
.troca.em-st .op-inicio { color: #DCE3EC; }
.troca-polegar { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9999px;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.06), 0 4px 12px -4px rgba(0,0,0,.6);
  transition: transform .6s var(--ease); }
.troca.em-st .troca-polegar { transform: translateX(100%); }
.troca:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; border-radius: 9999px; }
.mare-ponto { width: 7px; height: 7px; flex: none; border-radius: 9999px; background: var(--cor-mare, var(--vazia)); }
.mo .mare-ponto { animation: mare-pulso 2.8s var(--ease) infinite; }
@keyframes mare-pulso { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 70%,100% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
.pilula { display: none; }
@media (max-width: 860px) {
  .nav-links, .nav > .troca { display: none; }
  .nav > .bt { margin-left: auto; }
  .pilula { display: block; position: fixed; z-index: 40; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(14px + env(safe-area-inset-bottom)); padding: 6px; border-radius: 9999px;
    background: rgba(11,17,32,.84); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px -10px rgba(0,0,0,.7); }
  .mo .pilula { animation: pilula-sobe 1.1s var(--ease) 1.1s both; }
  .pilula .troca { margin: 0; height: 48px; min-width: 248px; }
}
@keyframes pilula-sobe { from { transform: translateY(160%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- botões (A) ---------- */
.bt { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 8px 8px 22px; border-radius: 9999px; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .16s var(--ease), box-shadow .3s var(--ease), background-color .2s; }
.bt:active { transform: scale(.97); }
.bt-1 { background: linear-gradient(135deg, var(--ciano-e), var(--ciano-f)); color: #fff; box-shadow: 0 4px 20px rgba(6,182,212,.22); }
.bt-1:hover { box-shadow: 0 8px 28px rgba(6,182,212,.34); }
.bt-2 { color: var(--espuma); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); padding-right: 22px; background: rgba(6,14,26,.18); }
.bt-2:hover { background: rgba(255,255,255,.08); }
.bt .ic { width: 34px; height: 34px; border-radius: 9999px; display: grid; place-items: center; background: rgba(255,255,255,.18); transition: transform .3s var(--ease); }
.bt:hover .ic { transform: translate(2px,-1px) scale(1.05); }
.bt svg { width: 16px; height: 16px; }
.ctas, .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 1 · O TOPO (A) ---------- */
.topo-palco { position: relative; height: 200vh; height: 200svh; }
.topo-palco > .hero { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.hero-midia, .hero-assenta { position: absolute; inset: 0; z-index: 0; }
.hero-midia { will-change: transform; transform-origin: 50% 30%; }
.mo .hero-assenta { animation: assenta 2.8s cubic-bezier(.22,1,.36,1) both; }
@keyframes assenta { from { transform: scale(1.16); opacity: .2; } to { transform: none; opacity: 1; } }
.escurece { position: absolute; inset: 0; z-index: 1; background: var(--abismo); opacity: 0; pointer-events: none; }
.hero-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--gut) clamp(40px, 8vh, 88px); max-width: 1320px; margin: 0 auto; }
.h1 { font-size: var(--t1); line-height: 1.0; letter-spacing: -.04em; font-weight: 800; margin: 0; max-width: 13ch; text-wrap: balance; }
.hero-sub { font-size: var(--t5); color: #E2E8F0; max-width: 46ch; margin: 22px 0 30px; }
.hero-vivo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0; font-size: 14px; color: var(--claro); }
.hero-vivo .pulso { width: 8px; height: 8px; border-radius: 9999px; background: var(--vazia); }
.mo .hero-vivo .pulso { animation: pulso 2.4s var(--ease) infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70%,100% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } }
.vivo-sep { width: 1px; height: 14px; background: rgba(255,255,255,.24); margin: 0 4px; }
.ao-vivo { font-variant-numeric: tabular-nums; }
.ao-vivo i { display: inline-block; width: 8px; height: 8px; margin: 0 8px 0 10px; border-radius: 9999px; background: var(--cor-mare, var(--vazia)); vertical-align: 0; }
.ws { position: absolute; z-index: 3; right: calc(var(--gut) + 64px); bottom: clamp(40px, 8vh, 88px); display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 9999px; background: rgba(241,245,249,.92); color: #0B1120; text-decoration: none; font-size: 12px; font-weight: 600; }
.ws img { height: 18px; width: auto; }
.pausa { position: absolute; z-index: 3; right: var(--gut); bottom: clamp(40px, 8vh, 88px); width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 9999px; cursor: pointer; color: #fff;
  background: rgba(11,17,32,.6); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08); }
.pausa svg { width: 18px; height: 18px; fill: currentColor; }
.pausa .i-tocar, .pausa[aria-pressed="true"] .i-pausa { display: none; }
.pausa[aria-pressed="true"] .i-tocar { display: block; }
.rm .pausa { display: none; }
@media (max-width: 860px) {
  .hero-inner { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .ws { top: 94px; left: var(--gut); right: auto; bottom: auto; padding: 8px 12px; font-size: 12px; } .ws img { height: 15px; }
  .pausa { top: 90px; bottom: auto; width: 44px; height: 44px; }
  .hero-sub { margin: 18px 0 24px; }
  .vivo-sep { display: none; } .ao-vivo { flex-basis: 100%; }
  .ao-vivo i { margin-left: 10px; }
}

/* ---------- A FOLHA: sobe por cima do vídeo ---------- */
.folha { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; border-radius: 24px 24px 0 0; overflow: clip; background: var(--sup); transform-origin: 50% 0; box-shadow: 0 -24px 60px -24px rgba(0,0,0,.7); }

/* ---------- 2 · A DESCIDA (A) ---------- */
.pin-tall { position: relative; }
.pin-tall > .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.descida { height: 210vh; background: var(--sup); }
.d-foto { position: absolute; inset: -6% 0 0 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 40%; transform-origin: 50% 60%; }
.d-ondas { position: absolute; left: 0; width: 200%; height: 46vh; bottom: 0; }
.d-ondas path { fill: none; stroke: #F1F5F9; vector-effect: non-scaling-stroke; }
.d-fundo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,26,0) 0%, rgba(6,14,26,.72) 30%, var(--sup) 62%); }
.d-textos { position: absolute; inset: 0; display: grid; align-content: center; padding: 0 var(--gut); }
.d-t { margin: 0 auto; max-width: 20ch; font-size: var(--t2); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; text-align: center; text-wrap: balance; }
.d-t small { display: block; font-size: var(--t5); letter-spacing: 0; font-weight: 400; color: var(--claro); max-width: 44ch; margin: 18px auto 0; line-height: 1.55; }
.mo .d-t { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 var(--gut); max-width: none; opacity: 0; transform: translate3d(0,40px,0) scale(.98); filter: blur(6px); transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease); }
.mo .d-t.on { opacity: 1; transform: none; filter: none; }
.d-nums { display: flex; justify-content: center; gap: clamp(28px, 8vw, 120px); }
.d-nums div { text-align: center; }
.d-nums strong { display: block; font-size: var(--t0); }
.d-nums span { font-size: 14px; color: var(--claro); letter-spacing: 0; font-weight: 500; }
.rm .descida, html:not(.mo) .descida { height: auto; }
.rm .descida > .stage, html:not(.mo) .descida > .stage { position: relative; height: auto; }
.rm .d-textos, html:not(.mo) .d-textos { position: relative; padding: 120px var(--gut); gap: 72px; }

/* ---------- 3 · A LETRA (C) ---------- */
.letra { padding: clamp(96px, 16vh, 180px) 0; overflow: hidden; background: linear-gradient(180deg, var(--sup), var(--elev)); }
.letra .linha { white-space: nowrap; font-size: var(--t0); line-height: .86; }
.letra .linha + .linha { color: var(--ciano); }
.letra .lead { margin: 40px 0 0; color: var(--claro); max-width: 52ch; font-size: var(--t5); }
.rm .letra .linha, html:not(.mo) .letra .linha { white-space: normal; padding: 0 var(--gut); font-size: var(--t1); }

/* ---------- PLANOS (C): a imagem entra por corte, o número atravessa, a frase fica ---------- */
.plano { height: 125vh; background: var(--elev); }
.plano .foto { position: absolute; inset: 0; overflow: hidden; }
.plano .foto img { width: 100%; height: 100%; object-fit: cover; }
.plano .foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,26,.35) 0%, rgba(6,14,26,.12) 36%, rgba(6,14,26,.9) 100%); }
.hora { position: absolute; left: 0; top: clamp(76px, 12vh, 120px); white-space: nowrap; font-weight: 300; font-size: var(--t0); line-height: .8; color: var(--espuma); opacity: .9; letter-spacing: -.02em; }
.legenda { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(32px, 7vh, 72px); max-width: 640px; }
.legenda.dir { left: auto; }
.legenda .h2 { max-width: 14ch; }
.legenda p { margin: 16px 0 24px; color: #E2E8F0; max-width: 44ch; font-size: var(--t5); }
.rm .plano, html:not(.mo) .plano { height: auto; }
.rm .plano > .stage, html:not(.mo) .plano > .stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; }
@media (max-width: 760px) { .hora { top: 84px; } .legenda { bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ---------- secções ---------- */
.sec { position: relative; padding: clamp(96px, 14vw, 180px) 0; }
.h2 { font-size: var(--t2); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; margin: 0; max-width: 16ch; text-wrap: balance; }
.lead { font-size: var(--t5); color: var(--claro); max-width: 52ch; margin: 22px 0 0; }

/* ---------- A APP (B): o telemóvel fica, os ecrãs reais passam ---------- */
.app { height: 240vh; background: linear-gradient(180deg, var(--elev), var(--agua)); }
.app .stage { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 96px var(--gut) 24px; max-width: 1240px; margin: 0 auto; }
.app-txt { position: relative; min-height: 300px; }
.app-step { position: absolute; inset: 40px 0 auto 0; }
.app-step h3 { margin: 0 0 12px; font-size: var(--t3); letter-spacing: -.035em; line-height: 1.08; font-weight: 700; }
.app-step p { margin: 0; color: var(--claro); max-width: 40ch; font-size: var(--t5); }
.mo .app-step { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .55s var(--ease), transform .8s var(--ease), filter .55s; }
.mo .app-step.on { opacity: 1; transform: none; filter: none; }
.tel { position: relative; width: min(340px, 72vw); aspect-ratio: 400/869; margin: 0 auto; }
.tel .ecra { position: absolute; left: 4.5%; top: 2.07%; width: 91%; height: 95.86%; border-radius: 13.7% / 6.2%; overflow: hidden; background: #0B1120; }
.tel .ecra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mo .tel .ecra img { opacity: 0; transform: scale(1.06) translateY(3%); clip-path: inset(100% 0 0 0); transition: opacity .55s var(--ease), transform .9s var(--ease), clip-path .9s var(--ease-io); }
.mo .app[data-cur="0"] .ecra img:nth-child(1), .mo .app[data-cur="1"] .ecra img:nth-child(2),
.mo .app[data-cur="2"] .ecra img:nth-child(3), .mo .app[data-cur="3"] .ecra img:nth-child(4),
.mo .app:not([data-cur]) .ecra img:nth-child(1) { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.tel .moldura { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.prog { position: absolute; left: 0; bottom: -10px; display: flex; gap: 6px; width: 220px; }
.prog i { height: 3px; flex: 1; border-radius: 2px; background: rgba(255,255,255,.14); transition: background-color .3s; }
.app[data-cur="0"] .prog i:nth-child(1), .app[data-cur="1"] .prog i:nth-child(-n+2), .app[data-cur="2"] .prog i:nth-child(-n+3), .app[data-cur="3"] .prog i { background: var(--ciano); }
@media (max-width: 860px) {
  .app .stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; padding-top: 88px; align-items: start; }
  .app-txt { min-height: 170px; }
  .app-step { inset: 28px 0 auto 0; }
  .tel { width: min(230px, 56vw); }
  .prog { bottom: 0; }
}
.rm .app, html:not(.mo) .app { height: auto; }
.rm .app .stage, html:not(.mo) .app .stage { position: relative; height: auto; }
.rm .app-step, html:not(.mo) .app-step { position: relative; inset: auto; margin-bottom: 28px; }

/* ---------- O OS (B): as peças chegam ao seu lugar ---------- */
.os-sec { background: linear-gradient(180deg, var(--agua), var(--elev)); padding-bottom: clamp(72px, 9vw, 120px); }
.os-vista { position: relative; margin-top: 48px; border-radius: 16px; overflow: hidden; aspect-ratio: 1440/900; background: #0B1120; box-shadow: 0 50px 100px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.12); transform-origin: 50% 0; }
.os-tela { position: absolute; inset: 0; }
.os-tela > img.base { position: absolute; inset: 0; width: 100%; height: 100%; }
.wdg { position: absolute; display: block; border-radius: clamp(8px, 1.1vw, 16px); overflow: hidden; box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); }
.wdg img { width: 100%; height: 100%; }
.w-forecast { left: .97%; top: 3.78%; width: 19.79%; height: 60.44%; }
.w-risco { left: 21.53%; top: 5.22%; width: 19.86%; height: 36.89%; }
.w-kai { left: 21.53%; top: 43.11%; width: 15.69%; height: 41.56%; }
.w-checkin { left: .97%; top: 66.44%; width: 19.79%; height: 23%; }
.w-dock { left: 24.17%; top: 90.56%; width: 51.74%; height: 8.11%; border-radius: clamp(8px, 1vw, 12px); }
.w-barra { left: 0; top: 0; width: 100%; height: 2.9%; border-radius: 0; box-shadow: none; }
.os-nums { display: flex; flex-wrap: wrap; gap: 16px 64px; margin-top: 40px; }
.os-nums p { margin: 0; display: flex; align-items: baseline; gap: 14px; }
.gig-m { font-size: var(--t2); }
.os-nums span { font-size: 14px; color: var(--claro); max-width: 18ch; }

/* ---------- 7 · O MODELO (A) ---------- */
.modelo { background: linear-gradient(180deg, var(--elev), var(--noite)); }
.mod-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 72px; border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.mod { padding: clamp(28px, 4vw, 56px); }
.mod + .mod { box-shadow: inset 1px 0 0 rgba(255,255,255,.1); }
.mod strong { display: block; font-size: var(--t0); line-height: .8; }
.mod.m0 strong { color: var(--espuma); }
.mod.m20 strong { color: var(--ciano); }
.mod h3 { margin: 22px 0 8px; font-size: var(--t4); letter-spacing: -.02em; }
.mod p { margin: 0; color: var(--claro); max-width: 36ch; }
.mod-nota { margin-top: 24px; color: var(--fraco); font-size: 14px; max-width: 70ch; }
@media (max-width: 700px) { .mod-grid { grid-template-columns: 1fr; } .mod + .mod { box-shadow: inset 0 1px 0 rgba(255,255,255,.1); } }

/* ---------- 8 · AS ESCOLAS (A) ---------- */
.escolas { background: var(--noite); overflow: hidden; padding-bottom: clamp(80px, 10vw, 140px); }
.fita { display: flex; gap: 48px; white-space: nowrap; font-size: var(--t2); font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.fita span { color: rgba(241,245,249,.18); }
.fita span em { font-style: normal; font-weight: 500; font-size: 14px; letter-spacing: .02em; color: var(--fraco); margin-left: 12px; vertical-align: .9em; }
.fita span:nth-child(3n+1) { color: var(--espuma); }
.fitas { margin-top: 56px; display: grid; gap: 8px; }

/* ---------- 9 · O FECHO (A) ---------- */
.final { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--abismo); }
.final-foto { position: absolute; inset: -10% 0 0 0; width: 100%; height: 120%; object-fit: cover; object-position: 50% 60%; }
.final::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,7,15,.2) 0%, rgba(3,7,15,.55) 50%, rgba(3,7,15,.92) 100%); }
.final-in { position: relative; z-index: 2; padding: 0 0 clamp(64px, 10vh, 120px); }
.final .h2 { max-width: 15ch; font-size: var(--t1); line-height: 1; }
.cred { display: inline-flex; align-items: center; gap: 12px; margin: 28px 0 32px; padding: 10px 16px; border-radius: 9999px; background: rgba(241,245,249,.92); color: #0B1120; font-size: 14px; font-weight: 600; text-decoration: none; }
.cred img { height: 18px; width: auto; }
@media (max-width: 860px) { .final-in { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } }

.rodape { background: var(--abismo); padding: 56px 0 40px; color: var(--fraco); font-size: 14px; }
.rodape .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: center; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rodape a { text-decoration: none; color: var(--claro); }
.rodape .marca { color: var(--espuma); }
@media (max-width: 860px) { .rodape { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } }

/* ---------- A LINHA DE ÁGUA (a troca) ---------- */
.agua-troca { position: fixed; inset: 0; z-index: 38; pointer-events: none; visibility: hidden; }
.agua-troca.ativa { visibility: visible; pointer-events: auto; }
.agua-vidro { position: absolute; inset: 0; -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); background: rgba(8,62,92,.18); clip-path: inset(100% 0 0 0); }
.agua-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- O SURF TODAY ---------- */
#v-st { background: linear-gradient(180deg, var(--elev) 0, var(--sup) 70vh, var(--noite) 100%); min-height: 100vh; transform-origin: 50% 30%; }
.st-topo { position: relative; min-height: 82vh; min-height: 82svh; display: grid; align-items: end; overflow: hidden; }
.st-foto { position: absolute; inset: -4% 0 0 0; width: 100%; height: 108%; object-fit: cover; object-position: 50% 45%; }
.st-veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,25,41,0) 0%, rgba(11,25,41,.1) 30%, rgba(11,25,41,.8) 66%, var(--elev) 100%); }
.st-topo-in { position: relative; z-index: 2; padding: 140px 0 clamp(36px, 6vh, 64px); }
.st-h1 { max-width: 15ch; }
.st-topo .lead { color: #E2E8F0; }
.st-conta { margin: 18px 0 0; font-size: 14px; color: var(--claro); }
.st-corpo { padding: 8px 0 120px; }
.st-trilho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; margin-bottom: 16px; font-size: 14px; color: var(--fraco); }
.st-trilho button { border: 0; background: none; padding: 12px 6px; margin: 0 -6px; cursor: pointer; color: var(--ciano); font-size: 14px; font-weight: 600; border-radius: 8px; }
.st-trilho .sep { color: rgba(148,163,184,.5); }
.st-trilho [aria-current] { color: var(--espuma); font-weight: 600; }
.st-nota { margin: 48px 0 0; font-size: 12px; color: var(--fraco); }
@media (max-width: 860px) { .st-corpo { padding-bottom: calc(140px + env(safe-area-inset-bottom)); } .st-topo { min-height: 74svh; } }
.st-reg { margin: 40px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ciano); }
.st-reg:first-child { margin-top: 8px; }
.lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.lista li { border-bottom: 1px solid var(--linha); }
.linha { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 24px; align-items: center; padding: 20px 4px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: 12px; transition: background-color .2s, transform .3s var(--ease); }
.linha:hover { background: rgba(255,255,255,.04); transform: translateX(4px); }
.linha-nome { display: block; font-size: var(--t4); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--espuma); }
.linha-meta { display: block; margin-top: 4px; font-size: 14px; color: var(--fraco); }
.linha-mar { display: flex; align-items: center; gap: 14px; }
.linha-mar strong { font-size: var(--t4); font-weight: 700; color: #fff; min-width: 4.4ch; text-align: right; }
.linha-mar em { font-style: normal; font-size: 14px; color: var(--claro); min-width: 11ch; }
.barra-mar { position: relative; width: 72px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.barra-mar i { position: absolute; inset: 0; border-radius: 3px; background: var(--ciano); transform-origin: 0 50%; transform: scaleX(var(--k, .5)); transition: transform 1.1s var(--ease-io) .2s; }
.mo .lista:not(.in) .barra-mar i { transform: scaleX(0); }
.seta { width: 18px; height: 18px; color: var(--fraco); }
.c-top strong { color: var(--ciano); }
.c-baixo em, .c-baixo strong { color: var(--fraco); }
.rank { font-size: 14px; color: var(--fraco); margin-right: 14px; }
@media (max-width: 860px) { .linha { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px 2px; } .linha .seta, .barra-mar, .linha-mar em { display: none; } }
.painel-cab { margin: 8px 0 28px; }
.painel-cab .h2 { color: var(--espuma); }
.painel-cab .lead { margin-top: 14px; }
.praia-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.praia-mar { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.praia-mar dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
.praia-mar dd { margin: 2px 0 0; font-size: 14px; color: var(--claro); }
.praia-mar dd.num { font-size: var(--t4); font-weight: 700; color: #fff; }
.vazio { padding: 28px; border-radius: 24px; background: rgba(255,255,255,.04); color: var(--claro); font-size: 16px; }
.vazio a { color: var(--ciano); }
/* as aulas em cartões, para comparar */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.cartao { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--sup); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 48px -32px rgba(0,0,0,.9); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.cartao:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(34,211,238,.3), 0 30px 60px -30px rgba(0,0,0,.9); }
.cartao-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--elev); }
.cartao-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cartao:hover .cartao-foto img { transform: scale(1.05); }
.cartao-hora { position: absolute; left: 12px; top: 12px; padding: 6px 10px; border-radius: 9999px; background: rgba(11,17,32,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; font-weight: 700; color: #fff; }
.cartao-txt { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.cartao-esc { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
.cartao h3 { margin: 6px 0 4px; font-size: 16px; line-height: 1.35; color: var(--espuma); }
.cartao-meta { margin: 0; font-size: 14px; color: var(--fraco); }
.cartao-aval { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 14px; color: var(--claro); }
.cartao-aval svg { width: 16px; height: 16px; fill: #FBBF24; }
.cartao-mar { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--claro); }
.cartao-mar i { width: 8px; height: 8px; flex: none; border-radius: 9999px; background: var(--ciano); }
.cartao-mar.vazia i { background: var(--vazia); } .cartao-mar.cheia i { background: var(--cheia); }
.cartao-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.cartao-preco { margin: 0; font-size: 14px; color: var(--fraco); }
.cartao-preco b { font-size: var(--t4); color: #fff; }
.cartao .bt { min-height: 44px; font-size: 14px; padding: 6px 6px 6px 16px; }
.cartao .bt .ic { width: 32px; height: 32px; }
.mo .entra { clip-path: inset(0 0 100% 0); transform: translate3d(0, 28px, 0); transition: clip-path 1.1s var(--ease-io), transform 1.1s var(--ease); transition-delay: calc(var(--n, 0) * 70ms); }
.mo .entra.in { clip-path: inset(-4% -2% -4% -2%); transform: none; }
.cartao-aviso { margin: 8px 0 0; font-size: 12px; color: #FBBF24; }
.cartao-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; font-size: 12px; color: var(--fraco); align-items: center; }
.chip-h { padding: 6px 10px; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: var(--claro); text-decoration: none; }
.chip-h:hover { box-shadow: inset 0 0 0 1px var(--ciano); color: #fff; }
.cartao .bt-2 { min-height: 44px; font-size: 14px; padding: 6px 16px; }
.cartao-foto.logo { background: #000; } .cartao-foto.logo img { object-fit: contain; padding: 8% 18%; }

/* o menu Entrar (os três perfis de hoje) */
.nav-links .entrar { border: 0; background: none; cursor: pointer; font-size: 14px; color: #DCE3EC; padding: 10px 12px; border-radius: 9999px; }
.nav-links .entrar:hover, .nav-links .entrar[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.06); }
.menu-entrar { position: fixed; z-index: 41; top: 92px; right: max(12px, calc(50% - 560px + 150px)); width: 300px; padding: 8px; border-radius: 24px; background: rgba(11,17,32,.9); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 50px -20px rgba(0,0,0,.8); }
.menu-entrar:not([hidden]) { animation: menu-abre .45s var(--ease) both; }
@keyframes menu-abre { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-entrar a { display: block; padding: 12px 14px; border-radius: 16px; text-decoration: none; }
.menu-entrar a:hover { background: rgba(255,255,255,.06); }
.menu-entrar b { display: block; font-size: 16px; color: var(--espuma); }
.menu-entrar span { font-size: 14px; color: var(--fraco); }
.app-baixar { position: absolute; left: 0; bottom: -88px; }
@media (max-width: 860px) { .app-baixar { display: none; } }

/* as escolas ligam à sua página */
.fita a { text-decoration: none; color: inherit; }
.fita a span { color: rgba(241,245,249,.18); transition: color .3s; }
.fita a:nth-child(3n+1) span { color: var(--espuma); }
.fita a:hover span { color: var(--ciano); }

/* perguntas frequentes (dobradas) */
.perguntas { background: var(--noite); padding-top: clamp(72px, 9vw, 120px); }
.pf-grelha { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.pf { border-bottom: 1px solid var(--linha); }
.pf:first-child { border-top: 1px solid var(--linha); }
.pf summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font-size: var(--t4); font-weight: 700; letter-spacing: -.02em; color: var(--espuma); }
.pf summary::-webkit-details-marker { display: none; }
.pf summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2px solid var(--ciano); border-bottom: 2px solid var(--ciano); transform: rotate(45deg); transition: transform .4s var(--ease); }
.pf[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.pf p { margin: 0 0 22px; color: var(--claro); max-width: 60ch; }
@media (max-width: 860px) { .pf-grelha { grid-template-columns: 1fr; gap: 24px; } }

/* o rodapé completo */
.rodape { padding: 72px 0 40px; }
.rodape .wrap { display: block; }
.rp-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 32px; border-bottom: 1px solid var(--linha); }
.rp-lojas { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-lojas .bt { min-height: 44px; font-size: 14px; padding: 6px 18px; }
.rp-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 32px 0; }
.rp-col summary { list-style: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ciano); margin-bottom: 14px; }
.rp-col summary::-webkit-details-marker { display: none; }
.rp-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rp-col a { font-size: 14px; color: var(--claro); text-decoration: none; }
.rp-col a:hover { color: #fff; }
.rp-linha { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between; padding: 24px 0; border-top: 1px solid var(--linha); }
.rp-linguas { display: flex; gap: 4px; }
.rp-linguas a { padding: 8px 10px; border-radius: 9999px; font-size: 14px; color: var(--claro); text-decoration: none; }
.rp-linguas a[aria-current] { background: rgba(255,255,255,.08); color: #fff; }
.rp-redes, .rp-parc { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; font-size: 14px; }
.rp-redes a, .rp-parc a { color: var(--claro); text-decoration: none; }
.rp-parc span { color: var(--fraco); }
.rp-legal { margin: 8px 0 0; font-size: 12px; color: var(--fraco); line-height: 1.7; }
@media (max-width: 860px) {
  .rp-cols { grid-template-columns: 1fr; gap: 0; padding: 16px 0; }
  .rp-col { border-bottom: 1px solid var(--linha); }
  .rp-col summary { margin: 0; padding: 16px 0; cursor: pointer; }
  .rp-col ul { padding-bottom: 16px; }
}

/* as próximas aulas (o painel de hoje) e a ficha da aula */
.prox { margin: 24px 0 64px; }
.prox-cab .lead { margin-top: 12px; }
.prox-fila { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 240px); gap: 14px; overflow-x: auto; padding: 24px 2px 16px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.prox-dia { grid-row: 1; align-self: end; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ciano); }
.prox-c { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; padding: 16px; border-radius: 24px; overflow: hidden; text-decoration: none; scroll-snap-align: start; background: var(--sup); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .4s var(--ease); }
.prox-c:hover { transform: translateY(-4px); }
.prox-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.prox-c::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,26,0) 20%, rgba(6,14,26,.92) 100%); }
.prox-c > span { position: relative; z-index: 1; }
.prox-t { display: flex; justify-content: space-between; font-size: var(--t4); color: #fff; }
.prox-n { margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--espuma); }
.prox-m { font-size: 12px; color: var(--claro); }
.prox-pe { margin: 8px 0 0; font-size: 14px; color: var(--fraco); }
.prox-pe a { color: var(--ciano); }
.ficha { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 24px; background: var(--sup); color: var(--espuma); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -30px rgba(0,0,0,.9); }
.ficha::backdrop { background: rgba(3,7,15,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mo .ficha[open] { animation: ficha-abre .7s var(--ease-io) both; }
@keyframes ficha-abre { from { clip-path: inset(40% 10% 40% 10% round 24px); opacity: 0; } to { clip-path: inset(0 round 24px); opacity: 1; } }
.ficha-in { position: relative; padding: 28px; }
.ficha-x { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border: 0; border-radius: 9999px; background: rgba(255,255,255,.08); color: #fff; font-size: 24px; cursor: pointer; }
.ficha-tags { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ciano); }
.ficha-esc { display: inline-block; margin: 8px 0 4px; font-size: 14px; color: var(--claro); }
.ficha .h2 { font-size: var(--t3); }
.ficha-quando { margin: 10px 0 0; font-size: 16px; color: var(--claro); }
.ficha-quadro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0; }
.ficha-quadro div { padding: 12px; border-radius: 16px; background: rgba(255,255,255,.05); }
.ficha-quadro dd { margin: 0; font-size: 16px; font-weight: 700; } .ficha-quadro dt { font-size: 12px; color: var(--fraco); text-transform: uppercase; letter-spacing: .06em; }
.ficha h3 { margin: 18px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
.ficha p { margin: 0; font-size: 14px; color: var(--claro); }
.ficha-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.ficha-acoes .bt-2 { border: 0; cursor: pointer; }
.ficha-lang button { margin-left: 6px; padding: 6px 10px; border: 0; border-radius: 9999px; background: rgba(255,255,255,.06); color: var(--claro); cursor: pointer; font-size: 12px; }
.ficha-lang button[aria-pressed="true"] { background: var(--ciano-e); color: #fff; }
.ficha-posters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px !important; }
.ficha-posters a { padding: 8px 12px; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: var(--claro); text-decoration: none; font-size: 12px; }
.ficha-volta { margin-top: 20px; border: 0; background: none; color: var(--ciano); font-size: 14px; cursor: pointer; padding: 10px 0; }
@media (max-width: 860px) { .ficha-quadro { grid-template-columns: 1fr 1fr; } }

/* sem clarão: um título a partir fica escondido até o motor o partir (o motor põe-lhe o aria-label) */
.mo [data-split]:not([aria-label]) { visibility: hidden; }

/* «Ver tudo» e os painéis por porta */
.bt-3 { border: 0; background: none; cursor: pointer; color: var(--espuma); padding: 8px 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(241,245,249,.4); }
.bt-3:hover { text-decoration-color: var(--ciano); }
.rp-lojas .bt-2 { border: 0; cursor: pointer; }
.painel { margin: 0 0 0 auto; width: min(720px, 100%); height: 100dvh; max-height: none; padding: 0; border: 0; border-radius: 24px 0 0 24px; background: var(--sup); color: var(--espuma); box-shadow: -40px 0 80px -30px rgba(0,0,0,.9); }
.painel::backdrop { background: rgba(3,7,15,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mo .painel[open] { animation: painel-abre .8s var(--ease-io) both; }
@keyframes painel-abre { from { clip-path: inset(0 0 0 100% round 24px); } to { clip-path: inset(0 0 0 0 round 24px 0 0 24px); } }
.pn-in { position: relative; padding: 32px clamp(20px, 4vw, 40px) 48px; }
.pn-in .h2 { font-size: var(--t3); margin-bottom: 18px; }
.pn-z { border-top: 1px solid var(--linha); }
.pn-z summary { cursor: pointer; padding: 16px 0; font-size: 16px; font-weight: 700; color: var(--espuma); }
.pn-z ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.pn-z li { font-size: 14px; color: var(--claro); line-height: 1.55; }
.pn-tipo { display: inline-block; margin-right: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fraco); }
.pn-lig a { color: var(--ciano); font-weight: 600; } .pn-lig span, .pn-bt span { color: var(--fraco); margin-left: 8px; }
.pn-img img { max-width: 220px; border-radius: 16px; margin-bottom: 6px; }
.pn-img span { display: block; font-size: 12px; color: var(--fraco); }
@media (max-width: 860px) { .painel { border-radius: 0; } }
/* a regra do rodapé da A (.rodape nav { display: flex }) não pode ganhar às colunas */
.rodape nav.rp-cols { display: grid; gap: 24px; }
@media (max-width: 860px) { .rodape nav.rp-cols { gap: 0; } }
@media (max-width: 860px) { .rodape { padding-bottom: calc(120px + env(safe-area-inset-bottom)); } }

/* ===================== VOLTA 2 (14/10, 22h50): cenas juntas, página mais curta ===================== */
/* a descida: véu por trás das frases (o branco tem de ler-se sobre o mar claro), os números no mar */
.descida { height: 175vh; }
.d-veu { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 34% at 50% 50%, rgba(6,14,26,.74) 0%, rgba(6,14,26,.6) 55%, rgba(6,14,26,.22) 82%, rgba(6,14,26,0) 100%); }
.d-cont { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(24px, 6vh, 56px); display: flex; flex-wrap: wrap; gap: 8px 48px; z-index: 2; }
.d-cont p { margin: 0; display: flex; align-items: baseline; gap: 12px; padding: 10px 18px 12px; border-radius: 9999px; background: rgba(6,14,26,.62); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.d-cont strong { font-size: var(--t3); line-height: 1; color: #fff; }
.d-cont span { font-size: 14px; color: var(--claro); }
.d-letra .linha { white-space: nowrap; font-size: var(--t0); line-height: .86; letter-spacing: -.005em; text-align: left; }
.d-letra .linha + .linha { color: var(--ciano); }
.mo .d-letra { place-content: center start; padding: 0; overflow: hidden; }
.d-letra small { max-width: 52ch; margin: 28px var(--gut) 0; text-align: left; }
.rm .d-letra .linha, html:not(.mo) .d-letra .linha { white-space: normal; font-size: var(--t1); }

/* as portas: uma só cena presa cada */
.porta-cena { background: var(--elev); }
.porta-app { height: 185vh; }
.porta-os { height: 175vh; }
.porta-inst { height: 125vh; }
.escuro { position: absolute; inset: 0; background: var(--sup); opacity: 0; pointer-events: none; }
.porta-cena .legenda { z-index: 3; }
.cena-app { position: absolute; z-index: 4; top: 96px; bottom: 4vh; right: var(--gut); width: min(640px, 52vw); display: grid; grid-template-columns: 1fr 250px; gap: 36px; align-items: center; }
.cena-app .app-txt { min-height: 260px; }
.cena-app .tel { width: 250px; margin: 0; }
.mo .porta-app .tel .ecra img { opacity: 0; transform: scale(1.06) translateY(3%); clip-path: inset(100% 0 0 0); transition: opacity .55s var(--ease), transform .9s var(--ease), clip-path .9s var(--ease-io); }
.mo .porta-app[data-cur="0"] .ecra img:nth-child(1), .mo .porta-app[data-cur="1"] .ecra img:nth-child(1), .mo .porta-app[data-cur="2"] .ecra img:nth-child(2),
.mo .porta-app[data-cur="3"] .ecra img:nth-child(3), .mo .porta-app[data-cur="4"] .ecra img:nth-child(4),
.mo .porta-app:not([data-cur]) .ecra img:nth-child(1) { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.porta-app[data-cur="1"] .prog i:nth-child(1), .porta-app[data-cur="2"] .prog i:nth-child(-n+2), .porta-app[data-cur="3"] .prog i:nth-child(-n+3), .porta-app[data-cur="4"] .prog i { background: var(--ciano); }
.cena-app .app-baixar { position: absolute; left: 0; bottom: -84px; }
.cena-os { position: absolute; z-index: 4; top: 100px; bottom: 5vh; left: var(--gut); right: var(--gut); display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 40px; align-items: center; }
.os-cab h3 { margin: 0 0 12px; font-size: var(--t4); line-height: 1.2; letter-spacing: -.02em; }
.os-cab p { margin: 0; font-size: 16px; color: var(--claro); }
.cena-os .os-vista { margin: 0; transform-origin: 50% 100%; }
.cena-os .os-nums { margin-top: 28px; gap: 12px 32px; }
.inst-escolas { position: absolute; z-index: 2; left: 0; right: 0; top: clamp(260px, 40vh, 380px); }
.inst-escolas .etq { margin: 0 var(--gut) 12px; }
.inst-escolas .etq span { display: block; margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; color: var(--claro); }
.inst-escolas .fitas { margin: 0; }
.inst-escolas .fita { font-size: var(--t3); gap: 36px; }
.inst-escolas .fita a span { color: rgba(241,245,249,.34); }
.inst-escolas .fita a:nth-child(3n+1) span { color: var(--espuma); }
@media (max-width: 860px) {
  .cena-app { top: 84px; bottom: calc(92px + env(safe-area-inset-bottom)); left: var(--gut); right: var(--gut); width: auto; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; align-items: start; justify-items: center; }
  .cena-app .tel { width: min(190px, 46vw); order: 2; }
  .cena-app .app-txt { order: 1; min-height: 150px; width: 100%; }
  .cena-app .app-step { inset: 26px 0 auto 0; }
  .cena-app .app-step h3 { font-size: var(--t4); }
  .cena-app .app-step p { font-size: 14px; }
  .cena-app .app-baixar { display: none; }
  .cena-os { top: 84px; bottom: calc(92px + env(safe-area-inset-bottom)); grid-template-columns: 1fr; gap: 16px; align-content: start; }
  .os-cab p { font-size: 14px; }
  .cena-os .os-nums { margin-top: 14px; }
  .inst-escolas { top: 200px; }
}
.rm .porta-cena, html:not(.mo) .porta-cena { height: auto; }
.rm .porta-cena > .stage, html:not(.mo) .porta-cena > .stage { height: auto; min-height: 100vh; display: grid; gap: 24px; padding: 120px var(--gut) 40px; }
.rm .porta-cena .foto, html:not(.mo) .porta-cena .foto { position: relative; height: 60vh; border-radius: 24px; }
.rm .porta-cena .hora, .rm .porta-cena .escuro, html:not(.mo) .porta-cena .hora, html:not(.mo) .porta-cena .escuro { display: none; }
.rm .porta-cena .legenda, .rm .cena-app, .rm .cena-os, .rm .inst-escolas, html:not(.mo) .porta-cena .legenda, html:not(.mo) .cena-app, html:not(.mo) .cena-os, html:not(.mo) .inst-escolas { position: relative; inset: auto; width: auto; }
.rm .app-step, html:not(.mo) .app-step { position: relative; inset: auto; margin-bottom: 20px; }

/* margens mais curtas (a página tinha 16,9 ecrãs) */
.sec { padding: clamp(72px, 8.4vw, 120px) 0; }
.modelo .mod-grid { margin-top: 48px; }
.perguntas { padding: clamp(56px, 6vw, 88px) 0; }
.final { min-height: 72vh; min-height: 72svh; }
.rp-col ul { gap: 6px; }
.rodape { padding-top: 56px; }

/* ===================== VOLTA 3 (14/10, 23h): só imagens verdadeiras, produto direito, texto inteiro ===================== */
/* o mar: fotografia viva (mexe com o rolar), véu para a frase, números dos três países */
.d-foto-caixa { position: absolute; inset: 0; overflow: hidden; }
.d-foto-caixa .d-foto { position: absolute; inset: -6% 0 0 0; width: 100%; height: 112%; object-fit: cover; }
.descida .d-fundo { background: var(--sup); opacity: 0; transform: none; }
.d-veu { background: radial-gradient(ellipse 66% 40% at 50% 46%, rgba(6,14,26,.8) 0%, rgba(6,14,26,.68) 50%, rgba(6,14,26,.3) 82%, rgba(6,14,26,.12) 100%), linear-gradient(180deg, rgba(6,14,26,0) 55%, rgba(6,14,26,.7) 100%); }
.descida .d-textos { padding-bottom: 12vh; }
.d-cont { align-items: flex-end; }
.d-cont .d-cont-n { padding: 10px 18px 12px; }
.d-cont .d-cont-p { flex-basis: 100%; margin: 4px 0 0; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 14px; color: #E2E8F0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.d-cont-p i { width: 4px; height: 4px; border-radius: 9999px; background: var(--ciano); margin: 0 14px; }
@media (max-width: 860px) { .d-cont { gap: 8px 10px; bottom: calc(96px + env(safe-area-inset-bottom)); } .d-cont .d-cont-n { padding: 8px 14px 10px; } .d-cont-p i { margin: 0 8px; } .descida .d-textos { padding-bottom: 26vh; } }

/* as portas: a fotografia fica sempre (com vida), o texto entra e pára inteiro */
.porta-cena .legenda .etq { margin-bottom: 12px; }
.porta-cena .legenda .h2 { max-width: 15ch; }
.porta-cena .foto img { position: absolute; inset: -5% 0; width: 100%; height: 110%; object-fit: cover; }
.plano .foto::after { background: linear-gradient(180deg, rgba(6,14,26,.45) 0%, rgba(6,14,26,.15) 30%, rgba(6,14,26,.55) 58%, rgba(6,14,26,.92) 100%); }
/* os 4 ecrãs reais da app, direitos, a entrar uns por cima dos outros */
.cena-app { grid-template-columns: 1fr 260px; }
.pilha { position: relative; width: 260px; aspect-ratio: 620 / 1342; }
.pilha img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; background: var(--sup); box-shadow: 0 34px 70px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.14); transition: transform .9s var(--ease), opacity .6s var(--ease), clip-path 1s var(--ease-io); transform-origin: 50% 0; }
.mo .porta-app .pilha img { opacity: 0; transform: translateY(80px) scale(.96); clip-path: inset(100% 0 0 0 round 28px); }
.mo .porta-app:not([data-cur]) .pilha img:nth-child(1), .mo .porta-app[data-cur="0"] .pilha img:nth-child(1), .mo .porta-app[data-cur="1"] .pilha img:nth-child(1),
.mo .porta-app[data-cur="2"] .pilha img:nth-child(2), .mo .porta-app[data-cur="3"] .pilha img:nth-child(3), .mo .porta-app[data-cur="4"] .pilha img:nth-child(4) { opacity: 1; transform: none; clip-path: inset(0 round 28px); }
.mo .porta-app[data-cur="2"] .pilha img:nth-child(1), .mo .porta-app[data-cur="3"] .pilha img:nth-child(2), .mo .porta-app[data-cur="4"] .pilha img:nth-child(3) { opacity: .6; transform: translateY(-26px) scale(.93); clip-path: inset(0 round 28px); }
.mo .porta-app[data-cur="3"] .pilha img:nth-child(1), .mo .porta-app[data-cur="4"] .pilha img:nth-child(2) { opacity: .32; transform: translateY(-50px) scale(.86); clip-path: inset(0 round 28px); }
.mo .porta-app[data-cur="4"] .pilha img:nth-child(1) { opacity: .14; transform: translateY(-72px) scale(.8); clip-path: inset(0 round 28px); }
.rm .pilha, html:not(.mo) .pilha { width: 100%; aspect-ratio: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rm .pilha img, html:not(.mo) .pilha img { position: static; height: auto; }
/* o OS real, plano e de frente, numa moldura simples */
.cena-os .os-vista { border-radius: 16px; box-shadow: 0 40px 80px -36px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14); }
/* as 20 escolas: nomes inteiros, em pílulas que se lêem */
.inst-escolas { top: 108px; left: var(--gut); right: var(--gut); max-width: 980px; }
.inst-escolas .etq { margin: 0 0 12px; }
.chips-esc { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-esc a { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 9999px; background: rgba(6,14,26,.62); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: box-shadow .3s; }
.chips-esc a:hover { box-shadow: inset 0 0 0 1px var(--ciano); }
.chips-esc em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--claro); }
@media (max-width: 860px) {
  .inst-escolas { top: 92px; left: 0; right: 0; }
  .inst-escolas .etq { margin: 0 var(--gut) 10px; }
  .chips-esc { flex-wrap: nowrap; overflow-x: auto; padding: 0 var(--gut) 6px; scroll-snap-type: x mandatory; }
  .chips-esc a { scroll-snap-align: start; }
  .pilha { width: min(190px, 46vw); }
  .cena-app { grid-template-columns: 1fr; }
}
/* o modelo, por cima de uma fotografia */
.modelo-foto { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: var(--sup); padding: 110px 0 72px; }
.mod-foto { position: absolute; inset: 0; }
.mod-foto img { position: absolute; inset: -5% 0; width: 100%; height: 110%; object-fit: cover; }
.mod-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,14,26,.86) 0%, rgba(6,14,26,.7) 50%, rgba(6,14,26,.45) 100%); }
.mod-in { position: relative; z-index: 2; }
.modelo-foto .mod-grid { background: rgba(6,14,26,.5); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); max-width: 900px; }
.modelo-foto .mod strong { font-size: var(--t1); }
.modelo-foto .mod-nota { color: #E2E8F0; }
@media (max-width: 860px) { .mod-foto::after { background: rgba(6,14,26,.74); } .modelo-foto { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } }
/* perguntas frequentes no cimo do rodapé */
.rodape .pf-grelha { padding: 8px 0 40px; border-bottom: 1px solid var(--linha); margin-bottom: 8px; }
.pf-tit { margin: 0; font-size: var(--t3); line-height: 1.1; letter-spacing: -.03em; color: var(--espuma); }
.rodape .pf summary { font-size: 16px; }
.rodape .pf p { font-size: 14px; }

/* ===================== O SURF TODAY DE HOJE, MELHORADO (14-15/10) ===================== */
.st-hero { position: relative; min-height: 92vh; min-height: 92svh; display: grid; align-items: center; overflow: hidden; text-align: center; }
.st-hero .st-foto { position: absolute; inset: -4% 0 0 0; width: 100%; height: 108%; object-fit: cover; opacity: .8; }
.st-hero .st-veu { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(6,14,26,.62), rgba(6,14,26,.3) 70%), linear-gradient(180deg, rgba(6,14,26,.4) 0%, rgba(6,14,26,.2) 40%, var(--elev) 100%); }
.st-hero-in { position: relative; z-index: 2; padding: 130px 0 56px; display: grid; justify-items: center; }
.st-hero .st-h1 { max-width: 14ch; margin: 0 auto; }
.st-hero .lead { margin: 18px auto 0; max-width: 46ch; color: #E2E8F0; }
.st-conta { margin: 14px 0 0; font-size: 14px; color: var(--claro); }
.st-procura { margin: 28px auto 0; width: min(560px, 100%); display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 56px; border-radius: 9999px; background: rgba(11,17,32,.55); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px -20px rgba(0,0,0,.8); }
.st-procura svg { width: 20px; height: 20px; color: var(--claro); flex: none; }
.st-procura input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #fff; font: inherit; font-size: 16px; outline: none; }
.st-procura input::placeholder { color: var(--claro); }
.st-procura:focus-within { box-shadow: inset 0 0 0 2px var(--ciano), 0 18px 40px -20px rgba(0,0,0,.8); }
.st-tabs { display: inline-flex; gap: 4px; margin-top: 18px; padding: 4px; border-radius: 9999px; background: rgba(11,17,32,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.st-tabs button { border: 0; padding: 10px 18px; border-radius: 9999px; background: none; color: var(--claro); font-weight: 600; font-size: 14px; cursor: pointer; min-height: 44px; }
.st-tabs button[aria-selected="true"] { background: linear-gradient(135deg, var(--ciano-e), var(--ciano-f)); color: #fff; }
.st-nota-reg { margin: 14px 0 0; font-size: 14px; color: var(--claro); max-width: 52ch; }
.st-local { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 16px 0 0; padding: 10px 18px; border-radius: 9999px; background: rgba(11,17,32,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-size: 14px; color: var(--claro); }
.st-local a { color: var(--ciano); font-weight: 600; }
.st-atalhos { display: flex; gap: 10px; margin: 16px 0 0; }
.st-atalhos a { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; min-height: 44px; border-radius: 9999px; background: rgba(11,17,32,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #fff; text-decoration: none; font-size: 14px; }
.st-atalhos span { color: var(--claro); font-size: 12px; }
.st-paises { margin: 8px 0 14px; }
.st-paises select { appearance: none; -webkit-appearance: none; padding: 10px 36px 10px 16px; min-height: 44px; border: 0; border-radius: 9999px; background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E1' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.st-paises select option { color: #0B1120; }
.st-fila { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 280px); gap: 14px; overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.zc { position: relative; height: 220px; padding: 0; border: 0; border-radius: 24px; overflow: hidden; cursor: pointer; scroll-snap-align: start; text-align: left; color: #fff; background: var(--sup); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: transform .4s var(--ease); }
.zc:hover { transform: translateY(-4px); }
.zc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.zc:hover img { transform: scale(1.06); }
.zc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,26,.1) 30%, rgba(6,14,26,.9) 100%); }
.zc-todas { display: grid; place-items: center; background: rgba(34,211,238,.1); box-shadow: inset 0 0 0 1px rgba(34,211,238,.5); font-size: 16px; }
.zc-todas::after { display: none; }
.zc-ex { position: absolute; z-index: 1; top: 12px; right: 12px; padding: 6px 10px; border-radius: 9999px; background: rgba(11,17,32,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.zc-t { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 2px; }
.zc-t b { font-size: var(--t4); letter-spacing: -.02em; }
.zc-t span { font-size: 14px; color: #E2E8F0; }
.zc-t em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--ciano); }
.st-filtros { margin: 4px 0 18px; }
.st-filtros summary { cursor: pointer; display: inline-flex; padding: 10px 16px; min-height: 44px; align-items: center; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 14px; font-weight: 600; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.st-chips a, .st-chips button { padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; border: 0; border-radius: 9999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: var(--espuma); text-decoration: none; font-size: 14px; cursor: pointer; }
.st-chips button[aria-pressed="true"] { background: var(--ciano-e); color: #fff; }
.st-chips a:hover, .st-chips button:hover { box-shadow: inset 0 0 0 1px var(--ciano); }
.st-escolhe, .st-equip { display: flex; align-items: center; gap: 16px; margin: 18px auto 0; max-width: 720px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(160deg, rgba(19,35,63,.85), rgba(15,23,42,.6)); box-shadow: inset 0 0 0 1px rgba(6,182,212,.25); text-decoration: none; color: inherit; }
.st-escolhe b, .st-equip b { display: block; font-size: 16px; color: #fff; }
.st-escolhe span, .st-equip span { font-size: 14px; color: var(--claro); }
.st-escolhe-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9999px; background: rgba(34,211,238,.12); color: var(--ciano); }
.st-escolhe-ic svg { width: 20px; height: 20px; }
.st-equip { margin-top: 40px; } .st-equip .seta { margin-left: auto; flex: none; }
.st-todas { text-align: center; margin: 18px 0 40px; }
.st-todas .bt-2, .st-lojas .bt-2 { border: 0; cursor: pointer; padding: 8px 22px; }
.st-pronto { text-align: center; margin: 72px 0 0; }
.st-pronto .h2 { margin: 0 auto; }
.st-pronto > p { margin: 12px 0 22px; color: var(--claro); }
.st-lojas { display: flex; justify-content: center; gap: 10px; margin: 22px 0 0; }
.st-browser { margin: 12px 0 0; font-size: 14px; color: var(--fraco); } .st-browser a { color: var(--ciano); }
.st-guias { margin: 72px 0 0; padding-top: 28px; border-top: 1px solid var(--linha); }
.st-guias .etq { margin: 22px 0 6px; }
.st-guias .st-chips a { font-size: 14px; }
/* a capa da zona e da praia (a fotografia verdadeira da página de hoje, a mexer com o rolar) */
.st-capa { position: relative; min-height: 76vh; min-height: 76svh; display: grid; align-items: end; overflow: hidden; }
.st-capa-foto { position: absolute; inset: -6% 0 0 0; width: 100%; height: 112%; object-fit: cover; transform-origin: 50% 40%; }
.st-capa .st-veu { background: linear-gradient(180deg, rgba(6,14,26,.45) 0%, rgba(6,14,26,.2) 30%, rgba(6,14,26,.75) 72%, var(--elev) 100%); }
.st-capa-in { position: relative; z-index: 2; padding: 140px 0 48px; }
.st-capa .st-trilho { margin-bottom: 8px; color: #E2E8F0; }
.st-capa .st-trilho button { color: #fff; }
.st-zona-h1 { text-transform: uppercase; letter-spacing: -.02em; }
.st-capa .st-conta { font-size: 16px; color: #fff; }
.st-capa .bt { margin-top: 22px; }
.st-hoje { margin: 10px 0 0; font-size: 16px; color: #fff; }
.st-pilulas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; }
.st-pilulas span, .st-pilulas a:not(.bt) { padding: 8px 14px; border-radius: 9999px; background: rgba(11,17,32,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 14px; color: #fff; text-decoration: none; }
.st-pilulas .bt { margin: 0; }
.pgrelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; }
.pc { position: relative; height: 300px; padding: 0; border: 0; border-radius: 24px; overflow: hidden; cursor: pointer; text-align: left; color: #fff; background: linear-gradient(160deg, var(--agua), var(--sup)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: transform .4s var(--ease); }
.pc:hover { transform: translateY(-4px); }
.pc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pc:hover img { transform: scale(1.06); }
.pc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,26,0) 35%, rgba(6,14,26,.92) 100%); }
.pc-ini { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--t1); font-weight: 800; color: rgba(255,255,255,.18); }
.pc-preco { position: absolute; z-index: 1; top: 12px; right: 12px; padding: 6px 10px; border-radius: 12px; background: rgba(11,17,32,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 14px; font-weight: 800; color: var(--ciano); }
.pc-preco small { font-size: 12px; font-weight: 500; color: var(--claro); }
.pc-t { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 6px; }
.pc-t b { font-size: var(--t4); letter-spacing: -.02em; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chips i { font-style: normal; padding: 4px 10px; border-radius: 9999px; background: rgba(255,255,255,.14); font-size: 12px; }
.pc-chips i.c { background: rgba(34,211,238,.22); color: #CFFAFE; }
.pc-mar { font-size: 14px; color: #E2E8F0; }
.st-agora { margin: 8px 0 48px; padding: 24px; border-radius: 24px; background: linear-gradient(160deg, rgba(19,35,63,.85), rgba(15,23,42,.6)); box-shadow: inset 0 0 0 1px rgba(6,182,212,.25); }
.st-agora .h2 { font-size: var(--t3); margin-bottom: 16px; }
.st-aulas .h2, .st-pedir .h2 { margin-bottom: 8px; }
.st-sub { margin: 0 0 16px; font-size: 14px; color: var(--claro); }
.st-niveis { margin: 0 0 18px; }
.st-sep { margin-top: 48px; }
.st-pedir { margin: 56px 0 0; padding: 28px; border-radius: 24px; background: linear-gradient(160deg, rgba(19,35,63,.85), rgba(15,23,42,.6)); box-shadow: inset 0 0 0 1px rgba(6,182,212,.25); }
.st-pedir p:not(.etq) { margin: 8px 0 20px; color: var(--claro); max-width: 62ch; }
/* a confiança junto ao botão, como nas melhores lojas de experiências */
.confia { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; font-size: 12px; color: var(--claro); }
.confia span::before { content: ''; display: inline-block; width: 6px; height: 10px; margin: 0 7px 1px 1px; border-right: 2px solid var(--vazia); border-bottom: 2px solid var(--vazia); transform: rotate(45deg); }
.verif { margin-left: 8px; padding: 2px 8px; border-radius: 9999px; background: rgba(52,211,153,.14); color: #A7F3D0; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.ficha .confia { margin-bottom: 4px; }
@media (max-width: 860px) {
  .st-hero-in { padding: 110px 0 40px; }
  .st-fila { grid-auto-columns: minmax(220px, 72vw); }
  .zc { height: 200px; }
  .st-capa-in { padding-bottom: 32px; }
  .pgrelha { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pc { height: 220px; } .pc-t b { font-size: 16px; } .pc-mar { font-size: 12px; }
  .st-equip, .st-escolhe { padding: 14px 16px; }
}

/* ===================== A BARRA MAIS VIDRO (15/10, pedido do dono) =====================
   Mais transparente (.6 em vez de .84), desfoque mais forte, linha de luz por cima, brilho por baixo.
   O texto passa a branco para manter 4,5:1 sobre os fundos mais claros (medido na régua). */
.nav, .pilula { background: linear-gradient(180deg, rgba(11,17,32,.62), rgba(11,17,32,.56)); -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(.92); backdrop-filter: blur(26px) saturate(190%) brightness(.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 40px -16px rgba(0,0,0,.7), 0 12px 34px -20px rgba(34,211,238,.45); }
.nav { overflow: hidden; }
.nav::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 48%); }
.nav::after { left: 14%; right: 14%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(34,211,238,.7), transparent); opacity: 1; }
.nav-brilho { border-radius: 9999px; }
.nav .marca, .nav-links a, .nav-links .entrar, .troca .op-inicio, .troca.em-st .op-st { color: #fff; }
.troca-op, .troca.em-st .op-inicio { color: #F1F5F9; }
.pil-cta { display: none; }
@media (max-width: 860px) {
  .pilula { display: flex; align-items: center; gap: 6px; }
  .pilula .troca { min-width: 196px; height: 48px; }
  .pilula .troca-op { padding: 0 10px; font-size: 14px; }
  .pil-cta { display: inline-flex; min-height: 48px; padding: 0 18px; font-size: 14px; }
}
.d-cont .d-cont-p { flex-basis: auto; padding: 10px 18px; border-radius: 9999px; background: rgba(6,14,26,.62); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
@media (max-width: 860px) { .d-cont .d-cont-p { border-radius: 16px; font-size: 12px; } }

/* ===================== VOLTA 4 (15/10): um só mar por trás, a troca nova, fotografias da intro ===================== */
/* o vídeo do mar numa camada fixa: o mesmo no Início e no Surf Today */
#fundo-mar { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0F172A; view-transition-name: fundo; }
#fundo-mar .fm-midia, #fundo-mar .hero-assenta { position: absolute; inset: 0; transform-origin: 50% 30%; will-change: transform; }
#fundo-mar video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
#fundo-mar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,13,26,.5) 0%, rgba(5,13,26,.85) 100%); }
main { position: relative; z-index: 1; view-transition-name: conteudo; }
.topo-palco > .hero { background: none; }
.hero > div[style*="linear-gradient(180deg,rgba(5,13,26,0.5)"] { display: none; }
#v-st { background: none; }
#v-st .st-corpo { background: var(--elev); }
.st-hero .st-veu { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(6,14,26,.5), rgba(6,14,26,.12) 70%), linear-gradient(180deg, rgba(6,14,26,0) 60%, var(--elev) 100%); }
.nav { view-transition-name: barra; } .pilula { view-transition-name: pilula; } .rodape { position: relative; }
/* a troca com View Transitions: o mar e a barra ficam vivos; só o conteúdo sai e entra */
::view-transition-group(fundo), ::view-transition-group(barra), ::view-transition-group(pilula), ::view-transition-group(root) { animation: none; }
::view-transition-old(fundo), ::view-transition-old(barra), ::view-transition-old(pilula), ::view-transition-old(root) { display: none; }
::view-transition-new(fundo), ::view-transition-new(barra), ::view-transition-new(pilula), ::view-transition-new(root) { animation: none; }
::view-transition-group(conteudo) { animation: none; }
::view-transition-old(conteudo) { animation: vt-sai 220ms cubic-bezier(.22,1,.36,1) both; }
::view-transition-new(conteudo) { animation: vt-entra 440ms cubic-bezier(.22,1,.36,1) 160ms both; }
.vt-volta::view-transition-old(conteudo) { animation-name: vt-sai-volta; }
.vt-volta::view-transition-new(conteudo) { animation-name: vt-entra-volta; }
@keyframes vt-sai { to { opacity: 0; transform: translateY(-18px); filter: blur(6px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } }
@keyframes vt-sai-volta { to { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes vt-entra-volta { from { opacity: 0; transform: translateY(-24px); filter: blur(8px); } }
/* o polegar desliza com um leve ressalto */
.troca-polegar { transition: transform .55s cubic-bezier(.34,1.56,.64,1); }
/* os cartões ganham luz ao passar o rato (a inclinação é feita em troca.js) */
.cartao, .zc, .pc { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .4s var(--ease); transform-style: preserve-3d; }
.cartao { position: relative; }
.cartao::after, .zc::before, .pc::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); background: radial-gradient(420px circle at var(--luz-x, 50%) var(--luz-y, 50%), rgba(255,255,255,.14), transparent 45%); }
.com-luz::after, .zc.com-luz::before, .pc.com-luz::before { opacity: 1; }
.bt-1 { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s var(--ease), background-color .2s; }
/* os vídeos das cenas: o mesmo mar, noutro enquadramento */
.cena-video { position: absolute; inset: -6% 0 0 0; width: 100%; height: 112%; object-fit: cover; }
.d-video { object-position: 50% 30%; }
.m-video { object-position: 30% 60%; }
.mod-foto .cena-video { inset: -5% 0; height: 110%; }
/* o enquadramento de cada fotografia: a pessoa no seu lado, o texto no espaço livre */
.f-surf { object-position: 62% 40%; }
.f-escola { object-position: 30% 50%; }
.f-inst { object-position: 50% 32%; }
.final-foto { object-position: 50% 62%; }
@media (max-width: 860px) { .f-surf { object-position: 66% 50%; } .f-escola { object-position: 36% 50%; } .f-inst { object-position: 50% 30%; } .final-foto { object-position: 40% 55%; } }
/* as legendas das portas vão para o lado livre da fotografia, com o véu desse lado */
@media (min-width: 861px) {
  .porta-app .legenda { top: 120px; bottom: auto; }
  .porta-app .foto::after { background: linear-gradient(90deg, rgba(6,14,26,.86) 0%, rgba(6,14,26,.6) 34%, rgba(6,14,26,0) 58%), linear-gradient(180deg, rgba(6,14,26,.35), rgba(6,14,26,0) 30%, rgba(6,14,26,.4) 100%); }
  .porta-os .foto::after { background: linear-gradient(270deg, rgba(6,14,26,.88) 0%, rgba(6,14,26,.62) 34%, rgba(6,14,26,0) 60%), linear-gradient(180deg, rgba(6,14,26,.35), rgba(6,14,26,0) 30%, rgba(6,14,26,.45) 100%); }
  .porta-inst .foto::after { background: linear-gradient(90deg, rgba(6,14,26,.88) 0%, rgba(6,14,26,.62) 30%, rgba(6,14,26,0) 52%), linear-gradient(180deg, rgba(6,14,26,.45), rgba(6,14,26,0) 34%, rgba(6,14,26,.55) 100%); }
  .porta-os .legenda.dir { top: 140px; bottom: auto; }
  .porta-inst .legenda { bottom: clamp(32px, 7vh, 72px); max-width: 520px; }
  .porta-inst .inst-escolas { left: auto; right: var(--gut); width: min(520px, 36vw); top: auto; bottom: clamp(32px, 7vh, 72px); }
}
@media (max-width: 860px) {
  .plano .foto::after { background: linear-gradient(180deg, rgba(6,14,26,.55) 0%, rgba(6,14,26,.15) 28%, rgba(6,14,26,.55) 50%, rgba(6,14,26,.94) 76%); }
}
.final::after { background: linear-gradient(180deg, rgba(3,7,15,.35) 0%, rgba(3,7,15,.35) 40%, rgba(3,7,15,.92) 78%); }
/* o topo do Surf Today entra logo (sem ecrã vazio na troca): título palavra a palavra e, a seguir, a procura e os separadores */
.mo .st-hero [data-split] .w, .mo .st-hero [data-split] .w > span { transition-duration: .62s; transition-delay: calc(var(--i) * 38ms); }
.mo .st-hero [data-reveal] { transition-duration: .5s, .55s; }
::view-transition-new(conteudo) { animation-delay: 60ms; animation-duration: 480ms; }
::view-transition-new(conteudo) { animation-delay: 0ms; animation-duration: 520ms; }
::view-transition-old(conteudo) { animation-duration: 240ms; }
.mo .st-hero [data-split] .w { clip-path: inset(0 0 45% 0); }
.mo .st-hero [data-split] .w > span { transform: translate3d(0, 55%, 0); opacity: .15; }
.mo .st-hero [data-split].in .w { clip-path: inset(-25% -8% -25% -8%); }
.mo .st-hero [data-split].in .w > span { transform: none; opacity: 1; }

/* o OS: a secretária, depois as janelas, depois o destaque do que a frase diz (passos da cena presa) */
.os-passo { display: none; }
.os-foco { position: absolute; z-index: 3; border-radius: clamp(8px, 1.1vw, 16px); pointer-events: none; opacity: 0; transform: scale(1.06); box-shadow: 0 0 0 2px var(--ciano), 0 0 30px 2px rgba(34,211,238,.45), 0 0 0 9999px rgba(3,7,15,.5); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.os-foco.f2 { left: .97%; top: 3.78%; width: 19.79%; height: 60.44%; }
.os-foco.f3 { left: 21.53%; top: 5.22%; width: 19.86%; height: 36.89%; }
.os-foco.f4a { left: 21.53%; top: 43.11%; width: 15.69%; height: 41.56%; box-shadow: 0 0 0 2px var(--ciano), 0 0 30px 2px rgba(34,211,238,.45); }
.os-foco.f4b { left: .97%; top: 66.44%; width: 19.79%; height: 23%; box-shadow: 0 0 0 2px var(--ciano), 0 0 30px 2px rgba(34,211,238,.45); }
.porta-os[data-cur="4"] .os-foco.f4a::before { content: ''; position: absolute; inset: -9999px; box-shadow: none; }
.mo .porta-os[data-cur="2"] .f2, .mo .porta-os[data-cur="3"] .f3, .mo .porta-os[data-cur="4"] .f4a, .mo .porta-os[data-cur="4"] .f4b { opacity: 1; transform: none; }
.mo .porta-os[data-cur="4"] .os-tela::after { content: ''; position: absolute; inset: 0; z-index: 2; background: rgba(3,7,15,.42); pointer-events: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 66.44%, .97% 66.44%, .97% 89.44%, 20.76% 89.44%, 20.76% 66.44%, 0 66.44%, 0 43.11%, 21.53% 43.11%, 21.53% 84.67%, 37.22% 84.67%, 37.22% 43.11%, 0 43.11%); }
.fx-f { font-weight: 400; transition: color .4s var(--ease), background-color .4s var(--ease); border-radius: 6px; }
.porta-os[data-cur="2"] .fx-f[data-f="2"], .porta-os[data-cur="3"] .fx-f[data-f="3"], .porta-os[data-cur="4"] .fx-f[data-f="4"] { color: #fff; background: rgba(34,211,238,.18); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.rm .os-foco { display: none; }

/* ===================== A PREVISÃO DA PRAIA (tudo o que a página de hoje mostra, melhor de ler) ===================== */
.fc { margin: 8px 0 56px; display: grid; gap: 18px; }
.fc > div { border-radius: 24px; background: linear-gradient(160deg, rgba(19,35,63,.85), rgba(15,23,42,.6)); box-shadow: inset 0 0 0 1px rgba(6,182,212,.22); padding: clamp(18px, 2.4vw, 28px); }
.fc-agora { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 28px; align-items: start; }
.fc-agora .h2 { font-size: var(--t3); margin: 0 0 12px; }
.fc-alt { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.fc-alt b { font-size: var(--t2); line-height: 1; color: #fff; }
.fc-alt span { font-size: 14px; color: var(--claro); }
.fc-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0 0; font-size: 14px; color: var(--claro); }
.fc-conf { font-style: normal; padding: 4px 10px; border-radius: 9999px; background: rgba(251,191,36,.16); color: #FDE68A; font-weight: 600; }
.fc-agora-t > b { display: block; font-size: var(--t4); line-height: 1.3; color: #fff; }
.fc-agora-t > p { margin: 10px 0 16px; color: var(--claro); }
.fc-agora-t .bt { border: 0; cursor: pointer; min-height: 44px; padding: 8px 18px; font-size: 14px; }
.fc-ouro { font-size: 14px !important; color: var(--fraco) !important; margin: 14px 0 0 !important; }
.fc-res { margin: 4px 0 14px; color: var(--claro); }
.fc-res b { color: #fff; }
.fc-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.fc-dias button { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border: 0; border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: var(--claro); cursor: pointer; transition: background-color .3s, box-shadow .3s, transform .3s var(--ease); }
.fc-dias button:hover { transform: translateY(-2px); }
.fc-dias button[aria-selected="true"] { background: rgba(34,211,238,.14); box-shadow: inset 0 0 0 1.5px var(--ciano); color: #fff; }
.fc-dias span { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.fc-dias b { font-size: var(--t4); color: #fff; }
.fc-dias i { font-style: normal; font-size: 14px; font-weight: 700; }
.fc-dias small { font-size: 12px; color: var(--fraco); }
.n-top { color: var(--ciano); } .n-bom { color: #67E8F9; } .n-medio { color: #FDE68A; } .n-baixo { color: var(--fraco); }
.fc-resumo { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; }
.fc-rosa { width: 150px; height: 150px; }
.fc-rosa circle { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.16); }
.fc-rosa circle.in { fill: none; stroke: rgba(255,255,255,.08); stroke-dasharray: 2 4; }
.fc-rosa text { fill: var(--claro); font-size: 12px; text-anchor: middle; font-weight: 700; }
.fc-rosa g { transform-origin: 60px 60px; transition: transform .8s cubic-bezier(.34,1.56,.64,1); }
.fc-rosa .sw line { stroke: var(--ciano); stroke-width: 4; stroke-linecap: round; } .fc-rosa .sw path { fill: var(--ciano); }
.fc-rosa .vw line { stroke: #F1F5F9; stroke-width: 2.5; stroke-linecap: round; } .fc-rosa .vw path { fill: #F1F5F9; }
.fc-rosa-leg { display: flex; gap: 10px; justify-content: center; margin: 6px 0 0; font-size: 12px; color: var(--claro); }
.fc-rosa-leg i { display: inline-block; width: 12px; height: 3px; margin-right: 4px; vertical-align: middle; background: var(--ciano); } .fc-rosa-leg i.vw { background: #F1F5F9; }
.fc-onda { margin: 0; font-size: 16px; color: var(--claro); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.fc-onda > b { font-size: var(--t3); color: #fff; }
.fc-largo { padding: 4px 12px; border-radius: 9999px; background: rgba(96,165,250,.14); color: #DBEAFE; font-size: 14px; }
.fc-largo b { color: #fff; }
.fc-vento { margin: 6px 0 0; color: var(--claro); }
.fc-geral { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--claro); }
.fc-geral span { color: #fff; font-weight: 600; }
.fc-niveis { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.fc-nv { display: inline-flex; gap: 8px; padding: 6px 12px; border-radius: 9999px; font-size: 14px; background: rgba(255,255,255,.06); }
.fc-nv b { color: var(--claro); font-weight: 600; }
.fc-nv.ok { background: rgba(52,211,153,.16); color: #A7F3D0; } .fc-nv.nao { background: rgba(248,113,113,.14); color: #FECACA; } .fc-nv.meh { background: rgba(251,191,36,.14); color: #FDE68A; }
.fc-nota-niveis { margin: 10px 0 0; font-size: 12px; color: var(--fraco); }
.fc-det { margin: 18px 0 10px; font-size: 14px; color: var(--claro); min-height: 22px; }
.fc-det b { color: #fff; }
.fc-horas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); gap: 4px; overflow-x: auto; padding-bottom: 6px; }
.fc-h { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border: 0; border-radius: 12px; background: none; color: var(--claro); cursor: pointer; font-size: 12px; transition: background-color .25s; }
.fc-h:hover, .fc-h.sel { background: rgba(255,255,255,.06); }
.fc-h.sel { box-shadow: inset 0 0 0 1px rgba(34,211,238,.5); }
.fc-h.boa { background: rgba(34,211,238,.08); }
.fc-h.passou { opacity: .55; }
.fc-b { width: 18px; height: 90px; display: flex; align-items: flex-end; border-radius: 6px; background: rgba(255,255,255,.05); overflow: hidden; }
.fc-b i { display: block; width: 100%; height: 100%; border-radius: 6px; background: linear-gradient(180deg, var(--ciano), var(--ciano-e)); transform-origin: 50% 100%; transform: scaleY(var(--a)); transition: transform .9s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--k) * 35ms); }
.mo .fc-horas:not(.in) .fc-b i { transform: scaleY(.02); }
.fc-h.boa .fc-b i { background: linear-gradient(180deg, #A5F3FC, var(--ciano)); }
.fc-h b { font-size: 14px; color: #fff; }
.fc-v { color: #E2E8F0; } .fc-r { color: var(--fraco); }
.fc-dir { display: inline-block; font-size: 14px; color: #F1F5F9; line-height: 1; }
.fc-m { width: 8px; height: 8px; border-radius: 9999px; background: rgba(148,163,184,.4); }
.fc-m.vazia { background: var(--vazia); } .fc-m.cheia { background: var(--cheia); }
.fc-hh { color: var(--fraco); }
.fc-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 12px; color: var(--fraco); }
.fc-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; margin-right: 6px; vertical-align: 0; }
.fc-leg .lb { width: 6px; height: 12px; border-radius: 2px; background: var(--ciano); } .fc-leg .lm.vazia { background: var(--vazia); } .fc-leg .lm.cheia { background: var(--cheia); } .fc-leg .lj { width: 14px; height: 10px; border-radius: 3px; background: rgba(34,211,238,.18); }
.fc-leg b { color: #E2E8F0; font-weight: 600; } .fc-leg b.r { color: var(--fraco); }
.fc-spot dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.fc-spot dl div { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.04); }
.fc-spot dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fraco); }
.fc-spot dd { margin: 4px 0 0; font-size: 16px; color: #fff; }
.fc-seg { margin: 14px 0 14px; padding: 14px 16px; border-radius: 16px; background: rgba(251,191,36,.08); box-shadow: inset 0 0 0 1px rgba(251,191,36,.25); color: #FDE68A; }
.fc-seg b { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 860px) {
  .fc-agora { grid-template-columns: 1fr; gap: 14px; }
  .fc-dias { grid-template-columns: repeat(7, minmax(52px, 1fr)); overflow-x: auto; }
  .fc-resumo { grid-template-columns: 1fr; justify-items: start; }
  .fc-rosa { width: 120px; height: 120px; }
}
.fc { grid-template-columns: minmax(0, 1fr); }
.fc > div, .fc-agora > div, .fc-resumo > div { min-width: 0; }
/* o mosaico do mar de hoje (fotografias verdadeiras das praias, do próprio site) */
.d-mosaico { position: absolute; inset: -8% -2% -8% -2%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 14px; padding: 14px; }
.dm { position: relative; margin: 0; border-radius: 24px; overflow: hidden; background: var(--sup); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.dm img { width: 100%; height: 100%; object-fit: cover; }
.dm figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 2px; padding: 8px 12px; border-radius: 14px; background: rgba(6,14,26,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dm figcaption b { font-size: 14px; color: #fff; } .dm figcaption span { font-size: 12px; color: var(--claro); }
.descida .d-veu { background: radial-gradient(ellipse 60% 42% at 50% 46%, rgba(6,14,26,.86) 0%, rgba(6,14,26,.7) 55%, rgba(6,14,26,.35) 100%); }
@media (max-width: 860px) { .d-mosaico { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; padding: 8px; } .dm figcaption { left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; } }
.modelo-foto { background: radial-gradient(ellipse 80% 70% at 85% 30%, rgba(8,145,178,.28), transparent 60%), linear-gradient(180deg, var(--agua), var(--sup)); }
@media (min-width: 861px) {
  .porta-inst .inst-escolas { left: var(--gut); right: auto; width: min(560px, 40vw); top: 110px; bottom: auto; }
  .porta-inst .legenda { bottom: clamp(28px, 6vh, 64px); }
  .porta-inst .chips-esc a { padding: 6px 12px; font-size: 14px; }
}
@media (min-width: 861px) {
  .porta-inst .inst-escolas { width: min(700px, 49vw); }
  .porta-inst .chips-esc { gap: 6px; }
  .porta-inst .chips-esc a { padding: 5px 10px; font-size: 12px; }
  .porta-inst .chips-esc em { font-size: 12px; }
}
/* a folha não pode ser contentor de rolagem (partia o sticky no Safari): o canto redondo faz-se com recorte */
.folha { overflow: visible; clip-path: inset(0 round 24px 24px 0 0); }

/* ===================== VOLTA 5 (15/10): as fotografias novas, o mar, o modelo, o fecho ===================== */
/* para quem aprende: três fotografias que trocam com os ecrãs da app (vida, sem enfeites) */
.foto-troca .fa { position: absolute; inset: -5% 0; width: 100%; height: 110%; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease); }
.foto-troca .fa1 { opacity: 1; object-position: 50% 55%; }
.foto-troca .fa2 { object-position: 60% 50%; }
.foto-troca .fa3 { object-position: 50% 35%; }
.mo .porta-app[data-cur="2"] .fa2, .mo .porta-app[data-cur="3"] .fa3, .mo .porta-app[data-cur="4"] .fa3 { opacity: 1; }
.mo .porta-app[data-cur="2"] .fa1, .mo .porta-app[data-cur="3"] .fa1, .mo .porta-app[data-cur="4"] .fa1 { opacity: 0; }
/* os enquadramentos: o texto no espaço livre (céu), nunca por cima das pessoas */
.f-escola { object-position: 50% 30%; }
.f-inst { object-position: 50% 62%; }
.final-foto { object-position: 50% 60%; }
@media (max-width: 860px) { .foto-troca .fa1 { object-position: 62% 50%; } .f-escola { object-position: 38% 40%; } .f-inst { object-position: 60% 62%; } .final-foto { object-position: 62% 60%; } }
@media (min-width: 861px) {
  .porta-os .foto::after { background: linear-gradient(180deg, rgba(6,14,26,.7) 0%, rgba(6,14,26,.35) 34%, rgba(6,14,26,0) 52%), linear-gradient(180deg, transparent 70%, rgba(6,14,26,.5)); }
  .porta-os .legenda.dir { top: 120px; }
  .porta-inst .foto::after { background: linear-gradient(180deg, rgba(6,14,26,.62) 0%, rgba(6,14,26,.2) 36%, rgba(6,14,26,0) 50%, rgba(6,14,26,.55) 74%, rgba(6,14,26,.9) 100%); }
}
/* o mar: o título numa faixa limpa (nunca a cavalo das juntas) e os números a sério */
.descida .d-veu { background: linear-gradient(180deg, rgba(6,14,26,.35) 0%, rgba(6,14,26,.86) 30%, rgba(6,14,26,.9) 62%, rgba(6,14,26,.55) 78%, rgba(6,14,26,.92) 100%); }
.descida .d-t { max-width: 22ch; }
.d-cont { left: 0; right: 0; bottom: 0; padding: 18px var(--gut) clamp(20px, 4vh, 40px); display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 8px 48px; background: linear-gradient(180deg, transparent, rgba(6,14,26,.8) 40%); }
.d-cont .d-cont-n { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: grid; gap: 2px; }
.d-cont .d-cont-n strong { font-size: var(--t1); line-height: .9; }
.d-cont .d-cont-n span { font-size: 14px; color: #E2E8F0; }
.d-cont .d-cont-p { grid-column: 1 / -1; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.14); border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 14px; color: var(--claro); }
@media (max-width: 860px) { .d-cont { grid-template-columns: auto auto; gap: 6px 28px; bottom: calc(80px + env(safe-area-inset-bottom)); } .d-cont .d-cont-p { font-size: 12px; } .descida .d-textos { padding-bottom: 32vh; } }
/* o fecho: título mais pequeno, no céu; o selo e os botões limpos */
.final { align-items: start; }
.final-in { padding: clamp(110px, 16vh, 150px) 0 40px; }
.final .h2 { font-size: var(--t2); max-width: 16ch; }
.final::after { background: linear-gradient(180deg, rgba(3,7,15,.7) 0%, rgba(3,7,15,.35) 34%, rgba(3,7,15,0) 52%, rgba(3,7,15,.35) 100%); }
.rp-creditos { margin: 10px 0 0; font-size: 12px; color: var(--fraco); }
/* o modelo: o caminho do aluno, em duas linhas que se percebem em 3 segundos */
.modelo-cam { position: relative; padding: clamp(90px, 10vw, 140px) 0; background: radial-gradient(ellipse 70% 60% at 85% 20%, rgba(8,145,178,.22), transparent 60%), linear-gradient(180deg, var(--elev), var(--sup)); }
.mc-grelha { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.caminhos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 14px; }
.cam { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(90px, 1fr) auto auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 24px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.cam-de { font-size: 16px; font-weight: 700; color: #fff; }
.cam-de small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--claro); }
.cam-linha { position: relative; height: 2px; background: rgba(255,255,255,.14); border-radius: 2px; }
.cam-linha i { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 9999px; background: var(--vazia); box-shadow: 0 0 12px rgba(52,211,153,.8); }
.c20 .cam-linha i { background: var(--ciano); box-shadow: 0 0 12px rgba(34,211,238,.8); }
.mo .cam-linha i { animation: viaja 2.6s cubic-bezier(.65,0,.35,1) infinite; }
.mo .c20 .cam-linha i { animation-delay: .5s; }
@keyframes viaja { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(calc(var(--lw, 120px) - 10px)); opacity: 0; } }
.cam-linha em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 9999px; background: var(--sup); box-shadow: inset 0 0 0 1px rgba(34,211,238,.5); font-style: normal; font-size: 12px; font-weight: 600; color: #CFFAFE; white-space: nowrap; }
.cam-para { padding: 8px 12px; border-radius: 9999px; background: rgba(255,255,255,.08); font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }
.cam-pc { font-family: 'Archivo SB', 'Inter SB', sans-serif; font-stretch: 62%; font-weight: 800; font-size: var(--t2); line-height: 1; color: var(--espuma); min-width: 2.4ch; text-align: right; }
.cam-pc .gig-m { font-size: inherit; }
.c20 .cam-pc { color: var(--ciano); }
.modelo-cam .mod-nota { margin-top: 20px; color: #E2E8F0; font-size: 14px; } .modelo-cam .mod-nota b { color: #fff; }
.mc-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.mc-foto { margin: 0; position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -36px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); }
.mc-foto img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 40% 50%; }
@media (max-width: 860px) {
  .mc-grelha { grid-template-columns: 1fr; gap: 28px; }
  .cam { grid-template-columns: 1fr auto; gap: 10px 12px; }
  .cam-de { grid-column: 1 / -1; }
  .cam-linha { grid-column: 1 / 2; margin: 14px 0; }
  .cam-para { grid-column: 1 / 2; justify-self: start; }
  .cam-pc { grid-column: 2; grid-row: 2 / 4; }
  .mc-foto { aspect-ratio: 4 / 3; }
}
@media (min-width: 861px) { .porta-os .legenda.dir { max-width: min(440px, 31vw); right: var(--gut); } .porta-os .legenda .h2 { font-size: var(--t3); } }

/* ===================== VOLTA 6 (15/10): pedidos urgentes do dono ===================== */
/* a app: um só telemóvel; o ecrã troca dentro da moldura (nunca aparecem tiras dos ecrãs de trás) */
.mo .porta-app .pilha img { transform: none !important; clip-path: inset(0 round 28px) !important; opacity: 0 !important; transition: opacity .5s cubic-bezier(.22,1,.36,1); }
.mo .porta-app:not([data-cur]) .pilha img:nth-child(1), .mo .porta-app[data-cur="0"] .pilha img:nth-child(1), .mo .porta-app[data-cur="1"] .pilha img:nth-child(1),
.mo .porta-app[data-cur="2"] .pilha img:nth-child(2), .mo .porta-app[data-cur="3"] .pilha img:nth-child(3), .mo .porta-app[data-cur="4"] .pilha img:nth-child(4) { opacity: 1 !important; }
/* a fotografia 15 (para quem ensina): as pessoas à esquerda, inteiras; a legenda no céu e mar à direita (63%-96%) */
.f-escola { object-position: 100% 50%; }
@media (min-width: 861px) {
  .porta-os .legenda.dir { left: 63vw; right: 4vw; max-width: none; top: 120px; bottom: auto; }
  .porta-os .legenda .h2 { font-size: var(--t3); max-width: none; }
  .porta-os .foto::after { background: linear-gradient(270deg, rgba(6,14,26,.72) 0%, rgba(6,14,26,.5) 32%, rgba(6,14,26,0) 40%), linear-gradient(180deg, rgba(6,14,26,.3), rgba(6,14,26,0) 30%, rgba(6,14,26,.35) 100%); }
  /* para quem dá a aula: a rapariga a rir; o texto à esquerda, longe da cara e das mãos */
  .f-inst { object-position: 50% 30%; }
  .porta-inst .inst-escolas { width: min(560px, 38vw); }
  .porta-inst .legenda { max-width: min(520px, 38vw); }
  .porta-inst .foto::after { background: linear-gradient(90deg, rgba(6,14,26,.86) 0%, rgba(6,14,26,.62) 30%, rgba(6,14,26,0) 46%), linear-gradient(180deg, rgba(6,14,26,.3), rgba(6,14,26,0) 30%, rgba(6,14,26,.35) 100%); }
}
/* no telemóvel: a fotografia em cima, inteira, e o texto num bloco por baixo (nunca por cima das pessoas) */
@media (max-width: 860px) {
  .porta-os .foto, .porta-inst .foto { bottom: 50%; }
  .porta-os .foto::after, .porta-inst .foto::after { background: linear-gradient(180deg, rgba(6,14,26,.25) 0%, rgba(6,14,26,0) 30%, rgba(6,14,26,0) 80%, var(--elev) 100%); }
  .f-escola { object-position: 28% 50%; }
  .f-inst { object-position: 70% 40%; }
  .porta-os .legenda, .porta-inst .legenda { top: 51%; bottom: auto; left: var(--gut); right: var(--gut); }
  .porta-os .legenda .h2, .porta-inst .legenda .h2 { font-size: var(--t2); }
  .porta-inst .inst-escolas { top: auto; bottom: calc(86px + env(safe-area-inset-bottom)); }
}
/* o modelo no molde da letra da C: as linhas gigantes passam (enfeite); o texto lê-se inteiro; a tabela dos canais */
.modelo-letra { padding: clamp(96px, 14vh, 160px) 0 clamp(80px, 10vh, 120px); background: linear-gradient(180deg, var(--sup), var(--elev)); overflow: hidden; }
.modelo-letra .linha { white-space: nowrap; font-size: var(--t0); line-height: .86; }
.modelo-letra .linha + .linha { color: var(--ciano); }
.modelo-letra .ml-tit { margin-top: 44px; max-width: 18ch; }
.modelo-letra .lead { margin-top: 16px; }
.tabela { margin-top: 40px; }
.tab-l { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 20px 0; box-shadow: inset 0 -1px 0 rgba(241,245,249,.14); }
.tab-l span { font-size: var(--t4); font-weight: 600; color: var(--espuma); }
.tab-l strong { font-family: 'Archivo SB', 'Inter SB', sans-serif; font-stretch: 62%; font-weight: 800; font-size: var(--t2); line-height: 1; color: #fff; min-width: 3ch; text-align: right; }
.tab-l.mk span, .tab-l.mk strong { color: var(--ciano); }
.tab-l.mk { box-shadow: inset 0 -1px 0 rgba(34,211,238,.4), inset 0 1px 0 rgba(34,211,238,.4); background: linear-gradient(90deg, rgba(34,211,238,.08), transparent 70%); }
.modelo-letra .mod-nota { margin-top: 22px; color: #E2E8F0; font-size: 14px; } .modelo-letra .mod-nota b { color: #fff; }
.rm .modelo-letra .linha, html:not(.mo) .modelo-letra .linha { white-space: normal; font-size: var(--t1); padding: 0 var(--gut); }
@media (max-width: 860px) {
  .porta-inst .foto { bottom: 58%; }
  .porta-inst .legenda { top: 43%; }
  .porta-inst .inst-escolas .etq span { display: none; }
  .porta-inst .inst-escolas { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .porta-inst .legenda p { font-size: 16px; }
}
/* enquanto as linhas gigantes passam por baixo dela, a barra fica mais opaca (lê-se sempre) */

/* a fotografia de cada cena abre (clip-in da C) quando a cena APARECE, e não quando fica presa: nunca meia fotografia com vazio por baixo */
.mo .plano .foto[data-reveal="clip"] { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.77,0,.18,1); }
.mo .plano .foto[data-reveal="clip"].in { clip-path: inset(0 0 0 0); }

/* ===================== VOLTA 7 (15/10): fotografias com a cor delas; o texto ao lado, nunca por cima de pessoas ===================== */
/* o véu da cena inteira sai (tirava a cor); fica só um gradiente atrás de cada bloco de texto */
.escuro { display: none !important; }
/* para quem aprende: a fotografia numa janela à esquerda (cor intacta); o texto e depois a app à direita */
@media (min-width: 861px) {
  .porta-app .janela-foto { inset: 104px auto 5vh var(--gut); width: 46vw; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -36px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.1); }
  .porta-app .janela-foto::after { display: none; }
  .porta-app .janela-foto .fa1 { object-position: 50% 30%; }
  .porta-app .janela-foto .fa2 { object-position: 62% 50%; }
  .porta-app .janela-foto .fa3 { object-position: 50% 40%; }
  .porta-app .legenda { left: calc(46vw + var(--gut) + 48px); right: var(--gut); top: auto; bottom: 12vh; max-width: none; }
  .porta-app .cena-app { left: calc(46vw + var(--gut) + 40px); right: var(--gut); width: auto; }
  .porta-app .leg-in { will-change: opacity; }
}
.porta-app .legenda .leg-in { }
/* a legenda do aprende sai quando a app entra, também no computador (a app fica no lugar do texto) */
@media (max-width: 860px) {
  .porta-app .janela-foto { bottom: 50%; }
  .porta-app .janela-foto::after { background: linear-gradient(180deg, rgba(6,14,26,.25) 0%, rgba(6,14,26,0) 30%, rgba(6,14,26,0) 80%, var(--elev) 100%); }
  .porta-app .legenda { top: 51%; bottom: auto; }
  .porta-app .janela-foto .fa1 { object-position: 46% 30%; }
}
/* para quem ensina: as pranchas na areia; o texto no lado da areia livre, com o gradiente só atrás dele */
.f-escola { object-position: 50% 70%; }
@media (min-width: 861px) {
  .porta-os .legenda.dir { left: var(--gut); right: auto; max-width: min(560px, 42vw); top: auto; bottom: 10vh; }
  .porta-os .foto::after { background: linear-gradient(90deg, rgba(6,14,26,.82) 0%, rgba(6,14,26,.6) 30%, rgba(6,14,26,0) 50%); }
  .porta-os .legenda .h2 { font-size: var(--t2); }
}
@media (max-width: 860px) { .f-escola { object-position: 30% 70%; } }
/* o OS, quando entra, traz o seu próprio fundo atrás do texto da esquerda */
.cena-os::before { content: ''; position: absolute; inset: -100vh -10vw -100vh -10vw; z-index: -1; background: linear-gradient(90deg, rgba(6,14,26,.92) 0%, rgba(6,14,26,.8) 36%, rgba(6,14,26,.35) 70%); pointer-events: none; }
/* o instrutor: uma camada de texto de cada vez (o bloco do instrutor, depois a lista das escolas, no mesmo sítio) */
.porta-inst { height: 175vh; }
@media (min-width: 861px) {
  .porta-inst .inst-escolas { left: var(--gut); right: auto; top: auto; bottom: clamp(28px, 6vh, 64px); width: min(620px, 44vw); }
  .porta-inst .chips-esc a { padding: 6px 12px; font-size: 14px; }
  .porta-inst .chips-esc em { font-size: 12px; }
}
@media (max-width: 860px) { .porta-inst .inst-escolas { top: 43%; bottom: auto; } .porta-inst .inst-escolas .etq span { display: inline; } .porta-inst .chips-esc { flex-wrap: wrap; overflow: visible; padding: 0 var(--gut); } }
/* a fotografia dela mais em baixo: a cara e o sorriso inteiros e abaixo da barra durante a cena toda */
.porta-inst .foto img { inset: auto 0 -6% 0; top: max(96px, 11vh); height: calc(100% - max(96px, 11vh) + 6%); }
@media (max-width: 860px) { .porta-inst .foto img { top: 84px; height: calc(100% - 84px + 6%); } }
.porta-inst .f-inst { object-position: 50% 0%; transform-origin: 50% 0; }
@media (max-width: 860px) { .porta-inst .f-inst { object-position: 70% 0%; } }

/* ===== 15/10 madrugada · nenhum ecrã vazio, nenhum véu, uma camada de texto de cada vez ===== */
/* o mosaico das praias: sai o véu sobre as fotografias; cada frase tem o seu próprio fundo, só atrás dela */
.descida .d-veu { display: none; }
.mo .descida .d-t { inset: 0 0 16vh 0; margin: auto; width: fit-content; height: fit-content; max-width: min(820px, calc(100vw - 2 * var(--gut))); display: block; padding: 26px 36px 30px; border-radius: 28px; background: rgba(6,14,26,.66); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6); filter: none; transition: opacity .12s linear, transform .3s var(--ease); }
.mo .descida .d-t.on { transition: opacity .34s var(--ease) .16s, transform .5s var(--ease) .16s; } /* a que sai acaba aos .12s, a que entra começa aos .16s: nunca duas ao mesmo tempo */
.mo .descida .d-t small { margin-top: 14px; }
@media (max-width: 860px) { .mo .descida .d-t { inset: 0 0 30vh 0; padding: 18px 20px 20px; border-radius: 22px; } }
/* a app: o passo que sai some depressa; o que entra chega inteiro antes do ecrã do telemóvel mudar */
.mo .app-step { filter: none; transition: opacity .1s linear, transform .3s var(--ease); }
.mo .app-step.on { transition: opacity .2s var(--ease) .11s, transform .32s var(--ease) .11s; } /* o texto chega inteiro (.31s) antes do ecrã do telemóvel (.44s) */
/* o ecrã que sai só se apaga depois de o que entra estar à vista: o telemóvel nunca fica vazio, nem a rolar depressa */
.mo .porta-app .pilha img { transition: opacity .2s linear .38s; }
.mo .porta-app:not([data-cur]) .pilha img:nth-child(1), .mo .porta-app[data-cur="0"] .pilha img:nth-child(1), .mo .porta-app[data-cur="1"] .pilha img:nth-child(1),
.mo .porta-app[data-cur="2"] .pilha img:nth-child(2), .mo .porta-app[data-cur="3"] .pilha img:nth-child(3), .mo .porta-app[data-cur="4"] .pilha img:nth-child(4) { transition: opacity .28s cubic-bezier(.22,1,.36,1) .16s; z-index: 2; }
/* o rectângulo atrás das linhas gigantes: era o «passar o rato» das linhas do Surf Today (.linha:hover), que apanhava
   também estas linhas. Aqui não há nada para carregar, por isso não há fundo nem mãozinha. */
.letra .linha, .letra .linha:hover, .d-letra .linha, .d-letra .linha:hover { background: none; cursor: default; }

/* ===== 15/10 · O MAR E QUEM APRENDE NUMA SÓ CENA (a régua: o topo e o mosaico) ===== */
.descida { height: 374vh; }
.descida .ancora { position: absolute; left: 0; top: calc(100vh + 274vh * .39); width: 1px; height: 1px; }
.d-abre { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; clip-path: inset(50% 50% 50% 50%); }
.d-abre img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: 0 0; will-change: transform; }
.dm-abre { background: var(--sup); }
.descida .d-textos { z-index: 3; }
.d-cont-sai { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.d-cont-sai .d-cont { pointer-events: auto; }
/* a caixa que sai sobe um pouco e apaga-se; a que entra vem de baixo (nunca duas ao mesmo tempo) */
.mo .descida .d-t.antes { transform: translate3d(0,-26px,0) scale(.98); }
.mo .descida .d-abrir, .mo .descida .d-fechar, .mo .descida .d-fim, .mo .descida .d-pausa { display: none; }
/* a caixa de vidro de lado (quem aprende e os passos da app): o mesmo vidro, encostada em baixo à esquerda, por cima da areia */
.mo .descida .d-t.ap-caixa { inset: auto auto 7vh var(--gut); margin: 0; width: min(560px, 42vw); max-width: none; font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1.55; text-align: left; padding: 26px 32px 28px; }
.descida .ap-caixa .etq { margin-bottom: 12px; }
.descida .ap-tit { margin: 0; font-size: var(--t3); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; color: #fff; text-wrap: balance; }
.descida .ap-frase { margin: 12px 0 0; font-size: var(--t5); color: var(--claro); max-width: 44ch; }
.descida .ap-caixa .ctas { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.descida .ap-baixar { margin: 18px 0 0; }
/* o telemóvel: sobe de dentro da fotografia, à direita, com o ecrã real direito */
.ap-tel { position: absolute; z-index: 2; right: var(--gut); bottom: 6vh; width: clamp(190px, 18.5vw, 280px); aspect-ratio: 1206 / 2622; pointer-events: none; }
.ap-tel .pilha { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.ap-tel .pilha img { border-radius: 24px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.16); }
.mo .descida .pilha img { opacity: 0; transform: none; clip-path: inset(0 round 24px); transition: opacity .2s linear .38s; }
.mo .descida .pilha img:first-child { opacity: 1; }
.mo .descida[data-cur="6"] .pilha img:first-child, .mo .descida[data-cur="7"] .pilha img:first-child, .mo .descida[data-cur="8"] .pilha img:first-child, .mo .descida[data-cur="9"] .pilha img:first-child { opacity: 0; }
.mo .descida[data-cur="6"] .pilha img:nth-child(2), .mo .descida[data-cur="7"] .pilha img:nth-child(3), .mo .descida[data-cur="8"] .pilha img:nth-child(4), .mo .descida[data-cur="9"] .pilha img:nth-child(4) { opacity: 1; transition: opacity .28s cubic-bezier(.22,1,.36,1) .16s; z-index: 2; }
@media (max-width: 860px) {
  .mo .descida .d-t.ap-caixa { inset: auto var(--gut) calc(84px + env(safe-area-inset-bottom)) var(--gut); width: auto; padding: 18px 20px 20px; border-radius: 22px; }
  .mo .descida .d-t.ap-passo { inset: 74px var(--gut) auto var(--gut); padding: 10px 16px 12px; }
  .descida .ap-passo .etq { margin-bottom: 4px; font-size: 11px; }
  .descida .ap-passo .ap-tit { font-size: var(--t4); }
  .descida .ap-passo .ap-frase { margin-top: 4px; font-size: 14px; line-height: 1.45; }
  .descida .ap-frase { font-size: 15px; }
  .descida .ap-caixa .ctas { margin-top: 14px; gap: 8px; }
  .descida .ap-baixar { display: none; }
  .ap-tel { right: 0; left: 0; margin: 0 auto; width: 130px; bottom: calc(84px + env(safe-area-inset-bottom)); }
}
/* sem movimento: tudo à vista, por ordem */
.rm .d-abre, html:not(.mo) .d-abre { position: relative; inset: auto; height: 70vh; clip-path: none; margin: 0 var(--gut); border-radius: 24px; }
.rm .d-abre img, html:not(.mo) .d-abre img { transform: none; }
.rm .ap-tel, html:not(.mo) .ap-tel { position: relative; inset: auto; margin: 32px auto; width: 220px; }
.rm .d-cont-sai, html:not(.mo) .d-cont-sai { position: relative; }
/* a caixa de quem aprende nunca toca nas pessoas: em ecrãs baixos e no telemóvel fica mais compacta */
@media (min-width: 861px) and (max-height: 820px) {
  .mo .descida .d-t.ap-caixa { bottom: 3vh; padding: 20px 28px 22px; }
  .descida .ap-frase { margin-top: 8px; }
  .descida .ap-caixa .ctas { margin-top: 14px; }
}
@media (max-width: 860px) {
  .descida .ap-caixa .etq { margin-bottom: 6px; font-size: 11px; }
  .descida .ap-frase { font-size: 14px; line-height: 1.45; margin-top: 8px; }
  .descida .ap-caixa .ctas { flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .descida .ap-caixa .ctas .bt { min-height: 40px; font-size: 14px; padding: 6px 6px 6px 14px; gap: 8px; white-space: nowrap; }
  .descida .ap-caixa .ctas .bt-2, .descida .ap-caixa .ctas .bt-3 { padding-right: 12px; }
  .descida .ap-caixa .ctas .bt .ic { width: 28px; height: 28px; }
  .mo .descida .d-t.ap-caixa { padding: 14px 16px 16px; }
}

/* ===== 15/10 · quem aprende com as fotografias do dono (P2 cresce do mosaico; P1 e o telemóvel no mosaico da app) ===== */
.descida { height: 393vh; }
.descida .ancora { top: calc(100vh + 293vh * .36); }
.d-abre img { object-position: 50% 50%; }
/* a caixa de quem aprende: de lado, à direita, a meio da altura, por cima da água livre (a cara dela fica ao centro) */
.mo .descida .d-textos .d-t.ap-caixa { inset: 0 var(--gut) 0 auto; margin: auto 0; width: min(420px, 28vw); height: fit-content; }
/* o mosaico da app */
.ap-mosaico { position: absolute; z-index: 2; inset: 100px var(--gut) 5vh var(--gut); display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; pointer-events: none; }
.ap-t { margin: 0; position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.ap-p1 { grid-row: 1 / 3; grid-column: 1; height: 100%; aspect-ratio: 2 / 3; }
.ap-p1 img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.ap-mosaico .ap-tel { grid-row: 1 / 3; grid-column: 2; position: relative; inset: auto; margin: 0; width: auto; height: 100%; aspect-ratio: 1206 / 2622; overflow: visible; box-shadow: none; }
.ap-p2 { grid-row: 1; grid-column: 3; background: transparent; box-shadow: none; }
.ap-cel { grid-row: 2; grid-column: 3; position: relative; pointer-events: auto; }
.mo .descida .ap-cel .d-t.ap-passo { inset: 0; margin: 0; width: auto; height: auto; max-width: none; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 28px 28px; border-radius: 24px; }
.mo .descida .pilha img { transition: opacity .2s linear .38s; }
.mo .descida[data-cur="7"] .pilha img:first-child { opacity: 1; }
.mo .descida[data-cur="8"] .pilha img:first-child, .mo .descida[data-cur="9"] .pilha img:first-child, .mo .descida[data-cur="10"] .pilha img:first-child, .mo .descida[data-cur="11"] .pilha img:first-child { opacity: 0; }
.mo .descida[data-cur="7"] .pilha img:nth-child(2), .mo .descida[data-cur="8"] .pilha img:nth-child(3), .mo .descida[data-cur="9"] .pilha img:nth-child(4), .mo .descida[data-cur="10"] .pilha img:nth-child(4) { opacity: 0; }
.mo .descida[data-cur="8"] .pilha img:nth-child(2), .mo .descida[data-cur="9"] .pilha img:nth-child(3), .mo .descida[data-cur="10"] .pilha img:nth-child(4) { opacity: 1; transition: opacity .28s cubic-bezier(.22,1,.36,1) .16s; z-index: 2; }
@media (max-width: 860px) {
  .d-abre img { object-position: 49% 50%; }
  .mo .descida .d-textos .d-t.ap-caixa { inset: 74px var(--gut) auto var(--gut); margin: 0; width: auto; }
  .ap-mosaico { inset: 74px 12px calc(84px + env(safe-area-inset-bottom)) 12px; grid-template-columns: auto auto; justify-content: center; grid-template-rows: minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: 8px; }
  .ap-p2 { grid-row: 1; grid-column: 1 / 3; }
  .ap-p1 { grid-row: 2; grid-column: 1; }
  .ap-mosaico .ap-tel { grid-row: 2; grid-column: 2; }
  .ap-cel { grid-row: 3; grid-column: 1 / 3; min-height: 128px; }
  .mo .descida .ap-cel .d-t.ap-passo { padding: 14px 18px 16px; border-radius: 20px; }
}
.rm .ap-mosaico, html:not(.mo) .ap-mosaico { position: relative; inset: auto; margin: 32px var(--gut); height: 80vh; }
@media (min-width: 861px) and (max-height: 820px) { .mo .descida .d-textos > .d-t:not(.ap-caixa) { inset: 0 0 27vh 0; } }
/* o mosaico que sobe é o .ap-sobe (um para o computador, outro para o telemóvel, cada um no seu tempo) */
.ap-t.ap-p1 { overflow: visible; box-shadow: none; border-radius: 0; }
.ap-sobe { position: absolute; inset: 0; }
.ap-p1 > .ap-sobe > .ap-sobe { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.ap-p1 img { position: absolute; inset: 0; }

/* ===== 15/10 · A COMISSÃO: a V1 «As duas portas, em mosaico», trazida de variantes-comissao/ (vc.css + v1.css) ===== */
:root { --ciano-claro: #A5F3FC; --topo: 96px; --baixo: 32px; }
@media (max-width: 860px) { :root { --topo: 84px; --baixo: 96px; } }
.vc-cena { position: relative; }
.vc-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.vc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* o conta-quilómetros: cada algarismo é uma tira 0-9-0 que só se mexe com transform */
.odo { display: inline-flex; align-items: flex-start; line-height: 1; white-space: nowrap; }
.odo-d { display: inline-block; height: 1em; overflow: hidden; }
.odo-tira { display: block; will-change: transform; }
.odo-tira > span { display: block; height: 1em; line-height: 1; }
.odo-pc { display: inline-block; height: 1em; line-height: 1; }

/* ---------- sem movimento: tudo no estado final, nada preso ---------- */
.vc-rm .vc-cena { height: auto !important; }
/* ---------- A LINGUAGEM DO TOPO DA D2 (valores tirados do d2.css: .descida .d-t, .dm, .d-cont) ----------
   Mosaico: cantos de 24 px, sombra 0 30px 60px -30px, intervalo de 14 px (8 no telemóvel).
   Caixa de vidro: rgba(6,14,26,.66), desfoque 16 px e saturação 130%, cantos de 28 px (22 no telemóvel),
   título em --t2 a 1,04 e -0,035em, frase em --t5 a 1,55. Números: Archivo estreita a 800, em --t1. */
.vc-mos { position: absolute; margin: 0; border-radius: 24px; overflow: hidden; background: var(--sup); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); will-change: transform; }
.vc-mos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-vidro { border-radius: 28px; padding: 26px 36px 30px; background: rgba(6,14,26,.66); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6); text-align: center; }
.vc-vidro .vt { margin: 0 auto; max-width: 22ch; font-size: var(--t2); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.vc-vidro .vs { display: block; margin: 14px auto 0; max-width: 44ch; font-size: var(--t5); line-height: 1.55; color: var(--claro); font-weight: 400; letter-spacing: 0; }
.vc-num strong { display: block; font-family: 'Archivo SB', 'Inter SB', sans-serif; font-stretch: 62%; font-weight: 800; font-size: var(--t1); line-height: .9; color: #fff; font-variant-numeric: tabular-nums; }
.vc-num b { display: block; margin-top: 6px; font-size: 16px; line-height: 1.35; color: #fff; font-weight: 700; }
.vc-num span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: #E2E8F0; }
.vc-num.ci strong { color: var(--ciano); }
.vc-anel { box-shadow: 0 0 0 2px var(--ciano), 0 0 30px 2px rgba(34,211,238,.45); }
@media (max-width: 860px) {
  .vc-mos { border-radius: 24px; }
  .vc-vidro { border-radius: 22px; padding: 18px 20px 20px; }
  .vc-num span { font-size: 16px; }
}
/* texto só para leitores de ecrã quando há movimento (com «reduzir movimento» passa a ver-se) */
.vc-mo .vc-sr-mo { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* V1 · AS DUAS PORTAS, EM MOSAICO
   A linguagem do topo da d2 (mosaicos de cantos de 24, a caixa de vidro, números como o 161 e o 37, as mesmas
   sombras e curvas), noutra composição: a caixa de vidro chega sozinha ao meio do ecrã e sobe; por baixo, as duas
   portas. A da escola são três mosaicos com material REAL do canal (o cartão de aula com QR, o balcão do OS, o
   calendário onde entra o iCal); a do marketplace é a app, real. Cada porta tem o seu número por cima.
   A caixa nunca fica por cima da junção de dois mosaicos: está sozinha, sobre o vazio. */

.v1 { height: 290vh; height: 290svh; background: var(--sup); }
.v1 .vc-palco { background: var(--sup); display: grid; grid-template-columns: 1.54fr 1fr; grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: 14px; row-gap: 18px; padding: calc(var(--topo) + 4px) var(--gut) 24px; }

.v1-vidro { grid-column: 1 / -1; grid-row: 1; justify-self: center; position: relative; z-index: 3; display: grid; max-width: min(820px, 100%); will-change: transform, opacity; }
.v1-passo { grid-area: 1 / 1; align-self: center; }
.v1-vidro .vs { text-wrap: balance; }
.v1-ci { color: var(--ciano); }

.v1-num { margin: 0; padding: 0 6px; align-self: end; will-change: transform, opacity; }
.v1-num span { max-width: 46ch; }
.v1-num-a { grid-column: 1; grid-row: 2; }
.v1-num-b { grid-column: 2; grid-row: 2; }

.v1-porta { grid-row: 3; min-height: 0; display: grid; gap: 14px; }
.v1-porta-a { grid-column: 1; grid-template-columns: 1fr .62fr; grid-template-rows: 1fr 1fr; }
.v1-porta-b { grid-column: 2; grid-template-rows: 1fr; }
.v1 .v1-t { position: relative; min-height: 0; }
.t-qr { grid-column: 1; grid-row: 1; }
.t-ical { grid-column: 1; grid-row: 2; }
.t-balcao { grid-column: 2; grid-row: 1 / 3; }
.v1-porta-a .v1-t img { position: absolute; left: 0; right: 0; bottom: 0; top: 46px; width: 100%; height: calc(100% - 46px); }
/* a legenda vive numa faixa própria por cima da captura, para não tapar o texto que a captura tem */
.t-qr img { object-position: 50% 82%; }
.t-ical img { object-position: 50% 0; }
.t-balcao img { object-position: 50% 0; }
/* 18/10 · o dono: «essa parte está muito feia» — o cartaz e a faixa dos canais mostram-se inteiros, sem cortar o preço nem esticar um ícone */
.t-qr img { object-position: 50% 0 !important; } .t-ical img { object-position: 50% 50% !important; }
/* a legenda de cada mosaico: a pílula de vidro da d2 (a dos números da descida) */
.v1-t figcaption { position: absolute; left: 14px; top: 12px; margin: 0; padding: 6px 14px; border-radius: 9999px; font-size: 14px; font-weight: 700; line-height: 1.3; color: #fff;
  background: rgba(6,14,26,.62); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); will-change: opacity; }
/* a app: o ecrã real, direito, por cima de si próprio desfocado (fixo, não anima) */
.t-app { background: var(--elev); }
.t-app-fundo { position: absolute; inset: -10%; width: 120% !important; height: 120% !important; object-fit: cover; filter: blur(24px) brightness(.55) saturate(1.2); }
.t-app-ecra { position: absolute; top: 6%; bottom: 6%; left: 0; right: 0; margin: 0 auto; height: 88% !important; width: auto !important; object-fit: contain; border-radius: 22px;
  box-shadow: 0 40px 80px -36px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.1); }
.m-anel { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 2px var(--ciano), inset 0 0 40px rgba(34,211,238,.35); }

.v1-fecho { padding: clamp(40px, 6vh, 64px) 0 clamp(80px, 12vh, 120px); background: var(--sup); }
.v1-nota-rm { display: none; }

@media (max-width: 860px) {
  .v1 { height: 300svh; }
  .v1 .vc-palco { grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 12px; padding: var(--topo) var(--gut) var(--baixo); }
  .v1-vidro .vs { font-size: 16px; margin-top: 10px; }
  .v1-num { padding: 0 2px; }
  .v1-num span { display: none; }
  .v1-porta { gap: 8px; }
  .v1-porta-a { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .t-qr { grid-row: 1; } .t-balcao { grid-column: 1; grid-row: 2; } .t-ical { grid-row: 3; }
  .v1-t figcaption { left: 8px; top: 6px; padding: 3px 10px; font-size: 16px; }
  .v1-porta-a .v1-t img { top: 38px; height: calc(100% - 38px); }
  .t-qr img { object-position: 50% 40%; }
  .t-app-ecra { top: 3%; bottom: 3%; height: 94% !important; border-radius: 16px; }
}

/* sem movimento: o estado final, parado */
.vc-rm .m-anel { opacity: 1; }
.vc-rm .v1-p2 { display: none; }
.vc-rm .v1 .vc-palco { min-height: 100vh; min-height: 100svh; }
.vc-rm .v1-porta { min-height: 360px; }
.vc-rm .v1-nota-rm { display: block; margin: 0 0 24px; font-size: var(--t5); color: var(--claro); max-width: 56ch; }
.vc-rm .v1-nota-rm b { color: #fff; }

.v1 { height: 240vh; height: 240svh; } @media (max-width: 860px) { .v1 { height: 170svh; } } /* 18/10 (noite) · telemóvel 250→170 */

/* ===== 15/10 · PARA QUEM ENSINA: A03 em parallax atrás, o OS grande, o vidro em cima à esquerda, os números por baixo ===== */
.en2 { height: 300vh; background: var(--sup); position: relative; }
.en2 .stage { background: var(--sup); }
.en-foto { position: absolute; left: 0; top: 0; bottom: 0; width: 44vw; overflow: hidden; }
.en-foto img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 55%; }
.en-os { position: absolute; z-index: 2; right: var(--gut); top: 0; bottom: 0; margin: auto 0; width: min(57vw, 880px); height: fit-content; }
.en2 .os-vista { margin: 0; transform-origin: 50% 60%; border-radius: 16px; box-shadow: 0 40px 80px -36px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14); }
.en-vidro { position: absolute; z-index: 3; left: var(--gut); top: 108px; width: min(500px, 34vw); }
.en-caixa { position: absolute; left: 0; right: 0; top: 0; border-radius: 28px; padding: 26px 32px 28px; background: rgba(6,14,26,.66); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6); }
.en-caixa .etq { margin-bottom: 12px; }
.en-caixa .ap-tit { margin: 0; font-size: var(--t3); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; color: #fff; text-wrap: balance; }
.en-caixa .ap-frase { margin: 12px 0 0; font-size: var(--t5); line-height: 1.55; color: var(--claro); }
.en-caixa .ctas { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.en-caixa .fx-f { font-weight: 600; color: #fff; border-radius: 6px; padding: 0 3px; transition: background .3s, box-shadow .3s; }
.mo .en-caixa { transition: opacity .12s linear, transform .3s var(--ease); }
.mo .en2 .en-a { opacity: 1; }
.mo .en2 .en-b { opacity: 0; transform: translate3d(0,40px,0) scale(.98); pointer-events: none; }
.mo .en2:not([data-cur="0"]):not(:not([data-cur])) .en-a { opacity: 0; transform: translate3d(0,-26px,0) scale(.98); pointer-events: none; }
.mo .en2:not([data-cur="0"]):not(:not([data-cur])) .en-b { opacity: 1; transform: none; pointer-events: auto; transition: opacity .34s var(--ease) .16s, transform .5s var(--ease) .16s; }
.en-nums { position: absolute; z-index: 3; right: var(--gut); bottom: clamp(20px, 4vh, 40px); width: min(57vw, 880px); display: flex; gap: 8px 48px; align-items: flex-end; }
.en-nums .d-cont-n { margin: 0; display: grid; gap: 2px; }
.en-nums strong { font-size: var(--t1); line-height: .9; color: #fff; }
.en-nums .d-cont-n + .d-cont-n strong { color: var(--ciano); }
.en-nums span { font-size: 14px; color: #E2E8F0; }
.en2[data-cur="2"] .fx-f[data-f="2"], .en2[data-cur="3"] .fx-f[data-f="3"], .en2[data-cur="4"] .fx-f[data-f="4"] { background: rgba(34,211,238,.18); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
@media (min-width: 861px) and (max-height: 820px) { .en-nums strong { font-size: var(--t2); } .en-vidro { top: 96px; } .en-caixa { padding: 20px 26px 22px; } }
@media (max-width: 860px) {
  .en2 { height: 320svh; }
  .en-foto { width: auto; right: 0; }
  .en-vidro { top: 76px; left: var(--gut); right: var(--gut); width: auto; }
  .en-caixa { padding: 16px 18px 18px; border-radius: 22px; }
  .en-caixa .ap-frase { font-size: 14px; line-height: 1.45; margin-top: 8px; }
  .en-caixa .ctas { margin-top: 12px; gap: 6px; }
  .en-caixa .ctas .bt { min-height: 40px; font-size: 14px; padding: 6px 6px 6px 14px; gap: 8px; }
  .en-caixa .ctas .bt .ic { width: 28px; height: 28px; }
  .en-caixa .ctas .bt-2, .en-caixa .ctas .bt-3 { padding-right: 12px; }
  .en-os { left: var(--gut); right: var(--gut); width: auto; top: auto; bottom: calc(96px + 92px + env(safe-area-inset-bottom)); margin: 0; }
  .mo .en-os { opacity: 0; transition: opacity .4s var(--ease), transform .6s var(--ease); transform: translate3d(0,60px,0); }
  .mo .en2:not([data-cur="0"]):not(:not([data-cur])) .en-os { opacity: 1; transform: none; }
  .en-nums { left: var(--gut); right: var(--gut); width: auto; bottom: calc(92px + env(safe-area-inset-bottom)); gap: 4px 28px; }
  .mo .en-nums { opacity: 0; transition: opacity .4s var(--ease) .2s; }
  .mo .en2:not([data-cur="0"]):not(:not([data-cur])) .en-nums { opacity: 1; }
  .en-nums strong { font-size: var(--t2); }
  .en-nums span { font-size: 12px; }
}
.rm .en2, html:not(.mo) .en2 { height: auto; }
.rm .en2 .stage, html:not(.mo) .en2 .stage { position: relative; height: auto; display: grid; gap: 24px; padding: 110px var(--gut) 40px; }
.rm .en-foto, .rm .en-os, .rm .en-vidro, .rm .en-caixa, .rm .en-nums, html:not(.mo) .en-foto, html:not(.mo) .en-os, html:not(.mo) .en-vidro, html:not(.mo) .en-caixa, html:not(.mo) .en-nums { position: relative; inset: auto; width: auto; margin: 0; height: auto; }
.rm .en-foto, html:not(.mo) .en-foto { height: 60vh; border-radius: 24px; }
/* a fotografia de Sagres é alta: presa ao topo e mais alta do que o ecrã, para as pessoas (a meio da imagem) ficarem
   abaixo do vidro; o céu e a falésia ficam por trás da caixa */
@media (min-width: 861px) { .en-foto img { inset: 0 0 auto 0; height: max(135%, 1100px); object-position: 50% 0; transform-origin: 50% 0; } }
@media (min-width: 861px) { .en-os, .en-nums { width: min(calc(56vw - var(--gut) - 16px), 880px); } } /* o OS começa depois da fotografia: nunca por cima das pessoas dela */

/* ===== 15/10 · PARA QUEM DÁ A AULA: a rapariga a rir a toda a largura (sem véu), o texto num vidro do lado livre,
   e as escolas como fichas de vidro que entram em cascata de baixo ===== */
.passo-marca { display: none; }
.porta-inst .foto::after { display: none; }
.porta-cena.porta-inst .foto img { inset: -6% 0; top: -6%; height: 112%; object-position: 50% 30%; transform-origin: 50% 50%; }
.porta-cena.porta-inst .leg-in { padding: 26px 32px 28px; border-radius: 28px; background: rgba(6,14,26,.66); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6); }
.porta-cena.porta-inst .leg-in .h2 { font-size: var(--t3); line-height: 1.06; max-width: none; }
.porta-cena.porta-inst .leg-in p { font-size: var(--t5); color: var(--claro); }
.mo .porta-inst .chips-esc a { opacity: 0; transform: translate3d(0,26px,0) scale(.96); transition: opacity .3s var(--ease), transform .5s var(--ease); }
.mo .porta-inst[data-cur="1"] .chips-esc a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 35ms); }
@media (min-width: 861px) {
  .porta-cena.porta-inst .legenda, .porta-cena.porta-inst .inst-escolas { left: var(--gut); right: auto; top: 0; bottom: 0; margin: auto 0; height: fit-content; width: min(540px, 40vw); max-width: none; }
}
@media (max-width: 860px) {
  .porta-cena.porta-inst .foto { bottom: 50%; }
  .porta-cena.porta-inst .foto img { inset: 0; top: 0; height: 100%; object-position: 70% 30%; }
  .porta-cena.porta-inst .legenda, .porta-cena.porta-inst .inst-escolas { top: calc(50% + 8px); bottom: auto; left: var(--gut); right: var(--gut); }
  .porta-cena.porta-inst .leg-in { padding: 16px 18px 18px; border-radius: 22px; }
  .porta-cena.porta-inst .leg-in p { font-size: 14px; line-height: 1.45; }
  .porta-cena.porta-inst .inst-escolas .etq { margin: 0 0 10px; }
  .porta-cena.porta-inst .chips-esc { padding: 0; }
}
.porta-cena.porta-inst .inst-escolas { padding: 22px 24px 24px; border-radius: 28px; background: rgba(6,14,26,.66); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6); }
.porta-cena.porta-inst .chips-esc a { background: rgba(255,255,255,.06); }
@media (max-width: 860px) {
  .porta-cena.porta-inst .foto { bottom: 56%; }
  .porta-cena.porta-inst .legenda, .porta-cena.porta-inst .inst-escolas { top: calc(44% + 8px); }
  .porta-cena.porta-inst .inst-escolas { padding: 14px 14px 16px; border-radius: 22px; }
  .porta-cena.porta-inst .chips-esc { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .porta-cena.porta-inst .chips-esc a { padding: 4px 9px; font-size: 12px; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .porta-cena.porta-inst .chips-esc em { font-size: 11px; }
}
@media (max-width: 860px) { .porta-cena.porta-inst .chips-esc a { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; padding: 4px 8px; border-radius: 10px; } .porta-cena.porta-inst .chips-esc em { display: inline; } }
@media (max-width: 860px) {
  .mo .porta-cena.porta-inst .foto { transition: clip-path .6s var(--ease-io); clip-path: inset(0 0 0 0); }
  .mo .porta-cena.porta-inst[data-cur="1"] .foto { clip-path: inset(0 0 46% 0); } /* a fotografia fecha por baixo para a lista das 20 escolas caber inteira */
  .porta-cena.porta-inst .inst-escolas { top: calc(24% + 8px); }
}

/* ===== 15/10 · O FECHO: A10 a toda a largura, sem véu; a chamada final no vidro, do lado livre (à direita) ===== */
.final { min-height: 100vh; min-height: 100svh; align-items: center; }
.final::after { display: none; }
.final-foto { object-position: 40% 30%; }
.final-in { position: relative; z-index: 2; width: 100%; padding: 0 var(--gut); display: flex; justify-content: flex-end; }
.final-vidro { width: min(560px, 42vw); border-radius: 28px; padding: 28px 34px 30px; background: rgba(6,14,26,.66); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6); }
.final .final-vidro .h2 { font-size: var(--t3); line-height: 1.06; max-width: none; }
.final-vidro .cred { margin-top: 18px; }
.final-vidro .hero-ctas { margin-top: 20px; }
@media (max-width: 860px) {
  .final { align-items: end; }
  .final-foto { object-position: 35% 30%; }
  .final-in { padding: 0 var(--gut) calc(96px + env(safe-area-inset-bottom)); }
  .final-vidro { width: 100%; padding: 18px 20px 20px; border-radius: 22px; }
}
.v1-fecho { padding: 8px 0 28px; } .v1-fecho .ctas { justify-content: center; } /* os botões da comissão logo a seguir à cena: sem faixa escura vazia antes do fecho */
/* o fecho com a U06: a fotografia presa ao topo e mais alta do que o ecrã, para o céu caber por trás do vidro; o vidro à direita, no céu */
.final { align-items: start; }
.final-foto { inset: 0 0 auto 0; top: 0; height: 125%; object-position: 70% 0; transform-origin: 50% 0; }
.final-in { padding-top: 104px; }
.final-vidro { width: min(460px, 32vw); }
@media (max-width: 860px) {
  .final { align-items: start; }
  .final-foto { height: 130%; object-position: 48% 0; }
  .final-in { padding: 76px var(--gut) 0; }
  .final-vidro { width: 100%; }
}
.final-in { position: absolute; left: 0; right: 0; top: 0; }
@media (min-width: 861px) { .final-vidro { width: min(400px, 28vw); } }
@media (max-width: 860px) { .final-foto { height: 165%; } .final-vidro .cred { font-size: 12px; } }

/* ===== 15/10 · Surf Today: «Voltar» à esquerda, por cima das migalhas (pílula de vidro da barra) ===== */
.st-voltar-lugar { height: 44px; margin-bottom: 10px; }
.st-voltar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 12px; border: 0; border-radius: 9999px; cursor: pointer; font: 600 14px/1 'Inter SB', sans-serif; color: #fff; background: linear-gradient(180deg, rgba(11,17,32,.62), rgba(11,17,32,.56)); -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(.92); backdrop-filter: blur(26px) saturate(190%) brightness(.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px -12px rgba(0,0,0,.6); transition: transform .16s var(--ease); }
.st-voltar svg { width: 18px; height: 18px; }
.st-voltar:active { transform: scale(.97); }
.st-voltar:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }
.st-voltar.preso { position: fixed; top: 96px; z-index: 35; }
@media (max-width: 860px) { .st-voltar.preso { top: 84px; } }
/* 15/10 · o dono escolheu a caixa do mosaico mais clara e transparente */
.d-t-sai { position: absolute; inset: 0; pointer-events: none; } .d-t-sai > .d-t { pointer-events: auto; }
.mo .descida .d-textos .d-t:not(.ap-caixa) { background: rgba(6,14,26,.50); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
@media (min-width: 861px) and (max-height: 820px) { .mo .descida .d-textos .d-t-sai > .d-t { inset: 0 0 27vh 0; } }

/* 15/10 · nunca texto sem a caixa: as letras saem primeiro (,06 s) e só depois a caixa (,16 s); a caixa seguinte entra
   inteira e só então as letras aparecem. A frase pequena tem por trás um fundo próprio (só atrás dela) para chegar a AA. */
.mo .descida .d-textos > .d-t:not(.ap-caixa) { color: rgba(255,255,255,0); transition: color .06s linear, opacity .16s linear .05s, transform .3s var(--ease); }
.mo .descida .d-textos > .d-t:not(.ap-caixa) small { color: rgba(226,232,240,0); transition: color .06s linear; }
.mo .descida .d-textos > .d-t.on:not(.ap-caixa) { color: #fff; transition: opacity .3s var(--ease) .2s, transform .5s var(--ease) .2s, color .2s linear .42s; }
.mo .descida .d-textos > .d-t.on:not(.ap-caixa) small { color: #E2E8F0; transition: color .2s linear .42s; }
.descida .d-textos > .d-t:not(.ap-caixa) small { display: table; margin-left: auto; margin-right: auto; padding: 4px 12px 5px; border-radius: 12px; background: rgba(6,14,26,.42); }

/* 18/10 · as ligações de hoje que a D não mostra (server/siteD/semPerderSeo.ts): recolhidas antes do rodapé */
.sbd-mais { padding: 8px 0 32px; }
.sbd-mais details { border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; }
.sbd-mais summary { cursor: pointer; font-size: 15px; font-weight: 600; color: #E2E8F0; list-style-position: inside; }
.sbd-mais ul { list-style: none; margin: 14px 0 0; padding: 0; columns: 3 220px; column-gap: 24px; }
.sbd-mais li { break-inside: avoid; margin: 0 0 8px; font-size: 14px; }
.sbd-mais a { color: #CBD5E1; text-decoration: underline; text-underline-offset: 2px; }

/* 18/10 · primeira vista: o texto do topo entra com o mesmo movimento, mas arranca no primeiro
   desenho da página e não à espera do JavaScript (o banco do SEO mediu o LCP da D a 1,3-1,8 s contra
   0,3 s hoje). O fim do movimento é igual ao do «.in»; quando o JS chega, não há salto. */
@keyframes sbd-entra { from { opacity: 0; transform: translate3d(0,28px,0); } to { opacity: 1; transform: none; } }
.mo .hero [data-reveal], .mo .es-capa [data-reveal], .mo .bl-topo [data-reveal], .mo .st-hero [data-reveal] {
  animation: sbd-entra .8s cubic-bezier(.16,1,.3,1) both; animation-delay: min(var(--d, 0ms), 160ms); transition: none !important; }
/* o título do blog palavra a palavra, também a arrancar no primeiro desenho (sem esperar pelo JS) */
@keyframes sbd-palavra { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }
.mo .bl-topo [data-split] .w { clip-path: inset(-25% -8% -25% -8%); transition: none !important; }
.mo .bl-topo [data-split] .w > span { animation: sbd-palavra .8s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 50ms); transition: none !important; }

/* 18/10 · as praias do Surf Today escritas pelo servidor, recolhidas (server/siteD/praiasDoSurfToday.ts) */
.sbd-praias { padding: 24px 0 8px; }
.sbd-praias details { border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; }
.sbd-praias summary { cursor: pointer; font-size: 16px; font-weight: 600; color: #F1F5F9; }
.sbd-praias ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 24px; }
.sbd-praias li { display: grid; gap: 2px; font-size: 14px; }
.sbd-praias li a { color: #F1F5F9; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sbd-praias li span { color: #94A3B8; font-size: 13px; }