/*
 * ============================================================
 * LUMTUX 2.0 — SECTIONS (Light Edition)
 * Archivo: css/sections.css
 * Propósito: Estilos de secciones únicas de página principal
 *            y de la página de detalle de curso.
 * ============================================================
 */


/* ════════════════════════════════════════════════════════════
   HERO — fondo oscuro, texto blanco, minimalista
   ════════════════════════════════════════════════════════════ */

.hero {
  background: var(--color-bg-dark);          /* Único bloque oscuro del sitio */
  padding-top: calc(var(--nav-height) + var(--space-20));
  padding-bottom: var(--space-24);
  position: relative;
  overflow: hidden;
}

/* Textura de fondo: grid sutil de líneas */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Orbe de glow naranja — esquina superior derecha */
.hero__orb {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,82,35,0.18) 0%, transparent 65%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 740px;
}

/* Pill de estado */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-4);
  background: rgba(185,82,35,0.15);
  border: 1px solid rgba(185,82,35,0.3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #F0A070;                            /* Naranja claro sobre oscuro */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
  width: fit-content;
}

/* Punto pulsante en el pill */
.hero__pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #F0A070;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: var(--weight-black);
  color: var(--color-text-on-dark);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-6);
}

/* Palabra de acento en naranja quemado */
.hero__title em {
  font-style: normal;
  color: var(--color-accent-light);
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-on-dark-2);
  max-width: 54ch;
  line-height: var(--leading-normal);
  margin-bottom: var(--space-10);
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-16);
}

/* Línea divisora blanca sutil */
.hero__divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-bottom: var(--space-8);
}

/* Stats sobre fondo oscuro */
.hero__stats {
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════
   PARTNER STRIP — logos de alianzas
   ════════════════════════════════════════════════════════════ */

.partner-strip {
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-5);
}

.partner-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  justify-content: center;
}

.partner-strip__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

/* Separador entre label y logos */
.partner-strip__sep {
  width: 1px;
  height: 20px;
  background: var(--color-border-strong);
  flex-shrink: 0;
}

.partner-logo {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-gray-400);
  letter-spacing: -0.03em;
  transition: color var(--transition-fast);
}
.partner-logo:hover { color: var(--color-gray-600); }


/* ════════════════════════════════════════════════════════════
   COURSES SECTION
   ════════════════════════════════════════════════════════════ */

.courses-section {
  padding-block: var(--space-24);
}

.courses-toolbar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.courses-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.courses-count strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); }

.courses-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-20);
  color: var(--color-text-muted);
}


/* ════════════════════════════════════════════════════════════
   WHY SECTION — fondo gris muy claro
   ════════════════════════════════════════════════════════════ */

.why-section {
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-24);
}


/* ════════════════════════════════════════════════════════════
   ABOUT SECTION
   ════════════════════════════════════════════════════════════ */

.about-section { padding-block: var(--space-24); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* Panel derecho: recuadro de stats */
.about-stats-panel {
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.about-stat { display: flex; flex-direction: column; gap: 4px; }
.about-stat__number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
}
.about-stat__number span { color: var(--color-accent); }
.about-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ════════════════════════════════════════════════════════════
   CTA SECTION — franja naranja quemado
   ════════════════════════════════════════════════════════════ */

.cta-section {
  background: var(--color-accent);
  padding-block: var(--space-20);
}

.cta-section__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.cta-section__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--weight-black);
  color: #FFFFFF;
  letter-spacing: -0.03em;
  line-height: var(--leading-snug);
  max-width: 18ch;
}

.cta-section__sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.8);
  margin-top: var(--space-3);
  max-width: 40ch;
}

.cta-section__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Botón blanco sobre fondo naranja */
.btn--white {
  background: #FFFFFF;
  color: var(--color-accent);
  border-color: #FFFFFF;
  font-weight: var(--weight-bold);
}
.btn--white:hover {
  background: rgba(255,255,255,0.9);
  color: var(--color-accent-hover);
  border-color: rgba(255,255,255,0.9);
}


/* ════════════════════════════════════════════════════════════
   CURSO DETALLE — Página individual de certificación
   (course.html — basada en la estructura de CertiProf)
   ════════════════════════════════════════════════════════════ */

/* Breadcrumb de navegación */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  padding-top: calc(var(--nav-height) + var(--space-8));
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb__sep { color: var(--color-gray-300); }
.breadcrumb__current { color: var(--color-text-primary); font-weight: var(--weight-medium); }

/* Grid principal del detalle: 60% contenido / 40% sidebar */
.course-detail__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-16);
  align-items: start;
  margin-bottom: var(--space-16);
}
@media (max-width: 900px) {
  .course-detail__grid { grid-template-columns: 1fr; }
}

/* ── Columna izquierda: contenido principal ── */

.course-detail__badge-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin-bottom: var(--space-8);
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid var(--color-border);
}

/* Cuando hay logo real: muestra como cuadrado limpio */
.course-detail__badge-img--logo {
  border-radius: var(--radius-lg);
  background: #fff;
  border-color: var(--color-border);
  width: 200px;
  height: 200px;
}
.course-detail__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
}

/* Cuando no hay imagen real: placeholder con código */
.badge-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-6);
  line-height: 1.3;
}
.badge-placeholder__ring {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 3px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xl);
}

.course-detail__title {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}

.course-detail__intro {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-6);
  max-width: none;
}

/* Fila de metadatos: idiomas disponibles */
.course-detail__langs-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.course-detail__langs-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* Pastilla de idioma seleccionable */
.lang-pill {
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}
.lang-pill:hover, .lang-pill.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-bg);
}

/* ── TABS de contenido ── */
.course-tabs {
  border-bottom: 2px solid var(--color-border);
  display: flex;
  gap: 0;
  margin-bottom: var(--space-8);
}

.course-tab {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;              /* Superpone el borde del contenedor */
  cursor: pointer;
  background: none;
  border-top: none; border-left: none; border-right: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 11px;
}
.course-tab:hover { color: var(--color-text-primary); }
.course-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.course-tab-panel { display: none; }
.course-tab-panel.active { display: block; }

.course-tab-panel h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  letter-spacing: 0;
}

/* Listas dentro de paneles */
.course-tab-panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.course-tab-panel ul li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
}
/* Check icon */
.course-tab-panel ul li::before {
  content: '✓';
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Columna derecha: SIDEBAR de compra ── */

.course-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Franja superior de color de categoría */
.course-sidebar::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--sidebar-accent, var(--color-accent));
}

.course-sidebar__body { padding: var(--space-6); }

.course-sidebar__price {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-1);
}
.course-sidebar__price--free { color: var(--cat-iso); }

.course-sidebar__price-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Sección de selección de idioma en sidebar */
.course-sidebar__lang-section {
  margin-bottom: var(--space-5);
}
.course-sidebar__lang-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}
.course-sidebar__langs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Botones de acción en sidebar */
.course-sidebar__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.course-sidebar__actions .btn { width: 100%; justify-content: center; }

/* Lista de inclusiones */
.course-sidebar__includes {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
  margin-top: var(--space-2);
}
.course-sidebar__includes-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}
.course-sidebar__includes ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.course-sidebar__includes li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.course-sidebar__includes li span:first-child { font-size: 16px; }

/* ── Sección "¿Tienes un vale?" ── */
.voucher-section {
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  margin-bottom: var(--space-12);
}
.voucher-section__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.voucher-section__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  max-width: 40ch;
  margin-inline: auto;
}
.voucher-section__langs {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Sección alianzas estratégicas ── */
.alliances-section {
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border);
}
.alliances-section__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-6);
}
.alliances-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.alliance-logo {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-gray-400);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  letter-spacing: -0.02em;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.alliance-logo:hover { color: var(--color-gray-600); border-color: var(--color-gray-300); }

/* ── Cursos relacionados ── */
.related-section {
  padding-block: var(--space-16);
  border-top: 1px solid var(--color-border);
}
.related-section__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  letter-spacing: -0.02em;
}