/* ========================================================================== TMA BLOG — hoja de estilos independiente. Los tokens, nav y footer están duplicados desde index.html a propósito: el blog no comparte CSS con la landing para no acoplar los dos árboles. Si cambias el sistema visual en index.html, hay que replicarlo acá. ESCALA TIPOGRÁFICA DE LA COLUMNA EDITORIAL (cerrada, sin excepciones): H1 post ....... Oswald, único display grande H2 sección .... Oswald uppercase, 1.4rem (22.4px) — UN solo tamaño Body .......... Fraunces 1.1875rem (19px), line-height 1.65 uniforme Meta/byline ... IBM Plex Mono, chico El chrome (nav, footer, newsletter, CTA) conserva la escala de index.html. La escala de arriba gobierna el artículo, no la interfaz que lo rodea. TEMA: el blog es DARK PERMANENTE. No hereda ni escribe localStorage tma-theme, no responde a prefers-color-scheme y no tiene toggle. Los tokens dark viven directamente en :root; no queda un solo selector [data-theme] en esta hoja. El atributo data-theme="dark" del se mantiene como declaración de intención y para que herramientas externas (y el theme-color del navegador) lean el tema correcto. La landing (index.html) conserva su tema dual intacto. El nav se mantiene crema en el blog, igual que en index.html en modo oscuro: su fondo y su logo están fijados, no son theme-aware. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============ DARK EDITORIAL — único tema ============ */ :root { --black: #0f0e14; --white: #e8e4d5; --grey: #161520; --mid: #1f1e2b; --accent: #2d5bff; --accent2: #e8e4d5; --muted: #7a7a88; --border: #2a2935; --rule: #3a3947; --dim: #a8a69c; --ink-soft: rgba(232,228,213,0.82); --surface-body: #0f0e14; --shadow-soft: rgba(0,0,0,0.4); --grain-blend: screen; /* Accesibilidad — valores calculados, no elegidos a ojo. El nav se pinta crema al 88% sobre #0f0e14 = #DEDCD8 compuesto. --muted (#7a7a88) sobre ese fondo da 3.08:1 → falla AA. #5a5a66 da 4.96:1 → AA con margen, conserva el gris frío. --accent (#2d5bff) sobre #0f0e14 da 3.71:1 → falla para texto chico. #5c80ff da 5.45:1 con el MISMO hue (226.9°) y la misma saturación: solo sube la luminosidad. Reservado para labels; el acento de marca y el sello no se tocan. */ --nav-ink-muted: #5a5a66; --accent-on-dark: #5c80ff; --focus-ring: var(--accent2); /* Typography */ --serif: 'Fraunces', 'Times New Roman', serif; --display: 'Oswald', 'Arial Narrow', sans-serif; --sans: 'DM Sans', -apple-system, sans-serif; --mono: 'IBM Plex Mono', 'Courier New', monospace; /* Escala editorial */ --size-h2: 1.4rem; /* 22.4px */ --size-body: 1.1875rem; /* 19px */ --size-meta: 0.85rem; /* 13.6px — mínimo CLAUDE.md para labels secundarios */ --size-chrome: 0.85rem; /* 13.6px — mismo piso para nav, footer y newsletter */ --lh-body: 1.65; --gap-section: 4rem; /* 64px — separación entre secciones, sin hairline */ /* Motion */ --ease-out: cubic-bezier(.32,.72,0,1); } html { scroll-behavior: smooth; overflow-x: hidden; } body { background: var(--black); color: var(--white); font-family: var(--sans); font-size: 16px; line-height: 1.6; font-weight: 300; font-variation-settings: 'opsz' 14; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0.035; z-index: 1; mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } em, i { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 50; } /* ========================================================================== MASTHEAD — chrome, duplicado de index.html ========================================================================== */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.1rem 3rem; border-bottom: 1px solid var(--rule); background: rgba(250,248,243,0.88); backdrop-filter: blur(14px); transition: transform 250ms cubic-bezier(.32,.72,0,1); } /* Hide-on-scroll. El menú móvil cuelga del nav (position:absolute, top:100%), así que el JS no oculta la barra mientras .nav-links esté abierto. */ nav.nav-hidden { transform: translateY(-100%); } .nav-logo { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: #15151e; } .logo-svg { height: 32px; width: auto; display: block; color: var(--accent); flex-shrink: 0; } .logo-svg .logo-a { color: #15151e; } .logo-svg .logo-a path { fill: currentColor; } .logo-wordmark { display: inline-flex; align-items: baseline; gap: 0.5rem; line-height: 1; transform: skew(-8deg); } .lw-tech { font-family: var(--display); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.01em; color: #15151e; } .lw-match { font-family: var(--display); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.01em; color: var(--accent); } .lw-advisor { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: #5a5850; align-self: center; padding-left: 0.4rem; border-left: 1px solid var(--border); margin-left: 0.1rem; } .nav-links { display: flex; align-items: center; gap: 1.5rem; } .nav-link { font-size: var(--size-chrome); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nav-ink-muted); text-decoration: none; transition: color 0.2s; white-space: nowrap; } .nav-link:hover { color: #15151e; } .nav-link.is-active { color: #15151e; } .nav-actions { display: flex; align-items: center; gap: 0.6rem; } .nav-cta { font-family: var(--mono); font-size: var(--size-chrome); letter-spacing: 0.12em; text-transform: uppercase; color: #faf8f3; background: #15151e; padding: 0.55rem 1.1rem; text-decoration: none; transition: background 0.2s, box-shadow 0.2s, border-color 0.2s; border: 1px solid #15151e; box-shadow: 0 0 0 1px var(--border), 0 2px 6px var(--shadow-soft); } .nav-cta:hover { background: var(--accent); border-color: var(--accent); color: #faf8f3; box-shadow: 0 0 0 1px var(--accent), 0 4px 12px rgba(45,91,255,0.22); } .nav-cta-match { font-family: var(--mono); font-size: var(--size-chrome); letter-spacing: 0.12em; text-transform: uppercase; background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 0.55rem 1rem; cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; } .nav-cta-match:hover { background: var(--accent); color: #faf8f3; } .nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; cursor: pointer; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: #15151e; transition: transform 0.25s ease, opacity 0.25s ease; } .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ========================================================================== COLUMNA EDITORIAL padding-top generoso: el nav mide ~73px y el sello (210px) arranca en el borde superior del header, así que necesita aire por encima. ========================================================================== */ .blog-shell { max-width: 720px; margin: 0 auto; padding: 180px 2rem 6rem; position: relative; z-index: 2; } .breadcrumb { font-family: var(--mono); font-size: var(--size-meta); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.2s; display: inline-block; margin-bottom: 3rem; } .breadcrumb:hover { color: var(--accent); } /* ========================================================================== ÍNDICE DEL BLOG — una sola hairline, bajo el masthead ========================================================================== */ .blog-masthead h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.95; font-size: clamp(3rem, 9vw, 5.5rem); color: var(--white); } .blog-tagline { font-family: var(--serif); font-size: var(--size-body); line-height: var(--lh-body); font-weight: 300; color: var(--dim); margin-top: 1.2rem; max-width: 34ch; } /* LA hairline del índice */ .blog-rule { height: 1px; background: var(--rule); margin: 3.5rem 0 0; } /* Card del post — sin bordes, separada por espacio */ .blog-card { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; padding: var(--gap-section) 0; text-decoration: none; color: inherit; transition: transform 0.35s var(--ease-out); } .blog-card:hover { transform: translateY(-2px); } .blog-card-meta { font-family: var(--mono); font-size: var(--size-meta); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; } .blog-card-title { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; font-size: var(--size-h2); line-height: 1.15; color: var(--white); transition: color 0.2s ease; } .blog-card:hover .blog-card-title { color: var(--accent); } .blog-card-excerpt { font-family: var(--serif); font-size: var(--size-body); line-height: var(--lh-body); font-weight: 300; color: var(--ink-soft); margin-top: 1rem; } .blog-card-arrow { font-family: var(--mono); font-size: var(--size-meta); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-top: 1.4rem; display: inline-block; transition: transform 0.35s var(--ease-out); } .blog-card:hover .blog-card-arrow { transform: translateX(4px); } /* ========================================================================== SELLO VEREDICTO — imagen, sin animación de entrada (nítido en captura) ========================================================================== */ .sello { flex-shrink: 0; line-height: 0; } /* El sello se sirve siempre sobre fondo oscuro, así que brightness() es el único estado, no un override de tema. NO usar invert(): invert() refleja cada canal y vira el azul a mostaza (medido: #003EB4 -> #EBB753). brightness() escala y preserva el matiz (medido: #003EB4 -> #005AFF, el azul de marca). */ .sello img { display: block; width: 210px; height: 210px; filter: brightness(1.45); } /* Mini-sello en la card del índice */ .sello--mini img { width: 92px; height: 92px; } /* Sello del header del post: absoluto arriba a la derecha. El padding vive en .post-header-text, no en el header, para que la imagen hero conserve el ancho completo de la columna. La hairline del byline se detiene antes del sello: es intencional, no un corte accidental. */ .post-header { position: relative; } .post-header-text { padding-right: 240px; } .post-header .sello { position: absolute; top: 0; right: 0; } /* ========================================================================== POST — sin hairlines entre secciones. Solo la del byline. ========================================================================== */ .post-chip { font-family: var(--mono); font-size: var(--size-meta); letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 1.4rem; } .post-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.98; font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--white); } /* Byline + LA única hairline del post. --dim, no --muted: sobre el fondo oscuro --muted daba 4.54:1 (AA raspando) y --dim da 7.87:1. La Decisión Fija 5 cierra la escala, no el color. */ .post-byline { font-family: var(--mono); font-size: var(--size-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-top: 1.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--rule); } /* Imagen hero: ancho de columna, sin sombra, esquina apenas suavizada. es inline por defecto; sin esto el margin-top del img no cuadra. */ .post-header picture { display: block; } .post-hero { display: block; width: 100%; height: auto; margin-top: 2.5rem; border-radius: 2px; } .post-body { margin-top: var(--gap-section); } .post-body p { font-family: var(--serif); font-size: var(--size-body); line-height: var(--lh-body); font-weight: 300; color: var(--ink-soft); margin-bottom: 1.5rem; } /* Bajada y remates: MISMO cuerpo. La jerarquía la dan peso, color e itálica, nunca el tamaño. */ .post-body .post-lede { font-weight: 400; color: var(--white); } /* Mismo 'opsz' que el cuerpo (14). Con 'opsz' 144 Fraunces adelgaza el trazo y el remate se LEE más chico aunque el font-size sea idéntico. */ .post-body .post-beat { font-style: italic; font-variation-settings: 'opsz' 14, 'SOFT' 50; font-weight: 400; color: var(--white); } /* H2: un solo tamaño, separación por espacio y no por regla */ .post-body h2 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; font-size: var(--size-h2); line-height: 1.15; color: var(--white); margin-top: var(--gap-section); margin-bottom: 1.5rem; } /* ========================================================================== CTA final del post — chrome, escala de index.html ========================================================================== */ .post-cta { margin-top: var(--gap-section); padding: 2.2rem; border: 1px solid var(--border); background: var(--grey); text-align: center; } .post-cta-title { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: var(--size-h2); color: var(--white); margin-bottom: 0.5rem; } .post-cta-sub { font-family: var(--sans); font-size: 0.88rem; color: var(--dim); font-weight: 300; margin-bottom: 1.5rem; } .post-cta-btn { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: #faf8f3; background: var(--accent); border: 1px solid var(--accent); padding: 0.85rem 1.8rem; text-decoration: none; display: inline-block; transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease; } .post-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(45,91,255,0.28); } /* ========================================================================== NEWSLETTER — chrome, mismo lenguaje visual que .tma-capture de index.html ========================================================================== */ .tma-capture { margin-top: var(--gap-section); padding: 1.5rem; border: 1px solid var(--border); background: var(--grey); } .tma-capture__label { font-family: var(--mono); font-size: var(--size-chrome); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 0.5rem; } .tma-capture__title { font-family: var(--display); font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.1; margin-bottom: 0.35rem; color: var(--white); } .tma-capture__sub { font-family: var(--sans); font-size: 0.85rem; color: var(--dim); line-height: 1.5; margin-bottom: 0.9rem; font-weight: 300; } .tma-capture__row { display: flex; gap: 0.6rem; align-items: stretch; } .tma-capture__input { flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--white); font-family: var(--sans); font-size: 0.88rem; padding: 0.65rem 0; outline: none; transition: border-color 0.2s; min-width: 0; font-weight: 300; } .tma-capture__input:focus { border-bottom-color: var(--accent); } .tma-capture__input::placeholder { color: var(--muted); } .tma-capture__btn { flex-shrink: 0; font-family: var(--mono); font-size: var(--size-chrome); letter-spacing: 0.12em; text-transform: uppercase; background: var(--white); color: var(--black); border: 1px solid var(--white); padding: 0.55rem 1.1rem; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; } .tma-capture__btn:hover { background: var(--accent); border-color: var(--accent); color: #faf8f3; } .tma-capture__btn:disabled { opacity: 0.45; cursor: not-allowed; } .tma-capture__error { font-family: var(--mono); font-size: var(--size-chrome); color: #ff6b6b; margin-top: 0.4rem; letter-spacing: 0.05em; min-height: 1.2rem; } /* La línea de privacidad es la prueba de la propuesta de valor, no letra chica. Sube al piso de 13.6px y a --dim (no --muted) para pasar AA. */ .tma-capture__privacy { font-family: var(--mono); font-size: var(--size-chrome); color: var(--dim); margin-top: 0.8rem; letter-spacing: 0.04em; } .tma-capture__success { display: flex; align-items: flex-start; gap: 0.7rem; font-family: var(--sans); font-size: 0.88rem; color: var(--dim); line-height: 1.5; } .tma-capture__success-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(34,197,94,0.15); color: #22c55e; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; margin-top: 2px; } /* ========================================================================== FOOTER — chrome ========================================================================== */ footer { padding: 2.5rem 3rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); position: relative; z-index: 2; } .footer-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; } .footer-logo .lw-tech, .footer-logo .lw-match { font-size: 0.95rem; } .footer-logo .lw-tech { color: var(--white); } .footer-logo .lw-advisor { display: none; } .footer-copy { font-size: var(--size-chrome); color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { font-size: var(--size-chrome); color: var(--dim); text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; } .footer-links a:hover { color: var(--accent-on-dark); } /* ========================================================================== FOCUS VISIBLE — anillo diseñado, coherente con la paleta. El nav es crema, así que ahí el anillo se invierte a tinta. ========================================================================== */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 1px; } nav :focus-visible { --focus-ring: #15151e; } .tma-capture__input:focus-visible { outline-offset: 4px; } /* ========================================================================== MOTION — solo transform/opacity. El sello nunca entra animado. ========================================================================== */ @keyframes blogFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .anim { opacity: 0; animation: blogFadeUp 0.5s var(--ease-out) forwards; animation-delay: var(--d, 0ms); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html, body { transition: none; } /* El nav sigue ocultándose (es funcionalidad, no decoración): toggle instantáneo. */ nav { transition: none; } .anim { animation: none; opacity: 1; transform: none; } .blog-card, .blog-card-title, .blog-card-arrow, .post-cta-btn, .nav-hamburger span { transition: none; } .blog-card:hover, .post-cta-btn:hover { transform: none; } .blog-card:hover .blog-card-arrow { transform: none; } } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 900px) { /* El sello deja de flotar y pasa a bloque sobre el chip */ .post-header-text { padding-right: 0; } .post-header .sello { position: static; margin-bottom: 2rem; } .post-header .sello img { width: 150px; height: 150px; } } @media (max-width: 768px) { nav { gap: 0; padding: 1rem 1.5rem; } .logo-svg { display: none; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--grey); border-bottom: 1px solid var(--border); flex-direction: column; align-items: flex-start; padding: 1.5rem 2rem; gap: 1.2rem; z-index: 99; } .nav-links.open { display: flex; } .nav-link, .nav-link.is-active { color: var(--white); } .nav-hamburger { display: flex; } .nav-cta-match { display: none; } .nav-cta { padding: 0.5rem 0.9rem; font-size: 0.6rem; letter-spacing: 0.12em; } .blog-shell { padding: 130px 1.5rem 4rem; } .blog-card { grid-template-columns: 1fr; gap: 2rem; } .blog-card .sello { justify-self: start; order: -1; } footer { flex-direction: column; gap: 1rem; text-align: center; padding: 2.5rem 1.5rem; } .footer-links { flex-wrap: wrap; justify-content: center; gap: 1.2rem; } } @media (max-width: 640px) { .lw-advisor { display: none; } .logo-wordmark { gap: 0.35rem; } .lw-tech, .lw-match { font-size: 0.95rem; } } @media (max-width: 480px) { .tma-capture__row { flex-direction: column; gap: 0.5rem; } .tma-capture__btn { width: 100%; padding: 0.7rem; } }