@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700&family=Dancing+Script&family=Montserrat:wght@300;400;600&display=swap');

/* --- 1. RESET BÁSICO --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

body, html {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden; 
  scroll-behavior: smooth;
}

/* --- 2. CLASE MAESTRA (Lo que todas las páginas comparten) --- */
.seccion-comun {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center top; 
  background-size: cover;
  background-attachment: scroll; 
  padding: 20px;
}

/* --- 3. ESTILOS ESPECÍFICOS POR PÁGINA (Tus diseños originales) --- */

/* HEADER */
.invitacion-header {
  background-image: url("imagenes/fondo-1.png");
}

.contenedor-texto {
  width: 100%;
  max-width: 600px; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fecha {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 5px;
  color: #8a8a8a;
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  margin-bottom: 15px;
}

.nombres {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.5rem, 8vw, 5.8rem);
  font-weight: 400;
  color: #4d443b;
  line-height: 1.1;
  margin: 0;
}

.frase {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #5d6d4f;
  margin-top: 25px;
} 

/* PÁGINA 2 */
.invitacion-pag2 {
  background-image: url("imagenes/fondo-2.png");
}
.invitacion-pag2 h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  color: #4d443b;
  margin-bottom: 10px;
  font-weight: 400;
}
.invitacion-pag2 p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: #555;
  max-width: 500px; 
  line-height: 1.6;
  margin-bottom: 40px;
}
.invitacion-pag2 button {
  background-color: #76846a;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  padding: 12px 40px;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(215, 168, 168, 0.1);
}
.invitacion-pag2 button:hover {
  background-color: #5d6d4f; 
  transform: translateY(-2px);
}

/* PÁGINA 3 */
.invitacion-pag3 {
  background-image: url("imagenes/fondo-3.png");
}
.invitacion-pag3 .icono-copas {
  width: 80px; 
  margin-bottom: 10px;
  filter: grayscale(0.5) opacity(0.8);
}
.invitacion-pag3 .titulo-ceremonia,
.invitacion-pag3 h2,
.invitacion-pag3 .frase-espera,
.invitacion-pag3 .fecha-hora,
.invitacion-pag3 .direccion {
  width: 100%; display: block; text-align: center; margin-left: auto; margin-right: auto;
}
.invitacion-pag3 .titulo-ceremonia {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  color: #4d443b;
  font-weight: 400;
  margin-bottom: 25px;
}
.invitacion-pag3 h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: #444;
  font-weight: 400;
  margin-bottom: 5px;   
  max-width: 90%;    
  line-height: 1.3;
}
.invitacion-pag3 .frase-espera {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem; color: #888; margin-bottom: 25px;
}
.invitacion-pag3 .fecha-hora {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 5px; 
  text-transform: uppercase;
  color: #3d3d3d;
  margin-bottom: 20px;
}
.invitacion-pag3 .direccion {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 35px;
  max-width: 300px;    
}
.invitacion-pag3 .btn-ubicacion {
  background-color: #76846a;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  padding: 12px 35px;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  transition: all 0.3s ease;
}
.invitacion-pag3 .btn-ubicacion:hover {
  background-color: #5d6d4f;
  transform: translateY(-2px);
}

/* PÁGINA 4 */
.invitacion-pag4 {
  background-image: url("imagenes/fondo-4.png");
}
.invitacion-pag4 .icono-anillos {
  width: 80px; margin-bottom: 10px; filter: grayscale(0.5) opacity(0.8);
}
.invitacion-pag4 .titulo-celebracion,
.invitacion-pag4 h2,
.invitacion-pag4 .frase-espera,
.invitacion-pag4 .fecha-hora,
.invitacion-pag4 .direccion {
  width: 100%; display: block; text-align: center; margin-left: auto; margin-right: auto;
}
.invitacion-pag4 .titulo-celebracion {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  color: #4d443b;
  font-weight: 400;
  margin-bottom: 25px;
}
.invitacion-pag4 h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: #444;
  font-weight: 400;
  margin-bottom: 5px; 
  max-width: 90%;     
  line-height: 1.3;
}
.invitacion-pag4 .frase-espera {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem; color: #888; margin-bottom: 25px;
}
.invitacion-pag4 .fecha-hora {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 5px;  
  text-transform: uppercase;
  color: #3d3d3d;
  margin-bottom: 20px;
}
.invitacion-pag4 .direccion {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 35px;
  max-width: 300px; 
}
.invitacion-pag4 .btn-ubicacion {
  background-color: #76846a;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  padding: 12px 35px;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  transition: all 0.3s ease;
}
.invitacion-pag4 .btn-ubicacion:hover {
  background-color: #5d6d4f;
  transform: translateY(-2px);
}

/* PÁGINA 5 (Vestimenta) */
.invitacion-pag5 {
  background-image: url("imagenes/fondo-3.png");
}
.invitacion-pag5 h1{
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  color: #4d443b;
  font-weight: 400;
  margin-bottom: 25px;
}
.invitacion-pag5 img {
  width: 40%;
  height: auto;
}
.img-movil {
  display: none;
}

/* PÁGINA 6 (Regalos) */
.invitacion-pag6 {
  background-image: url("imagenes/fondo-4.png");
  padding: 40px 20px; 
  overflow: hidden; 
}
.invitacion-pag6 .icono-regalo {
  width: 55px; margin-bottom: 15px; filter: sepia(0.4) brightness(0.9);
}
.invitacion-pag6 .titulo-regalos {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 6vw, 3.8rem);
  color: #3d3d3d;
  font-weight: 400;
  margin: 0 0 20px 0;
}
.invitacion-pag6 .texto-regalo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  max-width: 420px; 
  margin: 0 auto 40px auto;
}
.invitacion-pag6 .contenedor-botones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.invitacion-pag6 .btn-regalo {
  background-color: #76846a;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 1px;
  padding: 14px 10px;
  width: 260px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.invitacion-pag6 .btn-regalo.subrayado { text-decoration: underline; }
.invitacion-pag6 .btn-regalo:hover {
  background-color: #5d6d4f;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* PÁGINA FINAL */
.invitacion-pagfinal {
  background-image: url("imagenes/fondo-final.png");
}
.invitacion-pagfinal p {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.4rem);
  color: #555555;
  line-height: 1.8;
  margin-bottom: 50px;
  font-weight: 400;
  max-width: 600px;
}
.invitacion-pagfinal h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.9rem, 10vw, 6.5rem); 
  color: #3d3d3d;
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -1px;
}

/* DATOS BANCARIOS */
.invitacion-datos-bancarios {
  background-image: url("imagenes/fondo-datos.png");
}
.contenedor-bancario { max-width: 700px; width: 100%; }
.titulo-aporte {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: #3d3d3d;
  font-weight: 400;
  margin-bottom: 30px;
  line-height: 1.2;
}
.texto-introductorio {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #555555;
  line-height: 1.7;
  margin-bottom: 40px;
}
.texto-introductorio span { display: block; margin-top: 10px; font-style: italic; color: #777; }
.cuentas-detalle {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  color: #3d3d3d;
  line-height: 2;
}
.cuentas-detalle p { margin: 10px 0; }
.cuentas-detalle strong { font-weight: 600; color: #000; }

/* FORMULARIO RSVP */
.invitacion-rsvp {
  background-image: url("imagenes/fondo-final.png");
  padding: 40px 20px;
}
.contenedor-formulario {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #e2c08d; 
  border-radius: 15px;
  width: 100%;
  max-width: 450px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.grupo-input label, .pregunta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: #8c7042;
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}
.grupo-input input[type="text"] {
  width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 20px;
  box-sizing: border-box; font-family: 'Montserrat', sans-serif;
}
.opcion-item { display: block; margin-bottom: 10px; cursor: pointer; }
.opcion-item input { display: none; }
.opcion-caja {
  display: block; background-color: #f3f0e7; padding: 12px; border-radius: 8px;
  font-family: 'Montserrat', sans-serif; font-size: 0.9rem; color: #555; transition: all 0.3s ease;
}
.opcion-item input:checked + .opcion-caja { background-color: #f9d99a; color: #3d3d3d; font-weight: 600; }
.btn-enviar-rsvp {
  width: 100%; background-color: #76846a; color: white; padding: 15px; border: none; border-radius: 8px;
  font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: uppercase; cursor: pointer;
  margin-top: 10px; transition: background 0.3s;
}
.btn-enviar-rsvp:hover { background-color: #5d6d4f; }
.footer-form {
  font-family: 'Playfair Display', serif; text-align: center; color: #8c7042; margin-top: 20px;
  font-size: 1.1rem; font-weight: bold;
}
.link-datos {
  display: block; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 0.65rem;
  color: #999; text-decoration: underline; margin-top: 15px;
}


/* --- 4. MEDIA QUERY PARA CELULAR (Ajustado y Corregido) --- */
@media (max-width: 768px) {
  
  /* REGLA MAESTRA PARA FONDOS DE CELULAR */
  /* Aplicamos el tamaño 100% y el padding grande a TODAS las secciones */
  .invitacion-header,
  .invitacion-pag2,
  .invitacion-pag3,
  .invitacion-pag4,
  .invitacion-pag5,
  .invitacion-pag6,
  .invitacion-pagfinal,
  .invitacion-datos-bancarios,
  .invitacion-rsvp {
    background-size: 100% 100%; 
    background-position: center center;
    background-repeat: no-repeat;
    padding: 120px 60px; 
    min-height: 100vh;
  }

  /* ASIGNACIÓN DE IMÁGENES RESPONSIVE */
  .invitacion-header { background-image: url("imagenes/fondo-1-responsive.png"); }
  .invitacion-pag2   { background-image: url("imagenes/fondo-2-responsive.png"); }
  .invitacion-pag3   { background-image: url("imagenes/fondo-3-responsive.png"); }
  .invitacion-pag4   { background-image: url("imagenes/fondo-4-responsive.png"); }
  .invitacion-pag5   { background-image: url("imagenes/fondo-5-responsive.png"); }
  .invitacion-pag6   { background-image: url("imagenes/fondo-6-responsive.png"); }
  
  /* Fondos finales */
  .invitacion-pagfinal,
  .invitacion-rsvp { 
    background-image: url("imagenes/fondo-final-responsive.png"); 
  }
  .invitacion-datos-bancarios {
    background-image: url("imagenes/fondo-final-responsive.png"); 
  }

  /* AJUSTES DE CONTENIDO MÓVIL (Tus ajustes originales) */
  .img-desktop { display: none; }
  .img-movil { 
    display: block; 
    width: 100%; 
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  
  .titulo-aporte { font-size: 1.6rem; }
  .cuentas-detalle { font-size: 0.95rem; }
  .invitacion-pag6 .btn-regalo { width: 100%; max-width: 280px; }
}