/* Ver `docs-funcionales/landing-anterior/LEEME.md`: el CSS vive fuera
   del HTML porque `style-src-elem 'self'` bloquea un <style>
   incrustado. Las 18 caras se sirven de /fuentes: cero terceros. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/ibm-plex-mono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/ibm-plex-mono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/ibm-plex-mono-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/ibm-plex-mono-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fuentes/ibm-plex-sans-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fuentes/ibm-plex-sans-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fuentes/ibm-plex-sans-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fuentes/ibm-plex-sans-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fuentes/ibm-plex-sans-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fuentes/ibm-plex-sans-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fuentes/ibm-plex-sans-normal-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fuentes/ibm-plex-sans-normal-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/newsreader-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/newsreader-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/newsreader-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/newsreader-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/newsreader-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/newsreader-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* El fondo y el texto salen de las variables, o el boton de tema no
   cambia nada visible. */
body { margin: 0; background: #090C13; color: #EEF3F9;
       background: var(--bga, #090C13); color: var(--tx, #EEF3F9);
       font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
       -webkit-font-smoothing: antialiased;
       transition: background-color .18s ease, color .18s ease; }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3, p { margin: 0; }
    .serif { font-family: "Newsreader", "Source Serif Pro", Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -0.03em; }
    .mono { font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
    .dark { background: #090C13; color: #EEF3F9; }
    .light { background: #F3F5F8; color: #0F161E; }
    .sec { padding: 160px 64px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; position: relative; overflow: hidden; }
    .h { font-size: 88px; line-height: 1.0; max-width: 1000px; }
    .sub { font-size: 24px; line-height: 1.45; max-width: 720px; }
    .dark .sub { color: rgba(238,243,249,.86); } .light .sub { color: #3A4452; }
    .link { display: inline-flex; align-items: center; gap: 6px; color: #64A1EA; font-weight: 600; font-size: 18px; }
    .light .link { color: #2B66BA; }
    .link::after { content: "›"; font-size: 22px; line-height: 1; }
    .btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; background: #2B66BA; color: #FFFFFF; font-weight: 600; font-size: 16px; border-radius: 999px; }
    .btn-ghost { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border: 1px solid rgba(238,243,249,.28); color: #EEF3F9; font-weight: 600; font-size: 16px; border-radius: 999px; }
    .light .btn-ghost { border-color: rgba(15,22,30,.2); color: #0F161E; }
    .card { background: #111927; border: 1px solid rgba(238,243,249,.1); border-radius: 20px; }
    .light .card { background: #FFFFFF; border-color: rgba(15,22,30,.08); box-shadow: 0 30px 60px rgba(15,22,30,.08); }
    .beam { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #64A1EA 20%, #FFFFFF 50%, #64A1EA 80%, transparent); box-shadow: 0 0 18px 4px rgba(100,161,234,.5); animation: sweep 4s ease-in-out infinite; }
    @keyframes sweep { 0% { top: 0; opacity: 0 } 8% { opacity: 1 } 55% { top: calc(100% - 3px); opacity: 1 } 65% { opacity: 0 } 100% { top: calc(100% - 3px); opacity: 0 } }
    .pop { opacity: 0; animation: pop 4s ease-out infinite; animation-delay: 2.3s; }
    @keyframes pop { 0% { opacity: 0; transform: translateY(8px) } 8% { opacity: 1; transform: none } 85% { opacity: 1 } 95% { opacity: 0 } 100% { opacity: 0 } }
    .glow { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; }
    .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; width: 100%; max-width: 1100px; }
    .check { display: flex; align-items: center; gap: 10px; font-size: 16px; }
    .dim { color: rgba(238,243,249,.72); } .light .dim { color: #4B5768; }

    :root { --bga: #090C13; --bgb: #0F161E; --tx: #EEF3F9; --sub: rgba(238,243,249,.86); --dim: rgba(238,243,249,.72); --line: rgba(238,243,249,.1); --cb: #111927; --cl: rgba(238,243,249,.1); --cs: none; --lk: #64A1EA; --gb: rgba(238,243,249,.28); --amber: #F0C27B; --nav: #090C13; }
    html[data-theme="light"] { --bga: #FFFFFF; --bgb: #F3F5F8; --tx: #0F161E; --sub: #2C3541; --dim: #4B5768; --line: rgba(15,22,30,.1); --cb: #FFFFFF; --cl: rgba(15,22,30,.08); --cs: 0 30px 60px rgba(15,22,30,.08); --lk: #2B66BA; --gb: rgba(15,22,30,.2); --amber: #8F5A12; --nav: #FFFFFF; }
    @media (prefers-color-scheme: light) { html:not([data-theme="dark"]) { --bga: #FFFFFF; --bgb: #F3F5F8; --tx: #0F161E; --sub: #2C3541; --dim: #4B5768; --line: rgba(15,22,30,.1); --cb: #FFFFFF; --cl: rgba(15,22,30,.08); --cs: 0 30px 60px rgba(15,22,30,.08); --lk: #2B66BA; --gb: rgba(15,22,30,.2); --amber: #8F5A12; --nav: #FFFFFF; } }
    .a { background: var(--bga); color: var(--tx); } .b { background: var(--bgb); color: var(--tx); }
    .a .sub, .b .sub { color: var(--sub); } .a .link, .b .link { color: var(--lk); } .a .dim, .b .dim { color: var(--dim); }
    .a .card, .b .card { background: var(--cb); border-color: var(--cl); box-shadow: var(--cs); }
    .a .btn-ghost, .b .btn-ghost { border-color: var(--gb); color: var(--tx); }
    .nav { background: var(--nav); color: var(--tx); border-bottom: 1px solid var(--line); }
    .nav a { color: var(--tx); }
    /* M-1 (17 sep 2026), medido por píxeles: `.nav a` pisaba al `.btn` y el
       llamado principal salía con tinta oscura sobre azul (3,22) en el tema
       claro. El botón lleva su propio blanco. */
    .nav a.btn { color: #FFFFFF; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--gb); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tx) !important; cursor: pointer; }

    html { scroll-behavior: smooth; } body { overflow-x: hidden; }
    @media (max-width: 1000px) {
      .site > div { padding-left: 20px !important; padding-right: 20px !important; }
      .sec { padding-top: 88px !important; padding-bottom: 88px !important; gap: 20px !important; }
      .nav-links { display: none !important; }
      h1.serif { font-size: 60px !important; }
      .h { font-size: 44px !important; }
      .sub { font-size: 18px !important; }
      p.serif { font-size: 28px !important; }
      [style*="grid-template-columns"]:not(.kardex *) { grid-template-columns: minmax(0,1fr) !important; }
      .row { grid-template-columns: minmax(0,1fr) !important; gap: 36px !important; }
      .hero-visual { width: 100% !important; height: auto !important; aspect-ratio: 760/560; zoom: .5; }
      .kardex { width: 100% !important; font-size: 13px; }
      .kardex [style*="font-size: 16px"] { font-size: 13px !important; gap: 6px !important; padding-left: 12px !important; padding-right: 12px !important; }
      .founder { width: 100% !important; height: 300px !important; }
      [style*="font-size: 96px"] { font-size: 64px !important; }
      [style*="width: 420px"] { width: 100% !important; box-sizing: border-box; }
      svg[width="520"] { width: 80% !important; height: auto !important; }
      .btn, .btn-ghost { white-space: nowrap; }
      [style*="display: flex; gap: 32px; align-items: center"] { flex-direction: column; gap: 14px !important; }
    }

/* La etiqueta corta solo existe en el telefono. */
.btn-txt-min { display: none; }

/* =====================================================================
   EL TELEFONO, MEDIDO Y NO SUPUESTO · 30 de agosto de 2026
   =====================================================================
   A 390 px se salian de la pantalla dos cosas que SI son contenido:

     · el boton «Hablar con TEGO» de la barra, cortado por la derecha
       (llegaba a 447 px en una pantalla de 390);
     · los dos botones de la seccion del piloto, que se iban por los dos
       lados (-79 y 469).

   NO SE VEIA EN LA PRUEBA porque el `body` lleva `overflow-x: hidden`,
   que **esconde** el desbordamiento en vez de arreglarlo: no hay barra
   de scroll y el boton sencillamente se corta. Se descubrio midiendo la
   caja de cada elemento contra el ancho de la ventana, que es lo que la
   prueba hace ahora.

   Lo que sangra a proposito —el resplandor del hero y los SVG de fondo—
   se queda como esta: eso es lo que `overflow-x: hidden` existe para
   recortar.
   ===================================================================== */
@media (max-width: 640px) {
    /* LA BARRA, EN UNA SOLA LINEA Y SIN QUE SE CORTE NADA.
       Al encoger solo el boton, la marca se iba a un segundo renglon y
       la barra quedaba descolocada. El problema no era el ancho del
       boton: era que el contenedor no tenia permiso para apretarse. */
    .nav {
        padding: 0 16px !important;
        gap: 10px !important;
    }
    /* Los dos grupos pueden encogerse; sin esto, `flex` respeta su
       ancho de contenido y empuja a la marca fuera de la fila. */
    .nav > div { min-width: 0 !important; }

    /* EL BOTON GRANDE PIERDE SU TEXTO, NO SU SITIO. En 390 px «Hablar
       con TEGO» no cabe al lado de la marca, el tema y Entrar. Se queda
       el avion de papel, que es lo que la gente reconoce de Telegram, y
       el nombre accesible va en `aria-label` para quien no ve el icono.
       Esconder el boton entero habria quitado el llamado principal justo
       en la pantalla donde mas se usa. */
    header .btn, .nav .btn {
        padding: 0 12px !important;
        gap: 0 !important;
        flex-shrink: 0;
    }
    /* SE ESCONDE LA ETIQUETA, NO SE ENCOGE LA LETRA. `font-size: 0`
       parecia lo mismo y no lo era: se midio y el boton seguia ocupando
       223 px con su contenido en 18. Un `display: none` sobre un
       elemento propio es determinista y se puede comprobar. */
    .nav .btn .btn-txt, .nav .btn-ghost .btn-txt { display: none !important; }
    /* EL «COMIENZA GRATIS» DE LA BARRA NO SE ESCONDE: es el llamado
       principal del v5 y en el teléfono es donde más se pulsa. Lo que
       cambia es la etiqueta — «Crear cuenta» dice lo mismo en la mitad
       de sitio. Esconderlo entero habría quitado el alta justo de la
       pantalla en la que más gente entra. */
    .nav .btn .btn-txt-corto { display: none !important; }
    .nav .btn .btn-txt-min { display: inline !important; }

    /* EN 390 px NO CABEN CINCO COSAS EN LA BARRA. Se midio: marca,
       tema, Entrar, Telegram y «Crear cuenta» suman mas de lo que hay.
       Se va el de Telegram, que en el v5 ya NO es el llamado principal
       —lo es «Comienza gratis»— y que tiene su propio boton grande en la
       seccion de contacto, a un dedo de distancia.
       Lo que NO se va es Entrar ni Crear cuenta: son las dos cosas por
       las que alguien entra al sitio desde el telefono. */
    .nav .btn-ghost { display: none !important; }
    /* LA PALABRA DEL TEMA SE QUEDA. La doctrina de la casa es explicita
       —«iconos siempre con texto, nunca solos»— y una luna sola no dice
       si apaga o enciende. Lo que se recorta es el relleno, que no
       significa nada. */
    .nav .toggle { padding: 0 10px !important; font-size: 13px !important; }
    .nav a[href="/app?ir=login"] { font-size: 14px !important; }
    /* `width: auto` Y `box-sizing: border-box`, LOS DOS.
       El sitio no trae un reset, asi que las cajas son `content-box`: el
       relleno SUMA al ancho. Y este boton, dentro de su contenedor
       flexible, tomaba el ancho del padre (199 px de contenido) mas sus
       24 px de relleno = 223 px en una barra de 390 con la marca al
       lado. Se midio; no se supuso. */
    .nav .btn, .nav .btn-ghost {
        gap: 0 !important;
        width: auto !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }
    .nav .btn svg, .nav .btn-ghost svg {
        width: 18px !important; height: 18px !important; }
    /* EL v5 CAMBIÓ EL BOTÓN DE LA BARRA A `btn-ghost`, porque el llamado
       principal pasó a ser «Comienza gratis». Sin nombrarlo aquí, el
       botón de Telegram volvía a salirse de la pantalla a 390 px — el
       mismo fallo del v4, en otra clase. */

    .nav .toggle { flex-shrink: 0; }
    .nav a[href="/app?ir=login"] { flex-shrink: 0; }

    /* LAS FILAS DE BOTONES SE APILAN. Dos botones de ancho fijo uno al
       lado del otro no caben en 390 px, y forzarlos deja los dos a
       medias. Apilados caben enteros, que es lo que hace falta para
       poder pulsarlos. */
    div[style*="display: flex"][style*="gap: 16px"]:not(.nav):not(.nav > div) {
        flex-wrap: wrap !important;
    }
    /* MENOS LA BARRA, Y ESTO FUE UN FALLO MIO. El grupo de la derecha
       del `nav` lleva el mismo `gap: 16px` en su estilo incrustado, asi
       que el selector de arriba lo alcanzaba: la barra se partia en dos
       renglones y la marca se iba debajo. Se vio en la captura, no en
       ninguna medida — por eso las capturas se miran. */
    .nav, .nav > div {
        flex-wrap: nowrap !important;
    }
    div[style*="display: flex"][style*="gap: 16px"]:not(.nav):not(.nav > div) > .btn,
    div[style*="display: flex"][style*="gap: 16px"]:not(.nav):not(.nav > div) > .btn-ghost {
        width: 100% !important;
        /* SIN ESTO, `width: 100%` SE DESBORDA POR EL RELLENO. El sitio
           no trae reset, asi que las cajas son `content-box` y un
           boton al 100 % acaba midiendo 100 % + 56 px. Fue un fallo mio
           al apilarlos, y lo cazo la medicion de cajas contra la
           ventana. */
        box-sizing: border-box !important;
        justify-content: center !important;
    }
}