:root { --navy:#1b1464; --orange:#f97316; --gold:#fbbf24; --paper:#fffbf2; --muted:#e4e1f3; }
* { box-sizing:border-box; }
body { margin:0; font-family:Outfit,system-ui,sans-serif; background:var(--navy); color:var(--paper); font-size:18px; line-height:1.75; }
a { color:#fdba74; text-underline-offset:0.2em; }
a:hover { color:var(--gold); }
a:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
.skip-link { position:absolute; top:-100px; left:12px; z-index:10; padding:8px 16px; background:white; color:var(--navy); }
.skip-link:focus { top:12px; }
.wrap { width:min(100% - 40px,1000px); margin:auto; }
header { background:rgba(11,7,53,.75); border-bottom:1px solid rgba(255,255,255,.1); }
header nav { width:min(100% - 40px,1140px); margin:auto; min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; font-size:21px; font-weight:800; color:white; text-decoration:none; }
.brand img { object-fit:contain; }
.nav-cta { border:1px solid rgba(253,186,116,.5); border-radius:100px; padding:9px 18px; font-size:15px; font-weight:600; text-decoration:none; text-align:center; }
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:28px 0 12px; font-size:14px; color:var(--muted); }
.breadcrumb a { color:var(--muted); }
.hero { padding:45px 0 52px; border-bottom:1px solid rgba(255,255,255,.14); background:radial-gradient(ellipse at 70% 0,rgba(249,115,22,.1),transparent 65%); }
.eyebrow { color:#fdba74; font-size:13px; letter-spacing:.15em; font-weight:700; margin:0 0 14px; }
h1 { max-width:850px; font-size:clamp(32px,5.5vw,60px); font-weight:800; line-height:1.12; letter-spacing:-.025em; margin:0 0 25px; }
.intro { max-width:760px; color:var(--muted); font-size:clamp(18px,2.3vw,22px); line-height:1.65; }
.tags { display:flex; flex-wrap:wrap; list-style:none; gap:10px; padding:0; margin:25px 0 30px; }
.tags li { padding:5px 13px; border:1px solid rgba(255,255,255,.18); border-radius:100px; font-size:14px; color:#f1edf8; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:14px 23px; background:linear-gradient(135deg,var(--orange),var(--gold)); color:#241154; font-weight:700; border-radius:100px; text-decoration:none; text-align:center; line-height:1.4; }
.button:hover { color:#241154; background:#fdba74; }
.button.whatsapp { background:#15803d; color:white; }
.button.whatsapp:hover { background:#166534; color:white; }
.button-row { display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; }
.contact .contact-note { font-size:14px; margin:18px 0 0; }
.content { max-width:900px; }
.content section { padding-top:38px; }
h2 { font-size:clamp(24px,3vw,33px); line-height:1.3; margin:0 0 18px; font-weight:700; }
h3 { font-size:22px; line-height:1.35; margin:0 0 10px; }
.content p,.content li { color:var(--muted); }
.content p { margin:0 0 18px; }
.steps { padding-left:26px; }
.steps li { padding-left:5px; margin-bottom:15px; }
.content strong { color:var(--paper); }
.notice { padding:20px; border-left:3px solid var(--gold); background:rgba(255,255,255,.055); border-radius:0 14px 14px 0; font-size:16px; }
.subject-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:20px 0 24px; }
.subject { padding:24px 20px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:18px; }
.subject h3 { color:#fdba74; }
.subject p { font-size:16px; margin:0; }
.contact { padding:34px; margin:45px 0 25px; border-radius:24px; border:1px solid rgba(249,115,22,.4); background:rgba(249,115,22,.08); }
.contact p:not(.eyebrow) { max-width:750px; color:var(--muted); }
.related { margin:25px 0 45px; }
footer { background:rgba(11,7,53,.75); border-top:1px solid rgba(255,255,255,.1); padding:28px 0; font-size:15px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; }
footer a { color:#ece8f4; }
footer p { width:100%; margin:0; font-size:13px; color:#cbc5e5; }
@media(max-width:650px) {
  body { font-size:17px; }
  .wrap,header nav { width:calc(100% - 32px); }
  header nav { min-height:80px; gap:10px; }
  .brand { font-size:16px; gap:8px; }
  .brand img { width:36px; height:36px; }
  .nav-cta { padding:8px 12px; font-size:13px; }
  .hero { padding:32px 0 38px; }
  .subject-grid { grid-template-columns:1fr; }
  .content section { padding-top:30px; }
  .contact { padding:25px 20px; }
  .button { width:100%; padding:14px 18px; }
}