/* Imagin3 · agentic operations — shared design system.
   Same language as the Cox surface: petrol ground, aurora, glass panels,
   mint→coral gradient, mono eyebrows. No build step, no CDN. */

/* Colour rule for this system: --mint / --mint-2 / --coral are SURFACE colours
   (gradients, bars, borders, tints).  Text never uses them directly, because
   both are light colours and a light colour cannot carry text on a light
   ground -- measured, #65C298 on the light panel is 1.74:1 where 4.5:1 is
   required.  Text uses --mint-ink / --coral-ink, which equal the surface
   colours in dark and are darkened in light.  Every value below was solved
   against the darkest ground it was actually measured over (the light panel
   sitting on the strongest part of the aurora, L=0.80), not against the
   nominal --bg, which the aurora never leaves intact. */
:root{
  --petrol:#0A262E; --petrol-2:#0E2D36; --petrol-3:#143641;
  --ink:#F3F8F8; --muted:#A8C2C9; --muted-2:#92A6AE;
  --mint:#65C298; --mint-2:#4FC79E; --coral:#F4845F; --amber:#F6C97A;
  --red:#E8918C;
  --line:#173039; --line-2:#22434F;
  --bg:var(--petrol); --panel:rgba(14,45,54,.55); --panel-solid:#0E2D36;
  --txt:var(--ink); --sub:var(--muted); --sub-2:var(--muted-2);
  --brd:var(--line); --brd-2:var(--line-2); --glow:rgba(101,194,152,.5);
  --grad:linear-gradient(100deg,var(--mint-2),var(--coral));
  /* ink tokens: the readable half of the palette */
  --mint-ink:var(--mint); --coral-ink:var(--coral);
  --grad-ink:var(--grad);            /* the ramp when it fills TEXT, not a surface */
  --on-grad:#06232B;                 /* text that sits ON the ramp, both themes */
  --inset:rgba(0,0,0,.14);           /* recessed wells inside a panel */
  --measure:58ch;                   /* ~72 real characters in this face */
  --radius:20px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
:root[data-theme="light"]{
  --bg:#F4F7F6; --panel:rgba(255,255,255,.72); --panel-solid:#FFFFFF;
  --txt:#0C242B; --sub:#3D5860; --sub-2:#51666D;
  --brd:#DDE7E6; --brd-2:#C9D9D8; --glow:rgba(79,199,158,.34);
  --red:#A52F2A;
  --mint-ink:#366D54; --coral-ink:#964F37;
  /* the ramp filling text carries the unit suffixes too ("26s", "88%"), which
     land at 18px -- just under WCAG's 18.66px bold cutoff, so they are judged
     as body text at 4.5:1, not as large text at 3:1. Solved for 4.8:1 against
     the darkest ground a .stat was measured on (L=0.8844). */
  --grad-ink:linear-gradient(100deg,#2C775D,#A1553C);
  --inset:rgba(12,36,43,.055);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:var(--font);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55;
  transition:background .5s ease,color .4s ease}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;position:relative;z-index:2}

/* ── atmosphere ─────────────────────────────────────────── */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora{position:absolute;inset:-30%;filter:blur(70px);opacity:.55;
  background:
    radial-gradient(40% 55% at 20% 12%,rgba(79,199,158,.55),transparent 60%),
    radial-gradient(45% 55% at 82% 22%,rgba(244,132,95,.42),transparent 60%),
    radial-gradient(50% 60% at 55% 90%,rgba(101,194,152,.40),transparent 62%);
  animation:aur 18s ease-in-out infinite alternate}
:root[data-theme="light"] .aurora{opacity:.42}
@keyframes aur{
  0%{transform:translate3d(-4%,-2%,0) scale(1.05) rotate(0)}
  100%{transform:translate3d(5%,3%,0) scale(1.15) rotate(6deg)}}
.grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--brd) 1px,transparent 1px),
    linear-gradient(90deg,var(--brd) 1px,transparent 1px);
  background-size:56px 56px;opacity:.5;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0,#000 38%,transparent 80%);
  mask-image:radial-gradient(130% 100% at 50% 0,#000 38%,transparent 80%)}
.spot{position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 62%);
  transform:translate(-50%,-50%);transition:opacity .3s;opacity:0;
  mix-blend-mode:screen;filter:blur(8px);left:0;top:0}
@media (prefers-reduced-motion:reduce){
  .aurora{animation:none}
  /* Absent, not merely faster. animation-duration:.01ms left every infinite
     animation still running -- measured, .pill i kept looping `pulse` at
     1e-05s forever, which never stops asking the compositor for a frame.
     animation:none stops them outright; every animation on this site ends on
     the state it starts from, and the two that do not (.rv reveal, the
     text-generate headline) are pinned to their finished state in the fx
     reduced-motion block below, so nothing is left invisible. */
  *{transition-duration:.01ms!important;animation:none!important}}

/* ── controls ───────────────────────────────────────────── */
.personalizer{position:fixed;bottom:16px;right:16px;z-index:50;display:flex;gap:6px;
  align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:min(94vw,560px);
  padding:6px;border-radius:16px;background:var(--panel);border:1px solid var(--brd-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 34px -14px rgba(0,0,0,.5)}
.seg{display:flex;border-radius:999px;padding:2px;gap:2px}
.seg button{border:0;background:transparent;color:var(--sub);
  font:600 11px/1 var(--mono);letter-spacing:.03em;padding:7px 11px;border-radius:999px;
  cursor:pointer;text-transform:uppercase;transition:.2s;white-space:nowrap}
/* The ramp is the same in both themes, so the ink on it is too. White here
   measured 2.40:1 in light; --on-grad is 6.26:1 at the ramp's worst point. */
.seg button.on{background:var(--grad);color:var(--on-grad)}
.en{display:none}
body[data-lang="en"] .es{display:none}
body[data-lang="en"] .en{display:revert}

/* ── masthead ───────────────────────────────────────────── */
header{position:relative;z-index:2;padding:20px 0}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* The canonical mark, taken verbatim from the website (landing/public/icon.svg):
   deep-teal tile, three mint->coral bars, no dot. The site's logo.svg is a full
   lockup that already contains the words "imagin3 STUDIO" -- putting one beside
   the HTML name rendered it twice -- and it depends on Bricolage being installed.
   So: the square mark here, the name as HTML type. One wordmark, no font risk. */
.mark{width:38px;height:38px;border-radius:11px;display:block;flex:none}
.brand b{font-weight:800;letter-spacing:-.01em}
.brand>span{display:block;font:600 10px/1.3 var(--mono);letter-spacing:.15em;
  color:var(--sub-2);text-transform:uppercase;margin-top:3px}
nav.pages{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav.pages a{font:600 10.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--sub);border:1px solid var(--brd-2);border-radius:999px;padding:9px 14px;
  transition:.2s;background:var(--panel);backdrop-filter:blur(10px)}
nav.pages a:hover{color:var(--txt);border-color:var(--mint-2)}
nav.pages a[aria-current="page"]{background:var(--grad);color:var(--on-grad);border-color:transparent}

/* ── type ───────────────────────────────────────────────── */
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;
  color:var(--mint-ink);margin-bottom:18px}
h1{font-size:clamp(37px,6.2vw,72px);line-height:1.02;letter-spacing:-.028em;
  font-weight:800;margin:0 0 22px;max-width:17ch;
  /* no stranded last word on the largest type on the site ("…más la / usas.");
     .statement in the deck already balances — same rule, same reason. Browsers
     without text-wrap:balance simply keep the old ragged wrap. */
  text-wrap:balance}
h1 .hl{background:linear-gradient(120deg,rgba(101,194,152,.28),rgba(244,132,95,.28));
  padding:0 .1em;border-radius:8px;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
.lead{font-size:clamp(17px,2.1vw,21px);color:var(--sub);max-width:var(--measure);margin:0 0 30px}
.sec-t{font-size:clamp(24px,3.4vw,36px);line-height:1.1;letter-spacing:-.022em;
  font-weight:800;margin:0 0 14px}
section{padding:52px 0;position:relative;z-index:2}
.sec-lead{color:var(--sub);max-width:var(--measure);margin:0 0 28px}
/* full-width cards ran to 118-131 characters a line; inside a grid the card
   is already narrower than this, so the cap only bites where it should */
.card p{max-width:var(--measure)}

/* ── surfaces ───────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--brd);border-radius:var(--radius);
  padding:22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .25s,transform .25s,opacity .3s,box-shadow .3s}
.card:hover{border-color:var(--fx-brd);box-shadow:0 18px 44px -22px rgba(0,0,0,.5)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
/* four short cards in a .grid2 render 3+1 at desktop width (auto-fit packs three
   across 1092px), stranding the fourth — and on index that fourth card is the
   punchline. .duo pins the quad to 2×2; the deck defines the same rule locally. */
@media (min-width:821px){.grid2.duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px}
.stat{font:800 clamp(26px,3.6vw,40px)/1 var(--font);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-l{font:600 10.5px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--sub-2);margin-top:9px}
.pill{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--mono);
  letter-spacing:.06em;border-radius:999px;padding:8px 14px;text-transform:uppercase}
.pill.mint{color:var(--mint-ink);border:1px solid rgba(101,194,152,.32);
  background:rgba(101,194,152,.06)}
.pill.coral{color:var(--coral-ink);border:1px solid rgba(244,132,95,.34);
  background:rgba(244,132,95,.06)}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:pulse 2.2s infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
.big-link{display:flex;align-items:center;gap:16px;padding:20px 22px;
  background:var(--panel);border:1px solid var(--brd);border-radius:var(--radius);
  backdrop-filter:blur(14px);transition:.2s}
.big-link:hover{border-color:var(--mint-2);transform:translateY(-2px)}
.big-link .n{font:700 17px/1.25 var(--font);letter-spacing:-.01em}
.big-link .d{color:var(--sub);font-size:14px;margin-top:4px}
.big-link .go{margin-left:auto;color:var(--mint-ink);font:600 20px/1 var(--mono);flex:none}

/* ── console chrome (demo pages) ────────────────────────── */
.console{background:var(--panel);border:1px solid var(--brd);border-radius:var(--radius);
  overflow:hidden;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.cbar{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--brd);background:rgba(0,0,0,.12)}
:root[data-theme="light"] .cbar{background:rgba(0,0,0,.03)}
.cbar .t{font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--sub-2)}
.cbar .r{margin-left:auto;font:500 11px/1 var(--mono);color:var(--sub-2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mint-ink);flex:none;
  box-shadow:0 0 10px var(--glow)}
.cbody{padding:20px}
.btn{border:0;border-radius:11px;padding:11px 20px;font:700 13px/1 var(--font);
  cursor:pointer;background:var(--grad);color:var(--on-grad);transition:.2s;letter-spacing:.01em;
  position:relative;overflow:hidden;display:inline-block}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.4;cursor:default;filter:none}
/* the light-theme colour override that used to live on .btn painted white on
   the mint→coral ramp (2.25:1 measured) and outranked .btn.ghost, so it needed
   two more rules to undo itself. --on-grad is theme-independent: tangle gone. */
.btn.ghost{background:transparent;color:var(--sub);border:1px solid var(--brd-2)}
.btn.ghost:hover{color:var(--txt);border-color:var(--mint-2);filter:none}
.field{flex:1;min-width:240px;border:1px solid var(--brd-2);background:var(--inset);
  color:var(--txt);border-radius:11px;padding:11px 14px;font:inherit;font-size:14px}
.field:focus{outline:2px solid var(--mint-2);outline-offset:1px}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

footer{position:relative;z-index:2;border-top:1px solid var(--brd);margin-top:50px;
  padding:26px 0 92px;font-size:13px;color:var(--sub-2)}
footer a{color:var(--sub);text-decoration:underline;text-underline-offset:3px}

/* ── fx layer (b2) — pointer-reactive surfaces ──────────────
   One vocabulary everywhere: an inner spotlight that follows the
   pointer (card-spotlight), a soft mint border tint, a small lift,
   and — on grids — neighbours receding (card-hover-effect). The
   JS half lives in base.js; everything degrades to the static page
   with no JS and goes fully static under prefers-reduced-motion. */
:root{
  --fx-glow:rgba(101,194,152,.15);
  --fx-brd:rgba(101,194,152,.45);
  --fx-met:rgba(101,194,152,.75);
  --fx-met-2:rgba(244,132,95,.7);
}
:root[data-theme="light"]{
  --fx-glow:rgba(79,199,158,.2);
  --fx-brd:rgba(31,138,101,.5);
  --fx-met:rgba(23,122,92,.55);
  --fx-met-2:rgba(196,88,48,.55);
}

/* spotlight: painted above the surface's own background, below its
   content (negative z inside an isolated stacking context). */
.card,.big-link,.qa,.lim,.mrow,.say,.verdict,.ag,.step,.console,nav.pages a{
  position:relative;isolation:isolate}
.card::after,.big-link::after,.qa::after,.lim::after,.mrow::after,.say::after,
.verdict::after,.ag::after,.step::after,.console::after,nav.pages a::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(var(--fx-r,300px) at var(--fx-x,50%) var(--fx-y,50%),
    var(--fx-glow),transparent 62%)}
.fx-on::after{opacity:1}
nav.pages a{--fx-r:130px}
.mrow,.step,.ag{--fx-r:200px}
.console{--fx-r:540px}

/* shared micro-motion */
.qa{transition:transform .25s,border-color .25s}
.qa:hover{transform:translateY(-2px);border-color:var(--fx-brd)}
.lim{transition:border-color .25s}
.lim:hover{border-color:var(--fx-brd)}
.mrow{transition:border-color .25s}
.mrow:hover{border-color:var(--brd-2)}
.big-link .go{transition:transform .25s}
.big-link:hover .go{transform:translateX(5px)}
nav.pages a:hover{transform:translateY(-1px)}

/* neighbours recede while one card holds the pointer */
@media (hover:hover) and (pointer:fine){
  .grid2:hover>.card:not(:hover),.grid3:hover>.card:not(:hover),
  .grid4:hover>.card:not(:hover){opacity:.7}
  .fleet:hover>.ag:not(:hover){opacity:.62}
}

/* button sheen — sweeps once per hover, resets instantly on leave */
.btn::after{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:38%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-140%) skewX(-16deg);pointer-events:none}
.btn:hover::after{transform:translateX(340%) skewX(-16deg);transition:transform .6s ease}
.btn.ghost::after,.btn:disabled::after{content:none}

/* scroll reveal — tagged by JS only, so no-JS renders everything */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease var(--d,0s),transform .6s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media print{.rv{opacity:1!important;transform:none!important}}

/* showpiece · text-generate (index headline, once) */
i.tgw{font-style:normal;display:inline-block}
h1[data-tg].tg-run .tgw{opacity:0;filter:blur(7px);transform:translateY(10px);
  animation:tgw .55s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(.12s + var(--ti,0)*60ms)}
@keyframes tgw{to{opacity:1;filter:blur(0);transform:translateY(0)}}
h1[data-tg].tg-done .tgw{animation:none;opacity:1;filter:none;transform:none}

/* showpiece · meteors (hero only, sparse and slow, compositor-only) */
[data-meteors]{position:relative;isolation:isolate}
.meteors{position:absolute;inset:-24px 0 0;z-index:-1;overflow:hidden;pointer-events:none}
.meteors i{position:absolute;width:150px;height:1px;border-radius:999px;
  color:var(--fx-met);background:linear-gradient(90deg,currentColor,transparent);
  opacity:0;transform:rotate(-28deg) translateX(60px);
  animation:met var(--md,9s) linear infinite;animation-delay:var(--mdel,0s)}
.meteors i:nth-child(3n){color:var(--fx-met-2)}
.meteors i::before{content:"";position:absolute;left:-1px;top:-1.5px;width:4px;height:4px;
  border-radius:50%;background:currentColor;box-shadow:0 0 9px 1px currentColor}
@keyframes met{
  0%{transform:rotate(-28deg) translateX(60px);opacity:0}
  6%{opacity:.85}
  60%{opacity:0}
  100%{transform:rotate(-28deg) translateX(-560px);opacity:0}}
.meteors.paused i{animation-play-state:paused}

/* showpiece · tracing beam (long pages, wide screens only) */
.tbeam{display:none;position:fixed;z-index:6;top:96px;bottom:64px;width:2px;
  left:max(18px,calc((100vw - 1140px)/2 - 44px));
  background:var(--brd-2);border-radius:2px;pointer-events:none}
@media (min-width:1280px){.tbeam{display:block}}
.tbeam .tfill{position:absolute;inset:0;background:var(--grad);border-radius:2px;
  transform-origin:top;transform:scaleY(var(--p,0))}
.tbeam .tdw{position:absolute;inset:0;transform:translateY(calc(var(--p,0)*100%))}
.tbeam .tdot{position:absolute;top:-4px;left:50%;width:10px;height:10px;margin-left:-4px;
  border-radius:50%;background:var(--mint-2);box-shadow:0 0 14px 3px var(--glow)}

/* reduced motion: fx is static or absent, never merely slower */
@media (prefers-reduced-motion:reduce){
  .meteors,.tbeam{display:none!important}
  .rv{opacity:1!important;transform:none!important}
  .btn::after{content:none!important}
  .fx-on::after{opacity:0!important}
  .qa:hover,nav.pages a:hover{transform:none}
  h1[data-tg] .tgw{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
}