/* ═══════════════════════════════════════════════════════════════════════════ ALARIFE — Landing v3 · "PLANO DE OBRA" Editorial-arquitectónico × wabi-sabi × símbolo `>/` ═══════════════════════════════════════════════════════════════════════════ */ /* Newsreader sigue como display serif italic distintivo (decisión copywriter Sprint 4: identidad). Geist removido; reemplazado por General Sans (Fontshare, free comercial — alternativa a PP Neue Montreal por licencia Pangram). Departure Mono reemplaza JetBrains: más editorial, menos cliché AI. Self-hosted en assets/fonts/ → controla flash + sin dependencia red. Newsreader: @import ELIMINADO (bloqueante). Ahora carga via en del HTML. */ @font-face { font-family: 'General Sans'; src: url('assets/fonts/GeneralSans-Variable.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('assets/fonts/GeneralSans-VariableItalic.woff2') format('woff2'); font-weight: 200 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Departure Mono'; src: url('assets/fonts/DepartureMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ─── TOKENS ─────────────────────────────────────────────────────────── */ :root { /* Surface — papel de plano */ --paper: #F3ECD8; --paper-deep: #EAE0C7; --paper-soft: #F7F2E2; /* Tinta */ --ink: #1A1512; --ink-soft: rgba(26, 21, 18, 0.72); --ink-mid: rgba(26, 21, 18, 0.52); --ink-tech: rgba(26, 21, 18, 0.38); --ink-faint: rgba(26, 21, 18, 0.18); --ink-trace: rgba(26, 21, 18, 0.08); /* Acentos */ --ocre: #8B3E1D; --ocre-deep: #6F3017; --ocre-bright: #C5651E; --ocre-warm: #D97757; --prompt-mark: #B84E18; /* terracota — símbolo >/ (coherente con avatar IG, diferenciado del coral Anthropic) */ --ocre-glow: rgba(139, 62, 29, 0.08); --verde: #5A6B3A; --verde-bright: #7B8B4F; /* Charcoal (hero dark) */ --charcoal: #1A1612; --charcoal-deep: #0F0C0A; --charcoal-soft: rgba(243, 236, 216, 0.08); --ink-on-dark: #F3ECD8; --ink-on-dark-soft: rgba(243, 236, 216, 0.65); --ink-on-dark-mid: rgba(243, 236, 216, 0.42); --ink-on-dark-tech: rgba(243, 236, 216, 0.28); --grid-tech-fine: rgba(217, 119, 87, 0.025); --grid-tech-major: rgba(217, 119, 87, 0.05); --grid-tech-step-fine: 4px; --grid-tech-step-major: 32px; /* Grid blueprint */ --grid-fine: rgba(220, 195, 165, 0.04); --grid-major: rgba(220, 195, 165, 0.07); --grid-step-fine: 8px; --grid-step-major: 40px; /* Typography — Sprint 5 update: Geist → General Sans (humanist warmer), JetBrains → Departure Mono (editorial, less cliché AI) */ --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif; --sans: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --display: 'Big Shoulders Display', sans-serif; /* Layout */ --margin-side: 64px; --content-max: 1200px; --gutter: clamp(20px, 4vw, 56px); --section-padding: clamp(120px, 18vh, 200px); /* Easings */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* carousel 3D: suave, sin overshoot/pop */ } /* ─── RESET ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1, 'liga' 1; } body { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--charcoal-deep); font-weight: 400; letter-spacing: -0.005em; overflow-x: hidden; position: relative; min-height: 100vh; } /* ─── BACKGROUND BLUEPRINT GRID ───────────────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: /* Major grid lines (cada 40px) */ linear-gradient(to right, var(--grid-major) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px), /* Minor grid lines (cada 8px) */ linear-gradient(to right, var(--grid-fine) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-fine) 1px, transparent 1px); background-size: var(--grid-step-major) var(--grid-step-major), var(--grid-step-major) var(--grid-step-major), var(--grid-step-fine) var(--grid-step-fine), var(--grid-step-fine) var(--grid-step-fine); } /* Subtle paper grain over grid — PNG estático (V4 fix: era feTurbulence con repaint en mobile) */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.72; mix-blend-mode: multiply; background-image: url('assets/grain.png'); background-repeat: repeat; background-size: 256px 256px; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color 0.25s var(--ease-out); } ::selection { background: var(--ocre); color: var(--paper); } /* ─── NAV STRIP (top fixed) ──────────────────────────────────────────── */ .nav-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 18px 32px; /* Dark glass siempre — match con el vidrio del intro Sprint 8 */ background: rgba(15, 12, 10, 0.68); backdrop-filter: blur(18px) saturate(125%) brightness(0.92); -webkit-backdrop-filter: blur(18px) saturate(125%) brightness(0.92); border-bottom: 1px solid rgba(243, 236, 216, 0.08); color: var(--ink-on-dark-soft); transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), color 0.35s var(--ease-out); } /* Adaptive context preservado pero ambos estados son dark glass — sutil ajuste de opacidad */ .nav-strip[data-context="dark"] { background: rgba(15, 12, 10, 0.78); border-bottom-color: rgba(243, 236, 216, 0.07); } .nav-strip[data-context="dark"] .nav-mark { color: var(--ink-on-dark-soft); } .nav-strip[data-context="dark"] .nav-mark .prompt { color: var(--prompt-mark); } .nav-strip[data-context="dark"] .nav-meta { color: var(--ink-on-dark-tech); } .nav-strip[data-context="dark"] .nav-meta .sep { color: rgba(243, 236, 216, 0.18); } .nav-mark { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--ink-on-dark-soft); line-height: 1; transition: color 0.5s var(--ease-out); } .nav-mark img { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 4px 12px rgba(139, 62, 29, 0.12); } .nav-mark .prompt { color: var(--prompt-mark); font-weight: 500; margin-left: 4px; transition: color 0.5s var(--ease-out); } .nav-mark .name { letter-spacing: 0.02em; } /* Cursor parpadeante reusable — presencia constante de "terminal vivo" Usado en: nav-mark + header pilares "LOS 5 PILARES >/ALARIFE" */ .cursor-blink { display: inline-block; font-family: var(--mono); color: var(--ocre-warm); margin-left: 6px; animation: blink 1.05s step-end infinite; font-size: 0.9em; vertical-align: -0.05em; font-weight: 400; line-height: 1; } @media (prefers-reduced-motion: reduce) { .cursor-blink { animation: none; opacity: 0.7; } } /* V17 · nav-links central · clean editorial (port V17-A 358-388) */ .nav-links { display: flex; gap: 28px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .nav-links a { color: var(--ink-soft); position: relative; padding: 4px 0; transition: color 0.25s var(--ease-out); } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--ocre-warm); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); } .nav-links a:hover { color: var(--ocre-bright); } .nav-links a:hover::after { transform: scaleX(1); } .nav-strip[data-context="dark"] .nav-links a { color: var(--ink-on-dark-soft); } .nav-strip[data-context="dark"] .nav-links a:hover { color: var(--ocre-warm); } @media (max-width: 720px) { .nav-links { display: none; } } .nav-meta { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-on-dark-tech); display: flex; gap: 24px; transition: color 0.5s var(--ease-out); } .nav-meta span { white-space: nowrap; } .nav-meta .sep { color: rgba(243, 236, 216, 0.18); transition: color 0.5s var(--ease-out); } @media (max-width: 700px) { .nav-strip { padding: 14px 20px; } .nav-mark img { width: 36px; height: 36px; border-radius: 8px; } .nav-meta { display: none; } } /* ─── CINTA MÉTRICA (left fixed rail) ────────────────────────────────── */ .rail { position: fixed; left: 24px; top: 80px; bottom: 40px; width: 32px; z-index: 40; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; } .rail::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent 0%, var(--ocre) 6%, var(--ocre) 94%, transparent 100%); transform: translateX(-50%); opacity: 0.6; } .rail-tick { position: relative; display: flex; align-items: center; justify-content: center; height: 20px; } .rail-tick::before { content: ''; width: 12px; height: 1px; background: var(--ocre); position: absolute; left: 50%; transform: translateX(-50%); } .rail-tick.is-active::before { width: 18px; background: var(--ocre-bright); } .rail-tick .num { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.1em; color: var(--ink-tech); position: absolute; left: 22px; white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); } .rail-tick.is-active .num { opacity: 1; transform: translateX(0); color: var(--ocre); } @media (max-width: 900px) { .rail { display: none; } } /* ─── EDGE TICK MARKS ─────────────────────────────────────────────────── */ .edge-ticks { position: fixed; z-index: 5; pointer-events: none; font-family: var(--mono); font-size: 8px; letter-spacing: 0.15em; color: var(--ink-faint); text-transform: uppercase; } .edge-ticks.top { top: 60px; right: 32px; } .edge-ticks.bottom { bottom: 12px; right: 32px; } @media (max-width: 700px) { .edge-ticks { display: none; } } /* ─── LAMINA (section container) ──────────────────────────────────────── */ .lamina { position: relative; z-index: 1; padding: var(--section-padding) var(--margin-side); scroll-margin-top: 80px; } .lamina-inner { max-width: var(--content-max); margin: 0 auto; position: relative; z-index: 2; } .lamina-header { display: flex; align-items: baseline; gap: 24px; margin-bottom: 64px; padding-bottom: 18px; border-bottom: 1px solid var(--ink-faint); position: relative; } .lamina-header::before { content: ''; position: absolute; left: 0; bottom: -1px; width: 80px; height: 1px; background: var(--ocre); } .lamina-tag { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ocre); flex-shrink: 0; } .lamina-tag .n { color: var(--ocre); margin-right: 4px; } .lamina-title-meta { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-tech); margin-left: auto; } @media (max-width: 700px) { .lamina { padding: 96px 20px; } .lamina-header { flex-direction: column; gap: 8px; } .lamina-title-meta { margin-left: 0; } } /* ─── TYPOGRAPHY SCALE ────────────────────────────────────────────────── */ h1 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(44px, 6.8vw, 88px); line-height: 1.04; letter-spacing: -0.024em; font-variation-settings: 'opsz' 72; margin-bottom: 32px; max-width: 14ch; } h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(36px, 5.5vw, 68px); line-height: 1.0; letter-spacing: -0.028em; font-variation-settings: 'opsz' 60; margin-bottom: 28px; max-width: 20ch; } h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.18; letter-spacing: -0.018em; font-variation-settings: 'opsz' 36; margin-bottom: 12px; } p { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: var(--ink-soft); margin-bottom: 18px; max-width: 60ch; } p.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--ink); font-weight: 400; max-width: 50ch; letter-spacing: -0.012em; margin-bottom: 40px; } .italic-em { font-family: var(--serif); font-style: italic; /* FIX designer: weight 400 vs 300 del resto — contraste de peso para que el énfasis exista incluso en B&W (no solo color) */ font-weight: 400; color: var(--ocre); font-variation-settings: 'opsz' 72; } /* Editorial highlight — ocre underline orgánico */ .under-ocre { background: linear-gradient(180deg, transparent 86%, var(--ocre-bright) 86%, var(--ocre-bright) 95%, transparent 95%); padding-bottom: 0.05em; } /* Editorial link */ .link-ocre { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--ocre); text-transform: uppercase; position: relative; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--ocre); transition: color 0.25s var(--ease-out), gap 0.3s var(--ease-out); } .link-ocre:hover { color: var(--ocre-deep); gap: 14px; } .link-ocre .arrow { transition: transform 0.3s var(--ease-out); } .link-ocre:hover .arrow { transform: translateX(2px); } /* ─── LÁMINA 01 · HERO (DARK · CHARCOAL CÁLIDO) ───────────────────────── */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: clamp(72px, 9vh, 110px); padding-bottom: clamp(60px, 7vh, 100px); position: relative; isolation: isolate; background: var(--charcoal); color: var(--ink-on-dark); overflow: hidden; } /* Grid tech (override del blueprint cream global) */ .hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background-color: var(--charcoal); background-image: linear-gradient(to right, var(--grid-tech-major) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-tech-major) 1px, transparent 1px), linear-gradient(to right, var(--grid-tech-fine) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-tech-fine) 1px, transparent 1px); background-size: var(--grid-tech-step-major) var(--grid-tech-step-major), var(--grid-tech-step-major) var(--grid-tech-step-major), var(--grid-tech-step-fine) var(--grid-tech-step-fine), var(--grid-tech-step-fine) var(--grid-tech-step-fine); } /* Transición CHARCOAL CÁLIDO → CHARCOAL-DEEP (Layer 4.5 fix designer) ANTES: hero terminaba en cream → pilares arrancaba con cream → flash cream entre dos zonas dark. AHORA: hero termina en charcoal-deep (= color de pilares) → empalme directo → zona dark sostenida. Fade más corto y cromáticamente unificado. */ .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 280px; background: linear-gradient( to bottom, transparent 0%, rgba(26, 22, 18, 0.45) 35%, rgba(20, 17, 14, 0.85) 75%, var(--charcoal-deep) 100% ); pointer-events: none; z-index: -1; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 5vw, 80px); /* FIX designer: era 'center' que centraba sello vs bloque entero (5 elementos), dejando sello a la altura del lead. 'start' + margin-top en sello lo ancla al H1. */ align-items: start; width: 100%; position: relative; z-index: 1; } .hero-content { position: relative; min-width: 0; } /* Sello del plano — columna grid propia (V4 fix: ya no position absolute, evita solapamiento 900-1100px) */ .hero-mark-cell { position: relative; display: flex; flex-direction: column; gap: 14px; align-items: flex-end; z-index: 2; pointer-events: none; /* FIX designer Sprint 4: anclar sello a baseline óptica del H1 (compensa altura del .hero-eyebrow + su margin-bottom). */ margin-top: clamp(40px, 5.6vh, 64px); } .hero-mark-cell > * { pointer-events: auto; } .hero-mark-glow { position: absolute; inset: -60px; background: radial-gradient(circle, rgba(217, 119, 87, 0.32) 0%, rgba(217, 119, 87, 0.08) 40%, transparent 70%); filter: blur(40px); z-index: -1; pointer-events: none; } .hero-mark { width: clamp(180px, 22vw, 280px); height: auto; border-radius: clamp(36px, 4vw, 56px); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 24px 60px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(139, 62, 29, 0.18), 0 0 0 1px rgba(243, 236, 216, 0.06); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); } .hero-mark:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 32px 72px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(139, 62, 29, 0.28), 0 0 0 1px rgba(243, 236, 216, 0.10); } .hero-mark-meta { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-on-dark-tech); text-align: right; line-height: 1.6; } .hero-mark-meta span { display: block; } .hero-mark-meta strong { color: var(--ocre-warm); font-weight: 500; } .hero-eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-on-dark-soft); margin-bottom: 28px; } .hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--ocre-warm); flex-shrink: 0; } .hero h1 { margin-bottom: 28px; color: var(--ink-on-dark); } .hero h1 .italic-em { color: var(--ocre-warm); } /* Cursor mono parpadeante (solo en nav-mark, ver .nav-mark .cursor-blink) */ @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Lead Newsreader — bajada editorial real (FIX designer: salir de mono que se sentía "código de muestra") */ .hero-lead { font-family: var(--serif); font-style: normal; font-weight: 300; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-on-dark-soft); margin-bottom: 20px; max-width: 42ch; letter-spacing: -0.012em; font-variation-settings: 'opsz' 24; } /* Bullets "señales de necesidad" — migrados de hero a pilares-intro (Layer 4.4 refactor) Estilos reciclados como .pilares-signals + .pilares-anchor sobre fondo CREAM (no dark como antes) */ /* Margin-top reducido: metaphor + signals son el MISMO bloque mental ("contexto del producto"). 28+28=56-68px de aire entre dos elementos hermanados los rompía visualmente (designer Sprint 5). */ .pilares-signals { list-style: none; padding: 0; margin: 14px 0 28px 0; max-width: 56ch; display: flex; flex-direction: column; gap: 10px; } .pilares-signals li { font-family: var(--mono); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.55; color: var(--ink-soft); letter-spacing: -0.005em; padding-left: 22px; position: relative; } .pilares-signals li::before { content: '/'; position: absolute; left: 0; top: 0; color: var(--ocre); font-weight: 500; font-family: var(--mono); } /* Anchor "500 clientes" — la pregunta de diagnóstico Herk, ahora intro de Pilares */ .pilares-anchor { position: relative; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.42; color: var(--ink); max-width: 42ch; padding: 18px 0 18px 26px; border-left: 2px solid var(--ocre); margin: 0 0 36px 0; font-variation-settings: 'opsz' 36; } .pilares-anchor strong { font-weight: 500; color: var(--ocre); font-style: italic; } .pilares-anchor em { font-style: italic; font-weight: 400; color: var(--ocre); } .hero-cta-row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .hero .link-ocre { color: var(--ocre-warm); border-bottom-color: var(--ocre-warm); } .hero .link-ocre:hover { color: #E8866B; } /* φ — firma de proporción áurea, barely visible bottom-right del hero */ .hero-phi-mark { font-family: var(--mono); font-size: 11px; color: rgba(217, 119, 87, 0.16); letter-spacing: 0.05em; position: absolute; bottom: 28px; right: 32px; pointer-events: none; user-select: none; } /* CTA arrow — breathe sutil, 3s cycle */ @keyframes cta-breathe { 0%, 100% { transform: translateX(0); opacity: 1; } 55% { transform: translateX(5px); opacity: 0.6; } } .hero-cta-row .link-ocre .arrow { display: inline-block; animation: cta-breathe 3s ease-in-out infinite; } .hero-cta-row .link-ocre:hover .arrow { animation: none; transform: translateX(4px); } .hero-cta-row .secondary { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-on-dark-tech); } @media (max-width: 900px) { .hero-content { max-width: 100%; } .hero-mark-cell { position: relative; bottom: auto; right: auto; align-items: flex-start; margin-bottom: 48px; order: -1; } .hero-mark { width: clamp(140px, 35vw, 200px); } .hero-mark-meta { text-align: left; } } /* ═══════════════════════════════════════════════════════════════════════ LÁMINA 02 · PILARES — Carrusel cilíndrico (Sprint 3 Layer 2A) Fondo dark contained con fades largos arriba/abajo (UI fluido). Card central protagonista, laterales sombreadas en perspectiva. ═══════════════════════════════════════════════════════════════════════ */ /* Sección dark — empalma DIRECTO con el final del hero (sin fade-from-cream) Layer 4.5 fix designer: eliminado el flash cream entre hero y pilares. Hero termina en charcoal-deep → pilares arranca en charcoal-deep → zona dark sostenida. Solo mantenemos fade-INFERIOR (pilares → proceso) que sigue siendo necesario. */ /* padding-bottom 280-420px era excesivo: el terminal vivía a bottom 280-360px → debajo del terminal quedaba un "agujero" de fade vacío de ~280px. Bajamos a 220-320px para cerrar el aire muerto sin sacrificar el fade dark→cream (que sigue siendo necesario para el empalme con benchmarks). */ #pilares { background-color: var(--charcoal-deep); background-image: radial-gradient(ellipse 65% 45% at 18% 50%, rgba(5, 3, 1, 0.50) 0%, transparent 65%), radial-gradient(ellipse 55% 60% at 80% 40%, rgba(8, 5, 2, 0.40) 0%, transparent 60%); background-size: 100% 100%, 100% 100%; padding-top: clamp(120px, 14vh, 180px); padding-bottom: clamp(470px, 53vh, 560px); overflow: hidden; } /* Grid tech ocre — capa de tecnicidad subtle sobre el dark. Sprint 5 (Arthur brief): subir tech del 15% al 40% sin perder identidad arquitectónica. Densidad fine (4px) + major (32px), ambas en ocre con alpha bajo para no competir con cards. Atenúa hacia los bordes con mask-image para evitar borde duro contra los fades. */ #pilares::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: /* Major lines (32px) */ linear-gradient(to right, rgba(217, 119, 87, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(217, 119, 87, 0.05) 1px, transparent 1px), /* Fine lines (4px) */ linear-gradient(to right, rgba(217, 119, 87, 0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(217, 119, 87, 0.025) 1px, transparent 1px); background-size: 32px 32px, 32px 32px, 4px 4px, 4px 4px; /* Mask radial — más fuerte en el centro del carrusel, se desvanece hacia el fade */ -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0) 85%); mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0) 85%); } @media (prefers-reduced-motion: reduce) { #pilares::before { display: none; } } /* Fade INFERIOR (charcoal → cream) — la siguiente sección proceso emerge en cream FIX designer Sprint 4: stop intermedio 0.45 → 0.30, banda marrón menos visible */ #pilares::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: clamp(300px, 35vh, 420px); /* Solo grid — el blend-veil (fixed) maneja la zona de transición visualmente */ background-image: linear-gradient(to right, rgba(197, 101, 30, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(197, 101, 30, 0.05) 1px, transparent 1px), linear-gradient(to right, rgba(197, 101, 30, 0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(197, 101, 30, 0.025) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; pointer-events: none; z-index: 1; } /* Inner por encima de los fades */ #pilares .lamina-inner { z-index: 3; } /* Lámina header sobre dark — invertir colores */ #pilares .lamina-header { border-bottom-color: rgba(243, 236, 216, 0.15); } #pilares .lamina-header::before { background: var(--ocre-warm); } #pilares .lamina-tag, #pilares .lamina-tag .n { color: var(--ocre-warm); } #pilares .lamina-title-meta { color: var(--ink-on-dark-tech); } /* Terminal vibecoder — agente Alarife corriendo en runtime · plano de obra "tech vivo" Posición: bottom-right de #pilares (zona libre — sketches están top-left/right + middle-right + bottom-left). Mecánica animación: cada línea entra con highlight, se atenúa, queda visible hasta reset (loop 14s). */ .terminal-vibe { position: absolute; /* Subido a bottom 220-300 (era 280-360) para acompañar el padding-bottom reducido del #pilares. El terminal ahora queda anclado más cerca del carrusel, eliminando el aire muerto debajo. */ bottom: clamp(220px, 24vh, 300px); right: clamp(24px, 4vw, 56px); /* Width subido 280-340 → 320-380 para que tenga peso real a 1440+ sin invadir el carrusel. Opacity base 0.92 → 0.85: lee como HUD ambiente (background) no como panel hero. */ width: clamp(320px, 28vw, 380px); background: rgba(15, 12, 10, 0.88); border: 1px solid rgba(217, 119, 87, 0.28); border-radius: 8px; z-index: 2; font-family: var(--mono); font-size: 10px; line-height: 1.55; letter-spacing: 0.02em; box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(217, 119, 87, 0.05); pointer-events: none; overflow: hidden; opacity: 0.85; } .terminal-head { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid rgba(243, 236, 216, 0.08); background: rgba(0, 0, 0, 0.28); } .terminal-dots { display: flex; gap: 5px; } .terminal-dots em { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(243, 236, 216, 0.18); } .terminal-dots em:nth-child(1) { background: rgba(217, 119, 87, 0.55); } .terminal-dots em:nth-child(2) { background: rgba(195, 195, 95, 0.45); } .terminal-dots em:nth-child(3) { background: rgba(143, 195, 95, 0.45); } .terminal-title { font-size: 9px; color: var(--ink-on-dark-tech); letter-spacing: 0.18em; text-transform: uppercase; } .terminal-log { list-style: none; margin: 0; padding: 12px 14px; color: var(--ink-on-dark-soft); } .terminal-log li { /* opacity base 0.22 — las líneas con delay largo son visibles desde el inicio como "log ya ejecutado" en segundo plano. El pulse las ilumina al activarse. Animation pausada hasta que el terminal entre viewport (CEO Sprint 5 fix). */ opacity: 0.22; padding-block: 1.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: terminal-pulse 14s linear infinite; animation-play-state: paused; } .terminal-vibe.is-in .terminal-log li { animation-play-state: running; } .terminal-log .t { color: var(--ocre-warm); margin-right: 8px; opacity: 0.7; } /* Highlights de log — antes color: var(--paper) idéntico al base = invisible. Ahora paper full + underline ocre punteado tipo terminal-emphasis. Lee como "valor capturado". */ .terminal-log .hl { color: var(--paper); font-weight: 500; border-bottom: 1px dotted rgba(217, 119, 87, 0.55); padding-bottom: 1px; } /* 7 líneas (post-meeting copywriter, cortado el slop "system.idle"). Loop 14s, gap 2s. */ .terminal-log li:nth-child(1) { animation-delay: 0s; } .terminal-log li:nth-child(2) { animation-delay: 2s; } .terminal-log li:nth-child(3) { animation-delay: 4s; } .terminal-log li:nth-child(4) { animation-delay: 6s; } .terminal-log li:nth-child(5) { animation-delay: 8s; } .terminal-log li:nth-child(6) { animation-delay: 10s; } .terminal-log li:nth-child(7) { animation-delay: 12s; } @keyframes terminal-pulse { 0% { opacity: 0; color: var(--paper); } 3% { opacity: 1; color: var(--paper); } 10% { opacity: 0.55; color: var(--ink-on-dark-soft); } /* Mantiene opacidad mínima visible hasta fin del ciclo — evita que la última línea quede en blanco durante los primeros 11.9s del primer ciclo 14s. */ 85% { opacity: 0.32; color: var(--ink-on-dark-soft); } 100% { opacity: 0.32; color: var(--ink-on-dark-soft); } } @media (prefers-reduced-motion: reduce) { .terminal-log li { animation: none; opacity: 0.55; } } @media (max-width: 1100px) { /* Mobile: terminal oculto (no hay margen + saturaría visual) */ .terminal-vibe { display: none; } } /* Sketches dentro de pilares — Sprint 5: REACTIVADOS sobre dark Cambio crítico: mix-blend-mode multiply → screen + color ocre warm + opacity ajustada. Screen sobre dark permite que el ocre brille; multiply los hubiera matado a negro. Los SVGs dentro deben usar stroke="currentColor" para heredar el color ocre. */ #pilares .sketch-wrap { display: block; mix-blend-mode: screen; color: var(--ocre-warm); opacity: 0.22; z-index: 1; } #pilares .sketch-wrap text { fill: currentColor; } @media (max-width: 1100px) { #pilares .sketch-wrap { display: none; } } @media (prefers-reduced-motion: reduce) { #pilares .sketch-wrap { display: none; } } /* Intro — texto sobre dark */ .pilares-intro { margin-bottom: 56px; position: relative; z-index: 3; } #pilares .pilares-intro h2 { color: var(--ink-on-dark); } #pilares .pilares-intro h2 .italic-em { color: var(--ocre-warm); } #pilares .pilares-intro .lead { color: var(--ink-on-dark-soft); } /* Header pilares "Cinco capas. Una sola obra." — Sprint 5 meeting cirugía Reescritura post-meeting (copywriter + commercial + designer convergen): la versión anterior "LOS 5 PILARES >/ALARIFE [█]" replicaba decoración del nav (cursor + prompt) sin sumar mensaje. Esta versión es voz Alarife pura: voseo implícito, metáfora arquitectura, ritmo declarativo. */ .pilares-h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(40px, 6.4vw, 84px); line-height: 0.98; letter-spacing: -0.025em; margin-bottom: clamp(14px, 1.4vh, 22px); color: var(--ink-on-dark); font-variation-settings: 'opsz' 72; } .pilares-h2-main { color: var(--ink-on-dark); } .pilares-h2-sub { /* Segunda parte ("Una sola obra.") en ocre warm — es la "obra" en el plano */ color: var(--ocre-warm); } /* Subline metáfora — voz Alarife pura: voseo + dolor concreto. Reescritura post-meeting copywriter (la frase anterior "capa del sistema operativo, no un producto cerrado" era jerga SaaS prestada + negación defensiva). */ .pilares-metaphor { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; color: var(--ink-on-dark-soft); font-weight: 400; letter-spacing: -0.01em; margin-bottom: clamp(28px, 3vh, 40px); max-width: 60ch; font-variation-settings: 'opsz' 18; } /* FIX bug Sprint 4 — bullets + anchor de pilares-intro heredaban color ink (negro) sobre fondo charcoal-deep (negro) → invisibles. Override a paleta on-dark. */ #pilares .pilares-signals li { color: var(--ink-on-dark-soft); } #pilares .pilares-signals li::before { color: var(--ocre-warm); } #pilares .pilares-anchor { color: var(--ink-on-dark); border-left-color: var(--ocre-warm); } #pilares .pilares-anchor strong, #pilares .pilares-anchor em { color: var(--ocre-warm); } /* ─── Carrusel cilíndrico ────────────────────────────────────────────── */ .pilares-carousel { position: relative; margin-left: calc(-1 * var(--margin-side)); margin-right: calc(-1 * var(--margin-side)); padding: 32px 0 48px; z-index: 3; } .pilares-carousel.is-cylinder { perspective: 1800px; perspective-origin: center 45%; } /* Orb radial ocre — depth behind carrusel (designer Sprint 5: prerequisite del Sprint 6 terminal, da profundidad al fondo dark sin competir con cards. Cards están en z-index 10-30. */ .pilares-carousel.is-cylinder::before { content: ''; position: absolute; top: 50%; left: 50%; width: clamp(600px, 70vw, 1100px); height: clamp(600px, 70vw, 1100px); transform: translate(-50%, -50%); background: radial-gradient( circle at center, rgba(217, 119, 87, 0.10) 0%, rgba(217, 119, 87, 0.05) 30%, transparent 65% ); pointer-events: none; z-index: 0; filter: blur(80px); } @media (prefers-reduced-motion: reduce) { .pilares-carousel.is-cylinder::before { display: none; } } /* Track ahora es CONTENEDOR ABSOLUTE — las 5 cards se posicionan en arco con transform JS Modelo "Character Selector" RPG: las 5 siempre visibles, las lejanas transparentadas FIX Layer 4.3 tech-advisor: NO usar transform-style: preserve-3d aquí — perspective vive en el padre .pilares-carousel.is-cylinder. Combinado con overflow:hidden del #pilares puede colapsar el contexto 3D en Safari y hacer que las cards laterales aparezcan encima de la central. */ .pilares-track { position: relative; width: 100%; height: clamp(620px, 84vh, 800px); margin: 0 auto; padding: 0; /* Touch behavior: drag horizontal para navegar */ touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; cursor: grab; } .pilares-track:active { cursor: grabbing; } .pilares-track::-webkit-scrollbar { display: none; } /* Card base — LIQUID GLASS A1 (Apple WDC25 inspired) · Sprint 5 Skin transparente nativo: backdrop-filter + inset highlight superior + reflejo diagonal. PNGs columnas re-cortadas agresivo: solo outline + ocre, sin halos cream. FIX Safari iOS (WebKit #198814): backdrop-filter NO funciona si el elemento o sus ancestros tienen transform-style: preserve-3d. Quitamos preserve-3d del card (no tenemos hijos con transforms 3D que requieran preservación) + isolation: isolate ya crea su propio stacking. El padre .pilares-carousel.is-cylinder mantiene perspective: 1800px → rotateY/translateZ del propio .pilar-card siguen funcionando correctamente. */ .pilar-card { position: absolute; top: 50%; left: 50%; width: clamp(360px, 52vw, 620px); min-height: clamp(540px, 76vh, 720px); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(40px) saturate(180%) brightness(1.05); -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 22px; padding: 28px 32px 24px; display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: var(--paper); transform-origin: center center; transform: translate(-50%, -50%) scale(0.42) rotateY(0deg); opacity: 0; filter: brightness(0.6); /* 2 fases: el movimiento (transform/opacity) suave y rápido; las capas caras (filter/shadow/bg) entran con leve delay para no competir con el desplazamiento. */ transition: transform 0.55s var(--ease-smooth), opacity 0.4s var(--ease-smooth), filter 0.5s var(--ease-out) 0.08s, box-shadow 0.6s var(--ease-out) 0.1s, border-color 0.45s var(--ease-out), background 0.45s var(--ease-out); /* will-change ESTÁTICO en base eliminado (era costoso para 15 cards × 3 sets = 45 layers). Se agrega DINÁMICO solo a cards visibles vía .is-active/.is-side/.is-side-prev abajo. */ isolation: isolate; /* Inset highlight superior + sombra interna inferior = sensación de menisco */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 24px 60px -25px rgba(0, 0, 0, 0.55); } /* Fallback Safari < 15: si no soporta backdrop-filter, opacar el bg para que el contenido lea */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pilar-card { background: rgba(40, 30, 22, 0.55); border-color: rgba(217, 119, 87, 0.28); } } /* Reflejo diagonal interno superior (luz cayendo top-left) */ .pilar-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%); border-radius: 22px 22px 0 0; pointer-events: none; z-index: 1; } /* Refracción luz superior — band horizontal sutil */ .pilar-card::after { content: ''; position: absolute; top: 1px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%); filter: blur(0.5px); pointer-events: none; z-index: 1; } /* ─── Estados perspective ─── */ /* will-change DINÁMICO: solo cards near-viewport (active + sides cercanas) reservan compositor layer. Las cards far quedan sin will-change → menos layers en mobile, mejor scroll perf. */ .pilar-card.is-active, .pilar-card.is-side, .pilar-card.is-side-prev { will-change: transform, opacity; } /* Offset 0 — ACTIVE protagonista vidrio iluminado · blur 48 (vidrio profundo enfocado) */ .pilar-card.is-active { transform: translate(-50%, -50%) scale(1) rotateY(0deg) translateZ(0); opacity: 1; filter: brightness(1) contrast(1) saturate(1); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.32); backdrop-filter: blur(48px) saturate(190%) brightness(1.06); -webkit-backdrop-filter: blur(48px) saturate(190%) brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 80px -20px rgba(217, 119, 87, 0.45), 0 32px 80px -25px rgba(0, 0, 0, 0.65); z-index: 30; } /* Offset +1 — lateral derecho cerca · blur 24 (medio plano, menos profundo) */ .pilar-card.is-side { transform: translate(-50%, -50%) translateX(58%) scale(0.66) rotateY(-28deg) translateZ(-100px); opacity: 0.62; filter: brightness(0.78) saturate(0.82); backdrop-filter: blur(24px) saturate(150%) brightness(0.95); -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(0.95); z-index: 20; } /* Offset -1 — lateral izquierdo cerca · blur 24 */ .pilar-card.is-side-prev { transform: translate(-50%, -50%) translateX(-58%) scale(0.66) rotateY(28deg) translateZ(-100px); opacity: 0.62; filter: brightness(0.78) saturate(0.82); backdrop-filter: blur(24px) saturate(150%) brightness(0.95); -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(0.95); z-index: 20; } /* Offset +2 — lejana derecha · rotateY 38° (designer fix: 50° era demasiado agresivo) · blur 12 (atmósfera lejana) */ .pilar-card.is-side-far { transform: translate(-50%, -50%) translateX(96%) scale(0.44) rotateY(-38deg) translateZ(-260px); opacity: 0.28; filter: brightness(0.55) saturate(0.5) blur(1.5px); backdrop-filter: blur(12px) saturate(120%) brightness(0.85); -webkit-backdrop-filter: blur(12px) saturate(120%) brightness(0.85); z-index: 10; } /* Offset -2 — lejana izquierda · rotateY 38° · blur 12 */ .pilar-card.is-side-far-prev { transform: translate(-50%, -50%) translateX(-96%) scale(0.44) rotateY(38deg) translateZ(-260px); opacity: 0.28; filter: brightness(0.55) saturate(0.5) blur(1.5px); backdrop-filter: blur(12px) saturate(120%) brightness(0.85); -webkit-backdrop-filter: blur(12px) saturate(120%) brightness(0.85); z-index: 10; } /* Halo radial detrás eliminado — designer Sprint 4: 3 capas de glow (border + box-shadow + halo radial) competían con la columna PNG. Box-shadow + glow del border ya hacen el trabajo. */ .pilar-card:hover { cursor: pointer; } /* Card activa estática al hover — solo intensifica el brillo (no transform) */ .pilar-card.is-active:hover { border-color: rgba(217, 119, 87, 0.75); box-shadow: 0 0 0 1.5px rgba(217, 119, 87, 0.6), 0 0 110px -10px rgba(217, 119, 87, 0.55), 0 50px 120px -25px rgba(0, 0, 0, 0.78), 0 18px 50px -10px rgba(217, 119, 87, 0.32); } /* Tick marks esquinas REMOVIDOS — Sprint 5: ::before ahora es reflejo diagonal del liquid glass A1 */ /* Cinta técnica arriba — cota arquitectónica (eje horizontal) · transparente sobre vidrio A1 */ .pilar-card-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; padding-bottom: 14px; border-bottom: 1px dashed rgba(243, 236, 216, 0.18); flex: 0 0 auto; position: relative; z-index: 2; /* Sin background opaco — sino sabotea el liquid glass A1 */ } .pilar-card-meta .num { color: var(--ocre-warm); } .pilar-card-meta .id { color: var(--ink-on-dark-tech); } /* ─── Body grid 3-col Variante B · nombre vertical | columna central | stats derecha ─── */ .pilar-card-body { display: grid; grid-template-columns: clamp(48px, 5vw, 68px) 1fr clamp(190px, 22vw, 250px); gap: clamp(14px, 1.6vw, 24px); align-items: stretch; flex: 1 1 auto; min-height: 0; overflow: hidden; /* clip nombre si excede en breakpoints raros */ } /* Nombre del pilar VERTICAL — cota arquitectónica eje vertical, refuerza feel "plano con cuotas en distintos ejes" */ .pilar-card-name-vertical { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(40px, 4.2vw, 56px); line-height: 0.92; letter-spacing: -0.024em; color: var(--ink); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; align-self: center; justify-self: start; font-variation-settings: 'opsz' 48; margin: 0; padding: 0; max-height: 100%; z-index: 0; /* El texto rotado actúa como un "sello/cota lateral" del card — vive detrás de la cinta meta */ } /* Columna — hero visual central · color uniforme ocre-deep */ .pilar-column { display: flex; justify-content: center; align-items: center; color: var(--ocre-deep); align-self: stretch; min-height: 0; position: relative; } /* Img PNG hiperrealista (Nano Banana Pro 4K — Layer 4.4 final) PNGs vienen en two-tone nativo: outline negro + ocre Alarife flat shading + alpha real. FILTER ELIMINADO: ya no necesitamos sepia/hue-rotate porque la paleta YA es brand. */ .pilar-column .column-asset { display: block; height: 100%; width: auto; max-height: clamp(420px, 64vh, 620px); max-width: 200px; object-fit: contain; transform: translateY(-8px); opacity: 0.92; /* Desacoplado del card: arranca a los 0.25s, cuando la card ya casi llegó (se "asienta"). */ transition: transform 0.5s var(--ease-smooth) 0.25s, opacity 0.5s var(--ease-out) 0.25s; } /* Active state: column "se asienta" — refuerza frame "construir cimientos" */ .pilar-card.is-active .pilar-column .column-asset { transform: translateY(0); opacity: 1; } /* Columna estática al hover — sin micro-movimiento (Layer 4.2 fix) */ /* Stack stats derecha (vertical) — anclado top/bottom para composición sólida */ .pilar-stats-stack { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; align-self: stretch; padding: 6px 0 4px; } /* Stat primary GRANDE — el golpe */ .pilar-card-stat { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(54px, 5.6vw, 72px); line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); font-variation-settings: 'opsz' 72; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; } /* Prefix < o $ — más chico, alineado al stat principal con nudge óptico para baselines distintas */ .pilar-card-stat .lt { font-size: 0.5em; font-weight: 300; color: var(--ocre); opacity: 0.85; font-style: italic; margin-right: -2px; position: relative; top: -0.05em; } .pilar-card-stat .unit { /* FIX designer: 0.32em era invisible. Subir a 0.42em + nudge óptico para legibilidad real */ font-size: 0.42em; color: var(--ocre); font-style: italic; font-weight: 400; letter-spacing: 0; margin-left: 4px; white-space: nowrap; position: relative; top: -0.08em; } /* Outcome humano — traduce dolor (línea de cierre real) */ .pilar-card-outcome { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.42; color: var(--ink); font-style: italic; font-weight: 400; font-family: var(--serif); margin: 4px 0 14px; font-variation-settings: 'opsz' 18; letter-spacing: -0.01em; } /* ─── Layer 4 NEW: ficha técnica de DOLOR EVITADO ─────────────────────── */ /* Lista de dolores que el pilar evita — narrativa de prevention */ .pilar-card-pains { list-style: none; margin: 0 0 12px; padding: 12px 0 12px; border-top: 1px dashed var(--ink-faint); border-bottom: 1px dashed var(--ink-faint); display: flex; flex-direction: column; gap: 7px; } /* Pains list — antes 12.5px sans suelto en medio de cinta mono arriba/abajo se sentía huérfano. Subido a 13.5px + tracking más cerrado + line-height 1.5 para que respire como párrafo, no como bullet. */ .pilar-card-pains li { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-on-dark); padding-left: 16px; position: relative; letter-spacing: -0.008em; } .pilar-card-pains li::before { content: '·'; position: absolute; left: 0; top: 0; color: var(--ocre); font-weight: 700; font-size: 1em; line-height: 1.45; } /* Eyebrow primer item — etiqueta de la sección */ .pilar-card-pains li.pains-eyebrow { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ocre); padding-left: 0; margin-bottom: 4px; } .pilar-card-pains li.pains-eyebrow::before { content: none; } /* Spec mini-grid — setup + stack en formato ficha técnica de plano */ .pilar-card-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 4px; } .spec-cell { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); } .spec-key { font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-tech); } .spec-val { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); } /* CTA pie del card — full width abajo */ .pilar-card-cta { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ocre); display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px dashed var(--ink-faint); flex: 0 0 auto; transition: color 0.3s var(--ease-out); } .pilar-card-cta .arrow { transition: transform 0.3s var(--ease-out); } .pilar-card.is-active:hover .pilar-card-cta .arrow { transform: translateX(5px); } /* ─── Cards LATERALES — vista sintética en perspectiva 3D ─────────────── En cards no-activas (laterales/lejanas) ocultamos contenido secundario: solo cinta + nombre vertical + columna visible. El texto se REVELA cuando llega al centro. */ .pilar-card:not(.is-active) .pilar-stats-stack, .pilar-card:not(.is-active) .pilar-card-cta { visibility: hidden; pointer-events: none; } .pilar-card.is-side .pilar-card-name-vertical, .pilar-card.is-side-prev .pilar-card-name-vertical { opacity: 0.45; } .pilar-card.is-side-far .pilar-card-name-vertical, .pilar-card.is-side-far-prev .pilar-card-name-vertical { opacity: 0.18; } /* ─── OVERRIDE COLORES CONTENIDO sobre LIQUID GLASS A1 (Sprint 5) ─── Todo el contenido sobre vidrio dark debe ser paper/cream con opacities específicas. Necesitamos z-index 2 en contenido para quedar por encima del ::before reflejo. */ .pilar-card-meta, .pilar-card-body, .pilar-card-cta { position: relative; z-index: 2; } /* Meta sin override: la base ya pinta correctamente (border + num + id) sobre vidrio dark. Lo único que NO está en la base es el color del texto general (hereda de .pilar-card → --paper). Lo bajamos a --ink-on-dark-soft acá para que la cinta lea menos dominante que la stat/outcome. */ .pilar-card .pilar-card-meta { color: var(--ink-on-dark-soft); } .pilar-card .pilar-card-name-vertical { color: var(--paper); opacity: 0.92; } .pilar-card .pilar-card-stat { color: var(--paper); } .pilar-card .pilar-card-stat .lt { color: var(--ocre-warm); } .pilar-card .pilar-card-stat .unit { color: var(--ocre-warm); } .pilar-card .pilar-card-outcome { color: var(--ink-on-dark-soft); } .pilar-card .pilar-card-pains { color: var(--ink-on-dark-soft); border-color: rgba(243, 236, 216, 0.18); } .pilar-card .pilar-card-pains li.pains-eyebrow { color: var(--ocre-warm); } .pilar-card .pilar-card-pains li::before { color: var(--ocre-warm); } /* WCAG AA: spec-key en 9px necesita mínimo ~4.5:1. ink-on-dark-tech (0.28) da ~2.1:1. ink-on-dark-mid (0.42) da ~3.2:1 — mejor aunque técnicamente sub-AA en 9px. Texto decorativo/redundante (el valor está en spec-val) → aceptable con argumentación. */ .pilar-card .spec-key { color: var(--ink-on-dark-soft); } .pilar-card .spec-val { color: var(--paper); } .pilar-card .pilar-card-cta { color: var(--ocre-warm); border-top-color: rgba(243, 236, 216, 0.18); } /* Columna PNG sobre dark — drop-shadow OCRE (designer fix: sombra negra rompe la armonía cromática sobre el dark del pilar; el ocre integrador anuda la columna al sistema visual). */ .pilar-card .pilar-column img, .pilar-card .pilar-column .column-asset { filter: brightness(1.15) contrast(1.05) saturate(1.1) drop-shadow(0 6px 18px rgba(217, 119, 87, 0.28)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); } /* Hint inferior — dots */ .pilares-hint { display: flex; justify-content: center; margin-top: 8px; position: relative; z-index: 3; } .pilares-hint-dots { display: flex; gap: 14px; align-items: center; } .pilares-hint-dots em { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(243, 236, 216, 0.42); transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .pilares-hint-dots em.is-on { background: var(--ocre-warm); transform: scale(1.25); } /* Mobile (max-width: 900px) — Character Selector colapsa a STACK VERTICAL Razón: modelo character selector requiere viewport ancho para que las laterales asomen sin sacrificar legibilidad de la activa. En mobile mejor stack vertical limpio. */ @media (max-width: 900px) { .pilares-carousel.is-cylinder { perspective: none; } .pilares-track { position: static; height: auto; display: flex; flex-direction: column; gap: 24px; cursor: default; touch-action: auto; } /* Todas las cards en stack — sin position absolute, sin transforms */ .pilar-card, .pilar-card.is-side, .pilar-card.is-side-prev, .pilar-card.is-side-far, .pilar-card.is-side-far-prev, .pilar-card.is-active { position: static; transform: none; opacity: 1; filter: none; width: 100%; max-width: 480px; min-height: auto; margin: 0 auto; padding: 24px 22px 22px; gap: 14px; } /* Mobile: blur adaptativo bajo (16px max) — backdrop-filter blur 40+ rompe Lighthouse mobile. A esta escala el ojo no nota la diferencia entre 40 y 16. */ .pilar-card, .pilar-card.is-active, .pilar-card.is-side, .pilar-card.is-side-prev, .pilar-card.is-side-far, .pilar-card.is-side-far-prev { backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); background: rgba(40, 30, 22, 0.45); } /* Activa mantiene borde luminoso para destacar primera card visible al scroll */ .pilar-card.is-active { border-color: rgba(217, 119, 87, 0.35); background: rgba(40, 30, 22, 0.55); box-shadow: 0 0 0 1px rgba(217, 119, 87, 0.2), 0 0 30px -8px rgba(217, 119, 87, 0.18), 0 20px 50px -15px rgba(0, 0, 0, 0.5); } /* Body mobile: layout HORIZONTAL apaisado — nombre vertical · pilar grande · datos al lado. Trae el grid de desktop a mobile con proporciones chicas (decisión Arthur 2026-05-29): la card deja de ser alta y se vuelve apaisada, el pilar es protagonista. */ .pilar-card-body { display: grid; grid-template-columns: 20px 1fr clamp(138px, 41vw, 166px); gap: 10px; align-items: center; text-align: left; overflow: visible; } /* Nombre VERTICAL (lectura abajo-arriba, mismo formato que desktop) — font chico para no cortarse */ .pilar-card-name-vertical { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(12px, 3.4vw, 15px); line-height: 1; align-self: center; justify-self: start; white-space: nowrap; max-height: none; margin: 0; text-align: left; } /* Pilar GRANDE — protagonista del card */ .pilar-column { height: auto; align-self: stretch; } .pilar-column .column-asset { max-height: clamp(150px, 40vw, 190px); max-width: 110px; transform: none; } /* Datos compactos al lado del pilar */ .pilar-stats-stack { align-self: center; text-align: left; align-items: stretch; gap: 8px; } .pilar-card-stat { font-size: 34px; } .pilar-card-outcome { font-size: 12.5px; line-height: 1.34; } .pilar-card-pains li { font-size: 11px; line-height: 1.4; padding-left: 13px; } .pilar-card-pains li.pains-eyebrow { font-size: 8.5px; letter-spacing: 0.12em; } .pilar-card-spec { gap: 8px; } .pilar-card .spec-key { font-size: 8px; } .pilar-card .spec-val { font-size: 11px; } /* Mostrar stats en TODAS las cards en mobile (no ocultar laterales) */ .pilar-card:not(.is-active) .pilar-stats-stack, .pilar-card:not(.is-active) .pilar-card-cta { visibility: visible; pointer-events: auto; } /* Dots ocultos en mobile (no aplica modelo character selector) */ .pilares-hint { display: none; } } /* prefers-reduced-motion: stack vertical, sin transforms, sin perspective */ @media (prefers-reduced-motion: reduce) { .pilares-carousel.is-cylinder { perspective: none; } .pilares-track { position: static; height: auto; display: flex; flex-direction: column; gap: 24px; cursor: default; } .pilar-card, .pilar-card.is-side, .pilar-card.is-side-prev, .pilar-card.is-side-far, .pilar-card.is-side-far-prev, .pilar-card.is-active { position: static; transform: none; opacity: 1; filter: none; transition: none; width: 100%; max-width: 480px; margin: 0 auto; /* Sin backdrop-filter en reduced-motion (perf + WCAG: blur puede causar náuseas) */ backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(40, 30, 22, 0.65); } .pilar-card:not(.is-active) .pilar-stats-stack, .pilar-card:not(.is-active) .pilar-card-cta { visibility: visible; pointer-events: auto; } } /* ─── LÁMINA 03 · DATOS TÉCNICOS (BENCHMARKS) ─────────────────────────── */ .benchmarks-intro { margin-bottom: 72px; } .benchmarks { display: flex; flex-direction: column; } .benchmark { display: grid; grid-template-columns: minmax(200px, 0.8fr) 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: center; padding: 56px 0; border-top: 1px solid var(--ink-faint); position: relative; } .benchmark:last-child { border-bottom: 1px solid var(--ink-faint); } .benchmark-stat { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(80px, 14vw, 168px); line-height: 0.85; letter-spacing: -0.05em; color: var(--ink); font-variation-settings: 'opsz' 72; position: relative; } .benchmark-stat .unit { font-size: 0.45em; font-style: italic; color: var(--ocre); font-weight: 300; margin-left: 4px; letter-spacing: -0.02em; font-variation-settings: 'opsz' 36; } /* Cotas en el stat */ .benchmark-stat::before { content: attr(data-cota); position: absolute; top: -28px; left: 0; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; color: var(--ocre); text-transform: uppercase; white-space: nowrap; } .benchmark-content h3 { font-family: var(--sans); font-style: normal; font-weight: 400; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 18px; max-width: 36ch; font-variation-settings: normal; } .benchmark-content h3 em { font-family: var(--serif); font-style: italic; color: var(--ocre); font-weight: 400; font-variation-settings: 'opsz' 36; } .benchmark-source { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-tech); display: flex; align-items: center; gap: 10px; } .benchmark-source::before { content: '↳ '; color: var(--ocre); } @media (max-width: 800px) { .benchmark { grid-template-columns: 1fr; gap: 24px; padding: 44px 0; } .benchmark-stat { font-size: clamp(72px, 18vw, 120px); } } /* ─── LÁMINA 04 · FASES DE OBRA ───────────────────────────────────────── */ /* Sprint 11: #proceso solapado 450px sobre #pilares — fondo transparente para ver ambas secciones simultáneamente. ::before maneja el vidrio esmerilado + gradiente paper. ::after maneja el grid. */ #proceso { z-index: 2; margin-top: -450px; padding-top: clamp(60px, 8vh, 100px); background-color: transparent; background-image: none; background-size: unset; } /* Blend zone: backdrop-filter blurrrea dark de #pilares (visible through transparent #proceso) */ /* Gradiente transparent → paper en 450px: arriba blur dark, medio mezcla, abajo paper limpio */ #proceso::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; backdrop-filter: blur(40px) saturate(110%) brightness(0.9); -webkit-backdrop-filter: blur(40px) saturate(110%) brightness(0.9); background: linear-gradient(to bottom, transparent 0px, rgba(243, 236, 216, 0.20) 100px, rgba(243, 236, 216, 0.55) 250px, rgba(243, 236, 216, 0.85) 380px, var(--paper) 450px, var(--paper) 100% ); } /* Grid ink encima del blend — visible en zona paper y sutilmente en blend */ #proceso::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(to right, rgba(26, 21, 18, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(26, 21, 18, 0.07) 1px, transparent 1px), linear-gradient(to right, rgba(26, 21, 18, 0.038) 1px, transparent 1px), linear-gradient(to bottom, rgba(26, 21, 18, 0.038) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; } .process-intro { /* FIX designer: 110px era excesivo después del section-padding 200px ya aplicado. Reducir a 56px. */ margin-bottom: 56px; } /* Skin in the game emphasis — destaque visual para "no cobro mes 1" (FIX commercial) */ .process-emphasis { font-weight: 500; color: var(--ink); background: linear-gradient(180deg, transparent 78%, rgba(217, 119, 87, 0.32) 78%, rgba(217, 119, 87, 0.32) 96%, transparent 96%); padding: 0 2px; } .process-intro h2 { font-size: clamp(44px, 6.2vw, 78px); max-width: 18ch; text-shadow: 0 0 46px rgba(243, 236, 216, 0.70), 0 0 115px rgba(243, 236, 216, 0.45), 0 0 211px rgba(243, 236, 216, 0.22), 0 2px 4px rgba(15, 12, 10, 0.35); } .process-intro .lead { font-size: clamp(19px, 1.7vw, 24px); max-width: 56ch; color: var(--ink); } .process-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3.4vw, 56px); padding-top: 8px; } .process-timeline::before { content: ''; position: absolute; top: 26px; left: 26px; right: 26px; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--ocre) 8%, var(--ocre) 92%, transparent 100%); opacity: 0.45; z-index: 0; } .process-step { position: relative; z-index: 1; } .process-marker { width: 52px; height: 52px; border: 1.5px solid var(--ocre); background: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ocre); margin-bottom: 32px; position: relative; transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } /* Tick marks on marker corners */ .process-marker::before, .process-marker::after { content: ''; position: absolute; width: 5px; height: 5px; border: 1px solid var(--ocre); background: var(--paper); } .process-marker::before { top: -3px; left: -3px; } .process-marker::after { bottom: -3px; right: -3px; } .process-step:hover .process-marker { background: var(--ocre); color: var(--paper); } .process-step h4 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.18; letter-spacing: -0.018em; color: var(--ink); margin-bottom: 12px; font-variation-settings: 'opsz' 36; } .process-step p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 16px; max-width: 26ch; } .process-cota { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ocre); padding-top: 10px; border-top: 1px dashed var(--ink-faint); } .process-cota::before { content: '⌀'; font-size: 12px; } @media (max-width: 800px) { .process-timeline { grid-template-columns: 1fr; gap: 32px; } .process-timeline::before { display: none; } .process-step { display: grid; grid-template-columns: 44px 1fr; gap: 24px; align-items: start; } .process-marker { margin-bottom: 0; } } /* ─── LÁMINA 05 · INICIAR PROYECTO ────────────────────────────────────── */ .contact-intro { margin-bottom: 44px; } .contact h2 { font-size: clamp(44px, 6.5vw, 88px); margin-bottom: 32px; max-width: 18ch; } .contact-lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; max-width: 50ch; margin-bottom: 24px; color: var(--ink-soft); } /* Puente humano antes del CTA — el prospect llega a L05 después de 4 láminas técnicas y necesita confirmación de "hay una persona real detrás". Cierre CEO Sprint 5 review. */ .contact-signature { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; max-width: 56ch; margin-bottom: 32px; color: var(--ink); font-variation-settings: 'opsz' 18; padding-left: 14px; border-left: 2px solid var(--ocre-warm); } .contact-signature strong { font-style: normal; font-weight: 500; color: var(--ocre); } .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ink-faint); border: 1px solid var(--ink-faint); margin-bottom: 64px; max-width: 760px; } .contact-card { display: block; background: var(--paper); padding: 32px 36px; position: relative; transition: background 0.3s var(--ease-out); } .contact-card:hover { background: var(--paper-soft); } .contact-card::before, .contact-card::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1px solid var(--ocre); opacity: 0; transition: opacity 0.3s var(--ease-out); } .contact-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .contact-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } .contact-card:hover::before, .contact-card:hover::after { opacity: 1; } .contact-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-tech); margin-bottom: 24px; } .contact-meta .arrow { color: var(--ocre); font-weight: 500; transition: transform 0.3s var(--ease-out); } .contact-card:hover .contact-meta .arrow { transform: translateX(4px); } .contact-value { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.015em; color: var(--ink); font-variation-settings: 'opsz' 36; } /* Sub-línea contact card — refuerza claim Speed to Lead con conducta propia (commercial Sprint 5) */ .contact-sub { margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ocre); opacity: 0.78; } @media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } } /* ─── CAJETÍN TÉCNICO (footer) ────────────────────────────────────────── */ .cajetin { position: relative; z-index: 1; margin: 0 var(--margin-side) 32px; padding: 24px 32px; border: 1px solid var(--ink); display: grid; grid-template-columns: auto 1fr 1fr 1fr 1fr; gap: 0; background: var(--paper); } .cajetin-cell { padding: 4px 16px; border-right: 1px solid var(--ink-faint); display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cajetin-cell:last-child { border-right: none; } .cajetin-cell.icon { display: flex; align-items: center; justify-content: center; padding: 4px 20px; } .cajetin-cell.icon img { height: 32px; width: auto; opacity: 0.9; } .cajetin-label { font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-tech); } .cajetin-value { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cajetin-value strong { color: var(--ocre); font-weight: 500; } @media (max-width: 800px) { .cajetin { grid-template-columns: auto 1fr 1fr; margin: 0 20px 24px; } .cajetin-cell:nth-child(4), .cajetin-cell:nth-child(5) { grid-column: span 1; } .cajetin-cell:nth-child(3) { border-right: none; } .cajetin-cell:nth-child(4) { border-top: 1px solid var(--ink-faint); grid-column: span 1; } .cajetin-cell:nth-child(5) { border-top: 1px solid var(--ink-faint); border-right: none; } } /* ─── ANIMACIONES V3 — microinteracciones premium ────────────────────── */ /* 1 · CTA hero subrayado vivo */ .hero .link-ocre { border-bottom: none; position: relative; padding-bottom: 6px; } .hero .link-ocre::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ocre-warm); transform-origin: left center; transform: scaleX(1); transition: transform 0.55s var(--ease-out); } .hero .link-ocre:hover::after { transform-origin: right center; transform: scaleX(0); animation: stroke-redraw 0.55s var(--ease-out) 0.15s forwards; } @keyframes stroke-redraw { 0% { transform-origin: left center; transform: scaleX(0); } 100% { transform-origin: left center; transform: scaleX(1); } } /* 2 · (Eliminado por ceo segunda pasada — .pilar fue reemplazado por .pilar-card del carrusel. La animación stagger ya no aplica. Si en Stage 2 se reactiva grid de pilares, restaurar.) */ /* 3 · (Eliminado por ceo segunda pasada — .pilar-cota tampoco existe en el carrusel actual. Las cotas dimensionales viven en .pilar-card-cta ahora.) */ /* 4 · Benchmark stat reveal — cota cae primero, número emerge */ .benchmark { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .benchmark.is-in { opacity: 1; transform: translateY(0); } .benchmark-stat::before { opacity: 0; transform: translateY(-8px); transition: opacity 0.5s var(--ease-out) 0.1s, transform 0.5s var(--ease-out) 0.1s; } .benchmark.is-in .benchmark-stat::before { opacity: 1; transform: translateY(0); } .benchmark-stat { display: inline-block; } .benchmark .benchmark-stat .unit { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out) 0.5s, transform 0.5s var(--ease-out) 0.5s; } .benchmark.is-in .benchmark-stat .unit { opacity: 1; transform: translateY(0); } /* 5 · Process marker pulso ocre único al hover */ .process-step:hover .process-marker { box-shadow: 0 0 0 0 rgba(139, 62, 29, 0.45); animation: pulse-once 0.9s var(--ease-out) forwards; } @keyframes pulse-once { 0% { box-shadow: 0 0 0 0 rgba(139, 62, 29, 0.45); } 100% { box-shadow: 0 0 0 14px rgba(139, 62, 29, 0); } } /* SCROLL-TRIGGER fade+lift Linear style — Sprint 5 Aplicado a .pilares-intro, .pilares-carousel, .lamina-header (de pilares), .contact-intro. NO se aplica a las cards del carrusel individualmente (sus transforms 3D rompen con un translate adicional). */ #pilares .lamina-header, .pilares-intro, .contact-intro, .benchmarks-intro { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } /* Carousel: revela SOLO con opacity (el translateY rompía las transiciones 3D internas = "tumbling") */ .pilares-carousel { opacity: 0; transition: opacity 0.7s var(--ease-out) 0.22s; } .pilares-carousel.is-in { opacity: 1; } /* Stagger Linear-style — los 3 elementos del top de pilares entran en cascada (header → intro → carrusel) */ #pilares .lamina-header { transition-delay: 0s; } .pilares-intro { transition-delay: 0.10s; } #pilares .lamina-header.is-in, .pilares-intro.is-in, .contact-intro.is-in, .benchmarks-intro.is-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { #pilares .lamina-header, .pilares-intro, .pilares-carousel, .contact-intro, .benchmarks-intro { opacity: 1; transform: none; transition: none; } } /* MAGNETIC CTA — el botón "tira" suavemente del cursor (max ~6px desplazamiento). Aplicado vía JS data-attr para que el reverso sea suave también. */ .hero-cta-row .link-ocre, .contact-card { transition: transform 0.4s var(--ease-out), background 0.3s var(--ease-out), box-shadow 0.45s var(--ease-out); } /* 6 · Contact card respira + arrow desliza al hover */ .contact-card { transition: background 0.3s var(--ease-out), transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); will-change: transform; } .contact-card:hover { background: var(--paper-soft); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26, 21, 18, 0.06), 0 2px 6px rgba(139, 62, 29, 0.08); } .contact-card:hover .contact-meta .arrow { transform: translateX(6px); } /* prefers-reduced-motion respect — todas las animaciones V3 */ @media (prefers-reduced-motion: reduce) { .hero .link-ocre::after { transition: none; animation: none; transform: scaleX(1); } .pilar { opacity: 1; transform: none; transition: background 0.3s ease; } .pilar-cota .arrow-l, .pilar-cota .arrow-r { transform: scaleX(1); opacity: 1; transition: none; } .benchmark, .benchmark-stat::before, .benchmark .benchmark-stat .unit { opacity: 1; transform: none; transition: none; } .process-step:hover .process-marker { animation: none; box-shadow: none; } .contact-card, .contact-card:hover { transform: none; box-shadow: none; transition: background 0.2s; } } /* ─── SKETCHES MARGINALES (workflows wabi-sabi, V2 handoff) ──────────── */ /* 1 solo filter SVG global reusado por todos los sketches (V4 fix performance) */ .sketch-defs { position: absolute; width: 0; height: 0; pointer-events: none; } .sketch-wrap { position: absolute; pointer-events: none; opacity: 0.16; mix-blend-mode: multiply; filter: url(#sketch-rough); z-index: 0; } .sketch-wrap svg { display: block; width: 100%; height: auto; } .sketch-wrap text { fill: #1A1612; pointer-events: none; } /* Variantes de rotación leve por sketch (wabi-sabi) */ .sketch-wrap[data-rot="-3"] { transform: rotate(-3deg); } .sketch-wrap[data-rot="-2"] { transform: rotate(-2deg); } .sketch-wrap[data-rot="-1"] { transform: rotate(-1deg); } .sketch-wrap[data-rot="1"] { transform: rotate(1deg); } .sketch-wrap[data-rot="2"] { transform: rotate(2deg); } /* Ocultar en mobile — no hay margen para ellos + perf */ @media (max-width: 1100px) { .sketch-wrap { display: none; } } /* prefers-reduced-motion friendly: nada que animar acá */ /* ─── PAGE-LOAD ANIMATIONS ────────────────────────────────────────────── */ @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes mark-rise { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @keyframes draw-rail { from { transform: translateX(-50%) scaleY(0); transform-origin: top; } to { transform: translateX(-50%) scaleY(1); transform-origin: top; } } .hero-eyebrow { animation: rise-in 0.6s var(--ease-out) 0.15s both; } .hero h1 { animation: rise-in 0.8s var(--ease-out) 0.25s both; } .hero-lead { animation: rise-in 0.6s var(--ease-out) 0.45s both; } .hero-anchor { animation: rise-in 0.6s var(--ease-out) 0.6s both; } .hero-cta-row { animation: rise-in 0.6s var(--ease-out) 0.75s both; } .hero-mark-cell { animation: mark-rise 0.9s var(--ease-out) 0.3s both; } .nav-strip { animation: rise-in 0.5s var(--ease-out) 0s both; } .rail::before { animation: draw-rail 1.4s var(--ease-out) 0.6s both; } /* ─── PRINT (just in case) ────────────────────────────────────────────── */ @media print { body::before, body::after, .rail, .nav-strip { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ HERO HOOK V12 (Bauhaus declarativo) — port de V17-A Sprint 7.3 Big Shoulders Display 900 condensed · blueprint blue + ocre warm Aprobado Arthur 2026-05-11 noche (SS2/SS3 referencias) ═══════════════════════════════════════════════════════════════════════════ */ .hero h1.hook-v12 { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.86; font-size: clamp(64px, 11vw, 184px); color: var(--paper); position: relative; margin-bottom: clamp(32px, 4vh, 56px); display: flex; flex-direction: column; } .hook-v12 .hook-line-1 { color: var(--paper); display: block; } .hook-v12 .hook-line-2 { display: block; margin-top: -0.08em; } .hook-v12 .blueprint { color: #6B95C7; } .hook-v12 .tecnico { color: var(--ocre-warm); } .hook-v12 .hook-sub-italic { position: absolute; bottom: -28px; right: 4%; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(20px, 1.8vw, 28px); color: rgba(243, 236, 216, 0.32); text-transform: none; letter-spacing: -0.01em; white-space: nowrap; z-index: 0; } /* ═══════════════════════════════════════════════════════════════════════════ FOOTER V17 · port V17-A líneas 3680-3798 (Sprint 8) Reemplaza el .cajetin técnico mudo previo. Logo + byline Arthur + links + rev. ═══════════════════════════════════════════════════════════════════════════ */ .footer-v17 { /* Dark glass — match con nav-strip + vidrio del intro Sprint 8 */ background: rgba(15, 12, 10, 0.78); backdrop-filter: blur(18px) saturate(125%) brightness(0.92); -webkit-backdrop-filter: blur(18px) saturate(125%) brightness(0.92); color: var(--ink-on-dark-soft); padding: 56px clamp(24px, 5vw, 80px) 36px; border-top: 1px solid rgba(243, 236, 216, 0.08); } .footer-v17-inner { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(36px, 6vw, 96px); align-items: start; max-width: 1400px; margin: 0 auto; padding-bottom: 32px; border-bottom: 1px solid var(--ink-faint); } .footer-v17-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .footer-v17-logo { width: 56px; height: 56px; opacity: 1; display: block; border-radius: 12px; } .footer-v17-mark-cap { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-on-dark-tech); max-width: 12ch; line-height: 1.4; } .footer-v17-mark-cap strong { color: var(--ocre-warm); font-weight: 500; } .footer-v17-byline { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-on-dark-soft); } .byline-eyebrow { font-size: 10px; color: var(--ocre-warm); font-weight: 500; letter-spacing: 0.28em; margin-bottom: 6px; } .byline-name { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.02em; line-height: 0.92; color: var(--paper); text-transform: uppercase; margin: 4px 0 8px; } .byline-meta, .byline-place { font-size: 10.5px; color: var(--ink-on-dark-tech); text-transform: none; letter-spacing: 0.1em; font-family: var(--serif); font-style: italic; } .footer-v17-links { display: flex; flex-direction: column; gap: 6px; text-align: right; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } .footer-v17-links a { color: var(--ink-on-dark-soft); padding: 4px 0; border-bottom: 1px dashed transparent; transition: all 0.25s var(--ease-out); text-decoration: none; } .footer-v17-links a:hover { color: var(--ocre-warm); border-bottom-color: var(--ocre-warm); } .footer-v17-rev { margin-top: 24px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(243, 236, 216, 0.22); text-align: center; } @media (max-width: 800px) { .footer-v17-inner { grid-template-columns: 1fr; gap: 32px; } .footer-v17-links { flex-direction: row; text-align: left; flex-wrap: wrap; gap: 20px; } } /* ═══════════════════════════════════════════════════════════════════════════ STICKY MOBILE CTA WHATSAPP · port V17-A líneas 3318-3364 (Sprint 8) Resuelve audit check 28 — visible solo en mobile (max-width 760px) ═══════════════════════════════════════════════════════════════════════════ */ .mobile-cta-sticky { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; align-items: center; gap: 8px; padding: 14px 18px; background: var(--ocre); color: var(--paper); text-decoration: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; border-radius: 4px; box-shadow: 0 12px 28px -8px rgba(139, 62, 29, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.3); border: 1px solid rgba(243, 236, 216, 0.18); transition: transform 0.25s var(--ease-out); } .mobile-cta-sticky:hover, .mobile-cta-sticky:focus { transform: translateY(-2px); } .mobile-cta-sticky .mcs-label { color: rgba(243, 236, 216, 0.78); } .mobile-cta-sticky .mcs-num { font-family: 'Big Shoulders Display', sans-serif; font-size: 16px; font-weight: 900; letter-spacing: 0; color: var(--paper); flex: 1; text-align: center; } .mobile-cta-sticky .mcs-arrow { font-family: var(--serif); font-style: italic; font-size: 18px; } @media (max-width: 760px) { .mobile-cta-sticky { display: flex; } body { padding-bottom: 80px; } } /* ═══════════════════════════════════════════════════════════════════════════ IDE VS CODE WINDOW · port de V17-A líneas 2864-3165 Reemplaza .hero-mark-cell en hero — Sprint 7.3 (decisión Arthur 2026-05-11) ═══════════════════════════════════════════════════════════════════════════ */ .ide-window { width: 100%; max-width: 512px; margin: 0 auto; background: #1E1E1E; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 24px 64px -16px rgba(0, 0, 0, 0.7), 0 6px 16px -6px rgba(217, 119, 87, 0.12); display: flex; flex-direction: column; align-self: center; font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 12px; line-height: 1.55; } /* Titlebar (Mac chrome) */ .ide-titlebar { background: linear-gradient(180deg, #3C3C3C 0%, #2D2D2D 100%); padding: 8px 14px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #1A1A1A; } .ide-traffic { display: flex; gap: 7px; } .ide-traffic span { display: block; width: 12px; height: 12px; border-radius: 50%; border: 0.5px solid rgba(0,0,0,0.2); } .ide-traffic .t-red { background: #ff5f57; } .ide-traffic .t-yel { background: #febc2e; } .ide-traffic .t-grn { background: #28c840; } .ide-title { flex: 1; text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.04em; } .ide-titlebar-actions { font-size: 14px; color: rgba(255, 255, 255, 0.4); line-height: 1; } /* Tabs bar */ .ide-tabs { background: #252526; display: flex; border-bottom: 1px solid #1A1A1A; overflow-x: auto; scrollbar-width: none; } .ide-tabs::-webkit-scrollbar { display: none; } .ide-tab { padding: 8px 14px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255, 255, 255, 0.55); border-right: 1px solid #1A1A1A; background: #2D2D2D; cursor: pointer; white-space: nowrap; position: relative; } .ide-tab.is-active { background: #1E1E1E; color: #FFFFFF; } .ide-tab.is-active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ocre-warm); } .ide-tab-icon { color: #569CD6; font-size: 9px; } .ide-tab-close { font-size: 14px; color: rgba(255, 255, 255, 0.4); line-height: 1; } /* Body: sidebar + editor */ .ide-body { display: grid; grid-template-columns: 160px 1fr; height: 260px; background: #1E1E1E; overflow: hidden; } /* Sidebar (file tree) */ .ide-sidebar { background: #252526; border-right: 1px solid #1A1A1A; padding: 10px 0 14px; overflow-y: auto; font-size: 12px; } .ide-sidebar-header { padding: 0 14px 8px; font-size: 10px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.55); font-weight: 600; text-transform: uppercase; } .ide-tree { display: flex; flex-direction: column; } .tree-row { display: flex; align-items: center; gap: 6px; padding: 3px 14px 3px calc(14px + var(--depth, 0) * 14px); color: rgba(255, 255, 255, 0.78); font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tree-row[data-depth="1"] { --depth: 1; } .tree-row[data-depth="2"] { --depth: 2; } .tree-row:hover { background: rgba(255, 255, 255, 0.04); } .tree-row.is-active { background: rgba(217, 119, 87, 0.14); color: #FFFFFF; } .tree-chev { font-size: 9px; color: rgba(255, 255, 255, 0.5); width: 10px; } .tree-icon { font-size: 11px; width: 12px; text-align: center; } .tree-icon.folder { color: #DCB67A; } .tree-icon.file.py { color: #4B8BBE; } .tree-icon.file.md { color: #519ABA; } .tree-row.is-folder { color: rgba(255, 255, 255, 0.88); } /* Editor (gutter + code) */ .ide-editor { display: grid; grid-template-columns: 36px 1fr; background: #1E1E1E; overflow: hidden; position: relative; height: 100%; } .ide-gutter { padding: 10px 6px 10px 10px; text-align: right; color: #858585; font-size: 11px; line-height: 1.55; background: #1E1E1E; border-right: 1px solid #2D2D2D; user-select: none; font-family: inherit; overflow: hidden; } .ide-gutter span { display: block; } .ide-code { padding: 10px 14px; color: #D4D4D4; font-size: 12.5px; line-height: 1.55; margin: 0; font-family: inherit; overflow-y: auto; overflow-x: hidden; height: 100%; position: relative; white-space: pre; scrollbar-width: none; } .ide-code::-webkit-scrollbar { display: none; } /* Syntax highlight Python · VS Code dark+ tokens */ .tok-keyword { color: #569CD6; } .tok-string { color: #CE9178; } .tok-number { color: #B5CEA8; } .tok-comment { color: #6A9955; font-style: italic; } .tok-function { color: #DCDCAA; } .tok-builtin { color: #4EC9B0; } .tok-decorator { color: #DCDCAA; } .tok-class { color: #4EC9B0; } /* Terminal panel bottom */ .ide-terminal { background: #1E1E1E; border-top: 1px solid #2D2D2D; display: flex; flex-direction: column; height: 120px; overflow: hidden; } .ide-terminal-tabs { display: flex; gap: 18px; padding: 6px 14px; background: #181818; border-bottom: 1px solid #2D2D2D; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; } .ide-term-tab { color: rgba(255, 255, 255, 0.42); cursor: pointer; padding-bottom: 4px; border-bottom: 1px solid transparent; } .ide-term-tab.is-active { color: var(--ocre-warm); border-bottom-color: var(--ocre-warm); } .ide-terminal-output { padding: 8px 14px 10px; color: rgba(255, 255, 255, 0.78); font-size: 11.5px; line-height: 1.6; margin: 0; overflow: hidden; flex: 1; font-family: inherit; white-space: pre; position: relative; } .ide-term-inner { display: block; /* Terminal estático — animación movida a .ide-code-inner (decisión Arthur: editor se mueve, terminal queda fijo) */ } /* Editor del IDE con scroll seamless · simula agente tipeando código en tiempo real */ .ide-code-inner { display: block; animation: ide-code-scroll 12s linear infinite; will-change: transform; } @keyframes ide-code-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } /* CLI color tokens (terminal output) */ .cli-comment { color: #6A9955; font-style: italic; } .cli-time { color: rgba(255, 255, 255, 0.32); } .cli-arrow { color: var(--ocre-warm); } .cli-grn { color: #28c840; } .cli-str { color: #CE9178; } .cli-acc { color: var(--ocre-warm); } /* Status bar (VS Code style) */ .ide-statusbar { background: var(--ocre); color: rgba(255, 255, 255, 0.92); display: flex; align-items: center; gap: 18px; padding: 4px 14px; font-size: 10px; letter-spacing: 0.04em; } .ide-sb-item { display: flex; align-items: center; gap: 5px; } .ide-sb-spacer { flex: 1; } /* IDE cursor block blink */ .ide-cursor-blink { display: inline-block; color: var(--ocre-warm); opacity: 0.8; animation: blink 1.05s step-end infinite; font-size: 0.85em; } /* Mobile · IDE stacks compact */ @media (max-width: 900px) { .ide-window { max-width: 100%; } .ide-body { grid-template-columns: 1fr; } .ide-sidebar { display: none; } .ide-tabs .ide-tab:nth-child(n+3) { display: none; } .ide-terminal { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ INTRO ANIMADA · Sprint 7.6 — Glass percolante (g=4) Typing >/Alarife. → pausa 2.8s → fly al nav-strip + drain abajo→arriba Drain: CTAs emergen primero, hero-lead, h1, nav-strip último ═══════════════════════════════════════════════════════════════════════════ */ #intro-overlay { position: fixed; inset: 0; z-index: 100; pointer-events: auto; } #intro-overlay.is-done { pointer-events: none; opacity: 0; transition: opacity 0.6s ease; } /* Plasma respira sutil mientras la intro está viva (caustics layer) */ @keyframes plasma-breathe { 0%, 100% { transform: translate(0, 0); opacity: 0.55; } 50% { transform: translate(2%, -1.5%); opacity: 0.72; } } #glass { position: fixed; inset: 0; background: rgba(0,0,0,0.68); backdrop-filter: blur(14px) saturate(125%) brightness(0.88); -webkit-backdrop-filter: blur(14px) saturate(125%) brightness(0.88); /* Silueta visible: glow interno suave + acentos sutiles */ box-shadow: inset 0 0 120px 8px rgba(255,255,255,0.05), inset 0 60px 100px -50px rgba(255,255,255,0.06), inset 0 -1px 0 rgba(255,255,255,0.04); transform-origin: center center; transform: scale(1); opacity: 1; will-change: opacity, transform; /* Blur estático 14px (la fase 56px nunca se aplicó por JS — era código muerto). Solo animamos transform + opacity (GPU-friendly). Fix deploy 2026-05-29: mata el jank de la intro. */ transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1) 0.8s, opacity 1.8s cubic-bezier(0.6, 0, 0.4, 1) 0.9s; } /* Caustics estática — plasma-breathe removida: animar una capa con mix-blend-mode soft-light sobre backdrop-filter forzaba re-composición por frame = jank en MBA 2020 (fix deploy 2026-05-29). */ #glass .refraction { position: absolute; inset: 0; background: linear-gradient(118deg, transparent 28%, rgba(255,255,255,0.045) 42%, transparent 58%), linear-gradient(242deg, transparent 32%, rgba(255,255,255,0.025) 48%, transparent 64%); mix-blend-mode: overlay; pointer-events: none; } #glass .caustics { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.2' intercept='-0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)' opacity='0.5'/%3E%3C/svg%3E"); background-size: cover; mix-blend-mode: soft-light; opacity: 0.55; pointer-events: none; } #centerText { position: fixed; z-index: 200; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; transform-origin: top left; transition: opacity 0.25s ease; white-space: nowrap; isolation: isolate; } #centerText .c-line { display: flex; align-items: baseline; justify-content: center; } #centerText .c-prompt, #centerText .c-slash { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 52px; font-weight: 400; color: var(--prompt-mark); letter-spacing: -0.01em; line-height: 1; } #centerText .c-name { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 52px; font-weight: 400; color: rgba(243,236,216,0.92); letter-spacing: 0.02em; margin-left: 4px; line-height: 1; } #centerText .c-cursor { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 52px; color: var(--ocre-warm); animation: blink 1.05s step-end infinite; line-height: 1; position: relative; top: -3px; } #subLabel { margin-top: 18px; font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(243,236,216,0.32); opacity: 0; transition: opacity 0.5s ease; } @media (prefers-reduced-motion: reduce) { #intro-overlay { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ BENCHMARKS BANNER · Sprint 9-E · horizontal strip oscuro Reemplaza el look "tall cream section". Fondo dark, 5 columnas horizontales. ═══════════════════════════════════════════════════════════════════════════ */ #benchmarks { background-color: var(--charcoal-deep); background-image: /* Blob depth — variación radial para profundidad orgánica */ radial-gradient(ellipse 60% 50% at 22% 40%, rgba(5, 3, 1, 0.55) 0%, transparent 65%), radial-gradient(ellipse 50% 65% at 75% 58%, rgba(8, 5, 2, 0.45) 0%, transparent 60%), radial-gradient(ellipse 75% 35% at 52% 18%, rgba(6, 4, 1, 0.40) 0%, transparent 70%), /* Grid warm cream — apenas visible en dark */ linear-gradient(to right, rgba(220, 195, 165, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(220, 195, 165, 0.07) 1px, transparent 1px), linear-gradient(to right, rgba(220, 195, 165, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(220, 195, 165, 0.04) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px, 8px 8px, 8px 8px; padding-top: 0; padding-bottom: 0; overflow: hidden; } /* Sketches decorativos son para layout tall — ocultar en banner compacto */ #benchmarks .sketch-wrap { display: none; } #benchmarks .lamina-inner { padding-top: 0; padding-bottom: 0; } #benchmarks .lamina-header { padding: 18px 0 14px; margin-bottom: 0; border-bottom: 1px dashed rgba(243,236,216,0.14); } #benchmarks .lamina-header .lamina-tag { color: var(--ocre); } #benchmarks .lamina-header .lamina-title-meta { color: rgba(243,236,216,0.4); } #benchmarks .benchmarks-intro { display: none; } #benchmarks .benchmarks { display: flex; flex-direction: row; border-bottom: 1px dashed rgba(243,236,216,0.10); } #benchmarks .benchmark { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 20px 24px 22px; border-top: none; border-bottom: none; border-right: 1px dashed rgba(243,236,216,0.12); /* Reset animation base */ opacity: 1; transform: none; } #benchmarks .benchmark.is-in { opacity: 1; transform: none; } #benchmarks .benchmark:last-child { border-right: none; border-bottom: none; } #benchmarks .benchmark-stat { font-family: 'Big Shoulders Display', sans-serif; font-style: normal; font-weight: 900; font-size: clamp(52px, 4.2vw, 76px); line-height: 0.88; letter-spacing: -0.02em; color: var(--paper); font-variation-settings: normal; } #benchmarks .benchmark-stat .unit { font-family: 'Big Shoulders Display', sans-serif; font-size: 0.52em; font-style: normal; color: var(--ocre-warm); font-weight: 900; letter-spacing: -0.01em; } #benchmarks .benchmark-stat::before { color: var(--ocre); opacity: 0.6; font-size: 9px; top: -20px; } #benchmarks .benchmark-stat .unit { opacity: 1; transform: none; transition: none; } #benchmarks .benchmark-content h3 { font-size: 15px; font-weight: 400; line-height: 1.5; color: rgba(243,236,216,0.82); margin-bottom: 8px; max-width: none; font-family: var(--sans); } #benchmarks .benchmark-content h3 em { color: var(--ocre-warm); font-style: italic; } #benchmarks .benchmark-source { font-size: 10.5px; color: rgba(243,236,216,0.42); letter-spacing: 0.08em; } #benchmarks .benchmark-source::before { color: var(--ocre); opacity: 0.5; } /* Benchmarks → Pilares: ambas son dark — reducir gap entre secciones */ #pilares { padding-top: clamp(48px, 6vh, 80px); } /* ═══════════════════════════════════════════════════════════════════════════ TYPOGRAPHY SPRINT · font-config.json 2026-05-12 · 22 cambios aplicados Fuente: Arthur Le Forestier via font-editor.html Notas de copy/estructura → Paso 2 (no aplicadas aquí) ═══════════════════════════════════════════════════════════════════════════ */ /* H06 · hero-lead: SERIF → MONO */ .hero-lead { font-family: var(--mono); font-style: normal; font-weight: 400; } /* H07 · CTA button: MONO → DISPLAY */ .hero-cta-row .link-ocre { font-family: var(--display); font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; } /* H08 · CTA secondary: MONO → SANS */ .hero-cta-row .secondary { font-family: var(--sans); font-style: normal; font-weight: 400; } /* P03 · H2 principal "Cinco capas.": SERIF → DISPLAY */ .pilares-h2-main { font-family: var(--display); font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: -0.02em; } /* P04 · H2 sub "Una sola obra.": SERIF → MONO */ .pilares-h2-sub { font-family: var(--mono); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; } /* P05 · Párrafo intro: DISPLAY 900 → SANS 400 (texto corrido, no label) */ .pilares-metaphor { font-family: var(--sans); font-weight: 400; font-style: normal; } /* P07 · Ancla pregunta: SERIF → DISPLAY */ #pilares .pilares-anchor { font-family: var(--display); font-weight: 900; font-style: normal; } #pilares .pilares-anchor strong, #pilares .pilares-anchor em { font-family: var(--display); font-style: normal; } /* P11 · Card nombre vertical: SERIF → DISPLAY */ .pilar-card-name-vertical { font-family: var(--display); font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: -0.02em; } /* P12 · Card stat número: SERIF → DISPLAY */ .pilar-card-stat { font-family: var(--display); font-weight: 900; font-style: normal; letter-spacing: -0.03em; } /* P13 · Card outcome: SERIF → SANS */ .pilar-card-outcome { font-family: var(--sans); font-style: normal; font-weight: 400; } /* P18 · Card CTA: MONO → SANS */ .pilar-card-cta { font-family: var(--sans); font-weight: 500; } /* Glow ocre en label "L 04 · FASES DE OBRA" — blend zone oscura */ #proceso .lamina-header { text-shadow: 0 0 18px rgba(217, 119, 87, 0.60), 0 0 45px rgba(217, 119, 87, 0.30), 0 0 90px rgba(217, 119, 87, 0.14); } /* R03+R04 · H2 proceso "Cuatro fases. Sin teatro.": ambos DISPLAY */ #proceso .process-intro h2 { font-family: var(--display); font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: -0.02em; } #proceso .process-intro h2 .italic-em { font-family: var(--display); font-style: normal; text-transform: uppercase; } /* R05 · Lead párrafo proceso: SERIF → MONO */ #proceso .process-intro .lead { font-family: var(--mono); font-style: normal; font-weight: 400; } /* R07 · Título de paso: SERIF → DISPLAY */ .process-step h4 { font-family: var(--display); font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: -0.01em; } /* Sprint 11 · dark-dominant: contacto necesita bg explícito (ya no hereda body paper) */ #contacto { background-color: var(--paper); background-image: linear-gradient(to right, rgba(26, 21, 18, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(26, 21, 18, 0.07) 1px, transparent 1px), linear-gradient(to right, rgba(26, 21, 18, 0.038) 1px, transparent 1px), linear-gradient(to bottom, rgba(26, 21, 18, 0.038) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; /* Sprint 11 fix: reducir aire vertical, cards más arriba */ padding-top: clamp(56px, 7vh, 96px); padding-bottom: clamp(56px, 7vh, 96px); } /* C03 · H2 contacto "30 minutos.": SERIF → DISPLAY */ #contacto .contact-intro h2 { font-family: var(--display); font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: -0.02em; } /* C04 · "Sin pitch." acento: SERIF → MONO + ocre-warm highlight */ #contacto .contact-intro h2 .italic-em { font-family: var(--mono); font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ocre-warm); } /* C06 · Firma: SERIF → SANS */ .contact-signature { font-family: var(--sans); font-style: normal; font-weight: 400; } /* C08 · Card valor contacto: SERIF → DISPLAY */ .contact-value { font-family: var(--display); font-weight: 900; font-style: normal; letter-spacing: -0.01em; } /* F04 · Byline meta: SERIF italic → SANS + opacidad 0.38 → 0.58 */ .byline-meta { font-family: var(--sans); font-style: normal; font-weight: 400; color: var(--ink-on-dark-soft); } /* F05 · Lugar/año: SERIF italic → MONO + opacidad 0.38 → 0.58 */ .byline-place { font-family: var(--mono); font-style: normal; font-weight: 400; color: var(--ink-on-dark-mid); } /* F06 · Links footer: MONO → DISPLAY · más espacio entre líneas */ .footer-v17-links { font-family: var(--display); font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; gap: 24px; line-height: 2; } /* ── BUG FIXES · Post-auditoría · 2026-05-12 ────────────────────────────── Mono ilegible en cuerpo de texto largo. SERIF recupera legibilidad y el
del hero-lead funciona correctamente con fuente proporcional. ───────────────────────────────────────────────────────────────────────── */ /* ── NAV-MARK composition · match intro ────────────────────────────────── Intro: >/(0px)Alarife.(4px gap)█ ←→ Nav tenía gap:12px entre cada hijo. Fix: gap:0 + margin-left:4px solo en .name + cursor pegado al nombre. ───────────────────────────────────────────────────────────────────────── */ .nav-mark { gap: 0; align-items: baseline; } .nav-mark .prompt { margin-left: 0; } .nav-mark .name { margin-left: 4px; } .nav-mark .cursor-blink { margin-left: 0; position: relative; top: -2px; } /* Hero-lead: fix max-width — base CSS tiene 42ch que en mono = exactamente 42 chars, "Construimos el sistema operativo que te falta." tiene 48 → wrapeaba antes del BR. max-width: none deja que el hero-grid controle el ancho. MONO se mantiene. */ .hero-lead { font-family: var(--mono); font-style: normal; font-weight: 400; max-width: none; } /* Proceso lead: MONO → SERIF — 4 oraciones en mono son ilegibles */ #proceso .process-intro .lead { font-family: var(--serif); font-style: italic; font-weight: 300; } /* Mobile hero-grid: colapsar a columna única — ide-window es "auto" y a 390px toma 310px, dejando 0px para hero-content. Single column apila correctamente. */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ TIER 4 · prefers-reduced-motion — BACKSTOP global (a11y, 2026-05-29) Garantiza que TODA animación/transición se reduzca para usuarios que pidieron menos movimiento (cubre blink, cta-breathe, terminal-pulse, ide-code-scroll y cualquier otra no atrapada por los bloques específicos de arriba). ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════ Mobile fix · Benchmarks: en desktop son 5 columnas en fila; en pantalla chica (≤820px) eso deja columnas de ~120px con texto roto. Apilamos vertical: cada benchmark a ancho completo, separador horizontal. (2026-05-29 validación mobile) ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 820px) { #benchmarks .benchmarks { flex-direction: column; border-bottom: none; } #benchmarks .benchmark { border-right: none; border-bottom: 1px dashed rgba(243,236,216,0.12); padding: 24px 4px; } #benchmarks .benchmark:last-child { border-bottom: none; } #benchmarks .benchmark-content h3 { max-width: 42ch; } }