/* Sistema visual · plataforma de diseño dental digital (Omar Mata) Agencia Garvil · 2026-08-26 --------------------------------------------------------------------------- La idea que manda: ESTO ES UN INSTRUMENTO, NO UN FOLLETO. El sector entero (medido por el agente de competencia) se ve igual: blanco, cian, un diente 3D flotando y "24h turnaround". Aquí se va por lo contrario: la pantalla del software que el propio técnico usa todos los días — visor oscuro, geometría seleccionada en lima, y CADA NÚMERO en monoespaciada. Dos registros a propósito, y esto es una decisión, no un relleno: · OSCURO = el instrumento. Hero, odontograma, los tres paneles. · CLARO = el documento. Precios, prueba, condiciones, pie. La página empieza siendo la herramienta y se vuelve papel cuando toca hablar de dinero, que es donde la legibilidad vale más que la actitud. Prohibiciones heredadas de la criba (F:\garvil-sistema-diseno): sin transition:all · sin background-clip:text · sin backdrop-filter sin radio píldora 999px · sin iconos de trazo 24x24 · sin hover translateY sin kicker encima de cada H2 · sin repeat(3,1fr) por defecto Los números NO son decoración: 1-32 son dientes reales del Universal Numbering System, no "01/02/03". --------------------------------------------------------------------------- */ /* ---------- Tipografía autoalojada (nada de Google Fonts en caliente) ---- */ @font-face{font-family:'Grotesk';src:url('SpaceGrotesk-var.woff2') format('woff2'); font-weight:300 700;font-display:swap;font-style:normal} @font-face{font-family:'Inter';src:url('Inter-var.woff2') format('woff2'); font-weight:100 900;font-display:swap;font-style:normal} @font-face{font-family:'Plex';src:url('PlexMono-400.woff2') format('woff2'); font-weight:400;font-display:swap;font-style:normal} @font-face{font-family:'Plex';src:url('PlexMono-500.woff2') format('woff2'); font-weight:500;font-display:swap;font-style:normal} @font-face{font-family:'Plex';src:url('PlexMono-600.woff2') format('woff2'); font-weight:600;font-display:swap;font-style:normal} :root{ /* ---------- Registro OSCURO · el instrumento ------------------------- */ --void: #0E1216; /* fondo de página */ --panel: #151A20; /* superficie */ --panel-2: #1C232B; /* superficie elevada */ --panel-3: #232C35; /* fila activa */ --line: #2A343E; /* hairline */ --line-2: #3A4854; /* borde marcado */ --ivory: #F2EEE7; /* titulares y esmalte. 15.9:1 sobre --void */ --body: #B4BFCA; /* texto corrido. 8.8:1 sobre --void */ --muted: #8794A1; /* secundario. 5.4:1 sobre --void ← AA */ --faint: #63707D; /* solo bordes y separadores, NUNCA texto */ /* ---------- Registro CLARO · el documento ---------------------------- */ --paper: #F7F6F3; --paper-2: #EDEBE6; --rule: #DBD8D1; --ink: #14181C; /* 15.4:1 sobre --paper */ --ink-body: #3E464E; /* 8.9:1 sobre --paper */ --ink-muted: #5B646D; /* 5.57:1 paper · 5.05:1 paper-2 ← AA en los dos */ /* ---------- Acentos -------------------------------------------------- Lima = geometría seleccionada. Es el color con el que exocad y Meshmixer pintan lo que acabas de elegir. Cian queda descartado a propósito: lo usa el sector entero. */ --lime: #C9F24C; /* selección · acento principal */ --lime-dim: #556A15; /* el acento COMO TEXTO sobre claro. 5.62:1 paper. El #8FAE2E que puse primero daba 2.35 y no valía */ --lime-ink: #10160A; /* texto encima de lima */ --mint: #45D9A0; /* entregado / correcto */ --amber: #FFA53D; /* en curso / atención */ --clay: #C0737C; /* encía. Nunca es un estado, es anatomía */ /* ---------- Métricas -------------------------------------------------- */ --ancho: 1320px; /* más ancho que los 1180-1280 del portafolio: el odontograma y el carrito van uno al lado del otro y 1280 los aprieta */ --ancho-doc: 940px; /* el registro claro se lee, no se opera */ --r-s: 3px; /* radios de instrumento, no de píldora */ --r-m: 6px; --r-l: 10px; --paso: 8px; /* rejilla vertical */ --t-rapida: 120ms; --t-media: 200ms; --curva: cubic-bezier(.2,.6,.3,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--void);color:var(--body); font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif; font-size:17px;line-height:1.6;font-synthesis-weight:none; -webkit-font-smoothing:antialiased} /* Suelo tipográfico REAL. Recordatorio medido: rem mide contra el (16px), no contra el body (17px). .75rem = 12px exactos. No bajar de aquí. */ .t-xs{font-size:.75rem} /* 12px */ .t-s {font-size:.8125rem} /* 13px */ h1,h2,h3,h4{font-family:'Grotesk','Inter',sans-serif;color:var(--ivory); font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0} h1{font-size:clamp(2.1rem,4.4vw,3.55rem)} h2{font-size:clamp(1.6rem,2.9vw,2.4rem)} h3{font-size:1.15rem;letter-spacing:-.01em} p{margin:0} a{color:inherit} /* -------------------------------------------------------------------------- LA REGLA QUE DEFINE ESTE SITIO Todo lo que es un dato — número de diente, código de caso, dinero, plazo, cantidad, fecha, porcentaje — se pinta en monoespaciada con cifras tabulares. Ningún otro sitio del portafolio tiene sistema numérico propio, y en una herramienta clínica el número ES el contenido. -------------------------------------------------------------------------- */ .n,.num,code,kbd{font-family:'Plex',ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; letter-spacing:-.01em} /* Etiqueta de campo. Existe porque es un panel de control y los controles se rotulan; NO se usa como kicker decorativo encima de los H2. */ .rotulo{font-family:'Plex',monospace;font-size:.75rem;/* 12px EXACTOS: es el suelo declarado arriba y antes lo incumplía este mismo archivo con .6875rem */ letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500} .env{width:min(100% - 40px,var(--ancho));margin-inline:auto} .env-doc{width:min(100% - 40px,var(--ancho-doc));margin-inline:auto} /* ---------- Superficies ---------------------------------------------- */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m)} .panel-2{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-m)} /* ---------- Botones --------------------------------------------------- Sin gradiente, sin píldora, sin translateY al pasar por encima. Un solo canal cambia en hover, y las transiciones nombran su propiedad. */ .btn{display:inline-block;font:500 .9375rem 'Inter',sans-serif; padding:14px 20px;line-height:1.2;border-radius:var(--r-s); border:1px solid transparent;min-height:44px;/* medido: con 13px daba 43 */ cursor:pointer;text-decoration:none;text-align:center; transition:background-color var(--t-rapida) var(--curva), border-color var(--t-rapida) var(--curva), color var(--t-rapida) var(--curva)} .btn-1{background:var(--lime);color:var(--lime-ink);font-weight:600} .btn-1:hover{background:#D8FF6B} .btn-2{background:transparent;color:var(--ivory);border-color:var(--line-2)} .btn-2:hover{border-color:var(--muted)} .btn-doc{background:var(--ink);color:var(--paper)} .btn-doc:hover{background:#2A3138} .btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px} /* ---------- Odontograma: zona de toque ------------------------------- La crea construirOdontograma() en core.js, asi que su estilo va aqui y no en una pagina suelta. Si falta, el rectangulo se pinta de negro y tapa la arcada entera — pasaba en los tres paneles. */ .dt-hit{fill:transparent;stroke:none} /* ---------- Estados (texto, no puntitos de color) --------------------- */ .est{font-family:'Plex',monospace;font-size:.75rem;letter-spacing:.08em; text-transform:uppercase;padding:4px 8px;border-radius:var(--r-s); border:1px solid;display:inline-block;white-space:nowrap} .est-nuevo {color:var(--lime); border-color:#4E6414; background:#1B2410} .est-curso {color:var(--amber);border-color:#6A4718; background:#241A0C} .est-entregado{color:var(--mint);border-color:#1B5E44; background:#0E2019} .est-revision{color:var(--clay); border-color:#5E3439; background:#221416} /* ---------- Tablas de datos ------------------------------------------- */ .tabla{width:100%;border-collapse:collapse;font-size:.875rem} .tabla th{font-family:'Plex',monospace;font-size:.75rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left; padding:10px 12px;border-bottom:1px solid var(--line)} .tabla td{padding:13px 12px;border-bottom:1px solid var(--line);color:var(--body)} .tabla tr:last-child td{border-bottom:0} .tabla tbody tr{transition:background-color var(--t-rapida) var(--curva)} .tabla tbody tr:hover{background:var(--panel-2)} /* ---------- Táctiles: 44px de mínimo. En el portafolio hay 85 por debajo -- */ .tap{min-height:44px;min-width:44px;display:inline-flex;align-items:center; justify-content:center} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important} }