* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
a { color:inherit; }
p,h1,h2,h3 { margin:0; }
button { font:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.wrap { width:min(1140px,calc(100% - 72px)); margin-inline:auto; }
.top { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:82px; border-bottom:1px solid var(--border); }
.top nav,.actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.top nav { gap:22px; }
.brand { display:inline-flex; align-items:center; }
.brand img { display:block; max-width:100%; height:auto; }
.quiet,.footer a:not(.brand) { font-size:.85rem; font-weight:700; text-underline-offset:5px; text-decoration:none; }
.quiet:hover,.footer a:hover { text-decoration:underline; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:44px; gap:var(--space-2); padding:var(--space-2) var(--space-4); border:1px solid transparent; border-radius:var(--radius-md); font-size:13px; line-height:18px; font-weight:500; text-decoration:none; transition:background .18s,transform .18s; }
.button:hover { transform:translateY(-2px); }
.primary { background:var(--brand); color:var(--on-brand); }
.primary:hover { background:var(--brand-hover); }
.outline { border-color:var(--border-strong); }
.button svg,.mock-line svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.outline:hover { background:var(--surface-alt); }
.skip { position:absolute; top:8px; left:8px; z-index:3; padding:10px; background:var(--surface); transform:translateY(-150%); }
.skip:focus { transform:none; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(34px,6vw,86px); align-items:center; padding-block:clamp(52px,8vw,100px); }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--brand-deep); font-size:.73rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.signal { flex:none; width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
h1 { font-size:clamp(3rem,6.7vw,6.05rem); letter-spacing:-.078em; line-height:.99; margin-block:20px 22px; }
h1 em { color:var(--brand-deep); font-style:normal; font-weight:700; letter-spacing:-.07em; }
.lead { max-width:44ch; color:var(--ink-muted); font-size:clamp(.99rem,1.5vw,1.14rem); }
.actions { margin-top:25px; }
.note { color:var(--ink-muted); margin-top:22px; font-size:.79rem; }
.note span { color:var(--brand-deep); padding-right:5px; }
.showcase { position:relative; isolation:isolate; background:var(--surface-alt); border:1px solid var(--border); border-radius:24px; padding:24px; box-shadow:var(--shadow-pop); overflow:hidden; }
.showcase::before { content:''; position:absolute; z-index:-1; width:300px; aspect-ratio:1; right:-100px; top:-130px; border-radius:50%; border:1px solid var(--border); box-shadow:0 0 0 28px var(--surface),0 0 0 61px var(--border); }
.showcase-label,.showcase-foot { display:flex; gap:9px; align-items:center; color:var(--navy-700); font-size:.72rem; font-weight:700; letter-spacing:.06em; }
.showcase-label > :last-child { margin-left:auto; font-variant-numeric:tabular-nums; }
.showcase-foot { margin-top:15px; letter-spacing:.015em; }
.showcase-foot span { width:16px; height:2px; background:var(--brand-deep); }
.mock { background:var(--surface); border:1px solid var(--border); border-radius:14px; margin-top:14px; overflow:hidden; box-shadow:var(--shadow-card); }
.mock-head,.mock-school { display:flex; align-items:center; gap:9px; }
.mock-head { justify-content:space-between; gap:7px; padding:14px 16px; border-bottom:1px solid var(--border); }
.mock-school strong,.mock-school small { display:block; }
.mock-school strong { font-size:.84rem; line-height:1.25; }
small,.mock-school small { font-size:.72rem; color:var(--ink-muted); }
.badge { font-size:.68rem; font-weight:700; padding:4px 8px; border-radius:20px; background:var(--brand-soft); white-space:nowrap; }
.switch { display:flex; gap:4px; padding:4px; margin:14px 16px 0; background:var(--surface-alt); border-radius:8px; }
.switch button { flex:1; padding:7px 5px; border:0; border-radius:6px; color:var(--ink-muted); background:transparent; font-size:.77rem; font-weight:700; }
.switch button[aria-pressed=true] { color:var(--on-brand); background:var(--brand); }
.mock-body { padding:14px 16px 16px; }
.mock-kicker { color:var(--brand-deep); font-weight:700; letter-spacing:.1em; font-size:.64rem; }
.mock-body h2 { font-size:1.25rem; letter-spacing:-.03em; margin:2px 0 12px; }
.mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mini-grid div { background:var(--surface-alt); padding:9px; border-radius:7px; }
.mini-grid strong { display:block; font-size:1.22rem; white-space:nowrap; line-height:1.35; }
.mock-line { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; margin-top:10px; padding:8px; border:1px solid var(--border); border-radius:8px; font-size:.78rem; }
.mock-line small { display:block; }
.mock-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:6px; background:var(--brand-soft); color:var(--brand-deep); font-weight:700; }
.pathways { border-top:1px solid var(--border); padding-block:40px 48px; scroll-margin-top:12px; }
.section-head h2,.identity h2,.closing h2 { font-size:clamp(1.9rem,4vw,3.15rem); letter-spacing:-.057em; line-height:1.11; margin:8px 0 10px; }
.section-head > p:last-child,.identity > div > p:last-of-type { color:var(--ink-muted); }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px; }
.steps article { padding:17px; border:1px solid var(--border); background:var(--surface); border-radius:10px; }
.steps span { color:var(--brand-deep); letter-spacing:.09em; font-size:.67rem; font-weight:700; }
.steps h3 { font-size:1.12rem; margin:6px 0; }
.steps p { color:var(--ink-muted); font-size:.88rem; }
.identity { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(22px,7vw,76px); padding:clamp(21px,4vw,45px); background:var(--surface-alt); border:1px solid var(--border); border-radius:20px; }
.swatches { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }
.swatches button { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:20px; padding:5px 9px; background:var(--surface); color:var(--ink); font-size:.76rem; }
.swatches button[aria-pressed=true] { border-color:var(--ink); }
.swatches span { width:12px; height:12px; border-radius:50%; background:var(--swatch); }
.paper { border:1px solid var(--border); border-radius:11px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-card); }
.paper-head { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:4px solid var(--accent); color:var(--document-white); background:var(--swatch); transition:background .23s,border-color .23s; }
.paper-head small { display:block; color:inherit; }
.school-glyph { display:grid; place-items:center; width:36px; aspect-ratio:1; border:1px solid var(--document-white); border-radius:6px; font:700 1.2rem var(--font-sans); }
.paper-body { padding:14px; }
.paper-body h3 { font-size:1.02rem; margin:3px 0 10px; }
.paper-total { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px; background:var(--wash); padding:8px; border-radius:5px; font-size:.78rem; margin-bottom:8px; transition:background .23s; }
.closing,.footer { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding-block:27px; border-bottom:1px solid var(--border); }
.closing { justify-content:space-between; margin-top:12px; }
.footer { color:var(--ink-muted); font-size:.8rem; border:0; }
.footer > span { margin-right:auto; }
@media (prefers-reduced-motion:no-preference) {
  .intro { animation:arrive .55s ease-out both; }
  .showcase { animation:arrive .66s .10s ease-out both; }
  @keyframes arrive { from { opacity:0; transform:translateY(13px); } to { opacity:1; transform:translateY(0); } }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }
@media(max-width:850px) { .wrap { width:min(1140px,calc(100% - 44px)); } .hero { gap:24px; } .showcase { padding:15px; } }
@media(max-width:680px) {
  .wrap { width:calc(100% - 32px); }
  .top { min-height:66px; }
  .top .desktop { display:none; }
  .top .brand img { width:118px; }
  .top { gap:var(--space-2); }
  .hero,.identity { grid-template-columns:minmax(0,1fr); }
  .hero { padding-block:40px; }
  .steps { grid-template-columns:1fr; }
  .footer { align-items:start; gap:12px; }
  .footer > span { margin-right:0; }
}

.masthead,.site-footer { background:var(--navy); color:var(--on-navy); }
.top { border-bottom:0; }
.top nav .outline { color:var(--on-navy); border-color:var(--on-navy-muted); }
.top nav .outline:hover { background:var(--navy-700); }
.showcase-label,.showcase-foot { color:var(--ink-muted); }
.paper { background:var(--document-white); color:var(--document-ink); }
.paper .mock-kicker { color:var(--document-highlight); }
.paper-body small { color:var(--document-muted); }
.footer { color:var(--on-navy-muted); }
.footer a { color:var(--on-navy); }
@media(max-width:680px) {
  .top nav { gap:var(--space-2); }
  .top .outline { padding-inline:var(--space-2); min-height:36px; }
}

/* Installer ETANGELO */
.install .steps article { display:flex; flex-direction:column; gap:6px; }
.install .steps .button { margin-top:auto; align-self:flex-start; }
.install .steps .button svg { width:16px; height:16px; }
.install-note { color:var(--ink-muted); font-size:.75rem; min-height:1em; }
.button.is-waiting { opacity:.55; pointer-events:none; }
.install-browser { margin-top:14px; }