:root {
  --sun:#a855f7; --sun-dark:#7a31cb; --sun-soft:#f1e8f9;
  --ink:#21182c; --ink-2:#594e61; --cream:#faf7f1; --line:#e4d9e9;
  --green:#198653; --green-dark:#126c42; --white:#fff;
  --night:#100b18; --night-2:#25172e;
}
body { font-family:'Source Sans 3',sans-serif; font-size:19px; line-height:1.55 }
h1,h2,h3,.stat strong { font-family:'Bricolage Grotesque',sans-serif; letter-spacing:-.035em }
h1,h2,h3 { line-height:1.08 }
section { padding:76px 0 }
.wrap { max-width:1160px; padding-inline:24px }
.skip-link { position:fixed; top:10px; left:10px; z-index:40; background:#fff; color:var(--night); padding:10px 16px; border-radius:10px; font-weight:800; transform:translateY(-150%) }
.skip-link:focus { transform:none }
:focus-visible { outline:3px solid var(--sun); outline-offset:3px }
.hero { position:relative; overflow:hidden; color:#fff; padding:28px 0 82px; background:radial-gradient(circle at 80% 8%,rgba(168,85,247,.24),transparent 32rem),linear-gradient(135deg,var(--night),var(--night-2) 65%,#160e20) }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(#000,transparent 88%) }
.hero .wrap { position:relative }
.brand { margin:0 0 50px; gap:12px; font-size:17px; line-height:1.15 }
.brand img { border-radius:50%; object-fit:cover; border:2px solid var(--sun) }
.brand span { font-size:17px }
.brand small { margin-left:auto; color:#c4b5cf; letter-spacing:.12em; font-size:12px }
.hero-grid { grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(34px,5vw,76px); align-items:stretch }
.hero .eyebrow { font-size:13px; color:#d6aaff; letter-spacing:.11em }
.hero h1 { font-size:clamp(43px,5.3vw,69px); line-height:1.01; max-width:15ch; margin:18px 0 22px }
.hero h1 em { color:#dab0ff; background:none }
.hero .lead { color:#e2dce8; font-size:21px; max-width:54ch; line-height:1.48 }
.when { margin-bottom:30px }
.when li { color:#f5edf9; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); font-size:15px; padding:8px 13px }
.photo { background:#d9c4dd; border-radius:26px; box-shadow:0 30px 70px -32px rgba(0,0,0,.48) }
.hero .photo { aspect-ratio:auto; min-height:710px; align-self:stretch; border:1px solid rgba(255,255,255,.15) }
.hero .photo img { object-position:center 24% }
.photo-badge { left:18px; right:18px; bottom:18px; padding:15px 18px; border-radius:14px; color:var(--ink); box-shadow:0 14px 30px rgba(17,7,27,.17) }
.photo-badge b { font-family:'Bricolage Grotesque',sans-serif; font-size:18px }
.card { color:var(--ink); border:0; border-radius:22px; padding:27px; background:#fff; box-shadow:0 22px 55px rgba(0,0,0,.2) }
.card h3 { font-size:26px; margin-bottom:4px }
.card p.small { font-size:16px; line-height:1.4 }
label { font-size:15px; margin:12px 0 5px }
input { border-radius:11px; background:#fbf8fd; border-color:#ded5e5; padding:13px 15px; font-size:18px }
input:focus { border-color:var(--sun); box-shadow:0 0 0 4px rgba(168,85,247,.16) }
input[aria-invalid="true"] { border-color:#bd2d49 }
.btn { border-radius:12px; font-size:18px; line-height:1.15; padding:17px 20px; transition:transform .2s,background .2s,box-shadow .2s }
.btn:hover { box-shadow:0 14px 28px -14px rgba(21,112,60,.85) }
.btn:disabled { opacity:.65; cursor:wait; transform:none }
.fine { font-size:13px; line-height:1.35 }
.err { display:none; color:#b32640; font-size:15px; line-height:1.3; margin:10px 0 0 }
.tema { background:var(--night-2); border:1px solid rgba(168,85,247,.25); border-radius:24px; box-shadow:0 20px 45px -34px rgba(39,15,59,.6) }
.tema .cal { background:#ddadff; border-radius:14px }
.tema h2 { font-size:clamp(27px,3.3vw,39px) }
.tema p { color:#e4d9eb }
.sec-title { font-size:clamp(32px,4vw,46px); letter-spacing:-.04em }
.item,.step,details { border:1px solid var(--line); box-shadow:0 12px 28px -27px #321d43 }
.item,.step { border-radius:17px }
.step .n { background:#e8ccfa; color:#4b176e; font-family:'Bricolage Grotesque',sans-serif }
.step h3 { font-size:23px }
.soft { background:#f0e9f4 }
.sobre .photo { aspect-ratio:4/5!important; max-height:520px }
.sobre .photo img { object-position:center 23% }
.quote { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; line-height:1.2 }
.stat strong { font-size:38px; color:#7430ae }
details { border-radius:14px }
summary::after { color:var(--sun-dark) }
.final .btn { max-width:560px }
footer { background:var(--night); color:#cec2d4; padding:36px 20px 44px }
.sticky .btn { box-shadow:0 8px 26px rgba(17,7,27,.32) }
.sticky { display:none }
@media(max-width:900px) {
  .hero { padding-bottom:58px }
  .brand { margin-bottom:32px }
  .hero-grid,.sobre { grid-template-columns:1fr }
  .hero h1 { max-width:18ch }
  .hero .photo { min-height:0; height:510px; max-width:560px; width:100%; margin:0 auto }
  .hero-grid .photo { order:0; aspect-ratio:auto; border-radius:24px }
  .hero-grid .photo .photo-badge { display:block }
  .sobre .photo { max-width:460px; width:100%; margin:auto }
  .sticky.is-visible { display:block }
  footer { padding-bottom:118px }
}
@media(max-width:600px) {
  body { font-size:18px }
  section { padding:56px 0 }
  .wrap { padding-inline:18px }
  .hero { padding:18px 0 56px }
  .brand { margin-bottom:32px; font-size:15px }
  .brand small { display:none }
  .hero h1 { font-size:clamp(38px,10.4vw,51px) }
  .hero .lead { font-size:18px }
  .when { gap:7px }
  .when li { font-size:14px; padding:7px 11px }
  .card { padding:21px }
  .hero .photo { height:440px }
  .tema { padding:25px; gap:18px }
  .tema .cal { width:max-content; min-width:130px }
  .grid-4 { grid-template-columns:1fr 1fr }
  .sticky .btn { font-size:16px; padding:15px 12px }
}
@media(max-width:480px) { .grid-4 { grid-template-columns:1fr } .hero .photo { height:390px } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } .dot { animation:none } .btn { transition:none } }