html, body {
      margin: 0;
      padding: 0;
      scroll-behavior: smooth;
      font-family: 'Georgia', serif;
    }
section {
  min-height: 100vh;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(to right, transparent, #9993 50%, transparent);
}


    #portada {
      text-align: center;
    }

    #portada .portada-box {
      border: 1px solid #c0c7ce;
      border-radius: 20px 0 0 0;
      padding: 2rem;
      max-width: 480px;
      width: 100%;
      background-color: #ffffff;
      position: relative;
    }

    #portada h1 {
      color: #394867;
      font-size: 2rem;
      margin-bottom: 1rem;
    }

    #portada img {
      max-width: 300px;
      margin: 1rem 0;
    }

    #portada h2 {
      color: #607d8b;
    }

    #portada p {
      color: #455a64;
    }



    #itinerario {
      background-color: #f1dfe5;
    }

    #asistencia {
      background-color: #e4e0f6;
    }

    .btn-primary {
      background-color: #394867;
      border-color: #394867;
    }

    .btn-primary:hover {
      background-color: #2c3e50;
      border-color: #2c3e50;
    }
    .azulito{
      color:#6D8498 !important;
    }

    .fuenteboda{
      font-family: Edwardian !important;
    }

.fs10 { font-size: 10px; }
.fs11 { font-size: 11px; }
.fs12 { font-size: 12px; }
.fs13 { font-size: 13px; }
.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.fs16 { font-size: 16px; }
.fs17 { font-size: 17px; }
.fs18 { font-size: 18px; }
.fs19 { font-size: 19px; }
.fs20 { font-size: 20px; }
.fs21 { font-size: 21px; }
.fs22 { font-size: 22px; }
.fs23 { font-size: 23px; }
.fs24 { font-size: 24px; }
.fs25 { font-size: 25px; }
.fs26 { font-size: 26px; }
.fs27 { font-size: 27px; }
.fs28 { font-size: 28px; }
.fs29 { font-size: 29px; }
.fs30 { font-size: 30px; }
.fs31 { font-size: 31px; }
.fs32 { font-size: 32px; }
.fs33 { font-size: 33px; }
.fs34 { font-size: 34px; }
.fs35 { font-size: 35px; }
.fs36 { font-size: 36px; }
.fs37 { font-size: 37px; }
.fs38 { font-size: 38px; }
.fs39 { font-size: 39px; }
.fs40 { font-size: 40px; }
.fs41 { font-size: 41px; }
.fs42 { font-size: 42px; }
.fs43 { font-size: 43px; }
.fs44 { font-size: 44px; }
.fs45 { font-size: 45px; }
.fs46 { font-size: 46px; }
.fs47 { font-size: 47px; }
.fs48 { font-size: 48px; }
.fs49 { font-size: 49px; }
.fs50 { font-size: 50px; }
.fs51 { font-size: 51px; }
.fs52 { font-size: 52px; }
.fs53 { font-size: 53px; }
.fs54 { font-size: 54px; }
.fs55 { font-size: 55px; }
.fs56 { font-size: 56px; }
.fs57 { font-size: 57px; }
.fs58 { font-size: 58px; }
.fs59 { font-size: 59px; }
.fs60 { font-size: 60px; }
.fs61 { font-size: 61px; }
.fs62 { font-size: 62px; }
.fs63 { font-size: 63px; }
.fs64 { font-size: 64px; }
.fs65 { font-size: 65px; }
.fs66 { font-size: 66px; }
.fs67 { font-size: 67px; }
.fs68 { font-size: 68px; }
.fs69 { font-size: 69px; }
.fs70 { font-size: 70px; }

.portada {
  position: relative;
  width: 100%;
  max-width: 400px; /* ajusta según el diseño */
  margin: 0 auto;
  border: 1px solid #ccc;
}

.avion {
    position: absolute;
    bottom: -36px;
    right: -20px;
    width: 170px;
}

.evento {
  text-align: center;
  font-family: 'Edwardian'
  color: #4d4d4d;
  padding: 40px 20px;
}

.titulo {
  font-weight: normal;
  margin: 10px 0;
  color: #6e6e6e;
}

.icono {
  width: 80px;
  margin: 10px 0;
  filter: grayscale(100%) brightness(1.5);
}

.lugar {
  font-size: 20px;
  font-family: 'Georgia', serif;
  margin: 8px 0;
}

.colonia {
  font-size: 18px;
  font-family: 'Georgia', serif;
  color: #9eb1c2;
  margin-bottom: 4px;
}

.hora {
  font-size: 20px;
  font-style: italic;
  margin-bottom: 40px;
}

.sello img {
  width: 60px;
  margin: 20px auto;
}

.seccion-checkin {
  text-align: center;
  padding: 4rem 1.5rem;
  font-family: 'Great Vibes', 'Georgia', serif;
  background-color: #fefefe;
  color: #4c4c4c;
}

.img-trayectoria-checkin {
  width: 180px;
  margin-bottom: 2rem;
}

.checkin-nombres {
  color: #7c8692;
  margin-bottom: 1rem;
  font-weight: bold;
  
}

.texto-checkin {
  white-space: nowrap; /* evita salto de línea */
  overflow-x: auto;
  text-align: center;
}

.checkin-invitacion {
  font-family: 'Georgia', serif;
  color: #6a6a6a;
}

.checkin-bloque-texto {
  margin-bottom: 3rem;
}

.checkin-titulo {
  color: #6e7b91;
  font-weight: normal;
  display: block;
}

.checkin-instruccion {
  display: block;
  margin-top: 0.3rem;
}

.checkin-elementos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

.img-logo-checkin {
  width: 120px;
}

.img-pasaporte-checkin {
  width: 80px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.img-pasaporte-checkin:hover {
  transform: scale(1.07);
}

.frase-checkin {
  text-align: center;
  font-family: 'Great Vibes', 'Georgia', serif;
  color: #555;
  line-height: 1;
}

.frase-checkin p {
  margin: 0;
}

.seccion-novios {
  background-color: #788ba0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 1rem;
}

.contenedor-video {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

video {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.bloqueo-captura {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7);
  color: white;
  font-family: 'Georgia', serif;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-size: 18px;
  display: none;
  z-index: 5;
  text-align: center;
  backdrop-filter: blur(6px);
}

.seccion-agradecimiento {
  background: #f8f9fa;
  padding: 3rem 1rem;
  display: flex;
  justify-content: center;
}

.agradecimiento-tarjeta {
  position: relative;
  background-color: #7b8ea5;
  color: #ffffff;
  font-family: 'Edwardian';
  padding: 2rem 1.5rem;
  border-radius: 20px;
  max-width: 360px;
  text-align: center;
  line-height: 1.6;
  font-size: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  overflow: hidden;
}

.frase {
  margin-bottom: 2rem;
}

.decoracion {
  position: absolute;
  width: 50px;
  opacity: 0.3;
}

.decoracion-izq {
  top: 10px;
  left: 10px;
}

.decoracion-der {
  bottom: 10px;
  right: 10px;
}


.seccion-tematica {
  background-color: #f8f9fa;
  padding: 3rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-tematica {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.seccion-contacto {
  text-align: center;
  background-color: #fdfdfd;
  padding: 4rem 1.5rem 5rem;
  font-family: 'Edwardian';
  color: #4b4b4b;
  position: relative;
}

.contacto-rol {
  margin-bottom: 1rem;
}

.contacto-nombre {
  color: #5f7c99;
  margin-bottom: 2rem;
}

.contacto-instruccion {
  margin-bottom: 0.5rem;
}

.contacto-telefono {
  color: #5f7c99;
  margin-bottom: 2rem;
}

.contacto-horario-titulo {
  margin-bottom: 0.3rem;
}

.contacto-horario {
  color: #5f7c99;
}

.img-avion-contacto {
  margin-top: 3rem;
  width: 60%;
  opacity: 0.8;
}


.seccion-vestimenta {
  padding: 3rem 1.5rem;
  text-align: center;
  font-family: 'Georgia', serif;
  background-color: #ffffff;
  color: #4d4d4d;
}

.titulo-vestimenta {
  margin-bottom: 0.5rem;
}

.subtitulo-vestimenta {
  font-weight: bold;
  color: #62748b;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}

.imagenes-vestimenta img {
  width: 120px;
  margin: 0 10px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.detalle-vestimenta {
  margin: 1.5rem 0 1rem;
}

.nota-vestimenta {
  font-style: italic;
  margin-bottom: 1.5rem;
  color: #6c6c6c;
}

.colores-prohibidos {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.color {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.color.plata {
  background: #888;
  color: white;
  font-size: 12px;
  line-height: 35px;
  width: 50px;
  border: none;
  font-family: 'Georgia', serif;
  border-radius: 20px;
}

.nota-prohibido {
  font-style: italic;
  margin-bottom: 2rem;
}

.mensaje-vestimenta {
  background-color: #e7eef5;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  line-height: 1.6;
  color: #4a4a4a;
  font-style: italic;
  max-width: 400px;
  margin: 0 auto;
}


.seccion-anuncios {
  padding: 3rem 1.5rem;
  text-align: center;
  font-family: 'Georgia', serif;
  background-color: #ffffff;
  color: #444;
}

.titulo-anuncios {
  margin-bottom: 0.5rem;
  color: #5c6f87;
}

.separador {
  margin: 1rem 0;
  color: #adb7c1;
}

.texto-anuncios {
  line-height: 1.6;
}

.texto-anuncios.azul {
  color: #6c87a5;
}

.texto-anuncios.cursiva {
  font-style: italic;
  color: #666;
}

.texto-anuncios.final {
  margin-top: 2rem;
  color: #444;
}

.lista-anuncios {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
}

.lista-anuncios li {
  font-style: italic;
  color: #6c87a5;
  margin-bottom: 0.7rem;
  position: relative;
  padding-left: 1.5rem;
  text-align: left;
}

.lista-anuncios li::before {
  content: "≈";
  position: absolute;
  left: 0;
  color: #b0b0b0;
}

.line{
  line-height: 1 !important;
}


  .fondo-menu {
    background: #dee6ec !important;
    font-family: 'Edwardian';
  }
  .navbar-toggler {
    border: none;
  }
  .boton-menu i {
    font-size: 1.5rem;
    color: #555;
  }
  .nav-link.link-menu {
    font-size: 22px;
    color: #3a3a3a;
    transition: color 0.3s ease;
  }
  .nav-link.link-menu:hover {
    color: #8b9cb3;
  }
  .navbar-nav {
    gap: 1rem;
  }


  .seccion-registro {
  padding: 4rem 1rem;
  display: flex;
  justify-content: center;
  background-color: #fefefe;
}

.boleto-formulario {
  position: relative;
  width: 300px;
}

.boleto-imagen {
  width: 100%;
  display: block;
}

.formulario-registro {
  position: absolute;
  top: 17%;
  left: 10%;
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Georgia', serif;
}

.formulario-registro input,
.formulario-registro button {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  font-size: 14px;
  padding: 6px;
  color: #fff;
  outline: none;
}

.formulario-registro input::placeholder {
  color: rgba(255,255,255,0.6);
  font-style: italic;
}

.formulario-registro button {
  margin-top: 10px;
  background-color: #7894ac;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  border: none;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.formulario-registro button:hover {
  background-color: #5c7e9c;
}


input::placeholder {
    color: white !important;
    opacity: 1;
}

.form-control {
     border-radius: inherit !important;
     color:#fff !important;
}

.btn-primary {
    background-color: #708394 !important;
    border-color: #708394 !important;
}
.btn-primary:hover {
    background-color: #708394 !important;
    border-color: #708394 !important;
}

.custom-close-btn {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #708394;
    cursor: pointer;
    z-index: 1055;
    line-height: 1;
}

    .custom-close-btn:hover {
        opacity: 0.8;
        transform: scale(1.1);
    }

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}



@font-face {
    font-family: 'Edwardian';
    src: url('fonts/EdwardianScriptITC.ttf') format('truetype');
}

.confirmacion-boda {
    background-color: #f5f8fa;
    padding: 40px 30px;
    border-radius: 12px;
    font-family: 'Edwardian', cursive;
    text-align: center;
    position: relative;
    color: #2d2d2d;
    max-width: 500px;
    margin: auto;
}

    .confirmacion-boda .mensaje-boda {
        font-size: 24px;
        line-height: 1.6;
        margin-bottom: 30px;
    }

.qr-container {
    display: inline-block;
    text-align: center;
}

.qr-img {
    width: 160px;
    height: 160px;
    display: block;
    margin: auto;
}

.folio-codigo {
    font-size: 16px;
    margin-top: 10px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #333;
}

.info-evento {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin: 30px 0 20px;
}

.mensaje-final {
    font-family: 'Edwardian', cursive;
    font-size: 22px;
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.btn-calendario {
    display: inline-block;
    background-color: #708394;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 6px;
    font-size: 15px;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.cerrar {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #888;
    cursor: pointer;
}