/* ==========================================================================
   QRA Design System — components (standalone ports of the _ds_bundle.js
   <x-import> components: Button, Input, Checkbox) + shared image placeholders.
   Load AFTER tokens.css, BEFORE each page's own stylesheet.
   ========================================================================== */

/* ---------------- Shared base ----------------
   These four lines used to live only in each page's own stylesheet, so any page
   that ships no page CSS — the 404 — rendered without box-sizing, and .qra-wrap
   (width:100% plus a gutter) overflowed the viewport at every width. The reset
   belongs to the shared layer; the page copies are harmless duplicates. */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font-body);color:var(--text-body);background:var(--surface-0);-webkit-font-smoothing:antialiased;}

/* ---------------- Button ----------------
   The one button in the system. Every CTA on the site is this component —
   variants only decide which surface it wears, never how it behaves.
   Shared hover language: the surface steps one shade AND the label rolls up
   behind a mask (see .qra-roll below — qra-common.js wraps every label, so
   templates just write the text). Add a variant, not a new class. */
.qra-btn{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px;
  font-family:var(--font-body); font-size:14px; font-weight:600;
  letter-spacing:var(--tracking-button); line-height:1;
  border:1px solid transparent; border-radius:var(--radius-lg);
  background:var(--primary-500); color:#fff; box-shadow:var(--shadow-xs);
  transition:background .18s, box-shadow .18s, transform .18s, color .18s, border-color .18s;
  white-space:nowrap; text-decoration:none;
}
.qra-btn:hover:not(:disabled){ background:var(--primary-600); }
.qra-btn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.qra-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* sizes */
.qra-btn[data-size="sm"]{ height:32px; padding:0 12px; font-size:13px; }
.qra-btn[data-size="lg"]{ height:52px; padding:0 26px; font-size:16px; }

/* variants */
.qra-btn[data-variant="secondary"]{ background:var(--secondary-400); }
.qra-btn[data-variant="secondary"]:hover:not(:disabled){ background:var(--secondary-500); }
.qra-btn[data-variant="ghost"]{
  border-color:var(--primary-500); color:var(--primary-600); background:transparent; box-shadow:none;
}
.qra-btn[data-variant="ghost"]:hover:not(:disabled){ background:var(--primary-50); color:var(--primary-700); }

/* on dark surfaces (final CTA bands, lead-magnet banner) — same two variants,
   inverted palette, same roll. */
.qra-btn[data-variant="inverse"]{ background:#fff; color:var(--ink-900); box-shadow:var(--shadow-sm); }
.qra-btn[data-variant="inverse"]:hover:not(:disabled){ background:var(--ink-100); }
.qra-btn[data-variant="ghost-inverse"]{
  border-color:rgba(255,255,255,.24); color:#fff; background:transparent; box-shadow:none;
}
.qra-btn[data-variant="ghost-inverse"]:hover:not(:disabled){
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.42);
}

/* block / full-width */
.qra-btn[data-block], .qra-btn.is-block{ width:100%; display:flex; }

/* Text-roll label — THE button hover effect. The label is duplicated and the
   pair slides up inside an overflow:hidden mask, so the copy replaces the
   original. qra-common.js builds the markup for every button label; writing it
   by hand is only needed if the label is not a plain text node. */
.qra-roll{ display:inline-block; overflow:hidden; position:relative; vertical-align:bottom; line-height:1.25; }
.qra-roll-in{ display:block; transition:transform .34s cubic-bezier(.6,.05,.1,1); }
.qra-roll-in:nth-child(2){ position:absolute; top:100%; left:0; width:100%; }
.qra-btn:hover .qra-roll-in{ transform:translateY(-100%); }
@media (prefers-reduced-motion:reduce){
  .qra-roll-in{ transition:none; }
  .qra-btn:hover .qra-roll-in{ transform:none; }
}

/* ---------------- Navigation control ----------------
   prev/next icon button for carousels, sliders and steppers. One canonical
   style (bordered, surface-0, 4px, hover primary) — same icon-button language
   as .qra-share-btn. Group two of them with .qra-navctrl-group. */
.qra-navctrl{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:4px;
  border:1px solid var(--border-default); background:var(--surface-0);
  color:var(--text-strong);
  transition:border-color .12s, background .12s, color .12s, transform .12s;
}
.qra-navctrl:hover:not(:disabled){ border-color:var(--primary-400); background:var(--primary-50); color:var(--primary-700); }
.qra-navctrl:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.qra-navctrl:disabled{ opacity:.45; cursor:not-allowed; }
.qra-navctrl svg{ display:block; }
.qra-navctrl-group{ display:inline-flex; gap:var(--space-2); }

/* ---------------- Input ---------------- */
.qra-field{ display:flex; flex-direction:column; gap:7px; width:100%; text-align:left; }
.qra-field > span{
  font-size:13px; font-weight:600; color:var(--text-body);
}
.qra-field input{
  width:100%; height:44px; padding:0 14px;
  font-family:var(--font-body); font-size:15px; color:var(--text-strong);
  background:var(--surface-0); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.qra-field input::placeholder{ color:var(--text-subtle); }
.qra-field input:focus{ border-color:var(--primary-500); box-shadow:var(--shadow-focus); }

/* ---------------- Checkbox ---------------- */
.qra-check{ display:inline-flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:14px; line-height:1.45; color:var(--text-body); }
.qra-check input{
  appearance:none; -webkit-appearance:none;
  flex-shrink:0; width:20px; height:20px; margin:0;
  border:1.5px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface-0); cursor:pointer; position:relative;
  transition:background .15s, border-color .15s;
}
.qra-check input:checked{ background:var(--primary-500); border-color:var(--primary-500); }
.qra-check input:checked::after{
  content:""; position:absolute; left:5px; top:1px; width:6px; height:11px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.qra-check input:focus-visible{ box-shadow:var(--shadow-focus); }

/* ---------------- Eyebrow / container / badge (promoted from page CSS) ---------------- */
.qra-eyebrow{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--primary-500);
}
.qra-wrap{ width:100%; max-width:1440px; margin:0 auto; padding:0 var(--gutter); }

/* ---------------- Section band ----------------
   The canonical vertical rhythm. Every marketing section wears this instead of
   an inline padding — the value is fluid, so the spacing shrinks with the
   viewport without a single media query. Compose with .qra-wrap (which owns the
   horizontal gutter) or drop it on the full-bleed band that holds one. */
.qra-section{ padding-top:var(--section-y); padding-bottom:var(--section-y); }
.qra-section--lg{ padding-top:var(--section-y-lg); padding-bottom:var(--section-y-lg); }
.qra-section--hero{ padding-top:var(--hero-top); }   /* clears the overlaid nav */
.qra-section--tight{ padding-bottom:var(--space-7); }
.qra-section--flush{ padding-bottom:0; }
.qra-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:600;
  letter-spacing:.04em; padding:5px 10px; border-radius:var(--radius-full);
  background:var(--surface-brand-soft); color:var(--primary-600);
}

/* ---------------- Card (the site's ubiquitous surface — was inline ×40) ---------------- */
.qra-card{
  background:var(--surface-0);
  border:1px solid var(--border-default);
  border-radius:var(--radius-2xl);            /* was 14px — snapped to 16 */
  box-shadow:var(--shadow-card);
  padding:var(--space-5);
}
.qra-card[data-tone="ink"]{ background:var(--ink-800); border-color:transparent; color:#fff; }
.qra-card[data-tone="brand"]{ background:var(--primary-500); border-color:transparent; color:#fff; }
.qra-card[data-tone="soft"]{ background:var(--surface-brand-soft); border-color:transparent; }
.qra-card[data-tone="secondary"]{ background:var(--secondary-400); border-color:transparent; color:#fff; }

/* ---------------- Nav / nav-pill / dropdown / mega-menu ----------------
   Extracted from the block that was copy-pasted into landing.css / sobre.css /
   calculadora.css. Shadows/radii now tokenized. Page CSS may override
   .qra-navbar margin-bottom (calculadora uses 0, landing/sobre use -88px).
   Radii follow the nav spec: containers (navbox / navpill / dropdown / mega)
   are --radius-lg (8px), everything nested inside them is --radius-sm (4px). */
.qra-navbar{position:sticky;top:0;z-index:30;padding:var(--space-4) var(--space-5);margin-bottom:-88px;pointer-events:none;}
.qra-navrow{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
.qra-navrow > *{pointer-events:auto;}
/* The Chrome has two forms and ONE set of nodes. Above --bp-md the drawer is
   display:contents, so its pills are laid out by .qra-navrow exactly as if it
   weren't there; below it, the same element becomes the full-screen overlay.
   pointer-events is inherited, so auto on the wrapper reaches the pills. */
.qra-drawer{display:contents;}
.qra-navburger{display:none;}
.qra-navbox{height:56px;padding:0 20px;flex-shrink:0;position:relative;overflow:hidden;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-default);box-shadow:var(--shadow-nav);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:box-shadow .18s,transform .18s,padding .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1);}
.qra-navbox:hover{transform:translateY(-1px);box-shadow:var(--shadow-nav-hover);}
.qra-navbox svg{display:block;}
.qra-navbox .qra-logo-full{transition:opacity .24s ease,transform .32s cubic-bezier(.4,0,.2,1);}
.qra-navbox .qra-logo-signo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);opacity:0;transition:opacity .24s ease,transform .32s cubic-bezier(.4,0,.2,1);}
.qra-navbar.is-scrolled .qra-navbox{padding:0;width:56px;}
.qra-navbar.is-scrolled .qra-navbox .qra-logo-full{opacity:0;transform:scale(.85);}
.qra-navbar.is-scrolled .qra-navbox .qra-logo-signo{opacity:1;transform:translate(-50%,-50%) scale(1);}
.qra-navpill{height:56px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-default);box-shadow:var(--shadow-nav);border-radius:var(--radius-lg);display:flex;align-items:center;padding:0 8px;gap:2px;}
.qra-navpill .qra-btn{border-radius:var(--radius-sm);}
/* used on both <a> and <button> triggers — reset the button UA styles so the two render identically */
.qra-navlink{font-size:var(--text-base);font-weight:600;color:var(--text-default);text-decoration:none;padding:9px 16px;border-radius:var(--radius-sm);transition:color .15s,background .15s;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:none;border:0;appearance:none;-webkit-appearance:none;font-family:inherit;line-height:1.2;}
.qra-navlink:hover{color:var(--primary-600);background:var(--primary-50);}
.qra-navlink.is-current{color:var(--primary-600);background:var(--primary-50);}
.qra-navitem{position:relative;display:flex;align-items:center;}
.qra-navmenu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:230px;background:var(--surface-0);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-menu);padding:6px;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;z-index:40;}
.qra-navmenu--lang{min-width:160px;}
.qra-navitem.is-open > .qra-navmenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.qra-navmenu a{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border-radius:var(--radius-sm);text-decoration:none;transition:background .12s;cursor:pointer;}
.qra-navmenu a:hover{background:var(--primary-50);}
.qra-navcaret{transition:transform .15s;}
.qra-navitem.is-open .qra-navcaret{transform:rotate(180deg);}
/* Centred and viewport-capped, NOT anchored to the nav item. Item-anchored
   (left:0 of a .qra-navitem sitting two-thirds across the bar) an 860px panel
   ran past the right edge on anything under ~1100px — 80px of horizontal
   scroll at 1024.
   NOTE: position:fixed here resolves against .qra-navpill, not the viewport,
   because the pill's backdrop-filter makes it a containing block. That is what
   we want (the panel hangs centred under the pill) — but it means the glass is
   load-bearing: drop backdrop-filter from .qra-navpill and these panels jump.
   Measured in bounds from 1024 to 2560; at 1024 the wide panel sits at x=19
   with 145px to spare. The width cap uses vw, so it is viewport-true either way. */
.qra-mega{position:fixed;top:74px;left:50%;transform:translateX(-50%) translateY(-6px);width:min(680px,calc(100vw - var(--gutter) * 2));background:var(--surface-0);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-mega);padding:14px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;z-index:40;}
.qra-mega--wide{width:min(860px,calc(100vw - var(--gutter) * 2));}
.qra-mega--narrow{width:min(640px,calc(100vw - var(--gutter) * 2));}
/* the two panel layouts — were inline in nav.php, so no media query could reach them */
.qra-megagrid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:var(--space-3);align-items:stretch;}
.qra-megagrid--res{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start;}
/* every element nested in a mega-menu is 4px — the panel itself keeps its 8px */
.qra-mega *{border-radius:var(--radius-sm);}
.qra-navitem.is-open > .qra-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.qra-megarow{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:var(--radius-sm);text-decoration:none;transition:background .12s;cursor:pointer;}
.qra-megarow:hover{background:var(--surface-1);}
.qra-megameta{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.04em;color:var(--text-muted);white-space:nowrap;}
.qra-megacard{display:block;padding:14px;border-radius:var(--radius-sm);background:var(--ink-800);text-decoration:none;cursor:pointer;transition:transform .15s;overflow:hidden;}
.qra-megacard:hover{transform:translateY(-2px);}

/* mega-menu inner content (was repeated inline in index/sobre/calc) */
.qra-megahead{display:flex;align-items:center;justify-content:space-between;padding:2px 8px 12px;}
.qra-megaeyebrow{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}
.qra-megacolhead{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);padding:0 8px 8px;}
.qra-megalink{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--primary-500);text-decoration:none;cursor:pointer;}
.qra-megalink--foot{display:inline-flex;align-items:center;gap:6px;align-self:flex-end;padding:10px 14px;margin-top:var(--space-1);}
.qra-megalink--foot svg{transition:transform .15s;}
.qra-megalink--foot:hover svg{transform:translateX(2px);}
.qra-megacol{display:flex;flex-direction:column;gap:var(--space-1);}
.qra-megaico{flex-shrink:0;width:38px;height:38px;border-radius:var(--radius-sm);background:var(--primary-50);display:inline-flex;align-items:center;justify-content:center;}
.qra-megaico--brand{background:var(--secondary-400);}
.qra-megarowtext{display:flex;flex-direction:column;gap:2px;min-width:0;}
.qra-megatitle{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-strong);}
.qra-megadesc{font-size:var(--text-xs);color:var(--text-muted);line-height:1.4;}
.qra-megathumb{flex-shrink:0;width:76px;height:56px;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface-1);}
.qra-megablogtext{display:flex;flex-direction:column;gap:3px;min-width:0;}
.qra-megablogtitle{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-strong);line-height:1.35;}
.qra-megablogmeta{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);}
/* featured (dark) mega card internals */
.qra-megacardtop{display:flex;align-items:center;gap:var(--space-3);}
.qra-megacardhead{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.qra-megacardtitle{font-size:var(--text-md);font-weight:var(--weight-semibold);color:#fff;}
.qra-megacarddesc{font-size:var(--text-xs);color:rgba(255,255,255,.6);line-height:1.4;}
.qra-megabadge{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--weight-semibold);padding:3px 10px;border-radius:var(--radius-sm);background:rgba(232,62,140,.18);color:var(--secondary-200);white-space:nowrap;}
.qra-megadivider{height:1px;background:rgba(255,255,255,.12);margin:var(--space-4) 0;}
.qra-megafeat{display:flex;flex-direction:column;gap:11px;}
.qra-megafeatitem{display:flex;align-items:center;gap:9px;font-size:var(--text-sm);color:rgba(255,255,255,.8);}
.qra-megacardcta{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:#fff;}

/* ---------------- Isometric grid backdrop (hero) ----------------
   Static rhombic grid: two families of 30° lines, faded out towards the bottom
   of the section. Purely decorative — no script, no animation, no repaints. */
.qra-isogrid{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  --iso-gap:38px; --iso-w:1px; --iso-line:rgba(107,63,255,.12);
  background-image:
    repeating-linear-gradient(30deg,var(--iso-line) 0 var(--iso-w),transparent var(--iso-w) var(--iso-gap)),
    repeating-linear-gradient(150deg,var(--iso-line) 0 var(--iso-w),transparent var(--iso-w) var(--iso-gap));
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}

/* Final-CTA buttons are .qra-btn[data-variant="inverse"|"ghost-inverse"] —
   the old .qra-cta-* / .sobre-cta-* pairs were copies with their own hover. */

/* ---------------- Footer (shared dark footer on Sobre / Landing) ---------------- */
/* The link columns. The old inline version carried min-width:520px, which forced
   horizontal scroll on every phone — the grid handles narrowing on its own. */
.qra-foot-main{display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;}
.qra-foot-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:var(--space-6);flex:1;min-width:0;}
.qra-foot-label{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:var(--space-4);}
.qra-foot-col{display:flex;flex-direction:column;gap:11px;}
.qra-foot-link{font-size:var(--text-base);color:rgba(255,255,255,.6);transition:color .15s;text-decoration:none;}
.qra-foot-link:hover{color:#fff;}
.qra-foot-social{width:34px;height:34px;flex-shrink:0;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);transition:background .15s,color .15s;}
.qra-foot-social:hover{background:rgba(255,255,255,.14);color:#fff;}

/* ---------------- Image slot placeholders (unfilled slots in the project) ---------------- */
.qra-imgslot{
  position:relative;
  background:
    radial-gradient(120% 90% at 30% 8%, rgba(139,107,255,.30), transparent 60%),
    linear-gradient(150deg, #201640 0%, #0C0918 78%);
}
.qra-imgslot--team[data-mono]::after{
  content:attr(data-mono);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(56px,8vw,86px); letter-spacing:-.02em;
  color:rgba(255,255,255,.10); transform:translateY(-14%); user-select:none;
}
.qra-imgslot--cover{
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(107,63,255,.22), transparent 60%),
    linear-gradient(150deg, var(--surface-2), var(--surface-1));
}
.qra-imgslot--cover::after{
  content:""; position:absolute; left:50%; top:50%; width:22px; height:18px;
  transform:translate(-50%,-50%); border-radius:3px; border:1.6px solid var(--primary-300);
  background:
    radial-gradient(circle at 68% 34%, var(--primary-400) 0 3px, transparent 3.5px),
    linear-gradient(-40deg, transparent 45%, var(--primary-200) 46% 60%, transparent 61%);
  opacity:.85;
}
.qra-imgslot--light{
  background:
    radial-gradient(120% 120% at 25% 0%, var(--primary-50), transparent 60%),
    linear-gradient(150deg, var(--surface-2), var(--surface-1));
}

/* ---------------- Burger (the drawer's trigger) ----------------
   Wears the same glass box as .qra-navbox so the two read as a pair. Hidden
   above --bp-md; the icon's two bars cross into an X from [aria-expanded]. */
.qra-navburger{
  width:56px;height:56px;flex-shrink:0;appearance:none;cursor:pointer;padding:0;
  align-items:center;justify-content:center;color:var(--text-strong);
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-default);box-shadow:var(--shadow-nav);border-radius:var(--radius-lg);
  transition:box-shadow .18s,transform .18s;
}
.qra-navburger:hover{transform:translateY(-1px);box-shadow:var(--shadow-nav-hover);}
.qra-navburger:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.qra-burger-ico{position:relative;display:block;width:20px;height:14px;}
.qra-burger-ico::before,.qra-burger-ico::after{
  content:"";position:absolute;left:0;width:100%;height:2px;border-radius:var(--radius-full);
  background:currentColor;transition:transform .22s cubic-bezier(.4,0,.2,1),top .22s cubic-bezier(.4,0,.2,1);
}
.qra-burger-ico::before{top:0;}
.qra-burger-ico::after{top:12px;}
.qra-navburger[aria-expanded="true"] .qra-burger-ico::before{top:6px;transform:rotate(45deg);}
.qra-navburger[aria-expanded="true"] .qra-burger-ico::after{top:6px;transform:rotate(-45deg);}
/* qra-common.js sets this on <body> while the drawer is open */
body.qra-noscroll{overflow:hidden;}

/* ==========================================================================
   Responsive — the three breakpoints (see docs/adr/0001 and tokens.css).
   Desktop-first: everything above is the >= --bp-lg layout; each block below
   walks it down. Spacing is NOT handled here — the fluid tokens do that.
   ========================================================================== */

/* ---------------- --bp-lg · 1024 · the Chrome changes form ----------------
   Measured, not guessed: logo + link pill + language + CTA need ~900px, and the
   Services mega another ~860 — the full bar simply does not fit a tablet. So the
   Chrome collapses at --bp-lg, not --bp-md.
   The navpills are NOT duplicated: .qra-drawer stops being display:contents and
   becomes the overlay that holds them. Same nodes, second form. */
@media(max-width:1023px){
  .qra-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);}
  .qra-navburger{display:inline-flex;}
  /* the trigger and the logo must out-stack the overlay they sit on top of */
  .qra-navbox,.qra-navburger{position:relative;z-index:61;}

  .qra-drawer{
    display:none;position:fixed;inset:0;z-index:60;pointer-events:auto;
    flex-direction:column;background:var(--surface-0);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:calc(88px + var(--space-4)) var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom));
  }
  .qra-drawer.is-open{display:flex;}

  /* pill → stacked list */
  .qra-navpill{
    height:auto;flex-direction:column;align-items:stretch;padding:0;gap:0;
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    border:none;box-shadow:none;border-radius:0;
  }
  .qra-navpill--end{margin-top:var(--space-5);gap:var(--space-4);}
  .qra-navpill--end .qra-btn{width:100%;}
  .qra-navitem{display:block;}
  /* display:flex, not the base inline-flex: inside a .qra-navitem an inline-flex
     link shrinks to its text, so the rule under "Serviços" stopped at 92px while
     "Blog" (a direct child of the stretched pill) ran the full 378 — and
     space-between had no spare width to push the caret to the edge. */
  .qra-navlink{
    display:flex;width:100%;justify-content:flex-start;
    padding:var(--space-4) 0;font-size:var(--text-xl);border-radius:0;
    border-bottom:1px solid var(--border-hairline);
  }
  /* space-between would scatter the language link's three children — globe far
     left, "PT" adrift in the middle, caret far right. Only the caret goes right. */
  .qra-navlink > .qra-navcaret{margin-left:auto;}
  .qra-navlink:hover,.qra-navlink.is-current{background:transparent;}
  /* Every link keeps its rule, so the rhythm never breaks; the end block is
     separated by space alone (a border there stacked into a double line). */
  .qra-navpill--end .qra-navlink{border-bottom:none;font-size:var(--text-lg);}
  .qra-navitem.is-open .qra-navcaret{transform:rotate(180deg);}

  /* With the drawer open the bar belongs to the panel — the glass boxes and
     their shadows read as two cards floating on a blank sheet. Flatten them,
     and undo the scroll-shrink so the wordmark is whole, not the bare signo. */
  .qra-navbar.is-menu-open .qra-navbox,
  .qra-navbar.is-menu-open .qra-navburger{
    background:transparent;box-shadow:none;border-color:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .qra-navbar.is-menu-open .qra-navbox{width:auto;padding:0;}
  .qra-navbar.is-menu-open .qra-navbox .qra-logo-full{opacity:1;transform:none;}
  .qra-navbar.is-menu-open .qra-navbox .qra-logo-signo{opacity:0;}

  /* mega / dropdown → in-flow accordion panel */
  .qra-mega,.qra-mega--wide,.qra-mega--narrow,.qra-navmenu{
    position:static;width:auto;min-width:0;transform:none;
    opacity:1;visibility:visible;display:none;transition:none;
    background:transparent;border:none;box-shadow:none;padding:var(--space-2) 0 var(--space-4);
  }
  /* in the drawer the panels are in-flow accordions; neutralise the desktop
     centring transform (higher-source-order than the base .is-open rule). */
  .qra-navitem.is-open > .qra-mega,
  .qra-navitem.is-open > .qra-navmenu{display:block;transform:none;}
  .qra-megagrid,.qra-megagrid--res{grid-template-columns:1fr;gap:var(--space-2);}
  .qra-megahead{padding:var(--space-2) 0;}
  .qra-megacolhead{padding:var(--space-3) 0 var(--space-1);}
  .qra-megarow{padding:var(--space-3) 0;}
  .qra-megacol{gap:0;}

  .qra-foot-main{gap:var(--space-5);}
}

/* ---------------- --bp-md · 768 ---------------- */
@media(max-width:767px){
  .qra-drawer{padding-top:calc(88px + var(--space-3));}
  .qra-navlink{font-size:var(--text-lg);}
}

/* ---------------- --bp-sm · 640 ---------------- */
@media(max-width:639px){
  .qra-foot-grid{gap:var(--space-4);}
  .qra-card{padding:var(--space-4);}
}