:root{
    --bg: #f7f4ef;
    --ink: #1d1d1d;
    --olive: #b86b7f;
    --olive-dark: #93525e;
  
    --line: rgba(29,29,29,.18);
    --card: rgba(255,255,255,.65);

    --title: "Cinzel", serif;
    --cursive: "Pinyon Script", cursive;
    --text:"Playfair", serif;

     --bg-rosa-original:linear-gradient(120deg,  #f5c3cc 0%, #e58a9b 20%,#d46a7f 40%,#f7aebc 50%, #d46a7f 60%, #c85a70 80%, #e58a9b 100%);
    --bg-rosa-intenso:linear-gradient(120deg, #ffb3c3 0%, #f45d7b 20%,#de3f61 40%, #ffc2d0 50%,  #de3f61 60%, #c92f51 80%, #f45d7b 100%);
    --bg-rosa-suave:linear-gradient(120deg,#fbe1e6 0%,#f2b7c2 20%,#e99aa9 40%, #fce7ec 50%,#e99aa9 60%,#df8698 80%,#f2b7c2 100% );
    --bg-coral-durazno: linear-gradient(120deg,#ffd9c9 0%,#ffad8a 20%,#f08a73 40%,#ffe6d9 50%,#f08a73 60%, #db6f5c 80%, #ffad8a 100% );
  }
  
  *{box-sizing:border-box}
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  body{
    margin:0;
    background:white;
    color:var(--ink);
  }
  
  .cover{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:28px 18px 50px;
    position:relative;
    overflow:hidden;
    background-image: url("Images/FONDOS/FA.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
    
  .cover-inner{
    max-width:520px;
    width:100%;
  }
  
  .mono{
    letter-spacing:.35em;
    font-weight:600;
    color:var(--olive);
    text-transform:uppercase;
    font-size:14px;
  }
  
  .couple{
    margin:12px 0 6px;
    font-size:48px;
    font-weight:500;
    font-family: var(--cursive);
    background: linear-gradient(120deg, 
    #f5c3cc 0%,
    #e58a9b 20%,
    #d46a7f 40%,
    #f7aebc 50%,   /* ← highlight controlado */
    #d46a7f 60%,
    #c85a70 80%,
    #e58a9b 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    color: transparent;
    animation: foilShine 10s cubic-bezier(.4,0,.2,1) infinite alternate;
  }
  
  @keyframes foilShine {
    0% {
      background-position: 0% center;
    }
    100% {
      background-position: 200% center;
    }
  }

  .amp{color:var(--olive)}
  
  .tag{
    margin:0 0 18px;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:15px;
    color:rgba(29,29,29,.7);
    font-family: var(--title);
  }
  
  .envelope-wrap{display:flex;justify-content:center}
  .envelope{
    width:min(340px, 82vw);
    height:auto;
    filter: drop-shadow(0 18px 24px rgba(0,0,0,.12));
    transform: translateY(0);
    transition: transform .5s ease;
  }
  
  .guest-card{
    margin:18px auto 16px;
    width:min(420px, 92vw);
    border:1px solid var(--line);
    background:var(--card);
    padding:14px 14px;
    backdrop-filter: blur(6px);
  }
  
  .guest-line{
    font-weight:600;
    letter-spacing:.05em;
    margin-bottom:6px;
    font-family: var(--cursive);
    font-size: 30px;
    background: linear-gradient(
  120deg,
  #d6d7dc 0%,
  #b3b7bf 18%,
  #8e949d 34%,
  #686f78 46%,
  #cfd3da 52%,
  #8e949d 63%,
  #565c65 80%,
  #b3b7bf 95%
);
    background-size: 200% auto;
    -webkit-background-clip: text;
    color: transparent;
      animation: foilShine 10s cubic-bezier(.4,0,.2,1) infinite alternate;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  
  .guest-sub{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:rgba(29,29,29,.7);
    font-family: var(--title);
    font-size: 15px;
  }
  
  .guest-seats{
    margin-top:6px;
    font-size:14px;
    color:#a16767;
    font-family: var(--text);
    font-size: 20px;
    font-style: italic;
  }
  
  .btn-primary{
    border:none;
    padding:12px 18px;
    background:var(--olive);
    color:white;
    font-family:var(--title);
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:12px;
    cursor:pointer;
    transition:.25s ease;
    box-shadow: #1d1d1d;
  }
a{
    text-decoration:none;  
  }
  .btn-primary:hover{background:var(--olive-dark)}
  .btn-primary:disabled{opacity:.6;cursor:not-allowed}
  
  .scroll-hint{
    position:absolute;
    bottom:14px;
    width:100%;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(29,29,29,.55);
  }
  .envelope {
    cursor: pointer;
    transition: transform .3s ease, filter .3s ease;
  }
  
  .envelope:hover {
    transform: translateY(-6px) scale(1.03);
    filter: drop-shadow(0 24px 32px rgba(0,0,0,.18));
  }
  
  .invitation{display:none}
  .invitation.is-open{display:block}
  
  .hero-photo{
    height:100vh;
    position:relative;
    background:url("Images/FOTOS/V5.jpeg") center/cover no-repeat;
  }
  .hero-photo {
    position: relative;
    overflow: visible; /* IMPORTANTE */
  }
  .hero-overlay{
    position:absolute; inset:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:26px;
  }
  /* ================= TRUE LOVE DORADO ================= */

.reveal-gold {
    font-family: var(--script);
    font-size: 50px;
    margin: 6px 0;
    /* Degradado dorado */
    background: linear-gradient(
  120deg,
  #d6d7dc 0%,
  #b3b7bf 18%,
  #8e949d 34%,
  #686f78 46%,
  #cfd3da 52%,
  #8e949d 63%,
  #565c65 80%,
  #b3b7bf 95%
);
    background-size: 200% auto;
    -webkit-background-clip: text;
    color: transparent;
      animation: foilShine 10s cubic-bezier(.4,0,.2,1) infinite alternate;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  
  /* Cuando aparece */
  .reveal-gold.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  .quote-top,.quote-bottom{margin:0;font-size:14px;letter-spacing:.06em}
  
  .names-editorial{
    padding:44px 18px;
    text-align:center;
    background-image: url("Images/FONDOS/WA1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .album-section{
    text-align:center;
    background-image: url("Images/FONDOS/WA1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px;
  }
  
  .names-grid{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    max-width:720px;
    margin:0 auto;
  }
  
  .name-lines, .closing h3{
    font-size:60px;
    line-height:1.3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    font-family: var(--cursive);
    background: linear-gradient(120deg, 
    #f5c3cc 0%,
    #e58a9b 20%,
    #d46a7f 40%,
    #f7aebc 50%,   /* ← highlight controlado */
    #d46a7f 60%,
    #c85a70 80%,
    #e58a9b 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    color: transparent;
    animation: foilShine 10s cubic-bezier(.4,0,.2,1) infinite alternate;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  .quote-names{
      font-size:40px;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: var(--cursive);
      background: linear-gradient(
        120deg,
        #d6d7dc 0%,
        #b3b7bf 18%,
        #8e949d 34%,
        #686f78 46%,
        #cfd3da 52%,
        #8e949d 63%,
        #565c65 80%,
        #b3b7bf 95%
      );
      background-size: 200% auto;
      -webkit-background-clip: text;
      color: transparent;
      animation: foilShine 10s cubic-bezier(.4,0,.2,1) infinite alternate;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  .date-vertical{
    border-left:1px solid var(--line);
    padding-left:16px;
    display:flex;
    flex-direction:column;
    gap:8px;
    letter-spacing:.12em;
    font-weight:600;
    font-size: 50px;
    font-family: var(--text);
    font-style: italic;
    background: linear-gradient(
  120deg,
  #d6d7dc 0%,
  #b3b7bf 18%,
  #8e949d 34%,
  #686f78 46%,
  #cfd3da 52%,
  #8e949d 63%,
  #565c65 80%,
  #b3b7bf 95%
);
    background-size: 200% auto;
    -webkit-background-clip: text;
    color: transparent;
      animation: foilShine 10s cubic-bezier(.4,0,.2,1) infinite alternate;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  
  .names-text{
    max-width:560px;
    font-size:20px;
    color:#e58a9b;
    font-family: var(--text);
    padding: 0  35px;
  }
  
  .music-text{
    margin:0;
    font-size:25px;
    color:#e58a9b;
   font-family: var(--cursive);
  }
  
  .music-btn{
    margin-top:10px;
    width:52px;height:52px;
    border-radius:50%;
    border:1px solid var(--line);
    background:transparent;
    cursor:pointer;
    font-size:16px;
    color: #e58a9b;
  }
  
#countdown{
    padding:34px 18px 10px;
    text-align:center;
    display: flex;
    flex-direction: column;
    background-image: url("Images/FONDOS/WA2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .countdown h3{
    margin:0 0 18px;
    font-size:30px;
    font-family: var(--cursive);
 background: linear-gradient(120deg, 
    #f5c3cc 0%,
    #e58a9b 20%,
    #d46a7f 40%,
    #f7aebc 50%,   /* ← highlight controlado */
    #d46a7f 60%,
    #c85a70 80%,
    #e58a9b 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    color: transparent;
      animation: foilShine 10s cubic-bezier(.4,0,.2,1) infinite alternate;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  /* ====== CONTADOR HORIZONTAL ====== */
  .count-row{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:nowrap;        /* ✅ fuerza horizontal */
  }
  .count-item{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .label{
    margin-top:8px;
    font-size:10px;
    letter-spacing:3px;
    color:#e58a9b;
    text-transform: uppercase;
  }
  /* ✅ si en pantallas muy pequeñas no caben, se ajusta */
  @media (max-width: 360px){
    .count-row{ gap:8px; }
    .flip{ width:68px; }
    .flip .digit{ font-size:26px; }
  }
  /* ====== FLIP DOWN REAL (PARTIDO) ====== */
  .flip-single{
    width:78px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background:#f4dbdf;
    box-shadow:0 6px 12px rgba(0,0,0,0.15);
    transform-style:preserve-3d;
  }
  
  .flip-single .digit{
    font-family:"Cormorant Garamond", serif;
    font-size:30px;
    font-weight:700;
    line-height:1;
    color:#e58a9b;
    letter-spacing:0;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
  }
  
  .flip-single.is-flipping{
    animation: flipCard .5s ease;
  }
  
  @keyframes flipCard{
    0% { transform: rotateX(0); }
    50% { transform: rotateX(-90deg); }
    100% { transform: rotateX(0); }
  }
  

  

/* FOTO que invade la siguiente sección */
.half-photo{
    position: relative;
    z-index: 80;                 /* ✅ encima de itinerary */
    transform: translateY(55px); /* ✅ cuánto invade (ajusta) */
  }
  
  .half-photo img{
    width:100%;
    display:block;
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
    z-index: 80;   
  }
  /* la sección siguiente baja para dejar espacio al overlay de la foto */  
  .blessing{
    padding:74px 18px 34px;
    text-align:center;
  }
  .blessing h3{
    font-size: 36px;
    font-family: var(--cursive);
    font-weight: 500;
    /* Degradado dorado */
    background: linear-gradient(120deg, 
    #f5c3cc 0%,
    #e58a9b 20%,
    #d46a7f 40%,
    #f7aebc 50%,   /* ← highlight controlado */
    #d46a7f 60%,
    #c85a70 80%,
    #e58a9b 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    color: transparent;
    animation: foilShine 10s cubic-bezier(.4,0,.2,1) infinite alternate;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
   margin-top: 30px;
   margin-bottom: 0;
  }
  .blessing p {
    margin-top: 10px;
    font-family: var(--text);
    font-size: 20px;
    color: #e58a9b;
    text-align: center;   /* ✅ esto es lo que centra texto */
  }
  .parents{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
  }
  .parents p{
    margin:0;
    font-family: var(--cursive);
    font-size:38px;
    background:linear-gradient(
        120deg,
        #d6d7dc 0%,
        #b3b7bf 18%,
        #8e949d 34%,
        #686f78 46%,
        #cfd3da 52%,
        #8e949d 63%,
        #565c65 80%,
        #b3b7bf 95%
      );
    background-size: 200% auto;
    -webkit-background-clip: text;
    color: transparent;
    animation: foilShine 10s cubic-bezier(.4,0,.2,1) infinite alternate;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    padding: 10px;
  }

  #itinerary{
    position: relative;
    background-image: url("Images/FONDOS/FA2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .itinerary, .rsvp{
    padding:30px 18px 44px;
    display:grid;
    gap:18px;
    max-width:700px;
    margin:0 auto;
  }
  .event-card{
    padding:16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
.lord-icon-style{
  width: 150px;
  height: 150px;
}
  .event-icon img{
    width:90%;
    height:90%;
    object-fit:contain;
    margin-top: 30px;
  }
  .event-top, .gifts, .rsvp, .playlist-section, .album-section{
    display:flex; 
    gap:12px; 
    align-items:flex-start;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    display:flex;
    flex-direction:column; /* si quieres todo centrado */
    align-items:center;
    text-align:center;
  }
  /* ================= IMAGEN DEL LUGAR ================= */
.event-photo {
  margin-top: 18px;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
}
.event-photo img {
  width: 100%;
  height: 200px;                 /* puedes ajustar */
  object-fit: cover;
  display: block;
  transition: transform 1s ease;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
/* Zoom suave al hacer hover */
.event-card:hover .event-photo img {
  transform: scale(1.05);
}
/* Sombra elegante */
.event-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,rgba(0,0,0,0) 60%,rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}
  .event-title, .dress h3, .gifts h3, .rsvp h3, .playlist-section h2, .gallery h3, .album-section h2, .album-section h1, .love-quote p, .wishes-section h2, .gifts h2, .love-quote p{
    font-size:40px;
    font-family: var(--cursive);
    display: flex;
    justify-content: center;
 background: linear-gradient(120deg, 
    #f5c3cc 0%,
    #e58a9b 20%,
    #d46a7f 40%,
    #f7aebc 50%,   /* ← highlight controlado */
    #d46a7f 60%,
    #c85a70 80%,
    #e58a9b 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    color: transparent;
      animation: foilShine 10s cubic-bezier(.4,0,.2,1) infinite alternate;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  .dress h3, .dress-strong, .dress-note, .gifts h3, .gifts-strong, .rsvp h3, .rsvp-strong, .playlist-section h2, .gallery h3, .album-section h2, .album-section h1, .love-quote p, .wishes-section h2,p{
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px;
  }
  .dress-strong, .dress-note, .gifts-strong, .rsvp-strong, p{
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px;
  }
  .dress-note {
    margin-bottom: 30px;
  }
  .event-place, .dress-strong{
    font-size:20px;
    margin-top:4px;
    font-family: var(--title);
    display: flex;
    justify-content: center;
    color:#e58a9b;
}
  .event-time{
    color:#e58a9b;
    margin-top:2px;
    font-weight:600;
    font-family: var(--text);
    display: flex;
    justify-content: center;
    font-size: 20px;
}
.event-address, .dress-note, .gifts-strong, .rsvp-strong, .playlist-section p, .gallery p, .album-section p, .closing p, label, p{
    margin-top: 10px;
    font-family: var(--text);
    font-size: 20px;
    color: #b86778;
    text-align: center;   /* ✅ esto es lo que centra texto */
    line-height: 1.55;
  }
  album-section. p {
    padding: 10px;
  }
  .no-kids p{
 background: linear-gradient(120deg, 
    #f5c3cc 0%,
    #e58a9b 20%,
    #d46a7f 40%,
    #f7aebc 50%,   /* ← highlight controlado */
    #d46a7f 60%,
    #c85a70 80%,
    #e58a9b 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    color: transparent;
      animation: foilShine 10s cubic-bezier(.4,0,.2,1) infinite alternate;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin-top: 10px;
    font-family: var(--text);
    font-size: 20px;
    text-align: center;   /* ✅ esto es lo que centra texto */
  }
  .btn-outline{
    display:inline-block;
    margin-top:12px;
    padding:10px 14px;
    border:1px solid #e58a9b;
    text-decoration:none;
    color:#e58a9b;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:11px;
    font-family: var(--title);
  }
  /* Botón principal */
#btnConfirmarRsvp{
    display:inline-block;
    margin-top:12px;
    padding:10px 14px;
    border:1px solid #e58a9b;
    text-decoration:none;
    color:#e58a9b;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:11px;
    font-family: var(--title);
    cursor: pointer;
    transition: .25s ease;
    background-color: transparent;
  }
  #btnConfirmarRsvp:hover{
    background: #e58a9b;
    color:white;
  }
  
  #btnConfirmarRsvp:disabled{
    opacity: .6;
    cursor: not-allowed;
  }

  /* Mensajes */
.rsvp-msg{
    margin: 14px auto 0;
    max-width: 560px;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: var(--text);
    font-size: 14px;
    line-height: 1.35;
  }
  
  .rsvp-msg.ok{
    color: var(--olive-dark);
  }
  
  .rsvp-msg.error{
    background: rgba(200, 0, 0, .08);
    border: 1px solid rgba(200, 0, 0, .18);
    color: rgba(130, 0, 0, .95);
  }
  /* Confirmado UI */
.rsvp-confirmed{
    background: rgba(85,107,47,.12) !important;
    color: var(--olive-dark) !important;
    border-color: rgba(85,107,47,.35) !important;
  }
  /* ================= MODAL ================= */
.rsvp-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity .25s ease;
    padding: 18px;
  }
  
  .rsvp-backdrop.show{
    opacity: 1;
  }
  .rsvp-modal{
    width: min(520px, 96vw);
    background: #fff;
    border-radius: 18px;
    padding: 18px 18px 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
    text-align: left;
    position: relative;
    transform: translateY(8px);
    transition: transform .25s ease;
  }
  .rsvp-backdrop.show .rsvp-modal{
    transform: translateY(0);
  }
  /* Responsive */
  @media (max-width: 420px){
    .rsvp-actions{
      flex-direction: column;
    }
  }      
/* Separadores normales (una sola foto) */
/* Separador con background-image */
.full-sep[style*="background-image"]{
    height: 65vh;                 /* ajusta: 55vh / 70vh */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
/* SOLO el separador rotativo */
.full-sep-rotating{
    position: relative;
    width: 100%;
    height: 65vh;
    overflow: hidden;
    background:#000;
  }
  
  .full-sep-rotating > img{
    width: 100%;
    height: 100%;
    object-fit: cover;          /* ✅ full-bleed para slideshow */
    object-position: center;
    transition: opacity .6s ease;
  }
  .dress{
    background-color: white;
    padding:16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
.playlist-section{
    padding:20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("Images/FONDOS/WA2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
.gifts{
    padding:16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("Images/FONDOS/WA2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .love-quote{
    padding:16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("Images/FONDOS/WA1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 55vh;
  }

  .dress, .gifts, .closing{
    padding:44px 18px;
    text-align:center;
  }
  /* ================= CLOSING ================= */

.closing{
    padding: 10px 10px 10px;
    text-align: center;
    background-color: white; /* tono claro elegante */
    position: relative;
  }
  .closing .mono{
    margin-bottom: 24px;
  }
  .closing .mono-img{
    width: 110px;
    max-width: 40%;
    opacity: 0.95;
  }
  /* Nombre pareja */

  /* Fecha */
  /* Línea decorativa sutil */
  .closing::after{
    content:"";
    display:block;
    width: 60px;
    height: 1px;
    background: var(--olive);
    margin: 28px auto 0;
    opacity: 0.5;
  }
  #footer{
    padding:20px 18px 34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background-color:#e2b5bd;
    flex-direction: column;
  }
  .footer-brand{
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:12px
}
  #social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  #social-icons a {
    color: white;
    font-size: 2.5rem;
    transition: color 0.3s;
}

#social-icons a {
    color: white;
    margin: 0 10px;
    font-size: 1.5rem;
}
  .footer-logo img {
    width: 90px;
    height: auto;
}
  /* Fade In */
  .fade-in-element{
    opacity:0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .fade-in-element.is-visible{
    opacity:1;
    transform: translateY(0);
  }

  /* ================= TRANSICIÓN PORTADA ================= */

.cover {
    transition: opacity .6s ease, transform .6s ease;
  }
  
  .cover.is-hidden {
    opacity: 0;
    transform: scale(1.02);
    pointer-events: none;
  }
  
  .invitation {
    display: none;
    opacity: 0;
    transition: opacity .6s ease;
  }
  
  .invitation.is-open {
    display: block;
    opacity: 1;
  }
  .mono {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .mono-img {
    width: 120px; /* ajusta tamaño aquí */
    max-width: 40vw;
    height: auto;
    object-fit: contain;
  }
  .hero-mono-img {
    width: 60px;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, .1));
  }
  .calendar-btn{
    margin: 18px auto 0;
    display: inline-block;
    border-color: #e58a9b;
    color: #e58a9b;
    background-color: white;
  }
  .calendar-btn:hover{
    background: #e58a9b;
    color: #fff;
    border-color: #e58a9b;
  }

/*ANIMACIONES*/
/* BOTONES: se nota en desktop (hover) y en celular (tap) */
button, .btn-outline, a.btn-outline {
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    will-change: transform;
  }
  
  button:hover, .btn-outline:hover, a.btn-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,.14);
  }
  
  button:active, .btn-outline:active, a.btn-outline:active {
    transform: scale(.98);
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
  }

  /* ================= ANIMACIONES NOTORIAS (AUTO) ================= */

/* Estado inicial */
section h3,
section p,
section .event-icon {
  opacity: 0;
  transform: none;
  filter: none;
  transition: opacity .6s ease;
  will-change: opacity;
}

/* Activación por sección */
section.is-visible h3,
section.is-visible p,
section.is-visible .event-icon {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger dentro de la sección */
section.is-visible .event-icon { transition-delay: .05s; }
section.is-visible h3          { transition-delay: .15s; }
section.is-visible p           { transition-delay: .28s; }

/* Botones: más “wow” */
button, .btn-outline, a.btn-outline {
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

button:hover, .btn-outline:hover, a.btn-outline:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  filter: brightness(1.03);
}

button:active, .btn-outline:active, a.btn-outline:active {
  transform: scale(.97);
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

/* Iconos: bounce suave al entrar */
section.is-visible .event-icon {
  animation: iconPop .55s cubic-bezier(.2,.9,.3,1) both;
}

@keyframes iconPop {
  0%   { transform: translateY(18px) scale(.85); opacity: 0; }
  70%  { transform: translateY(-6px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  section h3, section p, section .event-icon,
  button, .btn-outline, a.btn-outline{
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ================= BOTONES SLIDE IN ================= */

/* Estado inicial */
section button,
section .btn-outline,
section a.btn-outline {

  opacity: 0;
  transform: none;
  transition: opacity .6s ease;
  will-change: opacity;
}

/* Cuando la sección es visible */
section.is-visible button,
section.is-visible .btn-outline,
section.is-visible a.btn-outline {

  opacity: 1;
  transform: none;
}

@media (hover: none) {
  button:hover, .btn-outline:hover, a.btn-outline:hover,
  button:active, .btn-outline:active, a.btn-outline:active,
  .event-card:hover .event-photo img,
  .envelope:hover {
    transform: none;
    box-shadow: none;
    filter: none;
  }
}

/* Stagger bonito si hay varios botones */
section.is-visible button:nth-of-type(1),
section.is-visible .btn-outline:nth-of-type(1) {
  transition-delay: .25s;
}

section.is-visible button:nth-of-type(2),
section.is-visible .btn-outline:nth-of-type(2) {
  transition-delay: .5s;
}
/* ================= MODAL TRANSFERENCIA ================= */

/* ================= GIFTS ================= */

/* ================= BOTÓN BRILLO (SHIMMER) ================= */
.btn-shimmer{
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 40%;
  height: 180%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(18deg);
  animation: shimmer 3.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes shimmer{
  0%   { left: -60%; opacity: 0; }
  15%  { opacity: 1; }
  45%  { left: 120%; opacity: 1; }
  60%  { opacity: 0; }
  100% { left: 120%; opacity: 0; }
}
.copy-btn{
  width: 100%;
}

/* Toast copiado */
.copy-toast{
  margin-top: 10px;
  font-family: var(--text);
  font-size: 14px;
  color: var(--olive-dark);
  background: rgba(85,107,47,.12);
  border: 1px solid rgba(85,107,47,.22);
  padding: 10px 12px;
  border-radius: 12px;
}
/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .btn-shimmer::after{ animation: none !important; }
  .transfer-modal{ animation: none !important; }
}
.gallery{
  padding:20px 20px;
  text-align:center;
}

.gallery-text{
  max-width:500px;
  margin:10px auto 30px;
  font-size:15px;
  line-height: 1.6;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  max-width:500px;
  margin:auto;
}

.gallery-img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:10px;
  cursor:pointer;
  transition:transform .3s;
}

.gallery-img:hover{
  transform:scale(1.05);
}

/* Lightbox */

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.lightbox-img{
  max-width:90%;
  max-height:85vh;
  border-radius:10px;
}

.lightbox-close{
  position:absolute;
  top:20px;
  right:30px;
  color:white;
  font-size:40px;
  cursor:pointer;
}
.wishes-section{
  text-align:center;
  padding:70px 20px;
}

/* ================= AJUSTES DE LEGIBILIDAD Y ESPACIADO ================= */
.names-editorial,
.blessing,
.itinerary,
.gifts,
.playlist-section,
.dress,
.gallery,
.album-section,
.wishes-section,
.rsvp,
.love-quote {
  padding-left: 20px;
  padding-right: 20px;
}

.blessing p,
.gifts-strong,
.rsvp-strong,
.playlist-section p,
.gallery-text,
.album-section p,
.wishes-section p {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .name-lines, .closing h3 {
    font-size: 50px;
    line-height: 1.15;
  }

  .event-address, .dress-note, .gifts-strong, .rsvp-strong, .playlist-section p, .gallery p, .album-section p, .closing p, label, p {
    font-size: 18px;
    line-height: 1.55;
  }

  .gallery-text {
    font-size: 16px;
  }

  .countdown,
  .blessing,
  .itinerary,
  .gifts,
  .playlist-section,
  .dress,
  .gallery,
  .album-section,
  .wishes-section,
  .rsvp,
  .love-quote {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media (max-width: 480px) {
  .name-lines, .closing h3 {
    font-size: 50px;
  }

  .couple {
    font-size: 42px;
  }

  .event-address, .dress-note, .gifts-strong, .rsvp-strong, .playlist-section p, .gallery p, .album-section p, .closing p, label, p {
    font-size: 16px;
    line-height: 1.6;
  }

  .btn-outline,
  #btnConfirmarRsvp,
  .btn-primary {
    font-size: 10px;
    letter-spacing: .1em;
    padding: 10px 12px;
  }

  .countdown,
  .blessing,
  .itinerary,
  .gifts,
  .playlist-section,
  .dress,
  .gallery,
  .album-section,
  .wishes-section,
  .rsvp,
  .love-quote {
    padding-top: 46px;
    padding-bottom: 46px;
  }
}

#wishes-container p{
  background:#fff;
  padding:12px 14px;
  margin:8px auto;
  max-width:450px;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

#wish-form{
  max-width:400px;
  margin:20px auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hidden {
  display: none !important;
}


.fairy-dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
}

.fairy-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.95) 0%,
    rgba(220,225,230,0.85) 25%,
    rgba(190,198,208,0.45) 50%,
    rgba(255,255,255,0) 75%
  );
  box-shadow:
    0 0 8px rgba(255,255,255,0.8),
    0 0 14px rgba(210,218,228,0.55),
    0 0 22px rgba(255,255,255,0.35);
  opacity: 0;
  animation: fairyTwinkle linear infinite;
}

@keyframes fairyTwinkle {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.4);
  }
  20% {
    opacity: 0.85;
    transform: translateY(0px) scale(1);
  }
  50% {
    opacity: 0.45;
    transform: translateY(-8px) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.5);
  }
}