@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');


    html, body {
      margin: 0; padding: 0; height: 100%;
      background-color: #efe9e1;
      overflow-x: hidden;
      overflow-y: auto;
      font-family: 'Palatino Linotype', serif;
    }

    #contenedor {
  position: relative;
  width: 100vw;
  max-width: 400px;
  margin: 0 auto;
  background-color: white;
opacity: 1;                      /* visible */
  transition: opacity 1.8s ease;   /* duración y suavidad */
}

/* Portada desvaneciéndose */
#contenedor.fade-out {
  opacity: 0;
}

    #fondo {
      display: block;
      width: 100vw;
      max-width: 400px;
      height: auto;
      position: relative;
      top: 0;
    }
    #nombreGrupo {
      position: absolute;
      top: calc(217 / 554.6 * 100%); /* MENOR NUMERO = MAS ARRIBA */
      left: 50%;
      transform: translateX(-50%);
      width: 320px;
      text-align: center;
     color: #000000; /* COLOR TEXTO */
      font-size: 11px;
      font-weight: normal;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      user-select: none;
      font-family: 'Palatino Linotype', serif;
    }
    #lineaArriba, #lineaAbajo {
      height: 0.25px;
    background-color: #8a7963; /* COLOR DE LAS 2 LINEAS */
      width: 100 px;
      margin: 0 auto;
    }
    #lineaArriba { margin-bottom: 5px; }
    #lineaAbajo { margin-top: 5px; }
    #numPase {
      position: absolute;
      width: 100vw;
      max-width: 400px;
      left: 50%;
      transform: translateX(-50%);
      bottom: 1.7%; /* ALTURA DE NUM menos num mas abajo */
      height: auto;
    }
/* Contenedor centrado abajo */
#imgInferiorLink {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%); /* centra en ambos ejes */
  cursor: pointer;

  /* RECTANGULO CLICKLEABLE AMARILLO */
  width: 85%; 
  height: 50%;
/*  background-color: rgba(255, 255, 0, 0.5); /* AMARILLO 50% */
  background-color: #transparent; /* INTERCAMBIA */
}

/* sección oculta por defecto */
#seccionNueva,
#Seccion1partB,
#seccionDos,
#seccionCuatro,
#seccionCinco,
#Opcionales,
#SeccionCarrusel, 
#SeccionPas,
#SeccionFin {
  display: none;
}

/* clase para mostrar */
.mostrar {
  display: block !important; /* solo JS puede activarla */
}



/* SECCIÓN 1 */
    #seccionNueva {
      display: none;
      width: 100vw;
      max-width: 400px;
      margin: 0 auto;
      position: relative;
    }
    #fondoSeccion {
      width: 100%;
      display: block;
    }

/* SECCIÓN 1 parte B */
#Seccion1partB {
  display: none;
  width: 100vw;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
}

#fondoSeccion1partB {
  width: 100%;
  display: block;
}


/* SECCION 2 */
#seccionAgendar {
  display: none; /* oculto al inicio */
  width: 100vw;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
  position: relative;
}

#fondoSeccion2 {
  width: 100%;
  display: block;
}

#vacioDos {
    position: absolute;
    top: 78%;                 /* distancia desde arriba en % del alto de la imagen */
    left: 50%;
    transform: translateX(-50%);
    width: 70%;               /* ancho en % del ancho de la imagen */
    height: 15%;              /* alto en % del alto de la imagen */
/*    background-color: rgba(0, 128, 0, 0.3); /* VERDE 50% */
    background-color: #transparent; /* intercambiar */
    cursor: pointer;
}


/* POPUP PARA AGENDAR FECHA */

.popup-agenda {
    display: none; /* oculto al inicio */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.45); 
    backdrop-filter: blur(2px);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-contenido {
    background: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    width: 260px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.popup-contenido button {
   margin: 10px auto;   /* ← centra horizontal */
    width: 180px;
    padding: 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-contenido button img {
    margin-right: 10px;
}

.popup-contenido button:first-child {
    background-color: #4285F4;
    color: white;
}

.popup-contenido button:last-child {
    background-color: white;
    border: 1px solid #ccc;
}

.popup-cerrar {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 22px;
    cursor: pointer;
}


/*SECCION 4 */
#SeccionTime {
  display: none;
  width: 100vw;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
}

#fondoSeccion4 { 
width: 100%; 
display: block; }

/* POSICIÓN DEL COUNTDOWN SOBRE EL FONDO 4 */
#SeccionTime .countdown-container {
  position: absolute;
  top: 18.5%; /* AJUSTAR */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

#SeccionTime #celebration-message {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}


/* ESTILOS DEL COUNTDOWN */
#SeccionTime,
#SeccionTime * {
    font-family: 'Cinzel', serif !important;
}

.countdown-container {
    display: flex;
    justify-content: space-between; /* deja espacio uniforme entre cuadritos */
    align-items: center;
    padding: 2%;
    margin: 15px auto 0 auto;
    width: 96%; /* deja un margen lateral proporcional */
    max-width: 370px;        /* ancho máximo del grupo */
    gap: 1%;                 /* separación proporcional entre cuadritos */
    box-sizing: border-box;
}


.countdown-item {
    background: #ffffff;
    border-radius: 5px;
/*    border: 2px solid #ffffff; /* ← CONTORNO */
    padding: 2%;
    flex: 1;            /* ocupa igual espacio que los demás */
    text-align: center;
    min-width: 20%;     /* evita que se haga demasiado pequeño en móviles */
    box-sizing: border-box;
}


.countdown-item span {
    font-size: 2rem;
    color: #000000;
    display: inline-block;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.countdown-item span.animate {
    transform: translateY(-10px);
    opacity: 0;
}

.countdown-label {
    font-size: 1rem;
   text-transform: none;
    margin-top: -15%;  /* ← acerca el texto al número */
    color: #000000;
}

.celebration-message {
    font-size: 25px;
    color: white;
    display: none;
}

@media (max-width: 768px) {
    .countdown-container {
        flex-direction: row;
        justify-content: space-between;
    }

    .countdown-item {
        width: 20%;
        font-size: 100%;
        padding: 10px;
       margin: 3px; /* SEPARACIÓN ENTRE CUADRITOS */
    }
}

@media (max-width: 768px) {
    .countdown-item span {
        font-size: 1.8rem;
    }

    .countdown-label {
        font-size: 1rem;
    }
}


/*  SECCION 5 */
#seccionCinco {
    position: relative;
    width: 100vw;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 0;       /* sin espacio */
    box-sizing: border-box;
}

#fondoSeccion5 {
    width: 100%;
    height: auto;
    display: block;
}

#Ceremonia {
/*    background-color: rgba(0, 128, 0, 0.5); /* verde 50% */
   background-color: #transparent;  /* intercambiar */
    cursor: pointer; }

#Recepcion {
/*      background-color: rgba(255, 0, 0, 0.5); /* rojo 50% */ 
   background-color: #transparent;  /* intercambiar */
    cursor: pointer; }

#Pintere {
  /*     background-color: rgba(255, 0, 0, 0.5); /* rojo 50% */ 
  background-color: #transparent;  /* intercambiar */
    cursor: pointer; }

#Ceremonia,
#Pintere,
#Recepcion {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 75%; 
}

/* aquí mandas tú la altura de cada una */
#Ceremonia { top: 13.8%;  height: 3.5%; cursor: pointer; }
#Recepcion { top: 30.5%; height: 3.5%; }
#Pintere { top: 92.5%; height: 3.5%; }


/* SECCIÓN OPCIONALES */
#Opcionales {
    position: relative;
    width: 100vw;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 0;       /* sin espacio */
    box-sizing: border-box;
}

#fondoOpcionales {
  width: 100%;
  height: auto;
  display: block;
}

#Sugerencia {
  /*    background-color: rgba(255, 0, 0, 0.5); /* rojo 50% */ 
   background-color: #transparent;  /* intercambiar */
    cursor: pointer; }

#Hashtag {
 /*      background-color: rgba(255, 0, 0, 0.5); /* rojo 50% */ 
  background-color: #transparent;  /* intercambiar */
    cursor: pointer; }

#Sugerencia,
#Hashtag {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 75%; 
}

/* aquí mandas tú la altura de cada una */
#Sugerencia { top: 54%;  height: 3.5%; cursor: pointer; }
#Hashtag { top: 74%; height: 3.5%; }

/* SECCIÓN 6 - GALERÍA */
#SeccionCarrusel {
    position: relative;
    width: 100vw;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 0px;
}

#fondoSeccion6 {
    width: 100%;
    height: auto;
    display: block;
}

/* Carrusel ENCIMA del fondo */
.gallery-container {
    position: absolute;
    top: 110px;          /* AJUSTA este valor para subir/bajar el carrusel */
    left: 50%;
    transform: translateX(-50%);
    width: 99%;
    max-width: 375px;
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 550px;       /* AJUSTA la altura del carrusel */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Imágenes superpuestas para el crossfade */
.slide-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;

    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* duración del desvanecimiento */
}

/* La que está visible en este momento */
.slide-image.visible {
    opacity: 1;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(203, 185, 164, 0.8);
    border: none;
    color: white;
    font-size: 30px;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.arrow-left  { left: 10px; }
.arrow-right { right: 10px; }


/* SECCIÓN PASS */
#SeccionPas {
    position: relative;
    width: 100vw;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

#fondoSeccion7 {
    width: 100%;
    height: auto;
    display: block;
}

#paseN1 {
    position: absolute;
    top: 0px;           /* ajusta si quieres más arriba/abajo */
    left: 50%;
    transform: translateX(-50%);
    max-width: 400px;
    height: auto;
}


/* SECCIÓN 8 */
#SeccionFin {
    position: relative;
    width: 100vw;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

#fondoSeccionFin {
    width: 100%;
    height: auto;
    display: block;
}

#SeccionFinRSVP {
    position: absolute;
    top: 1%;                 /* ajusta verticalmente */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;               /* ancho del botón */
    height: 1%;              /* alto del botón */
/*     background-color: rgba(255, 105, 180, 0.5); /* rosado 50% transparencia */
    background-color: #transparent;  /* intercambiar */
    cursor: pointer;
}


/* Ocultar todas las secciones inicialmente */
#seccionNueva,
#Seccion1partB,
#seccionAgendar,
#SeccionTime,
#seccionCinco,
#Opcionales,
#SeccionPas, 
#SeccionFin {
    display: none; /* sin !important */
}