/* ============================================================ 32 PROYECTOS — Utilidades y componentes del sitio Los TOKENS (color, tipografía, espaciado, vibra "Noche") provienen del Sistema de Diseño vinculado y se enlazan en el de cada página: _ds/…/tokens/fonts.css · colors.css · typography.css · spacing.css Aquí NO se redefinen tokens — el DS es la fuente única de verdad. ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* ——— Tipografía ——— */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } .eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); } .mono { font-family: var(--mono); } /* ——— Layout helpers ——— */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(64px, 9vw, 140px); } /* Marcas de cota / ticks de plano */ .ticks { display: flex; align-items: center; gap: 0; height: 14px; } .ticks span { width: 1px; background: var(--line-strong); height: 6px; } .ticks span:nth-child(5n+1) { height: 14px; } /* hairline horizontal */ .rule { height: 1px; background: var(--line); border: 0; } /* ——— Botones ——— */ .btn { font-family: var(--sans); font-weight: 600; font-size: 16px; border: 0; border-radius: var(--r); padding: 15px 26px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease; white-space: nowrap; line-height: 1; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fafafa; color: oklch(0.99 0.01 85); box-shadow: 0 1px 0 var(--accent-deep); } .btn-primary:hover { background: var(--accent-deep); box-shadow: 0 6px 22px var(--accent-soft); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); } .btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); } .btn-wa { background: #3a9a4a; background: oklch(0.62 0.15 150); color: #fff; } .btn-wa:hover { background: #317a3c; background: oklch(0.55 0.15 150); } /* ——— Placeholder de imagen (rayas + etiqueta mono) ——— */ .ph { position: relative; background: repeating-linear-gradient(135deg, rgba(40, 30, 15, 0.04) 0 2px, transparent 2px 11px), var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ink-3); } .ph::after { content: attr(data-label); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; border: 1px dashed var(--line-strong); border-radius: 3px; background: var(--bg); } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } ::selection { background: var(--accent); color: #fff; } a { color: inherit; } img { display: block; max-width: 100%; } /* Imagen real que reemplaza un placeholder .ph (hereda tamaño de la clase de layout) */ .ph-img { object-fit: cover; width: 100%; height: 100%; border-radius: var(--r); background: var(--bg-2); } /* ===== Accesibilidad (DoD) ===== */ .skip-link { position: absolute; left: 12px; top: -48px; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--r); font-weight: 600; text-decoration: none; transition: top .2s ease; } .skip-link:focus { top: 12px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* --- WhatsApp Float Button --- */ .wa-float{position:fixed;bottom:24px;right:24px;z-index:9990;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.45);transition:transform .2s,box-shadow .2s;text-decoration:none} .wa-float:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(37,211,102,.55)} @media(max-width:768px){.wa-float{bottom:16px;right:16px;width:52px;height:52px}}