/* Lumina CRM · css/guia.css — guía de inicio para la dueña (prototype/guia.html).
   Presentación vertical: un paso por pantalla, texto grande y una captura real del celular. Sin dependencias.
   Las fuentes y los colores son los del sistema de diseño (tokens.css), copiados aquí para que la guía no dependa
   del resto de la app. Funciona en celular, en escritorio (flechas del teclado) y al imprimir (un paso por hoja). */

@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url('../assets/fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-display: swap; src: url('../assets/fonts/outfit-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-700.woff2') format('woff2'); }

:root {
  --bg: #FFFFFF; --surface: #F3F8F6; --surface-2: #EAF2EF; --text: #1F2230; --text-2: #5B5F73; --text-3: #9A9DB0; --border: #E0EAE6;
  --primary: #1E7066; --primary-ink: #FFFFFF; --primary-soft: #E1F1EE; --success: #3F8F5F; --success-soft: #E6F4EB; --warning: #D98E04; --warning-soft: #FFF3DC;
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 20px; --ancho: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 19px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--primary); }
strong { font-weight: 700; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------- barra fija */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.barra .logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; text-decoration: none; color: var(--text); }
.barra .logo .marca-logo { height: 26px; width: auto; }
.marca-logo--oscuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marca-logo--claro { display: none; } :root:not([data-theme="light"]) .marca-logo--oscuro { display: inline-block; } }
.barra .contador { color: var(--text-2); font-size: 16px; }
.barra .espacio { flex: 1; }
.barra .btn { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; text-decoration: none; }
.barra .btn:hover { background: var(--surface-2); }
.barra .btn--primario { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* ---------------------------------------------------------------- portada */
.portada { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; justify-items: start; gap: 28px; max-width: var(--ancho); margin: 0 auto; padding: 96px 24px 48px; scroll-snap-align: start; }
.portada .eyebrow { color: var(--primary); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px; }
.portada h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 700; max-width: 14ch; }
.portada .bajada { font-size: clamp(20px, 2.4vw, 26px); color: var(--text-2); max-width: 32ch; }
.portada .tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; width: 100%; }
.tarjeta { background: var(--surface); border-radius: var(--radius); padding: 22px 24px; }
.tarjeta h3 { font-size: 20px; margin-bottom: 10px; }
.tarjeta ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.tarjeta li { padding-left: 30px; position: relative; font-size: 17px; }
.tarjeta li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--primary); }
.tarjeta--direccion { background: var(--primary-soft); }
.direccion { display: inline-block; margin-top: 8px; padding: 12px 16px; background: var(--bg); border-radius: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; color: var(--primary); word-break: break-all; text-decoration: none; }

/* ---------------------------------------------------------------- partes y pasos */
.parte { max-width: var(--ancho); margin: 0 auto; padding: 88px 24px 0; scroll-snap-align: start; }
.parte h2 { font-size: clamp(26px, 3.6vw, 40px); }
.parte .sub { color: var(--text-2); font-size: 20px; margin-top: 8px; }
.paso { min-height: 100vh; min-height: 100dvh; max-width: var(--ancho); margin: 0 auto; padding: 88px 24px 40px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; scroll-snap-align: start; }
.paso .num { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-family: var(--font-display); font-weight: 700; font-size: 26px; margin-bottom: 14px; }
.paso h2 { font-size: clamp(28px, 3.8vw, 44px); margin-bottom: 14px; }
.paso .intro { color: var(--text-2); font-size: 20px; margin-bottom: 18px; }
.hacer { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: accion; }
.hacer li { position: relative; padding-left: 44px; font-size: 20px; counter-increment: accion; }
.hacer li::before { content: counter(accion); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; font-size: 16px; }
.hacer li b { font-weight: 700; }
.ojo { margin-top: 20px; padding: 14px 18px; border-radius: 14px; background: var(--warning-soft); color: var(--text); font-size: 17px; border-left: 4px solid var(--warning); }
.ojo b { color: var(--warning); }
.nota { margin-top: 20px; padding: 14px 18px; border-radius: 14px; background: var(--success-soft); font-size: 17px; border-left: 4px solid var(--success); }
.nota b { color: var(--success); }

/* capturas: marco de celular */
.pantalla { margin: 0; display: flex; justify-content: center; gap: 18px; }
.pantalla img { width: min(100%, 320px); height: auto; border-radius: 30px; border: 7px solid #1F2230; box-shadow: 0 20px 50px rgba(31, 34, 48, 0.18); background: #fff; }
.pantalla--doble img { width: min(100%, 270px); }
.pantalla figcaption { display: none; }

/* paso sin captura (instalar): tarjetas */
.instalar { display: grid; gap: 14px; }
.instalar .tarjeta h3 { display: flex; align-items: center; gap: 10px; }
.instalar .tarjeta li::before { display: none; }
.instalar .tarjeta li { padding-left: 0; }

/* ---------------------------------------------------------------- qué hay de nuevo (lámina final, ADR-0034) */
.novedades { min-height: 100vh; min-height: 100dvh; max-width: var(--ancho); margin: 0 auto; padding: 88px 24px 40px; display: grid; align-content: center; gap: 18px; scroll-snap-align: start; }
.novedades .eyebrow { color: var(--primary); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px; }
.novedades h2 { font-size: clamp(26px, 3.6vw, 40px); max-width: 24ch; }
.tarjeta--novedad { background: var(--primary-soft); }
.tarjeta--novedad ul { gap: 14px; }
.tarjeta--novedad li { font-size: 18px; padding-left: 34px; }
.tarjeta--novedad li::before { top: 5px; width: 20px; height: 20px; border-radius: 50%; border-color: var(--primary); background: var(--bg); }
.tarjeta--novedad .hacerlo { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(30, 112, 102, 0.25); color: var(--text-2); font-size: 17px; }

/* ---------------------------------------------------------------- cierre */
.cierre { max-width: var(--ancho); margin: 0 auto; padding: 88px 24px 96px; display: grid; gap: 22px; scroll-snap-align: start; }
.cierre h2 { font-size: clamp(28px, 3.8vw, 44px); }
.contacto { font-size: 20px; padding: 18px 22px; background: var(--primary-soft); border-radius: var(--radius); }
.contacto b { color: var(--primary); }
.pie { color: var(--text-3); font-size: 15px; }

/* ---------------------------------------------------------------- celular */
@media (max-width: 899px) {
  body { font-size: 17px; }
  .barra { padding: 8px 12px; gap: 8px; }
  .barra .contador { font-size: 14px; }
  .barra .btn { font-size: 14px; padding: 7px 11px; }
  .barra .solo-escritorio { display: none; }
  .portada { padding-top: 84px; gap: 20px; }
  .paso { grid-template-columns: 1fr; gap: 22px; padding: 76px 16px 32px; align-content: start; }
  .paso .texto { order: 2; }
  .paso .pantalla { order: 1; }
  .pantalla img { width: min(100%, 250px); border-width: 6px; border-radius: 24px; }
  .pantalla--doble { flex-wrap: wrap; }
  .pantalla--doble img { width: min(46%, 200px); }
  .hacer li { font-size: 17px; padding-left: 40px; }
  .paso .intro { font-size: 17px; }
  .ojo, .nota { font-size: 15px; }
  .parte { padding: 76px 16px 0; }
  .novedades { padding: 76px 16px 32px; }
  .tarjeta--novedad li { font-size: 16px; }
}

/* ---------------------------------------------------------------- impresión: un paso por hoja */
@media print {
  @page { size: A4; margin: 12mm; }
  body { font-size: 12pt; }
  .barra { display: none; }
  .portada, .parte, .paso, .novedades, .cierre { min-height: 0; padding: 0; margin: 0 auto; }
  .portada, .paso, .novedades { break-after: page; }
  .parte { break-before: page; padding-top: 10mm; }
  .paso { grid-template-columns: 1.2fr 0.8fr; gap: 10mm; padding-top: 6mm; }
  .paso h2 { font-size: 22pt; }
  .hacer li, .paso .intro { font-size: 12pt; }
  .pantalla img { width: 62mm; border-width: 3px; box-shadow: none; }
  .pantalla--doble img { width: 48mm; }
  .ojo, .nota { font-size: 10.5pt; }
  a { color: inherit; text-decoration: none; }
}