@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap');
/* ------------------------------------------------------
   1. Variables y configuración básica
------------------------------------------------------ */
:root {
  --background: #fff9f8;             /* Fondo rosa muy suave */
  --primary-color: #5c5c5c;          /* Texto gris oscuro elegante */
  --secondary-color: #f2d1c9;        /* Rosa pastel para secciones */
  --accent-color: #c39b5f;           /* Dorado tenue para títulos y botones */
  --tertiary-color: #c5d2c1;         /* Verde olivo claro para detalles */
  --text-value-color: #5c5c5c;       /* Texto consistente en gris oscuro */
  --glass: rgba(255, 249, 248, 0.7); /* Fondo glass con rosa claro */
  --transition: 0.5s;
  --border-radius: 10px;
  --font-body: 'Libre Baskerville', serif;
  --font-heading: 'Cinzel', serif;

  /* Variables para botones */
  --btn-bg: var(--accent-color);
  --btn-text-color: #ffffff;
  --btn-border-color: var(--accent-color);
  --btn-radius: 8px;
  --btn-hover-bg: var(--primary-color);

  /* Variables para botones en modal */
  --modal-btn-bg: var(--accent-color);
  --modal-btn-text: #ffffff;
  --modal-btn-border: var(--accent-color);
}


/* ------------------------------------------------------
   2. Reset global
------------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--background);
  color: var(--primary-color);
  line-height: 1.6;
}

/* ------------------------------------------------------
   3. Contenedores principales
------------------------------------------------------ */
.invitation-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  background-color: var(--secondary-color);
}

.main-content {
  flex: 1;
  padding: 1rem;
}

/* Secciones generales: sin sombra para un look más plano */
.section {
  margin: 2rem auto;
  padding: 2rem;
  width: 90%;
  background: var(--secondary-color);
  border-radius: var(--border-radius);
}

/* -----------------------------------------------
   HEADER: imagen y posicionamiento
-------------------------------------------------- */
.invitation-header {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Degradado de overlay para oscurecer el fondo */
.invitation-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
  z-index: 0;
}

.header-container {
  position: relative;
  z-index: 1;
  padding: 20px;
  color: #fff;
  margin-bottom: -450;
}

/* -----------------------------------------------
   Animaciones: fade in
-------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animated-fade {
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}

/* -----------------------------------------------
   TÍTULO "Nuestra Boda" y SUBTÍTULO
-------------------------------------------------- */
.wedding-title {
  margin-bottom: 20px;
}
.wedding-title h3 {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.subtitle {
  font-size: 1.2rem;
  margin-top: 5px;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.title-divider {
  width: 50px;
  height: 2px;
  background: #fff;
  border: none;
  margin: 10px auto;
}

/* -----------------------------------------------
   BLOQUE DE NOMBRES
-------------------------------------------------- */
.names-container {
  background: rgba(245, 245, 245, 0.4);
  padding: 15px 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: inline-block;
}
.names-container h1 {
  margin: 0;
  font-size: 3rem;
  font-family: var(--font-heading);
  color: var(--secondary-color);
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.985);
  display: inline-block;
}
.ampersand {
  font-size: 2rem;
  font-family: var(--font-heading);
  margin: 0 10px;
  color: var(--accent-color);
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.842);
  font-weight: bold;
}

/* Mantener nombres y ampersand en la misma línea */
.names-container h1,
.ampersand {
  display: inline-block;
  white-space: nowrap;
}

/* Reducir tamaño en pantallas pequeñas */
@media (max-width: 480px) {
  .names-container h1{
    font-size: 1.8rem !important; 
    /* Ajusta a tu gusto, p.ej. 2rem, 1.8rem, etc. */
  }
  .ampersand {
    font-size: 1.6rem !important; 
    /* Ajusta a tu gusto, p.ej. 2rem, 1.8rem, etc. */
  }
}

@media (max-width: 375px) {
  /* Reducir el tamaño de los nombres y el ampersand */
  .names-container h1,
  .ampersand {
    font-size: 1.4rem !important; /* Ajusta según sea necesario */
  }
  
  /* Opcional: reducir ligeramente el tamaño del título si fuera pertinente */
  .wedding-title h3 {
    font-size: 1.2rem !important;
  }

  /* Opcional: ajustar el padding del contenedor para mejorar el espaciamiento */
  .header-container {
    padding: 1rem;
  }
}




/* -----------------------------------------------
   CONTADOR
-------------------------------------------------- */
.countdown {
  text-align: center;
}
.countdown .time {
  background: rgba(199, 199, 199, 0.3);
  padding: 15px;
  border-radius: 5px;
  display: inline-flex;
  gap: 15px;
  margin-top: 10px;
}
.count-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.count-item div {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--secondary-color);
  text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
}
.count-label {
  font-size: 0.9rem;
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
  font-family: var(--font-heading);
}


/* ------------------------------------------------------
   6. SAVE THE DATE (Hero)
   - Se respeta tu fondo en var(--accent-color)
------------------------------------------------------ */
.hero {
  background: var(--accent-color);
  width: 100%;
  padding: 2rem;
  margin-top: 0px !important;
  text-align: center;
}


.save-date.section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  color: var(--primary-color);
}

.save-date.section p {
  font-size: 1.1rem;
  color: var(--primary-color);
}

/* ------------------------------------------------------
   7. SECCIONES DETALLADAS
------------------------------------------------------ */
.corner-decor {
  background: var(--secondary-color);
  border-radius: var(--border-radius);
  margin: 2rem auto;
  padding: 2rem;
}

.details.section.corner-decor,
.gallery.section.corner-decor,
.padrinos.section.corner-decor,
.dress-code.section.corner-decor,
.gift-section.section.corner-decor {
  max-width: 1000px;
  text-align: center;
}

.papas.section {
  background: var(--secondary-color);
  border-radius: var(--border-radius);
  margin: 2rem auto;
  padding: 2rem;
  max-width: 800px;
  text-align: center;
}

.details-header h2,
.details.section.corner-decor h2,
.gallery.section.corner-decor h2,
.papas.section h2,
.padrinos.section h2,
.dress-code.section.corner-decor h2,
.gift-section h2 {
  font-size: 2rem;
  color: var(--primary-color);
  font-family: var(--font-heading);
  margin-bottom: 1.2rem;
}

/* Bloques de detalles (Ceremonia, etc.) */
.details-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  font-size: 20px;
}

.details-container.papas-container,
.details-container.padrinos-container {
  display: block;
}

.detail-block {
  border: 1px solid var(--accent-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  max-width: 350px;
  transition: transform var(--transition);
}

.detail-block:hover {
  transform: translateY(-4px);
}

.detail-text {
  padding: 1rem;
  background: var(--secondary-color);
}

.detail-text h4 {
  font-size: 1.4rem;
  color: var(--accent-color);
  margin-bottom: 0.8rem;
  font-family: var(--font-heading);
}

.detail-text p {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--primary-color);
}

.detail-block img {
  width: 100%;
  height: 200px; /* Imagenes uniformes: mismo alto */
  object-fit: cover;
}

/* Botón de mapa */
.map-button {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.6rem 1.2rem;
  background: var(--accent-color);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--transition);
}

.map-button:hover {
  background: var(--primary-color);
}

/* ------------------------------------------------------
   8. DIVIDER
------------------------------------------------------ */
.divider {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* opcional, si necesitas centrar en todo el ancho */
}


.divider img {
  max-width: 180px;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.divider img:hover {
  opacity: 1;
}

/* ------------------------------------------------------
   9. TIMELINE - Nuevo diseño
   - Se centra el título
------------------------------------------------------ */
.timeline.section {
  background: var(--secondary-color);
  padding: 2rem;
  margin: 2rem auto;
  text-align: left;
  border-radius: var(--border-radius);
}

/* Centrar título del timeline */
.timeline.section h2 {
  text-align: center;
  margin-bottom: 1.2rem;
}

.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 700px;
}

.timeline-event {
  background: var(--tertiary-color);
  padding: 1rem 1rem 1rem 3rem;
  margin-bottom: 1rem;
  border: 1px solid var(--tertiary-color);
  border-radius: var(--border-radius);
  position: relative;
  transition: background var(--transition);
}

.timeline-event:hover {
  background: var(--tertiary-color);
}

.timeline-event::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 20px;
  height: 20px;
  background: var(--accent-color);
  border-radius: 50%;
}

.event-time {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--accent-color);
}

.event-title {
  font-size: 1.2rem;
  margin: 0.6rem 0;
  color: var(--primary-color);
  font-family: var(--font-heading);
}

.event-description {
  font-size: 1rem;
  color: var(--primary-color);
}

/* ------------------------------------------------------
   10. HOSPEDAJE
------------------------------------------------------ */
.hospedaje.section {
  background: var(--secondary-color);
  padding: 2rem;
  border-radius: var(--border-radius);
  text-align: center;
  margin: 2rem auto;
  font-family: var(--font-body);
}

.hospedaje.section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.hotels-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0 1rem;
}

.hotel {
  border: none;
  
  overflow: hidden;
  width: 260px;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.hotel:hover {
  transform: scale(1.02);
}

.hotel img {
  width: 100%;
  height: 200px; /* Imagenes uniformes */
  object-fit: cover;
  display: block;
  border-radius: var(--border-radius);
}

/* ------------------------------------------------------
   11. GALERÍA
------------------------------------------------------ */
.gallery.section.corner-decor {
  text-align: center;
}

#galleryContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.photo {
  width: calc(33.33% - 1rem);
  overflow: hidden;
  border-radius: var(--border-radius);
  transition: transform var(--transition);
}

.photo img {
  width: 100%;
  height: 200px; /* Uniformidad para imágenes */
  object-fit: cover;
  display: block;
}

.photo:hover {
  transform: scale(1.03);
}

/* ------------------------------------------------------
   12. PADRES, PADRINOS, ETC.
------------------------------------------------------ */
.papas.section h2,
.padrinos.section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-family: var(--font-heading);
}

/* ------------------------------------------------------
   13. CÓDIGO DE VESTIMENTA
------------------------------------------------------ */
.dress-code-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  font-family: var(--font-body);
}

.dress-code h2 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.dress-code-image {
  text-align: center;
}

.dress-code-image img {
  width: 100%;
  height: 200px; /* Uniformidad en imágenes */
  border: 3px solid var(--accent-color);
  object-fit: cover;
  transition: transform var(--transition);
}

.dress-code-image img:hover {
  transform: scale(1.05);
}

.dress-code-comment {
  margin-top: 1rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--primary-color);
}

/* ------------------------------------------------------
   14. REGALOS Y DATOS BANCARIOS
   - Ajuste de imágenes para que se vean completas
------------------------------------------------------ */
.gift-section.section.corner-decor {
  max-width: 1000px;
}

.details-container.gift-section {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.gift {
  background: var(--tertiary-color);
  border: none;
  border-radius: var(--border-radius);
  padding: 1rem;
  text-align: center;
  width: 220px;
  transition: transform var(--transition);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  color: var(--primary-color);
}

.gift:hover {
  transform: translateY(-4px);
}

.gift h3 {
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
  color: var(--secondary-color);
  font-family: var(--font-heading);
}

/* 
   Para que se vean completas sin recortar:
   - Eliminamos height fija 
   - object-fit: contain
*/
.gift img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  background-color: #fff;
}

.bank-details {
  background: var(--secondary-color);
  padding: 1rem;
  border-radius: var(--border-radius);
  box-shadow: none;
  color: var(--primary-color);
  font-size: 0.95rem;
  font-family: var(--font-body);
}

/* ------------------------------------------------------
   15. RSVP FORM – Estilo destacado
------------------------------------------------------ */
.rsvp-form-container {
  position: relative;
  background: var(--secondary-color);
  padding: 2.5rem 2rem;
  margin: -4rem auto 4rem;            /* Sube el contenedor para que sobresalga */
  width: 90%;
  max-width: 700px;
  text-align: center;
  border-radius: var(--border-radius);
  border: 2px solid var(--accent-color);             /* Borde dorado */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);         /* Elevación */
  z-index: 2;
  transition: transform var(--transition), box-shadow var(--transition);
  margin-top: 0px;
}
.rsvp-form-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Decorative accent bar arriba */
.rsvp-form-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--accent-color);
  border-radius: 2px 2px 0 0;
}

/* Título más visible */
.rsvp-form-container h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
  font-family: var(--font-heading);
  position: relative;
  z-index: 3;
}

/* Formulario centrado y con gap */
#confirmar-invitado-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 450px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

/* Labels destacados */
#confirmar-invitado-form label {
  font-weight: 600;
  color: var(--primary-color);
}

/* Inputs/Selects con sombra interior y borde dorado */
#confirmar-invitado-form input,
#confirmar-invitado-form select {
  padding: 0.8rem;
  border: 2px solid var(--accent-color);
  border-radius: var(--border-radius);
  font-size: 1rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
  transition: border-color var(--transition);
}
#confirmar-invitado-form input:focus,
#confirmar-invitado-form select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Botón principal grande y con sombra */
#confirmar-invitado-form button[type="submit"] {
  padding: 1rem;
  background: var(--accent-color);
  border: none;
  border-radius: var(--border-radius);
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background var(--transition), transform var(--transition);
}
#confirmar-invitado-form button[type="submit"]:hover {
  background: var(--primary-color);
  transform: translateY(-2px);
}
#confirmar-invitado-form button[type="submit"]:active {
  transform: translateY(0);
}

/* Ajustes responsivos */
@media (max-width: 480px) {
  .rsvp-form-container {
    margin: 0rem auto 2rem;
    padding: 2rem 1rem;
  }
  .rsvp-form-container h2 {
    font-size: 1.8rem;
  }
  #confirmar-invitado-form button[type="submit"] {
    font-size: 1rem;
  }
}

/* ------------------------------------------------------
   16. FOOTER
------------------------------------------------------ */
footer {
  background: var(--secondary-color);
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--primary-color);
}

/* ------------------------------------------------------
   17. LIGHTBOX (opcional)
------------------------------------------------------ */
#lightboxOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightboxContent {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightboxImg {
  width: 100%;
  height: auto;
  display: block;
  border: 4px solid var(--primary-color);
  border-radius: var(--border-radius);
}

.closeLightbox {
  position: absolute;
  top: -15px;
  right: -15px;
  background: var(--secondary-color);
  color: var(--primary-color);
  font-size: 1.5rem;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/* ------------------------------------------------------
   18. BOTONES (cámara, modal, etc.)
------------------------------------------------------ */
#openCameraButton {
  background-color: var(--btn-bg);
  color: var(--btn-text-color);
  border: 2px solid var(--btn-border-color);
  border-radius: var(--btn-radius);
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease;
}

#openCameraButton:hover {
  background-color: var(--btn-hover-bg);
}

.modal-buttons button {
  background-color: var(--modal-btn-bg);
  color: var(--modal-btn-text);
  border: 1px solid var(--modal-btn-border);
  border-radius: var(--btn-radius);
  padding: 0.5rem 1rem;
  margin: 0.3rem;
  transition: background-color 0.3s ease;
}

.modal-buttons button:hover {
  background-color: var(--btn-hover-bg);
}

/* ------------------------------------------------------
   19. CAPTURA DE FOTOS
------------------------------------------------------ */
.photo-capture {
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-heading);
}

.photo-capture button {
  background-color: var(--accent-color);
  border-radius: 50%;
  color: #fff;
}

.photo-capture button:hover {
  background-color: var(--primary-color);
}

/* ------------------------------------------------------
   20. MEDIA QUERIES
   - Full width en móvil para secciones importantes
------------------------------------------------------ */
@media (max-width: 768px) {
  .section,
  .corner-decor,
  .hero {
    width: 100%;
    margin: 1rem 0;
    border-radius: 0;
  }
  
  .hero {
    background-color: var(--accent-color);
    color: var(--secondary-color);
  }
  
  .detail-block {
    max-width: 100%;
  }
  
  .photo {
    width: calc(50% - 0.5rem);
  }
}

@media (max-width: 480px) {
  .names-container h1 {
    font-size: 2.2rem;
  }
  
  .ampersand {
    font-size: 2.7rem;
  }
  
  .invitation-header h3 {
    font-size: 1.4rem;
  }
  
  .photo {
    width: 100%;
  }
  
  .count-item div {
    font-size: 1.8rem;
  }
}