/* ════════════════════════════════════════════════ WAYFINDINGBASE — sistema de diseño alineado a proimagen-web Tokens de tema claro/oscuro + tipografía Outfit. Fuente cargada vía Google Fonts en cada (no @font-face local). ════════════════════════════════════════════════ */ /* ── Reset ── */ *, *::before, *::after { box-sizing:border-box; margin:0; padding:0 } /* ── Variables globales ── */ :root { --accent: #9C9CA6; --font: 'Outfit', 'Segoe UI', system-ui, sans-serif; --r: 10px; --rl: 14px; --transition: 200ms ease; /* ── Tokens de tema (valores por defecto = OSCURO) ── El tema claro los sobreescribe en :root[data-theme="light"]. theme.js resuelve "auto" según el SO y fija data-theme en . */ color-scheme: dark; --bg: #07070f; --bg-soft: #0d0d1a; --txt: #ffffff; --txt-dim: rgba(255,255,255,.55); --txt-faint: rgba(255,255,255,.35); --line: rgba(255,255,255,.1); --nav-link: rgba(255,255,255,.78); --surface: rgba(255,255,255,.04); --surface-hover: rgba(255,255,255,.07); --surface-strong:rgba(255,255,255,.18); --nav-bg: rgba(7,7,15,.82); --menu-bg: rgba(10,10,20,.95); --overlay-bg: rgba(7,7,15,.97); --footer-bg: #05050c; --grid-line: rgba(255,255,255,.13); --shield: rgba(6,6,16,.9); --glow: rgba(255,255,255,.5); --on-accent: #0b0b12; --accent-dim: color-mix(in srgb, var(--accent) 72%, black); --accent-glow: color-mix(in srgb, var(--accent) 16%, transparent); } :root[data-theme="light"] { color-scheme: light; --accent: #5B5B66; --bg: #f5f5f7; --bg-soft: #ffffff; --txt: #15151c; --txt-dim: rgba(21,21,28,.62); --txt-faint: rgba(21,21,28,.42); --line: rgba(21,21,28,.12); --nav-link: rgba(21,21,28,.72); --surface: rgba(21,21,28,.035); --surface-hover: rgba(21,21,28,.065); --surface-strong:rgba(21,21,28,.20); --nav-bg: rgba(255,255,255,.82); --menu-bg: rgba(255,255,255,.97); --overlay-bg: rgba(245,245,247,.98); --footer-bg: #ececf0; --grid-line: rgba(21,21,28,.08); --shield: rgba(245,245,247,.92); --glow: rgba(21,21,28,.22); --on-accent: #f5f5f7; } /* ── Base ── */ html { scroll-behavior:smooth } body { background:var(--bg); color:var(--txt); font-family:var(--font); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; transition:background var(--transition), color var(--transition); } a { color:inherit; text-decoration:none } ::selection { background:var(--accent); color:var(--on-accent) } /* ── NAV (fases) ── */ nav.topnav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 80px; height:64px; background:transparent; border-bottom:1px solid transparent; transition:background var(--transition), backdrop-filter var(--transition), border-color var(--transition); } nav.topnav.scrolled { background:var(--nav-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--line); } .nav-left { display:flex; align-items:center; gap:16px } .nav-left img { display:block; opacity:0.9 } .sep { width:1px; height:22px; background:var(--line); flex-shrink:0 } .brand { font-family:var(--font); font-size:15px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--txt) } .brand span { color:var(--accent) } /* Logo Proimagen — mismo lockup que proimagen-web, colores fijos + tinta que sigue el tema */ .nav-logo-mark { display:block; height:26px; width:auto; flex-shrink:0 } .nav-logo-mark .cls-1 { fill:#8ec044 } .nav-logo-mark .cls-2 { fill:#ef7d25 } .nav-logo-mark .cls-3 { fill:var(--txt) } .nav-logo-mark .cls-4 { fill:#924795 } .nav-logo-mark .cls-5 { fill:#ffcf1e } .nav-logo-mark .cls-6 { fill:#929497 } .nav-logo-mark .cls-7 { fill:#2aabe3 } .nav-right { display:flex; align-items:center; gap:18px } .phase-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap } .phase-nav a { font-family:var(--font); font-size:12px; font-weight:500; color:var(--txt-dim); padding:5px 10px; border-radius:99px; border:1px solid transparent; transition:color var(--transition), border-color var(--transition), background var(--transition); } .phase-nav a:hover { color:var(--txt); border-color:var(--line) } .phase-nav a.active { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-glow); font-weight:600; } /* Botón de tema (cíclico: auto → claro → oscuro) */ .theme-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 36px; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--nav-link); cursor:pointer; transition:color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition); } .theme-btn:hover { color:var(--txt); border-color:var(--txt-faint); background:var(--surface-hover); transform:scale(1.06); } .theme-btn svg { width:17px; height:17px; display:block } /* ── HERO ── */ .hero { position:relative; overflow:hidden; padding:128px 80px 80px; border-bottom:1px solid var(--line); } .phase-watermark { position:absolute; right:80px; top:64px; font-family:var(--font); font-weight:300; font-size:clamp(160px,25vw,240px); line-height:1; color:var(--txt); opacity:0.05; pointer-events:none; user-select:none; letter-spacing:-0.04em; } .phase-tag { font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; display:flex; align-items:center; gap:12px; } .phase-tag::before { content:''; width:36px; height:2px; background:var(--accent); border-radius:2px } .hero h1 { font-family:var(--font); font-size:clamp(36px,6vw,72px); font-weight:300; line-height:1.05; letter-spacing:-0.02em; color:var(--txt); max-width:780px; margin-bottom:20px; } .hero h1 strong { font-weight:700 } .subtitle { font-size:17px; font-weight:300; color:var(--txt-dim); max-width:580px; line-height:1.7; } /* ── MAIN / SECCIONES ── */ main { max-width:1140px; margin:0 auto; padding:0 80px } section { padding:72px 0; border-bottom:1px solid var(--line) } section:last-child { border-bottom:none } .section-label { font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } h2 { font-family:var(--font); font-size:clamp(24px,3.5vw,38px); font-weight:600; line-height:1.15; letter-spacing:-0.01em; color:var(--txt); margin-bottom:14px; display:flex; align-items:center; gap:14px; } h2::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent) } h2 strong { font-weight:700; color:var(--accent) } .section-intro { font-size:16px; color:var(--txt-dim); max-width:640px; line-height:1.75; margin-bottom:52px; } /* ── INTRO BLOCK ── */ .intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px } @media(max-width:768px){ .intro-grid { grid-template-columns:1fr } } .intro-block { background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:32px; transition:background var(--transition), border-color var(--transition); } .intro-block:hover { background:var(--surface-hover); border-color:var(--surface-strong) } .intro-block p { font-size:15px; color:var(--txt-dim); line-height:1.75 } /* ── CARDS ── */ .cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px } .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:28px 28px 32px; position:relative; transition:background var(--transition), border-color var(--transition), transform var(--transition); } .card:hover { background:var(--surface-hover); border-color:var(--surface-strong); transform:translateY(-3px) } .card-num { font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:0.15em; color:var(--accent); margin-bottom:16px; display:flex; align-items:center; gap:10px; } .card-num::after { content:''; flex:1; height:1px; background:var(--line) } .card-icon { width:34px; height:34px; color:var(--txt-faint); margin-bottom:14px } .card h3 { font-family:var(--font); font-size:16px; font-weight:600; color:var(--txt); margin-bottom:10px; line-height:1.3; } .card p { font-size:14px; color:var(--txt-dim); line-height:1.7 } /* ── STEPS ── */ .steps { display:flex; flex-direction:column; gap:0 } .step { display:grid; grid-template-columns:60px 1fr; gap:0 28px; position:relative } .step-line { display:flex; flex-direction:column; align-items:center } .step-dot { width:36px; height:36px; border-radius:50%; background:var(--bg-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; z-index:1; } .step-dot span { font-family:var(--font); font-size:12px; font-weight:600; color:var(--txt-dim) } .step-connector { flex:1; width:1px; background:var(--line); min-height:40px } .step:last-child .step-connector { display:none } .step-body { padding-bottom:40px } .step h3 { font-family:var(--font); font-size:17px; font-weight:600; color:var(--txt); margin-bottom:8px; line-height:1.3; padding-top:6px; } .step p { font-size:14px; color:var(--txt-dim); line-height:1.7; max-width:640px } /* ── DELIVERABLES ── */ .deliverables { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px } .deliverable { background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:24px; display:flex; gap:16px; align-items:flex-start; transition:background var(--transition), border-color var(--transition); } .deliverable:hover { background:var(--surface-hover); border-color:var(--surface-strong) } .del-icon { width:30px; height:30px; color:var(--txt-faint); flex-shrink:0; margin-top:2px } .deliverable h4 { font-family:var(--font); font-size:14px; font-weight:600; color:var(--txt); margin-bottom:4px; line-height:1.3; } .deliverable p { font-size:13px; color:var(--txt-dim); line-height:1.6 } /* ── INDICATORS ── */ .indicators { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px } .indicator { background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:24px; transition:background var(--transition), border-color var(--transition); } .indicator:hover { background:var(--surface-hover); border-color:var(--surface-strong) } .ind-value { font-family:var(--font); font-size:28px; font-weight:300; color:var(--accent); display:block; margin-bottom:4px; } .ind-label { font-size:13px; color:var(--txt-dim); line-height:1.5 } /* ── PLATFORM CALLOUT ── */ .platform-callout { margin:40px 0 0; background:var(--bg-soft); border:1px solid var(--line); border-top:2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius:var(--rl); padding:32px; } .pc-header { display:flex; align-items:center; gap:12px; margin-bottom:14px } .pc-icon { color:var(--txt-faint); flex-shrink:0 } .pc-title { font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); } .pc-body { font-size:14px; color:var(--txt-dim); line-height:1.7; margin-bottom:20px } .pc-link { display:inline-flex; align-items:center; gap:7px; font-family:var(--font); font-size:13px; font-weight:600; color:var(--accent); transition:opacity var(--transition); } .pc-link:hover { opacity:0.7 } /* ── FOOTER NAV (fases) ── */ .phase-footer-nav { border-top:1px solid var(--line); padding:32px 80px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; } .fnav-group { display:flex; gap:12px; align-items:center } .fnav-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:13px; font-weight:500; color:var(--txt-dim); padding:9px 20px; border-radius:99px; border:1px solid var(--line); transition:color var(--transition), border-color var(--transition), background var(--transition); } .fnav-btn:hover { color:var(--txt); border-color:var(--surface-strong); background:var(--surface) } .fnav-btn.disabled { opacity:0.35; pointer-events:none } .fnav-btn svg { width:14px; height:14px } .fnav-center a { font-family:var(--font); font-size:13px; color:var(--accent); padding:9px 20px; border-radius:99px; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-glow); transition:background var(--transition); } .fnav-center a:hover { background:color-mix(in srgb, var(--accent) 25%, transparent) } /* ── FOOTER ── */ footer { border-top:1px solid var(--line); padding:24px 80px; font-family:var(--font); font-size:13px; color:var(--txt-faint); letter-spacing:0.04em; text-align:center; background:var(--footer-bg); } footer span { color:var(--accent) } /* ── RESPONSIVE ── */ @media (max-width:768px) { nav.topnav { padding:0 20px; height:auto; flex-wrap:wrap; row-gap:10px; padding-top:10px; padding-bottom:10px } .hero { padding:110px 20px 60px } main { padding:0 20px } section { padding:52px 0 } .phase-footer-nav { padding:24px 20px } footer { padding:20px } } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; animation:none !important } } /* ══════════════════════════════════════════════════════════ COMPONENTES ESPECÍFICOS DE FASE — comparten site.css ══════════════════════════════════════════════════════════ */ /* ── FASE 2: Nomenclatura ────────────────────────────────── */ .code-example { background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:32px; margin-bottom:52px; } .code-label { font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; } .code-string { font-family:var(--font); font-size:clamp(18px,2.8vw,30px); font-weight:600; letter-spacing:0.08em; color:var(--txt); display:flex; align-items:center; gap:2px; flex-wrap:wrap; margin-bottom:24px; } .code-string .seg { color:var(--accent) } .code-string .div { color:var(--txt-faint); font-weight:300; margin:0 2px } .code-breakdown { display:flex; gap:8px; flex-wrap:wrap } .code-seg { display:flex; flex-direction:column; gap:4px; background:var(--surface-hover); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; min-width:80px; } .seg-val { font-family:var(--font); font-size:14px; font-weight:700; color:var(--accent) } .seg-desc { font-size:11px; color:var(--txt-faint); letter-spacing:0.06em; text-transform:uppercase } .hierarchy { display:flex; flex-direction:column } .hier-item { display:grid; grid-template-columns:180px 1fr; gap:0 24px; border-bottom:1px solid var(--line); transition:background var(--transition); } .hier-item:first-child { border-top:1px solid var(--line) } .hier-item:hover { background:var(--surface) } .hier-level { padding:20px 0; display:flex; align-items:center; gap:16px; border-right:1px solid var(--line); } .hier-num { font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:0.12em; color:var(--accent); min-width:24px } .hier-name { font-family:var(--font); font-size:15px; font-weight:600; color:var(--txt) } .hier-body { padding:20px 0 } .hier-body p { font-size:14px; color:var(--txt-dim); line-height:1.7 } .types-grid { display:flex; flex-wrap:wrap; gap:10px } .type-tag { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; display:flex; align-items:center; gap:12px; transition:background var(--transition), border-color var(--transition); } .type-tag:hover { background:var(--surface-hover); border-color:var(--surface-strong) } .type-code { font-family:var(--font); font-size:13px; font-weight:700; color:var(--accent); letter-spacing:0.1em; min-width:44px } .type-name { font-size:13px; color:var(--txt-dim) } /* ── FASE 3: Sistema Visual ──────────────────────────────── */ .formula-box { margin-top:40px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:32px; } @media(max-width:768px){ .formula-box { grid-template-columns:1fr } } .formula-title { font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:16px } .formula-eq { font-family:var(--font); font-size:clamp(18px,2.2vw,26px); font-weight:300; color:var(--txt); margin-bottom:16px } .formula-eq .var { font-style:italic; color:var(--accent); font-weight:500 } .formula-desc { font-size:14px; color:var(--txt-dim); line-height:1.7; max-width:480px } .formula-example { background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r); padding:20px 24px; text-align:center; white-space:nowrap; } .formula-example p { font-size:12px; color:var(--txt-faint); margin-bottom:8px; letter-spacing:0.04em } .formula-example span { font-family:var(--font); font-size:16px; color:var(--txt-dim) } .palette { display:flex; flex-direction:column; gap:10px; margin-bottom:32px } .color-chip { display:flex; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:background var(--transition), border-color var(--transition); } .color-chip:hover { background:var(--surface-hover); border-color:var(--surface-strong) } .chip-swatch { width:72px; height:72px; flex-shrink:0; display:flex; align-items:center; justify-content:center } .chip-body { padding:16px 20px } .chip-name { font-family:var(--font); font-size:14px; font-weight:600; color:var(--txt); margin-bottom:4px } .chip-role { font-size:13px; color:var(--txt-faint) } .contrast-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px } @media(max-width:640px){ .contrast-row { grid-template-columns:1fr } } .contrast-card { display:flex; align-items:center; gap:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:24px; } .contrast-ratio { font-family:var(--font); font-size:28px; font-weight:300; color:var(--accent); white-space:nowrap; min-width:72px } .contrast-desc h4 { font-family:var(--font); font-size:14px; font-weight:600; color:var(--txt); margin-bottom:6px } .contrast-desc p { font-size:13px; color:var(--txt-faint); line-height:1.6 } /* ── FASE 4: Matriz de Contenidos ───────────────────────── */ .signal-demo { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; margin-top:32px; margin-bottom:52px; } @media(max-width:768px){ .signal-demo { grid-template-columns:1fr } } .signal-demo-left h3 { font-family:var(--font); font-size:17px; font-weight:600; color:var(--txt); margin-bottom:12px; line-height:1.3 } .signal-demo-left p { font-size:14px; color:var(--txt-dim); line-height:1.7; max-width:480px } .signal-panel { background:var(--bg-soft); border:1px solid var(--line); box-shadow:0 4px 24px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.10); border-radius:var(--r) var(--r) 45px var(--r); padding:4px; display:flex; flex-direction:column; gap:2px; } .signal-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 36px 10px 14px; border-radius:4px; } .signal-row.primary { background:var(--surface) } .signal-row.secondary { background:color-mix(in srgb, var(--surface) 60%, transparent) } .signal-row.tertiary { background:transparent; border-top:1px solid var(--line); margin-top:2px; opacity:0.5 } .dest { font-family:var(--font); font-size:16px; color:var(--txt); flex:1 } .signal-row.primary .dest { font-size:18px; font-weight:600; color:var(--txt) } .signal-row.tertiary .dest { font-size:13px; color:var(--txt-dim); letter-spacing:0.04em } .signal-arrow { display:flex; flex-direction:column; align-items:center; gap:2px } .arrow-svg { width:19px; height:19px; color:var(--txt-dim) } .signal-row.tertiary .arrow-svg { width:14px; height:14px; color:var(--txt-dim) } .signal-label { font-family:var(--font); font-size:11px; color:var(--txt-faint); letter-spacing:0.08em } .version-table { width:100%; border-collapse:collapse; font-size:13px } .version-table th { font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--txt-faint); text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); } .version-table td { padding:12px 14px; color:var(--txt-dim); border-bottom:1px solid var(--line); vertical-align:top } .version-table tr:hover td { background:var(--surface) } .version-table tr:last-child td { border-bottom:none } .v-code { font-family:var(--font); font-size:11px; font-weight:600; color:var(--accent); background:var(--accent-glow); padding:2px 7px; border-radius:4px; letter-spacing:0.06em; } .approval-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } @media(max-width:900px){ .approval-flow { grid-template-columns:1fr 1fr } } @media(max-width:480px){ .approval-flow { grid-template-columns:1fr } } .approval-step { background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:24px 20px; transition:background var(--transition), border-color var(--transition); } .approval-step:hover { background:var(--surface-hover); border-color:var(--surface-strong) } .ap-num { font-family:var(--font); font-size:12px; font-weight:700; color:var(--accent); letter-spacing:0.12em; margin-bottom:12px; display:flex; align-items:center; gap:8px; } .ap-num::after { content:''; flex:1; height:1px; background:var(--line) } .ap-title { font-family:var(--font); font-size:14px; font-weight:600; color:var(--txt); margin-bottom:8px; line-height:1.3 } .ap-desc { font-size:13px; color:var(--txt-faint); line-height:1.6 } /* ── FASE 5: Diseño de Originales ───────────────────────── */ .layers { display:flex; flex-direction:column } .layer-row { display:grid; grid-template-columns:160px 1fr; gap:0 24px; border-bottom:1px solid var(--line); transition:background var(--transition); } .layer-row:first-child { border-top:1px solid var(--line) } .layer-row:hover { background:var(--surface) } .layer-name { display:flex; align-items:center; gap:12px; padding:20px 0; border-right:1px solid var(--line); } .layer-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0 } .layer-label { font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:0.14em; color:var(--txt) } .layer-body { padding:20px 0 } .layer-body p { font-size:14px; color:var(--txt-dim); line-height:1.7; max-width:600px } .formats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px } @media(max-width:640px){ .formats { grid-template-columns:1fr } } .format-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:28px 24px; display:flex; flex-direction:column; gap:10px; transition:background var(--transition), border-color var(--transition); } .format-card:hover { background:var(--surface-hover); border-color:var(--surface-strong) } .format-ext { font-family:var(--font); font-size:11px; font-weight:700; letter-spacing:0.18em; color:var(--accent); background:var(--accent-glow); padding:3px 8px; border-radius:4px; align-self:flex-start; } .format-name { font-family:var(--font); font-size:15px; font-weight:600; color:var(--txt); line-height:1.3 } .format-desc { font-size:13px; color:var(--txt-faint); line-height:1.65 } .checklist { display:flex; flex-direction:column } .check-item { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); transition:background var(--transition), padding-left var(--transition); } .check-item:first-child { border-top:1px solid var(--line) } .check-item:hover { background:var(--surface); padding-left:8px } .check-icon { width:18px; height:18px; color:var(--accent); flex-shrink:0 } .check-text { font-size:14px; color:var(--txt-dim) } /* ── FASE 6: Fabricación e Instalación ──────────────────── */ .heights-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-bottom:24px; } .height-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:24px 20px; display:flex; flex-direction:column; gap:14px; transition:background var(--transition), border-color var(--transition); } .height-card:hover { background:var(--surface-hover); border-color:var(--surface-strong) } .height-val { font-family:var(--font); font-size:30px; font-weight:300; color:var(--accent); line-height:1.1; display:block } .height-unit { font-size:12px; color:var(--txt-faint); letter-spacing:0.08em } .height-name { font-family:var(--font); font-size:14px; font-weight:600; color:var(--txt); margin-bottom:4px } .height-desc { font-size:13px; color:var(--txt-faint); line-height:1.6 } .tol-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px } @media(max-width:640px){ .tol-grid { grid-template-columns:1fr } } .tol-card { display:flex; align-items:center; gap:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:24px; } .tol-val { font-family:var(--font); font-size:28px; font-weight:300; color:var(--accent); white-space:nowrap; min-width:60px } .tol-info h4 { font-family:var(--font); font-size:14px; font-weight:600; color:var(--txt); margin-bottom:6px } .tol-info p { font-size:13px; color:var(--txt-faint); line-height:1.6 } .photo-box { display:grid; grid-template-columns:repeat(3,1fr); gap:16px } @media(max-width:640px){ .photo-box { grid-template-columns:1fr } } .photo-type { background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:28px 20px; display:flex; flex-direction:column; gap:12px; transition:background var(--transition), border-color var(--transition); } .photo-type:hover { background:var(--surface-hover); border-color:var(--surface-strong) } .photo-icon { width:34px; height:34px; color:var(--txt-faint) } .photo-name { font-family:var(--font); font-size:14px; font-weight:600; color:var(--txt) } .photo-desc { font-size:13px; color:var(--txt-faint); line-height:1.6 } /* ── FASE 7: Inventario y Mantenimiento ─────────────────── */ .ficha-box { display:grid; grid-template-columns:1fr auto; gap:32px; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:32px; margin-top:32px; margin-bottom:52px; } @media(max-width:768px){ .ficha-box { grid-template-columns:1fr } } .ficha-title { font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:12px } .ficha-code { font-family:var(--font); font-size:clamp(16px,2.2vw,22px); font-weight:700; color:var(--txt); letter-spacing:0.08em; margin-bottom:20px } .ficha-row { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line) } .ficha-row:last-of-type { border-bottom:none } .ficha-key { font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--txt-faint); min-width:100px; flex-shrink:0; padding-top:1px } .ficha-val { font-size:13px; color:var(--txt-dim); line-height:1.5 } .ficha-right { display:flex; flex-direction:column; align-items:center; gap:16px; min-width:140px } .qr-placeholder { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; width:96px; height:96px; padding:8px; background:#fff; border-radius:6px; } .qr-cell { background:#15151c; border-radius:2px } .qr-cell:nth-child(2n) { opacity:0.25 } .qr-cell:nth-child(3n) { opacity:0.65 } .qr-desc { font-size:11px; color:var(--txt-faint); line-height:1.6; text-align:center; max-width:140px } .states { display:flex; flex-direction:column; gap:10px } .state-card { display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; transition:background var(--transition), border-color var(--transition); } .state-card:hover { background:var(--surface-hover); border-color:var(--surface-strong) } .state-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0 } .state-name { font-family:var(--font); font-size:14px; font-weight:600; color:var(--txt) } .cycle { display:grid; grid-template-columns:repeat(4,1fr); gap:16px } @media(max-width:900px){ .cycle { grid-template-columns:1fr 1fr } } @media(max-width:480px){ .cycle { grid-template-columns:1fr } } .cycle-step { background:var(--surface); border:1px solid var(--line); border-radius:var(--rl); padding:24px 20px; display:flex; flex-direction:column; transition:background var(--transition), border-color var(--transition); } .cycle-step:hover { background:var(--surface-hover); border-color:var(--surface-strong) } .cy-num { font-family:var(--font); font-size:12px; font-weight:700; color:var(--accent); letter-spacing:0.12em; margin-bottom:12px; display:flex; align-items:center; gap:8px; } .cy-num::after { content:''; flex:1; height:1px; background:var(--line) } .cy-title { font-family:var(--font); font-size:14px; font-weight:600; color:var(--txt); margin-bottom:8px; line-height:1.3 } .cy-desc { font-size:13px; color:var(--txt-faint); line-height:1.6; margin-bottom:12px; flex:1 } .cy-time { font-family:var(--font); font-size:11px; font-weight:600; color:var(--accent); letter-spacing:0.06em; background:var(--accent-glow); padding:3px 8px; border-radius:99px; align-self:flex-start; } .maint-list { display:flex; flex-direction:column } .maint-item { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); transition:background var(--transition), padding-left var(--transition), padding-right var(--transition); } .maint-item:first-child { border-top:1px solid var(--line) } .maint-item:hover { background:var(--surface); padding-left:8px; padding-right:8px } .maint-icon { width:24px; height:24px; color:var(--txt-faint); flex-shrink:0 } .maint-name { font-family:var(--font); font-size:14px; font-weight:600; color:var(--txt); margin-bottom:4px } .maint-desc { font-size:13px; color:var(--txt-faint); line-height:1.6 } .maint-freq { font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-glow); padding:3px 9px; border-radius:99px; white-space:nowrap; flex-shrink:0; } .project-close { text-align:center; padding:80px 0 } .close-tag { font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; } .close-title { font-family:var(--font); font-size:clamp(26px,4vw,46px); font-weight:300; line-height:1.15; letter-spacing:-0.01em; color:var(--txt); margin-bottom:20px; display:block; /* h2 base es flex + línea ::after (para títulos alineados a la izquierda); este título vive en .project-close (text-align:center) y necesita bloque simple */ } .close-title::after { content:none } .close-title strong { font-weight:700; color:var(--accent) } .close-desc { font-size:16px; color:var(--txt-dim); max-width:560px; margin:0 auto 40px; line-height:1.75 } .close-links { display:flex; gap:16px; justify-content:center; flex-wrap:wrap } .close-link { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:14px; font-weight:500; padding:12px 26px; border-radius:99px; border:1px solid var(--line); color:var(--txt-dim); transition:color var(--transition), border-color var(--transition), background var(--transition); } .close-link:hover { color:var(--txt); border-color:var(--surface-strong); background:var(--surface) } .close-link.primary { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-glow) } .close-link.primary:hover { background:color-mix(in srgb, var(--accent) 25%, transparent) } .close-link svg { width:16px; height:16px } /* ── Esquina dinámica (inferior derecha) ───────────────────── JS en corner.js setea --corner-r = 20% del lado más corto. Cita la propia morfología de marca descrita en la Fase 5: un solo vértice redondeado orientado al ingreso. */ .card, .intro-block, .deliverable, .indicator, .code-example, .code-seg, .formula-box, .color-chip, .contrast-card, .approval-step, .format-card, .height-card, .tol-card, .photo-type, .ficha-box, .state-card, .cycle-step, .type-tag { border-bottom-right-radius: var(--corner-r, var(--rl)); }