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

/* Fuentes y colores base */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f9fbfd; /* fondo claro */
  color: #003d66; /* azul oscuro para texto */
  line-height: 1.6;
  padding: 10px 20px;
}

/* Encabezado: logo a la izquierda, texto a la derecha, todo centrado horizontal */
header {
  display: flex;
  align-items: center;
  justify-content: center;  /* centra el contenido horizontalmente */
  gap: 20px;
  padding: 20px 30px;
  border-bottom: 3px solid #00bfff;
  background: #e6f7ff;
  flex-wrap: wrap; /* para que se acomode bien en móviles */
  text-align: center;

  /* ✅ Espacio para evitar que choque con barra fija */
  margin-top: 60px;
}

/* Contenedor del logo */
header .logo img {
  max-width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Contenedor para texto del header */
header .header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* centra el texto debajo del logo */
}

header h1 {
  color: #007acc;
  font-size: 2.2rem;
  margin-bottom: 5px;
}

header p.lema {
  font-style: italic;
  color: #ff69b4;
  font-weight: 600;
  margin-bottom: 8px;
}

header p.ubicacion {
  font-size: 0.9rem;
  color: #010305;
  font-weight: 600;
  margin: 0;
}

/* Responsive para móviles */
@media (max-width: 600px) {
  header {
    flex-direction: column;
    gap: 10px;
  }

  header .logo img {
    max-width: 70px;
    height: auto;
  }

  header h1 {
    font-size: 1.6rem;
  }
}

/* Navegación */
nav {
  background: #00bfff; /* azul celeste */
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 191, 255, 0.3);
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

nav ul li {
  margin: 10px 15px;
}

nav ul li a {
  color: white;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;
  padding: 6px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

nav ul li a:hover {
  background-color: #ff69b4; /* rosado al pasar el mouse */
  color: #fff;
}

/* Sección radio-top */
#radio-top {
  background: #d9f0ff; /* azul celeste muy suave */
  padding: 25px 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 191, 255, 0.15);
  margin-bottom: 30px;
}

#radio-top h2 {
  color: #007acc;
  margin-bottom: 15px;
  font-size: 1.8rem;
}

audio#liveAudio {
  width: 100%;
  max-width: 480px;
  outline: none;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.4);
  margin-bottom: 15px;
}

/* Contenedor principal para imagen + reproductor */
.radio-content {
  display: flex;
  justify-content: center; /* centra horizontalmente las columnas */
  align-items: flex-start; /* alinea arriba */
  gap: 10px;               /* espacio entre columnas */
  flex-wrap: wrap;         /* para que en móviles se acomode vertical */
  text-align: left;
}

/* Imagen GIF a la izquierda */
.radio-image {
  width: 150px;           /* ancho fijo para escritorio */
  height: auto;          /* para mantener proporción */
  max-height: 60px;      /* máximo alto para que no se haga gigante */
  overflow: hidden;
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

/* En móviles (pantallas pequeñas), reducir tamaño */
@media (max-width: 100px) {
  .radio-image {
    width: 150px;        /* ancho más pequeño */
    max-height: 140px;   /* altura proporcional más pequeña */
  }
}

.radio-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* para que se vea toda la imagen sin recortar */
  border-radius: 12px;
}

/* Contenedor del reproductor + chat */
.radio-player-chat {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra reproductor y chat horizontalmente */
  max-width: 480px;
  width: 100%;
  gap: 15px;             /* espacio entre reproductor y chat */
}

/* Reproductor */
audio#liveAudio {
  width: 100%;
  max-width: 480px;
  outline: none;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.4);
}

/* Chat en vivo */
#chat {
  background: #ffffff;
  border: 2px solid #00bfff;
  border-radius: 10px;
  padding: 15px;
  width: 100%;       /* toma el ancho completo del contenedor */
  max-width: 480px;
  color: #003d66;
  box-shadow: 0 3px 10px rgba(0, 191, 255, 0.1);
  text-align: center;
}

#chat h3 {
  color: #ff69b4;
  margin-bottom: 8px;
  font-weight: 700;
}

#chat p {
  font-style: italic;
  font-size: 1rem;
}

/* Responsive para móviles */
@media (max-width: 700px) {
  .radio-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .radio-image,
  .radio-player-chat {
    width: 100%;
    max-width: 480px;
  }

  .radio-image img,
  audio#liveAudio {
    max-width: 100%;
    height: auto;
  }

  #chat {
    max-width: 100%;
  }
}


/* Sección Quiénes Somos */
#quienes {
  margin-bottom: 40px;
  text-align: center;
}

#quienes h2 {
  color: #007acc;
  margin-bottom: 25px;
}

.creadores {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

.persona {
  background: #e6f7ff;
  border-radius: 15px;
  padding: 15px;
  width: 220px;
  box-shadow: 0 4px 15px rgba(0, 191, 255, 0.2);
  transition: transform 0.3s ease;
}

.persona:hover {
  transform: scale(1.05);
}

.persona img {
  width: 220px;   /* ancho fijo */
  height: 220px;  /* alto fijo, igual que ancho para cuadrado */
  object-fit: cover; /* para que la imagen se recorte y se adapte sin deformarse */
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 3px 10px rgba(0, 191, 255, 0.25);
}

.persona h3 {
  color: #003d66;
  margin-bottom: 8px;
}

.persona p {
  color: #00509e;
  font-weight: 600;
}

/* Visión y Misión */
#vision {
  background: #d9f0ff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 40px;
  box-shadow: 0 3px 10px rgba(0, 191, 255, 0.15);
}

#vision h2 {
  color: #007acc;
  margin-bottom: 10px;
}

#vision p {
  font-size: 1.1rem;
  color: #003d66;
  margin-bottom: 20px;
}

/* Galería */
.galeria img,
.galeria video {
  width: 240px;    /* ancho fijo */
  height: 160px;   /* alto fijo para mantener proporción 3:2, ajusta según prefieras */
  object-fit: cover; /* para recortar sin deformar */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 191, 255, 0.2);
  transition: transform 0.3s ease;
}

#galeria h2 {
  color: #007acc;
  margin-bottom: 20px;
}

.galeria {
  display: flex;
  justify-content: center; /* centra la fila */
  gap: 15px;
  flex-wrap: wrap;
  max-width: 1000px; /* limita el ancho máximo para que no ocupe toda la pantalla */
  margin: 0 auto; /* centra el contenedor de la galería dentro de su padre */
  padding: 0 10px; /* un poco de espacio lateral */
}

.galeria img, 
.galeria video {
  width: 240px;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 191, 255, 0.2);
  transition: transform 0.3s ease;
}

.galeria img:hover, .galeria video:hover {
  transform: scale(1.05);
}

/* Zona de Cortesía */
#cortesia {
  background: #fff0f6; /* rosa muy claro */
  border: 2px solid #ff69b4; /* rosado */
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 40px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(255, 105, 180, 0.15);
}

#cortesia h2 {
  color: #ff1493; /* rosado fuerte */
  margin-bottom: 15px;
}

#cortesia p {
  font-style: italic;
  margin-bottom: 20px;
  color: #c71585;
}

#cortesia ul {
  list-style-type: none;
  padding-left: 0;
}

#cortesia ul li {
  margin: 10px 0;
}

#cortesia ul li a {
  color: #ff1493;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

#cortesia ul li a:hover {
  border-color: #ff69b4;
}

/* Sección Contacto */
.contacto-section {
  background-color: #f0f8ff;
  padding: 40px 20px;
  border-top: 3px solid #00bfff;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 191, 255, 0.1);
}

.contacto-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px; /* reducido para juntar más QR */
  max-width: 1000px;
  margin: 0 auto;
}

/* Información de contacto */
.contacto-info {
  flex: 1;
  min-width: 260px;
  max-width: 450px;
  text-align: center; /* centrado completo */
}

.contacto-info h2 {
  color: #007acc;
  margin-bottom: 15px;
  font-size: 1.8rem;
  text-align: center;
}

.contacto-items {
  display: flex;
  justify-content: center; /* centrar horizontalmente */
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.contacto-items a {
  text-decoration: none;
  font-weight: 600;
  color: #007acc;
  background-color: #e6f7ff;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #00bfff;
  transition: background 0.3s;
}

.contacto-items a:hover {
  background-color: #cceeff;
}

.correo {
  margin-top: 10px;
  font-size: 0.95rem;
}

.correo a {
  text-decoration: none;
  color: #003d66;
  font-weight: 600;
}

/* Redes sociales */
.contacto-info h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: #007acc;
  text-align: center;
}

.redes-sociales {
  display: flex;
  justify-content: center; /* centrado horizontal */
  gap: 12px;
  margin-bottom: 10px;
}

.redes-sociales img {
  width: 60px;
  height: 60px;
  transition: transform 0.2s;
}

.redes-sociales img:hover {
  transform: scale(1.15);
}

/* Código QR */
.contacto-qr {
  flex: 1;
  text-align: center;
  min-width: 220px;
  max-width: 300px;
  margin-top: 20px;
}

.contacto-qr img {
  width: 220px; /* más pequeño */
  height: auto;
  border-radius: 10px;
  margin-bottom: 5px;
  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.2);
}

.contacto-qr p {
  font-size: 0.9rem;
  font-weight: 600;
  color: #003d66;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .contacto-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contacto-items {
    justify-content: center;
  }

  .contacto-qr {
    margin-top: 15px;
  }
}

/* Pie de página */
footer {
  text-align: center;
  padding: 15px 10px;
  font-size: 0.9rem;
  color: #555;
  border-top: 1px solid #ccc;
  margin-top: 30px;
}

/* Barra de navegación fija */
.nav-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #00bfff;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-family: 'Segoe UI', sans-serif;
}

/* Contenedor del menú */
.nav-top ul {
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-wrap: nowrap;                  /* evita que el menú se envuelva */
  overflow-x: auto;                   /* scroll horizontal en móviles */
  -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
  list-style: none;
  gap: 10px;
  justify-content: flex-start;       /* alinea a la izquierda en móvil */
}

/* Items de menú */
.nav-top ul li {
  flex: 0 0 auto;                     /* no se estiran */
  margin: 0;
}

/* Links */
.nav-top ul li a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.3s ease;
  white-space: nowrap;               /* evita saltos de línea */
}

/* Hover o activo */
.nav-top ul li a:hover,
.nav-top ul li a.active {
  background: #ff69b4;
}

/* En pantallas grandes (centrar el menú) */
@media (min-width: 769px) {
  .nav-top ul {
    overflow-x: visible;
    justify-content: center;         /* centrar menú en escritorio */
    flex-wrap: wrap;
  }
}

/* Corregir interferencia con otros nav */
@media (max-width: 700px) {
  nav:not(.nav-top) ul {
    flex-direction: column;          /* solo otros navs, no la barra superior */
  }
}



body {
  padding-top: 55px; /* ajusta este valor según la altura real de tu barra de navegación fija */
}