*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 16px; text-align: center; color: #FFFFFF; line-height: 1; background-color: #0D0D0D; overflow: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;}

body.finalizado{color: #ffffff; overflow:visible;}

.futura-pt-bold{font-family: "futura-pt-bold", sans-serif; font-weight: 700; font-style: italic;}

section, .section{position: relative; width: 100%;}

.mh-100vh{min-height: 100vh !important;}
.d-block{display: block !important;}
.d-flex{display: flex !important;}
.justify-content-center{justify-content: center !important;}
.align-items-center{align-items: center !important;}
.flex-column{flex-direction: column !important;}

.opacity-0{opacity: 0;}

.color-707070{color: #707070;}
.color-0D0D0D{color: #0D0D0D;}
.color-FFFFFF{color: #FFFFFF;}
.color-E94037{color: #E94037 !important;}

.text-uppercase{text-transform: uppercase;}
.align-middle{vertical-align: middle;}


.border-bottom-dotted{background-image: repeating-linear-gradient( to right, #E94037 0, #E94037 6px, transparent 6px, transparent 12px ); background-position: bottom; background-size: 100% 1px; background-repeat: no-repeat;}

.text-lg{font-size: 37.5px;}
.text-md{font-size: 26px;}
.text-sm{font-size: 22px;}

.text-sm{font-size: 0.875rem; line-height: 1.25rem;}
.text-base{font-size: 1rem; line-height: 1.5rem;}
.text-xl{font-size: 1.25rem; line-height: 1.75rem;}
.text-2xl{font-size: 1.5rem; line-height: 2rem;}
.text-4xl{font-size: 2.25rem; line-height: 2.5rem;}
.text-6xl{font-size: 3.75rem; line-height: 1;}
.text-8xl{font-size: 6rem; line-height: 1;}

.fw-700{font-weight: 700;}
.fw-400{font-weight: 400;}

.lh-normal{line-height: normal;}

.mt-3{margin-top: 16px;}
.mt-4{margin-top: 32px;}

.mb-1{margin-bottom: 4px;}
.mb-2{margin-bottom: 8px;}
.mb-3{margin-bottom: 16px;}
.mb-5{margin-bottom: 64px;}

.mx-4{margin-left: 16px; margin-right: 16px;}
.mb-4{margin-bottom: 1rem;}
.mb-6{margin-bottom: 1.5rem;}
.mb-8{margin-bottom: 2rem;}
.mb-10{margin-bottom: 2.5rem;}
.mb-12{margin-bottom: 3rem;}
.mb-16{margin-bottom: 4rem;}

.ml-4{margin-left: 0.25rem;}
.mr-4{margin-right: 0.25rem;}

.p-6{padding: 1.5rem;}

.px-12{padding-left: 3rem; padding-right: 3rem;}
.py-4{padding-top: 1rem; padding-bottom: 1rem;}
.py-6{padding-top: 1.5rem; padding-bottom: 1.5rem;}
.px-10{padding-left: 2.5rem; padding-right: 2.5rem;}
.py-8{padding-top: 2rem; padding-bottom: 2rem;}

.pt-1{padding-top: 4px;}
.pt-2{padding-top: 8px;}
.pt-3{padding-top: 16px;}
.pt-4{padding-top: 32px;}
.pt-5{padding-top: 64px;}
.pt-6{padding-top: 128px;}
.pb-1{padding-bottom: 4px;}
.pb-2{padding-bottom: 8px;}
.pb-3{padding-bottom: 16px;}
.pb-4{padding-bottom: 32px;}
.pb-5{padding-bottom: 64px;}
.pb-6{padding-bottom: 128px;}


.rounded-lg{border-radius: 32px;}
.border{border: solid 1px transparent;}
.border-E94037{border-color: rgb(233,64,55, 0.50);}
.border-4A4A4A{border-color: #4A4A4A;}

.w-100{max-width: 1395px; margin: 0 auto;}
.w-75{max-width: 824px; margin: 0 auto;}
.w-50{max-width: 697px; margin: 0 auto;}

.container{padding-left: 16px; padding-right: 16px;}

.grid-4{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 16px;}

.header{position: absolute; z-index: 9; width: 100%; left: 0; top: 0;}
.header .container{padding: 3rem; display: flex; justify-content: start;}

#counter-section{transition: background-color 2.5s ease, color 2.5s ease; background-color: #FFFFFF; color: #0D0D0D;}
#counter-section #contador{font-size: 232.5px; font-variant-numeric: tabular-nums;}
body.finalizado #counter-section{background-color: #0D0D0D; color: #FFFFFF;}
.container-chevron{position: absolute; z-index: 4; bottom: 24px;}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* Se mantiene al fondo */
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Degradado: de negro semitransparente a transparente */
  background: radial-gradient(circle, rgba(13, 13, 13, 0.15) 0%, rgba(13, 13, 13, 1) 65%);
  z-index: 2; 
}
.overlay::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 15%; background: linear-gradient(to top, rgba(13, 13, 13, 0) 10%, rgba(13, 13, 13, 1) 90%);}
.overlay::after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 15%; background: linear-gradient(to bottom, rgba(13, 13, 13, 0) 10%, rgba(13, 13, 13, 1) 90%);}
.content {
  position: relative;
  z-index: 2; /* Por encima de la capa de degradado */
  text-align: center;
}

/* body.finalizado .visibility-hidden{visibility: visible; transition: color 2.5s ease; transition-delay: 10s; color: #ffffff; opacity: 1;} */
.texto-delay {
  opacity: 0;
  animation: aparecer 1.5s ease forwards;
  animation-delay: 4s;
}
@keyframes aparecer {
  to {
    opacity: 1;
  }
}


.scene-wrapper {
    position: relative;
    padding: 100px 0;
    overflow: hidden; /* Evita que las cintas salgan de la pantalla */
    background: transparent;
  }
  .tape {
    width: 120%;
    left: -10%;
    position: relative;
    background-color: #0D0D0D;
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 16px 0;
    display: flex;
    overflow: hidden;
  }

  /* Diferentes ángulos para el efecto visual */
  .tape-1 { transform: rotate(-4deg); z-index: 3; margin-bottom: -20px; }
  .tape-2 { transform: rotate(1deg); z-index: 4; } /* Un tono ligeramente distinto */
  .tape-3 { transform: rotate(355deg); z-index: 1; margin-top: -20px; }

  .marquee {
    display: inline;
    align-items: center;
    white-space: nowrap;
    animation: scroll-left 85s linear infinite;
  }

  /* Animación inversa para la cinta del medio */
  .marquee.reverse {
    animation: scroll-right 100s linear infinite;
  }

  .marquee span {
    font-family: "futura-pt-bold", sans-serif; font-weight: 700; font-style: italic;
    padding-right: 20px;
  }
  span.asterisk { font-size: 130px; line-height: 0; vertical-align: middle;}

  @keyframes scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  @keyframes scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
  }

  footer{background-color: #FFFFFF; width: 100%; position: relative; padding-top: 480px; margin-top: -390px; padding-bottom: 5rem;}


  @media (max-width: 1200px){
    .grid-xl-2{grid-template-columns: repeat(2, 1fr);}
  }
    
  @media (max-width: 992px){
    .grid-lg-2{grid-template-columns: repeat(2, 1fr);}

    #counter-section #contador { font-size: 18vw;}
  }

  @media (max-width: 768px){
    .grid-md-1{grid-template-columns: repeat(1, 1fr);}
    .text-md-4xl{font-size: 2.25rem; line-height: 2.5rem;}
    span.asterisk{font-size: 50px;}

    footer{padding-top: 280px; margin-top: -250px;}
  }

    @media (max-width: 576px){
    .grid-sm-1{grid-template-columns: repeat(1, 1fr);}

    .w-sm-100px{width: 112px;}

    .text-sm-3xl{font-size: 1.875rem; line-height: 2.25rem;}
    .text-sm-4xl{font-size: 2.25rem; line-height: 2.5rem;}
    .text-sm-2xl{font-size: 1.5rem; line-height: 2rem;}
    .text-sm-lg{font-size: 1.125rem; line-height: 1.75rem;}
  
    .mb-sm-8{margin-bottom: 2rem;}
    .mn-sm-2{margin-bottom: 0.5rem;}
    .mb-sm-4{margin-bottom: 1rem;}
    .mb-sm-3{margin-bottom: 0.75rem;}
    .p-sm-4{padding: 1rem;}

    .pt-sm-0{padding-top: 0;}
    .pb-sm-0{padding-bottom: 0;}

    .header .container { padding: 1.5rem;}

    #counter-section #contador {
        font-size: 21vw;
    }
    .container-chevron{bottom: 38px;}
  }