/* ============================================================
   NOVANTU® — OBRA v2 "Linóleo". Shared tokens, base and components.
   Bone paper · graphite ink · plano red · indigo · block-print art.
   The illustrations come from the inline SVG sprite (brand/sprite.inline.html)
   and read the colour channels --c1 --c2 --ck --cp --cl declared below, so a
   workspace skin only has to override these variables (see brand/skins.json).
   Copyright © 2026 NOVANTU. All rights reserved. Proprietary.
   ============================================================ */
:root{
  /* paper & ink */
  --bone:#faf8f2; --bone2:#f2ede1; --bone3:#ede8dc; --paper:#f3ebdb;
  --ink:#181613; --ink2:#3a352d; --ink3:#6a6458;
  --line:#d8cfba; --line2:#c7bda4;
  /* plano red + indigo */
  --plano:#c44a2c; --plano-dim:#e0a594; --plano-bg:#f7e8e2; --plano-ink:#a83a20; --plano-hot:#e2552f;
  --indigo:#1d2a4b; --indigo2:#2b3a63; --indigo3:#0f1830;
  --amber:#c8780f; --green:#3d6e4a;
  /* shape & type */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  /* illustration channels (what the sprite reads) */
  --c1:var(--plano); --c2:var(--indigo); --ck:var(--ink); --cp:var(--paper); --cl:var(--paper);
  --grain:.5;
  /* what a workspace skin may also change (see brand/skins.json) */
  --on-accent:#fff; --band:var(--indigo); --band-fg:var(--bone);
  --glass1:rgba(255,255,255,.8); --glass2:rgba(250,246,236,.6); --glass-line:rgba(255,255,255,.72);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
::selection{background:var(--plano);color:#fff}
:focus-visible{outline:2px solid var(--plano);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-64px;z-index:400;background:var(--ink);color:var(--bone);padding:10px 14px;border-radius:8px;font:500 13px var(--mono)}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,40px);position:relative}

/* paper grain — a fixed, very light print texture over everything */
body::after{content:"";position:fixed;inset:0;z-index:250;pointer-events:none;opacity:calc(var(--grain) * .13);
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}
@media(max-width:700px){body::after{mix-blend-mode:normal;opacity:calc(var(--grain) * .05)}}

/* ───────── nav ───────── */
.nav{position:sticky;top:0;z-index:100;background:color-mix(in oklab,var(--bone) 80%,transparent);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.nav.scrolled{border-color:var(--line);box-shadow:0 10px 30px -24px rgba(24,22,19,.55)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:10px}
.brand-seal{width:30px;height:30px;flex:none}
.wm{font:800 22px/1 var(--sans);letter-spacing:-1px}
.wm b{color:var(--ink);font-weight:800}
.wm i{color:var(--plano);font-style:normal}
.wm sup{font:500 10px var(--mono);letter-spacing:0;color:var(--plano);margin-left:1px;position:relative;top:-6px}
.nav-links{display:flex;align-items:center;gap:26px;font:500 12px var(--mono);letter-spacing:.04em;color:var(--ink2)}
.nav-links a:not(.btn){position:relative;padding:6px 0;transition:color .15s}
.nav-links a:not(.btn):hover{color:var(--plano)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--plano);transition:right .22s cubic-bezier(.2,0,0,1)}
.nav-links a:not(.btn):hover::after{right:0}
@media(max-width:860px){.nav-links{gap:14px}.nav-links a:not(.btn):not(.keep){display:none}}

/* ───────── buttons ───────── */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--sans);padding:15px 24px;border-radius:13px;transition:transform .15s,box-shadow .2s,background .2s,color .2s;white-space:nowrap}
.btn .arr{display:inline-block;transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--plano);color:var(--on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 color-mix(in oklab,var(--plano) 66%,#000),0 14px 28px -14px color-mix(in oklab,var(--plano) 70%,transparent)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 5px 0 color-mix(in oklab,var(--plano) 66%,#000),0 20px 34px -14px color-mix(in oklab,var(--plano) 75%,transparent)}
.btn-primary:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 color-mix(in oklab,var(--plano) 66%,#000)}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:var(--plano)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bone)}
.btn-light{background:var(--bone);color:var(--ink)}
.btn-light:hover{background:#fff;transform:translateY(-2px)}
.btn-line-light{border:1.5px solid rgba(250,248,242,.55);color:var(--bone)}
.btn-line-light:hover{background:var(--bone);color:var(--indigo)}
.btn-sm{padding:11px 18px;font-size:13.5px;border-radius:11px}

/* ───────── tags ───────── */
.tag{display:inline-flex;align-items:center;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--plano-dim);background:var(--plano-bg);color:var(--plano-ink);white-space:nowrap;flex:none}
.tag.all{border-color:var(--line2);background:var(--bone);color:var(--ink2)}

/* ───────── glass (milk-glass panels over the printed scene) ───────── */
.glass{background:linear-gradient(150deg,var(--glass1),var(--glass2));backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 30px 60px -28px rgba(24,22,19,.5),0 8px 18px -10px rgba(24,22,19,.22)}
.glass.dk{background:linear-gradient(150deg,rgba(43,58,99,.78),rgba(29,42,75,.64));border-color:rgba(255,255,255,.16);color:var(--bone);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 30px 60px -28px rgba(0,0,0,.6)}

/* ───────── headings ───────── */
.kicker{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--plano-ink);display:flex;align-items:center;gap:8px;margin-bottom:18px}
.kicker::before{content:"[";color:var(--line2)}
.kicker::after{content:"]";color:var(--line2)}
.h2{font:500 clamp(34px,4.7vw,62px)/1.02 var(--display);letter-spacing:-.025em;font-variation-settings:"opsz" 120;text-wrap:balance;max-width:20ch}
.h2 em{font-style:italic;font-weight:400;color:var(--plano)}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink2);max-width:58ch;margin-top:20px;text-wrap:pretty}
.sec{padding:clamp(72px,9vw,124px) 0;position:relative}

/* ───────── ornament ───────── */
.cornice{position:relative;height:64px;background:var(--band);overflow:hidden;--c1:var(--plano-hot);--cl:#efe6d2}
.cornice svg{position:absolute;inset:0;width:100%;height:100%}

/* ============================================================
   Shared components (moved out of home.css so every page uses them)
   ============================================================ */

/* ───── lantern (hangs from the cornice, swings once) ───── */
.lantern{position:absolute;z-index:3;top:0;right:clamp(8px,2.2vw,44px);width:clamp(78px,9.8vw,146px);transform-origin:50% 0}
.lantern.swing,.lantern:hover{animation:sway 4.6s ease-in-out 1}
.lantern::before{content:"";position:absolute;left:50%;top:46%;width:240%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,206,140,.6),rgba(255,206,140,0) 62%);z-index:-1;pointer-events:none}
@keyframes sway{0%,100%{transform:rotate(0)}18%{transform:rotate(2.2deg)}42%{transform:rotate(-1.9deg)}64%{transform:rotate(1.3deg)}82%{transform:rotate(-.6deg)}}

/* ───── segmented control (tabs and toggles) ───── */
.seg{display:inline-flex;padding:5px;gap:4px;border:1px solid var(--line2);border-radius:999px;background:var(--bone2);margin-top:30px}
.seg button{padding:11px 22px;border-radius:999px;font:500 14px/1 var(--sans);color:var(--ink2);transition:background .2s,color .2s}
.seg button[aria-selected="true"],.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bone)}

/* ───── text link ───── */
.link{display:inline-block;margin-top:32px;font:500 12.5px/1.6 var(--mono);letter-spacing:.03em;color:var(--plano-ink);transition:transform .2s}
.link:hover{transform:translateX(5px)}
.link b{font-weight:600;color:var(--ink)}

/* ───── bento tiles ───── */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:52px}
.tile{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--bone2);border:1px solid var(--line);padding:26px 28px 26px;overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.tile:hover{transform:translateY(-4px);box-shadow:0 26px 44px -26px rgba(24,22,19,.38);border-color:var(--line2)}
.t4{grid-column:span 4}.t2{grid-column:span 2}.t6{grid-column:span 6}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tile-k{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.tile h3{font:500 clamp(24px,2.3vw,31px)/1.08 var(--display);letter-spacing:-.02em;margin:14px 0 10px;font-variation-settings:"opsz" 72;text-wrap:balance}
.tile p{color:var(--ink2);font-size:15px;max-width:42ch;text-wrap:pretty}
.tile .fine{font:400 11.5px/1.7 var(--mono);color:var(--ink3);margin-top:12px;max-width:46ch}

/* ───── numbered steps ───── */
.steps{list-style:none;display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;position:relative;padding-bottom:32px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:25px;top:58px;bottom:6px;width:2px;background:repeating-linear-gradient(180deg,var(--line2) 0 6px,transparent 6px 12px)}
.step:last-child::before{display:none}
.num{width:52px;height:52px;position:relative;display:grid;place-items:center;font:600 22px/1 var(--display);color:var(--bone);--c1:var(--plano)}
.num svg{position:absolute;inset:0;width:100%;height:100%}
.num b{position:relative;font-weight:600}
.step h3{font:600 20px/1.25 var(--sans);letter-spacing:-.01em;margin:4px 0 6px}
.step p{color:var(--ink2);font-size:15.5px;max-width:42ch;text-wrap:pretty}

/* ───── dark band + wave edge ───── */
.band{background:var(--indigo);color:var(--bone);position:relative;--c1:var(--plano-hot);--cl:#efe6d2;overflow:hidden}
.band .kicker{color:#f0a48d}.band .kicker::before,.band .kicker::after{color:#4b5a86}
.band .h2{color:var(--bone)}.band .h2 em{color:#f0a48d}
.band .lede{color:rgba(250,248,242,.78)}
.band .tag{border-color:rgba(240,164,141,.45);background:rgba(226,85,47,.18);color:#f6b9a6}
.band .tag.all{border-color:rgba(250,248,242,.22);background:rgba(250,248,242,.06);color:#d9d3c3}
.band-waves{position:absolute;left:0;right:0;bottom:-1px;height:clamp(18px,2.4vw,34px);--sg:var(--bone);--c1:var(--plano)}
.band-waves svg{width:100%;height:100%}
.sec-b{padding-bottom:calc(clamp(72px,9vw,124px) + 20px)}

/* ───── call-to-action row + closing band ───── */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.final{position:relative;background:var(--indigo);color:var(--bone);overflow:hidden;--c1:var(--plano-hot);--cl:#efe6d2;text-align:center;isolation:isolate}
.final-in{padding:clamp(84px,10vw,140px) 0 clamp(100px,12vw,170px);position:relative;z-index:2}
.final h2{font:500 clamp(44px,6.8vw,100px)/.95 var(--display);letter-spacing:-.04em;font-variation-settings:"opsz" 144;color:var(--bone);text-wrap:balance}
.final h2 em{font-weight:400;color:#f0a48d}
.final p{max-width:52ch;margin:24px auto 0;color:rgba(250,248,242,.82);font-size:clamp(16px,1.5vw,19px);text-wrap:pretty}
.final .hero-cta{justify-content:center;margin-top:36px}
.final .sun{z-index:0;position:absolute;left:50%;right:auto;bottom:-58%;width:min(130vw,1380px);transform:translateX(-50%);opacity:.2}
.final .lantern{left:clamp(12px,7vw,130px);right:auto;width:clamp(64px,8vw,118px);z-index:3}
.final .lantern::before{background:radial-gradient(circle,rgba(255,196,120,.38),rgba(255,196,120,0) 62%)}
.final .lantern svg{--c2:#e9e2d0;--ck:#f3ebdb;--cp:var(--indigo)}
.final::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(46% 72% at 50% 6%,rgba(226,85,47,.30),transparent 72%)}
.final .band-waves{z-index:2}

/* ───── footer ───── */
.foot{background:var(--bone);border-top:1px solid var(--line);padding:40px 0 48px}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font:400 12px/1.6 var(--mono);color:var(--ink3)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a:hover{color:var(--plano)}
.foot-fine{width:100%;font:400 11.5px/1.7 var(--mono);color:var(--ink3);border-top:1px dashed var(--line);padding-top:18px;margin-top:6px}

/* shared responsive + no-JS rules */
@media(max-width:1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t4,.t6{grid-column:span 2}.t2{grid-column:span 1}
}
@media(max-width:700px){
  .lantern{display:none}
  .final .lantern{display:block;width:62px;left:12px}
  .bento{grid-template-columns:1fr}
  .t4,.t6,.t2{grid-column:span 1}
  .tile{padding:22px 22px 22px}
  .seg button{padding:10px 16px}
  .nav-links .keep.signin{display:none}
}
@media(prefers-reduced-motion:reduce){
  .lantern.swing,.lantern:hover{animation:none}
}
/* no JS: the segmented controls cannot work, so they stay out of the way */
html:not(.js) .seg{display:none}

/* ───────── reveal (visible without JS) ───────── */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
}

/* current page in the nav */
.nav-links a[aria-current="page"]{color:var(--plano)}
.nav-links a[aria-current="page"]::after{right:0}