:root {
  color-scheme: dark;
  --color-bg-main: #0B0E14;
  --color-bg-surface: #161B26;
  --color-primary: #0052FF;
  --color-secondary: #7928CA;
  --color-accent: #00DFD8;
  --color-text-main: #FFFFFF;
  --color-text-muted: #8F9CAE;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-light: #171B23;
  --color-success: #10B981;
  --color-border: rgba(255, 255, 255, 0.08);

  --finvia-bg-elevated: #1D2433;
  --finvia-bg-soft: rgba(255, 255, 255, 0.03);
  --finvia-input-bg: rgba(255, 255, 255, 0.04);
  --finvia-focus: rgba(0, 223, 216, 0.34);
  --finvia-gradient: linear-gradient(90deg, #0052FF 0%, #7928CA 100%);
  --finvia-hero-bg:
    radial-gradient(circle at 12% 18%, rgba(0, 82, 255, 0.18), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(121, 40, 202, 0.16), transparent 32%),
    linear-gradient(135deg, #0B0E14 0%, #121826 100%);
  --font-sans: "Inter", sans-serif;
  --verde: var(--color-primary);
  --esmeralda: var(--color-secondary);
  --menta: var(--color-accent);
  --dorado: var(--color-primary);
  --arena: var(--color-bg-main);
  --carbon: var(--color-text-main);
  --blanco: var(--color-bg-surface);
  --radius: 16px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg-main: #F5F7F8;
  --color-bg-surface: #FFFFFF;
  /* El cian de marca (#00DFD8) funciona como luz en superficies oscuras, pero
     sobre blanco solo alcanza ~1.7:1. En claro, el acento usa el morado de la
     misma paleta para mantener contraste AA sin recurrir a negro. */
  --color-accent: #7928CA;
  --color-text-main: #171B23;
  --color-text-muted: #5F6B7D;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-light: #171B23;
  --color-border: rgba(11, 14, 20, 0.1);
  --finvia-bg-elevated: #EDF2F7;
  --finvia-bg-soft: rgba(0, 82, 255, 0.04);
  --finvia-input-bg: rgba(11, 14, 20, 0.03);
  --finvia-focus: rgba(121, 40, 202, 0.32);
  --finvia-hero-bg:
    radial-gradient(circle at 12% 18%, rgba(0, 82, 255, 0.1), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(121, 40, 202, 0.1), transparent 32%),
    linear-gradient(135deg, #FFFFFF 0%, #F5F7F8 100%);
}

* {
  scrollbar-color: color-mix(in srgb, var(--color-text-muted) 38%, transparent) transparent;
}

html {
  background: var(--color-bg-main);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% -10%, rgba(0, 82, 255, 0.12), transparent 30%),
    radial-gradient(circle at 82% 0%, rgba(121, 40, 202, 0.1), transparent 28%),
    var(--color-bg-main) !important;
  color: var(--color-text-main) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body,
button,
input,
select,
textarea,
.body-text,
.display,
.heading,
.btn,
.global-btn,
.finvia-global-btn {
  font-family: var(--font-sans) !important;
}

.display,
h1,
h2,
h3,
.hero-title,
.section-title,
.cta-title,
.stat-number,
.how-card-headline,
.page-heading,
.topbar-title,
.modal-title,
.compare-modal-header h2 {
  color: var(--color-text-main) !important;
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

p,
.body-text,
.section-sub,
.hero-sub,
.feature-desc,
.blog-excerpt,
.finance-desc,
.card-description,
.card p,
.metric dt,
.field label,
.summary,
.provider-name,
.card-side-caption,
.card-list-metric-caption,
.global-dropdown-desc,
.finvia-dropdown-desc {
  color: var(--color-text-muted) !important;
}

.panel,
.card,
.testimonial-card,
.finance-card,
.bank-strip,
.sidebar-panel,
.metric,
.state,
.compare-modal,
.compare-table,
.fact,
.sheet-item,
.pill,
.rewards-body,
.insurance-body,
.card-copy,
.card-list-copy,
.card-list-side,
.product-item {
  color: var(--color-text-main) !important;
}

.metric dd,
.fact dd,
.sheet-value,
.filter-option-label,
.card-detail-item,
.product-item-name,
.finance-title,
.feature-title,
.blog-title,
.provider-name strong,
td,
li {
  color: var(--color-text-main) !important;
}

.brand-panel,
.brand-panel .brand-heading,
.brand-panel .brand-desc,
.brand-panel .brand-footer,
.brand-panel .brand-bullet,
.brand-panel li {
  color: #FFFFFF !important;
}

.brand-panel .brand-desc,
.brand-panel .brand-footer {
  color: rgba(255, 255, 255, 0.78) !important;
}

.brand-panel .brand-eyebrow,
.brand-panel .brand-heading em,
.brand-panel .brand-bullet-icon {
  color: var(--color-accent) !important;
}

.brand-panel .brand-bullet-icon {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.form-panel-title,
.info-card-title,
.topics-title,
.success-heading {
  color: var(--color-text-main) !important;
}

#contact-form .form-label,
#contact-form .form-check-label,
.topics-card .topic-item {
  color: color-mix(in srgb, var(--color-text-main) 82%, var(--color-text-muted)) !important;
}

#contact-form .form-check-label {
  color: color-mix(in srgb, var(--color-text-main) 72%, var(--color-text-muted)) !important;
}

#contact-form .form-label span[style] {
  color: var(--color-text-muted) !important;
}

#contact-form .form-label span:not([style]),
#contact-form .form-check-label a {
  color: var(--color-primary) !important;
}

:root:not([data-theme="light"]) #contact-form .form-label span:not([style]),
:root:not([data-theme="light"]) #contact-form .form-check-label a {
  color: var(--color-accent) !important;
}

.response-card,
.response-card p,
.response-card-title,
.response-card-time,
.response-card-sub {
  color: #FFFFFF !important;
}

.response-card .response-badge-text {
  color: var(--color-accent) !important;
}

.hero,
.compare-bar,
footer {
  --color-readable-on-current-bg: var(--color-text-on-dark);
}

a {
  color: inherit;
}

::selection {
  background: color-mix(in srgb, var(--color-accent) 28%, transparent);
  color: var(--color-text-main);
}

.container {
  max-width: 1200px;
}

nav,
.global-topbar,
.finvia-global-topbar,
.topbar {
  background: rgba(11, 14, 20, 0.82) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

:root[data-theme="light"] nav,
:root[data-theme="light"] .global-topbar,
:root[data-theme="light"] .finvia-global-topbar,
:root[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.82) !important;
}

.nav-logo img,
.global-logo img,
.finvia-global-logo img,
.footer-logo {
  object-fit: contain;
  filter: none !important;
}

.nav-links a,
.global-nav-link,
.finvia-nav-link,
.footer-links a,
.footer-legal a,
.blog-link,
.card-inline-link,
.back-link {
  color: var(--color-text-muted) !important;
  font-family: var(--font-sans) !important;
}

.nav-links a:hover,
.global-nav-link:hover,
.finvia-nav-link:hover,
.footer-links a:hover,
.footer-legal a:hover,
.blog-link:hover,
.card-inline-link:hover,
.back-link:hover {
  color: var(--color-accent) !important;
}

.sf-dropdown,
.sg-dropdown,
.global-dropdown-menu,
.finvia-dropdown-menu,
.nav-profile-menu,
.global-profile-menu,
.finvia-profile-menu {
  background: color-mix(in srgb, var(--color-bg-surface) 94%, transparent) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

.sf-dropdown a,
.sg-dropdown a,
.global-dropdown-menu a,
.finvia-dropdown-menu a,
.nav-profile-menu a,
.nav-profile-menu button,
.global-profile-menu a,
.global-profile-menu button,
.finvia-profile-menu a,
.finvia-profile-menu button {
  color: var(--color-text-main) !important;
}

.sf-dropdown a:hover,
.sg-dropdown a:hover,
.global-dropdown-menu a:hover,
.finvia-dropdown-menu a:hover,
.nav-profile-menu a:hover,
.nav-profile-menu button:hover,
.global-profile-menu a:hover,
.global-profile-menu button:hover,
.finvia-profile-menu a:hover,
.finvia-profile-menu button:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--color-accent) !important;
}

:root[data-theme="light"] .sf-dropdown a:hover,
:root[data-theme="light"] .sg-dropdown a:hover,
:root[data-theme="light"] .global-dropdown-menu a:hover,
:root[data-theme="light"] .finvia-dropdown-menu a:hover,
:root[data-theme="light"] .nav-profile-menu a:hover,
:root[data-theme="light"] .nav-profile-menu button:hover,
:root[data-theme="light"] .global-profile-menu a:hover,
:root[data-theme="light"] .global-profile-menu button:hover,
:root[data-theme="light"] .finvia-profile-menu a:hover,
:root[data-theme="light"] .finvia-profile-menu button:hover {
  background: rgba(0, 82, 255, 0.05) !important;
}

.hero,
.hero-bg,
.insurance-shell,
.financial-shell,
.cta-box,
.how-card-main,
.compare-modal-header,
.compare-bar {
  background: var(--finvia-hero-bg) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

.hero {
  border-radius: 16px !important;
}

.hero::before,
.insurance-shell::before,
.financial-shell::before,
.cta-box::before {
  background:
    radial-gradient(circle at 18% 20%, rgba(0, 82, 255, 0.12), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(121, 40, 202, 0.1), transparent 28%) !important;
}

.hero-orb,
.cta-orb {
  display: none !important;
}

.hero-noise {
  opacity: 0.12 !important;
}

.hero-title em,
.section-tag,
.hero-badge,
.hero-tag,
.cta-tag,
.finance-chip,
.chip,
.blog-kicker,
.product-item-tag {
  color: var(--color-accent) !important;
}

.hero-badge,
.cta-tag,
.finance-chip,
.chip,
.blog-kicker,
.product-item-tag,
.category-chip,
.filter-option {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent) !important;
}

.hero-badge .dot,
.section-tag::before,
.step-num,
.product-item-icon {
  background: var(--color-accent) !important;
  color: var(--color-bg-main) !important;
}

.features,
.how,
.testimonials,
.cta-section,
.financial-services,
main {
  background: transparent !important;
}

.reveal {
  opacity: 1 !important;
  transform: none !important;
}

.panel,
.card,
.testimonial-card,
.finance-card,
.bank-strip,
.sidebar-panel,
.brand-filter-btn,
.brand-filter-icon,
.filter-option,
.metric,
.state,
.insurance-card,
.insurance-state,
.compare-modal,
.compare-slot,
.preview,
.facts,
.fact,
.sheet-item,
.benefits li,
.pill,
.rewards-body,
.insurance-body,
.footer-top,
.blog-card {
  background: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.card,
.feature-card,
.testimonial-card,
.finance-card,
.bank-strip,
.panel,
.sidebar-panel {
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease !important;
}

.card:hover,
.testimonial-card:hover,
.finance-card:hover,
.brand-filter-btn:hover,
.filter-option:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--color-accent) 34%, transparent) !important;
  box-shadow: none !important;
}

.feature-card.featured,
.testimonial-card.highlight {
  background: linear-gradient(135deg, rgba(0, 82, 255, 0.18), rgba(121, 40, 202, 0.14)), var(--color-bg-surface) !important;
  border-color: var(--color-border) !important;
}

.feature-card::after {
  background: var(--finvia-gradient) !important;
}

.finance-card-media,
.card-media,
.insurance-provider-logo,
.bank-logo-wrap,
.provider-logo {
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 36%),
    var(--finvia-bg-soft) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

.bank-logo-wrap img {
  filter: grayscale(1) contrast(0.92) !important;
  opacity: 0.72 !important;
}

.bank-logo-wrap:hover img {
  filter: grayscale(0) !important;
  opacity: 1 !important;
}

.btn,
.global-btn,
.finvia-global-btn,
.btn-compare,
.btn-compare-run,
.btn-compare-clear,
button {
  font-family: var(--font-sans) !important;
}

.btn-primary,
.btn-gold,
.btn-solid,
.btn-white,
.global-btn-solid,
.finvia-btn-solid,
.btn-compare-run,
.category-chip.is-active,
.view-toggle-btn.is-active,
.btn-compare.is-selected,
.global-btn.global-btn-solid,
.finvia-global-btn.finvia-btn-solid {
  background: var(--finvia-gradient) !important;
  border: 0 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.btn-outline,
.btn-outline-white,
.btn-ghost,
.btn-soft,
.global-btn-outline,
.finvia-btn-outline,
.btn-compare,
.btn-compare-clear {
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-main) !important;
  font-weight: 700 !important;
}

.btn-outline:hover,
.btn-outline-white:hover,
.btn-ghost:hover,
.btn-soft:hover,
.global-btn-outline:hover,
.finvia-btn-outline:hover,
.btn-compare:hover,
.btn-compare-clear:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-main) !important;
}

:root[data-theme="light"] .btn-outline:hover,
:root[data-theme="light"] .btn-outline-white:hover,
:root[data-theme="light"] .btn-ghost:hover,
:root[data-theme="light"] .btn-soft:hover,
:root[data-theme="light"] .global-btn-outline:hover,
:root[data-theme="light"] .finvia-btn-outline:hover,
:root[data-theme="light"] .btn-compare:hover,
:root[data-theme="light"] .btn-compare-clear:hover {
  background: rgba(0, 82, 255, 0.05) !important;
}

input,
select,
textarea {
  background: var(--finvia-input-bg) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-main) !important;
  border-radius: 12px !important;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 76%, transparent) !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.global-btn:focus-visible,
.finvia-global-btn:focus-visible {
  outline: 3px solid var(--finvia-focus) !important;
  outline-offset: 2px !important;
}

table,
.compare-table {
  border-collapse: collapse !important;
  color: var(--color-text-main) !important;
}

table th,
table td,
.compare-table th,
.compare-table td {
  border-bottom: 1px solid var(--color-border) !important;
}

table th,
.compare-table th,
.compare-table td:first-child,
table td:first-child {
  color: var(--color-text-muted) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

table tbody tr,
.compare-table tbody tr {
  transition: background-color 200ms ease !important;
}

table tbody tr:hover,
.compare-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

:root[data-theme="light"] table tbody tr:hover,
:root[data-theme="light"] .compare-table tbody tr:hover {
  background: rgba(11, 14, 20, 0.03) !important;
}

.compare-table th:first-child,
.compare-table td:first-child {
  background: var(--color-bg-surface) !important;
}

.compare-table .col-card,
.compare-table td.col-card,
.compare-table th.col-card {
  background: var(--color-bg-surface) !important;
}

.compare-table .col-card.is-highlight,
.card.is-recommended,
.insurance-card.is-recommended,
.finance-card.is-recommended,
.product-item.is-recommended {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 1px var(--color-accent) inset !important;
}

.compare-table .col-card.is-highlight {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent), var(--color-bg-surface) !important;
}

.best-option-badge,
.recommendation-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-accent) !important;
  color: var(--color-bg-main) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.card > .recommendation-badge {
  position: absolute;
  top: 14px;
  right: 14px;
}

.cards--list .card > .recommendation-badge {
  top: 12px;
  right: 16px;
}

.compare-table .card-col-header {
  position: relative;
}

.compare-table .card-col-header .best-option-badge {
  margin: 0 auto 12px;
}

.compare-cell-item,
.card-detail-item,
.fact-list li {
  background: var(--finvia-bg-soft) !important;
  border: 1px solid var(--color-border) !important;
}

.compare-val-highlight,
.card-side-value,
.card-list-metric-value,
.metric--key dd,
.stat-number span,
.footer-copy span {
  color: var(--color-accent) !important;
}

footer {
  background: var(--color-bg-surface) !important;
  color: var(--color-text-muted) !important;
  border-top: 1px solid var(--color-border);
}

.finvia-theme-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-main);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  padding: 10px 14px;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.finvia-theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="light"] .finvia-theme-toggle:hover {
  background: rgba(0, 82, 255, 0.05);
}

.finvia-theme-toggle-mark {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-block;
  background:
    radial-gradient(circle at 70% 30%, var(--color-accent) 0 18%, transparent 19%),
    var(--finvia-gradient);
  box-shadow: 0 0 0 1px var(--color-border);
}

@media (max-width: 680px) {
  .finvia-theme-toggle-label {
    display: none;
  }

  .card > .recommendation-badge {
    position: static;
    margin-bottom: -2px;
  }
}

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

/* ── Filtro de subcategoría: la selección tiene que verse ────────────────────
   Los botones de subcategoría son la variante de texto de .brand-filter-btn, y
   marcaban la selección solo con fondo + borde. Las reglas de superficie de
   este tema (background/border con !important, más arriba) los pisan, así que
   el clic filtraba los resultados pero el botón no cambiaba: el usuario veía
   moverse el catálogo sin saber qué había marcado. La casilla es la misma que
   ya usa el filtro de entidad, para que ambos bloques se lean igual.
   Va después de esas reglas y no dentro del <style> de cada catálogo porque
   /seguros/ y /servicios-financieros/ comparten el componente. */
.brand-filter-btn--text::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 5px;
  border: 1.5px solid rgba(0, 82, 255, 0.35);
  background: #fff;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.brand-filter-btn--text.is-active::before {
  border-color: var(--verde);
  background: var(--verde);
  box-shadow: inset 0 0 0 4px #fff;
}

.brand-filter-btn--text.is-active,
.brand-filter-btn--text.is-active:hover {
  border-color: var(--verde) !important;
  background: color-mix(in srgb, var(--verde) 14%, var(--color-bg-surface)) !important;
}

/* En móvil el grid pasa a dos columnas para los logos de marca, pero una
   subcategoría es texto: "Capital De Trabajo" no cabe en media columna y se
   cortaba. Con la casilla de arriba queda todavía menos ancho, así que la
   variante de texto se mantiene en una sola columna. */
@media (max-width: 680px) {
  .brand-filter-grid--text {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* En la variante de texto, .brand-filter-icon es la etiqueta, no el marco de un
   logo: con el borde y el fondo del tema parecía un campo de formulario vacío. */
.brand-filter-btn--text .brand-filter-icon {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ── Accesibilidad táctil en móvil ───────────────────────────────────────────
   La mayoría de dueños de PYME entra desde el celular, así que estas reglas son
   de producto, no cosméticas. Van al final del tema para ganarle a los <style>
   embebidos de cada página; de ahí el !important en lo que no es negociable. */
@media (max-width: 760px) {
  /* iOS Safari hace zoom automático al enfocar un campo con font-size < 16px.
     El zoom recorta el layout y deja al usuario perdido a media página. 16px es
     el umbral exacto: no es preferencia estética, es el disparador del bug. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Objetivo táctil mínimo de 44px (Apple HIG y WCAG 2.5.5).
     Se aplica a controles reales. Los enlaces dentro de un párrafo quedan
     fuera a propósito: WCAG 2.5.8 exceptúa el texto en línea, y estirarlos
     rompería el interlineado de la prosa. */
  button,
  [role="button"],
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"],
  select {
    min-height: 44px;
  }

  /* Controles que el audit a 375px encontró por debajo del mínimo. */
  .btn-compare,
  .btn-compare-clear,
  .btn-compare-run,
  .auth-tab,
  .forgot-link,
  .form-select {
    min-height: 44px;
  }

  /* Varias páginas fijan botones compactos de 42px con selectores más
     específicos (p. ej. `.card-actions .btn`) y en un <style> posterior a esta
     hoja, así que ganan por cascada. En escritorio esos 42px están bien; en
     móvil quedan 2px por debajo del mínimo táctil y hay que forzarlos. */
  .btn,
  a.btn,
  .pd-btn-primary,
  .pd-btn-secondary {
    min-height: 44px !important;
  }

  /* Un enlace que actúa como botón necesita área propia aunque sea de texto. */
  .forgot-link {
    display: inline-flex;
    align-items: center;
  }

  /* "Más detalles" es una acción de la tarjeta, no texto corrido: se repite en
     cada producto del catálogo y a 17px de alto es difícil de acertar. Se le da
     área táctil con padding en vez de agrandar la letra, para no alterar la
     jerarquía visual frente al botón principal de la tarjeta. */
  .card-inline-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
  }

  /* Casillas de 13px son difíciles de acertar con el pulgar. */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }
}