/* Yunomira — site. Built from the approved prototype (landing-page-plan.md §1). */
/* Layout: a quiet, light product page in the Yunomira palette. One accent (the brand purple)
   for actions; the indigo→cyan gradient of the logo only in the hero word and the CTA band.
   The hero's picture is the product itself: a clickable mock of the backoffice and the portal.
   Light only, on purpose: schools read a dark page as a developer tool, so the page keeps one
   look whatever the viewer's theme. */
:root {
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --panel: #ffffff;
  --ink: #0f1b3d;
  --ink-2: #475569;
  --ink-3: #94a3b8;
  --line: #e2e8f0;
  --line-2: #eef2f7;
  --accent: #7b61ff;
  --accent-ink: #ffffff;
  --accent-soft: #efeaff;
  --indigo: #6366f1;
  --blue: #3b82f6;
  --cyan: #8fe3ff;
  --green: #10b981;
  --green-soft: #e6f7f1;
  --yellow: #fbbf24;
  --yellow-soft: #fff6dc;
  --coral: #f87171;
  --coral-soft: #feecec;
  --shadow: 0 1px 2px rgba(15,27,61,.06), 0 12px 40px -16px rgba(15,27,61,.18);
  --shadow-lg: 0 2px 4px rgba(15,27,61,.06), 0 40px 90px -30px rgba(99,102,241,.45);
  --navy: #0f1b3d;
  --navy-2: #16244f;
  --lavender: #f1eeff;
  --sky: #e8f6ff;
  --mint: #e6f7f1;
  --peach: #fff0ee;
  --butter: #fff6dc;
  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --radius: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
[hidden] { display: none !important; }
.side .sub { padding-left: 1.9rem; font-size: .84rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0; }
.wrap { width: min(1120px, 100%); margin-inline: auto; padding-inline: 20px; }
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; font: 600 .74rem/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .45rem .8rem; width: max-content; max-width: 100%; text-align: center; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lede { color: var(--ink-2); font-size: 1.1rem; max-width: 42rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1.15rem; border-radius: 10px; font: 600 .95rem/1 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px -8px rgba(123,97,255,.7); }
.btn-primary:hover { transform: translateY(-1px); background: #6a4ef5; }
.btn-lg { padding: .95rem 1.5rem; font-size: 1.05rem; border-radius: 12px; }
.btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-sm { padding: .5rem .8rem; font-size: .85rem; border-radius: 8px; }
section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-head { display: flex; flex-direction: column; gap: .75rem; max-width: 44rem; margin-bottom: 2.25rem; }

/* Nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2); }
.nav .wrap { display: flex; align-items: center; gap: 1.5rem; height: 64px; }
.brand { display: flex; align-items: center; gap: .55rem; font: 700 1.15rem var(--display); text-decoration: none; }
.brand img { height: 30px; width: 30px; }
.nav-links { display: flex; gap: 1.4rem; margin-left: auto; font-size: .92rem; color: var(--ink-2); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav-links { display: none; } .nav .cta-nav { margin-left: auto; } }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) 2.5rem; background: linear-gradient(180deg, #f3f0ff 0%, #eaf4ff 55%, var(--bg) 100%); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50% 50% 50% 0; filter: blur(40px); opacity: .55; pointer-events: none; }
.hero::before { width: 520px; height: 520px; left: -160px; top: -200px; background: radial-gradient(circle at 30% 30%, #c4b5ff, #7b61ff 60%, transparent 72%); }
.hero::after { width: 560px; height: 560px; right: -180px; top: -120px; background: radial-gradient(circle at 60% 40%, #bfefff, #3b82f6 62%, transparent 74%); border-radius: 50% 50% 0 50%; }
.hero .wrap { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.4rem; }
.hero h1 { max-width: 18ch; color: var(--navy); }
.hero h1 .grad { background: linear-gradient(90deg, #7b61ff, #3b82f6 55%, #8fe3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { text-align: center; font-size: 1.2rem; max-width: 46rem; }
.hero-ctas { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.hero-note { font-size: .85rem; color: var(--ink-3); }
.audience { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .25rem; }
.audience span { font-size: .82rem; font-weight: 500; color: var(--navy); background: rgba(255,255,255,.75); border: 1px solid rgba(123,97,255,.18); border-radius: 999px; padding: .38rem .8rem; backdrop-filter: blur(6px); }

/* Playground */
.play { padding-top: 1rem; }
.play-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.play-head p { color: var(--ink-2); font-size: .95rem; }
.seg { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 3px; box-shadow: var(--shadow); }
.seg button { border: 0; background: transparent; color: var(--ink-2); font: 600 .85rem var(--body); padding: .5rem 1rem; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.frame { position: relative; border: 1px solid rgba(123,97,255,.25); border-radius: 18px; background: var(--bg-soft); box-shadow: var(--shadow-lg); overflow: hidden; }
.play { position: relative; }
.play::before { content: ""; position: absolute; inset: 40px 10% auto; height: 60%; background: radial-gradient(60% 60% at 50% 40%, rgba(123,97,255,.22), transparent 70%); filter: blur(30px); pointer-events: none; }
.play .wrap { position: relative; }
.frame-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); background: var(--panel); font-size: .78rem; color: var(--ink-3); }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: inline-block; }
.frame-bar .url { margin-left: .5rem; background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: 6px; padding: .2rem .6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 460px; }
.side { background: var(--bg-soft); border-right: 1px solid var(--line); padding: .9rem .6rem; display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; }
.side .school { display: flex; align-items: center; gap: .5rem; font-weight: 600; padding: .3rem .5rem .9rem; }
.side .school img { width: 22px; height: 22px; }
.side .group { font-size: .72rem; color: var(--ink-3); font-weight: 600; padding: .7rem .5rem .2rem; letter-spacing: .04em; text-transform: uppercase; }
.side button { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink-2); padding: .45rem .55rem; border-radius: 8px; font: 500 .88rem var(--body); cursor: pointer; }
.side button:hover { background: var(--line-2); color: var(--ink); }
.side button[aria-current="page"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(15,27,61,.08); }
.side svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.side .who { margin-top: auto; padding: .8rem .5rem .2rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.side .who i { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 700 .7rem var(--body); font-style: normal; flex: none; }
.side .who small { display: block; color: var(--ink-3); font-size: .72rem; }
.main { background: var(--panel); padding: 1.1rem 1.3rem; min-width: 0; }
.crumb { font-size: .8rem; color: var(--ink-3); margin-bottom: .9rem; }
.crumb b { color: var(--ink); font-weight: 600; }
.screen { display: none; }
.screen.on { display: block; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.toolbar h3 { font-size: 1.15rem; }
.tabs { display: inline-flex; gap: .25rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.tabs span { font-size: .78rem; padding: .3rem .6rem; border-radius: 7px; color: var(--ink-2); }
.tabs span.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(15,27,61,.1); }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: .74rem; letter-spacing: .03em; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
td { padding: .55rem .6rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.pill.ok { background: var(--green-soft); color: #0a7a5a; border-color: #bfe9d9; }
.pill.warn { background: var(--yellow-soft); color: #8a5a00; border-color: #f3dfa2; }
.pill.bad { background: var(--coral-soft); color: #b42323; border-color: #f7c2c2; }
.pill.neutral { background: var(--bg-soft); color: var(--ink-2); border-color: var(--line); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.tile { border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; background: var(--panel); transition: transform .15s ease, box-shadow .15s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile .k { font-size: .74rem; color: var(--ink-3); font-weight: 600; }
.tile .v { font: 600 1.45rem/1.2 var(--display); margin-top: .2rem; font-variant-numeric: tabular-nums; }
.tile .d { font-size: .75rem; color: var(--ink-2); margin-top: .15rem; }
.seats { display: inline-flex; align-items: center; gap: .5rem; }
.bar { width: 90px; height: 6px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar i.full { background: var(--coral); }
.mark { display: inline-flex; gap: .25rem; }
.mark button { border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font: 600 .72rem var(--body); padding: .25rem .55rem; border-radius: 999px; cursor: pointer; }
.mark button[aria-pressed="true"].p { background: var(--green-soft); color: #0a7a5a; border-color: #bfe9d9; }
.mark button[aria-pressed="true"].f { background: var(--coral-soft); color: #b42323; border-color: #f7c2c2; }
.mark button[aria-pressed="true"].j { background: var(--yellow-soft); color: #8a5a00; border-color: #f3dfa2; }
.hint { font-size: .8rem; color: var(--ink-3); margin-top: .7rem; }
.row-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.msg { border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .8rem; align-items: center; font-size: .85rem; }
.msg + .msg { margin-top: .5rem; }
.msg .ch { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; grid-row: span 2; }
.msg .ch.wa { background: var(--green-soft); color: #0a7a5a; }
.msg .ch.em { background: var(--accent-soft); color: var(--accent); }
.msg .sub { color: var(--ink-3); font-size: .78rem; grid-column: 2; }
.msg .pill { grid-row: span 2; }
/* Portal mock */
.phone-wrap { display: grid; place-items: center; padding: 1.5rem 1rem; background: linear-gradient(135deg, #efeaff, #e4f3ff); }
.phone { width: 340px; max-width: 100%; background: var(--panel); border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.phone .top { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem .6rem; font-weight: 600; font-size: .9rem; }
.phone .top .mk { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .7rem; }
.phone .body { padding: .4rem 1rem 1rem; display: flex; flex-direction: column; gap: .7rem; }
.phone .ptabs { display: flex; gap: .4rem; }
.phone .ptabs button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: .35rem .7rem; font: 600 .78rem var(--body); color: var(--ink-2); cursor: pointer; }
.phone .ptabs button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; font-size: .85rem; }
.card .t { font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.card .s { color: var(--ink-2); font-size: .8rem; margin-top: .15rem; }
.card .big { font: 600 1.5rem/1.1 var(--display); margin-top: .3rem; }
.pay { display: block; width: 100%; margin-top: .6rem; border: 0; background: var(--accent); color: var(--accent-ink); font: 600 .85rem var(--body); padding: .6rem; border-radius: 10px; cursor: pointer; }
.pay.done { background: var(--green-soft); color: #0a7a5a; cursor: default; }
.pscreen { display: none; flex-direction: column; gap: .7rem; }
.pscreen.on { display: flex; }
.lesson { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .8rem; font-size: .85rem; }
.lesson.green { background: var(--green-soft); } .lesson.red { background: var(--coral-soft); }
.lesson .h { font-weight: 600; font-variant-numeric: tabular-nums; width: 3rem; }
.lesson .n { flex: 1; min-width: 0; }
.lesson .n small { display: block; color: var(--ink-3); font-size: .75rem; }
.legend { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .72rem; color: var(--ink-3); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .3rem; }
.phone .nav-b { display: flex; justify-content: space-around; border-top: 1px solid var(--line); padding: .6rem 0 .8rem; font-size: .68rem; color: var(--ink-3); }
.phone .nav-b b { color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
  .hero::before, .hero::after { opacity: .28; }
  .eyebrow { letter-spacing: .05em; font-size: .68rem; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: .6rem; }
  .side .school, .side .group, .side .who { display: none; }
  .side button { width: auto; }
}

/* Facts strip */
.facts { padding-block: 0 1rem; }
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.facts-list li { background: var(--panel); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .15rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.facts-list li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--lavender); position: relative; z-index: 1; }
.facts-list b { font: 700 1.15rem var(--display); color: var(--navy); }
.facts-list span { font-size: .88rem; color: var(--ink-2); }

/* Features */
.features { background: linear-gradient(180deg, var(--bg) 0%, var(--lavender) 30%, var(--sky) 100%); }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.feat { background: var(--panel); border: 1px solid rgba(15,27,61,.08); border-radius: 18px; padding: 1.5rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.feat h3 { font-size: 1.2rem; color: var(--navy); }
.feat .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: .4rem; }
.feat .ic.c1 { background: #efeaff; color: #7b61ff; } .feat .ic.c2 { background: #e6f7f1; color: #0a9b6c; } .feat .ic.c3 { background: #e3efff; color: #2563eb; }
.feat .ic.c4 { background: #ffeef3; color: #e0397e; } .feat .ic.c5 { background: #fff3d6; color: #b7791f; } .feat .ic.c6 { background: #e2f8fe; color: #0e8ab3; }
.feat .ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat p { color: var(--ink-2); font-size: .95rem; }
.feat ul { margin: .2rem 0 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .9rem; display: flex; flex-direction: column; gap: .2rem; }

/* Screens */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.shot { display: flex; flex-direction: column; gap: .6rem; }
.shot figure { margin: 0; border: 1px solid rgba(15,27,61,.1); border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.shot:hover figure, .shot:focus-within figure { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.shot figure::before { content: ""; display: block; height: 22px; background: var(--bg-soft); border-bottom: 1px solid var(--line); background-image: radial-gradient(circle, var(--line) 4px, transparent 4.5px); background-size: 14px 14px; background-repeat: repeat-x; background-position: 10px 50%; width: 100%; }
#telas { background: var(--bg-soft); }
.zoom { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: inherit; position: relative; }
.zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zoom::after { content: "Ampliar"; position: absolute; right: .6rem; bottom: .6rem; font: 600 .72rem var(--body); color: var(--ink); background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .6rem; pointer-events: none; }
.zoom:hover::after { background: #fff; }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(15,27,61,.82); display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
.lightbox figure { margin: 0; max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.lightbox img { max-height: calc(100vh - 110px); width: auto; max-width: 100%; border-radius: 10px; background: #fff; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); object-fit: contain; }
.lightbox figcaption { color: #fff; font-size: .9rem; text-align: center; }
.lightbox .close { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: var(--ink); font: 600 1.1rem var(--body); cursor: pointer; }
.lightbox .close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.shot figcaption { font-size: .9rem; color: var(--ink-2); }
.shot figcaption b { color: var(--ink); font-weight: 600; display: block; }

/* Portal section */
.portal { }
.portal .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.portal .pic { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; padding: 2rem 1.5rem 0; }
.portal .pic::before { content: ""; position: absolute; inset: 0 0 12% 0; border-radius: 24px; background: linear-gradient(135deg, #7b61ff, #3b82f6 60%, #8fe3ff); z-index: -1; }
.portal .pic .tab, .portal .pic .ph { position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.portal .pic .tab:hover, .portal .pic .ph:hover, .portal .pic .tab:focus-within, .portal .pic .ph:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.portal .pic .tab { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.portal .pic .ph { width: 150px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.portal .pic .zoom::after { content: none; }
.checks { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.2rem; }
.checks li { list-style: none; display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-2); }
.checks { padding: 0; margin: 1.2rem 0 0; }
.checks li { align-items: center; }
.checks svg { width: 26px; height: 26px; flex: none; stroke: #0a9b6c; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; background: var(--mint); border-radius: 50%; padding: 5px; }
@media (max-width: 880px) { .portal .wrap { grid-template-columns: 1fr; } .portal .pic .ph { width: 120px; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; counter-reset: s; }
.step { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .45rem; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.step::before { counter-increment: s; content: counter(s); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 1rem var(--display); color: #fff; background: linear-gradient(135deg, #7b61ff, #3b82f6); margin-bottom: .5rem; }
.step h3 { color: var(--navy); font-size: 1.15rem; }
#como { background: linear-gradient(180deg, var(--bg), var(--lavender)); }
.step p { color: var(--ink-2); font-size: .93rem; }

/* Trust */
.trust { background: var(--navy); color: #fff; }
.trust h2 { color: #fff; }
.trust .eyebrow { background: rgba(255,255,255,.12); color: #c9d6ff; }
.trust .eyebrow::before { background: #8fe3ff; }
.trust .grid3 .feat { gap: .35rem; background: var(--navy-2); border-color: rgba(255,255,255,.12); box-shadow: none; }
.trust .grid3 .feat:hover { box-shadow: 0 30px 60px -25px rgba(143,227,255,.5); border-color: rgba(143,227,255,.35); }
.trust .grid3 .feat h3 { color: #fff; }
.trust .grid3 .feat p { color: #c9d6ff; }

/* Contact band */
.band { background: linear-gradient(120deg, #7b61ff, #3b82f6 60%, #5fd0ff); color: #fff; border-radius: 22px; padding: clamp(1.8rem, 4vw, 3rem); display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; }
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.88); }
.band form { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); border-radius: 16px; padding: 1.1rem; display: flex; flex-direction: column; gap: .6rem; backdrop-filter: blur(6px); }
.band label { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.92); display: flex; flex-direction: column; gap: .25rem; }
.band input, .band select { font: 400 .92rem var(--body); padding: .6rem .7rem; border-radius: 9px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.95); color: #0f1b3d; }
.band .btn-primary { background: #0f1b3d; color: #fff; margin-top: .3rem; box-shadow: none; }
.band .btn-primary:hover { background: #16244f; }
.band .ok { background: rgba(255,255,255,.95); color: #0a7a5a; border-radius: 10px; padding: .7rem .8rem; font-size: .9rem; font-weight: 600; }
.band .err { background: rgba(255,255,255,.95); color: #b42323; border-radius: 10px; padding: .7rem .8rem; font-size: .9rem; font-weight: 600; }
.band .alt { font-size: .85rem; color: rgba(255,255,255,.85); }
.band .alt code { background: rgba(255,255,255,.18); padding: .1rem .4rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 820px) { .band { grid-template-columns: 1fr; } }

/* Footer */
footer { background: var(--bg-soft); border-top: 1px solid var(--line-2); padding-block: 2.5rem 2.5rem; font-size: .88rem; color: var(--ink-2); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: flex-start; }
footer .col { display: flex; flex-direction: column; gap: .35rem; }
footer .col b { color: var(--ink); font-weight: 600; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .legal { width: 100%; color: var(--ink-3); font-size: .78rem; border-top: 1px solid var(--line-2); padding-top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }