/* QuVi — Design Tokens (:root) · Canon + Legacy compat */
:root{
  /* ==========================================================================
     00) BRAND (CANON)
     ========================================================================== */
  --brand:oklch(0.62 0.19 252);
  --brand-dark:oklch(0.52 0.17 252);
  --brand-2:oklch(0.74 0.14 252);
  --brand-soft:oklch(0.96 0.03 252);
  --brand-glow:color-mix(in oklab,var(--brand) 28%,transparent);

  /* ==========================================================================
     01) PRIMITIVES (NEUTRALS)
     ========================================================================== */
  --c-white:#fff;
  --c-white-2:#fbfcfe;
  --c-black:#000;
  --c-transparent:transparent;

  --c-slate-950:#0B1220;
  --c-slate-900:#0f172a;

  /* ==========================================================================
     02) SEMANTIC SURFACES / INK
     ========================================================================== */
  --bg:var(--c-white);
  --bg-subtle:#F4F8FF;
  --panel:rgba(255,255,255,.86);

  --ink:var(--c-slate-950);
  --muted:#475569;
  --muted-2:#64748b;

  /* ==========================================================================
     03) BORDERS / STROKES / INSETS
     ========================================================================== */
  --border:rgba(15,23,42,.10);
  --border-2:rgba(15,23,42,.08);

  --stroke-1:rgba(15,23,42,.06);
  --stroke-2:rgba(15,23,42,.10);
  --stroke-3:rgba(15,23,42,.12);
  --stroke-4:rgba(15,23,42,.18);

  --inset-hi:rgba(255,255,255,.70);
  --inset-hi-2:rgba(255,255,255,.72);
  --inset-hi-3:rgba(255,255,255,.75);
  --inset-hi-4:rgba(255,255,255,.65);
  --inset-hi-5:rgba(255,255,255,.55);

  /* ==========================================================================
     04) GLASS (CANON)
     ========================================================================== */
  --glass-55:rgba(255,255,255,.55);
  --glass-60:rgba(255,255,255,.60);
  --glass-70:rgba(255,255,255,.70);
  --glass-72:rgba(255,255,255,.72);

  --glass-74:rgba(248,250,252,.74);
  --glass-80:rgba(248,250,252,.80);
  --glass-85:rgba(248,250,252,.85);
  --glass-88:rgba(255,255,255,.88);

  --glass-92:rgba(255,255,255,.92);
  --glass-95:rgba(255,255,255,.95);
  --glass-96:rgba(255,255,255,.96);

  --nav-bg:var(--glass-72);
  --nav-bg-scrolled:var(--glass-55);
  --nav-blur:22px;
  --nav-blur-scrolled:28px;

  /* ==========================================================================
     05) SHADOWS (CANON)
     ========================================================================== */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 10px 25px rgba(15,23,42,.10);
  --shadow-lg:0 25px 60px rgba(15,23,42,.16);

  --shadow-glass-md:0 1px 0 var(--inset-hi) inset,0 0 0 1px var(--stroke-1) inset,0 18px 46px rgba(15,23,42,.10);
  --shadow-glass-lg:0 1px 0 var(--inset-hi-2) inset,0 0 0 1px rgba(15,111,232,.12) inset,0 24px 60px rgba(15,23,42,.14);

  --shadow-browser:0 1px 0 rgba(255,255,255,.70) inset,0 0 0 1px var(--stroke-1) inset,0 30px 80px rgba(15,23,42,.18);
  --shadow-browser-hover:0 1px 0 var(--inset-hi-2) inset,0 0 0 1px rgba(15,111,232,.12) inset,0 36px 96px rgba(15,23,42,.20);

  /* ==========================================================================
     06) RADIUS
     ========================================================================== */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:22px;

  /* ==========================================================================
     07) LAYOUT / HIT AREAS / BREAKPOINTS
     ========================================================================== */
  --container:1140px;

  --header-h:58px;
  --filters-h:60px;
  --top-offset:calc(var(--header-h) + var(--filters-h));

  --hit-desktop:36px;
  --hit-touch:44px;

  --bp-sm:480px;
  --bp-md:768px;
  --bp-lg:1024px;
  --bp-xl:1280px;

  /* ==========================================================================
     08) Z-INDEX (SEMÁNTICOS)
     ========================================================================== */
  --z-base:0;
  --z-dropdown:100;
  --z-popover:1000;
  --z-sticky:1100;
  --z-toast:1300;

  --z-modal:2000;
  --z-modal-panel:2001;

  --z-drawer:2100;
  --z-drawer-panel:2101;

  /* Aliases legacy */
  --z-resumen:var(--z-sticky);
  --z-resumen-popover:var(--z-popover);

  /* ==========================================================================
     09) SCRIMS
     ========================================================================== */
  --scrim-strong:rgba(0,0,0,.5);
  --scrim-soft:rgba(15,23,42,.12);

  /* ==========================================================================
     10) MOTION (CANON + LEGACY)
     ========================================================================== */
  --motion-fast:200ms;
  --motion-base:280ms;
  --motion-push:320ms;
  --motion-morph:420ms;

  --motion-ease:cubic-bezier(.2,.6,.2,1);
  --motion-ease-ios:cubic-bezier(.22,.61,.36,1);

  --motion-linear:linear;
  --motion-in:ease-in;
  --motion-out:ease-out;

  /* Motion legacy (compat) */
  --motion-duration-xs:150ms;
  --motion-duration-sm:250ms;
  --motion-duration-md:500ms;
  --motion-duration-lg:2000ms;
  --motion-ease-legacy:ease-in-out;

  /* ==========================================================================
     11) TYPOGRAPHY
     ========================================================================== */
  --ff-sans:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --ff-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --fw-300:300;
  --fw-400:400;
  --fw-500:500;
  --fw-600:600;
  --fw-700:700;
  --fw-800:800;

  /* Aliases legacy */
  --fw-regular:var(--fw-400);
  --fw-medium:var(--fw-500);
  --fw-semibold:var(--fw-600);
  --fw-bold:var(--fw-700);

  --fs-10:10px;
  --fs-11:11px;
  --fs-12:12px;
  --fs-13:13px;
  --fs-14:14px;
  --fs-15:15px;
  --fs-16:16px;
  --fs-17:17px;
  --fs-18:18px;
  --fs-20:20px;
  --fs-26:26px;

  --lh-tight:1.05;
  --lh-head:1.18;
  --lh-body:1.6;
  --lh-body-compact:1.55;

  /* Alias legacy */
  --lh-base:var(--lh-body);

  --trk-tight:-.03em;
  --trk-tighter:-.04em;
  --trk-normal:-.01em;

  /* Alias legacy */
  --ls-overline:.04em;

  --text-nav:var(--fs-13);
  --text-btn:var(--fs-13);
  --text-badge:var(--fs-12);
  --text-caption:var(--fs-12);
  --text-small:var(--fs-13);
  --text-body:var(--fs-14);
  --text-lead:var(--fs-17);

  /* ==========================================================================
     12) LINKS
     ========================================================================== */
  --link-color:var(--brand);
  --link-weight:var(--fw-700);
  --link-underline:color-mix(in oklch,var(--brand) 28%,var(--c-transparent));
  --link-underline-hover:color-mix(in oklch,var(--brand) 55%,var(--c-transparent));
  --link-focus:color-mix(in oklch,var(--brand) 32%,var(--c-transparent));
  --link-gapTop:18px;

  /* ==========================================================================
     13) SPACING
     ========================================================================== */
  --section-y:100px;
  --section-y-lg:100px;
  --hero-y-top:50px;
  --hero-y-bottom:100px;
  --cta-y:80px;

  --gap-1:8px;
  --gap-2:10px;
  --gap-3:12px;
  --gap-4:14px;
  --gap-5:18px;
  --gap-6:24px;
  --gap-7:34px;
  --gap-8:44px;

  /* Espaciados legacy (compat) */
  --s-2:2px;
  --s-4:4px;
  --s-5:5px;
  --s-6:6px;
  --s-8:8px;
  --s-10:10px;
  --s-12:12px;
  --s-14:14px;
  --s-15:15px;
  --s-16:16px;
  --s-18:18px;
  --s-20:20px;
  --s-22:22px;
  --s-24:24px;
  --s-28:28px;
  --s-30:30px;
  --s-32:32px;
  --s-36:36px;
  --s-40:40px;
  --s-48:48px;

  /* ==========================================================================
     14) FEEDBACK (SEMANTIC)
     ========================================================================== */
  --ok:#047857;
  --warn:oklch(0.82 0.13 70);
  --warn-ink:oklch(0.40 0.04 70);

  --success:#10B981;              /* emerald-500 */
  --success-ink:#047857;          /* emerald-700 */
  --success-bg:#D1FAE5;           /* emerald-100 */
  --success-soft:color-mix(in oklch,var(--success) 16%,white 84%);

  --warn-bg:oklch(0.98 0.02 70);
  --warn-stroke:color-mix(in oklch,var(--warn) 28%,transparent 72%);
  --warn-soft:color-mix(in oklch,var(--warn) 16%,white 84%);

  --ok-bg:color-mix(in oklch,var(--success) 12%,white 88%);
  --ok-stroke:color-mix(in oklch,var(--success) 28%,transparent 72%);

  --info-bg:rgba(15,111,232,.10);
  --info-stroke:rgba(15,111,232,.25);

  --error:oklch(0.70 0.20 25);
  --error-ink:oklch(0.34 0.03 25);
  --error-bg:oklch(0.98 0.02 25);
  --error-soft:color-mix(in oklch,var(--error) 16%,white 84%);

  /* ==========================================================================
     15) CANON COLORS (ALPHA FAMILIES / ACCENTS)
     ========================================================================== */
  --brand-a0:rgba(15,111,232,0);
  --brand2-a0:rgba(106,169,255,0);
  --sky-a0:rgba(56,189,248,0);
  --white-a0:rgba(255,255,255,0);

  --brand-a100:rgba(15,111,232,1);
  --sky-a100:rgba(56,189,248,1);

  --brand-a06:rgba(15,111,232,.06);
  --brand-a08:rgba(15,111,232,.08);
  --brand-a09:rgba(15,111,232,.09);
  --brand-a10:rgba(15,111,232,.10);
  --brand-a12:rgba(15,111,232,.12);
  --brand-a14:rgba(15,111,232,.14);
  --brand-a16:rgba(15,111,232,.16);
  --brand-a18:rgba(15,111,232,.18);
  --brand-a22:rgba(15,111,232,.22);
  --brand-a25:rgba(15,111,232,.25);
  --brand-a34:rgba(15,111,232,.34);
  --brand-a35:rgba(15,111,232,.35);
  --brand-a42:rgba(15,111,232,.42);
  --brand-a80:rgba(15,111,232,.80);
  --brand-a92:rgba(15,111,232,.92);
  --brand-a95:rgba(15,111,232,.95);

  --brand2-a10:rgba(106,169,255,.10);
  --brand2-a14:rgba(106,169,255,.14);

  --slateTint:#F8FAFC;
  --slateTint-a55:rgba(248,250,252,.55);
  --slateTint-a58:rgba(248,250,252,.58);
  --slateTint-a70:rgba(248,250,252,.70);
  --slateTint-a75:rgba(248,250,252,.75);
  --slateTint-a80:rgba(248,250,252,.80);
  --slateTint-a85:rgba(248,250,252,.85);
  --slateTint-a90:rgba(248,250,252,.90);
  --slateTint-a95:rgba(248,250,252,.95);

  --heroSubtle-a65:rgba(244,248,255,.65);

  --slate900-a03:rgba(15,23,42,.03);
  --slate900-a04:rgba(15,23,42,.04);
  --slate900-a18:rgba(15,23,42,.18);
  --slate900-a55:rgba(15,23,42,.55);

  --black-a18:rgba(0,0,0,.18);
  --black-a28:rgba(0,0,0,.28);
  --black-a35:rgba(0,0,0,.35);
  --black-a42:rgba(0,0,0,.42);
  --black-a50:rgba(0,0,0,.50);
  --black-a55:rgba(0,0,0,.55);

  --white-a03:rgba(255,255,255,.03);
  --white-a05:rgba(255,255,255,.05);
  --white-a06:rgba(255,255,255,.06);
  --white-a07:rgba(255,255,255,.07);
  --white-a08:rgba(255,255,255,.08);
  --white-a10:rgba(255,255,255,.10);
  --white-a12:rgba(255,255,255,.12);
  --white-a16:rgba(255,255,255,.16);
  --white-a32:rgba(255,255,255,.32);
  --white-a46:rgba(255,255,255,.46);
  --white-a62:rgba(255,255,255,.62);
  --white-a66:rgba(255,255,255,.66);
  --white-a68:rgba(255,255,255,.68);
  --white-a78:rgba(255,255,255,.78);
  --white-a86:rgba(255,255,255,.86);
  --white-a92:rgba(255,255,255,.92);
  --white-a100:rgba(255,255,255,1);

  --sky:#38BDF8;
  --sky-a18:rgba(56,189,248,.18);
  --sky-a55:rgba(56,189,248,.55);
  --sky-a68:rgba(56,189,248,.68);
  --sky-a86:rgba(56,189,248,.86);
  --sky-a92:rgba(56,189,248,.92);

  --accent-purple-a85:rgba(139,92,246,.85);
  --accent-green-a85:rgba(34,197,94,.85);
  --accent-amber-a90:rgba(245,158,11,.90);
  --accent-teal-a85:rgba(6,182,212,.85);

  --tech-purple:#7C3AED;
  --tech-purple-2:#5B7CFF;

  --tech-purple-a0:rgba(124,58,237,0);
  --tech-purple-a18:rgba(124,58,237,.18);
  --tech-purple-a35:rgba(124,58,237,.35);
  --tech-purple-a85:rgba(124,58,237,.85);
  --tech-purple-a100:rgba(124,58,237,1);

  --mac-red:#FF5F57;
  --mac-yellow:#FEBC2E;
  --mac-green:#28C840;

  --night-0:#070B14;
  --night-1:#0A1020;
  --night-2:#050914;

  --blue500-a06:rgba(59,130,246,.06);

  /* ==========================================================================
     16) COMPONENT TOKENS — CARD SHELL (GLASS CANON)
     ========================================================================== */
  --card-r:var(--r-xl);
  --card-bd:var(--stroke-1);
  --card-blur:14px;

  --card-bg:linear-gradient(180deg,var(--glass-96),var(--slateTint-a90));
  --card-shadow:0 1px 0 var(--inset-hi-2) inset,0 18px 46px rgba(15,23,42,.10);

  --card-hover-bd:var(--brand-a80);
  --card-hover-bg:linear-gradient(180deg,color-mix(in oklch,var(--brand) 6%,var(--glass-96)),var(--slateTint-a90));
  --card-hover-shadow:0 1px 0 var(--inset-hi-2) inset,0 0 0 1px color-mix(in oklch,var(--brand) 28%,transparent),0 24px 60px rgba(15,23,42,.12);

  --card-focus-ring0:0 0 0 2px var(--brand-soft);
  --card-focus-ring1:0 0 0 4px var(--brand);

  --qv-ring0:0 0 0 2px var(--brand-soft);
  --qv-ring1:0 0 0 4px var(--brand);

  --qv-elev-soft:0 18px 54px rgba(15,23,42,.10);
  --qv-elev-strong:0 30px 86px rgba(15,23,42,.12);

  /* ==========================================================================
     17) DROPDOWN TOKENS
     ========================================================================== */
  --dropdown-bg:rgba(255,255,255,0.82);
  --dropdown-blur:24px;
  --dropdown-r:24px;
  --dropdown-shadow:0 10px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05);

  /* ==========================================================================
     90) LEGACY COMPAT (NO USAR EN NUEVOS COMPONENTES)
     ========================================================================== */
  --rad-xs:6px;
  --rad-sm:8px;
  --rad-md:12px;
  --rad-lg:16px;
  --rad-xl:20px;
  --rad-btn:9999px;
  --rad-card:var(--rad-md);
  --rad-pill:9999px;

  --blur-sm:4px;
  --blur-md:8px;
  --blur-lg:12px;

  --shadow-xs:var(--shadow-sm);
  --shadow-m:var(--shadow-md);
  --shadow-l:var(--shadow-lg);

  --glass-blur:var(--card-blur);
  --glass-shadow:var(--shadow-glass-md);

  --surface:var(--c-white);
  --surface-2:var(--c-white-2);
  --separator:var(--border-2);

  --glass-bg:var(--glass-88);
  --glass-border:var(--stroke-2);

  --label:var(--ink);

  --ink-0:#0b0e13;
  --ink-1:#111827;
  --ink-2:#1f2937;
  --ink-3:#374151;

  --gray-0:#f9fafb;
  --gray-1:#f3f4f6;
  --gray-2:#e5e7eb;
  --gray-3:#d1d5db;

  /* FIX: --fill no existe en este :root; se mapea a surface para no dejar var rota */
  --hover-neutral:color-mix(in oklab,var(--surface) 96%,black 4%);
  --surface-hover:var(--hover-neutral);

  --resaltado-bg:#ffec99;
}

/* Logo QuVi */
.pd-brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  min-width:0;
}

.brand__logo{
  display:block;
  max-width:none;
}

.pd-brand__logo{
  height:28px;
  width:auto;
  object-fit:contain;
}

/* Base */
*{box-sizing:border-box;}
html{height:100%;scroll-padding-top:var(--top-offset);}
body{
  min-height:100svh;
  margin:0;
  display:flex;
  flex-direction:column;
  -moz-osx-font-smoothing:grayscale;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-size:var(--text-body);
  font-weight:var(--fw-400);
  letter-spacing:0;
  line-height:var(--lh-body);
}
[id]{scroll-margin-top:var(--top-offset);}

/* Variables de layout — alturas medidas de los componentes globales.
   Usar var(--page-hero-min-h) en cualquier sección hero para que el
   contenido + breadcrumb llenen exactamente el viewport visible
   (footer queda below-the-fold por diseño).

   Nota: usamos --page-header-h (no --header-h) para no colisionar con
   --header-h:58px que existe arriba y lo usan otros componentes
   (mobile-overlay, sticky filters, etc.). */
:root{
  --page-header-h:84px;
  --page-breadcrumb-h:18px;
  --page-hero-min-h:calc(100svh - var(--page-header-h) - var(--page-breadcrumb-h));
}

a{color:inherit;text-decoration:none;font-weight:inherit;}
a:focus-visible{outline:3px solid var(--link-focus);outline-offset:3px;border-radius:10px;}
img{display:block;max-width:100%;}
button{font:inherit;}
main#main{
  flex:1;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}
@media (max-width:768px){
  main#main{padding-bottom:var(--s-32);}
}

#site-header{
  position:sticky;
  top:0;
  z-index:1300;
  isolation:isolate;
}

footer{margin-top:auto;}

/* Card shell (Glass canon) */
.qv-card{
  border:1px solid var(--card-bd);
  border-radius:var(--card-r);
  background:var(--card-bg);
  box-shadow:var(--card-shadow);
  -webkit-backdrop-filter:blur(var(--card-blur));
  backdrop-filter:blur(var(--card-blur));
  transform:translateZ(0);
}
.qv-card--interactive{
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.qv-card--interactive:hover{
  border-color:var(--card-hover-bd);
  background:var(--card-hover-bg);
  box-shadow:var(--card-hover-shadow);
}
.qv-card--interactive:active{transform:translateY(1px);}
.qv-card--interactive:focus-visible{
  outline:none;
  box-shadow:var(--card-focus-ring0),var(--card-focus-ring1),var(--qv-elev-strong);
}

/* Layout */
.container{margin-inline:auto;width:min(var(--container),calc(100% - 32px));}
.center{text-align:center;}
.right{text-align:right;}
.centered{text-align:center;}
.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;}

/* Typography */
.h2{font-size:clamp(30px,3.5vw,42px);font-weight:var(--fw-700);letter-spacing:var(--trk-tight);line-height:var(--lh-head);margin:0 0 10px;}
.lead{color:var(--muted);font-size:var(--text-lead);font-weight:var(--fw-400);line-height:var(--lh-body);margin:0;}
.mono{font-family:var(--ff-mono);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;}
.text-lead{color:var(--muted);font-size:var(--text-lead);line-height:var(--lh-body);}
.text-small{color:var(--muted);font-size:var(--text-small);line-height:var(--lh-body);}
.text-caption{color:var(--muted-2);font-size:var(--text-caption);line-height:1.35;}
.fw-500{font-weight:var(--fw-500);}
.fw-600{font-weight:var(--fw-600);}
.fw-700{font-weight:var(--fw-700);}
.fw-800{font-weight:var(--fw-800);}

/* Sections */
.section{padding:var(--section-y) 0;}
.section--subtle{background:var(--bg-subtle);border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2);}
.section--subtle2{border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2);}

/* Links */
.qv-linkWrap{margin-top:var(--link-gapTop);}
.qv-link{color:var(--link-color);font-weight:var(--link-weight);text-decoration-line:underline;text-decoration-color:var(--link-underline);text-underline-offset:3px;text-decoration-thickness:2px;transition:text-decoration-color .18s ease,opacity .18s ease;}
.qv-link:hover{text-decoration-color:var(--link-underline-hover);opacity:.92;}
.qv-link:focus-visible{text-decoration-color:var(--link-underline-hover);}
.qv-link--soft{font-weight:var(--fw-600);}
.qv-link--muted{color:color-mix(in oklch,var(--muted) 70%,var(--link-color));}

/* Tags */
.tag,.qv-tag{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:var(--fs-12);font-weight:var(--fw-700);white-space:nowrap;background:rgba(248,250,252,.8);border:1px solid var(--stroke-2);color:var(--muted);}
.tag--good,.qv-tag--good{background:var(--success-soft);border-color:var(--ok-stroke);color:var(--success);}
.tag--best,.qv-tag--best{background:var(--info-bg);border-color:var(--info-stroke);color:var(--brand-dark);}
.tag--warn,.qv-tag--warn{background:var(--warn-bg);border-color:var(--warn-stroke);color:var(--warn-ink);}

/* Tables */
.table-card{background:var(--glass-72);border:0;border-radius:var(--r-xl);box-shadow:0 1px 0 var(--inset-hi) inset,0 0 0 1px var(--stroke-1) inset,0 25px 60px rgba(15,23,42,.16);overflow:hidden;transform:translateZ(0);backdrop-filter:blur(14px);}
.table-card__top{display:flex;justify-content:space-between;padding:12px 14px;font-size:var(--fs-13);color:var(--muted);background:linear-gradient(180deg,var(--glass-72),var(--slateTint-a58));box-shadow:0 1px 0 var(--inset-hi-4) inset,0 -1px 0 var(--stroke-1) inset;}
.table-card__top svg{width:18px;height:18px;stroke-width:2.2;}
table{width:100%;border-collapse:collapse;font-size:var(--fs-13);line-height:1.4;}
thead th{padding:12px 14px;font-size:var(--fs-12);color:var(--muted-2);background:var(--c-white);border-bottom:1px solid var(--border-2);text-align:left;white-space:nowrap;}
tbody td{padding:12px 14px;color:var(--ink);border-bottom:1px solid var(--border-2);}
tbody tr:hover{background:var(--slateTint-a70);}

/* Tabs */
.qv-tabsSec{position:relative;--tabs-gap:6px;--tabs-pad:6px;--tabs-blur:10px;--tabs-bg:var(--glass-70);--tabs-bd:var(--border);--tab-py:10px;--tab-px:14px;--tab-ink:var(--muted);--tab-ink-hover:var(--ink);--tab-hover-bg:var(--brand-a08);--tab-active-bg:var(--glass-96);--tab-active-ink:var(--brand);--tab-active-shadow:var(--shadow-md);--tabs-arrow-bg:var(--glass-70);--tabs-arrow-bd:var(--border);--tabs-arrow-r:12px;--tabs-arrow-s:38px;}
.qv-tabsHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.qv-tabs{display:inline-flex;align-items:center;gap:var(--tabs-gap);padding:var(--tabs-pad);border:1px solid var(--tabs-bd);border-radius:999px;background:var(--tabs-bg);-webkit-backdrop-filter:blur(var(--tabs-blur));backdrop-filter:blur(var(--tabs-blur));}
.qv-tab{appearance:none;border:0;background:transparent;color:var(--tab-ink);padding:var(--tab-py) var(--tab-px);border-radius:999px;font-weight:650;letter-spacing:var(--trk-normal);cursor:pointer;transition:transform .12s ease,background .12s ease,color .12s ease,box-shadow .12s ease;}
.qv-tab:hover{background:var(--tab-hover-bg);color:var(--tab-ink-hover);}
.qv-tab:active{transform:translateY(1px);}
.qv-tab.is-active{background:var(--tab-active-bg);color:var(--tab-active-ink);box-shadow:var(--tab-active-shadow);}
.qv-tab:focus-visible{outline:none;box-shadow:var(--qv-ring0),var(--qv-ring1);}
.qv-tabsNav{display:flex;gap:8px;}
.qv-tabsArrow{width:var(--tabs-arrow-s);height:var(--tabs-arrow-s);border-radius:var(--tabs-arrow-r);border:1px solid var(--tabs-arrow-bd);background:var(--tabs-arrow-bg);-webkit-backdrop-filter:blur(var(--tabs-blur));backdrop-filter:blur(var(--tabs-blur));display:grid;place-items:center;cursor:pointer;transition:transform .12s ease,background .12s ease,box-shadow .12s ease;}
.qv-tabsArrow:hover{background:var(--brand-a08);}
.qv-tabsArrow:active{transform:translateY(1px);}
.qv-tabsArrow:focus-visible{outline:none;box-shadow:var(--qv-ring0),var(--qv-ring1);}
.qv-tabsArrow i,.qv-tabsArrow svg{display:block;}
.qv-tabsPanels{display:grid;}
.qv-tabPanel{grid-area:1 / 1;display:block;}
.qv-tabPanel[hidden]{display:block;visibility:hidden;pointer-events:none;}
.qv-tabPanel.is-active{visibility:visible;pointer-events:auto;animation:qvFadeUp .18s ease both;}

/* Motion */
@keyframes qvFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media (max-width:720px){.qv-tabsHead{align-items:flex-start}.qv-tabsNav{display:none}}

/* --- Navigation styles: canonical source is componentes.css --- */