body {
    font-family: 'Playfair Display', serif;
}

/* Preloader centrado con fondo semi-blanco */
  #preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
  }

  /* Corazón central pequeño 30px y palpitando */
  .heart {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: #BFA880;
    transform: rotate(-45deg);
    animation: pulse 1s infinite;
  }

  .heart::before,
  .heart::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #BFA880;
    border-radius: 50%;
  }

  .heart::before { top: -15px; left: 0; }
  .heart::after  { top: 0; left: 15px; }

  /* Animación de latido */
  @keyframes pulse {
    0%, 100% { transform: rotate(-45deg) scale(1); }
    50% { transform: rotate(-45deg) scale(1.3); }
  }

  /* Corazoncitos que flotan */
  .small-heart {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #BFA880;
    transform: rotate(-45deg);
    opacity: 0;
    animation: fly 2s forwards;
  }

  .small-heart::before,
  .small-heart::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #BFA880;
    border-radius: 50%;
  }

  .small-heart::before { top: -6px; left: 0; }
  .small-heart::after  { top: 0; left: 6px; }

/* Animaciones */
    @keyframes fadeDown {
        0% { opacity: 0; transform: translateY(-50px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeUp {
        0% { opacity: 0; transform: translateY(50px) rotate(90deg); }
        100% { opacity: 1; transform: translateY(0) rotate(90deg); }
    }

    @keyframes bounceDown {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
        40% { transform: translateY(10px); }
        60% { transform: translateY(5px); }
    }

    /* Clases de animación */
    .fade-down { animation: fadeDown 1s ease forwards; }
    .fade-up { animation: fadeUp 1s ease forwards; }
    .bounce-down { animation: bounceDown 2s infinite; }

    /* Delays para que aparezcan en secuencia */
    .delay-100 { animation-delay: 0.2s; }
    .delay-200 { animation-delay: 0.4s; }
    .delay-300 { animation-delay: 0.6s; }
    .delay-400 { animation-delay: 0.8s; }
    .delay-500 { animation-delay: 1s; }



  /* Animación de flotación hacia arriba */
  @keyframes fly {
    0% {
      transform: translate(0,0) rotate(-45deg) scale(0.5);
      opacity: 1;
    }
    100% {
      transform: translate(calc(var(--x, 0px)), calc(var(--y, -50px))) rotate(-45deg) scale(0.5);
      opacity: 0;
    }
  }



/* ================= SECCION CONTADOR ================= */

    .countdown-section {
        position: relative;
        background: #e9e3db;
        padding-top: 100px;
        padding-bottom: 120px;
    }

    /* CORTA LA IMAGEN SUPERIOR */
    .mountain-cut {
        position: absolute;
        top: -120px;
        left: 0;
        width: 100%;
        line-height: 0;
    }

    .mountain-cut svg {
        width: 100%;
        height: 200px;
        display: block;
    }


    /* Círculo central */
    .countdown-wrapper {
        position: relative;
        width: 250px;
        height: 250px;
        margin: auto;
    }

    /* Anillos dorados */
    .countdown-wrapper::before,
    .countdown-wrapper::after {
        content: "";
        position: absolute;
        border: 2px solid #bfa880;
        border-radius: 50%;
        top: -20px;
        left: -20px;
        right: -20px;
        bottom: -20px;
    }

    .countdown-wrapper::after {
        top: -35px;
        left: -35px;
        right: -35px;
        bottom: -35px;
        opacity: 0.7;
    }

    /* Círculo blanco */
    .countdown-circle {
        position: absolute;
        inset: 0;
        background: #f7f5f2;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 20px 20px 15px 40px rgba(0,0,0,0.15);
        text-align: center;
    }

    .countdown-title {
        font-size: 32px;
        color: #bfa880;
        margin-bottom: 15px;
    }

    .countdown-time {
        display: flex;
        gap: 20px;
        font-size: 26px;
        color: #444;
    }

    .countdown-time div {
        display: flex;
        flex-direction: column;
    }

    .countdown-time span {
        font-size: 14px;
        color: #bfa880;
    }

    .countdown-heart {
        margin-top: 15px;
        font-size: 80px;
        color: #bfa880;
    }

    @keyframes heartbeat {
        0% { transform: scale(1); }
        25% { transform: scale(1.15); }
        40% { transform: scale(1); }
        60% { transform: scale(1.15); }
        100% { transform: scale(1); }
    }

    .countdown-heart {
        font-size: 2rem;
        color: #BFA880;
        animation: heartbeat 1.5s infinite;
    }

/* ================= SECCION CEREMONY ================= */
    .banner-inner {
        background: #5c5a57;
        padding: 1rem 3.5rem;
        border-radius: 6px;
        position: relative;
    }

    .banner-inner::before,
    .banner-inner::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background: #e9e3db; /* color del fondo */
        border-radius: 50%;
    }

    .banner-inner::before {
        left: -10px;
    }

    .banner-inner::after {
        right: -10px;
    }


/* ================= SECCION GALLERY ================= */

.bg-imge{
    background-image: url("../images/fondo2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    #hero {
        background-attachment: fixed;
    }

    #footerBg {
        background-position: center !important; /* centra la imagen en móviles */
        background-size: auto 100%;             /* ajusta altura, evita zoom brusco */
    }

    .no-fixed-mobile {
        background-attachment: scroll !important; /* en móvil, no fija */
    }

}