/* ==========================================================================
   Página "UAU On Demand" (palestra sob medida): a identidade de "projeto".
   Vem depois do palestra.css e do palestra-v2.css. A classe "ondemand" no <html> troca as cores
   só nesta página: roxo vira o azul-marinho da planta, com linhas ciano e anotações à mão (fonte dos bilhetes do site).
   ========================================================================== */

html.ondemand {
  --purple-900: #0D1D49;
  --purple-700: #1F3B7A;
  --purple-500: #3E7BD6;
  --linha: rgba(160, 225, 225, .16);
  --linha-forte: rgba(160, 225, 225, .55);
}
.ondemand .pal-sec--lilas { background: #DDE9F7; }
/* 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) */
.ondemand .mobile-bar { background: rgb(13, 29, 73); }
.ondemand .mobile-bar::after { background: var(--purple-900); }
.ondemand ::selection { background: var(--cyan); color: var(--purple-900); }

/* Papel de planta: quadriculado fino + linha grossa a cada 5 quadrados */
.od-planta, .od-topo__fixo, .od-monte {
  background-color: var(--purple-900);
  background-image:
    linear-gradient(var(--linha-forte) 1px, transparent 1px), linear-gradient(90deg, var(--linha-forte) 1px, transparent 1px),
    linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
}

/* ---------- Cena 1: o topo ---------- */
.od-topo { position: relative; height: 160vh; background: var(--purple-900); }
.od-topo__fixo {
  position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; color: #fff;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2vw; padding: 70px max(var(--gutter), 6vw) 0;
  background-position: calc(var(--p, 0) * -64px) calc(var(--p, 0) * -96px);
}
.od-topo__fixo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 60% at 72% 70%, rgba(62,123,214,.45), transparent 70%), radial-gradient(ellipse 60% 50% at 10% 0%, rgba(13,29,73,.9), transparent 70%); }
.od-topo__trilha { position: absolute; top: 84px; left: var(--gutter); z-index: 4; font-size: .8rem; opacity: calc(.8 - var(--p, 0) * 3); }
.od-topo__trilha a { color: #fff; }
.od-topo__trilha span { margin: 0 .35em; }
.od-topo__texto { position: relative; z-index: 2; opacity: calc(1 - var(--p, 0) * 1.6); transform: translateY(calc(var(--p, 0) * -6svh)); }
.od-topo__tipo { margin: 0 0 .6em; display: inline-block; font-family: var(--font-comic); font-weight: 700; text-transform: uppercase; color: var(--purple-900); background: var(--cyan); padding: .3em .8em; border-radius: 6px; transform: rotate(-2deg); }
.od-topo__titulo { margin: 0; font-weight: 900; text-transform: uppercase; line-height: .84; letter-spacing: -.01em; font-size: clamp(3.6rem, 9vw, 9.5rem); text-shadow: 0 .04em 0 rgba(0,0,0,.35); }
.od-topo__titulo span { display: block; }
.od-topo__titulo span:last-child { color: var(--yellow); }
/* Contorno tracejado de "ainda em projeto" em volta do título */
.od-topo__titulo { position: relative; padding: .12em .18em .08em; margin-left: -.18em; }
.od-topo__titulo::after { content: ""; position: absolute; inset: 0; border: 2px dashed var(--linha-forte); border-radius: 10px; pointer-events: none; }
.od-topo__lead { margin: 1em 0 0; max-width: 30em; font-size: clamp(1.05rem, .5vw + .95rem, 1.3rem); line-height: 1.45; }
.od-topo__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.od-topo .btn--yellow { border-color: #000; box-shadow: 4px 4px 0 var(--cyan); }
.od-topo__zap { color: #fff; border-color: rgba(255,255,255,.75); }
.od-topo__zap:hover { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }

.od-topo__bruno { position: relative; margin: 0; align-self: end; justify-self: center; height: min(84svh, 900px); aspect-ratio: 800 / 963; }
.od-topo__bruno img {
  width: 100%; height: 100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); transform: scale(calc(1 + var(--p, 0) * .08)); transform-origin: 50% 100%;
  animation: od-entra .9s cubic-bezier(.2,.9,.25,1.2) backwards;
}
@keyframes od-entra { from { opacity: 0; translate: 0 6%; } to { opacity: 1; translate: 0 0; } }
/* Anotações à mão em volta do Bruno, como num projeto; entram uma depois da outra */
.od-nota {
  position: absolute; z-index: 2; white-space: nowrap; font-family: var(--font-comic); font-weight: 700; text-transform: uppercase;
  font-size: clamp(.8rem, .6vw + .55rem, 1.1rem); color: var(--cyan); padding: .3em .6em; border: 2px dashed var(--linha-forte); border-radius: 8px; background: rgba(13,29,73,.75);
  animation: od-nota .5s ease-out backwards;
}
.od-nota::after { content: ""; position: absolute; width: 46px; border-top: 2px dashed var(--linha-forte); top: 50%; }
.od-nota--1 { top: 2%; left: -12%; color: var(--yellow); border-color: var(--yellow); font-size: clamp(.95rem, .8vw + .6rem, 1.35rem); transform: rotate(-4deg); animation-delay: .6s; }
.od-nota--1::after { display: none; }
.od-nota--2 { top: 36%; right: -6%; animation-delay: .9s; }
.od-nota--2::after { right: 100%; }
.od-nota--3 { top: 47%; left: -14%; animation-delay: 1.1s; }
.od-nota--3::after { left: 100%; }
.od-nota--4 { bottom: 14%; right: -10%; animation-delay: 1.3s; }
.od-nota--4::after { right: 100%; }
@keyframes od-nota { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@media (max-width: 1299px) { .od-topo__trilha { display: none; } }

/* Celular: um embaixo do outro, sem cena presa. A barra "Contrate agora" fica fixa desde o início */
@media (max-width: 767px) {
  .od-topo { height: auto; }
  .od-topo__fixo { position: relative; height: auto; grid-template-columns: 1fr; padding: 96px var(--gutter) 0; gap: 24px; }
  .od-topo__texto { opacity: 1; transform: none; text-align: center; }
  .od-topo__titulo { font-size: 18vw; margin-inline: auto; display: inline-block; }
  .od-topo__ctas { justify-content: center; }
  .od-topo__zap { display: none; }
  .od-topo__bruno { height: auto; width: 82vw; }
  .od-topo__bruno img { filter: none; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
  .od-nota { font-size: .7rem; }
  .od-nota--1 { left: -6%; top: -2%; font-size: .85rem; }
  .od-nota--3 { left: -8%; }
  .od-nota--2, .od-nota--4 { right: -6%; }
  .ondemand .mobile-bar { transform: none; }
}

/* ---------- Cena 2: a frase ---------- */
.ondemand .cena-frase { background: radial-gradient(ellipse at 50% 50%, #162C66, var(--purple-900) 70%); }
.ondemand .cena-frase .w.dest.on { color: var(--yellow); }

/* ---------- Monte o seu pedido ---------- */
.od-monte { color: #fff; padding: clamp(56px, 7vw, 104px) 0; scroll-margin-top: 60px; }
.od-sobre { margin: 0 0 .4em; color: var(--cyan); font-family: var(--font-comic); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; }
.od-monte h2 { margin: 0 0 .3em; font-weight: 900; text-transform: uppercase; line-height: .95; font-size: clamp(2.4rem, 6vw, 5rem); color: var(--yellow); }
.od-monte__lead { margin: 0 0 2em; max-width: 36em; font-size: 1.1rem; opacity: .9; }
.od-monte__grade { display: grid; gap: 28px; }
@media (min-width: 1000px) { .od-monte__grade { grid-template-columns: 1.4fr 1fr; align-items: start; } .od-rascunho { position: sticky; top: 96px; } }
.od-monte fieldset { border: 0; margin: 0 0 22px; padding: 0; }
.od-monte legend { font-weight: 900; text-transform: uppercase; font-size: 1.15rem; margin-bottom: 10px; padding: 0; }
.od-monte legend small { text-transform: none; font-weight: 400; opacity: .7; font-size: .85rem; }
.od-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.od-chips label { position: relative; cursor: pointer; }
.od-chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.od-chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; border-radius: 999px; border: 2px dashed var(--linha-forte); color: #fff; font-weight: 700; font-size: .98rem;
  background: rgba(13,29,73,.7); transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.od-chips label:hover span { border-color: var(--cyan); }
.od-chips input:checked + span { background: var(--yellow); color: var(--purple-900); border: 2px solid #000; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--cyan); }
.od-chips input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
/* O rascunho: uma folha de papel presa na planta */
.od-rascunho { background: var(--cream); color: var(--purple-900); border: 3px solid #000; border-radius: var(--radius); box-shadow: 8px 8px 0 var(--cyan); padding: 24px 24px 20px; transform: rotate(.6deg); }
.od-rascunho__tit { margin: 0 0 .6em; font-family: var(--font-comic); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; }
.od-rascunho__texto { margin: 0 0 1.2em; font-size: 1.12rem; line-height: 1.45; min-height: 5.8em; white-space: pre-line; }
.od-rascunho__texto.vazio { color: var(--purple-700); font-style: italic; }
.od-rascunho .btn { width: 100%; justify-content: center; text-align: center; }
.od-rascunho__obs { margin: .8em 0 0; font-size: .82rem; opacity: .75; }

/* ---------- Seções claras: papel quadriculado bem de leve ---------- */
.od-papel { background-image: linear-gradient(rgba(13,29,73,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(13,29,73,.06) 1px, transparent 1px); background-size: 32px 32px; }
.ondemand .pal-passos li::before { color: var(--purple-900); background: var(--cyan); border-color: var(--purple-900); }
.ondemand .pal-passos li:last-child { border-style: dashed; }
@media (min-width: 900px) { .ondemand .pal-passos li:last-child { grid-column: 1 / -1; } }
.ondemand .pal-garantia strong { color: var(--yellow); }
.ondemand .pal-sec a:not(.btn):not(.pal-garantia) { color: var(--purple-700); }
.od-sobre--claro { text-align: center; margin-bottom: 1.2em; }

/* Comentários de quem assistiu: no celular, deslizam para o lado com o dedo */
@media (max-width: 767px) {
  .ondemand .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); }
  .ondemand .pal-comentarios li { flex: none; width: 82vw; scroll-snap-align: start; }
}
.od-deslize { display: none; margin: -8px 0 20px; font-size: .85rem; opacity: .7; }
@media (max-width: 767px) { .od-deslize { display: block; } }

/* Os ingredientes */
.od-ingr__lead { margin: -.6em 0 1.6em; max-width: 36em; font-size: 1.1rem; }
.od-ingr { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .od-ingr { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .od-ingr { grid-template-columns: repeat(3, 1fr); } }
.od-ingr a, .od-ingr div { display: grid; gap: 6px; align-content: start; height: 100%; padding: 20px 22px; background: #fff; border: var(--border); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.od-ingr a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--purple-900); }
.od-ingr b { font-size: 1.3rem; text-transform: uppercase; color: var(--purple-900); line-height: 1.1; }
.od-ingr a b::after { content: " →"; color: var(--purple-500); }
.ondemand .pal-sec .od-ingr a span { color: var(--ink); }

/* Galeria: o formato vem da foto (deitada = 3:2, em pé = 2:3) */
.ondemand .cena-galeria { background: #08122E; }
.ondemand .cena-galeria h2 { color: var(--yellow); }
.ondemand .cena-galeria li figure { aspect-ratio: 2 / 3; }
.ondemand .cena-galeria li.deitada figure { aspect-ratio: 3 / 2; }
.ondemand .cena-galeria li:first-child img { object-position: 50% 50%; }
@media (max-width: 767px) { .ondemand .cena-galeria li figure, .ondemand .cena-galeria li.deitada figure { aspect-ratio: 4 / 5; } }

/* Ficha + garantia */
.od-ficha { margin-top: 0; }
.od-garantia { margin-top: 24px; }

/* ---------- Contato: o mesmo formulário da página principal, na planta ---------- */
.ondemand .contact {
  background-color: var(--purple-900); color: #fff;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ondemand .contact .title--dark { color: #fff; }
.ondemand .contact__lead { color: var(--cyan); }
.ondemand .contact .form { border-color: #000; box-shadow: 8px 8px 0 var(--cyan); }
.ondemand .contact .form input:focus, .ondemand .contact .form textarea:focus { border-color: var(--purple-500); box-shadow: 0 0 0 3px rgba(160,225,225,.6); }
.ondemand .contact__info { color: #fff; }
.ondemand .contact__social a { background: var(--yellow); color: var(--purple-900); }

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