:root{
    --colorFondo:#540b17;
    --colorOscuro: #33040d;
   --colorSubtitulo: #B27E49;
   --color-Titulo: #E4C4A1;/*color de botones*/
   --color-Blanco: #ffffff;/*fuente2*/
   --color-Button_texto: #C8A783;/*tarjetas*/

   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;

   --fuente1: "Open Sans", sans-serif;
   --fuente2: "Fraunces", serif;


 }
 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 html{
   font-size: 62.5%;
   font-family: var(--fuente1)
 }
 body{
 background-color: var(--colorFondo);
 }
/* Modal load */
 .modalLoad{
    position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: var(--color-pallete-6);
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          flex-direction: column;
          z-index: 999;
  }
  .modalLoad p{
    padding: 10px 50px;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-Button_texto);
  }
  .modalLoad .corazon_carga_lotties{
        width: 100px;
        height: 100px;
        margin: 0 auto;
  }

  /* Estilos para el modal CARATULA*/
.modalInicio {
    display: none;
    position: fixed;
    z-index: 1;
    width: 100%; /* Ancho del 100% de la ventana */
    height: 100vh; /* Alto del 100% de la ventana */
    background-color: var(--colorFondo);
    z-index: 1000;
  }
  .modalContenidoInicio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 999;
  }
  .modalContenidoInicio .flores{
    width: 150px;
  }
  /* Estilos para deshabilitar el desplazamiento del cuerpo */
.body-sin-scroll {
    overflow: hidden;
  }
  /* boton musica */
  .boton-flotante {
    display: grid;
    place-items: center;
    text-align: center;
    width: 40px;
    height: 40px;
    background-color: var(--colorSubtitulo);
    opacity: 60%;
    border-radius: 100%;
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000; /* Asegura que el botón esté sobre otros elementos */
    /*para el efecto de borde*/
    box-shadow: 8px 9px 28px black;
    overflow: hidden;
    }
    .boton-flotante::before{
      content: "";
      position: absolute;
      width: 80px;
      height: 80px;
      background-image: conic-gradient(rgb(255, 255, 255) 20deg, transparent 120deg);
      animation: rotar 2s linear infinite;
    }
    @keyframes rotar{
      from{
        transform: rotate(0deg);
      }
      to{
        transform: rotate(-360deg);
      }
    }
    .boton-flotante::after{
      content: "";
      position: absolute;
      width: 36px;
      height: 36px;
      background-color: var(--colorOscuro);
      border-radius: 100%;

    }
    .boton-flotante img{
      width: 22px;
      z-index: 3;
    }
  /* boton musica fin */
  .contenedorBienvenidos{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .contenedorBienvenidos .pareja{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .contenedorBienvenidos .titulo{
    font-size: 2.1rem;
    color: var(--colorSubtitulo);
    margin-bottom: 2rem;
  }
  .contenedorBienvenidos .tituloNombres{
    font-size: 4rem;
    font-family: var(--fuente2);
    color: var(--color-Titulo);
    font-weight: 800;
  }
  .contenedor2Bienvenida{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    margin-top: 30px;
  }
  .contenedor2Bienvenida .botones_bienvenida{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    margin-top: 30px;
  }
  .contenedor2Bienvenida p{
    font-size: 1.6rem;
    color: var(--colorSubtitulo);
    font-weight: 500;

    text-align: center;
  }
  .contenedor2Bienvenida .btnIngresarConMusica{
    margin-bottom: 20px;
  }
  .contenedor2Bienvenida button{
    width: 230px;
    height: 40px;
    background-color: var(--color-Button_texto);
    border: none;
    border-radius: 10px;
    color: var(--color-Blanco);
    font-weight: 500;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .contenedor2Bienvenida button:hover{
    background-color: var(--colorSubtitulo);
  }

  /* contenedor Main */
  .contenedorMain{
    width: 100%;
    height: auto;
    background-color: var(--color-pallete-6);
    display: none;

    position: relative;
    overflow: hidden;

  }
  /*para la caida de petalos*/
  .petal {
    position: absolute; /* Posicionar los pétalos respecto al contenedor */
    top: -20px; /* Iniciar desde la parte superior fuera de la pantalla */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FF69B4" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    background-size: contain;
    width: 20px;
    height: 20px;
    opacity: 0.7;
    animation: fall linear forwards;

}

@keyframes fall {
    to {
        transform: translateY(100vh) rotate(360deg);
    }
}
/*fin caida de petalos*/
  .contenedorMain .sectionMainPortada{
    background-image: url('./assets/fotos/pareja_portada.webp'); /* Reemplaza 'tu-imagen.jpg' con el nombre de tu imagen */
    height: 100vh; /* Altura de la imagen parallax */
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1);
    transition: transform 0.5s ease-out; /* Transición suave para el zoom */
  }
  .contenedorMain .contenedorTop{
    position: relative;
    padding: 0 50px;
    height: auto; /* Para asegurar que haya suficiente contenido para hacer scroll */
    z-index: 10;
  }

  .contenedorTop .curvo {
    position: absolute;
    width: 100%; /* Ajusta el tamaño según sea necesario */
    background-color: transparent; /* Asegúrate de que el fondo sea transparente */
    top: -31px;
    left: 0;
}
.rose-corner {
    position: absolute;
    width: 75px; /* Ajusta el tamaño según sea necesario */
    height: 120px; /* Ajusta el tamaño según sea necesario */
    z-index: 500;
    background-size: contain;
    background-repeat: no-repeat;
    overflow-x: hidden;

}

.top-left {
    top: -76px;
    left: 0px;
    background-image: url('./assets/bordes_modal_inicial/rosa_mitad_portada2.svg'); /* Reemplaza 'rosa.png' con la imagen de la rosa */
}

.top-right {
    top: -50px;
    right: 0px;
    background-image: url('./assets/bordes_modal_inicial/rosa_mitad_portada.svg'); /* Reemplaza 'rosa.png' con la imagen de la rosa */
}
.contenedorTop .divfechaNombresFrase{
  width: 100%;
  padding-top: 60px;
  text-align: center;
}
.contenedorTop .divfechaNombresFrase .fechaPrincipal{
  font-family: var(--fuente2);
  font-size: 2.5rem;
  color: var(--color-Titulo);
  font-weight: 700;
  border: 1px solid var(--color-Blanco);
  display: inline-block;
  padding: 5px 30px;
  margin-bottom: 35px;
}
.contenedorTop .divfechaNombresFrase .nombre{
  font-family: var(--fuente2);
  font-size: 7rem;
  color: var(--color-Titulo);
  font-weight: 700;
}
.contenedorTop .divfechaNombresFrase .gato{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.gato .linea{
  width: 30%;
  border-top: 1px solid var(--color-Blanco);
}
.gato .ampersand{
  font-size: 5rem;
  color: var(--color-Blanco);
  font-weight: 100;
  border: 1px solid var(--colorSubtitulo);
  border-radius: 50%;
  width: 70px;
  height: 70px;
}
.contenedorTop .divfechaNombresFrase .frase{
  font-size: 2rem;
  color: var(--color-Button_texto);
  margin-top: 50px;
}
  /* fin contenedor Main */

  /* section contador */
  .sectionContador{
    width: 100%;
    height: 310px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
  }
  .sectionContador .contadorCirculos{
    width: 280px;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('./assets/bordes_modal_inicial/Circulos.svg');
    background-repeat: no-repeat;
  }
  .sectionContador .contadorCirculos .contadorReloj{
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--colorOscuro);
    border-radius: 50%;
    position: relative;
  }
  .sectionContador .contadorCirculos .contadorReloj .rosaReloj{
    top: -70px;
    left: -52px;
    background-image: url('./assets/bordes_modal_inicial/flor_contador.svg'); /* Reemplaza 'rosa.png' con la imagen de la rosa */

    position: absolute;
    width: 220px; /* Ajusta el tamaño según sea necesario */
    height: 220px; /* Ajusta el tamaño según sea necesario */
    background-size: contain;
    background-repeat: no-repeat;
    overflow-x: hidden;
  }
  .sectionContador .contadorCirculos .contadorReloj p{
    font-size: 4.5rem;
    font-weight: 700;
    font-family: var(--fuente2);
    color: var(--color-Titulo);
  }
  .sectionContador .contadorCirculos .contadorReloj .reloj{
    display: flex;
  }
  .sectionContador .reloj .reloj-col{
    width: 25%;
    display: flex;
    flex-direction: column;
    margin: 20px 0;
    font-size: 2rem;
    color: var(--colorSubtitulo);
    text-align: center;
    border-right: 1px solid var(--color-Titulo);
    padding: 0 8px;
  }
  .sectionContador .reloj .no-border{
    border-right: none;
  }
  .sectionContador .reloj .reloj-col .number{
    font-size: 2rem;
    color: var(--colorSubtitulo);
    font-family: var(--fuente2);
    font-weight: 700;
  }
  .sectionContador .reloj .reloj-col .time{
    font-size: 1.6rem;
    color: var(--color-Titulo);
    font-weight: 100;
  }
  .sectionContador #dias{
    /* border-left: 1px solid var(--color-Titulo); */
    margin: 20px 0;
  }
  @keyframes palpitacion {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
  }

  .sectionContador svg.corazon {
    animation: palpitacion 3s infinite;
    transform-origin: center;
    display: block;
    margin: 0 auto;
    width: 35px;
    height: 35px;
  }

  /* fin seccion contador */

  /* SECCION PADRES  MISMOS ESTILOS PARA SECCION PADRINOS*/
  .contenedorMain .section_bendicion{
    width: 100%;
    margin: 50px auto;
    background-color: var(--color-pallete-5);
    box-shadow: 0px -5px 20px -8px rgba(0,0,0,0.75), /* sombreado superior */
              0px 5px 10px -5px rgba(0,0,0,0.75); /* sombreado inferior */
  }
  .contenedorMain .section_bendicion .titulo_bendicion{
    text-align: center;
    margin-bottom: 20px;
  }
  .contenedorMain .section_bendicion .titulo_bendicion p{
    font-family: var(--fuente2);
    color: var(--color-Titulo);
    font-size: 3rem;
    padding: 20px 10px 0 10px;
    font-weight: 500;
  }
  .contenedorMain .section_bendicion .div_bendicion{
    display: flex;
    flex-direction: column;
    background-color: var(--color-pallete-5);
    user-select: none;

    position: relative;
    overflow: hidden;
  }
  .contenedorMain .section_bendicion .div_bendicion .item{

    display: flex;
       flex-direction: column;
       align-items: center;
       min-width: 190px;
       text-align: center;
       margin-bottom: 20px;
       padding: 10px;
       box-sizing: border-box;

   }
   .contenedorMain .section_bendicion .div_bendicion .item img{
    width: 130px; /* Ajusta el tamaño de la imagen según sea necesario */
    height: auto;
    margin-bottom: 10px; /* Espacio entre la imagen y el texto */
    margin-top: 10px;
    pointer-events: none; /* Desactiva los eventos del mouse en la imagen */
    border-radius: 50%;

  }
  .contenedorMain .section_bendicion .div_bendicion .item .texto_bendicion_titulo{
    margin: 0;
    color: var(--colorSubtitulo);
    font-weight: 500;
    font-family: var(--fuente2);
    font-size: 1.7rem; /* Ajusta el tamaño del texto según sea necesario */
  }
  .contenedorMain .section_bendicion .div_bendicion .item .texto_bendicion{
    margin: 0;
    color: var(--color-Titulo);
    font-weight: 300;
    font-family: var(--fuente1);
    font-size: 1.4rem; /* Ajusta el tamaño del texto según sea necesario */
  }


  .animated-image {
    position: absolute;
    right: -100%;
    top: 50%;
    transform: translateY(-50%);
    transition: right 1.5s ease-out;
    max-width: 71px; /* Asegurarse de que la imagen se ajuste */
    max-height: 221px;
}

.image-visible {
    right: 0;
}
  /* FIN SECCION PADRES MISMOS ESTILOS PARA SECCION PADRINOS*/

  /* seccion evento */
  .sectionEvento{
    width: 100%;
    margin-bottom: 50px;
  }
  .sectionEvento .eventoTitulo{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
  }

  .sectionEvento .eventoTitulo p{
    font-size: 4rem;
    font-family: var(--fuente2);
    font-weight: 500;
    color: var(--color-Titulo);
    margin: 20px 0;
    border-top: 1px solid var(--color-Titulo);
    border-bottom: 1px solid var(--color-Titulo);
  }
  .sectionEvento .eventoDireccion{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }
  /* .sectionEvento .eventoDireccion .imagen{
    width: 100%;
    height: 250px;
    background-image: url('./assets/fotos/Catedral_Metropolitana_de_La_Paz.jpg');
    background-size: cover;
  } */
  .sectionEvento .eventoDireccion .eventoInformacion{
    position: relative;
    width: 90%;  /* Ajusta el tamaño según tus necesidades */
    height: 450px;
    background-image: 
      linear-gradient(to right, rgba(51, 4, 13, 100), rgba(51, 4, 13, 0.7) 90%), /* Degradado de izquierda a derecha */
      url('./assets/fotos/Catedral_Metropolitana_de_La_Paz.jpg');  /* Reemplaza con la URL de tu imagen */
    background-size: cover;  /* Hace que la imagen cubra todo el div */
    background-position: center;  /* Centra la imagen */
    position: relative;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sectionEvento .eventoDireccion .eventoInformacion .texto{
    text-align: center;
    position: relative; /* Asegura que el texto se mantenga visible y encima de la imagen */
    z-index: 100; /* Eleva el texto por encima de los efectos aplicados al fondo */
    padding: 10px 10px; /* Añade algo de padding para que el texto no toque los bordes */
  }
  .sectionEvento .eventoDireccion .eventoInformacion .texto .textoTitulo{
    font-size: 2.5rem;
    color: var(--colorSubtitulo);
    font-weight: 900;
  }
  .sectionEvento .eventoDireccion .eventoInformacion .texto .textoDetalle{
    font-size: 2rem;
    color: var(--color-Button_texto);
    font-weight: 500;
    margin: 5px;
    margin-bottom: 20px;
  }
  .eventoDireccion .eventoInformacion .texto .eventoBotones{
    width: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .eventoDireccion .eventoInformacion .texto .eventoBotones .botonGeneral{
    width: 230px;
    height: 40px;
    background-color: var(--color-Button_texto);
    border: none;
    border-radius: 30px;
    color: var(--color-Blanco);
    font-size: 1.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.4s ease;
    margin: 10px 0;
  }
  .eventoDireccion .eventoInformacion .texto .eventoBotones .botonGeneral:hover{
    background-color: var(--colorFondo);
    border: 1px solid var(--colorOscuro);
  }
  .sectionEvento .eventoDireccion .eventoInformacionFiesta{
    position: relative;
    width: 90%;  /* Ajusta el tamaño según tus necesidades */
    height: 450px;
    background-image: 
      linear-gradient(to right, rgba(51, 4, 13, 100), rgba(51, 4, 13, 0.7) 90%), /* Degradado de izquierda a derecha */
      url('./assets/fotos/salon_eventos.jpg');  /* Reemplaza con la URL de tu imagen */
    background-size: cover;  /* Hace que la imagen cubra todo el div */
    background-position: center;  /* Centra la imagen */
    position: relative;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* FIN seccion evento */

  /* seccion carrusel de fotos */
  .sectionCarrusel{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    margin-top: 30px;
    box-shadow: 0px -5px 20px -8px rgba(0,0,0,0.75), /* sombreado superior */
                
    }
    .sectionCarrusel .divCarruselTitulo{
    width: 100%;
    height: 100%;
    }
    .divCarruselTitulo .tituloRetratos{
    font-size: 4rem;
    color: var(--color-Titulo);
    font-family: var(--fuente2);
    font-weight: 500;
    margin-bottom: 20px;
    }
    .divCarruselTitulo .fraseCarrusel{
    font-size: 1.9rem;
    font-family: var(--fuente1);
    color: var(--color-Titulo);
    font-weight: 300;
    margin-bottom: 20px;
    }
    .sectionCarrusel .divCarruselTitulo .gifs_lotties{
    width: 100px;
    margin: 0 auto;
    }
    
    .container {
      max-width: 800px;
      width: 90%;
      background-color: rgba(228, 196, 161, 0.9);
      
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      padding: 30px;
      position: relative;
  }

  .gallery {
      position: relative;
      height: 400px;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .photo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      object-fit: cover;
      border-radius: 10px;
  }

  .photo.active {
      opacity: 1;
  }

  .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
  }

  .btn {
      background-color: #530b17;
      color: white;
      border: none;
      padding: 10px 15px;
      margin: 0 10px;
      border-radius: 25px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 16px;
      outline: none;
  }

  .btn:hover {
      background-color: #ff7777;
      transform: scale(1.05);
  }

  .btn:active {
      transform: scale(0.95);
  }

  

  .background-hearts {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
  }
    
  /* fin carrusel de fotos */

  /* seccion programacion */
  .section_programacion{
    width: 100%;
    margin: 50px auto;
    background-color: var(--color-pallete-5);
    box-shadow: 0px -5px 20px -8px rgba(0,0,0,0.75), /* sombreado superior */
              0px 5px 10px -5px rgba(0,0,0,0.75); /* sombreado inferior */
  }
  .section_programacion .titulo_programacion{
    text-align: center;
    margin-bottom: 20px;
  }
  .section_programacion .titulo_programacion p{
    font-family: var(--fuente2);
    color: var(--color-Titulo);
    font-size: 4rem;
    padding-top: 20px;
    font-weight: 500;
  }
  .section_programacion .div_programacion{
    display: flex;
    overflow-x: auto;
    user-select: none;
  }
  .section_programacion .div_programacion .item{
  
   display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 190px;
      height: 145px; /* Ajusta esta altura según sea necesario */
      text-align: center;
      border-left: 1px solid var(--colorOscuro);
      margin-right: 2px;
      padding: 10px;
      box-sizing: border-box;
  }
  .section_programacion .div_programacion .item img{
    width: 50px; /* Ajusta el tamaño de la imagen según sea necesario */
    height: auto;
    margin-bottom: 10px; /* Espacio entre la imagen y el texto */
    pointer-events: none; /* Desactiva los eventos del mouse en la imagen */
  }
  .section_programacion .div_programacion .item .texto_programacion{
    margin: 0;
    color: var(--color-Titulo);
    font-weight: 500;
    font-family: var(--fuente1);
    font-size: 1.5rem; /* Ajusta el tamaño del texto según sea necesario */
  }
  .section_programacion .div_programacion::-webkit-scrollbar{
  width: 10%;
  }
  /* fin seccion programacion */

  /* seccion escribenos */
  .sectionEscribenos{
    width: 100%;
    height: auto;
    
    }
    .sectionEscribenos .divEscribenos{
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 40px 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    .sectionEscribenos .divEscribenos .fraseEscribenos{
    font-size: 4rem;
    color: var(--color-Titulo);
    font-family: var(--fuente2);
    margin: 20px 0;
    font-weight: 500;
    }
    .sectionEscribenos .divEscribenos .fraseEscribenos2{
    font-size: 1.8rem;
    font-family: var(--fuente1);
    color: var(--color-Titulo);
    }
    .sectionEscribenos .divEscribenos .imgCarta{
    width: 100px;
    margin: 20px 0;
    }
    .sectionEscribenos .divEscribenos .btnEscribenos{
    width: 230px;
    height: 40px;
    background-color: var(--color-Button_texto);
    border: none;
    border-radius: 50px;
    color: var(--color-Blanco);
    font-size: 1.8rem;
    cursor: pointer;
    transition: background-color 0.4s ease;
    }
    
    .sectionEscribenos .divEscribenos .btnEscribenos:hover{
    background-color: var(--colorFondo);
    border: 1px solid var(--colorOscuro);
    }
  /* fin seccion escribenos */

  /* seccion final de iniciales */
  .sectionInicialesFin{
    width: 100%;
    height: auto;
    background-color: var(--colorOscuro);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    box-shadow: 0px -5px 20px -8px rgba(0,0,0,0.75), /* sombreado superior */
                0px 5px 10px -5px rgba(0,0,0,0.75); /* sombreado inferior */
    }
    
    
    .sectionInicialesFin .divFechaInicialesNombresFin{
    width: 100%;
    text-align: center;
    margin: 20px 0;
    }
    .sectionInicialesFin .divFechaInicialesNombresFin p:nth-child(1){
    padding: 10px 20px 10px 20px;
    margin: 0 auto;
    margin-bottom: 2rem;
    font-size: 10rem;
    border-top: 1px solid var(--colorSubtitulo);
    border-bottom: 1px solid var(--colorSubtitulo);
    color: var(--color-Blanco);
    font-family: var(--fuente2);
    }
    .sectionInicialesFin .divFechaInicialesNombresFin span{
    font-family: var(--fuente1);
    color: var(--color-Blanco);
    font-size: 7rem;
    margin: 0 10px;
    }
    .sectionInicialesFin .divFechaInicialesNombresFin p:nth-child(2){
    font-size: 2.5rem;
    font-family: var(--fuente1);
    font-weight: 500;
    color: var(--color-Blanco);
    }

    /* footer */
    footer{
      display: none;
      width: 100%;
      
      background-color: var(--color-Button_texto);
      }
      footer .divFooter{
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 1.6rem;
      color: var(--color-Blanco);
      font-family: var(--fuente1);
      font-weight: 500;
      }
      footer .divFooter p {

        font-size: 1.7rem;
      }
      footer .divFooter img{
        width: 95px;
        margin-left: 10px;
        padding-bottom: 15px;
      }