@charset "UTF-8";
@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;
}

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;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding-inline: 32px;
  padding-block: 52px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.buttonContainer {
  display: flex;
  justify-content: space-evenly;
  gap: 16px;
}

/* ==============================================
   Variables Globales para Botones
   ==============================================
   Ajusta estos valores para modificar el estilo global de los botones.
*/
/* ==============================================
   Estilo Base del Botón
   ==============================================
   Se define la estructura básica del botón para cualquier elemento.
   Se extiende automáticamente la variante "solid" para que, al usar
   solo la clase .button, se apliquen los estilos de botón sólido.
*/
.button {
  -webkit-appearance: none;
  /* Para Safari y Chrome */
  -moz-appearance: none;
  /* Para Firefox */
  appearance: none;
  /* Estándar */
  background: none;
  border: none;
  outline: none;
  font: inherit;
  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 1rem;
  border-radius: 9999px;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  /* --------------------------------------------
     VARIANTE SOLID (por defecto)
  -------------------------------------------- */
  /* --------------------------------------------
     VARIANTE OUTLINE
  -------------------------------------------- */
  /* --------------------------------------------
     VARIANTE GHOST
  -------------------------------------------- */
  /* --------------------------------------------
     VARIANTE DANGER (sobre la base solid)
  -------------------------------------------- */
  /* --------------------------------------------
     VARIANTES DE TAMAÑO
  -------------------------------------------- */
  /* --------------------------------------------
     Íconos dentro del Botón
  -------------------------------------------- */
}
.button--solid, .button--danger, .button {
  background-color: #003746;
  border: 2px solid #003746;
  color: #ffffff;
}
.button--solid:hover, .button--danger:hover, .button:hover {
  background-color: rgb(0, 14.9285714286, 19);
  border-color: rgb(0, 14.9285714286, 19);
  color: #ffffff;
}
.button--solid:active, .button--danger:active, .button:active {
  background-color: hsl(192.8571428571, 100%, -1.2745098039%);
  border-color: hsl(192.8571428571, 100%, -1.2745098039%);
  color: #ffffff;
}
.button--solid:focus, .button--danger:focus, .button:focus {
  outline: 2px solid rgb(0, 135.1428571429, 172);
  outline-offset: 2px;
}
.button--solid:disabled, .button--danger:disabled, .button:disabled, .button--solid.disabled, .disabled.button--danger, .disabled.button, .button--solid.is-disabled, .is-disabled.button--danger, .is-disabled.button {
  background-color: #BEBEBD;
  border-color: #D5D1CE;
  color: #999999;
  cursor: not-allowed;
  opacity: 0.5;
}
.button--outline {
  background-color: transparent;
  border: 2px solid #003746;
  color: #ffffff;
}
.button--outline:hover {
  background-color: rgb(0, 14.9285714286, 19);
  border-color: rgb(0, 14.9285714286, 19);
  color: #ffffff;
}
.button--outline:active {
  background-color: hsl(192.8571428571, 100%, -1.2745098039%);
  border-color: hsl(192.8571428571, 100%, -1.2745098039%);
  color: #ffffff;
}
.button--outline:focus {
  outline: 2px solid rgb(0, 135.1428571429, 172);
  outline-offset: 2px;
}
.button--outline:disabled, .button--outline.disabled, .button--outline.is-disabled {
  background-color: transparent;
  border-color: #D5D1CE;
  color: #999999;
  cursor: not-allowed;
  opacity: 0.5;
}
.button--ghost {
  background-color: transparent;
  border: 2px solid transparent;
  color: #ffffff;
}
.button--ghost:hover {
  background-color: rgb(0, 14.9285714286, 19);
  border-color: rgb(0, 14.9285714286, 19);
  color: #ffffff;
}
.button--ghost:active {
  background-color: hsl(192.8571428571, 100%, -1.2745098039%);
  border-color: hsl(192.8571428571, 100%, -1.2745098039%);
  color: #ffffff;
}
.button--ghost:focus {
  outline: 2px solid hsl(0, 0%, 120%);
  outline-offset: 2px;
}
.button--ghost:disabled, .button--ghost.disabled, .button--ghost.is-disabled {
  background-color: transparent;
  border-color: transparent;
  color: #999999;
  cursor: not-allowed;
  opacity: 0.5;
}
.button--danger {
  background-color: #FF1B44;
  border-color: #FF1B44;
  color: #ffffff;
}
.button--danger:hover {
  background-color: #450A27;
  border-color: #450A27;
  color: #ffffff;
}
.button--danger:active {
  background-color: #601636;
  border-color: #601636;
  color: #ffffff;
}
.button--default {
  padding: 0.75rem 1rem;
  font-size: inherit;
  min-width: 180px;
}
.button--compact {
  padding: 0.5rem 0.8rem;
  font-size: 0.9em;
}
.button--wide {
  padding: 1rem 3rem;
  font-size: inherit;
  width: 100%;
}
.button__icon {
  display: flex;
  align-items: center;
}
.button__icon--left {
  margin-right: 8px;
}
.button__icon--right {
  margin-left: 8px;
}

.btn-fw-light {
  font-weight: 400;
}

.selectContainer {
  position: relative;
  width: 100%;
  max-width: 300px;
}
.selectContainer select {
  width: 100%;
  padding: 10px;
  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;
}

.checkboxContainer,
.radioContainer {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.checkboxContainer input,
.radioContainer input {
  display: none;
}
.checkboxContainer .checkmark,
.checkboxContainer .checkmark--radio,
.radioContainer .checkmark,
.radioContainer .checkmark--radio {
  width: 18px;
  height: 18px;
  border: 2px solid #005162;
  display: inline-block;
  position: relative;
  border-radius: 14px;
}
.checkboxContainer .checkmark--radio,
.radioContainer .checkmark--radio {
  border-radius: 50%;
}
.checkboxContainer input:checked + .checkmark,
.radioContainer input:checked + .checkmark {
  background: #005162;
}
.checkboxContainer input:checked + .checkmark--radio::after,
.radioContainer input:checked + .checkmark--radio::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #005162;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 300px;
}
.form-input input {
  padding: 10px;
  transition: border-color 0.3s ease;
  background-color: #ffffff;
}
.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-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;
}

/* ============================================================
   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("../images/certificados_overLight.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.navContainer .navContent {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 3.5rem 0 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("../images/certificados_overDark.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.navContainer.variantBlue a {
  color: #ffffff;
}
.navContainer.variantBlue svg path {
  fill: #ffffff;
}

.mobile-nav.variantBlue > .mobile-header {
  background-color: #003746;
}
.mobile-nav.variantBlue > .mobile-header .logo {
  height: 52px;
  width: 168px;
  background-image: url("../images/certificados_overDark.png");
  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("../images/certificados_overLight.png");
    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("../images/certificados_overDark.png");
    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;
  }
  .cta-section .button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #A0D6E2;
    color: #005162;
    text-decoration: none;
    border-color: transparent;
    border-radius: 99rem;
    width: 95%;
    max-width: 320px;
    margin: 0 auto;
  }
  .cta-section .button:hover {
    background-color: #005162;
    color: #ffffff;
  }
  /* Alternate nav en la parte inferior */
  .alternate-nav {
    display: flex;
    align-items: start;
    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);
  }
  .alternate-nav .button,
  .alternate-nav button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #A0D6E2;
    color: #005162;
    text-decoration: none;
    border-color: transparent;
    border-radius: 99rem;
    width: 95%;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
  }
  .alternate-nav .button.logout,
  .alternate-nav button.logout {
    background-color: #FDE8E0;
    color: #FF1B44;
  }
  .alternate-nav .button.logout:hover,
  .alternate-nav button.logout:hover {
    background-color: red;
    color: #ffffff;
  }
  /* ===============================
     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;
  justify-content: center;
  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;
}

/* ============================================================
   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, 600px) [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;
  max-height: 64px;
  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 .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-inline: 24px;
  padding-block: 18px;
  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;
  align-items: center;
}
.footer .FooterContent .footerLinks a {
  color: inherit;
  font-weight: 600;
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .footer .FooterContent .footerLinks a {
    font-size: 14px;
    line-height: 20px;
  }
}
.footer .FooterContent .legalText {
  margin: 0;
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .footer .FooterContent .legalText {
    font-size: 16px;
    line-height: 22px;
  }
}
.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);
    /* 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 .SNArea {
    grid-area: 3/InnerRight/3/OutterRight;
  }
  .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: 2;
  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;
  }
}
.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;
}

.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: hidden;
  transition: border-radius 0.2s ease-in-out;
}

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

.loginContainer {
  background-color: #005062;
  color: #ffffff;
  padding: calc(100px + 3rem) 2.75rem 3rem 2.75rem;
  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: 800px;
  gap: 28px;
}
.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 .button {
  background-color: #FF1B44;
  color: #ffffff;
  border-color: transparent;
}
.loginContainer .button:hover {
  background-color: #B77493;
  color: #ffffff;
}
.loginContainer .loginHeader,
.loginContainer .loginLead {
  font-family: "Banamex Text";
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
}
@media (min-width: 768px) {
  .loginContainer .loginHeader,
  .loginContainer .loginLead {
    font-size: 18px;
    line-height: 26px;
  }
}
.loginContainer .loginHeader {
  font-size: clamp(2rem, 1.636rem + 1.818vw, 3rem);
  line-height: 2.5rem;
}
.loginContainer .loginHeader,
.loginContainer .loginLead,
.loginContainer .loginForm {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.backgroundImage {
  grid-area: 1/1/3/3;
  background-image: url(../images/defaults/default_login.webp);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

@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(120px, 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 {
    max-width: 300px;
    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: 132px;
}

.loginForm .encapsulatedInfo {
  margin: unset !important;
}

.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_bases .basesycondiciones ul {
  list-style-position: inside;
}
.aside_bases .basesycondiciones ul li {
  list-style-type: disc;
}

.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: #ffffff;
  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%;
  }
}
.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;
  }
}

@media (max-width: 768px) {
  .headerIndex__title,
  .headerIndex__content {
    padding-inline: 0px;
  }
  .folioID {
    word-break: break-word;
  }
  .legalTextContainer .scrollableText {
    padding: 24px;
  }
}
.expiryDate, .validDate {
  font-weight: bolder;
}

.accordion-header {
  display: flex;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 0;
  border-bottom: 1px solid #A0D6E2;
  background: #DAE9EE;
}
.accordion-header:first-child {
  border-radius: 10px 10px 0px 0px;
}
.accordion-header:last-child {
  border-radius: 0px 0px 10px 10px;
}
.accordion-header:last-of-type {
  border-radius: 0px 0px 10px 10px;
}
.accordion-header.accordion-header-last {
  border-radius: 0px 0px 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-header:hover {
  cursor: pointer;
}

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

@media (min-width: 576px) {
  .accordion-content {
    padding: 1.5rem 2rem;
  }
}
@media (max-width: 576px) {
  .accordion-header h3 {
    font-size: 18px;
  }
}
.rotate {
  transform: rotate(180deg);
}

.arrow {
  transition: transform 0.5s ease-in-out;
}

.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;
}

.status-offline {
  cursor: default;
}

.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;
  }
}/*# sourceMappingURL=main.css.map */