/* ============================================
   VARIABLES CSS
   ============================================ */
:root {
  /* Colores principales */
  --color-primary-red: #8B2635;
  --color-primary-red-light: #A02030;
  --color-primary-red-dark: #C41E3A;
  --color-gold: #BA9971;
  --color-gold-light: #9C784A;
  --color-bg-dark: #FAF9F6;
  --color-bg-card: rgba(255, 255, 255, 0.95);
  --color-text-light: #F5E6D3;
  --color-bg-modal: rgba(255, 248, 240, 0.98);
  --color-bg-elegant: #FAF9F6;
  
  /* Gradientes */
  --gradient-red: linear-gradient(135deg, #8B2635 0%, #A02030 50%, #C41E3A 100%);
  --gradient-red-hover: linear-gradient(135deg, #A02030 0%, #C41E3A 50%, #DC143C 100%);
  
  /* Fondo abstracto rojo moderno */
  --bg-red-abstract: 
    radial-gradient(circle at 20% 50%, rgba(139, 38, 53, 0.8) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(192, 30, 58, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(160, 32, 48, 0.7) 0%, transparent 50%),
    linear-gradient(135deg, #6B1A28 0%, #8B2635 25%, #A02030 50%, #C41E3A 75%, #8B2635 100%);
  
  /* Fuentes */
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Open Sans', sans-serif;
  --font-fraunces: 'Fraunces', serif;
  
  /* Espaciados */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* Sombras */
  --shadow-card: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-button: 0 4px 15px rgba(139, 38, 53, 0.4);
  --shadow-button-hover: 0 6px 20px rgba(139, 38, 53, 0.6);
}

/* ============================================
   RESET Y BASE
   ============================================ */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  width: 100%;
  box-sizing: border-box;
  max-width: 100vw;
}

body {
  padding-left: 0;
  padding-right: 0;
  background: var(--bg-red-abstract);
  background-attachment: fixed;
  min-height: 100vh;
}

*, *:before, *:after {
  box-sizing: border-box;
}

section, .container, .modal, .card {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  width: 100%;
}

img, lottie-player, video {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  margin: 0 auto;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

iframe {
  max-width: 100%;
}

/* ============================================
   ANIMACIONES
   ============================================ */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(6px);
  }
  60% {
    transform: translateY(3px);
  }
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* ============================================
   UTILIDADES GENERALES
   ============================================ */
.d-flex {
  flex-wrap: wrap;
}

/* Espaciado entre secciones */
section, .cards-section, .section {
  margin-top: 0 !important;
  margin-bottom: 30px !important;
}

.mt-5, .mb-5 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Eliminar margen superior del primer elemento */
#inicio, #inicio:first-child, section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}