/* ==========================================================================
   INVITACIÓN DIGITAL DE BODA - ESTILOS PRINCIPALES
   ========================================================================== */

/* Variables CSS */
:root {
  /* ===== Colores Principales (Azul Lavanda) ===== */
  --primary-color: #aabaf7; /* Azul lavanda principal */
  --primary-light: #c5d1fc; /* Azul lavanda claro */
  --primary-dark: #7a8de8; /* Azul lavanda oscuro */
  --primary-medium: #93a5f2; /* Azul lavanda medio */
  --primary-muted: #8699e3; /* Azul lavanda apagado */
  --primary-darker: #5d72d6; /* Azul lavanda más oscuro */
  --primary-very-dark: #4a5dc4; /* Azul lavanda muy oscuro */

  /* ===== Colores Secundarios (Púrpura/Índigo) ===== */
  --secondary-color: #9b8fc9; /* Púrpura secundario */
  --brown-dark: #5e4d7a; /* Púrpura oscuro (reemplaza marrón) */
  --brown-darker: #3d2f52; /* Púrpura muy oscuro */
  --brown-medium: #7a6b9d; /* Púrpura medio claro */
  --brown-medium-dark: #665787; /* Púrpura medio oscuro */
  --brown-accent: #8677ab; /* Púrpura acento */
  --brown-muted: #7d6fb3; /* Púrpura lavanda oscuro */
  --brown-text: #4a3d68; /* Púrpura para texto */
  --brown-extra-dark: #352949; /* Púrpura extra oscuro */
  --brown-taupe: #8a7ba8; /* Púrpura taupe */
  --brown-black: #1e1830; /* Púrpura casi negro */
  --brown-saddle: #6b5894; /* Púrpura sólido */

  /* ===== Colores Lavanda Claro y Pasteles ===== */
  --accent-color: #f5f7fe; /* Lavanda muy claro (fondo) */
  --cream-light: #e8ecfc; /* Lavanda pastel claro */
  --cream-medium: #dde3f9; /* Lavanda pastel medio */
  --cream-dark: #d0d8f5; /* Lavanda pastel oscuro */
  --cream-tan: #c9d4f3; /* Lavanda pastel bronceado */
  --beige-light: #f0f3fc; /* Lavanda beige muy claro */

  /* ===== Tonos de Azul (para variaciones) ===== */
  --gold-variant-1: #a3b8f5; /* Azul lavanda variante 1 */
  --gold-bright: #6b8fff; /* Azul brillante */
  --gold-light: #b8c9ff; /* Azul claro */

  /* ===== Colores Rojos/Rosa (para acentos) ===== */
  --red-dark: #c75b8a; /* Rosa oscuro */
  --red-darker: #a8447a; /* Rosa muy oscuro */
  --red-maroon: #b55287; /* Rosa granate */
  --red-maroon-dark: #9d4675; /* Rosa granate oscuro */
  --red-border: #d06f9f; /* Rosa para bordes */
  --red-light: #e89dc0; /* Rosa claro */
  --red-alert: #e85d7a; /* Rosa alerta */
  --red-coral: #e66b8e; /* Rosa coral */
  --orange-alert: #ff8fa3; /* Rosa naranja alerta */
  --orange-warning: #ffb3c6; /* Rosa advertencia */

  /* ===== Colores Verdes/Turquesa (para confirmaciones) ===== */
  --green-dark: #4d9a82; /* Turquesa oscuro */
  --green-medium: #63b39d; /* Turquesa medio */
  --green-success: #5fc9ad; /* Turquesa éxito */
  --green-light: #7ddec4; /* Turquesa claro */
  --green-accent: #52bfa4; /* Turquesa acento */
  --green-bright: #6fd9bb; /* Turquesa brillante */

  /* ===== Escala de Grises y Tonos Neutros ===== */
  --white: #ffffff; /* Blanco */
  --white-smoke: #f8f9fe; /* Humo blanco con tinte lavanda */
  --gray-lightest: #f5f7fe; /* Gris muy claro (igual a accent-color) */
  --gray-light: #e4e7f3; /* Gris claro con tinte lavanda */
  --gray-medium-light: #d6daf0; /* Gris medio claro */
  --gray-medium: #c5cae8; /* Gris medio */
  --gray: #a6aed5; /* Gris con tinte lavanda */
  --gray-dark: #7d85b8; /* Gris oscuro */
  --gray-darker: #676f9e; /* Gris más oscuro */
  --gray-very-dark: #4a5186; /* Gris muy oscuro */
  --gray-slate: #8891bd; /* Gris pizarra lavanda */
  --text-dark: #2e3552; /* Texto oscuro azulado */
  --text-light: #7d85b8; /* Texto claro (gris oscuro) */
  --text-slate: #3d4766; /* Azul pizarra oscuro */
  --dark-navy: #2a2e4f; /* Azul marino oscuro */
  --dark-blue: #1f284a; /* Azul oscuro */
  --dark-charcoal: #252838; /* Carbón oscuro azulado */
  --dark-slate-blue: #2c3247; /* Azul pizarra oscuro */
  --dark-midnight: #1a1d2e; /* Medianoche */
  --steel-blue: #5d6b99; /* Azul acero */

  /* ===== Colores con Transparencia ===== */
  --black-alpha-10: rgba(0, 0, 0, 0.1);
  --black-alpha-15: rgba(0, 0, 0, 0.15);
  --black-alpha-20: rgba(0, 0, 0, 0.2);
  --black-alpha-30: rgba(0, 0, 0, 0.3);
  --black-alpha-40: rgba(0, 0, 0, 0.4);
  --black-alpha-50: rgba(0, 0, 0, 0.5);
  --black-alpha-60: rgba(0, 0, 0, 0.6);
  --black-alpha-70: rgba(0, 0, 0, 0.7);
  --black-alpha-80: rgba(0, 0, 0, 0.8);
  --black-alpha-90: rgba(0, 0, 0, 0.9);

  --white-alpha-10: rgba(255, 255, 255, 0.1);
  --white-alpha-20: rgba(255, 255, 255, 0.2);
  --white-alpha-50: rgba(255, 255, 255, 0.5);
  --white-alpha-80: rgba(255, 255, 255, 0.8);

  --primary-alpha-15: rgba(170, 186, 247, 0.15); /* #aabaf7 con transparencia */
  --primary-alpha-20: rgba(170, 186, 247, 0.2);
  --primary-alpha-30: rgba(170, 186, 247, 0.3);
  --primary-alpha-40: rgba(170, 186, 247, 0.4);
  --primary-alpha-70: rgba(170, 186, 247, 0.7);

  --primary-light-alpha-15: rgba(
    197,
    209,
    252,
    0.15
  ); /* Color claro con transparencia */
  --primary-light-alpha-20: rgba(197, 209, 252, 0.2);
  --primary-light-alpha-30: rgba(197, 209, 252, 0.3);
  --primary-light-alpha-40: rgba(197, 209, 252, 0.4);
  --primary-light-alpha-50: rgba(197, 209, 252, 0.5);

  --brown-dark-alpha-40: rgba(94, 77, 122, 0.4); /* Púrpura con transparencia */
  --brown-dark-alpha-50: rgba(94, 77, 122, 0.5);

  --green-dark-alpha-40: rgba(
    77,
    154,
    130,
    0.4
  ); /* Turquesa con transparencia */
  --green-dark-alpha-60: rgba(77, 154, 130, 0.6);

  --green-medium-alpha-30: rgba(99, 179, 157, 0.3);
  --green-medium-alpha-50: rgba(99, 179, 157, 0.5);

  /* ===== Gradientes ===== */
  --gradient-primary: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-dark) 100%
  );
  --gradient-primary-alt: linear-gradient(
    90deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  --gradient-primary-light: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  --gradient-cream-to-gold: linear-gradient(
    135deg,
    var(--cream-light) 0%,
    var(--primary-color) 100%
  );
  --gradient-white-cream: linear-gradient(
    135deg,
    var(--white) 0%,
    var(--beige-light) 100%
  );
  --gradient-cream-shades: linear-gradient(
    135deg,
    var(--cream-medium) 0%,
    var(--cream-dark) 100%
  );
  --gradient-brown: linear-gradient(
    135deg,
    var(--secondary-color) 0%,
    var(--brown-dark) 100%
  );
  --gradient-brown-dark: linear-gradient(
    135deg,
    var(--brown-dark) 0%,
    var(--brown-darker) 50%,
    var(--brown-dark) 100%
  );
  --gradient-brown-medium: linear-gradient(
    135deg,
    var(--brown-medium) 0%,
    var(--brown-medium-dark) 50%,
    var(--brown-medium) 100%
  );
  --gradient-brown-hover: linear-gradient(
    135deg,
    var(--brown-dark) 0%,
    var(--brown-accent) 100%
  );
  --gradient-brown-alt: linear-gradient(
    135deg,
    var(--brown-accent) 0%,
    var(--brown-dark) 50%,
    var(--brown-darker) 100%
  );
  --gradient-brown-fancy: linear-gradient(
    145deg,
    var(--accent-color) 0%,
    var(--white) 50%,
    var(--accent-color) 100%
  );
  --gradient-red: linear-gradient(
    135deg,
    var(--red-dark) 0%,
    var(--red-darker) 50%,
    var(--red-dark) 100%
  );
  --gradient-green: linear-gradient(
    135deg,
    var(--green-success) 0%,
    var(--green-light) 100%
  );
  --gradient-gold-bright: linear-gradient(
    135deg,
    var(--gold-bright) 0%,
    var(--gold-light) 100%
  );
  --gradient-orange: linear-gradient(
    135deg,
    var(--orange-alert) 0%,
    var(--orange-warning) 100%
  );
  --gradient-alert: linear-gradient(
    135deg,
    var(--red-alert) 0%,
    var(--orange-alert) 100%
  );
  --gradient-overlay: linear-gradient(
    var(--black-alpha-40),
    var(--black-alpha-60)
  );
  --gradient-overlay-alt: linear-gradient(
    var(--black-alpha-50) 0%,
    var(--black-alpha-40) 50%,
    var(--black-alpha-50) 100%
  );
  --gradient-overlay-light: linear-gradient(
    var(--black-alpha-20) 0%,
    var(--black-alpha-30) 50%,
    var(--black-alpha-20) 100%
  );
  --gradient-horizontal-gold: linear-gradient(
    90deg,
    transparent,
    var(--primary-color),
    transparent
  );
  --gradient-horizontal-gold-simple: linear-gradient(
    90deg,
    transparent,
    var(--primary-color)
  );

  /* ===== Sombras ===== */
  --shadow-soft: 0 10px 30px var(--black-alpha-10);
  --shadow-card: 0 8px 25px var(--black-alpha-15);
  --shadow-medium: 0 5px 15px var(--black-alpha-30);
  --shadow-small: 0 3px 10px var(--black-alpha-20);
  --shadow-large: 0 4px 20px var(--black-alpha-20);
  --shadow-extra-large: 0 4px 20px var(--black-alpha-30);
  --shadow-primary: 0 3px 10px var(--primary-alpha-40);
  --shadow-primary-large: 0 8px 30px var(--primary-light-alpha-30);
  --shadow-brown: 0 10px 30px var(--brown-dark-alpha-40);
  --shadow-brown-medium: 0 5px 15px var(--primary-alpha-30);
  --shadow-brown-large: 0 15px 40px var(--brown-dark-alpha-50);
  --shadow-brown-combo: 0 8px 25px var(--primary-alpha-40);
  --shadow-green: 0 10px 30px var(--green-dark-alpha-40);
  --shadow-green-medium: 0 5px 15px var(--green-medium-alpha-30);
  --shadow-green-large: 0 15px 40px var(--green-dark-alpha-60);
  --shadow-green-combo: 0 8px 25px var(--green-medium-alpha-50);
  --shadow-inset: inset 0 0 150px var(--black-alpha-60);
  --text-shadow: 2px 2px 8px var(--black-alpha-70);
  --text-shadow-dark: 3px 3px 10px var(--black-alpha-80);
  --text-shadow-darker: 2px 2px 8px var(--black-alpha-90);
  --text-shadow-light: 2px 2px 6px var(--black-alpha-70);
  --text-shadow-gold: 0 2px 4px var(--black-alpha-70),
    0 0 10px var(--primary-alpha-70);
  --text-shadow-cream: 0 3px 6px var(--black-alpha-60),
    0 0 15px var(--primary-light-alpha-50);
  --drop-shadow: drop-shadow(0 4px 20px var(--black-alpha-30));

  /* ===== Bordes ===== */
  --border-radius: 15px;

  /* ===== Fuentes ===== */
  --font-primary: "Playfair Display", serif;
  --font-secondary: "Lato", sans-serif;
  --font-script: "Great Vibes", cursive;
}

/* Reset y Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

html {
  scroll-behavior: smooth;
}

/* Contenido principal inicialmente oculto */
#contenido-principal {
  display: none;
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

#contenido-principal.show {
  display: block !important;
  opacity: 1 !important;
}

.section-title {
  font-family: "Sacramento", cursive;
  font-size: 6rem;
  color: var(--gold-variant-1);
  margin-bottom: 2rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.padrinos-list li {
  font-size: 1.2rem !important;
  /* Cambiar el tamaño aquí */
}

/* Color específico para h4, párrafos y listas de padrinos */
h4,
.timeline-card h4,
.padrinos-card h4,
.info-card h4,
.regalo-card h4,
.trivia-question h4,
p,
.lead,
.romantic-message,
.padrinos-list li {
  color: var(--text-light) !important;
}

/* Color específico para h4 */
h4,
.timeline-card h4,
.padrinos-card h4,
.info-card h4,
.regalo-card h4,
.trivia-question h4 {
  color: var(--brown-dark) !important;
}

.separacion {
  max-width: 100%;
  /* Asegura que la imagen no sobrepase el contenedor */
  display: block;
  /* Evita espacios en blanco extra */
  margin: 0 auto;
  /* Centra la imagen si es necesario */
}

/* Fuente Patua One para h1 y h4 */
h1 {
  font-family: "Patua One", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 6.3rem !important;
  padding-top: 40px;
}

/*Para los que no agarró xd*/

h4,
.timeline-card h4,
.padrinos-card h4,
.info-card h4,
.regalo-card h4,
.trivia-question h4,
.itinerario-item .event h5,
p,
.lead,
.romantic-message,
li,
a,
h3,
#options-container {
  font-family: "Patua One", serif !important;
  font-weight: 400 !important;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

/* ==========================================================================
  CONTROL DE MÚSICA - TEMÁTICA DE BODA ELEGANTE (CORREGIDO PARA MÓVIL)
  ========================================================================== */

/* Control de música con temática elegante */
.music-control {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateY(20px);
}

.music-control.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Botón de música con colores temáticos */
.music-btn {
  width: 65px;
  height: 65px;
  background: linear-gradient(
    135deg,
    var(--brown-dark) 0%,
    var(--brown-darker) 50%,
    var(--brown-dark) 100%
  );
  border: 4px solid var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px var(--brown-dark-alpha-40),
    0 5px 15px var(--primary-alpha-30), inset 0 2px 0 var(--white-alpha-10);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* Efecto de brillo dorado sutil en el fondo */
.music-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 30% 30%,
      var(--primary-alpha-20) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 70%,
      var(--primary-light-alpha-15) 0%,
      transparent 50%
    );
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: elegantGlow 4s ease-in-out infinite;
}

@keyframes elegantGlow {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1) rotate(0deg);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.05) rotate(180deg);
  }
}

.music-btn.playing::before {
  opacity: 1;
}

/* Estados hover mejorados */
.music-btn:hover {
  transform: scale(1.1);
  border-color: var(--cream-light);
  box-shadow: 0 15px 40px var(--brown-dark-alpha-50),
    0 8px 25px var(--primary-alpha-40), inset 0 3px 0 var(--white-alpha-20);
  background: linear-gradient(
    135deg,
    var(--brown-medium) 0%,
    var(--brown-medium-dark) 50%,
    var(--brown-medium) 100%
  );
}

.music-btn:active {
  transform: scale(0.95);
}

/* Icono de música con colores temáticos */
.music-icon {
  font-size: 1.6rem;
  color: var(--primary-color);
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px var(--black-alpha-70), 0 0 10px var(--primary-alpha-70);
  z-index: 2;
  position: relative;
}

.music-btn:hover .music-icon {
  color: var(--cream-light);
  text-shadow: 0 3px 6px var(--black-alpha-60),
    0 0 15px var(--primary-light-alpha-50);
  transform: scale(1.1);
}

/* Estado reproduciendo - verde elegante */
.music-btn.playing {
  background: var(--brown-muted);
  border-color: var(--primary-medium);
  animation: musicPulseElegant 3s ease-in-out infinite;
}

.music-btn.playing .music-icon {
  color: var(--brown-text);
}

@keyframes musicPulseElegant {
  0%,
  100% {
    box-shadow: 0 10px 30px var(--green-dark-alpha-40),
      0 5px 15px var(--green-medium-alpha-30),
      inset 0 2px 0 var(--white-alpha-10);
  }

  50% {
    box-shadow: 0 15px 40px var(--green-dark-alpha-60),
      0 8px 25px var(--green-medium-alpha-50),
      inset 0 3px 0 var(--white-alpha-20);
  }
}

/* Estado silenciado - rojo elegante */
.music-btn.muted {
  background: linear-gradient(
    135deg,
    var(--red-dark) 0%,
    var(--red-darker) 50%,
    var(--red-dark) 100%
  );
  border-color: var(--red-border);
  animation: none;
}

.music-btn.muted .music-icon {
  color: var(--red-light);
}

/* Tooltip temático */
.music-btn::after {
  content: attr(title);
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(
    135deg,
    var(--brown-dark) 0%,
    var(--brown-darker) 100%
  );
  color: var(--cream-light);
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 13px;
  font-family: "Patua One", serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 10001;
  border: 2px solid var(--primary-color);
  box-shadow: 0 5px 15px var(--black-alpha-30);
}

.music-btn:hover::after {
  opacity: 1;
  visibility: visible;
  top: -45px;
}

/* Indicador de volumen temático */
.volume-indicator {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  background: linear-gradient(
    135deg,
    var(--cream-light) 0%,
    var(--primary-color) 100%
  );
  border: 2px solid var(--brown-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--brown-dark);
  font-weight: bold;
  font-family: "Patua One", serif;
  opacity: 0;
  transition: all 0.3s ease;
  transform: scale(0);
  box-shadow: 0 3px 10px var(--black-alpha-20);
  pointer-events: none;
  /* AGREGADO: Evitar interferencias */
}

.music-btn.playing .volume-indicator {
  opacity: 1;
  transform: scale(1);
}

/* Elemento de audio oculto */
#backgroundMusic {
  display: none;
}

/* Efecto decorativo alrededor del botón */
.music-control::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  border: 1px solid var(--primary-alpha-20);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.4s ease;
  animation: decorativeRing 6s ease-in-out infinite;
}

@keyframes decorativeRing {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
}

.music-control.show::before {
  opacity: 1;
}

/* Modificación al botón "Ver Invitación" - temático */
.btn-elegant.music-ready::after {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 1.2rem;
  background: linear-gradient(
    135deg,
    var(--primary-muted) 0%,
    var(--primary-muted) 100%
  );
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: noteFloatElegant 3s ease-in-out infinite;
  box-shadow: 0 3px 10px var(--primary-alpha-40);
}

@keyframes noteFloatElegant {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-5px) rotate(5deg);
  }
}

/* Responsive temático */
@media (max-width: 768px) {
  .music-control {
    bottom: 15px;
    right: 15px;
  }

  .music-btn {
    width: 55px;
    height: 55px;
    border-width: 3px;
  }

  .music-icon {
    font-size: 1.3rem;
  }

  .music-btn::after {
    font-size: 12px;
    padding: 8px 12px;
    top: -40px;
  }

  .music-btn:hover::after {
    top: -35px;
  }

  .volume-indicator {
    width: 20px;
    height: 20px;
    font-size: 10px;
    top: -8px;
    right: -8px;
  }
}

@media (max-width: 576px) {
  .music-control {
    bottom: 10px;
    right: 10px;
  }

  .music-btn {
    width: 60px;
    /* CORREGIDO: De 50px a 60px */
    height: 60px;
    /* CORREGIDO: De 50px a 60px */
    border-width: 2px;
    animation: none;
    /* CORREGIDO: Quitar animaciones que interfieren */
  }

  /* CORREGIDO: Eliminar efectos decorativos en móvil */
  .music-btn::before {
    display: none;
  }

  .music-btn.playing {
    animation: none;
    /* CORREGIDO: Quitar pulse en móvil */
  }

  .music-icon {
    font-size: 1.2rem;
  }

  .music-btn::after {
    top: -35px;
    font-size: 11px;
    padding: 6px 10px;
  }

  .music-btn:hover::after {
    top: -30px;
  }

  .volume-indicator {
    width: 18px;
    height: 18px;
    font-size: 9px;
    top: -6px;
    right: -6px;
    pointer-events: none;
    /* CORREGIDO: Asegurar que no bloquee clicks */
  }

  /* Ocultar anillo decorativo en móviles */
  .music-control::before {
    display: none;
  }
}

/* ==========================================================================
   HERO SECTION - LUJO ATEMPORAL (REEMPLAZAR CSS EXISTENTE)
   ========================================================================== */

.hero-section-elegant {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  /* Imagen de fondo responsiva y centrada */
  background: radial-gradient(
      circle at 30% 20%,
      var(--primary-light-alpha-20) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 80%,
      var(--primary-alpha-15) 0%,
      transparent 50%
    ),
    url("https://quinceaños.es/wp-content/uploads/2023/03/Carolina-84-scaled.jpg");

  /* Configuración responsiva de la imagen */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 150px var(--black-alpha-60);
}

/* Overlay con efecto de rotación sutil */
.hero-section-elegant::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--black-alpha-50) 0%,
    var(--black-alpha-40) 50%,
    var(--black-alpha-50) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Animación de rotación muy sutil */
@keyframes luxuryRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Overlay elegante (ya existe en tu código, mantener como está) */
.hero-overlay-elegant {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--black-alpha-20) 0%,
    var(--black-alpha-30) 50%,
    var(--black-alpha-20) 100%
  );
  backdrop-filter: blur(0.5px);
}

/* Partículas de corazones flotantes (mantener como está) */
.heart-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}

.heart-particle {
  position: absolute;
  color: var(--primary-light-alpha-40);
  /* Ajustado al nuevo esquema de colores */
  font-size: 20px;
  animation: heartFloat 20s infinite linear;
  opacity: 0;
}

.heart-particle:nth-child(odd) {
  font-size: 28px;
}

.heart-particle:nth-child(even) {
  font-size: 20px;
}

/* Mantener todas tus posiciones de corazones existentes */
.heart-particle:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 25s;
}

.heart-particle:nth-child(2) {
  left: 20%;
  animation-delay: 3s;
  animation-duration: 18s;
}

.heart-particle:nth-child(3) {
  left: 30%;
  animation-delay: 6s;
  animation-duration: 22s;
}

.heart-particle:nth-child(4) {
  left: 40%;
  animation-delay: 9s;
  animation-duration: 20s;
}

.heart-particle:nth-child(5) {
  left: 50%;
  animation-delay: 12s;
  animation-duration: 24s;
}

.heart-particle:nth-child(6) {
  left: 60%;
  animation-delay: 2s;
  animation-duration: 19s;
}

.heart-particle:nth-child(7) {
  left: 70%;
  animation-delay: 5s;
  animation-duration: 21s;
}

.heart-particle:nth-child(8) {
  left: 80%;
  animation-delay: 8s;
  animation-duration: 23s;
}

.heart-particle:nth-child(9) {
  left: 15%;
  animation-delay: 11s;
  animation-duration: 17s;
}

.heart-particle:nth-child(10) {
  left: 85%;
  animation-delay: 1s;
  animation-duration: 26s;
}

/* Animación de corazones (mantener como está) */
@keyframes heartFloat {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(0.5);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  20% {
    transform: translateY(80vh) rotate(45deg) scale(0.8);
  }

  50% {
    transform: translateY(40vh) rotate(180deg) scale(1);
    opacity: 0.8;
  }

  80% {
    transform: translateY(10vh) rotate(270deg) scale(0.6);
    opacity: 0.4;
  }

  100% {
    transform: translateY(-10vh) rotate(360deg) scale(0.3);
    opacity: 0;
  }
}

/* Contenido principal (mantener como está) */
.hero-content-elegant {
  position: relative;
  z-index: 10;
  text-align: center;
  color: white;
  max-width: 600px;
  padding: 2rem;
  filter: drop-shadow(0 4px 20px var(--black-alpha-30));
}

/* Título principal elegante (mantener como está) */
.hero-title-elegant {
  font-family: "Sacramento", cursive;
  font-size: 8.5rem;
  color: white;
  margin-bottom: 2rem;
  font-weight: 400;
  text-shadow: 2px 2px 8px var(--black-alpha-70);
  letter-spacing: 2px;
  animation: titleFadeIn 2s ease-out;
}

/* Contenedor de nombres minimalista (mantener como está) */
.couple-names-elegant {
  font-size: 3.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
  animation: namesFadeIn 2s ease-out 0.5s both;
}

.bride-name-elegant,
.groom-name-elegant {
  font-family: "Great Vibes", cursive;
  font-size: 4.9rem !important;
  color: white;
  margin: 0;
  font-weight: 400;
  text-shadow: 3px 3px 10px var(--black-alpha-80);
  transition: all 0.3s ease;
}

.bride-name-elegant:hover,
.groom-name-elegant:hover {
  color: var(--cream-light);
  /* Ajustado al nuevo esquema */
  transform: scale(1.05);
}

.ampersand-elegant {
  font-family: "Great Vibes", cursive;
  font-size: 5rem;
  color: var(--cream-light);
  /* Ajustado al nuevo esquema */
  text-shadow: 2px 2px 6px var(--black-alpha-70);
  opacity: 0.9;
}

/* Fecha elegante (mantener como está) */
.wedding-date-elegant {
  font-family: "Patua One", serif;
  font-size: 2.3rem;
  color: var(--white);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 4rem;
  font-weight: 400;
  text-shadow: 2px 2px 8px var(--black-alpha-90);
  position: relative;
  animation: dateFadeIn 2s ease-out 1s both;
}

/* Líneas decorativas sutiles (mantener como está) */
.wedding-date-elegant::before,
.wedding-date-elegant::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--white-alpha-50),
    transparent
  );
}

.wedding-date-elegant::before {
  left: -80px;
}

.wedding-date-elegant::after {
  right: -80px;
}

/* Botón minimalista elegante (mantener como está) */
.btn-elegant {
  background: transparent;
  border: 2px solid var(--white-alpha-80);
  color: white;
  padding: 18px 45px;
  font-family: "Patua One", serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 1px;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px var(--black-alpha-20);
  animation: buttonFadeIn 2s ease-out 1.5s both;
  margin-top: 2rem;
}

.btn-elegant::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--white-alpha-10),
    transparent
  );
  transition: left 0.6s ease;
}

.btn-elegant:hover {
  border-color: var(--cream-light);
  /* Ajustado al nuevo esquema */
  color: var(--cream-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--primary-light-alpha-30);
}

.btn-elegant:hover::before {
  left: 100%;
}

.btn-elegant:hover .btn-icon {
  transform: scale(1.2);
  color: var(--cream-light);
}

.btn-icon {
  transition: all 0.3s ease;
}

.btn-text {
  transition: all 0.3s ease;
}

/* Animaciones de entrada (mantener como están) */
@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes namesFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dateFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes buttonFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* RESPONSIVE DESIGN (mantener como está) */
@media (max-width: 768px) {
  .hero-content-elegant {
    padding: 1.5rem;
  }

  .hero-title-elegant {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
  }

  .couple-names-elegant {
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
  }

  .bride-name-elegant,
  .groom-name-elegant {
    font-size: 3rem;
  }

  .ampersand-elegant {
    font-size: 2.5rem;
    margin: 0.5rem 0;
  }

  .wedding-date-elegant {
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 3rem;
  }

  .wedding-date-elegant::before,
  .wedding-date-elegant::after {
    width: 40px;
  }

  .wedding-date-elegant::before {
    left: -50px;
  }

  .wedding-date-elegant::after {
    right: -50px;
  }

  .btn-elegant {
    padding: 15px 35px;
    font-size: 1rem;
  }

  /* Menos corazones en móvil */
  .heart-particle:nth-child(n + 6) {
    display: none;
  }
}

@media (max-width: 576px) {
  .hero-title-elegant {
    font-size: 2.3rem;
    letter-spacing: 1px;
  }

  .bride-name-elegant,
  .groom-name-elegant {
    font-size: 2.5rem;
  }

  .ampersand-elegant {
    font-size: 2rem;
  }

  .wedding-date-elegant {
    font-size: 1rem;
    letter-spacing: 1px;
    padding: 0 1rem;
  }

  .wedding-date-elegant::before,
  .wedding-date-elegant::after {
    display: none;
  }

  .btn-elegant {
    padding: 12px 30px;
    font-size: 0.95rem;
    gap: 8px;
  }
}

/* Overlay elegante y sutil */
.hero-overlay-elegant {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--black-alpha-40) 0%,
    var(--black-alpha-50) 50%,
    var(--black-alpha-40) 100%
  );
  backdrop-filter: blur(0.5px);
}

/* Partículas de corazones flotantes */
.heart-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.heart-particle {
  position: absolute;
  color: var(--primary-alpha-30);
  font-size: 20px;
  animation: heartFloat 20s infinite linear;
  opacity: 0;
}

.heart-particle:nth-child(odd) {
  font-size: 28px;
  /* Corazones impares más grandes */
}

.heart-particle:nth-child(even) {
  font-size: 20px;
  /* Corazones pares más pequeños */
}

/* Posiciones aleatorias para los corazones */
.heart-particle:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 25s;
}

.heart-particle:nth-child(2) {
  left: 20%;
  animation-delay: 3s;
  animation-duration: 18s;
}

.heart-particle:nth-child(3) {
  left: 30%;
  animation-delay: 6s;
  animation-duration: 22s;
}

.heart-particle:nth-child(4) {
  left: 40%;
  animation-delay: 9s;
  animation-duration: 20s;
}

.heart-particle:nth-child(5) {
  left: 50%;
  animation-delay: 12s;
  animation-duration: 24s;
}

.heart-particle:nth-child(6) {
  left: 60%;
  animation-delay: 2s;
  animation-duration: 19s;
}

.heart-particle:nth-child(7) {
  left: 70%;
  animation-delay: 5s;
  animation-duration: 21s;
}

.heart-particle:nth-child(8) {
  left: 80%;
  animation-delay: 8s;
  animation-duration: 23s;
}

.heart-particle:nth-child(9) {
  left: 15%;
  animation-delay: 11s;
  animation-duration: 17s;
}

.heart-particle:nth-child(10) {
  left: 85%;
  animation-delay: 1s;
  animation-duration: 26s;
}

/* Nuevos corazones (del 11 al 20) */
.heart-particle:nth-child(11) {
  left: 25%;
  animation-delay: 4s;
  animation-duration: 27s;
}

.heart-particle:nth-child(12) {
  left: 35%;
  animation-delay: 7s;
  animation-duration: 19s;
}

.heart-particle:nth-child(13) {
  left: 45%;
  animation-delay: 10s;
  animation-duration: 25s;
}

.heart-particle:nth-child(14) {
  left: 55%;
  animation-delay: 1.5s;
  animation-duration: 21s;
}

.heart-particle:nth-child(15) {
  left: 65%;
  animation-delay: 4.5s;
  animation-duration: 23s;
}

.heart-particle:nth-child(16) {
  left: 75%;
  animation-delay: 7.5s;
  animation-duration: 18s;
}

.heart-particle:nth-child(17) {
  left: 5%;
  animation-delay: 13s;
  animation-duration: 26s;
}

.heart-particle:nth-child(18) {
  left: 95%;
  animation-delay: 16s;
  animation-duration: 22s;
}

.heart-particle:nth-child(19) {
  left: 12%;
  animation-delay: 19s;
  animation-duration: 24s;
}

.heart-particle:nth-child(20) {
  left: 88%;
  animation-delay: 22s;
  animation-duration: 20s;
}

@keyframes heartFloat {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(0.5);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  20% {
    transform: translateY(80vh) rotate(45deg) scale(0.8);
  }

  50% {
    transform: translateY(40vh) rotate(180deg) scale(1);
    opacity: 0.8;
  }

  80% {
    transform: translateY(10vh) rotate(270deg) scale(0.6);
    opacity: 0.4;
  }

  100% {
    transform: translateY(-10vh) rotate(360deg) scale(0.3);
    opacity: 0;
  }
}

/* Contenido principal */
.hero-content-elegant {
  position: relative;
  z-index: 10;
  text-align: center;
  color: white;
  max-width: 600px;
  padding: 2rem;
  /* Sombra sutil al contenido */
  filter: drop-shadow(0 4px 20px var(--black-alpha-30));
}

/* Título principal elegante */
.hero-title-elegant {
  font-family: "Sacramento", cursive;
  font-size: 3.5rem;
  color: white;
  margin-bottom: 2rem;
  font-weight: 400;
  text-shadow: 2px 2px 8px var(--black-alpha-70);
  letter-spacing: 2px;
  animation: titleFadeIn 2s ease-out;
}

/* Contenedor de nombres minimalista */
.couple-names-elegant {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
  animation: namesFadeIn 2s ease-out 0.5s both;
}

.bride-name-elegant,
.groom-name-elegant {
  font-family: "Great Vibes", cursive;
  font-size: 4rem;
  color: white;
  margin: 0;
  font-weight: 400;
  text-shadow: 3px 3px 10px var(--black-alpha-80);
  transition: all 0.3s ease;
}

.bride-name-elegant:hover,
.groom-name-elegant:hover {
  color: var(--primary-color);
  transform: scale(1.05);
}

.ampersand-elegant {
  font-family: "Great Vibes", cursive;
  font-size: 3rem;
  color: var(--primary-color);
  text-shadow: 2px 2px 6px var(--black-alpha-70);
  opacity: 0.9;
}

/* Fecha elegante */
.wedding-date-elegant {
  font-family: "Patua One", serif;
  font-size: 1.3rem;
  color: var(--white);
  /* Blanco puro */
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 4rem;
  font-weight: 400;
  text-shadow: 2px 2px 8px var(--black-alpha-90);
  /* Sombra más fuerte */
  position: relative;
  animation: dateFadeIn 2s ease-out 1s both;
}

/* Líneas decorativas sutiles */
.wedding-date-elegant::before,
.wedding-date-elegant::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--white-alpha-50),
    transparent
  );
}

.wedding-date-elegant::before {
  left: -80px;
}

.wedding-date-elegant::after {
  right: -80px;
}

/* Botón minimalista elegante */
.btn-elegant {
  background: transparent;
  border: 2px solid var(--white-alpha-80);
  color: white;
  padding: 18px 45px;
  font-family: "Patua One", serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 1px;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px var(--black-alpha-20);
  animation: buttonFadeIn 2s ease-out 1.5s both;
  margin-top: 2rem;
}

.btn-elegant::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--white-alpha-10),
    transparent
  );
  transition: left 0.6s ease;
}

.btn-elegant:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--primary-alpha-30);
}

.btn-elegant:hover::before {
  left: 100%;
}

.btn-elegant:hover .btn-icon {
  transform: scale(1.2);
  color: var(--primary-color);
}

.btn-icon {
  transition: all 0.3s ease;
}

.btn-text {
  transition: all 0.3s ease;
}

/* Animaciones de entrada */
@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes namesFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dateFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes buttonFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========================================
   RESPONSIVE DESIGN MINIMALISTA
   ======================================== */

@media (max-width: 768px) {
  .hero-content-elegant {
    padding: 1.5rem;
  }

  .hero-title-elegant {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
  }

  .couple-names-elegant {
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
  }

  .bride-name-elegant,
  .groom-name-elegant {
    font-size: 3rem;
  }

  .ampersand-elegant {
    font-size: 2.5rem;
    margin: 0.5rem 0;
  }

  .wedding-date-elegant {
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 3rem;
  }

  .wedding-date-elegant::before,
  .wedding-date-elegant::after {
    width: 40px;
  }

  .wedding-date-elegant::before {
    left: -50px;
  }

  .wedding-date-elegant::after {
    right: -50px;
  }

  .btn-elegant {
    padding: 15px 35px;
    font-size: 1rem;
  }

  /* Menos corazones en móvil */
  .heart-particle:nth-child(n + 6) {
    display: none;
  }
}

@media (max-width: 576px) {
  .hero-title-elegant {
    font-size: 2.3rem;
    letter-spacing: 1px;
  }

  .bride-name-elegant,
  .groom-name-elegant {
    font-size: 2.5rem;
  }

  .ampersand-elegant {
    font-size: 2rem;
  }

  .wedding-date-elegant {
    font-size: 1rem;
    letter-spacing: 1px;
    padding: 0 1rem;
  }

  .wedding-date-elegant::before,
  .wedding-date-elegant::after {
    display: none;
  }

  .btn-elegant {
    padding: 12px 30px;
    font-size: 0.95rem;
    gap: 8px;
  }
}

/* Responsivo para tablets */
@media (max-width: 1024px) {
  .hero-section-elegant {
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
  }
}

/* Responsivo para móviles - mostrar más contenido de la imagen */
@media (max-width: 768px) {
  .hero-section-elegant {
    background-attachment: scroll;
    background-size: cover;
    background-position: center 20%; /* Enfoca más arriba para mostrar más del saco y relojes */
  }

  .hero-section-elegant::after {
    background: linear-gradient(
      135deg,
      var(--black-alpha-60) 0%,
      var(--black-alpha-50) 50%,
      var(--black-alpha-60) 100%
    );
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .hero-section-elegant {
    background-position: center 15%; /* Aún más arriba para ver mejor el conjunto */
    background-size: cover;
  }

  .hero-section-elegant::after {
    background: rgba(0, 0, 0, 0.65);
  }

  .hero-content-elegant {
    text-shadow: 3px 3px 10px var(--black-alpha-90);
  }
}

/* Para pantallas grandes (PC) - mantener como está */
@media (min-width: 1025px) {
  .hero-section-elegant {
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
  }
  .hero-section-elegant::after {
    background: rgba(0, 0, 0, 0.65);
  }

  .hero-content-elegant {
    text-shadow: 3px 3px 10px var(--black-alpha-90);
  }
}
/* ========================================
   SECCIÓN 2: PRESENTACIÓN ELEGANTE
   ======================================== */

.presentacion-elegante {
  padding: 8rem 0 6rem;
  background: var(--accent-color);
  position: relative;
  overflow: hidden;
  /* Sombra sutil */
  box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.05),
    0 -5px 20px rgba(0, 0, 0, 0.03);
}

/* Partículas sutiles de fondo */
.presentation-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.particle-subtle {
  position: absolute;
  color: rgba(212, 175, 55, 0.1);
  font-size: 18px;
  animation: subtleFloat 30s infinite linear;
  opacity: 0;
}

.particle-subtle:nth-child(1) {
  left: 15%;
  animation-delay: 0s;
  animation-duration: 35s;
}

.particle-subtle:nth-child(2) {
  left: 35%;
  animation-delay: 10s;
  animation-duration: 28s;
}

.particle-subtle:nth-child(3) {
  left: 55%;
  animation-delay: 20s;
  animation-duration: 32s;
}

.particle-subtle:nth-child(4) {
  left: 75%;
  animation-delay: 5s;
  animation-duration: 30s;
}

.particle-subtle:nth-child(5) {
  left: 25%;
  animation-delay: 15s;
  animation-duration: 33s;
}

@keyframes subtleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.1;
  }

  90% {
    opacity: 0.3;
  }

  100% {
    transform: translateY(-100px) rotate(180deg);
    opacity: 0;
  }
}

/* Contenedor principal */
.couple-presentation {
  margin-bottom: 4rem;
  position: relative;
  z-index: 10;
  padding: 4rem 1rem; /* Aumenté el padding vertical de 3rem a 4rem */
  min-height: 300px; /* Aumenté de 250px a 300px */
  overflow: visible !important;
}

/* Nombres con fuente Great Vibes */
.couple-names-presentation {
  font-family: "Great Vibes", cursive !important;
  /* Cambio a Great Vibes */
  font-size: 5.5rem;
  color: var(--brown-dark);
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.2;
  text-shadow: 2px 2px 8px var(--black-alpha-10);
  position: relative;
  animation: namesSlideIn 2s ease-out;
}

.name-line {
  display: block;
  position: relative;
  transition: all 0.4s ease;
}

.name-line:hover {
  color: var(--primary-color);
  transform: scale(1.02);
}

/* Ampersand elegante */
.ampersand-presentation {
  display: block;
  font-size: 3.5rem;
  color: var(--primary-color);
  margin: 1rem 0;
  opacity: 0.8;
  position: relative;
}
.romantic-morph-text {
  top: 45%; /* Cambié de 50% a 45% para dar más espacio arriba */
  padding: 1rem 0.5rem; /* Añadir padding interno */
  min-height: 120px; /* Altura mínima para evitar recortes */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Línea decorativa debajo de los nombres */
.couple-names-presentation::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-color),
    transparent
  );
  opacity: 0.6;
}

/* Contenedor del mensaje romántico */
.romantic-message-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto 4rem;
  padding: 2rem 0;
}

/* Ornamentos de citas */
.quote-ornament {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-alpha-40),
    transparent
  );
  margin: 0 auto;
  width: 200px;
  position: relative;
}

.quote-ornament.top {
  margin-bottom: 2rem;
}

.quote-ornament.top::after {
  content: '"';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--primary-color);
  background: rgba(248, 245, 240, 0.95);
  padding: 0 10px;
  font-size: 24px;
  font-family: "Great Vibes", cursive;
}

.quote-ornament.bottom {
  margin-top: 2rem;
}

.quote-ornament.bottom::after {
  content: '"';
  position: absolute;
  bottom: -15px;
  right: 50%;
  transform: translateX(50%);
  color: var(--primary-color);
  background: rgba(248, 245, 240, 0.95);
  padding: 0 10px;
  font-size: 24px;
  font-family: "Great Vibes", cursive;
}

/* Mensaje romántico */
.romantic-message-elegant {
  font-family: "Patua One", serif;
  font-size: 1.3rem;
  color: var(--gray-dark);
  line-height: 1.8;
  font-style: italic;
  text-align: center;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Contenedor de fecha elegante */
.wedding-date-presentation {
  position: relative;
  z-index: 10;
}

/* SUBIR EL CONTENEDOR DE LA FECHA */
.date-container {
  background: transparent !important;
  padding: 3rem 2rem;
  border-radius: 20px;
  box-shadow: none;
  border: none;
  max-width: 500px;
  margin: -8rem auto -6rem auto;
  /* Cambié el último 0 por -3rem */
  position: relative;
  transition: all 0.4s ease;
}

.date-container:hover {
  transform: translateY(-5px);
  box-shadow: none;
  /* Quita la sombra del hover también */
}

/* Icono de fecha */
.date-icon {
  margin-bottom: 1.5rem;
}

.date-icon i {
  font-size: 3rem;
  color: var(--primary-color);
  animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

/* Fecha principal */
.date-display-elegant {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  font-size: 2rem;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
  text-shadow: 1px 1px 3px var(--black-alpha-10);
}

/* Subtítulo de fecha */
.date-subtitle {
  font-family: "Patua One", serif;
  color: var(--gray-dark);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  opacity: 0.8;
}

/* Animaciones de entrada */
@keyframes namesSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Estilos para texto en dos líneas en móvil */
@media (max-width: 768px) {
  .romantic-morph-text {
    font-size: 3.2rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    max-width: 95vw;
    white-space: normal; /* Permitir saltos de línea */
  }
}

@media (max-width: 576px) {
  .romantic-morph-text {
    font-size: 2.5rem !important;
    line-height: 1 !important;
    max-width: 98vw;
  }
}

@media (max-width: 400px) {
  .romantic-morph-text {
    font-size: 2rem !important;
    line-height: 0.95 !important;
  }
}
/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  .presentacion-elegante {
    padding: 6rem 0 4rem;
  }

  .couple-names-presentation {
    font-size: 4rem;
    margin-bottom: 0;
  }

  .ampersand-presentation {
    font-size: 2.8rem;
    margin: 0.5rem 0;
  }

  .couple-names-presentation::after {
    width: 120px;
    bottom: -15px;
  }

  .romantic-message-container {
    margin-bottom: 3rem;
    padding: 1.5rem 1rem;
  }

  .romantic-message-elegant {
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .quote-ornament {
    width: 150px;
  }

  .quote-ornament.top::after,
  .quote-ornament.bottom::after {
    font-size: 20px;
    padding: 0 8px;
  }

  .date-container {
    padding: 2rem 1.5rem;
    margin: 0 1rem;
  }

  .date-icon i {
    font-size: 2.5rem;
  }

  .date-display-elegant {
    font-size: 1.6rem;
  }

  .date-subtitle {
    font-size: 0.9rem;
    letter-spacing: 1px;
  }

  /* Ocultar partículas en móvil */
  .particle-subtle {
    display: none;
  }
}

@media (max-width: 576px) {
  .couple-names-presentation {
    font-size: 3.2rem;
  }

  .ampersand-presentation {
    font-size: 2.3rem;
  }

  .romantic-message-elegant {
    font-size: 1rem;
    line-height: 1.5;
  }

  .date-container {
    padding: 1.5rem 1rem;
  }

  .date-display-elegant {
    font-size: 1.4rem;
  }

  .date-icon i {
    font-size: 2rem;
  }
}

/* Efectos adicionales */
.presentacion-elegante::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 30%,
      rgba(212, 175, 55, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(212, 175, 55, 0.02) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 768px) {
  .couple-presentation {
    padding: 3rem 0.5rem; /* Más padding en móvil */
    min-height: 250px;
  }

  .morphing-text-container {
    padding: 2rem;
    min-height: 180px;
  }

  .romantic-morph-text {
    top: 40%; /* Más arriba en móvil */
    padding: 0.8rem 0.3rem;
    min-height: 100px;
  }
}

@media (max-width: 576px) {
  .couple-presentation {
    padding: 2.5rem 0.2rem;
    min-height: 220px;
  }

  .romantic-morph-text {
    top: 35%; /* Aún más espacio en móviles pequeños */
    min-height: 80px;
  }
}
/* ================================
   ESTILOS POLAROID - SOBRE NOSOTROS
   ================================ */

/* Estilos tipo Polaroid para la sección Sobre Nosotros */
.polaroid-card {
  background: white;
  border-radius: 0;
  box-shadow: 0 4px 8px var(--black-alpha-10), 0 6px 20px var(--black-alpha-15);
  padding: 20px 20px 30px 20px;
  transform: rotate(-2deg);
  transition: all 0.3s ease;
  max-width: 350px;
  margin: 0 auto;
  position: relative;
  height: auto;
}

.polaroid-card:nth-child(even) {
  transform: rotate(1.5deg);
}

.polaroid-card:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 8px 25px var(--black-alpha-20);
  z-index: 10;
}

.polaroid-photo {
  position: relative;
  margin-bottom: 15px;
}

.polaroid-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.polaroid-age {
  position: absolute;
  bottom: -10px;
  right: 10px;
  background: var(--black-alpha-70);
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 3px;
  font-family: "Courier New", monospace;
}

.polaroid-caption {
  text-align: center;
  padding-top: 10px;
}

.polaroid-name {
  font-family: "Great Vibes", cursive;
  font-size: 2.2rem;
  color: var(--text-slate);
  margin-bottom: 15px;
  text-shadow: 1px 1px 2px var(--black-alpha-10);
}

.polaroid-details {
  text-align: left;
  margin-bottom: 15px;
}

.polaroid-details p {
  margin-bottom: 8px;
  color: var(--gray-darker);
  font-size: 0.9rem;
  line-height: 1.4;
  font-family: "Arial", sans-serif;
}

.polaroid-details i {
  color: var(--primary-color);
  width: 16px;
  margin-right: 8px;
  font-size: 0.9rem;
}

.polaroid-quote {
  background: none;
  padding: 15px 10px 0 10px;
  border: none;
  font-style: italic;
  color: var(--gray-dark);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  position: relative;
  font-family: "Georgia", serif;
}

.polaroid-quote::before {
  content: '"';
  font-size: 2rem;
  color: var(--primary-color);
  position: absolute;
  top: -5px;
  left: 5px;
  font-family: "Times New Roman", serif;
}

.polaroid-quote::after {
  content: '"';
  font-size: 2rem;
  color: var(--primary-color);
  position: absolute;
  bottom: -15px;
  right: 5px;
  font-family: "Times New Roman", serif;
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

/* Responsive para polaroids */
@media (max-width: 768px) {
  .polaroid-card {
    max-width: 280px;
    padding: 15px 15px 25px 15px;
    transform: rotate(0deg);
  }

  .polaroid-card:nth-child(even) {
    transform: rotate(0deg);
  }

  .polaroid-card:hover {
    transform: scale(1.02);
  }

  .polaroid-img {
    height: 240px;
  }

  .polaroid-name {
    font-size: 1.8rem;
  }

  .polaroid-details p {
    font-size: 0.85rem;
  }

  .polaroid-quote {
    font-size: 0.8rem;
    padding: 10px 5px 0 5px;
  }
}

/* ==========================================================================
   SOLUCIÓN FINAL - CARRUSEL COMPLETAMENTE RESPONSIVO
   ========================================================================== */

.enhanced-carousel-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  padding: 10px; /* Padding base para evitar desbordamiento */
}

.enhanced-carousel {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--primary-color);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12), 0 15px 25px rgba(0, 0, 0, 0.08),
    0 5px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 8px;
  position: relative;
  backdrop-filter: blur(10px);
  /* REMOVIDO: aspect-ratio fijo que causaba problemas */
  min-height: 300px; /* Altura mínima para mantener proporción */
}

/* Línea dorada superior */
.enhanced-carousel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--primary-color) 0%,
    var(--primary-light) 50%,
    var(--primary-color) 100%
  );
  border-radius: 20px 20px 0 0;
  z-index: 2;
}

/* Efecto de brillo sutil */
.enhanced-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: subtleShine 8s infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes subtleShine {
  0% {
    left: -100%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ==========================================================================
     IMÁGENES COMPLETAMENTE RESPONSIVAS - NO MÁS RECORTES
     ========================================================================== */

.carousel-img {
  width: 100%;
  height: auto; /* CLAVE: Altura automática para evitar recortes */
  max-width: 100%;
  min-height: 200px; /* Altura mínima para pantallas muy pequeñas */
  max-height: 60vh; /* Máximo 60% de la altura de la ventana */
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: brightness(0.95) contrast(1.05);
  box-shadow: 0 8px 25px var(--black-alpha-10);
  display: block;
}

.carousel-item.active .carousel-img {
  transform: scale(1.01);
  filter: brightness(1) contrast(1.1);
  box-shadow: 0 12px 35px var(--black-alpha-15);
}

/* Asegurar que el contenedor se ajuste al contenido */
.carousel-inner {
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
  min-height: 200px; /* Altura mínima */
}

.carousel-item.active {
  display: block;
}

/* ==========================================================================
     CAPTION COMPLETAMENTE RESPONSIVO CON ANIMACIÓN PRESERVADA
     ========================================================================== */

.carousel-caption-custom {
  position: absolute;
  /* POSICIONAMIENTO DINÁMICO BASADO EN EL CONTENIDO */
  bottom: 15px;
  left: 20px;
  right: 20px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 245, 240, 0.95) 100%
  );
  padding: 12px 20px; /* Padding reducido pero suficiente */
  border-radius: 0;
  border: 3px solid var(--primary-color);
  outline: 2px solid var(--primary-light);
  outline-offset: 4px;
  box-shadow: 0 10px 30px var(--black-alpha-20),
    inset 0 1px 0 var(--primary-alpha-30), 0 0 20px rgba(230, 198, 83, 0.9),
    0 0 40px rgba(230, 198, 83, 0.8);

  /* TU ANIMACIÓN ORIGINAL PRESERVADA */
  transform: translateY(100%);
  transition: transform 0.6s ease;

  position: relative;
  overflow: visible; /* Permitir que el contenido se muestre */
  width: auto;
  max-width: calc(100% - 40px);
  min-height: auto; /* Altura automática */
  z-index: 10;

  /* ASEGURAR VISIBILIDAD COMPLETA */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* MÚLTIPLES SELECTORES PARA COMPATIBILIDAD TOTAL */
.carousel-item.active .carousel-caption-custom,
.carousel-item.show .carousel-caption-custom,
.carousel-item[data-active="true"] .carousel-caption-custom {
  transform: translateY(0);
}

.carousel-item:not(.active) .carousel-caption-custom {
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

/* LÍNEAS DIAGONALES DORADAS DE FONDO */
.carousel-caption-custom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0px,
    transparent 8px,
    rgba(212, 175, 55, 0.1) 8px,
    rgba(212, 175, 55, 0.1) 10px
  );
  opacity: 0.5;
  z-index: 1;
}

.carousel-caption-custom h5 {
  font-family: "Sacramento", cursive;
  font-size: 1.6rem; /* Tamaño base optimizado */
  color: var(--primary-color);
  margin-bottom: 0.3rem;
  text-align: center;
  position: relative;
  z-index: 2;
  text-shadow: 1px 1px 2px var(--black-alpha-10);
  line-height: 1.2;
}

.carousel-caption-custom p {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  margin: 0;
  font-size: 0.9rem; /* Tamaño base optimizado */
  text-align: center;
  position: relative;
  z-index: 2;
  font-weight: 500;
  line-height: 1.3;
}

/* Indicadores minimalistas */
.enhanced-indicators {
  bottom: 20px;
  margin-bottom: 0;
  z-index: 15; /* Z-index más alto para evitar conflictos */
}

.enhanced-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.6);
  margin: 0 6px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 1;
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 8px var(--black-alpha-10);
}

.enhanced-indicators button.active {
  background-color: var(--primary-color);
  transform: scale(1.4);
  box-shadow: 0 4px 15px var(--primary-alpha-40),
    0 0 0 3px var(--white-alpha-80);
}

.enhanced-indicators button:hover {
  background-color: rgba(212, 175, 55, 0.8);
  transform: scale(1.2);
  box-shadow: 0 3px 12px var(--primary-alpha-30);
}

/* Efecto de enfoque limpio */
.carousel-item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  background: var(--black-alpha-10);
  opacity: 1;
  transition: opacity 0.6s ease;
  border-radius: 15px;
  pointer-events: none;
  z-index: 2;
}

.carousel-item.active::before {
  opacity: 0;
}

/* ==========================================================================
     RESPONSIVE MEJORADO - SOLUCIÓN COMPLETA PARA TODOS LOS TAMAÑOS
     ========================================================================== */

/* Desktop grande */
@media (min-width: 1200px) {
  .carousel-caption-custom h5 {
    font-size: 2rem;
  }

  .carousel-caption-custom p {
    font-size: 1.1rem;
  }
}

/* Tablets y laptops */
@media (max-width: 992px) {
  .enhanced-carousel-container {
    max-width: 95%;
    padding: 15px;
  }

  .carousel-img {
    max-height: 50vh;
    min-height: 180px;
  }

  .carousel-caption-custom {
    bottom: 12px;
    left: 15px;
    right: 15px;
    padding: 10px 18px;
    max-width: calc(100% - 30px);
  }

  .carousel-caption-custom h5 {
    font-size: 1.4rem;
  }

  .carousel-caption-custom p {
    font-size: 0.85rem;
  }
}

/* Tablets pequeñas */
@media (max-width: 768px) {
  .enhanced-carousel-container {
    max-width: 100%;
    padding: 12px;
  }

  .enhanced-carousel {
    padding: 6px;
    border-radius: 15px;
    min-height: 250px;
  }

  .enhanced-carousel::before {
    height: 3px;
    border-radius: 15px 15px 0 0;
  }

  .carousel-img {
    max-height: 45vh;
    min-height: 160px;
    border-radius: 12px;
  }

  .carousel-caption-custom {
    bottom: 10px;
    left: 12px;
    right: 12px;
    padding: 8px 15px;
    border-width: 2px;
    max-width: calc(100% - 24px);
    /* MANTENER ANIMACIÓN */
    transform: translateY(100%);
    transition: transform 0.6s ease;
  }

  .carousel-item.active .carousel-caption-custom,
  .carousel-item.show .carousel-caption-custom,
  .carousel-item[data-active="true"] .carousel-caption-custom {
    transform: translateY(0);
  }

  .carousel-caption-custom h5 {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
    line-height: 1.1;
  }

  .carousel-caption-custom p {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .enhanced-indicators {
    bottom: 12px;
  }

  .enhanced-indicators button {
    width: 10px;
    height: 10px;
    margin: 0 5px;
  }

  .carousel-item::before {
    border-radius: 12px;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
  }
}

/* Móviles */
@media (max-width: 576px) {
  .enhanced-carousel-container {
    padding: 8px;
  }

  .enhanced-carousel {
    padding: 4px;
    border-radius: 12px;
    min-height: 200px;
  }

  .carousel-img {
    max-height: 40vh; /* Reducir altura máxima */
    min-height: 140px;
    border-radius: 10px;
  }

  .carousel-caption-custom {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 6px 12px;
    border-width: 2px;
    max-width: calc(100% - 16px);
    /* PRESERVAR ANIMACIÓN */
    transform: translateY(100%);
    transition: transform 0.5s ease;
  }

  .carousel-item.active .carousel-caption-custom,
  .carousel-item.show .carousel-caption-custom,
  .carousel-item[data-active="true"] .carousel-caption-custom {
    transform: translateY(0);
  }

  .carousel-caption-custom h5 {
    font-size: 1rem;
    margin-bottom: 0.1rem;
    line-height: 1.1;
  }

  .carousel-caption-custom p {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .carousel-caption-custom::before {
    background: repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 6px,
      rgba(212, 175, 55, 0.08) 6px,
      rgba(212, 175, 55, 0.08) 8px
    );
  }

  .enhanced-carousel::before {
    height: 2px;
    border-radius: 12px 12px 0 0;
  }

  .carousel-item::before {
    border-radius: 10px;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
  }

  .enhanced-indicators {
    bottom: 8px;
  }

  .enhanced-indicators button {
    width: 8px;
    height: 8px;
    margin: 0 4px;
  }
}

/* Móviles muy pequeños */
@media (max-width: 400px) {
  .enhanced-carousel-container {
    padding: 5px;
  }

  .enhanced-carousel {
    padding: 3px;
    min-height: 180px;
  }

  .carousel-img {
    max-height: 35vh; /* Altura más pequeña */
    min-height: 120px;
  }

  .carousel-caption-custom {
    bottom: 6px;
    left: 6px;
    right: 6px;
    padding: 5px 10px;
    max-width: calc(100% - 12px);
    /* MANTENER ANIMACIÓN INCLUSO EN PANTALLAS MUY PEQUEÑAS */
    transform: translateY(100%);
    transition: transform 0.4s ease;
  }

  .carousel-item.active .carousel-caption-custom,
  .carousel-item.show .carousel-caption-custom,
  .carousel-item[data-active="true"] .carousel-caption-custom {
    transform: translateY(0);
  }

  .carousel-caption-custom h5 {
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
  }

  .carousel-caption-custom p {
    font-size: 0.7rem;
  }

  .enhanced-indicators button {
    width: 6px;
    height: 6px;
    margin: 0 3px;
  }
}

/* Móviles extremadamente pequeños */
@media (max-width: 320px) {
  .enhanced-carousel {
    min-height: 160px;
  }

  .carousel-img {
    max-height: 30vh;
    min-height: 100px;
  }

  .carousel-caption-custom {
    bottom: 4px;
    left: 4px;
    right: 4px;
    padding: 4px 8px;
    border-width: 1px;
    outline-width: 1px;
  }

  .carousel-caption-custom h5 {
    font-size: 0.8rem;
  }

  .carousel-caption-custom p {
    font-size: 0.65rem;
  }
}

/* Hover suave en todo el carrusel */
.enhanced-carousel:hover {
  transform: translateY(-2px);
  box-shadow: 0 35px 70px var(--black-alpha-15),
    0 20px 30px var(--black-alpha-10), 0 8px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
}

/* Animación de entrada */
.enhanced-carousel {
  animation: fadeInScale 1s ease-out;
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ==========================================================================
   TRANSICIÓN FADE PARA CARRUSEL - AGREGAR AL FINAL DE TU CSS
   ========================================================================== */

/* SOBRESCRIBIR la transición predeterminada de Bootstrap */
.carousel.slide .carousel-item {
  display: block !important;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.8s ease-in-out !important;
  transform: none !important; /* Eliminar transformaciones de slide */
}

/* Item activo completamente visible */
.carousel.slide .carousel-item.active {
  opacity: 1;
  position: relative;
}

/* Items en transición */
.carousel.slide .carousel-item.carousel-item-next,
.carousel.slide .carousel-item.carousel-item-prev {
  opacity: 0;
  position: absolute;
}

/* Eliminar las transiciones de slide de Bootstrap */
.carousel.slide .carousel-item-next.carousel-item-start,
.carousel.slide .carousel-item-prev.carousel-item-end {
  opacity: 1;
}

.carousel.slide .carousel-item-next,
.carousel.slide .carousel-item-prev {
  transform: none !important;
}

/* Asegurar que las imágenes mantengan su estilo */
.carousel-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  min-height: 200px;
  max-height: 60vh;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: brightness(0.95) contrast(1.05);
  box-shadow: 0 8px 25px var(--black-alpha-10);
  display: block;
}

/* Efecto en imagen activa */
.carousel-item.active .carousel-img {
  transform: scale(1.01);
  filter: brightness(1) contrast(1.1);
  box-shadow: 0 12px 35px var(--black-alpha-15);
}

/* ANIMACIÓN DEL TEXTO CON FADE */
.carousel-caption-custom {
  position: absolute;
  bottom: 15px;
  left: 20px;
  right: 20px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 245, 240, 0.95) 100%
  );
  padding: 12px 20px;
  border-radius: 0;
  border: 3px solid var(--primary-color);
  outline: 2px solid var(--primary-light);
  outline-offset: 4px;
  box-shadow: 0 10px 30px var(--black-alpha-20),
    inset 0 1px 0 var(--primary-alpha-30), 0 0 20px rgba(230, 198, 83, 0.9),
    0 0 40px rgba(230, 198, 83, 0.8);

  /* ANIMACIÓN FADE PARA EL TEXTO */
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;

  position: relative;
  overflow: visible;
  width: auto;
  max-width: calc(100% - 40px);
  min-height: auto;
  z-index: 10;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Texto visible cuando la imagen está activa */
.carousel-item.active .carousel-caption-custom {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s; /* Aparece después de que la imagen hace fade */
}

/* LÍNEAS DIAGONALES DORADAS DE FONDO */
.carousel-caption-custom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0px,
    transparent 8px,
    rgba(212, 175, 55, 0.1) 8px,
    rgba(212, 175, 55, 0.1) 10px
  );
  opacity: 0.5;
  z-index: 1;
}

.carousel-caption-custom h5 {
  font-family: "Sacramento", cursive;
  font-size: 1.6rem;
  color: var(--primary-color);
  margin-bottom: 0.3rem;
  text-align: center;
  position: relative;
  z-index: 2;
  text-shadow: 1px 1px 2px var(--black-alpha-10);
  line-height: 1.2;
}

.carousel-caption-custom p {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  margin: 0;
  font-size: 0.9rem;
  text-align: center;
  position: relative;
  z-index: 2;
  font-weight: 500;
  line-height: 1.3;
}

/* ==========================================================================
  SECCIÓN SOBRE DE CARTA DISCRETO - ESTILOS PRINCIPALES (SELLO CORREGIDO)
  ========================================================================== */

.letter-envelope-section {
  background: transparent;
  min-height: 70vh;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
}

/* ==========================================================================
  CONTENEDOR DEL SOBRE
  ========================================================================== */

.envelope-container {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  perspective: 1000px;
  z-index: 100;
}

/* ==========================================================================
  SOBRE PRINCIPAL
  ========================================================================== */

.envelope {
  width: 100%;
  height: 300px;
  position: relative;
  cursor: pointer;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
  z-index: 100;
}

.envelope:hover {
  transform: translateY(-5px);
}

.envelope.opened {
  transform: translateY(-20px) scale(0.9);
  opacity: 0.3;
  pointer-events: none;
}

/* Parte trasera del sobre */
.envelope-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--white) 0%, var(--beige-light) 100%);
  border-radius: 5px;
  box-shadow: 0 15px 35px var(--black-alpha-10), 0 5px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--primary-alpha-20);
}

/* Frente del sobre */
.envelope-front {
  position: absolute;
  padding-top: 95px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--white) 0%, var(--beige-light) 100%);
  border-radius: 5px;
  box-shadow: 0 15px 35px var(--black-alpha-10), 0 5px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--primary-alpha-20);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

/* ==========================================================================
  SOLAPA DEL SOBRE
  ========================================================================== */

.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 3;
  transform-origin: top center;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.envelope-flap.opened {
  transform: rotateX(-180deg);
}

.flap-triangle {
  width: 100%;
  height: 150px;
  background: linear-gradient(
    135deg,
    var(--cream-medium) 0%,
    var(--cream-dark) 100%
  );
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border: 1px solid var(--primary-alpha-30);
  border-bottom: none;
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.05),
    0 5px 15px var(--black-alpha-10);
}

/* ==========================================================================
  SELLO DE CERA - MOVIDO A LA PARTE SUPERIOR CENTRADO
  ========================================================================== */

.envelope-seal {
  position: absolute;
  top: 20px;
  /* Cambiado de bottom: 20px */
  left: 50%;
  /* Centrado horizontalmente */
  transform: translateX(-50%);
  /* Para centrar perfectamente */
  z-index: 15;
  /* Para que aparezca sobre la solapa */
}

.seal-wax {
  width: 50px;
  height: 50px;
  background: linear-gradient(
    135deg,
    var(--secondary-color) 0%,
    var(--brown-dark) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px var(--brown-dark-alpha-40),
    inset 0 2px 0 var(--white-alpha-10);
  border: 2px solid var(--primary-color);
  animation: sealPulse 3s ease-in-out infinite;
}

@keyframes sealPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.seal-initials {
  color: white;
  font-family: "Patua One", serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ==========================================================================
  DIRECCIÓN EN EL SOBRE - TEXTOS MÁS JUNTOS Y CENTRADOS
  ========================================================================== */

.envelope-address {
  text-align: center;
  margin-bottom: 1rem;
  position: relative;
  z-index: 5;
}

.address-line {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  margin: 0.3rem 0;
  position: relative;
  z-index: 5;
  text-shadow: 0 1px 3px var(--white-alpha-80);
}

.address-line.main-line {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--brown-darker);
}

.address-line.sub-line {
  font-size: 1rem;
  color: var(--gray-dark);
  font-style: italic;
}

/* ==========================================================================
  PISTA PARA ABRIR - MÁS JUNTO AL TEXTO
  ========================================================================== */

.open-letter-hint {
  text-align: center;
  color: var(--primary-color);
  font-family: "Patua One", serif;
  font-size: 0.9rem;
  animation: hintPulse 2s ease-in-out infinite;
  margin-top: 0.5rem;
  position: relative;
  z-index: 5;
  text-shadow: 0 1px 3px var(--white-alpha-80);
}

.open-letter-hint i {
  margin-left: 0.5rem;
  font-size: 1rem;
}

@keyframes hintPulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* ==========================================================================
  PAPEL DE LA CARTA
  ========================================================================== */

.letter-paper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 450px;
  height: auto;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 25px 50px var(--black-alpha-15),
    0 10px 25px var(--black-alpha-10);
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 150;
  border: 1px solid var(--primary-alpha-20);
}

.letter-paper.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}

.paper-content {
  padding: 2rem;
  position: relative;
}

/* ==========================================================================
  ENCABEZADO DEL PAPEL
  ========================================================================== */

.paper-header {
  text-align: right;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--primary-alpha-20);
}

.paper-date {
  font-family: "Patua One", serif;
  color: var(--gray-dark);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.paper-line {
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-color));
  margin-left: auto;
}

/* ==========================================================================
  CONTENIDO DEL PAPEL
  ========================================================================== */

.paper-body {
  line-height: 1.7;
}

.paper-greeting {
  font-family: "Great Vibes", cursive;
  font-size: 1.5rem;
  color: var(--brown-dark);
  margin-bottom: 1.5rem;
  text-align: left;
}

.paper-paragraph {
  font-family: "Patua One", serif;
  font-size: 1rem;
  color: var(--brown-dark);
  margin-bottom: 1.2rem;
  text-align: justify;
  line-height: 1.6;
}

.paper-paragraph.highlight {
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0.1),
    rgba(212, 175, 55, 0.05)
  );
  padding: 1rem;
  border-left: 3px solid var(--primary-color);
  margin: 1.5rem 0;
  font-style: italic;
}

/* ==========================================================================
  FIRMAS
  ========================================================================== */

.paper-signatures {
  margin-top: 2rem;
  text-align: center;
}

.signature-simple {
  font-family: "Great Vibes", cursive;
  font-size: 1.8rem;
  color: var(--brown-dark);
}

.signature-name {
  display: inline;
}

.signature-ampersand {
  margin: 0 1rem;
  color: var(--primary-color);
}

/* ==========================================================================
  BOTÓN CERRAR
  ========================================================================== */

.close-letter {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.close-btn {
  background: transparent;
  border: none;
  color: var(--gray);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:hover {
  color: var(--primary-color);
  background: rgba(212, 175, 55, 0.1);
}

/* ==========================================================================
  RESPONSIVE DESIGN
  ========================================================================== */

@media (max-width: 768px) {
  .envelope-container {
    max-width: 90%;
  }

  .envelope {
    height: 250px;
  }

  .envelope-flap {
    height: 125px;
  }

  .flap-triangle {
    height: 125px;
  }

  .envelope-front {
    padding-top: 110px;
  }

  .address-line {
    z-index: 10;
    position: relative;
  }

  .address-line.main-line {
    font-size: 1.2rem;
  }

  .address-line.sub-line {
    font-size: 0.9rem;
  }

  .letter-paper {
    width: 95%;
    max-width: none;
  }

  .paper-content {
    padding: 1.5rem;
  }

  .paper-greeting {
    font-size: 1.3rem;
  }

  .paper-paragraph {
    font-size: 0.95rem;
    text-align: left;
  }

  .signature-simple {
    font-size: 1.5rem;
  }

  .seal-wax {
    width: 40px;
    height: 40px;
  }

  .seal-initials {
    font-size: 0.7rem;
  }

  .envelope-seal {
    z-index: 20;
  }
}

@media (max-width: 576px) {
  .letter-envelope-section {
    min-height: 60vh;
  }

  .envelope {
    height: 200px;
  }

  .envelope-flap {
    height: 100px;
  }

  .flap-triangle {
    height: 100px;
  }

  .envelope-front {
    padding-top: 95px;
  }

  .envelope-address {
    z-index: 10;
  }

  .address-line {
    z-index: 10;
    position: relative;
  }

  .address-line.main-line {
    font-size: 1rem;
    font-weight: 700;
  }

  .address-line.sub-line {
    font-size: 0.85rem;
  }

  .open-letter-hint {
    font-size: 0.8rem;
    z-index: 10;
  }

  .paper-content {
    padding: 1rem;
  }

  .paper-paragraph {
    font-size: 0.9rem;
  }

  .signature-simple {
    font-size: 1.3rem;
  }

  .envelope-seal {
    top: 15px;
    z-index: 20;
  }

  .seal-wax {
    width: 35px;
    height: 35px;
  }

  .seal-initials {
    font-size: 0.6rem;
  }
}

/* ==========================================================================
   SECCIÓN 5: TIMELINE MEJORADO
   ========================================================================== */

.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 0;
  z-index: 1;
}

/* Línea central del timeline - más elegante */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--gradient-primary);
  border-radius: 3px;
  box-shadow: 0 0 20px var(--primary-alpha-30);
}

.timeline-item {
  margin: 4rem 0;
  position: relative;
  /* Removemos las animaciones CSS para que funcionen las de AOS */
}

/* Alternar posiciones - izquierda */
.timeline-item:nth-child(odd) .timeline-card {
  margin-right: 55%;
  text-align: right;
}

/* Alternar posiciones - derecha */
.timeline-item:nth-child(even) .timeline-card {
  margin-left: 55%;
  text-align: left;
}

/* Tarjeta del timeline mejorada */
.timeline-card {
  background: var(--white);
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid transparent;
  /* Quitamos overflow: hidden y el efecto de brillo */
}

/* Efecto hover en las tarjetas - simplificado */
.timeline-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px var(--primary-alpha-20);
  border-color: var(--primary-alpha-30);
}

/* ELEMENTOS REMOVIDOS: 
   - Brillo sutil en hover (timeline-card::before)
   - Efecto de año en background (year-bg)
   - Referencias a year-bg en responsive
*/

/* Flechas de conexión mejoradas */
.timeline-card::after {
  content: "";
  position: absolute;
  top: 40px;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  filter: drop-shadow(2px 2px 4px var(--black-alpha-10));
}

/* Flechas para items impares (lado izquierdo) */
.timeline-item:nth-child(odd) .timeline-card::after {
  right: -40px;
  border-left: 20px solid var(--white);
  border-right: none;
}

/* Flechas para items pares (lado derecho) */
.timeline-item:nth-child(even) .timeline-card::after {
  left: -40px;
  border-right: 20px solid var(--white);
  border-left: none;
}

/* Imagen del timeline mejorada */
.timeline-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
}

.timeline-card:hover .timeline-img {
  transform: scale(1.05);
  border-radius: 20px;
}

/* Título del timeline - VERSIÓN LIMPIA SIN RESALTADO */
.timeline-card h4 {
  color: var(--brown-darker) !important; /* Color más oscuro y legible */
  font-family: "Patua One", serif !important;
  margin-bottom: 1.5rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  position: relative;
  z-index: 2;
  /* ELIMINAR todos los efectos de fondo y sombra problemáticos */
  background: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* Párrafo del timeline también limpio */
.timeline-card p {
  color: var(--brown-dark) !important;
  font-family: "Patua One", serif !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  position: relative;
  z-index: 2;
  margin: 0 !important;
  /* Asegurar que no tenga efectos extraños */
  background: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  border: none !important;
}

/* Responsive específico para móvil - TAMBIÉN LIMPIO */
@media (max-width: 768px) {
  .timeline-card h4 {
    color: var(--brown-darker) !important;
    font-size: 1.3rem !important;
    /* MANTENER LIMPIO - sin efectos */
    background: none !important;
    text-shadow: none !important;
    padding: 0 !important;
    border: none !important;
    backdrop-filter: none !important;
  }

  .timeline-card p {
    color: var(--brown-dark) !important;
    font-size: 1rem !important;
    /* MANTENER LIMPIO */
    background: none !important;
    text-shadow: none !important;
    padding: 0 !important;
  }
}

@media (max-width: 576px) {
  .timeline-card h4 {
    color: var(--brown-darker) !important;
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
    /* COMPLETAMENTE LIMPIO */
    background: none !important;
    text-shadow: none !important;
    padding: 0 !important;
    border: none !important;
  }

  .timeline-card p {
    color: var(--brown-dark) !important;
    font-size: 0.95rem !important;
    /* COMPLETAMENTE LIMPIO */
    background: none !important;
    text-shadow: none !important;
    padding: 0 !important;
  }
}

/* Círculos indicadores en la línea central */
.timeline-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: var(--white);
  border: 4px solid var(--primary-color);
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 0 0 4px var(--primary-alpha-20);
  transition: all 0.3s ease;
}

/* Efecto hover en los círculos */
.timeline-item:hover::before {
  transform: translateX(-50%) scale(1.3);
  box-shadow: 0 0 0 8px var(--primary-alpha-30);
  background: var(--primary-color);
}

/* Iconos en los círculos */
.timeline-item::after {
  content: "\f004";
  /* corazón */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  color: var(--primary-color);
  font-size: 10px;
  z-index: 11;
  line-height: 20px;
  transition: all 0.3s ease;
}

.timeline-item:hover::after {
  color: var(--white);
  transform: translateX(-50%) scale(1.3);
}

/* Diferentes iconos para cada item */
.timeline-item:nth-child(1)::after {
  content: "\f7ba";
}

/* first encounter */
.timeline-item:nth-child(2)::after {
  content: "\f004";
}

/* heart for first date */
.timeline-item:nth-child(3)::after {
  content: "\f48b";
}

/* ring for proposal */

/* Líneas de conexión desde círculos a tarjetas */

/* Animación de entrada */
@keyframes timelineSlideIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ELEMENTOS REMOVIDOS: Efecto de año en background */

/* ==========================================================================
   TIMELINE RESPONSIVO
   ========================================================================== */

@media (max-width: 768px) {
  .timeline {
    padding: 1rem;
  }

  /* Línea central móvil */
  .timeline::before {
    left: 30px;
    width: 4px;
  }

  /* Todos los items alineados a la derecha en móvil */
  .timeline-item:nth-child(odd) .timeline-card,
  .timeline-item:nth-child(even) .timeline-card {
    margin: 0 0 0 70px;
    text-align: left;
  }

  /* Flechas uniformes en móvil */
  .timeline-item:nth-child(odd) .timeline-card::after,
  .timeline-item:nth-child(even) .timeline-card::after {
    left: -30px;
    right: auto;
    border-right: 15px solid var(--white);
    border-left: none;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }

  /* Círculos en móvil */
  .timeline-item::before {
    left: 30px;
    width: 16px;
    height: 16px;
    top: 50px;
  }

  .timeline-item::after {
    left: 30px;
    top: 50px;
    font-size: 8px;
    line-height: 16px;
  }

  /* Tarjetas más pequeñas en móvil */
  .timeline-card {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }

  .timeline-img {
    height: 180px;
  }

  .timeline-card h4 {
    font-size: 1.3rem !important;
  }

  .timeline-card p {
    font-size: 1rem !important;
  }

  /* Ocultar líneas conectoras en móvil */
  .timeline-item .connector-line {
    display: none;
  }

  /* ELEMENTOS REMOVIDOS: Referencias a year-bg */
}

@media (max-width: 576px) {
  .timeline-card {
    padding: 1rem;
  }

  .timeline-img {
    height: 150px;
    border-radius: 10px;
  }

  .timeline-card h4 {
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
  }

  .timeline-card p {
    font-size: 0.95rem !important;
  }
}
/* Mejoras específicas para móvil en timeline */
@media (max-width: 768px) {
  .timeline-card h4 {
    color: var(--secondary-color) !important;
    background: rgba(
      248,
      245,
      240,
      0.9
    ) !important; /* Fondo más sólido en móvil */
    border: 1px solid var(--primary-alpha-30) !important; /* Borde sutil */
    text-shadow: 1px 1px 3px var(--white-alpha-20) !important;
    font-size: 1.4rem !important; /* Slightly smaller on mobile */
    padding: 0.8rem 1.2rem !important;
    margin-bottom: 1.2rem !important;
  }
}

@media (max-width: 576px) {
  .timeline-card h4 {
    color: var(--secondary-color) !important;
    background: rgba(248, 245, 240, 0.95) !important; /* Aún más sólido */
    border: 1px solid var(--primary-alpha-20) !important;
    font-size: 1.2rem !important;
    padding: 0.6rem 1rem !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 1) !important;
  }
}

/* ==========================================================================
  SECCIÓN 6: PADRES SIN EFECTOS DE HOVER
  ========================================================================== */

.parents-card {
  background: transparent;
  padding: 3rem 2rem;
  border-radius: 20px;
  box-shadow: none;
  position: relative;
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* Título con tipografía original */
.parents-card h4 {
  color: var(--brown-dark) !important;
  font-family: "Patua One", serif !important;
  font-size: 1.4rem !important;
  margin-bottom: 1.5rem !important;
  text-align: center;
  position: relative;
  text-shadow: 0 2px 4px var(--black-alpha-70);
}

/* Nombres de los padres con tipografía original */
.parents-names {
  font-family: "Patua One", serif !important;
  font-size: 1.3rem !important;
  color: var(--text-light) !important;
  font-weight: 600 !important;
  text-align: center;
  line-height: 1.4;
  position: relative;
  padding: 1rem;
  background: transparent;
  border-radius: 10px;
  border: 1px solid transparent;
}

/* Icono debajo de los nombres de los padres */
.parents-names::after {
  content: "\f004";
  /* Código del corazón de Font Awesome */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: block;
  text-align: center;
  font-size: 2.5rem;
  color: var(--brown-dark);
  margin-top: 1rem;
  opacity: 1;
  transform: translateY(0);
}

/* Animación de entrada */
.parents-card {
  animation: slideInParents 0.8s ease-out forwards;
  opacity: 0;
}

.parents-card:nth-child(1) {
  animation-delay: 0.2s;
}

.parents-card:nth-child(2) {
  animation-delay: 0.4s;
}

@keyframes slideInParents {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .parents-card {
    padding: 0.1rem 0.1rem;
    margin-bottom: 0.1rem;
  }

  .parents-card h4 {
    font-size: 1.4rem !important;
  }

  .parents-names {
    font-size: 1.2rem !important;
  }
}

/* ==========================================================================  
   SECCIÓN PADRINOS SIN EFECTOS DE HOVER
   ========================================================================== */

.padrinos-card {
  background: transparent;
  padding: 3rem 2rem;
  border-radius: 20px;
  box-shadow: none;
  position: relative;
  border: 3px solid transparent;
  background-clip: padding-box;
  animation: slideInPadrinos 0.8s ease-out forwards;
  opacity: 0;
}

.padrinos-card:nth-child(1) {
  animation-delay: 0.2s;
}

.padrinos-card:nth-child(2) {
  animation-delay: 0.4s;
}

.padrinos-card:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes slideInPadrinos {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.padrinos-card h4 {
  color: var(--brown-dark) !important;
  font-family: "Patua One", serif !important;
  font-size: 1.4rem !important;
  margin-bottom: 1.5rem !important;
  text-align: center;
  position: relative;
  text-shadow: 0 2px 4px var(--black-alpha-70);
}

/* Oculta el ícono dentro del título */
.padrinos-card h4 i {
  display: none;
}

.padrinos-names {
  font-family: "Patua One", serif !important;
  font-size: 1.3rem !important;
  color: var(--text-light) !important;
  font-weight: 600 !important;
  text-align: center;
  line-height: 1.4;
  position: relative;
  padding: 1rem;
  background: transparent;
  border-radius: 10px;
  border: 1px solid transparent;
}

/* Icono decorativo debajo del nombre */
.padrinos-names::after {
  content: attr(data-icono);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: block;
  text-align: center;
  font-size: 2.5rem;
  margin-top: 1rem;
  color: var(--brown-dark);
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .padrinos-card {
    padding: 0.1rem 0.1rem;
    margin-bottom: 0.1rem;
  }

  .padrinos-card h4 {
    font-size: 1.4rem !important;
  }

  .padrinos-names {
    font-size: 1.2rem !important;
  }
}
/* ==========================================================================
   MENSAJE DE GRATITUD
   ========================================================================== */

.padrinos-gratitude {
  margin-top: 2.5rem;
  padding: 2rem;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.05),
    rgba(212, 175, 55, 0.02)
  );
  border-radius: 20px;
  border: 1px solid var(--primary-alpha-20);
  text-align: center;
  position: relative;
}

.gratitude-ornament {
  margin-bottom: 1rem;
}

.gratitude-ornament i {
  font-size: 2rem;
  color: var(--primary-color);
  animation: ornamentGlow 3s ease-in-out infinite;
}

@keyframes ornamentGlow {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.gratitude-text {
  font-family: "Patua One", serif;
  font-size: 1.1rem;
  color: var(--brown-dark);
  line-height: 1.7;
  margin-bottom: 1rem;
  font-style: italic;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.gratitude-signature {
  font-family: "Great Vibes", cursive;
  font-size: 1.3rem;
  color: var(--primary-color);
  margin-top: 0.5rem;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .padrinos-gratitude {
    padding: 2rem 1.5rem;
    margin-top: 2rem;
  }

  .gratitude-text {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .padrinos-gratitude {
    padding: 1.5rem 1rem;
  }

  .gratitude-text {
    font-size: 0.95rem;
  }

  .gratitude-signature {
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   SECCIÓN 9: ITINERARIO
   ========================================================================== */

.itinerario-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.itinerario-title {
  text-align: center;
  font-family: "Sacramento", cursive;
  font-size: 4rem;
  color: var(--primary-color);
  margin-bottom: 4rem;
  text-shadow: 2px 2px 4px var(--black-alpha-10);
}

.itinerario-zigzag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* Cambié de 3rem a 2rem para menos espacio vertical */
  max-width: 600px;
  /* Agrega esta línea para limitar el ancho total */
  margin: 0 auto;
  /* Agrega esta línea para centrarlo */
}

.itinerario-row {
  display: flex;
  align-items: center;
  position: relative;
}

/* Alternar posiciones */
.itinerario-row:nth-child(odd) {
  justify-content: flex-start;
}

.itinerario-row:nth-child(even) {
  justify-content: flex-end;
}

.evento-card {
  background: var(--white);
  border: 3px solid var(--brown-dark);
  border-radius: 20px;
  padding: 2rem 2.5rem;
  max-width: 300px;
  /* Cambié de 350px a 300px para hacerlas más pequeñas */
  box-shadow: 0 8px 20px var(--black-alpha-15);
  position: relative;
}

.evento-title {
  font-size: 1.8rem;
  color: var(--brown-dark);
  margin: 0 0 0.5rem 0;
  text-align: center;
  font-family: "Patua One", serif;
}

.evento-details {
  font-size: 1.1rem;
  color: var(--text-light);
  text-align: center;
  margin: 0;
  font-family: "Patua One", serif;
}

.icon-circle {
  width: 80px;
  height: 80px;
  background: var(--brown-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  box-shadow: 0 4px 15px var(--black-alpha-20);
}

.icon-circle i {
  font-size: 2rem;
  color: var(--white);
}

/* Posiciones de iconos para filas impares (izquierda) */
.itinerario-row:nth-child(odd) .icon-circle {
  right: -10px;
  /* Cambié de -120px a -60px para acercar más */
  top: 50%;
  transform: translateY(-50%);
}

/* Posiciones de iconos para filas pares (derecha) */
.itinerario-row:nth-child(even) .icon-circle {
  left: -10px;
  /* Cambié de -120px a -60px para acercar más */
  top: 50%;
  transform: translateY(-50%);
}

/* Responsive */
@media (max-width: 768px) {
  .itinerario-title {
    font-size: 3rem;
  }

  .itinerario-zigzag {
    gap: 2rem;
    max-width: 100%;
    /* Cambiar para usar todo el ancho disponible */
    padding: 0 60px;
    /* Agregar padding para dar espacio a los iconos */
  }

  .itinerario-row {
    margin-bottom: 1rem;
  }

  .icon-circle {
    width: 50px;
    /* Hacer iconos más pequeños */
    height: 50px;
  }

  .icon-circle i {
    font-size: 1.3rem;
    /* Iconos más pequeños */
  }

  /* Posiciones para móvil - filas impares */
  .itinerario-row:nth-child(odd) .icon-circle {
    right: -25px;
    /* Posición que no se salga de pantalla */
    top: 50%;
    transform: translateY(-50%);
  }

  /* Posiciones para móvil - filas pares */
  .itinerario-row:nth-child(even) .icon-circle {
    left: -25px;
    /* Posición que no se salga de pantalla */
    top: 50%;
    transform: translateY(-50%);
  }

  .evento-card {
    max-width: 220px;
    /* Tarjetas más pequeñas */
    padding: 1.5rem;
    text-align: center;
  }

  .evento-title {
    font-size: 1.3rem;
  }

  .evento-details {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   SECCIÓN 10: COUNTDOWN ESTILO HEXAGONAL
   ========================================================================== */

#countdown {
  background: radial-gradient(
    ellipse at center,
    var(--brown-accent) 0%,
    var(--brown-dark) 50%,
    var(--brown-darker) 100%
  );
  position: relative;
  overflow: hidden;
}

/* Color específico para el párrafo del countdown */
#countdown p,
#countdown .lead {
  color: var(--accent-color) !important;
  /* Crema puro */
}

/* Efecto de ondas doradas */
#countdown::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
      circle at 25% 25%,
      rgba(212, 175, 55, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(212, 175, 55, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(212, 175, 55, 0.05) 0%,
      transparent 70%
    );
  animation: rotate 30s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.countdown-display {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.countdown-item {
  width: 130px;
  height: 130px;
  background: linear-gradient(
    145deg,
    var(--accent-color) 0%,
    var(--white) 50%,
    var(--accent-color) 100%
  );
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 15px 35px var(--black-alpha-10),
    inset 0 2px 5px var(--white-alpha-80),
    inset 0 -2px 5px var(--black-alpha-10);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.countdown-item::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(
    145deg,
    var(--primary-color),
    var(--primary-light),
    var(--secondary-color)
  );
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.countdown-item:hover::before {
  opacity: 1;
}

.countdown-item:hover {
  transform: translateY(-8px) scale(1.05);
  border-radius: 50%;
  box-shadow: 0 25px 50px var(--primary-alpha-30),
    inset 0 2px 8px rgba(255, 255, 255, 0.9),
    inset 0 -2px 8px var(--black-alpha-10);
}

.countdown-item span {
  font-size: 2.8rem;
  font-weight: 700;
  font-family: "Patua One", serif;
  color: var(--primary-color);
  line-height: 1;
  text-shadow: 0 1px 2px var(--white-alpha-80), 0 2px 4px var(--black-alpha-10);
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

.countdown-item:hover span {
  color: var(--brown-darker);
  transform: scale(1.1);
}

.countdown-item label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brown-dark);
  font-weight: 600;
  font-family: "Patua One", serif;
  text-align: center;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.countdown-item:hover label {
  color: var(--primary-color);
}

/* Animación de aparición */
.countdown-item {
  animation: bounceIn 0.8s ease-out forwards;
  opacity: 0;
}

.countdown-item:nth-child(1) {
  animation-delay: 0.1s;
}

.countdown-item:nth-child(2) {
  animation-delay: 0.2s;
}

.countdown-item:nth-child(3) {
  animation-delay: 0.3s;
}

.countdown-item:nth-child(4) {
  animation-delay: 0.4s;
}

.countdown-item:nth-child(5) {
  animation-delay: 0.5s;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(50px);
  }

  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
  }

  70% {
    transform: scale(0.9) translateY(0px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
}

/* Responsive - centrado inteligente */
@media (max-width: 768px) {
  .countdown-display {
    gap: 1rem;
    justify-content: space-evenly;
  }

  .countdown-item {
    width: 100px;
    height: 100px;
  }

  .countdown-item span {
    font-size: 2.2rem;
  }

  .countdown-item label {
    font-size: 0.65rem;
    letter-spacing: 1px;
  }
}

@media (max-width: 576px) {
  .countdown-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    justify-items: center;
    align-items: center;
  }

  /* El último elemento (segundos) se centra en la fila inferior */
  .countdown-item:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
  }

  .countdown-item {
    width: 85px;
    height: 85px;
  }

  .countdown-item span {
    font-size: 1.8rem;
  }

  .countdown-item label {
    font-size: 0.6rem;
  }
}

@media (max-width: 400px) {
  .countdown-display {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  .countdown-item:nth-child(5) {
    grid-column: span 2;
    grid-row: 3;
  }
}

/* ==========================================================================
   SECCIÓN 11: TRIVIA MEJORADA CON DISEÑO INTUITIVO
   ========================================================================== */

/* ==========================================================================
   BARRA DE PROGRESO PERSONALIZADA
   ========================================================================== */

.trivia-progress-container {
  background: linear-gradient(135deg, var(--white) 0%, var(--beige-light) 100%);
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border: 2px solid var(--primary-alpha-20);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-family: "Patua One", serif;
  font-weight: 600;
}

.progress-text {
  color: var(--brown-dark);
  font-size: 1.1rem;
}

.score-text {
  color: var(--primary-color);
  font-size: 1.1rem;
}

.progress-bar-custom {
  position: relative;
  background: var(--primary-alpha-20);
  height: 8px;
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  width: 0%;
  border-radius: 10px;
  transition: width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0 10px 10px 0;
}

.progress-hearts {
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 24px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.progress-heart {
  width: 24px;
  height: 24px;
  background: white;
  border: 2px solid var(--gray-medium-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--gray-medium);
  transition: all 0.4s ease;
  box-shadow: 0 2px 8px var(--black-alpha-10);
}

.progress-heart.active {
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  border-color: var(--primary-color);
  color: white;
  transform: scale(1.2);
  box-shadow: 0 4px 15px var(--primary-alpha-40);
}

.progress-heart.correct {
  background: linear-gradient(
    135deg,
    var(--green-success) 0%,
    var(--green-light) 100%
  );
  border-color: var(--green-success);
  color: white;
  animation: heartBounce 0.6s ease;
}

.progress-heart.incorrect {
  background: linear-gradient(
    135deg,
    var(--red-alert) 0%,
    var(--orange-alert) 100%
  );
  border-color: var(--red-alert);
  color: white;
  animation: heartShake 0.6s ease;
}

@keyframes heartBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: scale(1.2) translateY(0);
  }

  40% {
    transform: scale(1.4) translateY(-5px);
  }

  60% {
    transform: scale(1.3) translateY(-3px);
  }
}

@keyframes heartShake {
  0%,
  100% {
    transform: scale(1.2) translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.2) translateX(-2px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: scale(1.2) translateX(2px);
  }
}

/* ==========================================================================
   TARJETA DE PREGUNTA MEJORADA
   ========================================================================== */

.trivia-question-card {
  background: linear-gradient(135deg, var(--white) 0%, var(--beige-light) 100%);
  border-radius: 25px;
  padding: 2.5rem;
  box-shadow: 0 15px 35px var(--black-alpha-10), 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 2px solid var(--primary-alpha-20);
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.trivia-question-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.05),
    transparent
  );
  transition: left 0.8s ease;
  pointer-events: none;
}

.trivia-question-card:hover::before {
  left: 100%;
}

.question-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.question-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 8px 20px var(--primary-alpha-30);
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.question-icon i {
  color: white;
  font-size: 1.5rem;
}

.question-title {
  color: var(--brown-dark) !important;
  font-family: "Patua One", serif !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 2rem !important;
}

/* ==========================================================================
   OPCIONES DE RESPUESTA MEJORADAS
   ========================================================================== */

.trivia-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.trivia-option {
  background: white;
  border: 2px solid var(--gray-light);
  border-radius: 15px;
  padding: 1.2rem 1.5rem;
  font-family: "Patua One", serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--brown-dark);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  text-align: center;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trivia-option::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.trivia-option:hover {
  border-color: var(--primary-color);
  background: rgba(212, 175, 55, 0.05);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--primary-alpha-20);
}

.trivia-option:hover::before {
  left: 100%;
}

.trivia-option:active {
  transform: translateY(-1px);
}

.trivia-option.selected {
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  border-color: var(--primary-color);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--primary-alpha-40);
}

.trivia-option.correct {
  background: linear-gradient(
    135deg,
    var(--green-success) 0%,
    var(--green-light) 100%
  );
  border-color: var(--green-success);
  color: white;
  animation: correctBounce 0.6s ease;
  pointer-events: none;
}

.trivia-option.incorrect {
  background: linear-gradient(
    135deg,
    var(--red-alert) 0%,
    var(--orange-alert) 100%
  );
  border-color: var(--red-alert);
  color: white;
  animation: incorrectShake 0.6s ease;
  pointer-events: none;
}

@keyframes correctBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(-3px) scale(1);
  }

  40% {
    transform: translateY(-8px) scale(1.05);
  }

  60% {
    transform: translateY(-5px) scale(1.02);
  }
}

@keyframes incorrectShake {
  0%,
  100% {
    transform: translateY(-3px) translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateY(-3px) translateX(-3px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateY(-3px) translateX(3px);
  }
}

.question-footer {
  text-align: center;
  margin-top: auto;
}

.timer-container {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-dark);
  font-size: 0.9rem;
  font-family: "Patua One", serif;
}

.timer-container i {
  color: var(--primary-color);
}

/* ==========================================================================
   RESULTADO FINAL MEJORADO
   ========================================================================== */

.trivia-result-card {
  background: linear-gradient(135deg, var(--white) 0%, var(--beige-light) 100%);
  border-radius: 25px;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 20px 40px var(--black-alpha-10), 0 8px 25px rgba(0, 0, 0, 0.05);
  border: 2px solid var(--primary-alpha-30);
  position: relative;
  overflow: hidden;
  animation: resultSlideIn 0.8s ease-out;
}

@keyframes resultSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.trivia-result-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 175, 55, 0.05) 45deg,
    transparent 90deg,
    rgba(212, 175, 55, 0.03) 135deg,
    transparent 180deg,
    rgba(212, 175, 55, 0.05) 225deg,
    transparent 270deg,
    rgba(212, 175, 55, 0.03) 315deg,
    transparent 360deg
  );
  animation: resultBackgroundRotate 20s linear infinite;
  pointer-events: none;
}

@keyframes resultBackgroundRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.result-header {
  position: relative;
  z-index: 2;
  margin-bottom: 2rem;
}

.result-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  animation: resultIconSpin 2s ease-in-out;
  box-shadow: 0 10px 30px var(--black-alpha-20);
}

.result-icon.excellent {
  background: linear-gradient(
    135deg,
    var(--gold-bright) 0%,
    var(--gold-light) 100%
  );
}

.result-icon.good {
  background: linear-gradient(
    135deg,
    var(--green-success) 0%,
    var(--green-light) 100%
  );
}

.result-icon.average {
  background: linear-gradient(
    135deg,
    var(--orange-alert) 0%,
    var(--orange-warning) 100%
  );
}

.result-icon.poor {
  background: linear-gradient(
    135deg,
    var(--red-alert) 0%,
    var(--orange-alert) 100%
  );
}

@keyframes resultIconSpin {
  0% {
    transform: rotate(0deg) scale(0.5);
    opacity: 0;
  }

  50% {
    transform: rotate(180deg) scale(1.1);
    opacity: 1;
  }

  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

.result-icon i {
  color: white;
  font-size: 2rem;
}

#result-title {
  font-family: "Sacramento", cursive;
  font-size: 2.5rem;
  color: var(--brown-dark);
  margin: 0;
  position: relative;
  z-index: 2;
}

.result-score {
  margin: 2rem 0;
  position: relative;
  z-index: 2;
}

.score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 15px 30px var(--primary-alpha-30),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  animation: scoreCirclePulse 1.5s ease-in-out;
}

@keyframes scoreCirclePulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.score-number {
  font-family: "Patua One", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.score-total {
  font-family: "Patua One", serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-top: -5px;
}

.result-message {
  margin: 2rem 0;
  position: relative;
  z-index: 2;
}

.result-description {
  font-family: "Patua One", serif;
  font-size: 1.2rem;
  color: var(--brown-dark);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.result-stars {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0;
  position: relative;
  z-index: 2;
}

.result-stars i {
  font-size: 1.5rem;
  color: var(--gray-medium-light);
  transition: all 0.3s ease;
}

.result-stars i.active {
  color: var(--gold-bright);
  transform: scale(1.2);
  animation: starTwinkle 1s ease-in-out;
}

@keyframes starTwinkle {
  0%,
  100% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1.4);
  }
}

.result-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  position: relative;
  z-index: 2;
}

.btn-restart,
.btn-share {
  background: transparent;
  border: 2px solid var(--brown-dark);
  color: var(--brown-dark);
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  font-family: "Patua One", serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn-restart::before,
.btn-share::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--brown-dark) 0%,
    var(--brown-accent) 100%
  );
  transition: left 0.3s ease;
  z-index: -1;
}

.btn-restart:hover,
.btn-share:hover {
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(74, 44, 42, 0.3);
}

.btn-restart:hover::before,
.btn-share:hover::before {
  left: 0;
}

.btn-share {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-share::before {
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
}

.btn-share:hover {
  box-shadow: 0 8px 20px var(--primary-alpha-30);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .trivia-progress-container {
    padding: 1.2rem;
  }

  .progress-header {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .progress-text,
  .score-text {
    font-size: 1rem;
  }

  .progress-hearts {
    padding: 0 5px;
  }

  .progress-heart {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .trivia-question-card {
    padding: 2rem 1.5rem;
    min-height: 350px;
  }

  .question-icon {
    width: 50px;
    height: 50px;
  }

  .question-icon i {
    font-size: 1.2rem;
  }

  .question-title {
    font-size: 1.4rem !important;
  }

  .trivia-options-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .trivia-option {
    padding: 1rem;
    font-size: 0.95rem;
    min-height: 50px;
  }

  .trivia-result-card {
    padding: 2rem 1.5rem;
  }

  .result-icon {
    width: 70px;
    height: 70px;
  }

  .result-icon i {
    font-size: 1.8rem;
  }

  #result-title {
    font-size: 2rem;
  }

  .score-circle {
    width: 100px;
    height: 100px;
  }

  .score-number {
    font-size: 2rem;
  }

  .result-description {
    font-size: 1.1rem;
  }

  .result-actions {
    flex-direction: column;
    align-items: center;
  }

  .btn-restart,
  .btn-share {
    width: 200px;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .trivia-progress-container {
    padding: 1rem;
  }

  .trivia-question-card {
    padding: 1.5rem 1rem;
    min-height: 300px;
  }

  .question-title {
    font-size: 1.2rem !important;
    margin-bottom: 1.5rem !important;
  }

  .trivia-option {
    padding: 0.8rem;
    font-size: 0.9rem;
  }

  .trivia-result-card {
    padding: 1.5rem 1rem;
  }

  #result-title {
    font-size: 1.8rem;
  }

  .score-circle {
    width: 90px;
    height: 90px;
  }

  .score-number {
    font-size: 1.8rem;
  }

  .result-description {
    font-size: 1rem;
  }

  .result-stars i {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   REGALOS SIMPLE Y ELEGANTE - CSS LIMPIO (SIN CÓDIGO INNECESARIO)
   ========================================================================== */

.regalos-elegant-section {
  background: transparent;
  position: relative;
}

/* ==========================================================================
   HEADER DE REGALOS
   ========================================================================== */

.regalos-header {
  margin-bottom: 3rem;
}

.regalos-intro {
  font-family: "Patua One", serif;
  color: var(--gray-dark);
  font-size: 1.1rem;
  line-height: 1.7;
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
}

/* ==========================================================================
   CONTENEDOR DE CARDS
   ========================================================================== */

.regalos-cards-container {
  margin-bottom: 3rem;
}

.regalos-cards-container .row {
  justify-content: center;
}

/* ==========================================================================
   CARD SIMPLE ELEGANTE
   ========================================================================== */

.regalo-card-simple {
  background: linear-gradient(135deg, var(--white) 0%, var(--beige-light) 100%);
  border: 2px solid var(--primary-alpha-20);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* Efecto de brillo sutil */
.regalo-card-simple::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.1),
    transparent
  );
  transition: left 0.8s ease;
  pointer-events: none;
}

.regalo-card-simple:hover {
  transform: translateY(-8px);
  border-color: var(--primary-alpha-40);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12),
    0 8px 25px var(--primary-alpha-15), 0 0 0 1px rgba(212, 175, 55, 0.1);
}

.regalo-card-simple:hover::before {
  left: 100%;
}

/* ==========================================================================
   ICONO CONTENEDOR
   ========================================================================== */

.regalo-icon-container {
  margin-bottom: 1.5rem;
}

.regalo-icon-circle {
  width: 80px;
  height: 80px;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px var(--primary-alpha-30),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.4s ease;
  position: relative;
}

.regalo-card-simple:hover .regalo-icon-circle {
  transform: scale(1.1);
  box-shadow: 0 12px 30px var(--primary-alpha-40),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

/* Estilos para logos (SÍ SE USA) */
.regalo-logo {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.regalo-card-simple:hover .regalo-logo {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 8px var(--black-alpha-20));
}

/* ==========================================================================
   CONTENIDO DE LA CARD
   ========================================================================== */

.regalo-content {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.regalo-name {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  font-size: 1.5rem;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
  transition: color 0.3s ease;
}

.regalo-card-simple:hover .regalo-name {
  color: var(--primary-color);
}

.regalo-desc {
  font-family: "Patua One", serif;
  color: var(--gray-dark);
  font-size: 1rem;
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

/* ==========================================================================
   BOTÓN ELEGANTE
   ========================================================================== */

.regalo-action {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

.regalo-button {
  background: transparent;
  color: var(--brown-dark);
  border: 2px solid var(--brown-dark);
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  font-family: "Patua One", serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.regalo-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  transition: left 0.4s ease;
  z-index: -1;
}

.regalo-button:hover {
  color: white;
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--primary-alpha-30);
  text-decoration: none;
}

.regalo-button:hover::before {
  left: 0;
}

.regalo-button i {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.regalo-button:hover i {
  transform: translateX(3px);
}

/* ==========================================================================
   FOOTER ELEGANTE
   ========================================================================== */

.regalos-footer {
  text-align: center;
  margin-top: 3rem;
}

.footer-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  gap: 1rem;
}

.ornament-line {
  width: 80px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-color),
    transparent
  );
}

.ornament-heart {
  width: 20px;
  height: 20px;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: heartGlow 3s ease-in-out infinite;
}

@keyframes heartGlow {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--primary-alpha-40);
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
  }
}

.ornament-heart i {
  color: white;
  font-size: 0.5rem;
}

.footer-message {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0 0 1.5rem 0;
  font-style: italic;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* NOTA: .footer-signature se eliminó porque no existe en el HTML */

/* ==========================================================================
   MODAL ELEGANTE
   ========================================================================== */

.elegant-modal {
  border-radius: 20px;
  border: 2px solid var(--primary-alpha-30);
  overflow: hidden;
}

.elegant-modal-header {
  background: linear-gradient(
    135deg,
    var(--brown-dark) 0%,
    var(--brown-accent) 100%
  );
  color: white;
  border: none;
  padding: 1.5rem 2rem;
}

.elegant-modal-header .modal-title {
  font-family: "Patua One", serif;
  font-weight: 600;
  font-size: 1.3rem;
}

.elegant-modal-body {
  padding: 2.5rem 2rem;
  text-align: center;
}

.modal-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  animation: modalIconPulse 2s ease-in-out infinite;
}

@keyframes modalIconPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.modal-icon i {
  color: white;
  font-size: 1.5rem;
}

.modal-text {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.modal-highlight {
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.1),
    rgba(212, 175, 55, 0.05)
  );
  padding: 1rem 1.5rem;
  border-radius: 10px;
  border-left: 4px solid var(--primary-color);
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  font-size: 1rem;
}

.elegant-modal-footer {
  border: none;
  padding: 1.5rem 2rem;
  background: var(--beige-light);
  justify-content: center;
}

.btn-elegant {
  background: linear-gradient(
    135deg,
    var(--primary-darker) 0%,
    var(--primary-very-dark) 100%
  );
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-family: "Patua One", serif;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px var(--primary-alpha-30);
}

.btn-elegant:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--primary-alpha-40);
  background: linear-gradient(
    135deg,
    var(--primary-light) 0%,
    var(--primary-color) 100%
  );
  color: white;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .regalo-card-simple {
    padding: 1.5rem;
  }

  .regalos-intro {
    font-size: 1.3rem !important;
    /* Aumentado de 1.1rem */
    line-height: 1.8 !important;
  }

  .regalo-icon-container {
    margin-bottom: 1.2rem;
  }

  .regalo-icon-circle {
    width: 70px;
    height: 70px;
  }

  .regalo-logo {
    width: 40px;
    height: 40px;
  }

  .regalo-name {
    font-size: 1.8rem;
  }

  .regalo-desc {
    font-size: 1.1rem !important;
    /* Aumentado de 0.95rem */
    line-height: 1.6 !important;
    margin-bottom: 1.2rem;
  }

  .regalo-button {
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
    gap: 0.6rem;
  }

  .footer-ornament {
    margin-bottom: 1.5rem;
  }

  .ornament-line {
    width: 60px;
  }

  .ornament-heart {
    width: 35px;
    height: 35px;
  }

  .ornament-heart i {
    font-size: 1rem;
  }

  .footer-message {
    font-size: 1.2rem !important;
    /* Aumentado de 1rem */
    line-height: 1.8 !important;
    margin-bottom: 1rem;
  }

  .elegant-modal-body {
    padding: 2rem 1.5rem;
  }

  .modal-text {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .regalos-elegant-section {
    padding: 3rem 0;
  }

  .regalo-card-simple {
    padding: 1.2rem;
    margin-bottom: 1.5rem;
  }

  .regalo-icon-container {
    margin-bottom: 1rem;
  }

  .regalo-icon-circle {
    width: 60px;
    height: 60px;
  }

  .regalo-logo {
    width: 35px;
    height: 35px;
  }

  .regalo-name {
    font-size: 1.2rem;
  }

  .regalo-desc {
    font-size: 0.9rem;
  }

  .regalo-button {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }

  .footer-message {
    font-size: 0.95rem;
  }

  .elegant-modal-header {
    padding: 1.2rem 1.5rem;
  }

  .elegant-modal-header .modal-title {
    font-size: 1.1rem;
  }

  .elegant-modal-body {
    padding: 1.5rem 1rem;
  }

  .modal-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
  }

  .modal-icon i {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   SECCIÓN 13: INFORMACIÓN IMPORTANTE - CÓDIGO DE VESTIMENTA
   ========================================================================== */

.dress-code-card {
  background: var(--white);
  padding: 2rem 1.5rem;
  /* Cambié de 3rem 2rem a 2rem 1.5rem */
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease;
  height: 100%;
  text-align: center;
}

.dress-code-visual {
  display: flex;
  justify-content: space-around;
  align-items: end;
  margin-bottom: 1.5rem;
  /* Cambié de 2rem a 1.5rem */
  padding: 1rem 0;
  /* Cambié de 2rem 0 a 1rem 0 */
}

.dress-code-figure {
  text-align: center;
  flex: 1;
}

.dress-code-figure h5 {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  margin-bottom: 0.8rem;
  /* Cambié de 1rem a 0.8rem */
  font-size: 1.2rem;
}

suit-icon,
.dress-icon {
  font-size: 3.5rem;
  /* Cambié de 4rem a 3.5rem */
  margin-bottom: 0.3rem;
  /* Cambié de 0.5rem a 0.3rem */
}

.suit-icon {
  color: var(--dark-navy);
  /* Azul muy oscuro para el traje */
  font-size: 4rem !important;
  /* Específico para el icono de hombres */
}

.dress-icon {
  color: var(--red-alert);
  /* Rojo para el vestido */
  font-size: 4rem;
  /* Mantener el tamaño del vestido */
}

.colors-section {
  margin: 1.5rem 0;
  /* Cambié de 2rem 0 a 1.5rem 0 */
}

.colors-title {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  font-size: 1rem;
  /* Cambié de 1.1rem a 1rem */
  margin-bottom: 0.8rem;
  /* Cambié de 1rem a 0.8rem */
  letter-spacing: 1px;
  text-transform: uppercase;
}

.color-palette {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  /* Cambié de 1rem a 0.8rem */
  margin-bottom: 1.5rem;
  /* Cambié de 2rem a 1.5rem */
}

.color-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--gray-medium-light);
  box-shadow: 0 2px 8px var(--black-alpha-10);
}

.color-navy {
  background-color: var(--dark-navy);
}

.color-red {
  background-color: var(--red-alert);
}

.color-gray {
  background-color: var(--gray-slate);
}

.color-darkblue {
  background-color: var(--dark-blue);
}

.color-brown {
  background-color: var(--brown-saddle);
}

.dress-code-text {
  text-align: left;
  margin-top: 1.5rem;
  /* Cambié de 2rem a 1.5rem */
}

.dress-code-text h4 {
  color: var(--brown-dark);
  margin-bottom: 1rem;
  font-family: "Patua One", serif;
  text-align: center;
}

.dress-code-img {
  width: 100px;
  /* Ajusta el ancho que quieras */
  height: 100px;
  /* Ajusta la altura que quieras */
  object-fit: contain;
  /* Para que mantenga las proporciones */
  margin-bottom: 0.3rem;
}

/* Si quieres que sean responsivas */
@media (max-width: 768px) {
  .dress-code-img {
    width: 60px;
    height: 75px;
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .camera-vintage-section {
    padding: 3rem 0;
  }

  .vintage-camera {
    width: 300px;
    height: 225px;
  }

  .camera-lens {
    width: 90px;
    height: 90px;
  }

  .lens-inner-ring {
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .lens-center {
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .lens-aperture {
    width: 35px;
    height: 35px;
  }

  .camera-flash {
    width: 30px;
    height: 25px;
    top: 25px;
    right: 40px;
  }

  .camera-shutter-button {
    width: 40px;
    height: 40px;
    top: 15px;
    right: 90px;
  }

  .shutter-inner {
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
  }

  .brand-text {
    font-size: 1rem;
  }

  .brand-model {
    font-size: 0.6rem;
  }

  .photo-instructions {
    padding: 2rem 1.5rem;
  }

  .instructions-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .instruction-step {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .vintage-button {
    padding: 1rem 2rem;
    font-size: 1rem;
  }

  .hashtag-info {
    flex-direction: column;
    gap: 0.5rem;
  }

  .album-footer {
    padding: 2rem 1.5rem;
  }

  .footer-message {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .vintage-camera {
    width: 250px;
    height: 190px;
  }

  .camera-lens {
    width: 70px;
    height: 70px;
    left: 35%;
  }

  .lens-inner-ring {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  .lens-center {
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
  }

  .lens-aperture {
    width: 25px;
    height: 25px;
  }

  .camera-flash {
    width: 25px;
    height: 20px;
    top: 20px;
    right: 30px;
  }

  .camera-shutter-button {
    width: 35px;
    height: 35px;
    top: 10px;
    right: 70px;
  }

  .brand-text {
    font-size: 0.9rem;
    letter-spacing: 1px;
  }

  .brand-model {
    font-size: 0.5rem;
  }

  .camera-viewfinder {
    width: 60px;
    height: 45px;
    top: -25px;
  }

  .detail-dial {
    width: 20px;
    height: 20px;
  }

  .detail-button {
    width: 12px;
    height: 12px;
  }

  .instant-photo {
    width: 60px;
    height: 75px;
  }

  .photo-content {
    font-size: 1.2rem;
  }

  .photo-instructions {
    padding: 1.5rem 1rem;
  }

  .instructions-title {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
  }

  .step-number {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  .step-content h5 {
    font-size: 1rem;
  }

  .step-content p {
    font-size: 0.9rem;
  }

  .vintage-button {
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    gap: 0.8rem;
  }

  .album-footer {
    padding: 1.5rem 1rem;
  }

  .footer-ornament i {
    font-size: 2rem;
  }

  .footer-message {
    font-size: 0.95rem;
  }

  .footer-signature {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .camera-vintage-section {
    padding: 3rem 0;
  }

  .vintage-camera {
    width: 300px;
    height: 225px;
  }

  .camera-lens {
    width: 90px;
    height: 90px;
  }

  .lens-inner-ring {
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .lens-center {
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .lens-aperture {
    width: 35px;
    height: 35px;
  }

  .camera-flash {
    width: 30px;
    height: 25px;
    top: 25px;
    right: 40px;
  }

  .camera-shutter-button {
    width: 40px;
    height: 40px;
    top: 15px;
    right: 90px;
  }

  .shutter-inner {
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
  }

  .brand-text {
    font-size: 1rem;
  }

  .brand-model {
    font-size: 0.6rem;
  }

  .photo-instructions {
    padding: 2rem 1.5rem;
  }

  .instructions-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .instruction-step {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .vintage-button {
    padding: 1rem 2rem;
    font-size: 1rem;
  }

  .hashtag-info {
    flex-direction: column;
    gap: 0.5rem;
  }

  .album-footer {
    padding: 2rem 1.5rem;
  }

  .footer-message {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .vintage-camera {
    width: 250px;
    height: 190px;
  }

  .camera-lens {
    width: 70px;
    height: 70px;
    left: 35%;
  }

  .lens-inner-ring {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  .lens-center {
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
  }

  .lens-aperture {
    width: 25px;
    height: 25px;
  }

  .camera-flash {
    width: 25px;
    height: 20px;
    top: 20px;
    right: 30px;
  }

  .camera-shutter-button {
    width: 35px;
    height: 35px;
    top: 10px;
    right: 70px;
  }

  .brand-text {
    font-size: 0.9rem;
    letter-spacing: 1px;
  }

  .brand-model {
    font-size: 0.5rem;
  }

  .camera-viewfinder {
    width: 60px;
    height: 45px;
    top: -25px;
  }

  .detail-dial {
    width: 20px;
    height: 20px;
  }

  .detail-button {
    width: 12px;
    height: 12px;
  }

  .instant-photo {
    width: 60px;
    height: 75px;
  }

  .photo-content {
    font-size: 1.2rem;
  }

  .photo-instructions {
    padding: 1.5rem 1rem;
  }

  .instructions-title {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
  }

  .step-number {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  .step-content h5 {
    font-size: 1rem;
  }

  .step-content p {
    font-size: 0.9rem;
  }

  .vintage-button {
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    gap: 0.8rem;
  }

  .album-footer {
    padding: 1.5rem 1rem;
  }

  .footer-ornament i {
    font-size: 2rem;
  }

  .footer-message {
    font-size: 0.95rem;
  }

  .footer-signature {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   BOTONES Y ELEMENTOS INTERACTIVOS
   ========================================================================== */

.btn-primary {
  background: var(--gradient-primary);
  border: none;
  padding: 12px 30px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 25px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px var(--primary-alpha-30);
  background: linear-gradient(
    135deg,
    var(--primary-light) 0%,
    var(--primary-color) 100%
  );
}

.btn-outline-primary {
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  background: transparent;
  padding: 10px 25px;
  font-weight: 600;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background: var(--primary-color);
  color: var(--white);
  transform: translateY(-2px);
}

/* ==========================================================================
   SECCIONES DE FONDO
   ========================================================================== */

.bg-light {
  background-color: var(--accent-color) !important;
}

.bg-primary {
  background: var(--gradient-primary) !important;
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ================================
   BOTÓN RSVP MINIMALISTA MODERNO
   ================================ */

.btn-rsvp-minimal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 35px;
  background: white;
  color: var(--text-slate);
  text-decoration: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid var(--text-slate);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-rsvp-minimal i {
  font-size: 18px;
  color: var(--green-accent);
}

.btn-rsvp-minimal::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--text-slate);
  transition: left 0.3s ease;
  z-index: -1;
}

.btn-rsvp-minimal:hover {
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(44, 62, 80, 0.3);
  text-decoration: none;
}

.btn-rsvp-minimal:hover i {
  color: var(--green-bright);
}

.btn-rsvp-minimal:hover::before {
  left: 0;
}

.btn-rsvp-minimal:active {
  transform: translateY(0px);
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

@media (max-width: 768px) {
  .btn-rsvp-minimal {
    padding: 15px 30px;
    font-size: 16px;
    gap: 10px;
  }

  .btn-rsvp-minimal i {
    font-size: 16px;
  }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .couple-names {
    font-size: 1.8rem;
  }

  .hero-couple-photo {
    width: 150px;
    height: 150px;
  }

  .section-title {
    font-size: 4.5rem !important;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline-item:nth-child(odd) .timeline-card,
  .timeline-item:nth-child(even) .timeline-card {
    margin: 0 0 0 60px;
    text-align: left;
  }

  .timeline-item:nth-child(odd) .timeline-card::before,
  .timeline-item:nth-child(even) .timeline-card::before {
    left: -30px;
    border-right-color: var(--white);
    border-left-color: transparent;
  }

  .countdown-display {
    gap: 1rem;
  }

  .countdown-item {
    padding: 1rem;
    min-width: 80px;
  }

  .countdown-item span {
    font-size: 2rem;
  }

  .itinerario-timeline::before {
    left: 60px;
  }

  .itinerario-item .time {
    width: 100px;
    padding: 0.8rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .hero-content {
    padding: 1rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .couple-names {
    font-size: 4rem !important;
  }

  .countdown-item span {
    font-size: 1.5rem;
  }

  .carousel-img {
    height: 300px;
  }
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */

.text-primary {
  color: var(--primary-color) !important;
}

.bg-white {
  background-color: var(--white) !important;
}

.shadow-custom {
  box-shadow: var(--shadow-card) !important;
}

/* Smooth scroll personalizado */
section {
  scroll-margin-top: 20px;
  position: relative;
  z-index: 1;
}

/* ========================================
   CORAZONES CAYENDO - 10 CORAZONES DISTRIBUIDOS
   ======================================== */

.falling-hearts-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  /* Detrás del contenido */
  overflow: hidden;
}

/* Estilos base para corazones */
.falling-heart {
  position: absolute;
  color: var(--primary-alpha-40);
  /* Color dorado semitransparente */
  font-size: 18px;
  animation: heartFall linear infinite;
  opacity: 0;
  top: -50px;
  user-select: none;
  pointer-events: none;
}

/* Animación principal de caída */
@keyframes heartFall {
  0% {
    transform: translateY(-50px) rotate(0deg) scale(0.5);
    opacity: 0;
  }

  10% {
    opacity: 1;
    transform: translateY(0px) rotate(45deg) scale(0.8);
  }

  90% {
    opacity: 1;
    transform: translateY(100vh) rotate(315deg) scale(1.2);
  }

  100% {
    transform: translateY(120vh) rotate(360deg) scale(0.5);
    opacity: 0;
  }
}

/* 10 corazones perfectamente distribuidos */
.falling-heart:nth-child(1) {
  left: 5%;
  animation-duration: 12s;
  animation-delay: 0s;
  font-size: 16px;
}

.falling-heart:nth-child(2) {
  left: 15%;
  animation-duration: 10s;
  animation-delay: 2s;
  font-size: 20px;
}

.falling-heart:nth-child(3) {
  left: 25%;
  animation-duration: 14s;
  animation-delay: 4s;
  font-size: 18px;
}

.falling-heart:nth-child(4) {
  left: 35%;
  animation-duration: 9s;
  animation-delay: 1s;
  font-size: 22px;
}

.falling-heart:nth-child(5) {
  left: 45%;
  animation-duration: 13s;
  animation-delay: 6s;
  font-size: 17px;
}

.falling-heart:nth-child(6) {
  left: 55%;
  animation-duration: 11s;
  animation-delay: 3s;
  font-size: 19px;
}

.falling-heart:nth-child(7) {
  left: 65%;
  animation-duration: 15s;
  animation-delay: 8s;
  font-size: 16px;
}

.falling-heart:nth-child(8) {
  left: 75%;
  animation-duration: 8s;
  animation-delay: 5s;
  font-size: 21px;
}

.falling-heart:nth-child(9) {
  left: 85%;
  animation-duration: 12s;
  animation-delay: 7s;
  font-size: 18px;
}

.falling-heart:nth-child(10) {
  left: 95%;
  animation-duration: 10s;
  animation-delay: 9s;
  font-size: 20px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .falling-heart {
    font-size: 14px;
    /* Más pequeños en móvil */
  }

  /* Redistribuir 5 corazones en móvil */
  .falling-heart:nth-child(1) {
    left: 10%;
  }

  .falling-heart:nth-child(2) {
    left: 30%;
  }

  .falling-heart:nth-child(3) {
    left: 50%;
  }

  .falling-heart:nth-child(4) {
    left: 70%;
  }

  .falling-heart:nth-child(5) {
    left: 90%;
  }

  /* Ocultar el resto */
  .falling-heart:nth-child(n + 6) {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Redistribuir 4 corazones en pantallas muy pequeñas */
  .falling-heart:nth-child(1) {
    left: 15%;
  }

  .falling-heart:nth-child(2) {
    left: 40%;
  }

  .falling-heart:nth-child(3) {
    left: 65%;
  }

  .falling-heart:nth-child(4) {
    left: 90%;
  }

  /* Ocultar el resto */
  .falling-heart:nth-child(n + 5) {
    display: none;
  }

  .falling-heart {
    font-size: 12px;
  }
}

/* ========================================
   VERSIONES DE INTENSIDAD (OPCIONALES)
   ======================================== */

/* VERSIÓN SUTIL - Más transparentes */
.falling-hearts-container.subtle .falling-heart {
  color: var(--primary-alpha-20);
}

/* VERSIÓN INTENSA - Más visibles y rápidos */
.falling-hearts-container.intense .falling-heart {
  color: var(--primary-alpha-70);
  animation-duration: 6s !important;
  /* Caen más rápido */
}

/* ========================================
   CONTROL DE PAUSA (OPCIONAL)
   ======================================== */

/* Clase para pausar los corazones */
.falling-hearts-container.paused .falling-heart {
  animation-play-state: paused;
}

/* ==========================================================================
   VOLTEAR IMAGEN DE LA ESQUINA DERECHA
   ========================================================================== */

/* IMAGEN ESQUINA SUPERIOR DERECHA - VOLTEADA HORIZONTALMENTE */
.corner-image-top-right {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 350px;
  height: 350px;
  z-index: 1000;
  opacity: 0.9;
  transition: all 0.3s ease;
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: none;
  pointer-events: none;

  /* VOLTEAR HORIZONTALMENTE (EFECTO ESPEJO) */
  transform: scaleX(-1);
}

.corner-image-top-right:hover {
  opacity: 1;
  transform: scaleX(-1) scale(1.02);
  /* Mantener el volteo en el hover */
}

/* ALTERNATIVA: Si quieres rotarla 180 grados en lugar de voltearla */
/*
.corner-image-top-right {
    transform: rotate(180deg);
}

.corner-image-top-right:hover {
    transform: rotate(180deg) scale(1.02);
}
*/

/* ALTERNATIVA: Si quieres voltearla verticalmente */
/*
.corner-image-top-right {
    transform: scaleY(-1);
}

.corner-image-top-right:hover {
    transform: scaleY(-1) scale(1.02);
}
*/

/* ALTERNATIVA: Si quieres voltearla tanto horizontal como verticalmente */
/*
.corner-image-top-right {
    transform: scaleX(-1) scaleY(-1);
}

.corner-image-top-right:hover {
    transform: scaleX(-1) scaleY(-1) scale(1.02);
}
*/

/* IMAGEN ESQUINA SUPERIOR IZQUIERDA - SIN CAMBIOS */
.corner-image-top-left {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 350px;
  height: 350px;
  z-index: 1000;
  opacity: 0.9;
  transition: all 0.3s ease;
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: none;
  pointer-events: none;
}

.corner-image-top-left:hover {
  opacity: 1;
  transform: scale(1.02);
}

/* RESPONSIVE: Ocultar en móviles y tablets */
@media (max-width: 1024px) {
  .corner-image-top-left,
  .corner-image-top-right {
    display: none;
  }
}

/* AJUSTES PARA PANTALLAS MUY GRANDES */
@media (min-width: 1400px) {
  .corner-image-top-left {
    width: 300px;
  }

  .corner-image-top-right {
    width: 300px;
    transform: scaleX(-1);
    /* Mantener el volteo en pantallas grandes */
  }

  .corner-image-top-right:hover {
    transform: scaleX(-1) scale(1.02);
  }
}

/* AJUSTES PARA PANTALLAS MEDIANAS */
@media (max-width: 1200px) {
  .corner-image-top-left {
    width: 200px;
  }

  .corner-image-top-right {
    width: 200px;
    transform: scaleX(-1);
    /* Mantener el volteo en pantallas medianas */
  }

  .corner-image-top-right:hover {
    transform: scaleX(-1) scale(1.02);
  }
}

/* ==========================================================================
   CSS MÍNIMO PARA VENUE SIN CARDS
   ========================================================================== */

.venue-simple-title {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

/* Imágenes del mismo tamaño */
.venue-image-fixed {
  width: 100%;
  max-width: 400px;
  height: 250px;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .venue-simple-title {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
  }

  .venue-image-fixed {
    height: 200px;
    max-width: 350px;
  }
}

@media (max-width: 576px) {
  .venue-image-fixed {
    height: 180px;
    max-width: 300px;
  }
}

/* Efecto activado por scroll en móvil para cards de regalos */
@media (max-width: 768px) {
  .regalo-card-simple.mobile-active {
    transform: translateY(-8px);
    border-color: var(--primary-alpha-40);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12),
      0 8px 25px var(--primary-alpha-15), 0 0 0 1px rgba(212, 175, 55, 0.1);
  }

  .regalo-card-simple.mobile-active::before {
    left: 100%;
    /* Activar el efecto de brillo */
  }

  .regalo-card-simple.mobile-active .regalo-icon-circle {
    transform: scale(1.1);
    box-shadow: 0 12px 30px var(--primary-alpha-40),
      inset 0 2px 0 rgba(255, 255, 255, 0.4);
  }

  .regalo-card-simple.mobile-active .regalo-name {
    color: var(--primary-color);
  }

  .regalo-card-simple.mobile-active .regalo-logo {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 8px var(--black-alpha-20));
  }
}

/* Morphing Text Animation - TODO PERFECTAMENTE CENTRADO */
.couple-presentation {
  position: relative;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  perspective: 1000px;
  padding: 3rem 1rem;
  min-height: 250px;
  width: 100%;
  overflow: visible;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Contenedor para el morphing - CENTRADO */
.morphing-text-container {
  position: relative;
  display: block;
  overflow: visible;
  padding: 2rem;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem; /* Aumenté de 2rem a 2.5rem */
  min-height: 200px;
  text-align: center !important;
}

/* Texto principal (nombres) - CENTRADO */
.couple-names-presentation {
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Texto romántico que aparece - PERFECTAMENTE CENTRADO */
.romantic-morph-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotateX(90deg);

  /* CENTRADO PERFECTO */
  text-align: center !important;
  width: 100%;
  margin: 0 auto;

  /* FUENTE Y ESTILOS */
  font-family: "Great Vibes", cursive;
  font-size: 5rem !important;
  font-weight: inherit;

  /* COLORES FORMALES Y ELEGANTES */
  color: transparent;
  background: linear-gradient(
    45deg,
    var(--primary-color),
    /* Dorado elegante */ var(--secondary-color),
    /* Marrón sofisticado */ var(--accent-color),
    /* Crema suave */ #b8941f /* Dorado más oscuro */
  );
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;

  white-space: nowrap;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: elegantGradientShift 4s ease infinite;
  pointer-events: none;
  z-index: 2;

  /* Sombra sutil */
  text-shadow: 0 3px 6px var(--primary-alpha-15);
}

/* Estados del morphing */
.couple-presentation.morphing .couple-names-presentation {
  transform: scale(0.8) rotateX(-90deg);
  opacity: 0;
}

.couple-presentation.morphing .romantic-morph-text {
  transform: translate(-50%, -50%) scale(1) rotateX(0deg);
  opacity: 1;
}

/* Gradiente elegante */
@keyframes elegantGradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Brillo sutil y elegante */
.couple-presentation.morphing::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;
  right: -60px;
  bottom: -60px;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.1) 0%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0;
  animation: elegantGlow 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes elegantGlow {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Partículas elegantes doradas */
.floating-particles {
  position: absolute;
  top: -50px;
  left: -50px;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  pointer-events: none;
  z-index: 1;
}

.floating-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: rgba(212, 175, 55, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: elegantFloat 4s ease-in-out infinite;
  box-shadow: 0 0 8px var(--primary-alpha-40);
}

.floating-particle:nth-child(even) {
  width: 4px;
  height: 4px;
  background: rgba(139, 111, 71, 0.4);
  box-shadow: 0 0 6px rgba(139, 111, 71, 0.3);
}

@keyframes elegantFloat {
  0% {
    opacity: 0;
    transform: translateY(40px) translateX(0px) scale(0);
  }

  25% {
    opacity: 0.6;
    transform: translateY(15px) translateX(25px) scale(1);
  }

  75% {
    opacity: 0.8;
    transform: translateY(-25px) translateX(-20px) scale(1.3);
  }

  100% {
    opacity: 0;
    transform: translateY(-60px) translateX(35px) scale(0);
  }
}

/* Responsive - CENTRADO EN TODOS LOS TAMAÑOS */
@media (max-width: 768px) {
  .couple-presentation {
    padding: 2rem 0.5rem;
    min-height: 200px;
  }

  .morphing-text-container {
    padding: 1.5rem;
  }

  .romantic-morph-text {
    font-size: 4rem !important;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .couple-presentation {
    padding: 1.5rem 0.2rem;
    min-height: 180px;
  }

  .morphing-text-container {
    padding: 1rem;
  }

  .romantic-morph-text {
    font-size: 3.5rem !important;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 360px) {
  .couple-presentation {
    padding: 1rem 0.1rem;
    min-height: 160px;
  }

  .morphing-text-container {
    padding: 0.8rem;
  }

  .romantic-morph-text {
    font-size: 3rem !important;
    width: 100%;
    margin: 0 auto;
  }
}

/* Asegurar que la sección contenedora no limite el centrado */
#presentacion .container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: center !important;
}

#presentacion .col-lg-10 {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Centrado de la sección padre */
#presentacion {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* SEPARADOR ELEGANTE CON CORAZÓN CAFÉ */
.separator-elegant {
  display: flex;
  align-items: center;
  margin: 3rem 0;
  opacity: 0.8;
  position: relative;
  z-index: 1;
}

.separator-elegant::before,
.separator-elegant::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-color),
    transparent
  );
}

.separator-elegant .separator-icon {
  margin: 0 2rem;
  font-size: 1.5rem;
  color: var(--brown-dark);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .separator-elegant {
    margin: 2rem 0;
  }

  .separator-elegant .separator-icon {
    margin: 0 1rem;
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   SECCIÓN MENSAJES EMOTIVOS - ADAPTADA AL DISEÑO EXISTENTE
   ========================================================================== */

/* Contenedor principal */
.mensaje-form-container {
  background: linear-gradient(135deg, var(--white) 0%, var(--beige-light) 100%);
  border: 2px solid var(--primary-alpha-20);
  border-radius: 25px;
  padding: 3rem 2rem;
  box-shadow: 0 15px 35px var(--black-alpha-10), 0 5px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.mensaje-form-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.05),
    transparent
  );
  transition: left 0.8s ease;
  pointer-events: none;
}

.mensaje-form-container:hover::before {
  left: 100%;
}

/* Labels del formulario */
.form-label {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  display: block;
}

/* Inputs del formulario */
.mensaje-input,
.mensaje-textarea {
  width: 100%;
  padding: 1rem 1.5rem;
  border: 2px solid var(--gray-light);
  border-radius: 15px;
  font-family: "Patua One", serif;
  font-size: 1rem;
  color: var(--brown-dark);
  background: white;
  transition: all 0.3s ease;
  resize: none;
}

.mensaje-input:focus,
.mensaje-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
  transform: translateY(-2px);
}

.mensaje-textarea {
  min-height: 120px;
  line-height: 1.6;
}

/* Contador de caracteres */
.character-counter {
  text-align: right;
  margin-top: 0.5rem;
  font-family: "Patua One", serif;
  font-size: 0.9rem;
  color: var(--gray-dark);
}

/* Botón de guardar mensaje */
.btn-mensaje-save {
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--primary-light) 100%
  );
  border: none;
  color: white;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-family: "Patua One", serif;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  box-shadow: 0 8px 20px var(--primary-alpha-30);
  position: relative;
  overflow: hidden;
}

.btn-mensaje-save::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--white-alpha-20),
    transparent
  );
  transition: left 0.6s ease;
}

.btn-mensaje-save:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px var(--primary-alpha-40);
  background: linear-gradient(
    135deg,
    var(--primary-light) 0%,
    var(--primary-color) 100%
  );
}

.btn-mensaje-save:hover::before {
  left: 100%;
}

.btn-mensaje-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Mensaje de confirmación */
.mensaje-confirmacion {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(
    135deg,
    rgba(40, 167, 69, 0.1) 0%,
    rgba(32, 201, 151, 0.1) 100%
  );
  border: 2px solid rgba(40, 167, 69, 0.3);
  border-radius: 20px;
  animation: confirmacionFadeIn 0.6s ease-out;
}

.confirmacion-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(
    135deg,
    var(--green-success) 0%,
    var(--green-light) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  animation: iconBounce 0.8s ease-out;
}

.confirmacion-icon i {
  color: white;
  font-size: 1.8rem;
}

.mensaje-confirmacion h4 {
  font-family: "Sacramento", cursive;
  color: var(--green-success);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.mensaje-confirmacion p {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  font-size: 1.1rem;
  margin: 0;
}

/* Botón ver mensajes */
.btn-ver-mensajes {
  background: transparent;
  border: 2px solid var(--brown-dark);
  color: var(--brown-dark);
  padding: 1rem 2rem;
  border-radius: 50px;
  font-family: "Patua One", serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  position: relative;
  overflow: hidden;
}

.btn-ver-mensajes::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--brown-dark) 0%,
    var(--brown-accent) 100%
  );
  transition: left 0.4s ease;
  z-index: -1;
}

.btn-ver-mensajes:hover {
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(74, 44, 42, 0.3);
}

.btn-ver-mensajes:hover::before {
  left: 0;
}

/* ==========================================================================
   MODAL DE MENSAJES
   ========================================================================== */

.mensajes-modal {
  border-radius: 20px;
  border: none;
  overflow: hidden;
}

.mensajes-modal-header {
  background: linear-gradient(
    135deg,
    var(--brown-dark) 0%,
    var(--brown-accent) 100%
  );
  color: white;
  border: none;
  padding: 2rem;
}

.mensajes-modal-header .modal-title {
  font-family: "Sacramento", cursive;
  font-size: 2rem;
  font-weight: 400;
}

.mensajes-modal-body {
  padding: 2rem;
  background: var(--beige-light);
  max-height: 70vh;
  overflow-y: auto;
}

/* Grid de mensajes */
.mensajes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Tarjeta individual de mensaje */
.mensaje-card {
  background: white;
  border: 2px solid var(--primary-alpha-20);
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.mensaje-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: 15px 15px 0 0;
}

.mensaje-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px var(--primary-alpha-15);
  border-color: var(--primary-alpha-40);
}

.mensaje-nombre {
  font-family: "Sacramento", cursive;
  font-size: 1.3rem;
  color: var(--primary-color);
  margin-bottom: 0.8rem;
  font-weight: 600;
}

.mensaje-texto {
  font-family: "Patua One", serif;
  color: var(--brown-dark);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-style: italic;
}

.mensaje-fecha {
  font-family: "Patua One", serif;
  font-size: 0.8rem;
  color: var(--gray-dark);
  text-align: right;
  margin: 0;
}

/* Loading state */
.loading-messages {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gray-dark);
}

.loading-messages .spinner-border {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
}

/* Animaciones */
@keyframes confirmacionFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes iconBounce {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .mensaje-form-container {
    padding: 2rem 1.5rem;
    margin: 0 1rem;
  }

  .mensaje-input,
  .mensaje-textarea {
    padding: 0.8rem 1.2rem;
    font-size: 0.95rem;
  }

  .btn-mensaje-save {
    padding: 0.9rem 2rem;
    font-size: 1rem;
    width: 100%;
    justify-content: center;
  }

  .btn-ver-mensajes {
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
  }

  .mensajes-modal-header {
    padding: 1.5rem;
  }

  .mensajes-modal-header .modal-title {
    font-size: 1.6rem;
  }

  .mensajes-modal-body {
    padding: 1.5rem 1rem;
  }

  .mensajes-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .mensaje-card {
    padding: 1.2rem;
  }

  .mensaje-nombre {
    font-size: 1.2rem;
  }

  .mensaje-texto {
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .mensaje-form-container {
    padding: 1.5rem 1rem;
    margin: 0 0.5rem;
  }

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

  .mensaje-textarea {
    min-height: 100px;
  }

  .btn-mensaje-save {
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
  }

  .mensaje-confirmacion {
    padding: 1.5rem 1rem;
  }

  .confirmacion-icon {
    width: 50px;
    height: 50px;
  }

  .confirmacion-icon i {
    font-size: 1.5rem;
  }

  .mensaje-confirmacion h4 {
    font-size: 1.6rem;
  }

  .mensaje-confirmacion p {
    font-size: 1rem;
  }
}
/* LIMPIEZA FINAL PARA TÍTULOS DEL TIMELINE */
@media (max-width: 768px) {
  .timeline-card h4,
  .timeline-card.mobile-active h4 {
    color: var(--brown-darker) !important;
    text-shadow: none !important;
    background: none !important;
    outline: none !important;
    border: none !important;
    padding: 0 !important;
  }
}

/* ========================================
   SECCIÓN COMPARTIR FOTOS - CÁMARA RÉFLEX PROFESIONAL
   ======================================== */

#compartir-fotos {
  background: linear-gradient(135deg, var(--white-smoke) 0%, var(--white) 100%);
  position: relative;
  overflow: hidden;
}

/* Contenedor de la cámara */
.camera-container {
  padding: 60px 20px;
  position: relative;
}

.camera-wrapper {
  position: relative;
  display: inline-block;
  animation: cameraFloat 6s ease-in-out infinite;
}

/* Animación de flotación */
@keyframes cameraFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(-1deg);
  }
  50% {
    transform: translateY(-25px) rotate(0deg);
  }
  75% {
    transform: translateY(-15px) rotate(1deg);
  }
}

/* Cámara principal */
.camera {
  position: relative;
  width: 280px;
  height: 200px;
  margin: 0 auto;
  animation: cameraShake 4s ease-in-out infinite;
}

@keyframes cameraShake {
  0%,
  100% {
    transform: translateX(0);
  }
  47%,
  49%,
  51% {
    transform: translateX(-2px);
  }
  48%,
  50%,
  52% {
    transform: translateX(2px);
  }
}

/* Cuerpo principal de la cámara - café oscuro */
.camera-body {
  width: 220px;
  height: 140px;
  background: linear-gradient(
    145deg,
    var(--brown-extra-dark) 0%,
    var(--brown-darker) 50%,
    var(--brown-dark) 100%
  );
  border-radius: 20px 20px 15px 15px;
  position: absolute;
  top: 30px;
  left: 30px;
  box-shadow: 0 15px 40px var(--black-alpha-40),
    inset 0 2px 8px rgba(255, 255, 255, 0.05),
    inset 0 -3px 8px var(--black-alpha-30);
  border: 1px solid rgba(139, 111, 71, 0.3);
}

/* Textura de la cámara */
.camera-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    var(--black-alpha-10) 2px,
    var(--black-alpha-10) 4px
  );
  opacity: 0.3;
  border-radius: 20px 20px 15px 15px;
  pointer-events: none;
}

/* Visor superior pentaprisma */
.camera-viewfinder {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 35px;
  background: linear-gradient(
    145deg,
    var(--brown-accent) 0%,
    var(--brown-extra-dark) 100%
  );
  border-radius: 8px 8px 0 0;
  box-shadow: 0 5px 15px var(--black-alpha-30),
    inset 0 1px 3px var(--white-alpha-10);
  border: 1px solid rgba(139, 111, 71, 0.2);
}

/* Visor pequeño (ocular) */
.camera-viewfinder::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
  height: 12px;
  background: var(--dark-navy);
  border-radius: 3px;
  box-shadow: inset 0 1px 3px var(--black-alpha-80);
}

/* Agarre lateral izquierdo */
.camera-grip {
  position: absolute;
  bottom: 30px;
  left: 30px;
  width: 35px;
  height: 90px;
  background: linear-gradient(
    145deg,
    var(--brown-darker) 0%,
    var(--brown-black) 100%
  );
  border-radius: 0 15px 15px 8px;
  box-shadow: 0 8px 20px var(--black-alpha-40),
    inset 2px 0 5px var(--black-alpha-50);
}

/* Textura del agarre */
.camera-grip::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 8px;
  right: 5px;
  bottom: 10px;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    var(--black-alpha-30) 3px,
    var(--black-alpha-30) 4px
  );
  border-radius: 8px;
}

/* Lente grande profesional */
.camera-lens {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: linear-gradient(145deg, var(--text-dark), var(--dark-charcoal));
  border-radius: 50%;
  box-shadow: 0 10px 30px var(--black-alpha-50),
    inset 0 3px 15px var(--black-alpha-70);
  animation: lensPulse 4s ease-in-out infinite;
  z-index: 5;
}

@keyframes lensPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03);
  }
}

/* Anillo del lente - dorado */
.lens-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  background: radial-gradient(
    circle,
    var(--dark-slate-blue) 0%,
    var(--dark-midnight) 100%
  );
  border-radius: 50%;
  box-shadow: inset 0 3px 12px var(--black-alpha-80),
    0 0 0 3px var(--secondary-color), 0 0 0 5px var(--brown-darker);
}

/* Cristal del lente - azul oscuro */
.lens-inner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(
    circle at 35% 35%,
    var(--steel-blue) 0%,
    var(--text-slate) 30%,
    var(--dark-slate-blue) 60%,
    var(--dark-midnight) 100%
  );
  border-radius: 50%;
  box-shadow: inset 0 2px 10px var(--black-alpha-90);
}

/* Reflejo del lente */
.lens-reflection {
  position: absolute;
  top: 25%;
  left: 30%;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: lensGlare 3s ease-in-out infinite;
  box-shadow: 2px 2px 4px var(--white-alpha-20);
}

@keyframes lensGlare {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
}

/* Flash mejorado - dorado cuando dispara */
.camera-flash {
  position: absolute;
  top: 20px;
  right: 35px;
  width: 30px;
  height: 20px;
  background: linear-gradient(145deg, var(--cream-dark), var(--cream-tan));
  border-radius: 4px;
  box-shadow: 0 3px 8px var(--black-alpha-30),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
  animation: flashBlink 4s ease-in-out infinite;
  z-index: 10;
}

@keyframes flashBlink {
  0%,
  45%,
  100% {
    background: linear-gradient(145deg, var(--cream-dark), var(--cream-tan));
    box-shadow: 0 3px 8px var(--black-alpha-30),
      inset 0 1px 2px rgba(255, 255, 255, 0.3);
  }
  46%,
  48%,
  50% {
    background: linear-gradient(
      145deg,
      var(--gold-bright),
      var(--primary-color)
    );
    box-shadow: 0 0 35px rgba(212, 175, 55, 1), 0 0 20px rgba(255, 215, 0, 0.8),
      inset 0 1px 3px var(--white-alpha-50);
  }
}

/* Botón de disparo - rojo elegante */
.camera-button {
  position: absolute;
  top: 8px;
  right: 15px;
  width: 22px;
  height: 22px;
  background: linear-gradient(
    145deg,
    var(--red-maroon),
    var(--red-maroon-dark)
  );
  border-radius: 50%;
  box-shadow: 0 3px 8px var(--black-alpha-40),
    inset 0 1px 2px rgba(255, 100, 100, 0.3);
  animation: buttonPress 4s ease-in-out infinite;
  z-index: 10;
}

.camera-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: var(--red-coral);
  border-radius: 50%;
  box-shadow: inset 0 1px 3px var(--black-alpha-30);
}

@keyframes buttonPress {
  0%,
  45%,
  100% {
    transform: scale(1);
  }
  46% {
    transform: scale(0.88);
  }
  48% {
    transform: scale(1);
  }
}

/* Logo/Marca profesional - dorado */
.camera-brand {
  position: absolute;
  top: 32%;
  left: 10%;
  font-family: "Patua One", serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 3px;
  text-shadow: 0 1px 3px var(--black-alpha-80), 0 0 5px var(--primary-alpha-30);
  z-index: 15;
}

.camera-model {
  position: absolute;
  top: 45%;
  left: 10%;
  font-family: "Patua One", serif;
  font-size: 0.45rem;
  color: var(--primary-alpha-70);
  letter-spacing: 2px;
  z-index: 15;
}

/* Detalles adicionales - botones pequeños */
.detail-button {
  position: absolute;
  width: 14px;
  height: 14px;
  background: linear-gradient(145deg, var(--brown-dark), var(--brown-darker));
  border-radius: 50%;
  box-shadow: 0 2px 5px var(--black-alpha-40),
    inset 0 1px 2px var(--white-alpha-10);
}

.detail-button:nth-child(1) {
  top: 25px;
  left: 25px;
}

.detail-button:nth-child(2) {
  top: 25px;
  left: 50px;
}

/* Dial de modos - dorado */
.detail-dial {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 35px;
  height: 35px;
  background: linear-gradient(
    145deg,
    var(--primary-color),
    var(--secondary-color)
  );
  border-radius: 50%;
  box-shadow: 0 3px 10px var(--black-alpha-40),
    inset 0 2px 5px var(--white-alpha-20);
  z-index: 15;
}

.detail-dial::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: var(--brown-darker);
  border-radius: 1px;
}

/* Efecto de flash fotográfico mejorado */
.flash-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.9) 0%,
    rgba(212, 175, 55, 0.6) 30%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: flashEffect 4s ease-in-out infinite;
}

@keyframes flashEffect {
  0%,
  45%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  46% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
  }
  50% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.2);
  }
}

/* Tarjetas Polaroid que salen de la cámara - 3 fotos */
.photo-card {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 120px;
  background: white;
  border-radius: 3px;
  box-shadow: 0 5px 20px var(--black-alpha-30);
  padding: 8px 8px 25px 8px;
  opacity: 0;
  z-index: 20;
}

/* Primera foto */
.photo-card-1 {
  animation: photoEject1 12s ease-in-out infinite;
}

.photo-card-1::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 25px;
  background-image: url("https://content.elmueble.com/medio/2024/03/18/nombres-nina-biblicos_87e07686_240318113911_600x600.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

/* Segunda foto */
.photo-card-2 {
  animation: photoEject2 12s ease-in-out infinite;
}

.photo-card-2::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 25px;
  background-image: url("https://content.elmueble.com/medio/2024/03/18/nombres-nina-biblicos_87e07686_240318113911_600x600.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

/* Tercera foto */
.photo-card-3 {
  animation: photoEject3 12s ease-in-out infinite;
}

.photo-card-3::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 25px;
  background-image: url("https://content.elmueble.com/medio/2024/03/18/nombres-nina-biblicos_87e07686_240318113911_600x600.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

.photo-card::after {
  content: "♥";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: var(--primary-color);
}

/* Animación para la primera foto */
@keyframes photoEject1 {
  0%,
  14.66%,
  100% {
    opacity: 0;
    bottom: 20px;
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  16% {
    opacity: 1;
    bottom: 35px;
    transform: translateX(-50%) translateY(-5px) rotate(2deg);
  }
  17.33% {
    opacity: 1;
    bottom: 50px;
    transform: translateX(-50%) translateY(-10px) rotate(-1deg);
  }
  20% {
    opacity: 1;
    bottom: 70px;
    transform: translateX(-50%) translateY(-20px) rotate(3deg);
  }
  25% {
    opacity: 0.8;
    bottom: 90px;
    transform: translateX(-50%) translateY(-30px) rotate(-2deg);
  }
  28.33% {
    opacity: 0;
    bottom: 100px;
    transform: translateX(-50%) translateY(-40px) rotate(0deg);
  }
}

/* Animación para la segunda foto (inicia después de la primera) */
@keyframes photoEject2 {
  0%,
  47.99%,
  100% {
    opacity: 0;
    bottom: 20px;
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  49.33% {
    opacity: 1;
    bottom: 35px;
    transform: translateX(-50%) translateY(-5px) rotate(-2deg);
  }
  50.66% {
    opacity: 1;
    bottom: 50px;
    transform: translateX(-50%) translateY(-10px) rotate(1deg);
  }
  53.33% {
    opacity: 1;
    bottom: 70px;
    transform: translateX(-50%) translateY(-20px) rotate(-3deg);
  }
  58.33% {
    opacity: 0.8;
    bottom: 90px;
    transform: translateX(-50%) translateY(-30px) rotate(2deg);
  }
  61.66% {
    opacity: 0;
    bottom: 100px;
    transform: translateX(-50%) translateY(-40px) rotate(0deg);
  }
}

/* Animación para la tercera foto (inicia después de la segunda) */
@keyframes photoEject3 {
  0%,
  81.32%,
  100% {
    opacity: 0;
    bottom: 20px;
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  82.66% {
    opacity: 1;
    bottom: 35px;
    transform: translateX(-50%) translateY(-5px) rotate(2deg);
  }
  83.99% {
    opacity: 1;
    bottom: 50px;
    transform: translateX(-50%) translateY(-10px) rotate(-1deg);
  }
  86.66% {
    opacity: 1;
    bottom: 70px;
    transform: translateX(-50%) translateY(-20px) rotate(3deg);
  }
  91.66% {
    opacity: 0.8;
    bottom: 90px;
    transform: translateX(-50%) translateY(-30px) rotate(-2deg);
  }
  94.99% {
    opacity: 0;
    bottom: 100px;
    transform: translateX(-50%) translateY(-40px) rotate(0deg);
  }
}

/* Botón del álbum - tema café elegante */
.btn-album {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background: linear-gradient(
    135deg,
    var(--brown-dark) 0%,
    var(--brown-accent) 100%
  );
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: "Patua One", serif;
  box-shadow: 0 8px 20px var(--brown-dark-alpha-40);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-album::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-alpha-30),
    transparent
  );
  transition: left 0.6s ease;
}

.btn-album:hover::before {
  left: 100%;
}

.btn-album:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(74, 44, 42, 0.6);
  background: linear-gradient(
    135deg,
    var(--brown-accent) 0%,
    var(--brown-taupe) 100%
  );
  color: white;
  text-decoration: none;
}

.btn-album i {
  font-size: 1.3rem;
}

.album-note {
  color: var(--gray-dark);
  font-size: 0.95rem;
  font-style: italic;
  font-family: "Patua One", serif;
}

.album-note i {
  color: var(--primary-color);
  margin-right: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .camera {
    width: 224px;
    height: 160px;
    transform: scale(0.8);
  }

  .camera-body {
    width: 176px;
    height: 112px;
  }

  .camera-lens {
    width: 80px;
    height: 80px;
  }

  .lens-inner {
    width: 60px;
    height: 60px;
  }

  .lens-inner::before {
    width: 48px;
    height: 48px;
  }

  .camera-brand {
    font-size: 0.6rem;
    letter-spacing: 2px;
  }

  .camera-model {
    font-size: 0.38rem;
    letter-spacing: 1.5px;
  }

  .btn-album {
    padding: 15px 30px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .camera {
    transform: scale(0.65);
  }

  .camera-brand {
    font-size: 0.55rem;
    letter-spacing: 1.5px;
  }

  .camera-model {
    font-size: 0.35rem;
  }

  .btn-album {
    padding: 12px 25px;
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   SECCIÓN FOOTER: NUESTROS RECUERDOS CON POLAROIDS (SIMPLIFICADO)
   ========================================================================== */

.footer-container {
  position: relative;
  background: var(--brown-dark);
  color: white;
  padding: 6rem 2rem 3rem;
  margin-top: 2rem;
  overflow: hidden;
}

/* Polaroids dispersas en el fondo */
.polaroid {
  position: absolute;
  width: 120px;
  height: 140px;
  background: white;
  padding: 10px 10px 40px 10px;
  box-shadow: 0 8px 20px var(--black-alpha-30);
  border-radius: 3px;
  transform-origin: center;
  opacity: 0.8;
  /* Temporalmente más alto para que las veas */
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.polaroid::before {
  content: "";
  width: 100%;
  height: 80px;
  background-color: transparent;
  display: block;
  border-radius: 2px;
}

.polaroid::after {
  content: attr(data-text);
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Patua One", serif;
  font-size: 12px;
  color: var(--gray-very-dark);
  text-align: center;
}

/* Posiciones y rotaciones aleatorias para las polaroids */
.polaroid:nth-child(1) {
  top: 20px;
  left: 5%;
  transform: rotate(-15deg);
}

.polaroid:nth-child(2) {
  top: 40px;
  right: 8%;
  transform: rotate(12deg);
}

.polaroid:nth-child(3) {
  top: 80px;
  left: 15%;
  transform: rotate(8deg);
}

.polaroid:nth-child(4) {
  bottom: 80px;
  right: 15%;
  transform: rotate(-10deg);
}

.polaroid:nth-child(5) {
  bottom: 60px;
  left: 10%;
  transform: rotate(18deg);
}

.polaroid:nth-child(6) {
  top: 60px;
  left: 45%;
  transform: rotate(-8deg);
}

.polaroid:nth-child(7) {
  bottom: 120px;
  right: 40%;
  transform: rotate(15deg);
}

.polaroid:nth-child(8) {
  top: 30px;
  right: 25%;
  transform: rotate(-12deg);
}

/* Contenido principal del footer */
.footer-content {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  background: rgba(74, 44, 42, 0.6);
  padding: 3rem 2rem;
  border-radius: 20px;
  backdrop-filter: blur(5px);
}

.footer-title {
  font-family: "Sacramento", cursive;
  font-size: 3.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px var(--black-alpha-50);
}

.footer-subtitle {
  font-size: 1.3rem;
  color: var(--accent-color);
  margin-bottom: 2.5rem;
  font-style: italic;
  opacity: 0.9;
  font-family: "Patua One", serif;
}

/* Galería de polaroids destacadas */
.polaroid-gallery {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.polaroid-featured {
  width: 120px;
  /* Cambié de 80px a 120px */
  height: 140px;
  /* Cambié de 95px a 140px */
  background: white;
  padding: 12px 12px 35px 12px;
  /* Aumenté el padding */
  box-shadow: 0 6px 15px var(--black-alpha-40);
  border-radius: 3px;
  transform: rotate(var(--rotation, 0deg));
  transition: all 0.3s ease;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.polaroid-featured:hover {
  transform: rotate(0deg) scale(1.1);
  z-index: 20;
}

.polaroid-featured::before {
  content: "";
  width: 100%;
  height: 80px;
  /* Aumenté de 50px a 80px */
  background-color: transparent;
  display: block;
  border-radius: 2px;
}

.polaroid-featured:nth-child(1) {
  --rotation: -8deg;
}

.polaroid-featured:nth-child(2) {
  --rotation: 5deg;
}

.polaroid-featured:nth-child(3) {
  --rotation: -3deg;
}

.polaroid-featured:nth-child(4) {
  --rotation: 7deg;
}

.polaroid-featured:nth-child(5) {
  --rotation: -5deg;
}

@media (max-width: 768px) {
  .footer-container {
    padding: 4rem 1rem 2rem;
  }

  .footer-title {
    font-size: 2.8rem;
  }

  .footer-content {
    padding: 2rem 1rem;
  }

  .polaroid-gallery {
    gap: 1rem;
    /* Cambié de 0.5rem a 1rem para más espacio */
    justify-content: center;
  }

  .polaroid-featured {
    width: 100px;
    /* Cambié de 90px a 100px */
    height: 120px;
    /* Cambié de 110px a 120px */
    padding: 10px 10px 30px 10px;
    /* Más padding */
  }

  .polaroid-featured::before {
    height: 65px;
    /* Cambié de 60px a 65px */
  }

  /* Ocultar algunas polaroids de fondo en móvil */
  .polaroid:nth-child(n + 6) {
    display: none;
  }

  /* Mostrar solo 3 polaroids destacadas en móvil */
  .polaroid-featured:nth-child(n + 6) {
    display: none;
  }
}