/* ==========================================================================
   Sistema visual · @soy_raymondreyes
   Un solo archivo para: (1) láminas de carrusel, (2) web de recursos (clases w-*),
   (3) guías en PDF (clases g-*). Cada bloque está acotado para no pisar a los demás.

   (1) CARRUSELES
   Lienzo: 1080 × 1350 px (4:5) · márgenes de seguridad 80 px
   Clases en <body>:
     tema-claro (principal) | tema-oscuro (columna «Lo construí»)
     acento-lima (predeterminado) | acento-cobalto (reserva)
     animado  → activa las animaciones CSS (sin ella = versión estática)
   Duración de la versión animada: 7 s (data-duracion-ms="7000" en <body>).
   Regla de lectura: todo texto que deba leerse ≥ 34 px. Solo lo marcado
   con [data-decorativo] puede ser menor (prompt borroso, número de lámina).
   Contraste: todo texto ≥ 4,5:1 contra su fondo real (ratios en comentarios).
   ========================================================================== */

/* ---------- Fuentes locales (SIL OFL 1.1, ver /fuentes) ---------- */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fuentes/bricolage-grotesque-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fuentes/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fuentes/instrument-serif-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fuentes/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

/* Propiedades registradas (para animarlas con CSS puro) */
@property --corte { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }

/* ---------- Temas ---------- */
.tema-claro {
  --fondo: #F4F3EE;            /* blanco roto */
  --punto: rgba(18, 19, 16, 0.10);
  --superficie: #FFFFFF;
  --superficie-2: #EEEDE7;
  --borde: rgba(18, 19, 16, 0.12);
  --pista: #E2E1DA;
  --sombra: 0 1px 0 rgba(18, 19, 16, 0.04), 0 24px 48px -28px rgba(18, 19, 16, 0.22);
  --texto: #121310;            /* 16,8:1 sobre fondo */
  --texto-2: #5C5D57;          /* 6,0:1 fondo · 6,6:1 superficie · 5,7:1 superficie-2 */
  --tapa: rgba(244, 243, 238, 0.55);
}
.tema-oscuro {
  --fondo: #0E0F0C;
  --punto: rgba(242, 241, 234, 0.07);
  --superficie: #181915;
  --superficie-2: #22231F;
  --borde: rgba(242, 241, 234, 0.12);
  --pista: rgba(242, 241, 234, 0.14);
  --sombra: none;
  --texto: #F2F1EA;            /* 17,0:1 */
  --texto-2: #A3A39A;          /* 7,6:1 fondo · 6,2:1 superficie-2 */
  --tapa: rgba(14, 15, 12, 0.55);
}

/* ---------- Acentos ---------- */
/* LIMA en claro: solo relleno, nunca texto (1,04:1 sobre el fondo). Negro encima: 16,1:1 */
.tema-claro.acento-lima {
  --acento: #D4FF3A;
  --sobre-acento: #121310;
  --sobre-acento-2: #3A4212;   /* 9,2:1 sobre lima */
  --acento-texto: #121310;     /* lo acentuado va en negro con marcador lima detrás */
  --cursiva: #121310;
  --marcador: #D4FF3A;
  --resalte-pad: 0.16em;
  --linea: #121310;
  --borde-barra: #121310;      /* contorno para que la barra lima se vea sobre claro */
}
/* LIMA en oscuro: sí puede ser texto (16,6:1) */
.tema-oscuro.acento-lima {
  --acento: #D4FF3A;
  --sobre-acento: #121310;
  --sobre-acento-2: #3A4212;
  --acento-texto: #D4FF3A;
  --cursiva: #D4FF3A;
  --marcador: transparent;
  --resalte-pad: 0;
  --linea: #D4FF3A;
  --borde-barra: transparent;
}
/* COBALTO (reserva) */
.tema-claro.acento-cobalto {
  --acento: #2343E0;           /* 6,4:1 como texto sobre fondo */
  --sobre-acento: #FFFFFF;     /* 7,1:1 */
  --sobre-acento-2: #DCE2FF;   /* 5,5:1 */
  --acento-texto: #2343E0;
  --cursiva: #2343E0;
  --marcador: transparent;
  --resalte-pad: 0;
  --linea: #2343E0;
  --borde-barra: transparent;
}
.tema-oscuro.acento-cobalto {
  --acento: #7D93FF;           /* 6,9:1 sobre fondo oscuro */
  --sobre-acento: #0E0F0C;     /* 6,9:1 */
  --sobre-acento-2: #1F2858;   /* 5,0:1 */
  --acento-texto: #7D93FF;
  --cursiva: #7D93FF;
  --marcador: transparent;
  --resalte-pad: 0;
  --linea: #7D93FF;
  --borde-barra: transparent;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Solo las láminas de carrusel (llevan data-plantilla en <body>) tienen tamaño fijo */
body[data-plantilla] { width: 1080px; height: 1350px; overflow: hidden; background: var(--fondo); --duracion: 7s; }
ol, ul { list-style: none; margin: 0; padding: 0; }
p, h1, h2, blockquote, figure { margin: 0; }
img { display: block; }
svg { flex-shrink: 0; }

.lamina {
  position: relative; width: 1080px; height: 1350px; padding: 80px;
  display: flex; flex-direction: column; overflow: hidden;
  background-color: var(--fondo);
  background-image: radial-gradient(var(--punto) 1.5px, transparent 1.5px);
  background-size: 32px 32px; background-position: 16px 16px;
  color: var(--texto);
  font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif; font-weight: 500;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; font-weight: 500; }
.serif { font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; }
.texto-2 { color: var(--texto-2); }
.negrita { font-weight: 800; }

/* ---------- Fijos: cabecera + barra de progreso ---------- */
.cabecera { flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.cabecera-fila { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.usuario { font-size: 34px; line-height: 1.2; color: var(--texto-2); white-space: nowrap; }
.num-lamina { font-size: 28px; line-height: 1.2; color: var(--texto-2); white-space: nowrap; letter-spacing: 0.04em; }
.barra { height: 10px; border-radius: 10px; background: var(--pista); overflow: hidden; }
.barra-relleno {
  height: 100%; width: calc(var(--progreso, 0) * 100%); border-radius: 10px;
  background: var(--acento); box-shadow: inset 0 0 0 1.5px var(--borde-barra);
  transform-origin: left center;
}

/* Cuerpo de la lámina: ocupa el resto */
.cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 52px; }

/* ---------- Tipografía ---------- */
.etiqueta {
  align-self: flex-start; display: inline-flex; white-space: nowrap;
  padding: 12px 24px; border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento);
  font-size: 34px; line-height: 1.2; letter-spacing: 0.04em;
}
.titular { font-size: 84px; line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.titular-serif { font-size: 116px; line-height: 1.02; letter-spacing: -0.015em; }
.titular-m { font-size: 64px; line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.texto-l { font-size: 38px; line-height: 1.28; color: var(--texto-2); text-wrap: pretty; }
.texto-m { font-size: 34px; line-height: 1.3; text-wrap: pretty; }

/* Cursiva del titular: lima = negro con subrayado-marcador detrás · cobalto = color */
.cursiva {
  color: var(--cursiva);
  background-image: linear-gradient(var(--marcador), var(--marcador));
  background-repeat: no-repeat; background-position: 0 86%; background-size: 100% 32%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0.06em;
}
/* Palabra resaltada dentro de texto */
.resalte {
  color: var(--acento-texto); background: var(--marcador);
  padding: 0 var(--resalte-pad); border-radius: 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Componentes comunes ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 28px; box-shadow: var(--sombra); }
.avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--superficie-2); box-shadow: 0 0 0 3px var(--linea); }
.boton {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap;
  height: 76px; padding: 0 28px; border-radius: 18px;
  background: var(--acento); color: var(--sobre-acento);
  font-size: 34px; font-weight: 800;
}
.pie { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 36px; }
.desliza { display: inline-flex; align-items: center; gap: 16px; font-size: 34px; white-space: nowrap; }

/* ===== portada ===== */
.portada .cuerpo { gap: 26px; }
.portada .titulo-bloque { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mosaico { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.celda {
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  min-height: 128px; padding: 20px 22px; border-radius: 20px;
  background: var(--superficie); border: 1px solid var(--borde);
}
.celda-num { font-size: 34px; line-height: 1.2; }
.celda-nombre { font-size: 34px; line-height: 1.1; font-weight: 800; }

/* ===== elemento (y todas las demo-*) ===== */
.elemento .cuerpo { margin-top: 44px; }
.elemento-cabeza { display: flex; align-items: flex-end; gap: 28px; }
.elemento-num { font-size: 150px; line-height: 0.82; flex-shrink: 0; }
.elemento-titulos { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-bottom: 4px; }
.pieza { font-size: 34px; line-height: 1.2; color: var(--texto-2); }
.beneficio { margin-top: 22px; }
.demo {
  position: relative; flex: 1; min-height: 0; margin-top: 30px; padding: 34px;
  border-radius: 28px; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra);
  overflow: hidden;
}
.usalo { margin-top: 28px; font-size: 34px; line-height: 1.3; }
.usalo .resalte { font-weight: 800; }
.prompt {
  flex-shrink: 0; margin-top: 26px; display: flex; align-items: center; gap: 18px;
  height: 100px; padding: 0 12px 0 28px; border-radius: 24px;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra);
}
.borroso {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  font-size: 26px; color: var(--texto); filter: blur(7px); user-select: none;
}

/* elemento genérico: imagen de demo */
.demo-imagen-marco { display: flex; align-items: center; justify-content: center; }
.demo-imagen { width: 100%; height: 100%; object-fit: contain; }

/* ===== demo-flujo ===== */
.flujo { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.nodo {
  position: relative; display: flex; align-items: center; gap: 24px;
  padding: 16px 20px; margin: 0 -8px; border-radius: 22px;
}
.nodo + .nodo::before {
  content: ''; position: absolute; left: 57px; top: -22px; width: 3px; height: 22px; background: var(--linea);
}
.nodo-icono {
  width: 76px; height: 76px; flex-shrink: 0; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--texto); color: var(--fondo); font-size: 34px;
}
.nodo-icono .ico-check { display: block; }
.nodo-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nodo-titulo { font-size: 34px; line-height: 1.2; font-weight: 800; }
.nodo-detalle { font-size: 34px; line-height: 1.2; color: var(--texto-2); }
.nodo.activo { background: var(--acento); color: var(--sobre-acento); }
.nodo.activo .nodo-detalle { color: var(--sobre-acento-2); }
.nodo.activo .nodo-icono { background: var(--sobre-acento); color: var(--acento); }

/* ===== demo-chat ===== */
.chat { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.burbuja { max-width: 800px; padding: 22px 28px; font-size: 34px; line-height: 1.3; text-wrap: pretty; }
.burbuja.entrante { align-self: flex-start; background: var(--superficie-2); border-radius: 28px 28px 28px 8px; }
.burbuja.saliente { align-self: flex-end; background: var(--acento); color: var(--sobre-acento); border-radius: 28px 28px 8px 28px; }
.chat-respuesta { position: relative; display: flex; flex-direction: column; }
.escribiendo {
  position: absolute; right: 0; top: 0; display: none; gap: 10px; align-items: center;
  height: 86px; padding: 0 30px; border-radius: 28px 28px 8px 28px; background: var(--superficie-2);
}
.escribiendo i { width: 14px; height: 14px; border-radius: 50%; background: var(--texto-2); display: block; }

/* ===== demo-celular ===== */
.demo-celular { padding: 0; display: flex; justify-content: center; background: var(--superficie-2); }
.telefono {
  margin-top: 34px; width: 640px; height: 900px; padding: 14px; flex-shrink: 0;
  border-radius: 64px; background: var(--texto); box-shadow: var(--sombra);
}
.pantalla { height: 100%; border-radius: 52px; background: var(--fondo); padding: 26px 18px; overflow: hidden; }
.notis { display: flex; flex-direction: column; gap: 12px; }
.noti {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 26px;
  background: var(--superficie); border: 1px solid var(--borde);
}
.noti:first-child { background: var(--acento); color: var(--sobre-acento); border-color: transparent; }
.noti:first-child .noti-texto { color: var(--sobre-acento-2); }
.noti:first-child .noti-icono { background: var(--sobre-acento); color: var(--acento); }
.noti-icono { width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--texto); color: var(--fondo); }
.noti-textos { display: flex; flex-direction: column; min-width: 0; }
.noti-titulo { font-size: 34px; line-height: 1.2; font-weight: 800; }
.noti-texto { font-size: 34px; line-height: 1.2; color: var(--texto-2); }

/* ===== demo-antes-despues ===== */
.demo-ad { padding: 0; --corte: 50%; }
.ad-capa { position: absolute; inset: 0; display: flex; align-items: center; }
.ad-antes { background: var(--superficie-2); }
.ad-despues { background: var(--acento); color: var(--sobre-acento); clip-path: inset(0 0 0 var(--corte)); }
.ad-lado { width: 50%; padding: 0 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ad-despues .ad-lado { margin-left: 50%; }
.ad-etiqueta {
  display: inline-flex; padding: 10px 20px; border-radius: 999px; font-size: 34px; line-height: 1.2; white-space: nowrap;
  background: var(--texto); color: var(--fondo);
}
.ad-despues .ad-etiqueta { background: var(--sobre-acento); color: var(--acento); }
.ad-valor { font-size: 120px; line-height: 0.95; white-space: nowrap; }
.ad-texto { font-size: 34px; line-height: 1.25; }
.ad-antes .ad-texto { color: var(--texto-2); }
.ad-despues .ad-texto { color: var(--sobre-acento-2); }
.ad-linea { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 4px; margin-left: -2px; background: var(--texto); }
.ad-tirador {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: var(--texto); color: var(--fondo); display: flex; align-items: center; justify-content: center;
}

/* ===== demo-cifra ===== */
.demo-cifra { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.cifra { font-size: 170px; line-height: 0.9; white-space: nowrap; color: var(--cursiva); }
.cifra-valor { counter-reset: n var(--n); }
.cifra-etiqueta { font-size: 34px; line-height: 1.25; max-width: 760px; }
.grafico { display: flex; align-items: flex-end; gap: 14px; height: 120px; margin-top: 10px; }
.grafico i { display: block; flex: 1; border-radius: 10px 10px 4px 4px; background: var(--texto); transform-origin: bottom; }
.grafico i:last-child { background: var(--acento); box-shadow: inset 0 0 0 2px var(--borde-barra); }
.grafico i:nth-child(1) { height: 22%; } .grafico i:nth-child(2) { height: 30%; }
.grafico i:nth-child(3) { height: 28%; } .grafico i:nth-child(4) { height: 44%; }
.grafico i:nth-child(5) { height: 52%; } .grafico i:nth-child(6) { height: 66%; }
.grafico i:nth-child(7) { height: 78%; } .grafico i:nth-child(8) { height: 100%; }

/* ===== resumen ===== */
.resumen .cuerpo { gap: 24px; }
.lista-resumen { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.item-resumen {
  display: flex; align-items: center; gap: 24px; padding: 16px 24px; border-radius: 20px;
  background: var(--superficie); border: 1px solid var(--borde);
}
.item-num { font-size: 34px; line-height: 1.2; flex-shrink: 0; }
.item-texto { font-size: 34px; line-height: 1.2; font-weight: 800; min-width: 0; }
.resumen .pie { margin-top: auto; padding-top: 28px; }

/* ===== recurso ===== */
.recurso .cuerpo { gap: 24px; }
.doc { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.doc-cabecera { display: flex; align-items: center; gap: 18px; padding: 24px 30px; border-bottom: 1px solid var(--borde); }
.doc-nombre { font-size: 34px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.doc-cuerpo { position: relative; flex: 1; padding: 30px; display: flex; flex-direction: column; gap: 18px; filter: blur(9px); user-select: none; }
.doc-cuerpo b { display: block; height: 30px; border-radius: 8px; background: var(--texto); opacity: 0.85; }
.doc-cuerpo s { display: block; height: 18px; border-radius: 6px; background: var(--texto-2); opacity: 0.6; text-decoration: none; }
.doc-cuerpo .doc-texto { font-size: 26px; line-height: 1.5; color: var(--texto); }
.candado {
  position: absolute; left: 50%; top: 58%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--borde-barra), 0 18px 40px -16px rgba(0, 0, 0, 0.35);
}
.recurso-cta { flex-shrink: 0; font-size: 48px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.recurso-cta .boton-texto { display: inline-block; padding: 2px 18px; border-radius: 14px; background: var(--acento); color: var(--sobre-acento); }

/* ===== frase ===== */
.frase .cuerpo { justify-content: center; gap: 40px; }
.frase-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.frase-sans { font-size: 92px; line-height: 1.0; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.frase-serif { font-size: 118px; line-height: 1.04; letter-spacing: -0.015em; }
.frase-fuente { font-size: 34px; line-height: 1.3; color: var(--texto-2); }
.pie.firma { justify-content: flex-start; gap: 22px; }
.firma-textos { display: flex; flex-direction: column; }
.firma-nombre { font-size: 34px; line-height: 1.2; font-weight: 800; }
.firma-rol { font-size: 34px; line-height: 1.2; color: var(--texto-2); }

/* ===== captura ===== */
.captura .cuerpo { gap: 26px; }
.marco { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; }
.marco-caja { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--texto); box-shadow: var(--sombra); }
.marco-ventana .marco-caja { width: 100%; height: 100%; border-radius: 26px; padding: 0 10px 10px; }
.marco-ventana .marco-barra { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.marco-barra i { width: 16px; height: 16px; border-radius: 50%; background: var(--fondo); opacity: 0.5; display: block; }
.marco-telefono .marco-caja { height: 100%; aspect-ratio: 9 / 18; border-radius: 56px; padding: 14px; }
.marco-telefono .marco-barra { display: none; }
.marco-pantalla { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--superficie); border-radius: 18px; }
.marco-telefono .marco-pantalla { border-radius: 44px; }
.marco-contenido { position: absolute; inset: 0; transform-origin: 50% 0; }
.captura-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tapa {
  position: absolute; left: var(--x, 10%); top: var(--y, 10%); width: var(--w, 40%); height: var(--h, 10%);
  border-radius: 12px; background: var(--tapa);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: inset 0 0 0 2px var(--borde);
}
.captura-texto { flex-shrink: 0; }

/* ===== cierre ===== */
.cierre .cuerpo { gap: 0; }
.cierre-comenta { margin-top: 26px; font-size: 116px; line-height: 0.92; font-weight: 800; letter-spacing: -0.04em; }
.cierre-palabra { align-self: flex-start; font-size: 190px; line-height: 0.95; letter-spacing: -0.01em; white-space: nowrap; }
.cierre-promesa { margin-top: 18px; }
.dm { margin-top: auto; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.dm-cabecera { display: flex; align-items: center; gap: 20px; }
.dm-nombre { font-size: 34px; line-height: 1.2; font-weight: 800; }
.dm-mensajes { position: relative; display: flex; flex-direction: column; gap: 16px; }
.dm .burbuja { padding: 20px 26px; }
.dm .escribiendo { left: 0; right: auto; border-radius: 28px 28px 28px 8px; }
.enlace {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 16px; white-space: nowrap;
  padding: 16px 24px; border-radius: 18px; background: var(--acento); color: var(--sobre-acento);
  font-size: 34px; line-height: 1.2; font-weight: 800;
}
.acciones { flex-shrink: 0; margin-top: 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.accion { display: inline-flex; align-items: center; gap: 12px; font-size: 34px; line-height: 1.2; white-space: nowrap; }
.accion.principal { font-weight: 800; }

/* ==========================================================================
   ANIMACIONES (solo con body.animado)
   - Todo con @keyframes, duración e iteraciones finitas, sin aleatoriedad.
   - Fotograma 0: el mensaje ya se entiende (titulares y textos visibles).
   - Todo termina antes de 6,2 s y se queda quieto; el reloj marca 7 s.
   ========================================================================== */
body.animado::after { content: ''; position: fixed; width: 0; height: 0; animation: reloj var(--duracion) linear both; }
@keyframes reloj { from { opacity: 0; } to { opacity: 0; } }

/* Barra de progreso: crece hasta su valor */
.animado .barra-relleno { animation: barra 0.9s cubic-bezier(.2,.7,.2,1) 0.1s both; }
@keyframes barra { from { transform: scaleX(0.35); } to { transform: scaleX(1); } }

/* Marcador lima que se dibuja bajo la cursiva / número */
.animado .cursiva { animation: marcador 0.9s cubic-bezier(.6,0,.2,1) 0.5s both; }
@keyframes marcador { from { background-size: 0% 32%; } to { background-size: 100% 32%; } }

/* «Desliza →»: empujoncito, 3 veces y se queda en reposo */
.animado .desliza svg { animation: empuje 0.9s ease-in-out 1.6s 3 both; }
@keyframes empuje { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }

/* Portada: el marcador recorre los números del mosaico */
.animado .celda-num .resalte { animation: celda-luz 0.5s ease-out both; }
.animado .celda:nth-child(1) .resalte { animation-delay: 1.4s; }
.animado .celda:nth-child(2) .resalte { animation-delay: 1.65s; }
.animado .celda:nth-child(3) .resalte { animation-delay: 1.9s; }
.animado .celda:nth-child(4) .resalte { animation-delay: 2.15s; }
.animado .celda:nth-child(5) .resalte { animation-delay: 2.4s; }
.animado .celda:nth-child(6) .resalte { animation-delay: 2.65s; }
@keyframes celda-luz { from { background-color: transparent; } to { background-color: var(--marcador); } }

/* Elemento genérico: la imagen entra con un zoom suave */
.animado .demo-imagen { animation: acercar 6s cubic-bezier(.2,.6,.2,1) 0s both; }
@keyframes acercar { from { transform: scale(1.06); } to { transform: scale(1); } }

/* demo-flujo: el resaltado lima pasa por los 3 nodos y termina en el último */
.animado .nodo:nth-child(1) { animation: nodo-1 7s linear both; }
.animado .nodo:nth-child(2) { animation: nodo-2 7s linear both; }
.animado .nodo:nth-child(3) { animation: nodo-3 7s linear both; }
.animado .nodo:nth-child(1) .nodo-detalle { animation: detalle-1 7s linear both; }
.animado .nodo:nth-child(2) .nodo-detalle { animation: detalle-2 7s linear both; }
.animado .nodo:nth-child(3) .nodo-detalle { animation: detalle-3 7s linear both; }
.animado .nodo:nth-child(1) .nodo-icono { animation: icono-1 7s linear both; }
.animado .nodo:nth-child(2) .nodo-icono { animation: icono-2 7s linear both; }
.animado .nodo:nth-child(3) .nodo-icono { animation: icono-3 7s linear both; }
@keyframes nodo-1 {
  0%, 22% { background-color: var(--acento); color: var(--sobre-acento); }
  26%, 100% { background-color: transparent; color: var(--texto); }
}
@keyframes nodo-2 {
  0%, 22% { background-color: transparent; color: var(--texto-2); }
  26%, 44% { background-color: var(--acento); color: var(--sobre-acento); }
  48%, 100% { background-color: transparent; color: var(--texto); }
}
@keyframes nodo-3 {
  0%, 44% { background-color: transparent; color: var(--texto-2); }
  48%, 100% { background-color: var(--acento); color: var(--sobre-acento); }
}
@keyframes detalle-1 { 0%, 22% { color: var(--sobre-acento-2); } 26%, 100% { color: var(--texto-2); } }
@keyframes detalle-2 { 0%, 22% { color: var(--texto-2); } 26%, 44% { color: var(--sobre-acento-2); } 48%, 100% { color: var(--texto-2); } }
@keyframes detalle-3 { 0%, 44% { color: var(--texto-2); } 48%, 100% { color: var(--sobre-acento-2); } }
@keyframes icono-1 {
  0%, 22% { background-color: var(--sobre-acento); color: var(--acento); }
  26%, 100% { background-color: var(--texto); color: var(--fondo); }
}
@keyframes icono-2 {
  0%, 22% { background-color: transparent; color: var(--texto-2); box-shadow: inset 0 0 0 3px var(--texto-2); }
  26%, 44% { background-color: var(--sobre-acento); color: var(--acento); box-shadow: none; }
  48%, 100% { background-color: var(--texto); color: var(--fondo); box-shadow: none; }
}
@keyframes icono-3 {
  0%, 44% { background-color: transparent; color: var(--texto-2); box-shadow: inset 0 0 0 3px var(--texto-2); }
  48%, 100% { background-color: var(--sobre-acento); color: var(--acento); box-shadow: none; }
}

/* demo-chat y cierre: «escribiendo…» y luego llega el mensaje */
.animado .escribiendo { display: flex; animation: escribiendo-ver 7s linear both; }
.animado .escribiendo i { animation: punto 0.7s ease-in-out 3 both; }
.animado .escribiendo i:nth-child(2) { animation-delay: 0.12s; }
.animado .escribiendo i:nth-child(3) { animation-delay: 0.24s; }
@keyframes escribiendo-ver { 0%, 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes punto { 0%, 100% { transform: translateY(0); opacity: 0.45; } 50% { transform: translateY(-10px); opacity: 1; } }
.animado .burbuja.saliente { animation: llegar 0.6s cubic-bezier(.2,.8,.2,1) 2.2s both; }
.animado .dm .burbuja { animation: llegar 0.6s cubic-bezier(.2,.8,.2,1) 2.2s both; }
.animado .dm .enlace { animation: llegar 0.6s cubic-bezier(.2,.8,.2,1) 3.0s both; }
@keyframes llegar { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }

/* demo-celular: las notificaciones van llegando (la 1.ª ya está en el fotograma 0) */
.animado .noti:nth-child(2) { animation: noti-entra 0.6s cubic-bezier(.2,.8,.2,1) 1.6s both; }
.animado .noti:nth-child(3) { animation: noti-entra 0.6s cubic-bezier(.2,.8,.2,1) 3.0s both; }
@keyframes noti-entra { from { opacity: 0; transform: translateY(-30px) scale(0.96); } to { opacity: 1; transform: none; } }

/* demo-antes-despues: la línea se desliza y vuelve al centro */
.animado .demo-ad { animation: barrido 7s cubic-bezier(.45,0,.25,1) both; }
@keyframes barrido {
  0%, 8% { --corte: 50%; }
  30% { --corte: 16%; }
  55% { --corte: 84%; }
  76%, 100% { --corte: 50%; }
}

/* demo-cifra: el número cuenta hacia arriba (desde el 40 %) y las barras crecen */
/* El texto real conserva su tamaño (y reserva el ancho final); el contador se dibuja encima */
.animado .cifra-valor { position: relative; color: transparent; animation: cuenta 3.2s cubic-bezier(.15,.6,.25,1) 0.4s both; }
.animado .cifra-valor::after { content: counter(n); position: absolute; left: 0; top: 0; color: var(--cursiva); }
@keyframes cuenta { from { --n: calc(var(--cifra) * 0.4); } to { --n: var(--cifra); } }
.animado .grafico i { animation: barra-sube 0.8s cubic-bezier(.2,.8,.2,1) both; }
.animado .grafico i:nth-child(1) { animation-delay: 0.5s; } .animado .grafico i:nth-child(2) { animation-delay: 0.65s; }
.animado .grafico i:nth-child(3) { animation-delay: 0.8s; }  .animado .grafico i:nth-child(4) { animation-delay: 0.95s; }
.animado .grafico i:nth-child(5) { animation-delay: 1.1s; }  .animado .grafico i:nth-child(6) { animation-delay: 1.25s; }
.animado .grafico i:nth-child(7) { animation-delay: 1.4s; }  .animado .grafico i:nth-child(8) { animation-delay: 1.55s; }
@keyframes barra-sube { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

/* resumen: el marcador va marcando cada paso (hasta 7) */
.animado .item-num .resalte { animation: celda-luz 0.45s ease-out both; }
.animado .item-resumen:nth-child(1) .resalte { animation-delay: 0.9s; }
.animado .item-resumen:nth-child(2) .resalte { animation-delay: 1.3s; }
.animado .item-resumen:nth-child(3) .resalte { animation-delay: 1.7s; }
.animado .item-resumen:nth-child(4) .resalte { animation-delay: 2.1s; }
.animado .item-resumen:nth-child(5) .resalte { animation-delay: 2.5s; }
.animado .item-resumen:nth-child(6) .resalte { animation-delay: 2.9s; }
.animado .item-resumen:nth-child(7) .resalte { animation-delay: 3.3s; }

/* recurso: una franja de luz recorre el documento y el candado late 2 veces */
.doc::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; pointer-events: none;
  background: linear-gradient(transparent, var(--acento), transparent); opacity: 0;
}
.animado .doc::after { animation: escaneo 2.4s ease-in-out 0.6s both; }
@keyframes escaneo { 0% { transform: translateY(-140px); opacity: 0; } 10% { opacity: 0.35; } 90% { opacity: 0.35; } 100% { transform: translateY(820px); opacity: 0; } }
.animado .candado { animation: latido 0.8s ease-in-out 3.2s 2 both; }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* captura: encuadre lento que termina en el estado estático
   (las tapas se mueven con la imagen y tapan desde el fotograma 0) */
.animado .marco-contenido { animation: acercar-captura 6s cubic-bezier(.3,.1,.3,1) both; }
@keyframes acercar-captura { from { transform: scale(1.06); } to { transform: scale(1); } }

/* ==========================================================================
   (2) WEB DE RECURSOS · recursos.raymondreyes.dev
   <body class="web tema-claro acento-lima">. Móvil primero (390 px).
   Todo texto ≥ 16 px; zonas táctiles ≥ 48 px. Clases con prefijo w-.
   ========================================================================== */
body.web {
  min-height: 100vh; margin: 0;
  background-color: var(--fondo);
  background-image: radial-gradient(var(--punto) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  color: var(--texto);
  font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif; font-weight: 500;
  font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}
.web a { color: inherit; }
.web :focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; border-radius: 8px; }
.w-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.w-saltar { position: absolute; left: 12px; top: -80px; z-index: 10; padding: 12px 18px; border-radius: 12px; background: var(--texto); color: var(--fondo) !important; text-decoration: none; }
.w-saltar:focus { top: 12px; }

.w-envoltura { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 20px; }
.w-envoltura.ancha { max-width: 1080px; }

/* Cabecera de marca */
.w-cabecera { display: flex; align-items: center; gap: 14px; padding-top: 24px; }
.w-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--superficie-2); box-shadow: 0 0 0 2px var(--linea); }
.w-marca { display: flex; flex-direction: column; min-width: 0; }
.w-marca-nombre { font-size: 18px; line-height: 1.25; font-weight: 800; }
.w-marca-bio { font-size: 16px; line-height: 1.35; color: var(--texto-2); }

/* Barra superior de la página de recurso */
.w-barra-sup { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; }
.w-volver { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px; font-size: 16px; font-weight: 800; text-decoration: none; }
.w-volver:hover { text-decoration: underline; text-underline-offset: 4px; }
.w-barra-sup .w-avatar { width: 44px; height: 44px; }

/* Héroe */
.w-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin: 36px 0 28px; }
.w-etiqueta {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase;
}
.w-titular { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; }
.w-titular-sans { font-size: clamp(2.6rem, 11.5vw, 5.4rem); line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.w-titular-serif { font-size: clamp(3rem, 13.5vw, 6.4rem); line-height: 1.04; letter-spacing: -0.015em; }
.w-sub { margin: 0; max-width: 34ch; font-size: 19px; line-height: 1.45; color: var(--texto-2); text-wrap: pretty; }

/* Controles de la biblioteca (los muestra web/biblioteca.js; sin JS no existen y se ve toda la lista) */
.w-controles[hidden], .w-item[hidden], .w-pedidos[hidden], .w-vacio[hidden], .w-mas-fila[hidden] { display: none !important; }
.w-controles { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; }
.w-buscar {
  width: 100%; min-height: 56px; padding: 0 20px 0 52px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23121310' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 20px center;
  color: var(--texto); font: inherit; font-size: 18px; font-weight: 500; -webkit-appearance: none; appearance: none;
}
.w-buscar::placeholder { color: var(--texto-2); opacity: 1; }
.w-buscar:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; border-color: var(--texto); }
.w-filtros { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 -20px; padding: 2px 20px 6px; border: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.w-filtros::-webkit-scrollbar { display: none; }
.w-filtros > * { flex-shrink: 0; }
.w-filtros-titulo { float: left; padding: 0; margin-right: 6px; font-size: 16px; color: var(--texto-2); line-height: 48px; }
.w-filtros input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.w-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--borde); font-size: 16px; font-weight: 800; cursor: pointer;
}
.w-chip:hover { border-color: var(--texto); }
.w-filtros input:checked + .w-chip { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.w-filtros input:focus-visible + .w-chip { outline: 3px solid var(--texto); outline-offset: 3px; }
.w-vacio { padding: 28px 22px; border-radius: 22px; border: 1.5px dashed var(--texto-2); color: var(--texto-2); font-size: 17px; }
.w-vacio p { margin: 0 0 14px; }
.w-limpiar, .w-mas {
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid var(--texto); background: var(--superficie);
  color: var(--texto); font: inherit; font-size: 17px; font-weight: 800; cursor: pointer;
}
.w-limpiar:hover, .w-mas:hover { background: var(--texto); color: var(--fondo); }
.w-limpiar:focus-visible, .w-mas:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }
.w-mas-fila { display: flex; justify-content: center; margin: 28px 0 8px; }
.w-mas { width: 100%; max-width: 360px; }

/* Los más pedidos */
.w-pedidos { margin: 0 0 36px; }
.w-pedidos .w-h2 { margin-bottom: 14px; }
.w-puesto {
  display: inline-flex; padding: 4px 12px; border-radius: 999px; background: var(--texto); color: var(--fondo);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; line-height: 1.3;
}
.w-contador { margin: 0 0 12px; font-size: 16px; color: var(--texto-2); }

/* Lista de recursos */
.w-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.w-tarjeta {
  position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 20px 64px 22px 22px; border-radius: 22px;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra);
  text-decoration: none; color: var(--texto);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.w-tarjeta:hover { transform: translateY(-2px); border-color: var(--texto); }
.w-tarjeta-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.w-tipo {
  display: inline-flex; padding: 4px 12px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; line-height: 1.3; letter-spacing: 0.02em;
}
.w-fecha { font-size: 16px; color: var(--texto-2); }
.w-tarjeta-nombre { margin: 0; font-size: 22px; line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.w-tarjeta-frase { margin: 0; font-size: 17px; line-height: 1.4; color: var(--texto-2); text-wrap: pretty; }
.w-tarjeta-flecha {
  position: absolute; right: 18px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--superficie-2); color: var(--texto);
}
.w-tarjeta:hover .w-tarjeta-flecha { background: var(--acento); color: var(--sobre-acento); }
.w-nuevo { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; color: var(--texto); }
.w-nuevo .resalte { padding: 0 0.3em; }

/* Página de recurso */
.w-descarga { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 28px; }
.w-boton-descargar {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; padding: 0 28px;
  border-radius: 18px; background: var(--acento); color: var(--sobre-acento) !important; text-decoration: none;
  font-size: 20px; font-weight: 800; box-shadow: inset 0 0 0 2px var(--borde-barra), var(--sombra);
}
.w-boton-descargar:hover { transform: translateY(-1px); }
.w-descarga-meta { font-size: 16px; color: var(--texto-2); }
.w-origen { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 18px; background: var(--superficie-2); font-size: 17px; line-height: 1.4; }
.w-origen-etiqueta { font-size: 16px; color: var(--texto-2); }
.w-origen a { font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.w-seccion { margin-top: 44px; }
.w-h2 { margin: 0 0 16px; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.w-bloques { display: flex; flex-direction: column; gap: 14px; }
.w-bloque { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 22px; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.w-bloque-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.w-bloque-titulo { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 800; }
.w-copiar {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; min-width: 112px; justify-content: center; padding: 0 16px;
  border-radius: 14px; border: 1.5px solid var(--texto); background: var(--superficie); color: var(--texto);
  font: 800 16px/1 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif; cursor: pointer;
}
.w-copiar:hover { background: var(--superficie-2); }
.w-copiar.copiado { background: var(--acento); color: var(--sobre-acento); border-color: var(--borde-barra); }
.w-prompt {
  margin: 0; padding: 16px; border-radius: 14px; background: var(--superficie-2); color: var(--texto);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.w-checklist { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.w-checklist li { position: relative; padding-left: 38px; font-size: 17px; line-height: 1.45; }
.w-checklist li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--texto); }

/* «Qué hay dentro» (recursos en PDF) */
.w-incluye { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.w-incluye li { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 18px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borde); font-size: 17px; font-weight: 800; line-height: 1.3; }
.w-incluye-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: 16px; }
@media (min-width: 760px) { .w-incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pie */
.w-pie { margin-top: 64px; padding: 32px 0 40px; border-top: 1px solid var(--borde); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.w-pie-texto { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 800; max-width: 30ch; }
.w-boton-ig {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 26px;
  border-radius: 18px; background: var(--texto); color: var(--fondo) !important; text-decoration: none; font-size: 19px; font-weight: 800;
}
.w-boton-ig:hover { opacity: 0.92; }
.w-legal { margin: 8px 0 0; font-size: 16px; color: var(--texto-2); }

@media (min-width: 760px) {
  .w-envoltura { padding: 0 32px; }
  .w-cabecera { padding-top: 36px; }
  .w-hero { margin: 64px 0 40px; }
  .w-sub { font-size: 21px; }
  .w-controles { margin-bottom: 22px; }
  .w-filtros { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .w-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .w-grid-2, .w-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-boton-descargar { width: auto; align-self: flex-start; min-width: 340px; }
  .w-boton-ig { width: auto; }
  .w-bloque { padding: 22px 24px; }
  .w-pie { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .w-legal { flex-basis: 100%; }
}
@media (min-width: 1060px) {
  .w-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-grid-3.w-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .w-tarjeta, .w-boton-descargar { transition: none; transform: none !important; } }

/* ==========================================================================
   (3) GUÍAS EN PDF · <html class="guia"> <body class="guia tema-claro acento-lima">
   Se imprime con Chromium (page.pdf, printBackground: true, preferCSSPageSize: true).
   Tamaño: carta. Para A4 cambia «size: letter» por «size: A4» en las dos reglas @page.
   Clases con prefijo g-.
   ========================================================================== */
@page {
  size: letter;
  margin: 16mm 18mm 20mm;
  background: #F4F3EE;
  @bottom-left { content: "@soy_raymondreyes"; font-family: 'JetBrains Mono', monospace; font-size: 9.5pt; color: #5C5D57; vertical-align: top; padding-top: 4mm; }
  @bottom-right { content: counter(page) " / " counter(pages); font-family: 'JetBrains Mono', monospace; font-size: 9.5pt; color: #5C5D57; vertical-align: top; padding-top: 4mm; }
}
@page portada {
  size: letter;
  margin: 0;
  @bottom-left { content: none; }
  @bottom-right { content: none; }
}
html.guia { background: var(--fondo, #F4F3EE); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.guia {
  margin: 0; background: #F4F3EE; color: var(--texto);
  font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif; font-weight: 500;
  font-size: 12pt; line-height: 1.45; orphans: 3; widows: 3;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.guia p { margin: 0 0 7pt; }

/* Portada (página completa sin márgenes) */
.g-portada {
  page: portada; break-after: page;
  height: 100vh; padding: 20mm 20mm 18mm; display: flex; flex-direction: column;
  background-color: var(--fondo);
  background-image: radial-gradient(var(--punto) 1.3px, transparent 1.3px);
  background-size: 6mm 6mm;
}
.g-marca { display: flex; align-items: center; gap: 4mm; }
.g-avatar { width: 15mm; height: 15mm; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 0.6mm var(--linea); }
.g-marca-nombre { font-size: 13pt; line-height: 1.2; font-weight: 800; }
.g-marca-usuario { font-family: 'JetBrains Mono', monospace; font-size: 10.5pt; color: var(--texto-2); }
.g-portada-cuerpo { margin-top: 30mm; display: flex; flex-direction: column; align-items: flex-start; gap: 7mm; }
.g-etiqueta {
  display: inline-flex; padding: 1.6mm 4mm; border-radius: 999px; background: var(--acento); color: var(--sobre-acento);
  font-family: 'JetBrains Mono', monospace; font-size: 11pt; letter-spacing: 0.06em; text-transform: uppercase;
}
.g-titular { display: flex; flex-direction: column; align-items: flex-start; gap: 1mm; margin: 0; }
.g-titular-sans { font-size: 50pt; line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.g-titular-serif { font-size: 62pt; line-height: 1.04; letter-spacing: -0.015em; }
.g-portada-sub { max-width: 125mm; font-size: 15pt; line-height: 1.4; color: var(--texto-2); }
.g-indice { margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm; }
.g-indice li { display: flex; align-items: center; gap: 3mm; padding: 3.2mm 4mm; border-radius: 4mm; background: var(--superficie); border: 0.3mm solid var(--borde); font-size: 12pt; font-weight: 800; break-inside: avoid; }
.g-indice-num { font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.g-portada-pie { margin-top: 7mm; display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10.5pt; color: var(--texto-2); }

/* Interior */
.g-capitulo { break-before: page; }
.g-interior > .g-capitulo:first-child { break-before: auto; }
.g-cap-cabeza { display: flex; align-items: flex-end; gap: 5mm; margin-bottom: 4.5mm; break-after: avoid; }
.g-cap-num { font-size: 58pt; line-height: 0.8; flex-shrink: 0; }
.g-cap-titulos { display: flex; flex-direction: column; gap: 1.5mm; padding-bottom: 1mm; }
.g-cap-pieza { font-family: 'JetBrains Mono', monospace; font-size: 10.5pt; color: var(--texto-2); letter-spacing: 0.06em; text-transform: uppercase; }
.g-h1 { margin: 0; font-size: 28pt; line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.g-h2 { margin: 5.5mm 0 2.4mm; font-size: 15pt; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; break-after: avoid; }
.g-entrada { font-size: 13pt; line-height: 1.45; color: var(--texto-2); }

.g-lista { margin: 0 0 3mm; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.6mm; }
.g-lista li { position: relative; padding-left: 6mm; break-inside: avoid; }
.g-lista li::before { content: ''; position: absolute; left: 0.5mm; top: 0.62em; width: 2.2mm; height: 2.2mm; border-radius: 50%; background: var(--texto); }

.g-pasos { margin: 0 0 4mm; padding: 0; list-style: none; counter-reset: paso; display: flex; flex-direction: column; gap: 2.2mm; }
.g-pasos li { position: relative; padding-left: 12mm; min-height: 8mm; counter-increment: paso; break-inside: avoid; }
.g-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -0.3mm; width: 8mm; height: 8mm; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento); box-shadow: inset 0 0 0 0.35mm var(--borde-barra);
  font-family: 'JetBrains Mono', monospace; font-size: 11pt; line-height: 8mm; text-align: center;
}
.g-pasos b, .g-lista b { font-weight: 800; }

.g-prompt { break-inside: avoid; margin: 0 0 5mm; border-radius: 4mm; background: var(--superficie-2); border: 0.3mm solid var(--borde); overflow: hidden; }
.g-prompt-cabeza { display: flex; justify-content: space-between; padding: 2.4mm 4mm; border-bottom: 0.3mm solid var(--borde); font-family: 'JetBrains Mono', monospace; font-size: 9.5pt; letter-spacing: 0.06em; color: var(--texto-2); text-transform: uppercase; }
.g-prompt pre { margin: 0; padding: 3.5mm 4mm; font-family: 'JetBrains Mono', monospace; font-size: 10pt; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texto); }

.g-checklist { margin: 0 0 5mm; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2.4mm; }
.g-checklist li { position: relative; padding-left: 9mm; break-inside: avoid; }
.g-checklist li::before { content: ''; position: absolute; left: 0; top: 0.15em; width: 5mm; height: 5mm; border-radius: 1.2mm; border: 0.5mm solid var(--texto); background: var(--superficie); }

.g-nota { break-inside: avoid; margin: 2mm 0 5mm; padding: 4.5mm 5mm; border-radius: 4mm; background: var(--acento); color: var(--sobre-acento); box-shadow: inset 0 0 0 0.35mm var(--borde-barra); }
.g-nota-etiqueta { display: block; margin-bottom: 1.2mm; font-family: 'JetBrains Mono', monospace; font-size: 9.5pt; letter-spacing: 0.06em; text-transform: uppercase; }
.g-nota p:last-child { margin-bottom: 0; }

.g-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5mm; align-items: start; }
.g-dos-nota { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; }
.g-dos-nota .g-nota { margin: 0 0 3mm; }
.g-caja { break-inside: avoid; padding: 4mm 5mm; border-radius: 4mm; background: var(--superficie); border: 0.3mm solid var(--borde); }
.g-caja .g-h2 { margin-top: 0; }

/* Mapa de flujo (cajas + flechas, sin imágenes) */
.g-flujo { break-inside: avoid; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; margin: 3mm 0 4mm; }
.g-flujo-paso { position: relative; padding: 3.2mm 3.6mm; border-radius: 4mm; background: var(--superficie); border: 0.3mm solid var(--borde); }
.g-flujo-paso.activo { background: var(--acento); color: var(--sobre-acento); border-color: var(--borde-barra); }
.g-flujo-num { font-family: 'JetBrains Mono', monospace; font-size: 9.5pt; letter-spacing: 0.06em; }
.g-flujo-nombre { display: block; margin-top: 1mm; font-size: 12.5pt; line-height: 1.2; font-weight: 800; }
.g-flujo-texto { display: block; margin-top: 1mm; font-size: 10.5pt; line-height: 1.35; color: var(--texto-2); }
.g-flujo-paso.activo .g-flujo-texto { color: var(--sobre-acento-2); }

.g-cierre { break-before: page; }
.g-grupo { break-inside: avoid; }
.g-cta { break-inside: avoid; margin-top: 5mm; padding: 5.5mm 6mm; border-radius: 5mm; background: var(--texto); color: var(--fondo); }
.g-cta-titulo { margin: 0 0 1.5mm; font-size: 18pt; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.g-cta-texto { margin: 0; font-size: 12pt; color: #D5D4CC; }
.g-cta .resalte-cta { display: inline-block; margin-top: 3mm; padding: 2mm 4mm; border-radius: 2.5mm; background: var(--acento); color: var(--sobre-acento); font-weight: 800; }

/* Vista en pantalla (antes de imprimir): páginas simuladas */
@media screen {
  html.guia { background: #D9D8D2; }
  body.guia { width: 8.5in; margin: 24px auto; box-shadow: 0 10px 40px -20px rgba(0,0,0,.4); }
  .g-portada { height: 11in; }
  .g-interior { padding: 18mm; }
}

/* --- Añadidos de la web (no vienen del diseño): botón secundario, acciones y enlaces del pie --- */
.w-acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; width: 100%; max-width: 420px; }
.w-boton-sec {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; padding: 0 26px;
  border-radius: 18px; background: transparent; border: 2px solid var(--texto); color: var(--texto) !important;
  text-decoration: none; font-size: 19px; font-weight: 800;
}
.w-boton-sec:hover { background: var(--superficie-2); }
.w-nota { margin: 0; font-size: 17px; line-height: 1.5; color: var(--texto-2); max-width: 46ch; text-wrap: pretty; }
.w-texto-p { margin: 0; font-size: 19px; line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
.w-legal a { font-weight: 800; text-underline-offset: 4px; display: inline-block; padding: 12px 0; }
.w-sello { display: inline-flex; align-items: center; gap: 10px; }
.w-sello svg { flex-shrink: 0; }
.w-en { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 12px; }
.w-en .w-nota { color: var(--texto); }