/* /curso-oracle-gratis — "Antes e depois".
   O mesmo aluno em dois estados: a metade esquerda e o caos de tutoriais
   soltos, a direita e o Oracle de pe na maquina dele. Mundo do site:
   azul-marinho, coral so na acao, Poppins.

   No computador o hero e o comp aprovado em escala: cada medida e escrita
   em pixels do comp (medidas a 1376 px, o comp vale para um palco de ate
   1536 px) vezes --u, que vem da largura do palco. Abaixo de 960 px o hero vira um fluxo empilhado. */

:root{
  --ad-navy:#15273B; --ad-navy-2:#0C1828; --ad-ink:#0D1B33; --ad-coral:#C63626; --ad-coral-2:#A92C1E; --ad-coral-txt:#B3301F;
  --ad-claro:#F2F5F8; --ad-branco:#FFFFFF; --ad-texto:#2C3E51; --ad-suave:#52677B; --ad-fio:#D2DBE4;
  --ad-sub:#A9B8C7; --ad-term:#0B1624; --ad-verde:#5FD3A0; --ad-ambar:#F2B25C;
}
body{margin:0}
.ad,.ad *,.ad *::before,.ad *::after{box-sizing:border-box}
.ad{background:var(--ad-claro) url(/assets/plates/chao-claro.png) repeat;color:var(--ad-texto);font-family:"Poppins",system-ui,sans-serif}

/* ---------- botao principal ---------- */
.ad-btn,.ad-cta{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ad-coral);
  color:#fff;font-weight:600;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 30px -8px rgba(220,64,48,.75),0 0 0 1px rgba(255,255,255,.06) inset;transition:background .2s ease,transform .2s ease}
.ad-btn:hover,.ad-cta:hover{background:var(--ad-coral-2)}
.ad-btn:focus-visible,.ad-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---------- hero ---------- */
.ad-hero{position:relative;
  background:url(/assets/plates/chao-esq.png) repeat left top / 430px auto,var(--ad-navy);}
.ad-hero::after{content:"";position:absolute;inset:0 0 0 50%;
  background:url(/assets/plates/chao-dir.png) repeat left top / 466px auto,var(--ad-navy-2);pointer-events:none}
.ad-palco{position:relative;z-index:1;margin:0 auto;width:min(100%,1536px);container-type:inline-size}
/* o chao da ilustracao funde no chao do hero: bordas esmaecidas */
.ad-mosaico img{-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
  mask-composite:intersect}

/* terminal: a janela real do laboratorio */
.ad-terminal,.lab-terminal{margin:0;overflow:hidden;background:var(--ad-term);border-radius:8px;
  font-family:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace}
.t-barra{display:flex;align-items:center;gap:6px;background:#13233A;color:#8FA3B8}
.t-barra i{border-radius:50%;background:#3A4C62}
.t-barra i:first-child{background:#E85C4D}
.t-barra span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-terminal pre,.lab-terminal pre{margin:0;color:#D6DEE8;white-space:pre;overflow:hidden}
.t-p{color:var(--ad-verde);font-weight:600}.t-c{color:#fff}.t-ok{color:var(--ad-verde);font-weight:600}.t-hi{color:var(--ad-ambar)}
.t-cursor{display:inline-block;width:.6em;height:1.05em;vertical-align:-.18em;background:#D6DEE8;animation:t-pisca 1.1s steps(1) infinite}
@keyframes t-pisca{50%{opacity:0}}

@media (min-width:960px){
  .ad-palco{--u:calc(100cqi / 1376);height:calc(645 * var(--u))}
  .ad-hero{height:calc(min(100vw,1536px) / 1376 * 609)}
  .ad-hero + *{padding-top:calc(min(100vw,1536px) / 1376 * 36 + 104px)}
  .ad-palco > *{position:absolute;margin:0}
  /* o comp foi desenhado com o cabecalho em escala; o cabecalho real tem altura
     fixa, entao abaixo de 1536 px o palco sobe a diferenca para manter o
     mesmo respiro entre o cabecalho e o kicker */
  .ad-palco{margin-top:calc(min(100vw,1536px) * .039714 - 61px)}

  .ad-titulo{left:calc(188 * var(--u));width:calc(1000 * var(--u));top:calc(66 * var(--u));text-align:center;color:#fff;
    font-size:calc(48.5 * var(--u));font-weight:700;line-height:1.03;letter-spacing:-.02em}
  .ad-mosaico{left:calc(89 * var(--u));top:calc(204 * var(--u));width:calc(523 * var(--u));height:calc(337 * var(--u))}
  .ad-mosaico img{display:block;width:100%;height:100%;object-fit:cover}
  .ad-costura{left:calc(686 * var(--u));top:calc(173 * var(--u));width:1px;height:calc(383 * var(--u));
    background:linear-gradient(180deg,transparent,rgba(169,184,199,.22) 12%,rgba(169,184,199,.22) 88%,transparent)}
  .ad-sub{left:calc(774 * var(--u));top:calc(181 * var(--u));width:calc(417 * var(--u));color:var(--ad-sub);
    font-size:calc(16 * var(--u));line-height:1.34}
  .ad-terminal{left:calc(774 * var(--u));top:calc(240 * var(--u));width:calc(417 * var(--u));height:calc(265 * var(--u));
    border:1px solid rgba(232,92,77,.55);
    box-shadow:0 0 calc(46 * var(--u)) calc(6 * var(--u)) rgba(220,64,48,.42),0 0 calc(12 * var(--u)) rgba(220,64,48,.5)}
  .ad-terminal .t-barra{height:calc(17 * var(--u));padding:0 calc(9 * var(--u));gap:calc(4 * var(--u));font-size:calc(6 * var(--u))}
  .ad-terminal .t-barra i{width:calc(5.5 * var(--u));height:calc(5.5 * var(--u))}
  .ad-terminal .t-barra span{margin-left:calc(6 * var(--u))}
  .ad-terminal pre{padding:calc(9 * var(--u)) calc(10 * var(--u));font-size:calc(7.15 * var(--u));line-height:1.27}
  .ad-cta{left:calc(860 * var(--u));top:calc(480 * var(--u));width:calc(210 * var(--u));height:calc(41 * var(--u));
    font-size:calc(15.2 * var(--u));font-weight:500;background:var(--ad-coral);
    box-shadow:0 0 calc(22 * var(--u)) calc(3 * var(--u)) rgba(220,64,48,.55),0 10px 30px -8px rgba(220,64,48,.75)}
  .ad-nota{left:calc(745 * var(--u));width:calc(440 * var(--u));top:calc(525 * var(--u));text-align:center;color:#C9D3DD;
    font-size:max(12px,calc(11 * var(--u)));line-height:1.3}
  .ad-numeros{left:calc(285 * var(--u));top:calc(571 * var(--u));width:calc(806 * var(--u));height:calc(73 * var(--u));
    display:grid;grid-template-columns:220fr 172fr 246fr 148fr;align-items:center;list-style:none;padding:0 calc(20 * var(--u)) 0 0;
    background:#fff;border-radius:calc(14 * var(--u));box-shadow:0 18px 40px -22px rgba(12,24,40,.55),0 0 0 1px rgba(12,24,40,.05)}
  .ad-numeros li{text-align:center;color:var(--ad-ink);font-size:calc(24 * var(--u));font-weight:500;line-height:1;position:relative}
  .ad-numeros li + li::before{content:"";position:absolute;left:0;top:calc(-6 * var(--u));bottom:calc(-6 * var(--u));width:1px;
    background:rgba(220,64,48,.45)}
  .ad-numeros .n-preco{font-weight:600}
}

/* ---------- celular e tablet: o mesmo antes e depois, empilhado ---------- */
@media (max-width:959.98px){
  .ad-hero::after{inset:auto 0 0 0;height:58%}
  .ad-palco{display:flex;flex-direction:column;align-items:stretch;padding:40px 20px 0}
  .ad-titulo{order:2;margin:0;text-align:center;color:#fff;font-size:clamp(28px,7.4vw,44px);font-weight:700;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
  .ad-mosaico{order:3;display:block;margin:26px auto 0;width:min(100%,520px)}
  .ad-mosaico img{display:block;width:100%;height:auto}
  .ad-costura{display:none}
  .ad-sub{order:5;margin:22px auto 0;max-width:520px;text-align:center;color:var(--ad-sub);font-size:16px;line-height:1.5}
  .ad-terminal{order:6;margin:20px auto 0;width:min(100%,520px);border:1px solid rgba(232,92,77,.55);
    box-shadow:0 0 34px 4px rgba(220,64,48,.35)}
  .ad-terminal .t-barra{height:26px;padding:0 10px;font-size:10.5px}
  .ad-terminal .t-barra i{width:8px;height:8px}
  .ad-terminal pre{padding:12px 12px 34px;font-size:clamp(7px,1.95vw,11px);line-height:1.35}
  .ad-cta{order:7;position:relative;z-index:1;margin:-22px auto 0;min-height:52px;padding:0 30px;font-size:16px}
  .ad-nota{order:8;margin:12px 0 0;text-align:center;color:#C9D3DD;font-size:13px}
  .ad-numeros{order:9;display:grid;grid-template-columns:1fr 1fr;margin:28px 0 -40px;padding:0;list-style:none;background:#fff;
    border-radius:16px;box-shadow:0 18px 40px -22px rgba(12,24,40,.55)}
  .ad-numeros li{padding:16px 8px;text-align:center;color:var(--ad-ink);font-size:17px;font-weight:500}
  .ad-numeros li:nth-child(even){border-left:1px solid rgba(220,64,48,.35)}
  .ad-numeros li:nth-child(n+3){border-top:1px solid rgba(220,64,48,.2)}
  .ad-hero + *{padding-top:72px}
}


/* ---------- secoes ---------- */
.ad-larg{width:min(100% - 40px,1120px);margin:0 auto}
.ad-estreito{max-width:760px;margin-left:auto;margin-right:auto}
.ad-sec{padding:96px 0}
.ad-sec h2,.ad-lab h2,.ad-final h2{margin:0;color:var(--ad-ink);font-size:clamp(28px,3.3vw,42px);font-weight:700;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.ad-lede{margin:14px 0 0;color:var(--ad-suave);font-size:17px;line-height:1.6}
.ad-cta-linha{margin:44px 0 0;text-align:center}
.ad-sec .ad-btn,.ad-lab .ad-btn,.ad-final .ad-btn{min-height:54px;padding:0 32px;font-size:16px}

/* a dor e a virada */
.ad-dor{text-align:center}
.ad-dor .ad-estreito > p{margin:22px auto 0;max-width:640px;color:var(--ad-texto);font-size:clamp(17px,1.5vw,19px);line-height:1.75}
.ad-virada{margin:72px auto 0;max-width:720px}
.ad-virada-t{margin:0;color:var(--ad-coral-txt);font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.015em}
.ad-virada-s{margin:12px 0 0;color:var(--ad-texto);font-size:17px;line-height:1.7}
.ad-pilares{list-style:none;margin:36px auto 0;padding:0;max-width:720px;text-align:left;border-top:1px solid var(--ad-fio)}
.ad-pilares li{padding:20px 0;border-bottom:1px solid var(--ad-fio)}
.ad-pilares h3,.ad-pilares p{display:inline;margin:0;font-size:18px;line-height:1.6}
.ad-pilares h3{color:var(--ad-ink);font-weight:700}
.ad-pilares p{color:var(--ad-texto)}

/* o laboratorio, mostrado */
.ad-lab{position:relative;padding:104px 0;background:var(--ad-navy-2) image-set(url(/assets/plates/lab-fundo.webp) type("image/webp"),url(/assets/plates/lab-fundo.png) type("image/png")) center / cover no-repeat;color:#fff}
.ad-lab::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,24,40,.88) 0,rgba(12,24,40,.5) 42%,rgba(12,24,40,0) 78%);pointer-events:none}
.ad-lab-in{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.ad-lab h2{color:#fff}
.ad-lab-txt > p{margin:18px 0 0;color:#C9D3DD;font-size:17px;line-height:1.7}
.ad-lab-txt .ad-lab-nota{margin-top:14px;color:#8FA3B8;font-size:14px}
.ad-lab-txt .ad-btn{margin-top:30px}
.lab-terminal{border:1px solid rgba(232,92,77,.5);box-shadow:0 0 60px 4px rgba(220,64,48,.32),0 40px 80px -30px rgba(0,0,0,.7)}
.lab-terminal .t-barra{height:32px;padding:0 14px;gap:7px;font-size:12px}
.lab-terminal .t-barra i{width:10px;height:10px}
.lab-terminal .t-barra span{margin-left:8px}
.lab-terminal pre{padding:18px 20px 20px;font-size:clamp(9px,1vw,13px);line-height:1.5}

/* modulos */
.ad-mods h2,.ad-mods .ad-lede{text-align:center}
.ad-mods-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.ad-mod{padding:30px 28px;background:#fff;border:1px solid var(--ad-fio);border-radius:16px}
.ad-mod h3{margin:0;color:var(--ad-ink);font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.ad-mod-meta{margin:6px 0 0;color:var(--ad-suave);font-size:14px}
.ad-mod-res{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--ad-claro);color:var(--ad-ink);font-size:15.5px;font-weight:500;line-height:1.5}
.ad-mod ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ad-mod ul li{display:flex;gap:10px;align-items:flex-start;color:var(--ad-texto);font-size:15px;line-height:1.55}
.ad-mod ul li svg,.ad-pq li svg{flex:none;width:18px;height:18px;margin-top:.15em;stroke-width:2.2;color:var(--ad-coral-txt)}
.ad-aulas{margin-top:20px;border-top:1px solid var(--ad-fio)}
.ad-aulas summary{display:flex;align-items:center;gap:6px;padding:14px 0 0;cursor:pointer;color:var(--ad-ink);font-size:14.5px;font-weight:600;list-style:none}
.ad-aulas summary::-webkit-details-marker{display:none}
.ad-aulas summary svg{width:16px;height:16px;color:var(--ad-coral-txt);transition:transform .25s ease}
.ad-aulas[open] summary svg{transform:rotate(180deg)}
.ad-aulas ol{margin:10px 0 0;padding:0;list-style:none;counter-reset:a}
.ad-aulas li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #EDF1F5;color:var(--ad-texto);font-size:14px;line-height:1.4;counter-increment:a}
.ad-aulas li span:first-child::before{content:counter(a,decimal-leading-zero) "  ";color:#9DACBA;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px}
.ad-aulas .t{flex:none;color:#9DACBA;font-size:13px;font-variant-numeric:tabular-nums}
.ad-extra{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ad-extra > div{padding:24px 28px;border-radius:16px;background:var(--ad-navy);color:#C9D3DD;
  background-image:radial-gradient(120% 140% at 100% 0,rgba(220,64,48,.22),transparent 60%)}
.ad-extra-t{margin:0;color:#fff;font-size:18px;font-weight:700}
.ad-extra p:not(.ad-extra-t){margin:8px 0 0;font-size:15px;line-height:1.6}

/* para quem e + como estuda */
.ad-quem-e{background:#fff}
.ad-quem-e h2{text-align:center}
.ad-pq{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ad-pq > div{padding:30px 32px;border-radius:16px;border:1px solid var(--ad-fio)}
.ad-pq-sim{background:var(--ad-claro)}
.ad-pq h3{margin:0;color:var(--ad-ink);font-size:19px;font-weight:700}
.ad-pq ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ad-pq li{display:flex;gap:10px;align-items:flex-start;color:var(--ad-texto);font-size:16px;line-height:1.55}
.ad-pq-sim li svg{color:#0F6B47}
.ad-pq-nao li svg{color:#9E2A1E}
.ad-pq-frase{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--ad-fio);color:var(--ad-ink);font-size:15.5px;font-weight:500;font-style:italic}
.ad-estudo{margin-top:56px}
.ad-estudo-t{margin:0;color:var(--ad-ink);font-size:19px;font-weight:700}
.ad-estudo ul{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--ad-fio)}
.ad-estudo li{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--ad-fio)}
.ad-estudo strong{color:var(--ad-ink);font-size:16px}
.ad-estudo span{color:var(--ad-texto);font-size:15.5px;line-height:1.55}

/* quem ensina */
.ad-autor-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.ad-autor-foto{display:block;border-radius:22px;overflow:hidden;background:var(--ad-navy);
  background-image:radial-gradient(90% 70% at 50% 35%,#2A3D57,var(--ad-navy) 70%)}
.ad-autor-foto img{display:block;width:100%;height:auto}
.ad-autor-txt > p{margin:16px 0 0;color:var(--ad-texto);font-size:17px;line-height:1.75}
.ad-gratis{margin:32px 0 0;padding:22px 24px;border-radius:14px;background:#fff;border:1px solid var(--ad-fio)}
.ad-gratis-t{margin:0;color:var(--ad-ink);font-size:18px;font-weight:700}
.ad-gratis p:not(.ad-gratis-t){margin:8px 0 0;color:var(--ad-ink);font-size:16.5px;line-height:1.65}

.ad-lab-req{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.06);
  border:1px solid rgba(169,184,199,.2);color:#C9D3DD;font-size:15px;line-height:1.55}
.ad-lab-req svg{flex:none;width:18px;height:18px;margin-top:.15em;color:var(--ad-verde)}
.ad-lab-req strong{color:#fff;font-weight:600}

/* certificado e acesso */
.ad-cert{padding-top:24px}
.ad-cert-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.ad-cert-txt > p{margin:16px 0 0;color:var(--ad-texto);font-size:17px;line-height:1.75}
.ad-cert-fig{margin:0}
.ad-cert-fig img{display:block;width:100%;height:auto;border-radius:10px;
  box-shadow:0 30px 50px -28px rgba(12,24,40,.55),0 0 0 1px rgba(12,24,40,.06)}
.ad-cert-fig figcaption{margin-top:18px;color:var(--ad-suave);font-size:14px;text-align:center}

/* perguntas */
.ad-faq{background:#fff}
.ad-faq h2{text-align:center;margin-bottom:32px}
.ad-faq details{border-bottom:1px solid var(--ad-fio)}
.ad-faq summary{display:flex;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;color:var(--ad-ink);font-size:17px;font-weight:600}
.ad-faq summary::-webkit-details-marker{display:none}
.ad-faq summary svg{flex:none;width:22px;height:22px;color:var(--ad-coral-txt);transition:transform .25s ease}
.ad-faq details[open] summary svg{transform:rotate(45deg)}
.ad-faq details p{margin:0 0 22px;color:var(--ad-texto);font-size:16px;line-height:1.75}

/* chamada final */
.ad-final{position:relative;padding:104px 0 112px;text-align:center;color:#fff;
  background:url(/assets/plates/chao-dir.png) repeat left top / 466px auto,var(--ad-navy-2)}
.ad-final::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 100%,rgba(220,64,48,.28),transparent 70%);pointer-events:none}
.ad-final-in{position:relative}
.ad-final h2{color:#fff}
.ad-final-lista{list-style:none;margin:28px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;max-width:760px}
.ad-final-lista li{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;border:1px solid rgba(169,184,199,.28);color:#C9D3DD;font-size:14.5px}
.ad-final-lista li svg{width:16px;height:16px;color:var(--ad-verde);stroke-width:2.4}
.ad-final .ad-btn{margin-top:34px}
.ad-final-aviso{margin:20px auto 0;max-width:560px;color:#C9D3DD;font-size:14.5px;line-height:1.6}
.ad-final-aviso strong{color:#fff;font-weight:600}
.ad-final-sec{margin:22px 0 0;color:#8FA3B8;font-size:15px}
.ad-final-sec a{color:#fff;font-weight:600}

/* botao fixo no celular */
.ad-fixo{display:none}

/* entrada das secoes */
@media (prefers-reduced-motion:no-preference){
  .js-revela .revela{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .js-revela .revela.visivel{opacity:1;transform:none}
  .ad-terminal.digitando pre > span.l{opacity:0}
  .ad-terminal.digitando pre > span.l.on{opacity:1;transition:opacity .12s linear}
}

@media (max-width:959.98px){
  .ad-sec{padding:72px 0}
  .ad-pilares,.ad-mods-grid,.ad-extra,.ad-pq,.ad-lab-in,.ad-autor-in,.ad-cert-in{grid-template-columns:1fr}
  .ad-lab{padding:72px 0}
  .ad-lab::before{background:linear-gradient(180deg,rgba(12,24,40,.9),rgba(12,24,40,.75))}
  .ad-lab-in,.ad-autor-in{gap:36px}
  .lab-terminal pre{font-size:clamp(7px,1.95vw,12px);padding:14px}
  .ad-estudo li{grid-template-columns:150px 1fr}
  .ad-autor-foto{max-width:420px}
  .ad-fixo{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(12,24,40,.94);backdrop-filter:blur(6px);transform:translateY(110%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .ad-fixo.on{transform:none}
  .ad-fixo .ad-btn{display:flex;width:100%;min-height:50px;font-size:16px}
}
@media (max-width:520px){
  .ad-estudo li{grid-template-columns:1fr;gap:4px}
  .ad-pq > div,.ad-mod{padding:24px 22px}
}

@media (prefers-reduced-motion:reduce){
  .t-cursor{animation:none}
  .ad-btn,.ad-cta,.ad-fixo{transition:none}
}