/* ================== VARIABLES CSS Y CONFIGURACIÓN GLOBAL ================== */

/* Definición de variables CSS (custom properties) reutilizables en todo el sitio */
:root {
  /* ===== DIMENSIONES ===== */
  --nav-h: 52px;                 /* Altura fija de la barra de navegación superior (.top-nav) */
  
  /* ===== COLORES BASE ===== */
  --bg: #ffffff;                 /* Color de fondo principal del sitio (body background) */
  --text: #111111;               /* Color de texto principal (usado en párrafos, títulos) */
  --text-dim: rgba(17,17,17,.72);/* Color de texto secundario/atenuado (subtítulos, descripciones) */
  --border: rgba(17,17,17,.10);  /* Color para bordes suaves (tarjetas, separadores) */
  
  /* ===== FONDOS DE PANELES ===== */
  --panel: #faebeb;              /* Fondo blanco para paneles principales */
  --panel-2: #fafafa;            /* Fondo gris muy claro para paneles secundarios */
  --panel-3: #ffffff;            /* Fondo azul claro específico para sección "Aprendizaje musical" */
  
  /* ===== FONDOS DE BANDAS/SECCIONES ===== */
  --band-white: #ffffff;         /* Fondo blanco para la banda de "Canales" */
  --band-ivory: #f7f3eb;         /* Fondo marfil/crema para la banda de "Servicios" */
  
  /* ===== COLORES DE MARCA ===== */
  --brand-1: #E74C3C;            /* Color primario de marca (rojo) - usado en gradientes CTA */
  --brand-2: #f39c12;            /* Color secundario de marca (ámbar) - usado en gradientes CTA */
  --ok-1: #27ae60;               /* Verde para estados positivos (badges "Disponible") */
  --ok-2: #2ecc71;               /* Verde alternativo para estados positivos */
  --accent: #1f2a44;             /* Azul profesional para elementos de acento */
  
  /* ===== COLORES DE NAVEGACIÓN ===== */
  --nav-purple: rgba(122, 60, 255, .50); /* Fondo púrpura semitransparente de la barra de navegación */
  --nav-line: rgba(255,255,255,.55);     /* Color de la línea decorativa bajo la navegación */
  
  /* ===== EFECTOS VISUALES ===== */
  --shadow: 0 10px 30px rgba(0,0,0,.10); /* Sombra estándar para elementos elevados (hover cards) */
  
  /* ===== GRADIENTES REUTILIZABLES ===== */
  --accent-grad: linear-gradient(135deg, #a3834f 0%, #715831 50%, #eebe7b 100%); /* Gradiente dorado para título principal */
}

/* Reset CSS básico - elimina estilos por defecto del navegador */
* {
  box-sizing: border-box;        /* Incluye padding y border en el cálculo del ancho total del elemento */
  margin: 0;                     /* Elimina márgenes por defecto de todos los elementos */
  padding: 0;                    /* Elimina relleno interno por defecto de todos los elementos */
}

/* ================== CONFIGURACIÓN BASE DEL DOCUMENTO ================== */

/* Configuración para que html y body ocupen toda la altura de la ventana */
html, body {
  height: 100%;                  /* Altura completa de la ventana del navegador */
}

/* Configuración tipográfica y visual base para todo el documento */
body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* Pila de fuentes: Poppins principal, fallbacks del sistema */
  color: var(--text);            /* Aplica color de texto principal definido en variables CSS */
  background: var(--bg);         /* Aplica color de fondo principal (blanco) */
  line-height: 1.55;             /* Interlineado optimizado para legibilidad */
}

/* Contenedor centrado responsive usado en todas las secciones */
.container {
  max-width: 1200px;             /* Ancho máximo para evitar líneas de texto muy largas en pantallas grandes */
  margin: 0 auto;                /* Centra horizontalmente el contenedor en la página */
  padding: 0 16px;               /* Espacio interno lateral para que el contenido no toque los bordes */
}

/* ================== ACCESIBILIDAD Y ELEMENTOS ESPECIALES ================== */

/* Enlace "Saltar al contenido" para usuarios que navegan con teclado */
.skip-link {
  position: absolute;            /* Posicionamiento absoluto respecto al viewport */
  left: -9999px;                 /* Oculta el enlace fuera de la pantalla inicialmente */
  top: 0;                        /* Posicionado en la parte superior */
  background: #000;              /* Fondo negro para máximo contraste visual */
  color: #fff;                   /* Texto blanco para contrastar con fondo negro */
  padding: .6rem .9rem;          /* Relleno interno que crea área clicable cómoda */
  z-index: 1100;                 /* Índice Z muy alto para aparecer por encima de todo */
  border-radius: 8px;            /* Esquinas redondeadas suaves */
}

/* Estado visible del enlace cuando recibe foco del teclado (Tab) */
.skip-link:focus {
  left: 12px;                    /* Mueve el enlace a posición visible en pantalla */
  top: 12px;                     /* Separación del borde superior de la ventana */
  outline: 2px solid #fff;       /* Borde de foco blanco visible para accesibilidad */
}

/* Clase para contenido accesible solo a lectores de pantalla (screen readers only) */
.sr-only {
  position: absolute;            /* Posicionamiento absoluto */
  width: 1px;                    /* Ancho mínimo (técnicamente visible pero imperceptible) */
  height: 1px;                   /* Alto mínimo */
  padding: 0;                    /* Sin relleno interno */
  margin: -1px;                  /* Margen negativo para ocultar completamente */
  overflow: hidden;              /* Oculta cualquier contenido que pueda desbordarse */
  clip: rect(0,0,0,0);           /* Recorta el elemento para hacerlo visualmente invisible */
  white-space: nowrap;           /* Evita saltos de línea que podrían afectar el layout */
  border: 0;                     /* Sin borde */
}

/* Campo trampa para formularios (honeypot) - detecta bots de spam */
.honeypot {
  position: absolute;            /* Posicionamiento absoluto */
  left: -9999px;                 /* Oculta el campo fuera de la pantalla */
  opacity: 0;                    /* Completamente transparente */
}

/* ================== NAVEGACIÓN PRINCIPAL FIJA ================== */

/* Contenedor principal de la barra de navegación superior */
.top-nav {
  position: fixed;               /* Posición fija para permanecer visible durante el scroll */
  top: 0;                        /* Anclada al borde superior de la ventana */
  left: 0;                       /* Anclada al borde izquierdo */
  right: 0;                      /* Anclada al borde derecho (ocupa ancho completo) */
  z-index: 1000;                 /* Índice Z alto para aparecer por encima del contenido */
  background: var(--nav-purple); /* Fondo púrpura semitransparente definido en variables */
  border-bottom: 1px solid transparent; /* Borde inferior transparente (base para otros estados) */
}

/* Pseudoelemento que crea la línea decorativa bajo la barra de navegación */
.top-nav::after {
  content: "";                   /* Contenido vacío requerido para que el pseudoelemento sea visible */
  position: absolute;            /* Posicionamiento absoluto respecto al contenedor .top-nav */
  left: 0;                       /* Alineado al borde izquierdo del contenedor */
  right: 0;                      /* Alineado al borde derecho (ancho completo) */
  bottom: 0;                     /* Posicionado en la parte inferior del contenedor */
  height: 1px;                   /* Altura de la línea decorativa */
  background: var(--nav-line);   /* Color blanco semitransparente definido en variables */
}

/* Contenedor flexbox que organiza elementos dentro de la barra de navegación */
.nav-container {
  height: var(--nav-h);          /* Altura fija definida en variables (52px) */
  display: flex;                 /* Layout flexbox para alinear elementos horizontalmente */
  align-items: center;           /* Centra verticalmente todos los elementos hijo */
  justify-content: space-between;/* Logo a la izquierda, menú al centro, extras a la derecha */
  gap: 12px;                     /* Espacio mínimo entre elementos flexbox */
}

/* ================== BRANDING (LOGO Y MARCA) ================== */

/* Contenedor del logo y elementos de marca */
.brand {
  display: flex;                 /* Layout flexbox para alinear logo y posible texto */
  align-items: center;           /* Centra verticalmente logo y texto */
  gap: .5rem;                    /* Espacio entre logo y cualquier texto adicional */
}

/* Estilo aplicado a la imagen del logo */
.brand-logo {
  width: 50px;                   /* Ancho fijo del logo */
  height: 50px;                  /* Alto fijo del logo (proporción cuadrada 1:1) */
  border-radius: 10px;           /* Esquinas redondeadas del logo */
  border: 0px solid rgba(255,255,255,.25); /* Sin borde actualmente (0px) pero preparado para variaciones */
}

/* ================== MENÚ HORIZONTAL PRINCIPAL ================== */

/* Lista que contiene todos los elementos del menú de navegación */
.nav-menu {
  list-style: none;              /* Elimina las viñetas por defecto de la lista */
  display: flex;                 /* Layout flexbox para disposición horizontal */
  align-items: center;           /* Centra verticalmente todos los elementos del menú */
  gap: 14px;                     /* Espacio entre cada elemento del menú */
  margin: 0;                     /* Sin margen externo */
  padding: 0;                    /* Sin relleno interno */
  flex-wrap: nowrap;             /* Evita que los elementos se ajusten en múltiples líneas */
  white-space: nowrap;           /* Evita que el texto de los elementos se parta automáticamente */
}

/* Contenedor individual de cada elemento del menú (li) */
.nav-item {
  position: relative;            /* Posicionamiento relativo para servir de referencia a dropdowns posicionados absolutamente */
}

/* ================== ENLACES DE NAVEGACIÓN ================== */

/* Estilo base para todos los enlaces del menú principal */
.nav-link {
  display: inline-flex;          /* Layout flexbox en línea para alinear icono + texto */
  align-items: center;           /* Centra verticalmente el icono y el texto */
  gap: 8px;                      /* Espacio entre el icono y el texto */
  text-decoration: none;         /* Elimina el subrayado por defecto de los enlaces */
  font-weight: 700;              /* Peso de fuente en negrita para jerarquía visual */
  color: #ffffff;                   /* Texto blanco para contrastar con el fondo púrpura */
  padding: 8px 10px;             /* Relleno interno que crea área clicable cómoda */
  border-radius: 10px;           /* Esquinas redondeadas del área clicable */
  opacity: .98;                  /* Ligera transparencia para efecto visual sutil */
}

/* Asegura que el texto dentro de los enlaces no se parta en múltiples líneas */
.nav-link span {
  white-space: nowrap;           /* Evita que textos como "Quiénes somos" se partan */
}

/* Estado hover (al pasar el ratón) para los enlaces del menú */
.nav-link:hover {
  background: rgba(255,255,255,.10); /* Fondo blanco semitransparente para feedback visual */
}

/* Estilo especial para el enlace Call-to-Action "Empieza gratis" */
.nav-link.cta {
  color: #111;                   /* Texto oscuro para contrastar con el fondo colorido */
  background: linear-gradient(45deg, var(--brand-1), var(--brand-2)); /* Gradiente usando colores de marca */
  border-radius: 999px;          /* Forma completamente redondeada (píldora) */
  padding: .55rem .9rem;         /* Relleno más generoso para destacar visualmente */
}

/* ================== ESTADO ACTIVO DE NAVEGACIÓN ================== */

/* Estilo para el enlace que corresponde a la página actual */
.nav-link.is-active {
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.46); /* Subrayado interno blanco para indicar página activa */
  background: rgba(255, 255, 255, 0.303); /* Fondo ligeramente resaltado */
  border-radius: 10px;           /* Mantiene las esquinas redondeadas consistentes */
}

/* Variación del estado activo cuando la barra no está sobre el hero */
.top-nav:not(.over-hero) .nav-link.is-active {
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0); /* Subrayado oscuro para fondos claros */
  background: var();    /* Fondo gris claro definido en variables */

}

/* ================== MENÚS DESPLEGABLES (DROPDOWNS) ================== */

/* Contenedor del menú desplegable que aparece bajo elementos como "Servicios" y "Canales" */
.dropdown {
  position: absolute;            /* Posicionamiento absoluto respecto al .nav-item padre */
  top: calc(100% + 6px);         /* Posicionado justo debajo del elemento padre con espacio de 6px */
  left: 0;                       /* Alineado al borde izquierdo del elemento padre */
  min-width: 260px;              /* Ancho mínimo para asegurar legibilidad del contenido */
  border-radius: 12px;           /* Esquinas redondeadas para consistencia visual */
  padding: 8px;                  /* Relleno interno del contenedor */
  display: none;                 /* Oculto por defecto (se muestra con hover/focus) */
  z-index: 999;                  /* Índice Z alto para aparecer por encima del contenido */
  background: rgba(0,0,0,.92);   /* Fondo oscuro semitransparente */
  border: 1px solid rgba(255,255,255,.18); /* Borde blanco sutil para definición */
  box-shadow: 0 10px 30px rgba(0,0,0,.18); /* Sombra para efecto de elevación */
}

/* Muestra el dropdown cuando se hace hover sobre el elemento del menú padre */
.nav-item:hover .dropdown {
  display: block;                /* Cambia de oculto a visible */
}

/* Estilo para los enlaces dentro del menú desplegable */
.dropdown a {
  display: flex;                 /* Layout flexbox para alinear icono + texto */
  align-items: center;           /* Centra verticalmente el contenido */
  gap: 10px;                     /* Espacio entre icono y texto */
  padding: 8px 10px;             /* Relleno interno para área clicable cómoda */
  text-decoration: none;         /* Sin subrayado */
  border-radius: 8px;            /* Esquinas redondeadas más pequeñas que el contenedor */
  color: #fff;                   /* Texto blanco para contrastar con fondo oscuro */
}

/* Estado hover para los enlaces dentro del dropdown */
.dropdown a:hover {
  background: rgba(255,255,255,.08); /* Fondo blanco muy sutil para feedback visual */
}

/* Estilo para enlaces deshabilitados en el dropdown */
.dropdown a.is-disabled {
  opacity: .55;                  /* Reduce la opacidad para indicar estado deshabilitado */
  pointer-events: none;          /* Desactiva todos los eventos del ratón */
  cursor: default;               /* Muestra cursor normal en lugar de puntero */
}

/* Badge "Próximamente" que aparece junto a elementos deshabilitados */
.badge.soon {
  display: inline-block;         /* Elemento en línea que permite control de dimensiones */
  margin-left: .4rem;            /* Separación del texto principal del enlace */
  font-size: .72rem;             /* Tamaño de fuente pequeño para badge */
  line-height: 1;                /* Altura de línea compacta */
  padding: .2rem .4rem;          /* Relleno mínimo para forma de píldora */
  border-radius: 999px;          /* Forma completamente redondeada */
  background: var(--brand-2);    /* Fondo ámbar de la marca */
  color: #111;                   /* Texto oscuro para contraste con fondo ámbar */
  font-weight: 800;              /* Peso extra fuerte para máxima visibilidad */
}

/* ================== NAVEGACIÓN MÓVIL ================== */

/* Botón hamburguesa para abrir/cerrar el menú en dispositivos móviles */
.mobile-menu-btn {
  display: none;                 /* Oculto por defecto en desktop */
  background: transparent;       /* Fondo transparente */
  border: 0;                     /* Sin borde */
  color: #fff;                   /* Icono blanco */
  font-size: 1.35rem;            /* Tamaño del icono hamburguesa */
}

/* Media query para dispositivos móviles y tablets */
@media (max-width: 900px) {
  /* Muestra el botón hamburguesa en pantallas pequeñas */
  .mobile-menu-btn {
    display: inline-flex;        /* Cambia a visible con layout flexbox */
    align-items: center;         /* Centra el icono verticalmente */
    justify-content: center;     /* Centra el icono horizontalmente */
    width: 42px;                 /* Ancho fijo para área clicable cómoda */
    height: 42px;                /* Alto fijo cuadrado */
  }

  /* Convierte el menú horizontal en panel desplegable vertical en móvil */
  .nav-menu {
    display: none;               /* Oculto por defecto en móvil */
    flex-direction: column;      /* Cambia de horizontal a vertical */
    align-items: stretch;        /* Los elementos ocupan ancho completo */
    gap: 8px;                    /* Espacio menor entre elementos en móvil */
    position: fixed;             /* Posición fija para panel desplegable */
    top: var(--nav-h);           /* Justo debajo de la barra de navegación */
    left: 0;                     /* Borde izquierdo */
    right: 0;                    /* Borde derecho (ancho completo) */
    background: var(--nav-purple); /* Mismo fondo púrpura que la barra */
    border-bottom: 1px solid var(--nav-line); /* Línea inferior del panel */
    padding: 12px 16px 16px;     /* Relleno interno del panel móvil */
    z-index: 999;                /* Índice Z alto para aparecer sobre contenido */
    white-space: normal;         /* Permite partir texto en móvil para legibilidad */
  }

  /* Muestra el menú cuando la barra tiene clase 'open' (controlado por JavaScript) */
  .top-nav.open .nav-menu {
    display: flex;               /* Hace visible el panel móvil */
  }

  /* Ajusta los dropdowns para móvil */
  .dropdown {
    position: static;            /* Cambia de absoluto a estático */
    display: none;               /* Oculto por defecto */
    border: 0;                   /* Sin borde en móvil */
    background: transparent;     /* Fondo transparente */
    padding: 4px 6px;            /* Relleno reducido */
    box-shadow: none;            /* Sin sombra en móvil */
  }

  /* Muestra dropdown en móvil cuando el nav-item tiene clase 'open' */
  .nav-item.open .dropdown {
    display: block;              /* Hace visible el dropdown en móvil */
  }
}

/* ================== REDES SOCIALES EN LA NAVEGACIÓN ================== */

/* Contenedor de iconos de redes sociales en la barra de navegación */
.nav-social {
  display: flex;                 /* Layout flexbox horizontal */
  align-items: center;           /* Centra verticalmente los iconos */
  gap: 10px;                     /* Separación entre iconos */
  margin-left: 12px;             /* Espacio respecto al último elemento del menú */
  white-space: nowrap;           /* Evita saltos de línea inesperados */
}

/* Estilo individual de cada icono de red social */
.nav-social a {
  width: 36px;                   /* Ancho fijo del botón circular */
  height: 36px;                  /* Alto fijo del botón circular */
  display: inline-flex;          /* Layout flexbox para centrar el icono */
  align-items: center;           /* Centra verticalmente el icono */
  justify-content: center;       /* Centra horizontalmente el icono */
  border-radius: 50%;            /* Forma circular perfecta */
  border: 1px solid rgba(255,255,255,.35); /* Borde blanco sutil */
  color: #fff;                   /* Iconos blancos */
  text-decoration: none;         /* Sin subrayado */
  transition: transform .15s ease, background .15s ease, border-color .15s ease; /* Transiciones suaves */
  background: transparent;       /* Fondo transparente inicialmente */
}

/* Estado hover para los iconos de redes sociales */
.nav-social a:hover {
  background: rgba(255,255,255,.12); /* Fondo blanco sutil al hacer hover */
  border-color: rgba(255,255,255,.6); /* Borde más visible */
  transform: translateY(-1px);   /* Micro elevación para feedback táctil */
}

/* Tamaño del icono Font Awesome dentro del botón */
.nav-social i {
  font-size: 1rem;               /* Tamaño del icono */
  line-height: 1;                /* Altura de línea compacta */
}

/* Oculta las redes sociales en móvil para evitar saturación */
@media (max-width: 900px) {
  .nav-social {
    display: none;               /* Oculta completamente en dispositivos móviles */
  }
}

/* ================== HERO BANNER PRINCIPAL ================== */

/* Contenedor principal del banner hero con imagen de fondo */
.hero-banner {
  margin-top: var();      /* Compensa la altura de la barra fija (52px) */
  position: relative;            /* Posicionamiento relativo para overlay absoluto */
  width: 100%;                   /* Ancho completo */
  min-height: 360px;             /* Altura mínima aumentada para dar espacio al H1 grande */
  background-image: url("/assets/images/banner-luenamusic.jpg"); /* Imagen de fondo */
  background-size: cover;        /* La imagen cubre toda el área sin distorsión */
  background-position: center;   /* Centra la imagen */
  border-bottom: 1px solid var(--border); /* Línea inferior sutil */
}

/* Overlay oscuro sobre la imagen de fondo para mejorar legibilidad del texto */
.hero-overlay {
  position: absolute;            /* Posicionamiento absoluto sobre la imagen */
  inset: 0;                      /* Cubre toda el área del hero (top:0, right:0, bottom:0, left:0) */
  background: rgba(0,0,0,.40);   /* Negro semitransparente (40% opacidad) */
}

/* Contenedor del contenido del hero */
.hero-content {
  position: relative;            /* Por encima del overlay */
  display: flex;                 /* Layout flexbox para centrar contenido */
  align-items: center;           /* Centra verticalmente */
  justify-content: center;       /* Centra horizontalmente */
  min-height: 360px;             /* Altura mínima coincidente con el contenedor */
  text-align: center;            /* Alineación centrada del texto */
}

/* Caja contenedora del título principal con fondo translúcido */
.hero-title-box {
  display: inline-block;         /* Elemento en línea que se ajusta al contenido */
  background: rgba(0,0,0,.40);   /* Fondo negro semitransparente */
  border: 1px solid rgba(255,255,255,.15); /* Borde blanco muy sutil */
  padding: 14px 18px;            /* Relleno interno para respiración */
  border-radius: 14px;           /* Esquinas redondeadas */
  backdrop-filter: saturate(120%) blur(1.5px); /* Filtro para mejorar legibilidad */
}

/* Contenedor del título principal con layout grid */
.main-title {
  display: grid;                 /* Layout grid para apilar líneas del título */
  gap: .25rem;                   /* Espacio mínimo entre líneas */
  margin: 0;                     /* Sin margen externo */
  line-height: 1;                /* Altura de línea compacta */
}

/* ================== ESTILO DEL TÍTULO PRINCIPAL ================== */

/* Línea superior del H1 "Luena Music" con gradiente animado */
.h1-top {
  /* Tamaño responsivo: más grande en desktop, se reduce en móvil */
  font-size: clamp(2.6rem, 8.5vw, 5.6rem); /* Mínimo 2.6rem, máximo 5.6rem, escalable */
  line-height: .92;              /* Altura de línea compacta para evitar saltos visuales */
  white-space: nowrap;           /* Evita que "Luena Music" se parta en dos líneas */
  
  /* Configuración del gradiente de texto */
  color: #715831;                /* Color de fallback para navegadores muy antiguos */
  background-image: var(--accent-grad); /* Aplica el gradiente dorado definido en variables */
  background-size: 200% 200%;    /* Tamaño del gradiente ampliado para animación */
  background-repeat: no-repeat;   /* Sin repetición del gradiente */
  -webkit-background-clip: text;  /* Recorta el fondo con la forma del texto (WebKit) */
  background-clip: text;          /* Recorte estándar */
  -webkit-text-fill-color: transparent; /* Hace transparente el relleno para mostrar gradiente */
  color: transparent;             /* Texto transparente como fallback */
  
  /* Animación del gradiente */
  animation: hueSlide 6s ease-in-out infinite; /* Animación continua de 6 segundos */
}

/* Línea inferior del H1 (claim/descripción) */
.h1-strap {
  font-weight: 700;              /* Peso en negrita */
  font-size: clamp(1rem, 2.4vw, 1.4rem); /* Tamaño responsivo más pequeño que la línea superior */
  color: #f4f6f8;                /* Color claro para contrastar con fondo oscuro */
}

/* Animación del gradiente en el título */
@keyframes hueSlide {
  0%, 100% {
    background-position: 0% 50%; /* Posición inicial y final */
  }
  50% {
    background-position: 100% 50%; /* Posición intermedia (desplazamiento) */
  }
}

/* Permite partir el texto en pantallas muy pequeñas si es necesario */
@media (max-width: 360px) {
  .h1-top {
    white-space: normal;         /* Permite salto de línea en pantallas muy pequeñas */
  }
}

/* ================== BANDAS DE SECCIÓN PRINCIPAL ================== */

/* Estilo base para todas las bandas/secciones del sitio */
.band {
  position: relative;            /* Posicionamiento relativo para pseudoelementos */
  padding: 28px 0;               /* Relleno vertical para respiración */
  border-top: 1px solid var(--border); /* Línea superior sutil */
  border-bottom: 1px solid var(--border); /* Línea inferior sutil */
}

/* Pseudoelemento que crea efecto de profundidad en la parte superior */
.band::before {
  content: '';                   /* Contenido vacío requerido */
  position: absolute;            /* Posicionamiento absoluto respecto a .band */
  top: 0;                        /* En la parte superior */
  left: 0;                       /* Borde izquierdo */
  right: 0;                      /* Borde derecho (ancho completo) */
  height: 12px;                  /* Altura del efecto */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04); /* Sombra interior sutil */
}

/* Banda con fondo blanco (usada para "Canales") */
.band--white {
  background: var(--band-white); /* Fondo blanco definido en variables */
}

/* Pseudoelemento específico para bandas blancas */
.band--white::before {
  background: #ffffff;           /* Fondo blanco */
  border-bottom: 1px solid #e9e9e9; /* Línea inferior gris muy clara */
}

/* Banda con fondo marfil (usada para "Servicios") */
.band--ivory {
  background: var(--band-ivory); /* Fondo marfil definido en variables */
}

/* Pseudoelemento específico para bandas marfil */
.band--ivory::before {
  background: #f1eadf;            /* Fondo marfil más oscuro para el efecto */
  border-bottom: 1px solid #e3ded5; /* Línea inferior acorde al tono marfil */
}

/* ================== TÍTULOS DE SECCIÓN ================== */

/* Título principal de cada sección (H2) */
.section-title {
  font-family: 'Montserrat', sans-serif; /* Fuente Montserrat para títulos */
  font-weight: 800;              /* Peso extra fuerte para máxima jerarquía */
  font-size: clamp(1.4rem, 2.5vw, 2rem); /* Tamaño responsivo del título */
  margin: 18px 0 8px;             /* Márgenes: superior, lateral, inferior */
  color: #111;                   /* Color oscuro para contraste */
  display: flex;                 /* Layout flexbox para alinear icono + texto */
  align-items: center;           /* Centra verticalmente icono y texto */
  gap: .5rem;                    /* Espacio entre icono y texto */
  justify-content: center;       /* Centra horizontalmente todo el título */
}

/* Subtítulo de sección (H2 secundario) */
.section-title--sub {
  font-size: clamp(.95rem, 1.6vw, 1.1rem); /* Tamaño más pequeño que el título principal */
  font-weight: 700;              /* Peso en negrita pero menor que el principal */
  color: var(--text-dim);        /* Color atenuado definido en variables */
  text-align: center;            /* Alineación centrada */
  margin-top: -4px;              /* Margen negativo para pegar ópticamente al H2 principal */
}

/* ================== SISTEMA DE GRID Y TARJETAS ================== */

/* Grid de 3 columnas para tarjetas de canales y servicios */
.grid-3 {
  display: grid;                 /* Layout CSS Grid */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columnas iguales */
  gap: 1rem;                     /* Espacio entre elementos del grid */
}

/* Responsive: 2 columnas en tablets */
@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columnas en pantallas medianas */
  }
}

/* Responsive: 1 columna en móviles */
@media (max-width: 640px) {
  .grid-3 {
    grid-template-columns: 1fr;   /* 1 columna en pantallas pequeñas */
  }
}

/* ================== TARJETAS DE CANALES Y SERVICIOS ================== */

/* Estilo base para todas las tarjetas (canales y servicios) */
.card {
  position: relative;            /* Posicionamiento relativo para elementos absolutos internos */
  padding: 1rem;                 /* Relleno interno uniforme */
  border: 1px solid var(--border); /* Borde sutil definido en variables */
  background: #fff;              /* Fondo blanco */
  border-radius: 16px;           /* Esquinas redondeadas */
  text-decoration: none;         /* Sin subrayado (para tarjetas clicables) */
  color: #111;                   /* Color de texto oscuro */
  transition: transform .18s, box-shadow .18s, border-color .18s, background .18s; /* Transiciones suaves */
  will-change: transform, box-shadow; /* Optimización para animaciones */
  display: block;                /* Elemento de bloque para ocupar espacio completo */
}

/* Cinta decorativa superior de las tarjetas */
.card .ribbon {
  content: '';                   /* Contenido para pseudoelemento */
  position: absolute;            /* Posicionamiento absoluto respecto a la tarjeta */
  inset: 0 0 auto 0;             /* Cubre ancho completo, solo en la parte superior */
  height: 8px;                   /* Altura de la cinta */
  border-radius: 16px 16px 0 0;  /* Esquinas redondeadas solo arriba */
}

/* Cinta específica para tarjetas de canales */
.card.channel .ribbon {
  background: #ffffff;           /* Fondo blanco */
  border-bottom: 1px solid #e9e9e9; /* Línea inferior gris clara */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04); /* Sombra interior sutil */
}

/* Cinta específica para tarjetas de servicios */
.card.service .ribbon {
  background: #f0f2f5;           /* Fondo gris claro */
  border-bottom: 1px solid #e3e6ea; /* Línea inferior gris */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04); /* Sombra interior sutil */
}

/* Estado hover para todas las tarjetas */
.card:hover {
  transform: translateY(-2px);   /* Elevación sutil al hacer hover */
  box-shadow: var(--shadow);     /* Sombra definida en variables */
  border-color: rgba(17,17,17,.16); /* Borde más visible */
}

/* Tarjetas deshabilitadas (próximamente) */
.card.is-disabled {
  cursor: default;               /* Cursor normal en lugar de puntero */
  opacity: .8;                   /* Opacidad reducida para indicar estado deshabilitado */
}

/* Badge de estado en la esquina superior derecha */
.status-badge {
  position: absolute;            /* Posicionamiento absoluto respecto a la tarjeta */
  top: 10px;                     /* Separación del borde superior */
  right: 10px;                   /* Separación del borde derecho */
  font-size: .72rem;             /* Tamaño de fuente pequeño */
  font-weight: 800;              /* Peso extra fuerte */
  padding: .25rem .5rem;         /* Relleno del badge */
  border-radius: 999px;          /* Forma completamente redondeada */
  background: var(--brand-2);    /* Fondo ámbar por defecto */
  color: #111;                   /* Texto oscuro */
}

/* Badge verde para elementos disponibles */
.status-active {
  background: var(--ok-2);       /* Fondo verde definido en variables */
}

/* Icono principal de cada tarjeta */
.card-icon {
  font-size: 2rem;               /* Tamaño grande del icono */
  margin: .25rem 0 .35rem;       /* Márgenes: superior, lateral, inferior */
  opacity: .95;                  /* Ligera transparencia */
}

/* Título de cada tarjeta (H3) */
.card-title {
  font-size: 1.1rem;             /* Tamaño del título */
  font-weight: 800;              /* Peso extra fuerte */
  margin-bottom: .15rem;         /* Margen inferior mínimo */
  color: #111;                   /* Color oscuro */
}

/* Descripción de cada tarjeta */
.card-desc {
  color: var(--text-dim);        /* Color atenuado definido en variables */
  font-size: .95rem;             /* Tamaño ligeramente menor que el texto normal */
}

/* ================== CINTAS DE APRENDIZAJE MUSICAL ================== */

/* Contenedor grid para las dos cintas de aprendizaje */
.info-banners {
  display: grid;                 /* Layout CSS Grid */
  grid-template-columns: 1fr 1fr; /* Dos columnas iguales en desktop */
  gap: 16px;                     /* Separación entre cintas */
  margin-top: .8rem;             /* Espacio respecto al título de la sección */
}

/* Estilo base para cada cinta de información */
.info-banner {
  display: flex;                 /* Layout flexbox vertical */
  flex-direction: column;        /* Apila título, chips y CTA verticalmente */
  justify-content: center;       /* Centra verticalmente el contenido */
  gap: 10px;                     /* Separación interna entre bloques */
  padding: 18px 20px;            /* Relleno cómodo para clic táctil */
  border: 1px solid var(--border); /* Borde sutil coherente con cards */
  border-radius: 16px;           /* Esquinas suaves para consistencia UI */
  background: #fff;              /* Fondo blanco para máxima legibilidad */
  color: #111;                   /* Texto oscuro para contraste */
  text-decoration: none;         /* Sin subrayado en todo el bloque clicable */
  box-shadow: var(--shadow-soft, 0 1px 2px rgba(0,0,0,.05)); /* Sombra ligera opcional */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; /* Animaciones suaves */
}

/* Estado hover para las cintas de información */
.info-banner:hover {
  transform: translateY(-1px);   /* Elevación sutil */
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.08)); /* Sombra más marcada */
  border-color: rgba(17,17,17,.16); /* Borde un poco más visible */
  background: #f9fafb;           /* Fondo gris muy claro en hover */
}

/* Estado de foco para accesibilidad */
.info-banner:focus-visible {
  outline: 3px solid rgba(122,60,255,.35); /* Anillo púrpura acorde al branding */
  outline-offset: 2px;           /* Separación del borde */
}

/* Título de cada cinta */
.info-banner__title {
  display: flex;                 /* Layout flexbox para icono + texto */
  align-items: center;           /* Centra verticalmente con el icono */
  gap: 10px;                     /* Separación icono-texto */
  font-weight: 800;              /* Jerarquía fuerte tipo botón/heading */
  font-size: clamp(1rem, 2.2vw, 1.25rem); /* Escala fluida: móvil→desktop */
}

/* Icono dentro del título de la cinta */
.info-banner__title i {
  font-size: 1.2em;              /* Un poco mayor que el texto */
}

/* Lista de chips/beneficios */
.info-banner__chips {
  display: flex;                 /* Disposición horizontal */
  flex-wrap: wrap;               /* Permite salto de línea si no caben */
  gap: 8px;                      /* Separación entre chips */
  margin: 0;                     /* Sin margen (reseteo de lista) */
  padding: 0;                    /* Sin padding (reseteo de lista) */
  list-style: none;              /* Sin viñetas */
}

/* Estilo individual de cada chip */
.chip {
  display: inline-flex;          /* Contenido centrado verticalmente */
  align-items: center;           /* Centrado vertical */
  padding: 6px 10px;             /* Tamaño de pastilla legible */
  border-radius: 999px;          /* Forma de píldora */
  border: 1px solid var(--border); /* Borde sutil coherente */
  background: var(--panel-1, #fff); /* Fondo claro */
  color: #333;                   /* Texto legible */
  font-weight: 700;              /* Énfasis tipo etiqueta */
  font-size: .92rem;             /* Un poco más pequeño que el título */
}

/* Botón CTA dentro de la cinta */
.info-banner__cta {
  align-self: flex-start;        /* Alineado a la izquierda dentro del banner */
  margin-top: 4px;               /* Pequeña separación respecto a los chips */
  padding: 8px 12px;             /* Área clicable adecuada */
  border-radius: 10px;           /* Esquinas suaves, coherentes */
  background: rgba(122,60,255,.12); /* Fondo púrpura muy suave (branding) */
  color: #5b21b6;                /* Texto púrpura más oscuro para contraste */
  font-weight: 800;              /* Fuerte para parecer botón */
  border: 1px solid rgba(122,60,255,.25); /* Contorno acorde al color de marca */
}

/* Variante principal para la cinta de clases online */
.info-banner--primary {
  border-color: rgba(122,60,255,.35); /* Borde más presente (branding) */
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%); /* Fondo muy sutil con tinte marca */
}

/* Responsive para cintas de aprendizaje */
@media (max-width: 900px) {
  .info-banners {
    grid-template-columns: 1fr;   /* Una columna en pantallas estrechas */
  }
  
  .info-banner {
    padding: 16px 16px;           /* Relleno ligeramente más compacto en móvil */
  }
}

/* ================== COLORES ESPECÍFICOS DE SECCIONES ================== */

/* Sección de canales con fondo específico */
#canales.band {
  background: var(--panel-2);    /* Fondo marfil distinto del blanco de 'Aprendizaje' */
}
#aprendizaje.band { background: var(--panel-3) !important; } /* Aprendizaje musical */
#servicios.band   { background: var(--panel-1) !important; } /* Servicios profesionales (blanco) */

/* Sección de aprendizaje (contenido) con color específico */
/*#contenido.band {
  background: var(--panel-3);    /* Aplica el tercer panel (azul claro) */
/*}

/* ================== CALL TO ACTION Y BOTONES ================== */

/* Sección final de llamada a la acción */
.cta-final {
  text-align: center;            /* Alineación centrada */
  margin: 2rem 0 1rem;           /* Márgenes: superior, lateral, inferior */
}

/* Botón principal de llamada a la acción */
.btn-cta {
  display: inline-block;         /* Elemento en línea con dimensiones controlables */
  padding: .7rem 1.1rem;         /* Relleno para área clicable cómoda */
  border-radius: 999px;          /* Forma completamente redondeada */
  background: linear-gradient(45deg, var(--brand-1), var(--brand-2)); /* Gradiente con colores de marca */
  color: #111;                   /* Texto oscuro para contraste con gradiente */
  font-weight: 800;              /* Peso extra fuerte */
  text-decoration: none;         /* Sin subrayado */
}

/* ================== CINTAS DE RECURSOS/INFORMACIÓN ================== */

/* Contenedor de pills informativos */
.info-ribbons {
  display: flex;                 /* Layout flexbox horizontal */
  flex-wrap: wrap;               /* Permite salto de línea si no caben */
  gap: .6rem;                    /* Separación entre pills */
  justify-content: center;       /* Centra horizontalmente */
  margin-top: .6rem;             /* Espacio respecto al contenido superior */
}

/* Estilo individual de cada pill informativo */
.info-pill {
  display: inline-flex;          /* Layout flexbox para icono + texto */
  align-items: center;           /* Centra verticalmente */
  gap: .5rem;                    /* Espacio entre icono y texto */
  padding: .55rem .9rem;         /* Relleno del pill */
  border-radius: 999px;          /* Forma completamente redondeada */
  border: 1px solid var(--border); /* Borde sutil */
  background: #fff;              /* Fondo blanco */
  color: #111;                   /* Texto oscuro */
  text-decoration: none;         /* Sin subrayado */
  font-weight: 700;              /* Peso en negrita */
  white-space: nowrap;           /* Evita saltos de línea */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; /* Transiciones suaves */
}

/* Icono dentro del pill */
.info-pill i {
  font-size: .95rem;             /* Tamaño del icono */
  opacity: .9;                   /* Ligera transparencia */
}

/* Estado hover para pills informativos */
.info-pill:hover {
  transform: translateY(-1px);   /* Elevación sutil */
  box-shadow: var(--shadow);     /* Sombra definida en variables */
  border-color: rgba(17,17,17,.16); /* Borde más visible */
  background: #f9fafb;           /* Fondo gris muy claro */
}

/* Badge suave para pills */
.badge-soft {
  margin-left: .45rem;           /* Separación del texto principal */
  font-size: .72rem;             /* Tamaño pequeño */
  line-height: 1;                /* Altura de línea compacta */
  font-weight: 800;              /* Peso extra fuerte */
  padding: .2rem .4rem;          /* Relleno mínimo */
  border-radius: 999px;          /* Forma redondeada */
  background: var(--panel-2);    /* Fondo gris claro */
  color: #555;                   /* Texto gris oscuro */
}

/* ================== BANDA DE NEWSLETTER/LEAD MAGNET ================== */

/* Banda específica para captura de leads */
.lead-band {
  background: linear-gradient(180deg, #f7f3eb 0%, #ffffff 100%); /* Gradiente marfil→blanco suave */
}

/* Contenedor grid para copy + formulario */
.lead-wrap {
  display: grid;                 /* Layout CSS Grid */
  grid-template-columns: 1fr auto; /* Texto ocupa espacio restante, formulario se ajusta al contenido */
  gap: 1rem;                     /* Separación entre columnas */
  align-items: center;           /* Centra verticalmente ambas columnas */
}

/* Sección del copy/texto */
.lead-copy {
  text-align: left;              /* Alineación izquierda del texto */
}

/* Título del lead magnet */
.lead-title {
  font-family: 'Montserrat', sans-serif; /* Fuente Montserrat para títulos */
  font-weight: 800;              /* Peso extra fuerte */
  color: #111;                   /* Color oscuro */
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); /* Tamaño responsivo */
  margin-bottom: .2rem;          /* Margen inferior mínimo */
}

/* Subtítulo del lead magnet */
.lead-sub {
  color: var(--text-dim);        /* Color atenuado */
  font-size: .98rem;             /* Tamaño ligeramente menor */
}

/* Formulario de suscripción */
.lead-form {
  display: flex;                 /* Layout flexbox */
  align-items: center;           /* Centra verticalmente */
  gap: .6rem;                    /* Separación entre elementos */
  flex-wrap: wrap;               /* Permite salto de línea si es necesario */
  justify-content: flex-end;     /* Alinea a la derecha */
  max-width: 560px;              /* Ancho máximo del formulario */
}

/* Campo de email del formulario */
.lead-form input[type="email"] {
  height: 44px;                  /* Altura fija */
  padding: 0 .9rem;              /* Relleno horizontal */
  border-radius: 999px;          /* Forma redondeada */
  border: 1px solid var(--border); /* Borde sutil */
  min-width: 260px;              /* Ancho mínimo */
  outline: none;                 /* Sin outline por defecto */
}

/* Botón CTA del formulario */
.lead-form .btn-cta {
  height: 44px;                  /* Altura coincidente con el input */
  display: inline-flex;          /* Layout flexbox */
  align-items: center;           /* Centra verticalmente */
  justify-content: center;       /* Centra horizontalmente */
  padding: 0 1rem;               /* Relleno horizontal */
}

/* Texto legal del formulario */
.lead-legal {
  display: block;                /* Elemento de bloque */
  width: 100%;                   /* Ancho completo */
  color: var(--text-dim);        /* Color atenuado */
  font-size: .8rem;              /* Tamaño pequeño */
  margin-top: .25rem;            /* Margen superior mínimo */
}

/* Enlaces en el texto legal */
.lead-legal a {
  color: inherit;                /* Hereda el color del padre */
  text-decoration: underline;    /* Subrayado para indicar enlace */
}

/* Feedback del formulario */
.lead-feedback {
  font-size: .9rem;              /* Tamaño ligeramente menor */
  margin-top: .2rem;             /* Margen superior mínimo */
}

/* Feedback positivo */
.lead-feedback.ok {
  color: var(--ok-1);            /* Color verde definido en variables */
}

/* Feedback de error */
.lead-feedback.err {
  color: #c0392b;                /* Color rojo para errores */
}

/* Responsive para banda de newsletter */
@media (max-width: 900px) {
  .lead-wrap {
    grid-template-columns: 1fr;   /* Una columna en móvil */
    text-align: center;           /* Texto centrado */
  }
  
  .lead-copy {
    text-align: center;           /* Texto centrado en móvil */
  }
  
  .lead-form {
    justify-content: center;      /* Formulario centrado en móvil */
  }
}

/* ================== FOOTER ================== */

/* Pie de página principal */
.footer {
  text-align: center;            /* Alineación centrada */
  padding: 1.5rem .75rem 2rem;   /* Relleno: superior, lateral, inferior */
  color: var(--text-dim);        /* Color atenuado */
  border-top: 1px solid var(--border); /* Línea superior sutil */
}

/* Información de contacto */
.footer .contact-info {
  margin-bottom: .6rem;          /* Margen inferior */
}

/* Enlaces de redes sociales en el footer */
.footer .social-links {
  display: flex;                 /* Layout flexbox horizontal */
  gap: .75rem;                   /* Separación entre iconos */
  justify-content: center;       /* Centra horizontalmente */
  margin: .6rem 0;               /* Margen vertical */
}

/* Estilo individual de cada icono de red social en el footer */
.footer .social-links a {
  width: 44px;                   /* Ancho del botón */
  height: 44px;                  /* Alto del botón */
  display: inline-flex;          /* Layout flexbox para centrar icono */
  align-items: center;           /* Centra verticalmente */
  justify-content: center;       /* Centra horizontalmente */
  border-radius: 50%;            /* Forma circular */
  background: #fff;              /* Fondo blanco */
  border: 1px solid var(--border); /* Borde sutil */
  color: #111;                   /* Icono oscuro */
  text-decoration: none;         /* Sin subrayado */
}

/* Texto de copyright */
.copy {
  display: block;                /* Elemento de bloque */
  margin-top: .6rem;             /* Margen superior */
}