/* ==========================================================================
   JG PM Academy — Hoja de estilos corporativa
   Identidad visual: azul profundo + azul secundario + turquesa acento
   Tipografías: Montserrat (títulos) / Inter (cuerpo)
   Estilo: red neuronal, nodos conectados, gradientes azul→turquesa
   ========================================================================== */

:root {
  --azul-profundo: #0A1F44;
  --azul-secundario: #1A4D8F;
  --turquesa: #00C2A8;
  --gris-claro: #F5F7FA;
  --blanco: #FFFFFF;

  --azul-profundo-80: rgba(10, 31, 68, 0.8);
  --azul-profundo-40: rgba(10, 31, 68, 0.4);
  --turquesa-15: rgba(0, 194, 168, 0.15);
  --turquesa-30: rgba(0, 194, 168, 0.3);
  --linea: rgba(10, 31, 68, 0.1);

  --gradiente-marca: linear-gradient(120deg, var(--azul-profundo) 0%, var(--azul-secundario) 55%, var(--turquesa) 100%);

  --fuente-titulo: 'Montserrat', 'Segoe UI', sans-serif;
  --fuente-cuerpo: 'Inter', 'Segoe UI', sans-serif;

  --radio: 14px;
  --radio-chico: 8px;
  --sombra: 0 20px 45px -25px rgba(10, 31, 68, 0.45);
  --contenedor: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  color: var(--azul-profundo);
  background: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--azul-profundo);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
h3 { font-size: 1.25rem; }

/* Nodo de marca antes de cada h3: refuerza el motivo de red neuronal conectada */
h3::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gradiente-marca);
  margin-right: 9px;
  vertical-align: middle;
  box-shadow: 0 0 0 4px var(--turquesa-15);
}

/* Acento en gradiente bajo los títulos de sección */
.seccion h2::after,
.ancho-intro h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--gradiente-marca);
  margin-top: 18px;
}
.texto-centrado h2::after,
.ancho-intro h2::after { margin-left: auto; margin-right: auto; }
.cta-franja h2::after { background: rgba(255, 255, 255, 0.6); }
.proximamente h2::after { content: none; }

p { margin: 0 0 1em; max-width: 62ch; }

a { color: var(--azul-secundario); text-decoration: none; }
a:hover { color: var(--turquesa); }

:focus-visible {
  outline: 3px solid var(--turquesa);
  outline-offset: 3px;
}

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin: 0 auto;
  padding: 0 24px;
}

.seccion { padding: 88px 0; }
.seccion--compacta { padding: 56px 0; }
.seccion--gris {
  background-color: var(--gris-claro);
  background-image: radial-gradient(circle, rgba(0, 194, 168, 0.16) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

.eyebrow-marca {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--turquesa);
  margin-bottom: 14px;
}

.overflow-x { overflow-x: auto; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.btn-primario {
  background: var(--gradiente-marca);
  color: var(--blanco);
  box-shadow: var(--sombra);
}
.btn-primario:hover { transform: translateY(-2px); color: var(--blanco); }
.btn-secundario {
  background: var(--turquesa-15);
  color: var(--azul-profundo);
  border-color: var(--turquesa);
}
.btn-secundario:hover {
  background: var(--gradiente-marca);
  border-color: transparent;
  color: var(--blanco);
  box-shadow: var(--sombra);
}
.btn-claro {
  background: var(--blanco);
  color: var(--azul-profundo);
}
.btn-claro:hover { background: var(--turquesa); color: var(--blanco); }

/* ---------- Cabecera / navegación ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}
.cabecera::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--gradiente-marca);
}
.cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
}
/* ---------- Logotipo de marca (imagen real, con alternancia oscuro/blanco) ---------- */
.logo-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-marca__imagen { height: 42px; width: auto; display: block; }

/* Portadas de libro como imagen real */
/* Distintivo "Disponible en Amazon" + fila de CTA de compra */
.cta-compra-libro { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.insignia-amazon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--azul-profundo);
  background: var(--gris-claro);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 7px 14px;
}
.insignia-amazon::before { content: "✓"; color: var(--turquesa); font-weight: 800; }

.tarjeta-libro__portada--imagen { padding: 0; overflow: hidden; }
.tarjeta-libro__portada--imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  box-shadow: none;
}

.nav-principal {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-principal a {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--azul-profundo);
}
.nav-principal a:hover { color: var(--turquesa); }
.nav-cta { display: flex; align-items: center; gap: 16px; }

/* Botón de hamburguesa: oculto en escritorio, visible solo en móvil */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  border-radius: var(--radio-chico);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--azul-profundo);
  flex: none;
}
.nav-toggle:hover { background: var(--turquesa-15); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; order: 3; }

  /* El menú se oculta por defecto en móvil, pero ahora SÍ hay un botón
     que lo abre (antes no existía ninguno, así que quedaba inalcanzable).
     Se despliega como panel debajo de la cabecera, con los mismos
     enlaces apilados en vertical. */
  .nav-principal {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
    padding: 8px 0;
  }
  .cabecera__barra { position: relative; flex-wrap: wrap; }
  .cabecera--menu-abierto .nav-principal { display: flex; }
  .nav-principal li { width: 100%; }
  .nav-principal a {
    display: block;
    padding: 14px 24px;
    border-bottom: 1px solid var(--linea);
  }

  /* Los botones secundarios del header (Mi Panel / Admin Panel) ya NO se
     ocultan sin más — antes esta regla los hacía invisibles en móvil sin
     ninguna alternativa. Ahora se quedan en la barra y, si no caben en
     una sola línea junto al botón principal, pasan a su propia línea. */
  .nav-cta { flex-wrap: wrap; justify-content: flex-end; order: 2; flex: 1 1 auto; }
}

/* ---------- Migas de pan ---------- */
.migas {
  font-size: 0.85rem;
  color: var(--azul-profundo);
  opacity: 0.65;
  padding: 18px 0 0;
}
.migas a { color: inherit; }
.migas a:hover { color: var(--turquesa); }

/* ---------- Hero con red neuronal ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradiente-marca);
  color: var(--blanco);
  padding: 120px 0 100px;
}
.hero__red {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
}
.hero__contenido {
  position: relative;
  z-index: 2;
  max-width: 700px;
}
.hero__contenido p { color: rgba(255, 255, 255, 0.85); font-size: 1.08rem; }
.hero .eyebrow-marca { color: var(--turquesa); }
.hero h1 { color: var(--blanco); }
.hero__acciones { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

.hero--pagina {
  padding: 84px 0 76px;
}
.hero--pagina p { max-width: 60ch; }

/* ---------- Tarjetas ---------- */
.rejilla {
  display: grid;
  gap: 28px;
}
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .rejilla--3, .rejilla--4, .rejilla--2 { grid-template-columns: 1fr; }
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 34px 30px 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tarjeta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradiente-marca);
}
.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra);
  border-color: var(--turquesa-30);
}
.tarjeta--nodo { background: linear-gradient(180deg, var(--turquesa-15) 0%, var(--blanco) 40%); }
.tarjeta h3 { margin-bottom: 10px; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta .eyebrow-marca {
  display: inline-block;
  font-size: 0.72rem;
  background: var(--gradiente-marca);
  color: var(--blanco);
  padding: 4px 12px;
  border-radius: 999px;
  margin-top: 6px;
}

.tarjeta-libro {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 26px;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.tarjeta-libro::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradiente-marca);
}
.tarjeta-libro__portada {
  aspect-ratio: 5 / 7;
  border-radius: var(--radio-chico);
  background: var(--gradiente-marca);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-size: 0.78rem;
  text-align: center;
  padding: 14px;
  box-shadow: var(--sombra);
}
@media (max-width: 620px) {
  .tarjeta-libro { grid-template-columns: 1fr; }
  .tarjeta-libro__portada { max-width: 160px; }
}

/* ---------- Bloque Próximamente ---------- */
.proximamente {
  border: 1.5px dashed var(--turquesa);
  border-radius: var(--radio);
  background: var(--gris-claro);
  padding: 56px 40px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.proximamente__etiqueta {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--blanco);
  background: var(--gradiente-marca);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.proximamente p { margin: 0 auto; }

/* ---------- Lista con nodos (checklist / pasos) ---------- */
.lista-nodos { list-style: none; margin: 0; padding: 0; }
.lista-nodos li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--linea);
}
.lista-nodos li:last-child { border-bottom: none; }
.lista-nodos__punto {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--turquesa);
  box-shadow: 0 0 0 4px var(--turquesa-15);
}

/* ---------- CTA de suscripción ---------- */
.cta-franja {
  background: var(--gradiente-marca);
  color: var(--blanco);
  border-radius: var(--radio);
  padding: 52px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-franja h2 { color: var(--blanco); margin-bottom: 8px; }
.cta-franja p { color: rgba(255, 255, 255, 0.85); margin-bottom: 0; }

.formulario-suscripcion {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.formulario-suscripcion input[type="email"] {
  padding: 14px 18px;
  border-radius: 999px;
  border: none;
  min-width: 240px;
  font-family: var(--fuente-cuerpo);
  font-size: 0.95rem;
}

/* ---------- Franja de estadísticas ---------- */
.estadisticas {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.estadistica strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  color: var(--turquesa);
}
.estadistica span {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
}
.estadisticas--oscuras .estadistica strong { color: var(--azul-profundo); }
.estadisticas--oscuras .estadistica span { color: var(--azul-profundo-80); }

/* ---------- Tabla comparativa / contenido ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}
th, td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linea);
  font-size: 0.95rem;
}
th { font-family: var(--fuente-titulo); color: var(--azul-secundario); }

/* ---------- Pie de página ---------- */
.pie {
  position: relative;
  background: var(--azul-profundo);
  color: rgba(255, 255, 255, 0.8);
  padding: 64px 0 28px;
}
.pie::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradiente-marca);
}
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 900px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pie__rejilla { grid-template-columns: 1fr; }
}
.pie h4 {
  color: var(--blanco);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.pie h4::before { content: none; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 10px; }
.pie a { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; }
.pie a:hover { color: var(--turquesa); }
.pie__marca p { color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; }
.pie__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}
.pie__base a { color: rgba(255, 255, 255, 0.55); }

/* ---------- Menú dinámico por rol ---------- */
.menu-button { min-width: 240px; justify-content: center; }

/* Alternancia de logo según el fondo del contenedor: .header-light usa
   el logo de tinta oscura (legible sobre fondos claros); .header-dark
   usa el logo de tinta blanca (legible sobre fondos oscuros). Ya con los
   dos archivos reales: assets/logo/logo-oscuro.png y logo-blanco.png. */
.header-light .logo-oscuro { display: block; }
.header-light .logo-blanco { display: none; }
.header-dark .logo-oscuro { display: none; }
.header-dark .logo-blanco { display: block; }

/* ---------- Blog y Podcast ---------- */
.tarjeta-articulo {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tarjeta-articulo::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gradiente-marca);
}
.tarjeta-articulo__fecha {
  font-family: var(--fuente-titulo); font-size: 0.78rem; font-weight: 700;
  color: var(--azul-secundario); opacity: 0.8;
}
.tarjeta-articulo--pendiente { opacity: 0.6; }

.insignia-podcast {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 0.72rem;
  color: var(--blanco); background: var(--gradiente-marca);
  padding: 4px 12px; border-radius: 999px; width: fit-content;
}

.contenido-articulo { max-width: 820px; margin-left: auto; margin-right: auto; font-size: 1.06rem; }
.contenido-articulo ~ .cta-articulo,
.contenido-articulo ~ p { max-width: 820px; margin-left: auto; margin-right: auto; }
.contenido-articulo p { max-width: none; }
.hero--pagina:has(+ .seccion .contenido-articulo) .hero__contenido { max-width: 868px; margin-left: auto; margin-right: auto; }
.contenido-articulo h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 2.2vw, 1.95rem); }
.contenido-articulo h3 { margin-top: 1.3em; }
.contenido-articulo ul, .contenido-articulo ol { margin: 0 0 1em; padding-left: 1.4em; }
.contenido-articulo li { margin-bottom: 0.4em; }
.contenido-articulo strong { color: var(--azul-profundo); }

.reproductor-embebido {
  position: relative; width: 100%; border-radius: var(--radio); overflow: hidden;
  background: var(--gris-claro); margin: 24px 0;
}
.reproductor-embebido--audio { height: 180px; }
.reproductor-embebido--video { aspect-ratio: 16 / 9; }
.reproductor-embebido iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cta-articulo {
  background: var(--gradiente-marca); color: var(--blanco);
  border-radius: var(--radio); padding: 36px; margin-top: 48px;
}
.cta-articulo h3 { color: var(--blanco); margin-bottom: 16px; }
.cta-articulo__enlaces { display: flex; flex-direction: column; gap: 10px; }
.cta-articulo__enlaces a { color: var(--blanco); font-family: var(--fuente-titulo); font-weight: 600; }
.cta-articulo__enlaces a:hover { color: var(--turquesa); }

/* ---------- Utilidades ---------- */
.texto-centrado { text-align: center; }
.texto-centrado p { margin-left: auto; margin-right: auto; }
.ancho-intro { max-width: 640px; margin: 0 auto 48px; }
.mb-0 { margin-bottom: 0; }