/* Divisores */

.divisor-principal path {
  fill: var(--color-adornos);
}

.divisor-principal {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 320px;
}

.portada .divisor-principal {
  z-index: 1;
}

.portada .divisor-principal.divisor-superior {
  top: -20px;
}


.divisor-principal.divisor-superior {
  top: 30px;
}

.divisor-principal.divisor-inferior {
  bottom: 30px;
  transform: rotate(180deg);
}

/* Adornos en modal musica */

#modalMusica {
  overflow: hidden;
}

.adorno-modal-musica.adorno-modal-musica-top,
.adorno-modal-musica.adorno-modal-musica-bottom {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 1;
  width: 650px;
}

.adorno-modal-musica.adorno-modal-musica-top {
  top: -4px;
}

.adorno-modal-musica.adorno-modal-musica-bottom {
  bottom: -4px;
  rotate: 180deg;
}

.adorno-modal-musica path {
  fill: var(--color-adornos);
}

.adorno-modal-musica-2 {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -45px;
  width: 150px;
}

.adorno-modal-musica-2 path {
  fill: var(--color-adornos);
}

#modalMusica .box-nombres-modal-musica::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 50%;
  height: 1px;
  background-color: var(--color-lineas-nombres-modal-musica);
  z-index: 1;
  bottom: 0;
}

#modalMusica .modal-content p.bienvenida-modal-musica {
  margin-bottom: 5px;
}

#modalMusica span.ampersand-modal-musica {
  height: 50px;
  width: 50px;
}

/* Adornos en modales */
.adorno-modal {
  position: absolute;
  z-index: -1;
  width: 100%;
}

.adorno-modal path {
  fill: var(--color-adornos);
}

.adorno-modal.adorno-modal-top {
  top: -100px;
  transform: rotate(180deg);
}

#modalMusica .adorno-modal,
#modal-lang .adorno-modal {
  display: none;
}


.portada .divisor-principal.divisor-inferior {
  bottom: 30px;

}

section.portada .box-nombres-fecha-portada span.fecha-portada {
  margin-bottom: 0;
}


/* Comillas de portada */

.box-frase-portada .comilla-portada {
  width: 30px;
  height: 30px;
}

.box-frase-portada .comilla-portada path {
  fill: var(--color-comillas-portada);
}

.box-frase-portada .comilla-apertura-portada {
  margin-bottom: 5px;
}

.box-frase-portada .comilla-cierre-portada {
  transform: rotate(180deg);
  margin-top: -5px;
}

/* Adorno fecha de portada */

.fecha-portada {
  position: relative;
}

.adorno-fecha {
  position: absolute;
}

.adorno-fecha-1,
.adorno-fecha-2 {
  width: 80px;
  height: auto;
  top: -5px;
}

.adorno-fecha-1 {
  left: -85px;
  transform: scaleX(-1);
}

.adorno-fecha-2 {
  right: -85px;
}

.adorno-fecha path {
  fill: var(--color-adornos);
}

/* Nombres de portada */
section.portada .nombres::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 40%;
  height: 1px;
  background-color: var(--color-lineas-nombres-portada);
  z-index: 1;
  bottom: 0;
}

/* Ampersand de portada */
section.portada .nombres span.ampersand-portada {
  margin: 0 10px;
  width: 50px;
  height: 50px;
}


/* Adorno de titulos eventos */

section.cols-eventos .info-col {
  position: relative;
}

.adorno-titulo-evento {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -60px;
  width: 180px;
  height: auto;
}

.adorno-titulo-evento path {
  fill: var(--color-adornos);
}


section.cols-eventos .box-col {
  border: none;
}

section.cols-eventos .info-col {
  margin-top: 50px;
}


/* Animacion cuenta regresiva */

.box-cta-regresiva {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.anim-cuenta-regresiva {
  width: 60px;
  height: 60px;
}

.anim-cuenta-regresiva path {
  fill: var(--color-anim-cta-regresiva);
}


/* Adornos cards fiesta */
.adorno-cards-fiesta {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -70px;
  width: 300px;
  height: auto;
  transform: rotate(180deg);
  z-index: -1;
}

.adorno-cards-fiesta path {
  fill: var(--color-adornos);
}

section.fiesta .card-fiesta {
  margin-top: 100px;
}

section.fiesta .card-fiesta .content-card-fiesta {
  border: none;
}

/* Bordes de ondas */

.borde-ondas {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: auto;
  z-index: 1;
}

.borde-ondas path {
  fill: var(--color-ondas);
}

.borde-superior-ondas {
  top: 3px;
  transform: translateY(-100%);
  transform-origin: bottom center;
  display: block;
  width: 100%;
  height: auto;
}

.borde-inferior-ondas {
  top: calc(100% - 3px);
  transform: rotate(180deg);
  display: block;
  width: 100%;
  height: auto;
}

/* Mantener SVG pegado al borde superior: bottom del SVG siempre en top de la sección */
.seccion-principal.seccion-1 .borde-superior-ondas {
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: auto;
  transform: translateY(-100%);
  transform-origin: bottom center;
  display: block;
}

.seccion-principal.seccion-2 .borde-ondas {
  display: none;
}

.seccion-principal.seccion-1 .divisor-principal {
  display: none;
}

footer .borde-inferior-ondas {
  display: none;
}


/* Nombres footer */
section.footer .nombres::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 40%;
  height: 1px;
  background-color: var(--color-lineas-nombres-footer);
  z-index: 1;
  bottom: 0;
}

.modal .modal-content {
  border: none;
}


/* Mostrar bordes de ondas deck */
.seccion-1 .borde-ondas.borde-ondas-desk {
  display: block;
}

/* Ocultar bordes de ondas mobile */
.seccion-1 .borde-ondas.borde-ondas-mobile {
  display: none;
}

.seccion-principal.seccion-1 {
  padding: 40px 0;
}

.seccion-principal.seccion-2 {
  padding: 175px 0;
}

footer.seccion-principal.footer-firma {
  padding: 20px 0;
}

footer.seccion-principal.seccion-2 .divisor-principal {
  display: none;
}

footer.seccion-principal.seccion-2 .borde-superior-ondas {
  display: none;
}

footer.seccion-2 .borde-ondas.borde-ondas-mobile {
  display: none;
}

footer.seccion-principal.seccion-2.footer-firma{
  padding-top: 70px;
}


/* Responsive */
@media only screen and (max-width: 767px) {

  #modalMapa .modal-body {
    position: relative;
    min-height: 375px;
  }

  #googleMap,
  #googleMapIframe {
    height: 375px;
  }

  section.portada .box-frase-portada {
    margin-top: 25px;
  }

  section.portada .box-frase-portada p.frase-portada {
    margin-top: 5px;
  }

  section.portada .portada-container {
    padding-bottom: 40px;
  }

  .portada .divisor-principal.divisor-superior {
    top: -20px;
  }

  .seccion-principal.seccion-1 {
    padding: 20px 0;
  }

  section.fiesta .card-fiesta,
  section.cols-eventos .col-evento {
    max-width: 400px;
  }

  section.footer p.subtitulo-footer {
    margin-bottom: 20px;
  }

  footer.seccion-principal.footer-firma {
    padding: 0 0 20px 0;
  }

  section.footer .divisor-principal.divisor-inferior {
    bottom: 10px;
  }

  /* Ocultar bordes de ondas deck */
  .seccion-1 .borde-ondas.borde-ondas-desk {
    display: none;
  }

  /* Mostrar bordes de ondas mobile */
  .seccion-1 .borde-ondas.borde-ondas-mobile {
    display: block;
  }

  footer.footer-firma .borde-ondas.borde-inferior-ondas.borde-ondas-desk,
  footer.footer-firma .borde-ondas.borde-inferior-ondas.borde-ondas-mobile {
    display: none;
  }

  .adorno-modal-musica.adorno-modal-musica-top,
  .adorno-modal-musica.adorno-modal-musica-bottom {
    width: 100%;
    max-width: 350px;
  }

  .adorno-modal-musica.adorno-modal-musica-top {
    top: -20px;
  }

  .adorno-modal-musica.adorno-modal-musica-bottom {
    bottom: -20px;
  }

  #modalMusica .modal-content p {
    padding-bottom: 0;
  }

  .adorno-modal-musica-2 {
    display: none;
  }

  .seccion-principal.seccion-1 .borde-superior-ondas {
    top: 1;
  }

  .borde-inferior-ondas {
    top: calc(100% - 0);
  }

  .divisor-principal.divisor-superior {
    top: 30px;
  }

  .divisor-principal.divisor-inferior {
    bottom: 30px;
  }
}