/* Reset básico */  
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  

body {  
  font-family: 'Georgia', serif; /* Elegante y con serif */  
  font-style: italic;  
  color: #0b1d3a;  
  line-height: 1.6;  
  text-align: center;  
  position: relative;  
  overflow-x: hidden;

  /* Gradiente animado de fondo */
  background: linear-gradient(135deg, #0d1b2a, #1b263b, #415a77, #7fb3d5);
  background-size: 400% 400%;
  animation: backgroundShift 20s ease-in-out infinite alternate;
}  

@keyframes backgroundShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Círculos decorativos animados */  
body::before,  
body::after {  
  content: '';  
  position: absolute;  
  border-radius: 50%;  
  z-index: 0;  
  animation: floatCircle 25s linear infinite;  
}  

body::before {  
  width: 200px;  
  height: 200px;  
  background: rgba(27, 38, 59, 0.3);  
  top: 50px;  
  left: -50px;  
}  

body::after {  
  width: 300px;  
  height: 300px;  
  background: rgba(65, 90, 119, 0.25);  
  bottom: 100px;  
  right: -100px;  
}  

@keyframes floatCircle {  
  0% { transform: translateY(0px) translateX(0px); }  
  50% { transform: translateY(20px) translateX(-10px); }  
  100% { transform: translateY(0px) translateX(0px); }  
}  

/* Encabezado */  
header {  
  padding: 4em 1em 2em;  
  position: relative;  
  z-index: 1;  
}  

.title-animated {  
  font-size: 2.5em;  
  margin-bottom: 0.3em;  
  background: linear-gradient(90deg, #0b1d3a, #3a8edc);  
  -webkit-background-clip: text;  
  -webkit-text-fill-color: transparent;  
  animation: titleGradient 5s ease-in-out infinite alternate;  
}  

header h2.title-animated {  
  font-size: 1.5em;  
  font-weight: normal;  
  margin-top: 0.5em;  
}  

@keyframes titleGradient {  
  0% { background-position: 0% 50%; }  
  50% { background-position: 100% 50%; }  
  100% { background-position: 0% 50%; }  
}  

/* Accordion */  
.accordion {  
  max-width: 800px;  
  margin: 2em auto;  
  text-align: left;  
  position: relative;  
  z-index: 1;  
}  

.accordion-btn {  
  width: 100%;  
  padding: 1em 1.5em;  
  text-align: left;  
  background: rgba(255, 255, 255, 0.1);  
  color: #fff;  
  border: none;  
  font-size: 1.1em;  
  cursor: pointer;  
  border-radius: 8px;  
  transition: background 0.3s, transform 0.2s ease;  
}  

.accordion-btn:hover {  
  background: rgba(255, 255, 255, 0.25);  
  transform: translateY(-2px);  
}  

.accordion-content {  
  max-height: 0;  
  overflow: hidden;  
  background: rgba(255, 255, 255, 0.05);  
  color: #fff;  
  transition: max-height 0.3s ease;  
  padding: 0 1.5em;  
  border-radius: 0 0 8px 8px;  
  margin-bottom: 1.5em;  
}  

/* Galería dentro del accordion */  
.galeria {  
  display: grid;  
  grid-template-columns: repeat(2, 1fr);  
  gap: 1.5em;  
  padding: 1em 0;  
}  

.tarjeta {  
  background: rgba(255,255,255,0.08);  
  border-radius: 8px;  
  padding: 0.5em;  
  text-align: center;  
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);  
  min-height: 250px;  
  transition: transform 0.2s ease, box-shadow 0.2s ease;  
}  

.tarjeta h3 {  
  margin-top: 0.5em;  
  font-size: 1em;  
  color: #fff;  
  font-style: italic;  
}  

.tarjeta iframe {  
  border-radius: 4px;  
  width: 100%;  
  height: 200px;  
  border: none;  
}  

/* Tarjetas vacías interactivas */  
.tarjeta:empty {  
  background: linear-gradient(135deg, rgba(0, 128, 255, 0.05), rgba(135, 206, 250, 0.05));  
  border: 2px dashed rgba(135, 206, 250, 0.3);  
}  

.tarjeta:empty:hover {  
  background: linear-gradient(135deg, rgba(0, 128, 255, 0.15), rgba(135, 206, 250, 0.15));  
  transform: translateY(-3px);  
  box-shadow: 0 4px 12px rgba(0, 128, 255, 0.3);  
  cursor: pointer;  
}  

/* Tarjetas ocupadas hover suave */  
.tarjeta iframe:hover {  
  transform: scale(1.02);  
  box-shadow: 0 4px 12px rgba(0, 128, 255, 0.2);  
}  

/* Footer */  
footer {  
  padding: 2em 1em;  
  margin-top: 3em;  
  background: rgba(27,38,59,0.8);  
  color: #fff;  
  font-size: 0.9em;  
  position: relative;  
  z-index: 1;  
}  

/* Responsive */  
@media (max-width: 700px) {  
  .galeria {  
    grid-template-columns: 1fr;  
  }  
}