/* ═══════════════════════════════════════════════════════════════════════════
   FixrOS — LAYOUT DEL SITIO
   Barra de navegación, pie y hero. Aparecen en todas las páginas, así que
   son lo primero que hay que dejar impecable.
   Depende de tokens.css. Cero valores literales.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. BARRA ─────────────────────────────────────────────────────────── */

.fixros-navbar {
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background var(--fx-dur-base) var(--fx-ease),
              border-color var(--fx-dur-base) var(--fx-ease);
}
.fixros-navbar.scrolled,
body:not(.home) .fixros-navbar {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--fx-border);
}
/* Esta caja es la referencia vertical de TODA la web. */
.fixros-navbar .nav-inner {
  max-width: var(--fx-container);
  margin-inline: auto;
  padding-inline: var(--fx-gutter);
}

.nav-logo-pill { background: none; border: 0; box-shadow: none; padding: 0; }
.nav-logo-img  { height: 1.75rem; width: auto; display: block; }

.nav-links > li > a,
.nav-dropdown-toggle {
  font-family: var(--fx-font-body);
  font-size: var(--fx-text-sm);
  font-weight: var(--fx-weight-semi);
  letter-spacing: 0;
  padding: var(--fx-space-3) var(--fx-space-4);
  border-radius: var(--fx-radius-pill);
  transition: background var(--fx-dur-fast) var(--fx-ease),
              color var(--fx-dur-fast) var(--fx-ease);
}
.fixros-navbar .nav-links a:hover,
.fixros-navbar .nav-links .nav-dropdown-toggle:hover,
.fixros-navbar .nav-links li.has-dropdown.open .nav-dropdown-toggle {
  background: var(--fx-bg-alt);
  color: var(--fx-text);
}
.fixros-navbar .nav-links a.active,
.fixros-navbar .nav-links li.has-dropdown.active .nav-dropdown-toggle {
  background: transparent;
  color: var(--fx-accent);
}

.nav-dropdown {
  padding: var(--fx-space-2);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  box-shadow: var(--fx-shadow-lg);
  background: var(--fx-surface);
}
.nav-dropdown a {
  border-radius: var(--fx-radius-sm);
  padding: var(--fx-space-3);
  font-size: var(--fx-text-sm);
  font-weight: var(--fx-weight-semi);
  transition: background var(--fx-dur-fast) var(--fx-ease),
              color var(--fx-dur-fast) var(--fx-ease);
}
.nav-dropdown a:hover { background: var(--fx-accent-soft); color: var(--fx-accent); }
.nav-dropdown-group-label {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-xs);
  font-weight: var(--fx-weight-black);
  letter-spacing: var(--fx-tracking-wide);
  text-transform: uppercase;
  color: var(--fx-text-subtle);
}

.lang-switcher {
  background: none; border: 0; box-shadow: none;
  padding-inline: var(--fx-space-2);
  font-size: var(--fx-text-xs);
  font-weight: var(--fx-weight-bold);
  color: var(--fx-text-subtle);
}
.lang-switcher a { padding-inline: var(--fx-space-1); background: none; border: 0; }
.lang-switcher a.active { color: var(--fx-text); }
.lang-switcher-sep { color: var(--fx-border-strong); }

.nav-demo {
  height: 2.75rem;
  display: inline-flex; align-items: center;
  padding-inline: var(--fx-space-4);
  border: 1px solid var(--fx-border-strong);
  border-radius: var(--fx-radius-pill);
  font-size: var(--fx-text-sm);
  font-weight: var(--fx-weight-semi);
  color: var(--fx-text);
  background: transparent;
  transition: background var(--fx-dur-fast) var(--fx-ease);
}
.nav-demo:hover { background: var(--fx-bg-alt); }
/* REGRESIÓN CORREGIDA: declarar `display` en .nav-demo anulaba la media query
   de style.css que lo ocultaba en móvil. Con él visible, la barra medía 478 px
   en un viewport de 390 y metía scroll horizontal en TODA la web. El acceso a
   clientes sigue disponible en el cajón móvil. */
@media (max-width: 68.75rem) {
  .fixros-navbar .nav-demo { display: none; }
}

.fixros-navbar .nav-cta {
  display: inline-flex; align-items: center; gap: var(--fx-space-3);
  height: 2.75rem;
  padding-inline: var(--fx-space-5, var(--fx-space-4));
  padding-inline-end: var(--fx-space-2);
  padding-inline-start: var(--fx-space-6);
  border: 0;
  border-radius: var(--fx-radius-pill);
  background: var(--fx-brand-600);
  color: var(--fx-white);
  font-size: var(--fx-text-sm);
  font-weight: var(--fx-weight-bold);
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(18, 70, 255, .6);
  transition: background var(--fx-dur-fast) var(--fx-ease),
              transform var(--fx-dur-base) var(--fx-ease);
}
.fixros-navbar .nav-cta:hover { background: var(--fx-brand-700); color: var(--fx-white); transform: translateY(-1px); }
/* flecha en círculo: la firma del CTA principal */
.fixros-navbar .nav-cta::after {
  content: "→";
  width: 1.625rem; height: 1.625rem;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fx-white);
  color: var(--fx-brand-600);
  font-size: var(--fx-text-xs);
  line-height: 1;
  transition: transform var(--fx-dur-base) var(--fx-ease);
}
.fixros-navbar .nav-cta:hover::after { transform: rotate(-45deg); }

.nav-hamburger {
  width: 2.75rem; height: 2.75rem;
  background: var(--fx-bg-alt);
  border: 0;
  border-radius: var(--fx-radius-sm);
}
.nav-hamburger span { background: var(--fx-text); height: 2px; border-radius: 2px; }

/* menú móvil */
.nav-mobile-menu { background: var(--fx-bg); }
.nav-mobile-item span {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-2xl);
  font-weight: var(--fx-weight-black);
  letter-spacing: var(--fx-tracking-tight);
}
.nav-mobile-item, .nav-mobile-card { min-height: 2.75rem; }
.nav-mobile-section-title {
  font-size: var(--fx-text-xs);
  font-weight: var(--fx-weight-black);
  letter-spacing: var(--fx-tracking-wide);
  text-transform: uppercase;
  color: var(--fx-text-subtle);
}
.nav-mobile-card {
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  transition: background var(--fx-dur-fast) var(--fx-ease);
}
.nav-mobile-card:hover, .nav-mobile-card.active { background: var(--fx-accent-soft); border-color: var(--fx-brand-200); }
.nav-mobile-card-icon { color: var(--fx-accent); }
.nav-mobile-cta-primary {
  background: var(--fx-brand-600); color: var(--fx-white);
  border-radius: var(--fx-radius-pill);
  font-weight: var(--fx-weight-bold);
}
.nav-mobile-cta-ghost {
  border: 1px solid var(--fx-border-strong);
  border-radius: var(--fx-radius-pill);
  font-weight: var(--fx-weight-semi);
}

/* ── 2. HERO ──────────────────────────────────────────────────────────── */
/* Conserva su fotografía: es identidad de marca, no decoración. */

.hero-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--fx-space-16) var(--fx-space-8);
  min-height: min(90vh, 55rem);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--fx-space-12);
  align-items: center;
}
.hero-content { display: flex; flex-direction: column; gap: var(--fx-space-5, var(--fx-space-4)); }
.hero-logo-img { width: clamp(11.875rem, 21vw, 20rem); height: auto; margin: 0; }
.hero-h1 { margin: 0; line-height: 1; }
.hero-subtitle {
  font-family: var(--fx-font-display);
  font-size: clamp(2.625rem, 1.5rem + 4vw, 4.875rem);
  font-weight: var(--fx-weight-black);
  line-height: var(--fx-leading-tight);
  letter-spacing: var(--fx-tracking-tight);
  color: var(--fx-white);
  margin: 0;
  max-width: 15ch;
}
.hero-desc {
  margin: 0;
  font-size: var(--fx-text-lg);
  line-height: var(--fx-leading-body);
  color: rgba(255, 255, 255, 0.86);
  max-width: 47ch;
}
.hero-actions { display: flex; gap: var(--fx-space-3); flex-wrap: wrap; align-items: center; }
.hero-social-proof, .hero-trust {
  display: flex; gap: var(--fx-space-3); flex-wrap: wrap; align-items: center;
  font-size: var(--fx-text-sm);
  font-weight: var(--fx-weight-semi);
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 62.5rem) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { margin-top: var(--fx-space-8); }
}

/* heroes de páginas internas: conservan su fotografía */
.paraquien-hero h1, .demo-page-hero h1, .fxc-hero h1 { font-size: var(--fx-text-4xl); }
.paraquien-hero p,  .demo-page-hero p,  .fxc-hero p  { font-size: var(--fx-text-lg); font-weight: var(--fx-weight-medium); }
.hero-cta, .hero-cta-row { display: flex; gap: var(--fx-space-3); flex-wrap: wrap; align-items: center; margin-top: var(--fx-space-8); }

/* ── 3. PIE ───────────────────────────────────────────────────────────── */

.fixros-footer {
  background: var(--fx-bg);
  color: var(--fx-text);
  padding-block: var(--fx-space-16) var(--fx-space-8);
  padding-inline: 0;
  border-top: 1px solid var(--fx-border);
}
.fixros-footer .footer-grid {
  grid-template-columns: 1.9fr repeat(3, 1fr);
  gap: var(--fx-space-8);
}
/* mismo tamaño que el logotipo de la barra, a plomo con él */
.footer-logo-link { display: inline-block; line-height: 0; }
.footer-logo-img  { width: 8rem; height: 1.75rem; object-fit: contain; display: block; }

.footer-brand-desc {
  color: var(--fx-text-muted);
  font-size: var(--fx-text-sm);
  line-height: var(--fx-leading-body);
  max-width: 34ch;
}
.footer-col-title {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-xs);
  font-weight: var(--fx-weight-black);
  letter-spacing: var(--fx-tracking-wide);
  text-transform: uppercase;
  color: var(--fx-text-subtle);
}
.fixros-footer a { color: var(--fx-text-muted); font-weight: var(--fx-weight-medium); transition: color var(--fx-dur-fast) var(--fx-ease); }
.fixros-footer a:hover { color: var(--fx-accent); }

.footer-social { display: flex; gap: var(--fx-space-3); flex-wrap: wrap; }
.footer-social-icon {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--fx-radius-sm);
  background: var(--fx-bg-alt);
  border: 1px solid var(--fx-border);
  color: var(--fx-text);
  transition: background var(--fx-dur-fast) var(--fx-ease),
              transform var(--fx-dur-base) var(--fx-ease);
}
.footer-social-icon svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.footer-social-icon:hover { background: var(--fx-brand-600); border-color: transparent; color: var(--fx-white); transform: translateY(-2px); }
/* el glifo debe volverse blanco o desaparece sobre el azul */
.footer-social-icon:hover svg,
.footer-social-icon:focus-visible svg { fill: var(--fx-white); color: var(--fx-white); }

/* badges de tienda: un solo componente en toda la web */
.footer-app-badges, .capturas-stores .store-badges { display: flex; flex-wrap: nowrap; gap: var(--fx-space-3); }
.footer-app-badge, .store-badge, .capturas-stores a {
  display: inline-flex; align-items: center; gap: var(--fx-space-3);
  height: 3.25rem;
  padding-inline: var(--fx-space-4);
  border-radius: var(--fx-radius-sm);
  background: var(--fx-bg-alt);
  border: 1px solid var(--fx-border);
  white-space: nowrap;
  transition: background var(--fx-dur-fast) var(--fx-ease),
              transform var(--fx-dur-base) var(--fx-ease);
}
.footer-app-badge:hover, .store-badge:hover { background: var(--fx-neutral-900); border-color: transparent; transform: translateY(-2px); }
.footer-app-badge .badge-icon, .store-badge svg { width: 1.4375rem; height: 1.4375rem; flex: 0 0 auto; color: var(--fx-text); }
.footer-app-badge:hover .badge-icon, .store-badge:hover svg { color: var(--fx-white); }
.badge-label, .store-badge-prefix {
  display: block;
  font-size: var(--fx-text-xs);
  font-weight: var(--fx-weight-semi);
  line-height: 1;
  letter-spacing: var(--fx-tracking-wide);
  text-transform: uppercase;
  color: var(--fx-text-subtle);
}
.badge-store, .store-badge-name {
  display: block;
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-sm);
  font-weight: var(--fx-weight-bold);
  line-height: var(--fx-leading-snug);
  margin-top: 2px;
  letter-spacing: var(--fx-tracking-snug);
  color: var(--fx-text);
}
.footer-app-badge:hover .badge-label, .store-badge:hover .store-badge-prefix { color: rgba(255,255,255,.7); }
.footer-app-badge:hover .badge-store, .store-badge:hover .store-badge-name { color: var(--fx-white); }
/* EXCEPCIÓN DOCUMENTADA: los cuatro colores de Google Play son marca ajena.
   No se tokenizan. Se fijan aquí porque los atributos `fill` del SVG pierden
   frente a cualquier regla CSS. */
.badge-icon--play path:nth-of-type(1) { fill: #00A0FF; }
.badge-icon--play path:nth-of-type(2) { fill: #00E676; }
.badge-icon--play path:nth-of-type(3) { fill: #FFCE00; }
.badge-icon--play path:nth-of-type(4) { fill: #FF3A44; }

.footer-bottom { border-top: 1px solid var(--fx-border); margin-top: var(--fx-space-12); }
.footer-legal-links a, .footer-legal-links button { color: var(--fx-accent); font-weight: var(--fx-weight-semi); }
.footer-legal-links a:hover, .footer-legal-links button:hover { color: var(--fx-accent-hover); text-decoration: underline; }
.footer-legal-links span, .footer-bottom-sep { color: var(--fx-text-subtle); }
.footer-copyright { color: var(--fx-text-muted); font-weight: var(--fx-weight-medium); }
.fixi-public-counter { color: var(--fx-accent); font-weight: var(--fx-weight-semi); }
/* El número va en un <strong> que heredaba un azul casi blanco del sistema
   viejo y salía invisible, además de romper línea («Fixi ha respondido / 32 /
   dudas»). Se fuerza en línea y en el azul de marca. */
/* El contador era `inline-flex`, así que los dos textos y el <strong> se
   convertían en ítems flex y cada uno caía a su línea («Fixi ha respondido /
   32 / dudas»). Tiene que ser una frase corrida: contenedor en línea y el
   punto verde como inline-block con margen propio, no con `gap`. */
.fixi-public-counter { display: inline; }
.fixi-public-counter::before { margin-inline-end: 0.375rem; vertical-align: middle; }
.fixi-public-counter strong,
.fixi-public-counter b {
  color: var(--fx-accent-hover);
  font-weight: var(--fx-weight-bold);
}

@media (max-width: 56.25rem) { .fixros-footer .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 35rem)   { .fixros-footer .footer-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA EN MÓVIL — dejar de apretar tres cosas en 393px

   A 393px la barra metía logotipo (24→152), CTA (160→322) y hamburguesa
   (325→369) con ocho píxeles entre el logo y el botón y veinticuatro hasta
   el borde. El CTA medía 162px él solo porque arrastraba la flecha en su
   círculo blanco, que a ese tamaño no aporta nada y se come el espacio.
   Y la hamburguesa iba en un cuadrado gris claro que, al lado de una
   píldora azul, se lee como un control de otra web.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 47.9375rem) {

  /* Sin la flecha, el CTA baja de 162 a ~118px y aparece el aire. */
  .fixros-navbar .nav-cta::after { display: none; }
  .fixros-navbar .nav-cta {
    padding-inline: var(--fx-space-4);
    font-size: var(--fx-text-sm);
    margin-left: 0;
  }

  /* La hamburguesa: primero fue un cuadrado gris y luego un círculo con
     borde, y las dos versiones competían con el CTA azul que tiene al lado.
     Dos controles con caja en una barra de 393px es uno de más. Se queda el
     icono a pelo —como en Linear o Vercel— con sus 44px de área de pulsación
     intactos, y las barras un poco más cortas y finas para que no pesen más
     que la palabra «demo». */
  .fixros-navbar .nav-hamburger {
    background: transparent;
    border: 0;
    border-radius: var(--fx-radius-pill);
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .fixros-navbar .nav-hamburger span {
    width: 1.25rem;
    height: 1.5px;
  }

  .fixros-navbar .nav-inner { gap: var(--fx-space-3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVISO DE COOKIES EN MÓVIL

   Es lo primero que ve todo el mundo y ocupaba 315 de los 852px de un
   iPhone: el 37% de la pantalla, con cinco líneas de texto y tres botones
   apilados de 36px. Encima, la burbuja de Fixi (z-index máximo) se le
   montaba justo sobre el último botón.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 47.9375rem) {

  .cookie-banner .cookie-banner-text p {
    font-size: var(--fx-text-sm);
    line-height: 1.5;
  }

  /* «Aceptar todas» manda y ocupa la fila entera; las dos alternativas
     comparten la siguiente. Se recuperan unos 48px de alto y las tres pasan
     de 36-38px a 44, que es la altura mínima cómoda para el pulgar. */
  .cookie-banner .cookie-banner-actions {
    display: flex;
    /* venía en columna: sin resetear la dirección, los tres botones seguían
       ocupando la fila entera y no se ahorraba nada de alto. */
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--fx-space-2);
  }
  .cookie-banner .cookie-accept { flex: 1 1 100%; }
  .cookie-banner .cookie-customize,
  .cookie-banner .cookie-reject { flex: 1 1 calc(50% - var(--fx-space-2)); }
  .cookie-banner .cookie-accept,
  .cookie-banner .cookie-customize,
  .cookie-banner .cookie-reject {
    min-height: 2.75rem;
    padding-inline: var(--fx-space-3);
  }
}

/* Mientras el aviso está en pantalla, la burbuja de Fixi se retira: son dos
   capas fijas peleando por la misma esquina y el aviso hay que responderlo
   antes de poder chatear. Vuelve sola en cuanto se acepta o se rechaza. */
/* El `!important` es necesario, no un atajo: el widget se pinta desde
   `assets/chatbot/fixi-widget.js`, que inyecta su hoja en tiempo de
   ejecución con `display: flex !important` en la propia burbuja. Sin la
   misma fuerza, la regla no llega. */
body:has(.cookie-banner.visible) .fixi-bubble { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MÍNIMOS DE LEGIBILIDAD Y DE DEDO

   Detectados midiendo el DOM de 143 páginas a 393px. No es una cuestión de
   gusto: por debajo de 11px el texto no se lee de un vistazo en un móvil, y
   por debajo de 44px un enlace se falla al pulsarlo.
   ═══════════════════════════════════════════════════════════════════════ */

/* «DESCÁRGALA EN» / «DISPONIBLE EN» iban a 9px, el texto más pequeño de toda
   la web. Sube a 11px, que es el mínimo con el que una versalita sigue
   siendo legible, sin tocar el ancho de las insignias. */
.footer-app-badge .badge-label,
.store-badge .store-badge-prefix { font-size: 0.6875rem; letter-spacing: 0.05em; }

/* Estas dos van acotadas a pantallas táctiles a propósito: en escritorio se
   pulsa con ratón y, sobre todo, el fondo del idioma activo pasaba de ser un
   chip pequeño a un cuadrado de 44px que desequilibraba la barra. */
@media (max-width: 64rem) {

  /* El logotipo mide 28px de alto y el enlace medía lo mismo. Se le da área
     de pulsación con padding vertical, que no mueve el logotipo ni un píxel
     porque la barra ya lo centra. */
  .nav-logo-pill,
  .footer-logo-link { padding-block: var(--fx-space-2); }

  /* El conmutador de idioma eran dos cajas de 23×27 pegadas a un separador:
     dos objetivos diminutos y contiguos, la peor combinación posible. */
  .lang-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-inline: var(--fx-space-2);
  }
}

@media (max-width: 47.9375rem) {

  /* Blog: «Volver al blog» medía 21px de alto y los enlaces de anterior y
     siguiente 19px. Son la navegación del artículo, no letra pequeña. */
  .post-back-btn,
  .post-nav-item,
  .post-nav-prev,
  .post-nav-next { min-height: 2.75rem; }

  .post-back-btn { align-items: center; }

  /* Categoría y etiquetas: 27 y 32px de alto. Con 40 se pulsan sin fallar y
     siguen leyéndose como etiquetas, no como botones. */
  .post-cat-badge,
  .post-tag {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
  }
}

/* Últimos objetivos por debajo de 44px, medidos en los seis anchos:
   los enlaces legales del pie y los «Leer artículo / Leer más» de las
   tarjetas de blog salían a 22 y 37px de alto. Se les da altura de dedo sin
   tocar su aspecto, porque el área crece hacia arriba y hacia abajo. */
@media (max-width: 64rem) {
  .footer-legal-links a,
  .home-blog-read,
  .blog-card-readmore,
  .legal-back-link,
  .post-nav-item {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* La categoría de la tarjeta de blog iba a 10px: es la única etiqueta de
     la tarjeta y a ese tamaño no se lee de un vistazo. */
  .blog-card-cat { font-size: 0.6875rem; }

  /* «Gestionar cookies» es un <button> dentro del pie y medía 21px: aparece
     en las 143 páginas y es la única forma de revisar el consentimiento. */
  .footer-legal-links button {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Filtros de categoría del blog: doce enlaces contiguos de 32px. Cuando
     están tan juntos, cada píxel de más cuenta. */
  .blog-cat-chip { min-height: 2.5rem; }

  /* El correo de contacto de /demo/ y el estado de cada integración. */
  .demo-contact-email {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  .integ-status { font-size: 0.6875rem; }

  /* La casilla de consentimiento medía 18px y es obligatoria para enviar el
     formulario, así que fallarla bloquea la conversión. Una casilla de 44px
     sería un cuadrado enorme, de modo que se hace lo correcto: la casilla
     crece a 22px y el objetivo de pulsación es la etiqueta que la envuelve,
     que además ya contiene el texto que la explica. */
  .form-checkbox-wrap input[type="checkbox"],
  .inv-request-form label.checkbox input[type="checkbox"] {
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 auto;
  }
  .form-checkbox-wrap,
  .inv-request-form label.checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--fx-space-3);
    min-height: 2.75rem;
  }

  /* «Cómo llegar» y «Abrir en Google Maps» de /contacto/. */
  .contacto-card-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}