/* --- THE DNA: BURGUNDY & MIDNIGHT --- */
:root {
  --deep-midnight: #050A0F;   /* The background void */
  --vintage-wine: #3F1521;    /* Your core Deep Burgundy */
  --wine-glow: #5C1E30;       /* The "Active" Burgundy pulse */
  --off-white: #F8F6F3;       /* Clean reading text */
  --soft-gray: #A9A9A9;       /* Secondary details */
}

/* --- GLOBAL BODY --- */
body {
  margin: 0;
  background-color: var(--deep-midnight);
  color: var(--off-white);
  font-family: 'EB Garamond', serif; /* The academic soul */
  line-height: 1.7;
}

/* --- THE HEADER ECOSYSTEM (Centers the Void) --- */
header {
  display: flex;
  flex-direction: column;
  align-items: center;      /* Centers everything horizontally */
  justify-content: center;
  padding-top: 50px;
  width: 100%;
}

.header-logo-container {
  display: flex;
  justify-content: center;  /* Forces the logo wrapper to stay dead center */
  align-items: center;
  width: 100%;
}

header img {
  display: block;          
  max-width: 150px;         /* Strict mobile boundary scaling */
  height: auto;
  margin: 0 auto 10px auto; /* "auto" left and right forces block image centering */
  mix-blend-mode: screen;   /* Hides dark edges beautifully */
  opacity: 0.9; 
  color: var(--soft-gray);  
  font-family: 'Courier Prime', monospace;
  font-size: 0.75rem;
}

/* --- THE QUOTE (Quien mira hacia dentro...) --- */
header h1 {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--off-white);
  font-size: 1.8rem;
  text-align: center;
  padding: 20px 20px 40px 20px;
  letter-spacing: 1px;
  margin: 0;
}

/* --- AUDIO INTRO GATEWAY DESIGN --- */
.audio-intro-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px; /* Prevents the player from stretching too wide on tablet/desktop */
  margin: 0 auto 30px auto; /* Even spacing beneath it before the navigation cards hit */
  padding: 0 20px;
}

.audio-label {
  font-family: 'Courier Prime', monospace;
  font-size: 0.85rem;
  color: var(--soft-gray);
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

audio {
  width: 100%;
  filter: invert(1) hue-rotate(180deg); /* Optional: A classic developer trick to force standard browser audio players into a sleek dark-mode aesthetic */
  opacity: 0.8;
}

/* --- THE NAVIGATION CARDS MATRIX --- */
.sections {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px 20px;
  gap: 25px;
}

.card {
  background-color: var(--vintage-wine); /* Deep Burgundy Base */
  color: var(--off-white);
  padding: 35px;
  width: 280px;
  border-radius: 12px;
  transition: all 0.4s ease;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.05); 
}

/* THE HOVER: The Burgundy Pulse */
.card:hover {
  background-color: var(--wine-glow); /* Lighter Burgundy glow */
  transform: translateY(-10px); 
  box-shadow: 0 15px 35px rgba(63, 21, 33, 0.5); 
}

/* --- SUBSECTION TITLES (Clean Typewriter) --- */
.card h2 {
  font-family: 'Courier Prime', monospace; 
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 0;
  color: var(--off-white);
}

.card p {
  font-family: 'Courier Prime', monospace;
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.85;
}

/* --- THE "ABOUT" SECTION --- */
.about {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.about a {
  color: var(--vintage-wine);
  font-family: 'Courier Prime', monospace;
  font-weight: bold;
}

/* --- FOOTER ARCHIVE --- */
footer {
  background-color: #020406;
  color: var(--soft-gray);
  text-align: center;
  padding: 40px 10px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.8rem;
}

/* --- TYPOGRAPHY AND LINK OVERRIDES --- */
.card a {
  color: var(--off-white) !important; 
  text-decoration: none;               
}

.card h2 {
  color: var(--off-white);             
}

.card:hover h2 {
  color: #F8F6F3;                      
}

footer a {
  color: #630D16 !important; /* Your Vintage Wine */
  text-decoration: none;
  font-family: 'Courier Prime', monospace; 
  font-size: 0.8rem;
}

footer a:hover {
  color: var(--off-white); 
}