/* Ficha alojada — hoja compartida. Tokens: ../../DESIGN.md */ /* Aviso para quien audite esta hoja con capturas: en Chromium headless (1x, sin subpíxel) el texto pequeño aparenta un hueco en pares como "fi"/"TE". NO es un defecto: se midió la geometría real con Range.getClientRects() y la separación entre caracteres es 0px exacta, con y sin letter-spacing. Es un artefacto de rasterizado de la captura. No "arreglar" bajando pesos ni quitando tracking: eso rompe la escala de DESIGN.md sin ganar nada. */ /* Una sola entrada src: listar el mismo archivo dos veces (con el hint obsoleto 'woff2-variations') hacía que el navegador no casara la precarga con esta @font-face y avisara de precarga desaprovechada. Un woff2 variable se declara con format('woff2'). */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/Fraunces-Variable.woff2') format('woff2'); } @font-face { font-family: 'General Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/GeneralSans-Regular.woff2') format('woff2'); } @font-face { font-family: 'General Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/GeneralSans-Medium.woff2') format('woff2'); } @font-face { font-family: 'General Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/GeneralSans-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2'); } :root { --paper: #F6F1E7; --surface: #EFE8D8; --ink: #1C1A15; --ink-2: #5B5546; --border: #DCD3BE; --signal: #1F6E4A; --signal-text: #17573A; --signal-bright: #4FD189; --amber: #C97A2B; --terracotta: #B14B33; --info: #4B5A63; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; --ease-in: cubic-bezier(0.16, 1, 0.3, 1); --dur-short: 180ms; } * { box-sizing: border-box; } /* La familia y la tinta se declaran en html, no solo en body: DESIGN.md prohíbe que nada caiga a la fuente del sistema, y sin esto el propio queda en Times/#000. */ html { -webkit-text-size-adjust: 100%; font-family: 'General Sans', sans-serif; color: var(--ink); background: var(--paper); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'General Sans', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Anillo de foco propio: el de serie del navegador es negro 1px y sobre el verde de marca casi no se ve. Teclado y lector de pantalla lo necesitan visible. */ :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--radius-sm); } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } @media (min-width: 768px) { .wrap { padding: 0 96px; } } /* ---- site meta (quiet brand line) ---- */ .site-meta { padding: 28px 0 0; font-size: 0.875rem; color: var(--ink-2); font-weight: 500; letter-spacing: 0.02em; } .site-meta .brand { color: var(--signal-text); font-weight: 600; } /* ---- hero ---- */ .hero { padding: 32px 0 40px; border-bottom: 1px solid var(--border); } .eyebrow { margin: 0 0 10px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--info); } /* Escala Display de DESIGN.md. opsz 144 se fija a mano (no con font-optical-sizing) para que el serif salga afilado a tamaño grande, que es la mitad "instrumento" de la marca. */ .hero h1 { margin: 0 0 18px; font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144, 'SOFT' 20, 'WONK' 0; font-weight: 480; font-size: clamp(2.5rem, 4vw + 1.5rem, 4.5rem); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; max-width: 18ch; } .badge-visible { display: inline-flex; align-items: center; gap: 0.5em; background: var(--signal); color: #fff; border-radius: var(--radius-full); padding: 0.4em 1em 0.4em 0.8em; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 22px; } .badge-visible .dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--signal-bright); } .contact-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1.3em; border-radius: var(--radius-sm); font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 0.9375rem; text-decoration: none; border: 1px solid transparent; transition: transform var(--dur-short) var(--ease-in), box-shadow var(--dur-short) var(--ease-in); } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--signal); color: #fff; } .btn-primary:hover { box-shadow: 0 4px 14px rgba(31, 110, 74, 0.28); } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border); } .btn-ghost { background: transparent; color: var(--signal-text); border-color: var(--border); } /* ---- sections ---- */ section.about, section.details, section.faq { padding: 40px 0; border-bottom: 1px solid var(--border); } section.faq { border-bottom: none; } h2 { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 40, 'SOFT' 10, 'WONK' 0; font-weight: 460; font-size: 2rem; line-height: 1.15; margin: 0 0 20px; letter-spacing: -0.005em; text-wrap: balance; } /* 62ch, no 68ch: a 68 la línea salía a ~84 caracteres (medido), fuera de la banda legible de 45-75. A 62 cae en ~62. La ficha la lee un paciente con prisa, no un usuario cautivo. */ .about p { max-width: 62ch; color: var(--ink); } .nap { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; max-width: 520px; } @media (min-width: 640px) { .nap { grid-template-columns: 1fr 1fr; } } .nap > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; } .nap dt { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--info); margin-bottom: 6px; } .nap dd { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 0.9375rem; font-variant-numeric: tabular-nums; word-break: break-word; } /* ---- FAQ ---- */ .faq details { border-bottom: 1px solid var(--border); padding: 18px 0; } .faq details:first-of-type { border-top: 1px solid var(--border); } /* min-height 44px: es el objetivo táctil mínimo. En escritorio la pregunta ocupa una sola línea (28px) y sin esto el área pulsable se queda corta en el móvil, que es donde el paciente abre la ficha. */ .faq summary { cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-family: 'IBM Plex Mono', monospace; color: var(--signal-text); flex-shrink: 0; } .faq details[open] summary::after { content: '\2212'; } .faq .a { margin: 14px 0 0; max-width: 62ch; color: var(--ink-2); } /* ---- footer ---- */ footer { padding: 32px 0 48px; font-size: 0.875rem; color: var(--ink-2); } footer strong { color: var(--signal-text); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }