/* ============================================================================ * Taller "Claude Code + Otimify" * Branding oficial oscuro — tokens de .claude/skills/otimify-branding/SKILL.md * * UNA pagina, TRES ejes ortogonales en : * data-modo="deck" | "guia" -> layout (canvas 16:9 vs scroll de lectura) * class="print" -> modificador de impresion (?print=1) * data-render="live"|"static" -> animaciones on/off * * El deck es un canvas FIJO de 1440x810 que se escala con transform:scale(). * La guia es flujo vertical con ancho de lectura. Son layouts distintos, no * variantes del mismo: por eso estan scopeados por [data-modo] y no parcheados. * ========================================================================== */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/montserrat-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/montserrat-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: block; src: url('fonts/montserrat-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: block; src: url('fonts/montserrat-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: block; src: url('fonts/montserrat-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: block; src: url('fonts/montserrat-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: block; src: url('fonts/montserrat-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: block; src: url('fonts/montserrat-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: block; src: url('fonts/montserrat-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: block; src: url('fonts/montserrat-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---- JetBrains Mono: la terminal NO puede depender del mono del sistema --- * Sin esto, lo que se proyecta en Windows y lo que sale en el PDF (Chromium * del contenedor) se ven distintos, que es justo lo que el render server-side * viene a evitar. */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/jetbrains-mono-400-latin.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: block; src: url('fonts/jetbrains-mono-700-latin.woff2') format('woff2'); } /* ---- Tokens de marca ----------------------------------------------------- */ :root { --bg: #070a0c; --bg-card: #0d1215; --bg-input: #111619; --border: #1e2a2f; --border-glow: rgba(0, 210, 100, 0.35); --green: #00d264; --green-dim: #009e4a; --green-glow: rgba(0, 210, 100, 0.18); --text: #e8ede9; --text-dim: #9aada2; --text-muted: #6b7b72; --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; --radius-pill: 999px; --font: 'Montserrat', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --shadow-card: 0 2px 24px rgba(0,0,0,0.55); --shadow-glow: 0 0 28px rgba(0, 210, 100, 0.22); --s: 1; /* Arcilla de Anthropic. EXCEPCION DELIBERADA al "un solo acento" del * branding, con la misma logica con la que el skill admite rojo solo para * errores: es un color SEMANTICO de dominio, no un segundo color de marca. * * EL CORAL NO ES UN ACENTO: ES UNA COMILLA. * Marca "esto es Claude Code hablando". Nunca marca "esto es accionable". * * Regla de codigo: --clay NO se referencia fuera de una regla .claude-surface. * Es grepeable, asi que es auditable. Todo lo clickeable sigue siendo verde, * incluso dentro de una terminal coral. */ --clay: #d97757; --clay-dim: #b45f44; --clay-glow: rgba(217, 119, 87, 0.16); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { background: var(--bg); } body { font-family: var(--font); color: var(--text); -webkit-font-smoothing: antialiased; } ::selection { background: var(--green-glow); } /* ============================================================================ * MODO DECK — canvas fijo 1440x810 * ========================================================================== */ body[data-modo="deck"] { height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } body[data-modo="deck"] #stage { width: 1440px; height: 810px; position: relative; flex: none; transform: scale(var(--s)); transform-origin: center center; } body[data-modo="deck"] .slide { position: absolute; inset: 0; width: 1440px; height: 810px; overflow: hidden; background: radial-gradient(58% 46% at 78% 6%, rgba(0,210,100,0.13) 0%, transparent 68%), linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px), var(--bg); background-size: auto, 40px 40px, 40px 40px; opacity: 0; pointer-events: none; transition: opacity .28s ease; } body[data-modo="deck"] .slide.active { opacity: 1; pointer-events: auto; } body[data-modo="deck"] .pad { position: absolute; inset: 0; padding: 72px 88px 68px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; } /* En flex-column las imagenes se estiran al ancho de la columna: hay que * anclarlas. Sin esto el logo de la portada ocupa los 1440px. */ .pad > img { align-self: flex-start; width: auto; flex: none; } /* Las secciones de referencia solo existen en la guia. */ body[data-modo="deck"] [data-guia-only] { display: none !important; } /* ============================================================================ * MODO GUIA — flujo de lectura * ========================================================================== */ body[data-modo="guia"] { overflow-x: hidden; display: block; background: radial-gradient(60% 30% at 80% 0%, rgba(0,210,100,0.10) 0%, transparent 70%), var(--bg); background-attachment: fixed; } body[data-modo="guia"] #stage { width: min(980px, 100%); height: auto; transform: none; margin: 0 auto; padding: 0 16px; /* gutter en telefono */ } body[data-modo="guia"] .slide { position: static; width: auto; height: auto; overflow: visible; opacity: 1; pointer-events: auto; background: none; scroll-margin-top: 78px; border-top: 1px solid var(--border); } body[data-modo="guia"] .slide:first-of-type { border-top: none; } body[data-modo="guia"] .pad { position: static; padding: 56px 8px 60px; display: flex; flex-direction: column; justify-content: flex-start; } /* La escala del deck esta calibrada para 1440px; a 980px de lectura hay que * bajarla o todo se ve enorme. */ body[data-modo="guia"] h1 { font-size: 40px; letter-spacing: -1.3px; } body[data-modo="guia"] h2 { font-size: 29px; letter-spacing: -0.7px; } body[data-modo="guia"] .lead { font-size: 17.5px; } body[data-modo="guia"] .g4 { grid-template-columns: repeat(2, 1fr); } body[data-modo="guia"] .cols { grid-template-columns: 1fr; gap: 28px; } body[data-modo="guia"] .pageno, body[data-modo="guia"] .orb, body[data-modo="guia"] .slide .mark { display: none; } body[data-modo="guia"] .cover h1 { font-size: 52px; letter-spacing: -1.8px; } body[data-modo="guia"] .closing h1 { font-size: 46px; letter-spacing: -1.6px; } @media (max-width: 720px) { body[data-modo="guia"] h1 { font-size: 31px; letter-spacing: -0.9px; } body[data-modo="guia"] h2 { font-size: 24px; } body[data-modo="guia"] .cover h1 { font-size: 37px; } body[data-modo="guia"] .g2, body[data-modo="guia"] .g3, body[data-modo="guia"] .g4 { grid-template-columns: 1fr; } body[data-modo="guia"] .pad { padding: 40px 4px 44px; } } /* ============================================================================ * VOCABULARIO DE MARCA — copiado verbatim del deck de onboarding. * Ya esta afinado; no se toca. Lo que cambia por modo es el LAYOUT, no esto. * ========================================================================== */ .slide .pageno { position: absolute; right: 88px; bottom: 34px; font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: .5px; } /* ---- Tipografia ---------------------------------------------------------- */ h1 { font-size: 84px; font-weight: 800; letter-spacing: -2.4px; line-height: 1.02; } h2 { font-size: 46px; font-weight: 800; letter-spacing: -1.1px; line-height: 1.08; } h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; } .lead { font-size: 21px; font-weight: 400; color: var(--text-dim); line-height: 1.5; } .g { color: var(--green); } .eyebrow { color: var(--green); text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: 2px; margin-bottom: 18px; } .badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(0,210,100,0.1); color: var(--green); border: 1px solid rgba(0,210,100,0.25); border-radius: var(--radius-pill); padding: 8px 18px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); } .rule { height: 3px; border-radius: 2px; margin: 26px 0; background: linear-gradient(90deg, var(--green), rgba(0,210,100,0.05)); } .rule.short { width: 190px; } /* ---- Cards --------------------------------------------------------------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 24px 26px; } .card.hi { background: linear-gradient(158deg, rgba(0,210,100,0.11), rgba(0,210,100,0.02)); border-color: var(--border-glow); box-shadow: var(--shadow-glow); } .card h3 { margin-bottom: 8px; } .card p { font-size: 16px; color: var(--text-dim); line-height: 1.45; } .grid { display: grid; gap: 18px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .cols-wide { grid-template-columns: 1.15fr 1fr; } /* ---- Listas con check --------------------------------------------------- */ .checks { display: flex; flex-direction: column; gap: 15px; } .checks li { list-style: none; display: flex; align-items: flex-start; gap: 13px; font-size: 20px; font-weight: 500; } .checks li .ck { flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px; background: rgba(0,210,100,0.16); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .checks li span.t { line-height: 1.35; } .checks.sm li { font-size: 17px; } .checks.sm li .ck { width: 22px; height: 22px; font-size: 12px; } .bullets li { list-style: none; display: flex; align-items: center; gap: 12px; font-size: 19px; color: var(--text-dim); } .bullets { display: flex; flex-direction: column; gap: 13px; } .bullets li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); } /* ---- Chips de feature --------------------------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 9px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 9px 18px 9px 14px; font-size: 16px; font-weight: 600; } .chip .ck { width: 20px; height: 20px; border-radius: 50%; background: rgba(0,210,100,0.16); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; } /* ---- Numeros / stats --------------------------------------------------- */ .stat { font-size: 52px; font-weight: 800; letter-spacing: -1.6px; color: var(--green); line-height: 1; } .stat.sm { font-size: 34px; letter-spacing: -1px; } .stat-label { font-size: 14px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 10px; } .numbox { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); background: rgba(0,210,100,0.1); border: 1px solid rgba(0,210,100,0.22); color: var(--green); font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* ---- Tabla de precios -------------------------------------------------- */ /* ---- Controles (select / input) --------------------------------------- */ label.field { display: flex; flex-direction: column; gap: 7px; } label.field .lab { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; } select, input[type=number] { background: var(--bg-input); color: var(--text); font-family: var(--font); font-size: 17px; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; width: 100%; -moz-appearance: textfield; } select:focus, input:focus { border-color: var(--green); outline: none; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* valores congelados en modo print */ .frozen { display: block; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 17px; font-weight: 600; } .btn { display: inline-flex; align-items: center; gap: 9px; background: var(--green); color: var(--bg); border: none; border-radius: var(--radius-pill); font-family: var(--font); font-weight: 700; font-size: 15px; padding: 12px 26px; cursor: pointer; box-shadow: 0 4px 20px rgba(0,210,100,0.3); } .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); box-shadow: none; } /* ---- Desglose de la calculadora --------------------------------------- */ .note { font-size: 14px; color: var(--text-muted); line-height: 1.5; } .note a { color: var(--green-dim); text-decoration: none; } .src { position: absolute; left: 88px; right: 88px; bottom: 62px; font-size: 12px; color: var(--text-muted); line-height: 1.5; } /* ---- Timeline ventana 24 h -------------------------------------------- */ .timeline { position: relative; padding-left: 34px; } .timeline::before { content: ''; position: absolute; left: 12px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--green), rgba(0,210,100,0.12)); } .timeline .step { position: relative; padding-bottom: 26px; } .timeline .step:last-child { padding-bottom: 0; } .timeline .step::before { content: ''; position: absolute; left: -28px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(0,210,100,0.15); } .timeline .step.off::before { background: var(--text-muted); box-shadow: 0 0 0 4px rgba(107,123,114,0.15); } .timeline .step .st { font-size: 19px; font-weight: 700; margin-bottom: 4px; } .timeline .step .sd { font-size: 16px; color: var(--text-dim); line-height: 1.45; } /* ---- Portada ----------------------------------------------------------- */ .cover .logo-big { height: 54px; width: auto; margin-bottom: 42px; } .closing img { align-self: center; } .cover h1 { font-size: 104px; letter-spacing: -3.4px; } .orb { position: absolute; right: -130px; top: 50%; transform: translateY(-50%); width: 720px; height: 720px; pointer-events: none; overflow: visible; } /* Tarjetas flotantes decorativas de la portada */ /* ---- Cierre ------------------------------------------------------------ */ .closing { align-items: center; justify-content: center; text-align: center; } .closing h1 { font-size: 120px; letter-spacing: -4px; } /* ---- Barra de control (solo pantalla) --------------------------------- */ #controls { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 60; background: rgba(13,18,21,0.9); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 10px; backdrop-filter: blur(14px); box-shadow: var(--shadow-card); transition: opacity .35s ease; } #controls.idle { opacity: .14; } #controls button { background: transparent; border: none; color: var(--text); cursor: pointer; font-family: var(--font); font-size: 16px; font-weight: 700; width: 34px; height: 34px; border-radius: 50%; } #controls button:hover { background: rgba(255,255,255,0.07); } /* El toggle de modo escapa del tamano fijo de las flechas. */ #controls .js-modo { width: auto; height: auto; border-radius: var(--radius-pill); padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap; } #controls .js-modo:hover { color: var(--text); } #counter { font-size: 13px; font-weight: 700; color: var(--text-dim); min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; } .dots { display: flex; gap: 6px; padding: 0 8px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all .2s; } .dots i.on { background: var(--green); box-shadow: 0 0 8px var(--green); } #pdf-btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; background: var(--green); color: var(--bg); border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; padding: 9px 18px; margin-left: 4px; white-space: nowrap; } #pdf-btn.loading { opacity: .6; pointer-events: none; } /* ---- Slides por plan --------------------------------------------------- */ /* ============================================================================ * NAV — solo en modo guia (en deck manda la barra de controles) * ========================================================================== */ #nav { position: sticky; top: 0; z-index: 60; background: rgba(7,10,12,0.88); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); } body[data-modo="deck"] #nav { display: none; } /* Y al reves: la barra de controles del deck no va en la guia (ahi manda la nav). */ body[data-modo="guia"] #controls { display: none; } #nav .inner { /* Mas ancho que el cuerpo de lectura (980px): con la marca, cinco links y el toggle, a 980 el ultimo item se cortaba. */ max-width: 1200px; margin: 0 auto; padding: 11px 24px; display: flex; align-items: center; gap: 10px; } #nav .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -0.4px; font-size: 15px; } #nav .brand img { height: 17px; width: auto; } #nav .sp { flex: 1; } #nav a.nl { color: var(--text-dim); text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: var(--radius-pill); } #nav .nl { white-space: nowrap; } /* los items de nav nunca se parten */ #nav a.nl:hover { color: var(--text); background: rgba(255,255,255,0.05); } #nav .brand { white-space: nowrap; } @media (max-width: 1240px) { #nav .nl.opt { display: none; } } @media (max-width: 560px) { /* En telefono la nav se queda con lo minimo: marca + PDF. El toggle de modo no tiene sentido ahi (nadie proyecta desde el celular). */ #nav .inner { padding: 9px 14px; gap: 8px; } #nav .brand span, #nav .js-modo { display: none; } #nav .brand { font-size: 0; } #nav .brand img { height: 20px; } #nav .nl { font-size: 12.5px; padding: 6px 10px; } } /* ============================================================================ * TERMINAL SIMULADA * Aca vive el coral, y SOLO aca. Todo lo clickeable de adentro sigue verde. * ========================================================================== */ .claude-surface { --quote: var(--clay); background: #0a0e10; border: 1px solid rgba(217,119,87,0.22); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; } .term { margin: 18px 0; } .term-chrome { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-bottom: 1px solid rgba(217,119,87,0.16); background: rgba(217,119,87,0.05); } .term-glyph { width: 15px; height: 15px; color: var(--quote); flex: none; display: block; } .term-glyph svg { width: 100%; height: 100%; display: block; } .term-title { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--quote); letter-spacing: .4px; } .term-cwd { font-family: var(--mono); font-size: 11px; color: var(--text-muted); } .term-sp { flex: 1; } /* El boton es VERDE aunque viva en una superficie coral: una sola senal de * "aca se clickea" en todo el sitio. */ .term-play { flex: none; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 11px; letter-spacing: .3px; background: rgba(0,210,100,0.12); color: var(--green); border: 1px solid rgba(0,210,100,0.3); border-radius: var(--radius-pill); padding: 4px 11px; } .term-play:hover { background: rgba(0,210,100,0.2); } .term-play:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .term-body { font-family: var(--mono); font-size: 12.5px; line-height: 1.62; padding: 13px 15px; color: var(--text-dim); min-height: var(--term-h, auto); /* alto reservado: evita saltos al animar */ white-space: pre-wrap; word-break: break-word; } body[data-modo="guia"] .term-body { font-size: 12px; } .term-body .ln { display: block; } .term-body .ln + .ln { margin-top: 2px; } .tl-user { color: var(--text); font-weight: 700; } .tl-user::before { content: "> "; color: var(--green); } .tl-spin { color: var(--quote); } .tl-tool { color: var(--text-muted); } .tl-tool b { color: var(--text-dim); font-weight: 700; } .tl-ok { color: var(--green); } .tl-asst { color: var(--text); white-space: pre-wrap; } .tl-asst strong { color: var(--green); font-weight: 700; } .tl-caret { color: var(--green); animation: blink 1s step-end infinite; } .term-hint { opacity: .45; } /* Tilde dibujado: dos bordes rotados. Sustituye a U+2713, que el subset * latino no trae. */ .ck::after, .ck-box::after, .chip .ck::after { content: ""; display: block; width: .30em; height: .58em; border: solid currentColor; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg) translate(-4%, -12%); } .checks li .ck, .chip .ck { display: grid; place-items: center; } .checks li .ck::after { color: var(--bg); } .ck-box::after { opacity: 0; color: var(--bg); } .ck-item.done .ck-box::after { opacity: 1; } .tl-ok::before { content: ""; display: inline-block; width: .30em; height: .58em; margin-right: .35em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); } /* Formas dibujadas en vez de caracteres que el subset latino no trae (✻ ⎿ ▶ ▌). * Un caracter ausente cae al fallback del sistema, y el fallback de Windows no * es el del contenedor que genera el PDF: se verian distintos. */ .tl-star { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; } .tl-star svg { width: 100%; height: 100%; display: block; } .tl-branch { display: inline-block; width: 11px; height: 8px; margin: 0 7px 0 14px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; border-bottom-left-radius: 3px; opacity: .6; vertical-align: 2px; } .tl-tri { display: inline-block; width: 0; height: 0; margin-right: 5px; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; vertical-align: -0.5px; } .term-hint::before { content: "> "; } @keyframes blink { 50% { opacity: 0; } } body[data-render="static"] .tl-caret { display: none; } /* El paso de permisos: el momento pedagogico del taller. */ .tl-perm { display: block; margin: 9px 0; padding: 11px 13px; border: 1px solid rgba(0,210,100,0.3); border-radius: var(--radius-sm); background: rgba(0,210,100,0.05); white-space: normal; } .tl-perm .q { color: var(--text); font-weight: 700; display: block; margin-bottom: 9px; } .tl-perm .opts { display: flex; flex-wrap: wrap; gap: 7px; } .tl-perm button { cursor: pointer; font-family: var(--font); font-size: 11.5px; font-weight: 600; background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 12px; } .tl-perm button:hover { border-color: var(--green); color: var(--text); } .tl-perm button.sel { background: var(--green); color: var(--bg); border-color: var(--green); font-weight: 700; } /* ============================================================================ * WIDGETS * ========================================================================== */ /* ---- Comparador: mismo prompt, dos resultados --------------------------- * OJO: la columna de Claude chat va en GRIS, no en verde. Si se pinta de * verde, el espectador aprende "verde = Claude chat", que es el mensaje * exactamente contrario al del taller. El verde NO aparece en este widget. */ .cmp { margin: 20px 0; } .cmp-prompt { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; margin-bottom: 14px; } .cmp-prompt .lab { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 7px; } .cmp-prompt select { width: 100%; } .cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 720px) { .cmp-cols { grid-template-columns: 1fr; } } .cmp-col { border-radius: var(--radius); padding: 15px; border: 1px solid var(--border); background: var(--bg-card); } .cmp-col.chat { opacity: .95; } .cmp-col.code { --quote: var(--clay); border-color: rgba(217,119,87,0.28); } .cmp-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; margin-bottom: 4px; } .cmp-col.chat .cmp-h { color: var(--text-dim); } .cmp-col.code .cmp-h { color: var(--quote); } .cmp-col.code .cmp-h svg { width: 14px; height: 14px; } .cmp-sub { font-size: 11.5px; color: var(--text-muted); margin-bottom: 11px; } .cmp-body { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); } .cmp-body .out { font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; color: var(--text-dim); } .cmp-verdict { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 700; } .cmp-col.chat .cmp-verdict { color: var(--text-muted); } .cmp-col.code .cmp-verdict { color: var(--text); } /* ---- Checklist de instalacion ------------------------------------------- */ .ck-os { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .ck-os button { cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 700; background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 16px; } .ck-os button.on { background: var(--green); color: var(--bg); border-color: var(--green); } .ck-list { display: flex; flex-direction: column; gap: 10px; } .ck-item { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; } .ck-item.done { border-color: rgba(0,210,100,0.3); background: rgba(0,210,100,0.04); } .ck-box { flex: none; width: 22px; height: 22px; margin-top: 1px; cursor: pointer; border: 2px solid var(--border); border-radius: 6px; background: transparent; display: grid; place-items: center; font-size: 12px; color: var(--bg); font-weight: 900; } .ck-item.done .ck-box { background: var(--green); border-color: var(--green); } .ck-box:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .ck-txt { flex: 1; min-width: 0; } .ck-t { font-size: 15.5px; font-weight: 700; margin-bottom: 3px; } .ck-d { font-size: 13.5px; color: var(--text-dim); line-height: 1.45; } .ck-progress { font-size: 13px; color: var(--text-muted); font-weight: 600; margin-bottom: 12px; } .ck-progress b { color: var(--green); } /* Subtitulo del selector de camino ("Sin terminal" / "Terminal") */ .ck-os button { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; } .ck-os button .sub { font-size: 10.5px; font-weight: 600; opacity: .62; } /* Links de descarga y ayuda dentro de un paso */ .ck-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; } .ck-link { font-size: 12.5px; font-weight: 700; text-decoration: none; background: rgba(0,210,100,0.12); color: var(--green); border: 1px solid rgba(0,210,100,0.3); border-radius: var(--radius-pill); padding: 5px 13px; } .ck-link:hover { background: rgba(0,210,100,0.2); } .ck-link::after, .rec .rt::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .45em; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg) translate(-1px, 1px); } /* Version compacta para proyectar: nueve pasos con descripcion y comandos no * entran en un canvas de 810px. Proyectando alcanza con los titulos. */ .ck-list.compacta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; } .ck-mini { display: flex; align-items: center; gap: 11px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; } .ck-mini .n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,210,100,0.12); color: var(--green); display: grid; place-items: center; font-size: 12.5px; font-weight: 800; } .ck-mini .t { font-size: 15px; font-weight: 600; } /* ---- Recursos ------------------------------------------------------------ */ .rec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 720px) { .rec-grid { grid-template-columns: 1fr; } } .rec { display: flex; flex-direction: column; gap: 3px; text-decoration: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .rec:hover { border-color: var(--border-glow); box-shadow: var(--shadow-glow); } .rec .rt { font-size: 15.5px; font-weight: 700; color: var(--text); } .rec .rt::after { color: var(--green); } .rec .rd { font-size: 13.5px; color: var(--text-dim); line-height: 1.4; } .rec .ru { font-size: 11.5px; color: var(--text-muted); font-family: var(--mono); margin-top: 4px; word-break: break-all; } /* ---- Snippet copiable ---------------------------------------------------- */ .snip { position: relative; margin: 12px 0; } .snip pre { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 52px 12px 14px; overflow-x: auto; color: var(--text); white-space: pre-wrap; word-break: break-word; } .snip-copy { position: absolute; top: 8px; right: 8px; cursor: pointer; font-family: var(--font); font-size: 11px; font-weight: 700; background: rgba(0,210,100,0.12); color: var(--green); border: 1px solid rgba(0,210,100,0.3); border-radius: var(--radius-pill); padding: 4px 10px; } .snip-copy:hover { background: rgba(0,210,100,0.2); } .snip-copy:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* ---- Selector de caso de uso -------------------------------------------- */ .casos-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .casos-pick button { cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 600; background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 15px; } .casos-pick button.on { background: var(--green); color: var(--bg); border-color: var(--green); font-weight: 700; } .caso { display: none; } .caso.on { display: block; } /* En guia y en print un documento de referencia NO esconde contenido detras * de un selector: se muestran todos. */ body[data-modo="guia"] .casos-pick { display: none; } body[data-modo="guia"] .caso { display: block; margin-bottom: 26px; } .caso-h { font-size: 17px; font-weight: 800; margin-bottom: 4px; } .caso-h .rub { color: var(--green); } .caso-d { font-size: 14.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px; } /* ---- Diff antes/despues -------------------------------------------------- */ .diff { font-family: var(--mono); font-size: 12px; line-height: 1.6; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; margin: 12px 0; overflow-x: auto; } .diff .d-h { color: var(--text-muted); display: block; margin-bottom: 5px; } .diff .d-add { color: var(--green); display: block; } .diff .d-del { color: #f87171; display: block; } .diff .d-ctx { color: var(--text-dim); display: block; } /* ---- Agenda con cronometro (solo deck) ---------------------------------- */ .agenda { display: flex; flex-direction: column; gap: 7px; } .agenda .ag { display: flex; align-items: center; gap: 12px; padding: 8px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); font-size: 15px; } .agenda .ag.on { border-color: var(--green); background: rgba(0,210,100,0.06); } .agenda .ag .n { font-family: var(--mono); font-size: 12px; color: var(--text-muted); flex: none; width: 34px; } .agenda .ag .t { flex: 1; font-weight: 600; } .agenda .ag.on .t { color: var(--green); font-weight: 800; } .agenda .ag .m { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); flex: none; } /* ---- Callout de aviso ---------------------------------------------------- */ .callout { display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--border); border-left: 3px solid var(--green); background: rgba(0,210,100,0.05); border-radius: var(--radius-sm); padding: 13px 16px; margin: 14px 0; } .callout.warn { border-left-color: #f87171; background: rgba(239,68,68,0.06); } .callout .ic { flex: none; font-size: 17px; line-height: 1.3; } .callout .cx { font-size: 14.5px; line-height: 1.5; color: var(--text-dim); } .callout .cx b { color: var(--text); } /* ---- QR del cierre ------------------------------------------------------- */ .qr { background: #fff; padding: 12px; border-radius: var(--radius); display: inline-block; } .qr svg { display: block; width: 168px; height: 168px; } /* ============================================================================ * PRINT — la guia en A4 * El tamano de pagina lo decide main.py (PERFILES), no este @page: con * prefer_css_page_size=False, Chromium ignora el `size` de aca para la guia y * usa A4. El @page queda para el perfil `slides`. * ========================================================================== */ @page { margin: 0; } /* el tamano lo decide main.py, ver PERFILES */ body.print { overflow: visible; height: auto; } body.print #controls, body.print #nav { display: none !important; } /* --- Perfil slides: una slide por pagina, tamano real --- */ body.print[data-modo="deck"] { display: block; } body.print[data-modo="deck"] #stage { width: 1440px; height: auto; transform: none; margin: 0; } body.print[data-modo="deck"] .slide { position: relative; inset: auto; opacity: 1; pointer-events: auto; page-break-after: always; break-after: page; transition: none; } body.print[data-modo="deck"] .slide:last-child { page-break-after: auto; break-after: auto; } /* --- Perfil guia: documento continuo A4 --- */ body.print[data-modo="guia"] { /* El gradiente radial repetido por seccion produce banding y engorda el PDF. */ background: var(--bg); } body.print::before { content: ""; position: fixed; inset: 0; background: var(--bg); z-index: -1; } html { background: var(--bg); } body.print[data-modo="guia"] #stage { width: 100%; max-width: none; margin: 0; /* margen 0 en page.pdf + padding aca = el fondo llega al borde */ padding: 14mm 15mm; } body.print[data-modo="guia"] .slide { border-top: none; padding-top: 6mm; } body.print[data-modo="guia"] .pad { padding: 0 0 9mm; } /* Cada bloque principal arranca en pagina nueva. */ body.print[data-modo="guia"] .slide[data-break] { break-before: page; } body.print[data-modo="guia"] .slide:first-of-type { break-before: auto; } /* Nada se parte al medio. */ body.print .card, body.print .term, body.print .ck-item, body.print .caso, body.print .snip, body.print .callout, body.print .cmp-col, body.print .diff, body.print .numbox, body.print .timeline .step { break-inside: avoid; } body.print p, body.print li { orphans: 3; widows: 3; } /* Nada se queda solo al pie de una pagina: * - un titulo sin su contenido * - un pie de foto sin su terminal (esto dejaba paginas con 2% de tinta) */ body.print h1, body.print h2, body.print h3, body.print .eyebrow, body.print .stat-label { break-after: avoid; } /* Solo el pie de foto con su bloque. Atar tambien el .lead al div siguiente * era demasiado: empujaba bloques enteros y dejaba mas paginas a medio llenar. */ body.print .term + .note, body.print .card + .note, body.print .snip + .note { break-before: avoid; } /* Lo interactivo se congela; lo que no tiene sentido impreso desaparece. */ body.print [data-print="drop"] { display: none !important; } body.print .frozen { background: transparent; border: none; padding: 0; } body.print .term-body { min-height: 0; } @media print { #controls, #nav { display: none !important; } }