/* ==========================================================================
   Página "Jurassic Boss: a era da extinção": a identidade da palestra.
   Vem depois do palestra.css e do palestra-v2.css. A classe "jurassic" no <html> troca as cores
   da marca só nesta página: roxo vira a selva quase preta, amarelo vira âmbar, bege vira o osso do logo.
   ========================================================================== */

html.jurassic {
  --purple-900: #0B130C;
  --purple-700: #1E3320;
  --purple-500: #4C7A2E;
  --yellow: #F2B21C;
  --yellow-btn: #F2B21C;
  --cream: #EEE7D2;
  --osso: #E9E1C8;
  --brasa: rgba(255, 122, 26, .55);
}
.jurassic .pal-sec--lilas { background: #DCE2C6; }
/* Barra "Contrate agora" na cor de fundo desta página (no celular, o fundo além do fim da página tem a mesma cor) */
.jurassic .mobile-bar { background: rgb(11, 19, 12); }
.jurassic .mobile-bar::after { background: var(--purple-900); }
.jurassic ::selection { background: var(--yellow); color: var(--purple-900); }

/* ---------- Cena 1: o topo ---------- */
.jur-topo { position: relative; height: 210vh; background: var(--purple-900); }
.jur-topo__fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; color: #fff; }
/* Céu da selva: escurece e esquenta (a luz do meteoro) conforme a pessoa rola */
.jur-topo__fixo::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 50% 45% at 80% 8%, rgba(255,140,40,calc(.10 + var(--p, 0) * .30)), transparent 70%),
    radial-gradient(ellipse 55% 60% at 72% 95%, rgba(110,160,60,.22), transparent 70%),
    linear-gradient(180deg, #050A06, #0D1A0F 55%, #0B130C);
}
/* O meteoro: risca o céu devagar e desce um pouco mais a cada rolagem (é a "era da extinção") */
.jur-topo__meteoro {
  position: absolute; z-index: 1; top: 14svh; right: max(30vw, calc(68svh - 4vw)); width: 40vmin; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, transparent, rgba(255,190,90,.35) 40%, #FFE2A6 92%, #fff);
  box-shadow: 0 0 22px 4px var(--brasa);
  transform: rotate(-32deg) translate(calc(var(--p, 0) * -22vmin), calc(var(--p, 0) * 10vmin));
  transform-origin: 100% 50%; opacity: calc(1 - var(--p, 0) * 2.5);
  animation: jur-meteoro 7s ease-in-out infinite alternate;
}
.jur-topo__meteoro::after { content: ""; position: absolute; right: -10px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: radial-gradient(circle, #fff, #FFC56B 45%, transparent 70%); }
@keyframes jur-meteoro { from { filter: brightness(.8); } to { filter: brightness(1.25); } }
/* A mata: folhas escuras no pé da cena, na frente do céu e atrás do Bruno */
.jur-topo__mata {
  position: absolute; left: -5vw; right: -5vw; bottom: -2svh; height: 34svh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 14% 60% at 6% 100%, #07100A 60%, transparent 62%),
    radial-gradient(ellipse 18% 75% at 22% 100%, #0A170D 60%, transparent 62%),
    radial-gradient(ellipse 12% 55% at 38% 100%, #07100A 60%, transparent 62%),
    radial-gradient(ellipse 20% 70% at 58% 100%, #0A170D 60%, transparent 62%),
    radial-gradient(ellipse 15% 85% at 80% 100%, #07100A 60%, transparent 62%),
    radial-gradient(ellipse 16% 60% at 96% 100%, #0A170D 60%, transparent 62%);
  transform: translateY(calc(var(--p, 0) * 10svh)); opacity: calc(1 - var(--p, 0) * 2.5);
}

.jur-topo__trilha { position: absolute; top: 84px; left: var(--gutter); z-index: 4; font-size: .8rem; opacity: calc(.75 - var(--p, 0) * 3); }
.jur-topo__trilha a { color: #fff; }
.jur-topo__trilha span { margin: 0 .35em; }

/* Computador: logo e texto à esquerda; à direita, a foto oficial do Bruno no dinossauro (fundo de neon), de cima a baixo,
   com a borda esquerda e a de baixo sumindo no escuro da selva.
   Ao rolar, o logo cresce e vai para o meio da tela, e todo o resto some (--q vai de 0 a 1 no primeiro 2/3 da cena) */
.jur-topo__logo {
  --q: min(1, var(--p, 0) * 1.5);
  --ll: max(var(--gutter), 6vw); --lt: max(92px, 12svh); --lw: min(520px, 36vw, 52svh);
  --lf: min(84vw, 90svh, 1060px); /* largura final, no centro */
  position: absolute; z-index: 3; margin: 0;
  width: calc(var(--lw) + var(--q) * (var(--lf) - var(--lw)));
  left: calc(var(--ll) + var(--q) * ((100vw - var(--lf)) / 2 - var(--ll)));
  top: calc(var(--lt) + var(--q) * ((100svh - var(--lf) * .8136) / 2 + 20px - var(--lt)));
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.7)) drop-shadow(0 0 calc(var(--q) * 60px) rgba(242,178,28,calc(var(--q) * .35)));
}
.jur-topo__logo img { display: block; width: 100%; height: auto; }
.jur-topo__bruno {
  position: absolute; z-index: 0; top: 66px; right: 0; width: auto; max-width: none; height: calc(100% - 66px);
  transform: scale(calc(1 + var(--p, 0) * .08)); transform-origin: 70% 100%; opacity: calc(1 - var(--p, 0) * 2.2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%), linear-gradient(0deg, transparent, #000 22%);
  mask-image: linear-gradient(90deg, transparent, #000 28%), linear-gradient(0deg, transparent, #000 22%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: jur-entra 1.1s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes jur-entra { from { opacity: 0; translate: 6% 0; } to { opacity: 1; translate: 0 0; } }
.jur-topo__base {
  position: absolute; z-index: 3; left: max(var(--gutter), 6vw); bottom: max(32px, 6svh); width: min(520px, 40vw);
  display: grid; gap: 18px; opacity: calc(1 - var(--p, 0) * 3);
}
.jur-topo__base::before { content: ""; position: absolute; inset: -60px -80px -40px -60px; z-index: -1; background: radial-gradient(closest-side, rgba(11,19,12,.85), rgba(11,19,12,.5) 60%, transparent); pointer-events: none; }
.jur-topo__base p { margin: 0; font-size: clamp(1rem, .4vw + .9rem, 1.2rem); line-height: 1.45; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.jur-topo__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.jur-topo .btn--yellow { border-color: #000; box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
.jur-topo .btn--yellow:hover { box-shadow: 0 0 26px var(--brasa), 6px 6px 0 rgba(0,0,0,.5); }
.jur-topo__zap { color: #fff; border-color: rgba(255,255,255,.75); }
.jur-topo__zap:hover { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
@media (max-width: 1299px) { .jur-topo__trilha { display: none; } }
/* Telas mais estreitas (tablet): a foto passa um pouco por trás do texto, que ganha a sombra escura */
@media (min-width: 768px) and (max-aspect-ratio: 4/3) { .jur-topo__bruno { right: -12vw; } }

/* Celular: um embaixo do outro, sem cena presa: logo, o Bruno no dinossauro e o texto.
   A barra "Contrate agora" fica fixa desde o início, então o botão está sempre à mão. */
@media (max-width: 767px) {
  .jur-topo { height: auto; }
  .jur-topo__fixo { position: relative; height: auto; display: flex; flex-direction: column; align-items: center; padding-top: 80px; }
  .jur-topo__meteoro { top: 70px; right: 4vw; width: 52vw; height: 4px; transform: rotate(-32deg); z-index: -2; }
  .jur-topo__mata { height: 30vh; bottom: 30%; }
  .jur-topo__logo { position: relative; left: auto; top: auto; margin: 0 auto; width: min(80vw, 380px); transform: none; opacity: 1; filter: drop-shadow(0 10px 30px rgba(0,0,0,.7)); }
  .jur-topo__meteoro, .jur-topo__mata, .jur-topo__bruno { opacity: 1; }
  .jur-topo__bruno {
    position: relative; top: auto; right: auto; height: auto; width: 100%; margin: 4px 0 0; transform: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 72%, transparent);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .jur-topo__base {
    position: relative; left: auto; right: auto; bottom: auto; width: auto; margin-top: -60px; opacity: 1;
    padding: 60px var(--gutter) 40px; gap: 16px; text-align: center; justify-items: center;
    background: linear-gradient(180deg, transparent, var(--purple-900) 50%);
  }
  .jur-topo__base::before { display: none; }
  .jur-topo__base p { font-size: 1rem; }
  .jur-topo__ctas { justify-content: center; }
  .jur-topo__zap { display: none; }
  .jurassic .mobile-bar { transform: none; }
}

/* ---------- Cena 2: a frase ---------- */
.jurassic .cena-frase { background: radial-gradient(ellipse at 50% 50%, #142416, var(--purple-900) 70%); }
.jurassic .cena-frase p { font-size: clamp(2.5rem, 7.5vw, 6.6rem); max-width: 13em; }
.jurassic .cena-frase .w.dest.on { text-shadow: 0 0 .35em var(--brasa); }

/* ---------- Cena 3: a nota ---------- */
.jurassic .v2-nota strong { text-shadow: 0 0 .25em rgba(242,178,28,.3); }

/* ---------- Os tipos de chefe ---------- */
.jur-chefes { background: var(--purple-900); color: #fff; padding: clamp(48px, 6vw, 88px) 0; }
.jur-sobre { margin: 0 0 .4em; color: var(--osso); opacity: .8; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; }
.jur-chefes h2 { margin: 0 0 .8em; font-weight: 900; text-transform: uppercase; line-height: .95; font-size: clamp(2.2rem, 5.5vw, 4.4rem); max-width: 14em; }
.jur-cartas { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.jur-cartas li {
  position: relative; padding: 26px 24px; border-radius: var(--radius);
  background: linear-gradient(160deg, #16261A, #0D160E 70%); border: 2px solid rgba(233,225,200,.22);
}
.jur-cartas h3 { margin: 0 0 .4em; font-size: clamp(1.4rem, .8vw + 1.2rem, 1.9rem); line-height: 1.05; text-transform: uppercase; color: var(--osso); }
.jur-cartas p { margin: 0; opacity: .9; font-size: 1.05rem; }
/* O último é o pior: a carta do Jurassic Boss ganha o âmbar e a marca de garra */
.jur-cartas__boss { border-color: var(--yellow) !important; box-shadow: 0 0 40px rgba(242,178,28,.18); }
.jur-cartas__boss h3 { color: var(--yellow); }
.jur-cartas__boss::after {
  content: ""; position: absolute; top: 16px; right: 18px; width: 46px; height: 46px; opacity: .55;
  background: repeating-linear-gradient(115deg, transparent 0 8px, var(--yellow) 8px 12px, transparent 12px 20px);
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 62%); mask: radial-gradient(circle, #000 60%, transparent 62%);
}
@media (min-width: 900px) { .jur-cartas { grid-template-columns: 1fr 1fr 1.4fr; } }

/* ---------- Seções claras: osso e folha ---------- */
.jurassic .pal-sec--amarela .btn--purple { color: #fff; }
.jurassic .pal-passos li::before, .jurassic .pal-leva li::before { color: var(--yellow); background: var(--purple-900); border-color: var(--purple-900); }
.jurassic .pal-garantia strong { color: var(--yellow); }
.jurassic .pal-sec a:not(.btn):not(.pal-garantia) { color: var(--purple-900); }
.jurassic .pal-eventos a:hover { background: var(--yellow); }

/* ---------- Galeria ---------- */
.jurassic .cena-galeria { background: #070D08; }
.jurassic .cena-galeria figure { border: 1px solid rgba(233,225,200,.2); }
.jurassic .cena-galeria li figure { aspect-ratio: 2 / 3; }
.jurassic .cena-galeria li.deitada figure { aspect-ratio: 4 / 3; }
.jurassic .cena-galeria li:first-child img { object-position: 50% 30%; }
.jurassic .cena-galeria figcaption { background: linear-gradient(180deg, transparent, rgba(7,13,8,.85)); }
@media (max-width: 767px) { .jurassic .cena-galeria li figure { aspect-ratio: 4 / 5; } }

/* Sem movimento: o topo parado, tudo legível */
@media (prefers-reduced-motion: reduce) {
  .jur-topo { height: auto; }
  .jur-topo__fixo { position: relative; }
  .jur-topo__meteoro, .jur-topo__bruno { animation: none; }
}

/* Comentários de quem assistiu (até 12): no celular, deslizam para o lado com o dedo */
@media (max-width: 767px) {
  .jurassic .pal-comentarios { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scroll-padding-inline: var(--gutter); }
  .jurassic .pal-comentarios li { flex: none; width: 82vw; scroll-snap-align: start; }
}
.jur-deslize { display: none; margin: -8px 0 20px; font-size: .85rem; opacity: .7; }
@media (max-width: 767px) { .jur-deslize { display: block; } }

/* ---------- Contato: o mesmo formulário da página principal, com a cara da selva ---------- */
.jurassic .contact {
  background: radial-gradient(ellipse 50% 40% at 90% 0%, rgba(255,140,40,.22), transparent 70%), radial-gradient(ellipse 60% 60% at 10% 100%, rgba(110,160,60,.22), transparent 70%), #0B130C;
  color: #fff;
}
.jurassic .contact .title--dark { color: var(--osso); }
.jurassic .contact__lead { color: var(--yellow); }
.jurassic .contact .form { border-color: #000; box-shadow: 0 0 0 2px rgba(242,178,28,.5), 8px 8px 0 #000; }
.jurassic .contact .form input:focus, .jurassic .contact .form textarea:focus { border-color: var(--purple-500); box-shadow: 0 0 0 3px rgba(242,178,28,.35); }
.jurassic .contact .form__submit { color: var(--purple-900); background: var(--yellow); border-color: #000; }
.jurassic .contact__info { color: #fff; }
.jurassic .contact__social a { background: var(--yellow); color: var(--purple-900); }
.jurassic .contact .newsletter span { color: var(--yellow); }
.jurassic .contact .newsletter img { border-color: #000; box-shadow: 4px 4px 0 rgba(242,178,28,.6); }
/* A caixa tem o formato da foto (o main.css usa contain), para o degradê das bordas cair na foto */
@media (min-width: 1000px) { .jurassic .contact__photo { top: auto; bottom: 4vw; width: 32vw; max-width: 32vw; height: auto; aspect-ratio: 900 / 1348; object-fit: cover; } }
/* Foto inteira do estúdio (fundo de neon): as bordas somem no escuro da seção */
.jurassic .contact__photo {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}
@media (max-width: 999px) { .jurassic .contact__photo { width: min(72%, 360px); margin-bottom: 28px; } }