/* ───────────────────────────────────────────────────────────── Argos AML & FD — minisitio público (/about) Sistema de diseño heredado de la app: navy hsl(222,47%,8%), primario #2D6BE4 / hsl(221,83%,53%), radios 0.5rem, Inter. Sin dependencias externas (CSP: default-src 'self'). Tema: `data-theme` en lo fija /about/theme.js antes de pintar. Predeterminado oscuro; `[data-theme="light"]` invierte la paleta, incluidos los mockups de producto. ───────────────────────────────────────────────────────────── */ :root { /* ── Página · tema oscuro (predeterminado) ── */ --bg: hsl(222, 47%, 6%); --bg-alt: hsl(222, 47%, 8%); --card: hsl(222, 47%, 11%); --card-hover: hsl(222, 47%, 13%); --border: hsl(222, 47%, 18%); --border-soft: hsl(222, 47%, 15%); --surface: hsl(222, 47%, 12%); --fg: hsl(0, 0%, 100%); --fg-body: hsl(213, 31%, 78%); --muted: hsl(215, 16%, 57%); --muted-dim: hsl(215, 16%, 42%); --primary: hsl(221, 83%, 53%); --primary-light: hsl(217, 91%, 62%); --primary-dark: hsl(221, 83%, 46%); --emerald: hsl(160, 84%, 45%); --purple: hsl(263, 70%, 65%); --header-bg: hsl(222, 47%, 6%, 0.82); --hero-top: hsl(222, 47%, 9%); --dot-color: hsl(217, 91%, 60%); --dot-opacity: 0.06; --backdrop: hsl(222, 47%, 4%, 0.78); --shadow-card: none; --shadow-pop: 0 20px 40px -18px rgb(0 0 0 / 0.85); --shadow-modal: 0 40px 80px -30px rgb(0 0 0 / 0.9); --shadow-shot: 0 30px 60px -30px rgb(0 0 0 / 0.9); /* ── Mockups de producto · tema oscuro de la app ── */ --app-bg: hsl(222, 47%, 8%); --app-card: hsl(222, 47%, 11%); --app-fg: hsl(213, 31%, 91%); --app-muted: hsl(215, 16%, 57%); --app-line: hsl(222, 47%, 18%); --app-primary: hsl(217, 91%, 60%); --app-soft: hsl(217, 91%, 60%, 0.42); --app-track: hsl(222, 47%, 16%); --app-chrome: hsl(222, 47%, 12%); --app-chrome-fg: hsl(215, 16%, 42%); --app-side: hsl(222, 47%, 7%); --app-side-fg: hsl(213, 31%, 65%); --app-side-line: hsl(222, 47%, 15%); --app-pos: hsl(160, 70%, 55%); --app-neg: hsl(0, 80%, 70%); --risk-hi: hsl(0, 72%, 62%); --risk-mid: hsl(38, 92%, 55%); --radius: 0.5rem; --radius-lg: 0.875rem; --maxw: 1180px; } :root[data-theme="light"] { /* ── Página · tema claro ── */ --bg: hsl(0, 0%, 100%); --bg-alt: hsl(210, 40%, 97%); --card: hsl(0, 0%, 100%); --card-hover: hsl(210, 40%, 98.5%); --border: hsl(214, 32%, 86%); --border-soft: hsl(214, 32%, 91%); --surface: hsl(210, 40%, 96%); --fg: hsl(222, 47%, 11%); --fg-body: hsl(215, 25%, 27%); --muted: hsl(215, 16%, 45%); --muted-dim: hsl(215, 16%, 55%); --primary: hsl(221, 83%, 53%); --primary-light: hsl(221, 83%, 45%); --primary-dark: hsl(221, 83%, 45%); --emerald: hsl(160, 84%, 32%); --purple: hsl(263, 60%, 50%); --header-bg: hsl(0, 0%, 100%, 0.85); --hero-top: hsl(210, 40%, 98%); --dot-color: hsl(221, 83%, 53%); --dot-opacity: 0.10; --backdrop: hsl(222, 30%, 25%, 0.5); --shadow-card: 0 1px 2px rgb(15 23 42 / 0.05); --shadow-pop: 0 20px 40px -18px rgb(15 23 42 / 0.22); --shadow-modal: 0 40px 80px -30px rgb(15 23 42 / 0.35); --shadow-shot: 0 24px 50px -28px rgb(15 23 42 / 0.35); /* ── Mockups · tema claro de la app ── */ --app-bg: #f5f7fa; --app-card: #ffffff; --app-fg: #0f172a; --app-muted: #64748b; --app-line: #e2e8f0; --app-primary: #2d6be4; --app-soft: #93b4f2; --app-track: #e8edf5; --app-chrome: hsl(210, 40%, 93%); --app-chrome-fg: hsl(215, 16%, 45%); --app-side: hsl(222, 47%, 11%); --app-side-fg: hsl(213, 31%, 65%); --app-side-line: hsl(222, 47%, 18%); --app-pos: #059669; --app-neg: #dc2626; --risk-hi: #e5484d; --risk-mid: #f59e0b; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--fg-body); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--primary-light); text-decoration: none; } a:hover { color: var(--fg); } h1, h2, h3, h4 { color: var(--fg); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.75rem; font-weight: 700; } p { margin: 0 0 1rem; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--primary-light); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--primary); color: #fff; padding: 0.625rem 1rem; z-index: 100; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.5rem; } /* ── Header ───────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.25rem; } .brand { display: flex; align-items: center; gap: 0.625rem; } .brand img { width: 34px; height: 34px; border-radius: 8px; } .brand-name { color: var(--fg); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; } .brand-name span { color: var(--primary-light); font-weight: 600; } .nav { display: flex; align-items: center; gap: 1.75rem; } .nav a { color: var(--muted); font-size: 0.9rem; font-weight: 500; transition: color 0.15s ease; } .nav a:hover { color: var(--fg); } .header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; } /* Botón cuadrado reutilizable (tema y menú móvil) */ .icon-btn { list-style: none; cursor: pointer; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg); padding: 0; transition: border-color 0.15s ease, background-color 0.15s ease; } .icon-btn:hover { border-color: hsl(221 83% 53% / 0.5); background: var(--card-hover); color: var(--fg); } .icon-btn::-webkit-details-marker { display: none; } /* Selector de tema */ #theme-toggle .i-moon { display: none; } :root[data-theme="light"] #theme-toggle .i-sun { display: none; } :root[data-theme="light"] #theme-toggle .i-moon { display: block; } /* Menú móvil — solo CSS, sin JavaScript */ .nav-mobile { display: none; position: relative; } .nav-mobile[open] > summary { border-color: hsl(221 83% 53% / 0.5); } .nav-mobile .nav-panel { position: absolute; right: 0; top: calc(100% + 0.6rem); min-width: 14rem; display: grid; gap: 0.15rem; padding: 0.5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); } .nav-mobile .nav-panel a { color: var(--fg-body); font-size: 0.9rem; font-weight: 500; padding: 0.55rem 0.7rem; border-radius: var(--radius); } .nav-mobile .nav-panel a:hover { background: var(--card-hover); color: var(--fg); } /* ── Botones ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.35rem; border-radius: var(--radius); font-size: 0.925rem; font-weight: 600; border: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; white-space: nowrap; } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 24px -10px hsl(221 83% 53% / 0.85); } .btn-primary:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); } .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--fg); } .btn-ghost:hover { background: var(--card-hover); border-color: hsl(221 83% 53% / 0.5); color: var(--fg); } .btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; } /* ── Hero ─────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding: 5.5rem 0 4.5rem; border-bottom: 1px solid var(--border-soft); background: radial-gradient(900px 460px at 78% -8%, hsl(221 83% 53% / 0.16), transparent 62%), linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 100%); } .hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px); background-size: 28px 28px; opacity: var(--dot-opacity); pointer-events: none; } .hero .wrap { position: relative; } .hero-copy { max-width: 54rem; margin-inline: auto; text-align: center; } .hero-kicker { color: var(--primary-light); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1.1rem; } .hero h1 { font-size: clamp(2.05rem, 4.6vw, 3.5rem); margin-bottom: 1.35rem; text-wrap: balance; } .hero h1 em { font-style: normal; color: var(--primary-light); } .hero-lead { font-size: clamp(1.03rem, 1.6vw, 1.18rem); color: var(--fg-body); max-width: 60ch; margin-inline: auto; margin-bottom: 2rem; text-wrap: pretty; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; justify-content: center; margin-bottom: 2rem; } .hero-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.75rem; } .hero-proof li { display: flex; align-items: center; gap: 0.55rem; color: var(--muted); font-size: 0.875rem; } .hero-proof .tick { color: var(--emerald); flex: none; } /* Consola ancha bajo el texto */ .hero-console { max-width: 62rem; margin: 3.25rem auto 0; } /* Franja de datos que cierra el hero */ .stats-strip { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--border-soft); } .stats-strip li { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.3rem 1.6rem; border-right: 1px solid var(--border-soft); color: var(--muted); font-size: 0.83rem; } .stats-strip li:last-child { border-right: 0; } .stats-strip b { color: var(--fg); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; } /* ── Secciones ────────────────────────────────────────────── */ section { padding: 4.75rem 0; } section + section { border-top: 1px solid var(--border-soft); } .section-alt { background: var(--bg-alt); } .section-head { max-width: 46rem; margin-bottom: 2.75rem; } .section-kicker { color: var(--primary-light); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 0.75rem; } .section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); text-wrap: balance; } .section-head p { color: var(--muted); margin-bottom: 0; text-wrap: pretty; } /* ── Pilares ──────────────────────────────────────────────── */ .pillars { display: grid; gap: 1.25rem; } .pillar { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1.5rem; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-card); transition: border-color 0.2s ease, background-color 0.2s ease; } .pillar:hover { border-color: hsl(221 83% 53% / 0.45); background: var(--card-hover); } .pillar-icon { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 0.75rem; background: hsl(221 83% 53% / 0.13); border: 1px solid hsl(221 83% 53% / 0.3); color: var(--primary-light); } .pillar h3 { font-size: 1.22rem; margin-bottom: 0.5rem; } .pillar p { color: var(--fg-body); margin-bottom: 1.1rem; text-wrap: pretty; } .pillar-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1.5rem; } .pillar-list li { position: relative; padding-left: 1.1rem; color: var(--muted); font-size: 0.9rem; line-height: 1.55; } .pillar-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); } .pillar-list strong { color: var(--fg); font-weight: 600; } .pillar-list--single { grid-template-columns: minmax(0, 1fr); } /* Utilidades mínimas (evitan atributos style inline → CSP sin 'unsafe-inline') */ .mt-block { margin-top: 1.25rem; } code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.86em; color: var(--primary-light); background: hsl(221 83% 53% / 0.1); border: 1px solid hsl(221 83% 53% / 0.22); border-radius: 4px; padding: 0.08em 0.35em; } .code-block code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } /* ── Grid de módulos ──────────────────────────────────────── */ .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: var(--shadow-card); transition: border-color 0.2s ease, transform 0.2s ease; } .card:hover { border-color: hsl(221 83% 53% / 0.4); transform: translateY(-2px); } .card h3, .card h4 { font-size: 1rem; margin-bottom: 0.4rem; } .card p { color: var(--muted); font-size: 0.885rem; margin-bottom: 0; text-wrap: pretty; } .card p + p { margin-top: 0.55rem; } .card p strong { color: var(--fg-body); font-weight: 600; } .card-icon { color: var(--primary-light); margin-bottom: 0.85rem; } /* ── Sectores ─────────────────────────────────────────────── */ .sectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .sector { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-card); } .sector h3 { font-size: 1.1rem; margin-bottom: 0.35rem; } .sector > p { color: var(--muted); font-size: 0.9rem; } .chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; } .chip { border: 1px solid var(--border); background: var(--surface); color: var(--fg-body); border-radius: 999px; padding: 0.28rem 0.7rem; font-size: 0.8rem; } /* ── Dimensiones de riesgo ────────────────────────────────── */ .dims { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } .dim { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 0.4rem 0.8rem; font-size: 0.83rem; color: var(--fg-body); } .dim-n { color: var(--primary-light); font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* ── Bloque de código / API ───────────────────────────────── */ /* El bloque de código se mantiene oscuro en ambos temas, como en un editor. */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; } .code-block { background: hsl(222 47% 9%); border: 1px solid hsl(222 47% 18%); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .code-head { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1rem; border-bottom: 1px solid hsl(222 47% 15%); background: hsl(222 47% 12%); } .code-head .dot { width: 9px; height: 9px; border-radius: 50%; background: hsl(222 47% 22%); } .code-head .code-title { margin-left: 0.6rem; color: hsl(215 16% 52%); font-size: 0.76rem; letter-spacing: 0.04em; } .code-block pre { margin: 0; padding: 1.15rem 1.25rem; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.815rem; line-height: 1.75; color: hsl(213 31% 78%); } .tok-kw { color: hsl(217 91% 68%); font-weight: 600; } .tok-key { color: hsl(263 70% 72%); } .tok-str { color: hsl(160 70% 55%); } .tok-com { color: hsl(215 16% 48%); } /* ───────────────────────────────────────────────────────────── Mockups de producto — reproducen la UI real de Argos con DATOS FICTICIOS. Siguen el tema activo de la página. ───────────────────────────────────────────────────────────── */ .shot { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--app-bg); box-shadow: var(--shadow-shot); } .shot-chrome { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; background: var(--app-chrome); border-bottom: 1px solid var(--app-line); } .shot-chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--app-line); } .shot-chrome span { margin-left: 0.6rem; font-size: 0.72rem; color: var(--app-chrome-fg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .shot-body { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); background: var(--app-bg); color: var(--app-fg); font-size: 0.72rem; line-height: 1.45; } .shot-body.no-side { grid-template-columns: minmax(0, 1fr); } /* Barra lateral — navy en ambos temas, igual que en la app */ .shot-side { background: var(--app-side); padding: 0.85rem 0.7rem; } .shot-side .s-brand { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.75rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--app-side-line); } .shot-side .s-brand b { width: 16px; height: 16px; border-radius: 4px; background: var(--primary); flex: none; } .shot-side .s-brand em { font-style: normal; color: #fff; font-size: 0.7rem; font-weight: 600; } .shot-side u { display: block; text-decoration: none; color: var(--app-side-fg); padding: 0.32rem 0.45rem; border-radius: 5px; font-size: 0.68rem; } .shot-side u.on { background: hsl(221 83% 53% / 0.22); color: #fff; font-weight: 600; } /* Área de contenido */ .shot-main { padding: 0.95rem 1.05rem 1.15rem; min-width: 0; } .shot-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; } .shot-title h4 { color: var(--app-fg); font-size: 0.9rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .shot-title small { color: var(--app-muted); font-size: 0.68rem; } .shot-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; margin-bottom: 0.85rem; } .shot-kpi { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 7px; padding: 0.5rem 0.6rem; } .shot-kpi b { display: block; font-size: 1.05rem; color: var(--app-fg); letter-spacing: -0.02em; line-height: 1.2; } .shot-kpi span { color: var(--app-muted); font-size: 0.63rem; } .shot-kpi i { font-style: normal; font-size: 0.62rem; font-weight: 600; color: var(--app-pos); } .shot-kpi i.dn { color: var(--app-neg); } .shot-panel { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 7px; padding: 0.7rem 0.8rem; } .shot-panel + .shot-panel { margin-top: 0.6rem; } .shot-panel h5 { margin: 0 0 0.6rem; font-size: 0.72rem; color: var(--app-fg); font-weight: 600; } /* Gráfica de barras */ .shot-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 5.2rem; } .shot-chart div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.3rem; height: 100%; } .shot-chart b { width: 100%; max-width: 3.4rem; background: var(--app-primary); border-radius: 3px 3px 0 0; display: block; } .shot-chart b.soft { background: var(--app-soft); } .shot-chart span { color: var(--app-muted); font-size: 0.58rem; white-space: nowrap; } /* Tabla */ .shot-table { width: 100%; border-collapse: collapse; } .shot-table th { text-align: left; font-size: 0.61rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-muted); font-weight: 600; padding: 0 0.4rem 0.4rem; border-bottom: 1px solid var(--app-line); } .shot-table td { padding: 0.42rem 0.4rem; border-bottom: 1px solid var(--app-line); color: var(--app-fg); } .shot-table tr:last-child td { border-bottom: 0; } .shot-table .num { text-align: right; font-variant-numeric: tabular-nums; } .shot-table .tdim { color: var(--app-muted); } /* Etiquetas de estatus — tema oscuro por defecto */ .tag { display: inline-block; padding: 0.1rem 0.42rem; border-radius: 999px; font-size: 0.6rem; font-weight: 600; border: 1px solid; white-space: nowrap; } .tag.alto { color: hsl(0 90% 76%); background: hsl(0 84% 60% / 0.14); border-color: hsl(0 84% 60% / 0.34); } .tag.medio { color: hsl(38 95% 68%); background: hsl(38 92% 55% / 0.13); border-color: hsl(38 92% 55% / 0.32); } .tag.bajo { color: hsl(160 65% 58%); background: hsl(160 84% 45% / 0.13); border-color: hsl(160 84% 45% / 0.32); } .tag.est { color: hsl(217 91% 74%); background: hsl(217 91% 60% / 0.14); border-color: hsl(217 91% 60% / 0.34); } .tag.neu { color: hsl(215 20% 70%); background: hsl(215 16% 47% / 0.15); border-color: hsl(215 16% 47% / 0.32); } :root[data-theme="light"] .tag.alto { color: #b91c1c; background: #fef2f2; border-color: #fecaca; } :root[data-theme="light"] .tag.medio { color: #b45309; background: #fffbeb; border-color: #fde68a; } :root[data-theme="light"] .tag.bajo { color: #047857; background: #ecfdf5; border-color: #a7f3d0; } :root[data-theme="light"] .tag.est { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; } :root[data-theme="light"] .tag.neu { color: #475569; background: #f1f5f9; border-color: #e2e8f0; } /* Etiquetas, buscador y pie dentro de los mockups */ .shot-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.7rem; } .shot-search { display: flex; align-items: center; gap: 0.4rem; background: var(--app-card); border: 1px solid var(--app-line); border-radius: 6px; padding: 0.42rem 0.6rem; margin-bottom: 0.6rem; color: var(--app-fg); font-size: 0.7rem; } .shot-search svg { color: var(--app-muted); flex: none; } .shot-search em { margin-left: auto; font-style: normal; color: var(--app-muted); font-size: 0.6rem; } .shot-foot { margin: 0.6rem 0 0; color: var(--app-muted); font-size: 0.62rem; } /* Gráfica de banda — perfil habitual contra operación observada */ .band-chart { margin-top: 0.15rem; } .band-chart svg { width: 100%; height: 5.6rem; display: block; } .bc-band { fill: var(--app-primary); opacity: 0.18; } .bc-line { fill: none; stroke: var(--app-primary); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .bc-axis { stroke: var(--app-line); stroke-width: 1; vector-effect: non-scaling-stroke; } .bc-drop { stroke: var(--risk-hi); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.75; vector-effect: non-scaling-stroke; } .bc-halo { fill: var(--risk-hi); opacity: 0.22; } .bc-dot { fill: var(--risk-hi); } .bc-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin: 0.6rem 0 0; font-size: 0.6rem; color: var(--app-muted); } .bc-legend span { display: inline-flex; align-items: center; } .bc-k { width: 13px; height: 7px; border-radius: 2px; margin-right: 0.35rem; flex: none; } .bc-k-band { background: var(--app-primary); opacity: 0.3; } .bc-k-line { background: var(--app-primary); height: 2px; } .bc-k-dot { background: var(--risk-hi); width: 7px; height: 7px; border-radius: 50%; } /* Anchos y alturas para las barras de los mockups (sin style inline → CSP estricta) */ .h20 { height: 20%; } .h30 { height: 30%; } .h40 { height: 40%; } .h50 { height: 50%; } .h60 { height: 60%; } .h70 { height: 70%; } .h80 { height: 80%; } .h95 { height: 95%; } /* ── Sección de capturas ──────────────────────────────────── */ .shots { display: grid; gap: 1.5rem; } .shots-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto; gap: 1.5rem; align-items: stretch; } /* Las capturas de una fila comparten líneas de rejilla (subgrid): las ventanas igualan altura y los pies de foto arrancan a la misma altura aunque tengan distinto número de renglones. */ .shot-figure { margin: 0; display: flex; flex-direction: column; height: 100%; } .shot-figure > .shot { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .shot-figure > .shot > .shot-scroll { flex: 1 1 auto; display: flex; flex-direction: column; } .shot-figure > .shot > .shot-scroll > .shot-body { flex: 1 1 auto; } @supports (grid-template-rows: subgrid) { .shots-row > .shot-figure { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; height: auto; } } .shot-figure figcaption { margin-top: 0.9rem; color: var(--muted); font-size: 0.86rem; line-height: 1.55; max-width: 46ch; text-wrap: pretty; } .shot-figure figcaption strong { color: var(--fg); font-weight: 600; display: block; margin-bottom: 0.2rem; } .shots-note { margin-top: 1.75rem; color: var(--muted-dim); font-size: 0.78rem; text-align: center; } /* ── Seguridad ────────────────────────────────────────────── */ .sec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 2rem; } .sec-list li { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); gap: 0.7rem; font-size: 0.9rem; color: var(--muted); } .sec-list strong { color: var(--fg); font-weight: 600; } .sec-list .tick { color: var(--emerald); margin-top: 0.28rem; } /* ── FAQ ──────────────────────────────────────────────────── */ .faq { display: grid; gap: 0.75rem; } .faq details { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 0 1.35rem; box-shadow: var(--shadow-card); transition: border-color 0.2s ease; } .faq details[open] { border-color: hsl(221 83% 53% / 0.4); } .faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2rem 1.15rem 0; position: relative; color: var(--fg); font-weight: 600; font-size: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--primary-light); font-size: 1.35rem; font-weight: 400; line-height: 1; } .faq details[open] summary::after { content: "\2212"; } .faq .faq-body { padding: 0 0 1.25rem; color: var(--muted); font-size: 0.925rem; text-wrap: pretty; } .faq .faq-body p:last-child { margin-bottom: 0; } /* ── CTA final ────────────────────────────────────────────── */ .cta { position: relative; overflow: hidden; text-align: center; background: radial-gradient(680px 320px at 50% 0%, hsl(221 83% 53% / 0.2), transparent 65%), var(--bg); } .cta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px); background-size: 28px 28px; opacity: calc(var(--dot-opacity) * 0.85); } .cta .wrap { position: relative; } .cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); max-width: 22ch; margin-inline: auto; text-wrap: balance; } .cta p { color: var(--fg-body); max-width: 56ch; margin-inline: auto; margin-bottom: 2rem; text-wrap: pretty; } .cta-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; justify-content: center; } .cta-note { color: var(--muted-dim); font-size: 0.8rem; margin-top: 1.5rem; margin-bottom: 0; } /* ── Modal de acceso (solo CSS, vía :target) ──────────────── */ .modal { display: none; } .modal:target { display: grid; place-items: center; position: fixed; inset: 0; z-index: 90; padding: 1.5rem; } .modal-backdrop { position: absolute; inset: 0; background: var(--backdrop); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal-card { position: relative; width: 100%; max-width: 30rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.9rem 1.75rem 1.6rem; box-shadow: var(--shadow-modal); text-align: left; } .modal-icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 0.7rem; background: hsl(221 83% 53% / 0.13); border: 1px solid hsl(221 83% 53% / 0.3); color: var(--primary-light); margin-bottom: 1rem; } .modal-card h3 { font-size: 1.15rem; margin-bottom: 0.7rem; text-wrap: balance; } .modal-card p { color: var(--muted); font-size: 0.9rem; text-wrap: pretty; } .modal-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; } .modal-close { position: absolute; top: 0.85rem; right: 1rem; color: var(--muted-dim); font-size: 1.5rem; line-height: 1; text-decoration: none; } .modal-close:hover { color: var(--fg); } /* ── Footer ───────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border-soft); background: var(--bg); padding: 2.75rem 0 2.25rem; } .footer-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2rem; } .footer-brand { max-width: 34ch; } .footer-brand p { color: var(--muted-dim); font-size: 0.85rem; margin: 0.85rem 0 0; } .footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; } .footer-links a { color: var(--muted); font-size: 0.875rem; } .footer-links a:hover { color: var(--fg); } .footer-bottom { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--border-soft); color: var(--muted-dim); font-size: 0.79rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .sectors { grid-template-columns: minmax(0, 1fr); } .shots-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .shots-row > .shot-figure { display: flex; grid-row: auto; height: auto; } .shot-figure figcaption { max-width: none; } } /* Móvil — el contenido necesita respirar: más aire entre secciones, entre tarjetas y entre renglones de lista que en escritorio. */ @media (max-width: 760px) { .nav { display: none; } .nav-mobile { display: block; } .site-header .wrap { gap: 0.75rem; } .wrap { padding-inline: 1.35rem; } section { padding: 4.25rem 0; } .hero { padding: 3.5rem 0 3.75rem; } .hero h1 { margin-bottom: 1.1rem; } .hero-lead { margin-bottom: 2.25rem; } .hero-actions { gap: 0.75rem; margin-bottom: 2.25rem; } .hero-actions .btn, .cta-actions .btn { flex: 1 1 100%; } .hero-console { margin-top: 2.75rem; } /* La franja de datos se apila: sin divisores verticales, con aire propio */ .stats-strip { flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.5rem; } .stats-strip li { border-right: 0; padding: 0; text-align: center; } .hero-proof { flex-direction: column; align-items: center; gap: 0.85rem; } .section-head { margin-bottom: 2.25rem; } .section-head h2 { margin-bottom: 0.9rem; } .pillars { gap: 1.1rem; } .pillar { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; padding: 1.6rem 1.4rem; } .pillar-list, .sec-list { grid-template-columns: minmax(0, 1fr); gap: 0.95rem; } .pillar p { margin-bottom: 1.35rem; } .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; } .card { padding: 1.5rem 1.4rem; } .card p + p { margin-top: 0.7rem; } .sectors { gap: 1.1rem; } .sector { padding: 1.6rem 1.4rem; } .chips { gap: 0.55rem; margin-top: 1.25rem; } .chip { padding: 0.35rem 0.8rem; } .dims { gap: 0.6rem; margin-top: 1.4rem; } .dim { padding: 0.5rem 0.85rem; } .shots { gap: 2.25rem; } .shots-row { gap: 2.25rem; } .shot-figure figcaption { margin-top: 1rem; } .shots-note { margin-top: 2rem; } .faq { gap: 0.9rem; } .faq summary { padding: 1.3rem 2rem 1.3rem 0; } .faq .faq-body { padding-bottom: 1.4rem; } .cta p { margin-bottom: 2.25rem; } .modal-card { padding: 1.75rem 1.4rem 1.4rem; } .footer-grid { gap: 2.25rem; } .footer-links { gap: 0.9rem 1.5rem; } .footer-bottom { margin-top: 2.5rem; gap: 0.75rem; } /* Los mockups se ven mejor desplazables que aplastados */ .shot-body { min-width: 620px; } .shot-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 560px) { .site-header .wrap { padding-inline: 1.1rem; } .btn-sm { padding: 0.45rem 0.8rem; font-size: 0.8rem; } .header-actions { gap: 0.4rem; } .icon-btn { width: 2.25rem; height: 2.25rem; } /* Con tres controles en el header, el isotipo basta como marca */ .brand-name { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* Impresión — el minisitio se comparte también como PDF comercial */ @media print { .site-header, .cta-actions, .hero-actions { display: none; } body { background: #fff; color: #111; } h1, h2, h3 { color: #000; } .card, .pillar, .sector, .faq details { border-color: #ccc; background: #fff; } }