@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Quattrocento:wght@400;700&display=swap');

/* ----- variables globales ----- */
:root {
  --lila:#e8deff;
  --blanco:#ffffff;
  --acento:#a06cd5;
  --texto:#333;
  --radio:12px;
  --gap:1.5rem;
  --maxw:850px;
  font-size:16px;
  
}

/* ----- resets ----- */
*{box-sizing:border-box;margin:0;padding:0}
body,button,input,select{color:var(--texto);line-height:1.5}

/* ----- hero / banner de imagen ----- */
.hero{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url('../img/fondo.PNG');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: var(--gap);
  color: var(--acento);
  -webkit-text-stroke: 0;
  text-shadow: none;
  text-transform: none;

}
.hero h1{
    font-family: 'Great Vibes', cursive;

}

.banner{
    min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url('../img/fondo.PNG');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  font-family: 'Great Vibes', cursive;
  color: var(--blanco);
  -webkit-text-stroke: 0;
  text-shadow: none;
  text-transform: none;
    padding: var(--gap);  /* esto ya está bien */

}
.banner{min-height:40vh}

.hero-content{max-width:var(--maxw)}
.hero h1{font-size:clamp(2.5rem,6vw,4rem);letter-spacing:.1em}

/* ----- secciones ----- */
.section{
  background:var(--blanco);
  padding:3.5rem 1.25rem;
  text-align:center;
    font-family: 'Lora', serif;

}
.section.alt{background:var(--lila)}
.section h2{margin-bottom:1rem;font-size:2rem;color:var(--acento);}
.section p{margin-bottom:1.25rem;font-size:1.1rem}
.section .icon{width:150px;margin-bottom:1rem}

.big{font-size:clamp(3rem,7vw,5rem)}

/* ----- countdown ----- */
.countdown{
  font-size:clamp(1.4rem,4vw,2.2rem);
  margin-top:1rem;
  font-weight:bold;
   font-family: 'Lora', serif;

}

/* ----- botones ----- */
.btn{
  display:inline-block;
  background:var(--acento);
  color:#fff;
  padding:.85rem 1.75rem;
  border:none;
  border-radius:var(--radio);
  font-size:1rem;
  text-decoration:none;
  cursor:pointer;
  transition:opacity .25s;
      font-family: 'Lora', serif;

}
.btn:hover{opacity:.85}
.btn.secondary{background:#555}

/* ----- modal regalos ----- */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
  z-index:1000;
}
.modal-content{
  background:#fff;
  padding:1rem;
  border-radius:var(--radio);
  max-width:500px;
  width:100%;
  position:relative;
}
.modal-content img{width:100%;height:auto;display:block}
.close{
  position:absolute;top:.5rem;right:.75rem;
  font-size:1.75rem;cursor:pointer;font-weight:bold;color:#666;
}

/* ----- formulario RSVP ----- */
/* --------------------------------------
   FORMULARIO RSVP – VERSIÓN PULIDA
   -------------------------------------- */

#rsvpForm{
  max-width:600px;      /* tarjetón centrado */
  margin:auto;
  background:#ffffff;
  padding:2rem 1.5rem;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Cada fila de invitados */
.guest{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:1.25rem;
}

/* Campos de texto y selector */
.guest input,
.guest select{
  flex:1 1 260px;          /* nunca menos de 260 px */
  max-width:100%;          /* ni más anchos que el contenedor */
  padding:.65rem .9rem;
  font-size:1rem;
  border:1px solid #ccc;
  border-radius:8px;
  background:#fdfdfd;
  transition:border-color .2s, box-shadow .2s;
}

/* Efecto al recibir foco → marca el campo activo
   y simula un “ripple” suave del color principal   */
.guest input:focus,
.guest select:focus{
  outline:none;
  border-color:var(--acento);
  box-shadow:0 0 0 3px rgba(160,108,213,.25);
}

/* Apilar los elementos en pantallas angostas */
/* 🔧 Ajuste para inputs demasiado altos en celulares */
@media (max-width: 600px) {
  .guest input,
  .guest select {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.95rem;
  }
}


/* Botones del formulario */
#addGuest.btn.secondary{
  margin-top:.25rem;      /* acerca el botón a los campos */
}
#rsvpForm .btn{
  width:100%;
  max-width:260px;
  margin:.5rem auto 0;
}
.section p strong {
  font-size: 1.5rem;   /* aumentá este valor a lo que quieras */
  font-weight: 700;    /* opcional, para que resalte más */
  color: var(--acento); /* opcional, para que combine con otros títulos */
}
.banner h2 {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(3rem, 8vw, 6rem);       /* tamaño responsivo grande */
  font-weight: 900;                        /* peso fuerte */
  color: #ffffff;                         /* color lila (variable --acento) */
  letter-spacing: 0.15em;                 /* espacio entre letras */
  text-shadow:
    2px 2px 5px rgba(0,0,0,0.6);         /* sombra negra suave para resaltar */
  margin: 0;                             /* elimina márgenes por defecto */
}
.hero h1.big {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  color: var(--blanco);
  letter-spacing: 0.15em;
  text-shadow:
    2px 2px 5px rgba(198, 131, 184, 0.6);
  margin: 0;
}
@keyframes glow {
  0% { text-shadow: 0 0 5px rgba(255,255,255,0.3); }
  50% { text-shadow: 0 0 15px rgba(255,255,255,0.8); }
  100% { text-shadow: 0 0 5px rgba(255,255,255,0.3); }
}
.countdown {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  font-family: 'Lora', serif;

  animation: glow 2s ease-in-out infinite;
  


}

.countdown-item {
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: 700;
  min-width: 70px;
  text-align: center;
  transition: transform 0.3s ease;
}

.countdown-item:hover {
  transform: scale(1.1);
}

.countdown-item small {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  margin-top: 0.2rem;
  text-transform: uppercase;
}
/* Modal general */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

/* Contenido modal - tarjeta regalos */
.regalo-card {
  background: var(--lila);
  padding: 2rem 2.5rem;
  border-radius: var(--radio);
  max-width: 350px;
  width: 90%;
  text-align: center;
  color: var(--acento);
  position: relative;
  box-shadow: 0 8px 20px rgba(160,108,213,0.4);
}

/* Imagen regalos arriba */
.regalo-img {
  max-width: 100px;
  margin-bottom: 1.5rem;
}

/* Título REGALOS */
.regalo-card h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

/* Alias abajo */
.regalo-card p {
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
}

/* Botón cerrar */
.close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 1.75rem;
  cursor: pointer;
  font-weight: bold;
  color: var(--acento);
  background: transparent;
  border: none;
}
.regalo-img {
  display: block;        /* hace que el img se comporte como bloque */
  margin: 0 auto 1.5rem; /* margén arriba/abajo automático y espacio abajo */
  max-width: 100px;
}
@media (max-width: 600px) {
  .banner {
    min-height: 30vh;         /* menor altura */
    padding: 2rem 1rem;       /* más espacio interno */
  }

  .banner h2 {
    font-size: 2rem;          /* texto más chico en pantallas pequeñas */
    letter-spacing: 0.05em;   /* menos separación si querés */
  }
}
.hero-content .subtitle {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 500;
  color: white;
  margin-top: 1rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
      font-family: 'Lora', serif;

}
.hero .subtitle {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 500;
  color: white;
  margin-top: 1rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px
}
.closing{
      font-family: 'Lora', serif;

}