/* =======================
       DIV 1: OVERLAY INICIAL
       ======================= */
       #div-1 {
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        background-size: cover;
        background-position: center;
        display: none;
        /* Oculto por defecto */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
      }
      
      #div-1.visible {
        display: flex;
      }
      
      #div-1 a {
        color: rgb(33, 8, 8);
        text-decoration: none;
        font-size: 1.125rem;
        position: absolute;
        bottom: 0;
      }
      
      #div-1 a:hover,
      #div-1 a:active {
        color: #e0e0e0;
      }

/* =======================
       DIVS 2 A 13: ESTILOS BÁSICOS Y COLORES DE FONDO
       ======================= */
#div-2,
#div-3,
#div-4,
#div-5,
#div-6,
#div-7,
#div-8,
#div-9,
#div-10,
#div-11,
#div-12,
#div-13 {
  width: 100%;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

#div-2 {
  background-color: #e8e8e8;
}

#div-2 {
  --background-color1: #1bd111;
}

#div-2 {
  --background-color2: #ffffff;
}

#div-2 {
  --background-color3: #ffffff;
}

#div-2 {
  --background-color4: #ffffff;
}

#div-3 {
  background-color: #dbdbdb;
}

#div-3 {
  --background-color1: #0613a4;
}

#div-3 {
  --background-color2: #ffffff;
}

#div-3 {
  --background-color3: #ffffff;
}

#div-3 {
  --background-color4: #ffffff;
}

#div-4 {
  background-color: #e8e8e8;
}

#div-4 {
  --background-color1: #000000;
}

#div-4 {
  --background-color2: #ffffff;
}

#div-4 {
  --background-color3: #ffffff;
}

#div-4 {
  --background-color4: #ffffff;
}

#div-5 {
  background-color: #dbdbdb;
}

#div-5 {
  --background-color1: #E6220D;
}

#div-5 {
  --background-color2: #040a4d;
}

/* color para la url mejoramos tu web */
#div-5 {
  --background-color3: #ffffff;
}

#div-5 {
  --background-color4: #ffffff;
}

#div-6 {
  background-color: #e8e8e8;
}

#div-6 {
  --background-color1: #000;
}

#div-6 {
  --background-color2: #ffffff;
}

#div-6 {
  --background-color3: #ffffff;
}

#div-6 {
  --background-color4: #ffffff;
}

#div-7 {
  background-color: #dbdbdb;
}

#div-7 {
  --background-color1: #000;
}

#div-7 {
  --background-color2: #ffffff;
}

#div-7 {
  --background-color3: #ffffff;
}

#div-7 {
  --background-color4: #ffffff;
}

#div-8 {
  background-color: #e8e8e8;
}

#div-8 {
  --background-color1: #000;
}

#div-8 {
  --background-color2: #ffffff;
}

#div-8 {
  --background-color3: #ffffff;
}

#div-8 {
  --background-color4: #ffffff;
}

#div-9 {
  background-color: #dbdbdb;
}

#div-9 {
  --background-color: #000;
}

#div-9 {
  --background-color2: #ffffff;
}

#div-9 {
  --background-color3: #ffffff;
}

#div-9 {
  --background-color4: #ffffff;
}

#div-10 {
  background-color: #e8e8e8;
}

#div-10 {
  --background-color1: #000;
}

#div-10 {
  --background-color2: #ffffff;
}

#div-10 {
  --background-color3: #ffffff;
}

#div-10 {
  --background-color4: #ffffff;
}

#div-11 {
  background-color: #dbdbdb;
}

#div-11 {
  --background-color1: #000;
}

#div-11 {
  --background-color2: #ffffff;
}

#div-11 {
  --background-color3: #ffffff;
}

#div-11 {
  --background-color4: #ffffff;
}

#div-12 {
  background-color: #e8e8e8;
}

#div-12 {
  --background-color1: #000;
}

#div-12 {
  --background-color2: #ffffff;
}

#div-12 {
  --background-color3: #ffffff;
}

#div-12 {
  --background-color4: #ffffff;
}

#div-13 {
  background-color: #dbdbdb;
}

#div-13 {
  --background-color1: #000;
}

#div-13 {
  --background-color2: #ffffff;
}

#div-13 {
  --background-color3: #ffffff;
}

#div-13 {
  --background-color4: #ffffff;
}

#footer {
  background-color: #000000;
}

/* FONDOS DE IMAGEN Y OVERLAY (clases compartidas) */
[id^="div-"].background-image {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#div-2.background-image {
  background-image: url('/img/bg.webp');
}

#div-3.background-image {
  background-image: url('/img/bannerBG1_1.webp');
}

#div-4.background-image {
  background-image: url('/img/perspectiva.png');
}

#div-5.background-image {
  background-image: url('../img/perspectiva.webp');
}

#div-6.background-image {
  background-image: url('/img/bannerBG1_1.webp');
}

#div-7.background-image {
  background-image: url('/img/bannerBG1_1.webp');
}

#div-8.background-image {
  background-image: url('/img/bannerBG1_1.webp');
}

#div-9.background-image {
  background-image: url('/img/bannerBG1_1.webp');
}

#div-10.background-image {
  background-image: url('/img/bannerBG1_1.webp');
}

#div-11.background-image {
  background-image: url('/img/bg.webp');
}

#div-12.background-image {
  background-image: url('/img/bg.webp');
}

#div-13.background-image {
  background-image: url('/img/bg.webp');
}

[id^="div-"].background-image.overlay-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* COLORES DE OVERLAY ESPECÍFICOS */
#div-2.background-image.overlay-active::after {
  background-color: rgba(0, 128, 0, 0.5);
}

#div-3.background-image.overlay-active::after {
  background-color: rgba(0, 128, 0, 0.5);
}

#div-4.background-image.overlay-active::after {
  background-color: rgba(238, 238, 238, 0.957);
}

#div-5.background-image.overlay-active::after {
  background-color: rgba(234, 232, 232, 0.972);
}

#div-6.background-image.overlay-active::after {
  background-color: rgba(255, 255, 0, 0.5);
}

#div-7.background-image.overlay-active::after {
  background-color: rgba(128, 0, 128, 0.5);
}

#div-8.background-image.overlay-active::after {
  background-color: rgba(0, 255, 255, 0.5);
}

#div-9.background-image.overlay-active::after {
  background-color: rgba(255, 165, 0, 0.5);
}

#div-10.background-image.overlay-active::after {
  background-color: rgba(128, 128, 128, 0.5);
}

#div-11.background-image.overlay-active::after {
  background-color: rgba(255, 192, 203, 0.5);
}

#div-12.background-image.overlay-active::after {
  background-color: rgba(128, 128, 128, 0.5);
}

#div-13.background-image.overlay-active::after {
  background-color: rgba(255, 192, 203, 0.5);
}

/* CONTENIDO DENTRO DE CADA DIV */
.content {
  position: relative;
  z-index: 2;
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

@media (min-width: 2100px) {
  .content {
    max-width: 3000px;
    z-index: 25;
  }
}