/* LatinAmericanBank — base styles.
   Colombian palette layered over a pure-black canvas. The site itself is
   always black; yellow, blue, and red appear only in section slabs, accents,
   and the dot-sphere animation. Mirrors the structural choices in
   knexcoin-site (4-col grid, hairline rules, italic Times brand mark, slab
   dividers, oversized display type), then pushes harder on motion. */

:root{
  /* Canvas */
  --bg:#000;
  --ink:#fafafa;
  --ink-soft:#9aa0a8;
  --rule:rgba(255,255,255,0.08);
  --rule-strong:#2a2d33;
  --muted:#5a5e66;

  /* Colombian flag — bright/saturated; blue is pure electric (matches knexcoin.com) */
  --co-yellow:#FFD60A;
  --co-yellow-soft:#FFE066;
  --co-blue:#0000FF;
  --co-blue-soft:#7d7dff;
  --co-red:#FF0000;
  --co-red-soft:#FF5252;

  /* Sizing */
  --col:283.25px;
  --pad-x:24px;
  --row:80px;
  --hairline:1px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);color:var(--ink);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:500;
  -webkit-font-smoothing:antialiased;letter-spacing:-0.01em;
  /* Lock horizontal scroll/swipe entirely. pan-y allows vertical scroll;
     pinch-zoom keeps accessibility zoom working; horizontal swipe gestures
     are dropped so the page can't slide left/right by accident on phones. */
  overflow-x:hidden;
  overscroll-behavior-x:none;
  touch-action:pan-y pinch-zoom;
  width:100%;
  max-width:100vw;
}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.page{position:relative;width:100%;max-width:1133px;margin:0 auto;border-left:var(--hairline) solid var(--rule);border-right:var(--hairline) solid var(--rule);background:var(--bg);min-height:100vh}

/* 4-column grid (same as knex) */
.grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.grid::before,.grid::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--rule);pointer-events:none}
.grid::before{left:25%}
.grid::after{left:75%}
.cell{padding:24px;min-height:80px;position:relative}

/* Top status bar with a Colombian-flag mini-stripe */
.top-bar{background:#0a0a0a;border-bottom:var(--hairline) solid var(--rule);font-size:13px;color:var(--ink-soft);position:relative;z-index:61}
.top-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--co-yellow) 0% 50%,var(--co-blue) 50% 75%,var(--co-red) 75% 100%)}
.top-bar__inner{max-width:1133px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:12px 24px;flex-wrap:wrap}
.top-bar .status{display:flex;align-items:center;gap:8px;color:var(--co-yellow);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11px;margin-right:auto}
.top-bar .status .dot{width:8px;height:8px;border-radius:999px;background:var(--co-yellow);animation:tbpulse 1.6s ease-in-out infinite;box-shadow:0 0 12px rgba(255,205,0,0.55)}
@keyframes tbpulse{0%,100%{opacity:1}50%{opacity:.35}}
.top-bar a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:500;font-size:13px;transition:color .2s}
.top-bar a:hover{color:var(--co-yellow)}
.top-bar a .arrow{font-size:11px;color:var(--ink-soft);transition:color .2s,transform .2s}
.top-bar a:hover .arrow{color:var(--co-yellow);transform:translate(2px,-2px)}
.top-bar a .ne-arrow{display:inline-block;vertical-align:-1px;color:#fff;transition:color .2s,transform .2s;margin-left:2px}
.top-bar a:hover .ne-arrow{color:var(--co-yellow);transform:translate(2px,-2px)}
.btc, .b{font-family:"Times New Roman",serif;font-style:italic;font-weight:700;color:inherit}
/* Add ~1/3 of a normal word-space between the ₿ glyph and "NEX" in the
   two places where they sit flush against each other: the post-quantum
   H2 ("KnexCoin ₿NEX") and the KnexCoin CTA block. */
.cta-block .btc{margin-right:0.08em}

/* Language switcher — tiny pill nav in the top bar */
.lang-switch{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,0.04);border:1px solid var(--rule);border-radius:999px;padding:2px}
.lang-switch .lang-link{display:inline-block;padding:5px 10px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border-radius:999px;transition:color .2s,background .2s}
.lang-switch .lang-link:hover{color:var(--ink)}
.lang-switch .lang-link.active{background:var(--co-yellow);color:#000}

/* Unobtrusive language suggestion banner */
.lang-banner{position:sticky;top:0;z-index:65;background:#0a0a0a;border-bottom:1px solid var(--co-yellow);padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:13px;color:var(--ink);flex-wrap:wrap}
.lang-banner[hidden]{display:none}
.lang-banner__copy{color:var(--ink-soft)}
.lang-banner__btn{display:inline-flex;align-items:center;gap:6px;color:var(--co-yellow);font-weight:700;letter-spacing:.04em;border-bottom:1px solid rgba(255,214,10,.4);padding-bottom:1px}
.lang-banner__btn:hover{border-bottom-color:var(--co-yellow)}
.lang-banner__close{color:var(--ink-soft);background:none;border:0;font-size:18px;line-height:1;padding:4px 8px;cursor:pointer}
.lang-banner__close:hover{color:var(--ink)}

/* Sticky nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(0,0,0,0.72);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px);border-bottom:var(--hairline) solid var(--rule)}
.nav .grid{align-items:center}
.nav .cell{padding:18px 24px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-0.02em}
/* Brand mark — heart trinity SVG with transparent background, swapped
   in for the old italic-Times Ł character.  Sized via background-image
   so it scales cleanly on retina and lets the nav glyph render as a
   small 28×28 mark next to the wordmark. */
.brand-mark{display:inline-block;width:70px;height:70px;background-image:url(sick-aura-mark.svg?v=20260702a);background-size:contain;background-repeat:no-repeat;background-position:center;vertical-align:middle;flex-shrink:0;color:var(--co-yellow)}
.brand-mark::before{content:""}
/* The middle dot between brand-name and role — heavier and slightly
   larger than the surrounding ".b-bank" text, with extra breathing
   room after it before the role label (Issuer / Emisor / Emissor). */
.b-bank .b-dot{font-weight:800;font-size:16px;color:var(--co-yellow);margin-right:4px;vertical-align:1px}
.brand .b-bank{display:block;color:var(--ink-soft);font-weight:500;font-size:13px;letter-spacing:0;margin-top:2px}
.nav-link{display:block;color:var(--ink-soft);font-size:14px;font-weight:500;padding:4px 0;transition:color .2s;cursor:pointer;position:relative}
.nav-link:hover{color:var(--ink)}
.nav-link.active{color:var(--co-yellow);font-weight:700}

/* Reveal-on-scroll (vanilla IntersectionObserver hook) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* Sliding rows — from right (default) or from left */
.slide-row{opacity:0;transform:translateX(60%);transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .9s ease;will-change:transform,opacity}
.slide-row.from-left{transform:translateX(-60%)}
.slide-row.from-bottom{transform:translateY(80px)}
.slide-row.is-in{transform:none;opacity:1}

/* Door reveal — two colored panes that SWING outward on enter (real
   doors, hinged on the outer edges; the Colombian blue stripe at the
   meeting edge stays put so the seam reads as a vault). */
.door{position:relative;overflow:hidden;perspective:1800px}
.door-pane{position:absolute;top:0;height:100%;width:50%;z-index:5;transition:transform 1.5s cubic-bezier(.86,0,.07,1);backface-visibility:hidden}
.door-pane.left{left:0;background:var(--co-yellow);transform-origin:left center;box-shadow:inset -4px 0 0 var(--co-blue),inset 0 0 0 1px rgba(0,0,0,0.08)}
.door-pane.right{right:0;background:var(--co-red);transform-origin:right center;box-shadow:inset 4px 0 0 var(--co-blue),inset 0 0 0 1px rgba(0,0,0,0.08)}
.door.is-in .door-pane.left{transform:rotateY(-105deg)}
.door.is-in .door-pane.right{transform:rotateY(105deg)}
/* Anchored at 32% (instead of dead-center 50%) so the ₿ / Ł glyphs
   appear in the upper third of each pane — visible the moment the
   door section enters the viewport, before the panes swing open. */
.door-pane-label{position:absolute;top:20%;font-family:"Times New Roman",serif;font-style:italic;font-weight:700;color:#0a0700;font-size:140px;line-height:1;letter-spacing:-.04em;transform:translateY(-50%)}
.door-pane.left .door-pane-label{right:36px;color:#0a0700;text-shadow:0 6px 0 rgba(0,0,0,0.05)}
.door-pane.right .door-pane-label{left:36px;color:#fafafa;text-shadow:0 6px 0 rgba(0,0,0,0.18)}

/* Typewriter caret */
.tw{display:inline}
.tw .caret{display:inline-block;width:.55ch;height:1em;background:var(--co-yellow);margin-left:.06em;animation:caret 1s steps(1) infinite;vertical-align:-0.12em}
@keyframes caret{50%{opacity:0}}
.tw.done .caret{display:none}

/* Footer */
.footer{padding:60px 0 0;border-top:var(--hairline) solid var(--rule);position:relative}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--co-yellow) 0% 50%,var(--co-blue) 50% 75%,var(--co-red) 75% 100%)}
.footer .grid > .cell{padding:32px 24px;min-height:180px}
.footer .col-link{display:block;font-size:14px;color:var(--ink);margin-bottom:8px;font-weight:500;transition:color .2s}
.footer .col-link:hover{color:var(--co-yellow)}
.footer .footer-meta{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.6}
.footer-bottom{padding:24px;color:var(--muted);font-size:12px;display:flex;justify-content:center;text-align:center;border-top:1px solid var(--rule);margin-top:24px;letter-spacing:.02em;flex-wrap:wrap;gap:8px}
.footer-bottom a{color:var(--co-yellow)}
.co-flag{font-size:1.5em;vertical-align:-2px;line-height:1;display:inline-block}

/* Modal (decorative CTA) */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .35s ease}
.modal-backdrop.is-open{opacity:1;pointer-events:auto}
.modal{position:relative;background:#0a0a0a;border:1px solid var(--rule-strong);border-radius:16px;padding:32px 28px;max-width:460px;width:100%;transform:translateY(20px) scale(.98);transition:transform .45s cubic-bezier(.16,1,.3,1);box-shadow:0 30px 80px -16px rgba(0,0,0,0.7)}
.modal-backdrop.is-open .modal{transform:none}
.modal::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--co-yellow) 0% 50%,var(--co-blue) 50% 75%,var(--co-red) 75% 100%);border-radius:16px 16px 0 0}
.modal__mark{width:48px;height:48px;border-radius:50%;object-fit:cover;display:block;margin-bottom:20px}
.modal h3{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin-bottom:10px}
.modal p{color:var(--ink-soft);font-size:14px;line-height:1.55;margin-bottom:8px}
.modal a.email{display:inline-block;margin-top:12px;color:var(--co-yellow);font-weight:600;border-bottom:1px solid rgba(255,205,0,0.35)}
.modal__close{position:absolute;top:14px;right:18px;color:var(--ink-soft);font-size:22px;line-height:1;background:none;border:0;cursor:pointer;padding:4px}
.modal__close:hover{color:var(--ink)}

/* Cookie consent banner — glass-morph pill, slide-up entrance */
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;z-index:180;background:rgba(15,15,15,0.85);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--rule-strong);border-radius:18px;box-shadow:0 30px 60px -16px rgba(0,0,0,0.6);padding:18px 22px;max-width:920px;margin:0 auto;transform:translateY(140%);opacity:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .45s ease;font-size:14px;color:var(--ink-soft)}
.cookie-banner[hidden]{display:none}
.cookie-banner.is-in{transform:translateY(0);opacity:1}
.cookie-banner__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px}
.cookie-banner__mark{flex-shrink:0;width:46px;height:46px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 4px 12px rgba(0,0,0,0.35)}
.cookie-banner__copy{line-height:1.5;color:var(--ink-soft);font-size:13px;letter-spacing:-0.005em}
.cookie-banner__copy strong{display:block;color:var(--ink);font-weight:700;font-size:14px;letter-spacing:-0.01em;margin-bottom:2px}
.cookie-banner__copy a{color:var(--co-yellow);border-bottom:1px solid rgba(255,214,10,.35);transition:border-color .2s}
.cookie-banner__copy a:hover{border-bottom-color:var(--co-yellow)}
.cookie-banner__buttons{display:flex;gap:8px;flex-shrink:0}
.cookie-btn{padding:11px 22px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid transparent;cursor:pointer;letter-spacing:-0.005em;transition:transform .2s,background .2s,color .2s,border-color .2s,box-shadow .2s;white-space:nowrap}
.cookie-btn--decline{background:transparent;color:var(--ink-soft);border-color:var(--rule-strong)}
.cookie-btn--decline:hover{color:var(--ink);border-color:var(--ink);background:rgba(255,255,255,0.04)}
.cookie-btn--accept{background:var(--co-yellow);color:#0a0700;box-shadow:0 2px 8px rgba(255,214,10,0.35)}
.cookie-btn--accept:hover{transform:translateY(-1px);background:var(--co-yellow-soft);box-shadow:0 6px 16px rgba(255,214,10,0.5)}
@media (max-width:720px){
  .cookie-banner{padding:16px;left:14px;right:14px;bottom:14px;border-radius:16px}
  .cookie-banner__inner{grid-template-columns:auto 1fr;grid-template-areas:"mark copy" "buttons buttons";gap:14px 14px}
  .cookie-banner__mark{grid-area:mark;width:40px;height:40px;border-radius:50%}
  .cookie-banner__copy{grid-area:copy}
  .cookie-banner__buttons{grid-area:buttons;justify-content:flex-end}
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal, .slide-row{opacity:1;transform:none}
  .door .door-pane{transform:translateX(-100%)}
  .door .door-pane.right{transform:translateX(100%)}
  .tw .caret{display:none}
}

/* Responsive base */
@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
  .grid::before{left:50%}
  .grid::after{display:none}
  .top-bar__inner{padding:10px 16px;gap:14px}
  .top-bar .status{font-size:10px}
  .nav .cell{padding:14px 16px}
  .nav-link{font-size:13px;padding:6px 0}  /* slightly taller tap targets on tablet */
  .brand{font-size:15px}
  .brand .b-bank{display:none}
  .door-pane-label{font-size:54px}
  /* Tablet: sphere a bit less dominant than on desktop */
  #sphere-pin canvas{width:100vw;height:100vw}
}
@media (max-width:560px){
  /* Mobile nav: brand on the left, a single "Contact" pill on the right.
     The other links are hidden — the page is short enough to scroll. */
  .nav > .grid{display:flex;align-items:center;justify-content:space-between;padding:0 16px}
  .nav > .grid::before,.nav > .grid::after{display:none}
  .nav .cell{padding:12px 0;min-height:auto}
  .nav .cell:nth-child(2),.nav .cell:nth-child(3){display:none}
  .nav .cell:last-child{display:flex;justify-content:flex-end;flex:0 0 auto}
  .nav .cell:last-child .nav-link{display:none}
  /* CONTACT pill — bumped to ~44px tap target */
  .nav .cell:last-child .nav-link#open-modal-nav{display:inline-flex;align-items:center;background:var(--co-yellow);color:#000;padding:11px 18px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;min-height:42px}

  /* Sticky tabs — 4 cols, larger min-height for touch */
  .sec-tabs .grid{grid-template-columns:repeat(4,1fr)}
  .sec-tabs .grid::before,.sec-tabs .grid::after{display:none}
  .sec-tabs .tab{padding:12px 8px;font-size:11px;flex-direction:column;align-items:flex-start;gap:6px;min-height:48px;justify-content:center}

  /* Modal close × — bigger tap area on phones */
  .modal__close{top:8px;right:10px;padding:10px 12px;font-size:24px;line-height:1}
  .modal{padding:28px 22px 24px}

  /* Other grids collapse to 1 col on very narrow */
  .footer .grid{grid-template-columns:1fr}
  .footer .grid::before,.footer .grid::after{display:none}

  /* Quieter rule between footer cells when stacked */
  .footer .grid > .cell{border-top:var(--hairline) solid var(--rule)}
  .footer .grid > .cell:first-child{border-top:0}
}