/* ============================================================
   HQ STUDIOS SEO OPTIMIZADO - PRIMERA ETAPA
   ------------------------------------------------------------
   - Palabras clave: estudio de grabación Medellín, producción musical,
     mezcla, masterización, artistas, sello discográfico.
   - Optimización visual coherente con HTML.
   - Compatible con PageSpeed y SEO técnico.
   ============================================================ */
/* ===== RESETEO GENERAL ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }


/* ====== REFINAMIENTO BASE (no invasivo) ====== */
:root {
  --hq-bg: #111;
  --hq-fg: #fff;
  --hq-accent: #00ffd1;
  --hq-muted: #b7b7b7;
  --hq-card: #1a1a1a;
  --hq-border: rgba(255,255,255,0.08);
  --hq-radius: 16px;
  --hq-radius-lg: 20px;
  --hq-gap-xs: 8px;
  --hq-gap-sm: 12px;
  --hq-gap: 16px;
  --hq-gap-md: 24px;
  --hq-gap-lg: 32px;
  --hq-gap-xl: 48px;
  --hq-shadow: 0 10px 30px rgba(0,0,0,0.35);
  --nav-h: 80px;
  --hq-bg-light: #fff;
  --hq-fg-dark: #111;
  --hq-muted-dark: #555;
  --hq-card-light: #f8f8f8;
  --hq-border-light: rgba(0,0,0,0.1);
  --link-color: #111;
  --link-hover: #00ffd1;
  --hq-microfigura: url('imagenes/LogoMicro.webp');
} 

/* Tipografía y contenedor suave */
body {
    font-family: 'Montserrat', sans-serif;
    background: #111;
     color: #fff;
     line-height: 1.6;
    /* padding-top: var(--nav-h);*/
     overflow-x: hidden;
     background: var(--hq-bg);
     color: var(--hq-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* Títulos de sección refinados */
.titulo-seccion {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-bottom: var(--hq-gap-sm);
  color: var(--hq-fg);
}

.subtitulo-seccion {
  color: var(--hq-muted);
  margin-bottom: var(--hq-gap-lg);
  max-width: 75ch;
}

/* Tarjetas base, por si las usas en la galería o info */
.card {
  background: var(--hq-card);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-radius);
  box-shadow: var(--hq-shadow);
}

/* Enlaces del nav al pasar (no pisa tus reglas; solo suma) */
 nav a:hover,
.nav-links a:hover {
  color: var(--hq-accent);
}


/* ===== NAV ===== */
.frame-superior {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 3000; 
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Excepción para la pantalla de INICIO (video a pantalla completa) 
body:has(#inicio.activo) {
  padding-top: 0 !important;
}*/

.frame-superior nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
  flex-wrap: wrap;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.logo-nav { height: 50px; width: auto; }
.titulo-nav { color: #fff; font-weight: 700; font-size: 1.1rem; }
.nav-links {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
}
.nav-links a {
  color: #fff; text-decoration: none; font-weight: bold; transition: color 0.3s ease;
}
.nav-links a:hover { color: #00ffd1; }

/* ===== SECCIONES ===== */
#historiahq, #historiajhq { display: block !important; }
section { display: none; padding: 40px 20px; max-width: 1000px; margin: auto; }
section.activo { display: block; }
h2 {
  color: #00ffd1;
  margin-bottom: 20px;
  font-size: 2rem;
  text-align: center;
}


/* ===== VIDEO DE INICIO (ajustado para ocupar todo el ancho) ===== */
.video-contenedor {
  position: fixed;         
  top: var(--nav-h);
  left: 0;
  width: 100vw;            
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
  background: #000;
  z-index: 0;
  transform: none;         
} 

.video-contenedor iframe {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 🔹 Centra el video */
  width: 100vw;
  height: 100%;
  border: none;
  pointer-events: none;  /*🔹 bloquea clics sobre el video */
}

section:not(.activo) .video-contenedor { display: none !important; }


/* ===== CARDS ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.card {
  background: #1c1c1c;
  padding: 20px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.8);
}
.card h3 { color: #00ffd1; margin: 10px 0; }
.card p { margin-bottom: 10px; }

/* ===== COVER (CATÁLOGO) ===== */
.cover {
  width: 100%;
  max-width: 220px;
  border-radius: 12px;
  margin: 0 auto 12px;
  display: block;
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}
.cover:hover { transform: scale(1.05); }

/* ===== BOTONES ===== */
.btn-tarifas, .btn-video, .btn-historiahq {
  background: #00ffd1;
  color: #111;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn-tarifas:hover, .btn-video:hover, .btn-historiahq:hover {
  background: #00c9a8;
  transform: scale(1.05);
}

/* ===== MODALES ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.modal-content {
  background: #111;
  padding: 30px;
  border-radius: 14px;
  max-width: 800px;
  width: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  position: relative;
  text-align: center;
}
.modal-close {
  position: absolute;
  top: 12px; right: 16px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.3s ease, color 0.3s ease;
}
.modal-close:hover { background: rgba(255,255,255,0.2); color: #00ffd1; }
.modal-content iframe {
  width: 100%; height: 450px; border: none; border-radius: 10px;
}

/* ===== HISTORIA ===== */
.historia-section, .historia-personal {
  max-width: 1000px;
  margin: 100px auto 60px;
  padding: 20px;
  color: #eee;
  line-height: 1.8;
}
.historia-section h1, .historia-personal h2 {
  color: #00ffd1;
  text-align: center;
  margin-bottom: 30px;
}
.historia-bloque {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}

.historia-texto h3 { color: #00ffd1; margin-bottom: 10px; }
.subtitulo-historia {
  color: #00ffd1; font-size: 1.4rem; font-weight: 600;
  margin: 35px 0 10px; border-left: 4px solid #00ffd1; padding-left: 12px;
}

/* ===== TARIFAS ===== */
#tarifas {
  display: flex; justify-content: center; align-items: center;
  min-height: calc(100vh - 100px);
  padding: 40px 20px;
}
.tarifas-wrapper {
  background: #1c1c1c; padding: 40px; border-radius: 14px;
  box-shadow: 0 0 25px rgba(0,0,0,0.5); max-width: 760px; width: 100%;
  text-align: center; animation: fadeInTarifas 0.4s ease;
}
/* ===== IMÁGENES EN TABLA DE TARIFAS ===== */
.tabla-tarifas img {
  display: block;
  width: 200px;             /* 🔹 tamaño más grande */
  height: auto;
  margin: 12px auto;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tabla-tarifas img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

.tarifas-header { display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 20px; }
.tarifas-header h2 { color: #00ffd1; font-size: 2rem; margin: 0; }
.tarifas-close {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #00ffd1; font-size: 1.6rem; cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
}
.tarifas-close:hover { color: #fff; transform: scale(1.15); }

.tabla-tarifas {
  width: 100%; border-collapse: collapse; margin: 20px 0;
}
.tabla-tarifas th, .tabla-tarifas td {
  border: 1px solid rgba(255,255,255,0.12);
  padding: 12px 10px; text-align: center;
}
.tabla-tarifas th {
  background: #00ffd1; color: #111; font-weight: 700;
}
.tarifas-descripcion { font-size: 0.95rem; color: #ccc; margin-top: 10px; line-height: 1.6; }


/* ===== ENLACES INTERNOS TARIFAS ===== */
.tarifas-links {
  text-align: center;
  margin-top: 2em;
  padding: 1em;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: transparent;
}

.tarifas-links h3 {
  font-size: 1.3rem;
  color: var(--hq-accent);
  margin-bottom: 0.5em;
}

.tarifas-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tarifas-links li {
  display: inline-block;
  margin: 0.3em 0.8em;
}

/* 🔹 Siempre visibles */
body.dark {
  --link-color: #fff;
  --link-hover: #00ffd1;
}

a {
  color: var(--link-color);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--link-hover);
}

@media (max-width: 480px) {
  .tarifas-header h1 {
    font-size: 1.4rem;
    text-align: center;
  }

  .tarifas-descripcion {
    padding: 0 10px;
  }
}
@media (max-width: 768px) {
  .tarifas-links li {
    display: block;
    margin: 0.5em 0;
  }
}

/* === Ajuste fino tabla de tarifas  OJO PARA REVISAR MIERCOLES 29 OCT. === */
/* === RENDERIZACIÓN COMPLETA DE TABLA DE TARIFAS === */
.tabla-tarifas {
  width: 100%;
  border-collapse: collapse;
  margin: 20px auto;
  table-layout: fixed; /* 🔹 Reparte las 3 columnas proporcionalmente */
}

/* Ajusta fuentes y espacios para que todo quepa sin scroll */
.tabla-tarifas th,
.tabla-tarifas td {
  font-size: 0.9rem;      /* 🔹 un poco más pequeño */
  padding: 8px 6px;       /* 🔹 menos relleno lateral */
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
}

/* Distribución exacta para evitar desplazamiento */
.tabla-tarifas th:nth-child(1),
.tabla-tarifas td:nth-child(1) { width: 40%; }  /* Servicio o Descripción */
.tabla-tarifas th:nth-child(2),
.tabla-tarifas td:nth-child(2) { width: 35%; }  /* Duración o Detalle */
.tabla-tarifas th:nth-child(3),
.tabla-tarifas td:nth-child(3) {
  width: 25%;
  text-align: right;      /* 🔹 valores alineados */
  white-space: nowrap;    /* 🔹 evita que el número se corte */
  padding-right: 12px;
}

/* Texto superior “Mezcla…” centrado y dentro del área visible */
.tarifas-descripcion {
  text-align: center;
  padding: 0 8px;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* En móviles muy pequeños (menos de 380 px de ancho) */
@media (max-width: 380px) {
  .tabla-tarifas th,
  .tabla-tarifas td {
    font-size: 0.8rem;   /* 🔹 reduce ligeramente la fuente */
    padding: 6px 4px;
  }
}



/* ===== SECCIONES DE SERVICIOS Y GÉNEROS (VERSION CLARA) ===== */

/* Estructura general */
#servicios {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding:20px;
  background: #fff; /* 🔹 fondo gris claro uniforme */
  color: #000;         /* 🔹 texto negro */
  z-index: 1;
}

 #generos {
  width: 100%;
  min-height: calc(100vh - 80px);
  text-align: center;
  padding: 20px;
  background: #fff; /* 🔹 fondo gris claro uniforme */
  color: #000;         /* 🔹 texto negro */
  z-index: 1;
}

/* Elimina la imagen de fondo anterior */
#servicios::before, #generos::before {
  content: none !important;
}

/* Elementos internos */
#servicios > *, #generos > * {
  position: relative;
  z-index: 2;
}
/* ====== SERVICIOS & INVERSIONES (contenido/servicios.html) ====== */
.seccion-serv-inv {
  background: #111;   /* coherente con todo el sitio */
  color: #fff;
  padding: 40px 0 60px;
}

.wrap-serv-inv {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Bloques blancos (como Historia/FAQ) */
.bloque-serv {
  background: #fff;
  color: #000;
  border-radius: 16px;
  padding: 36px 28px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.bloque-serv h1, .bloque-serv h2 {
  color: #00ffd1;
  text-align: center;
  margin: 0 0 12px;
  line-height: 1.2;
}

.bloque-serv h1 { font-size: clamp(26px, 3vw, 38px); }
.bloque-serv h2 { font-size: clamp(22px, 2.4vw, 30px); }

.bloque-serv .intro {
  color: #222;
  max-width: 78ch;
  margin: 0 auto 12px;
  line-height: 1.7;
  text-align: center;
}

/* Cards */
.grid-serv {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 14px;
}

.card-serv {
  background: #f8f8f8;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 18px;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.card-serv:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); }
.card-serv h3 { color: #00ffd1; font-size: 1.1rem; margin: 0 0 6px; }
.card-serv p  { color: #333; line-height: 1.65; margin: 0; }

/* CTA */
.cta-centro { text-align: center; margin-top: 16px; }
.btn-inv {
  display: inline-block;
  background: #00ffd1;
  color: #000;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease;
}
.btn-inv:hover { filter: brightness(0.95); transform: translateY(-1px); }

/* Doble columna compacta (institucional) */
.cuadricula-2 {
  display: grid; gap: 16px; margin-top: 10px;
  grid-template-columns: 1fr;
}
.mini-col {
  background: #fafafa; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px; padding: 16px;
}
.mini-col h4 { margin: 0 0 8px; color: #000; }
.lista { margin: 0; padding-left: 18px; }
.lista li { color: #333; line-height: 1.6; margin-bottom: 6px; }

@media (min-width: 820px){
  .cuadricula-2 { grid-template-columns: 1fr 1fr; }
}



/* ==== BLOQUE FINAL CON IMÁGENES ==== */
.cierre-imagenes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: #fff;
  color: #000;
  border-radius: 16px;
  padding: 40px 30px;
  text-align: center;
}

.cierre-imagenes .texto-central {
  flex: 0 1 60%;
  min-width: 260px;
}

.cierre-imagenes .slogan {
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0;
}

.cierre-imagenes .imagen-lado {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #00ffd1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.cierre-imagenes .imagen-lado img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Efecto hover */
.cierre-imagenes .imagen-lado:hover {
  transform: scale(1.25);
  box-shadow: 0 0 25px rgba(0,255,209,0.6);
  z-index: 2;
}

.cierre-imagenes .imagen-lado:hover img {
  transform: scale(1.1);
}

/* En pantallas pequeñas mantiene orden horizontal */
@media (max-width: 768px) {
  .cierre-imagenes {
    flex-wrap: wrap;
    justify-content: center;
  }
  .cierre-imagenes .imagen-lado {
    width: 110px;
    height: 110px;
  }
  .cierre-imagenes .texto-central {
    order: 3;
    flex: 1 1 100%;
  }
}


/* Para imagen de servicios en el slogan *  


/* aqui oct 22 2025*/

/* fin aqui oct 22 2025*/
/* 🔹 Títulos principales */
#generos h2, #servicios h2 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
  text-shadow: none;
  font-family: 'Playfair Display', serif;
}

/* 🔹 Subtítulos o nombres de género */
#generos h3, #servicios h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  margin: 22px 0 10px;
  text-transform: uppercase;
  font-family: 'Playfair Display', serif;
}

/* 🔹 Párrafos */
#generos p, #servicios p {
  font-size: 1.1rem;
  max-width: 85ch;
  margin: 0 auto 18px;
  line-height: 1.8;
  color: #333;
  font-family: 'Poppins', sans-serif;
}

/* 🔹 Enlaces (botones, etc.) */
#generos a, #servicios a {
  color: #007b8f;
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.3s ease;
}
#generos a:hover, #servicios a:hover {
  color: #000;
  text-decoration: none;
}

/* 🔹 Bloques individuales para cada género */
.genero-bloque {
  background: #fff;
  color: #000;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 14px;
  padding: 30px;
  margin: 25px auto;
  max-width: 900px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  text-align: center;
}
.genero-bloque h3 {
  font-weight: 700;
  color: #000;
}
.genero-bloque p {
  color: #333;
}

/* 🔹 Responsive */
@media (max-width: 900px) {
  #generos h2, #servicios h2 { font-size: 2rem; }
  #generos h3, #servicios h3 { font-size: 1.3rem; }
  #generos p,  #servicios p  { font-size: 1rem; }
}


/* === CONTACTO FINAL: centrado arriba, fondo visible, texto negro === */
#contacto {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: flex-start;   /* 🔹 alineado arriba */
  justify-content: center;   /* 🔹 centrado horizontalmente */
  overflow: hidden;
}

/* 🔹 Fondo del estudio visible y natural */
#contacto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('imagenes/HQ_Contacto.webp');
  background-size: 65% auto ;           /* ✅ muestra la imagen completa */
  background-repeat: no-repeat;     /* ✅ evita repetición */
  background-position: center center; /* ✅ centrada vertical y horizontalmente */
  background-color: #fff;           /* ✅ fondo blanco coherente con las otras páginas */
  filter: brightness(1);         /* ✅ mantiene la luz natural */
  z-index: 1;
}


/* 🔹 Panel translúcido centrado arriba */
#contacto .contacto-overlay {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.65); /* 🔹 translúcido claro */
  padding: 10px 30px;
  border-radius: 16px;
  color: #111; /* 🔹 texto negro */
  text-align: center;
  max-width: 520px;
  box-shadow: 0 0 25px rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0,255,209,0.2); /* 🔹 sutil borde HQ Studios */
  margin-top: -80 px;  /* 🔹 sin desplazamiento vertical */
  transform: translateY(0); /* 🔹 exactamente arriba */
}

/* 🔹 Título */
#contacto .contacto-overlay h2 {
  color: #000;
  margin-bottom: 25px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  text-shadow: none;
}

/* 🔹 Texto del contacto */
#contacto .contacto-overlay p {
  font-size: 1.1rem;
  margin-bottom: 12px;
  line-height: 1.7;
  color: #111;
  font-family: 'Poppins', sans-serif;
}

/* 🔹 Enlaces (correo, WhatsApp, etc.) */
#contacto .contacto-overlay a {
  color: #007b8f;
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.3s ease;
}
#contacto .contacto-overlay a:hover {
  color: #000;
  text-decoration: none;
}

/* 🔹 Responsive */
@media (max-width: 900px) {
  #contacto {
    align-items: flex-start;
    justify-content: center;
  }
  #contacto .contacto-overlay {
    width: 90%;
    padding: 25px;
    text-align: center;
  }
}


/* ===== ANIMACIONES ===== */
@keyframes fadeInTarifas {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .frame-superior nav { flex-direction: column; gap: 10px; }
  .nav-links { justify-content: center; gap: 12px; }
  .logo-nav { height: 40px; }
  .video-contenedor { height: calc(100vh - 120px); }
  .modal-content iframe { height: 56vw; }
  .cover { max-width: 160px; }
  .tarifas-wrapper { padding: 25px; max-width: 90%; }
  .historia-bloque { flex-direction: column; text-align: center; }
  .genero-info { padding: 20px; text-align: center; }
}

html { scroll-behavior: smooth; }

/* ===== AJUSTES ESPECÍFICOS HISTORIA HQ STUDIOS Y JUAN HQ ===== */
.historia-section h1 {
  margin-top: -20px;
  margin-bottom: 25px;
  font-size: 2rem;
  text-align: center;
}

.historia-section p {
  max-width: 85ch;
  margin: 0 auto 14px auto;
  text-align: justify;
}

/* Imagen izquierda, texto derecha */
.historia-bloque {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 25px;
  margin-bottom: 40px;
}

/* 🔹 Imagen más pequeña */
.historia-img-col {
  flex: 0 0 30%;         /* antes 30% */
  max-width: 300px;      /* antes 300px */
}

/* === Ajuste visual uniforme de las fotos de historia === */
.historia-img-col img {
  width: 100%;
  max-width: 260px;
  height: 200px;              /* 🔹 define una altura fija */
  object-fit: cover;           /* 🔹 recorta suavemente el exceso vertical */
  object-position: center;     /* 🔹 centra el recorte */
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  transition: transform 0.3s ease;
}

.historia-texto {
  flex: 1;
  text-align: left;
  line-height: 1.7;
}

.historia-texto h3 {
  color: #00ffd1;
  margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 900px) {
  .historia-bloque {
    flex-direction: column;
    text-align: center;
  }
  .historia-img-col {
    max-width: 85%;
    margin: 0 auto;
  }
  .historia-texto {
    text-align: center;
  }
}

@media (max-width: 900px) {
  .historia-bloque {
    flex-direction: column;
    text-align: center;
  }
  .historia-texto {
    text-align: center;
  }
}

/* ===== ENLACE DESTACADO PARA "HAVANA" ===== */
.enlace-havana {
  color: #00ffd1;                 /* 🔹 color turquesa HQ Studios */
  text-decoration: none;          /* 🔹 sin subrayado inicial */
  font-weight: 700;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.enlace-havana:hover {
  color: #ff006e;                 /* 🔹 color vibrante al pasar el mouse */
  text-shadow: 0 0 8px rgba(255, 0, 110, 0.6);
  text-decoration: underline;     /* 🔹 subrayado al pasar */
  cursor: pointer;
}


/* ===== GALERÍA ===== */

/* === PORTADA (2 tarjetas grandes: Artistas y HQ Studios) === */
#galeria {
  background: #111;
  min-height: calc(100vh - 80px);
  color: #fff;
  padding: 60px 0;
}

/* ===== FIX: centrado real de título y subtítulo en Galería ===== */
#galeria .titulo-seccion,
#galeria .subtitulo-seccion {
  display: block;
  max-width: min(75ch, 92vw);  /* respeta tu límite pero adaptado */
  margin: 0 auto;              /* 🔑 centra el bloque */
  text-align: center;          /* centra el texto */
}

#galeria .galeria-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 40px 0;
}
#galeria .galeria-item {
  position: relative;
  width: 420px;
  height: 280px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: transform 0.3s ease;
}
#galeria .galeria-item:hover { transform: scale(1.03); }
#galeria .galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#galeria .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 1.3rem;
  font-weight: 600;
}
#galeria .ver-mas {
  display: block;
  font-size: 1rem;
  color: #00ffd1;
  margin-top: 6px;
  font-weight: 500;
}

/* === VISTA DETALLADA (ARTISTAS y HQ) === */
#galeria-detalle {
  padding: 60px 0;
  overflow-y: auto;
}

/* --- ARTISTAS --- */
.galeria-grupo {
  margin-bottom: 70px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 30px;
}
.titulo-artista {
  font-size: 1.6rem;
  color: #00ffd1;
  border-left: 4px solid #00ffd1;
  padding-left: 10px;
  margin: 0 0 15px 10px;
}
.descripcion-artista {
  color: #bbb;
  font-size: 1.05rem;
  margin: 12px 0 20px 10px;
  max-width: 90ch;
  line-height: 1.6;
}

/* Scroll horizontal por artista */
.galeria-subgrid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 10px 0 15px 10px;
  scroll-snap-type: x mandatory;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
/* ===== IMÁGENES DE ARTISTAS — VISIBLES COMPLETAS ===== */
.galeria-subgrid .galeria-item img {
  width: 100%;
  height: auto;              /* 🔹 elimina la altura fija */
  max-height: 220px;         /* 🔹 altura máxima para mantener proporción */
  object-fit: contain;       /* 🔹 muestra la imagen completa */
  object-position: center;   /* 🔹 centra vertical y horizontalmente */
  background-color: #000;    /* 🔹 relleno negro si hay espacio vacío */
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.galeria-subgrid .galeria-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.galeria-subgrid::-webkit-scrollbar { height: 10px; }
.galeria-subgrid::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
}

/* --- HQ STUDIOS --- */
#galeria-detalle .grid-estudio {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 20px 10px;
}
#galeria-detalle .grid-estudio .galeria-item {
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#galeria-detalle .grid-estudio .galeria-item:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}
#galeria-detalle .grid-estudio .galeria-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width: 1024px) {
  #galeria-detalle .grid-estudio {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  #galeria-detalle .grid-estudio .galeria-item img { height: 200px; }
}
@media (max-width: 640px) {
  #galeria-detalle .grid-estudio {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  #galeria-detalle .grid-estudio .galeria-item img { height: 180px; }
}

/* Botón Volver */
.btn-volver {
  background: none;
  border: 2px solid #00ffd1;
  color: #00ffd1;
  font-size: 1.1rem;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}
.btn-volver:hover {
  background: #00ffd1;
  color: #111;
}

/* === AJUSTE FINAL: IMÁGENES AMPLIADAS SIN INVADIR EL FRAME SUPERIOR === */

/* Modal de imágenes dentro de la galería */
.modal-img {
  position: fixed;
  top: var(--nav-h);      /* 🔹 empieza justo debajo del nav */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3500;          /* por encima del contenido, debajo del nav */
}

/* Caja interna del modal */
.modal-img .modal-content {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  width: auto;
  max-width: 95vw;
  max-height: calc(100vh - var(--nav-h) - 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Imagen ampliada: siempre completa y centrada */
/* ===== IMÁGENES AMPLIADAS EN MODAL ===== */
.modal-img img {
  width: auto;
  height: auto;
  max-width: 105vw; /* 🔹 se expande un poco más a los lados */
  max-height: calc(100vh - var(--nav-h) - 60px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0,0,0,0.8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform: scaleX(1.05); /* 🔹 expande solo horizontalmente */
}


/* Botón de cierre arriba a la derecha dentro del modal */
.modal-img .modal-close {
  position: absolute;
  top: 12px;
  right: 20px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  font-size: 1.8rem;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 10;
}

.modal-img .modal-close:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.05);
}

/* === RESERVAS CON DEGRADADO SUAVE Y FONDO CLARO === */
#reservas {
  position: relative;
  padding: 60px 20px;
  text-align: center;
  color: #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-image: url('HQ_Estudio_1.webp');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* 🔹 Capa blanca con degradado hacia transparente */
#reservas::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.85) 0%,    /* parte superior clara */
    rgba(255,255,255,0.75) 30%,   /* se mantiene clara */
    rgba(255,255,255,0.5) 70%,    /* empieza a difuminar */
    rgba(255,255,255,0.2) 100%    /* casi transparente al final */
  );
  z-index: 0;
  backdrop-filter: blur(4px); /* 🔹 difumina el fondo sutilmente */
}

/* 🔹 Título */
#reservas h2 {
  position: relative;
  z-index: 1;
  color: #000;
  margin-bottom: 25px;
  font-size: 2em;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  text-shadow: none;
}

/* 🔹 Caja del formulario */
.formulario-reservas {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.9);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 850px;
}

/* 🔹 Formulario interno (Google Form o iframe) */
.formulario-reservas iframe {
  width: 100%;
  height: 1000px;
  border: none;
  border-radius: 8px;
  background: transparent;
}

/* 🔹 Responsive */
@media (max-width: 900px) {
  #reservas::before {
    background: rgba(255,255,255,0.85); /* simplifica en móvil */
  }
  .formulario-reservas {
    padding: 15px;
  }
}

/* ===== FAQ ===== */
/* ===== FAQ ===== */
#faq {
  background: #fff;       /* 🔹 Fondo blanco uniforme */
  color: #111;            /* 🔹 Texto negro */
  padding: 60px 30px;
  min-height: 100vh;
  text-align: left;
}

#faq h2 {
  color: #000;
  text-align: center;
  margin-bottom: 40px;
  font-size: 2em;
  font-family: 'Playfair Display', serif;
}

.faq-item {
  background: #f8f8f8;
  border-left: 3px solid #00ffd1;
  border-radius: 8px;
  padding: 20px;
  margin: 15px auto;
  max-width: 800px;
  color: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.faq-item h3 {
  color: #000;
  font-weight: 700;
  margin-bottom: 8px;
}


#faq h2 {
  position: relative;
  z-index: 1;
  color: var(--hq-accent, #00ffd1);
  text-align: center;
  margin-bottom: 40px;
  font-size: 2em;
  text-shadow: 0 0 6px rgba(0, 255, 209, 0.4);
}

.faq-item {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  border-left: 3px solid var(--hq-accent, #00ffd1);
  border-radius: 8px;
  padding: 20px;
  margin: 15px auto;
  max-width: 800px;
  text-align: left;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.faq-item h3 {
  color: var(--hq-accent, #00ffd1);
  margin-bottom: 8px;
  font-size: 1.2em;
}
/* ===== MODO CLARO PARA SECCIONES ===== */

/* Aplica a todas las secciones excepto INICIO */
main section:not(#inicio),
#servicios, #generos, #catalogo, #contacto, #reservas, #galeria, #faq, #historia {
  background: #fff;
  color: #111
}

main section:not(#inicio) h2,
main section:not(#inicio) h3 {
  color: #000;
}

/* Ajuste de textos secundarios */
main section:not(#inicio) p {
  color: var(--hq-muted-dark);
}

/* Tarjetas o recuadros (si los hay) */
.card, .tarifas-wrapper, .faq-item, .contacto-overlay {
  background: var(--hq-card-light);
  border: 1px solid var(--hq-border-light);
  color: var(--hq-fg-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Títulos y acentos */
h1, h2, h3 {
  color: var(--hq-fg-dark);
}
a, .btn, .btn-tarifas, .btn-video, .btn-historiahq {
  color: var(--hq-fg-dark);
}
a:hover, .btn:hover {
  color: var(--hq-accent);
}

/* ===== UNIFICACIÓN DE ESTILO PARA TODOS LOS TÍTULOS Y SUBTÍTULOS ===== */
h1, h2, h3,
.titulo-seccion,
.subtitulo-seccion,
.subtitulo-historia,
.titulo-artista,
.tarifas-header h2,
#contacto .contacto-overlay h2,
#faq h2, #faq h3,
#reservas h2, #reservas h3,
#galeria .titulo-seccion,
#galeria .subtitulo-seccion,
.historia-section h1, .historia-section h2, .historia-section h3 {
  color: #000 !important;          /* 🔹 negro puro */
  font-weight: 700 !important;     /* 🔹 negrita */
  text-shadow: none !important;    /* 🔹 sin brillo ni borde */
  font-family: 'Playfair Display', serif; /* 🔹 estilo artístico y elegante */
}

/* Subtítulos más livianos pero igual en negro */
.subtitulo-seccion, .subtitulo-historia, .descripcion-artista {
  color: #000 !important;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  text-shadow: none !important;
}


/* Opcional: títulos dentro de tarjetas o secciones pequeñas */
.card h3, .faq-item h3, .titulo-artista {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #000;
}

/* === FIX DEFINITIVO: frame visible y scroll sin invasión === */

/* Mantiene el frame translúcido como antes, pero siempre visible */
.frame-superior {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(17, 17, 17, 0.6); /* gris oscuro translúcido (no blanco) */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  z-index: 4000;
}

/* Asegura que el texto del frame sea blanco */
.titulo-nav, 
.nav-links a {
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
}

/* Empuja todo el contenido (lo que venga después del frame) hacia abajo */
.frame-superior + * {
  margin-top: var(--nav-h) !important;
}

/* Evita que el scroll tape el menú en anclas o al cambiar de sección */
html {
  scroll-padding-top: var(--nav-h);
}

/* === OPTIMIZACIÓN MÓVIL GLOBAL HQ STUDIOS === */

/* 1️⃣  Fondo fijo: evita fallas de Safari en iPhone (scroll jitter o fondo negro) */
@supports (-webkit-touch-callout: none) {
  #reservas, #faq {
    background-attachment: scroll !important;
  }
}

/* 2️⃣  Ajuste de menú superior en pantallas pequeñas (menos alto) */
@media (max-height: 500px), (max-width: 420px) {
  .frame-superior nav {
    padding: 6px 10px;
  }
  .logo-nav { height: 36px; }
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 0.9rem; }
}

/* 3️⃣  Control de video en móviles: mantiene proporción correcta y controles visibles */
.video-contenedor iframe {
  pointer-events: auto;            /* permite tocar los controles en móviles */
  width: 100vw;
  height: 56.25vw;                 /* relación 16:9 responsive */
  max-height: calc(100vh - var(--nav-h));
}

/* 4️⃣  Mejor lectura en pantallas pequeñas */
@media (max-width: 600px) {
  body {
    font-size: 0.95rem;
    line-height: 1.5;
  }
  h1, h2, h3 {
    font-size: 1.1rem;
  }
  .contacto-overlay, .formulario-reservas {
    padding: 20px;
  }
}

/* 5️⃣  Ajuste de scroll seguro para todas las secciones */
html {
  scroll-padding-top: var(--nav-h);
  -webkit-overflow-scrolling: touch; /* mejora el desplazamiento suave en iPhone */
}

/* 6️⃣  Evita zoom automático en campos de formulario (Safari iOS) */
input, select, textarea {
  font-size: 16px; /* tamaño mínimo para evitar zoom en foco */
}

/* 7️⃣  Corrige posibles saltos de video fijo en iOS */
@supports (-webkit-touch-callout: none) {
  .video-contenedor {
    position: relative !important;  /* Safari no soporta fixed + video correctamente */
  }
}


/* === OPTIMIZACIÓN EXTRA: VIDEO RESPONSIVE SEGÚN ORIENTACIÓN === */

/* 📱 Modo vertical (portrait) → video alto, ajustado al ancho */
@media (orientation: portrait) {
  .video-contenedor iframe {
    width: 100vw;
    height: 56.25vw; /* relación 16:9 estándar */
    max-height: calc(100vh - var(--nav-h));
  }
}

/* 📺 Modo horizontal (landscape) → video ancho, ocupa toda la altura del móvil */
@media (orientation: landscape) {
  .video-contenedor iframe {
    width: 177.78vh; /* relación 16:9 inversa (altura → ancho) */
    height: 100vh;
    max-width: 100vw;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
  }
}
/* ===== MICROFIGURA EN CADA PÁGINA ===== */
.microfigura-pagina {
  position: absolute;
  top: 18px;
  right: 24px;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #00ffd1;
  box-shadow: 0 0 8px rgba(0,255,209,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.microfigura-pagina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* Efecto hover */
.microfigura-pagina:hover {
  transform: scale(1.25);
  box-shadow: 0 0 20px rgba(0,255,209,0.8);
}

.microfigura-pagina:hover img {
  transform: scale(1.1);
}

/* Asegura que el contenedor padre sea relativo */
.bloque {
  position: relative;
}

/* === MICROFIGURA HQ STUDIOS (para todas las páginas, incluido Servicios) === */
/* === BLOQUES BLANCOS UNIFICADOS HQ STUDIOS ===  .historia-section .bloque-serv, */
.bloque
 {
  background: #fff;
  color: #000;
  border-radius: 16px;
  padding: 40px 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  position: relative;
}

/* MICROFIGURA HQ (misma en todas las páginas) */
.microfigura-hq {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #00ffd1;
  background-image: var(--hq-microfigura);
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 10px rgba(0,255,209,0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 3;
}

.microfigura-hq img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

/* Efecto hover: agrandamiento */
.microfigura-hq:hover {
  transform: scale(1.3);
  box-shadow: 0 0 20px rgba(0,255,209,0.8);
}

.microfigura-hq:hover img {
  transform: scale(1.05);
}

/* Versión móvil */
@media (max-width: 768px) {
  .microfigura-hq {
    width: 60px;
    height: 60px;
    top: 16px;
    right: 16px;
  }
}

/* ===== MENÚ RESPONSIVE HQ STUDIOS ===== */
/* ===== MENÚ HQ STUDIOS — FONDO NEGRO, LETRAS BLANCAS ===== */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 1em;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000000; /* 🔹 fondo negro sólido */
  color: #ffffff;       /* 🔹 texto blanco */
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
  z-index: 1000;
}

/* Logo y texto HQ Studios */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.nav-logo img {
  height: 38px;
  width: auto;
}

.titulo-nav {
  font-weight: 700;
  color: #ffffff; /* 🔹 texto HQ Studios blanco */
  font-size: 1.1rem;
}

/* Ícono menú (hamburguesa) */
.menu-toggle svg {
  width: 30px;
  height: 30px;
  color: #ffffff;
  stroke: #ffffff;
  fill: none;
  pointer-events: auto;
}


/* Enlaces principales */
.nav-links {
  display: flex;
  gap: 1.5em; 
}

.nav-links a {
  color: #ffffff; /* 🔹 letras blancas */
  text-decoration: none;
  font-weight: 500;
  opacity: 1;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--hq-accent, #00ffd1); /* 🔹 cian HQ Studios al pasar el cursor */
}

/* ===== Estilo móvil ===== */
/* ===== Ajuste menú móvil ===== */
@media (max-width: 900px) {
  .menu-toggle {
    display: block; 
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background: #000;
    overflow-y: auto;
    padding: 0.5em 0;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  }

  .nav-links.active {
    display: flex;
  }

.nav-links a {
    color: #fff;
    padding: 0.35em 0;    /* 🔹 más compacto verticalmente */
    font-size: 0.95rem;   /* 🔹 tamaño un poco menor */
    margin: 0.1em 0;      /* 🔹 separa menos cada línea */
    line-height: 1.1;
}

  .nav-links a:hover {
    color: var(--hq-accent, #00ffd1);
  }
}
/*Parche para servicios en android y apple*/
/* === FIX PRECISO: AJUSTE DE MARCO BLANCO EN SERVICIOS (MÓVILES) === */
@media (max-width: 768px) {
  /* Centra correctamente todo el contenedor */
  .wrap-serv-inv {
    padding: 0 10px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Ajusta el bloque blanco interior */
  .bloque-serv {
    margin: 0 auto 20px auto !important;
    width: 95% !important;
    padding: 24px 14px !important;
    border-radius: 14px;
    box-sizing: border-box;
  }

  /* Alinea texto dentro del bloque */
  .bloque-serv .intro,
  .bloque-serv p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}