/* ============================================================================
   Atrivia ERP — Manual de Usuario
   Design system derivado de ui-ux-pro-max: "Trust & Authority" + Swiss Minimal
   Brand: rojo #dc0032 + negro #0a0a0a + slate grays
   Fonts: Inter (body + headings, OpenType features activados) + JetBrains Mono
   ============================================================================ */

/* ---- Design tokens ---- */
:root {
  --atrivia-red:        #dc0032;
  --atrivia-red-light:  #e83a5a;
  --atrivia-red-dark:   #b8002a;
  --atrivia-red-50:     #fff1f3;
  --atrivia-red-100:    #ffe4e9;

  --atrivia-ink:        #0a0a0a;
  --atrivia-ink-soft:   #1a1a1a;

  --slate-50:           #f8fafc;
  --slate-100:          #f1f5f9;
  --slate-200:          #e2e8f0;
  --slate-300:          #cbd5e1;
  --slate-500:          #64748b;
  --slate-600:          #475569;
  --slate-700:          #334155;
  --slate-900:          #0f172a;
}

/* ============================================================================
   1. Material Palette Override (light + slate dark)
   ============================================================================ */

:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:           var(--atrivia-red);
  --md-primary-fg-color--light:    var(--atrivia-red-light);
  --md-primary-fg-color--dark:     var(--atrivia-red-dark);
  --md-primary-bg-color:           #ffffff;
  --md-primary-bg-color--light:    #ffffffb3;

  --md-accent-fg-color:            var(--atrivia-red);
  --md-accent-fg-color--transparent: rgba(220, 0, 50, 0.08);
  --md-accent-bg-color:            #ffffff;

  --md-typeset-a-color:            var(--atrivia-red);
  --md-default-fg-color:           var(--slate-900);
  --md-default-fg-color--light:    var(--slate-600);
  --md-default-fg-color--lighter:  var(--slate-500);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:           var(--atrivia-red);
  --md-primary-fg-color--light:    var(--atrivia-red-light);
  --md-primary-fg-color--dark:     var(--atrivia-red-dark);
  --md-primary-bg-color:           #1a1a1a;
  --md-accent-fg-color:            var(--atrivia-red-light);
  --md-accent-fg-color--transparent: rgba(232, 58, 90, 0.08);
  --md-typeset-a-color:            var(--atrivia-red-light);
}

/* ============================================================================
   2. Typography (Mejora 1) — Inter con OpenType features premium
   ============================================================================ */

.md-typeset {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01', 'calt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--slate-900);
}

[data-md-color-scheme="slate"] .md-typeset {
  color: var(--slate-100);
}

.md-typeset h1 {
  color: var(--atrivia-ink);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: 0;
  border-bottom: 2px solid var(--atrivia-red);
  padding-bottom: 10px;
  margin-bottom: 24px;
}

.md-typeset h2 {
  color: var(--atrivia-ink);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: 0;
  margin-top: 48px;
  margin-bottom: 14px;
}

.md-typeset h3 {
  color: var(--slate-700);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: 0;
  margin-top: 32px;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: var(--slate-100);
}

[data-md-color-scheme="slate"] .md-typeset h3 {
  color: var(--slate-200);
}

/* Line-length legible en desktop (Odoo usa ~72ch) */
.md-typeset p,
.md-typeset ul,
.md-typeset ol {
  max-width: 72ch;
}

.md-typeset p {
  margin-bottom: 14px;
}

/* ============================================================================
   3. Header + navigation corporativa
   ============================================================================ */

.md-header {
  background-color: var(--atrivia-ink);
  border-bottom: 3px solid var(--atrivia-red);
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.08);
}

.md-header__topic .md-ellipsis {
  font-weight: 600;
  letter-spacing: 0;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 28px;
  width: auto;
}

.md-tabs {
  background-color: var(--atrivia-ink);
}

.md-tabs__link {
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: #ffffff;
  opacity: 1;
}

.md-tabs__item--active {
  border-bottom: 3px solid var(--atrivia-red);
}

/* Search bar in header */
.md-search__input {
  background-color: rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease;
}

.md-search__input:hover,
.md-search__input:focus {
  background-color: rgba(255, 255, 255, 0.14);
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================================
   4. Sidebar (Mejora 4) — items compactos Inter 13.5px, hover rojo sutil
   ============================================================================ */

.md-nav__item .md-nav__link {
  font-size: 13.5px;
  padding: 6px 10px;
  margin: 1px 0;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.md-nav__link:hover {
  background: rgba(220, 0, 50, 0.06);
  color: var(--atrivia-ink);
}

.md-nav__link--active {
  background: rgba(220, 0, 50, 0.08);
  color: var(--atrivia-red) !important;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  background: rgba(232, 58, 90, 0.12);
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  background: rgba(232, 58, 90, 0.15);
  color: var(--atrivia-red-light) !important;
}

/* Section titles in sidebar */
.md-nav__title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-500);
}

/* TOC lateral derecho — línea roja sutil en la sección activa */
.md-nav--secondary .md-nav__link--active {
  border-left: 2px solid var(--atrivia-red);
  padding-left: 10px;
  margin-left: -2px;
  background: transparent;
}

/* ============================================================================
   5. Admonitions (Mejora 2) — estilo Linear/Stripe
   ============================================================================ */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--slate-200);
  border-left-width: 3px;
  border-left-color: var(--slate-300);
  border-radius: 6px;
  padding: 14px 18px 14px 48px;
  background: var(--slate-50);
  box-shadow: none;
  font-size: 14.5px;
  margin: 18px 0;
}

.md-typeset .admonition-title,
.md-typeset summary {
  padding: 0 0 4px 0;
  background: transparent !important;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--atrivia-ink);
  margin-bottom: 4px;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  left: 16px;
  top: 15px;
  width: 18px;
  height: 18px;
}

/* Phosphor Icons (regular weight) — override del set Material por defecto */
:root {
  --md-admonition-icon--note:     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg>');
  --md-admonition-icon--tip:      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Z"/></svg>');
  --md-admonition-icon--warning:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M236.8,188.09,149.35,36.22a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0L223,196.08A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>');
  --md-admonition-icon--danger:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M227.32,73.37,182.63,28.68A16.12,16.12,0,0,0,171.31,24H84.69A16.12,16.12,0,0,0,73.37,28.68L28.68,73.37A16.12,16.12,0,0,0,24,84.69v86.62a16.12,16.12,0,0,0,4.68,11.32l44.69,44.69A16.12,16.12,0,0,0,84.69,232h86.62a16.12,16.12,0,0,0,11.32-4.68l44.69-44.69a16.12,16.12,0,0,0,4.68-11.32V84.69A16.12,16.12,0,0,0,227.32,73.37ZM216,171.31,171.31,216H84.69L40,171.31V84.69L84.69,40h86.62L216,84.69ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>');
  --md-admonition-icon--abstract: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M224,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h64a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"/></svg>');
}

/* Note (azul info) */
.md-typeset .note,
.md-typeset details.note {
  border-left-color: #2563eb;
  background: #eff6ff;
}
.md-typeset .note > .admonition-title::before,
.md-typeset details.note > summary::before {
  background-color: #2563eb;
}

/* Tip (verde) */
.md-typeset .tip,
.md-typeset details.tip {
  border-left-color: #16a34a;
  background: #f0fdf4;
}
.md-typeset .tip > .admonition-title::before,
.md-typeset details.tip > summary::before {
  background-color: #16a34a;
}

/* Warning (naranja) */
.md-typeset .warning,
.md-typeset details.warning {
  border-left-color: #d97706;
  background: #fffbeb;
}
.md-typeset .warning > .admonition-title::before,
.md-typeset details.warning > summary::before {
  background-color: #d97706;
}

/* Danger / Important (rojo Atrivia) */
.md-typeset .danger,
.md-typeset details.danger {
  border-left-color: var(--atrivia-red);
  background: var(--atrivia-red-50);
}
.md-typeset .danger > .admonition-title,
.md-typeset details.danger > summary {
  color: var(--atrivia-red-dark);
}
.md-typeset .danger > .admonition-title::before,
.md-typeset details.danger > summary::before {
  background-color: var(--atrivia-red);
}

/* Abstract / See also (slate) */
.md-typeset .abstract,
.md-typeset details.abstract {
  border-left-color: var(--slate-600);
  background: var(--slate-100);
}
.md-typeset .abstract > .admonition-title::before,
.md-typeset details.abstract > summary::before {
  background-color: var(--slate-600);
}

/* Modo oscuro — admonitions con efecto glass sutil */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-md-color-scheme="slate"] .md-typeset .admonition-title,
[data-md-color-scheme="slate"] .md-typeset summary {
  color: var(--slate-100);
}

[data-md-color-scheme="slate"] .md-typeset .note      { background: rgba(37, 99, 235, 0.08); }
[data-md-color-scheme="slate"] .md-typeset .tip       { background: rgba(22, 163, 74, 0.08); }
[data-md-color-scheme="slate"] .md-typeset .warning   { background: rgba(217, 119, 6, 0.08); }
[data-md-color-scheme="slate"] .md-typeset .danger    { background: rgba(220, 0, 50, 0.08); }
[data-md-color-scheme="slate"] .md-typeset .abstract  { background: rgba(71, 85, 105, 0.08); }

/* ============================================================================
   6. Imágenes (Mejora 3) — border + shadow tipo Stripe docs
   ============================================================================ */

.md-typeset img:not([class]) {
  display: block;
  margin: 28px auto;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
              0 4px 12px rgba(15, 23, 42, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.md-typeset img:not([class]):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06),
              0 12px 24px rgba(15, 23, 42, 0.08);
}

[data-md-color-scheme="slate"] .md-typeset img:not([class]) {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
              0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   7. Code blocks (Mejora 5) — Linear-style con Copy button elegante
   ============================================================================ */

/* Inline code: tag style slate (no más rojo agresivo) */
.md-typeset code:not(pre code) {
  background: var(--slate-100);
  color: var(--slate-900);
  border: 1px solid var(--slate-200);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  font-feature-settings: 'zero', 'ss01';
}

[data-md-color-scheme="slate"] .md-typeset code:not(pre code) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--slate-100);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Code block: dark background siempre (hero-style) */
.md-typeset pre > code {
  font-size: 13.5px;
  line-height: 1.6;
  padding: 16px 18px;
  border-radius: 8px;
}

.md-typeset .highlight {
  margin: 18px 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--slate-200);
}

[data-md-color-scheme="slate"] .md-typeset .highlight {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Copy button: Phosphor-style, sutil, aparece en hover */
.md-clipboard {
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
  color: var(--slate-500);
}

.md-typeset pre:hover .md-clipboard,
.md-typeset .highlight:hover .md-clipboard {
  opacity: 1;
}

.md-clipboard:hover {
  color: var(--atrivia-red);
}

/* ============================================================================
   8. Tables — cleaner borders + red accent on header
   ============================================================================ */

.md-typeset table:not([class]) {
  border: 1px solid var(--slate-200);
  box-shadow: none;
  border-radius: 6px;
  overflow: hidden;
  font-size: 14px;
}

.md-typeset table:not([class]) th {
  background-color: var(--slate-50);
  color: var(--atrivia-ink);
  font-weight: 600;
  border-bottom: 2px solid var(--atrivia-red);
  padding: 12px 14px;
  text-align: left;
}

.md-typeset table:not([class]) td {
  padding: 10px 14px;
  border-top: 1px solid var(--slate-200);
}

.md-typeset table:not([class]) tr:hover td {
  background-color: var(--slate-50);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--slate-100);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   9. Footer — corporate navy con acento rojo
   ============================================================================ */

.md-footer {
  background-color: var(--atrivia-ink);
}

.md-footer-meta {
  background-color: #000000;
}

.md-footer-meta__inner {
  border-top: 2px solid var(--atrivia-red);
}

/* ============================================================================
   10. Hero — portada del manual (index.md)
   ============================================================================ */

.atrivia-hero {
  text-align: center;
  padding: 56px 20px 48px;
  margin: -24px -12px 32px;
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  border-bottom: 1px solid var(--slate-200);
}

[data-md-color-scheme="slate"] .atrivia-hero {
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.atrivia-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--atrivia-red);
  margin-bottom: 18px;
}

.atrivia-hero__title {
  font-size: 2.75rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--atrivia-ink);
  margin: 0 auto 18px;
  max-width: 20ch;
  border-bottom: 0;
  padding-bottom: 0;
}

[data-md-color-scheme="slate"] .atrivia-hero__title {
  color: var(--slate-100);
}

.atrivia-hero__subtitle {
  font-size: 17px;
  line-height: 1.55;
  color: var(--slate-600);
  max-width: 48ch;
  margin: 0 auto 32px;
}

[data-md-color-scheme="slate"] .atrivia-hero__subtitle {
  color: var(--slate-300);
}

.atrivia-hero__cta {
  display: inline-block;
  background: var(--atrivia-red);
  color: #ffffff !important;
  padding: 12px 22px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(220, 0, 50, 0.15),
              0 4px 12px rgba(220, 0, 50, 0.2);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.atrivia-hero__cta:hover {
  background: var(--atrivia-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(220, 0, 50, 0.2),
              0 8px 20px rgba(220, 0, 50, 0.25);
}

/* Feature grid — 4 tarjetas debajo del hero */
.atrivia-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 auto 40px;
  max-width: 880px;
}

.atrivia-feature {
  padding: 16px 14px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  text-align: center;
  background: #ffffff;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.atrivia-feature:hover {
  border-color: var(--atrivia-red);
  transform: translateY(-1px);
}

[data-md-color-scheme="slate"] .atrivia-feature {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

.atrivia-feature__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--atrivia-red);
  margin-bottom: 6px;
}

.atrivia-feature__value {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-700);
  line-height: 1.4;
}

[data-md-color-scheme="slate"] .atrivia-feature__value {
  color: var(--slate-300);
}

/* Section cards (links a capítulos principales) */
.atrivia-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 32px 0;
}

/* Markdown a veces envuelve los <a> en un <p>; lo hacemos transparente al grid */
.atrivia-section-grid > p {
  display: contents;
  margin: 0;
  max-width: none;
}

.atrivia-section-card {
  display: block;
  padding: 22px 20px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--atrivia-ink) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  background: #ffffff;
}

.atrivia-section-card:hover {
  border-color: var(--atrivia-red);
  box-shadow: 0 4px 12px rgba(220, 0, 50, 0.08);
  transform: translateY(-2px);
}

[data-md-color-scheme="slate"] .atrivia-section-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--slate-100) !important;
}

.atrivia-section-card__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--atrivia-ink);
}

.atrivia-section-card__title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--atrivia-red);
}

.atrivia-section-card__desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate-600);
  margin: 0;
}

[data-md-color-scheme="slate"] .atrivia-section-card__desc {
  color: var(--slate-300);
}

/* ============================================================================
   11. Accessibility — reduced-motion + focus states
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .md-typeset img:not([class]):hover,
  .atrivia-hero__cta:hover,
  .atrivia-feature:hover,
  .atrivia-section-card:hover {
    transform: none;
  }
}

/* Focus rings visibles — obligatorio para keyboard nav */
a:focus-visible,
button:focus-visible,
.md-nav__link:focus-visible,
.atrivia-section-card:focus-visible {
  outline: 2px solid var(--atrivia-red);
  outline-offset: 2px;
  border-radius: 4px;
}