body {
      font-family: 'Lato', sans-serif;
      background: #fbf8f3;
      color: #2e2e2e;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background: url("https://www.transparenttextures.com/patterns/paper-fibers.png");
      opacity: .25;
      pointer-events: none;
    }


    h1,
    h2,
    h3 {
      font-family: 'Cinzel', serif;
      letter-spacing: 2px;
    }

    .gold-text {
      background: linear-gradient(135deg,
          #c5a86a 0%,
          #e6d3a3 25%,
          #b8965a 50%,
          #f2e2b6 75%,
          #a67c3d 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* HERO */
    .hero {
      background:
        linear-gradient(rgba(251, 248, 243, .85), rgba(251, 248, 243, .98)),
        url("img.png");
      background-size: cover;
      background-position: center;
      text-align: center;
      padding: 140px 15px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, .05) inset;
    }

    .hero img {
      width: 220px;
      height: 220px;
      border-radius: 50%;
      border: 6px solid #d6e6ff;
      object-fit: cover;
      margin-bottom: 25px;
    }

    /* HERO TEXT */
    .hero-dove {
      font-size: 2.2rem;
      color: #6c8fcf;
    }

    .hero-bautizo {
      font-family: 'Cinzel', serif;
      font-size: 3.4rem;
      letter-spacing: 5px;

    }

    .hero-cumple {

      font-family: 'Cinzel', serif;
      font-size: 1.7rem;
      letter-spacing: 5px;
      /*text-transform:uppercase;*/
      margin: 30px auto 10px;
      position: relative;
      display: inline-block;
      background: linear-gradient(135deg,
          #c5a86a,
          #e6d3a3,
          #b8965a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

    }

    .hero-cumple::before,
    .hero-cumple::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 80px;
      height: 1px;
      background: #d8c7a3;
    }

    .hero-cumple::before {
      right: 100%;
      margin-right: 20px;
    }

    .hero-cumple::after {
      left: 100%;
      margin-left: 20px;
    }

    .hero-name {
      font-family: 'Cinzel', serif;
      font-size: 3rem;
      letter-spacing: 6px;
      /*text-transform:uppercase;*/
      margin-top: 25px;
    }

    .hero-date {
      font-family: 'Cinzel', serif;
      font-size: 1.3rem;
      letter-spacing: 3px;
      margin-top: 40px;
      color: #6f5a3e;
      position: relative;
      display: inline-block;
      /* text-transform:uppercase;*/
    }

    .hero-dove {
      margin-bottom: 30px;
      filter: drop-shadow(0 4px 10px rgba(184, 150, 90, .35));
      opacity: .95;
    }

    .celebration-section {
      padding: 90px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 👈 centra horizontal */
      justify-content: center;
    }

    .celebration-block {
      max-width: 700px;
      width: 100%;
      text-align: center;
      /* 👈 centra texto */
      margin-bottom: 70px;
    }

    .section-divider {
      width: 80px;
      height: 2px;
      background: linear-gradient(135deg,
          #e6d3a3,
          #b8965a,
          #a67c3d);
      margin: 0 auto 30px;
    }

    .section-title {
      font-family: 'Cinzel', serif;
      font-size: 1.6rem;
      letter-spacing: 4px;

      color: #8c6d46;
      margin-bottom: 20px;
      text-align: center;
    }

    .section-verse {
      font-family: serif;
      font-size: 1.25rem;
      line-height: 1.9;
      letter-spacing: .5px;
      font-style: italic;
      max-width: 600px;
      margin: 25px auto 15px;
      color: #4a3f2f;

    }

    .section-ref {
      font-family: 'Cinzel', serif;
      font-size: .9rem;
      letter-spacing: 1.5px;
      color: #8c6d46;
      margin-top: 8px;
    }

    .section-text,
    .section-verse,
    .section-ref {
      text-align: center;
      /* 👈 fuerza centrado */
    }

    .mensaje-celebracion {
      max-width: 700px;
      margin: 0 auto;
      text-align: center;
      font-family: "Cormorant Garamond", serif;
      font-size: 22px;
      line-height: 1.6;
      color: #4a4a4a;
    }

    .mapa-container {
      max-width: 700px;
      margin: 40px auto 80px auto;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .mapa-container iframe {
      width: 100%;
      height: 280px;
      border: 0;
    }

    .section {
      padding: 90px 20px;
    }

    .ceremonia {
      text-align: center;
    }

    .ceremonia h2 {
      font-family: "Cinzel", serif;
      font-size: 38px;
      letter-spacing: 4px;
      margin-bottom: 25px;
    }

    .ubicacion {
      font-family: "Cinzel", serif;
      font-size: 28px;
      letter-spacing: 3px;
      margin-bottom: 10px;
      color: #6a4c2a;
    }


    .hora {
      font-size: 18px;
      color: #555;
      margin: 6px 0;
    }

    .btn-mapa {
      display: inline-block;
      margin-top: 20px;
      padding: 12px 26px;
      background: #b08a57;
      color: white;
      border-radius: 30px;
      text-decoration: none;
      font-size: 14px;
    }

    .obsequios {
      padding: 100px 20px;
      text-align: center;
      background: #fbf8f3;
    }

    .obsequios h2 {
      font-family: "Cinzel", serif;
      font-size: 36px;
      letter-spacing: 4px;
      margin-bottom: 40px;
    }

    .obsequios-card {
      max-width: 750px;
      margin: auto;
      background: white;
      padding: 50px 60px;
      border-radius: 14px;
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
    }

    .obsequios-card p {
      font-family: "Cormorant Garamond", serif;
      font-size: 20px;
      line-height: 1.8;
      margin-bottom: 18px;
      color: #4a4a4a;
    }

    .mensaje-final {
      margin-top: 30px;
      font-style: italic;
    }

    .icono-regalo {
      font-size: 40px;
      margin-bottom: 20px;
    }

    .recepcion {
      padding: 9px 20px;
      text-align: center;
    }

    .recepcion h2 {
      font-family: "Cinzel", serif;
      font-size: 40px;
      letter-spacing: 4px;
      margin-bottom: 25px;
    }

  

    .salon {
      font-family: "Cinzel", serif;
      font-size: 28px;
      letter-spacing: 3px;
      margin-bottom: 10px;
      color: #6a4c2a;
    }

   
    .mensaje-final {
      font-family: "Cormorant Garamond", serif;
      font-size: 20px;
      text-align: center;

      color: #444;
      line-height: 1.6;
    }

    .corazon {
      font-size: 18px;
      text-align: center;

    }

    /* titulo elegante */
    .titulo {
      font-size: 34px;
      letter-spacing: 4px;
      color: #2c3e50;
      margin-bottom: 50px;
      position: relative;
      display: inline-block;
      padding: 0 25px;
    }

    .titulo::before,
    .titulo::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 80px;
      height: 1px;
      background: #c9a46c;
    }

    .titulo::before {
      right: 100%;
    }

    .titulo::after {
      left: 100%;
    }



    .familia {
      text-align: center;
      padding: 60px 20px;
      font-family: 'Playfair Display', serif;
      background: #f4f8fc;
    }

    .titulo {
      font-size: 34px;
      letter-spacing: 4px;
      margin-bottom: 50px;
      color: #2c3e50;
    }

    /* papás juntos */
    .padres {
      display: flex;
      justify-content: center;
      gap: 80px;
      margin-bottom: 40px;
    }

    .persona {
      text-align: center;
    }

    .rol {
      display: block;
      font-size: 14px;
      letter-spacing: 2px;
      color: #8a8a8a;
    }

    .nombre {
      font-size: 22px;
      color: #2c3e50;
      font-weight: 500;
    }

    /* madrina destacada */
    .madrina {
      margin-top: 10px;
    }

    .linea {
      width: 90px;
      height: 1px;
      background: #c9a46c;
      margin: 10px auto;

    }

    .madrina .nombre {
      font-size: 26px;
      color: #1f2937;
      font-weight: 600;
    }

    .abuelos {
      background: #f7f7f7;
      text-align: center;
      padding: 60px 20px;
      font-family: 'Playfair Display', serif;
    }

    .titulo {
      font-size: 32px;
      letter-spacing: 4px;
      margin-bottom: 40px;
      color: #2c3e50;
    }

    .contenedor-abuelos {
      display: flex;
      justify-content: center;
      gap: 80px;
      flex-wrap: wrap;
    }

    .grupo {
      max-width: 250px;
    }

    .rol {
      font-size: 14px;
      letter-spacing: 2px;
      color: #8a8a8a;
      display: block;
    }

    .linea {
      width: 80px;
      height: 1px;
      background: #c9a46c;
      margin: 10px auto;
    }

    .grupo p {
      font-size: 20px;
      margin: 5px 0;
      color: #2c3e50;
    }


    .ceremonia{
    text-align:center;
    padding:9px 20px 50px 20px;
}

.titulo-seccion{
    font-family:"Cinzel", serif;
    font-size:40px;
    letter-spacing:5px;
    margin-bottom:30px;
    color:#444;
}

.hora{
    font-size:22px;
    margin-bottom:25px;
    color:#555;
}

.lugar{
    font-family:"Cinzel", serif;
    font-size:30px;
    letter-spacing:4px;
    color:#b08a57;
    margin-bottom:10px;
}

.direccion{
    font-size:18px;
    color:#666;
}
   .ampersand{
    font-family: "Playfair Display", serif;
    font-size: 40px;
    color:#b08a57;   /* dorado elegante */
    margin:0 10px;
}


    @media (max-width:768px) {

      .titulo::before,
      .titulo::after {
        width: 40px;
      }

      .hero {
        padding: 90px 15px;
        background-position: center 20%;
      }



      .contenedor-abuelos {
        flex-direction: column;
        align-items: center;
        /* centra horizontal */
        gap: 35px;
      }

   
      .grupo {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
      }

    }

    @media (max-width:768px) {


      .hero-dove svg {
        width: 60px;
        height: auto;
      }

      .hero-bautizo {
        font-size: 28px;
        letter-spacing: 4px;
      }

      .hero-cumple {
        font-size: 16px;
      }

      .hero-name {
        font-size: 32px;
      }

      .hero-date {
        font-size: 14px;
        letter-spacing: 2px;
      }

    }

    @media (max-width:768px) {

      .contenedor-abuelos {
        flex-direction: column;
        gap: 40px;
      }

    }

    /* RESPONSIVE */
    @media(max-width:576px) {
      .hero {
        padding: 90px 15px
      }

      .hero img {
        width: 180px;
        height: 180px
      }

      .hero-dove {
        font-size: 1.8rem
      }

      .hero-bautizo {
        font-size: 2.4rem
      }

      .hero-cumple {
        font-size: 1.1rem
      }

      .hero-name {
        font-size: 2rem
      }
    }

    /* FONDOS */
    .bg-palomas {
      background:
        linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, .95)),
        url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac");
    }

    .bg-trigo {
      background:
        linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, .95)),
        url("https://images.unsplash.com/photo-1500382017468-9049fed747ef");
    }

    .bg-cumple {
      background:
        linear-gradient(rgba(255, 255, 255, .93), rgba(255, 255, 255, .93)),
        url("https://images.unsplash.com/photo-1530103862676-de8c9debad1d");
    }

    /* PERSONAS */
    .person-card {
      background: linear-gradient(135deg, #eef5ff, #fff);
      border-radius: 28px;
      padding: 25px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
    }

    .person-card img {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
    }

    /* BOTONES */
    .btn-pastel {
      background: linear-gradient(135deg, #bcd7ff, #e8f1ff);
      border: none;
      color: #003366;
    }

    /* MUSICA */
    .music-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 55px;
      height: 55px;
      background: #c6dbff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1000;
    }

    /* CONFIRMACION */
    #successOverlay {
      position: fixed;
      inset: 0;
      background: rgba(220, 235, 255, .95);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }

    #successOverlay div {
      background: #fff;
      padding: 50px;
      border-radius: 30px;
      text-align: center;
      animation: zoom .6s ease;
    }

    @keyframes zoom {
      from {
        transform: scale(.5);
        opacity: 0
      }

      to {
        transform: scale(1);
        opacity: 1
      }
    }

    footer {
      background: #eaf2ff
    }