/* ===== assets/fonts/fonts.css ===== */ /* Fraunces 400-700 · latin · autohospedada (Google Fonts, licencia OFL) */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/fraunces-400-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; } /* IBM Plex Mono 400 · latin · autohospedada (Google Fonts, licencia OFL) */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-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; } /* IBM Plex Mono 500 · latin · autohospedada (Google Fonts, licencia OFL) */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-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; } /* IBM Plex Mono 600 · latin · autohospedada (Google Fonts, licencia OFL) */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-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; } /* Public Sans 400-700 · latin · autohospedada (Google Fonts, licencia OFL) */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/public-sans-400-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; } /* ===== assets/css/taoi-tokens.css ===== */ /* ========================================================================== THE ARK OF ISO — Tokens de diseño v2 · "Radar de Alta Mar" Fuente de verdad para: sitio (thearkofiso.com), app TAoI, ark-riesgos y cualquier vertical futura. Generado 26-10-2026. Regla: ningún componente lleva un hex propio. Si falta un valor, se agrega aquí y se propaga a taoi-tokens.json y taoi-tailwind.preset.cjs. ========================================================================== */ :root { /* ---------- Marca ---------- */ --brand-cyan: #06B6D4; --brand-mint: #34D399; --brand-night: #070D19; --brand-gradient: linear-gradient(135deg, #06B6D4 0%, #10B981 100%); /* ---------- Superficies (de más profunda a más elevada) ---------- */ --bg-deep-sea: #070D19; /* body */ --bg-radar-panel: #0F172A; /* tarjetas, paneles, barra de navegación */ --bg-radar-elevated: #1E293B; /* hover, inputs, filas destacadas */ --bg-dead-archive: #111318; /* "archivo muerto": lo viejo, lo descartado */ --bg-overlay: rgba(7, 13, 25, 0.85); /* nav sticky con blur, modales */ /* ---------- Texto ---------- */ --text-primary: #F8FAFC; --text-secondary: #94A3B8; --text-muted: #8593AA; /* AA en las tres superficies oscuras (≥4.7:1) */ --text-disabled: #64748B; /* solo placeholders, deshabilitados, iconos */ --text-telemetry: #06B6D4; /* números, numerales, salidas de la IA */ --text-on-accent: #041019; /* texto sobre cian o sobre el gradiente */ /* ---------- Acentos ---------- */ --accent-cyan: #06B6D4; --accent-cyan-hover: #0891B2; --accent-cyan-soft: rgba(6, 182, 212, 0.12); --accent-royal: #3B82F6; --accent-note: #38BDF8; /* anotaciones (antes --accent-handwritten) */ /* ---------- Estados ISO: fondo / borde / texto / sólido ---------- */ --iso-conforme-bg: rgba(16, 185, 129, 0.14); --iso-conforme-border: rgba(52, 211, 153, 0.40); --iso-conforme-text: #34D399; --iso-conforme-solid: #10B981; --iso-conforme-on-solid: #041019; /* texto sobre el sólido (matrices, barras con etiqueta) */ --iso-proceso-bg: rgba(245, 158, 11, 0.14); --iso-proceso-border: rgba(251, 191, 36, 0.40); --iso-proceso-text: #FBBF24; --iso-proceso-solid: #F59E0B; --iso-proceso-on-solid: #041019; --iso-brecha-bg: rgba(239, 68, 68, 0.14); --iso-brecha-border: rgba(248, 113, 113, 0.40); --iso-brecha-text: #F87171; --iso-brecha-solid: #EF4444; --iso-brecha-on-solid: #041019; --iso-info-bg: rgba(59, 130, 246, 0.14); --iso-info-border: rgba(96, 165, 250, 0.40); --iso-info-text: #60A5FA; --iso-info-solid: #3B82F6; --iso-info-on-solid: #041019; /* ---------- Líneas ---------- */ --border-subtle: #1E293B; --border-strong: #334155; --border-interactive: #64748B; /* inputs, botón fantasma, toggle: ≥3:1 sobre panel */ --border-cyan-glow: rgba(6, 182, 212, 0.35); --grid-line: rgba(6, 182, 212, 0.04); /* ---------- Sombras ---------- */ --shadow-panel: 0 20px 50px -10px rgba(2, 6, 23, 0.85); /* sin halo cian: el único halo es el del zarpe */ --shadow-card: 0 10px 30px -12px rgba(2, 6, 23, 0.70); --shadow-glow: 0 0 24px rgba(6, 182, 212, 0.35); /* ---------- Tipografía ---------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --text-xs: 0.75rem; /* 12 px — mínimo absoluto en pantalla */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: clamp(2rem, 1.2rem + 2.6vw, 2.75rem); /* 32–44 */ --text-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); /* 40–64 */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.6; --tracking-label: 0.08em; /* tope: 0.12em */ --tracking-display: -0.02em; /* ---------- Espaciado (base 4 px) ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ---------- Radios ---------- */ --radius-sm: 6px; /* chips, inputs, filas */ --radius-md: 10px; /* botones, KPI */ --radius-lg: 16px; /* tarjetas, paneles */ --radius-pill: 999px; /* ---------- Movimiento ---------- */ --motion-fast: 120ms; --motion-base: 220ms; --motion-slow: 400ms; --motion-radar: 4s; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ---------- Layout ---------- */ --container: 1200px; --container-narrow: 760px; --gutter: 1.5rem; --nav-height: 64px; /* ---------- Foco y capas ---------- */ --focus-ring: 0 0 0 2px var(--bg-deep-sea), 0 0 0 4px var(--accent-cyan); /* bicolor: visible sobre cian y sobre fondo */ --z-nav: 50; --z-dropdown: 100; --z-modal: 200; --z-toast: 300; } /* ========================================================================== Modo Documento — claro. Para exportes al auditor, PDF, impresión y cualquier pantalla de lectura densa. Se activa con data-theme="documento" en o en un contenedor, y automáticamente al imprimir. ========================================================================== */ [data-theme="documento"] { color-scheme: light; --bg-deep-sea: #FFFFFF; --bg-radar-panel: #F8FAFC; --bg-radar-elevated: #F1F5F9; --bg-dead-archive: #F1F5F9; --bg-overlay: rgba(255, 255, 255, 0.92); --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #526071; /* ≥5.3:1 también sobre #F1F5F9 */ --text-disabled: #94A3B8; --text-telemetry: #0E7490; --text-on-accent: #FFFFFF; --accent-cyan: #0E7490; --accent-cyan-hover: #155E75; --accent-cyan-soft: rgba(14, 116, 144, 0.10); --accent-royal: #1D4ED8; --accent-note: #0369A1; --iso-conforme-bg: rgba(16, 185, 129, 0.12); --iso-conforme-border: rgba(4, 120, 87, 0.35); --iso-conforme-text: #047857; --iso-conforme-solid: #059669; --iso-conforme-on-solid: #0F172A; --iso-proceso-bg: rgba(245, 158, 11, 0.14); --iso-proceso-border: rgba(180, 83, 9, 0.35); --iso-proceso-text: #B45309; --iso-proceso-solid: #D97706; --iso-proceso-on-solid: #0F172A; --iso-brecha-bg: rgba(239, 68, 68, 0.10); --iso-brecha-border: rgba(185, 28, 28, 0.35); --iso-brecha-text: #B91C1C; --iso-brecha-solid: #DC2626; --iso-brecha-on-solid: #FFFFFF; --iso-info-bg: rgba(59, 130, 246, 0.10); --iso-info-border: rgba(29, 78, 216, 0.35); --iso-info-text: #1D4ED8; --iso-info-solid: #2563EB; --iso-info-on-solid: #FFFFFF; --border-subtle: #E2E8F0; --border-strong: #CBD5E1; --border-interactive: #64748B; --border-cyan-glow: rgba(14, 116, 144, 0.35); --grid-line: rgba(14, 116, 144, 0.05); --shadow-panel: 0 10px 30px -12px rgba(15, 23, 42, 0.15); --shadow-card: 0 6px 20px -10px rgba(15, 23, 42, 0.15); --shadow-glow: none; --brand-gradient: linear-gradient(135deg, #0E7490 0%, #047857 100%); --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #0E7490; } @media print { :root { color-scheme: light; --bg-deep-sea: #FFFFFF; --bg-radar-panel: #FFFFFF; --bg-radar-elevated: #F1F5F9; --bg-dead-archive: #F1F5F9; --bg-overlay: rgba(255, 255, 255, 0.92); --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #526071; /* ≥5.3:1 también sobre #F1F5F9 */ --text-disabled: #94A3B8; --text-telemetry: #0E7490; --text-on-accent: #FFFFFF; --accent-cyan: #0E7490; --accent-cyan-hover: #155E75; --accent-cyan-soft: rgba(14, 116, 144, 0.10); --accent-royal: #1D4ED8; --accent-note: #0369A1; --iso-conforme-bg: rgba(16, 185, 129, 0.12); --iso-conforme-border: rgba(4, 120, 87, 0.35); --iso-conforme-text: #047857; --iso-conforme-solid: #059669; --iso-conforme-on-solid: #0F172A; --iso-proceso-bg: rgba(245, 158, 11, 0.14); --iso-proceso-border: rgba(180, 83, 9, 0.35); --iso-proceso-text: #B45309; --iso-proceso-solid: #D97706; --iso-proceso-on-solid: #0F172A; --iso-brecha-bg: rgba(239, 68, 68, 0.10); --iso-brecha-border: rgba(185, 28, 28, 0.35); --iso-brecha-text: #B91C1C; --iso-brecha-solid: #DC2626; --iso-brecha-on-solid: #FFFFFF; --iso-info-bg: rgba(59, 130, 246, 0.10); --iso-info-border: rgba(29, 78, 216, 0.35); --iso-info-text: #1D4ED8; --iso-info-solid: #2563EB; --iso-info-on-solid: #FFFFFF; --border-subtle: #E2E8F0; --border-strong: #CBD5E1; --border-interactive: #64748B; --border-cyan-glow: rgba(14, 116, 144, 0.35); --grid-line: transparent; --shadow-panel: none; --shadow-card: none; --shadow-glow: none; --brand-gradient: linear-gradient(135deg, #0E7490 0%, #047857 100%); --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #0E7490; } } /* ===== assets/css/taoi-base.css ===== */ /* ========================================================================== THE ARK OF ISO — Base v2 · "Radar de Alta Mar" Reset, tipografía, foco, utilidades, reduced-motion e impresión. Requiere taoi-tokens.css cargado antes. Fuentes: NO se importan aquí (un @import dentro de un CSS enlazado bloquea el render). Cada página las enlaza en , antes de este archivo: (CSP: style-src https://fonts.googleapis.com · font-src https://fonts.gstatic.com) ========================================================================== */ /* ---------- Reset mínimo ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; color-scheme: dark; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } img, svg, video { display: block; max-width: 100%; height: auto; } pre { max-width: 100%; overflow-x: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* ---------- Cuerpo ---------- */ body { min-height: 100vh; background-color: var(--bg-deep-sea); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Fondo de radar (solo Modo Sitio): dos resplandores y rejilla de 48 px. Las apps no lo usan: fondo plano deep-sea. */ .ark-grid-bg { background-image: radial-gradient(circle at 15% 15%, rgba(6, 182, 212, 0.08) 0%, transparent 45%), radial-gradient(circle at 85% 80%, rgba(52, 211, 153, 0.06) 0%, transparent 45%), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px; } ::selection { background: rgba(6, 182, 212, 0.35); color: var(--text-primary); } /* ---------- Tipografía ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--text-primary); font-optical-sizing: auto; } h1 { font-size: var(--text-display); font-weight: 700; font-variation-settings: 'opsz' 144; } h2 { font-size: var(--text-3xl); font-variation-settings: 'opsz' 144; } h3 { font-size: var(--text-xl); line-height: var(--leading-snug); } h4 { font-size: var(--text-lg); line-height: var(--leading-snug); } /* El acento de marca: una palabra en itálica cian. Es opt-in (clase), para que un de énfasis normal en una app no se convierta en acento. Tope: uno por página en el sitio, cero en las apps. */ .ark-accent { font-style: italic; font-weight: 500; color: var(--accent-cyan); } p { max-width: 68ch; } p + p { margin-top: var(--space-4); } .ark-lead { font-size: var(--text-lg); color: var(--text-secondary); max-width: 60ch; } .ark-muted { color: var(--text-secondary); } small, .ark-small { font-size: var(--text-sm); } /* :where() deja la especificidad en 0,0,1: cualquier clase de componente (.btn, .ark-brand, .ark-nav__links a, .ark-footer a, .ark-table a) gana sin pelear con este estilo base. */ a:where(:not(.btn)) { color: var(--accent-cyan); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:where(:not(.btn)):hover { color: var(--text-primary); } strong, b { font-weight: 600; } /* Mono: datos, numerales, códigos. Nunca párrafos. */ code, kbd, .ark-mono { font-family: var(--font-mono); font-size: 0.92em; } .ark-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Antetítulo: Public Sans 13 px semibold, gris, sin mayúsculas. Es texto, no adorno. La variante --code (mono, mayúsculas, cian) se reserva para contenido que ES un código: un numeral, una carta, una etapa, un ID. */ .ark-kicker { display: inline-block; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); } .ark-kicker--code { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-telemetry); } /* Anotación de bitácora: Public Sans 500 en azul nota con filete a la izquierda. No es itálica: la única itálica de la página es .ark-accent. Sustituye a Caveat (retirada en v2). */ .ark-nota { display: inline-block; font-weight: 500; color: var(--accent-note); border-left: 2px solid var(--accent-note); padding-left: var(--space-3); } /* ---------- Foco visible (no negociable) ---------- */ :focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 3px; } a:focus-visible { border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } /* ---------- Layout ---------- */ .ark-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .ark-container--narrow { max-width: var(--container-narrow); } .ark-section { padding-block: var(--space-16); border-top: 1px solid var(--border-subtle); } .ark-section__head { margin-bottom: var(--space-8); } .ark-section__head h2 { margin-top: var(--space-2); } .ark-stack > * + * { margin-top: var(--space-4); } .ark-grid-2, .ark-grid-3, .ark-grid-4 { display: grid; gap: var(--space-5); } .ark-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ark-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ark-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .ark-grid-3, .ark-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ark-section { padding-block: var(--space-12); } } @media (max-width: 600px) { .ark-grid-2, .ark-grid-3, .ark-grid-4 { grid-template-columns: minmax(0, 1fr); } :root { --gutter: 1rem; } } /* ---------- Accesibilidad ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ark-skip { position: absolute; left: var(--space-4); top: -100px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: var(--accent-cyan); color: var(--text-on-accent); font-weight: 600; z-index: calc(var(--z-toast) + 1); transition: top var(--motion-fast); } .ark-skip:focus { top: var(--space-4); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media print { .ark-grid-bg { background-image: none; } .ark-nav, .ark-topbar, .ark-skip, .btn, .ark-lang, .ark-pass, .ark-radar, .ark-pulse, .ark-empty { display: none !important; } .ark-card, .ark-norm, .ark-clause, .ark-kpi, .ark-gov, tr { break-inside: avoid; } h2, h3 { break-after: avoid; } a { color: inherit; text-decoration: none; } } /* ===== assets/css/taoi-components.css ===== */ /* ========================================================================== THE ARK OF ISO — Componentes v2 · "Radar de Alta Mar" Clases reutilizables para sitio y apps. Sin hex propios: todo sale de taoi-tokens.css. Requiere taoi-tokens.css + taoi-base.css. Índice: topbar · nav (con colapso móvil) · botones · tarjetas · badges · KPI · progreso · fila de norma · fila de numeral · badge de gobernanza · pase de abordaje · radar · pulso · tabla · formularios · pie · toggle de idioma · estado vacío · foco (al final, gana la cascada) ========================================================================== */ /* ---------- Topbar de expediente (solo Modo Sitio) ---------- */ .ark-topbar { padding: var(--space-2) var(--gutter); background: var(--bg-overlay); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); color: var(--text-telemetry); text-align: center; } /* ---------- Barra de navegación ---------- */ .ark-nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--bg-overlay); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); } .ark-nav__inner { min-height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .ark-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text-primary); min-height: 44px; } .ark-brand__mark { width: 36px; height: 36px; flex: none; } .ark-brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.05; display: block; letter-spacing: var(--tracking-display); font-optical-sizing: auto; } .ark-brand__tag { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-telemetry); letter-spacing: 0.04em; display: block; margin-top: 2px; } .ark-nav__links { display: flex; align-items: center; gap: var(--space-5); font-size: var(--text-sm); list-style: none; margin: 0; padding: 0; } .ark-nav__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-secondary); text-decoration: none; transition: color var(--motion-fast); } .ark-nav__links a:hover, .ark-nav__links a[aria-current="page"] { color: var(--text-primary); } .ark-nav__links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent-cyan); } .ark-nav__toggle { display: none; min-width: 44px; min-height: 44px; border: 1px solid var(--border-interactive); border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; padding: 0 var(--space-3); } .ark-pill { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--bg-radar-panel); border: 1px solid var(--border-interactive); color: var(--text-primary); text-decoration: none; } .ark-pill:hover { border-color: var(--accent-cyan); color: var(--text-telemetry); } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0.7rem 1.35rem; border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--motion-base) var(--ease-out), color var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base), transform var(--motion-fast); } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } /* Zarpe: la acción principal del sitio. Uno por pantalla. */ .btn-zarpe, .btn-zarpe:hover, .btn-zarpe:focus-visible { background: var(--brand-gradient); color: var(--text-on-accent); } .btn-zarpe { box-shadow: var(--shadow-glow); } .btn-zarpe:hover { filter: brightness(1.06); } /* Sólido: la acción principal en las apps (sin gradiente ni halo). */ .btn-solid, .btn-solid:hover, .btn-solid:focus-visible { background: var(--accent-cyan); color: var(--text-on-accent); } .btn-solid:hover { background: var(--accent-cyan-hover); } /* Fantasma: acción secundaria. */ .btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-interactive); } .btn-ghost:hover { border-color: var(--accent-cyan); color: var(--text-telemetry); } /* Brecha: acción destructiva en apps (cerrar NC, eliminar). */ .btn-brecha { background: transparent; color: var(--iso-brecha-text); border-color: var(--iso-brecha-border); } .btn-brecha:hover { background: var(--iso-brecha-bg); } /* -sm: solo en escritorio y dentro de tablas (40 px). En móvil, tamaño normal. */ .btn-sm { min-height: 40px; padding: 0.45rem 0.9rem; font-size: var(--text-sm); border-radius: var(--radius-sm); } .btn-lg { min-height: 52px; padding: 0.9rem 1.75rem; font-size: 1.05rem; } .btn-block { width: 100%; } /* ---------- Tarjetas ---------- */ .ark-card { background: var(--bg-radar-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: var(--space-8); } .ark-card--flat { box-shadow: none; padding: var(--space-6); } /* grillas de app */ .ark-card--dead { background: var(--bg-dead-archive); border-style: dashed; border-color: var(--border-strong); box-shadow: none; } .ark-card--alive { border-color: var(--border-cyan-glow); box-shadow: var(--shadow-panel), 0 0 0 1px var(--accent-cyan-soft); } .ark-card--flat.ark-card--alive { box-shadow: 0 0 0 1px var(--accent-cyan-soft); } .ark-card--conforme { border-color: var(--iso-conforme-border); } .ark-card > .ark-kicker { margin-bottom: var(--space-2); } .ark-card > h3 + p, .ark-card__desc { margin-top: var(--space-2); color: var(--text-secondary); } .ark-card__foot { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-telemetry); } .ark-card--dead .ark-card__foot { color: var(--text-muted); } /* ---------- Badges de estado ISO ---------- */ .badge-iso { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; } .badge-iso--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-conforme { background: var(--iso-conforme-bg); border-color: var(--iso-conforme-border); color: var(--iso-conforme-text); } .badge-proceso { background: var(--iso-proceso-bg); border-color: var(--iso-proceso-border); color: var(--iso-proceso-text); } .badge-brecha { background: var(--iso-brecha-bg); border-color: var(--iso-brecha-border); color: var(--iso-brecha-text); } .badge-info { background: var(--iso-info-bg); border-color: var(--iso-info-border); color: var(--iso-info-text); } .badge-neutral { background: var(--bg-radar-elevated); border-color: var(--border-strong); color: var(--text-secondary); } /* Sólidos: celdas de matriz, chips de nivel extremo. Texto siempre en -on-solid. */ .badge-iso--solid.badge-conforme { background: var(--iso-conforme-solid); color: var(--iso-conforme-on-solid); border-color: transparent; } .badge-iso--solid.badge-proceso { background: var(--iso-proceso-solid); color: var(--iso-proceso-on-solid); border-color: transparent; } .badge-iso--solid.badge-brecha { background: var(--iso-brecha-solid); color: var(--iso-brecha-on-solid); border-color: transparent; } .badge-iso--solid.badge-info { background: var(--iso-info-solid); color: var(--iso-info-on-solid); border-color: transparent; } /* ---------- KPI ---------- */ .ark-kpi { background: var(--bg-radar-elevated); background: color-mix(in srgb, var(--bg-radar-elevated) 50%, transparent); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); } .ark-kpi__label { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } .ark-kpi__value { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-weight: 600; font-size: var(--text-2xl); line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; } .ark-kpi__value.is-conforme { color: var(--iso-conforme-text); } .ark-kpi__value.is-proceso { color: var(--iso-proceso-text); } .ark-kpi__value.is-brecha { color: var(--iso-brecha-text); } .ark-kpi__value.is-telemetry { color: var(--text-telemetry); } .ark-kpi__delta { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); } /* ---------- Barra de progreso / severidad ---------- */ .ark-progress { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--border-strong); overflow: hidden; } .ark-progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent-cyan); } /* La barra no "sube desde cero" al cargar. Solo transiciona cuando el valor cambia (opt-in). */ .ark-progress--animate .ark-progress__fill { transition: width var(--motion-slow) var(--ease-out); } .ark-progress__fill.is-conforme { background: var(--iso-conforme-solid); } .ark-progress__fill.is-proceso { background: var(--iso-proceso-solid); } .ark-progress__fill.is-brecha { background: var(--iso-brecha-solid); } .ark-progress__fill.is-info { background: var(--iso-info-solid); } .ark-progress--lg { height: 12px; } /* ---------- Fila de norma: nombre + porcentaje + barra (panel de normas) ---------- */ .ark-norm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-radar-panel); } .ark-norm__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); font-optical-sizing: auto; } .ark-norm__pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: var(--text-sm); } .ark-norm .ark-progress { grid-column: 1 / -1; } /* ---------- Fila de numeral (cláusula) ---------- */ .ark-clause { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--bg-radar-elevated); background: color-mix(in srgb, var(--bg-radar-elevated) 35%, transparent); font-size: var(--text-sm); } .ark-clause + .ark-clause { margin-top: var(--space-1); } .ark-clause__num { font-family: var(--font-mono); font-weight: 600; color: var(--text-telemetry); min-width: 2.5ch; } .ark-clause__name { flex: 1; } /* ---------- Badge de gobernanza (numeral 7.5) ---------- */ .ark-gov { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); background: var(--iso-conforme-bg); border: 1px dashed var(--iso-conforme-border); border-radius: var(--radius-lg); max-width: 520px; } .ark-gov__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--iso-conforme-bg); background: color-mix(in srgb, var(--iso-conforme-solid) 25%, transparent); color: var(--iso-conforme-text); border: 1.5px solid var(--iso-conforme-border); } .ark-gov__kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--iso-conforme-text); } .ark-gov__title { display: block; font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); line-height: 1.3; } .ark-gov__sub { display: block; font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; } /* ---------- Pase de abordaje (captación de leads, solo Modo Sitio) ---------- Marcado:
…
El exterior dibuja el marco achaflanado (es el "borde"); el interior lleva el fondo, la rejilla y las escuadras HUD. */ .ark-pass { position: relative; padding: 1px; background: var(--border-cyan-glow); clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); } .ark-pass__inner { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); padding: var(--space-10); background: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), var(--bg-radar-panel); background-size: 32px 32px, 32px 32px, 100% 100%; clip-path: polygon(15.5px 0, calc(100% - 15.5px) 0, 100% 15.5px, 100% calc(100% - 15.5px), calc(100% - 15.5px) 100%, 15.5px 100%, 0 calc(100% - 15.5px), 0 15.5px); } /* Escuadras HUD, fuera de la zona de chaflán */ .ark-pass__inner::before, .ark-pass__inner::after { content: ""; position: absolute; width: 26px; height: 26px; border: 2px solid var(--accent-cyan); pointer-events: none; } .ark-pass__inner::before { top: 22px; left: 22px; border-right: 0; border-bottom: 0; } .ark-pass__inner::after { bottom: 22px; right: 22px; border-left: 0; border-top: 0; } .ark-pass__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); } .ark-pass__meta strong { color: var(--text-primary); font-weight: 600; } .ark-pass__meta .is-telemetry { color: var(--text-telemetry); } .ark-pass__meta .is-conforme { color: var(--iso-conforme-text); } .ark-pass__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-telemetry); } .ark-pass__code::before { content: "[ "; color: var(--accent-cyan); } .ark-pass__code::after { content: " ]"; color: var(--accent-cyan); } .ark-pass__barcode { height: 44px; margin-top: var(--space-5); max-width: 320px; opacity: 0.7; background: repeating-linear-gradient(90deg, var(--accent-cyan) 0 2px, transparent 2px 4px, var(--accent-cyan) 4px 7px, transparent 7px 9px, var(--accent-cyan) 9px 10px, transparent 10px 14px, var(--accent-cyan) 14px 16px, transparent 16px 21px, var(--accent-cyan) 21px 22px, transparent 22px 25px); } .ark-pass__form { display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; } /* ---------- Radar (SVG inline; ver modelo-grafico.html para el marcado) ---------- */ .ark-radar { width: 100%; max-width: 320px; aspect-ratio: 1; display: block; color: var(--accent-cyan); } .ark-radar--sm { max-width: 72px; } .ark-radar__sweep { transform-origin: 50% 50%; animation: ark-sweep var(--motion-radar) linear infinite; } .ark-radar--static .ark-radar__sweep { animation: none; } @keyframes ark-sweep { to { transform: rotate(360deg); } } /* ---------- Pulso de sistema activo: uno por pantalla ---------- */ .ark-pulse { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--iso-conforme-text); vertical-align: middle; } .ark-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--iso-conforme-text); opacity: 0; animation: ark-pulse 2.4s var(--ease-out) infinite; } .ark-pulse--static::after { animation: none; } @keyframes ark-pulse { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } } /* ---------- Tabla (Modo Aplicación) ---------- */ .ark-table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-radar-panel); max-width: 100%; } .ark-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--text-sm); } .ark-table th { text-align: left; padding: var(--space-3) var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); border-bottom: 1px solid var(--border-strong); } .ark-table td { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .ark-table tbody tr:hover { background: var(--bg-radar-elevated); background: color-mix(in srgb, var(--bg-radar-elevated) 40%, transparent); } .ark-table .num, .ark-table td.num, .ark-table th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .ark-table .code { font-family: var(--font-mono); color: var(--text-telemetry); white-space: nowrap; } .ark-table td:has(> .badge-iso) { white-space: nowrap; } .ark-table a { color: inherit; text-decoration: none; } .ark-table a:hover { color: var(--text-telemetry); text-decoration: underline; } .ark-table--dense th, .ark-table--dense td { padding: var(--space-2) var(--space-3); } /* ---------- Formularios ---------- */ .ark-field { display: flex; flex-direction: column; gap: var(--space-2); } .ark-field__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); } .ark-field__label .req { color: var(--iso-brecha-text); } .ark-input, .ark-select, .ark-textarea { width: 100%; min-height: 44px; padding: 0.7rem 1rem; background: var(--bg-deep-sea); color: var(--text-primary); border: 1px solid var(--border-interactive); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-base); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } .ark-input--mono { font-family: var(--font-mono); } /* El placeholder muestra el formato, nunca la instrucción (eso va en __hint). */ .ark-input::placeholder, .ark-textarea::placeholder { color: var(--text-muted); } .ark-input[aria-invalid="true"], .ark-field.is-invalid .ark-input { border-color: var(--iso-brecha-solid); } .ark-field__hint { font-size: var(--text-xs); color: var(--text-muted); } .ark-field__error { font-size: var(--text-sm); color: var(--iso-brecha-text); } .ark-field__error::before { content: "⚠ "; } /* ---------- Pie de página ---------- */ .ark-footer { border-top: 1px solid var(--border-subtle); padding-block: var(--space-12) var(--space-8); font-size: var(--text-sm); } .ark-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); } .ark-footer__brand p { color: var(--text-secondary); margin-top: var(--space-3); max-width: 38ch; } .ark-footer h4, .ark-footer .ark-footer__h { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-telemetry); margin-bottom: var(--space-3); } .ark-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); } .ark-footer a { color: var(--text-secondary); text-decoration: none; } .ark-footer a:hover { color: var(--text-primary); } .ark-footer__legal { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); } /* Versión corta para apps: marca + soporte en una fila */ .ark-footer--compact { padding-block: var(--space-6); } .ark-footer--compact .ark-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); } .ark-footer--compact .ark-footer__legal { margin-top: 0; padding-top: 0; border-top: 0; } /* ---------- Toggle de idioma (ES primero) ---------- */ .ark-lang { display: inline-flex; border: 1px solid var(--border-interactive); border-radius: var(--radius-sm); overflow: hidden; } .ark-lang > button, .ark-lang > a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-width: 44px; min-height: 44px; padding: 0 var(--space-3); background: transparent; border: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); color: var(--text-secondary); } .ark-lang > button[aria-pressed="true"], .ark-lang > a[aria-current] { background: var(--accent-cyan-soft); color: var(--text-telemetry); } .ark-lang > * + * { border-left: 1px solid var(--border-interactive); } /* ---------- Estado vacío ---------- */ .ark-empty { text-align: center; padding: var(--space-12) var(--space-6); border: 1px dashed var(--border-interactive); border-radius: var(--radius-lg); color: var(--text-secondary); } .ark-empty .ark-radar { margin: 0 auto var(--space-4); } .ark-empty h3 { color: var(--text-primary); margin-bottom: var(--space-2); } .ark-empty p { margin-inline: auto; } .ark-empty .btn { margin-top: var(--space-5); } /* ---------- Responsivo ---------- */ @media (max-width: 900px) { /* Nav colapsable: el botón .ark-nav__toggle muestra/oculta .ark-nav__links (aria-expanded + is-open). */ .ark-nav { position: static; } .ark-nav__toggle { display: inline-flex; align-items: center; justify-content: center; } .ark-nav__links { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--space-3); } .ark-nav__links.is-open { display: flex; } .ark-nav__links a { padding-block: var(--space-2); } .ark-pass__inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) var(--space-6); } .ark-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .ark-footer__grid { grid-template-columns: minmax(0, 1fr); } .ark-gov { grid-template-columns: minmax(0, 1fr); } .btn { white-space: normal; } .btn-sm { min-height: 44px; } } /* ---------- Foco visible: al final para ganar la cascada ---------- Anillo bicolor (--focus-ring): un aro del color del fondo y otro cian, visible tanto sobre un botón cian como sobre el fondo. */ .btn:focus-visible, .ark-input:focus-visible, .ark-select:focus-visible, .ark-textarea:focus-visible, .ark-lang > button:focus-visible, .ark-lang > a:focus-visible, .ark-pill:focus-visible, .ark-nav__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-zarpe:focus-visible { box-shadow: var(--focus-ring), var(--shadow-glow); } .ark-input:focus-visible, .ark-select:focus-visible, .ark-textarea:focus-visible { border-color: var(--accent-cyan); } /* ===== assets/css/sitio.css ===== */ /* ========================================================================== thearkofiso.com v2 · estilos propios del sitio (Modo Sitio). Regla: solo tokens (var(--*)); ningún hex. Los componentes viven en taoi-components.css; aquí van layout de página y variantes del sitio. ========================================================================== */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-padding-top: calc(var(--nav-height) + var(--space-4)); } h1, h2, h3 { text-wrap: balance; } p, li, dd, figcaption { text-wrap: pretty; } .ark-kpi__value, .ark-norm__pct, .ark-table .num, time { font-variant-numeric: tabular-nums; } main > .ark-section:first-child { border-top: 0; } .ark-section__head .ark-lead { margin-top: var(--space-3); } /* ---------- Navegación: toggle de idioma y CTA dentro de la lista ---------- */ .ark-nav__links .btn.ark-nav__cta, .ark-nav__links .btn.ark-nav__cta:hover { color: var(--text-primary); } .ark-nav__links .btn.ark-nav__cta:hover { color: var(--text-telemetry); } .ark-nav__lang { margin-left: var(--space-2); } .ark-nav__links .ark-lang > a { min-height: 44px; } .ark-footer__link { background: none; border: 0; padding: 0; font: inherit; color: var(--text-secondary); cursor: pointer; text-decoration: none; min-height: 24px; line-height: 24px; } .ark-footer ul a, .glos-sample a, .crumbs a { display: inline-block; line-height: 24px; min-height: 24px; } .ark-footer__link:hover { color: var(--text-primary); } .ark-footer__lema { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-telemetry); } .ark-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } /* ---------- Héroe de portada ---------- */ .hero { padding-block: var(--space-6) var(--space-8); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; } .hero__copy { padding-top: clamp(var(--space-5), 6vh, var(--space-12)); } .hero__copy h1 { font-size: var(--text-display); } .hero__lead { margin-top: var(--space-5); font-size: var(--text-xl); max-width: 32ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); } .hero__facts { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); color: var(--text-muted); } .hero__facts li { display: inline-flex; align-items: center; gap: var(--space-2); } .hero__facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--iso-conforme-text); flex: none; } .hero__panelnote { margin-top: var(--space-3); max-width: 52ch; } /* El único momento orquestado del sitio: la portada aparece una vez. */ @keyframes ark-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .hero__copy > * { animation: ark-arrive var(--motion-slow) var(--ease-out) both; } .hero__copy > :nth-child(2) { animation-delay: 80ms; } .hero__copy > :nth-child(3) { animation-delay: 160ms; } .hero__copy > :nth-child(4) { animation-delay: 240ms; } .hero__panel { animation: ark-arrive var(--motion-slow) var(--ease-out) 200ms both; } /* ---------- Panel de a bordo (vista del producto) ---------- */ .board { padding: var(--space-4); } .board__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); } .board__company { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin-top: var(--space-1); } .board__radar { flex: none; width: 96px; } .board__radar .ark-radar { max-width: 96px; } .board__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; } .board__kpis .ark-kpi { padding: var(--space-2) var(--space-3); } .board__kpis .ark-kpi__value { font-size: var(--text-xl); } .board__clauses { display: grid; gap: 2px; } /* altura fija (3 líneas de una sola línea): la bitácora viva nunca mueve el resto del héroe */ .board__log { margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-secondary); display: grid; align-content: start; gap: var(--space-1); height: calc(var(--space-3) + 1px + 3 * 1.6em + 2 * var(--space-1)); overflow: hidden; } .board__log > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: baseline; line-height: 1.6; } .board__log .board__msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .board__hint { margin-top: var(--space-2); color: var(--text-muted); } .board__log:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; height: calc(3 * 1.6em + 2 * var(--space-1)); } .ark-kpi__value.is-bump { animation: m-bump 600ms var(--ease-out); } @keyframes m-bump { 0% { color: var(--text-primary); } 100% { color: inherit; } } .board__log time { font-family: var(--font-mono); color: var(--text-muted); font-size: var(--text-xs); line-height: 1.6; } .board__log em { font-style: normal; font-family: var(--font-mono); font-size: var(--text-xs); } .board__log .is-proceso { color: var(--iso-proceso-text); } .board__log .is-conforme { color: var(--iso-conforme-text); } /* ---------- Tarjetas de norma ---------- */ .normgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } .normgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .normcard { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-radar-panel); text-decoration: none; color: var(--text-primary); min-height: 44px; transition-property: border-color, transform; transition-duration: var(--motion-fast); } a.normcard:hover { border-color: var(--accent-cyan); color: var(--text-primary); } .normcard__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-telemetry); } .normcard__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-snug); } .normcard__meta, .normcard__go { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); } .normcard__status { margin-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-secondary); } .normcard__status .ark-mono { font-size: var(--text-xs); } .normcard--soon { border-style: dashed; background: transparent; color: var(--text-secondary); } .normbig-grid { margin-top: var(--space-8); } .normbig { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: inherit; } .normbig:hover { border-color: var(--accent-cyan); color: inherit; } .normbig__code { font-family: var(--font-mono); color: var(--text-telemetry); font-size: var(--text-sm); } .normbig__title { font-size: var(--text-xl); font-optical-sizing: auto; } .normbig p { color: var(--text-secondary); } .normbig__status { margin-top: auto; padding-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); } /* ---------- Comparación (archivo muerto / sistema vivo) ---------- */ .compare .ark-card__foot { display: flex; gap: var(--space-3); flex-wrap: wrap; } .compare .ark-card__foot .ark-kpi { flex: 1 1 140px; } .compare .ark-kpi__value { white-space: nowrap; } .compare .ark-kpi__value small { font-size: var(--text-sm); font-weight: 400; color: var(--text-muted); } /* ---------- La ruta (carta de navegación) ---------- */ .route { list-style: none; margin: 0; padding: var(--space-6) 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); position: relative; counter-reset: wp; } .route__wp { position: relative; padding-top: var(--space-5); display: grid; gap: var(--space-1); align-content: start; counter-increment: wp; } .route__dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-deep-sea); border: 2px solid var(--accent-cyan); } .route__wp--end .route__dot { background: var(--iso-conforme-solid); border-color: var(--iso-conforme-text); } .route__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); } .route__name::before { content: counter(wp, decimal-leading-zero) " · "; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-telemetry); font-weight: 500; } .route__desc { font-size: var(--text-sm); color: var(--text-secondary); } .route__nota { margin-top: var(--space-2); font-size: var(--text-sm); } .route__foot { margin-top: var(--space-8); max-width: 62ch; color: var(--text-secondary); } .instruments { margin-top: var(--space-10); } .instr h3 { font-size: var(--text-lg); } .instr p { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); } /* ---------- Tabla de travesías ---------- */ .travesias .is-conforme { color: var(--iso-conforme-text); } .travesias .th-short { display: none; } .travesias.m-wait .tbar i { transform: scaleX(0); } /* ---------- Gobernanza y registro de hallazgo ---------- */ .gov { align-items: start; } .finding { margin: 0; } .finding__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; } .finding__body { margin: 0; display: grid; gap: var(--space-3); } .finding__body > div { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: var(--space-3); font-size: var(--text-sm); } .finding__body dt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); padding-top: 2px; } .finding__body dd { margin: 0; color: var(--text-primary); } /* ---------- Guías / Escuela ---------- */ .guide { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: inherit; } .guide:hover { border-color: var(--accent-cyan); color: inherit; } .guide__time { font-size: var(--text-xs); color: var(--text-telemetry); } .guide h3, .guide .guide__title { font-size: var(--text-xl); font-family: var(--font-display); font-optical-sizing: auto; } .guide p { color: var(--text-secondary); font-size: var(--text-sm); } .glos-sample { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--space-4); } .glos-sample li { padding-block: var(--space-1); break-inside: avoid; } .glos-sample a { color: var(--text-primary); } /* ---------- Tripulación ---------- */ .people__aside { align-self: center; } .people__list { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-3); } .people__list li { display: grid; gap: 2px; padding-left: var(--space-4); border-left: 2px solid var(--border-strong); } .people__list span { font-size: var(--text-sm); color: var(--text-secondary); } [data-pendiente] { color: var(--text-muted); } /* ---------- Pase de abordaje: campos del formulario ---------- */ .pass__title { margin-top: var(--space-2); font-size: var(--text-2xl); } .ark-field--check { flex-direction: row; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); } .ark-field--check input { width: 24px; height: 24px; margin-top: 0; flex: none; accent-color: var(--accent-cyan); } .ark-field--check label { line-height: 1.5; } .pass__alt { margin-top: var(--space-2); } .pass__status { min-height: 1.5em; margin-top: var(--space-1); } .pass__status:empty::before { content: none; } .pass__trust { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); max-width: 40ch; } .pass__trust li { padding-left: var(--space-5); position: relative; } .pass__trust li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--iso-conforme-text); } .ark-pass__form .is-ok { color: var(--iso-conforme-text); } .ark-pass__form .is-ok::before { content: "✓ "; } .ark-pass__inner { padding-top: calc(var(--space-10) + 10px); } /* ---------- FAQ (details nativo) ---------- */ .faq { display: grid; gap: var(--space-2); max-width: 76ch; } .faq__item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-radar-panel); } .faq__item summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: 600; list-style: none; min-height: 44px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; font-family: var(--font-mono); color: var(--text-telemetry); font-size: var(--text-lg); line-height: 1; } .faq__item[open] summary::after { content: "−"; } .faq__item summary:hover { color: var(--text-telemetry); } .faq__num { font-size: var(--text-xs); color: var(--text-telemetry); font-weight: 500; } .faq__a { padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 3.2rem); color: var(--text-secondary); } /* ---------- Páginas interiores ---------- */ .pagehero { padding-block: var(--space-10) var(--space-12); } .pagehero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; margin-top: var(--space-6); } .pagehero .guides { margin-top: var(--space-8); } .board__status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: none; color: var(--text-secondary); } .pagehero__single { max-width: 70ch; margin-top: var(--space-6); } .pagehero h1 { font-size: var(--text-3xl); } .pagehero .ark-lead { margin-top: var(--space-4); } .pagehero .ark-nota { margin-top: var(--space-4); } .pagehero__pill { margin-bottom: var(--space-4); } .pagehero .ark-pass { margin-top: var(--space-8); } .pagehero__aside .board { padding: var(--space-4); } .crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); } .crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--border-interactive); } .crumbs a { color: var(--text-secondary); min-height: 24px; display: inline-block; } .carta { align-items: start; } .carta h2 { margin-top: var(--space-2); } .carta__body { max-width: 62ch; margin-top: var(--space-5); } .carta h2 + .ark-lead, .carta .ark-nota + .ark-lead { margin-top: var(--space-3); } .ark-card .ark-norm { background: transparent; border: 0; border-radius: 0; padding: var(--space-2) 0; } .ark-card .ark-norm + .ark-norm { border-top: 1px solid var(--border-subtle); } .ark-card .ark-norm__name { font-size: var(--text-lg); } .carta .ark-nota { margin-top: var(--space-4); } .paso__aside { position: sticky; top: calc(var(--nav-height) + var(--space-6)); } .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } .steps__item { display: grid; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-radar-panel); } .steps__num { font-size: var(--text-xs); color: var(--text-telemetry); } .steps h3 { font-size: var(--text-lg); } .steps p { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); } .checklist, .queue, .ticks { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); } .checklist li { display: flex; gap: var(--space-2); align-items: center; } .queue li { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); } .queue li:last-child { border-bottom: 0; } .ticks li { padding-left: var(--space-5); position: relative; color: var(--text-secondary); } .ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent-cyan); } .deliverables ul { padding-left: 1.1rem; margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); display: grid; gap: var(--space-1); } .deliverables h3 { font-size: var(--text-lg); } /* ---------- Banda final de llamada a la acción ---------- */ .ctaband__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--space-8); align-items: center; padding: var(--space-10); } .ctaband__actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; min-width: 260px; } /* ---------- Artículos (Escuela, privacidad) ---------- */ .article { padding-block: var(--space-10) var(--space-16); max-width: var(--container-narrow); } .article__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-10); } .article__head h1 { font-size: var(--text-3xl); } .article__body { display: grid; gap: var(--space-5); font-size: var(--text-lg); line-height: var(--leading-body); max-width: 68ch; } .article__body h2 { font-size: var(--text-2xl); margin-top: var(--space-6); } .article__body ul { padding-left: 1.2rem; display: grid; gap: var(--space-2); } .article__body ol { padding-left: 1.6rem; display: grid; gap: var(--space-3); } .article__body ol li::marker { font-family: var(--font-mono, monospace); color: var(--text-telemetry); } .article__body a { color: var(--text-telemetry); } .ejemplo { padding: var(--space-5); font-size: var(--text-base); } .ejemplo p { margin-top: var(--space-2); color: var(--text-secondary); } .ark-nota--block { display: block; font-size: var(--text-base); max-width: 62ch; } .article__foot { margin-top: var(--space-12); display: grid; gap: var(--space-5); } .article__next { display: grid; gap: var(--space-1); } .article__next a { color: var(--text-primary); text-decoration: none; font-size: var(--text-lg); } .article__next a:hover { color: var(--text-telemetry); } .article__foot p { display: flex; flex-wrap: wrap; gap: var(--space-3); } .glos__index ul { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-2); } .glos__index a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-sm); text-decoration: none; color: var(--text-secondary); } .glos__index a:hover { border-color: var(--accent-cyan); color: var(--text-telemetry); } .glos { margin: 0; display: grid; gap: var(--space-5); } .glos__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); scroll-margin-top: calc(var(--nav-height) + var(--space-6)); } .glos dt { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); } .glos dd { margin: 0; color: var(--text-secondary); } /* ---------- 404 ---------- */ .notfound { text-align: center; } .notfound .pagehero__single { margin-inline: auto; } .notfound__radar { width: 120px; margin: 0 auto var(--space-5); } .notfound__radar .ark-radar { max-width: 120px; } .notfound .hero__actions { justify-content: center; } /* ---------- Aviso de cookies ---------- */ /* anclado abajo a la izquierda en escritorio: nunca tapa el panel de a bordo */ .consent { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: var(--z-toast); margin: 0; max-width: 420px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-5); background: var(--bg-radar-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); font-size: var(--text-sm); } .consent p { color: var(--text-secondary); } .consent strong { color: var(--text-primary); display: block; margin-bottom: var(--space-1); } .consent__btns { display: flex; gap: var(--space-2); justify-content: flex-end; } /* ---------- Responsive ---------- */ @media (max-width: 1200px) { .route { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-8); } .route__line { display: none; } .normgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ark-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .hero { padding-block: var(--space-6) var(--space-8); } .hero__grid, .pagehero__grid, .ctaband__inner { grid-template-columns: minmax(0, 1fr); } .hero__lead { max-width: 60ch; } .normgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .paso__aside { position: static; } .glos__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .ctaband__actions { min-width: 0; flex-direction: row; flex-wrap: wrap; } } @media (max-width: 600px) { .hero__copy h1 { font-size: clamp(2.5rem, 11vw, 3rem); } .hero__lead { font-size: var(--text-base); } .compare .ark-kpi__value { font-size: var(--text-xl); } .hero__actions .btn { width: 100%; } .board__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); } .board__kpis .ark-kpi { padding: var(--space-2); } .board__kpis .ark-kpi__value { font-size: var(--text-lg); } .board__kpis .ark-kpi__delta { display: none; } .board__clauses .ark-clause { padding-block: var(--space-1); } .board__head { flex-direction: column-reverse; } /* el texto del héroe se disuelve en la grilla para que los hechos queden bajo el panel; los márgenes propios ordenan el ritmo */ .hero__grid { row-gap: 0; } .hero__copy { display: contents; } .hero__copy h1 { padding-top: var(--space-4); } .hero__facts { order: 2; margin-top: var(--space-5); } .hero__panel { order: 1; margin-top: var(--space-8); } .travesias { min-width: 0; width: 100%; } .travesias th.code, .travesias td.code { display: none; } .travesias .th-long { display: none; } .travesias .th-short { display: inline; } .travesias th, .travesias td { padding: var(--space-2); font-size: var(--text-sm); } /* bitácora en móvil: la etiqueta de estado se vuelve un punto de color para dejar sitio al mensaje */ .board__log em { width: 8px; height: 8px; border-radius: 50%; background: currentColor; align-self: center; } .ark-pass__inner { padding-top: calc(var(--space-10) + 18px); } .normgrid, .normgrid--4, .steps, .route { grid-template-columns: minmax(0, 1fr); } .route { row-gap: var(--space-6); } .glos-sample { columns: 1; } .finding__body > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .faq__a { padding-left: var(--space-5); } .ctaband__inner { padding: var(--space-6); } .consent { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width: none; } .ark-footer__grid { grid-template-columns: minmax(0, 1fr); } .ark-nav__lang { margin: var(--space-2) 0 0; } .ark-nav__ctawrap { margin-top: var(--space-2); } .ark-nav__links .btn.ark-nav__cta { width: 100%; } .article__body { font-size: var(--text-base); } } @media (prefers-reduced-motion: reduce) { .hero__copy > *, .hero__panel { animation: none; } } @media print { .hero__actions, .ctaband, .consent, .faq__item summary::after { display: none !important; } .faq__item { break-inside: avoid; } .faq__item:not([open]) .faq__a { display: block; } } @media (max-width: 340px) { .travesias th, .travesias td { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); } } /* ---------- Riesgos (11-11-2026): ficha de riesgo con su mapa ---------- */ .riskfile { display: grid; gap: var(--space-4); margin: 0; } .riskfile__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .riskfile__title { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-primary); } .riskfile__map { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: center; } .riskmatrix { width: 150px; height: auto; display: block; } .riskmatrix text { font-family: var(--font-mono); font-size: 10px; fill: var(--text-secondary); } .riskfile__zones { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); font-size: var(--text-sm); } .riskfile__zones li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .riskfile__label { min-width: 5.5rem; color: var(--text-secondary); } .riskfile__zones .ark-mono { color: var(--text-secondary); font-size: var(--text-xs); } .riskfile__calc { color: var(--text-secondary); } .riskfile__body { margin: 0; display: grid; } .riskfile__body > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); } .riskfile__body dt { color: var(--text-secondary); } .riskfile__body dd { margin: 0; color: var(--text-primary); } .risknote { margin-top: var(--space-3); max-width: 62ch; } .zonas td:first-child, .tipos td:first-child { white-space: nowrap; } .profiles .ark-card { display: grid; gap: var(--space-3); align-content: start; } .profiles h3 { font-size: var(--text-xl); } @media (max-width: 600px) { .riskfile__map { grid-template-columns: minmax(0, 1fr); } .riskfile__body > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } } /* ---------- Ajustes de la auditoría de diseño (11-11-2026) ---------- */ /* 1 · aviso de cookies: barra delgada al pie, no tapa botones */ .consent { left: 0; right: 0; bottom: 0; max-width: none; margin: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-2) var(--gutter); font-size: var(--text-sm); } .consent strong { display: inline; margin: 0 var(--space-2) 0 0; } .consent__btns { flex-wrap: nowrap; } /* 10 · héroe: más ancho para el texto */ @media (min-width: 901px) { .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-10); } .hero__lead { max-width: 46ch; } } /* 12 y 16 · tiempos como gráfico de barras */ .timebox { margin-top: var(--space-12); } .timebox h3 { font-size: var(--text-xl); } .timechart__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); } .timechart__legend > span { display: inline-flex; align-items: center; gap: var(--space-2); } .timechart__key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; } .timechart__key--before, .timechart__bar--before i { background: var(--border-interactive); } .timechart__key--after, .timechart__bar--after i { background: var(--iso-conforme-solid); } .timechart { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-5); } .timechart__row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-5); align-items: center; } .timechart__name { font-weight: 600; } .timechart__code { color: var(--text-telemetry); font-size: var(--text-xs); font-weight: 500; margin-right: var(--space-2); } .timechart__bars { display: grid; gap: 6px; padding-right: 9rem; } .timechart__bar { position: relative; display: block; height: 26px; } .timechart__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w, 0) * 100%); min-width: 6px; border-radius: 6px; transform-origin: 0 50%; transition: transform 900ms var(--ease-out); } .timechart__bar > span, .timechart__bar > strong { position: absolute; left: calc(var(--w, 0) * 100% + var(--space-3)); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: var(--text-sm); color: var(--text-secondary); } .timechart__bar > strong { color: var(--iso-conforme-text); } .timechart.m-wait .timechart__bar i { transform: scaleX(0); } .timebox__note { margin-top: var(--space-5); max-width: 78ch; } /* 13 · pase: qué pasa después de reservar */ .pass__nexttitle { margin-top: var(--space-6); font-weight: 600; color: var(--text-primary); } .pass__next { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-3); max-width: 46ch; } .pass__next li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); align-items: start; color: var(--text-secondary); font-size: var(--text-sm); } .pass__next .ark-mono { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--border-interactive); border-radius: 50%; color: var(--text-telemetry); font-size: var(--text-xs); } .pass__status:empty { min-height: 0; margin: 0; } .ark-pass__form { justify-content: flex-start; } .ark-select { color-scheme: dark; } .pilotway { margin-top: var(--space-8); } .pilotway h3 { font-size: var(--text-lg); } .pilotway__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-8); } /* 16, 2 y 18 · ficha del riesgo a ancho completo, zonas en lista, ejes con nombre */ .riskmatrix { width: 166px; } .riskfile__cols { display: grid; gap: var(--space-4); } .riskfile--wide { padding: var(--space-8); margin-top: var(--space-8); } .riskfile--wide .riskfile__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-10); align-items: start; } .riskfile--wide .riskfile__title { font-size: var(--text-xl); } .riskfile--wide .riskfile__map { margin-top: var(--space-5); } .riskfile--wide .riskmatrix { width: 200px; } .riskfile--wide .riskfile__body > div:first-child { border-top: 0; padding-top: 0; } .zonebox { margin-top: var(--space-10); max-width: 880px; } .zonebox h3 { font-size: var(--text-xl); } .zonelist { list-style: none; padding: 0; margin: var(--space-4) 0 0; } .zonelist li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 13rem; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); } .zonelist li:last-child { border-bottom: 1px solid var(--border-subtle); } .zonelist .badge-iso { justify-self: start; } .zonelist__rev { color: var(--text-secondary); font-size: var(--text-sm); } /* 17 · landings de norma: título arriba, texto a una columna */ .carta-1col { max-width: 72ch; } .carta-1col .ark-nota { margin-top: var(--space-3); } .carta-1col .carta__body { max-width: none; margin-top: var(--space-5); } /* 21 · casilla de autorización visible y fácil de tocar */ .ark-field--check { align-items: center; min-height: 44px; } .ark-field--check input { -webkit-appearance: none; appearance: none; position: relative; display: grid; place-content: center; width: 24px; height: 24px; margin: 0; border: 2px solid var(--text-secondary); border-radius: 5px; background: var(--bg-deep-sea); cursor: pointer; } .ark-field--check input::before { content: ""; position: absolute; inset: -12px; } .ark-field--check input:checked { background: var(--accent-cyan); border-color: var(--accent-cyan); } .ark-field--check input:checked::after { content: "✓"; color: var(--text-on-accent); font-size: 16px; font-weight: 700; line-height: 1; } .ark-field--check input:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ark-field--check input[aria-invalid="true"] { border-color: var(--iso-brecha-text); } /* 22 · preguntas centradas, sin numeración */ .faqwrap { max-width: 76ch; margin-inline: auto; } .faqwrap .faq { max-width: none; } .faq__item summary { grid-template-columns: minmax(0, 1fr) auto; } .faq__a { padding-left: var(--space-5); } /* 31 · glosario: letras de 44 px */ .glos__index a { min-width: 44px; min-height: 44px; } /* 32 · bitácora: la etiqueta existe siempre; en móvil se ve como punto y el lector la anuncia */ /* 23 · menú plegable hasta 900 px */ @media (max-width: 900px) { .ark-nav__lang { margin: var(--space-2) 0 0; } .ark-nav__ctawrap { margin-top: var(--space-2); } .ark-nav__links .btn.ark-nav__cta { width: 100%; min-height: 44px; } .riskfile--wide { padding: var(--space-5); } .riskfile--wide .riskfile__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .riskfile--wide .riskfile__body > div:first-child { border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); } } @media (max-width: 600px) { .consent { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-3); } .consent__btns .btn { flex: 1; } .timechart__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .timechart__bars { padding-right: 7.5rem; } .timechart__bar { height: 20px; } .pilotway__list { grid-template-columns: minmax(0, 1fr); } .zonelist li { grid-template-columns: 7rem minmax(0, 1fr); row-gap: var(--space-1); } .zonelist__rev { grid-column: 2; } .riskfile--wide .riskmatrix { width: 166px; } /* 19 · los 7 pasos como lista compacta */ .steps--list { gap: 0; } .steps--list .steps__item { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; background: none; } .steps--list h3 { font-size: var(--text-base); } .steps--list p { margin-top: var(--space-1); } /* 20 · radar al lado del nombre */ .board__head { flex-direction: row; align-items: center; } .board__radar { width: 64px; } .board__radar .ark-radar { max-width: 64px; } .board__log em { font-size: var(--text-xs); } .board__log em span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 31 · enlaces del pie y migas fáciles de tocar */ .ark-footer ul { gap: 0; } .ark-footer ul a, .ark-footer__link, .crumbs a { min-height: 44px; line-height: 44px; } } @media (prefers-reduced-motion: reduce) { .timechart__bar i { transition: none; } } @media (max-width: 600px) { .glos-sample a, .article__next a { min-height: 44px; line-height: 1.3; display: inline-flex; align-items: center; } } .crumbs ol { align-items: center; } /* ===== assets/css/motion.css ===== */ /* ========================================================================== thearkofiso.com v2 · motion.css · capa de movimiento "Travesía". Regla: todo lo que se mueve es un instrumento trabajando. Solo transform y opacity; nada de layout. Todo se apaga con prefers-reduced-motion y en equipos lentos (html.m-lite). Ver _build/notas-movimiento.md. ========================================================================== */ :root { --m-reveal: 480ms; --m-stagger: 60ms; --m-draw: 1100ms; --m-count: 1100ms; interpolate-size: allow-keywords; } /* ---------- Transición entre páginas (mejora progresiva, solo CSS) ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: m-vt-out 140ms var(--ease-in-out) both; } ::view-transition-new(root) { animation: m-vt-in 180ms var(--ease-out) both; } .ark-nav { view-transition-name: ark-nav; } ::view-transition-old(ark-nav), ::view-transition-new(ark-nav) { animation: none; } /* la llegada orquestada solo la primera vez en la sesión (html.m-seen la apaga en las visitas siguientes) */ html.m-seen .hero__copy > *, html.m-seen .hero__panel { animation: none; } @keyframes m-vt-out { to { opacity: 0; } } @keyframes m-vt-in { from { opacity: 0; } } /* ---------- Navegación: anclada y con indicador de avance ---------- */ .ark-nav { transition: border-color var(--motion-base) var(--ease-out); } .ark-nav.is-stuck { border-bottom-color: var(--border-strong); } .m-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--accent-cyan); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: 0; transition: opacity var(--motion-base); pointer-events: none; } .ark-nav.is-stuck .m-progress { opacity: 1; } /* ---------- Revelado de grupos al desplazar (una vez; JS marca solo lo que está fuera de vista) ---------- */ .m-reveal { opacity: 0; transform: translateY(10px); } .m-reveal.is-in { opacity: 1; transform: none; transition-property: opacity, transform; transition-duration: var(--m-reveal); transition-timing-function: var(--ease-out); transition-delay: calc(var(--i, 0) * var(--m-stagger)); } /* pre-ocultado de los bloques que se animan al entrar: solo si estaban fuera de vista al cargar (sin parpadeo) */ .route.m-wait .route__wp, .route.m-wait .route__line path, .finding.m-wait .badge-iso, .board.m-wait > * { opacity: 0; } /* ---------- Panel de a bordo: enciende sus partes ---------- */ @keyframes m-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .board.is-boot > * { animation: m-up var(--motion-slow) var(--ease-out) both; } .board.is-boot > :nth-child(1) { animation-delay: 200ms; } .board.is-boot > :nth-child(2) { animation-delay: 280ms; } .board.is-boot > :nth-child(3) { animation-delay: 360ms; } .board.is-boot > :nth-child(4) { animation-delay: 440ms; } .board.is-boot > :nth-child(5) { animation-delay: 520ms; } .board__kpis .ark-kpi__value { font-variant-numeric: tabular-nums; } /* Contactos del radar: se encienden cuando pasa el haz (sincronizados con el barrido de 4 s) */ .ark-radar:not(.ark-radar--static) .m-ping { animation: m-ping var(--motion-radar) linear infinite; animation-delay: var(--ping-delay, 0s); } @keyframes m-ping { 0%, 100% { opacity: 1; } 4% { opacity: 1; } 55% { opacity: 0.25; } 92% { opacity: 0.25; } } /* un contacto por numeral: al enfocar una fila, su contacto crece, muestra el número y los demás se atenúan */ .m-contact text { font-family: var(--font-mono); font-size: 22px; font-weight: 600; fill: currentColor; paint-order: stroke; stroke: var(--bg-radar-panel); stroke-width: 5px; opacity: 0; transition: opacity var(--motion-base) var(--ease-out); } .m-contact circle { transition: r var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out); } .board[data-n] .m-contact circle { opacity: .35; animation: none; } .board[data-n="4"] .m-contact[data-n="4"] circle, .board[data-n="5"] .m-contact[data-n="5"] circle, .board[data-n="6"] .m-contact[data-n="6"] circle, .board[data-n="7"] .m-contact[data-n="7"] circle, .board[data-n="8"] .m-contact[data-n="8"] circle, .board[data-n="9"] .m-contact[data-n="9"] circle, .board[data-n="10"] .m-contact[data-n="10"] circle { r: 7; opacity: 1; stroke: currentColor; stroke-width: 2; } .board[data-n="4"] .m-contact[data-n="4"] text, .board[data-n="5"] .m-contact[data-n="5"] text, .board[data-n="6"] .m-contact[data-n="6"] text, .board[data-n="7"] .m-contact[data-n="7"] text, .board[data-n="8"] .m-contact[data-n="8"] text, .board[data-n="9"] .m-contact[data-n="9"] text, .board[data-n="10"] .m-contact[data-n="10"] text { opacity: 1; } /* Numerales interactivos: cada fila despliega el detalle del numeral */ .board__clauses { grid-template-columns: minmax(0, 1fr); } .board__clauses .ark-clause { width: 100%; min-width: 0; min-height: 44px; padding-block: 6px; text-align: left; font: inherit; color: inherit; border: 1px solid transparent; cursor: pointer; transition-property: background-color, border-color; transition-duration: var(--motion-fast); } .board__clauses .ark-clause__name { min-width: 0; overflow-wrap: anywhere; } .board__clauses .ark-clause:hover, .board__clauses .ark-clause[aria-expanded="true"] { background: var(--bg-radar-elevated); border-color: var(--border-strong); } .board__clauses .ark-clause:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; } .ark-clause__chev { flex: none; font-family: var(--font-mono); font-size: var(--text-lg); line-height: 1; color: var(--text-telemetry); min-width: 1ch; text-align: center; } .ark-clause__chev::before { content: "+"; } .ark-clause[aria-expanded="true"] .ark-clause__chev::before { content: "−"; } .ark-clause__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-base) var(--ease-out); } .ark-clause__more > div { overflow: hidden; min-height: 0; } .ark-clause__more.is-open { grid-template-rows: 1fr; } .ark-clause__more p { padding: var(--space-2) var(--space-3) var(--space-3) calc(var(--space-3) + 2.5ch + var(--space-3)); font-size: var(--text-sm); color: var(--text-secondary); } .ark-clause__more .ark-mono { color: var(--text-telemetry); } /* Bitácora viva: una línea nueva entra arriba cada pocos segundos */ .board__log > div { transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); } .board__log > div.is-new { animation: m-log 520ms var(--ease-out) both; } @keyframes m-log { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .board__log > div.is-out { opacity: 0; transform: translateY(6px); } /* ---------- La ruta: la línea se dibuja y las escalas se encienden en orden ---------- */ .route { position: relative; } .route__line { position: absolute; left: 0; right: 0; top: calc(var(--space-6) + 7px); height: 2px; width: 100%; overflow: visible; pointer-events: none; } .route__line path { stroke: var(--accent-cyan); stroke-width: 2; fill: none; opacity: .35; transition: opacity 600ms var(--ease-out); } .route.is-draw .route__line path { stroke-dasharray: 1200; stroke-dashoffset: 1200; opacity: .6; animation: m-draw var(--m-draw) var(--ease-in-out) forwards; } .route.is-drawn .route__line path { opacity: .35; } @keyframes m-draw { to { stroke-dashoffset: 0; } } .route.is-draw .route__wp { opacity: 0; transform: translateY(8px); animation: m-up var(--motion-slow) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 140ms + 80ms); } .route.is-draw .route__wp--end .route__dot { animation: m-end 900ms var(--ease-out) 1.1s both; } /* en tableta y portátil estrecho la carta va en dos filas de tres: el conector une cada escala con la siguiente de su fila; en móvil, una columna: el conector baja de escala en escala (el svg es el primer hijo del ol, por eso nth-of-type) */ @media (max-width: 1200px) { .route__wp::before { content: ""; position: absolute; top: 7px; left: 24px; right: calc(-1 * var(--space-4)); height: 2px; background: var(--accent-cyan); opacity: .35; transform: scaleX(0); transform-origin: 0 50%; } .route__wp:nth-of-type(3n)::before { display: none; } .route.is-draw .route__wp::before, .route.is-drawn .route__wp::before { transform: none; transition: transform 400ms var(--ease-out) calc(var(--i, 0) * 140ms); } } @media (max-width: 600px) { .route__wp { padding-left: var(--space-6); } .route__wp::before { top: 18px; left: 7px; right: auto; width: 2px; height: auto; bottom: calc(-1 * var(--space-6) + 2px); transform: scaleY(0); transform-origin: 50% 0; } .route__wp:nth-of-type(3n)::before { display: block; } .route__wp:last-of-type::before { display: none; } } /* ---------- Registro de tiempos: barras comparativas que se llenan al verse ---------- */ .tbar { display: grid; gap: 3px; margin-top: var(--space-1); } .tbar i { display: block; height: 6px; border-radius: 999px; transform: scaleX(var(--w, 0)); transform-origin: 0 50%; transition: transform 900ms var(--ease-out); } .tbar i.before { background: var(--border-interactive); } .tbar i.after { background: var(--iso-conforme-solid); transition-delay: 160ms; } .travesias td { vertical-align: top; } .ark-progress__fill { transform-origin: 0 50%; transition: transform 900ms var(--ease-out); } .ark-progress.m-wait .ark-progress__fill { transform: scaleX(0); } /* ---------- Registro de hallazgo: la insignia se sella ---------- */ .finding.is-in .badge-iso { animation: m-stamp 480ms var(--ease-out) 300ms both; } @keyframes m-stamp { from { opacity: 0; transform: scale(1.35); } 60% { opacity: 1; transform: scale(.96); } to { opacity: 1; transform: none; } } /* ---------- Foco de luz en tarjetas-enlace (responde al puntero) ---------- */ .m-spot { position: relative; overflow: hidden; } /* no es un halo: son dos anillos de isóbata de 1 px alrededor del puntero, el vocabulario de la carta */ .m-spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit; background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), transparent 44px, var(--border-cyan-glow) 45px, transparent 46.5px, transparent 66px, var(--border-cyan-glow) 67px, transparent 68.5px); transition: opacity var(--motion-base) var(--ease-out); } .m-spot:hover::after, .m-spot:focus-visible::after { opacity: 1; } .m-spot > * { position: relative; } /* ---------- Botones: respuesta táctil ---------- */ .btn { transition-property: background-color, border-color, color, transform, box-shadow, filter; transition-duration: var(--motion-fast); transition-timing-function: var(--ease-out); } .btn:active { transform: translateY(1px) scale(.985); } /* ---------- FAQ: la respuesta se despliega (altura animada donde el navegador lo permite; fundido como respaldo) ---------- */ .faq__item .faq__a { transform-origin: 50% 0; } .faq__item.is-opening .faq__a { animation: m-up var(--motion-slow) var(--ease-out) both; } .faq__item::details-content { height: 0; overflow: hidden; transition: height var(--motion-base) var(--ease-out), content-visibility var(--motion-base) allow-discrete; } .faq__item[open]::details-content { height: auto; } /* ---------- Pase de abordar: tres estados; solo el éxito se sella ---------- */ .pass__status.is-sending { color: var(--text-secondary); } .pass__status.is-sending::before { content: none; } .pass__status.is-error { color: var(--iso-brecha-text); } .pass__status.is-ok { animation: m-stamp 480ms var(--ease-out) both; display: inline-block; } /* ---------- El mar: isóbatas generativas tras el héroe (las máscaras usan negro/alfa, no color de marca) ---------- */ .hero, .pagehero--mar { position: relative; isolation: isolate; } .mar { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; color: var(--accent-cyan); opacity: 0; transition: opacity 900ms var(--ease-out); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.55) 0, rgba(0,0,0,.55) 36%, rgb(0 0 0) 58%), linear-gradient(180deg, transparent 0, rgb(0 0 0) 6%, rgb(0 0 0) 92%, transparent 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,.55) 0, rgba(0,0,0,.55) 36%, rgb(0 0 0) 58%), linear-gradient(180deg, transparent 0, rgb(0 0 0) 6%, rgb(0 0 0) 92%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .mar.is-on { opacity: 1; } .mar--centro { -webkit-mask-image: radial-gradient(80% 90% at 50% 50%, rgb(0 0 0) 40%, transparent 100%); mask-image: radial-gradient(80% 90% at 50% 50%, rgb(0 0 0) 40%, transparent 100%); } @media (max-width: 900px) { /* en móvil el mar vive en el primer pantallazo, detrás del titular */ .mar { height: min(100%, 100svh); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.65) 0, rgb(0 0 0) 30%, rgb(0 0 0) 75%, transparent 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,.65) 0, rgb(0 0 0) 30%, rgb(0 0 0) 75%, transparent 100%); } } /* ---------- Apagado total ---------- */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .m-reveal, .m-reveal.is-in { opacity: 1; transform: none; transition: none; } .m-wait, .m-wait * { opacity: 1 !important; } .mar { opacity: 1; transition: none; } .route__wp::before { transform: none !important; transition: none !important; } .faq__item::details-content { transition: none; } .board.is-boot > *, .route.is-draw .route__line path, .route.is-draw .route__wp, .route.is-draw .route__wp--end .route__dot, .finding.is-in .badge-iso, .faq__item.is-opening .faq__a, .pass__status.is-ok, .board__log > div.is-new { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; } .route.is-draw .route__line path { stroke-dasharray: none; opacity: .35; } .tbar i, .ark-progress__fill { transition: none; } .ark-clause__more, .route__dot, .m-progress { transition: none; } .ark-radar .m-ping { animation: none; } } @media print { .mar, .m-progress, .ark-clause__chev { display: none !important; } .ark-clause__more { display: block !important; } .ark-clause__more[hidden] { display: none !important; } }