/* ============================================================================
   OPERA PRIME · AULA MAGNA — "Do excelente executor ao Gestor de Verdade"
   Folha dedicada e AUTOCONTIDA (não carrega styles.css → sem regressão nas
   outras páginas). Portada da referência aprovada, sem Tailwind.
   Fontes (DM Sans + Playfair Display) via <link> no HTML.
   Inclui toast/spinner/err-msg que o form.js usa.
   AJUSTE: .wrap alargado para eliminar as bordas vazias no desktop.
   ============================================================================ */

:root { --navy:#07101f; --navy2:#0b1628; --ink:#111827; --cream:#f2eee6; --gold:#d3aa4f; --gold2:#f0d88d; --muted:#9aa4b3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",system-ui,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.hidden { display:none !important; }

/* CONTÊINER — antes travava em 1180px e deixava bordas vazias no desktop.
   Alargado e com margem lateral maior, que respira melhor em telas grandes. */
.wrap { width:min(1360px, calc(100% - 72px)); margin:auto; }

.nav { height:88px; display:flex; align-items:center; justify-content:space-between; position:absolute; z-index:10; left:50%; transform:translateX(-50%); color:white; border-bottom:1px solid #ffffff1b; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-flame { width:39px; height:39px; object-fit:contain; filter:drop-shadow(0 5px 12px #0008); }
.brand > span:last-child { display:flex; flex-direction:column; gap:2px; }
.brand b { font:600 14px Georgia; letter-spacing:.13em; }
.brand small { font-size:7px; letter-spacing:.23em; color:#aeb6c2; }
.nav-cta { text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-weight:700; display:flex; gap:14px; }
.nav-cta span { color:var(--gold); }
.hero { min-height:760px; background:radial-gradient(circle at 72% 46%,#192a45 0,#091426 34%,#050c18 68%); color:white; position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 49%,#d3aa4f12 50%,transparent 50.15%); }
.hero-grid { min-height:760px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; padding-top:88px; position:relative; z-index:2; }
.hero-copy { padding:45px 0; }
.eyebrow,.section-index { text-transform:uppercase; letter-spacing:.2em; font-size:11px; font-weight:700; color:var(--gold); display:flex; align-items:center; gap:10px; }
.eyebrow span { width:27px; height:1px; background:var(--gold); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(49px,5.15vw,77px); line-height:.98; letter-spacing:-.055em; font-weight:500; max-width:750px; margin:24px 0 28px; }
h1 em,h2 em { display:inline; font-family:"Playfair Display",serif; color:var(--gold2); font-weight:600; }
h1 strong { display:block; font-size:.48em; line-height:1.15; letter-spacing:-.025em; margin-top:24px; color:#d7dce4; font-weight:500; max-width:600px; }
.lead { color:#b5bdc9; font-size:18px; line-height:1.65; max-width:570px; margin-bottom:31px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:17px 24px; border:0; font:700 12px "DM Sans"; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; transition:.25s; }
.button:hover { transform:translateY(-2px); filter:brightness(1.08); }
.button.gold { background:linear-gradient(110deg,#bd8e32,#efd585); color:#101827; box-shadow:0 14px 45px #0005; }
.button span { font-size:17px; }
.microcopy { color:#768396; font-size:11px; margin:16px 0 0; }
.hero-portrait { height:610px; align-self:end; position:relative; display:flex; justify-content:center; }
.portrait-frame { position:absolute; inset:45px 34px 0 74px; overflow:hidden; border-top:1px solid #d3aa4f66; background:#17243a; }
.portrait-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,#050c18 100%),linear-gradient(90deg,#050c18bb 0,transparent 25%); }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; filter:saturate(.75) contrast(1.04); }
.proof-card { position:absolute; left:8px; bottom:62px; background:#0d1a2ae8; backdrop-filter:blur(12px); border:1px solid #ffffff1c; padding:16px 22px; display:flex; align-items:center; gap:14px; z-index:2; }
.proof-number { font:italic 600 35px "Playfair Display"; color:var(--gold2); }
.proof-card span:last-child { color:#c6ccd4; font-size:10px; line-height:1.45; text-transform:uppercase; letter-spacing:.1em; }
.vertical-word { position:absolute; right:-76px; top:51%; transform:rotate(90deg); color:#ffffff34; font-size:9px; letter-spacing:.45em; }
.scroll-note { position:absolute; right:37px; bottom:25px; color:#657286; text-transform:uppercase; font-size:8px; letter-spacing:.25em; display:flex; align-items:center; gap:11px; transform:rotate(90deg); transform-origin:right; }
.scroll-note span { width:30px; height:1px; background:#687488; }
.section { padding:112px 0; }
.diagnosis { background:var(--cream); }
.diagnosis .section-index,
.mirror .section-index,
.authority .section-index { color:#805916; text-shadow:0 1px 0 #fff9,0 3px 12px #8059161c; }
.diagnosis h2 em,
.mirror h2 em,
.authority h2 em { color:#865f1c; text-shadow:0 1px 0 #fff,0 4px 16px #6c481e20; }
.section-index { margin-bottom:48px; }
.diagnosis-grid,.mirror-header { display:grid; grid-template-columns:1.05fr .95fr; gap:110px; align-items:start; }
h2 { font-size:clamp(39px,4.2vw,61px); line-height:1.04; letter-spacing:-.045em; font-weight:500; }
.story { padding-top:5px; }
.story p,.mirror-header > p,.class-intro,.authority-copy > p,.form-grid > div > p { font-size:17px; line-height:1.75; color:#5a6270; }
.story .accent-line { color:#1d2a3a; border-left:2px solid var(--gold); padding-left:22px; font-weight:600; }
.warning-band { margin-top:75px; background:var(--navy); color:white; display:grid; grid-template-columns:50px 1fr 50px; align-items:center; gap:21px; padding:25px 31px; box-shadow:0 20px 50px #1420331c; }
.warning-icon { width:46px;height:46px;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold2);font:italic 600 25px "Playfair Display"; }
.warning-band p { display:flex; flex-direction:column; gap:3px; margin:0; font-size:14px; color:#c4cad3; }
.warning-band b { color:white; text-transform:uppercase; letter-spacing:.13em; font-size:10px; }
.line-arrow { color:var(--gold); font-size:22px; text-align:right; }
.mirror { background:#e8e3da; }
.mirror-header { align-items:end; margin-bottom:60px; }
.mirror-header h2,.mirror-header p { margin-bottom:0; }
.signals { border-top:1px solid #c5beb2; }
.signal { display:grid; grid-template-columns:70px .8fr 1.2fr; gap:24px; align-items:center; padding:28px 0; border-bottom:1px solid #c5beb2; transition:.25s; }
.signal:hover { padding-left:12px; background:#ffffff30; }
.signal > span { font:italic 600 21px "Playfair Display"; color:#ad8236; }
.signal h3 { margin:0; font-size:18px; }
.signal p { margin:0; color:#6a7078; font-size:14px; line-height:1.65; max-width:480px; }
.class-section { background:var(--navy); color:white; position:relative; overflow:hidden; }
.class-section::after { content:"MÉTODO"; position:absolute; right:-30px; bottom:-80px; font-weight:700; font-size:190px; color:#ffffff08; letter-spacing:-.06em; }
.class-grid { display:grid; grid-template-columns:1fr 1fr; gap:110px; position:relative; z-index:1; }
.class-intro { color:#aab4c3; max-width:540px; }
.class-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:45px; }
.class-facts span { font-size:10px; line-height:1.5; color:#77859a; display:flex; flex-direction:column; }
.class-facts b { color:var(--gold2); font-size:10px; letter-spacing:.15em; margin-bottom:5px; }
.curriculum { border-top:1px solid #ffffff20; }
.curriculum div { display:grid; grid-template-columns:45px 1fr; gap:15px; align-items:center; padding:21px 0; border-bottom:1px solid #ffffff20; }
.curriculum span { color:var(--gold); font:italic 600 18px "Playfair Display"; }
.curriculum p { margin:0; color:#e1e5eb; font-size:15px; }
.authority { background:#f1ede5; }
.authority-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:105px; align-items:center; }
.authority-photo { height:600px; position:relative; background:var(--navy); }
.authority-photo img { width:100%; height:100%; object-fit:cover; object-position:center 20%; filter:saturate(.62) contrast(1.06); }
.authority-photo::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,#07101fd9); }
.authority-photo > span { position:absolute; bottom:25px; left:27px; z-index:2; color:white; letter-spacing:.2em; font-size:9px; line-height:1.6; }
.authority-copy > p { max-width:570px; }
.numbers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:45px; padding-top:32px; border-top:1px solid #cbc4b8; }
.numbers span { display:flex; flex-direction:column; font-size:10px; line-height:1.45; color:#6d737c; text-transform:uppercase; letter-spacing:.07em; }
.numbers b { color:#172335; font:italic 600 29px "Playfair Display"; margin-bottom:4px; text-transform:none; letter-spacing:-.03em; }
.form-section { background:#101b2d; color:white; }
.form-grid { display:grid; grid-template-columns:1fr .82fr; gap:110px; }
.section-index.light { color:var(--gold2); }
.form-grid > div > p { color:#a7b1c0; max-width:500px; }
form { background:white; color:var(--ink); padding:34px; box-shadow:0 30px 70px #0005; display:grid; gap:18px; }
label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; display:grid; gap:7px; }
input,select { width:100%; background:#f1eee8; border:1px solid transparent; padding:14px 15px; color:#1a2432; font:500 14px "DM Sans"; outline:none; }
input:focus,select:focus { border-color:#b98a36; background:white; }
input[aria-invalid="true"] { border-color:#b3261e; }
.err-msg { font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; color:#b3261e; min-height:12px; }
.consent { display:flex; align-items:flex-start; gap:9px; text-transform:none; letter-spacing:0; font-weight:400; color:#69717c; font-size:11px; line-height:1.45; }
.consent input { width:15px; height:15px; margin:0; accent-color:#b98a36; }
form .button { width:100%; }
form small { text-align:center; color:#8b929b; font-size:9px; }
footer { min-height:120px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; color:#747b84; font-size:10px; }
.footer-logo { width:126px; height:auto; display:block; }
footer > p { text-align:center; margin:0; font-family:Georgia,serif; font-style:italic; }
footer > span { text-align:right; }

/* Foco visível (acessibilidade) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .consent input:focus-visible {
  outline:2px solid var(--gold2); outline-offset:3px;
}

/* Toast + spinner (form.js) — cores explícitas, sem depender de styles.css */
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(120%);
  background:#0d1a2a; border:1px solid #ffffff26; border-radius:12px; padding:14px 18px; color:#fff;
  font-size:14px; max-width:92vw; z-index:60; transition:transform .28s ease; box-shadow:0 10px 40px #0009; }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.ok { border-color:#2e7d5b; }
.toast.err { border-color:#b3261e; }
.spinner { width:18px; height:18px; border:2px solid #00000025; border-top-color:#101827; border-radius:50%;
  display:inline-block; animation:spin .7s linear infinite; vertical-align:-3px; }
@keyframes spin { to { transform:rotate(360deg); } }

@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.reveal { animation:rise .85s ease both; }

@media (max-width: 800px) {
  .wrap { width:min(100% - 36px, 620px); }
  .nav { height:72px; }
  .nav-cta { font-size:0; gap:0; }
  .nav-cta::before { content:"Reservar vaga"; font-size:9px; }
  .nav-cta span { display:none; }
  .hero { min-height:auto; }
  .hero-grid { min-height:auto; grid-template-columns:1fr; padding-top:100px; }
  .hero-copy { padding:30px 0 15px; }
  h1 { font-size:47px; }
  h1 strong { font-size:.46em; }
  .lead { font-size:16px; }
  .hero .button { width:100%; }
  .hero-portrait { height:430px; margin:5px -18px 0; }
  .portrait-frame { inset:20px 18px 0 55px; }
  .proof-card { left:0; bottom:28px; }
  .vertical-word,.scroll-note { display:none; }
  .section { padding:78px 0; }
  .section-index { margin-bottom:28px; font-size:9px; }
  .diagnosis-grid,.mirror-header,.class-grid,.authority-grid,.form-grid { grid-template-columns:1fr; gap:35px; }
  h2 { font-size:40px; }
  .story p,.mirror-header > p,.class-intro,.authority-copy > p,.form-grid > div > p { font-size:15px; }
  .warning-band { margin-top:45px; grid-template-columns:40px 1fr; padding:21px; }
  .warning-icon { width:38px;height:38px; }
  .line-arrow { display:none; }
  .mirror-header { margin-bottom:36px; }
  .signal { grid-template-columns:38px 1fr; gap:10px; padding:22px 0; }
  .signal p { grid-column:2; }
  .class-facts { grid-template-columns:1fr; }
  .class-facts span { border-left:1px solid var(--gold); padding-left:12px; }
  .class-section::after { left:18px; right:auto; bottom:-18px; font-size:clamp(72px,24vw,108px); white-space:nowrap; letter-spacing:-.075em; }
  .authority-photo { height:470px; order:2; }
  .authority-copy { order:1; }
  .numbers { grid-template-columns:1fr; gap:15px; }
  .numbers span { border-bottom:1px solid #d3cec5; padding-bottom:14px; }
  form { padding:25px 20px; margin:0 -4px; }
  footer { grid-template-columns:1fr auto; min-height:150px; }
  .footer-logo { width:108px; }
  footer > p { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { animation:none; }
  .button,.signal { transition:none; }
}
