/* =====================================================================
   ORIGINALS CLUB · LP v2 · fiel ao Adobe XD (LP_OriginalsClub_v02, 1920px)
   Sistema de medida: --u = 1px da prancheta. Todo valor abaixo é o número
   do arquivo multiplicado por --u. Abaixo de 900px entra o bloco mobile.
   ===================================================================== */
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fontes/librebaskerville-400i.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fontes/librebaskerville-400i-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fontes/googlesans-400.woff2') format('woff2'); }
@font-face { font-family: 'Google Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fontes/googlesans-500.woff2') format('woff2'); }
@font-face { font-family: 'Google Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fontes/googlesans-600.woff2') format('woff2'); }
@font-face { font-family: 'Google Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fontes/googlesans-700.woff2') format('woff2'); }
@font-face { font-family: 'Google Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fontes/googlesans-400i.woff2') format('woff2'); }

:root {
	--u: clamp(0.46px, 100vw / 1920, 1px);
	--sans: 'Google Sans', 'Helvetica Neue', Arial, sans-serif;
	--serif: 'Libre Baskerville', Georgia, serif;
	--terracota: #C04C36; --carvao: #212322; --oliva: #4F5C40; --areia: #D6D2C4; --salvia: #D0DEBB; --gelo: #EFECE3; --branco: #FFFFFF; --tinta: #1B1D36;
}
html { scroll-behavior: smooth; overflow-x: clip; }
body.oc-lp { margin: 0; background: var(--branco); color: var(--carvao); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.oc-lp *, .oc-lp *::before, .oc-lp *::after { box-sizing: border-box; }
.oc-lp h1, .oc-lp h2, .oc-lp h3, .oc-lp p { margin: 0; font-weight: 400; }
.oc-lp h1, .oc-lp h2, .oc-lp h3, .oc-lp .sub { text-wrap: balance; }
.oc-lp p, .oc-lp li { text-wrap: pretty; }
.oc-lp a { color: inherit; text-decoration: none; }
.oc-lp img { display: block; max-width: 100%; }
.oc-lp em, .oc-lp .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.oc-lp .ov { font-family: var(--sans); font-weight: 500; font-size: calc(22 * var(--u)); line-height: calc(26 * var(--u)); text-transform: uppercase; letter-spacing: 0; }
.oc-lp .tag { font-weight: 500; font-size: calc(16 * var(--u)); line-height: calc(30 * var(--u)); text-transform: uppercase; letter-spacing: .2em; color: var(--terracota); }
.oc-lp .sec { position: relative; }
.oc-lp .wrap { position: relative; width: calc(1200 * var(--u)); margin: 0 auto; }
.oc-lp .c { text-align: center; }
.oc-lp .pill { display: inline-flex; align-items: center; justify-content: center; height: calc(65 * var(--u)); padding: 0 calc(40 * var(--u)); border-radius: calc(15 * var(--u)); font-weight: 700; font-size: calc(20 * var(--u)); line-height: 1; text-transform: uppercase; letter-spacing: -.03em; white-space: nowrap; transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.oc-lp .pill:hover { transform: translateY(-2px); }
.oc-lp .pill-salvia { background: var(--salvia); color: var(--tinta); }
.oc-lp .pill-salvia:hover { background: #fff; }
.oc-lp .pill-outline { border: calc(2 * var(--u)) solid var(--salvia); color: var(--salvia); height: calc(64 * var(--u)); }
.oc-lp .pill-outline:hover { background: var(--salvia); color: var(--tinta); }

/* ---------- reveal ---------- */
.oc-lp .rv { opacity: 0; transform: translateY(calc(28 * var(--u))); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.oc-lp .rv.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .oc-lp .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- barra de progresso de leitura ---------- */
.oc-progresso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.oc-progresso span { display: block; height: 100%; width: 100%; background: var(--salvia); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- header ---------- */
.oc-hd { position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(100 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(22 * var(--u)); transition: background-color .35s ease, box-shadow .35s ease; }
.oc-hd.rolou { background: rgba(33, 35, 34, .92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(214, 210, 196, .12); }
.oc-hd .logo svg { height: calc(56 * var(--u)); width: auto; display: block; }
.oc-hd .pill { height: calc(56 * var(--u)); padding: 0 calc(34 * var(--u)); }

/* ---------- 1. hero + 2. vídeo (fundo carvão 0–2306) ---------- */
.oc-topo { background: var(--carvao); color: var(--salvia); }
.oc-hero { position: relative; height: calc(1080 * var(--u)); overflow: hidden; }
.oc-hero .foto { position: absolute; inset: 0; }
.oc-hero .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: .22; transform: scale(1.06); }
/* v3/v4: foto de destino presente, com véu em gradiente para o texto */
.oc-v2 .oc-hero .foto img, .oc-v3 .oc-hero .foto img, .oc-v4 .oc-hero .foto img, .oc-v5 .oc-hero .foto img { opacity: .82; transform: none; object-position: 50% 50%; }
/* véu: --esc (0–1) vem do campo "Escurecer foto do topo"; 0.5 reproduz o degradê original (.6/.34/.3/.8) */
.oc-v2 .oc-hero .foto::after, .oc-v3 .oc-hero .foto::after, .oc-v4 .oc-hero .foto::after, .oc-v5 .oc-hero .foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33,35,34,calc(var(--esc, .5) * 1.2)) 0%, rgba(33,35,34,calc(var(--esc, .5) * .68)) 30%, rgba(33,35,34,calc(var(--esc, .5) * .6)) 60%, rgba(33,35,34,calc(var(--esc, .5) * 1.6)) 100%); }
.oc-v2 .oc-hero .foto img, .oc-v3 .oc-hero .foto img, .oc-v4 .oc-hero .foto img, .oc-v5 .oc-hero .foto img { filter: blur(var(--des, 0px)); }
.oc-hero.desfocada .foto img { transform: scale(1.04); } /* esconde a borda clara do desfoque */
.oc-v2 .oc-hero .txt, .oc-v3 .oc-hero .txt, .oc-v4 .oc-hero .txt, .oc-v5 .oc-hero .txt { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.oc-v2 .oc-hero .foto img { object-position: 50% 100%; }
.oc-v3 .oc-hero .foto img { object-position: 50% 45%; }
/* v5: recorte original da foto; linha pequena e título no alto (acima dos rostos), subtítulo, texto e botões na faixa de baixo (sobre os corpos) */
.oc-v4 .oc-hero .foto img, .oc-v5 .oc-hero .foto img{ object-position: 50% 40%; transform: none; }
.oc-v4 .oc-hero .foto::after, .oc-v5 .oc-hero .foto::after{ background: linear-gradient(180deg, rgba(33,35,34,.7) 0%, rgba(33,35,34,.42) 28%, rgba(33,35,34,.08) 45%, rgba(33,35,34,.1) 58%, rgba(33,35,34,.62) 76%, rgba(33,35,34,.86) 100%); }
.oc-v4 .oc-hero .ov, .oc-v5 .oc-hero .ov{ top: calc(118 * var(--u)); }
.oc-v4 .oc-hero .t1, .oc-v5 .oc-hero .t1{ top: calc(170 * var(--u)); font-size: calc(48 * var(--u)); }
.oc-v4 .oc-hero .t2, .oc-v5 .oc-hero .t2{ top: calc(222 * var(--u)); font-size: calc(64 * var(--u)); }
.oc-v4 .oc-hero .sub, .oc-v5 .oc-hero .sub{ top: calc(742 * var(--u)); font-size: calc(28 * var(--u)); line-height: calc(29 * var(--u)); width: calc(720 * var(--u)); }
.oc-v4 .oc-hero .txt, .oc-v5 .oc-hero .txt{ top: calc(790 * var(--u)); font-size: calc(19 * var(--u)); line-height: calc(28 * var(--u)); width: calc(820 * var(--u)); }
.oc-v4 .oc-hero .bts, .oc-v5 .oc-hero .bts{ top: calc(884 * var(--u)); }
.oc-v4 .oc-hero .bts .pill, .oc-v5 .oc-hero .bts .pill{ height: calc(60 * var(--u)); }
/* v5: foto do topo em preto e branco */
.oc-v5 .oc-hero .foto img { filter: grayscale(1) contrast(1.08); }
/* v6: os rostos ficam mais altos na foto, o título sobe um pouco */
.oc-v5 .oc-hero .ov { top: calc(100 * var(--u)); }
.oc-v5 .oc-hero .t1 { top: calc(150 * var(--u)); font-size: calc(44 * var(--u)); }
.oc-v5 .oc-hero .t2 { top: calc(197 * var(--u)); font-size: calc(58 * var(--u)); }
.oc-hero .miolo { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; width: calc(700 * var(--u)); }
.oc-hero .ov { position: absolute; top: calc(250 * var(--u)); left: 0; right: 0; }
.oc-hero .t1 { position: absolute; top: calc(313 * var(--u)); left: 0; right: 0; font-weight: 700; font-size: calc(53 * var(--u)); line-height: 1; text-transform: uppercase; letter-spacing: 0; }
.oc-hero .t2 { position: absolute; top: calc(372 * var(--u)); left: 0; right: 0; font-family: var(--serif); font-style: italic; font-size: calc(70 * var(--u)); line-height: 1; text-transform: uppercase; }
.oc-hero .sub { position: absolute; top: calc(486 * var(--u)); left: 0; right: 0; margin-left: auto; margin-right: auto; width: calc(390 * var(--u)); font-weight: 700; font-size: calc(30 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-hero .txt { position: absolute; top: calc(572 * var(--u)); left: 0; right: 0; margin-left: auto; margin-right: auto; width: calc(760 * var(--u)); font-weight: 500; font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); } /* era 431u no XD; mais largo para o texto caber em 3 linhas e sobrar espaço para os botões */
.oc-hero .bts { position: absolute; top: calc(725 * var(--u)); left: 0; right: 0; display: flex; justify-content: center; gap: calc(19 * var(--u)); flex-wrap: wrap; }
/* manifesto: player de áudio no topo (ou botão que abre vídeo em janela) */
.oc-hero .manifesto { flex-basis: 100%; display: flex; justify-content: center; margin-top: calc(22 * var(--u)); }
.oc-hero .manifesto .tocar { position: relative; display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(22 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); border: calc(1.5 * var(--u)) solid rgba(208,222,187,.55); border-radius: 999px; background: rgba(33,35,34,.35); backdrop-filter: blur(6px); color: var(--salvia); font: 600 calc(16 * var(--u))/1 var(--sans); letter-spacing: .02em; cursor: pointer; transition: background .25s, border-color .25s, transform .25s; overflow: hidden; }
.oc-hero .manifesto .tocar:hover { background: rgba(33,35,34,.55); border-color: var(--salvia); transform: translateY(-2px); }
.oc-hero .manifesto .ico { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: var(--salvia); color: var(--tinta); flex: none; }
.oc-hero .manifesto .ico svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: currentColor; }
.oc-hero .manifesto .ico .play { margin-left: calc(3 * var(--u)); }
.oc-hero .manifesto .ico .pause, .oc-hero .manifesto .tocar[aria-pressed="true"] .ico .play { display: none; }
.oc-hero .manifesto .tocar[aria-pressed="true"] .ico .pause { display: block; }
.oc-hero .manifesto .rot { display: flex; flex-direction: column; align-items: flex-start; gap: calc(3 * var(--u)); text-align: left; }
.oc-hero .manifesto .tempo { font-weight: 400; font-size: calc(12 * var(--u)); opacity: .75; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.oc-hero .manifesto .tempo:empty { display: none; }
.oc-hero .manifesto .barra { position: absolute; left: 0; right: 0; bottom: 0; height: calc(3 * var(--u)); background: rgba(208,222,187,.18); }
.oc-hero .manifesto .barra i { display: block; height: 100%; width: 0; background: var(--salvia); transition: width .25s linear; }
.oc-hero .manifesto audio { display: none; }
/* mini player fixo (aparece quando o manifesto está tocando) */
.oc-mini { position: fixed; left: 16px; bottom: 16px; z-index: 9001; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; background: #212322; color: #D6D2C4; box-shadow: 0 18px 50px rgba(0,0,0,.35); font: 500 13px/1.3 var(--sans); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .35s, bottom .3s; }
.oc-mini.on { opacity: 1; transform: none; pointer-events: auto; }
.oc-mini button { border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; padding: 0; }
.oc-mini svg { width: 18px; height: 18px; fill: currentColor; }
.oc-mini .pp { width: 42px; height: 42px; border-radius: 50%; background: var(--salvia); color: var(--tinta); flex: none; }
.oc-mini .pp .play { margin-left: 2px; } .oc-mini .pp .pause, .oc-mini .pp[aria-pressed="true"] .play { display: none; } .oc-mini .pp[aria-pressed="true"] .pause { display: block; }
.oc-mini .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oc-mini .info strong { font-weight: 600; white-space: nowrap; }
.oc-mini .tempo { font-size: 11px; opacity: .7; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.oc-mini .trilha { position: relative; width: 150px; height: 18px; cursor: pointer; flex: none; }
.oc-mini .trilha::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: rgba(214,210,196,.22); }
.oc-mini .trilha i { position: absolute; left: 0; top: 7px; height: 4px; width: 0; border-radius: 2px; background: var(--salvia); }
.oc-mini .trilha:focus-visible { outline: 2px solid var(--salvia); outline-offset: 2px; border-radius: 4px; }
.oc-mini .mudo { width: 32px; height: 32px; border-radius: 50%; opacity: .85; } .oc-mini .mudo:hover { background: rgba(214,210,196,.12); opacity: 1; }
.oc-mini .mudo .semsom, .oc-mini .mudo[aria-pressed="true"] .som { display: none; } .oc-mini .mudo[aria-pressed="true"] .semsom { display: block; }
.oc-mini .vol { width: 84px; height: 4px; margin: 0; accent-color: var(--salvia); cursor: pointer; }
.oc-mini .fechar { width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 1; opacity: .7; margin-left: 2px; } .oc-mini .fechar:hover { background: rgba(214,210,196,.12); opacity: 1; }
@media (max-width: 720px) { .oc-mini { left: 12px; right: 12px; bottom: 12px; gap: 10px; } .oc-mini .info { flex: 1; } .oc-mini .trilha { width: auto; flex: 1 1 60px; } .oc-mini .vol { display: none; } }
.oc-manifesto-modal { border: 0; padding: 0; background: #000; border-radius: 16px; max-width: min(1100px, calc(100vw - 32px)); width: 100%; overflow: hidden; }
.oc-manifesto-modal::backdrop { background: rgba(33,35,34,.85); }
.oc-manifesto-modal video { display: block; width: 100%; max-height: 82vh; }
.oc-manifesto-modal form { position: absolute; top: 10px; right: 10px; margin: 0; }
.oc-manifesto-modal .fechar { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.oc-v6 .oc-hero .manifesto .tocar { border-color: rgba(214,210,196,.45); color: var(--tx); }
.oc-v6 .oc-hero .manifesto .ico { background: var(--areia); color: var(--c1); }
.oc-v6 .oc-hero .manifesto .barra i { background: var(--areia); }
/* largura mínima do XD, mas com respiro lateral para textos mais longos */
.oc-hero .bts .pill-salvia { min-width: calc(218 * var(--u)); padding: 0 calc(36 * var(--u)); }
.oc-hero .bts .pill-outline { min-width: calc(244 * var(--u)); padding: 0 calc(36 * var(--u)); }

.oc-video { height: calc(1226 * var(--u)); }
.oc-video .ov { position: absolute; top: calc(247 * var(--u)); left: 0; right: 0; text-align: center; }
.oc-video h2 { position: absolute; top: calc(292 * var(--u)); left: 0; right: 0; margin-left: auto; margin-right: auto; width: calc(964 * var(--u)); text-align: center; font-size: calc(50 * var(--u)); line-height: calc(50 * var(--u)); }
.oc-video p { position: absolute; top: calc(422 * var(--u)); left: 0; right: 0; margin-left: auto; margin-right: auto; width: calc(1003 * var(--u)); text-align: center; font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-video .quadro { transition: background-color .3s; position: absolute; top: calc(512 * var(--u)); left: 0; right: 0; margin-left: auto; margin-right: auto; width: calc(792 * var(--u)); height: calc(469 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--areia); overflow: hidden; display: grid; place-items: center; cursor: pointer; }
.oc-video .quadro:hover { background: #CFCABB; }
.oc-video .quadro .play { position: relative; width: calc(59 * var(--u)); height: calc(59 * var(--u)); border: calc(2.5 * var(--u)) solid var(--carvao); border-radius: 50%; display: grid; place-items: center; }
.oc-video .quadro .play svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(4 * var(--u)); fill: var(--carvao); }
.oc-video .quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.oc-video .quadro.tocando { cursor: default; } .oc-video .quadro.tocando::after { display: none; }
/* capa do vídeo (YouTube ou imagem do painel) com véu leve para o play ler bem */
.oc-video .quadro .capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oc-video .quadro.com-capa::after { content: ''; position: absolute; inset: 0; background: rgba(33,35,34,.28); transition: background .3s; }
.oc-video .quadro.com-capa:hover::after { background: rgba(33,35,34,.42); }
.oc-video .quadro.com-capa .play { z-index: 1; width: calc(76 * var(--u)); height: calc(76 * var(--u)); border-color: #fff; background: rgba(33,35,34,.35); backdrop-filter: blur(4px); transition: transform .3s, background .3s; }
.oc-video .quadro.com-capa .play svg { fill: #fff; width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.oc-video .quadro.com-capa:hover .play { transform: scale(1.06); background: rgba(33,35,34,.5); }
.oc-v6 .oc-video .quadro.com-capa .play { border-color: #fff; } .oc-v6 .oc-video .quadro.com-capa .play svg { fill: #fff; }

/* ---------- 3. o que é + cards + só no club (areia 2306–4338) ---------- */
.oc-club { background: var(--areia); color: var(--carvao); height: calc(2032 * var(--u)); }
.oc-club .foto1 { position: absolute; top: calc(245 * var(--u)); left: calc(360 * var(--u)); width: calc(489 * var(--u)); height: calc(544 * var(--u)); border-radius: calc(20 * var(--u)); object-fit: cover; }
.oc-club .tx { position: absolute; left: calc(966 * var(--u)); top: calc(351 * var(--u)); width: calc(523 * var(--u)); }
.oc-club .tx h2 { margin-top: calc(50 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1; white-space: nowrap; }
.oc-club .tx h2 em { color: var(--terracota); }
.oc-club .tx p { margin-top: calc(39 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-club .tx p.b { margin-top: calc(32 * var(--u)); font-weight: 700; }
.oc-card2 { position: absolute; top: calc(889 * var(--u)); width: calc(590 * var(--u)); height: calc(419 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--gelo); padding: calc(54 * var(--u)) calc(40 * var(--u)) 0; }
.oc-card2.nao { left: calc(360 * var(--u)); } .oc-card2.sim { left: calc(966 * var(--u)); }
.oc-card2 h3 { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1; margin-bottom: calc(24 * var(--u)); }
.oc-card2 h3 svg { width: calc(39 * var(--u)); height: calc(39 * var(--u)); flex: none; }
.oc-card2.nao h3 svg, .oc-card2.nao li svg { fill: var(--terracota); }
.oc-card2.sim h3 svg, .oc-card2.sim li svg { fill: var(--oliva); }
.oc-card2 ul { list-style: none; margin: 0; padding: 0; }
.oc-card2 li { display: flex; gap: calc(15 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.oc-card2 li svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); flex: none; margin-top: calc(6 * var(--u)); }
.oc-card2.nao li { line-height: calc(30 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.oc-so h2 { position: absolute; top: calc(1424 * var(--u)); left: 0; right: 0; text-align: center; font-size: calc(50 * var(--u)); line-height: 1; }
.oc-so h2 em { color: var(--terracota); }
.oc-so .item { position: absolute; top: calc(1530 * var(--u)); width: calc(287 * var(--u)); }
.oc-so .item:nth-child(2) { left: calc(360 * var(--u)); } .oc-so .item:nth-child(3) { left: calc(663 * var(--u)); } .oc-so .item:nth-child(4) { left: calc(966 * var(--u)); } .oc-so .item:nth-child(5) { left: calc(1269 * var(--u)); }
.oc-so .box { width: calc(85 * var(--u)); height: calc(85 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--terracota); display: grid; place-items: center; }
.oc-so .box svg { width: calc(45 * var(--u)); height: calc(45 * var(--u)); fill: var(--carvao); }
.oc-so h3 { margin-top: calc(28 * var(--u)); font-weight: 500; font-size: calc(26 * var(--u)); line-height: 1; }
.oc-so p { margin-top: calc(16 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }

/* ---------- 4. a jornada (oliva 4338–5372) ---------- */
.oc-jornada { background: var(--oliva); color: var(--gelo); height: calc(1034 * var(--u)); }
.oc-jornada .tx { position: absolute; left: calc(360 * var(--u)); top: calc(291 * var(--u)); width: calc(559 * var(--u)); }
.oc-jornada h2 { margin-top: calc(11 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(42 * var(--u)); }
.oc-jornada p { margin-top: calc(25 * var(--u)); width: calc(368 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-jornada p + p { margin-top: calc(30 * var(--u)); }
.oc-jornada .foto2 { position: absolute; top: calc(245 * var(--u)); left: calc(1067 * var(--u)); width: calc(489 * var(--u)); height: calc(544 * var(--u)); border-radius: calc(20 * var(--u)); object-fit: cover; }

/* ---------- 5. programação (gelo 5372–8623) ---------- */
.oc-prog { background: var(--gelo); color: var(--carvao); padding: calc(245 * var(--u)) 0 calc(200 * var(--u)); }
.oc-prog .wrap { display: grid; grid-template-columns: calc(489 * var(--u)) 1fr; column-gap: calc(117 * var(--u)); align-items: start; }
.oc-prog .esq { position: sticky; top: calc(140 * var(--u)); }
.oc-prog .esq h2 { margin-top: calc(11 * var(--u)); width: calc(471 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(40 * var(--u)); }
.oc-prog .esq h2 em { color: var(--terracota); }
.oc-prog .esq .b { margin-top: calc(100 * var(--u)); font-weight: 600; font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: .026em; }
.oc-prog .esq p.n { margin-top: calc(14 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: .026em; }
.oc-prog .lista { position: relative; padding-left: calc(24 * var(--u)); margin-top: calc(4 * var(--u)); }
.oc-prog .trilho { position: absolute; left: 0; top: calc(8 * var(--u)); bottom: calc(60 * var(--u)); width: 1px; background: rgba(33, 35, 34, .25); }
.oc-prog .cheio { position: absolute; left: 0; top: calc(8 * var(--u)); width: 1px; height: 0; background: var(--terracota); }
.oc-prog .ponto { position: absolute; left: calc(-5 * var(--u)); top: calc(3 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: var(--terracota); box-shadow: 0 0 0 calc(4 * var(--u)) rgba(192, 76, 54, .18); will-change: transform; }
.oc-prog .aula { margin-bottom: calc(82 * var(--u)); }
.oc-prog .aula h3 { margin-top: calc(4 * var(--u)); font-weight: 500; font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-prog .aula p { margin-top: calc(6 * var(--u)); max-width: calc(555 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: .026em; }

/* ---------- 6. entre os encontros (areia 8623–9890) ---------- */
.oc-entre { background: var(--areia); color: var(--carvao); height: calc(1267 * var(--u)); }
.oc-entre .ov { position: absolute; top: calc(245 * var(--u)); left: 0; right: 0; text-align: center; color: var(--terracota); }
.oc-entre h2 { position: absolute; top: calc(302 * var(--u)); left: 0; right: 0; text-align: center; font-size: calc(50 * var(--u)); line-height: 1; }
.oc-entre h2 em { color: var(--terracota); }
.oc-entre .sub { position: absolute; top: calc(375 * var(--u)); left: 0; right: 0; margin-left: auto; margin-right: auto; width: calc(833 * var(--u)); text-align: center; font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-entre .foto3 { position: absolute; top: calc(457 * var(--u)); left: calc(764 * var(--u)); width: calc(388 * var(--u)); height: calc(564 * var(--u)); border-radius: calc(30 * var(--u)); object-fit: cover; }
.oc-call { position: absolute; width: calc(584 * var(--u)); min-height: calc(230 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--gelo); padding: calc(38 * var(--u)) calc(43 * var(--u)) calc(30 * var(--u)); display: flex; gap: calc(30 * var(--u)); align-items: flex-start; }
.oc-call.e { left: calc(164 * var(--u)); text-align: right; flex-direction: row-reverse; }
.oc-call.d { left: calc(1168 * var(--u)); }
.oc-call.a { top: calc(492 * var(--u)); } .oc-call.b { top: calc(752 * var(--u)); }
.oc-call svg { width: calc(38 * var(--u)); height: calc(38 * var(--u)); fill: var(--terracota); flex: none; margin-top: calc(-4 * var(--u)); }
.oc-call h3 { font-weight: 500; font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-call p { font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }

/* ---------- 7. na prática (branco 9890–11322) ---------- */
.oc-pratica { background: var(--branco); color: var(--carvao); height: calc(1432 * var(--u)); }
.oc-pratica .ov { position: absolute; top: calc(249 * var(--u)); left: 0; right: 0; text-align: center; color: var(--terracota); }
.oc-pratica h2 { position: absolute; top: calc(296 * var(--u)); left: 0; right: 0; margin-left: auto; margin-right: auto; width: calc(626 * var(--u)); text-align: center; font-size: calc(50 * var(--u)); line-height: calc(50 * var(--u)); }
.oc-pratica h2 em { color: var(--terracota); }
.oc-pratica .sub { position: absolute; top: calc(443 * var(--u)); left: 0; right: 0; margin-left: auto; margin-right: auto; width: calc(585 * var(--u)); text-align: center; font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-pc { position: absolute; width: calc(388 * var(--u)); height: calc(305 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--gelo); padding: calc(28 * var(--u)) calc(31 * var(--u)) 0; }
.oc-pc.l1 { top: calc(555 * var(--u)); } .oc-pc.l2 { top: calc(880 * var(--u)); height: calc(307 * var(--u)); }
.oc-pc.c1 { left: calc(360 * var(--u)); } .oc-pc.c2 { left: calc(764 * var(--u)); } .oc-pc.c3 { left: calc(1168 * var(--u)); }
.oc-pc .box { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(15 * var(--u)); background: var(--carvao); display: grid; place-items: center; }
.oc-pc .box svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); fill: var(--gelo); }
.oc-pc .tag { display: block; margin-top: calc(18 * var(--u)); line-height: 1; }
.oc-pc h3 { margin-top: calc(21 * var(--u)); font-weight: 500; font-size: calc(22 * var(--u)); line-height: 1; }
.oc-pc p { margin-top: calc(10 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); letter-spacing: .015em; }

/* ---------- 8. por que originals (oliva 11322–12112) ---------- */
.oc-porque { background: var(--oliva); color: var(--salvia); height: calc(790 * var(--u)); }
.oc-porque .logo { position: absolute; top: calc(250 * var(--u)); left: calc(358 * var(--u)); width: calc(325 * var(--u)); }
.oc-porque .logo svg { width: 100%; height: auto; display: block; }
.oc-porque .ov { position: absolute; top: calc(370 * var(--u)); left: calc(360 * var(--u)); }
.oc-porque h2 { position: absolute; top: calc(412 * var(--u)); left: calc(360 * var(--u)); font-size: calc(30 * var(--u)); line-height: calc(32 * var(--u)); }
.oc-porque .col { position: absolute; top: calc(250 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-porque .col p + p { margin-top: calc(30 * var(--u)); }
.oc-porque .c1 { left: calc(764 * var(--u)); width: calc(360 * var(--u)); }
.oc-porque .c2 { left: calc(1168 * var(--u)); width: calc(340 * var(--u)); }
.oc-porque .c2 .b { font-weight: 700; }

/* ---------- 9. para os pais (terracota 12112–13153) ---------- */
.oc-pais { background: var(--terracota); color: var(--carvao); height: calc(1090 * var(--u)); overflow: hidden; }
.oc-pais .marca { position: absolute; top: calc(124 * var(--u)); left: calc(663 * var(--u)); width: calc(594 * var(--u)); opacity: .045; pointer-events: none; }
.oc-pais .marca svg { width: 100%; height: auto; display: block; }
.oc-pais .ov { position: absolute; top: calc(247 * var(--u)); left: 0; right: 0; text-align: center; }
.oc-pais h2 { position: absolute; top: calc(284 * var(--u)); left: 0; right: 0; margin-left: auto; margin-right: auto; width: calc(758 * var(--u)); text-align: center; font-size: calc(40 * var(--u)); line-height: calc(42 * var(--u)); }
.oc-pais .nums { position: absolute; top: calc(392 * var(--u)); left: calc(360 * var(--u)); display: grid; grid-template-columns: repeat(4, calc(287 * var(--u))); column-gap: calc(16 * var(--u)); text-align: center; }
.oc-pais .nums b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: calc(60 * var(--u)); line-height: 1; }
.oc-pais .nums span { display: block; margin: calc(16 * var(--u)) auto 0; max-width: calc(260 * var(--u)); font-style: italic; font-size: calc(17 * var(--u)); line-height: calc(23 * var(--u)); text-wrap: balance; }
.oc-pais .nums b.palavra { font-size: calc(46 * var(--u)); line-height: calc(60 * var(--u)); }
.oc-pais .col { position: absolute; top: calc(640 * var(--u)); width: calc(513 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-pais .col p + p { margin-top: calc(30 * var(--u)); }
.oc-pais .c1 { left: calc(360 * var(--u)); } .oc-pais .c2 { left: calc(966 * var(--u)); }

/* ---------- 9b. investimento (seção nova, fluxo normal) ---------- */
.oc-invest { background: var(--areia); color: var(--carvao); padding: calc(200 * var(--u)) 0; }
.oc-invest .wrap { display: grid; grid-template-columns: 1fr calc(520 * var(--u)); column-gap: calc(120 * var(--u)); align-items: center; }
.oc-invest .ov { color: var(--oliva); }
.oc-invest h2 { margin-top: calc(24 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(46 * var(--u)); }
.oc-invest h2 em { color: var(--terracota); }
.oc-invest .tx > p { margin-top: calc(26 * var(--u)); max-width: calc(520 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-invest .cartao { background: var(--branco); border-radius: calc(30 * var(--u)); padding: calc(48 * var(--u)) calc(44 * var(--u)); box-shadow: 0 calc(18 * var(--u)) calc(50 * var(--u)) rgba(33,35,34,.08); }
.oc-invest .lote { display: inline-block; margin-bottom: calc(18 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u)); border: calc(1.5 * var(--u)) solid var(--terracota); border-radius: calc(8 * var(--u)); color: var(--terracota); font-weight: 500; font-size: calc(12 * var(--u)); line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; }
.oc-v6 .oc-invest .lote { border-color: var(--areia); color: var(--areia); }
.oc-invest .valor { font-family: var(--serif); font-style: italic; font-size: calc(72 * var(--u)); line-height: 1; color: var(--terracota); }
.oc-invest .nota { margin-top: calc(10 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); color: #3A3C3A; }
.oc-invest .presente { margin-top: calc(28 * var(--u)); padding: calc(24 * var(--u)) calc(26 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--salvia); color: var(--carvao); }
.oc-invest .presente .pt { font-weight: 500; font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }
.oc-invest .presente .pt em { color: var(--oliva); }
.oc-invest .presente p + p { margin-top: calc(10 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); }
.oc-invest .parcelas { margin-top: calc(24 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); color: #3A3C3A; }
.oc-invest .pill { margin-top: calc(28 * var(--u)); width: 100%; background: var(--carvao); color: var(--areia); }
.oc-invest .pill:hover { background: var(--terracota); }
/* peles */
.oc-v6 .oc-invest { background: var(--c2, #2A2C2A); color: var(--tx, #D6D2C4); }
.oc-v6 .oc-invest .ov { color: var(--salvia); } .oc-v6 .oc-invest .tx > p, .oc-v6 .oc-invest .nota, .oc-v6 .oc-invest .parcelas { color: #B8B4A7; }
.oc-v6 .oc-invest .cartao { background: var(--card, #2E302E); border: 1px solid rgba(214,210,196,.12); }
.oc-v6 .oc-invest .presente { background: rgba(208,222,187,.12); color: var(--areia); } .oc-v6 .oc-invest .presente .pt em { color: var(--salvia); }
.oc-v6 .oc-invest .pill { background: var(--areia); color: var(--carvao); }
.oc-v7 .oc-invest { background: var(--branco); } .oc-v7 .oc-invest .cartao { background: var(--gelo); }
.oc-v8 .oc-invest { background: var(--branco); } .oc-v8 .oc-invest .cartao { box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(33,35,34,.08); }
.oc-v9 .oc-invest { background: var(--gelo); }
@media (max-width: 900px) {
	.oc-invest { padding: 72px 0; }
	.oc-invest .wrap { display: block; }
	.oc-invest h2 { font-size: 28px; line-height: 34px; }
	.oc-invest .tx > p { font-size: 16px; line-height: 25px; max-width: none; }
	.oc-invest .cartao { margin-top: 32px; padding: 28px 24px; border-radius: 20px; }
	.oc-invest .lote { font-size: 11px; padding: 6px 12px; margin-bottom: 14px; }
	.oc-invest .valor { font-size: 52px; } .oc-invest .nota, .oc-invest .parcelas { font-size: 15px; line-height: 23px; }
	.oc-invest .presente { padding: 18px 20px; border-radius: 14px; } .oc-invest .presente .pt { font-size: 17px; line-height: 24px; } .oc-invest .presente p + p { font-size: 15px; line-height: 23px; }
	.oc-invest .pill { height: 52px; }
}

/* ---------- 10. faq (branco 13153–14379) ---------- */
.oc-faq { background: var(--branco); color: var(--carvao); padding: calc(248 * var(--u)) 0 calc(245 * var(--u)); }
.oc-faq .ov { text-align: center; color: var(--terracota); }
.oc-faq h2 { margin-top: calc(50 * var(--u)); text-align: center; font-size: calc(50 * var(--u)); line-height: 1; }
.oc-faq h2 em { color: var(--terracota); }
.oc-faq .lista { width: calc(1196 * var(--u)); margin: calc(70 * var(--u)) auto 0; }
.oc-faq details { background: var(--gelo); border-radius: calc(20 * var(--u)); margin-bottom: calc(30 * var(--u)); }
.oc-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: calc(24 * var(--u)); padding: calc(28 * var(--u)) calc(44 * var(--u)); font-weight: 700; font-size: calc(26 * var(--u)); line-height: calc(36 * var(--u)); color: var(--tinta); }
.oc-faq summary::-webkit-details-marker { display: none; }
.oc-faq summary > span { flex: 1; min-width: 0; }
.oc-faq summary svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: none; fill: none; stroke: #22221A; stroke-width: 28; transition: transform .3s; }
.oc-faq details[open] summary svg { transform: rotate(180deg); }
.oc-faq .resp { padding: 0 calc(44 * var(--u)) calc(34 * var(--u)); max-width: calc(820 * var(--u)); font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); color: var(--tinta); }

/* ---------- 11. garantir vaga (terracota 14379–16086) ---------- */
/* o bloco do formulário cresce com o conteúdo (campo do aluno + consentimento longo); marca e copyright seguem em fluxo, com as mesmas distâncias do XD */
/* rodapé: só marca e copyright (o formulário saiu; a vaga é garantida no checkout externo) */
.oc-vaga { background: var(--terracota); color: var(--carvao); height: auto; min-height: 0; padding: calc(200 * var(--u)) 0 calc(180 * var(--u)); display: flow-root; }
.oc-vaga .ov { position: absolute; top: calc(242 * var(--u)); left: 0; right: 0; text-align: center; }
.oc-vaga h2 { position: absolute; top: calc(289 * var(--u)); left: 0; right: 0; text-align: center; font-size: calc(50 * var(--u)); line-height: calc(50 * var(--u)); }
.oc-vaga .sub { position: absolute; top: calc(436 * var(--u)); left: 0; right: 0; margin-left: auto; margin-right: auto; width: calc(519 * var(--u)); text-align: center; font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-vaga form { position: relative; margin: calc(541 * var(--u)) auto 0; width: calc(590 * var(--u)); }
.oc-vaga label { display: block; font-weight: 700; font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); letter-spacing: -.03em; margin-bottom: calc(7 * var(--u)); }
.oc-vaga input { display: block; width: 100%; height: calc(56 * var(--u)); border: 0; border-radius: calc(15 * var(--u)); background: var(--branco); padding: 0 calc(18 * var(--u)); font: 500 calc(16 * var(--u)) / 1 var(--sans); letter-spacing: -.03em; color: var(--carvao); outline: 0; margin-bottom: calc(24 * var(--u)); }
.oc-vaga input::placeholder { color: #B1B1B1; }
.oc-vaga input:focus { box-shadow: 0 0 0 calc(3 * var(--u)) rgba(33, 35, 34, .35); }
.oc-vaga .hp { position: absolute; left: -9999px; }
.oc-vaga button { display: block; width: 100%; height: calc(56 * var(--u)); margin-top: calc(15 * var(--u)); border: 0; border-radius: calc(15 * var(--u)); background: var(--carvao); color: var(--salvia); font: 700 calc(20 * var(--u)) / 1 var(--sans); text-transform: uppercase; letter-spacing: -.03em; cursor: pointer; transition: transform .25s, background-color .25s; }
.oc-vaga button:hover { transform: translateY(-2px); background: #101211; }
.oc-vaga .aviso { position: absolute; top: calc(500 * var(--u)); left: 0; right: 0; text-align: center; font-size: calc(16 * var(--u)); color: var(--carvao); }
.oc-vaga .marca { position: relative; margin: 0 auto; width: calc(510 * var(--u)); }
.oc-vaga .marca svg { width: 100%; height: auto; display: block; }
.oc-vaga .copy { position: relative; margin-top: calc(27 * var(--u)); text-align: center; font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }

/* ---------- obrigado (visual da v2) ---------- */
.oc-obrigado-pg .oc-hd, .oc-obrigado-pg .oc-hd.rolou { background: transparent; box-shadow: none; backdrop-filter: none; }
.oc-obrigado { background: var(--terracota); color: var(--carvao); min-height: 100vh; min-height: 100dvh; padding: calc(240 * var(--u)) 24px calc(120 * var(--u)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.oc-obrigado .msg { max-width: calc(760 * var(--u)); }
.oc-obrigado h1 { margin-top: calc(24 * var(--u)); font-size: calc(50 * var(--u)); line-height: calc(52 * var(--u)); }
.oc-obrigado .sub { margin: calc(26 * var(--u)) auto 0; max-width: calc(560 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
.oc-obrigado .marca { width: calc(510 * var(--u)); margin-top: calc(140 * var(--u)); }
.oc-404 .oc-obrigado .ov { font-size: calc(18 * var(--u)); letter-spacing: .2em; }
.oc-404 .oc-obrigado .volta { margin-top: calc(36 * var(--u)); }
.oc-lp .pill-carvao { background: var(--carvao); color: var(--salvia); } .oc-lp .pill-carvao:hover { background: #101211; }
@media (max-width: 900px) { .oc-404 .oc-obrigado .volta { margin-top: 26px; } }
.oc-obrigado .marca svg { width: 100%; height: auto; display: block; }
.oc-obrigado .copy { margin-top: calc(40 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); }
@media (max-width: 900px) { .oc-obrigado { padding: 130px 24px 64px; } .oc-obrigado h1 { font-size: 34px; line-height: 38px; } .oc-obrigado .sub { font-size: 16px; line-height: 25px; } .oc-obrigado .marca { width: 220px; margin-top: 64px; } .oc-obrigado .copy { font-size: 14px; line-height: 20px; margin-top: 28px; } }

/* consentimento LGPD no formulário */
.oc-vaga .consent { display: flex; align-items: flex-start; gap: calc(10 * var(--u)); margin: calc(-6 * var(--u)) 0 calc(18 * var(--u)); font-weight: 400; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: 0; cursor: pointer; }
.oc-vaga .consent input { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: calc(1 * var(--u)) 0 0; flex: none; accent-color: var(--carvao); }
.oc-vaga .consent a { text-decoration: underline; text-underline-offset: 2px; }
.oc-vaga .consent .oc-lgpd-abrir { display: inline-block; margin-top: calc(4 * var(--u)); font-weight: 700; }
.oc-v6 .oc-vaga .consent { color: var(--tx); } .oc-v6 .oc-vaga .consent input { accent-color: var(--areia); }
@media (max-width: 900px) { .oc-vaga .consent { font-size: 13px; line-height: 19px; } }

/* ---------- 12. rodapé (carvão) ---------- */
.oc-ft { background: var(--carvao); color: var(--gelo); height: calc(125 * var(--u)); display: flex; align-items: center; justify-content: space-evenly; padding: 0 calc(120 * var(--u)); font-size: calc(20 * var(--u)); }
.oc-ft a { opacity: .9; } .oc-ft a:hover { opacity: 1; text-decoration: underline; }

/* ===================================================================== MOBILE */
@media (max-width: 900px) {
	:root { --u: 1px; }
	.oc-lp .wrap { width: auto; margin: 0 24px; }
	.oc-lp .ov { font-size: 13px; line-height: 18px; letter-spacing: .08em; }
	.oc-lp .tag { font-size: 12px; }
	.oc-lp .pill { height: 52px; font-size: 14px; padding: 0 22px; }
	.oc-hd { height: 72px; padding: 0 16px; background: rgba(33, 35, 34, .92); }
	.oc-hd .logo svg { height: 40px; }
	.oc-hd .pill { height: 42px; padding: 0 18px; font-size: 13px; }
	/* hero: vira fluxo */
	.oc-hero { height: auto; min-height: 100svh; padding: 120px 24px 60px; display: flex; flex-direction: column; justify-content: center; }
	.oc-hero .miolo, .oc-hero .ov, .oc-hero .t1, .oc-hero .t2, .oc-hero .sub, .oc-hero .txt, .oc-hero .bts { position: static; transform: none; width: auto; left: auto; }
	.oc-hero .miolo { position: relative; z-index: 1; text-align: center; }
	.oc-v4 .oc-hero .foto img, .oc-v5 .oc-hero .foto img { transform: none; object-position: 50% 30%; }
	.oc-hero .t1, .oc-hero .t2 { display: block; }
	.oc-hero .t1 { margin-top: 18px; font-size: 34px; }
	.oc-hero .t2 { margin-top: 6px; font-size: 46px; }
	.oc-hero .sub { margin: 26px auto 0; max-width: 320px; font-size: 22px; line-height: 26px; }
	.oc-hero .txt { margin: 16px auto 0; max-width: 400px; font-size: 16px; line-height: 25px; }
	.oc-hero .bts { margin-top: 32px; flex-direction: column; align-items: center; gap: 12px; }
	.oc-hero .manifesto { margin-top: 10px; }
	.oc-hero .manifesto .tocar { font-size: 14px; gap: 12px; padding: 7px 18px 7px 7px; border-width: 1px; }
	.oc-hero .manifesto .ico { width: 40px; height: 40px; } .oc-hero .manifesto .ico svg { width: 16px; height: 16px; } .oc-hero .manifesto .tempo { font-size: 11px; } .oc-hero .manifesto .barra { height: 3px; }
	.oc-hero .bts .pill { min-width: 260px; width: auto; padding: 0 28px; }
	.oc-video { height: auto; padding: 80px 24px; }
	.oc-video .ov, .oc-video h2, .oc-video p, .oc-video .quadro { position: static; transform: none; width: auto; }
	.oc-video h2 { margin-top: 14px; font-size: 30px; line-height: 34px; }
	.oc-video p { margin-top: 18px; font-size: 16px; line-height: 25px; }
	.oc-video .quadro { position: relative; top: auto; left: auto; margin: 32px auto 0; aspect-ratio: 16 / 9; height: auto; max-width: 560px; } /* relativo: a capa e o iframe são absolutos dentro dele */
	.oc-video .quadro.com-capa .play { width: 60px; height: 60px; } .oc-video .quadro.com-capa .play svg { width: 20px; height: 20px; }
	.oc-club { height: auto; padding: 72px 24px; }
	.oc-club .foto1 { position: static; width: 100%; max-width: 420px; height: auto; aspect-ratio: 489 / 544; margin: 0 auto; }
	.oc-club .tx { position: static; width: auto; margin-top: 36px; }
	.oc-club .tx h2 { font-size: 30px; line-height: 34px; white-space: normal; margin-top: 12px; }
	.oc-club .tx p { font-size: 16px; line-height: 25px; margin-top: 18px; }
	.oc-card2 { position: static; width: auto; height: auto; padding: 32px 26px 22px; margin-top: 24px; }
	.oc-card2 h3 { font-size: 22px; }
	.oc-card2 li, .oc-card2.nao li { font-size: 16px; line-height: 24px; }
	.oc-so h2 { position: static; margin-top: 64px; font-size: 32px; line-height: 36px; }
	.oc-so .item { position: static !important; width: auto; margin-top: 36px; text-align: center; }
	.oc-so .box { margin: 0 auto; }
	.oc-so .box { width: 64px; height: 64px; border-radius: 20px; } .oc-so .box svg { width: 32px; height: 32px; }
	.oc-so h3 { font-size: 22px; margin-top: 18px; } .oc-so p { font-size: 16px; line-height: 25px; }
	.oc-jornada { height: auto; padding: 72px 24px; }
	.oc-jornada .tx { position: static; width: auto; }
	.oc-jornada h2 { font-size: 30px; line-height: 34px; }
	.oc-jornada p { width: auto; font-size: 16px; line-height: 25px; }
	.oc-jornada .foto2 { position: static; width: 100%; max-width: 420px; height: auto; aspect-ratio: 489 / 544; margin: 36px auto 0; }
	.oc-prog { padding: 72px 0; }
	.oc-prog .wrap { display: block; }
	.oc-prog .esq { position: static; }
	.oc-prog .esq h2 { width: auto; font-size: 30px; line-height: 34px; }
	.oc-prog .esq .b { margin-top: 28px; font-size: 16px; line-height: 24px; }
	.oc-prog .esq p.n { font-size: 16px; line-height: 24px; }
	.oc-prog .lista { margin-top: 48px; padding-left: 22px; }
	.oc-prog .aula { margin-bottom: 40px; }
	.oc-prog .aula h3 { font-size: 20px; line-height: 26px; } .oc-prog .aula p { font-size: 16px; line-height: 24px; max-width: none; }
	.oc-entre { height: auto; padding: 72px 24px; }
	.oc-entre .ov, .oc-entre h2, .oc-entre .sub, .oc-entre .foto3 { position: static; transform: none; width: auto; }
	.oc-entre h2 { margin-top: 14px; font-size: 32px; line-height: 36px; }
	.oc-entre .sub { margin-top: 16px; font-size: 16px; line-height: 25px; }
	.oc-entre .foto3 { width: 100%; max-width: 360px; height: auto; aspect-ratio: 388 / 564; margin: 32px auto 0; }
	.oc-call, .oc-call.e { position: static; width: auto; min-height: 0; margin-top: 20px; padding: 28px 24px; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
	.oc-call svg { margin-top: 0; }
	.oc-call svg { width: 28px; height: 28px; }
	.oc-call h3 { font-size: 18px; line-height: 24px; } .oc-call p { font-size: 15px; line-height: 23px; }
	.oc-pratica { height: auto; padding: 72px 24px; }
	.oc-pratica .ov, .oc-pratica h2, .oc-pratica .sub { position: static; transform: none; width: auto; }
	.oc-pratica h2 { margin-top: 14px; font-size: 32px; line-height: 36px; }
	.oc-pratica .sub { margin-top: 16px; font-size: 16px; line-height: 25px; }
	.oc-pc { position: static !important; width: auto; height: auto !important; padding: 26px 26px 26px; margin-top: 16px; }
	.oc-pc h3 { font-size: 20px; } .oc-pc p { font-size: 16px; line-height: 24px; }
	.oc-porque { height: auto; padding: 72px 24px; }
	.oc-porque .logo, .oc-porque .ov, .oc-porque h2, .oc-porque .col { position: static; width: auto; }
	.oc-porque .logo { width: 220px; } .oc-porque .ov { margin-top: 36px; }
	.oc-porque h2 { margin-top: 12px; font-size: 24px; line-height: 30px; }
	.oc-porque .col { margin-top: 28px; font-size: 16px; line-height: 25px; }
	.oc-pais { height: auto; padding: 72px 24px; }
	.oc-pais .marca { width: 70%; left: 15%; top: 40px; }
	.oc-pais .ov, .oc-pais h2, .oc-pais .nums, .oc-pais .col { position: static; transform: none; width: auto; }
	.oc-pais h2 { margin-top: 14px; font-size: 30px; line-height: 34px; }
	.oc-pais .nums { grid-template-columns: 1fr 1fr; gap: 28px 12px; margin-top: 36px; }
	.oc-pais .nums b { font-size: 44px; } .oc-pais .nums b.palavra { font-size: 30px; line-height: 44px; } .oc-pais .nums span { font-size: 14px; line-height: 19px; margin-top: 8px; max-width: none; }
	.oc-pais .col { margin-top: 32px; font-size: 16px; line-height: 25px; }
	.oc-faq { padding: 72px 0; }
	.oc-faq h2 { font-size: 32px; line-height: 36px; margin-top: 14px; }
	.oc-faq .lista { width: auto; margin: 36px 24px 0; }
	.oc-faq summary { padding: 18px 20px; font-size: 18px; line-height: 24px; } .oc-faq summary svg { width: 20px; height: 20px; }
	.oc-faq .resp { padding: 0 20px 22px; font-size: 16px; line-height: 25px; }
	.oc-vaga { height: auto; padding: 64px 24px 48px; }
	.oc-vaga .ov, .oc-vaga h2, .oc-vaga .sub, .oc-vaga form, .oc-vaga .marca, .oc-vaga .copy, .oc-vaga .aviso { position: static; transform: none; width: auto; }
	.oc-vaga h2 { margin-top: 14px; font-size: 32px; line-height: 36px; }
	.oc-vaga .sub { margin-top: 16px; font-size: 16px; line-height: 25px; }
	.oc-vaga form { margin: 36px auto 0; max-width: 480px; }
	.oc-vaga label { font-size: 14px; } .oc-vaga input { height: 50px; font-size: 15px; margin-bottom: 16px; } .oc-vaga button { height: 52px; font-size: 15px; }
	.oc-vaga .marca { width: 220px; margin: 0 auto; }
	.oc-vaga .copy { margin-top: 28px; font-size: 14px; line-height: 20px; }
	.oc-ft { height: auto; flex-direction: column; gap: 14px; padding: 28px 24px; font-size: 15px; text-align: center; }
}

/* ---------- índice de versões (home) ---------- */
.oc-idx { min-height: 100vh; background: var(--carvao); color: var(--areia); padding: 64px 24px 48px; }
.oc-idx-topo { max-width: 1200px; margin: 0 auto 40px; text-align: center; }
.oc-idx-topo .logo svg { height: 56px; width: auto; margin: 0 auto 36px; display: block; }
.oc-idx-topo .ov { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--salvia); font-weight: 500; }
.oc-idx-topo h1 { margin-top: 14px; font-size: 40px; line-height: 1.1; font-weight: 400; }
.oc-idx-topo .sub { margin: 16px auto 0; max-width: 620px; font-size: 17px; line-height: 1.55; color: #B8B4A7; }
.oc-idx-grade { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }
.oc-lp .oc-idx-card { display: flex; flex-direction: column; background: var(--gelo); color: var(--carvao); line-height: 0; border-radius: 20px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.oc-idx-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.oc-idx-card .previa { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--areia); line-height: 0; }
.oc-idx-card .previa img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.oc-idx-card .nome { display: block; padding: 22px 26px 0; font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--carvao); }
.oc-idx-card .desc { display: block; padding: 8px 26px 0; font-size: 15px; line-height: 1.5; color: #3A3C3A; }
.oc-idx-card .link { display: block; padding: 18px 26px 24px; font-size: 13px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--terracota); margin-top: auto; }
.oc-idx-rodape { text-align: center; margin-top: 96px; padding: 32px 0 24px; border-top: 1px solid rgba(214, 210, 196, .15); font-size: 14px; color: #8C897E; }

/* =====================================================================
   v7 · CLUBE POR CONVITE · escuro e heráldico
   Carvão como base, pattern da marca em baixo contraste, escudo como marca
   d'água, fotos monocromáticas, numerais romanos e filetes duplos.
   ===================================================================== */
.oc-v6 { --c1: #212322; --c2: #2A2C2A; --c3: #191B1A; --card: #2E302E; --tx: #D6D2C4; --tx2: #B8B4A7; }
body.oc-v6 { background: var(--c1); }
.oc-v6 .oc-progresso span { background: var(--terracota); }

/* grain de papel sobre tudo */
body.oc-v6::after { content: ''; position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: .07; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* escudo fixo, marca d'água que acompanha a rolagem */
.oc-v6 .oc-marca-fixa { position: fixed; right: calc(-60 * var(--u)); top: 12vh; width: calc(560 * var(--u)); opacity: .045; z-index: 0; pointer-events: none; }
.oc-v6 .oc-marca-fixa svg { width: 100%; height: auto; display: block; }
.oc-v6 .sec { position: relative; z-index: 1; }

/* filete duplo sobre as linhas pequenas */
.oc-v6 .sec .ov::before { content: ''; display: block; width: calc(56 * var(--u)); height: calc(5 * var(--u)); border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; margin: 0 0 calc(14 * var(--u)); opacity: .7; }
.oc-v6 .oc-hero .ov::before, .oc-v6 .oc-video .ov::before, .oc-v6 .oc-entre .ov::before, .oc-v6 .oc-pratica .ov::before, .oc-v6 .oc-pais .ov::before, .oc-v6 .oc-faq .ov::before, .oc-v6 .oc-vaga .ov::before { margin-left: auto; margin-right: auto; }

/* ---------- hero: silêncio visual, pattern e selo ---------- */
.oc-v6 .oc-hero::before { content: ''; position: absolute; inset: 0; background: url('../img/pattern-04.png') center / calc(760 * var(--u)) repeat; opacity: .07; }
.oc-v6 .oc-hero .foto img { opacity: .16; filter: grayscale(1) contrast(1.1); transform: none; object-position: 50% 30%; }
.oc-v6 .oc-hero .foto::after { background: linear-gradient(180deg, rgba(33,35,34,.5) 0%, rgba(33,35,34,.1) 40%, rgba(33,35,34,.85) 100%); }
.oc-v6 .oc-hero .ov { top: calc(222 * var(--u)); }
.oc-v6 .oc-hero .t1 { color: var(--tx); }
.oc-v6 .oc-hero .t2 { color: var(--salvia); font-size: calc(96 * var(--u)); top: calc(362 * var(--u)); }
.oc-v6 .oc-hero .sub { top: calc(500 * var(--u)); }
.oc-v6 .oc-hero .txt { top: calc(586 * var(--u)); color: var(--tx); }
.oc-v6 .oc-hero .bts { top: calc(740 * var(--u)); }
.oc-selo { position: absolute; right: calc(160 * var(--u)); bottom: calc(120 * var(--u)); width: calc(190 * var(--u)); height: calc(190 * var(--u)); z-index: 2; }
.oc-selo > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: oc-gira 40s linear infinite; }
.oc-selo .escudo svg { animation: none; transform: none; }
.oc-selo text { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; fill: var(--salvia); }
.oc-selo .escudo { position: absolute; left: 50%; top: 50%; width: calc(58 * var(--u)); transform: translate(-50%, -50%); }
.oc-selo .escudo svg { width: 100%; height: auto; display: block; }
@keyframes oc-gira { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 900px) { .oc-selo.so-desk { display: none; } }

/* ---------- vídeo ---------- */
.oc-v6 .oc-video .quadro { background: var(--c2); border: 1px solid rgba(214,210,196,.18); box-shadow: inset 0 0 0 calc(6 * var(--u)) var(--c1), inset 0 0 0 calc(7 * var(--u)) rgba(214,210,196,.18); }
.oc-v6 .oc-video .quadro .play { border-color: var(--tx); } .oc-v6 .oc-video .quadro .play svg { fill: var(--tx); }

/* ---------- fotos internas: monocromáticas, com filete ---------- */
.oc-v6 .foto1, .oc-v6 .foto2, .oc-v6 .foto3 { box-shadow: 0 0 0 1px rgba(214,210,196,.35), 0 0 0 calc(9 * var(--u)) var(--c2), 0 0 0 calc(10 * var(--u)) rgba(214,210,196,.2); }

/* ---------- o que é + cards + só no club ---------- */
.oc-v6 .oc-club { background: var(--c2); color: var(--tx); }
.oc-v6 .oc-club .tx p { color: var(--tx2); } .oc-v6 .oc-club .tx p.b { color: var(--tx); }
.oc-v6 .oc-card2 { background: var(--card); color: var(--tx); border: 1px solid rgba(214,210,196,.12); }
.oc-v6 .oc-card2 li { color: var(--tx2); }
.oc-v6 .oc-card2.sim h3 svg, .oc-v6 .oc-card2.sim li svg { fill: var(--salvia); }
.oc-v6 .oc-so h3 { color: var(--tx); } .oc-v6 .oc-so p { color: var(--tx2); }
.oc-v6 .oc-so .box { background: transparent; border: 1px solid rgba(214,210,196,.35); } .oc-v6 .oc-so .box svg { fill: var(--salvia); }

/* ---------- jornada (oliva fica) ---------- */
.oc-v6 .oc-jornada { background: #3E4A33; }

/* ---------- programação ---------- */
.oc-v6 .oc-prog { background: var(--c1); color: var(--tx); }
.oc-v6 .oc-prog .esq h2 { color: var(--tx); } .oc-v6 .oc-prog .esq .b { color: var(--tx); } .oc-v6 .oc-prog .esq p.n { color: var(--tx2); }
.oc-v6 .oc-prog .aula h3 { color: var(--tx); } .oc-v6 .oc-prog .aula p { color: var(--tx2); }
.oc-v6 .oc-prog .trilho { background: rgba(214,210,196,.22); }
.oc-v6 .oc-prog .ponto { box-shadow: 0 0 0 calc(4 * var(--u)) rgba(192,76,54,.25); }

/* ---------- entre os encontros ---------- */
.oc-v6 .oc-entre { background: var(--c2); color: var(--tx); }
.oc-v6 .oc-entre .sub { color: var(--tx2); }
.oc-v6 .oc-call { background: var(--card); border: 1px solid rgba(214,210,196,.12); } .oc-v6 .oc-call p { color: var(--tx2); }

/* ---------- na prática ---------- */
.oc-v6 .oc-pratica { background: var(--c1); color: var(--tx); }
.oc-v6 .oc-pratica .sub { color: var(--tx2); }
.oc-v6 .oc-pc { background: var(--c2); border: 1px solid rgba(214,210,196,.12); }
.oc-v6 .oc-pc .box { background: var(--tx); } .oc-v6 .oc-pc .box svg { fill: var(--c1); }
.oc-v6 .oc-pc h3 { color: var(--tx); } .oc-v6 .oc-pc p { color: var(--tx2); }

/* ---------- por que originals (oliva fica) ---------- */
.oc-v6 .oc-porque { background: #3E4A33; }

/* ---------- para os pais: carvão com números em terracota ---------- */
.oc-v6 .oc-pais { background: var(--c3); color: var(--tx); }
.oc-v6 .oc-pais .marca { opacity: .06; }
.oc-v6 .oc-pais .nums b { color: var(--terracota); } .oc-v6 .oc-pais .nums span { color: var(--tx2); }
.oc-v6 .oc-pais .col { color: var(--tx2); }

/* ---------- faq ---------- */
.oc-v6 .oc-faq { background: var(--c2); color: var(--tx); }
.oc-v6 .oc-faq details { background: var(--card); border: 1px solid rgba(214,210,196,.12); }
.oc-v6 .oc-faq summary { color: var(--tx); } .oc-v6 .oc-faq summary svg { stroke: var(--tx); } .oc-v6 .oc-faq .resp { color: var(--tx2); }

/* ---------- garantir vaga: terracota, formulário como cartão de membro ---------- */
.oc-v6 .oc-vaga form { background: var(--c1); border-radius: calc(20 * var(--u)); padding: calc(36 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)); box-shadow: inset 0 0 0 calc(6 * var(--u)) var(--c1), inset 0 0 0 calc(7 * var(--u)) rgba(214,210,196,.35); width: calc(670 * var(--u)); margin-top: calc(520 * var(--u)); }
.oc-v6 .oc-vaga label { color: var(--tx); }
.oc-v6 .oc-vaga input { background: var(--c2); color: var(--tx); border: 1px solid rgba(214,210,196,.25); }
.oc-v6 .oc-vaga input::placeholder { color: #7F7C72; }
.oc-v6 .oc-vaga button { background: var(--areia); color: var(--c1); }
.oc-v6 .oc-vaga button:hover { background: #fff; }
.oc-v6 .oc-vaga .marca { margin-top: calc(140 * var(--u)); }

@media (max-width: 900px) {
	.oc-v6 .oc-marca-fixa { width: 300px; right: -90px; }
	.oc-v6 .oc-selo { position: relative; right: auto; bottom: auto; width: 120px; height: 120px; margin: 28px auto 0; }
	.oc-v6 .oc-hero .ov::before { margin-bottom: 10px; }
	.oc-v6 .oc-selo .escudo { width: 36px; }
	.oc-v6 .oc-hero .t2 { font-size: 52px; }
	.oc-v6 .oc-vaga form { width: auto; padding: 24px 20px 26px; }
}

/* =====================================================================
   v7 · a v2 com a paleta redistribuída (seis mudanças de cor por seção)
   ===================================================================== */
/* 1. Só no Originals Club em terracota (faixa inferior da seção areia) */
.oc-v7 .oc-club { background: linear-gradient(180deg, var(--areia) 0, var(--areia) calc(1350 * var(--u)), var(--terracota) calc(1350 * var(--u)), var(--terracota) 100%); }
.oc-v7 .oc-so h2, .oc-v7 .oc-so h3 { color: var(--carvao); } .oc-v7 .oc-so h2 em { color: var(--areia); }
.oc-v7 .oc-so p { color: #2A1B16; }
.oc-v7 .oc-so .box { background: var(--carvao); } .oc-v7 .oc-so .box svg { fill: var(--areia); }
/* 2. Entre os encontros em sálvia, cards brancos, ícones oliva */
.oc-v7 .oc-entre { background: var(--salvia); }
.oc-v7 .oc-entre .ov { color: var(--oliva); } .oc-v7 .oc-entre h2 em { color: var(--oliva); }
.oc-v7 .oc-call { background: var(--branco); } .oc-v7 .oc-call svg { fill: var(--oliva); }
/* 3. Por que Originals em carvão (A jornada segue oliva) */
.oc-v7 .oc-porque { background: var(--carvao); color: var(--areia); }
.oc-v7 .oc-porque .col { color: #B8B4A7; } .oc-v7 .oc-porque .c2 .b, .oc-v7 .oc-porque h2, .oc-v7 .oc-porque .ov { color: var(--areia); }
.oc-v7 .oc-porque .logo svg path { fill: var(--areia); }
/* 4. Programação: painel areia na coluna fixa, categoria em oliva */
.oc-v7 .oc-prog .esq { background: var(--areia); border-radius: calc(20 * var(--u)); padding: calc(44 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)); }
.oc-v7 .oc-prog .esq h2 { width: calc(409 * var(--u)); }
.oc-v7 .oc-prog .esq .b, .oc-v7 .oc-prog .esq p.n { width: calc(409 * var(--u)); }
.oc-v7 .oc-prog .aula .tag { color: var(--oliva); }
/* 5. Para os pais em areia, números em terracota */
.oc-v7 .oc-pais { background: var(--areia); }
.oc-v7 .oc-pais .marca { opacity: .07; } .oc-v7 .oc-pais .marca svg path { fill: var(--terracota); }
.oc-v7 .oc-pais .nums b { color: var(--terracota); }
.oc-v7 .oc-pais h2 em { color: var(--terracota); }
/* 6. FAQ em carvão */
.oc-v7 .oc-faq { background: var(--carvao); color: var(--areia); }
.oc-v7 .oc-faq .ov { color: var(--salvia); } .oc-v7 .oc-faq h2 em { color: var(--salvia); }
.oc-v7 .oc-faq details { background: #2E302E; }
.oc-v7 .oc-faq summary { color: var(--areia); } .oc-v7 .oc-faq summary svg { stroke: var(--areia); } .oc-v7 .oc-faq .resp { color: #B8B4A7; }
@media (max-width: 900px) {
	.oc-v7 .oc-club { background: var(--areia); }
	.oc-v7 .oc-so { background: var(--terracota); margin: 48px -24px 0; padding: 8px 24px 48px; }
	.oc-v7 .oc-so h2 { margin-top: 40px; }
	.oc-v7 .oc-prog .esq { margin: 0 24px; padding: 28px 24px 32px; }
	.oc-v7 .oc-prog .esq h2, .oc-v7 .oc-prog .esq .b, .oc-v7 .oc-prog .esq p.n { width: auto; }
}

/* ---------- página inicial mínima ---------- */
body.oc-inicio { background: var(--carvao); }
.oc-inicio-palco { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.oc-inicio-logo { width: min(360px, 60vw); }
.oc-inicio-logo svg { width: 100%; height: auto; display: block; }

/* =====================================================================
   v8 · COLAGEM COM ADESIVOS · jovem, areia e branco, polaroids e stickers
   ===================================================================== */
body.oc-v8 { background: var(--areia); }
.oc-v8 .oc-progresso span { background: var(--terracota); }
.oc-v8 .oc-hd.rolou { background: rgba(214,210,196,.94); }
.oc-v8 .oc-hd.rolou .logo svg path { fill: var(--carvao); }
.oc-v8 .oc-hd .logo svg path { fill: var(--carvao); }
.oc-v8 .oc-hd .pill { background: var(--carvao); color: var(--areia); }
/* hero */
.oc-v8 .oc-topo { background: var(--areia); color: var(--carvao); }
.oc-v8 .oc-hero { background: var(--areia); }
.oc-v8 .oc-hero::before { content: ''; position: absolute; inset: 0; background: url('../img/pattern-04.png') center / calc(640 * var(--u)) repeat; opacity: .09; }
.oc-v8 .oc-hero .foto { display: none; }
.oc-v8 .oc-hero .miolo { z-index: 3; }
.oc-v8 .oc-hero .ov { color: var(--oliva); }
.oc-v8 .oc-hero .t1 { color: var(--carvao); }
.oc-v8 .oc-hero .t2 { color: var(--terracota); }
.oc-v8 .oc-hero .sub { color: var(--carvao); }
.oc-v8 .oc-hero .txt { color: #3A3C3A; font-weight: 400; }
.oc-v8 .oc-hero .pill-salvia { background: var(--terracota); color: var(--areia); }
.oc-v8 .oc-hero .pill-outline { border-color: var(--carvao); color: var(--carvao); }
.oc-v8 .oc-hero .pill-outline:hover { background: var(--carvao); color: var(--areia); }
.oc-v8 .oc-polaroids { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.oc-v8 .pol { position: absolute; background: #fff; padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(46 * var(--u)); box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(33,35,34,.22); }
.oc-v8 .pol img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.oc-v8 .pol.p1 { left: calc(150 * var(--u)); top: calc(230 * var(--u)); width: calc(320 * var(--u)); transform: rotate(-7deg); }
.oc-v8 .pol.p2 { left: calc(1470 * var(--u)); top: calc(190 * var(--u)); width: calc(320 * var(--u)); transform: rotate(6deg); }
.oc-v8 .pol.p3 { left: calc(1300 * var(--u)); top: calc(640 * var(--u)); width: calc(250 * var(--u)); transform: rotate(-4deg); }
.oc-v8 .stk { position: absolute; display: block; filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(33,35,34,.25)); }
.oc-v8 .stk svg { width: 100%; height: auto; display: block; }
.oc-v8 .stk.s1 { left: calc(400 * var(--u)); top: calc(150 * var(--u)); width: calc(110 * var(--u)); transform: rotate(14deg); }
.oc-v8 .stk.s2 { left: calc(1420 * var(--u)); top: calc(560 * var(--u)); width: calc(120 * var(--u)); transform: rotate(-12deg); }
.oc-v8 .stk.s3 { left: calc(200 * var(--u)); top: calc(760 * var(--u)); width: calc(280 * var(--u)); transform: rotate(-5deg); }
/* vídeo */
.oc-v8 .oc-video { background: var(--carvao); color: var(--salvia); }
/* seções claras */
.oc-v8 .oc-club { background: var(--branco); }
.oc-v8 .oc-jornada { background: var(--salvia); color: var(--carvao); }
.oc-v8 .oc-jornada .ov { color: var(--oliva); } .oc-v8 .oc-jornada h2 em { color: var(--oliva); }
.oc-v8 .oc-entre { background: var(--areia); }
.oc-v8 .oc-pratica { background: var(--branco); }
.oc-v8 .oc-faq { background: var(--branco); }
/* fotos como polaroid + adesivo no canto */
.oc-v8 .foto1, .oc-v8 .foto2, .oc-v8 .foto3 { border: calc(14 * var(--u)) solid #fff; border-bottom-width: calc(48 * var(--u)); border-radius: 0; box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(33,35,34,.2); }
.oc-v8 .foto1 { transform: rotate(-2deg); } .oc-v8 .foto2 { transform: rotate(2deg); } .oc-v8 .foto3 { transform: rotate(-1.5deg); }
.oc-v8 .stk-foto { position: absolute; z-index: 3; filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(33,35,34,.25)); pointer-events: none; }
.oc-v8 .stk-foto svg { width: 100%; height: auto; display: block; }
.oc-v8 .stk-foto.sf1 { left: calc(780 * var(--u)); top: calc(700 * var(--u)); width: calc(120 * var(--u)); transform: rotate(10deg); }
.oc-v8 .stk-foto.sf3 { left: calc(1080 * var(--u)); top: calc(940 * var(--u)); width: calc(110 * var(--u)); transform: rotate(-12deg); }
/* cards com fita adesiva e etiquetas */
.oc-v8 .oc-card2, .oc-v8 .oc-call, .oc-v8 .oc-pc { background: var(--branco); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(33,35,34,.08); }
.oc-v8 .oc-card2::before, .oc-v8 .oc-pc::before, .oc-v8 .oc-call::before { content: ''; position: absolute; top: calc(-12 * var(--u)); left: 50%; width: calc(110 * var(--u)); height: calc(26 * var(--u)); background: rgba(214,210,196,.85); transform: translateX(-50%) rotate(-3deg); }
.oc-v8 .oc-card2, .oc-v8 .oc-pc { overflow: visible; }
.oc-v8 .tag { display: inline-block; background: var(--terracota); color: var(--areia); border-radius: 999px; padding: calc(6 * var(--u)) calc(14 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.2; letter-spacing: .14em; }
.oc-v8 .oc-pc .tag { margin-top: calc(16 * var(--u)); }
/* programação como folha de caderno com carimbos */
.oc-v8 .oc-prog { background: #FBF9F4 repeating-linear-gradient(180deg, transparent 0 calc(27 * var(--u)), rgba(33,35,34,.07) calc(27 * var(--u)) calc(28 * var(--u))); }
.oc-v8 .oc-prog .esq { background: var(--branco); padding: calc(40 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(33,35,34,.08); transform: rotate(-1deg); }
.oc-v8 .oc-prog .esq h2 { width: calc(409 * var(--u)); }
.oc-v8 .oc-prog .aula .tag { background: transparent; color: var(--terracota); border: calc(2 * var(--u)) solid var(--terracota); border-radius: calc(6 * var(--u)); transform: rotate(-2deg); transform-origin: left center; }
@media (max-width: 900px) {
	.oc-v8 .oc-hero { padding-top: 96px; }
	.oc-v8 .oc-polaroids { position: relative; height: 300px; margin: 8px -24px 20px; inset: auto; }
	.oc-v8 .pol.p1 { left: 24px; top: 24px; width: 150px; } .oc-v8 .pol.p2 { left: auto; right: 24px; top: 10px; width: 150px; } .oc-v8 .pol.p3 { left: 50%; top: 120px; width: 130px; margin-left: -65px; }
	.oc-v8 .stk.s1 { left: 150px; top: 6px; width: 60px; } .oc-v8 .stk.s2 { left: auto; right: 20px; top: 190px; width: 64px; } .oc-v8 .stk.s3 { left: 30px; top: 230px; width: 150px; }
	.oc-v8 .stk-foto { display: none; }
	.oc-v8 .oc-prog .esq { transform: none; margin: 0 24px; padding: 24px; } .oc-v8 .oc-prog .esq h2 { width: auto; }
	.oc-v8 .foto1, .oc-v8 .foto2, .oc-v8 .foto3 { border-width: 10px; border-bottom-width: 36px; }
}

/* =====================================================================
   v9 · DOSSIÊ · trilho lateral fixo, prospecto claro
   ===================================================================== */
.oc-v9 { --u: clamp(0.4px, (100vw - 320px) / 1920, 1px); }
body.oc-v9 { background: var(--branco); }
.oc-v9 .oc-hd { display: none; }
.oc-v9 .oc-progresso { left: 320px; } .oc-v9 .oc-progresso span { background: var(--terracota); }
.oc-v9 .sec, .oc-v9 .oc-ft { margin-left: 320px; }
.oc-v9 .oc-topo { background: transparent; }
.oc-trilho { position: fixed; left: 0; top: 0; bottom: 0; width: 320px; z-index: 40; background: var(--branco); border-right: 1px solid rgba(33,35,34,.12); display: flex; flex-direction: column; padding: 40px 36px 32px; color: var(--carvao); }
.oc-trilho .logo { display: block; width: 150px; margin-bottom: 44px; } .oc-trilho .logo svg { width: 100%; height: auto; display: block; }
.oc-trilho nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow: auto; }
.oc-trilho nav a { position: relative; display: block; padding: 8px 0 8px 18px; font-size: 14px; line-height: 1.3; color: #5C5E5A; transition: color .2s; }
.oc-trilho nav a::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: rgba(33,35,34,.2); transition: background .2s, transform .2s; }
.oc-trilho nav a:hover { color: var(--carvao); }
.oc-trilho nav a.ativo { color: var(--carvao); font-weight: 600; } .oc-trilho nav a.ativo::before { background: var(--terracota); transform: scale(1.4); }
.oc-trilho .pill-carvao { background: var(--carvao); color: var(--areia); height: 54px; font-size: 14px; margin-top: 24px; }
.oc-trilho .pill-carvao:hover { background: var(--terracota); }
.oc-trilho .nota { margin-top: 18px; font-size: 12px; line-height: 1.4; color: #8C897E; }
/* hero: texto à esquerda, foto emoldurada à direita */
.oc-v9 .oc-hero { background: var(--branco); color: var(--carvao); }
.oc-v9 .oc-hero .foto { left: calc(1000 * var(--u)); right: calc(80 * var(--u)); top: calc(100 * var(--u)); bottom: calc(100 * var(--u)); border-radius: calc(20 * var(--u)); overflow: hidden; }
.oc-v9 .oc-hero .foto img { opacity: 1; transform: none; object-position: 50% 30%; filter: none; }
.oc-v9 .oc-hero .foto::after { content: none; }
.oc-v9 .oc-hero .miolo { left: calc(120 * var(--u)); right: auto; margin: 0; width: calc(780 * var(--u)); text-align: left; }
.oc-v9 .oc-hero .ov { color: var(--oliva); }
.oc-v9 .oc-hero .t1 { color: var(--carvao); } .oc-v9 .oc-hero .t2 { color: var(--terracota); }
.oc-v9 .oc-hero .sub { margin-left: 0; color: var(--carvao); width: calc(520 * var(--u)); }
.oc-v9 .oc-hero .txt { margin-left: 0; color: #3A3C3A; font-weight: 400; width: calc(560 * var(--u)); }
.oc-v9 .oc-hero .bts { justify-content: flex-start; }
.oc-v9 .oc-hero .pill-salvia { background: var(--carvao); color: var(--areia); }
.oc-v9 .oc-hero .pill-outline { border-color: var(--carvao); color: var(--carvao); }
.oc-v9 .oc-hero .pill-outline:hover { background: var(--carvao); color: var(--areia); }
/* seções claras */
.oc-v9 .oc-video { background: var(--areia); color: var(--carvao); }
.oc-v9 .oc-video .ov { color: var(--oliva); } .oc-v9 .oc-video h2 em { color: var(--terracota); }
.oc-v9 .oc-video .quadro { background: var(--branco); }
.oc-v9 .oc-club { background: var(--branco); }
.oc-v9 .oc-card2 { background: var(--gelo); }
.oc-v9 .oc-jornada { background: var(--areia); color: var(--carvao); }
.oc-v9 .oc-jornada .ov { color: var(--oliva); } .oc-v9 .oc-jornada h2 em { color: var(--terracota); }
.oc-v9 .oc-prog { background: var(--branco); }
.oc-v9 .oc-entre { background: var(--gelo); }
.oc-v9 .oc-call { background: var(--branco); }
.oc-v9 .oc-pratica { background: var(--areia); } .oc-v9 .oc-pc { background: var(--branco); }
.oc-v9 .oc-porque { background: var(--branco); color: var(--carvao); }
.oc-v9 .oc-porque .logo svg path { fill: var(--carvao); }
.oc-v9 .oc-porque .col { color: #3A3C3A; } .oc-v9 .oc-porque .ov { color: var(--oliva); }
.oc-v9 .oc-pais { background: var(--areia); }
.oc-v9 .oc-pais .marca { opacity: .07; } .oc-v9 .oc-pais .marca svg path { fill: var(--oliva); }
.oc-v9 .oc-pais .nums b { color: var(--terracota); } .oc-v9 .oc-pais h2 em { color: var(--terracota); }
.oc-v9 .oc-faq { background: var(--branco); }
@media (max-width: 900px) {
	.oc-v9 { --u: 1px; }
	.oc-v9 .sec, .oc-v9 .oc-ft { margin-left: 0; }
	.oc-v9 .oc-progresso { left: 0; }
	.oc-trilho { position: sticky; top: 0; bottom: auto; width: auto; height: 64px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 16px; border-right: 0; border-bottom: 1px solid rgba(33,35,34,.12); }
	.oc-trilho .logo { width: 64px; margin: 0; } .oc-trilho nav, .oc-trilho .nota { display: none; }
	.oc-trilho .pill-carvao { margin: 0; height: 42px; padding: 0 18px; font-size: 13px; }
	.oc-v9 .oc-hero { padding-top: 32px; }
	.oc-v9 .oc-hero .foto { position: static; margin: 0 -24px 24px; border-radius: 0; height: 60vw; }
	.oc-v9 .oc-hero .miolo, .oc-v9 .oc-hero .sub, .oc-v9 .oc-hero .txt { width: auto; left: 0; right: 0; text-align: center; margin: 0 auto; }
	.oc-v9 .oc-hero .bts { justify-content: center; }
}

/* ---------------------------------------------------------------------
   Fim de página: nenhuma tarja branca atrás da última seção.
   A última seção de toda LP e da obrigado é terracota, então o fundo da
   página acompanha; e todo palco tem no mínimo a altura da janela.
   --------------------------------------------------------------------- */
body.oc-lp, body.oc-obrigado-pg { background-color: var(--terracota); }
body.oc-versoes { background-color: var(--carvao); }
.oc-obrigado, .oc-idx, .oc-inicio-palco { min-height: 100vh; min-height: 100dvh; }
.oc-lp .oc-vaga { box-sizing: border-box; }