/* ============================================================
   Josué Marketing — Estilos base y componentes
   Mobile-first. Componentes reutilizables sobre los design tokens.
   ============================================================ */

/* ── Reset moderno ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--c-texto);
  background: var(--c-fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { max-width: 100%; display: block; }
a { color: var(--c-violeta-oscuro); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--c-violeta); }
ul, ol { padding-left: 1.25rem; }

/* Foco visible por teclado (accesibilidad). */
:focus-visible {
  outline: 3px solid var(--c-azul);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Tipografía ────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.2; font-weight: var(--peso-bold); color: var(--c-texto); }
h1 { font-size: var(--t-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
p  { color: var(--c-texto-suave); }

.texto-gradiente {
  background: var(--grad-marca);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Layout ────────────────────────────────────────────────── */
.contenedor { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--e-4); }
.seccion { padding-block: var(--e-7); }
.seccion-suave { background: var(--c-fondo-suave); }
.centro-texto { text-align: center; }
.pila { display: flex; flex-direction: column; gap: var(--e-4); }

/* ── Botones ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  font-family: var(--f-display); font-weight: var(--peso-semi); font-size: var(--t-base);
  padding: 0.7rem 1.5rem; border-radius: var(--r-full); border: 2px solid transparent;
  cursor: pointer; transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
  line-height: 1; text-align: center; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--grad-marca); color: #fff; box-shadow: var(--s-violeta); }
.btn-primario:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(124,58,237,.36); }
.btn-secundario { background: transparent; color: var(--c-violeta-oscuro); border-color: var(--c-borde); }
.btn-secundario:hover { border-color: var(--c-violeta); color: var(--c-violeta); }
.btn-claro { background: #fff; color: var(--c-violeta-oscuro); }
.btn-claro:hover { color: var(--c-violeta); transform: translateY(-2px); }
.btn-bloque { width: 100%; }
.btn-sm { padding: 0.45rem 1rem; font-size: var(--t-sm); }

/* ── Tarjetas ──────────────────────────────────────────────── */
.tarjeta {
  background: var(--c-superficie); border: 1px solid var(--c-borde);
  border-radius: var(--r-lg); padding: var(--e-5); box-shadow: var(--s-sm);
  transition: transform var(--trans), box-shadow var(--trans);
}
.tarjeta-hover:hover { transform: translateY(-4px); box-shadow: var(--s-lg); }

/* ── Insignias / badges ────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-xs); font-weight: var(--peso-semi);
  padding: 0.25rem 0.7rem; border-radius: var(--r-full);
  background: var(--c-fondo-suave); color: var(--c-violeta-oscuro);
}
.badge-marca { background: var(--grad-marca); color: #fff; }
.badge-exito { background: var(--c-exito-bg); color: var(--c-exito); }
.badge-aviso { background: var(--c-aviso-bg); color: var(--c-aviso); }

/* ── Barra de progreso ─────────────────────────────────────── */
.progreso { background: var(--c-borde); border-radius: var(--r-full); height: 10px; overflow: hidden; }
.progreso > span { display: block; height: 100%; background: var(--grad-marca); border-radius: var(--r-full); transition: width var(--trans); }

/* ── Formularios ───────────────────────────────────────────── */
.campo { margin-bottom: var(--e-4); }
.campo label { display: block; font-weight: var(--peso-medio); font-size: var(--t-sm); margin-bottom: var(--e-2); color: var(--c-texto); }
.campo input, .campo textarea, .campo select {
  width: 100%; font: inherit; color: var(--c-texto);
  padding: 0.7rem 0.9rem; border: 1px solid var(--c-borde); border-radius: var(--r-md);
  background: #fff; transition: border-color var(--trans), box-shadow var(--trans);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--c-violeta); box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo .ayuda { font-size: var(--t-xs); color: var(--c-texto-tenue); margin-top: var(--e-1); }

/* ── Alertas (mensajes flash) ──────────────────────────────── */
.alerta { padding: 0.85rem 1.1rem; border-radius: var(--r-md); margin-bottom: var(--e-4); font-size: var(--t-sm); border: 1px solid transparent; }
.alerta-exito { background: var(--c-exito-bg); color: var(--c-exito); border-color: #bbf7d0; }
.alerta-error { background: var(--c-error-bg); color: var(--c-error); border-color: #fecaca; }
.alerta-info  { background: var(--c-info-bg);  color: var(--c-azul);  border-color: #bfdbfe; }

/* ── Navbar pública ────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--alto-navbar); background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-borde);
}
.navbar .contenedor { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.navbar-logo { display: flex; align-items: center; gap: var(--e-2); font-family: var(--f-display); font-weight: var(--peso-black); font-size: var(--t-lg); color: var(--c-texto); }
.navbar-logo img { height: 38px; width: auto; border-radius: var(--r-sm); }
.navbar-links { display: none; align-items: center; gap: var(--e-4); list-style: none; padding: 0; margin: 0; }
.navbar-links a { color: var(--c-texto-suave); font-weight: var(--peso-medio); font-size: var(--t-sm); }
.navbar-links a:hover { color: var(--c-violeta); }
.navbar-acciones { display: flex; align-items: center; gap: var(--e-3); }
.navbar-auth { display: none; align-items: center; gap: var(--e-3); }
.navbar-movil-auth { display: flex; flex-direction: column; gap: .5rem; margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--c-borde); }
.navbar-movil-auth form { margin: 0; }
@media (min-width: 1040px) { .navbar-auth { display: flex; } .navbar-movil-auth { display: none; } }
.navbar-burger { background: none; border: none; cursor: pointer; padding: var(--e-2); display: flex; }
.navbar-burger span, .navbar-burger span::before, .navbar-burger span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--c-texto); border-radius: 2px; position: relative; transition: var(--trans);
}
.navbar-burger span::before { position: absolute; top: -7px; }
.navbar-burger span::after  { position: absolute; top: 7px; }
.navbar-movil { display: none; flex-direction: column; gap: var(--e-2); padding: var(--e-4); background: #fff; border-bottom: 1px solid var(--c-borde); }
.navbar-movil.abierto { display: flex; }
.navbar-movil a { padding: var(--e-2) 0; color: var(--c-texto-suave); font-weight: var(--peso-medio); }

@media (min-width: 1040px) {
  .navbar-links { display: flex; }
  .navbar-burger { display: none; }
  .navbar-movil { display: none !important; }
}

/* ── Footer ────────────────────────────────────────────────── */
.footer { background: var(--c-noche); color: var(--c-texto-claro); padding-block: var(--e-7) var(--e-5); }
.footer a { color: #c4b8f0; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--e-6); margin-bottom: var(--e-6); }
.footer h4 { color: #fff; font-size: var(--t-base); margin-bottom: var(--e-3); }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.footer-marca p { color: #b9b0d6; font-size: var(--t-sm); }
.footer-fin { border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--e-4); font-size: var(--t-sm); color: #9b92ba; display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: space-between; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* ── Hero de inicio ────────────────────────────────────────── */
.hero { position: relative; background: var(--c-noche); color: var(--c-texto-claro); overflow: hidden; padding-block: var(--e-8); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 75% 20%, rgba(124,58,237,.45), transparent 60%),
              radial-gradient(50% 60% at 15% 90%, rgba(59,130,246,.35), transparent 60%);
  pointer-events: none;
}
.hero .contenedor { position: relative; z-index: 1; display: grid; gap: var(--e-6); align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2rem, 8vw, var(--t-4xl)); font-weight: var(--peso-black); }
.hero p.lead { color: #d6cef2; font-size: var(--t-lg); max-width: 38ch; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-2); }
.hero-figura { display: flex; justify-content: center; }
.hero-figura img { width: 100%; max-width: min(300px, 60vw); height: auto; filter: drop-shadow(0 14px 34px rgba(124,58,237,.4)); }
@media (max-width: 859px) {
  .hero { padding-block: var(--e-6); }
  .hero .contenedor { gap: var(--e-5); }
  .hero-figura img { max-width: 220px; }
}
@media (min-width: 860px) { .hero .contenedor { grid-template-columns: 1.1fr 0.9fr; } }

.hero-trust { list-style: none; padding: 0; margin: var(--e-5) 0 0; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.hero-trust li { display: flex; align-items: center; gap: .4rem; color: #d6cef2; font-size: var(--t-sm); font-weight: var(--peso-medio); }
.hero-trust .ico { color: #6ee7b7; }

/* ── Banner gancho (test) ──────────────────────────────────── */
.test-banner { display: flex; align-items: center; gap: var(--e-4); margin-top: var(--e-5); padding: var(--e-4) var(--e-5); border-radius: var(--r-lg); background: linear-gradient(120deg, #f3effe, #eaf1fe); border: 1px solid var(--c-borde); transition: transform var(--trans), box-shadow var(--trans); }
.test-banner:hover { transform: translateY(-2px); box-shadow: var(--s-md); }
.test-banner-emoji { font-size: 2.2rem; line-height: 1; }
.test-banner-texto { display: flex; flex-direction: column; flex: 1; }
.test-banner-texto strong { color: var(--c-texto); font-family: var(--f-display); font-size: var(--t-lg); }
.test-banner-texto small { color: var(--c-texto-suave); }
.test-banner-cta { flex-shrink: 0; }
@media (max-width: 560px) { .test-banner { flex-wrap: wrap; text-align: center; justify-content: center; } .test-banner-texto { align-items: center; } }

/* ── Quiz "¿Cuánto sabés de marketing?" ────────────────────── */
.quiz-wrap { max-width: 600px; margin-inline: auto; }
.quiz-card { background: #fff; border: 1px solid var(--c-borde); border-radius: var(--r-xl); padding: var(--e-6); box-shadow: var(--s-md); text-align: center; }
.quiz-emoji { font-size: 3rem; line-height: 1; display: inline-block; }
.quiz-card h1 { font-size: var(--t-3xl); margin-top: var(--e-2); }
.quiz-sub { color: var(--c-texto-suave); margin-top: var(--e-2); }
.quiz-features { list-style: none; padding: 0; margin: var(--e-5) 0; display: flex; flex-direction: column; gap: .5rem; text-align: left; max-width: 320px; margin-inline: auto; }
.quiz-features li { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); color: var(--c-texto-suave); }
.quiz-features .ico { color: var(--c-exito); flex-shrink: 0; }
.btn-grande { padding: .9rem 2rem; font-size: var(--t-lg); }
.btn-bloque.btn-grande, .btn-grande { margin-top: var(--e-3); }

.quiz-top { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--e-5); }
.quiz-progreso { flex: 1; height: 10px; background: var(--c-borde); border-radius: var(--r-full); overflow: hidden; }
.quiz-progreso > span { display: block; height: 100%; background: var(--grad-marca); border-radius: var(--r-full); transition: width var(--trans); width: 0; }
.quiz-contador { font-weight: var(--peso-semi); font-size: var(--t-sm); color: var(--c-texto-suave); }
.quiz-pregunta { font-size: var(--t-xl); text-align: left; }
.quiz-opciones { display: flex; flex-direction: column; gap: .6rem; margin-top: var(--e-4); }
.quiz-opcion { text-align: left; padding: .85rem 1.1rem; border: 2px solid var(--c-borde); border-radius: var(--r-md); background: #fff; font: inherit; cursor: pointer; transition: border-color var(--trans), background var(--trans); }
.quiz-opcion:hover:not(:disabled) { border-color: var(--c-violeta); }
.quiz-opcion:disabled { cursor: default; }
.quiz-opcion.correcta { border-color: var(--c-exito); background: var(--c-exito-bg); color: #0f5132; font-weight: var(--peso-semi); }
.quiz-opcion.incorrecta { border-color: var(--c-error); background: var(--c-error-bg); color: #842029; }
.quiz-feedback { text-align: left; margin-top: var(--e-4); padding: var(--e-4); border-radius: var(--r-md); }
.quiz-feedback.ok { background: var(--c-exito-bg); }
.quiz-feedback.mal { background: var(--c-aviso-bg); }
.quiz-feedback-titulo { font-weight: var(--peso-bold); margin-bottom: .25rem; }
.quiz-feedback-texto { font-size: var(--t-sm); color: var(--c-texto); }
.quiz-card [data-siguiente] { margin-top: var(--e-4); }

.quiz-score { font-family: var(--f-display); font-weight: var(--peso-black); font-size: var(--t-2xl); margin-top: var(--e-2); }
.quiz-score span { background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quiz-medidor { height: 12px; background: var(--c-borde); border-radius: var(--r-full); overflow: hidden; margin: var(--e-3) 0; }
.quiz-medidor > span { display: block; height: 100%; background: var(--grad-marca); width: 0; transition: width 600ms ease; }
.quiz-lead { background: var(--c-fondo-suave); border-radius: var(--r-lg); padding: var(--e-5); margin: var(--e-5) 0; }
.quiz-lead-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.quiz-lead-row input { flex: 1; min-width: 180px; padding: .7rem 1rem; border: 1px solid var(--c-borde); border-radius: var(--r-md); font: inherit; }
.quiz-lead-msg { margin-top: .6rem; font-size: var(--t-sm); }
.quiz-lead-msg.ok { color: var(--c-exito); } .quiz-lead-msg.mal { color: var(--c-error); }
.quiz-cta { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* ── Sección gamificación ──────────────────────────────────── */
.seccion-juego { background:
   radial-gradient(70% 120% at 0% 0%, rgba(124,58,237,.06), transparent 55%),
   radial-gradient(70% 120% at 100% 100%, rgba(59,130,246,.06), transparent 55%),
   var(--c-fondo); }
.grid-juego { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-juego { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .grid-juego { grid-template-columns: repeat(4, 1fr); } }
.juego-card { background: #fff; border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); text-align: center; box-shadow: var(--s-sm); transition: transform var(--trans), box-shadow var(--trans); }
.juego-card:hover { transform: translateY(-4px); box-shadow: var(--s-lg); }
.juego-emoji { font-size: 2.4rem; line-height: 1; display: inline-block; margin-bottom: var(--e-2); }
.juego-card h3 { font-size: var(--t-lg); }
.juego-card p { font-size: var(--t-sm); margin-top: .4rem; }
.seccion-juego .centro-texto.mt-6 .btn { margin: .35rem; }

/* ── Sección CTA final ─────────────────────────────────────── */
.seccion-cta { background: var(--c-noche); color: var(--c-texto-claro); position: relative; overflow: hidden; }
.seccion-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 0, rgba(124,58,237,.4), transparent 60%); pointer-events: none; }
.seccion-cta .contenedor { position: relative; z-index: 1; }
.seccion-cta h2 { color: #fff; }
.seccion-cta p { color: #d6cef2; }

/* ── Testimonios ───────────────────────────────────────────── */
.grid-testimonios { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-testimonios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid-testimonios { grid-template-columns: repeat(3, 1fr); } }
.testimonio { background: #fff; border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); box-shadow: var(--s-sm); margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.testimonio-estrellas { color: #f59e0b; letter-spacing: 2px; }
.testimonio blockquote { margin: 0; color: var(--c-texto); font-size: var(--t-base); line-height: 1.6; flex: 1; }
.testimonio figcaption { display: flex; align-items: center; gap: .6rem; font-size: var(--t-sm); color: var(--c-texto-suave); }
.testimonio-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--grad-marca); color: #fff; font-family: var(--f-display); font-weight: var(--peso-bold); flex-shrink: 0; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: .6rem; }
.faq-item { background: #fff; border: 1px solid var(--c-borde); border-radius: var(--r-md); overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: var(--peso-semi); color: var(--c-texto); display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icono { width: 14px; height: 14px; position: relative; flex-shrink: 0; }
.faq-icono::before, .faq-icono::after { content: ""; position: absolute; background: var(--c-violeta); border-radius: 2px; transition: transform var(--trans); }
.faq-icono::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq-icono::after { top: 0; left: 6px; width: 2px; height: 14px; }
.faq-item[open] .faq-icono::after { transform: scaleY(0); }
.faq-cuerpo { padding: 0 1.25rem 1.1rem; }
.faq-cuerpo p { color: var(--c-texto-suave); margin: 0; }

/* ── Página legal (privacidad) ─────────────────────────────── */
.legal { max-width: var(--ancho-texto); }
.legal h1 { font-size: var(--t-3xl); }
.legal-fecha { color: var(--c-texto-tenue); font-size: var(--t-sm); margin-bottom: var(--e-5); }
.legal h2 { font-size: var(--t-xl); margin-top: var(--e-6); }
.legal p, .legal li { color: var(--c-texto-suave); line-height: 1.75; }
.legal ul { padding-left: 1.4rem; display: flex; flex-direction: column; gap: .4rem; margin-top: var(--e-3); }
.legal a { color: var(--c-violeta-oscuro); text-decoration: underline; }

/* ── Escalera de valor (cards de productos) ────────────────── */
.grid-valor { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-valor { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid-valor { grid-template-columns: repeat(4, 1fr); } }
.peldano { position: relative; }
.peldano .precio { font-family: var(--f-display); font-weight: var(--peso-black); font-size: var(--t-2xl); }
.peldano .nivel { font-size: var(--t-xs); color: var(--c-texto-tenue); text-transform: uppercase; letter-spacing: .08em; }

/* ── Páginas de autenticación ──────────────────────────────── */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--e-5); background: var(--c-fondo-suave); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: var(--r-xl); box-shadow: var(--s-lg); padding: var(--e-6); }
.auth-card .logo { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); margin-bottom: var(--e-5); }
.auth-card .logo img { height: 56px; border-radius: var(--r-md); }
.auth-card h1 { font-size: var(--t-2xl); text-align: center; }
.auth-card .sub { text-align: center; color: var(--c-texto-suave); margin-bottom: var(--e-5); font-size: var(--t-sm); }
.auth-pie { text-align: center; margin-top: var(--e-4); font-size: var(--t-sm); color: var(--c-texto-suave); }

/* ── Utilidades ────────────────────────────────────────────── */
.flex { display: flex; }
.flex-entre { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: var(--e-2); } .gap-3 { gap: var(--e-3); } .gap-4 { gap: var(--e-4); }
.mt-2 { margin-top: var(--e-2); } .mt-4 { margin-top: var(--e-4); } .mt-5 { margin-top: var(--e-5); } .mt-6 { margin-top: var(--e-6); }
/* Empuja el botón al fondo para alinear tarjetas de distinta altura. */
.peldano { display: flex; flex-direction: column; }
.peldano .btn { margin-top: auto; }
.mb-4 { margin-bottom: var(--e-4); }
.oculto { display: none; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--c-violeta); color: #fff; padding: var(--e-2) var(--e-4); border-radius: 0 0 var(--r-md) 0; z-index: 200; }
.skip-link:focus { left: 0; color: #fff; }

/* ── Breadcrumbs ───────────────────────────────────────────── */
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; font-size: var(--t-sm); color: var(--c-texto-tenue); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .35rem; }
.breadcrumbs a { color: var(--c-texto-suave); }
.breadcrumbs .sep { color: var(--c-texto-tenue); }
.breadcrumbs [aria-current] { color: var(--c-texto); font-weight: var(--peso-medio); }

/* ── Chips / filtros ───────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--e-4); }
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-sm); padding: .35rem .85rem; border-radius: var(--r-full); background: var(--c-fondo-suave); color: var(--c-texto-suave); border: 1px solid var(--c-borde); }
a.chip:hover { border-color: var(--c-violeta); color: var(--c-violeta); }
.chip-activo { background: var(--grad-marca); color: #fff; border-color: transparent; }
a.chip-activo:hover { color: #fff; }

/* ── Buscador del blog ─────────────────────────────────────── */
.blog-buscar { display: flex; align-items: center; gap: .5rem; margin-top: var(--e-5); max-width: 540px; position: relative; }
.blog-buscar .ico-buscar { position: absolute; left: .8rem; color: var(--c-texto-tenue); display: flex; }
.blog-buscar input { flex: 1; padding: .65rem .9rem .65rem 2.4rem; border: 1px solid var(--c-borde); border-radius: var(--r-full); font: inherit; }
.blog-buscar input:focus { outline: none; border-color: var(--c-violeta); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }

/* ── Grid y tarjetas de blog ───────────────────────────────── */
.grid-blog { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-blog { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid-blog { grid-template-columns: repeat(3, 1fr); } }
.card-post { display: flex; flex-direction: column; background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--s-sm); transition: transform var(--trans), box-shadow var(--trans); }
.card-post-img { display: block; aspect-ratio: 16/9; background: var(--c-fondo-suave); overflow: hidden; }
.card-post-img img { width: 100%; height: 100%; object-fit: cover; }
.card-post-ph { display: grid; place-items: center; height: 100%; color: var(--c-violeta-claro); opacity: .5; }
.card-post-cuerpo { padding: var(--e-4); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card-post-titulo { font-size: var(--t-lg); line-height: 1.3; }
.card-post-titulo a { color: var(--c-texto); }
.card-post-titulo a:hover { color: var(--c-violeta); }
.card-post-extracto { font-size: var(--t-sm); color: var(--c-texto-suave); flex: 1; }
.card-post-meta { font-size: var(--t-xs); color: var(--c-texto-tenue); display: flex; gap: .4rem; }

/* ── Paginación ────────────────────────────────────────────── */
.paginacion { display: flex; gap: .4rem; justify-content: center; margin-top: var(--e-6); flex-wrap: wrap; }
.paginacion a { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--c-borde); color: var(--c-texto-suave); font-weight: var(--peso-medio); }
.paginacion a:hover { border-color: var(--c-violeta); color: var(--c-violeta); }
.paginacion a.activo { background: var(--grad-marca); color: #fff; border-color: transparent; }

/* ── Artículo (lectura) ────────────────────────────────────── */
.articulo-ancho { max-width: var(--ancho-texto); }
.articulo-head { margin-bottom: var(--e-5); }
.articulo-head h1 { font-size: var(--t-4xl); line-height: 1.15; margin-top: .5rem; }
.articulo-meta { display: flex; flex-wrap: wrap; gap: .4rem; color: var(--c-texto-tenue); font-size: var(--t-sm); margin-top: var(--e-3); }
.articulo-portada { width: 100%; border-radius: var(--r-lg); margin-bottom: var(--e-5); aspect-ratio: 16/9; object-fit: cover; }
.articulo-cuerpo { font-size: var(--t-lg); line-height: 1.8; color: var(--c-texto); }
.articulo-cuerpo > * + * { margin-top: var(--e-4); }
.articulo-cuerpo h2 { font-size: var(--t-2xl); margin-top: var(--e-6); }
.articulo-cuerpo h3 { font-size: var(--t-xl); margin-top: var(--e-5); }
.articulo-cuerpo a { color: var(--c-violeta-oscuro); text-decoration: underline; }
.articulo-cuerpo img { border-radius: var(--r-md); margin-block: var(--e-4); }
.articulo-cuerpo blockquote { border-left: 4px solid var(--c-violeta); padding: .25rem 0 .25rem 1.25rem; color: var(--c-texto-suave); font-style: italic; }
.articulo-cuerpo pre { background: var(--c-noche); color: #e7e2fb; padding: 1rem 1.25rem; border-radius: var(--r-md); overflow-x: auto; font-size: var(--t-sm); }
.articulo-cuerpo ul, .articulo-cuerpo ol { padding-left: 1.5rem; }
.articulo-cuerpo li { margin-top: .35rem; }
.articulo-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--e-6); }

/* ── Grid y tarjetas de video ──────────────────────────────── */
.grid-videos { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-videos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-videos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid-videos { grid-template-columns: repeat(4, 1fr); } }
.card-video { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--s-sm); transition: transform var(--trans), box-shadow var(--trans); }
.card-video-thumb { position: relative; display: block; aspect-ratio: 16/9; background: #000; }
.card-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-video-dur { position: absolute; bottom: .5rem; right: .5rem; background: rgba(0,0,0,.8); color: #fff; font-size: var(--t-xs); padding: .1rem .4rem; border-radius: 4px; }
.card-video-cuerpo { padding: var(--e-3) var(--e-4); }
.card-video-titulo { font-size: var(--t-base); line-height: 1.35; }
.card-video-titulo a { color: var(--c-texto); }
.card-video-titulo a:hover { color: var(--c-violeta); }
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: var(--r-full); background: rgba(124,58,237,.92); color: #fff; display: grid; place-items: center; box-shadow: var(--s-lg); transition: transform var(--trans); }
.card-video-thumb:hover .play-btn { transform: translate(-50%,-50%) scale(1.1); }
.play-btn.grande { width: 76px; height: 76px; }

/* ── Embed responsivo de video (lazy) ──────────────────────── */
.video-embed { position: relative; aspect-ratio: 16/9; background: #000; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; margin-block: var(--e-4); }
.video-embed img { width: 100%; height: 100%; object-fit: cover; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-cta { background: var(--c-fondo-suave); border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); text-align: center; margin-top: var(--e-5); }
.video-cta p { font-weight: var(--peso-semi); color: var(--c-texto); margin-bottom: var(--e-3); }

/* ── Caja de suscripción (lead magnet) ─────────────────────── */
.suscripcion { background: var(--c-noche); color: var(--c-texto-claro); border-radius: var(--r-xl); padding: var(--e-6); position: relative; overflow: hidden; }
.suscripcion::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 100% 0, rgba(124,58,237,.4), transparent 60%); pointer-events: none; }
.suscripcion-cuerpo { position: relative; z-index: 1; }
.suscripcion h3 { color: #fff; font-size: var(--t-xl); }
.suscripcion p { color: #d6cef2; margin-top: .5rem; }
.suscripcion-form { display: flex; gap: .5rem; margin-top: var(--e-4); flex-wrap: wrap; }
.suscripcion-form input { flex: 1; min-width: 200px; padding: .7rem 1rem; border-radius: var(--r-full); border: 0; font: inherit; }
.suscripcion-form input:focus { outline: 3px solid var(--c-azul); }
.suscripcion-msg { margin-top: .75rem; font-size: var(--t-sm); color: #b7f7c9; }
.suscripcion-msg.error { color: #fecaca; }

/* ── Tarjeta de curso (catálogo) ───────────────────────────── */
.card-curso { display: flex; flex-direction: column; background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--s-sm); transition: transform var(--trans), box-shadow var(--trans); }
.card-curso-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: var(--e-3); }
.precio-curso { font-family: var(--f-display); font-weight: var(--peso-black); font-size: var(--t-xl); color: var(--c-texto); }
.precio-tachado { color: var(--c-texto-tenue); text-decoration: line-through; font-size: var(--t-sm); margin-left: .35rem; }

/* ── Página de venta del curso ─────────────────────────────── */
.curso-hero { background: var(--c-noche); color: var(--c-texto-claro); padding-block: var(--e-6); position: relative; }
.curso-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 80% 0, rgba(124,58,237,.4), transparent 60%); }
.curso-hero-grid { position: relative; z-index: 1; display: grid; gap: var(--e-6); }
.curso-hero-info h1 { color: #fff; font-size: var(--t-3xl); }
.curso-sub { color: #d6cef2; font-size: var(--t-lg); margin-top: .5rem; }
.curso-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--e-4); color: #c4b8f0; font-size: var(--t-sm); }
.curso-compra { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--s-lg); color: var(--c-texto); }
.curso-compra-media img, .curso-compra-media .video-embed { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin: 0; border-radius: 0; }
.curso-compra-cuerpo { padding: var(--e-5); }
.curso-precio-box { display: flex; align-items: baseline; gap: .5rem; }
.curso-incluye { list-style: none; padding: 0; margin: var(--e-4) 0 0; display: flex; flex-direction: column; gap: .5rem; font-size: var(--t-sm); color: var(--c-texto-suave); }
.curso-incluye li { display: flex; align-items: center; gap: .5rem; }
.curso-incluye .ico { color: var(--c-exito); }
@media (min-width: 900px) { .curso-hero-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }

.curso-cuerpo-grid { display: grid; gap: var(--e-6); }
.curso-bloque { margin-bottom: var(--e-6); }
.curso-bloque h2 { margin-bottom: var(--e-4); }
.lista-check, .lista-punto { list-style: none; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 640px) { .lista-check { grid-template-columns: 1fr 1fr; } }
.lista-check li { display: flex; gap: .5rem; align-items: flex-start; }
.lista-check .ico { color: var(--c-exito); flex-shrink: 0; margin-top: 2px; }
.lista-punto { padding-left: 1.2rem; list-style: disc; }

/* Acordeón de temario */
.modulo-acordeon { border: 1px solid var(--c-borde); border-radius: var(--r-md); margin-bottom: .6rem; background: #fff; }
.modulo-acordeon summary { cursor: pointer; padding: var(--e-4); font-weight: var(--peso-semi); display: flex; justify-content: space-between; align-items: center; }
.modulo-conteo { font-size: var(--t-xs); color: var(--c-texto-tenue); font-weight: var(--peso-normal); }
.leccion-lista { list-style: none; padding: 0 var(--e-4) var(--e-3); margin: 0; }
.leccion-lista li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--c-borde); font-size: var(--t-sm); color: var(--c-texto-suave); }
.leccion-extra { display: flex; align-items: center; gap: .5rem; }
.leccion-extra .dur { color: var(--c-texto-tenue); font-size: var(--t-xs); }

.instructor { display: flex; gap: 1rem; align-items: flex-start; }
.instructor img, .instructor-ph { width: 72px; height: 72px; border-radius: var(--r-full); object-fit: cover; flex-shrink: 0; }
.instructor-ph { display: grid; place-items: center; background: var(--c-fondo-suave); color: var(--c-violeta); }

.resena { border-top: 1px solid var(--c-borde); padding: var(--e-4) 0; }
.resena-top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.resena-estrellas { color: #f59e0b; }
.resena-form { margin-bottom: var(--e-5); }

/* ── Checkout ──────────────────────────────────────────────── */
.checkout-grid { display: grid; gap: var(--e-6); }
@media (min-width: 900px) { .checkout-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.checkout-bloque { background: #fff; border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); margin-top: var(--e-4); }
.checkout-bloque h2 { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.cupon-row { display: flex; gap: .5rem; }
.cupon-row input { flex: 1; padding: .65rem .9rem; border: 1px solid var(--c-borde); border-radius: var(--r-md); font: inherit; text-transform: uppercase; }
.cupon-msg { margin-top: .5rem; font-size: var(--t-sm); }
.cupon-msg.ok { color: var(--c-exito); } .cupon-msg.error { color: var(--c-error); }
.metodo-opcion { display: flex; gap: .75rem; align-items: flex-start; padding: var(--e-3); border: 1px solid var(--c-borde); border-radius: var(--r-md); margin-bottom: .5rem; cursor: pointer; }
.metodo-opcion input { margin-top: 3px; }
.checkout-resumen { background: #fff; border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); box-shadow: var(--s-sm); position: sticky; top: var(--e-5); }
.checkout-curso { display: flex; gap: .75rem; align-items: center; margin-bottom: var(--e-4); }
.checkout-curso img { width: 64px; height: 40px; object-fit: cover; border-radius: var(--r-sm); }
.checkout-linea { display: flex; justify-content: space-between; padding: .4rem 0; font-size: var(--t-sm); color: var(--c-texto-suave); }
.checkout-total { border-top: 1px solid var(--c-borde); margin-top: .4rem; padding-top: .75rem; font-size: var(--t-lg); font-weight: var(--peso-bold); color: var(--c-texto); }

/* ── Reproductor de curso ──────────────────────────────────── */
.curso-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem var(--e-4); background: var(--c-noche); color: #fff; position: sticky; top: 0; z-index: 50; }
.curso-topbar-logo { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: var(--peso-semi); font-size: var(--t-sm); }
.curso-topbar-prog { display: flex; align-items: center; gap: .5rem; }
.curso-layout { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 56px); }
.curso-side { background: var(--c-fondo-suave); border-right: 1px solid var(--c-borde); padding: var(--e-4); max-height: 40vh; overflow-y: auto; }
.curso-side-modulo h3 { font-size: var(--t-sm); margin: var(--e-3) 0 .5rem; color: var(--c-texto-suave); }
.curso-side ul { list-style: none; padding: 0; margin: 0; }
.leccion-link { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: var(--r-sm); color: var(--c-texto-suave); font-size: var(--t-sm); }
.leccion-link:hover { background: #ece9f8; }
.curso-side li.actual .leccion-link { background: var(--grad-marca); color: #fff; }
.curso-side li.hecha .leccion-link .check { color: var(--c-exito); }
.curso-side li.actual .check { color: #fff; }
.leccion-link .check { width: 16px; flex-shrink: 0; }
.leccion-link .dur { margin-left: auto; font-size: var(--t-xs); opacity: .8; }
.leccion-link.bloqueada { color: var(--c-texto-tenue); cursor: not-allowed; }
.curso-main { padding: var(--e-5); }
.curso-main-inner { max-width: 820px; margin-inline: auto; }
.leccion-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--e-5); }
@media (min-width: 900px) { .curso-layout { grid-template-columns: 320px 1fr; } .curso-side { max-height: calc(100vh - 56px); position: sticky; top: 56px; } }

/* Quiz */
.quiz-bloque { background: var(--c-fondo-suave); border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); margin-top: var(--e-6); }
.quiz-pregunta { border: 0; padding: 0; margin: 0 0 var(--e-4); }
.quiz-pregunta legend { font-weight: var(--peso-semi); margin-bottom: .5rem; }
.quiz-opcion { display: flex; gap: .6rem; align-items: center; padding: .5rem .75rem; background: #fff; border: 1px solid var(--c-borde); border-radius: var(--r-md); margin-bottom: .4rem; cursor: pointer; }
.quiz-opcion:hover { border-color: var(--c-violeta); }
.cert-aviso { background: var(--grad-marca); color: #fff; border-radius: var(--r-lg); padding: var(--e-5); margin-top: var(--e-6); text-align: center; }
.cert-aviso h2 { color: #fff; }
.cert-aviso p { color: #f3f1fb; margin: .5rem 0 1rem; }

/* ── Diplomados ────────────────────────────────────────────── */
.cohorte-opcion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem; border: 1px solid var(--c-borde); border-radius: var(--r-md); margin-top: .6rem; }
.diplomado-cursos { list-style: none; padding: 0; counter-reset: dc; }
.diplomado-cursos li { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--c-borde); }
.dc-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--grad-marca); color: #fff; font-weight: var(--peso-bold); font-size: var(--t-sm); flex-shrink: 0; }

/* ── Panel gamificado ──────────────────────────────────────── */
.panel-gamif { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; background: var(--c-noche); color: #fff; border-radius: var(--r-xl); padding: var(--e-6); position: relative; overflow: hidden; }
.panel-gamif::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 90% 0, rgba(124,58,237,.45), transparent 60%); }
.panel-gamif-info, .panel-gamif-insignias { position: relative; z-index: 1; }
.panel-gamif h1 { color: #fff; }
.panel-nivel { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; flex-wrap: wrap; }
.nivel-badge { background: var(--grad-marca); color: #fff; font-weight: var(--peso-bold); padding: .3rem .9rem; border-radius: var(--r-full); font-size: var(--t-sm); }
.nivel-barra { width: 180px; height: 10px; background: rgba(255,255,255,.18); border-radius: var(--r-full); overflow: hidden; }
.nivel-barra > span { display: block; height: 100%; background: linear-gradient(90deg, #a78bfa, #60a5fa); }
.nivel-xp { color: #d6cef2; font-weight: var(--peso-semi); font-size: var(--t-sm); }
.panel-gamif-insignias { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.insignia-chip { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-full); background: rgba(255,255,255,.12); font-size: 1.3rem; }

/* ── Insignias (catálogo) ──────────────────────────────────── */
.insignias-grid { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.insignia-card { background: #fff; border: 1px solid var(--c-borde); border-radius: var(--r-lg); padding: var(--e-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .35rem; box-shadow: var(--s-sm); }
.insignia-card.bloqueada { opacity: .55; filter: grayscale(1); }
.insignia-icono { font-size: 2.5rem; }
.insignia-card small { color: var(--c-texto-tenue); }

/* ── Ranking ───────────────────────────────────────────────── */
.ranking-lista { list-style: none; padding: 0; counter-reset: r; display: flex; flex-direction: column; gap: .5rem; }
.ranking-item { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--c-borde); border-radius: var(--r-md); padding: .85rem 1.1rem; box-shadow: var(--s-sm); }
.ranking-pos { font-family: var(--f-display); font-weight: var(--peso-black); font-size: var(--t-lg); color: var(--c-texto-tenue); min-width: 32px; }
.ranking-nombre { font-weight: var(--peso-semi); flex: 1; }
.ranking-nivel { font-size: var(--t-xs); color: var(--c-texto-suave); }
.ranking-xp { font-family: var(--f-display); font-weight: var(--peso-bold); color: var(--c-violeta-oscuro); }
.ranking-item.podio { border-color: var(--c-violeta); }
.ranking-item.podio-1 .ranking-pos { color: #f59e0b; }
.ranking-item.podio-2 .ranking-pos { color: #94a3b8; }
.ranking-item.podio-3 .ranking-pos { color: #b45309; }

/* ── Editar código de referido (panel del alumno) ──────────── */
.ref-codigo-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ref-codigo-form input { padding: .5rem .7rem; border: 1px solid var(--c-borde); border-radius: var(--r-md); font: inherit; }

/* ── Enlace de referido ────────────────────────────────────── */
.referido-enlace { display: flex; gap: .5rem; max-width: 560px; }
.referido-enlace input { flex: 1; padding: .7rem 1rem; border: 1px solid var(--c-borde); border-radius: var(--r-md); font: inherit; background: var(--c-fondo-suave); }

/* ── Talleres ──────────────────────────────────────────────── */
.card-taller { display: flex; flex-direction: column; background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--s-sm); transition: transform var(--trans), box-shadow var(--trans); }
.card-taller .card-post-cuerpo { gap: .6rem; }
.countdown { display: inline-block; font-family: var(--f-display); font-weight: var(--peso-semi); font-size: var(--t-sm); color: var(--c-violeta-oscuro); background: var(--c-fondo-suave); padding: .35rem .7rem; border-radius: var(--r-full); }
.countdown.envivo { background: var(--c-error-bg); color: var(--c-error); animation: pulso 1.5s ease-in-out infinite; }
.countdown-grande { display: block; text-align: center; font-size: var(--t-lg); padding: .6rem; margin-bottom: var(--e-2); }
@keyframes pulso { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ── Verificación de certificado ───────────────────────────── */
.verificar-form { display: flex; gap: .5rem; }
.verificar-form input { flex: 1; padding: .7rem 1rem; border: 1px solid var(--c-borde); border-radius: var(--r-md); font: inherit; text-transform: uppercase; }
.verificar-tabla { width: 100%; border-collapse: collapse; margin-top: var(--e-3); }
.verificar-tabla th, .verificar-tabla td { text-align: left; padding: .6rem 0; border-bottom: 1px solid var(--c-borde); font-size: var(--t-sm); }
.verificar-tabla th { color: var(--c-texto-suave); width: 40%; }
.verificar-ok { border-left: 4px solid var(--c-exito); }
.verificar-mal { border-left: 4px solid var(--c-aviso); }

/* ── Certificado imprimible ────────────────────────────────── */
.cuerpo-limpio { background: var(--c-fondo-suave); }
.cert-acciones { display: flex; gap: .5rem; justify-content: center; padding: var(--e-4); }
.cert-hoja { max-width: 900px; margin: 0 auto var(--e-6); padding: 0 var(--e-4); }
.cert-marco { background: #fff; border: 2px solid var(--c-violeta); border-radius: var(--r-lg); padding: var(--e-8) var(--e-7); text-align: center; box-shadow: var(--s-lg); position: relative; }
.cert-marco::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--c-borde); border-radius: var(--r-md); pointer-events: none; }
.cert-top { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: var(--e-5); }
.cert-marca { font-family: var(--f-display); font-weight: var(--peso-black); font-size: var(--t-xl); }
.cert-marca b { color: var(--c-violeta); }
.cert-kicker { text-transform: uppercase; letter-spacing: .2em; color: var(--c-violeta); font-weight: var(--peso-semi); font-size: var(--t-sm); }
.cert-otorga { color: var(--c-texto-suave); margin-top: var(--e-3); }
.cert-nombre { font-family: var(--f-display); font-size: var(--t-4xl); margin: var(--e-2) 0; }
.cert-curso { font-size: var(--t-xl); color: var(--c-violeta-oscuro); margin: var(--e-2) 0 var(--e-6); }
.cert-pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.25rem; margin-top: var(--e-6); flex-wrap: wrap; text-align: left; }
.cert-firma { display: flex; flex-direction: column; align-items: flex-start; max-width: 220px; }
.cert-firma-img { height: 56px; width: auto; max-width: 200px; object-fit: contain; display: block; margin-bottom: 2px; }
.cert-firma-linea { width: 200px; border-top: 2px solid var(--c-texto); margin-bottom: .35rem; }
.cert-firma small, .cert-datos p { font-size: var(--t-sm); color: var(--c-texto-suave); }
.cert-qr { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.cert-qr .qr { width: 110px; height: 110px; border: 4px solid #fff; }
.cert-qr small { font-size: var(--t-xs); color: var(--c-texto-tenue); }
.cert-datos { text-align: right; }
.cert-verificar { font-size: var(--t-xs) !important; color: var(--c-texto-tenue) !important; }

@media print {
  .no-print { display: none !important; }
  .cuerpo-limpio { background: #fff; }
  .cert-hoja { margin: 0; padding: 0; max-width: 100%; }
  .cert-marco { box-shadow: none; }
  @page { size: landscape; margin: 1cm; }
}