/*-------------------------------------------------------
 LANDING SORTEO VERANO 2024 100M Puntos
 Octubre 2023
-------------------------------------------------------*/
/*-----------------------------
 1. Fuentes 
 2. Imagen fondo principal
 3. Textos
 4. Colores
 5. Posiciones absolutas
-------------------------------*/



/*-------------------------------------------------------
 1. Fuentes Repsol
-------------------------------------------------------*/


.font-italic{
    font-style: italic !important;
}


/*-------------------------------------------------------------------
 1. Colores
-------------------------------------------------------------------*/
:root {
  --bs-dark: #21325b;
  --bs-dark-rgb: 33,50,91;
  --bs-eroski:#d72a30;
  --bs-eroski-rgb:215, 42, 48;
  --bs-eroski-dark:#c80c22;
  --bs-eroski-dark-rgb:200, 12, 34;
  --bs-eroski-light:#e43227;
  --bs-eroski-light-rgb:228, 50, 39;
  --bs-light: #ffffff;
  --bs-light-rgb: 2255,255,255;
  --bs-light-progress:228, 50, 139;
  --bs-dark-eroski-rgb:222, 0, 9;
  --bs-bg-gray-erk:#f4f4f4;
  --bs-bg-familias-eroski:#1eb5b1;
  --bs-amarillo-rps-noviembre:#f1cf23;
  }

  .bg-light {
      --bs-bg-opacity: 1;
      background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity)) !important;
  }
  .bg-eroski {
      --bs-bg-opacity: 1;
      background-color: rgba(var(--bs-eroski-rgb),var(--bs-bg-opacity)) !important;
  }
  .bg-eroski-dark {
      --bs-bg-opacity: 1;
      background-color: rgba(var(--bs-eroski-dark-rgb),var(--bs-bg-opacity)) !important;
  }
  .bg-eroski-light{
      --bs-bg-opacity: 1;
      background-color: rgba(var(--bs-eroski-light-rgb),var(--bs-bg-opacity)) !important;
  }
  .bg-eroski-marcas{
      --bs-bg-opacity: 1;
      background-color: rgba(var(--bs-dark-eroski-rgb),var(--bs-bg-opacity)) !important;
  }
  .bg-dark-erk{
    background-color:#000 ;
  }
  .bg-section-gray{
    background-color: var(--bs-bg-gray-erk) 
   }
   .bg-familias{
    background-color: var(--bs-bg-familias-eroski) !important
   }


/*-------------------------------------------------------
 2. Imagen fondo principal
-------------------------------------------------------*/


.bg-mastercard {
  background-image: url(https://travelclub.s3.eu-west-1.amazonaws.com/web/mastercard/2025/header-bg.webp);
  background-position: 40% 55%;
  background-size: cover;
  min-height: 300px
}


/*-------------------------------------------------------
 3. Textos
-------------------------------------------------------*/



/*-------------------------------------------------------
 4. Colores
-------------------------------------------------------*/
.binded-content {
    position: relative;
    height: 100%;
  }

  .binded-item {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: opacity .35s ease-in-out,visibility .35s ease-in-out;
  }

  .from-bottom {
    transform: translateY(2.25rem);
  }

  .z-2 {
    z-index: 2 !important;
  }

  .binded-item.active {
    visibility: visible;
    opacity:1;
    transform: translateY(-40px);
  }




  .nav-link.active:not([data-bs-toggle="dropdown"]) {
    pointer-events: none;
    cursor: default;
  }

  .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: white;
    border-radius: 0.5rem;
    border-color: #207abb;
    background-color: transparent;
  }

  .nav-tabs .nav-link {
    font-weight: 600;
    border-radius: 0.5rem;
  }

  .nav-tabs .nav-link {
    margin-bottom: 1rem;


  }

  .nav-link {
    display: flex;
    align-items: center;
    background: none;
    border: 0;
  }

  .nav-tabs .nav-item {
    margin-right: .975rem;
    margin-bottom: .375rem;
  }

  .light-blue{
    color:#25f5ff !important;
  }


  .btn-outline-light-blue {
    color: #20C7D1;
    border-color: #20C7D1;
  }

  .btn-outline-light-blue:hover {
    color: #ffffff;
    background-color: #20C7D1;
    border-color: #20C7D1;
  }

  .btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary:hover {
    color: rgba(var(--bs-btn-primary-color-rgb),.75) !important;
    box-shadow: none !important;
  }

  .btn-outline-primary:hover {
    color: #fff;
    background-color: #047DC2;
    border-color: #047DC2;
  }




  /* .bg-mastercard {
    background: linear-gradient(-45deg, #1d122b, #141529, #3b2c6d ,#0e1020);
    background-size: 200% 200%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
  } */
  
  @-webkit-keyframes Gradient {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  
  @-moz-keyframes Gradient {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  
  @keyframes Gradient {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  


  /* 
  these type the CSS variable as color
  unlocking the ability for the browser 
  to animate just that portion
*/
@property --＠color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(97, 25%, 94%);
}

@property --＠color-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(204, 68%, 91%);
}

/* keyframes that change the color variable */
@keyframes gradient-change {
  to {
    --＠color-1: hsl(210 100% 59%);
    --＠color-2: hsl(310, 94%, 49%);
  }
}

article {
  /* apply variable changes over time */
  animation: gradient-change 4s linear infinite alternate;

  background: linear-gradient(
    /* 
      in oklch produces more vibrant gradient results 
      learn more https://developer.chrome.com/docs/css-ui/access-colors-spaces#color_interpolation
    */
      to right in oklch,
    /* use the variables in a gradient (or wherever!) */ var(--＠color-1),
    var(--＠color-2)
  );

  /* old browser support */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* modern browser version */
  background-clip: text;
  color: transparent;
}

#mastercardModal .modal-dialog{
  min-width: 800px;
}

.body-text {
  display: flex;
  justify-content: start;
  align-items: center;


}

.text {
  position: relative;
}

.text::before {
  position: absolute;
  content: '';
  width: 20px;
  bottom: 0px;
  right: 0px;
  height: 2px;
  background: white;
  animation: animLine 0.5s steps(4) infinite;
}

@keyframes animLine {
  0%,
  75% {
      opacity: 1;
  }
  76%,
  100% {
      opacity: 0;
  }
}

.text .string {
  font-size: 85px;
  position: relative;
  color: white;
  animation: animText 10s steps(17) infinite;
  overflow: hidden;
  font-weight:600
}

@keyframes animText {
  0%,
  90%,
  100% {
      width: 0px;
  }
  30%,
  60% {
      width: 700px;
  }
}

.fs-btn-alta{
  font-size:1.5rem !important
}



.top-60 {
  top: 60% !important;
}

.mb-n13 {
  margin-bottom: -1.6rem !important;
}

.modal-content {
  max-height: 556px !important;
  padding: 1rem;
}

.display-5{
  line-height: 1.1 !important;
}
.text-points{
color: #fea569 !important;
}
.fw-100{
  font-weight: 100 !important;
}
.accordion-alt .accordion-button {

  font-size: 1rem;

}

@media (min-width: 768px) {

  .gap-md-8 {
    gap:8rem !important;
  }
  .accordion-alt .accordion-button {

    font-size: 1.25rem !important;
  
  }
}