/* ============================================
   VARIABLES CSS — cambia colores desde aquí
   ============================================ */
:root {
  --color-bg-deep:    #1a093b;
  --color-bg-mid:     #2d1457;
  --color-accent:     #ffd700;
  --color-accent-light: #fffbe6;
  --color-text:       #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.75);
 
  --shadow-accent:    0 2px 16px rgba(255, 215, 0, 0.2);
  --shadow-accent-lg: 0 8px 32px rgba(255, 215, 0, 0.47);
  --shadow-section:   0 4px 32px rgba(255, 215, 0, 0.13);
 
  --radius-card:   16px;
  --radius-btn:    6px;
  --radius-section: 24px;
 
  --z-bg:      1;
  --z-effects: 2;
  --z-content: 10;
 
  --transition-base: 0.3s ease;
}
 
/* ============================================
   RESET Y BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(120deg, var(--color-bg-mid) 0%, var(--color-bg-deep) 100%);
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--color-text);
}
 
/* ============================================
   FONDOS DECORATIVOS
   ============================================ */
#city-bg {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 220px;
  z-index: var(--z-bg);
  pointer-events: none;
  background: none;
}
 
#bubbles {
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-effects);
  pointer-events: none;
}
 
/* ============================================
   HEADER
   ============================================ */
.main-header {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
  padding: 60px 20px 30px;
  background: transparent;
}
 
.animated-title {
  font-size: 2.7rem;
  letter-spacing: 2px;
  margin: 0 0 10px;
  color: var(--color-text);
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.53), 0 0 8px rgba(255, 215, 0, 0.6);
  animation: fadeInDown 1.2s cubic-bezier(0.77, 0, 0.18, 1) both;
}
 
.subtitle {
  font-size: 1.3rem;
  color: var(--color-accent);
  margin-bottom: 0;
  letter-spacing: 1px;
  animation: fadeIn 1.5s 0.3s both;
}
 
/* ============================================
   SECCIÓN DE CERTIFICACIONES
   ============================================ */
.cert-section {
  position: relative;
  z-index: var(--z-content);
  max-width: 1100px;
  margin: 40px auto 0;
  background: rgba(30, 20, 60, 0.32);
  border-radius: var(--radius-section);
  box-shadow: var(--shadow-section);
  padding: 40px 24px 32px;
  animation: fadeIn 1.2s 0.2s both;
}
 
.section-title {
  color: var(--color-accent);
  text-align: center;
  font-size: 2rem;
  margin-bottom: 32px;
  letter-spacing: 1px;
}
 
/* ============================================
   GRID DE CARDS
   ============================================ */
.cert-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}
 
.cert-card {
  background: rgba(45, 20, 87, 0.22);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-accent);
  padding: 28px 22px 18px;
  min-width: 270px;
  max-width: 340px;
  flex: 1 1 300px;
  color: var(--color-text);
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  opacity: 0;
  transform: translateY(40px);
  animation: cardFadeIn 1.2s cubic-bezier(0.77, 0, 0.18, 1) both;
}
 
/* Delays escalonados */
.cert-card:nth-child(1) { animation-delay: 0.1s; }
.cert-card:nth-child(2) { animation-delay: 0.2s; }
.cert-card:nth-child(3) { animation-delay: 0.3s; }
.cert-card:nth-child(4) { animation-delay: 0.4s; }
.cert-card:nth-child(5) { animation-delay: 0.5s; }
.cert-card:nth-child(6) { animation-delay: 0.6s; }
.cert-card:nth-child(7) { animation-delay: 0.7s; }
.cert-card:nth-child(8) { animation-delay: 0.8s; }
 
.cert-card:hover {
  transform: scale(1.04) rotate(-1deg);
  box-shadow: var(--shadow-accent-lg);
}
 
.cert-card h3 {
  color: var(--color-accent);
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.2rem;
}
 
.cert-card ul {
  padding-left: 18px;
  margin-bottom: 18px;
  font-size: 1rem;
  color: var(--color-text-muted);
}
 
/* ============================================
   LINKS DE CERTIFICADOS
   ============================================ */
.cert-links {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
 
.cert-links a {
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  color: var(--color-bg-mid);
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  box-shadow: var(--shadow-accent);
  transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}
 
.cert-links a:hover {
  background: linear-gradient(90deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
  color: var(--color-bg-deep);
  box-shadow: 0 4px 16px rgba(255, 251, 230, 0.8);
}
 
/* Accesibilidad: foco visible para teclado */
.cert-links a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
 
/* ============================================
   FOOTER
   ============================================ */
footer {
  text-align: center;
  color: var(--color-text);
  background: transparent;
  padding: 32px 0 18px;
  font-size: 1.1rem;
  letter-spacing: 1px;
  z-index: var(--z-content);
  position: relative;
}
 
/* ============================================
   ANIMACIONES
   ============================================ */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
 
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
/* ============================================
   RESPONSIVE — tablets
   ============================================ */
@media (max-width: 900px) {
  .cert-list {
    flex-direction: column;
    gap: 18px;
  }
 
  .cert-card {
    min-width: 0;
    max-width: 100%;
  }
 
  .cert-section {
    padding: 18px 12px 12px;
  }
}
 
/* ============================================
   RESPONSIVE — móviles pequeños
   ============================================ */
@media (max-width: 480px) {
  .animated-title {
    font-size: 1.8rem;
    letter-spacing: 1px;
  }
 
  .subtitle {
    font-size: 1.1rem;
  }
 
  .section-title {
    font-size: 1.5rem;
  }
 
  .main-header {
    padding: 40px 16px 20px;
  }
 
  .cert-links {
    flex-direction: column;
  }
}
 
/* ============================================
   ACCESIBILIDAD — movimiento reducido
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .cert-card,
  .animated-title,
  .subtitle,
  .cert-section {
    animation: none;
    opacity: 1;
    transform: none;
  }
 
  .cert-card:hover {
    transform: none;
  }
}