/* ============================================================
   Aulaspot · Nueva estética (capa de apariencia)
   Se carga DESPUÉS de los estilos de cada página.
   Para volver al estilo anterior: quitar el <link> a /nuevo.css
   (y la clase theme-light por defecto del <body>).
   ============================================================ */

/* ---- Tokens: tema claro "nuevo" (sustituye al claro anterior) ---- */
body.theme-light,
body.nuevo-legal{
  --bg:#F4F3F1; --bg-elev:#EDEBE7; --card:#FFFFFF; --card-hov:#FAF9F7;
  --text:#17161C; --text-muted:#55535F; --text-dim:#6B6877;
  --border:#E4E1DC; --border-hov:#CFCBC4;
  --header-bg:rgba(244,243,241,.82); --hover-tint:rgba(23,22,28,.04);
  --accent-text:#4F46E5; --accent-soft:#4F46E5; --accent-2-text:#9A4FE0;
  --accent-glow:rgba(108,99,255,.28);
  --cta-tint:#EEEDFF;
  --login-glow:rgba(139,123,255,.20);
  --ink:#1C2B22; --grad:linear-gradient(135deg,#8B7BFF 0%,#6C63FF 45%,#B05CF0 100%);
}
body.nuevo-legal{--accent:#6C63FF}

/* ---- Tipografía ---- */
body,button,input,textarea,select{font-family:'Geist','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif}
.mk-flow .n{font-family:'Geist','Poppins',sans-serif}
.h1{font-size:clamp(36px,5.6vw,68px);font-weight:500;line-height:1.04;letter-spacing:-.045em}
.h2{font-size:clamp(28px,3.8vw,46px);font-weight:500;line-height:1.08;letter-spacing:-.04em}
.body-lg{font-size:18px;line-height:1.6}
.eyebrow{display:inline-block;font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;
  color:#2A3318;background:#EEF1B5;padding:6px 14px;border-radius:999px}
.feat-card h3,.paso h3,.mk-copy h3{font-weight:600;letter-spacing:-.02em}
.mk-copy h3{font-weight:500;letter-spacing:-.03em}
.ia-stat strong{font-weight:500;letter-spacing:-.04em}

/* ---- Botones: píldora; primario en tinta (tema claro) ---- */
.btn{border-radius:999px;font-weight:500}
.btn-sm{padding:9px 16px}
body.theme-light .btn-primary{background:var(--ink);color:#fff;box-shadow:none}
body.theme-light .btn-primary:hover{background:#2D4336;box-shadow:none;transform:translateY(-1px)}
body.theme-light .btn-ghost{background:var(--card);border-color:var(--border)}
.theme-toggle{border-radius:50%}
.footer-social a{border-radius:50%}

/* ---- Cabecera ---- */
body.theme-light header{border-bottom-color:transparent}
.header-nav a{font-weight:500}

/* ---- Hero: fondo limpio con halo violeta (sin hilos ni partículas en claro) ---- */
body.theme-light .hero-bg-hilos,
body.theme-light .hero-bg-particula,
body.theme-light .hero-bg-dots{display:none}
body.theme-light .hero-bg-glow{background:radial-gradient(ellipse 70% 50% at 70% 40%, rgba(139,123,255,.28), rgba(176,92,240,.10) 55%, transparent 75%)}
@media(max-width:880px){
  body.theme-light .hero-bg-glow{background:radial-gradient(ellipse 100% 40% at 50% 55%, rgba(139,123,255,.26), transparent 70%)}
}

/* ---- Tarjetas y paneles: radios grandes, borde fino, sombras suaves ---- */
.pipeline-demo,.lang-demo,.ia-chat,.mk-win{border-radius:24px}
.pipeline-col{border-radius:16px}
.pcard{border-radius:12px}
.feat-card{border-radius:24px;padding:26px 24px}
.mk-nota div{border-radius:20px}
.lang-preview,.ia-msg.bot,.ia-form input{border-radius:14px}
.ia-chip,.lang-pill{border-radius:999px}
body.theme-light .pipeline-demo{box-shadow:0 30px 80px -24px rgba(79,70,229,.22)}
body.theme-light .ia-chat,body.theme-light .mk-win{box-shadow:0 30px 70px -34px rgba(79,70,229,.28)}
body.theme-light .feat-card:hover{box-shadow:0 18px 44px -22px rgba(79,70,229,.30)}
.feat-icon{width:44px;height:44px;border-radius:14px}
.pcard-score{border-radius:999px}
.ia-check,.mk-check{border-radius:50%}
.ia-ico{border-radius:12px}
.metricas,.lang-showcase,.como-empezar,.mk-section{border-color:var(--border)}

/* ---- Cifras grandes y ligeras ---- */
.metrica-num{font-family:inherit;font-weight:300;font-size:clamp(40px,5.6vw,68px);letter-spacing:-.05em;color:var(--text)}
.paso-num{font-family:inherit;font-size:40px;font-weight:300;letter-spacing:-.04em;line-height:1;margin-bottom:16px;
  background:var(--grad,linear-gradient(135deg,#8B7BFF 0%,#6C63FF 45%,#B05CF0 100%));-webkit-background-clip:text;background-clip:text;color:#6C63FF;-webkit-text-fill-color:transparent;display:inline-block}

/* ---- Llamada final: banda en degradado violeta (tema claro) ---- */
body.theme-light .cta-final{background:var(--bg);padding:96px 0}
body.theme-light .cta-final::before{display:none}
body.theme-light .cta-final-inner{max-width:1100px;padding:76px 28px;border-radius:40px;background:var(--grad);color:#fff;position:relative;overflow:hidden}
body.theme-light .cta-final-inner::before{content:"";position:absolute;right:-120px;top:-160px;width:440px;height:440px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
body.theme-light .cta-final-inner::after{content:"";position:absolute;left:-100px;bottom:-200px;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
body.theme-light .cta-final-inner>*{position:relative;z-index:1}
body.theme-light .cta-final .h2,body.theme-light .cta-final .body-lg{color:#fff}
body.theme-light .cta-final .btn-primary{background:#fff;color:var(--ink)}
body.theme-light .cta-final .btn-primary:hover{background:#F4F3F1}
@media(max-width:600px){body.theme-light .cta-final-inner{padding:56px 22px;border-radius:28px}}

/* ---- FAQ y pie ---- */
.faq-q{font-weight:500}
body.theme-light footer{background:var(--card)}

/* ---- Páginas legales (sin selector de tema): claro nuevo fijo ---- */
body.nuevo-legal{background:var(--bg);color:var(--text)}
body.nuevo-legal .nota{border-radius:20px}

/* El eyebrow del hero era display:block; en píldora no debe estirarse */
.hero-copy .eyebrow{width:fit-content;margin-bottom:22px}

/* Contraste del texto blanco sobre la banda final: degradado algo más profundo */
body.theme-light .cta-final-inner{background:linear-gradient(135deg,#6B65D6 0%,#5B55C8 100%)}

/* ---- Artículos del blog ---- */
.article-title{font-size:clamp(30px,4.4vw,50px);font-weight:500;line-height:1.08;letter-spacing:-.04em}
.article-cat{display:inline-block;font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;background:rgba(108,99,255,.10);padding:6px 14px;border-radius:999px}
.article-body h2{font-weight:600;letter-spacing:-.025em}
body.theme-light .article-cta,body.theme-light .cta-box{border-radius:24px}
.blog-card{border-radius:24px;padding:26px 24px}


/* ================= Acercamiento al boceto (v2) ================= */
/* Hero centrado con producto debajo */
.hero{padding:140px 0 0}
.hero-grid{grid-template-columns:1fr;gap:56px;text-align:center}
.hero-copy .h1{max-width:980px;margin-left:auto;margin-right:auto}
.hero-copy .body-lg{max-width:640px;margin-left:auto;margin-right:auto}
.hero-ctas,.hero-hint{justify-content:center}
.hero-pill{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:6px 16px 6px 6px;font-size:14px;color:var(--text-muted);margin-bottom:26px;max-width:100%}
.hero-pill b{background:rgba(108,99,255,.10);color:var(--accent-text);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;flex:none}
.hero-pill:hover{border-color:var(--border-hov);color:var(--text)}
.pipeline-demo{max-width:1040px;width:100%;margin:0 auto;border-radius:32px 32px 0 0;border-bottom:none;padding:16px 16px 0;text-align:left}
.pipeline-col{border-radius:18px 18px 0 0;min-height:300px}
@media(max-width:880px){.hero{padding:112px 0 0}.hero-grid{gap:40px}.hero-pill{font-size:13px}}
/* La frase junto a «Nuevo» siempre en una línea */
.hero-pill{white-space:nowrap}
@media(max-width:560px){.hero-pill{font-size:clamp(10px,3vw,13px);gap:7px;padding:5px clamp(8px,3vw,14px) 5px 5px}.hero-pill b{font-size:clamp(10px,2.9vw,12px);padding:4px 9px}}

/* Métricas: tarjetas con cifras grandes */
.metricas{background:transparent;border:none}
.metricas-grid{gap:20px;padding:56px 28px 8px;text-align:left}
.metrica{background:var(--card);border:1px solid var(--border);border-radius:28px;padding:32px}
.metrica-num{font-size:clamp(48px,6.2vw,88px);line-height:1}
.metrica-label{font-size:16px;margin-top:14px;line-height:1.5}

/* Cómo empezar: panel oscuro */
.como-empezar{background:transparent;border-top:none;padding:110px 0 0}
.como-empezar .wrap{background:#1C2B22;color:#fff;border-radius:40px;padding:72px 56px;width:min(1180px,calc(100% - 40px))}
.como-empezar .h2{color:#fff}
.como-empezar .body-lg{color:#C9C7D1}
.como-empezar .eyebrow{background:rgba(255,255,255,.12);color:#fff}
.como-empezar .pasos{gap:20px}
.como-empezar .paso{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:28px}
.como-empezar .paso h3{color:#fff}
.como-empezar .paso p{color:#C9C7D1}
.como-empezar .paso-num{font-size:48px;background-image:linear-gradient(135deg,#B4ADFF 0%,#8B7BFF 45%,#C58BF5 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#B4ADFF}
@media(max-width:820px){.como-empezar{padding-top:72px}.como-empezar .wrap{padding:48px 22px;border-radius:28px}}

/* Cabecera: «Iniciar sesión» discreto (tema claro) */
body.theme-light .header-ctas .btn-ghost{background:transparent;border-color:transparent}

/* ---- Tema oscuro: botón primario en lima (coherente con el CRM) ---- */
body:not(.theme-light) .btn-primary{background:#EEF1B5;color:#1C2B22;box-shadow:none}
body:not(.theme-light) .btn-primary:hover{background:#F6F8D0;box-shadow:none;transform:translateY(-1px)}

@media(max-width:375px){.hero-pill .hp-x{display:none}}