/* Operacao com IA -- overrides sobre o Tailwind compilado herdado do clone de referencia.
   Troca de fonte (Satoshi -> Onest) e acento (branco/lime -> ciano publico da COB). */

html, :host {
  font-family: "Onest", ui-sans-serif, system-ui, sans-serif;
}
.font-display {
  font-family: "Onest", "Helvetica Now Text", sans-serif;
}

:root {
  --cob-cyan: #00e5ff;
  --cob-cyan-dim: #00b4d8;
  --cob-cyan-fg: #04141a;
}

.text-cyan { color: var(--cob-cyan); }
.border-cyan { border-color: var(--cob-cyan); }
.bg-cyan { background-color: var(--cob-cyan); color: var(--cob-cyan-fg); }
.bg-cyan:hover { background-color: var(--cob-cyan-dim); }
.dot-cyan { background-color: var(--cob-cyan-fg); }
.glow-cyan { box-shadow: 0 10px 40px rgba(0, 229, 255, 0.22); }
.glow-cyan-lg { box-shadow: 0 24px 60px rgba(0, 229, 255, 0.18); }

/* placeholder de asset ainda nao confirmado -- visivel de proposito, nunca some sozinho */
.pendente {
  border: 1px dashed rgba(0, 229, 255, 0.45);
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 229, 255, 0.06);
}

/* video de fundo do hero: ambiente/decorativo (gerado), nao e filmagem do espaco real */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,8,9,0.55) 0%, rgba(7,8,9,0.75) 55%, rgba(7,8,9,0.95) 100%),
    radial-gradient(ellipse at 30% 20%, rgba(0,229,255,0.10), transparent 55%);
}

/* elementos decorativos flutuantes (peças 3D geradas, mesmo espirito do clone de referencia) */
.elemento-float {
  position: absolute;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 20px 40px rgba(0, 229, 255, 0.15));
  animation: elemento-flutuar 9s ease-in-out infinite;
}
@keyframes elemento-flutuar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .elemento-float { animation: none; }
}

/* sheen: feixe de luz varrendo em diagonal, detalhe barato (so CSS) que
   comunica premium -- timing/curva copiados do card de destaque estudado
   no clone de academypass.ai/experience (achado de fidelidade 03/set/2026) */
.card-destaque {
  position: relative;
  overflow: hidden;
}
.card-destaque .sheen {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(0, 229, 255, 0.16) 50%, transparent 60%);
  transform: translateX(-60%) skewX(-14deg);
  animation: sheen-varrer 6.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes sheen-varrer {
  0% { transform: translateX(-60%) skewX(-14deg); opacity: 0; }
  15% { opacity: 0.75; }
  45% { opacity: 0.22; }
  70%, 100% { transform: translateX(60%) skewX(-14deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card-destaque .sheen { animation: none; display: none; }
}

/* tratamento p&b de alto contraste pras fotos reais (facilitador, espaco) --
   achado de fidelidade: a Human usa retrato p&b consistente pros instrutores
   em vez de foto colorida solta. Preparado aqui pra quando a foto real entrar,
   so trocar o conteudo do .pendente por <img class="pendente foto-premium">. */
.foto-premium {
  filter: grayscale(1) contrast(1.12) brightness(0.96);
}

/* ------------------------------------------------------------------
   Utilitarios que o bundle Tailwind herdado do clone NAO tem.
   O index.css e um CSS ja compilado: so contem as classes que a pagina
   ORIGINAL usava. Toda classe nova precisa ser conferida no navegador
   (ver docs/qa-lp.md) e, se faltar, declarada aqui na mao.
   Breakpoints do bundle: sm 640px, md 768px, lg 1024px.
   ------------------------------------------------------------------ */
.bg-\[\#0c0e11\] { background-color: #0c0e11; }

@media (width >= 640px) {
  .sm\:gap-x-12 { column-gap: 3rem; }
  .sm\:justify-start { justify-content: flex-start; }
  .sm\:text-\[44px\] { font-size: 44px; }
  .sm\:text-\[56px\] { font-size: 56px; }
  .sm\:text-\[64px\] { font-size: 64px; }
}

@media (width >= 1024px) {
  .lg\:max-w-\[20ch\] { max-width: 20ch; }
  .lg\:text-\[76px\]  { font-size: 76px; }
  .lg\:gap-16         { gap: 4rem; }
  .lg\:px-11          { padding-left: 2.75rem; padding-right: 2.75rem; }
  .lg\:col-start-6    { grid-column-start: 6; }
}

.bg-\[radial-gradient\(ellipse_at_68\%_18\%\2c rgba\(0\2c 229\2c 255\2c 0\.14\)\2c transparent_38\%\)\2c linear-gradient\(135deg\2c \#181b21\2c \#0e1014_48\%\2c \#060708\)\] {
  background-image:
    radial-gradient(ellipse at 68% 18%, rgba(0, 229, 255, 0.14), transparent 38%),
    linear-gradient(135deg, #181b21, #0e1014 48%, #060708);
}

/* O bundle herdado pinta o <body> de cinza claro (#f3f4f6). O escuro da pagina
   vem de um div interno, entao o cinza aparecia no overscroll elastico do
   celular e por tras da barra fixa. Base escura declarada no proprio body. */
html, body { background-color: #07080a; }

/* ------------------------------------------------------------------
   DOBRA CLARA. Muda COR, nao estrutura. Os cards continuam cards, com
   a mesma caixa e o mesmo raio: o que muda e o preenchimento, que no
   claro vira branco em vez de #0c0e11, porque bloco escuro dentro de
   fundo claro nao pode.
   Fundo da dobra medido na referencia: #F4F4F2.
   ------------------------------------------------------------------ */
.dobra-clara {
  background-color: #f4f4f2;
  border-top-color: rgba(0, 0, 0, 0.12) !important;
}

/* texto direto da secao (cabecalho, intro, fechamento) */
.dobra-clara h2,
.dobra-clara h3,
.dobra-clara .text-white,
.dobra-clara .text-white\/85            { color: rgb(16, 17, 20); }
.dobra-clara p,
.dobra-clara summary,
.dobra-clara .text-white\/80,
.dobra-clara .text-white\/75,
.dobra-clara .text-white\/70,
.dobra-clara .text-white\/60            { color: rgba(0, 0, 0, 0.62); }
.dobra-clara .text-white\/55,
.dobra-clara .text-white\/50,
.dobra-clara .text-white\/45,
.dobra-clara .text-white\/40,
.dobra-clara .text-white\/35            { color: rgba(0, 0, 0, 0.58); }

/* acento: o ciano mede 1,6:1 sobre claro, entao vira petroleo */
.dobra-clara .text-cyan                 { color: #00707f; }
.dobra-clara .bg-cyan                   { background-color: #00707f; color: #ffffff; }
.dobra-clara .bg-cyan:hover             { background-color: #005b68; }
.dobra-clara span.bg-cyan               { background-color: #00707f; }

/* bordas e fios */
.dobra-clara .border-white\/\[0\.1\],
.dobra-clara .border-white\/\[0\.12\],
.dobra-clara .border-white\/\[0\.08\],
.dobra-clara .border-white\/\[0\.05\],
.dobra-clara .border-white\/20,
.dobra-clara .border-y                  { border-color: rgba(0, 0, 0, 0.14); }
.dobra-clara .divide-white\/\[0\.08\] > * + * { border-color: rgba(0, 0, 0, 0.12); }

/* O CARD: mesma caixa, preenchimento claro. Era #0c0e11, vira branco. */
.dobra-clara .bg-\[\#0c0e11\]           { background-color: #ffffff; }
.dobra-clara .bg-white\/\[0\.06\]       { background-color: rgba(0, 0, 0, 0.12); }
.dobra-clara .bg-\[\#0c0e11\] h3        { color: rgb(16, 17, 20); }
.dobra-clara .bg-\[\#0c0e11\] p         { color: rgba(0, 0, 0, 0.62); }
.dobra-clara .bg-\[\#0c0e11\] .text-cyan { color: #00707f; }

/* card destacado com sheen: no claro tambem vira claro */
.dobra-clara .card-destaque             { background-color: #ffffff; border-color: rgba(0, 0, 0, 0.14); }
.dobra-clara .card-destaque .sheen      { display: none; }

.dobra-clara .pendente {
  border-color: rgba(0, 112, 127, 0.45);
  background: rgba(0, 112, 127, 0.05);
  color: rgba(0, 0, 0, 0.58);
}


/* ---- Triagem (form em passos). CSS proprio: o Tailwind compilado do clone
   so tem as classes do original, entao classe nova aqui nao existe. ---- */
.tri { border-top: 1px solid rgba(255,255,255,.12); padding-top: 28px; font-family: "Onest", sans-serif; }
.tri-head { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.tri-head b { color: #fff; font-weight: 500; }
.tri-bar { flex: 1; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.tri-bar > span { display: block; height: 100%; width: 16%; background: var(--cob-cyan); transition: width .4s ease; }
.tri-q { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; }
.tri-q legend { font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; color: #fff; padding: 0; margin-bottom: 18px; }
.tri-opts { display: grid; gap: 10px; }
@media (min-width: 640px) { .tri-opts { grid-template-columns: 1fr 1fr; } }
.tri-opts button { text-align: left; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: rgba(255,255,255,.85); font: inherit; font-size: 15px; cursor: pointer; transition: border-color .2s, background .2s; }
.tri-opts button:hover { border-color: rgba(0,229,255,.6); background: rgba(0,229,255,.06); }
.tri-opts button.is-on { border-color: var(--cob-cyan); background: rgba(0,229,255,.12); color: #fff; }
.tri-opts button:focus-visible, .tri input:focus-visible, .tri select:focus-visible { outline: 2px solid var(--cob-cyan); outline-offset: 2px; }
.tri-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .tri-grid { grid-template-columns: 1fr 1fr; } }
.tri-grid label { display: grid; gap: 7px; font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.6); }
.tri input, .tri select { width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: #fff; font: inherit; font-size: 15px; outline: none; }
.tri select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.tri select option { color: #04141a; }
.tri input::placeholder { color: rgba(255,255,255,.3); }
.tri input:focus, .tri select:focus { border-color: var(--cob-cyan); }
.tri-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tri-submit { margin-top: 18px; width: 100%; height: 54px; display: inline-flex; align-items: center; justify-content: space-between; padding: 0 26px; border-radius: 999px; border: 0; background: var(--cob-cyan); color: var(--cob-cyan-fg); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.tri-submit:hover { background: var(--cob-cyan-dim); }
.tri-submit:disabled { opacity: .7; cursor: default; }
.tri-foot { display: flex; align-items: flex-start; gap: 16px; margin-top: 18px; }
.tri-back { flex: none; background: none; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 13px; cursor: pointer; }
.tri-back:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.tri-foot p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.6); }
.tri-inclui { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; }
.tri-inclui li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); }
.tri-inclui li::before { content: "✓"; position: absolute; left: 0; color: var(--cob-cyan); }

/* Título da seção de aplicação: a classe compilada fixa 70px a partir de 640px,
   e numa coluna de 5/12 em notebook (1104 a 1280px) o texto quebrava uma
   palavra por linha. Escala com a tela e volta aos 70px só em tela larga. */
#aplicar h2 { font-size: clamp(38px, 4.2vw, 70px); max-width: 14ch; }