/* ============================================================================
   OSCORP CAMERAS · oscorp.css, SISTEMA ÚNICO "MUSEO EN CLARO"
   ---------------------------------------------------------------------------
   Carga la ÚLTIMA, después de style.css, minimal.css y oscor-fx.css.

   POR QUÉ EXISTE ESTA CAPA
   El sitio arrastraba dos sistemas de diseño sobre el mismo HTML: "Darkroom
   Gold" (style.css, oro #c49a2a + crema #ece0ce, art déco) y "Tesla Cinema"
   (minimal.css, papel crema + naranja Kodak). Como style.css y oscor-fx.css
   escriben el color a pelo (427 y 65 literales, contra 77 y 1 usos de var()),
   el nav y el top-bar se pintaban con la paleta vieja sobre los fondos nuevos:
   69 fallos de contraste medidos, con el top-bar en 1,16:1 y los botones
   .btn--outline en 1,00:1, negro sobre negro, invisibles.

   CÓMO LO RESUELVE
   1. Redefine los tokens. minimal.css sí está construido sobre variables
      (305 usos), así que toda su superficie cambia sola.
   2. Ataca por nombre a los selectores que incrustan el color y que por tanto
      ninguna variable puede alcanzar.
   3. Elimina la alternancia claro/oscuro: el papel es el mismo en toda la
      página y lo único oscuro es la fotografía. Por eso destaca.

   REGLA DE ORO
   Si añades color aquí, escríbelo como token en :root y úsalo con var().
   Nada de literales fuera del bloque de tokens.
   ============================================================================ */

/* === 1. TOKENS · la única paleta del sitio ================================ */
:root {
  /* Papel. Un solo fondo en todo el sitio. */
  --paper:          #f5f1eb;
  --paper-sunk:     #efe9df;   /* hundido sutil: inputs, celdas, citas */
  --card:           #ffffff;

  /* Tinta. Los tres niveles pasan AA sobre papel (6,5:1 / 5,0:1). */
  --ink:            #17150f;
  --ink-2:          #5c574c;
  --ink-3:          #6e685c;

  /* Líneas. La estructura la hace la línea, no el bloque de color. */
  --rule:           rgba(23, 21, 15, .12);
  --rule-strong:    rgba(23, 21, 15, .24);

  /* Acento Kodak, en dos versiones y NO son intercambiables:
     --accent      va en texto (4,7:1 sobre papel, cumple AA).
     --accent-lit  es el naranja de marca, solo para superficie, filete o
                   tipografía muy grande. En texto pequeño da 2,8:1 y falla. */
  /* Medido: #c2410c daba 4,29:1 sobre --paper-sunk, justo por debajo del
     minimo AA. #b03a0a da 5,48:1 sobre papel y 5,03:1 sobre papel hundido. */
  --accent:         #b03a0a;
  --accent-lit:     #ff5a1f;
  --accent-sunk:    rgba(194, 65, 12, .09);

  /* La fotografía es lo único oscuro de la página. */
  --photo:          #12100e;

  /* Ritmo vertical. Antes: 128px arriba + 128px abajo = 256px de aire muerto
     entre bloques, y una home de 24.000px. */
  --gap-section:    4.5rem;
  --measure:        68ch;      /* medida de lectura cómoda */
}

/* Los tokens heredados de minimal.css se reasignan al sistema nuevo, para que
   sus 305 var() apunten aquí sin tocar aquel archivo. */
:root {
  --bg: var(--paper);          --bg-2: var(--paper);
  --bg-pure: var(--card);      --bg-alt: var(--paper-sunk);
  --bg-card: var(--card);      --bg-card-hover: var(--paper-sunk);
  --bg-section: var(--paper);  --bg-dark: var(--paper);

  --text: var(--ink);          --text-2: var(--ink-2);   --text-3: var(--ink-3);
  --text-primary: var(--ink);  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);

  /* Clave del cambio: las secciones oscuras se vuelven papel, así que su texto
     "sobre oscuro" tiene que volverse tinta o desaparece. */
  --text-on-dark: var(--ink);  --text-on-dark-2: var(--ink-2);
  --b-on-dark: var(--rule);    --b-on-dark-2: var(--rule-strong);

  --b: var(--rule);            --b2: var(--rule-strong);
  --border: var(--rule);       --border-2: var(--rule-strong);
  --border-accent: rgba(194, 65, 12, .45);

  /* El oro del sistema viejo deja de existir. */
  --gold: var(--accent);       --gold-light: var(--accent-lit);
  --gold-muted: var(--accent); --gold-glow: var(--accent-sunk);
  --accent-light: var(--accent-lit);
  --accent-hi: var(--accent-lit);
  --accent-dark: var(--accent);
  --kodak: var(--accent);      --kodak-2: var(--accent);
  --kodak-soft: var(--accent-sunk);
  --kodak-line: rgba(194, 65, 12, .3);

  --shadow: none;
  --shadow-card: 0 1px 2px rgba(23, 21, 15, .05);
  --shadow-gold: none;
}

/* === 2. BASE ============================================================== */
html { background: var(--paper); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* La textura de grano del sistema viejo enturbiaba el papel. */
body::before, body::after { display: none !important; content: none !important; }

::selection { background: var(--accent-sunk); color: var(--ink); }

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* === 3. RITMO VERTICAL ====================================================
   Un solo fondo, y la separación la marca una línea de cabello en lugar de un
   cambio de color. Padding simétrico pero la mitad del que había. */

.section,
.section--light,
.section--dark {
  background: var(--paper) !important;
  color: var(--ink);
  padding-block: var(--gap-section);
}

.section + .section { border-top: 1px solid var(--rule); }

.section--dark *,
.section--light * { border-color: var(--rule); }

/* Las secciones oscuras tenían texto crema incrustado. */
.section--dark h2, .section--dark h3, .section--dark h4,
.section--dark p,  .section--dark li, .section--dark span,
.section--dark strong, .section--dark em, .section--dark td, .section--dark th {
  color: inherit;
}
.section--dark p, .section--dark li { color: var(--ink-2); }

/* === 4. TIPOGRAFÍA ======================================================== */
.section__title,
.section h2, .showcase__title, .storyboard__title {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.section__title { font-size: clamp(2rem, 4.2vw, 3.4rem); }

.section h2 em,
.showcase__title em,
.storyboard__title em {
  font-style: italic;
  color: var(--accent);
}

/* Antígua: 12px naranja #ff5a1f sobre papel = 2,8:1. Ahora --accent = 4,7:1. */
.section__eyebrow,
.showcase__eyebrow,
.storyboard__eyebrow {
  color: var(--accent);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.section__subtitle,
.showcase__subtitle {
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: var(--measure);
}

.section p, .section li { color: var(--ink-2); }
.section p { max-width: var(--measure); }

/* Los pies de foto estaban en #8a8378 = 3,75:1. */
figcaption,
.polaroid__caption,
.showcase__caption,
.blog-card__meta,
.category-card__desc {
  color: var(--ink-3);
}

/* === 5. TOP BAR ===========================================================
   Era el peor fallo del sitio: crema #ece0ce sobre papel = 1,16:1. */
.top-bar {
  background: var(--ink) !important;
  border-bottom: none;
  color: #f5f1eb;
}
.top-bar__text,
.top-bar__text strong,
.top-bar__sep { color: #f5f1eb !important; }
.top-bar__text em { color: rgba(245, 241, 235, .8) !important; }
.top-bar__stars { color: var(--accent-lit) !important; letter-spacing: .1em; }
.top-bar__cta {
  color: #f5f1eb !important;
  border-bottom: 1px solid rgba(245, 241, 235, .45);
  text-decoration: none;
}
.top-bar__cta:hover { border-bottom-color: #f5f1eb; }

/* === 6. NAVEGACIÓN ======================================================== */
.nav-header {
  background: rgba(245, 241, 235, .88) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}

.nav__logo { color: var(--ink) !important; letter-spacing: -.01em; }
.nav__logo span { color: var(--ink-3) !important; }

.nav__link { color: var(--ink-2) !important; background: none !important; }
.nav__link:hover { color: var(--ink) !important; }

/* Estaba en oro #f0cc60 sobre papel = 1,38:1. */
.nav__link.active {
  color: var(--ink) !important;
  font-weight: 600;
  background: none !important;
}

.nav__cta {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px;
}
.nav__cta:hover { background: var(--accent) !important; border-color: var(--accent) !important; }

.lang-switcher__active { color: var(--ink) !important; border-bottom: 1px solid var(--accent); }
.lang-switcher__link   { color: var(--ink-3) !important; }
.lang-switcher__link:hover { color: var(--ink) !important; }
.lang-switcher__sep    { color: var(--rule-strong) !important; }

.nav__toggle span { background: var(--ink) !important; }

/* Mega menú, vive solo en style.css, con oro y crema incrustados. */
.nav__dropdown--mega {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 24px 60px rgba(23, 21, 15, .1) !important;
}
.mega-item { background: none !important; border-radius: 4px; }
.mega-item:hover { background: var(--paper-sunk) !important; }
.mega-item__title { color: var(--ink) !important; font-weight: 600; }
.mega-item__desc  { color: var(--ink-3) !important; }
.mega-footer { border-top: 1px solid var(--rule) !important; }
.mega-footer a { color: var(--accent) !important; }

/* === 7. BOTONES ===========================================================
   .btn--outline daba 1,00:1: color #0a0a0a sobre fondo #0a0a0a. Invisible. */
.btn {
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn--primary,
.btn--wallapop {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
}
.btn--primary:hover,
.btn--wallapop:hover { background: var(--accent) !important; border-color: var(--accent) !important; }

.btn--outline,
.btn--ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule-strong) !important;
}
.btn--outline:hover,
.btn--ghost:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}

/* === 8. LA FOTOGRAFÍA, ÚNICO ELEMENTO OSCURO ============================== */
.showcase__panel,
.storyboard,
.storyboard__visual,
.storyboard__chapter { background: var(--paper) !important; }

.showcase__media,
.storyboard__media-stack,
.polaroid,
.category-card__image,
.blog-card__image,
.featured-strip__img {
  background: var(--photo);
  border-radius: 4px;
  overflow: hidden;
}

.showcase__title, .storyboard__title { color: var(--ink) !important; }
.showcase__subtitle, .storyboard__text { color: var(--ink-2) !important; }
.showcase__caption { color: var(--ink-3) !important; }

.storyboard__hud,
.storyboard__hud-counter,
.storyboard__hud-label { color: var(--ink-3) !important; }
.storyboard__hud-sep { background: var(--rule) !important; }

.frame-tag {
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  background: var(--paper) !important;
}

/* === 9. TARJETAS ========================================================== */
.category-card,
.blog-card,
.review-card,
.faq-item,
.quiz-step {
  background: var(--card) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 6px;
  box-shadow: none !important;
}
.category-card:hover,
.blog-card:hover { border-color: var(--rule-strong) !important; }

.category-card__name,
.blog-card__title,
.review-card strong { color: var(--ink) !important; }
.blog-card__excerpt { color: var(--ink-2) !important; }
.category-card__footer,
.blog-card__footer { color: var(--accent) !important; border-top: 1px solid var(--rule); }

.badge {
  background: var(--accent-sunk) !important;
  color: var(--accent) !important;
  border: none !important;
}

.trust-stat { border-left: 1px solid var(--rule); padding-left: 1.25rem; }
.trust-stat__value {
  color: var(--ink) !important;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  letter-spacing: -.04em;
}
.trust-stat__label { color: var(--ink-3) !important; }

/* === 10. MARQUESINA ======================================================= */
.marquee {
  background: var(--paper) !important;
  border-block: 1px solid var(--rule) !important;
  color: var(--ink-3);
}
.marquee__item { color: var(--ink-3) !important; }

/* === 11. BANNER DE COOKIES ================================================
   Lleva su propio <style> inline en includes/cookie-banner.php con la paleta
   art déco (Poiret One + oro). Se reasigna aquí para no tocar aquel archivo. */
.cookie-banner,
.cookie-modal__panel {
  background: var(--ink) !important;
  border: none !important;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3) !important;
}
.cookie-banner__title,
.cookie-modal__panel h2 {
  font-family: 'Inter Tight', sans-serif !important;
  color: #f5f1eb !important;
  font-weight: 600;
  letter-spacing: -.02em;
}
.cookie-banner__text,
.cookie-modal__intro,
.cookie-cat__desc { color: rgba(245, 241, 235, .78) !important; }
.cookie-cat__name  { color: #f5f1eb !important; }
.cookie-banner__text a,
.cookie-modal__intro a { color: var(--accent-lit) !important; }

.cookie-btn {
  font-family: 'Inter', sans-serif !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.cookie-btn--primary {
  background: #f5f1eb !important;
  color: var(--ink) !important;
  border: 1px solid #f5f1eb !important;
}
.cookie-btn--ghost {
  background: transparent !important;
  color: #f5f1eb !important;
  border: 1px solid rgba(245, 241, 235, .35) !important;
}
.cookie-btn--ghost:hover { border-color: #f5f1eb !important; }

/* === 12. PIE ============================================================== */
.footer {
  background: var(--paper) !important;
  border-top: 1px solid var(--rule) !important;
  color: var(--ink-2);
}
.footer a { color: var(--ink-2) !important; }
.footer a:hover { color: var(--ink) !important; }
.footer h3, .footer h4, .footer strong { color: var(--ink) !important; }

/* === 13. ICONOGRAFÍA PROPIA ===============================================
   Sprite en includes/icons.php, helper icon() en includes/functions.php.
   Solo para definir conceptos. Ver el alcance escrito en icons.php. */
.ico-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  vertical-align: middle;
  flex: none;
  color: var(--accent);
}
.ico--lg { width: 2.25rem; height: 2.25rem; }
.ico--sm { width: 1.125rem; height: 1.125rem; }
.ico--ink { color: var(--ink); }
.ico--muted { color: var(--ink-3); }

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

/* === 15. MÓVIL ============================================================ */
@media (max-width: 860px) {
  :root { --gap-section: 3rem; }

  .nav__menu {
    background: var(--paper) !important;
    border-top: 1px solid var(--rule) !important;
  }
  .nav__menu .nav__link { color: var(--ink) !important; }

  .top-bar__inner { font-size: .72rem; }
  .top-bar__text em { display: none; }
}

/* === 16. LA PORTADA, LO ÚNICO OSCURO A SANGRE ==============================
   El hero es una fotografía a pantalla completa: se queda oscuro a propósito,
   y es el contraste con el papel del resto lo que lo convierte en portada.
   Todo lo que va sobre él necesita tinta clara, o desaparece. */
:root {
  --on-photo:   #f5f1eb;
  --on-photo-2: rgba(245, 241, 235, .82);
  --on-photo-3: rgba(245, 241, 235, .62);
}

.hero { background: var(--photo) !important; color: var(--on-photo); }

.hero h1, .hero__title, .hero__title *,
.hero strong, .hero em { color: var(--on-photo) !important; }
.hero__subtitle, .hero p { color: var(--on-photo-2) !important; }
.hero__eyebrow { color: var(--on-photo-3) !important; }

.hero .btn--primary {
  background: var(--on-photo) !important;
  color: var(--photo) !important;
  border-color: var(--on-photo) !important;
}
.hero .btn--outline,
.hero .btn--ghost {
  color: var(--on-photo) !important;
  border-color: rgba(245, 241, 235, .4) !important;
  background: transparent !important;
}
.hero .btn--outline:hover,
.hero .btn--ghost:hover {
  background: var(--on-photo) !important;
  color: var(--photo) !important;
}

/* El showcase sí pasa a papel: sus fotos ya son oscuras por dentro, así que
   no necesita un fondo oscuro que compita con ellas. */
.showcase { background: var(--paper) !important; color: var(--ink); }

/* Cualquier rótulo que se superponga a una foto va en tinta clara. */
.showcase__media .frame-tag,
.showcase__media .showcase__caption,
.storyboard__media-stack .frame-tag {
  color: var(--on-photo) !important;
  border-color: rgba(245, 241, 235, .5) !important;
  background: rgba(18, 16, 14, .55) !important;
  backdrop-filter: blur(6px);
}

/* .polaroid es el marco con su pie debajo, no la foto: va en papel. */
.polaroid { background: var(--paper-sunk) !important; }
.polaroid__caption { color: var(--ink-3) !important; }

/* El storyboard heredaba crema #ece0ce de oscor-fx.css. */
.storyboard,
.storyboard__visual, .storyboard__visual-inner,
.storyboard__chapters, .storyboard__chapter, .storyboard__chapter-inner {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
.storyboard__text { color: var(--ink-2) !important; }
.storyboard__hud-counter span { color: var(--accent) !important; }

/* El "CAMERAS" del pie conservaba el oro #c49a2a de style.css con opacity .4,
   lo que lo dejaba en 2,33:1. */
.footer__brand-name span {
  color: var(--ink-3) !important;
  opacity: 1 !important;
}

/* === 17. TABLAS DE DATOS ==================================================
   La tabla comparativa es el activo de las guías: es lo que se cita en los
   resúmenes de IA y lo que ningún competidor publica. Va como <table> real,
   nunca como imagen, y desborda en horizontal dentro de su propio contenedor
   para que el cuerpo de la página no scrollee de lado en móvil. */
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2rem 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
}

.tbl {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .92rem;
  line-height: 1.45;
}

.tbl caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.1rem .75rem;
  color: var(--ink-3);
  font-size: .8rem;
  border-bottom: 1px solid var(--rule);
}

.tbl th,
.tbl td { padding: .7rem 1.1rem; text-align: left; vertical-align: top; }

.tbl thead th {
  background: var(--paper-sunk);
  color: var(--ink);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule-strong);
  position: sticky;
  top: 0;
}

.tbl tbody tr + tr td { border-top: 1px solid var(--rule); }
.tbl tbody tr:hover td { background: var(--paper-sunk); }
.tbl td { color: var(--ink-2); }
.tbl th[scope="row"] { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* Celda sin dato: se marca, no se rellena a ojo. */
.tbl .na { color: var(--ink-3); }

/* Dato destacado de una fila (el precio de referencia). */
.tbl .num { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }

/* Sello de verificación: la fecha visible es la señal E-E-A-T que separa esta
   página de un reportaje de 2018 y de un agregador automático. */
.verified {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  margin: 2rem 0;
  border-left: 2px solid var(--accent);
  background: var(--paper-sunk);
  border-radius: 0 4px 4px 0;
  font-size: .9rem;
  color: var(--ink-2);
}
.verified strong { color: var(--ink); }

/* Bloque de escenario ("según tu caso"). */
.caso {
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule);
}
.caso:last-child { border-bottom: 1px solid var(--rule); }
.caso h3 { margin: 0 0 .35rem; font-size: 1.02rem; color: var(--ink); font-weight: 600; }
.caso p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.caso strong { color: var(--accent); }

@media (max-width: 640px) {
  .tbl { font-size: .85rem; }
  .tbl th, .tbl td { padding: .6rem .8rem; }
}

/* style.css define este enlace con un selector mas especifico y ganaba por
   especificidad, dejando el oro viejo en 2,33:1. */
.nav__dropdown--mega .mega-footer a,
.nav__dropdown .mega-footer a { color: var(--accent) !important; }

/* === 18. GLOSARIO =========================================================
   Cada entrada es una unidad citable e independiente: un modelo de lenguaje
   tiene que poder tomar la definicion de "telemetrica" sin arrastrar el resto
   de la pagina. Por eso van en <dl> con ancla propia y no en una lista suelta. */
.glosario-lista { margin: 1.75rem 0 0; }

.glosario-item {
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 6rem;   /* que el ancla no quede bajo el nav fijo */
}
.glosario-item:last-child { border-bottom: 1px solid var(--rule); }

.glosario-item dt {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: .3rem;
}
.glosario-item dt a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.glosario-item dt a:hover { color: var(--accent); }

.glosario-item dd {
  margin: 0;
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.6;
  max-width: var(--measure);
}

.glosario-indice {
  columns: 3 200px;
  column-gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  font-size: .9rem;
}
.glosario-indice li { break-inside: avoid; padding: .18rem 0; }
.glosario-indice a { color: var(--ink-2); text-decoration: none; }
.glosario-indice a:hover { color: var(--accent); }

/* Sello de imagen generada. La distincion entre fotografia de la coleccion e
   ilustracion generada es obligatoria: la autoridad del sitio se apoya en que
   las fotos son de piezas reales que Pol tiene en la mano. */
.img-ia {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  padding: .2rem .55rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.img-ia::before {
  content: "C";
  display: grid;
  place-items: center;
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: .62rem;
  font-weight: 700;
}