/*
================================================================
STYLES.CSS — Invitación Grizzy & The Lemmings — v2
================================================================
Organización:
  1.  Variables globales
  2.  Reset y base
  3.  Intro — capa logo
  4.  Intro — capa personajes + botón
  5.  Invitación principal
  6.  Hero — fondo parallax
  7.  Cartel flotante
  8.  Tarjetas sticky
  9.  Lemmings de tarjeta (costados)
  10. Datos dentro de tarjeta
  11. Bebé + RSVP dentro de tarjeta
  12. Botones
  13. Modal RSVP
  14. Sección final + animación
  15. Footer
  16. Animaciones @keyframes
  17. Responsive mobile
================================================================
*/


/* ── 1. VARIABLES GLOBALES ─────────────────────────────────────
   Un solo lugar para todos los colores y tipografías.
   Cambiás una variable → se actualiza en todo el archivo.
─────────────────────────────────────────────────────────────── */
:root {
  --marron:       #8B4513;
  --marron-osc:   #5C2D0A;
  --lemming:      #7B9BAF;
  --bosque:       #2D5A27;
  --bosque-claro: #4A7C59;
  --madera:       #D4A96A;
  --madera-osc:   #B8864A;
  --cielo:        #87CEEB;
  --blanco:       #FFF8F0;
  --negro:        #1A1008;

  --font-titulo: 'Luckiest Guy', cursive;
  --font-cuerpo: 'Nunito', sans-serif;

  --fade: 0.8s;         /* duración estándar de todos los fades */
  --radio-tarjeta: 24px; /* borde redondeado de las tarjetas */
}


/* ── 2. RESET Y BASE ───────────────────────────────────────────
   Elimina estilos por defecto del navegador.
─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-cuerpo);
  background: #000; /* negro base, el fondo de la serie lo tapa */
  color: var(--negro);
  overflow-x: hidden;
  background-image: url('../assets/fondo.png');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  font-family: var(--font-cuerpo);
}


/* ── 3. INTRO — CAPA LOGO ──────────────────────────────────────
   Primera pantalla. Video del logo Vision Design.
   Cubre todo con fondo negro, z-index máximo.
─────────────────────────────────────────────────────────────── */
#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  overflow: hidden;
}

/*
  La capa del logo ocupa todo el intro.
  display:flex centra el video.
*/
#intro-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity var(--fade) ease;
}

#intro-logo.fade-out {
  opacity: 0;
  pointer-events: none;
}

#video-logo {
  width: 100%;
  /* max-width: 100%; */
  height: 100vh;
  /* max-height: 100vh; */
  object-fit: cover;
}


/* ── 4. INTRO — CAPA PERSONAJES + BOTÓN ───────────────────────
   Segunda pantalla del intro.
   Muestra la animación de Grizzy + Lemmings + Tadeo
   y el botón para entrar a la invitación.
─────────────────────────────────────────────────────────────── */
#intro-personajes {
 position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: flex-end; /* botón abajo */
  justify-content: flex-end;
  padding: 2rem;
  opacity: 0;
  transition: opacity var(--fade) ease;
  overflow: hidden;
   
}


#intro-personajes.activo {
  display: flex;
}

#intro-personajes.visible {
  opacity: 1;
}

#intro-personajes.fade-out {
  opacity: 0;
  pointer-events: none;
}

/*
  La animación de personajes ocupa el centro.
  max-height: 60vh → deja espacio para el botón abajo.
*/

.personajes-animacion{
  position: absolute;
  inset: 0;
  z-index: 2;
}
.personajes-animacion video{
  width: 100%; 
  height: 100%;
  object-fit: cover;
  object-position: center center;
  mix-blend-mode: screen;
  transition: opacity 1.5s ease;
}

.personajes-animacion video.desvaneciendo {
  opacity: 0;
}

.personajes-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 1.5s ease;
  z-index: 1;
}

.personajes-overlay.oscurecer {
  background: rgba(0, 0, 0, 0.55);
}


/*
  El botón flota encima de todo.
  z-index: 2 → siempre visible.
  Empieza invisible, JS lo anima cuando el overlay oscurece.
*/
.btn-entrar {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%)scale(0);
  z-index: 2;
  font-size: 1.3rem;
  padding: 1rem 2.5rem;
  opacity: 0;
  /* el resto del estilo lo hereda de .btn-madera */
}

.btn-entrar.animar {
  animation: popBoton 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.btn-entrar.brillar {
  opacity: 1;
  transform: scale(1) translateX(-50%);
  animation: brilloPulso 2s ease-in-out infinite;
}


/* ── 5. INVITACIÓN PRINCIPAL ───────────────────────────────────
   Empieza invisible. JS le agrega .visible.
─────────────────────────────────────────────────────────────── */
#invitacion {
  opacity: 0;
  transition: opacity var(--fade) ease;
  overflow: hidden;
}
 
#invitacion.visible {
  opacity: 1;
}
 
 
/* ── 6. HERO — FONDO PARALLAX ─────────────────────────────────
   El fondo de la serie cubre hero + tarjetas como un bloque.
   background-attachment:fixed → parallax básico.
   JS lo complementa para iOS donde fixed no funciona bien.
─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  
 
  /*
    padding-bottom grande → deja espacio para que las
    tarjetas sticky se desplieguen dentro de esta sección.
    Ajustá según la altura de tus tarjetas.
  */
}
 
/*
  Overlay semitransparente encima del fondo.
  Mejora legibilidad sin tapar la imagen.
  ::before no necesita HTML extra.
*/
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.25); */
  pointer-events: none; /* no bloquea clicks en el contenido */
}
 
 
/* ── 7. CARTEL FLOTANTE ────────────────────────────────────────
   El cartel "Mi primer añito" arriba del hero.
─────────────────────────────────────────────────────────────── */
.hero-cartel {
  position: relative;
  z-index: 2; /* por encima del overlay ::before */
  display: flex;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 4rem;
  width: 100%;
  
}
 
.cartel {
  max-width: 650px;
  width: 85vw;
  animation: flotar 3s ease-in-out infinite;
  margin-top: 30vh;
}
 
.cartel img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.7));
}
 
 
/* ── 8. CONVERSACIÓN DE LEMMINGS (BURBUJAS DE CHAT) ───────────
   Cada .chat-fila es un lemming + burbuja de chat.
   Alternan izquierda y derecha como una conversación de WhatsApp.
   Cada fila entra con animación al hacer scroll.
─────────────────────────────────────────────────────────────── */
 

 
.tarjeta-info {
  position: relative;
  z-index: 2;
  background: rgba(255, 248, 240, 0.25);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  border: 3px solid var(--madera);
  padding: 2rem 1.8rem;
  max-width: 360px;
  margin: 60vh auto 8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.info-fila {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.info-label {
  font-family: var(--font-cuerpo);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--negro);
  opacity: 0.6;
}

.info-valor {
  font-family: var(--font-titulo);
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  color: var(--madera);
  letter-spacing: 1px;
}

/* Línea separadora entre fecha y hora */
.info-separador {
  height: 1px;
  background: var(--madera);
  opacity: 0.3;
}

/* Línea divisora más gruesa entre info y RSVP */
.info-divisor {
  height: 2px;
  background: var(--madera);
  opacity: 0.5;
  margin: 0.5rem 0;
}

.info-pregunta {
  font-family: var(--font-titulo);
  font-size: 1.3rem;
  color: var(--marron);
  text-align: center;
  letter-spacing: 1px;
}

.btn-ubicacion {
  width: 100%;
  text-align: center;
}

.btn-rsvp {
  width: 100%;
  font-size: 1.1rem;
  padding: 0.9rem 2rem;
}
 
 
/* ── 11. BEBÉ + RSVP DENTRO DE TARJETA ───────────────────────
   La caricatura del bebé y el botón de confirmación.
─────────────────────────────────────────────────────────────── */
.bebe-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
 
#caricatura-bebe {
  width: 140px;
  border-radius: 50%;
  border: 4px solid var(--madera);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  animation: flotar 4s ease-in-out infinite;
  transition: transform 0.1s ease;
}
 
#caricatura-bebe:active {
  transform: scale(0.93);
}
 
.bebe-texto {
  font-family: var(--font-titulo);
  color: var(--madera);
  font-size: 0.9rem;
  animation: parpadeo 2s ease-in-out infinite;
}
 
 
/* ── 12. BOTONES ──────────────────────────────────────────────
   Estilo madera para todos los botones de la invitación.
─────────────────────────────────────────────────────────────── */
.btn-madera {
  background: var(--madera);
  color: var(--marron-osc);
  font-family: var(--font-titulo);
  font-size: 1rem;
  letter-spacing: 1px;
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  border: 3px solid var(--marron);
 
  /*
    Doble sombra: la inferior da efecto 3D de botón físico,
    la exterior es el glow suave.
  */
  box-shadow:
    0 4px 0 var(--marron-osc),
    0 6px 20px rgba(0, 0, 0, 0.25);
 
  transition: background 0.2s, transform 0.1s, box-shadow 0.1s;
}
 
/*
  Al presionar: baja 4px (igual que la sombra) y pierde la sombra.
  Simula un botón físico que se hunde.
*/
.btn-madera:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--marron-osc), 0 2px 8px rgba(0, 0, 0, 0.2);
}
 
.btn-madera:hover {
  background: var(--madera-osc);
}
 
.btn-ubicacion {
  width: 100%;
  margin-top: 0.5rem;
}
 
.btn-rsvp {
  font-size: 1.1rem;
  padding: 0.9rem 2rem;
  background: var(--madera);
}
 
.btn-confirmar {
  width: 100%;
  margin-top: 0.5rem;
  font-size: 1.1rem;
}
 
 
/* ── 13. MODAL RSVP ───────────────────────────────────────────
   Ventana flotante de confirmación de asistencia.
─────────────────────────────────────────────────────────────── */
 
/*
  El overlay oscuro detrás del modal.
  display:none por defecto. JS le agrega .activo.
*/
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
 
.modal-overlay.activo {
  display: flex;
  animation: fadeIn 0.3s ease;
}
 
/*
  La caja blanca del modal.
  max-height + overflow-y:auto → scroll interno si el contenido
  es más alto que la pantalla.
*/
.modal-contenido {
  background: var(--blanco);
  border-radius: 20px;
  border: 4px solid var(--marron);
  padding: 2rem 1.5rem;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: entradaModal 0.3s ease;
}
 
.modal-cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--marron);
  color: var(--blanco);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
 
.modal-cerrar:hover {
  background: var(--marron-osc);
}
 
.modal-titulo {
  font-family: var(--font-titulo);
  font-size: 1.6rem;
  color: var(--marron);
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}
 
.campo {
  margin-bottom: 1.2rem;
}
 
.campo label {
  display: block;
  font-weight: 700;
  color: var(--marron);
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}
 
.campo input,
.campo textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--madera);
  border-radius: 12px;
  font-family: var(--font-cuerpo);
  font-size: 1rem;
  background: #fff;
  color: var(--negro);
  outline: none;
  transition: border-color 0.2s;
}
 
/* Resalta el campo activo */
.campo input:focus,
.campo textarea:focus {
  border-color: var(--marron);
}
 
.campo textarea {
  resize: none;
}
 
.rsvp-exito-texto {
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  color: var(--bosque);
  text-align: center;
  padding: 1rem;
  letter-spacing: 1px;
}
 
 
/* ── 14. SECCIÓN FINAL + ANIMACIÓN ───────────────────────────
   El oso y los lemmings saludando después de las tarjetas.
   Entra desde abajo cuando el usuario llega a esta sección.
─────────────────────────────────────────────────────────────── */
.seccion-final {
  /* padding: 3rem 1rem 0; */
  text-align: center;
  overflow: hidden;
  width: 100vw;
  
}
 
/*
  Empieza invisible y bajada 60px.
  JS agrega .visible cuando IntersectionObserver la detecta.
*/
.animacion-final {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  margin: 0 auto;
  width: 100%;
}
 
.animacion-final.visible {
  opacity: 1;
  transform: translateY(0);
    


}
 
.animacion-final video {
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
 
 
/* ── 15. FOOTER ───────────────────────────────────────────────
   Logo Vision Design + Instagram + CTA.
─────────────────────────────────────────────────────────────── */
footer {
  background: var(--marron-osc);
  padding: 2.8rem 1rem;
  text-align: center;
  border-radius: 25px 25px 0 0;
  opacity: 0.90;
  backdrop-filter: blur(15px);
  mix-blend-mode: lighten;
}
 
.footer-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
 
/*
  brightness(0) → lo pone negro.
  invert(1)     → lo invierte a blanco.
  Sin necesitar una versión blanca del logo.
*/
.footer-logo {
  max-width: 75px;
  margin-bottom: 0.5rem;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
 
.footer-hecho {
  color: var(--blanco);
  font-size: 0.9rem;
  opacity: 0.8;
}
 
.footer-vcard {
  color: var(--blanco);
  font-weight: 900;
  font-size: 1.2rem;
  text-decoration: none;
  transition: color 0.2s;
  outline: 1px solid #ffffff;
  padding: 12px;
  border-radius: 25px;
}
 
.footer-vcard:hover {
  color: var(--blanco);
  background: var(--madera);
}
 
.footer-cta {
  color: var(--blanco);
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.75;
  margin-top: 0.3rem;
}
 
 
/* ── 16. ANIMACIONES @keyframes ───────────────────────────────
   Todas las animaciones en un solo lugar.
─────────────────────────────────────────────────────────────── */
 
/* Cartel y bebé flotan suavemente arriba y abajo */
@keyframes flotar {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-12px); }
}
 
/* Botón entrar aparece con rebote desde escala 0 */
@keyframes popBoton {
  0%   { opacity: 0; transform: scale(0);    }
  100% { opacity: 1; transform: scale(1);    }
}
 
/* Brillo pulsante del botón entrar */
@keyframes brilloPulso {
  0%, 100% { box-shadow: 0 4px 0 var(--marron-osc), 0 0 20px rgba(212,169,106,0.3); }
  50%       { box-shadow: 0 4px 0 var(--marron-osc), 0 0 45px rgba(212,169,106,0.8); }
}
 
/* Lemming salta al tocarlo */
@keyframes saltoLemming {
  0%   { transform: translateY(-50%) scale(1);    }
  30%  { transform: translateY(-80%) scale(1.15); }
  60%  { transform: translateY(-50%) scale(0.92); }
  100% { transform: translateY(-50%) scale(1);    }
}
 
/* El lemming derecho espejado también salta */
.lemming-der.saltando {
  animation: saltoLemmingDer 0.4s ease;
}
 
@keyframes saltoLemmingDer {
  0%   { transform: translateY(-50%) scaleX(-1) scale(1);    }
  30%  { transform: translateY(-80%) scaleX(-1) scale(1.15); }
  60%  { transform: translateY(-50%) scaleX(-1) scale(0.92); }
  100% { transform: translateY(-50%) scaleX(-1) scale(1);    }
}
 
/* El texto "tocame" parpadea */
@keyframes parpadeo {
  0%, 100% { opacity: 0.8; }
  50%       { opacity: 0.2; }
}
 
/* Fade in genérico */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
 
/* Modal entra desde abajo */
@keyframes entradaModal {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
 
 
/* ── 17. RESPONSIVE MOBILE ────────────────────────────────────
   Ajustes para pantallas pequeñas (menos de 500px).
─────────────────────────────────────────────────────────────── */
@media (max-width: 500px) {
 
  /*
    background-attachment:fixed no funciona en iOS.
    Lo desactivamos y JS maneja el parallax.
  */
  .hero {
    background-attachment: scroll;
  }
 
  /*
    En mobile los lemmings de costado se achican un poco
    para que no salgan demasiado de la pantalla.
  */
  .lemming-tarjeta {
    width: 70px;
  }
 
  .lemming-izq {
    left: -35px;
  }
 
  .lemming-der {
    right: -35px;
  }
 
  /*
    Menos padding lateral para los lemmings más chicos.
  */
  .tarjetas-container {
    padding: 0 60px 20vh;
  }
 
  .btn-entrar {
    font-size: 1.1rem;
    padding: 0.9rem 2rem;
  }
 
}