:root {
  /* Font */
  --font-family-Font: DIN Next LT Arabic;

  /* Color - Solo los usados en index3.html */
  --Blanco: #fff;
  --color-black: #000;
  --color-cornflowerblue-100: #44aeff;
  --color-cornflowerblue-200: #007cd4;
  --color-chocolate: #ed6b1e;
  --color-crimson: #e11f2a;
  --color-darkblue-100: #1231b3;
  --color-darkslategray: #333e48;
  --color-dodgerblue-100: #4285f4;
  --color-firebrick: #b8232f;
  --color-gray-100: #909090;
  --color-gray-200: #1b1b1b;
  --color-gray-300: #001824;
  --color-gray-400: rgba(255, 255, 255, 0.2);
  --color-midnightblue-100: #022385;
  --color-midnightblue-200: #001b6c;
  --color-orange: #ff9900;
  --color-orangered-100: #ff6213;
  --color-orangered-300: #ea4017;
  --color-red-100: #ff2900;
  --color-royalblue-200: #0a62cd;
  --color-slategray: #56728b;
  --color-whitesmoke-100: #f7f7f7;
  --color-whitesmoke-200: #f4f4f4;
  --color-yellowgreen: #8bc037;
  --color-azureblue-200: #005C8A;
  --color-electricpurple-100: #b400ff;
}

body {
  margin: 0;
  line-height: normal;
  font-family: 'DIN Next LT Arabic', 'Epilogue', 'Plus Jakarta Sans', Arial, sans-serif;
}
/* =====================================================
   Layout global
===================================================== */
.gq-layout-container {
  max-width: 1200px;
  margin: 0 auto;
  /*padding-left: 40px;
  padding-right: 40px;*/
}
@media (max-width: 1200px) {
  .gq-layout-container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 768px) {
  .gq-layout-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 420px) {
  .gq-layout-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.button-primary-gq{
    cursor: pointer;
    border: 0;
    padding: 5px 24px;
    background-color: var(--color-cornflowerblue-200);
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 5px;
    font-size: 18px;
    font-weight: 300;
    color: white;
}
.button-primary-gq:hover {
    background-color: var(--Blanco);
    border: 1px solid var(--color-cornflowerblue-200);
    color: var(--color-orangered-100);
    box-sizing: border-box;
    text-decoration: none;
}
.button-secundary-gq{
    cursor: pointer;
    border: 1px solid var(--Blanco);
    padding: 5px 24px;
    background-color: var(--color-gray-400);
    height: 45px;
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--Blanco);
}
.button-secundary-gq:hover {
    background-color: var(--color-cornflowerblue-200);
    text-decoration: none;
    color: var(--Blanco);
}
.ver-mas{
    position: relative;
    font-size: 18px;
    line-height: 120%;
    font-weight: 300;
    color: var(--Blanco);
    text-align: center;
    flex-shrink: 0;
}

.button-primary-orange-gq {
    cursor: pointer;
    border: 0;
    padding: 5px 24px;
    background-color: var(--color-orangered-100);
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 5px;
    font-size: 18px;
    font-weight: 300;
    color: white;
}

.button-primary-orange-gq:hover {
    background-color: var(--Blanco);
    border: 1px solid var(--color-orangered-100);
    color: var(--color-orangered-100);
    box-sizing: border-box;
    text-decoration: none;
}