@charset "UTF-8";
/* BASICS */
.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

@font-face {
  font-family: "Interstate-Light";
  src: url("../assets/lib/fonts/Interstate-Light.ttf");
}
@font-face {
  font-family: "Interstate-Regular";
  src: url("../assets/lib/fonts/Interstate-Regular.ttf");
  font-weight: 100;
}
@font-face {
  font-family: "Interstate-Bold";
  src: url("../assets/lib/fonts/Interstate-Bold.ttf");
}
@font-face {
  font-family: "Interstate-Black";
  src: url("../assets/lib/fonts/Interstate-Black.ttf");
}
@font-face {
  font-family: "Roboto-light";
  src: url("../assets/lib/fonts/Roboto-Light.ttf");
}
@font-face {
  font-family: "Roboto-regular";
  src: url("../assets/lib/fonts/Roboto-Regular.ttf");
  font-weight: 100;
}
@font-face {
  font-family: "Roboto-bold";
  src: url("../assets/lib/fonts/Roboto-Bold.ttf");
}
@font-face {
  font-family: "Roboto-black";
  src: url("../assets/lib/fonts/Roboto-Black.ttf");
}
/*BASE*/
@font-face {
  font-family: "Banamex Micro";
  src: url("./assets/fonts/BanamexMicro-Bold.woff2") format("woff2"), url("./assets/fonts/BanamexMicro-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Banamex Display";
  src: url("./assets/fonts/BanamexDisplay-Bold.woff2") format("woff2"), url("./assets/fonts/BanamexDisplay-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Banamex Display";
  src: url("./assets/fonts/BanamexDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/BanamexDisplay-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Banamex Text";
  src: url("./assets/fonts/BanamexText-BoldItalic.woff2") format("woff2"), url("./assets/fonts/BanamexText-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Banamex Micro";
  src: url("./assets/fonts/BanamexMicro-RegularItalic.woff2") format("woff2"), url("./assets/fonts/BanamexMicro-RegularItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Banamex Text";
  src: url("./assets/fonts/BanamexText-Bold.woff2") format("woff2"), url("./assets/fonts/BanamexText-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Banamex Micro";
  src: url("./assets/fonts/BanamexMicro-BoldItalic.woff2") format("woff2"), url("./assets/fonts/BanamexMicro-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Banamex Text";
  src: url("./assets/fonts/BanamexText-Regular.woff2") format("woff2"), url("./assets/fonts/BanamexText-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Banamex Micro";
  src: url("./assets/fonts/BanamexMicro-Regular.woff2") format("woff2"), url("./assets/fonts/BanamexMicro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Banamex Text";
  src: url("./assets/fonts/BanamexText-SemiboldItalic.woff2") format("woff2"), url("./assets/fonts/BanamexText-SemiboldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Banamex Text";
  src: url("./assets/fonts/BanamexText-RegularItalic.woff2") format("woff2"), url("./assets/fonts/BanamexText-RegularItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Banamex Text";
  src: url("./assets/fonts/BanamexText-Semibold.woff2") format("woff2"), url("./assets/fonts/BanamexText-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.bg-red {
  background-color: #FF1B44 !important;
}

.bg-dark-blue {
  background-color: #003746 !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.bg-granate {
  background-color: #601636 !important;
}

.bg-violeta {
  background-color: #EABCFF !important;
}

.bg-naranja {
  background-color: #FA8D5A !important;
}

.bg-crema {
  background-color: #FDE8E0 !important;
}

.bg-gris {
  background-color: #DAE9EE !important;
}

.bg-verde {
  background-color: #2DDC8E !important;
}

.bg-granate-oscuro {
  background-color: #450A27 !important;
}

.bg-violeta-oscuro {
  background-color: #B18DFB !important;
}

.bg-naranja-oscuro {
  background-color: #FF5F00 !important;
}

.bg-crema-oscuro {
  background-color: #F9DBD6 !important;
}

.bg-gris-oscuro {
  background-color: #A0D6E2 !important;
}

.bg-verde-oscuro {
  background-color: #00AD59 !important;
}

.bg-granate-claro {
  background-color: #B77493 !important;
}

.bg-violeta-claro {
  background-color: #FBE3FF !important;
}

.bg-naranja-claro {
  background-color: #FFD6BA !important;
}

.bg-crema-claro {
  background-color: #FFF6F3 !important;
}

.bg-gris-claro {
  background-color: #EDF6F7 !important;
}

.bg-verde-claro {
  background-color: #A2F6D3 !important;
}

.bg-azul-oscuro {
  background-color: #001E22 !important;
}

.bg-azul-claro {
  background-color: #005162 !important;
}

.bg-surface-black {
  background-color: #000000 !important;
}

.bg-surface-extra-dark {
  background-color: #999999 !important;
}

.bg-surface-dark {
  background-color: #BEBEBD !important;
}

.bg-surface-medium {
  background-color: #D5D1CE !important;
}

.bg-surface-light {
  background-color: #EFEFED !important;
}

.bg-surface-extra-light {
  background-color: #FAFAF8 !important;
}

.txt-red {
  color: #FF1B44 !important;
}

.txt-dark-blue {
  color: #003746 !important;
}

.txt-white {
  color: #ffffff !important;
}

.txt-granate {
  color: #601636 !important;
}

.txt-violeta {
  color: #EABCFF !important;
}

.txt-naranja {
  color: #FA8D5A !important;
}

.txt-crema {
  color: #FDE8E0 !important;
}

.txt-gris {
  color: #DAE9EE !important;
}

.txt-verde {
  color: #2DDC8E !important;
}

.txt-granate-oscuro {
  color: #450A27 !important;
}

.txt-violeta-oscuro {
  color: #B18DFB !important;
}

.txt-naranja-oscuro {
  color: #FF5F00 !important;
}

.txt-crema-oscuro {
  color: #F9DBD6 !important;
}

.txt-gris-oscuro {
  color: #A0D6E2 !important;
}

.txt-verde-oscuro {
  color: #00AD59 !important;
}

.txt-granate-claro {
  color: #B77493 !important;
}

.txt-violeta-claro {
  color: #FBE3FF !important;
}

.txt-naranja-claro {
  color: #FFD6BA !important;
}

.txt-crema-claro {
  color: #FFF6F3 !important;
}

.txt-gris-claro {
  color: #EDF6F7 !important;
}

.txt-verde-claro {
  color: #A2F6D3 !important;
}

.txt-azul-oscuro {
  color: #001E22 !important;
}

.txt-azul-claro {
  color: #005162 !important;
}

.txt-surface-black {
  color: #000000 !important;
}

.txt-surface-extra-dark {
  color: #999999 !important;
}

.txt-surface-dark {
  color: #BEBEBD !important;
}

.txt-surface-medium {
  color: #D5D1CE !important;
}

.txt-surface-light {
  color: #EFEFED !important;
}

.txt-surface-extra-light {
  color: #FAFAF8 !important;
}

html {
  font-family: "Banamex Text", sans-serif;
}

.t-header-1, h1 {
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 32px;
  line-height: 38px;
}
@media (min-width: 768px) {
  .t-header-1, h1 {
    font-size: 40px;
    line-height: 56px;
  }
}

.t-header-2, h2 {
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
}
@media (min-width: 768px) {
  .t-header-2, h2 {
    font-size: 32px;
    line-height: 44px;
  }
}

.t-header-3, h3 {
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
}
@media (min-width: 768px) {
  .t-header-3, h3 {
    font-size: 24px;
    line-height: 34px;
  }
}

.t-header-4, h4 {
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
}
@media (min-width: 768px) {
  .t-header-4, h4 {
    font-size: 20px;
    line-height: 28px;
  }
}

.t-body-1, h5 {
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
}
@media (min-width: 768px) {
  .t-body-1, h5 {
    font-size: 18px;
    line-height: 26px;
  }
}

.t-body-2, h6 {
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .t-body-2, h6 {
    font-size: 16px;
    line-height: 22px;
  }
}

.t-body-3 {
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .t-body-3 {
    font-size: 14px;
    line-height: 20px;
  }
}

.t-body-4 {
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
}
@media (min-width: 768px) {
  .t-body-4 {
    font-size: 12px;
    line-height: 16px;
  }
}

.t-caption-1 {
  font-family: "Banamex Micro";
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
}
@media (min-width: 768px) {
  .t-caption-1 {
    font-size: 10px;
    line-height: 14px;
  }
}

.t-caption-2 {
  font-family: "Banamex Micro";
  font-weight: 400;
  font-size: 8px;
  line-height: 10px;
}
@media (min-width: 768px) {
  .t-caption-2 {
    font-size: 8px;
    line-height: 12px;
  }
}

/* // Cuerpo de texto
p {
  @extend .t-body-1;   // p se comporta como Body 1
}
li {
  @extend .t-body-1;   // los items de listas heredan Body 1
}
a {
  @extend .t-body-1;   // enlaces con estilo Body 1 (ajusta si requieres diferenciarlos)
}
label {
  @extend .t-body-4;   // etiquetas de formularios con Body 1
}


// Elementos de cita y referencias
blockquote {
  @extend .t-body-1;   // blockquote se beneficia de Body 1, quizá con ajustes adicionales (como cursiva) en otro mixin
}
figcaption {
  @extend .t-caption-1; // pie de foto, usando Caption 1
}
small {
  @extend .t-caption-1; // texto pequeño, como en <small>
}  */
.iconTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  color: #450A27;
}

.heroHeader {
  font-size: clamp(34px, 34px + 30 * (100vw - 320px) / 1120, 64px) !important;
  line-height: clamp(38px, 38px + 50 * (100vw - 320px) / 1120, 88px) !important;
}

/* ============================================
   Reset
   ============================================
   Este reset elimina márgenes, rellenos y otros estilos
   predeterminados conflictivos, estableciendo una base 
   consistente sobre la cual aplicar los estilos personalizados.
*/
/* 1. Universal Reset
   - Aplica a todos los elementos y sus pseudoelementos.
   - Usa box-sizing: border-box para incluir padding y border en el cálculo del ancho/alto.
   - Elimina márgenes y rellenos predeterminados.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2. HTML Base
     - Define un tamaño de fuente base y una línea de altura consistente.
     - Evita que algunos navegadores móviles ajusten automáticamente el tamaño del texto.
  */
html {
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

/* 3. Body Base
     - Asegura que el body ocupe al menos el alto de la ventana.
     - Define colores y tipografía base para el proyecto.
     - Habilita un scroll suave para una mejor experiencia de usuario.
  */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  background-color: #fff;
  color: #000;
  font-family: inherit;
  scrollbar-gutter: stable;
}

/* 4. Listas
     - Elimina las viñetas y numeración de listas.
  */
ul,
ol {
  list-style: none;
}

/* 5. Enlaces
     - Quita el subrayado y fuerza a que hereden el color del contenedor.
  */
a {
  text-decoration: none;
  color: inherit;
}

/* 6. Tablas
     - Colapsa bordes y elimina espacios entre celdas para un diseño limpio.
  */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 7. Imágenes, SVGs y Videos
     - Garantiza que estos elementos sean responsivos y no excedan el ancho del contenedor.
  */
img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 8. Formularios
     - Elimina estilos por defecto de inputs, botones, áreas de texto y selects para permitir personalización.
  */
input,
button,
textarea,
select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

/* 9. Estados de Foco
     - Define un estilo básico para los elementos enfocados, útil para accesibilidad.
  */
:focus-visible {
  outline: 2px solid rgba(0, 0, 255, 0.2666666667);
  outline-offset: 2px;
}

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

/* Estilo base para iconos */
.ico {
  width: 24px;
  /* Tamaño por defecto */
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  /* Alinea con el texto, si es necesario */
  -o-object-fit: contain;
     object-fit: contain;
  /* Asegura que el vector se mantenga en proporción */
  mix-blend-mode: multiply;
  /* Mezcla el color del icono con el color del texto */
}

/* Variantes de tamaño */
.ico-18 {
  width: 18px;
  height: 18px;
}

.ico-32 {
  width: 32px;
  height: 32px;
}

.ico-42 {
  width: 42px;
  height: 42px;
}

.ico-54 {
  width: 54px;
  height: 54px;
}

/* LAYOUT */
body {
  margin: 0;
  font-family: "Banamex Text", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  background-color: #FAFAF8;
}
body.blue-page {
  background-color: #292C33;
}

main {
  padding-bottom: 1.75rem;
}
main.blue-page {
  background-color: #292C33;
}

footer {
  padding: 1rem 0.67rem;
  text-align: center;
}

a {
  color: #003746;
  font-weight: 400;
  text-decoration: none;
}
a:hover {
  color: #003746;
  font-weight: 500;
  text-decoration: none;
}
a.disabled {
  color: #8c8c8c;
  font-weight: 400;
}

.container {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 320px) and (max-width: 374px) {
  .container {
    width: 94%;
  }
}
/*Utilities*/
.p-0 {
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
}

.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 1em !important;
}

.mt-2 {
  margin-top: 2.5em !important;
}

.mb-80px {
  margin-bottom: 80px !important;
}

.d-none {
  display: none !important;
}

.wrapper-MC {
  margin: 0 auto;
  max-width: 1200px;
}

/*Utilities END*/
/*Color clases*/
.primary {
  color: #003746;
}

.bg-primary {
  background-color: #292C33;
}

.secondary {
  color: #3ABAED;
}

.bg-secondary {
  background-color: #3ABAED;
}

.tertiary {
  color: #949594;
}

.bg-tertiary {
  background-color: #949594;
}

.bg-grey-01 {
  background-color: #4D4D4E;
}

.bg-grey-02 {
  background-color: #949594;
}

.warning {
  color: unset;
}

.bg-warning {
  background-color: unset;
}

.danger {
  color: #FF1B44;
}

.bg-danger {
  background-color: #FF1B44;
}

.success {
  color: #5FC500;
}

.bg-success {
  background-color: #5FC500;
}

.base-color {
  color: #003746;
}

.blue-primary {
  color: #056DAE;
}

.blue-elements {
  color: #003746;
}

.grey-base {
  color: #4D4D4E;
}

.grey-light {
  color: #949594;
}

.white-base {
  color: #FFFFFF;
}

.green-base {
  color: #5FC500;
}

.red-error {
  color: #FF1B44;
}

.bg-base-color {
  background-color: #003746;
}

.bg-01 {
  background-color: #292C33;
}

.bg-02 {
  background-color: #E6F7FF;
}

.bg-blue-elements {
  background-color: #003746;
}

.bg-grey-base {
  background-color: #949594;
}

.bg-grey-light {
  background-color: #8c8c8c;
}

.bg-grey-ultralight {
  background-color: #F0F0F0;
}

.bg-white-base {
  background-color: #FFFFFF;
}

.bg-green-base {
  background-color: #5FC500;
}

.bg-red-error {
  background-color: #FF1B44;
}

/*Color clases END*/
/*Tipografía base*/
h1, h2, h3 {
  font-family: "Banamex Display", sans-serif;
  color: #003746;
}

h1 {
  font-size: 28px;
  font-weight: 600;
}

h2 {
  font-size: 24px;
  font-weight: 600;
}

h3 {
  font-size: 20px;
  font-weight: 500;
}

.f-medium {
  font-weight: 500;
}

.f-bold {
  font-weight: 600;
  font-family: "Banamex Text", sans-serif;
}

.f-small {
  font-size: 14px;
}

.f-small-medium {
  font-size: 14px;
  font-weight: 500;
}

.f-small-bold {
  font-size: 14px;
  font-weight: 600;
}

.f-xsmall {
  font-size: 12px;
}

.f-xsmall-bold {
  font-size: 12px;
  font-weight: 600;
}

/*Tipografía base END*/
/*Parrafos*/
.text-center {
  text-align: center;
}

/*Parrafos END*/
/*Efectos graficos base*/
.circled {
  border-radius: 100%;
}

/*Efectos graficos END*/
.relative {
  position: relative;
}

/* Animación suave */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Clase para aplicar la animación */
.animate__fadeInUp {
  opacity: 0; /* Comienza invisible */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate__fadeInUp--visible {
  opacity: 1;
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Clase para aplicar la animación */
.animate__fadeInLeft {
  opacity: 0; /* Comienza invisible */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate__fadeInLeft--visible {
  opacity: 1;
  animation: fadeInLeft 0.6s ease-out forwards;
}

.white-page {
  background-color: #FAFAF8;
}

.blue-page {
  background-color: #292C33;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
.flex {
  display: flex;
  justify-content: end;
  flex-flow: column;
}

.btn-position {
  top: 50% !important;
  height: -moz-min-content !important;
  height: min-content !important;
}
.btn-position h1 {
  color: #292C33 !important;
}

/* Sistema de diseño WL */
.dswl {
  /*layout*/
  /*elements*/
}
.dswl p {
  align-self: flex-start;
  margin: 0.67em 0;
}
.dswl .dswl-row {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
.dswl .dswl-col {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0%;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.dswl .dswl-col.dswl-col-1 {
  flex: 1 0 8.33%;
}
.dswl .dswl-col.dswl-col-2 {
  flex: 1 0 16.66%;
}
.dswl .dswl-col.dswl-col-3 {
  flex: 1 0 25%;
}
.dswl .dswl-col.dswl-col-4 {
  flex: 1 0 33.33%;
}
.dswl .dswl-col.dswl-col-5 {
  flex: 1 0 41.66%;
}
.dswl .dswl-col.dswl-col-6 {
  flex: 1 0 50%;
}
.dswl .dswl-col.dswl-col-7 {
  flex: 1 0 58.33%;
}
.dswl .dswl-col.dswl-col-8 {
  flex: 1 0 66.66%;
}
.dswl .dswl-col.dswl-col-9 {
  flex: 1 0 75%;
}
.dswl .dswl-col.dswl-col-10 {
  flex: 1 0 83.33%;
}
.dswl .dswl-col.dswl-col-11 {
  flex: 1 0 91.66%;
}
.dswl .dswl-col.dswl-col-12 {
  flex: 1 0 100%;
}
.dswl .colors-circles {
  width: 60px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
.dswl .colors-circles.color-circles-bordered {
  border: 1px solid #003746;
}

.pt-7 {
  padding-top: 7rem !important;
}

@media (min-width: 576px) {
  .dswl-col {
    display: flex;
  }
}
@media (min-width: 768px) {
  .dswl .dswl-col {
    display: flex;
  }
  .dswl .dswl-col.dswl-col-md-1 {
    flex: 1 0 8.33%;
  }
  .dswl .dswl-col.dswl-col-md-2 {
    flex: 1 0 16.66%;
  }
  .dswl .dswl-col.dswl-col-md-3 {
    flex: 1 0 25%;
  }
  .dswl .dswl-col.dswl-col-md-4 {
    flex: 1 0 33.33%;
  }
  .dswl .dswl-col.dswl-col-md-5 {
    flex: 1 0 41.66%;
  }
  .dswl .dswl-col.dswl-col-md-6 {
    flex: 1 0 50%;
  }
  .dswl .dswl-col.dswl-col-md-7 {
    flex: 1 0 58.33%;
  }
  .dswl .dswl-col.dswl-col-md-8 {
    flex: 1 0 66.66%;
  }
  .dswl .dswl-col.dswl-col-md-9 {
    flex: 1 0 75%;
  }
  .dswl .dswl-col.dswl-col-md-10 {
    flex: 1 0 83.33%;
  }
  .dswl .dswl-col.dswl-col-md-11 {
    flex: 1 0 91.66%;
  }
  .dswl .dswl-col.dswl-col-md-12 {
    flex: 1 0 100%;
  }
}
/* Sistema de diseño WL END */
input[type=text],
input[type=password],
input[type=date],
input[type=email],
input[type=tel],
input[type=number],
input[type=search],
input[type=url],
input[type=datetime-local],
input[type=month],
input[type=time],
input[type=week],
textarea,
select {
  width: 100%;
  margin: 8px 0 8px 0;
  display: inline-block;
  position: relative;
  border: 1px solid #005162;
  border-radius: 12px;
  box-sizing: border-box;
  resize: none;
  color: #4D4D4E;
  background-color: #ffffff;
  cursor: pointer;
  padding: 16px 18px;
}
input[type=text].requiered, input[type=text].required,
input[type=password].requiered,
input[type=password].required,
input[type=date].requiered,
input[type=date].required,
input[type=email].requiered,
input[type=email].required,
input[type=tel].requiered,
input[type=tel].required,
input[type=number].requiered,
input[type=number].required,
input[type=search].requiered,
input[type=search].required,
input[type=url].requiered,
input[type=url].required,
input[type=datetime-local].requiered,
input[type=datetime-local].required,
input[type=month].requiered,
input[type=month].required,
input[type=time].requiered,
input[type=time].required,
input[type=week].requiered,
input[type=week].required,
textarea.requiered,
textarea.required,
select.requiered,
select.required {
  border-color: #EE515B;
}
input[type=text]:disabled, input[type=text].disabled,
input[type=password]:disabled,
input[type=password].disabled,
input[type=date]:disabled,
input[type=date].disabled,
input[type=email]:disabled,
input[type=email].disabled,
input[type=tel]:disabled,
input[type=tel].disabled,
input[type=number]:disabled,
input[type=number].disabled,
input[type=search]:disabled,
input[type=search].disabled,
input[type=url]:disabled,
input[type=url].disabled,
input[type=datetime-local]:disabled,
input[type=datetime-local].disabled,
input[type=month]:disabled,
input[type=month].disabled,
input[type=time]:disabled,
input[type=time].disabled,
input[type=week]:disabled,
input[type=week].disabled,
textarea:disabled,
textarea.disabled,
select:disabled,
select.disabled {
  background-color: #D9D9D9;
  border-color: #D9D9D9;
  color: #949594;
}
input[type=text]:focus, input[type=text]:focus,
input[type=password]:focus,
input[type=password]:focus,
input[type=date]:focus,
input[type=date]:focus,
input[type=email]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=search]:focus,
input[type=url]:focus,
input[type=url]:focus,
input[type=datetime-local]:focus,
input[type=datetime-local]:focus,
input[type=month]:focus,
input[type=month]:focus,
input[type=time]:focus,
input[type=time]:focus,
input[type=week]:focus,
input[type=week]:focus,
textarea:focus,
textarea:focus,
select:focus,
select:focus {
  outline: none;
}
input[type=text].input-search,
input[type=password].input-search,
input[type=date].input-search,
input[type=email].input-search,
input[type=tel].input-search,
input[type=number].input-search,
input[type=search].input-search,
input[type=url].input-search,
input[type=datetime-local].input-search,
input[type=month].input-search,
input[type=time].input-search,
input[type=week].input-search,
textarea.input-search,
select.input-search {
  background-image: url(../img/svg/mglass-icon.svg);
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 1.25rem auto;
}
input[type=text].input-search-two,
input[type=password].input-search-two,
input[type=date].input-search-two,
input[type=email].input-search-two,
input[type=tel].input-search-two,
input[type=number].input-search-two,
input[type=search].input-search-two,
input[type=url].input-search-two,
input[type=datetime-local].input-search-two,
input[type=month].input-search-two,
input[type=time].input-search-two,
input[type=week].input-search-two,
textarea.input-search-two,
select.input-search-two {
  background-color: #c4d2d9;
}
input[type=text].input-search-three,
input[type=password].input-search-three,
input[type=date].input-search-three,
input[type=email].input-search-three,
input[type=tel].input-search-three,
input[type=number].input-search-three,
input[type=search].input-search-three,
input[type=url].input-search-three,
input[type=datetime-local].input-search-three,
input[type=month].input-search-three,
input[type=time].input-search-three,
input[type=week].input-search-three,
textarea.input-search-three,
select.input-search-three {
  background-color: #eaeaea;
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: transparent;
}

button:disabled ~ span {
  color: #949594;
}

.btn-select:focus {
  outline: none;
}

.btn-select {
  border: 1px solid #000000;
  color: #000000;
  width: 100%;
  flex: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  background-color: #ffffff;
}
.btn-select.btn-select-two {
  background-color: #c4d2d9;
}
.btn-select.btn-select-three {
  background-color: #eaeaea;
}

input[type=check] {
  background-color: #ffffff;
  border-radius: 0;
  border: 1px solid #949594;
  border-bottom: 2px solid #4D4D4E;
  width: 30px;
  height: 15px;
}

input[type=date].--noCalendar::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.eye-opened,
.eye-closed {
  position: absolute;
  top: 0;
  right: 1rem;
  bottom: 0;
  margin: auto;
}

.eye-closed {
  display: none;
}

.verificationCode {
  margin-bottom: 1rem;
}

.verificationCode--inputs {
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.verificationCode--inputs > input {
  text-align: center;
  padding-left: 0.15rem;
  padding-right: 0px;
  width: 15px;
}

@media (min-width: 480px) {
  input[type=check] {
    height: 30px;
  }
  .verificationCode--inputs > input {
    width: 30px;
  }
}
.verificationCode {
  width: 100%;
}

.inputLabel {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: #005162;
}

.inputHint {
  color: #005162;
  font-size: 0.8rem;
}

.form-input {
  width: 100%;
}

.form-error .inputLabel,
.form-error button,
.form-error label.error {
  color: #EE515B;
}
.form-error label.error {
  font-size: 0.8rem;
}
.form-error select {
  border-color: #EE515B;
  color: #ffffff;
}
.form-error input[type],
.form-error textarea,
.form-error button.arrow-image {
  border-color: #EE515B;
  border-width: 2px;
  color: #4D4D4E;
  /*background-color: rgba(255,0,0,.2);*/
}
.form-error input[type]::-moz-placeholder {
  color: #FF1B44;
}
.form-error input[type]::placeholder {
  color: #FF1B44;
}
.form-error button:active {
  border-width: 2px;
}
.form-error input[type=check] {
  background-color: #ffffff;
  border-color: #EE515B;
  color: #FF1B44;
}

.arrow-content.error {
  color: #4D4D4E;
}

.form-disabled {
  pointer-events: none;
}
.form-disabled .inputLabel {
  color: #8c8c8c;
}
.form-disabled ::-moz-placeholder {
  color: #949594;
}
.form-disabled ::placeholder {
  color: #949594;
}
.form-disabled input[type],
.form-disabled textarea,
.form-disabled select,
.form-disabled .arrow-content::after {
  background-color: #D9D9D9;
  border-color: #D9D9D9;
  color: #949594;
}
.form-disabled.checkboxContainer input ~ .checkmark {
  background-color: #D9D9D9 !important;
  border-color: #949594;
}
.form-disabled.checkboxContainer input ~ .checkmark:after {
  border-color: #D9D9D9;
}
.form-disabled.radioContainer input ~ .checkmark--radio {
  background-color: #D9D9D9 !important;
  border-color: #949594;
}
.form-disabled.radioContainer input ~ .checkmark--radio:after {
  background-color: #D9D9D9;
}

.form-icon {
  position: relative;
}
.form-icon > .inputIcon {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translate(50%, -50%);
  color: #4D4D4E;
}
.form-icon > .inputIcon:hover {
  cursor: pointer;
}

textarea {
  border-radius: 15px;
}

select {
  margin-top: 8px;
}

/* #region select*/
.selectContainer {
  position: relative;
}
.selectContainer select {
  display: none;
  margin-top: 0;
}

.option--selected {
  background-color: #FFFFFF;
}

/*arrow select element:*/
.option--selected:after {
  position: absolute;
  content: "";
  top: 43%;
  right: 16px;
  height: 10px;
  width: 10px;
  border-top: solid 0px transparent;
  border-right: solid 0px transparent;
  border-bottom: solid 2px #003746;
  border-left: solid 2px #003746;
  transform: rotate(-45deg) translateY(-50%);
  transition: all 0.3s ease-in-out;
}

/*arrow select (active):*/
.option--selected.select-arrow-active:after {
  top: 51%;
  border-bottom: solid 0px transparent;
  border-left: solid 0px transparent;
  border-top: solid 2px #003746;
  border-right: solid 2px #003746;
}

/*items (options selected)*/
.option--selected {
  padding: 12px 20px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 1px solid #005162;
  border-radius: 12px;
  box-sizing: border-box;
  color: #4D4D4E;
  background-color: #FFFFFF;
}

.option--items div {
  padding: 12px 20px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 1px solid #005162;
  box-sizing: border-box;
  color: #4D4D4E;
}
.option--items div:first-of-type {
  border-radius: 10px 10px 0 0;
}
.option--items div:last-of-type {
  border-radius: 0 0 10px 10px;
}

/*style items (options):*/
.option--items {
  position: absolute;
  border-radius: 12px;
  background-color: #FFFFFF;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  transform-origin: top center;
  transform: scaleY(1);
  opacity: 1;
  transition: all 0.25s ease-out;
}

.select-hide {
  display: none;
}

.option--items div:hover,
.same-as-selected {
  background-color: rgba(0, 55, 70, 0.25);
}

/* #endregion */
/* #region buttons */
/*buttons*/
.btn {
  display: inline-block;
  line-height: 1px;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  font-family: "Banamex Text", sans-serif;
  border-radius: 12px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  height: 43px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 15px;
  margin: 0;
}

.btn:focus {
  outline: none;
}

.btn::first-letter {
  text-transform: capitalize;
}

.btn-light {
  color: #ffffff;
  background-color: #3ABAED;
  border: 1px solid #3ABAED;
}
.btn-light:hover {
  color: #ffffff;
  background-color: #056DAE;
  border-color: #056DAE;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.btn-light:disabled {
  color: #056DAE;
  background-color: #F8F8F8;
  box-shadow: 0 0 0 transparent;
  border-color: #F8F8F8;
}

.btn-white {
  color: #003746;
  background-color: #ffffff;
  border: 1px solid #000000;
}
.btn-white:hover {
  color: #ffffff;
  background-color: #003746;
  border: 1px solid #000000;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.btn-white:disabled {
  color: #003746;
  background-color: #DBDBDB;
  border-color: #F8F8F8;
  box-shadow: 0 0 0 transparent;
}

.btn-white-off {
  opacity: 0.3;
  color: #056DAE;
  background-color: #DCECF3;
  border: 1px solid #DCECF3;
}
.btn-white-off:hover {
  color: #ffffff;
  background-color: #3ABAED;
  border: 1px solid #3ABAED;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.btn-white-off:disabled {
  color: #949594;
  background-color: #4D4D4E;
  border-color: #949594;
  box-shadow: 0 0 0 transparent;
}

.btn-default {
  color: #ffffff;
  background-color: #003746;
  border: 1px solid #000000;
}
.btn-default:hover {
  color: #003746;
  background-color: #ffffff;
  border-color: #000000;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.btn-default:disabled {
  color: #ffffff;
  background-color: #003746;
  border: 1px solid #000000;
  box-shadow: 0 0 0 transparent;
  opacity: 0.3;
}

.btn-default:hover a {
  color: #ffffff;
}

.btn-desactived {
  opacity: 0.3;
  color: #ffffff;
  background-color: #056DAE;
  border: 1px solid #056DAE;
}
.btn-desactived:hover {
  color: #ffffff;
  background-color: #3ABAED;
  border-color: #3ABAED;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.btn-desactived:disabled {
  color: #ffffff;
  background-color: #056DAE;
  border: 1px solid #056DAE;
  box-shadow: 0 0 0 transparent;
  opacity: 0.3;
}

.btn-close {
  border-radius: 999px;
  background-image: url(../img/svg/close.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.btn-close:hover {
  background-color: #949594;
  background-blend-mode: difference;
}
.btn-close:disabled {
  background-color: #949594;
  background-blend-mode: difference;
}

.card-login button.back {
  display: flex;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.card-login button.back:hover p {
  text-decoration: underline;
}

.input-counter {
  display: flex;
  align-items: center;
  flex-flow: row;
  border: 1px solid #F8F8F8;
  border-radius: 8px;
}

.white-page .input-counter {
  border: 1px solid #4D4D4E;
}
.white-page .input-counter button {
  color: #4D4D4E;
}

.input-counter button {
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  color: #F8F8F8;
  border: none;
  margin: 0 15px;
}

.input-counter input {
  width: 100%;
  text-align: center;
  border: none;
  margin: 0;
}

.input-counter button:focus,
.input-counter input:focus {
  outline: none;
}

.body-select {
  display: none;
  position: absolute;
  background-color: #ffffff;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  border-radius: 11px;
  font-family: "Banamex Text", sans-serif;
  font-size: 1rem;
  border: 1px solid #000000;
  text-transform: initial;
}
.body-select li.title-body-select {
  background-color: #E6F7FF;
  color: #000000;
  border-radius: 8px 8px 0 0;
}
.body-select a {
  color: #949594;
}
.body-select li:hover {
  background-color: #DBDBDB;
  cursor: pointer;
}
.body-select li:hover a {
  color: #000000;
}
.body-select a:first-child:hover li,
.body-select li:first-child:hover {
  border-radius: 8px 8px 0 0;
}
.body-select a:last-child li,
.body-select li:last-child:hover {
  border-radius: 0 0 8px 8px;
}
.body-select li a:active {
  border-bottom: transparent !important;
}
.body-select li {
  padding: 0.85em;
  border-bottom: 1px solid #DBDBDB;
  color: #4D4D4E;
  font-size: 14px;
}
.body-select li .title--select {
  color: #000000;
  font-size: 14px;
  line-height: 2.5em;
}
.body-select li.option--white {
  background-color: #ffffff;
}
.body-select li.option--white .title--select {
  color: #000000;
  font-size: 14px;
  line-height: 2.5em;
}
.body-select li.option--blue {
  background-color: #292C33;
  color: #ffffff;
}
.body-select li.option--blue .title--select {
  color: #ffffff;
  font-size: 14px;
  line-height: 2.5em;
}
.body-select li.option--unaviable {
  color: #949594;
  text-decoration: line-through;
  background-color: #DBDBDB;
}
.body-select li.option--unaviable .title--select {
  color: #949594;
  font-size: 14px;
  line-height: 2.5em;
}
.body-select a:last-child li,
.body-select li:last-child {
  border-bottom: transparent;
}

.arrow-image {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url(../img/svg/arrow-dark.svg);
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 0.65rem auto;
}

button.arrow-image {
  padding-right: 3em;
  text-align: left;
}

button.arrow-image:disabled {
  background-image: url(../img/svg/arrow-dark.svg);
}

.input-container {
  position: relative;
  margin-bottom: 1rem;
  width: 100%;
}

.input-container label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}

.input-container .custom-select {
  position: relative;
  display: inline-block;
  width: 100%;
}

.input-container .custom-select select {
  display: none;
  /* Oculta el elemento select original */
}

.input-container .custom-select .select-selected {
  position: relative;
  border: 1px solid #005162;
  border-radius: 12px;
  padding: 16px 20px;
  background-color: #fff;
  cursor: pointer;
  transition: border-radius 0.3s;
  margin-left: 1px;
  color: #005162;
}

.input-container .custom-select .select-selected::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 10px;
  width: 8px;
  height: 8px;
  border-left: solid 2px black;
  border-bottom: solid 2px black;
  border-top: solid 1px transparent;
  border-right: solid 1px transparent;
  border-radius: 1px;
  transition: transform 0.3s;
  transform: rotate(-45deg) translateY(-100%);
}

.input-container .custom-select .select-selected.select-arrow-active {
  border-radius: 8px;
}

.input-container .custom-select .select-selected.select-arrow-active::after {
  transform: rotate(135deg);
  top: 50%;
}

.input-container .custom-select .select-items {
  position: absolute;
  background-color: #DAE9EE;
  top: calc(100% + 10px);
  left: 1px;
  right: 0;
  z-index: 99;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: none;
  /* Oculta inicialmente */
  max-height: 300px;
  overflow-x: auto;
}

.input-container .custom-select .select-items div {
  padding: 1.15rem 16px;
  border: 1px solid transparent;
  border-color: transparent transparent #A0D6E2 transparent;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: normal;
}

.input-container .custom-select .select-items div:last-of-type {
  border-radius: 0 0 8px 8px;
}

.input-container .custom-select .select-items div:hover,
.input-container .custom-select .select-items .same-as-selected:not(.disabled) {
  background-color: #003746;
  font-weight: 400;
  color: white;
}

.input-container .custom-select .select-items div:hover p:last-of-type,
.input-container .custom-select .select-items .same-as-selected:not(.disabled) p:last-of-type {
  color: white;
}

.input-container .custom-select .select-items .disabled {
  color: #949594 !important;
  background-color: #DBDBDB;
  pointer-events: none !important;
  text-decoration: line-through;
  border-bottom: #949594 1px solid;
}

.input-container .custom-select .select-items .noStock {
  text-decoration: line-through;
}

.input-container .custom-select .select-hide {
  display: none;
  /* Oculta los elementos cuando el select no está abierto */
}

.input-container small {
  display: block;
  margin-top: 0.5rem;
  color: #666;
}

.custom-select {
  position: relative;
  width: 100%;
}

.custom-option {
  font-weight: 600;
}
.custom-option p {
  font-weight: 300;
  margin: 0;
}

select {
  display: none;
  /* Oculta el elemento SELECT original */
}

.select-selected p {
  margin: 0 !important;
}

.select-selected p:nth-of-type(2) {
  display: none;
  /* Oculta el segundo <p> */
}

.select-selected span {
  display: none;
  /* Oculta todos los <span> */
}

.custom-option p:first-of-type {
  /* Estilos para el primer <p> */
  font-size: 14px;
}

.custom-option p:last-of-type {
  /* Estilos para el segundo <p> */
  margin-top: 10px;
  font-size: 11px;
  color: #4D4D4E;
}

.select-selected {
  position: relative;
  transition: border-radius 0.3s;
  margin-left: 1px;
  font-size: 14px;
}
.select-selected:after {
  position: absolute;
  content: "";
  top: 25px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-left: solid 2px #003746;
  border-bottom: solid 2px #003746;
  border-top: solid 1px transparent;
  border-right: solid 1px transparent;
  border-radius: 1px;
  transform: rotate(-45deg);
  transition: all 0.3s;
}
.select-selected.select-arrow-active {
  border-radius: 8px;
}
.select-selected.select-arrow-active:focus {
  outline: solid 2px #005162;
}
.select-selected.select-arrow-active:after {
  transform: rotate(135deg);
  top: 28px;
}

.select-items {
  position: absolute;
  background-color: #fff;
  /* Cambia a tu color de fondo deseado */
  top: 100%;
  left: 1px;
  right: 0;
  z-index: 99;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Ajusta según sea necesario */
  display: none;
  /* Oculta inicialmente */
  outline: solid 1px #d9d9d9;
  max-height: 300px;
  overflow-x: auto;
}

.select-items div {
  padding: 1.15rem 16px;
  border: 1px solid transparent;
  border-color: transparent transparent #ddd transparent;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  font-weight: normal;
  white-space: normal;
  /* Asegura que el texto se muestre correctamente en múltiples líneas */
}
.select-items div:last-of-type {
  border-radius: 8px;
}
.select-items div:hover, .select-items div.same-as-selected:not(.disabled) {
  background-color: #f0f0f0;
  font-weight: bold;
}

.select-items .disabled {
  color: #4c4c4c !important;
  background-color: #f0f0f0;
  pointer-events: none;
}

.select-items .noStock {
  text-decoration: line-through;
}

.select-hide {
  display: none;
  /* Oculta los elementos cuando el select no está abierto */
}

.allow-click {
  pointer-events: all !important;
}

.allow-click:hover {
  background-color: #DBDBD8 !important;
  /* Anular cambios en el fondo */
  color: #4D4D4E !important;
  /* Anular cambios en el color */
}

.allow-click:hover p:last-of-type {
  color: #4D4D4E !important;
}

@media (min-width: 480px) {
  button.btn {
    padding: 10px 20px;
  }
}
.shimmerBG {
  animation-duration: 2.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #f7f7f7;
  background: linear-gradient(to right, hsl(0, 0%, 90%) 8%, hsl(0, 0%, 95%) 18%, hsl(0, 0%, 90%) 33%);
  background-size: 1200px 100%;
}

@keyframes shimmer {
  0% {
    background-position: -1200px 0;
  }
  100% {
    background-position: 1200px 0;
  }
}
.img__Banner--detalleConcierto {
  width: 100%;
  border-radius: 8px;
}

.detalle-concierto__header {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
  margin-top: 8em;
}

/* General styles */
.grid-container-DetalleConcierto {
  display: grid;
  gap: 10px;
  position: relative;
}

.toast {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 12px;
  border-radius: 12px;
  background: #FDE8E0;
}

.toast_text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  font-size: 12px;
  justify-content: center;
}
.toast_text ul {
  font-size: 12px;
  list-style-type: disc;
}
.toast_text ul li {
  font-size: 12px;
  margin-left: 16px;
}

.toast_text__title {
  font-size: 14px;
}
.toast_text__title.toast_text__title_blue {
  font-weight: 600;
  color: #0032E6;
}

.toast_text--p {
  font-size: 12px;
}

/* Colores para diferenciar cada bloque */
.box1 {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  height: -moz-max-content;
  height: max-content;
}

.box2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.box3 .select-DP {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
}

.box5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.box6 {
  max-width: 580px;
  overflow: hidden;
}

.box6 .recomendados_DC .concert-card-home-last {
  height: 268px !important;
  min-height: initial;
  border-right: 1px solid #ffffff;
  border-radius: 0;
}

.single-card-style {
  border-right: 0px !important;
}

.box6 .badge-cday {
  width: 41px;
  height: 40px;
}

.box6 .concert-card-home .concert-card-info {
  gap: 10px;
}

.box6 .cnrtName,
.card-otrasFechas .cnrtName {
  height: 32px !important;
}

.card-otrasFechas .cnrtPlase {
  font-family: "Banamex Text", sans-serif !important;
}

.eventCard.otherDates .viewMore {
  color: white !important;
}
.eventCard.otherDates .viewMore::after {
  background-image: url("../img/svg/ico_chevron-right3.svg");
}

.eventCard.otherDates .eventCard__info {
  padding: 10px;
}

.box6 .recomendados_DC h4 {
  padding-bottom: 18px !important;
}

.box6 .swiper.HomeLastEvSwSlider .swiper-button-prev, .box6 .swiper.SiderOtrasFechas .swiper-button-prev {
  top: 10px;
  right: 50px;
  left: auto;
}
.box6 .swiper.HomeLastEvSwSlider .swiper-button-prev.swiper-button-disabled, .box6 .swiper.SiderOtrasFechas .swiper-button-prev.swiper-button-disabled {
  top: 10px;
  right: 50px;
  left: auto;
}
.box6 .swiper.HomeLastEvSwSlider .swiper-button-next, .box6 .swiper.SiderOtrasFechas .swiper-button-next {
  top: 10px;
  right: 0;
}
.box6 .swiper.HomeLastEvSwSlider .swiper-button-next.swiper-button-disabled, .box6 .swiper.SiderOtrasFechas .swiper-button-next.swiper-button-disabled {
  top: 10px;
  right: 0;
}

.detalleConcierto-swiper-container {
  width: 100%;
  height: 100%;
}

.detalleConcierto-swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.detalleConcierto-swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.grid-container-DetalleConcierto {
  gap: 38px;
}

.grid-container-DetalleConcierto .swiper-wrapper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
}

.detalleConcierto-swiper-container {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.detalleConcierto-mySwiper2 {
  width: 100%;
  height: 80%;
  min-height: 335px;
  position: relative;
}

.detalleConcierto-mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.detalleConcierto-mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
  cursor: pointer;
}

.detalleConcierto-mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.grid--productImages {
  overflow: hidden;
}

.grid--productImages img {
  max-width: 100%;
  height: auto;
}

.detalleConcierto-mySwiper2 .swiper-slide {
  position: relative;
  background-color: white;
  border-radius: 8px;
}

.swiper-slide {
  position: relative;
}

.swiper-slide.overlaySoldout::before {
  content: "Agotados";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--Overlay, rgba(77, 77, 78, 0.5));
  color: white;
  font-size: 48px;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  border-radius: 12px;
  pointer-events: none;
  /* Asegura que el overlay no interfiera con la navegación del swiper */
}

.swiper-slide.overlaySoldout::after {
  content: "Agotados";
  position: absolute;
  bottom: 16px;
  right: 16px;
  border-radius: 32px;
  background: #FBCFE8;
  color: #B10005;
  padding: 8px 16px;
  font-size: 16px;
  z-index: 1;
  pointer-events: none;
}

.disabled-click {
  pointer-events: none;
}

.subtitle--detalleConcierto {
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.day__container {
  display: flex;
  width: 45px;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  flex-shrink: 0;
  background-color: #005162;
}

.day__container p {
  font-size: 20px;
  color: white;
}

.month p {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
}

.month span {
  font-family: "Banamex Text", sans-serif;
}

#eventYear {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.date__detalle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.datehour--Container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.hour {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hour p {
  font-size: 20px;
}

.venue--Container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.venue {
  display: flex;
  align-items: center;
  gap: 6px;
}

.venue p {
  font-size: 20px;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}

.TyC--Container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.TyC--Container .toggle-checkbox {
  display: none;
  /* Oculta el checkbox */
}

.TyC--Container .toggle-content {
  max-height: 4.5em;
  /* Limita a 2 líneas el párrafo */
  overflow: hidden;
  transition: max-height 0.5s ease;
  line-height: 1.5em;
  /* Ajusta la altura de línea según tu diseño */
}

.TyC--Container .toggle-checkbox:checked ~ .toggle-content {
  max-height: 500px;
  /* Ajusta este valor según el contenido */
}

.TyC--Container .toggle-label {
  cursor: pointer;
  display: inline-block;
  margin-top: 0.5em;
}

.TyC--Container .toggle-checkbox:not(:checked) ~ .toggle-label::after {
  content: "Ver más detalles";
}

.TyC--Container .toggle-checkbox:checked ~ .toggle-label::after {
  content: "Ver menos";
}

.box3 .dswl-col {
  width: 100%;
}

.wd-input-Dp {
  width: 100%;
}

.minmaxtitles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.paymixUnit__number {
  font-size: 20px;
}

.paymixUnit__text {
  font-size: 12px;
  color: #4D4D4E;
}

.slider-container {
  width: 100%;
  max-width: 474px;
  margin: 20px auto;
  position: relative;
  font-family: "Banamex Micro", sans-serif;
}
.slider-container .s-c-more-less {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 1em;
  font-size: 12px;
  color: #003746;
  font-weight: 700;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  transition: opacity 0.2s;
  margin-top: 40px;
  /* Aumentar el margen para dejar espacio al valor */
  background: linear-gradient(to right, #003746 100%, #ddd 100%);
  border-radius: 89px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #003746;
}

.slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #003746;
}

.slider-value {
  display: flex;
  background-color: #003746;
  color: #fff;
  padding: 8px;
  border-radius: 8px;
  position: absolute;
  top: -14px;
  transform: translateX(-50%);
  font-size: 14px;
  transition: left 0s ease;
}

.slider-container-disabled .slider {
  background: #ddd;
  background: linear-gradient(to right, #292C33 100%, #989898 100%);
  border-radius: 89px;
  opacity: 0.4;
}
.slider-container-disabled .slider-value {
  background-color: #292C33;
  opacity: 0.4;
}
.slider-container-disabled .s-c-more-less {
  display: none;
}
.total__Container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  align-self: stretch;
}

.boxes__total--container {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  align-self: stretch;
  flex-direction: column;
}

.title__total {
  font-size: 30px;
}

.subtitle__total {
  font-size: 14px;
  color: #4D4D4E;
}

.text__total {
  font-size: 12px;
  color: #4D4D4E;
}

.total__Box {
  display: flex;
  width: 209px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.total__Box span {
  font-size: 20px;
  color: #000;
}

.dex_total {
  font-size: 10px !important;
}

.recomendados_DC .concert-card-home img.concert-image {
  height: auto;
}

.recomendados_DC .concert-card-home-last {
  opacity: 1 !important;
}

.recomendados_DC .swiper-wrapper {
  height: auto;
}

.recomendados_DC h3 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  font-family: "Banamex Display", sans-serif;
  font-weight: 400;
  line-height: normal;
  color: #949594;
}

.recomendados_DC h4 {
  display: block;
  max-width: 60%;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0.86em;
  font-size: 36px;
  font-family: "Banamex Display", sans-serif;
  font-weight: 600;
  line-height: normal;
  color: #292C33;
}

/* Estilos para desktop */
@media (min-width: 621px) {
  .grid-container-DetalleConcierto {
    grid-template-columns: 1fr 1fr;
    gap: 38px;
  }
  .box1 {
    grid-column: 1/2;
    grid-row: 1/5;
  }
  .box2,
  .box3,
  .box4,
  .box5,
  .box6 {
    grid-column: 2/3;
  }
  .box3 .select-DP {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: row;
    align-items: flex-start;
    box-sizing: border-box;
    gap: 16px;
    flex-wrap: nowrap;
  }
  .total__Container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    align-self: stretch;
  }
}
@media (min-width: 1024px) {
  .detalleConcierto-mySwiper2 {
    min-height: 581px;
  }
}
/* Estilos para mobile */
@media (max-width: 620px) {
  .grid-container-DetalleConcierto {
    grid-template-columns: 1fr;
  }
  .box2 {
    order: 1;
  }
  .box1 {
    order: 2;
  }
  .box3 {
    order: 3;
  }
  .box4,
  .box5,
  .box6 {
    order: 4;
  }
}
@media (min-width: 768px) {
  .detalle-concierto__header {
    margin-top: 5em;
  }
}
.eventTitle {
  font-family: "Banamex Display", sans-serif !important;
  font-size: 40px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 56px;
}

/* Custom Swiper Slider */
/* swiper */
.swiper.HomeLastEvSwSlider, .swiper.SiderOtrasFechas {
  margin-top: 1em;
}
.swiper.HomeLastEvSwSlider .swiper-button-prev, .swiper.SiderOtrasFechas .swiper-button-prev {
  width: 40px;
  height: 40px;
  top: 61px;
  right: 50px;
  left: auto;
  margin-top: 0;
  background-image: url(../img/svg/prev-icon.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  color: transparent;
  text-indent: -9000px;
}
.swiper.HomeLastEvSwSlider .swiper-button-prev.swiper-button-disabled, .swiper.SiderOtrasFechas .swiper-button-prev.swiper-button-disabled {
  width: 40px;
  height: 40px;
  top: 61px;
  right: 50px;
  left: auto;
  margin-top: 0;
  background-image: url(../img/svg/prev-icon.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  color: transparent;
  text-indent: -9000px;
  opacity: 0.35;
}
.swiper.HomeLastEvSwSlider .swiper-button-next, .swiper.SiderOtrasFechas .swiper-button-next {
  width: 40px;
  height: 40px;
  top: 61px;
  right: 0;
  margin-top: 0;
  background-image: url(../img/svg/next-icon.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  color: transparent;
  text-indent: -9000px;
}
.swiper.HomeLastEvSwSlider .swiper-button-next.swiper-button-disabled, .swiper.SiderOtrasFechas .swiper-button-next.swiper-button-disabled {
  width: 40px;
  height: 40px;
  top: 61px;
  right: 0;
  margin-top: 0;
  background-image: url(../img/svg/next-icon.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  color: transparent;
  text-indent: -9000px;
  opacity: 0.35;
}

@media (min-width: 768px) {
  .swiper.HomeLastEvSwSlider .swiper-button-prev, .swiper.SiderOtrasFechas .swiper-button-prev {
    top: 21px;
    right: 50px;
    left: auto;
  }
  .swiper.HomeLastEvSwSlider .swiper-button-prev.swiper-button-disabled, .swiper.SiderOtrasFechas .swiper-button-prev.swiper-button-disabled {
    top: 21px;
    right: 50px;
    left: auto;
  }
  .swiper.HomeLastEvSwSlider .swiper-button-next, .swiper.SiderOtrasFechas .swiper-button-next {
    top: 21px;
    right: 0;
  }
  .swiper.HomeLastEvSwSlider .swiper-button-next.swiper-button-disabled, .swiper.SiderOtrasFechas .swiper-button-next.swiper-button-disabled {
    top: 21px;
    right: 0;
  }
}
.HomeSwSlider {
  position: relative;
  border-radius: 24px;
  margin-top: 4em;
}
.HomeSwSlider .swiper-wrapper {
  grid-area: 1/1/2/2;
  z-index: 1;
}
.HomeSwSlider .swiper-wrapper .swiper-slide {
  display: grid;
  grid-template-columns: 500px auto 1fr;
  grid-template-rows: 1.1fr auto auto;
  gap: 0px 0px;
  position: relative;
}
.HomeSwSlider .swiper-wrapper .swiper-slide .slideCopy {
  grid-area: 2/1/4/2;
  z-index: 2;
  background-color: #FAFAF8;
  padding: 32px 0px 32px 54px;
  border-radius: 0 24px 0 0;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Banamex Display", sans-serif !important;
  color: #005162;
}
.HomeSwSlider .swiper-wrapper .swiper-slide .slideCopy .subtitle {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  color: #005162;
}
.HomeSwSlider .swiper-wrapper .swiper-slide .slideCopy .leadTitle {
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  color: #005162;
}
.HomeSwSlider .swiper-wrapper .swiper-slide .decorativeArea {
  grid-area: 3/2/4/3;
  z-index: 2;
  width: 100px;
  border-radius: 0px 24px 0px 0px;
  background-color: #FAFAF8;
  height: 80%;
  position: absolute;
  bottom: 0px;
}
.HomeSwSlider .swiper-wrapper .swiper-slide .decorativeArea::before {
  display: block;
  content: " ";
  height: 24px;
  width: 24px;
  position: absolute;
  left: 0px;
  top: -24px;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
  z-index: 99;
  background-color: inherit;
}
.HomeSwSlider .swiper-wrapper .swiper-slide .slideImg {
  grid-area: 1/1/4/4;
  z-index: 1;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}
.HomeSwSlider .swiper-wrapper .swiper-slide .slideImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.HomeSwSlider .sliderNavigation {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.HomeSwSlider .header__button-prev,
.HomeSwSlider .header__button-next {
  display: block;
  width: 30px;
  height: 32px;
  background-color: #005162;
  transition: all 0.3s ease-in-out;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.62 31.87'%3E%3Cpath d='M35.62 15.94C35.62 2.69 32.47 0 17.81 0S0 2.69 0 15.94s3.15 15.94 17.81 15.94 17.81-2.69 17.81-15.94Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.62 31.87'%3E%3Cpath d='M35.62 15.94C35.62 2.69 32.47 0 17.81 0S0 2.69 0 15.94s3.15 15.94 17.81 15.94 17.81-2.69 17.81-15.94Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.HomeSwSlider .header__button-prev:hover,
.HomeSwSlider .header__button-next:hover {
  background-color: #001E22;
  animation: liquidTransition 0.3s ease-in-out;
}
.HomeSwSlider .header__button-prev::before {
  background-image: url("../img/svg/ico_chevron-left.svg");
  background-size: cover;
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
}
.HomeSwSlider .header__button-next::before {
  background-image: url("../img/svg/ico_chevron-right.svg");
  background-size: cover;
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .HomeSwSlider {
    margin-top: 6em;
  }
}
@media (max-width: 768px) {
  .HomeSwSlider .swiper-wrapper {
    grid-area: 1/1/2/2;
    z-index: 1;
  }
  .HomeSwSlider .swiper-wrapper .swiper-slide {
    display: grid;
    grid-template-columns: 1fr 80px 0px;
    grid-template-rows: 7fr 80px 5fr;
    gap: 0px 0px;
    position: relative;
  }
  .HomeSwSlider .swiper-wrapper .swiper-slide .slideCopy {
    grid-area: 2/1/4/2;
  }
  .HomeSwSlider .swiper-wrapper .swiper-slide .decorativeArea {
    grid-area: 3/2/4/3;
    height: 100%;
  }
  .HomeSwSlider .swiper-wrapper .swiper-slide .slideImg {
    grid-area: 1/1/3/3;
  }
  .HomeSwSlider .sliderNavigation {
    display: none;
  }
}
.sectionHeader {
  color: #005162;
  font-family: "Banamex Display", sans-serif !important;
}
.sectionHeader .supportCopy {
  font-size: 24px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 34px;
}
.sectionHeader .mainCopy {
  font-size: 40px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 56px;
}

.HomeSwSlider .swiper-pagination {
  background-color: #999999;
  border-radius: 9px;
  position: absolute;
  left: unset !important;
  transform: unset !important;
  right: 2rem;
  bottom: 1rem;
  width: auto;
  padding-block: 8px;
  width: auto !important;
  padding-inline-end: 10px;
}
.HomeSwSlider .swiper-pagination-bullet {
  background-color: #ffffff;
  border-radius: 999px;
  opacity: unset;
}
.HomeSwSlider .swiper-pagination-bullet-active {
  background-color: #FF1B44;
  width: 20px;
  border-radius: 999px;
}

.swiper.HomeSwSlider.faqHeader .slideCopy,
.swiper.HomeSwSlider.faqHeader .decorativeArea {
  background-color: #00AD59;
  color: #ffffff !important;
}
.swiper.HomeSwSlider.faqHeader .slideCopy p,
.swiper.HomeSwSlider.faqHeader .decorativeArea p {
  color: #ffffff !important;
}

div[class^=vSpace-], div[class^=hSpace-] {
  display: block;
}
div[class^=vSpace-][class*="32"], div[class^=hSpace-][class*="32"] {
  height: 32px;
}
div[class^=vSpace-][class*="42"], div[class^=hSpace-][class*="42"] {
  height: 42px;
}
div[class^=vSpace-][class*="52"], div[class^=hSpace-][class*="52"] {
  height: 52px;
}
div[class^=vSpace-][class*="72"], div[class^=hSpace-][class*="72"] {
  height: 72px;
}
div[class^=vSpace-][class*="30v"], div[class^=hSpace-][class*="30v"] {
  height: 20dvh;
}

.indexSwSlider {
  position: relative;
}
.indexSwSlider .slider-elements {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 8.5%;
  top: 30px;
  z-index: 2;
  text-align: left;
}
.indexSwSlider .slider-elements h1 {
  padding-left: 10px;
  font-size: 24px;
  font-weight: 300;
  color: #FFFFFF;
  border-left: 2px solid #CB2525;
}
.indexSwSlider .slider-elements h2 {
  font-size: 30px;
  font-weight: 300;
  color: #FFFFFF;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .indexSwSlider .swiper-wrapper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .indexSwSlider .swiper-wrapper a {
    width: 100%;
    display: block;
  }
  .indexSwSlider .swiper-wrapper .swiper-slide img {
    display: block;
    width: auto;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.cartelera-indx {
  display: flex;
  flex-direction: column;
  padding: 0.5em 6.5%;
  background: linear-gradient(180deg, #000 0%, #292C33 100%), var(--Colors-BlackBanamex, #292C33);
}
.cartelera-indx h3 {
  width: 100%;
  font-size: 30px;
  font-weight: 300;
  font-family: "Banamex Text", sans-serif;
  color: #FFFFFF;
  text-transform: none;
}
.cartelera-indx .crtlraCnrtsSwSlider {
  width: 100%;
  padding-top: 1.5em;
}

@media (min-width: 320px) and (max-width: 370px) {
  .indexSwSlider .slider-elements {
    left: 5%;
    top: 20px;
  }
}
@media (min-width: 768px) {
  .swiper-wrapper .swiper-slide.swiper-slide-mb {
    display: none;
  }
  .swiper-wrapper .swiper-slide.swiper-slide-desktop {
    display: block;
  }
  .indexSwSlider .slider-elements {
    width: auto;
    height: 100%;
    position: absolute;
    left: 5%;
    top: 50px;
  }
  .indexSwSlider .slider-elements h1 {
    padding-left: 10px;
    font-size: 24px;
    font-weight: 300;
  }
  .indexSwSlider .slider-elements h2 {
    font-size: 68px;
    font-weight: 400;
  }
  .cartelera-indx {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 2em 6.5% 2em 5.5%;
  }
  .cartelera-indx h3 {
    width: 50%;
    font-size: 43px;
    text-transform: uppercase;
  }
  .cartelera-indx .crtlraCnrtsSwSlider {
    width: 50%;
  }
}
@media (min-width: 968px) {
  .indexSwSlider .slider-elements h2 {
    font-size: 78px;
  }
  .cartelera-indx h3 {
    width: 45%;
  }
  .cartelera-indx .crtlraCnrtsSwSlider {
    width: 55%;
  }
  main.blue-page {
    min-height: 30px;
  }
}
.concert-card {
  width: 209px;
  min-height: 312px;
  position: relative;
  background-color: #003746;
  background: linear-gradient(180deg, #292C33 10%, #000 100%);
  border-radius: 12px;
}
.concert-card img.concert-image {
  width: 100%;
  border-radius: 12px 12px 0 0;
  /*aspect-ratio: 1/1;*/
  -o-object-fit: contain;
     object-fit: contain;
  max-height: 125px;
}
.concert-card .concert-card-info {
  padding: 15px 15px 0 15px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
}
.concert-card .concert-card-info p:nth-child(2) {
  margin-top: 0;
  margin-bottom: 0;
  font-family: "Banamex Text", sans-serif;
  font-size: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  color: #FFFFFF;
  text-align: left;
  line-height: 0.85em;
}
.concert-card .concert-card-info p:nth-child(2) span {
  font-family: "Banamex Text", sans-serif;
  font-size: 16px;
}
.concert-card .cnrtName {
  height: 40px;
  margin: -0.3em 0 0 0;
  padding-left: 7.5%;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: clip;
  font-family: "Banamex Text", sans-serif;
  font-size: 1rem;
  text-align: left;
  color: #FFFFFF;
}
.concert-card .viewMore {
  position: absolute;
  bottom: 20px;
  left: 7.8%;
  color: #FFFFFF;
  font-size: 16px;
}

.badge-cday {
  width: 54px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border-radius: 4px;
  color: #003746;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.badge-cday img {
  height: 16px;
  filter: invert(100%) sepia(3%) saturate(1527%) hue-rotate(180deg) brightness(99%) contrast(87%);
  margin-right: 10px;
}

.concert-card-home {
  width: 320px;
  height: 470px;
  position: relative;
  background-color: #003746;
  background: linear-gradient(180deg, #292C33 10%, #000 100%);
  border-radius: 12px;
}
.concert-card-home.concert-soldout-msg {
  /*&:hover{
    .concert-soldout{
      display: flex;
    }
  }*/
}
.concert-card-home.concert-soldout-msg .concert-soldout {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  font-family: "Banamex Text", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #FFFFFF;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  cursor: pointer;
}
.concert-card-home.concert-soldout-msg .concert-soldout .chip-soldout {
  width: auto;
  display: flex;
  position: absolute;
  left: auto;
  right: 15px;
  top: 75%;
  padding: 4px 8px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 20px;
  background: #FBCFE8;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  font-family: "Banamex Text", sans-serif;
  color: #FF1B44;
}
.concert-card-home a {
  display: block;
  text-decoration: none;
}
.concert-card-home a:hover {
  text-decoration: none;
}
.concert-card-home img.concert-image {
  width: 100%;
  border-radius: 12px 12px 0 0;
  /*aspect-ratio: 1/1;*/
  -o-object-fit: contain;
     object-fit: contain;
  max-height: 192px;
}
.concert-card-home .concert-card-info {
  padding: 15px 15px 0 15px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
}
.concert-card-home .concert-card-info p:nth-child(2) {
  margin-top: 0;
  margin-bottom: 0;
  font-family: "Banamex Text", sans-serif;
  font-size: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  color: #FFFFFF;
  text-align: left;
  line-height: 0.85em;
}
.concert-card-home .concert-card-info p:nth-child(2) span {
  font-family: "Banamex Text", sans-serif;
  font-size: 16px;
}
.concert-card-home .cnrtPlase {
  height: 17px;
  margin: 0.4em 0 0 0;
  padding-left: 16px;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: clip;
  font-family: "Banamex Text", sans-serif;
  font-size: 14px;
  text-align: left;
  color: #FFFFFF;
}
.concert-card-home .cnrtName {
  height: 45px;
  margin: 0.35em 0 0 0;
  padding-left: 16px;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: clip;
  font-family: "Banamex Text", sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  color: #FFFFFF;
}
.concert-card-home .cnrtPts {
  height: auto;
  margin: 0.35em 0 0 0;
  padding-left: 16px;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: clip;
  font-family: "Banamex Text", sans-serif;
  font-size: 16px;
  text-align: left;
  color: #FFFFFF;
}
.concert-card-home .viewMoreBtn {
  height: 31px;
  position: absolute;
  bottom: 25px;
  left: 4%;
  display: flex;
  align-content: center;
  justify-content: center;
  line-height: normal;
  padding-bottom: 0;
  font-size: 16px;
  cursor: pointer;
}
.concert-card-home.concert-card-home-last {
  width: 275px;
  height: 405px;
  max-height: 405px;
  min-height: 405px;
  overflow: hidden;
  opacity: 0.5;
}
.concert-card-home.concert-card-home-last.concert-card-home-last-carrusel {
  height: 345px;
  max-height: 345px;
  min-height: 345px;
  overflow: hidden;
}

@media (min-width: 360px) {
  .concert-card-home.concert-soldout-msg .concert-soldout {
    height: 192px;
  }
}
@media (min-width: 375px) {
  .concert-card-home.concert-card-home-last {
    width: 295px;
  }
  .concert-card-home.concert-soldout-msg .concert-soldout {
    height: 192px;
  }
}
@media (min-width: 414px) {
  .concert-card-home.concert-card-home-last {
    width: 315px;
  }
}
@media (min-width: 768px) {
  .concert-card-home {
    min-height: 480px;
  }
  .concert-card-home .viewMoreBtn {
    bottom: 25px;
  }
  .concert-card-home.concert-card-home-last {
    width: 371px;
  }
  .concert-card-home.concert-soldout-msg .concert-soldout {
    height: 134px;
  }
}
@media (min-width: 820px) {
  .concert-card-home.concert-soldout-msg .concert-soldout {
    height: 139px;
  }
}
@media (min-width: 1024px) {
  .concert-card-home.concert-soldout-msg .concert-soldout {
    height: 181px;
  }
  .concert-card-home.concert-soldout-msg .concert-soldout .chip-soldout {
    top: 80%;
  }
}
@media (min-width: 1280px) {
  .concert-card-home.concert-soldout-msg .concert-soldout {
    height: 191px;
  }
}
@media (min-width: 2240px) {
  .cartelera-indx {
    padding-top: 0;
  }
  .concert-card {
    width: 399px;
    height: 422px;
  }
  .concert-card img.concert-image {
    height: auto;
    max-height: 212px;
  }
  .concert-card .concert-card-info p:nth-child(2) {
    font-size: 34px;
  }
  .concert-card .concert-card-info p:nth-child(2) span {
    font-size: 26px;
  }
  .concert-card .cnrtName {
    height: 40px;
    margin: 1em 0 0 0;
    font-size: 1.25rem;
  }
  .concert-card .viewMore {
    font-size: 26px;
  }
  .badge-cday {
    width: 54px;
    height: 44px;
    margin-right: 1em;
  }
}
.concert-card-home-plus {
  width: 100%;
  min-width: 275px;
  min-height: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #FFFFFF;
  border-radius: 12px;
  text-align: center;
  color: #003746;
}
.concert-card-home-plus img {
  margin-bottom: 15px;
}
.concert-card-home-plus a {
  color: #003746;
}
.concert-card-home-plus a:hover {
  color: #003746;
}

@media (min-width: 768px) {
  .concert-card-home-plus {
    min-height: 480px;
  }
}
.home-indx h1 {
  margin-top: 1em;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  font-family: "Banamex Text", sans-serif;
  font-weight: 400;
  line-height: normal;
  color: #949594;
}
.home-indx h2 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 36px;
  font-family: "Banamex Text", sans-serif;
  font-weight: 600;
  line-height: normal;
  color: #003746;
}
.home-indx h3 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  font-family: "Banamex Text", sans-serif;
  font-weight: 400;
  line-height: normal;
  color: #949594;
}
.home-indx h4 {
  display: block;
  max-width: 60%;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0.86em;
  font-size: 36px;
  font-family: "Banamex Text", sans-serif;
  font-weight: 600;
  line-height: normal;
  color: #003746;
}

.HomeSwSlider {
  position: relative;
  max-width: 1200px;
}

.home-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 1.256em;
  gap: 24px;
}
.home-grid .premio {
  margin: 0 auto;
}
.home-grid .home-grid-element {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

@media (min-width: 768px) {
  .home-indx {
    margin-top: 2em;
  }
  .HomeSwSlider {
    min-height: 30vw;
  }
  .home-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 32.3333% 32.3333% 32.3333%;
    gap: 10px 1.5%;
    margin-top: 1.256em;
  }
  .home-grid .home-grid-element {
    width: auto;
    padding-bottom: 20px;
  }
}
@media (min-width: 968px) {
  .HomeSwSlider {
    min-height: auto;
  }
}
#HomeLastEvSwSlider.pastEvent {
  width: 100%;
}

#HomeLastEvSwSlider.pastEvent .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

#HomeLastEvSwSlider.pastEvent .swiper-slide {
  flex-shrink: 0;
  width: auto; /* Swiper se encarga */
  display: flex;
  justify-content: center;
}

/* LOADER */
.loading {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 1001;
  top: 0;
}

.loader-position {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 85%;
}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#gridPremios {
  min-height: 144px;
}

#spinner {
  width: 100%;
  height: 100%;
  min-height: 333px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}
#spinner.spinnerindx {
  width: 72px;
  height: 72px;
  min-height: 72px;
  display: block;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  background-color: transparent;
}

#spinnerBajo {
  width: 100%;
  display: block;
  min-height: 72px;
  position: relative;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  position: absolute;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.spinner:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #cccccc;
  border-top-color: #000000;
  animation: spinner 0.6s linear infinite;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .spinner {
    top: 45%;
    left: 45%;
  }
  #spinnerBajo {
    width: 100%;
    display: block;
    min-height: 72px;
    position: relative;
  }
}
@keyframes spinnerindx {
  to {
    transform: rotate(360deg);
  }
}
.spinnerindx {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.spinnerindx:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #cccccc;
  border-top-color: #000000;
  animation: spinner 0.6s linear infinite;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* MODULES */
.sidebarLinkContainer {
  display: flex;
  flex-direction: column;
}
.sidebarLinkContainer .sidebarLink {
  display: flex;
  flex-direction: row;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #DBDBDB;
  color: #003746;
  font-size: 16px;
  font-weight: normal;
  font-family: "Banamex Text", sans-serif;
}
.sidebarLinkContainer .sidebarLink:last-of-type {
  border-bottom: 0px transparent;
}
.sidebarLinkContainer .sidebarLink.active {
  color: #292C33;
  font-size: 16px;
  font-weight: 600;
}

.list-legal > li {
  line-height: 1.75;
}

.icon.ico-legal {
  background-image: url("../img/svg/document-inactive-icon.svg");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 18px;
  width: 18px;
  display: block;
}
.icon.ico-legal.active {
  background-image: url("../img/svg/document-active-icon.svg");
}

.faqs {
  min-height: 50vw;
  margin-top: 0.158em;
}
.faqs h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 44px;
  margin-bottom: 1pc;
  max-width: 585px;
  padding-left: 0;
  text-align: left;
  padding: 0;
  margin-top: 0;
}
.faqs h3 p {
  font-size: 16px;
  color: #003746;
  font-weight: bold;
}
.faqs p {
  font-size: 14px;
  padding: 10px 1pc;
  color: #003746;
}
.faqs ul {
  padding-left: 2.5pc;
  list-style-type: disc;
}
.faqs ul li {
  font-size: 14px;
  font-weight: 400;
  padding: 0 0 3px 1px;
}

@media (min-width: 576px) {
  .faqs {
    min-height: 50vw;
  }
}
@media (min-width: 768px) {
  .faqs {
    min-height: 50vw;
  }
}
.aside_fqs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 74pc;
  padding: 2pc 0pc 3pc;
}
.aside_fqs .desktop-off {
  display: grid !important;
}
.aside_fqs .mobile-off {
  display: none !important;
}
.aside_fqs .basesycondiciones h1 {
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
}
@media (min-width: 768px) {
  .aside_fqs .basesycondiciones h1 {
    font-size: 24px;
    line-height: 34px;
  }
}
.aside_fqs .basesycondiciones ol li {
  padding: 0 0 0.56rem 0;
}
.aside_fqs .basesycondiciones ol li ul,
.aside_fqs .basesycondiciones ol li ol {
  list-style-type: disc;
}
.aside_fqs .basesycondiciones ol li ul li,
.aside_fqs .basesycondiciones ol li ol li {
  padding: 0.65rem 0;
}
.aside_fqs .basesycondiciones ol li ul li::marker,
.aside_fqs .basesycondiciones ol li ol li::marker {
  background-color: #005162;
}

.asidefqs .mobile-menu-container {
  position: relative;
}
.asidefqs .sidebar_links_mb {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  min-width: 270px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  position: absolute;
  /* Cambiado a posición absoluta */
  z-index: 1000;
  /* Asegura que aparezca por encima */
  background: #fbe3ff;
  /* Fondo sólido para cubrir contenido */
  border-radius: 0 0 9pt 9pt;
}
.asidefqs .sidebar_links_mb.show {
  max-height: 500px;
  position: absolute;
  /* Mantiene posición absoluta cuando está visible */
}
.asidefqs .sidebar_links_mb li {
  margin-bottom: 5px;
}
.asidefqs .sidebar_links_mb li a {
  display: block;
  padding: 12px 15px;
  background-color: transparent;
  border-radius: 5px;
  text-decoration: none;
  color: #450a27;
  transition: all 0.3s ease;
}
.asidefqs .sidebar_links_mb li a:hover,
.asidefqs .sidebar_links_mb li a.active {
  background-color: transparent;
  color: #450a27;
  font-weight: bold;
}

/* Toggle del menú móvil */
.mobile-menu-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #601636;
  color: #ffffff;
  border-radius: 9pt 9pt 9pt 9pt;
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.999987 7.27997C0.871987 7.27997 0.744088 7.23112 0.646438 7.13352C0.451188 6.93827 0.451188 6.62167 0.646438 6.42637L5.79594 1.27687C6.53649 0.536367 7.74179 0.536267 8.48289 1.27672L13.3535 6.14737C13.5488 6.34262 13.5488 6.65922 13.3535 6.85452C13.1582 7.04972 12.8417 7.04972 12.6464 6.85452L7.77589 1.98402C7.42494 1.63332 6.85384 1.63322 6.50299 1.98402L1.35349 7.13352C1.25594 7.23112 1.12794 7.27997 0.999987 7.27997Z' fill='white'/%3E%3C/svg%3E");
  background-position: 96% center;
  background-repeat: no-repeat;
  background-size: 24px 16px;
  font-size: 14px;
}

.mobile-menu-toggle::after {
  transition: transform 0.3s ease;
}

.mobile-menu-toggle.show {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.999987 7.27997C0.871987 7.27997 0.744088 7.23112 0.646438 7.13352C0.451188 6.93827 0.451188 6.62167 0.646438 6.42637L5.79594 1.27687C6.53649 0.536367 7.74179 0.536267 8.48289 1.27672L13.3535 6.14737C13.5488 6.34262 13.5488 6.65922 13.3535 6.85452C13.1582 7.04972 12.8417 7.04972 12.6464 6.85452L7.77589 1.98402C7.42494 1.63332 6.85384 1.63322 6.50299 1.98402L1.35349 7.13352C1.25594 7.23112 1.12794 7.27997 0.999987 7.27997Z' fill='white' transform='rotate(180 7 4)'/%3E%3C/svg%3E");
  border-radius: 9pt 9pt 0 0;
}

.mobile-menu-toggle.show::after {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .aside_fqs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-template-columns: minmax(270px, 3fr) 9fr;
    justify-content: center;
    align-content: center;
    justify-items: flex-start;
    align-items: flex-start;
  }
  .aside_fqs .desktop-off {
    display: none !important;
  }
  .aside_fqs .mobile-off {
    display: grid !important;
  }
  .asidefqs {
    grid-area: 1/1/2/2;
    width: 100%;
  }
  .asidefqs .faqSidebarTitle {
    background-color: #450a27;
    border-radius: 9pt;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    line-height: 26px;
    margin: 0 0 1pc;
    min-width: 270px;
    padding: 1pc;
  }
  .asidefqs .sidebar_links {
    display: flex;
    flex-direction: column;
  }
  .asidefqs .sidebar_links .sidebarLink {
    display: flex;
    flex-direction: row;
    padding: 1pc;
    color: #450a27;
    background-color: #FAFAF8;
    text-decoration: none;
    border-radius: 9pt;
    font-size: 14px;
  }
  .asidefqs .sidebar_links .sidebarLink:hover {
    text-decoration: underline;
  }
  .asidefqs .sidebar_links .sidebarLink.active {
    color: #450a27;
    background-color: #fbe3ff;
    text-decoration: none;
  }
  .asidefqs .sidebar_links .sidebarLink:last-of-type {
    border-bottom: 0px transparent;
  }
  .asidefqs .sidebar_links .sidebarLink:focus {
    outline: 1px solid #0076c0 !important;
    outline-offset: -1px;
  }
  .mainfqs {
    grid-area: 1/2/2/3;
    width: 100%;
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .mainAsideTemplatefqs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-template-columns: minmax(270px, 3fr) 9fr;
    justify-content: center;
    align-content: center;
    justify-items: flex-start;
    align-items: flex-start;
    -moz-column-gap: 52px;
         column-gap: 52px;
  }
  .mainfqs {
    grid-area: 1/2/2/3;
    width: 100%;
  }
}
/* Estilos para el contenido */
#aside_content > div {
  display: none;
  padding: 0;
  background-color: #f9f9f9;
  border-radius: 5px;
  margin-bottom: 20px;
}

#aside_content > div.active {
  display: block;
}

#accordion .ui-accordion {
  background-color: #FFFFFF;
}
#accordion .ui-accordion-header {
  display: flex;
  font-family: "Banamex Text", sans-serif;
  flex-direction: row-reverse;
  gap: 24px;
  background-color: #EDF6F7;
  color: #005162;
  border-color: #DAE9EE;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  border-bottom: #A0D6E2 2px solid;
  font-size: 1pc;
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 0;
  padding-top: 1px;
  text-align: left;
}
#accordion .ui-accordion-header.ui-state-active {
  background-color: #EDF6F7;
  color: #005162;
}
#accordion .ui-accordion-header > p {
  margin: 0;
  width: 90%;
  padding-inline: 24px;
}
#accordion .ui-accordion .ui-accordion-header {
  display: flex;
}
#accordion .ui-accordion-content {
  background-color: #F8F8F8;
  padding: 1em 0px !important;
  font-family: "Banamex Text", sans-serif !important;
}
#accordion .accordion-header-active {
  background-color: #EDF6F7;
  border-color: transparent;
  color: #000000;
}
#accordion .ui-icon {
  background-image: url("../img/svg/ico_chevron-down.svg") !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  margin-top: 12px;
}
#accordion .ui-state-active .ui-icon {
  background-image: url("../img/svg/ico_chevron-up.svg") !important;
}
#accordion .faqContainer {
  width: 100%;
}
#accordion .ui-widget-content {
  border: solid 0px transparent;
}

.redeemLayout {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  max-width: 1000px;
  gap: 32px;
  padding-block-start: 32px;
}
.redeemLayout .ticketSummary,
.redeemLayout .redeemForm {
  padding-inline: 24px;
  background-color: rgba 255, 0, 0, 0.21;
}
.redeemLayout .redeemForm {
  flex: 1 1 500px;
}
.redeemLayout .ticketSummary {
  flex: 1 1 320px;
}

.ticketSummaryCard__header {
  background-color: #005162;
  color: white;
  display: flex;
  padding: 10px 0px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  font-family: "Banamex Text";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  border-radius: 12px 12px 0px 0px;
}

.ticketSummaryCard {
  display: flex;
  padding: 24px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: #001E22;
  background: #DAE9EE;
  border-radius: 0px 0px 12px 12px;
}
.ticketSummaryCard.ticketSummaryCard_headerimg {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.ticketSummaryCard .prizeImageContainer {
  height: 90px;
  width: calc(100% + 32px);
  margin-top: -24px;
  margin-left: -16px;
  border-radius: 0px;
  overflow: hidden;
}
.ticketSummaryCard .prizeImageContainer img {
  width: 100%;
  height: auto;
}
.ticketSummaryCard .ticketSummaryCard__contents {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  color: #005162;
}
.ticketSummaryCard a {
  color: #601636;
}
.ticketSummaryCard a:hover {
  color: inherit;
}
.ticketSummaryCard .cardInner {
  display: flex;
  padding: 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 42px;
  align-self: stretch;
}
.ticketSummaryCard .cardInner.cardInner-ticketSummaryCard_headerimg {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.ticketSummaryCard .eventHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  gap: 8px;
  color: #005162;
}
.ticketSummaryCard .eventHeader.eventHeader-custom-paddings {
  padding-top: 10px;
  padding-left: 26px;
  padding-right: 26px;
}
.ticketSummaryCard .eventHeader .dateContainer {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  gap: 8px;
}
.ticketSummaryCard .eventHeader .dateContainer .dateDay {
  display: flex;
  width: 45px;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: white;
  border-radius: 4px;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}
.ticketSummaryCard .eventHeader .dateContainer .dateMonthYear {
  display: flex;
  flex-direction: column;
}
.ticketSummaryCard .eventHeader .dateContainer .dateMonthYear .dateMonth {
  color: #005162;
  text-overflow: ellipsis;
  font-size: 24px;
  font-family: "Banamex Display", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.ticketSummaryCard .eventHeader .dateContainer .dateMonthYear .dateYear {
  font-family: "Banamex Display", sans-serif;
  font-weight: 300;
  font-size: 16px;
}
.ticketSummaryCard .eventContent {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ticketSummaryCard .eventContent.eventContent-custom-paddings {
  padding-left: 26px;
  padding-right: 26px;
}
.ticketSummaryCard .eventContent p {
  padding: 0px;
  margin: 0px;
}
.ticketSummaryCard .eventContent .eventName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
  overflow: hidden;
  color: #005162;
  text-overflow: ellipsis;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  text-align: start;
  line-height: normal;
}
.ticketSummaryCard .eventContent .eventPlace {
  text-align: start;
  color: #005162;
  font-size: 16px;
  font-weight: 300;
}
.ticketSummaryCard .eventContent .eventDetails {
  text-align: start;
  color: #005162;
  font-size: 16px;
  font-weight: 300;
}
.ticketSummaryCard .eventContent .eventTicketQty {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #005162;
}
.ticketSummaryCard .eventContent .eventTicketQty::before {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(../img/svg/ico_ticket2.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: 5px;
}
.ticketSummaryCard .ticketSummaryCard__footer {
  display: flex;
  padding-top: 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border-top: solid 1px #A0D6E2;
}
.ticketSummaryCard .ticketSummaryCard__footer.ticketSummaryCard__footer-custom-margins {
  margin-left: 26px;
  margin-right: 26px;
}
.ticketSummaryCard .footerTitle {
  font-family: "Banamex Display", sans-serif;
  font-size: 32px;
  font-style: normal;
  line-height: 44px;
  color: #005162;
}

.result {
  max-width: 368px;
}

.qtySummary {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-self: stretch;
  align-items: flex-start;
  flex: 1 0 0;
  width: 100%;
  color: #005162;
}
.qtySummary p {
  padding: 0;
  margin: 0;
  color: #005162;
}
.qtySummary .qtySummary__data {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  color: #005162;
}
.qtySummary .qtySummary__data .qtyDecimal {
  font-size: 10px;
  font-weight: 700;
}
.qtySummary .qtySummary__data .qtyUnit {
  color: #005162;
  font-size: 12px;
  font-weight: 400;
}

.redeemForm .formItems {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 24px;
}
.redeemForm .formItems .form-input {
  width: 100%;
  max-width: unset;
}
.redeemForm .formItems .form-input input::-moz-placeholder {
  color: #c1c0c0;
}
.redeemForm .formItems .form-input input::placeholder {
  color: #c1c0c0;
}
.redeemForm .formItems .form-input input[type=text]:disabled::-moz-placeholder {
  color: #949594 !important;
}
.redeemForm .formItems .form-input input[type=text]:disabled::placeholder {
  color: #949594 !important;
}
.redeemForm .btn {
  margin-block: 28px;
  width: 100%;
}

.toastInline {
  display: inline-flex;
  padding: 16px;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  border-radius: 12px;
  background: #f8f8f8;
  width: 100%;
  box-sizing: border-box;
}
.toastInline .toastIcon {
  width: 20px;
  height: 20px;
  background-image: url(../img/svg/exclamation-oct.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.toastInline .toastContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  font-size: 12px;
  font-weight: 400;
}
.toastInline .toastContent ul {
  margin-block: 12px;
}
.toastInline .toastContent a {
  font-weight: 400;
}
.toastInline .toastContent .toastTitle {
  margin-top: 0;
  padding-top: 0;
  font-size: 14px;
  font-weight: 700;
  color: #FF1B44;
}

.twoColForm {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 6fr 6fr;
  gap: 16px;
}

.alignCenter {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  align-content: center;
  align-items: center;
  gap: 24px;
  font-size: 20px;
}
.alignCenter .btn.btn-default {
  height: 19px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
}
.alignCenter p {
  text-align: center;
  margin: 0;
}

.w700p {
  max-width: 700px;
}

.fullCenter {
  height: 80svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.copyIcon {
  margin-bottom: -5px;
  cursor: pointer;
  overflow: visible;
}

.min-H {
  min-height: calc(100vh - 200px);
}

.radioContainer--redeem {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cardCheckbox {
  padding-right: 10px;
  margin-bottom: -2px;
}

.FormCard_intern {
  max-width: 550px;
  margin: 0 auto;
}

.back_container {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0px;
  margin: 8px 0 8px 0;
  position: relative;
  border: 0px;
}

.redeemSection {
  display: flex;
  padding: 12px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  background-color: #DAE9EE;
  border-radius: 16px;
  color: #005162;
  font-size: 18px !important;
  font-family: "Banamex Text", sans-serif !important;
  font-style: normal;
  font-weight: 600 !important;
  line-height: 26px;
  margin-block: 24px;
}

.summaryCard {
  border-radius: 12px;
}
.summaryCard .prizeImageContainer {
  height: 120px;
  border-radius: 12px 12px 0 0;
}
.--redeemResult {
  text-align: center;
  color: #001E22;
  padding-block: 24px;
}
.--redeemResult .title {
  font-family: "Banamex Display";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.--redeemResult .subtitle {
  font-family: "Banamex Text";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}
.--redeemResult .lead {
  font-family: "Banamex Text";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  padding-block: 24px;
}

.successIcon {
  display: inline-block;
  height: 32px;
  width: 32px;
  background-image: url(../img/svg/ico_success2.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: 8px;
}

.resultExchangeCodes {
  display: flex;
  width: 368px;
  padding: 16px 18px;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  border-radius: 8px;
  border: 0.5px solid #BEBEBD;
  background: #FFF;
  font-family: "Banamex Text";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  max-width: 368px;
  width: 100%;
}

.exchangeCodeItem {
  width: 100%;
  text-align: left;
}

.copyAction {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  cursor: pointer;
  color: #601636;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.codeLabel {
  font-family: "Banamex Text";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: #005162;
  padding-bottom: 8px;
}

.codeValue {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.summaryContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.stepIndicatorContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0px;
  width: 100%;
  padding-top: 24px;
}
.stepIndicatorContainer .progressIndicator {
  width: 100%;
  height: 2px;
  background-color: #601636;
  position: relative;
  margin-top: -26px;
  margin-inline: -12px;
  max-width: 200px;
}
.stepIndicatorContainer .progressIndicator.--half {
  background: linear-gradient(to right, #601636 20%, transparent 0%);
}
.stepIndicatorContainer .progressIndicator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #601636;
  border-radius: 2px;
  transition: width 0.3s ease-in-out;
}
.stepIndicatorContainer .stepIndicator__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.stepIndicatorContainer .stepIndicator__item .stepIndicator__number {
  display: flex;
  width: 52px;
  height: 52px;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  background-color: #A0D6E2;
  color: #005162;
}
.stepIndicatorContainer .stepIndicator__item .stepIndicator__text {
  text-align: center;
  font-family: "Banamex Text";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  color: #005162;
  margin-top: 8px;
}
.stepIndicatorContainer .stepIndicator__item.--active .stepIndicator__number {
  background-color: #601636;
  color: white;
}
.stepIndicatorContainer .stepIndicator__item.--completed .stepIndicator__number {
  background-color: #2DDC8E;
  color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stepIndicatorContainer .stepIndicator__item.--completed .stepIndicator__number::after {
  display: block;
  content: " ";
  height: 20px;
  width: 20px;
  background-image: url(../img/svg/ico_check2.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.stripeInput {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0 8px 0;
  display: inline-block;
  position: relative;
  border: 1px solid #000000;
  border-radius: 12px;
  box-sizing: border-box;
  resize: none;
  color: #4D4D4E;
  background-color: #FFFFFF;
  cursor: pointer;
}
.stripeInput.requiered, .stripeInput.required {
  border-color: #EE515B;
}
.stripeInput:disabled, .stripeInput.disabled {
  background-color: #D9D9D9;
  border-color: #EAEAEA;
  color: #505759 !important; /* Color del texto deshabilitado */
  cursor: not-allowed;
}
.stripeInput:disabled::-moz-placeholder, .stripeInput.disabled::-moz-placeholder {
  color: #505759 !important; /* Color del placeholder deshabilitado */
}
.stripeInput:disabled::placeholder, .stripeInput.disabled::placeholder {
  color: #505759 !important; /* Color del placeholder deshabilitado */
}
.stripeInput:focus, .stripeInput:focus {
  outline: none;
}

.stripeInput--focus {
  outline: inputs("active-border-size");
  outline-style: inputs("border-style");
  outline-color: inputs("active-border-color");
  color: inputs("active-color");
}
.stripeInput--focus:focus, .stripeInput--focus:focus-visible, .stripeInput--focus:focus-within {
  outline: inputs("active-border-size");
  outline-style: inputs("border-style");
  outline-color: inputs("active-border-color");
  color: inputs("active-color");
}

.stripeInput--error {
  outline: inputs("error-border-size");
  outline-color: inputs("error-border-color");
  outline-style: inputs("border-style");
  color: inputs("error-color");
  background: inputs("error-background");
}

.modal-cookies-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  font-size: 16px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
}

.modal-cookies-message {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  animation-name: animation-cookie;
  animation-duration: 0.7s;
  text-align: center;
  background: #f0f0f0;
  padding: 2em 5%;
  height: auto;
  width: 90%;
  border-radius: 1.5em 1.5em 0 0;
  text-align: left;
  /* The animation code */
}
.modal-cookies-message h2 {
  color: #003746;
}
.modal-cookies-message a {
  color: #003746;
  padding: 0;
}
.modal-cookies-message a:hover {
  color: #003746;
  text-decoration: none;
}
.modal-cookies-message .modal-cookies-message__links {
  display: flex;
  justify-content: center;
}
.modal-cookies-message .modal-cookies-message__links a.btn-secondary {
  color: #003746;
}
.modal-cookies-message .modal-cookies-message__links a.btn-secondary:hover {
  color: #FFFFFF;
}
.modal-cookies-message .modal-cookies-message__links a {
  margin: 1em;
  font-size: 1em;
}
.modal-cookies-message .modal-cookies-message__links .modal-btn {
  height: 40px;
  min-width: 122px;
  line-height: 2.3em;
}
.modal-cookies-message .modal-cookies-message__links .modal-btn:hover {
  color: #003746;
}
@keyframes animation-cookie {
  from {
    left: -5000px;
  }
  to {
    left: 0;
  }
}
@media screen and (min-width: 768px) {
  .modal-cookies-message .modal-cookies-message__links {
    display: flex;
    justify-content: flex-end;
  }
}
@media screen and (min-width: 1280px) {
  .modal-cookies-message .modal-cookies__links {
    justify-content: flex-start;
  }
  .modal-cookies-message .modal-cookies__links a:first-child {
    margin: 1em 0;
  }
}

/* The Modal (background) */
.modal-cookies-resume {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 2rem; /* Location of the box */
  padding-bottom: 3rem;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  font-weight: 300;
  background: rgba(0, 0, 0, 0.65);
}
.modal-cookies-resume .modal-cookies-resume__content {
  background-color: #f0f0f0;
  margin: auto auto 1rem auto;
  padding: 1rem 2rem 2rem 2rem;
  width: 80%;
  border-radius: 10px;
}
@media screen and (min-width: 375px) {
  .modal-cookies-resume .modal-cookies-resume__content {
    width: 83%;
  }
}
@media screen and (min-width: 414px) {
  .modal-cookies-resume .modal-cookies-resume__content {
    width: 85%;
  }
}
@media screen and (min-width: 768px) {
  .modal-cookies-resume .modal-cookies-resume__content {
    width: 60%;
  }
}
@media screen and (min-width: 1280px) {
  .modal-cookies-resume .modal-cookies-resume__content {
    width: 40%;
  }
}

div.checklist--cookies .checkboxContainer {
  margin-bottom: 5px;
  padding-left: 2.5rem;
}
div.checklist--cookies .inputLabel {
  color: #003746;
  font-weight: 300;
  font-size: 0.85rem;
}
div.checklist--cookies .inputHint {
  font-size: 0.7rem;
}
div.checklist--cookies .checkmark {
  transform: translateY(-50%);
  top: 50%;
}
div.checklist--cookies .btn-md {
  height: auto;
  margin-top: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
}
div.checklist--cookies .form-disabled.checkboxContainer input ~ .checkmark {
  background-color: rgba(217, 217, 217, 0.8) !important;
  border-color: #949594;
}
div.checklist--cookies .form-disabled.checkboxContainer input ~ .checkmark:after {
  border-color: darkgray;
}

/* COMPONENTS */
.tabs {
  border-radius: 15px;
  width: 100%;
  display: flex;
  overflow-y: auto;
  justify-content: flex-start;
  align-items: center;
}
.tabs button {
  padding: 10px;
  background-color: transparent;
  border: 0;
  font-family: "Banamex Text", sans-serif;
  font-size: 16px;
  width: -moz-fit-content;
  width: fit-content;
  box-sizing: border-box;
  height: -moz-fit-content;
  height: fit-content;
  margin: 10px;
}
.tabs button:hover, .tabs button:focus, .tabs button:active, .tabs button.active {
  background-color: #F8F8F8;
  border-radius: 15px;
  color: #000000;
  font-family: "Banamex Text", sans-serif;
  font-size: 16px;
  outline: none;
}

.tabs {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: scroll;
}

.tabs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .tabs button {
    margin: 16px;
    padding: 16px;
    font-size: 22px;
  }
  .tabs button:hover, .tabs button:focus, .tabs button:active, .tabs button.active {
    font-size: 22px;
  }
}
.tabs-1 {
  height: 70px;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.tabs-1 button {
  position: relative;
  width: 100px;
  height: 50px;
  padding: 0;
  margin: 3px 10px;
  flex: none;
}
.tabs-1 button span {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  height: -moz-fit-content;
  height: fit-content;
}

@media (min-width: 768px) {
  .tabs-1 button {
    width: 150px;
  }
}
.tabs-vertical {
  background-color: transparent;
  flex-flow: column;
  display: flex;
}
.tabs-vertical button {
  border: none;
  color: #000000;
  text-align: left;
  padding: 0.75rem 0;
  font-family: "Banamex Text", sans-serif;
  font-size: 1.25rem;
  box-sizing: border-box;
  outline: none;
}
.tabs-vertical button:hover, .tabs-vertical button:active, .tabs-vertical button:focus {
  border-bottom: 1px solid #000000;
  border-radius: 0;
  outline: none;
  font-family: "Banamex Text", sans-serif;
}

.tabs-light {
  background-color: #DBDBDB;
}
.tabs-light button {
  color: #949594;
}

.tabs-dark {
  background-color: #949594;
}
.tabs-dark button {
  color: #FFFFFF;
}

.tabs::-wekit-scrollbar {
  border-radius: 12px;
  background-color: rgba(217, 217, 217, 0.2);
}

.tab-link-1 {
  width: 200px !important;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.tab-link-2 {
  width: 267px !important;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.tab-link-3 {
  width: 120px !important;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}

@media (min-width: 576px) and (max-width: 768px) {
  .tab-link-1 {
    width: 161px !important;
  }
  .tab-link-2 {
    width: 218px !important;
  }
  .tab-link-3 {
    width: 100px !important;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .tab-link-1 {
    width: 173px !important;
    height: 75px !important;
  }
  .tab-link-2 {
    width: 190px !important;
    height: 75px !important;
  }
  .tab-link-3 {
    width: 107px !important;
    height: 75px !important;
  }
}
@media (max-width: 575px) {
  .tab-link-1 {
    width: 100px !important;
    height: 75px !important;
  }
  .tab-link-2 {
    width: 130px !important;
    height: 75px !important;
  }
  .tab-link-3 {
    width: 100px !important;
    height: 75px !important;
  }
}
.blocker {
  z-index: 100;
}

.info-modal {
  width: 300px;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
  top: 0;
  z-index: 5;
  left: 0;
  right: 0;
  margin: auto;
  padding: 40px;
  text-align: center;
  display: none;
  bottom: 0;
  border-radius: 12px;
  background: #003746;
  box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.25);
  font-family: "Banamex Text", sans-serif;
}
.info-modal h2 {
  color: #FFFFFF;
  font-size: 24px;
}
.info-modal h3 {
  color: #FFFFFF;
  font-size: 24px;
}
.info-modal p {
  color: #FFFFFF;
  margin-bottom: 0;
  margin: auto;
  font-size: 14px;
}
.info-modal p.mb-1 {
  margin-bottom: 1rem;
}
.info-modal a {
  color: #FFFFFF;
}
.info-modal img.close {
  position: absolute;
  top: 0;
  right: 0;
}
.info-modal img:nth-child(2) {
  margin-top: 17px;
}

@media (min-width: 375px) {
  .info-modal {
    width: 344px;
  }
}
.modal a.close-modal {
  top: 19px;
  right: 19px;
  width: 14px;
  height: 14px;
  background-image: url(../img/svg/close.svg);
}

@media (min-width: 601px) {
  .info-modal {
    width: 458px;
  }
  .info-modal p {
    width: 300px;
  }
}
@media (max-width: 321px) {
  .info-modal {
    padding: 25px;
  }
}
/* VIEWS */
.login .safeArea {
  display: grid;
  grid-template-columns: minmax(0px, 1fr) minmax(400px, 1920px) minmax(0px, 1fr);
  grid-template-rows: minmax(0px, 1fr) minmax(0px, 800px) minmax(0px, 1fr);
  gap: 0px 0px;
  grid-auto-flow: row;
  margin-block-start: -130px;
}
.login .form-input {
  max-width: unset;
}

.encapsulatedContainer {
  height: 100%;
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
  border-radius: 32px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0px 0px;
  grid-area: 2/2/3/3;
  overflow: auto;
  transition: border-radius 0.2s ease-in-out;
}

.loginForm,
.messageContainer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: start;
}

.loginHint {
  line-height: normal;
}

.loginContainer {
  background-color: #ffffff;
  color: #003746;
  padding: 100px;
  grid-area: 1/1/2/2;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0px 0px 32px 0px;
  position: relative;
  max-width: 600px;
  gap: 32px;
}
.loginContainer::after {
  display: block;
  content: " ";
  height: 32px;
  width: 32px;
  position: absolute;
  left: 0px;
  bottom: -32px;
  -webkit-mask-image: url("./components/legos/img/topLeft.svg");
          mask-image: url("./components/legos/img/topLeft.svg");
  z-index: 99;
  background-color: inherit;
}
.loginContainer::before {
  display: block;
  content: " ";
  height: 32px;
  width: 32px;
  position: absolute;
  top: 0px;
  right: -32px;
  -webkit-mask-image: url("./components/legos/img/topLeft.svg");
          mask-image: url("./components/legos/img/topLeft.svg");
  z-index: 99;
  background-color: inherit;
}
.loginContainer .loginPre {
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
}
@media (min-width: 768px) {
  .loginContainer .loginPre {
    font-size: 32px;
    line-height: 44px;
  }
}
.loginContainer .loginHeader {
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 32px;
  line-height: 38px;
}
@media (min-width: 768px) {
  .loginContainer .loginHeader {
    font-size: 40px;
    line-height: 56px;
  }
}
.loginContainer .loginLead {
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
}
@media (min-width: 768px) {
  .loginContainer .loginLead {
    font-size: 18px;
    line-height: 26px;
  }
}
.loginContainer .loginLead--error {
  display: flex;
  flex-direction: row;
}
.loginContainer .loginLead--error::before {
  content: "";
  display: block;
  height: 40px;
  width: 40px;
  aspect-ratio: 1/1;
  background-image: url("../img/svg/ico_error-solid.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.5rem;
  margin-top: 2px;
}
.loginContainer .loginHeader {
  font-size: clamp(2rem, 1.636rem + 1.818vw, 3rem);
}
.loginContainer .loginPre,
.loginContainer .loginHeader,
.loginContainer .loginLead,
.loginContainer .loginForm,
.loginContainer .messageContainer {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  font-weight: 400;
  line-height: 2.5rem;
}
.loginContainer .loginLead {
  line-height: normal;
}
.loginContainer .loginPre {
  font-size: clamp(1.25rem, 1.2rem + 1.5vw, 2rem);
  margin-bottom: 0.75rem;
}
.loginContainer .headerArea img {
  width: 243px;
  max-width: 243px;
  height: auto;
}

.backgroundImage {
  grid-area: 1/1/3/3;
  z-index: 1;
}
.backgroundImage .loginImage {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 768px) {
  .login .safeArea {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0px, 800px) minmax(0px, 1fr);
  }
  .encapsulatedContainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(320px, 400px) 1fr;
    gap: 0px 0px;
    grid-area: unset;
  }
  .loginContainer {
    grid-area: 2/1/2/2;
    max-width: unset;
    padding: 3rem 1.75rem;
    position: relative;
    border-radius: 0;
  }
  .loginContainer::after {
    content: " ";
    display: block;
    position: absolute;
    top: -4rem;
    right: 0px;
    left: unset;
    width: 18rem;
    height: 4rem;
    background-color: inherit;
    -webkit-mask: unset;
            mask: unset;
    border-radius: 1.5rem 1.5rem 0 0;
  }
  .loginContainer::before {
    content: " ";
    display: block;
    position: absolute;
    top: -1.5rem;
    right: 18rem;
    left: unset;
    width: 1.5rem;
    height: 1.5rem;
    background-color: inherit;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
  }
  .loginContainer .loginHeader,
  .loginContainer .loginLead,
  .loginContainer .loginForm,
  .loginContainer .messageContainer,
  .loginContainer .loginPre {
    max-width: 368px;
    width: 100%;
    margin: 0 auto;
  }
  .backgroundImage {
    grid-area: 1/1/2/3;
  }
}
@media (max-width: 1920px) {
  .encapsulatedContainer {
    border-radius: 0px 0px 0px 0px;
  }
}
.safeArea {
  padding-top: 6em;
}

@media (min-width: 768px) {
  .safeArea {
    padding-top: 4em;
  }
}
.loginForm .encapsulatedInfo,
.messageContainer .encapsulatedInfo {
  margin: unset !important;
}

.loginButtons {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

@media screen and (max-width: 375px) {
  /* Contenedor principal */
  .g-recaptcha {
    display: inline-block;
    transform: scale(0.9);
    transform-origin: 0 0;
    -webkit-transform: scale(0.9);
    -webkit-transform-origin: 0 0;
  }
  .backgroundImage {
    max-width: 375px;
  }
  #loginForm {
    max-width: 310px;
  }
  #loginForm .checkboxContainer {
    max-width: 310px;
  }
}
@media screen and (max-width: 320px) {
  /* Contenedor principal */
  .g-recaptcha {
    display: inline-block;
    transform: scale(0.85);
    transform-origin: 0 0;
    -webkit-transform: scale(0.85);
    -webkit-transform-origin: 0 0;
  }
  .backgroundImage {
    max-width: 320px;
  }
  #loginForm {
    max-width: 264px;
  }
  #loginForm .checkboxContainer {
    max-width: 264px;
  }
}
.aside_bases {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.aside_bases .desktop-off {
  display: grid !important;
}
.aside_bases .mobile-off {
  display: none !important;
}
.aside_bases .basesycondiciones h1 {
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
}
@media (min-width: 768px) {
  .aside_bases .basesycondiciones h1 {
    font-size: 24px;
    line-height: 34px;
  }
}
.aside_bases .basesycondiciones ol li {
  padding: 0 0 0.56rem 0;
}
.aside_bases .basesycondiciones ol li ul {
  list-style-type: disc;
}
.aside_bases .basesycondiciones ol li ul li {
  padding: 0.65rem 0;
}
.aside_bases .basesycondiciones ol li ul li::marker {
  background-color: #005162;
}

.aside {
  /*Sidebar Dropdown*/
}
.aside .sidebar_links {
  display: flex;
  flex-direction: column;
}
.aside .sidebar_links .sidebarLink {
  display: flex;
  flex-direction: row;
  padding: 12px 24px;
  color: #005162;
  background-color: #FAFAF8;
  text-decoration: none;
  border-radius: 18px;
  font-size: 14px;
}
.aside .sidebar_links .sidebarLink:hover {
  text-decoration: underline;
}
.aside .sidebar_links .sidebarLink.active {
  color: #ffffff;
  background-color: #005162;
  text-decoration: none;
}
.aside .sidebar_links .sidebarLink:last-of-type {
  border-bottom: 0px transparent;
}
.aside nav {
  width: 100%;
  position: relative;
}
.aside nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.aside nav ul li.sub-menu {
  width: 100%;
  display: block;
  position: relative;
  padding: 18px 24px;
  color: #ffffff;
}
.aside nav ul li.sub-menu a {
  width: 100%;
  display: block;
  position: relative;
  background-color: #005162;
  padding: 18px 24px;
  color: #ffffff;
  border-radius: 18px;
  text-decoration: none;
  transition: 0.1s linear;
}
.aside nav ul li.sub-menu a .fa {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 24px;
}
.aside nav ul li.sub-menu a .fa-caret-up {
  background-position: center center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-image: url("../images/svg/fa-caret-up.svg");
}
.aside nav ul li.sub-menu a .fa-caret-down {
  background-position: center center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-image: url("../images/svg/fa-caret-down.svg");
}
.aside nav ul li.sub-menu a:hover {
  background-color: #005162;
  color: #A0D6E2;
}
.aside nav ul li.sub-menu ul {
  display: none;
  background-color: transparent;
  border-radius: 18px;
}
.aside nav ul li.sub-menu ul li a {
  padding: 18px 24px;
  color: #005162;
  background-color: #DAE9EE;
}
.aside nav ul li.sub-menu ul li a:hover {
  color: #001E22;
}
.aside nav ul li.sub-menu.active a {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  transition: border-radius 0.1s linear;
}
.aside nav ul li.sub-menu.active ul li a {
  background-color: #DAE9EE;
  border-radius: 0px;
}
.aside nav ul li.sub-menu.active ul li:is(:last-of-type) a {
  background-color: #DAE9EE;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
}

@media (min-width: 768px) {
  .aside_bases {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-template-columns: 3fr 9fr;
    justify-content: center;
    align-content: center;
    justify-items: flex-start;
    align-items: flex-start;
    -moz-column-gap: 50px;
         column-gap: 50px;
  }
  .aside_bases .desktop-off {
    display: none !important;
  }
  .aside_bases .mobile-off {
    display: grid !important;
  }
  .aside {
    grid-area: 1/1/2/2;
    width: 100%;
    max-width: 254px;
  }
  .main {
    grid-area: 1/2/2/3;
    width: 100%;
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .mainAsideTemplate {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-template-columns: 3fr 9fr;
    justify-content: center;
    align-content: center;
    justify-items: flex-start;
    align-items: flex-start;
    -moz-column-gap: 52px;
         column-gap: 52px;
  }
  .main {
    grid-area: 1/2/2/3;
    width: 100%;
  }
}
.checklist.checklist--cookies > .checkboxContainer {
  display: flex !important;
  flex-direction: column !important;
  align-items: start !important;
}

.checklist.checklist--cookies > .checkboxContainer .inputLabel {
  font-size: 0.85em;
}

.checklist.checklist--cookies > .checkboxContainer .inputHint {
  font-size: 0.7em;
  max-width: 600px;
}

.checklist.checklist--cookies {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 18px;
}

.checklist.checklist--cookies > .checkmark--radio,
.checkmark {
  width: 20px;
  height: 21px;
}

.checklist.checklist--cookies > .checkmark--radio,
.checkmark::after {
  top: 1px;
  left: 5px;
  width: 6px;
  height: 12px;
  border-width: 0 2px 2px 0px;
}

.aside_bases .sub-menu a {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  background-color: #003746;
  color: #ffffff;
  padding: 18px 24px;
  border-radius: 20px;
}
.aside_bases .sub-menu.active > a {
  border-radius: 20px 20px 0 0;
}
.aside_bases .sub-menu ul li > a {
  background-color: #DAE9EE;
  color: #003746;
  border-radius: 0px;
}
.aside_bases .sub-menu ul li > a:hover {
  background-color: #003746;
  color: #ffffff;
}
.aside_bases .sub-menu ul li.active > a {
  background-color: #003746;
  color: #ffffff;
}
.aside_bases .sub-menu ul li:last-of-type > a {
  border-radius: 0 0 20px 20px;
}

.guardar-preferencias .btn {
  font-weight: 400;
}
.guardar-preferencias .btn:hover, .guardar-preferencias .btn:active, .guardar-preferencias .btn:focus-visible, .guardar-preferencias .btn:focus {
  font-weight: 400;
}

.landingGrid {
  width: 100%;
  display: grid;
  grid-template-rows: minmax(200px, 0.5fr) max-content max-content;
  padding-inline: 24px;
  padding-block: 24px;
  grid-auto-columns: minmax(auto, 1.25fr) 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: column;
  border-radius: 24px;
  overflow: hidden;
}

.i2 {
  grid-area: 1/1/3/4;
  margin-bottom: 24px;
  border-radius: 24px 24px 24px 0px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-radius: 24px 24px 24px 0px;
  overflow: hidden;
}
.i2 .imgBannerContainer {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.i2 .imgBannerContainer .imgItem {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.i2 .accessModule.--mobile {
  position: relative;
  z-index: 2;
}
.i2 .accessModule.--mobile h2 {
  font-size: clamp(1rem, 3vw + 0.5rem, 1.5rem) !important;
}
.i2 .accessModule.--mobile h3 {
  font-size: clamp(1.25rem, 4vw + 1rem, 2rem) !important;
}
.i2 .accessModule.--mobile .emphasisButton {
  background-color: #A0D6E2;
  color: #003746;
  width: 100% !important;
  max-width: 250px;
  margin-top: 1em !important;
}
.i2 .accessModule.--mobile .emphasisButton:after {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("../img/svg/ico_buttonRight2.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-left: auto;
  transition: transform 0.2s ease-in-out;
}
.i2 .accessModule.--mobile .emphasisButton:hover {
  color: white;
}
.i2 .accessModule.--mobile .emphasisButton:hover:after {
  background-image: url("../img/svg/ico_buttonRight.svg");
}

.i3 {
  grid-area: 2/1/2/1;
  border-radius: 24px 24px 0px 0px;
  z-index: 2;
  margin: 24px 24px 0px 0px;
  position: relative;
  padding: 24px 24px 0px 24px;
  background-color: #DAE9EE;
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .i3 {
    font-size: 32px;
    line-height: 44px;
  }
}
.i3::before {
  display: block;
  content: " ";
  height: 24px;
  width: 24px;
  position: absolute;
  left: 0px;
  top: -24px;
  -webkit-mask-image: url("./components/legos/img/topLeft.svg");
          mask-image: url("./components/legos/img/topLeft.svg");
  z-index: 99;
  background-color: white;
}
.i3::after {
  display: block;
  content: " ";
  height: 24px;
  width: 24px;
  position: absolute;
  right: -24px;
  bottom: 0px;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
  z-index: 99;
  background-color: inherit;
}
.i3 .navigationHome {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  max-width: 80px;
  width: 100%;
  justify-content: center;
  gap: 8px;
}
.i3 .navigationHome .swiper-buttons {
  position: unset;
}

.i3--aux {
  position: relative;
  grid-area: 2/1/2/1;
  border-radius: 24px 24px 0px 0px;
  z-index: 1;
  border-radius: 24px 24px 0px 0px;
  background-color: white;
}
.i3--aux::after {
  display: block;
  content: " ";
  height: 24px;
  width: 24px;
  position: absolute;
  right: -24px;
  bottom: 24px;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
  z-index: 99;
  background-color: white;
}
.i3--aux::before {
  display: block;
  content: " ";
  height: 24px;
  width: 24px;
  position: absolute;
  left: 0px;
  top: -24px;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
  z-index: 99;
  background-color: white;
}

.i4 {
  display: grid;
  grid-template-columns: minmax(300px, 1000px) minmax(200px, 500px);
  gap: 0px 24px;
  grid-auto-flow: row;
  grid-area: 3/1/3/4;
  border-radius: 0px 24px 24px 24px;
}

.j1 {
  border-radius: 0px 24px 24px 24px;
  background-color: #DAE9EE;
  padding: 24px;
}

.j2 {
  border-radius: 24px;
}

.accessModule.--mobile {
  display: none;
}

.accessModule {
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 100%;
  padding: 24px;
}
.accessModule .emphasisButton {
  margin-top: auto;
}
.accessModule h2 {
  font-weight: 200;
  color: #005162;
}
.accessModule h3 {
  font-size: 40px;
  line-height: 50px;
  color: #005162;
}

@media (max-width: 768px) {
  .landingGrid {
    grid-template-rows: 0.5fr auto 1fr;
    grid-template-columns: 1fr;
    padding-inline: 0px;
    padding-block: 0px;
    gap: 0px 0px;
    border-radius: 0px;
  }
  .landingGrid .i2 {
    margin-bottom: 0px;
    border-radius: 0px;
  }
  .landingGrid .i3 {
    grid-area: 2/1/2/3;
    display: flex;
    flex-direction: row;
  }
  .landingGrid .i3::before {
    content: none;
  }
  .landingGrid .i3--aux {
    display: none;
  }
  .landingGrid .i4 {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 0px;
  }
  .landingGrid .j1 {
    border-radius: 0px;
  }
  .landingGrid .j2 {
    display: none;
  }
  .accessModule.--mobile {
    display: flex;
  }
  .accessModule.--mobile.--landing > .sectionHeader {
    color: white !important;
  }
  .accessModule.--mobile h1,
  .accessModule.--mobile h2,
  .accessModule.--mobile h3 {
    color: white !important;
  }
  .accessModule.--mobile h2 {
    font-weight: 200;
  }
  .accessModule.--mobile h3 {
    font-size: 40px;
    line-height: 50px;
  }
  .accessModule.--mobile .emphasisButton {
    margin-top: 32px;
  }
  .accessModule.--desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .i3 h1 {
    width: 100%;
    min-width: 200px;
  }
}
@media (max-width: 432px) {
  .landingGrid .i3 .navigationHome {
    flex-wrap: wrap !important;
  }
}
.gridCartelera {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
  justify-content: start;
  grid-auto-flow: row;
  grid-template-columns: minmax(320px, 400px);
}
@media (min-width: 700px) {
  .gridCartelera {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
  }
}
@media (min-width: 992px) {
  .gridCartelera {
    grid-template-columns: repeat(3, 1fr);
  }
}
.gridCartelera .eventCard .eventCard__label {
  background-color: #FDE8E0;
  color: #FF5F00;
}
.gridCartelera .eventCard .eventCard__labelCutout {
  background-color: #ffffff;
}

.headerIndex {
  max-width: 800px;
  margin: 0 auto;
}

.headerIndex__title {
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  line-height: 44px !important;
  color: #ffffff;
  padding-inline-start: 1em;
  padding-block: 0px;
  max-width: 300px;
}
@media (min-width: 768px) {
  .headerIndex__title {
    font-size: 24px;
    line-height: 34px;
  }
}

.headerIndex__content {
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #450A27;
  padding-inline: 3.5em;
  padding-block: 0;
}
@media (min-width: 768px) {
  .headerIndex__content {
    font-size: 18px;
    line-height: 26px;
  }
}

.legalTextContainer {
  max-width: 1000px;
  width: 100%;
  border-radius: 18px;
  border: solid 1px #B77493;
  overflow: hidden;
}
.legalTextContainer .scrollableText {
  overflow: auto;
  min-height: 100%;
  width: 100%;
  height: 100%;
  max-height: 400px;
  padding: 42px;
  color: #003746;
  text-align: justify;
  line-height: 1.75;
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .legalTextContainer .scrollableText {
    font-size: 14px;
    line-height: 20px;
  }
}

.emphasisButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 300px !important;
  overflow: hidden;
}
.emphasisButton:after {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("../img/svg/ico_buttonRight.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-left: auto;
  transition: transform 0.2s ease-in-out;
}
.emphasisButton:hover {
  font-weight: 600;
}
.emphasisButton:active:after {
  transform: translateX(52px);
}

@media (max-width: 768px) {
  .headerIndex__title,
  .headerIndex__content {
    padding-inline: 0px;
  }
  .folioID {
    word-break: break-word;
  }
  .legalTextContainer .scrollableText {
    padding: 24px;
  }
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 20px;
  align-self: stretch;
  background: #EDF6F7;
  border-radius: 0;
  border-bottom: 1px solid #A0D6E2;
  cursor: pointer;
  color: #005162;
}
.accordion-header:focus, .accordion-header:focus-visible, .accordion-header:active {
  outline: 1px solid #0076c0 !important;
  outline-offset: -1px;
}
.accordion-header:first-child {
  border-radius: 10px 10px 0 0;
}
.accordion-header:last-child, .accordion-header:last-of-type, .accordion-header.accordion-header-last {
  border-radius: 0 0 10px 10px;
}
.accordion-header h3 {
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .accordion-header h3 {
    font-size: 16px;
    line-height: 22px;
  }
}
.accordion-header .arrow-image {
  width: 18px;
  height: 18px;
}

.accordion-content {
  display: none;
  padding: 1rem 24px;
  margin: 0;
  border: none;
  text-align: justify;
  font-size: 14px;
}

.arrow {
  transition: transform 0.5s ease-in-out;
}
.arrow.rotate {
  transform: rotate(180deg);
}

@media (min-width: 576px) {
  .accordion-content {
    padding: 1.5rem 2rem;
  }
}
@media (max-width: 576px) {
  .accordion-header h3 {
    font-size: 18px;
  }
}
.container-contact {
  padding-top: 52px;
}
.container-contact .d-none {
  display: none !important;
  visibility: hidden;
}

.parentContact {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-rows: 400px 90px repeat(3, 1fr);
  gap: 0px 0px;
  width: 100%;
  background-color: unset;
  margin: 0 auto;
  max-width: 100%;
  z-index: 1;
}

.ContactBG {
  grid-area: 1/1/6/7;
  z-index: 1;
}
.ContactBG img {
  width: auto;
  height: 510px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 70% 0%;
     object-position: 70% 0%;
  border-radius: 24px 24px 0 0;
}

.ContactTitle {
  grid-area: 2/1/4/5;
  z-index: 2;
  height: 90px;
  background-color: #FA8D5A;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 41px;
  justify-content: center;
  border-radius: 24px 24px 0 0;
  font-family: "Banamex Display";
}
.ContactTitle h1 {
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: 54px;
}

.ContactDeco {
  grid-area: 2/5/4/7;
  z-index: 2;
  height: 90px;
  position: relative;
  min-height: 32px;
}
.ContactDeco::before {
  display: block;
  content: " ";
  height: 32px;
  width: 32px;
  position: absolute;
  left: 0;
  top: auto;
  bottom: 0;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
  z-index: 99;
  background-color: #FA8D5A;
}

.ContactBody {
  grid-area: 3/1/6/7;
  z-index: 2;
  background-color: #FA8D5A;
  border-top-right-radius: 24px;
  padding: 0.85rem 41px 2rem;
  color: #ffffff;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ContactBody h2 {
  font-family: "Banamex Display";
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: 31px;
}
.ContactBody p {
  font-family: "Banamex Display";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.ContactBody .contactForm form .form-input {
  padding-top: 18px;
}
.ContactBody .contactForm form .form-input span {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}
.ContactBody .contactForm form .form-input span span {
  color: #FF1B44;
}
.ContactBody .contactForm form .form-input input {
  display: flex;
  padding: 15px 18px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  background: #ffffff;
  color: #999999;
}
.ContactBody .contactForm form .form-input input::-moz-placeholder {
  color: #999999;
}
.ContactBody .contactForm form .form-input input::placeholder {
  color: #999999;
}
.ContactBody .contactForm form .form-input textarea {
  display: flex;
  height: 94px;
  padding: 10px;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  color: #999999;
}
.ContactBody .contactForm form .form-input textarea::-moz-placeholder {
  color: #999999;
}
.ContactBody .contactForm form .form-input textarea::placeholder {
  color: #999999;
}
.ContactBody .contactForm form .form-input .error-message {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: #450A27;
}
.ContactBody .contactForm form .form-input.form-disabled input {
  background-color: #D5D1CE;
  color: #BEBEBD;
}
.ContactBody .contactForm form .form-input.form-disabled input::-moz-placeholder {
  color: #BEBEBD;
}
.ContactBody .contactForm form .form-input.form-disabled input::placeholder {
  color: #BEBEBD;
}
.ContactBody .contactForm form .form-input.form-disabled input:disabled {
  background-color: #D5D1CE;
  color: #BEBEBD;
}
.ContactBody .contactForm form .form-input.form-disabled textarea {
  background-color: #D5D1CE;
  color: #BEBEBD;
}
.ContactBody .contactForm form .form-input.form-disabled textarea::-moz-placeholder {
  color: #BEBEBD;
}
.ContactBody .contactForm form .form-input.form-disabled textarea::placeholder {
  color: #BEBEBD;
}
.ContactBody .contactForm form .form-input.form-disabled textarea:disabled {
  background-color: #D5D1CE;
  color: #BEBEBD;
}
.ContactBody .contactForm form .btn-contacto {
  display: flex;
  width: 252px;
  margin-top: 1rem;
  padding: 8px 88px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 99px;
  border: 1px solid #FFD6BA;
  background-color: #FFD6BA;
  color: #003746;
  cursor: pointer;
}
.ContactBody .contactForm form .btn-contacto:hover {
  border: 1px solid #003746;
  color: #003746;
}
.ContactBody .contactForm .d-none {
  display: none !important;
  visibility: hidden;
}

/* Mensajes de actualización */
.msgs-form__message-status {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  font-size: 0.875rem;
  font-weight: 300;
  background: #00AD59;
  width: auto;
  color: #ffffff;
}
.msgs-form__message-status svg {
  width: 25px;
  height: auto;
  min-width: 25px;
}
.msgs-form__message-status span {
  margin-left: 0.5rem;
}

.msgs-form__message-status--error {
  background: #FF1B44;
}

.form-icon {
  position: relative;
}
.form-icon > .inputIcon {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translate(50%, -50%);
  color: #EDF6F7;
  cursor: pointer;
}

@media screen and (min-width: 550px) {
  div.checklist__links {
    grid-template-columns: auto auto;
  }
}
/* bloques info*/
.contact-info-blocks {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
}
.contact-info-blocks .block-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 80px;
  padding: 14px 14px 14px 74px;
  border-radius: 12px;
  background-color: #FDE8E0;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  font-family: "Banamex Text";
  color: #000000;
}
.contact-info-blocks .block-box strong {
  font-weight: 600;
}
.contact-info-blocks .block-box a {
  color: #000000;
  text-decoration: none;
  word-break: break-all;
}
.contact-info-blocks .block-box a strong {
  font-weight: 600;
}
.contact-info-blocks .block-box a:hover {
  text-decoration: underline;
}
.contact-info-blocks .block-box .sublink {
  font-size: 16px;
  color: #003746;
}
.contact-info-blocks .block-box.block-phone {
  background-image: url(../images/svg/icons-contact-phone.svg);
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 54px 54px;
}
.contact-info-blocks .block-box.block-email {
  background-image: url(../images/svg/icons-contact-email.svg);
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 54px 54px;
}
.contact-info-blocks .block-box.block-chat {
  background-image: url(../images/svg/icons-contact-chat.png);
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 54px 54px;
}
.contact-info-blocks .block-box.block-box-last {
  margin-top: 0;
}

@media (min-width: 992px) {
  .parentContact {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto repeat(4, 1fr);
    gap: 0px 0px;
    width: 100%;
    margin: 0 auto;
    max-width: 1440px;
  }
  .ContactBG {
    grid-area: 1/1/6/6;
  }
  .ContactBG img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    max-height: 620px;
    border-radius: 24px;
  }
  .ContactTitle {
    grid-area: 1/1/2/2;
    padding: 0.85rem 41px;
    border-radius: 24px 24px 0 0;
  }
  .ContactTitle h1 {
    font-size: 38px;
    font-weight: 700;
    line-height: 54px;
  }
  .ContactDeco {
    grid-area: 1/2/2/3;
    min-height: 32px;
  }
  .ContactDeco::before {
    display: block;
    content: " ";
    height: 32px;
    width: 32px;
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    z-index: 99;
  }
  .ContactBody {
    height: auto;
    grid-area: 2/1/6/3;
    border-top-right-radius: 24px;
    padding: 0.85rem 41px;
  }
  .ContactBody h2 {
    font-size: 21px;
    font-weight: 400;
    line-height: 31px;
  }
  .ContactBody p {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
  }
  .ContactBody .contactForm form .form-input {
    padding-top: 18px;
  }
  .ContactBody .contactForm form .form-input span {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
  }
  .ContactBody .contactForm form .form-input input {
    padding: 15px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }
  .ContactBody .contactForm form .form-input textarea {
    height: 94px;
    padding: 10px;
    border-radius: 10px;
  }
  .ContactBody .contactForm form .form-input .error-message {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
  }
  .ContactBody .contactForm form .btn-contacto {
    width: 252px;
    margin-top: 22px;
    padding: 8px 88px;
    gap: 10px;
    border-radius: 99px;
    border: 1px solid #FFD6BA;
  }
  .contact-info-blocks {
    flex-direction: row;
  }
  .contact-info-blocks .block-box {
    width: 428px;
    min-width: 320px;
    max-width: 428px;
  }
}
@media (max-width: 375px) {
  .ContactTitle h1 {
    font-size: 2rem;
    line-height: 1.5rem;
  }
  .ContactBody h2 {
    font-size: 21px;
    line-height: 31px;
  }
  .ContactBody p {
    font-size: 16px;
    line-height: 22px;
  }
  .ContactBody .contactForm form .form-input span {
    font-size: 1rem;
    line-height: 16px;
  }
  .ContactBody .contactForm form .form-input input {
    padding: 15px 18px;
    font-size: 1rem;
    line-height: 20px;
  }
  .ContactBody .contactForm form .form-input textarea {
    height: 94px;
    padding: 10px;
  }
  .ContactBody .contactForm form .form-input .error-message {
    font-size: 12px;
    line-height: 16px;
  }
  .ContactBody .contactForm form .btn-contacto {
    width: 100%;
    margin-top: 22px;
    padding: 8px 88px;
    gap: 10px;
  }
  .contact-info-blocks {
    flex-direction: column;
  }
  .contact-info-blocks .block-box {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 320px) {
  .ContactTitle h1 {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
  .ContactBody h2 {
    font-size: 21px;
    line-height: 31px;
  }
  .ContactBody p {
    font-size: 16px;
    line-height: 22px;
  }
  .ContactBody .contactForm form .form-input span {
    font-size: 1rem;
    line-height: 16px;
  }
  .ContactBody .contactForm form .form-input input {
    font-size: 1rem;
    line-height: 20px;
  }
  .ContactBody .contactForm form .form-input textarea {
    height: 94px;
    padding: 10px;
  }
  .ContactBody .contactForm form .form-input .error-message {
    font-size: 12px;
    line-height: 16px;
  }
  .ContactBody .contactForm form .btn-contacto {
    width: 100%;
  }
  .contact-info-blocks {
    flex-direction: column;
  }
  .contact-info-blocks .block-box {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}
.contact-card {
  position: relative;
  width: 326px;
  height: 142px;
  font-family: "Banamex Micro", sans-serif;
}

.contact-card__shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 326px;
  height: 138px;
  pointer-events: none;
  /* No bloquear clics */
}

/* Contenido que vive por encima del SVG */
.contact-card__content {
  position: relative;
  /* stacking context */
  width: 100%;
  height: 100%;
  color: #06354d;
  /* o también var(--card-fg) */
  box-sizing: border-box;
}

/* Ejemplo: Label en la esquina superior izquierda */
.contact-card__label {
  position: absolute;
  top: -52px;
  right: 110px;
  text-align: right;
  font-weight: bold;
  font-size: 13.5px;
}

/* Icono en la esquina superior derecha */
.contact-card__icon {
  position: absolute;
  top: -51px;
  right: 16px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card__icon svg {
  width: 70%;
  height: 70%;
  fill: currentColor;
}

/* Título y value */
.contact-card__title {
  margin: 64px 24px 4px 24px;
  /* para que no se superponga con el notch */
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.contact-card__value {
  margin: 0 24px;
  font-size: 1rem;
  font-weight: 600;
}

.destinos {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#contDestinos b font[size="5"] {
  font-size: 2rem;
  position: relative;
  padding-left: 52px;
  display: inline-block;
  color: #003746;
  padding-bottom: 1rem;
}
#contDestinos b font[size="5"]::before {
  content: "";
  background-image: url("./ico_globe.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
  position: absolute;
  left: 0;
  top: calc(50% - 8px);
  transform: translateY(-50%);
}
#contDestinos ul {
  list-style-type: disc;
  padding-left: 2.5rem;
  padding-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 1.5rem;
}
#contDestinos ul li {
  list-style-position: inside;
  padding-left: 0;
  font-size: 1.25rem;
}
@media (max-width: 768px) {
  #contDestinos ul {
    display: block;
  }
  #contDestinos ul li {
    padding-left: 24px;
    list-style-type: disc;
  }
}

.button, .btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
  outline: none;
  font: inherit;
  font-size: 1rem;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  min-width: 180px;
  margin-block: 2px;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: normal;
  text-align: center;
  word-break: break-word;
  cursor: pointer;
  transition: transform 0.32s ease-in-out, background-color 0.32s ease-in-out 0.08s;
  min-height: 48px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.button:not(:disabled):not(.disabled):not(.is-disabled)::before, .btn:not(:disabled):not(.disabled):not(.is-disabled)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background-color: transparent;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s ease-out, background-color 0.4s ease-out;
  border-radius: inherit;
  z-index: -1;
}
.button:not(:disabled):not(.disabled):not(.is-disabled):hover::before, .btn:not(:disabled):not(.disabled):not(.is-disabled):hover::before {
  transform: translate(-50%, -50%) scale(1);
  background-color: var(--btn-hover-bg, #ddd);
}
.button:not(:disabled):not(.disabled):not(.is-disabled):focus::before, .button:not(:disabled):not(.disabled):not(.is-disabled):active::before, .btn:not(:disabled):not(.disabled):not(.is-disabled):focus::before, .btn:not(:disabled):not(.disabled):not(.is-disabled):active::before {
  transform: translate(-50%, -50%) scale(1);
  background-color: var(--btn-active-bg, #ccc);
}
.button:hover, .btn:hover {
  color: var(--btn-hover-text, inherit);
}
.button:active, .button:focus, .btn:active, .btn:focus {
  color: var(--btn-active-text, inherit);
}
.button:focus:not(:focus-visible), .btn:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.button:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgb(0, 165.306122449, 200);
}
.button--solid, .btn--solid {
  background-color: #005162;
  border: 0px solid transparent;
  color: #ffffff;
  --btn-hover-bg: rgb(0, 38.8469387755, 47);
  --btn-active-bg: rgb(0, 17.7704081633, 21.5);
  --btn-hover-text: #ffffff;
  --btn-active-text: #ffffff;
}
.button--solid:focus-visible, .btn--solid:focus-visible {
  box-shadow: 0 0 0 4px rgb(0, 165.306122449, 200);
}
.button--secondary-solid, .btn--secondary-solid {
  background-color: #DAE9EE;
  border: 0px solid transparent;
  color: #003746;
  --btn-hover-bg: rgb(201.6923076923, 228.3461538462, 231.3076923077);
  --btn-active-bg: rgb(184.0384615385, 219.5192307692, 223.4615384615);
  --btn-hover-text: #003746;
  --btn-active-text: #003746;
}
.button--secondary-solid:focus-visible, .btn--secondary-solid:focus-visible {
  box-shadow: 0 0 0 4px rgb(148.1111111111, 191.4444444444, 205.8888888889);
}
.button--outline, .btn--outline {
  background-color: transparent;
  border: 2px solid #005162;
  color: #001E22;
  --btn-hover-bg: rgb(0, 38.8469387755, 47);
  --btn-active-bg: rgb(0, 17.7704081633, 21.5);
  --btn-hover-text: #ffffff;
  --btn-active-text: #ffffff;
}
.button--outline:focus-visible, .btn--outline:focus-visible {
  box-shadow: 0 0 0 4px hsl(190.4081632653, 100%, -0.7843137255%);
}
.button--secondary-outline, .btn--secondary-outline {
  background-color: transparent;
  border: 2px solid #B77493;
  color: #003746;
  --btn-hover-bg: rgb(163.3744075829, 84.6255924171, 121.0616113744);
  --btn-active-bg: rgb(184.0384615385, 219.5192307692, 223.4615384615);
  --btn-hover-text: #003746;
  --btn-active-text: #003746;
}
.button--secondary-outline:focus-visible, .btn--secondary-outline:focus-visible {
  box-shadow: 0 0 0 4px rgb(129.7772511848, 67.2227488152, 96.1658767773);
}
.button--ghost, .button--secondary-ghost, .btn--ghost, .btn--secondary-ghost {
  background-color: transparent;
  border: 0 solid transparent;
  color: #003746;
}
.button--secondary-ghost, .btn--secondary-ghost {
  --btn-hover-bg: rgb(201.6923076923, 228.3461538462, 231.3076923077);
  --btn-active-bg: rgb(184.0384615385, 219.5192307692, 223.4615384615);
  --btn-hover-text: #003746;
  --btn-active-text: #003746;
}
.button--secondary-ghost:focus-visible, .btn--secondary-ghost:focus-visible {
  box-shadow: 0 0 0 4px hsl(192.8571428571, 100%, -6.2745098039%);
}
.button--danger, .btn--danger {
  background-color: #FF1B44;
  border-color: transparent;
  color: #ffffff;
  --btn-hover-bg: #F4CBC4;
  --btn-active-bg: #F9DBD6;
  --btn-hover-text: #450A27;
  --btn-active-text: #450A27;
}
.button--danger:focus-visible, .btn--danger:focus-visible {
  box-shadow: 0 0 0 4px rgb(180, 0, 32.3684210526);
}
.button--default, .btn--default {
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  min-width: 180px;
  min-height: 48px;
}
.button--compact, .btn--compact {
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
  line-height: 1.4;
  min-width: 120px;
  min-height: 40px;
}
.button--wide, .btn--wide {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  width: 100%;
  min-width: auto;
  min-height: 52px;
}
.button__icon, .btn__icon {
  display: flex;
  align-items: center;
}
.button__icon--left, .btn__icon--left {
  margin-right: 8px;
}
.button__icon--right, .btn__icon--right {
  margin-left: 8px;
}
.button:disabled, .button.disabled, .button.is-disabled, .btn:disabled, .btn.disabled, .btn.is-disabled {
  background-color: #EFEFED;
  border-color: #999999;
  color: #BEBEBD;
  cursor: not-allowed;
}

.emphasisButton {
  border-radius: 11px;
}

.selectContainer {
  position: relative;
  width: 100%;
  max-width: 300px;
}
.selectContainer select {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #005162;
  border-radius: 14px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 10px center;
  background-size: 18px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.selectContainer select:focus {
  border-color: #005162;
  outline: none;
}

.checkmark--radio, .checkmark {
  width: 18px;
  height: 18px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border: 2px solid #005162;
  transition: background-color 0.2s ease;
}

.checkboxContainer {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 36px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  line-height: 1.45;
}
.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkboxContainer:hover .checkmark {
  background-color: #D9D9D9;
}
.checkboxContainer input:checked ~ .checkmark:after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.checkmark {
  border-radius: 4px;
}
.checkmark:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 5px;
  height: 10px;
  border: solid #003746;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0.1);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.radioContainer {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 36px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  line-height: 1.45;
}
.radioContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.radioContainer:hover .checkmark--radio {
  background-color: #D9D9D9;
}
.radioContainer input:checked ~ .checkmark--radio:after {
  opacity: 1;
  transform: scale(1);
}

.checkmark--radio {
  border-radius: 50%;
}
.checkmark--radio:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: #005162;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.radio-pass {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #ffffff;
  border: none;
  border-radius: 50%;
  box-shadow: inset 0 0 2px #949594;
}
.radio-pass:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5FC500;
  opacity: 0;
  transform: scale(0.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.checkboxLabel {
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .checkboxLabel {
    font-size: 14px;
    line-height: 20px;
  }
}

.form-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 300px;
}
.form-input input {
  padding: 16px 18px;
  border: 1px solid #005162;
  border-radius: 14px;
  transition: border-color 0.3s ease;
  background-color: #ffffff;
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .form-input input {
    font-size: 16px;
    line-height: 22px;
  }
}
.form-input input:focus {
  outline: none;
}
.form-input .inputHint {
  font-size: 12px;
  color: #666;
}
.form-input.form-error input {
  border-color: #FF1B44;
}
.form-input.form-error .inputHint {
  color: #FF1B44;
}
.form-input.form-disabled input {
  background: #EFEFED;
  cursor: not-allowed;
}
.form-input .inputLabel {
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
}
@media (min-width: 768px) {
  .form-input .inputLabel {
    font-size: 12px;
    line-height: 16px;
  }
}

.selectCustom {
  position: relative;
  width: 100%;
  max-width: 300px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.selectCustom .inputLabel {
  margin-bottom: 6px;
  display: block;
}
.selectCustom__trigger {
  width: 100%;
  padding: 16px 38px 16px 18px;
  border: 1px solid #005162;
  border-radius: 14px;
  background: #ffffff;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.3s ease;
}
.selectCustom__trigger:focus, .selectCustom__trigger.is-open {
  border-color: #005162;
  outline: none;
}
.selectCustom__icon {
  margin-left: 8px;
  font-size: 1.1em;
  pointer-events: none;
  color: #666;
  transition: transform 0.3s;
}
.is-open .selectCustom__icon {
  transform: rotate(-180deg);
}
.selectCustom__list {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #005162;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 4px 18px 0 rgba(199, 212, 226, 0.1882352941);
  margin: 2px 0 0 0;
  padding: 0;
  z-index: 20;
  display: none;
  max-height: 220px;
  overflow-y: auto;
}
.selectCustom__list.is-open {
  display: block;
}
.selectCustom__option {
  padding: 14px 18px;
  font-size: 1rem;
  cursor: pointer;
  border-bottom: 1px solid #e8eaf3;
  background: transparent;
  transition: background 0.2s;
}
.selectCustom__option:last-child {
  border-bottom: none;
}
.selectCustom__option:hover, .selectCustom__option.is-focused, .selectCustom__option.is-selected {
  background: #EFEFED;
}
.selectCustom__option.is-selected {
  font-weight: bold;
  color: #005162;
}

.form-password {
  position: relative;
}
.form-password .form-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.form-password .form-icon input {
  width: 100%;
  padding-right: 30px;
}
.form-password .form-icon .inputIcon {
  position: absolute;
  right: 10px;
  cursor: pointer;
}

.verificationCode--inputs {
  display: flex;
  gap: 5px;
}
.verificationCode--inputs input {
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 18px;
}

.encapsulatedInfo {
  padding: 1.15rem;
  border-radius: 0.75rem;
  border: solid 1px #005162;
  background: #EFEFED;
}
.encapsulatedInfo.formItem {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: center;
}
.encapsulatedInfo.hint {
  max-width: 300px;
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0 auto;
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
}
@media (min-width: 768px) {
  .encapsulatedInfo.hint {
    font-size: 12px;
    line-height: 16px;
  }
}
.encapsulatedInfo.error {
  color: #005162;
  background-color: #F9DBD6;
}

.--processing {
  pointer-events: none;
}

.--processing::after {
  content: "";
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  margin-left: 8px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ============================================================
   Navigation Container Base Styles
   ============================================================
   Configuración general del header y sus variantes.
============================================================ */
.navContainer {
  font-size: 14px;
  width: 100%;
  max-width: 1200px;
  min-height: 64px;
  background-color: #ffffff;
  margin: 0 auto;
  top: 0;
  z-index: 999;
  position: fixed;
  border-radius: 0 0 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  left: 50%;
  /* ----------------------------
     Logo
  ---------------------------- */
  /* ----------------------------
     Contenido de Navegación
  ---------------------------- */
  /* ----------------------------
     Elementos Ocultos por Defecto
  ---------------------------- */
  /* ----------------------------
     Dropdown Menu
  ---------------------------- */
  /* ----------------------------
     Navigation Links
  ---------------------------- */
  /* ----------------------------
     Secondary Navigation (Underline Effect)
  ---------------------------- */
}
.navContainer.floating {
  top: 18px;
  border-radius: 20px;
  width: 98%;
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.25);
}
.navContainer .navContainer__logo {
  height: 52px;
  width: 200px;
  background-image: url("../img/svg/momentos-banamex-color.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.navContainer .navContent {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 3.5rem;
  max-width: 1200px;
  gap: 8px;
}
.navContainer .navContent .section {
  display: flex;
  flex-direction: row;
  gap: 18px;
  align-items: center;
}
.navContainer .navContent .button {
  background-color: #A0D6E2;
  color: #005162;
  border: transparent;
}
.navContainer .navContent .button:hover {
  background-color: #001E22;
  color: #EDF6F7;
}
.navContainer .navContent .primaryNav,
.navContainer .navContent .secondaryNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.navContainer .navContent a:hover {
  text-decoration: none;
}
.navContainer .mobileOptions,
.navContainer .alternateNav {
  display: none;
}
.navContainer .dropdown {
  position: relative;
  padding: 10px;
  width: 100%;
  max-width: -moz-fit-content;
  max-width: fit-content;
  min-width: 75px;
  border-radius: 18px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.navContainer .dropdown svg {
  display: unset;
}
.navContainer .dropdown__list {
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  width: calc(100% + 32px);
  background-color: #EDF6F7;
  padding-inline: 0;
  list-style: none;
  border-radius: 18px;
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  transform: translateY(-10px);
}
.navContainer .dropdown::after {
  display: block;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: transparent;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
  z-index: -1;
  transition: all 0.2s ease-in-out;
}
.navContainer .dropdown__listItem {
  margin-bottom: 0;
  height: 100%;
  width: 100%;
  display: flex;
}
.navContainer .dropdown__listItem > a {
  padding: 10px;
  color: inherit;
  width: 100%;
}
.navContainer .dropdown__listItem:first-of-type {
  border-radius: 0 18px 0 0;
}
.navContainer .dropdown__listItem:last-of-type {
  border-radius: 0 0 18px 18px;
}
.navContainer .dropdown__listItem:hover {
  background-color: #DAE9EE;
}
.navContainer .dropdown:hover {
  background-color: #EDF6F7;
  border-radius: 18px 18px 0 0;
}
.navContainer .dropdown:hover::after {
  display: block;
  content: "";
  height: 18px;
  width: 18px;
  position: absolute;
  right: -17px;
  bottom: 0;
  background-color: inherit;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
}
.navContainer .dropdown:hover .dropdown__list {
  display: flex;
  flex-direction: column;
  border-radius: 0 18px 18px 18px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
}
.navContainer .navigationLinks {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  margin-inline-start: -16px;
}
.navContainer .navigationLinks__items {
  padding-inline: 16px;
  color: #003746;
  font-weight: 600;
  min-height: 3em;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  position: relative;
  border-radius: 12px 12px 0 0;
}
.navContainer .navigationLinks__items::before, .navContainer .navigationLinks__items::after {
  display: block;
  content: " ";
  height: 18px;
  width: 18px;
  position: absolute;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.navContainer .navigationLinks__items::before {
  left: 0;
  bottom: 0;
  -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
          mask-image: url("./components/legos/img/bottomRight.svg");
}
.navContainer .navigationLinks__items::after {
  right: 0;
  bottom: 0;
  background-color: transparent;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
}
.navContainer .navigationLinks__items.active {
  background-color: #003746;
  color: #ffffff;
}
.navContainer .navigationLinks__items.active::before {
  left: -18px;
  bottom: 0;
  opacity: 1;
  background-color: inherit;
  -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
          mask-image: url("./components/legos/img/bottomRight.svg");
}
.navContainer .navigationLinks__items.active::after {
  right: -18px;
  bottom: 0;
  opacity: 1;
  background-color: inherit;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
}
.navContainer .navigationLinks__items:hover {
  text-decoration: none;
  background-color: #003746;
  border-radius: 12px 12px 0 0;
  color: inherit;
}
.navContainer .navigationLinks__items:hover::before {
  left: -18px;
  bottom: 0;
  opacity: 1;
  background-color: inherit;
  -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
          mask-image: url("./components/legos/img/bottomRight.svg");
}
.navContainer .navigationLinks__items:hover::after {
  right: -18px;
  bottom: 0;
  opacity: 1;
  background-color: inherit;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
}
.navContainer .secondaryNav .navigationLinks__items {
  position: relative;
  background-image: linear-gradient(#ffffff, #ffffff);
  background-repeat: no-repeat;
  background-size: 0 4px;
  background-position: center bottom;
  transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.navContainer .secondaryNav .navigationLinks__items:hover, .navContainer .secondaryNav .navigationLinks__items.active {
  background-size: 80% 4px;
  color: #ffffff;
}

.mobile-nav {
  display: none;
}

/* ============================================================
   Variant Blue Styles
   ============================================================
   Estilos específicos para el header con la variante azul.
============================================================ */
.navContainer.variantBlue {
  background-color: #003746;
  color: #ffffff;
}
.navContainer.variantBlue .button:hover {
  background-color: #DAE9EE;
  color: #003746;
}
.navContainer.variantBlue .dropdown {
  color: #EDF6F7;
  background-color: #003746;
}
.navContainer.variantBlue .dropdown:hover {
  background-color: #EDF6F7;
  color: #001E22;
}
.navContainer.variantBlue .dropdown__listItem {
  margin-bottom: 0;
  height: 100%;
  width: 100%;
  display: flex;
  color: #005162;
  background-color: #EDF6F7;
}
.navContainer.variantBlue .dropdown__listItem > a {
  padding: 10px;
  color: inherit;
  width: 100%;
}
.navContainer.variantBlue .dropdown__listItem:hover {
  background-color: #DAE9EE;
}
.navContainer.variantBlue .secondaryNav .navigationLinks__items:hover {
  background-image: linear-gradient(#003746, #003746);
  background-color: #ffffff;
  color: #003746;
}
.navContainer.variantBlue .navContainer__logo {
  height: 52px;
  width: 200px;
  background-image: url("../img/svg/momentos-banamex-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.navContainer.variantBlue a {
  color: #003746;
}
.navContainer.variantBlue svg path {
  color: #003746;
}

.mobile-nav.variantBlue > .mobile-header {
  background-color: #003746;
}
.mobile-nav.variantBlue > .mobile-header .logo {
  height: 52px;
  width: 168px;
  background-image: url("../img/svg/momentos-banamex-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.mobile-nav.variantBlue > .mobile-header .menu-icon {
  background-color: #003746;
}
.mobile-nav.variantBlue > .mobile-header .menu-icon::before, .mobile-nav.variantBlue > .mobile-header .menu-icon::after {
  background-color: #ffffff;
}
.mobile-nav.variantBlue > .mobile-header .menu-icon span {
  background-color: #ffffff;
}

/* ============================================================
   Mobile Styles
   ============================================================
   Ajustes para dispositivos con ancho máximo de 768px.
============================================================ */
@media (max-width: 767px) {
  .navContainer {
    display: none;
  }
  .mobile-nav {
    display: block;
    position: relative;
    font-size: 14px;
    transition: all 0.3s ease;
  }
  .mobile-nav.floating .mobile-header {
    top: 10px;
    transform-origin: center;
    transform: scale(0.95);
    border-radius: 20px;
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.25);
  }
  .mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 0.85rem 1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
  }
  .logo {
    height: 52px;
    width: 168px;
    background-image: url("../img/logo_overLight.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }
  .menu-toggle {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
  }
  .logoItem {
    height: 100%;
    display: inline-block;
    width: 100%;
  }
  /* ===============================
     Mobile Menu Overlay Animations
  ============================== */
  .mobile-menu-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    height: 100svh;
    height: 100dvh;
    background-color: #fff;
    z-index: 990;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 64px;
    box-sizing: border-box;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateX(100%);
    opacity: 0;
  }
  .mobile-menu-overlay.active {
    transform: translateX(0);
    opacity: 1;
  }
  .mobile-nav.menu-open .mobile-header {
    background-color: #003746;
  }
  .mobile-nav.menu-open .mobile-header .logo {
    height: 52px;
    width: 168px;
    background-image: url("../img/svg/momentos-banamex-white.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }
  .menu-content {
    overflow-y: auto;
    flex: 1;
    padding: 1rem;
  }
  .main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .main-menu ul li a {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    color: #003746;
    font-weight: bold;
    padding-block: 1rem;
    padding-inline: 1rem;
    border-bottom: solid 1px #BEBEBD;
  }
  .main-menu ul li a:hover, .main-menu ul li a.active {
    border-bottom: solid 2px #001E22;
    color: #001E22;
  }
  .cta-section {
    padding: 1rem;
    text-align: center;
    background-color: #DAE9EE;
    margin-top: -1rem;
    margin-inline: -16px;
  }
  /* Alternate nav en la parte inferior */
  .alternate-nav {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid #ddd;
    background-color: #001E22;
    flex-direction: column;
    box-sizing: border-box;
  }
  .alternate-nav > a:not(.button) {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    padding-block: 1rem;
    padding-inline: 1rem;
    cursor: pointer;
    box-sizing: border-box;
    border-bottom: 1px solid #EDF6F7;
    margin-bottom: 2rem;
  }
  .alternate-nav > a:not(.button):hover, .alternate-nav > a:not(.button).active {
    border-bottom: solid 2px #ffffff;
    color: #ffffff;
  }
  .alternate-nav .submenu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
  }
  .alternate-nav .submenu-toggle::after {
    display: block;
    content: " ";
    height: 1.15em;
    width: 1.15em;
    border-right: 2px solid white;
    border-top: 2px solid white;
    transform: rotate(45deg);
  }
  /* ===============================
     Mobile Submenu Overlay Animations
  ============================== */
  .mobile-submenu-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    height: 100svh;
    height: 100dvh;
    background-color: #fff;
    z-index: 995;
    flex-direction: column;
    padding-top: 64px;
    box-sizing: border-box;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateX(100%);
    opacity: 0;
  }
  .mobile-submenu-overlay.active {
    transform: translateX(0);
    opacity: 1;
  }
  .mobile-submenu-overlay.exit {
    transform: translateX(100%);
    opacity: 0;
  }
  .submenu-header {
    padding: 1rem;
    border-bottom: 1px solid #A0D6E2;
  }
  .back-button {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: #003746;
    display: inline-flex;
    margin-top: 1rem;
  }
  .back-button::before {
    display: block;
    content: " ";
    height: 1.15rem;
    width: 1.15rem;
    margin-right: 8px;
    transform: rotate(-45deg);
    border-left: solid 3px #003746;
    border-top: solid 3px #003746;
    margin-top: 2px;
  }
  .submenu-menu {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
    box-sizing: border-box;
  }
  .submenu-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .submenu-menu ul li a {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    color: #003746;
    font-weight: bold;
    padding-block: 1rem;
    padding-inline: 1rem;
    box-sizing: border-box;
    border-bottom: 1px solid #D5D1CE;
  }
  .submenu-menu ul li a:hover, .submenu-menu ul li a.active {
    border-bottom: solid 2px #001E22;
    color: #001E22;
  }
}
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: auto;
  transition: all 0.3s ease;
}

.menu-icon {
  display: block;
  width: 32px;
  height: 32px;
  padding: 10px 6px;
  position: relative;
}

.menu-icon::before,
.menu-icon::after,
.menu-icon span {
  content: "";
  position: absolute;
  left: 0;
  width: 28px;
  height: 2px;
  background-color: #003746;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 99rem;
}

.menu-icon::before {
  top: 6px;
}

.menu-icon span {
  top: 50%;
  transform: translateY(-50%);
}

.menu-icon::after {
  bottom: 6px;
}

/* Estado abierto: transforma la hamburguesa en una X */
.menu-toggle.open .menu-icon::before {
  transform: translateY(8px) rotate(45deg);
  background-color: #ffffff;
}

.menu-toggle.open .menu-icon span {
  opacity: 0;
}

.menu-toggle.open .menu-icon::after {
  transform: translateY(-10px) rotate(-45deg);
  background-color: #ffffff;
}

.button.logout-desk {
  border-radius: 6px;
  width: auto;
  min-width: unset;
  gap: 8px;
  background-color: #DAE9EE !important;
  font-weight: unset;
  height: 42px;
}
.button.logout-desk:hover {
  color: white !important;
  background-color: #FF1B44 !important;
}
.button.logout-desk:hover a {
  color: white !important;
  background-color: #FF1B44 !important;
}

.userModuleContainer {
  background-color: #DAE9EE;
  border-radius: 11px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: stretch;
  gap: 8px;
}
.userModuleContainer .userModule {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 6px 0px 6px 12px;
}
.userModuleContainer .userModule .userData {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.userModuleContainer .userModule .userData .userName,
.userModuleContainer .userModule .userData .userPoints {
  font-size: 12px;
  color: #003746;
  margin-block: 0px;
}
.userModuleContainer .userModule .userData .userPoints {
  font-size: 10px;
}
.userModuleContainer .userModule .userIcon {
  height: 24px;
  width: 24px;
  background-image: url("../img/svg/ico_user.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.userModuleContainer .userAction {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 0px;
  border-radius: 0 11px 11px 0;
  transition: all 0.3s ease;
}
.userModuleContainer .userAction::before {
  display: flex;
  content: "";
  height: 28px;
  border-left: solid 1px #001E22;
}
.userModuleContainer .userAction:hover {
  background-color: #F9DBD6;
  color: #450A27;
  cursor: pointer;
}

.cta-section .userData {
  padding: 16px 32px 0px 32px;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
}
.cta-section .userData .userName,
.cta-section .userData .userPoints {
  font-size: 18px;
  color: #003746;
  margin-block: 0px;
}
.cta-section .userData .userPoints {
  font-size: 14px;
}

/* ============================================================
   Footer Container
   ============================================================ */
.footer {
  /* Layout y posicionamiento */
  position: sticky;
  bottom: -100%;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: [OutterLeft] minmax(32px, 1fr) [InnerLeft] minmax(auto, 700px) [InnerRight] minmax(auto, 300px) [OutterRight] minmax(32px, 1fr);
  grid-template-rows: 0.3fr 1.7fr;
  grid-auto-flow: row;
  gap: 0;
  z-index: 99;
  /* Colores */
  background-color: #003746;
  color: white;
  /* Pseudo-elemento decorativo (máscara en la esquina superior derecha) */
  /* ------------------------------------------------------------
     Secciones Internas del Footer
     ------------------------------------------------------------ */
  /* Área de Contenido */
  /* Encabezado del Footer */
  /* Área de Redes Sociales (SN) */
  /* Contenido de Redes Sociales */
  /* Contenido del Footer (links y textos legales) */
  /* Logo para Redes Sociales */
}
.footer::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  height: 24px;
  width: 24px;
  -webkit-mask-image: url("./components/legos/img/topRight.svg");
          mask-image: url("./components/legos/img/topRight.svg");
  background-color: #ffffff;
  z-index: 99;
  grid-area: 2/1;
}
.footer .ContentArea {
  grid-area: 1/InnerLeft/3/OutterRight;
}
.footer .ContentArea::before {
  display: block;
  content: " ";
  position: absolute;
  right: -24px;
  bottom: 0;
  height: 24px;
  width: 24px;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
  background-color: #003746;
  z-index: 999;
  grid-area: 2/2/1/2;
}
.footer .ContentArea::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  height: 24px;
  width: 24px;
  -webkit-mask-image: url("./components/legos/img/topRight.svg");
          mask-image: url("./components/legos/img/topRight.svg");
  background-color: #ffffff;
  z-index: 999;
  grid-area: 1/3/1/1;
}
.footer .FooterHeader {
  grid-area: 1/InnerLeft/2/InnerRight;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  padding-block: 32px 0;
  font-weight: 400 !important;
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
}
@media (min-width: 768px) {
  .footer .FooterHeader {
    font-size: 32px;
    line-height: 44px;
  }
}
.footer .FooterHeader img {
  width: 243px;
  max-width: 243px;
  height: auto;
}
.footer .SNArea {
  grid-area: 1/InnerRight/2/5;
  background-color: #ffffff;
}
.footer .SNContent {
  grid-area: 1/InnerRight/2/OutterRight;
  display: flex;
  flex-direction: row;
  gap: 25px;
  padding: 16px 24px;
  height: 64px;
  background-color: #ffffff;
}
.footer .FooterContent {
  grid-area: 2/InnerLeft/3/OutterRight;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 32px;
  /* Links del Footer */
  /* Texto legal */
}
.footer .FooterContent .footerLinks {
  display: flex;
  flex-direction: row;
  gap: 16px;
  color: #ffffff;
  white-space: nowrap;
  flex-wrap: wrap;
}
.footer .FooterContent .footerLinks a {
  color: inherit;
  font-weight: 600;
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .footer .FooterContent .footerLinks a {
    font-size: 16px;
    line-height: 22px;
  }
}
.footer .FooterContent .footerLinks .--contactPhone {
  font-size: 18px;
  font-weight: 600;
}
.footer .FooterContent .legalText {
  margin: 0;
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .footer .FooterContent .legalText {
    font-size: 14px;
    line-height: 20px;
  }
}
.footer .logoSN {
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-content: center;
  transition: transform 0.2s ease-in-out;
}
.footer .logoSN a {
  display: block;
}
.footer .logoSN a > img {
  height: 80%;
  width: 80%;
  -o-object-fit: contain;
     object-fit: contain;
}
.footer .logoSN:hover {
  transform: scale(1.15);
}

/* ============================================================
   Mobile Styles (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .footer {
    grid-template-columns: [OutterLeft] minmax(16px, 1fr) [InnerLeft] minmax(auto, 600px) [InnerRight] minmax(320px, 400px) [OutterRight] minmax(16px, 1fr);
    /* Solución al espacio vacío */
    grid-auto-rows: min-content;
    align-content: start;
    grid-template-rows: auto auto;
    /* Desactivar pseudo-elemento en mobile */
  }
  .footer::after {
    display: none;
    content: unset;
  }
  .footer .ContentArea {
    /* Quitar pseudo-elementos en ContentArea */
  }
  .footer .ContentArea::before, .footer .ContentArea::after {
    display: none;
    content: unset;
  }
  .footer .FooterHeader {
    grid-area: 1/InnerLeft/2/4;
  }
  .footer .FooterContent {
    padding-block-end: 32px;
  }
  .footer .FooterContent .footerLinks {
    flex-direction: column;
    padding-block-end: 18px;
  }
  .footer .FooterContent .legalText {
    max-width: 264px;
  }
  .footer .SNArea {
    grid-area: 3/InnerRight/3/OutterRight;
    height: 64px;
  }
  .footer .SNContent {
    grid-area: 3/InnerRight/3/5;
    position: relative;
  }
  .footer .SNContent::before {
    display: block;
    content: " ";
    position: absolute;
    right: 0;
    top: -24px;
    height: 24px;
    width: 24px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    background-color: #ffffff;
    z-index: 999;
  }
  .footer .SNContent::after {
    display: block;
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    height: 24px;
    width: 24px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    background-color: #003746;
    z-index: 999;
  }
}
@property --iris-radius {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --iris-gradient-length {
  syntax: "<length> | <percentage>";
  inherits: false;
  initial-value: 150px;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 55, 70, 0.28);
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.3s ease, background-color 0.3s ease, visibility 0.3s ease, -webkit-backdrop-filter 0.3s ease;
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease, background-color 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease, background-color 0.3s ease, visibility 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}
.overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(ellipse at center, transparent 70%, rgba(0, 0, 0, 0.3) 100%);
}
.overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  -webkit-mask-image: none;
  mask-image: none;
}
.overlay.active::before {
  opacity: 1;
}
.overlay.active.active--fromHeader {
  --time: 600ms;
  --iris-radius: 0%;
  --iris-gradient-length: 120px;
  /* 
    Definimos la máscara radial con:
    - Centro en 50% 0 (parte superior central)
    - Primer stop: color blanco hasta el valor de --iris-radius
    - Segundo stop: un blanco semitransparente para suavizar la transición
    - Tercer stop: transparente para difuminar el borde  
  */
  -webkit-mask-image: radial-gradient(circle at 50% 0, white var(--iris-radius), rgba(255, 255, 255, 0.8) calc(var(--iris-radius) + var(--iris-gradient-length) / 2), transparent calc(var(--iris-radius) + var(--iris-gradient-length)));
  mask-image: radial-gradient(circle at 50% 0, white var(--iris-radius), rgba(255, 255, 255, 0.8) calc(var(--iris-radius) + var(--iris-gradient-length) / 2), transparent calc(var(--iris-radius) + var(--iris-gradient-length)));
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease, background-color 0.3s ease, visibility 0.3s ease, --iris-radius var(--time) cubic-bezier(0.175, 0.885, 0.32, 1.275), --iris-gradient-length var(--time) ease-out;
  --iris-radius: 100%;
  --iris-gradient-length: 0px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.overlay.active.active--fromHeader::before {
  opacity: 1;
}

/* ============================================================
    MODALES
    Estilos para los modales de jQuery Modal
============================================================ */
.modalContainer {
  display: none;
  box-shadow: 0px 1px 2px 0px rgba(0, 55, 70, 0.75), 0px 1px 2px 0px #A0D6E2 inset;
  border-radius: 24px;
  /* Padding vertical: entre 15px y 30px */
  padding-block: clamp(15px, 3.35vw + 4.29px, 30px);
  /* Padding horizontal: entre 13px y 80px */
  padding-inline: clamp(13px, 14.96vw - 34.86px, 80px);
}

.modalInner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.modalHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: #005162;
}
.modalHeader > * {
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
}
@media (min-width: 768px) {
  .modalHeader > * {
    font-size: 24px;
    line-height: 34px;
  }
}

.modalContent {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .modalContent {
    font-size: 16px;
    line-height: 22px;
  }
}
.modalContent.text-center {
  text-align: center;
}

.modalFooter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-block-start: 24px;
  text-align: center;
}

/* ============================================================
   OVERLAY
   Sobrescritura del overlay (blocker) de jQuery Modal
   Se aplica nuestro efecto de background y blur, 
   pero conservamos el pseudo-elemento para centrar verticalmente.
============================================================ */
.jquery-modal.blocker,
.jquery-modal.blocker.current {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: auto !important;
  z-index: 10000 !important;
  /* Aseguramos que quede por encima */
  padding: 20px !important;
  /* Conservamos el padding original */
  box-sizing: border-box !important;
  background-color: rgba(0, 81, 98, 0.28);
  /* Nuestro fondo */
  text-align: center !important;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  transition: opacity 0.3s ease, background-color 0.3s ease, visibility 0.3s ease, -webkit-backdrop-filter 0.3s ease;
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease, background-color 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease, background-color 0.3s ease, visibility 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

/* Mantenemos el pseudo-elemento para centrar verticalmente */
.jquery-modal.blocker:before {
  content: "" !important;
  display: inline-block !important;
  height: 100% !important;
  vertical-align: middle !important;
  margin-right: -0.05em !important;
}

/* ============================================================
   Variables Base
============================================================= */
/* ============================================================
   Mixin para generar clases de grid con prefijo configurable
   Genera clases .pos-<rowStart>-<colStart>-<rowEnd>-<colEnd>
============================================================= */
/* ============================================================
   Clases de rejilla para Desktop y Mobile
============================================================= */
@media (min-width: 769px) {
  .pos-1-1-2-2 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .pos-1-1-2-3 {
    grid-area: 1 / 1 / 2 / 3;
  }
  .pos-1-1-2-4 {
    grid-area: 1 / 1 / 2 / 4;
  }
  .pos-1-1-2-5 {
    grid-area: 1 / 1 / 2 / 5;
  }
  .pos-1-1-2-6 {
    grid-area: 1 / 1 / 2 / 6;
  }
  .pos-1-1-2-7 {
    grid-area: 1 / 1 / 2 / 7;
  }
  .pos-1-1-3-2 {
    grid-area: 1 / 1 / 3 / 2;
  }
  .pos-1-1-3-3 {
    grid-area: 1 / 1 / 3 / 3;
  }
  .pos-1-1-3-4 {
    grid-area: 1 / 1 / 3 / 4;
  }
  .pos-1-1-3-5 {
    grid-area: 1 / 1 / 3 / 5;
  }
  .pos-1-1-3-6 {
    grid-area: 1 / 1 / 3 / 6;
  }
  .pos-1-1-3-7 {
    grid-area: 1 / 1 / 3 / 7;
  }
  .pos-1-1-4-2 {
    grid-area: 1 / 1 / 4 / 2;
  }
  .pos-1-1-4-3 {
    grid-area: 1 / 1 / 4 / 3;
  }
  .pos-1-1-4-4 {
    grid-area: 1 / 1 / 4 / 4;
  }
  .pos-1-1-4-5 {
    grid-area: 1 / 1 / 4 / 5;
  }
  .pos-1-1-4-6 {
    grid-area: 1 / 1 / 4 / 6;
  }
  .pos-1-1-4-7 {
    grid-area: 1 / 1 / 4 / 7;
  }
  .pos-1-1-5-2 {
    grid-area: 1 / 1 / 5 / 2;
  }
  .pos-1-1-5-3 {
    grid-area: 1 / 1 / 5 / 3;
  }
  .pos-1-1-5-4 {
    grid-area: 1 / 1 / 5 / 4;
  }
  .pos-1-1-5-5 {
    grid-area: 1 / 1 / 5 / 5;
  }
  .pos-1-1-5-6 {
    grid-area: 1 / 1 / 5 / 6;
  }
  .pos-1-1-5-7 {
    grid-area: 1 / 1 / 5 / 7;
  }
  .pos-1-1-6-2 {
    grid-area: 1 / 1 / 6 / 2;
  }
  .pos-1-1-6-3 {
    grid-area: 1 / 1 / 6 / 3;
  }
  .pos-1-1-6-4 {
    grid-area: 1 / 1 / 6 / 4;
  }
  .pos-1-1-6-5 {
    grid-area: 1 / 1 / 6 / 5;
  }
  .pos-1-1-6-6 {
    grid-area: 1 / 1 / 6 / 6;
  }
  .pos-1-1-6-7 {
    grid-area: 1 / 1 / 6 / 7;
  }
  .pos-1-1-7-2 {
    grid-area: 1 / 1 / 7 / 2;
  }
  .pos-1-1-7-3 {
    grid-area: 1 / 1 / 7 / 3;
  }
  .pos-1-1-7-4 {
    grid-area: 1 / 1 / 7 / 4;
  }
  .pos-1-1-7-5 {
    grid-area: 1 / 1 / 7 / 5;
  }
  .pos-1-1-7-6 {
    grid-area: 1 / 1 / 7 / 6;
  }
  .pos-1-1-7-7 {
    grid-area: 1 / 1 / 7 / 7;
  }
  .pos-1-2-2-3 {
    grid-area: 1 / 2 / 2 / 3;
  }
  .pos-1-2-2-4 {
    grid-area: 1 / 2 / 2 / 4;
  }
  .pos-1-2-2-5 {
    grid-area: 1 / 2 / 2 / 5;
  }
  .pos-1-2-2-6 {
    grid-area: 1 / 2 / 2 / 6;
  }
  .pos-1-2-2-7 {
    grid-area: 1 / 2 / 2 / 7;
  }
  .pos-1-2-3-3 {
    grid-area: 1 / 2 / 3 / 3;
  }
  .pos-1-2-3-4 {
    grid-area: 1 / 2 / 3 / 4;
  }
  .pos-1-2-3-5 {
    grid-area: 1 / 2 / 3 / 5;
  }
  .pos-1-2-3-6 {
    grid-area: 1 / 2 / 3 / 6;
  }
  .pos-1-2-3-7 {
    grid-area: 1 / 2 / 3 / 7;
  }
  .pos-1-2-4-3 {
    grid-area: 1 / 2 / 4 / 3;
  }
  .pos-1-2-4-4 {
    grid-area: 1 / 2 / 4 / 4;
  }
  .pos-1-2-4-5 {
    grid-area: 1 / 2 / 4 / 5;
  }
  .pos-1-2-4-6 {
    grid-area: 1 / 2 / 4 / 6;
  }
  .pos-1-2-4-7 {
    grid-area: 1 / 2 / 4 / 7;
  }
  .pos-1-2-5-3 {
    grid-area: 1 / 2 / 5 / 3;
  }
  .pos-1-2-5-4 {
    grid-area: 1 / 2 / 5 / 4;
  }
  .pos-1-2-5-5 {
    grid-area: 1 / 2 / 5 / 5;
  }
  .pos-1-2-5-6 {
    grid-area: 1 / 2 / 5 / 6;
  }
  .pos-1-2-5-7 {
    grid-area: 1 / 2 / 5 / 7;
  }
  .pos-1-2-6-3 {
    grid-area: 1 / 2 / 6 / 3;
  }
  .pos-1-2-6-4 {
    grid-area: 1 / 2 / 6 / 4;
  }
  .pos-1-2-6-5 {
    grid-area: 1 / 2 / 6 / 5;
  }
  .pos-1-2-6-6 {
    grid-area: 1 / 2 / 6 / 6;
  }
  .pos-1-2-6-7 {
    grid-area: 1 / 2 / 6 / 7;
  }
  .pos-1-2-7-3 {
    grid-area: 1 / 2 / 7 / 3;
  }
  .pos-1-2-7-4 {
    grid-area: 1 / 2 / 7 / 4;
  }
  .pos-1-2-7-5 {
    grid-area: 1 / 2 / 7 / 5;
  }
  .pos-1-2-7-6 {
    grid-area: 1 / 2 / 7 / 6;
  }
  .pos-1-2-7-7 {
    grid-area: 1 / 2 / 7 / 7;
  }
  .pos-1-3-2-4 {
    grid-area: 1 / 3 / 2 / 4;
  }
  .pos-1-3-2-5 {
    grid-area: 1 / 3 / 2 / 5;
  }
  .pos-1-3-2-6 {
    grid-area: 1 / 3 / 2 / 6;
  }
  .pos-1-3-2-7 {
    grid-area: 1 / 3 / 2 / 7;
  }
  .pos-1-3-3-4 {
    grid-area: 1 / 3 / 3 / 4;
  }
  .pos-1-3-3-5 {
    grid-area: 1 / 3 / 3 / 5;
  }
  .pos-1-3-3-6 {
    grid-area: 1 / 3 / 3 / 6;
  }
  .pos-1-3-3-7 {
    grid-area: 1 / 3 / 3 / 7;
  }
  .pos-1-3-4-4 {
    grid-area: 1 / 3 / 4 / 4;
  }
  .pos-1-3-4-5 {
    grid-area: 1 / 3 / 4 / 5;
  }
  .pos-1-3-4-6 {
    grid-area: 1 / 3 / 4 / 6;
  }
  .pos-1-3-4-7 {
    grid-area: 1 / 3 / 4 / 7;
  }
  .pos-1-3-5-4 {
    grid-area: 1 / 3 / 5 / 4;
  }
  .pos-1-3-5-5 {
    grid-area: 1 / 3 / 5 / 5;
  }
  .pos-1-3-5-6 {
    grid-area: 1 / 3 / 5 / 6;
  }
  .pos-1-3-5-7 {
    grid-area: 1 / 3 / 5 / 7;
  }
  .pos-1-3-6-4 {
    grid-area: 1 / 3 / 6 / 4;
  }
  .pos-1-3-6-5 {
    grid-area: 1 / 3 / 6 / 5;
  }
  .pos-1-3-6-6 {
    grid-area: 1 / 3 / 6 / 6;
  }
  .pos-1-3-6-7 {
    grid-area: 1 / 3 / 6 / 7;
  }
  .pos-1-3-7-4 {
    grid-area: 1 / 3 / 7 / 4;
  }
  .pos-1-3-7-5 {
    grid-area: 1 / 3 / 7 / 5;
  }
  .pos-1-3-7-6 {
    grid-area: 1 / 3 / 7 / 6;
  }
  .pos-1-3-7-7 {
    grid-area: 1 / 3 / 7 / 7;
  }
  .pos-1-4-2-5 {
    grid-area: 1 / 4 / 2 / 5;
  }
  .pos-1-4-2-6 {
    grid-area: 1 / 4 / 2 / 6;
  }
  .pos-1-4-2-7 {
    grid-area: 1 / 4 / 2 / 7;
  }
  .pos-1-4-3-5 {
    grid-area: 1 / 4 / 3 / 5;
  }
  .pos-1-4-3-6 {
    grid-area: 1 / 4 / 3 / 6;
  }
  .pos-1-4-3-7 {
    grid-area: 1 / 4 / 3 / 7;
  }
  .pos-1-4-4-5 {
    grid-area: 1 / 4 / 4 / 5;
  }
  .pos-1-4-4-6 {
    grid-area: 1 / 4 / 4 / 6;
  }
  .pos-1-4-4-7 {
    grid-area: 1 / 4 / 4 / 7;
  }
  .pos-1-4-5-5 {
    grid-area: 1 / 4 / 5 / 5;
  }
  .pos-1-4-5-6 {
    grid-area: 1 / 4 / 5 / 6;
  }
  .pos-1-4-5-7 {
    grid-area: 1 / 4 / 5 / 7;
  }
  .pos-1-4-6-5 {
    grid-area: 1 / 4 / 6 / 5;
  }
  .pos-1-4-6-6 {
    grid-area: 1 / 4 / 6 / 6;
  }
  .pos-1-4-6-7 {
    grid-area: 1 / 4 / 6 / 7;
  }
  .pos-1-4-7-5 {
    grid-area: 1 / 4 / 7 / 5;
  }
  .pos-1-4-7-6 {
    grid-area: 1 / 4 / 7 / 6;
  }
  .pos-1-4-7-7 {
    grid-area: 1 / 4 / 7 / 7;
  }
  .pos-1-5-2-6 {
    grid-area: 1 / 5 / 2 / 6;
  }
  .pos-1-5-2-7 {
    grid-area: 1 / 5 / 2 / 7;
  }
  .pos-1-5-3-6 {
    grid-area: 1 / 5 / 3 / 6;
  }
  .pos-1-5-3-7 {
    grid-area: 1 / 5 / 3 / 7;
  }
  .pos-1-5-4-6 {
    grid-area: 1 / 5 / 4 / 6;
  }
  .pos-1-5-4-7 {
    grid-area: 1 / 5 / 4 / 7;
  }
  .pos-1-5-5-6 {
    grid-area: 1 / 5 / 5 / 6;
  }
  .pos-1-5-5-7 {
    grid-area: 1 / 5 / 5 / 7;
  }
  .pos-1-5-6-6 {
    grid-area: 1 / 5 / 6 / 6;
  }
  .pos-1-5-6-7 {
    grid-area: 1 / 5 / 6 / 7;
  }
  .pos-1-5-7-6 {
    grid-area: 1 / 5 / 7 / 6;
  }
  .pos-1-5-7-7 {
    grid-area: 1 / 5 / 7 / 7;
  }
  .pos-1-6-2-7 {
    grid-area: 1 / 6 / 2 / 7;
  }
  .pos-1-6-3-7 {
    grid-area: 1 / 6 / 3 / 7;
  }
  .pos-1-6-4-7 {
    grid-area: 1 / 6 / 4 / 7;
  }
  .pos-1-6-5-7 {
    grid-area: 1 / 6 / 5 / 7;
  }
  .pos-1-6-6-7 {
    grid-area: 1 / 6 / 6 / 7;
  }
  .pos-1-6-7-7 {
    grid-area: 1 / 6 / 7 / 7;
  }
  .pos-2-1-3-2 {
    grid-area: 2 / 1 / 3 / 2;
  }
  .pos-2-1-3-3 {
    grid-area: 2 / 1 / 3 / 3;
  }
  .pos-2-1-3-4 {
    grid-area: 2 / 1 / 3 / 4;
  }
  .pos-2-1-3-5 {
    grid-area: 2 / 1 / 3 / 5;
  }
  .pos-2-1-3-6 {
    grid-area: 2 / 1 / 3 / 6;
  }
  .pos-2-1-3-7 {
    grid-area: 2 / 1 / 3 / 7;
  }
  .pos-2-1-4-2 {
    grid-area: 2 / 1 / 4 / 2;
  }
  .pos-2-1-4-3 {
    grid-area: 2 / 1 / 4 / 3;
  }
  .pos-2-1-4-4 {
    grid-area: 2 / 1 / 4 / 4;
  }
  .pos-2-1-4-5 {
    grid-area: 2 / 1 / 4 / 5;
  }
  .pos-2-1-4-6 {
    grid-area: 2 / 1 / 4 / 6;
  }
  .pos-2-1-4-7 {
    grid-area: 2 / 1 / 4 / 7;
  }
  .pos-2-1-5-2 {
    grid-area: 2 / 1 / 5 / 2;
  }
  .pos-2-1-5-3 {
    grid-area: 2 / 1 / 5 / 3;
  }
  .pos-2-1-5-4 {
    grid-area: 2 / 1 / 5 / 4;
  }
  .pos-2-1-5-5 {
    grid-area: 2 / 1 / 5 / 5;
  }
  .pos-2-1-5-6 {
    grid-area: 2 / 1 / 5 / 6;
  }
  .pos-2-1-5-7 {
    grid-area: 2 / 1 / 5 / 7;
  }
  .pos-2-1-6-2 {
    grid-area: 2 / 1 / 6 / 2;
  }
  .pos-2-1-6-3 {
    grid-area: 2 / 1 / 6 / 3;
  }
  .pos-2-1-6-4 {
    grid-area: 2 / 1 / 6 / 4;
  }
  .pos-2-1-6-5 {
    grid-area: 2 / 1 / 6 / 5;
  }
  .pos-2-1-6-6 {
    grid-area: 2 / 1 / 6 / 6;
  }
  .pos-2-1-6-7 {
    grid-area: 2 / 1 / 6 / 7;
  }
  .pos-2-1-7-2 {
    grid-area: 2 / 1 / 7 / 2;
  }
  .pos-2-1-7-3 {
    grid-area: 2 / 1 / 7 / 3;
  }
  .pos-2-1-7-4 {
    grid-area: 2 / 1 / 7 / 4;
  }
  .pos-2-1-7-5 {
    grid-area: 2 / 1 / 7 / 5;
  }
  .pos-2-1-7-6 {
    grid-area: 2 / 1 / 7 / 6;
  }
  .pos-2-1-7-7 {
    grid-area: 2 / 1 / 7 / 7;
  }
  .pos-2-2-3-3 {
    grid-area: 2 / 2 / 3 / 3;
  }
  .pos-2-2-3-4 {
    grid-area: 2 / 2 / 3 / 4;
  }
  .pos-2-2-3-5 {
    grid-area: 2 / 2 / 3 / 5;
  }
  .pos-2-2-3-6 {
    grid-area: 2 / 2 / 3 / 6;
  }
  .pos-2-2-3-7 {
    grid-area: 2 / 2 / 3 / 7;
  }
  .pos-2-2-4-3 {
    grid-area: 2 / 2 / 4 / 3;
  }
  .pos-2-2-4-4 {
    grid-area: 2 / 2 / 4 / 4;
  }
  .pos-2-2-4-5 {
    grid-area: 2 / 2 / 4 / 5;
  }
  .pos-2-2-4-6 {
    grid-area: 2 / 2 / 4 / 6;
  }
  .pos-2-2-4-7 {
    grid-area: 2 / 2 / 4 / 7;
  }
  .pos-2-2-5-3 {
    grid-area: 2 / 2 / 5 / 3;
  }
  .pos-2-2-5-4 {
    grid-area: 2 / 2 / 5 / 4;
  }
  .pos-2-2-5-5 {
    grid-area: 2 / 2 / 5 / 5;
  }
  .pos-2-2-5-6 {
    grid-area: 2 / 2 / 5 / 6;
  }
  .pos-2-2-5-7 {
    grid-area: 2 / 2 / 5 / 7;
  }
  .pos-2-2-6-3 {
    grid-area: 2 / 2 / 6 / 3;
  }
  .pos-2-2-6-4 {
    grid-area: 2 / 2 / 6 / 4;
  }
  .pos-2-2-6-5 {
    grid-area: 2 / 2 / 6 / 5;
  }
  .pos-2-2-6-6 {
    grid-area: 2 / 2 / 6 / 6;
  }
  .pos-2-2-6-7 {
    grid-area: 2 / 2 / 6 / 7;
  }
  .pos-2-2-7-3 {
    grid-area: 2 / 2 / 7 / 3;
  }
  .pos-2-2-7-4 {
    grid-area: 2 / 2 / 7 / 4;
  }
  .pos-2-2-7-5 {
    grid-area: 2 / 2 / 7 / 5;
  }
  .pos-2-2-7-6 {
    grid-area: 2 / 2 / 7 / 6;
  }
  .pos-2-2-7-7 {
    grid-area: 2 / 2 / 7 / 7;
  }
  .pos-2-3-3-4 {
    grid-area: 2 / 3 / 3 / 4;
  }
  .pos-2-3-3-5 {
    grid-area: 2 / 3 / 3 / 5;
  }
  .pos-2-3-3-6 {
    grid-area: 2 / 3 / 3 / 6;
  }
  .pos-2-3-3-7 {
    grid-area: 2 / 3 / 3 / 7;
  }
  .pos-2-3-4-4 {
    grid-area: 2 / 3 / 4 / 4;
  }
  .pos-2-3-4-5 {
    grid-area: 2 / 3 / 4 / 5;
  }
  .pos-2-3-4-6 {
    grid-area: 2 / 3 / 4 / 6;
  }
  .pos-2-3-4-7 {
    grid-area: 2 / 3 / 4 / 7;
  }
  .pos-2-3-5-4 {
    grid-area: 2 / 3 / 5 / 4;
  }
  .pos-2-3-5-5 {
    grid-area: 2 / 3 / 5 / 5;
  }
  .pos-2-3-5-6 {
    grid-area: 2 / 3 / 5 / 6;
  }
  .pos-2-3-5-7 {
    grid-area: 2 / 3 / 5 / 7;
  }
  .pos-2-3-6-4 {
    grid-area: 2 / 3 / 6 / 4;
  }
  .pos-2-3-6-5 {
    grid-area: 2 / 3 / 6 / 5;
  }
  .pos-2-3-6-6 {
    grid-area: 2 / 3 / 6 / 6;
  }
  .pos-2-3-6-7 {
    grid-area: 2 / 3 / 6 / 7;
  }
  .pos-2-3-7-4 {
    grid-area: 2 / 3 / 7 / 4;
  }
  .pos-2-3-7-5 {
    grid-area: 2 / 3 / 7 / 5;
  }
  .pos-2-3-7-6 {
    grid-area: 2 / 3 / 7 / 6;
  }
  .pos-2-3-7-7 {
    grid-area: 2 / 3 / 7 / 7;
  }
  .pos-2-4-3-5 {
    grid-area: 2 / 4 / 3 / 5;
  }
  .pos-2-4-3-6 {
    grid-area: 2 / 4 / 3 / 6;
  }
  .pos-2-4-3-7 {
    grid-area: 2 / 4 / 3 / 7;
  }
  .pos-2-4-4-5 {
    grid-area: 2 / 4 / 4 / 5;
  }
  .pos-2-4-4-6 {
    grid-area: 2 / 4 / 4 / 6;
  }
  .pos-2-4-4-7 {
    grid-area: 2 / 4 / 4 / 7;
  }
  .pos-2-4-5-5 {
    grid-area: 2 / 4 / 5 / 5;
  }
  .pos-2-4-5-6 {
    grid-area: 2 / 4 / 5 / 6;
  }
  .pos-2-4-5-7 {
    grid-area: 2 / 4 / 5 / 7;
  }
  .pos-2-4-6-5 {
    grid-area: 2 / 4 / 6 / 5;
  }
  .pos-2-4-6-6 {
    grid-area: 2 / 4 / 6 / 6;
  }
  .pos-2-4-6-7 {
    grid-area: 2 / 4 / 6 / 7;
  }
  .pos-2-4-7-5 {
    grid-area: 2 / 4 / 7 / 5;
  }
  .pos-2-4-7-6 {
    grid-area: 2 / 4 / 7 / 6;
  }
  .pos-2-4-7-7 {
    grid-area: 2 / 4 / 7 / 7;
  }
  .pos-2-5-3-6 {
    grid-area: 2 / 5 / 3 / 6;
  }
  .pos-2-5-3-7 {
    grid-area: 2 / 5 / 3 / 7;
  }
  .pos-2-5-4-6 {
    grid-area: 2 / 5 / 4 / 6;
  }
  .pos-2-5-4-7 {
    grid-area: 2 / 5 / 4 / 7;
  }
  .pos-2-5-5-6 {
    grid-area: 2 / 5 / 5 / 6;
  }
  .pos-2-5-5-7 {
    grid-area: 2 / 5 / 5 / 7;
  }
  .pos-2-5-6-6 {
    grid-area: 2 / 5 / 6 / 6;
  }
  .pos-2-5-6-7 {
    grid-area: 2 / 5 / 6 / 7;
  }
  .pos-2-5-7-6 {
    grid-area: 2 / 5 / 7 / 6;
  }
  .pos-2-5-7-7 {
    grid-area: 2 / 5 / 7 / 7;
  }
  .pos-2-6-3-7 {
    grid-area: 2 / 6 / 3 / 7;
  }
  .pos-2-6-4-7 {
    grid-area: 2 / 6 / 4 / 7;
  }
  .pos-2-6-5-7 {
    grid-area: 2 / 6 / 5 / 7;
  }
  .pos-2-6-6-7 {
    grid-area: 2 / 6 / 6 / 7;
  }
  .pos-2-6-7-7 {
    grid-area: 2 / 6 / 7 / 7;
  }
  .pos-3-1-4-2 {
    grid-area: 3 / 1 / 4 / 2;
  }
  .pos-3-1-4-3 {
    grid-area: 3 / 1 / 4 / 3;
  }
  .pos-3-1-4-4 {
    grid-area: 3 / 1 / 4 / 4;
  }
  .pos-3-1-4-5 {
    grid-area: 3 / 1 / 4 / 5;
  }
  .pos-3-1-4-6 {
    grid-area: 3 / 1 / 4 / 6;
  }
  .pos-3-1-4-7 {
    grid-area: 3 / 1 / 4 / 7;
  }
  .pos-3-1-5-2 {
    grid-area: 3 / 1 / 5 / 2;
  }
  .pos-3-1-5-3 {
    grid-area: 3 / 1 / 5 / 3;
  }
  .pos-3-1-5-4 {
    grid-area: 3 / 1 / 5 / 4;
  }
  .pos-3-1-5-5 {
    grid-area: 3 / 1 / 5 / 5;
  }
  .pos-3-1-5-6 {
    grid-area: 3 / 1 / 5 / 6;
  }
  .pos-3-1-5-7 {
    grid-area: 3 / 1 / 5 / 7;
  }
  .pos-3-1-6-2 {
    grid-area: 3 / 1 / 6 / 2;
  }
  .pos-3-1-6-3 {
    grid-area: 3 / 1 / 6 / 3;
  }
  .pos-3-1-6-4 {
    grid-area: 3 / 1 / 6 / 4;
  }
  .pos-3-1-6-5 {
    grid-area: 3 / 1 / 6 / 5;
  }
  .pos-3-1-6-6 {
    grid-area: 3 / 1 / 6 / 6;
  }
  .pos-3-1-6-7 {
    grid-area: 3 / 1 / 6 / 7;
  }
  .pos-3-1-7-2 {
    grid-area: 3 / 1 / 7 / 2;
  }
  .pos-3-1-7-3 {
    grid-area: 3 / 1 / 7 / 3;
  }
  .pos-3-1-7-4 {
    grid-area: 3 / 1 / 7 / 4;
  }
  .pos-3-1-7-5 {
    grid-area: 3 / 1 / 7 / 5;
  }
  .pos-3-1-7-6 {
    grid-area: 3 / 1 / 7 / 6;
  }
  .pos-3-1-7-7 {
    grid-area: 3 / 1 / 7 / 7;
  }
  .pos-3-2-4-3 {
    grid-area: 3 / 2 / 4 / 3;
  }
  .pos-3-2-4-4 {
    grid-area: 3 / 2 / 4 / 4;
  }
  .pos-3-2-4-5 {
    grid-area: 3 / 2 / 4 / 5;
  }
  .pos-3-2-4-6 {
    grid-area: 3 / 2 / 4 / 6;
  }
  .pos-3-2-4-7 {
    grid-area: 3 / 2 / 4 / 7;
  }
  .pos-3-2-5-3 {
    grid-area: 3 / 2 / 5 / 3;
  }
  .pos-3-2-5-4 {
    grid-area: 3 / 2 / 5 / 4;
  }
  .pos-3-2-5-5 {
    grid-area: 3 / 2 / 5 / 5;
  }
  .pos-3-2-5-6 {
    grid-area: 3 / 2 / 5 / 6;
  }
  .pos-3-2-5-7 {
    grid-area: 3 / 2 / 5 / 7;
  }
  .pos-3-2-6-3 {
    grid-area: 3 / 2 / 6 / 3;
  }
  .pos-3-2-6-4 {
    grid-area: 3 / 2 / 6 / 4;
  }
  .pos-3-2-6-5 {
    grid-area: 3 / 2 / 6 / 5;
  }
  .pos-3-2-6-6 {
    grid-area: 3 / 2 / 6 / 6;
  }
  .pos-3-2-6-7 {
    grid-area: 3 / 2 / 6 / 7;
  }
  .pos-3-2-7-3 {
    grid-area: 3 / 2 / 7 / 3;
  }
  .pos-3-2-7-4 {
    grid-area: 3 / 2 / 7 / 4;
  }
  .pos-3-2-7-5 {
    grid-area: 3 / 2 / 7 / 5;
  }
  .pos-3-2-7-6 {
    grid-area: 3 / 2 / 7 / 6;
  }
  .pos-3-2-7-7 {
    grid-area: 3 / 2 / 7 / 7;
  }
  .pos-3-3-4-4 {
    grid-area: 3 / 3 / 4 / 4;
  }
  .pos-3-3-4-5 {
    grid-area: 3 / 3 / 4 / 5;
  }
  .pos-3-3-4-6 {
    grid-area: 3 / 3 / 4 / 6;
  }
  .pos-3-3-4-7 {
    grid-area: 3 / 3 / 4 / 7;
  }
  .pos-3-3-5-4 {
    grid-area: 3 / 3 / 5 / 4;
  }
  .pos-3-3-5-5 {
    grid-area: 3 / 3 / 5 / 5;
  }
  .pos-3-3-5-6 {
    grid-area: 3 / 3 / 5 / 6;
  }
  .pos-3-3-5-7 {
    grid-area: 3 / 3 / 5 / 7;
  }
  .pos-3-3-6-4 {
    grid-area: 3 / 3 / 6 / 4;
  }
  .pos-3-3-6-5 {
    grid-area: 3 / 3 / 6 / 5;
  }
  .pos-3-3-6-6 {
    grid-area: 3 / 3 / 6 / 6;
  }
  .pos-3-3-6-7 {
    grid-area: 3 / 3 / 6 / 7;
  }
  .pos-3-3-7-4 {
    grid-area: 3 / 3 / 7 / 4;
  }
  .pos-3-3-7-5 {
    grid-area: 3 / 3 / 7 / 5;
  }
  .pos-3-3-7-6 {
    grid-area: 3 / 3 / 7 / 6;
  }
  .pos-3-3-7-7 {
    grid-area: 3 / 3 / 7 / 7;
  }
  .pos-3-4-4-5 {
    grid-area: 3 / 4 / 4 / 5;
  }
  .pos-3-4-4-6 {
    grid-area: 3 / 4 / 4 / 6;
  }
  .pos-3-4-4-7 {
    grid-area: 3 / 4 / 4 / 7;
  }
  .pos-3-4-5-5 {
    grid-area: 3 / 4 / 5 / 5;
  }
  .pos-3-4-5-6 {
    grid-area: 3 / 4 / 5 / 6;
  }
  .pos-3-4-5-7 {
    grid-area: 3 / 4 / 5 / 7;
  }
  .pos-3-4-6-5 {
    grid-area: 3 / 4 / 6 / 5;
  }
  .pos-3-4-6-6 {
    grid-area: 3 / 4 / 6 / 6;
  }
  .pos-3-4-6-7 {
    grid-area: 3 / 4 / 6 / 7;
  }
  .pos-3-4-7-5 {
    grid-area: 3 / 4 / 7 / 5;
  }
  .pos-3-4-7-6 {
    grid-area: 3 / 4 / 7 / 6;
  }
  .pos-3-4-7-7 {
    grid-area: 3 / 4 / 7 / 7;
  }
  .pos-3-5-4-6 {
    grid-area: 3 / 5 / 4 / 6;
  }
  .pos-3-5-4-7 {
    grid-area: 3 / 5 / 4 / 7;
  }
  .pos-3-5-5-6 {
    grid-area: 3 / 5 / 5 / 6;
  }
  .pos-3-5-5-7 {
    grid-area: 3 / 5 / 5 / 7;
  }
  .pos-3-5-6-6 {
    grid-area: 3 / 5 / 6 / 6;
  }
  .pos-3-5-6-7 {
    grid-area: 3 / 5 / 6 / 7;
  }
  .pos-3-5-7-6 {
    grid-area: 3 / 5 / 7 / 6;
  }
  .pos-3-5-7-7 {
    grid-area: 3 / 5 / 7 / 7;
  }
  .pos-3-6-4-7 {
    grid-area: 3 / 6 / 4 / 7;
  }
  .pos-3-6-5-7 {
    grid-area: 3 / 6 / 5 / 7;
  }
  .pos-3-6-6-7 {
    grid-area: 3 / 6 / 6 / 7;
  }
  .pos-3-6-7-7 {
    grid-area: 3 / 6 / 7 / 7;
  }
  .pos-4-1-5-2 {
    grid-area: 4 / 1 / 5 / 2;
  }
  .pos-4-1-5-3 {
    grid-area: 4 / 1 / 5 / 3;
  }
  .pos-4-1-5-4 {
    grid-area: 4 / 1 / 5 / 4;
  }
  .pos-4-1-5-5 {
    grid-area: 4 / 1 / 5 / 5;
  }
  .pos-4-1-5-6 {
    grid-area: 4 / 1 / 5 / 6;
  }
  .pos-4-1-5-7 {
    grid-area: 4 / 1 / 5 / 7;
  }
  .pos-4-1-6-2 {
    grid-area: 4 / 1 / 6 / 2;
  }
  .pos-4-1-6-3 {
    grid-area: 4 / 1 / 6 / 3;
  }
  .pos-4-1-6-4 {
    grid-area: 4 / 1 / 6 / 4;
  }
  .pos-4-1-6-5 {
    grid-area: 4 / 1 / 6 / 5;
  }
  .pos-4-1-6-6 {
    grid-area: 4 / 1 / 6 / 6;
  }
  .pos-4-1-6-7 {
    grid-area: 4 / 1 / 6 / 7;
  }
  .pos-4-1-7-2 {
    grid-area: 4 / 1 / 7 / 2;
  }
  .pos-4-1-7-3 {
    grid-area: 4 / 1 / 7 / 3;
  }
  .pos-4-1-7-4 {
    grid-area: 4 / 1 / 7 / 4;
  }
  .pos-4-1-7-5 {
    grid-area: 4 / 1 / 7 / 5;
  }
  .pos-4-1-7-6 {
    grid-area: 4 / 1 / 7 / 6;
  }
  .pos-4-1-7-7 {
    grid-area: 4 / 1 / 7 / 7;
  }
  .pos-4-2-5-3 {
    grid-area: 4 / 2 / 5 / 3;
  }
  .pos-4-2-5-4 {
    grid-area: 4 / 2 / 5 / 4;
  }
  .pos-4-2-5-5 {
    grid-area: 4 / 2 / 5 / 5;
  }
  .pos-4-2-5-6 {
    grid-area: 4 / 2 / 5 / 6;
  }
  .pos-4-2-5-7 {
    grid-area: 4 / 2 / 5 / 7;
  }
  .pos-4-2-6-3 {
    grid-area: 4 / 2 / 6 / 3;
  }
  .pos-4-2-6-4 {
    grid-area: 4 / 2 / 6 / 4;
  }
  .pos-4-2-6-5 {
    grid-area: 4 / 2 / 6 / 5;
  }
  .pos-4-2-6-6 {
    grid-area: 4 / 2 / 6 / 6;
  }
  .pos-4-2-6-7 {
    grid-area: 4 / 2 / 6 / 7;
  }
  .pos-4-2-7-3 {
    grid-area: 4 / 2 / 7 / 3;
  }
  .pos-4-2-7-4 {
    grid-area: 4 / 2 / 7 / 4;
  }
  .pos-4-2-7-5 {
    grid-area: 4 / 2 / 7 / 5;
  }
  .pos-4-2-7-6 {
    grid-area: 4 / 2 / 7 / 6;
  }
  .pos-4-2-7-7 {
    grid-area: 4 / 2 / 7 / 7;
  }
  .pos-4-3-5-4 {
    grid-area: 4 / 3 / 5 / 4;
  }
  .pos-4-3-5-5 {
    grid-area: 4 / 3 / 5 / 5;
  }
  .pos-4-3-5-6 {
    grid-area: 4 / 3 / 5 / 6;
  }
  .pos-4-3-5-7 {
    grid-area: 4 / 3 / 5 / 7;
  }
  .pos-4-3-6-4 {
    grid-area: 4 / 3 / 6 / 4;
  }
  .pos-4-3-6-5 {
    grid-area: 4 / 3 / 6 / 5;
  }
  .pos-4-3-6-6 {
    grid-area: 4 / 3 / 6 / 6;
  }
  .pos-4-3-6-7 {
    grid-area: 4 / 3 / 6 / 7;
  }
  .pos-4-3-7-4 {
    grid-area: 4 / 3 / 7 / 4;
  }
  .pos-4-3-7-5 {
    grid-area: 4 / 3 / 7 / 5;
  }
  .pos-4-3-7-6 {
    grid-area: 4 / 3 / 7 / 6;
  }
  .pos-4-3-7-7 {
    grid-area: 4 / 3 / 7 / 7;
  }
  .pos-4-4-5-5 {
    grid-area: 4 / 4 / 5 / 5;
  }
  .pos-4-4-5-6 {
    grid-area: 4 / 4 / 5 / 6;
  }
  .pos-4-4-5-7 {
    grid-area: 4 / 4 / 5 / 7;
  }
  .pos-4-4-6-5 {
    grid-area: 4 / 4 / 6 / 5;
  }
  .pos-4-4-6-6 {
    grid-area: 4 / 4 / 6 / 6;
  }
  .pos-4-4-6-7 {
    grid-area: 4 / 4 / 6 / 7;
  }
  .pos-4-4-7-5 {
    grid-area: 4 / 4 / 7 / 5;
  }
  .pos-4-4-7-6 {
    grid-area: 4 / 4 / 7 / 6;
  }
  .pos-4-4-7-7 {
    grid-area: 4 / 4 / 7 / 7;
  }
  .pos-4-5-5-6 {
    grid-area: 4 / 5 / 5 / 6;
  }
  .pos-4-5-5-7 {
    grid-area: 4 / 5 / 5 / 7;
  }
  .pos-4-5-6-6 {
    grid-area: 4 / 5 / 6 / 6;
  }
  .pos-4-5-6-7 {
    grid-area: 4 / 5 / 6 / 7;
  }
  .pos-4-5-7-6 {
    grid-area: 4 / 5 / 7 / 6;
  }
  .pos-4-5-7-7 {
    grid-area: 4 / 5 / 7 / 7;
  }
  .pos-4-6-5-7 {
    grid-area: 4 / 6 / 5 / 7;
  }
  .pos-4-6-6-7 {
    grid-area: 4 / 6 / 6 / 7;
  }
  .pos-4-6-7-7 {
    grid-area: 4 / 6 / 7 / 7;
  }
  .pos-5-1-6-2 {
    grid-area: 5 / 1 / 6 / 2;
  }
  .pos-5-1-6-3 {
    grid-area: 5 / 1 / 6 / 3;
  }
  .pos-5-1-6-4 {
    grid-area: 5 / 1 / 6 / 4;
  }
  .pos-5-1-6-5 {
    grid-area: 5 / 1 / 6 / 5;
  }
  .pos-5-1-6-6 {
    grid-area: 5 / 1 / 6 / 6;
  }
  .pos-5-1-6-7 {
    grid-area: 5 / 1 / 6 / 7;
  }
  .pos-5-1-7-2 {
    grid-area: 5 / 1 / 7 / 2;
  }
  .pos-5-1-7-3 {
    grid-area: 5 / 1 / 7 / 3;
  }
  .pos-5-1-7-4 {
    grid-area: 5 / 1 / 7 / 4;
  }
  .pos-5-1-7-5 {
    grid-area: 5 / 1 / 7 / 5;
  }
  .pos-5-1-7-6 {
    grid-area: 5 / 1 / 7 / 6;
  }
  .pos-5-1-7-7 {
    grid-area: 5 / 1 / 7 / 7;
  }
  .pos-5-2-6-3 {
    grid-area: 5 / 2 / 6 / 3;
  }
  .pos-5-2-6-4 {
    grid-area: 5 / 2 / 6 / 4;
  }
  .pos-5-2-6-5 {
    grid-area: 5 / 2 / 6 / 5;
  }
  .pos-5-2-6-6 {
    grid-area: 5 / 2 / 6 / 6;
  }
  .pos-5-2-6-7 {
    grid-area: 5 / 2 / 6 / 7;
  }
  .pos-5-2-7-3 {
    grid-area: 5 / 2 / 7 / 3;
  }
  .pos-5-2-7-4 {
    grid-area: 5 / 2 / 7 / 4;
  }
  .pos-5-2-7-5 {
    grid-area: 5 / 2 / 7 / 5;
  }
  .pos-5-2-7-6 {
    grid-area: 5 / 2 / 7 / 6;
  }
  .pos-5-2-7-7 {
    grid-area: 5 / 2 / 7 / 7;
  }
  .pos-5-3-6-4 {
    grid-area: 5 / 3 / 6 / 4;
  }
  .pos-5-3-6-5 {
    grid-area: 5 / 3 / 6 / 5;
  }
  .pos-5-3-6-6 {
    grid-area: 5 / 3 / 6 / 6;
  }
  .pos-5-3-6-7 {
    grid-area: 5 / 3 / 6 / 7;
  }
  .pos-5-3-7-4 {
    grid-area: 5 / 3 / 7 / 4;
  }
  .pos-5-3-7-5 {
    grid-area: 5 / 3 / 7 / 5;
  }
  .pos-5-3-7-6 {
    grid-area: 5 / 3 / 7 / 6;
  }
  .pos-5-3-7-7 {
    grid-area: 5 / 3 / 7 / 7;
  }
  .pos-5-4-6-5 {
    grid-area: 5 / 4 / 6 / 5;
  }
  .pos-5-4-6-6 {
    grid-area: 5 / 4 / 6 / 6;
  }
  .pos-5-4-6-7 {
    grid-area: 5 / 4 / 6 / 7;
  }
  .pos-5-4-7-5 {
    grid-area: 5 / 4 / 7 / 5;
  }
  .pos-5-4-7-6 {
    grid-area: 5 / 4 / 7 / 6;
  }
  .pos-5-4-7-7 {
    grid-area: 5 / 4 / 7 / 7;
  }
  .pos-5-5-6-6 {
    grid-area: 5 / 5 / 6 / 6;
  }
  .pos-5-5-6-7 {
    grid-area: 5 / 5 / 6 / 7;
  }
  .pos-5-5-7-6 {
    grid-area: 5 / 5 / 7 / 6;
  }
  .pos-5-5-7-7 {
    grid-area: 5 / 5 / 7 / 7;
  }
  .pos-5-6-6-7 {
    grid-area: 5 / 6 / 6 / 7;
  }
  .pos-5-6-7-7 {
    grid-area: 5 / 6 / 7 / 7;
  }
  .pos-6-1-7-2 {
    grid-area: 6 / 1 / 7 / 2;
  }
  .pos-6-1-7-3 {
    grid-area: 6 / 1 / 7 / 3;
  }
  .pos-6-1-7-4 {
    grid-area: 6 / 1 / 7 / 4;
  }
  .pos-6-1-7-5 {
    grid-area: 6 / 1 / 7 / 5;
  }
  .pos-6-1-7-6 {
    grid-area: 6 / 1 / 7 / 6;
  }
  .pos-6-1-7-7 {
    grid-area: 6 / 1 / 7 / 7;
  }
  .pos-6-2-7-3 {
    grid-area: 6 / 2 / 7 / 3;
  }
  .pos-6-2-7-4 {
    grid-area: 6 / 2 / 7 / 4;
  }
  .pos-6-2-7-5 {
    grid-area: 6 / 2 / 7 / 5;
  }
  .pos-6-2-7-6 {
    grid-area: 6 / 2 / 7 / 6;
  }
  .pos-6-2-7-7 {
    grid-area: 6 / 2 / 7 / 7;
  }
  .pos-6-3-7-4 {
    grid-area: 6 / 3 / 7 / 4;
  }
  .pos-6-3-7-5 {
    grid-area: 6 / 3 / 7 / 5;
  }
  .pos-6-3-7-6 {
    grid-area: 6 / 3 / 7 / 6;
  }
  .pos-6-3-7-7 {
    grid-area: 6 / 3 / 7 / 7;
  }
  .pos-6-4-7-5 {
    grid-area: 6 / 4 / 7 / 5;
  }
  .pos-6-4-7-6 {
    grid-area: 6 / 4 / 7 / 6;
  }
  .pos-6-4-7-7 {
    grid-area: 6 / 4 / 7 / 7;
  }
  .pos-6-5-7-6 {
    grid-area: 6 / 5 / 7 / 6;
  }
  .pos-6-5-7-7 {
    grid-area: 6 / 5 / 7 / 7;
  }
  .pos-6-6-7-7 {
    grid-area: 6 / 6 / 7 / 7;
  }
}
@media (max-width: 768px) {
  .pos-mob-1-1-2-2 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .pos-mob-1-1-2-3 {
    grid-area: 1 / 1 / 2 / 3;
  }
  .pos-mob-1-1-2-4 {
    grid-area: 1 / 1 / 2 / 4;
  }
  .pos-mob-1-1-2-5 {
    grid-area: 1 / 1 / 2 / 5;
  }
  .pos-mob-1-1-2-6 {
    grid-area: 1 / 1 / 2 / 6;
  }
  .pos-mob-1-1-2-7 {
    grid-area: 1 / 1 / 2 / 7;
  }
  .pos-mob-1-1-3-2 {
    grid-area: 1 / 1 / 3 / 2;
  }
  .pos-mob-1-1-3-3 {
    grid-area: 1 / 1 / 3 / 3;
  }
  .pos-mob-1-1-3-4 {
    grid-area: 1 / 1 / 3 / 4;
  }
  .pos-mob-1-1-3-5 {
    grid-area: 1 / 1 / 3 / 5;
  }
  .pos-mob-1-1-3-6 {
    grid-area: 1 / 1 / 3 / 6;
  }
  .pos-mob-1-1-3-7 {
    grid-area: 1 / 1 / 3 / 7;
  }
  .pos-mob-1-1-4-2 {
    grid-area: 1 / 1 / 4 / 2;
  }
  .pos-mob-1-1-4-3 {
    grid-area: 1 / 1 / 4 / 3;
  }
  .pos-mob-1-1-4-4 {
    grid-area: 1 / 1 / 4 / 4;
  }
  .pos-mob-1-1-4-5 {
    grid-area: 1 / 1 / 4 / 5;
  }
  .pos-mob-1-1-4-6 {
    grid-area: 1 / 1 / 4 / 6;
  }
  .pos-mob-1-1-4-7 {
    grid-area: 1 / 1 / 4 / 7;
  }
  .pos-mob-1-1-5-2 {
    grid-area: 1 / 1 / 5 / 2;
  }
  .pos-mob-1-1-5-3 {
    grid-area: 1 / 1 / 5 / 3;
  }
  .pos-mob-1-1-5-4 {
    grid-area: 1 / 1 / 5 / 4;
  }
  .pos-mob-1-1-5-5 {
    grid-area: 1 / 1 / 5 / 5;
  }
  .pos-mob-1-1-5-6 {
    grid-area: 1 / 1 / 5 / 6;
  }
  .pos-mob-1-1-5-7 {
    grid-area: 1 / 1 / 5 / 7;
  }
  .pos-mob-1-1-6-2 {
    grid-area: 1 / 1 / 6 / 2;
  }
  .pos-mob-1-1-6-3 {
    grid-area: 1 / 1 / 6 / 3;
  }
  .pos-mob-1-1-6-4 {
    grid-area: 1 / 1 / 6 / 4;
  }
  .pos-mob-1-1-6-5 {
    grid-area: 1 / 1 / 6 / 5;
  }
  .pos-mob-1-1-6-6 {
    grid-area: 1 / 1 / 6 / 6;
  }
  .pos-mob-1-1-6-7 {
    grid-area: 1 / 1 / 6 / 7;
  }
  .pos-mob-1-1-7-2 {
    grid-area: 1 / 1 / 7 / 2;
  }
  .pos-mob-1-1-7-3 {
    grid-area: 1 / 1 / 7 / 3;
  }
  .pos-mob-1-1-7-4 {
    grid-area: 1 / 1 / 7 / 4;
  }
  .pos-mob-1-1-7-5 {
    grid-area: 1 / 1 / 7 / 5;
  }
  .pos-mob-1-1-7-6 {
    grid-area: 1 / 1 / 7 / 6;
  }
  .pos-mob-1-1-7-7 {
    grid-area: 1 / 1 / 7 / 7;
  }
  .pos-mob-1-2-2-3 {
    grid-area: 1 / 2 / 2 / 3;
  }
  .pos-mob-1-2-2-4 {
    grid-area: 1 / 2 / 2 / 4;
  }
  .pos-mob-1-2-2-5 {
    grid-area: 1 / 2 / 2 / 5;
  }
  .pos-mob-1-2-2-6 {
    grid-area: 1 / 2 / 2 / 6;
  }
  .pos-mob-1-2-2-7 {
    grid-area: 1 / 2 / 2 / 7;
  }
  .pos-mob-1-2-3-3 {
    grid-area: 1 / 2 / 3 / 3;
  }
  .pos-mob-1-2-3-4 {
    grid-area: 1 / 2 / 3 / 4;
  }
  .pos-mob-1-2-3-5 {
    grid-area: 1 / 2 / 3 / 5;
  }
  .pos-mob-1-2-3-6 {
    grid-area: 1 / 2 / 3 / 6;
  }
  .pos-mob-1-2-3-7 {
    grid-area: 1 / 2 / 3 / 7;
  }
  .pos-mob-1-2-4-3 {
    grid-area: 1 / 2 / 4 / 3;
  }
  .pos-mob-1-2-4-4 {
    grid-area: 1 / 2 / 4 / 4;
  }
  .pos-mob-1-2-4-5 {
    grid-area: 1 / 2 / 4 / 5;
  }
  .pos-mob-1-2-4-6 {
    grid-area: 1 / 2 / 4 / 6;
  }
  .pos-mob-1-2-4-7 {
    grid-area: 1 / 2 / 4 / 7;
  }
  .pos-mob-1-2-5-3 {
    grid-area: 1 / 2 / 5 / 3;
  }
  .pos-mob-1-2-5-4 {
    grid-area: 1 / 2 / 5 / 4;
  }
  .pos-mob-1-2-5-5 {
    grid-area: 1 / 2 / 5 / 5;
  }
  .pos-mob-1-2-5-6 {
    grid-area: 1 / 2 / 5 / 6;
  }
  .pos-mob-1-2-5-7 {
    grid-area: 1 / 2 / 5 / 7;
  }
  .pos-mob-1-2-6-3 {
    grid-area: 1 / 2 / 6 / 3;
  }
  .pos-mob-1-2-6-4 {
    grid-area: 1 / 2 / 6 / 4;
  }
  .pos-mob-1-2-6-5 {
    grid-area: 1 / 2 / 6 / 5;
  }
  .pos-mob-1-2-6-6 {
    grid-area: 1 / 2 / 6 / 6;
  }
  .pos-mob-1-2-6-7 {
    grid-area: 1 / 2 / 6 / 7;
  }
  .pos-mob-1-2-7-3 {
    grid-area: 1 / 2 / 7 / 3;
  }
  .pos-mob-1-2-7-4 {
    grid-area: 1 / 2 / 7 / 4;
  }
  .pos-mob-1-2-7-5 {
    grid-area: 1 / 2 / 7 / 5;
  }
  .pos-mob-1-2-7-6 {
    grid-area: 1 / 2 / 7 / 6;
  }
  .pos-mob-1-2-7-7 {
    grid-area: 1 / 2 / 7 / 7;
  }
  .pos-mob-1-3-2-4 {
    grid-area: 1 / 3 / 2 / 4;
  }
  .pos-mob-1-3-2-5 {
    grid-area: 1 / 3 / 2 / 5;
  }
  .pos-mob-1-3-2-6 {
    grid-area: 1 / 3 / 2 / 6;
  }
  .pos-mob-1-3-2-7 {
    grid-area: 1 / 3 / 2 / 7;
  }
  .pos-mob-1-3-3-4 {
    grid-area: 1 / 3 / 3 / 4;
  }
  .pos-mob-1-3-3-5 {
    grid-area: 1 / 3 / 3 / 5;
  }
  .pos-mob-1-3-3-6 {
    grid-area: 1 / 3 / 3 / 6;
  }
  .pos-mob-1-3-3-7 {
    grid-area: 1 / 3 / 3 / 7;
  }
  .pos-mob-1-3-4-4 {
    grid-area: 1 / 3 / 4 / 4;
  }
  .pos-mob-1-3-4-5 {
    grid-area: 1 / 3 / 4 / 5;
  }
  .pos-mob-1-3-4-6 {
    grid-area: 1 / 3 / 4 / 6;
  }
  .pos-mob-1-3-4-7 {
    grid-area: 1 / 3 / 4 / 7;
  }
  .pos-mob-1-3-5-4 {
    grid-area: 1 / 3 / 5 / 4;
  }
  .pos-mob-1-3-5-5 {
    grid-area: 1 / 3 / 5 / 5;
  }
  .pos-mob-1-3-5-6 {
    grid-area: 1 / 3 / 5 / 6;
  }
  .pos-mob-1-3-5-7 {
    grid-area: 1 / 3 / 5 / 7;
  }
  .pos-mob-1-3-6-4 {
    grid-area: 1 / 3 / 6 / 4;
  }
  .pos-mob-1-3-6-5 {
    grid-area: 1 / 3 / 6 / 5;
  }
  .pos-mob-1-3-6-6 {
    grid-area: 1 / 3 / 6 / 6;
  }
  .pos-mob-1-3-6-7 {
    grid-area: 1 / 3 / 6 / 7;
  }
  .pos-mob-1-3-7-4 {
    grid-area: 1 / 3 / 7 / 4;
  }
  .pos-mob-1-3-7-5 {
    grid-area: 1 / 3 / 7 / 5;
  }
  .pos-mob-1-3-7-6 {
    grid-area: 1 / 3 / 7 / 6;
  }
  .pos-mob-1-3-7-7 {
    grid-area: 1 / 3 / 7 / 7;
  }
  .pos-mob-1-4-2-5 {
    grid-area: 1 / 4 / 2 / 5;
  }
  .pos-mob-1-4-2-6 {
    grid-area: 1 / 4 / 2 / 6;
  }
  .pos-mob-1-4-2-7 {
    grid-area: 1 / 4 / 2 / 7;
  }
  .pos-mob-1-4-3-5 {
    grid-area: 1 / 4 / 3 / 5;
  }
  .pos-mob-1-4-3-6 {
    grid-area: 1 / 4 / 3 / 6;
  }
  .pos-mob-1-4-3-7 {
    grid-area: 1 / 4 / 3 / 7;
  }
  .pos-mob-1-4-4-5 {
    grid-area: 1 / 4 / 4 / 5;
  }
  .pos-mob-1-4-4-6 {
    grid-area: 1 / 4 / 4 / 6;
  }
  .pos-mob-1-4-4-7 {
    grid-area: 1 / 4 / 4 / 7;
  }
  .pos-mob-1-4-5-5 {
    grid-area: 1 / 4 / 5 / 5;
  }
  .pos-mob-1-4-5-6 {
    grid-area: 1 / 4 / 5 / 6;
  }
  .pos-mob-1-4-5-7 {
    grid-area: 1 / 4 / 5 / 7;
  }
  .pos-mob-1-4-6-5 {
    grid-area: 1 / 4 / 6 / 5;
  }
  .pos-mob-1-4-6-6 {
    grid-area: 1 / 4 / 6 / 6;
  }
  .pos-mob-1-4-6-7 {
    grid-area: 1 / 4 / 6 / 7;
  }
  .pos-mob-1-4-7-5 {
    grid-area: 1 / 4 / 7 / 5;
  }
  .pos-mob-1-4-7-6 {
    grid-area: 1 / 4 / 7 / 6;
  }
  .pos-mob-1-4-7-7 {
    grid-area: 1 / 4 / 7 / 7;
  }
  .pos-mob-1-5-2-6 {
    grid-area: 1 / 5 / 2 / 6;
  }
  .pos-mob-1-5-2-7 {
    grid-area: 1 / 5 / 2 / 7;
  }
  .pos-mob-1-5-3-6 {
    grid-area: 1 / 5 / 3 / 6;
  }
  .pos-mob-1-5-3-7 {
    grid-area: 1 / 5 / 3 / 7;
  }
  .pos-mob-1-5-4-6 {
    grid-area: 1 / 5 / 4 / 6;
  }
  .pos-mob-1-5-4-7 {
    grid-area: 1 / 5 / 4 / 7;
  }
  .pos-mob-1-5-5-6 {
    grid-area: 1 / 5 / 5 / 6;
  }
  .pos-mob-1-5-5-7 {
    grid-area: 1 / 5 / 5 / 7;
  }
  .pos-mob-1-5-6-6 {
    grid-area: 1 / 5 / 6 / 6;
  }
  .pos-mob-1-5-6-7 {
    grid-area: 1 / 5 / 6 / 7;
  }
  .pos-mob-1-5-7-6 {
    grid-area: 1 / 5 / 7 / 6;
  }
  .pos-mob-1-5-7-7 {
    grid-area: 1 / 5 / 7 / 7;
  }
  .pos-mob-1-6-2-7 {
    grid-area: 1 / 6 / 2 / 7;
  }
  .pos-mob-1-6-3-7 {
    grid-area: 1 / 6 / 3 / 7;
  }
  .pos-mob-1-6-4-7 {
    grid-area: 1 / 6 / 4 / 7;
  }
  .pos-mob-1-6-5-7 {
    grid-area: 1 / 6 / 5 / 7;
  }
  .pos-mob-1-6-6-7 {
    grid-area: 1 / 6 / 6 / 7;
  }
  .pos-mob-1-6-7-7 {
    grid-area: 1 / 6 / 7 / 7;
  }
  .pos-mob-2-1-3-2 {
    grid-area: 2 / 1 / 3 / 2;
  }
  .pos-mob-2-1-3-3 {
    grid-area: 2 / 1 / 3 / 3;
  }
  .pos-mob-2-1-3-4 {
    grid-area: 2 / 1 / 3 / 4;
  }
  .pos-mob-2-1-3-5 {
    grid-area: 2 / 1 / 3 / 5;
  }
  .pos-mob-2-1-3-6 {
    grid-area: 2 / 1 / 3 / 6;
  }
  .pos-mob-2-1-3-7 {
    grid-area: 2 / 1 / 3 / 7;
  }
  .pos-mob-2-1-4-2 {
    grid-area: 2 / 1 / 4 / 2;
  }
  .pos-mob-2-1-4-3 {
    grid-area: 2 / 1 / 4 / 3;
  }
  .pos-mob-2-1-4-4 {
    grid-area: 2 / 1 / 4 / 4;
  }
  .pos-mob-2-1-4-5 {
    grid-area: 2 / 1 / 4 / 5;
  }
  .pos-mob-2-1-4-6 {
    grid-area: 2 / 1 / 4 / 6;
  }
  .pos-mob-2-1-4-7 {
    grid-area: 2 / 1 / 4 / 7;
  }
  .pos-mob-2-1-5-2 {
    grid-area: 2 / 1 / 5 / 2;
  }
  .pos-mob-2-1-5-3 {
    grid-area: 2 / 1 / 5 / 3;
  }
  .pos-mob-2-1-5-4 {
    grid-area: 2 / 1 / 5 / 4;
  }
  .pos-mob-2-1-5-5 {
    grid-area: 2 / 1 / 5 / 5;
  }
  .pos-mob-2-1-5-6 {
    grid-area: 2 / 1 / 5 / 6;
  }
  .pos-mob-2-1-5-7 {
    grid-area: 2 / 1 / 5 / 7;
  }
  .pos-mob-2-1-6-2 {
    grid-area: 2 / 1 / 6 / 2;
  }
  .pos-mob-2-1-6-3 {
    grid-area: 2 / 1 / 6 / 3;
  }
  .pos-mob-2-1-6-4 {
    grid-area: 2 / 1 / 6 / 4;
  }
  .pos-mob-2-1-6-5 {
    grid-area: 2 / 1 / 6 / 5;
  }
  .pos-mob-2-1-6-6 {
    grid-area: 2 / 1 / 6 / 6;
  }
  .pos-mob-2-1-6-7 {
    grid-area: 2 / 1 / 6 / 7;
  }
  .pos-mob-2-1-7-2 {
    grid-area: 2 / 1 / 7 / 2;
  }
  .pos-mob-2-1-7-3 {
    grid-area: 2 / 1 / 7 / 3;
  }
  .pos-mob-2-1-7-4 {
    grid-area: 2 / 1 / 7 / 4;
  }
  .pos-mob-2-1-7-5 {
    grid-area: 2 / 1 / 7 / 5;
  }
  .pos-mob-2-1-7-6 {
    grid-area: 2 / 1 / 7 / 6;
  }
  .pos-mob-2-1-7-7 {
    grid-area: 2 / 1 / 7 / 7;
  }
  .pos-mob-2-2-3-3 {
    grid-area: 2 / 2 / 3 / 3;
  }
  .pos-mob-2-2-3-4 {
    grid-area: 2 / 2 / 3 / 4;
  }
  .pos-mob-2-2-3-5 {
    grid-area: 2 / 2 / 3 / 5;
  }
  .pos-mob-2-2-3-6 {
    grid-area: 2 / 2 / 3 / 6;
  }
  .pos-mob-2-2-3-7 {
    grid-area: 2 / 2 / 3 / 7;
  }
  .pos-mob-2-2-4-3 {
    grid-area: 2 / 2 / 4 / 3;
  }
  .pos-mob-2-2-4-4 {
    grid-area: 2 / 2 / 4 / 4;
  }
  .pos-mob-2-2-4-5 {
    grid-area: 2 / 2 / 4 / 5;
  }
  .pos-mob-2-2-4-6 {
    grid-area: 2 / 2 / 4 / 6;
  }
  .pos-mob-2-2-4-7 {
    grid-area: 2 / 2 / 4 / 7;
  }
  .pos-mob-2-2-5-3 {
    grid-area: 2 / 2 / 5 / 3;
  }
  .pos-mob-2-2-5-4 {
    grid-area: 2 / 2 / 5 / 4;
  }
  .pos-mob-2-2-5-5 {
    grid-area: 2 / 2 / 5 / 5;
  }
  .pos-mob-2-2-5-6 {
    grid-area: 2 / 2 / 5 / 6;
  }
  .pos-mob-2-2-5-7 {
    grid-area: 2 / 2 / 5 / 7;
  }
  .pos-mob-2-2-6-3 {
    grid-area: 2 / 2 / 6 / 3;
  }
  .pos-mob-2-2-6-4 {
    grid-area: 2 / 2 / 6 / 4;
  }
  .pos-mob-2-2-6-5 {
    grid-area: 2 / 2 / 6 / 5;
  }
  .pos-mob-2-2-6-6 {
    grid-area: 2 / 2 / 6 / 6;
  }
  .pos-mob-2-2-6-7 {
    grid-area: 2 / 2 / 6 / 7;
  }
  .pos-mob-2-2-7-3 {
    grid-area: 2 / 2 / 7 / 3;
  }
  .pos-mob-2-2-7-4 {
    grid-area: 2 / 2 / 7 / 4;
  }
  .pos-mob-2-2-7-5 {
    grid-area: 2 / 2 / 7 / 5;
  }
  .pos-mob-2-2-7-6 {
    grid-area: 2 / 2 / 7 / 6;
  }
  .pos-mob-2-2-7-7 {
    grid-area: 2 / 2 / 7 / 7;
  }
  .pos-mob-2-3-3-4 {
    grid-area: 2 / 3 / 3 / 4;
  }
  .pos-mob-2-3-3-5 {
    grid-area: 2 / 3 / 3 / 5;
  }
  .pos-mob-2-3-3-6 {
    grid-area: 2 / 3 / 3 / 6;
  }
  .pos-mob-2-3-3-7 {
    grid-area: 2 / 3 / 3 / 7;
  }
  .pos-mob-2-3-4-4 {
    grid-area: 2 / 3 / 4 / 4;
  }
  .pos-mob-2-3-4-5 {
    grid-area: 2 / 3 / 4 / 5;
  }
  .pos-mob-2-3-4-6 {
    grid-area: 2 / 3 / 4 / 6;
  }
  .pos-mob-2-3-4-7 {
    grid-area: 2 / 3 / 4 / 7;
  }
  .pos-mob-2-3-5-4 {
    grid-area: 2 / 3 / 5 / 4;
  }
  .pos-mob-2-3-5-5 {
    grid-area: 2 / 3 / 5 / 5;
  }
  .pos-mob-2-3-5-6 {
    grid-area: 2 / 3 / 5 / 6;
  }
  .pos-mob-2-3-5-7 {
    grid-area: 2 / 3 / 5 / 7;
  }
  .pos-mob-2-3-6-4 {
    grid-area: 2 / 3 / 6 / 4;
  }
  .pos-mob-2-3-6-5 {
    grid-area: 2 / 3 / 6 / 5;
  }
  .pos-mob-2-3-6-6 {
    grid-area: 2 / 3 / 6 / 6;
  }
  .pos-mob-2-3-6-7 {
    grid-area: 2 / 3 / 6 / 7;
  }
  .pos-mob-2-3-7-4 {
    grid-area: 2 / 3 / 7 / 4;
  }
  .pos-mob-2-3-7-5 {
    grid-area: 2 / 3 / 7 / 5;
  }
  .pos-mob-2-3-7-6 {
    grid-area: 2 / 3 / 7 / 6;
  }
  .pos-mob-2-3-7-7 {
    grid-area: 2 / 3 / 7 / 7;
  }
  .pos-mob-2-4-3-5 {
    grid-area: 2 / 4 / 3 / 5;
  }
  .pos-mob-2-4-3-6 {
    grid-area: 2 / 4 / 3 / 6;
  }
  .pos-mob-2-4-3-7 {
    grid-area: 2 / 4 / 3 / 7;
  }
  .pos-mob-2-4-4-5 {
    grid-area: 2 / 4 / 4 / 5;
  }
  .pos-mob-2-4-4-6 {
    grid-area: 2 / 4 / 4 / 6;
  }
  .pos-mob-2-4-4-7 {
    grid-area: 2 / 4 / 4 / 7;
  }
  .pos-mob-2-4-5-5 {
    grid-area: 2 / 4 / 5 / 5;
  }
  .pos-mob-2-4-5-6 {
    grid-area: 2 / 4 / 5 / 6;
  }
  .pos-mob-2-4-5-7 {
    grid-area: 2 / 4 / 5 / 7;
  }
  .pos-mob-2-4-6-5 {
    grid-area: 2 / 4 / 6 / 5;
  }
  .pos-mob-2-4-6-6 {
    grid-area: 2 / 4 / 6 / 6;
  }
  .pos-mob-2-4-6-7 {
    grid-area: 2 / 4 / 6 / 7;
  }
  .pos-mob-2-4-7-5 {
    grid-area: 2 / 4 / 7 / 5;
  }
  .pos-mob-2-4-7-6 {
    grid-area: 2 / 4 / 7 / 6;
  }
  .pos-mob-2-4-7-7 {
    grid-area: 2 / 4 / 7 / 7;
  }
  .pos-mob-2-5-3-6 {
    grid-area: 2 / 5 / 3 / 6;
  }
  .pos-mob-2-5-3-7 {
    grid-area: 2 / 5 / 3 / 7;
  }
  .pos-mob-2-5-4-6 {
    grid-area: 2 / 5 / 4 / 6;
  }
  .pos-mob-2-5-4-7 {
    grid-area: 2 / 5 / 4 / 7;
  }
  .pos-mob-2-5-5-6 {
    grid-area: 2 / 5 / 5 / 6;
  }
  .pos-mob-2-5-5-7 {
    grid-area: 2 / 5 / 5 / 7;
  }
  .pos-mob-2-5-6-6 {
    grid-area: 2 / 5 / 6 / 6;
  }
  .pos-mob-2-5-6-7 {
    grid-area: 2 / 5 / 6 / 7;
  }
  .pos-mob-2-5-7-6 {
    grid-area: 2 / 5 / 7 / 6;
  }
  .pos-mob-2-5-7-7 {
    grid-area: 2 / 5 / 7 / 7;
  }
  .pos-mob-2-6-3-7 {
    grid-area: 2 / 6 / 3 / 7;
  }
  .pos-mob-2-6-4-7 {
    grid-area: 2 / 6 / 4 / 7;
  }
  .pos-mob-2-6-5-7 {
    grid-area: 2 / 6 / 5 / 7;
  }
  .pos-mob-2-6-6-7 {
    grid-area: 2 / 6 / 6 / 7;
  }
  .pos-mob-2-6-7-7 {
    grid-area: 2 / 6 / 7 / 7;
  }
  .pos-mob-3-1-4-2 {
    grid-area: 3 / 1 / 4 / 2;
  }
  .pos-mob-3-1-4-3 {
    grid-area: 3 / 1 / 4 / 3;
  }
  .pos-mob-3-1-4-4 {
    grid-area: 3 / 1 / 4 / 4;
  }
  .pos-mob-3-1-4-5 {
    grid-area: 3 / 1 / 4 / 5;
  }
  .pos-mob-3-1-4-6 {
    grid-area: 3 / 1 / 4 / 6;
  }
  .pos-mob-3-1-4-7 {
    grid-area: 3 / 1 / 4 / 7;
  }
  .pos-mob-3-1-5-2 {
    grid-area: 3 / 1 / 5 / 2;
  }
  .pos-mob-3-1-5-3 {
    grid-area: 3 / 1 / 5 / 3;
  }
  .pos-mob-3-1-5-4 {
    grid-area: 3 / 1 / 5 / 4;
  }
  .pos-mob-3-1-5-5 {
    grid-area: 3 / 1 / 5 / 5;
  }
  .pos-mob-3-1-5-6 {
    grid-area: 3 / 1 / 5 / 6;
  }
  .pos-mob-3-1-5-7 {
    grid-area: 3 / 1 / 5 / 7;
  }
  .pos-mob-3-1-6-2 {
    grid-area: 3 / 1 / 6 / 2;
  }
  .pos-mob-3-1-6-3 {
    grid-area: 3 / 1 / 6 / 3;
  }
  .pos-mob-3-1-6-4 {
    grid-area: 3 / 1 / 6 / 4;
  }
  .pos-mob-3-1-6-5 {
    grid-area: 3 / 1 / 6 / 5;
  }
  .pos-mob-3-1-6-6 {
    grid-area: 3 / 1 / 6 / 6;
  }
  .pos-mob-3-1-6-7 {
    grid-area: 3 / 1 / 6 / 7;
  }
  .pos-mob-3-1-7-2 {
    grid-area: 3 / 1 / 7 / 2;
  }
  .pos-mob-3-1-7-3 {
    grid-area: 3 / 1 / 7 / 3;
  }
  .pos-mob-3-1-7-4 {
    grid-area: 3 / 1 / 7 / 4;
  }
  .pos-mob-3-1-7-5 {
    grid-area: 3 / 1 / 7 / 5;
  }
  .pos-mob-3-1-7-6 {
    grid-area: 3 / 1 / 7 / 6;
  }
  .pos-mob-3-1-7-7 {
    grid-area: 3 / 1 / 7 / 7;
  }
  .pos-mob-3-2-4-3 {
    grid-area: 3 / 2 / 4 / 3;
  }
  .pos-mob-3-2-4-4 {
    grid-area: 3 / 2 / 4 / 4;
  }
  .pos-mob-3-2-4-5 {
    grid-area: 3 / 2 / 4 / 5;
  }
  .pos-mob-3-2-4-6 {
    grid-area: 3 / 2 / 4 / 6;
  }
  .pos-mob-3-2-4-7 {
    grid-area: 3 / 2 / 4 / 7;
  }
  .pos-mob-3-2-5-3 {
    grid-area: 3 / 2 / 5 / 3;
  }
  .pos-mob-3-2-5-4 {
    grid-area: 3 / 2 / 5 / 4;
  }
  .pos-mob-3-2-5-5 {
    grid-area: 3 / 2 / 5 / 5;
  }
  .pos-mob-3-2-5-6 {
    grid-area: 3 / 2 / 5 / 6;
  }
  .pos-mob-3-2-5-7 {
    grid-area: 3 / 2 / 5 / 7;
  }
  .pos-mob-3-2-6-3 {
    grid-area: 3 / 2 / 6 / 3;
  }
  .pos-mob-3-2-6-4 {
    grid-area: 3 / 2 / 6 / 4;
  }
  .pos-mob-3-2-6-5 {
    grid-area: 3 / 2 / 6 / 5;
  }
  .pos-mob-3-2-6-6 {
    grid-area: 3 / 2 / 6 / 6;
  }
  .pos-mob-3-2-6-7 {
    grid-area: 3 / 2 / 6 / 7;
  }
  .pos-mob-3-2-7-3 {
    grid-area: 3 / 2 / 7 / 3;
  }
  .pos-mob-3-2-7-4 {
    grid-area: 3 / 2 / 7 / 4;
  }
  .pos-mob-3-2-7-5 {
    grid-area: 3 / 2 / 7 / 5;
  }
  .pos-mob-3-2-7-6 {
    grid-area: 3 / 2 / 7 / 6;
  }
  .pos-mob-3-2-7-7 {
    grid-area: 3 / 2 / 7 / 7;
  }
  .pos-mob-3-3-4-4 {
    grid-area: 3 / 3 / 4 / 4;
  }
  .pos-mob-3-3-4-5 {
    grid-area: 3 / 3 / 4 / 5;
  }
  .pos-mob-3-3-4-6 {
    grid-area: 3 / 3 / 4 / 6;
  }
  .pos-mob-3-3-4-7 {
    grid-area: 3 / 3 / 4 / 7;
  }
  .pos-mob-3-3-5-4 {
    grid-area: 3 / 3 / 5 / 4;
  }
  .pos-mob-3-3-5-5 {
    grid-area: 3 / 3 / 5 / 5;
  }
  .pos-mob-3-3-5-6 {
    grid-area: 3 / 3 / 5 / 6;
  }
  .pos-mob-3-3-5-7 {
    grid-area: 3 / 3 / 5 / 7;
  }
  .pos-mob-3-3-6-4 {
    grid-area: 3 / 3 / 6 / 4;
  }
  .pos-mob-3-3-6-5 {
    grid-area: 3 / 3 / 6 / 5;
  }
  .pos-mob-3-3-6-6 {
    grid-area: 3 / 3 / 6 / 6;
  }
  .pos-mob-3-3-6-7 {
    grid-area: 3 / 3 / 6 / 7;
  }
  .pos-mob-3-3-7-4 {
    grid-area: 3 / 3 / 7 / 4;
  }
  .pos-mob-3-3-7-5 {
    grid-area: 3 / 3 / 7 / 5;
  }
  .pos-mob-3-3-7-6 {
    grid-area: 3 / 3 / 7 / 6;
  }
  .pos-mob-3-3-7-7 {
    grid-area: 3 / 3 / 7 / 7;
  }
  .pos-mob-3-4-4-5 {
    grid-area: 3 / 4 / 4 / 5;
  }
  .pos-mob-3-4-4-6 {
    grid-area: 3 / 4 / 4 / 6;
  }
  .pos-mob-3-4-4-7 {
    grid-area: 3 / 4 / 4 / 7;
  }
  .pos-mob-3-4-5-5 {
    grid-area: 3 / 4 / 5 / 5;
  }
  .pos-mob-3-4-5-6 {
    grid-area: 3 / 4 / 5 / 6;
  }
  .pos-mob-3-4-5-7 {
    grid-area: 3 / 4 / 5 / 7;
  }
  .pos-mob-3-4-6-5 {
    grid-area: 3 / 4 / 6 / 5;
  }
  .pos-mob-3-4-6-6 {
    grid-area: 3 / 4 / 6 / 6;
  }
  .pos-mob-3-4-6-7 {
    grid-area: 3 / 4 / 6 / 7;
  }
  .pos-mob-3-4-7-5 {
    grid-area: 3 / 4 / 7 / 5;
  }
  .pos-mob-3-4-7-6 {
    grid-area: 3 / 4 / 7 / 6;
  }
  .pos-mob-3-4-7-7 {
    grid-area: 3 / 4 / 7 / 7;
  }
  .pos-mob-3-5-4-6 {
    grid-area: 3 / 5 / 4 / 6;
  }
  .pos-mob-3-5-4-7 {
    grid-area: 3 / 5 / 4 / 7;
  }
  .pos-mob-3-5-5-6 {
    grid-area: 3 / 5 / 5 / 6;
  }
  .pos-mob-3-5-5-7 {
    grid-area: 3 / 5 / 5 / 7;
  }
  .pos-mob-3-5-6-6 {
    grid-area: 3 / 5 / 6 / 6;
  }
  .pos-mob-3-5-6-7 {
    grid-area: 3 / 5 / 6 / 7;
  }
  .pos-mob-3-5-7-6 {
    grid-area: 3 / 5 / 7 / 6;
  }
  .pos-mob-3-5-7-7 {
    grid-area: 3 / 5 / 7 / 7;
  }
  .pos-mob-3-6-4-7 {
    grid-area: 3 / 6 / 4 / 7;
  }
  .pos-mob-3-6-5-7 {
    grid-area: 3 / 6 / 5 / 7;
  }
  .pos-mob-3-6-6-7 {
    grid-area: 3 / 6 / 6 / 7;
  }
  .pos-mob-3-6-7-7 {
    grid-area: 3 / 6 / 7 / 7;
  }
  .pos-mob-4-1-5-2 {
    grid-area: 4 / 1 / 5 / 2;
  }
  .pos-mob-4-1-5-3 {
    grid-area: 4 / 1 / 5 / 3;
  }
  .pos-mob-4-1-5-4 {
    grid-area: 4 / 1 / 5 / 4;
  }
  .pos-mob-4-1-5-5 {
    grid-area: 4 / 1 / 5 / 5;
  }
  .pos-mob-4-1-5-6 {
    grid-area: 4 / 1 / 5 / 6;
  }
  .pos-mob-4-1-5-7 {
    grid-area: 4 / 1 / 5 / 7;
  }
  .pos-mob-4-1-6-2 {
    grid-area: 4 / 1 / 6 / 2;
  }
  .pos-mob-4-1-6-3 {
    grid-area: 4 / 1 / 6 / 3;
  }
  .pos-mob-4-1-6-4 {
    grid-area: 4 / 1 / 6 / 4;
  }
  .pos-mob-4-1-6-5 {
    grid-area: 4 / 1 / 6 / 5;
  }
  .pos-mob-4-1-6-6 {
    grid-area: 4 / 1 / 6 / 6;
  }
  .pos-mob-4-1-6-7 {
    grid-area: 4 / 1 / 6 / 7;
  }
  .pos-mob-4-1-7-2 {
    grid-area: 4 / 1 / 7 / 2;
  }
  .pos-mob-4-1-7-3 {
    grid-area: 4 / 1 / 7 / 3;
  }
  .pos-mob-4-1-7-4 {
    grid-area: 4 / 1 / 7 / 4;
  }
  .pos-mob-4-1-7-5 {
    grid-area: 4 / 1 / 7 / 5;
  }
  .pos-mob-4-1-7-6 {
    grid-area: 4 / 1 / 7 / 6;
  }
  .pos-mob-4-1-7-7 {
    grid-area: 4 / 1 / 7 / 7;
  }
  .pos-mob-4-2-5-3 {
    grid-area: 4 / 2 / 5 / 3;
  }
  .pos-mob-4-2-5-4 {
    grid-area: 4 / 2 / 5 / 4;
  }
  .pos-mob-4-2-5-5 {
    grid-area: 4 / 2 / 5 / 5;
  }
  .pos-mob-4-2-5-6 {
    grid-area: 4 / 2 / 5 / 6;
  }
  .pos-mob-4-2-5-7 {
    grid-area: 4 / 2 / 5 / 7;
  }
  .pos-mob-4-2-6-3 {
    grid-area: 4 / 2 / 6 / 3;
  }
  .pos-mob-4-2-6-4 {
    grid-area: 4 / 2 / 6 / 4;
  }
  .pos-mob-4-2-6-5 {
    grid-area: 4 / 2 / 6 / 5;
  }
  .pos-mob-4-2-6-6 {
    grid-area: 4 / 2 / 6 / 6;
  }
  .pos-mob-4-2-6-7 {
    grid-area: 4 / 2 / 6 / 7;
  }
  .pos-mob-4-2-7-3 {
    grid-area: 4 / 2 / 7 / 3;
  }
  .pos-mob-4-2-7-4 {
    grid-area: 4 / 2 / 7 / 4;
  }
  .pos-mob-4-2-7-5 {
    grid-area: 4 / 2 / 7 / 5;
  }
  .pos-mob-4-2-7-6 {
    grid-area: 4 / 2 / 7 / 6;
  }
  .pos-mob-4-2-7-7 {
    grid-area: 4 / 2 / 7 / 7;
  }
  .pos-mob-4-3-5-4 {
    grid-area: 4 / 3 / 5 / 4;
  }
  .pos-mob-4-3-5-5 {
    grid-area: 4 / 3 / 5 / 5;
  }
  .pos-mob-4-3-5-6 {
    grid-area: 4 / 3 / 5 / 6;
  }
  .pos-mob-4-3-5-7 {
    grid-area: 4 / 3 / 5 / 7;
  }
  .pos-mob-4-3-6-4 {
    grid-area: 4 / 3 / 6 / 4;
  }
  .pos-mob-4-3-6-5 {
    grid-area: 4 / 3 / 6 / 5;
  }
  .pos-mob-4-3-6-6 {
    grid-area: 4 / 3 / 6 / 6;
  }
  .pos-mob-4-3-6-7 {
    grid-area: 4 / 3 / 6 / 7;
  }
  .pos-mob-4-3-7-4 {
    grid-area: 4 / 3 / 7 / 4;
  }
  .pos-mob-4-3-7-5 {
    grid-area: 4 / 3 / 7 / 5;
  }
  .pos-mob-4-3-7-6 {
    grid-area: 4 / 3 / 7 / 6;
  }
  .pos-mob-4-3-7-7 {
    grid-area: 4 / 3 / 7 / 7;
  }
  .pos-mob-4-4-5-5 {
    grid-area: 4 / 4 / 5 / 5;
  }
  .pos-mob-4-4-5-6 {
    grid-area: 4 / 4 / 5 / 6;
  }
  .pos-mob-4-4-5-7 {
    grid-area: 4 / 4 / 5 / 7;
  }
  .pos-mob-4-4-6-5 {
    grid-area: 4 / 4 / 6 / 5;
  }
  .pos-mob-4-4-6-6 {
    grid-area: 4 / 4 / 6 / 6;
  }
  .pos-mob-4-4-6-7 {
    grid-area: 4 / 4 / 6 / 7;
  }
  .pos-mob-4-4-7-5 {
    grid-area: 4 / 4 / 7 / 5;
  }
  .pos-mob-4-4-7-6 {
    grid-area: 4 / 4 / 7 / 6;
  }
  .pos-mob-4-4-7-7 {
    grid-area: 4 / 4 / 7 / 7;
  }
  .pos-mob-4-5-5-6 {
    grid-area: 4 / 5 / 5 / 6;
  }
  .pos-mob-4-5-5-7 {
    grid-area: 4 / 5 / 5 / 7;
  }
  .pos-mob-4-5-6-6 {
    grid-area: 4 / 5 / 6 / 6;
  }
  .pos-mob-4-5-6-7 {
    grid-area: 4 / 5 / 6 / 7;
  }
  .pos-mob-4-5-7-6 {
    grid-area: 4 / 5 / 7 / 6;
  }
  .pos-mob-4-5-7-7 {
    grid-area: 4 / 5 / 7 / 7;
  }
  .pos-mob-4-6-5-7 {
    grid-area: 4 / 6 / 5 / 7;
  }
  .pos-mob-4-6-6-7 {
    grid-area: 4 / 6 / 6 / 7;
  }
  .pos-mob-4-6-7-7 {
    grid-area: 4 / 6 / 7 / 7;
  }
  .pos-mob-5-1-6-2 {
    grid-area: 5 / 1 / 6 / 2;
  }
  .pos-mob-5-1-6-3 {
    grid-area: 5 / 1 / 6 / 3;
  }
  .pos-mob-5-1-6-4 {
    grid-area: 5 / 1 / 6 / 4;
  }
  .pos-mob-5-1-6-5 {
    grid-area: 5 / 1 / 6 / 5;
  }
  .pos-mob-5-1-6-6 {
    grid-area: 5 / 1 / 6 / 6;
  }
  .pos-mob-5-1-6-7 {
    grid-area: 5 / 1 / 6 / 7;
  }
  .pos-mob-5-1-7-2 {
    grid-area: 5 / 1 / 7 / 2;
  }
  .pos-mob-5-1-7-3 {
    grid-area: 5 / 1 / 7 / 3;
  }
  .pos-mob-5-1-7-4 {
    grid-area: 5 / 1 / 7 / 4;
  }
  .pos-mob-5-1-7-5 {
    grid-area: 5 / 1 / 7 / 5;
  }
  .pos-mob-5-1-7-6 {
    grid-area: 5 / 1 / 7 / 6;
  }
  .pos-mob-5-1-7-7 {
    grid-area: 5 / 1 / 7 / 7;
  }
  .pos-mob-5-2-6-3 {
    grid-area: 5 / 2 / 6 / 3;
  }
  .pos-mob-5-2-6-4 {
    grid-area: 5 / 2 / 6 / 4;
  }
  .pos-mob-5-2-6-5 {
    grid-area: 5 / 2 / 6 / 5;
  }
  .pos-mob-5-2-6-6 {
    grid-area: 5 / 2 / 6 / 6;
  }
  .pos-mob-5-2-6-7 {
    grid-area: 5 / 2 / 6 / 7;
  }
  .pos-mob-5-2-7-3 {
    grid-area: 5 / 2 / 7 / 3;
  }
  .pos-mob-5-2-7-4 {
    grid-area: 5 / 2 / 7 / 4;
  }
  .pos-mob-5-2-7-5 {
    grid-area: 5 / 2 / 7 / 5;
  }
  .pos-mob-5-2-7-6 {
    grid-area: 5 / 2 / 7 / 6;
  }
  .pos-mob-5-2-7-7 {
    grid-area: 5 / 2 / 7 / 7;
  }
  .pos-mob-5-3-6-4 {
    grid-area: 5 / 3 / 6 / 4;
  }
  .pos-mob-5-3-6-5 {
    grid-area: 5 / 3 / 6 / 5;
  }
  .pos-mob-5-3-6-6 {
    grid-area: 5 / 3 / 6 / 6;
  }
  .pos-mob-5-3-6-7 {
    grid-area: 5 / 3 / 6 / 7;
  }
  .pos-mob-5-3-7-4 {
    grid-area: 5 / 3 / 7 / 4;
  }
  .pos-mob-5-3-7-5 {
    grid-area: 5 / 3 / 7 / 5;
  }
  .pos-mob-5-3-7-6 {
    grid-area: 5 / 3 / 7 / 6;
  }
  .pos-mob-5-3-7-7 {
    grid-area: 5 / 3 / 7 / 7;
  }
  .pos-mob-5-4-6-5 {
    grid-area: 5 / 4 / 6 / 5;
  }
  .pos-mob-5-4-6-6 {
    grid-area: 5 / 4 / 6 / 6;
  }
  .pos-mob-5-4-6-7 {
    grid-area: 5 / 4 / 6 / 7;
  }
  .pos-mob-5-4-7-5 {
    grid-area: 5 / 4 / 7 / 5;
  }
  .pos-mob-5-4-7-6 {
    grid-area: 5 / 4 / 7 / 6;
  }
  .pos-mob-5-4-7-7 {
    grid-area: 5 / 4 / 7 / 7;
  }
  .pos-mob-5-5-6-6 {
    grid-area: 5 / 5 / 6 / 6;
  }
  .pos-mob-5-5-6-7 {
    grid-area: 5 / 5 / 6 / 7;
  }
  .pos-mob-5-5-7-6 {
    grid-area: 5 / 5 / 7 / 6;
  }
  .pos-mob-5-5-7-7 {
    grid-area: 5 / 5 / 7 / 7;
  }
  .pos-mob-5-6-6-7 {
    grid-area: 5 / 6 / 6 / 7;
  }
  .pos-mob-5-6-7-7 {
    grid-area: 5 / 6 / 7 / 7;
  }
  .pos-mob-6-1-7-2 {
    grid-area: 6 / 1 / 7 / 2;
  }
  .pos-mob-6-1-7-3 {
    grid-area: 6 / 1 / 7 / 3;
  }
  .pos-mob-6-1-7-4 {
    grid-area: 6 / 1 / 7 / 4;
  }
  .pos-mob-6-1-7-5 {
    grid-area: 6 / 1 / 7 / 5;
  }
  .pos-mob-6-1-7-6 {
    grid-area: 6 / 1 / 7 / 6;
  }
  .pos-mob-6-1-7-7 {
    grid-area: 6 / 1 / 7 / 7;
  }
  .pos-mob-6-2-7-3 {
    grid-area: 6 / 2 / 7 / 3;
  }
  .pos-mob-6-2-7-4 {
    grid-area: 6 / 2 / 7 / 4;
  }
  .pos-mob-6-2-7-5 {
    grid-area: 6 / 2 / 7 / 5;
  }
  .pos-mob-6-2-7-6 {
    grid-area: 6 / 2 / 7 / 6;
  }
  .pos-mob-6-2-7-7 {
    grid-area: 6 / 2 / 7 / 7;
  }
  .pos-mob-6-3-7-4 {
    grid-area: 6 / 3 / 7 / 4;
  }
  .pos-mob-6-3-7-5 {
    grid-area: 6 / 3 / 7 / 5;
  }
  .pos-mob-6-3-7-6 {
    grid-area: 6 / 3 / 7 / 6;
  }
  .pos-mob-6-3-7-7 {
    grid-area: 6 / 3 / 7 / 7;
  }
  .pos-mob-6-4-7-5 {
    grid-area: 6 / 4 / 7 / 5;
  }
  .pos-mob-6-4-7-6 {
    grid-area: 6 / 4 / 7 / 6;
  }
  .pos-mob-6-4-7-7 {
    grid-area: 6 / 4 / 7 / 7;
  }
  .pos-mob-6-5-7-6 {
    grid-area: 6 / 5 / 7 / 6;
  }
  .pos-mob-6-5-7-7 {
    grid-area: 6 / 5 / 7 / 7;
  }
  .pos-mob-6-6-7-7 {
    grid-area: 6 / 6 / 7 / 7;
  }
}
/* ============================================================
   Estilos de la Rejilla y Playground
============================================================= */
.legoPlayground {
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-template-rows: repeat(6, auto);
  gap: 21px;
  align-items: stretch;
}

/* ============================================================
   Bloque Lego (.legoBlock) para Desktop (varX)
   Se aplican SOLO en pantallas mayores a 768px.
============================================================= */
@media (min-width: 769px) {
  .legoPlayground .legoBlock {
    padding: 1.5em;
    border-radius: 21px;
    position: relative;
    z-index: 1;
    align-content: center;
    /* Pseudo-elementos base */
    /* ------------------------------
       Variantes Completas (varA – varL)
    ------------------------------ */
    /* ------------------------------
       Variantes Parciales (varSA, varSB, varSC, varSD)
    ------------------------------ */
  }
  .legoPlayground .legoBlock::before, .legoPlayground .legoBlock::after {
    display: block;
    content: "";
    position: absolute;
    background-color: inherit;
    z-index: -1;
  }
  .legoPlayground .legoBlock.varA {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -21.5px;
  }
  .legoPlayground .legoBlock.varA::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    top: -21px;
    left: 0;
  }
  .legoPlayground .legoBlock.varA::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    top: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.varB {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -21.5px;
  }
  .legoPlayground .legoBlock.varB::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    top: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.varB::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    right: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.varC {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -21.5px;
  }
  .legoPlayground .legoBlock.varC::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    bottom: -21px;
    left: 0;
  }
  .legoPlayground .legoBlock.varC::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    bottom: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.varD {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -21.5px;
  }
  .legoPlayground .legoBlock.varD::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    bottom: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.varD::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    right: 0;
    bottom: -21px;
  }
  .legoPlayground .legoBlock.varE {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -21.5px;
  }
  .legoPlayground .legoBlock.varE::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    top: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.varE::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    top: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.varF {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -21.5px;
  }
  .legoPlayground .legoBlock.varF::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    left: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.varF::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    left: 0;
    bottom: -21px;
  }
  .legoPlayground .legoBlock.varG {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -21.5px;
  }
  .legoPlayground .legoBlock.varG::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    right: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.varG::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    right: 0;
    bottom: -21px;
  }
  .legoPlayground .legoBlock.varH {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -21.5px;
  }
  .legoPlayground .legoBlock.varH::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    bottom: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.varH::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    bottom: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.varI {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -21.5px;
  }
  .legoPlayground .legoBlock.varI::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    right: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.varI::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    bottom: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.varJ {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -21.5px;
  }
  .legoPlayground .legoBlock.varJ::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    left: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.varJ::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    bottom: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.varK {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -21.5px;
  }
  .legoPlayground .legoBlock.varK::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    top: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.varK::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    right: 0;
    bottom: -21px;
  }
  .legoPlayground .legoBlock.varL {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -21.5px;
  }
  .legoPlayground .legoBlock.varL::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    top: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.varL::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    left: 0;
    bottom: -21px;
  }
  .legoPlayground .legoBlock.varSA {
    border-bottom-left-radius: 0;
    margin-bottom: -10.75px;
  }
  .legoPlayground .legoBlock.varSA::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    bottom: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.varSB {
    border-top-right-radius: 0;
    margin-top: -10.75px;
  }
  .legoPlayground .legoBlock.varSB::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    top: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.varSC {
    border-bottom-left-radius: 0;
    margin-left: -10.75px;
  }
  .legoPlayground .legoBlock.varSC::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    left: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.varSD {
    border-top-right-radius: 0;
    margin-right: -10.75px;
  }
  .legoPlayground .legoBlock.varSD::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    right: 0;
    top: -21px;
  }
}
/* ============================================================
   Bloque Lego (.legoBlock) para Mobile (mobX)
   Se aplican SOLO en pantallas menores o iguales a 768px.
============================================================= */
@media (max-width: 768px) {
  .legoPlayground .legoBlock {
    padding: 1.5em;
    border-radius: 21px;
    position: relative;
    z-index: 1;
    align-content: center;
    /* Pseudo-elementos base */
    /* Variantes Parciales Mobile */
  }
  .legoPlayground .legoBlock::before, .legoPlayground .legoBlock::after {
    display: block;
    content: "";
    position: absolute;
    background-color: inherit;
    z-index: -1;
  }
  .legoPlayground .legoBlock.mobA {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -21.5px;
  }
  .legoPlayground .legoBlock.mobA::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    top: -21px;
    left: 0;
  }
  .legoPlayground .legoBlock.mobA::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    top: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.mobB {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -21.5px;
  }
  .legoPlayground .legoBlock.mobB::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    top: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.mobB::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    right: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.mobC {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -21.5px;
  }
  .legoPlayground .legoBlock.mobC::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    bottom: -21px;
    left: 0;
  }
  .legoPlayground .legoBlock.mobC::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    bottom: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.mobD {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -21.5px;
  }
  .legoPlayground .legoBlock.mobD::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    bottom: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.mobD::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    right: 0;
    bottom: -21px;
  }
  .legoPlayground .legoBlock.mobE {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -21.5px;
  }
  .legoPlayground .legoBlock.mobE::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    top: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.mobE::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    top: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.mobF {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -21.5px;
  }
  .legoPlayground .legoBlock.mobF::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    left: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.mobF::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    left: 0;
    bottom: -21px;
  }
  .legoPlayground .legoBlock.mobG {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -21.5px;
  }
  .legoPlayground .legoBlock.mobG::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    right: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.mobG::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    right: 0;
    bottom: -21px;
  }
  .legoPlayground .legoBlock.mobH {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -21.5px;
  }
  .legoPlayground .legoBlock.mobH::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    bottom: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.mobH::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    bottom: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.mobI {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -21.5px;
  }
  .legoPlayground .legoBlock.mobI::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    right: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.mobI::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    bottom: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.mobJ {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -21.5px;
  }
  .legoPlayground .legoBlock.mobJ::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
            mask-image: url("./components/legos/img/bottomLeft.svg");
    left: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.mobJ::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    bottom: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.mobK {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -21.5px;
  }
  .legoPlayground .legoBlock.mobK::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    top: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.mobK::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    right: 0;
    bottom: -21px;
  }
  .legoPlayground .legoBlock.mobL {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -21.5px;
  }
  .legoPlayground .legoBlock.mobL::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topRight.svg");
            mask-image: url("./components/legos/img/topRight.svg");
    top: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.mobL::after {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    left: 0;
    bottom: -21px;
  }
  .legoPlayground .legoBlock.mobSA {
    border-bottom-left-radius: 0;
    margin-bottom: -10.75px;
  }
  .legoPlayground .legoBlock.mobSA::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    bottom: 0;
    left: -21px;
  }
  .legoPlayground .legoBlock.mobSB {
    border-top-right-radius: 0;
    margin-top: -10.75px;
  }
  .legoPlayground .legoBlock.mobSB::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    top: 0;
    right: -21px;
  }
  .legoPlayground .legoBlock.mobSC {
    border-bottom-left-radius: 0;
    margin-left: -10.75px;
  }
  .legoPlayground .legoBlock.mobSC::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/topLeft.svg");
            mask-image: url("./components/legos/img/topLeft.svg");
    left: 0;
    top: -21px;
  }
  .legoPlayground .legoBlock.mobSD {
    border-top-right-radius: 0;
    margin-right: -10.75px;
  }
  .legoPlayground .legoBlock.mobSD::before {
    height: 21px;
    width: 21px;
    -webkit-mask-image: url("./components/legos/img/bottomRight.svg");
            mask-image: url("./components/legos/img/bottomRight.svg");
    right: 0;
    top: -21px;
  }
}
.bannerContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: minmax(auto, 800px) minmax(52px, 120px) minmax(0px, auto);
  grid-template-rows: repeat(2, max-content) 100px;
  gap: 0px 0px;
  width: 100%;
  background-color: unset;
  margin: 0 auto;
  max-width: 1400px;
  border-radius: 16px;
  transition: border-radius 0.2s ease-in-out;
  overflow: hidden;
  z-index: 1;
  position: relative;
}
.bannerContainer .bannerContent {
  grid-area: 2/1/4/2;
  z-index: 2;
  background-color: inherit;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 4rem;
  justify-content: center;
  border-radius: 24px 24px 0 0;
  min-height: 250px;
  transition: border-radius 0.2s ease-in-out;
}
.bannerContainer .bannerContent .bannerHeader {
  font-family: "Banamex Display";
  font-weight: 700;
  font-size: 32px;
  line-height: 38px;
}
@media (min-width: 768px) {
  .bannerContainer .bannerContent .bannerHeader {
    font-size: 40px;
    line-height: 56px;
  }
}
.bannerContainer .bannerContent .bannerLead {
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
}
@media (min-width: 768px) {
  .bannerContainer .bannerContent .bannerLead {
    font-size: 18px;
    line-height: 26px;
  }
}
.bannerContainer .bannerBackground {
  grid-area: 1/1/4/4;
  z-index: 1;
  height: 100%;
  width: 100%;
  background-color: white;
}
.bannerContainer .bannerBackground img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.bannerContainer .decorativeElement {
  grid-area: 3/2/4/3;
  z-index: 2;
  background-color: inherit;
  border-radius: 0 24px 0 0;
  position: relative;
}
.bannerContainer .decorativeElement::before {
  display: block;
  content: " ";
  height: 32px;
  width: 32px;
  position: absolute;
  left: 0px;
  top: -32px;
  -webkit-mask-image: url("./components/legos/img/bottomLeft.svg");
          mask-image: url("./components/legos/img/bottomLeft.svg");
  z-index: 99;
  background-color: inherit;
}

@media (max-width: 768px) {
  .bannerContainer {
    grid-template-columns: 1fr minmax(32px, 64px);
    grid-template-rows: 250px 1fr minmax(32px, 64px);
    border-radius: 0px;
    transition: border-radius 0.2s ease-in-out;
  }
  .bannerContainer.compact {
    grid-template-rows: 250px 100px minmax(32px, 64px);
  }
  .bannerContainer.compact .bannerContent {
    min-height: unset;
  }
  .bannerContainer .bannerContent {
    padding: 1.25rem 1.75rem;
  }
  .bannerContainer .decorativeElement {
    border-radius: 0 24px 0 0;
  }
  .bannerContainer .bannerBackground img {
    width: 100%;
    height: 100%;
  }
}
.swiper.mobileBanners {
  display: none;
}
@media (max-width: 768px) {
  .swiper.mobileBanners {
    display: block;
  }
}

.swiper.desktopBanners {
  display: block;
}
@media (max-width: 768px) {
  .swiper.desktopBanners {
    display: none;
  }
}

@media (min-width: 1920px) {
  .bannerContainer {
    border-radius: 24px;
    transition: border-radius 0.2s ease-in-out;
  }
}
.swiper-slide:has(> img):not(:has(.decorativeArea)):not(:has(.slideCopy)) {
  display: flex !important;
  height: auto;
}

.pt-4 {
  padding-top: 3em;
}

.eventCard {
  max-width: 260px;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: auto-fit;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: max-content 1fr;
  cursor: pointer;
  gap: 0px 0px;
  position: relative;
  border-radius: 1.2em;
  overflow: hidden;
  background-color: #005162;
  margin: 0 10px;
}
.eventCard .eventCard__info {
  color: #ffffff;
}
.eventCard .eventCard__info .eventInfo__title {
  font-size: 18px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 3em;
}
.eventCard .eventCard__info .eventInfo__venue {
  font-size: 14px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eventCard .eventCard__info .eventInfo__cost {
  display: flex;
  flex-direction: column;
  font-family: "Banamex Micro";
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}
.eventCard .eventCard__info .eventInfo__cost .valueAmount {
  font-family: "Banamex Text";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}
.eventCard .viewMore {
  display: flex;
  padding: 12px 0px;
  align-items: center;
  gap: 8px;
  color: #003746;
}
.eventCard .viewMore::after {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("../img/svg/ico_chevron-right2.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform 0.2s ease-in-out;
}
.eventCard--pastEvent {
  background-color: #B77493;
  opacity: 0.5;
}

@media (min-width: 375px) {
  .eventCard {
    max-width: 290px;
  }
}
@media (min-width: 414px) {
  .eventCard {
    max-width: 320px;
  }
}
@media (min-width: 768px) {
  .eventCard {
    max-width: 350px;
  }
}
@media (min-width: 1024px) {
  .eventCard {
    max-width: 380px;
  }
}
.swiper.HomeLastEvSwSlider > .swiper-wrapper {
  margin: 1em !important;
}

.swiper.swiper-slide {
  box-sizing: border-box;
}

.eventCard__label {
  grid-area: 1/1/2/2;
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 8px 14px;
  background-color: #FAFAF8;
  border-radius: 99rem;
  text-align: center;
  min-width: 150px;
  min-height: 1.75em;
}

.eventCard__labelCutout {
  grid-area: 1/1/2/2;
  position: relative;
  z-index: 3;
  width: 100%;
  background-color: #FAFAF8;
  border-radius: 0 0 1.2em 0;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
}
.eventCard__labelCutout::after {
  display: block;
  content: " ";
  height: 1.2em;
  width: 1.2em;
  position: absolute;
  left: 0px;
  bottom: calc(-1 * 1.2em);
  -webkit-mask-image: url("./components/legos/img/topLeft.svg");
          mask-image: url("./components/legos/img/topLeft.svg");
  z-index: 99;
  background-color: inherit;
}
.eventCard__labelCutout::before {
  display: block;
  content: " ";
  height: 1.2em;
  width: 1.2em;
  position: absolute;
  top: 0px;
  right: calc(-1 * 1.2em);
  -webkit-mask-image: url("./components/legos/img/topLeft.svg");
          mask-image: url("./components/legos/img/topLeft.svg");
  z-index: 99;
  background-color: inherit;
}

.eventCard__image {
  grid-area: 1/1/3/3;
  position: relative;
  z-index: 2;
}
.eventCard__image > img {
  aspect-ratio: 16/9;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.eventCard__info {
  grid-area: 3/1/4/3;
  display: flex;
  flex-direction: column;
  padding: 1.2em;
}
.eventCard__info .eventDate {
  margin-block-end: 1em;
}
.eventCard__info .eventDate .eventDate__day {
  color: #003746;
  font-size: 18px;
  font-weight: 400;
}
.eventCard__info .eventDate .eventDate__complement .eventDate__month {
  font-family: "Banamex Display";
  font-size: 24px;
  font-weight: 400;
  text-transform: capitalize;
}
.eventCard__info .eventDate .eventDate__complement .eventDate__year {
  font-size: 16px;
  font-weight: 400;
}
.eventCard__info .eventDate {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
}
.eventCard__info .eventDate__day {
  margin-top: 8px;
  display: flex;
  height: 44px;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: #ffffff;
}

.eventCard__imageOverlay {
  grid-area: 1/1/3/3;
  position: relative;
  z-index: 3;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.HomeLastEvSwSlider {
  margin-top: 2.5em;
}
.HomeLastEvSwSlider > .swiper {
  margin-top: 1.256em;
}

/* Skeleton Loader Styles */
.eventCard--skeleton {
  pointer-events: none;
  opacity: 1;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-width: 260px;
  min-height: 340px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-box {
  background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s infinite linear;
  border-radius: 6px;
  min-height: 18px;
  min-width: 60px;
  display: inline-block;
}

.eventCard--skeleton .eventCard__label,
.eventCard--skeleton .eventCard__labelCutout {
  width: 120px;
  height: 20px;
  margin: 12px 0 0 12px;
}

.eventCard--skeleton .eventCard__image {
  width: 100%;
  height: 140px;
  margin: 12px 0;
}

.eventCard--skeleton .eventCard__imageOverlay {
  width: 60px;
  height: 20px;
  position: absolute;
  top: 24px;
  right: 24px;
}

.eventCard--skeleton .eventDate__day {
  width: 32px;
  height: 32px;
}

.eventCard--skeleton .eventDate__month,
.eventCard--skeleton .eventDate__year {
  width: 32px;
  height: 16px;
  margin-top: 4px;
}

.eventCard--skeleton .eventInfo__venue,
.eventCard--skeleton .eventInfo__title,
.eventCard--skeleton .eventInfo__actionItem {
  width: 80%;
  height: 18px;
  margin: 8px 0;
}

.eventCard--skeleton .eventInfo__cost span {
  width: 40%;
  height: 16px;
  margin-right: 8px;
}

.landingGrid .eventCard .eventCard__label {
  background-color: #DAE9EE;
}
.landingGrid .eventCard .eventCard__labelCutout {
  background-color: #DAE9EE;
}
.landingGrid .eventCard:nth-child(3n+1) {
  background-color: #FA8D5A;
}
.landingGrid .eventCard:nth-child(3n+2) {
  background-color: #EABCFF;
}
.landingGrid .eventCard:nth-child(3n+3) {
  background-color: #2DDC8E;
}
.landingGrid .eventCard__info {
  color: #001E22;
}
.landingGrid .eventDate__month {
  font-size: 16px !important;
  font-style: normal;
  font-weight: 600 !important;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/*
.i2{
    max-width: 100%;
    .accessModule{
        h2{
            font-family: "Banamex Display";
            font-size: 32px;
            font-style: normal;
            font-weight: 400;
            line-height: 44px;
            color: var(--Primary-dark-blue, #003746);
        }
        h3{
            font-family: "Banamex Display";
            font-size: 40px;
            font-style: normal;
            font-weight: 400;
            line-height: 56px;
            color: var(--Primary-dark-blue, #003746);
        }
    }
}

.i3{
    margin: 18px 24px 0px 0px;
    padding: 18px 18px 0px 18px;
    h1{
        margin: 0;
        padding-right: 64px;
        color: var(--Primary-dark-blue, #003746);
        font-family: "Banamex Display";
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px; 
    }
}
@media (min-width: 768px) {
    .i2{
        max-width: 100%;
        .accessModule{
            h2{
                font-size: 32px;
                line-height: 44px;
            }
            h3{
                font-size: 40px;
                font-weight: 400;
                line-height: 56px;
            }
        }
    }
    .i3{
        margin: 24px 24px 0px 0px;
        padding: 24px 24px 0px 24px;
        h1{
            padding-right: 76px;
            font-size: 32px;
            line-height: 44px; 
        }
    }
}
*/
.i3 {
  padding: 24px 24px 0px 14px;
}
.i3 h1 {
  margin-top: 0;
  color: var(--Primary-dark-blue, #003746);
  font-family: "Banamex Display";
  font-size: 20px;
  line-height: 28px;
}

@media (min-width: 768px) {
  .i3 {
    padding: 24px 24px 0px 24px;
  }
  .i3 h1 {
    padding-right: 76px;
    font-size: 32px;
    line-height: 44px;
  }
}
.swiper-buttons {
  width: 38px;
  height: 34px;
  position: absolute;
  top: auto;
  bottom: 18px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 38px 34px;
  cursor: pointer;
}
.swiper-buttons.swipercustom-button-next {
  right: 10px;
  left: auto;
  background-image: url(../img/svg/ico-next-swiper.svg);
}
.swiper-buttons.swipercustom-button-prev {
  right: 53px;
  left: auto;
  background-image: url(../img/svg/ico-prev-swiper.svg);
}

@media (min-width: 768px) {
  .swiper-buttons {
    width: 38px;
    height: 34px;
    position: absolute;
    top: auto;
    bottom: 10px;
    cursor: pointer;
  }
  .swiper-buttons.swipercustom-button-next {
    right: 18px;
    left: auto;
  }
  .swiper-buttons.swipercustom-button-prev {
    right: 61px;
    left: auto;
  }
}/*# sourceMappingURL=main.css.map */