/* ============================================================ Jaime Pesca · sitio personal Sistema de diseño: tokens en :root, modo oscuro automático. Cada página define su tono con una clase en : .p-home | .p-research | .p-growth | .p-data | .p-teach Cada tono tiene un acento (--c-*) y una versión profunda (--d-*) para el héroe y el bloque de contacto. ============================================================ */ :root { /* Neutros (porcelana fría, no crema) */ --paper: #f5f6f4; --surface: #fdfdfc; --ink: #1c2422; --muted: #57635e; --line: #d9ded9; /* Tonos por página: acento (--c-*) y profundo (--d-*) */ --c-home: #a31f34; /* carmesí: portada (a juego con la foto) */ --c-research: #1f5673; /* azul petróleo: investigación & docencia */ --c-growth: #a3480f; /* ámbar quemado: growth & media buying */ --c-data: #21705e; /* viridiana: data science */ --c-teach: #6a4fa5; /* violeta: formación empresarial */ --d-home: #5c1320; --d-research: #10324a; --d-growth: #5a2507; --d-data: #0d3a30; --d-teach: #2d1f55; /* Texto sobre los fondos profundos */ --on-deep: #ffffff; --on-deep-muted: rgba(255, 255, 255, 0.82); /* Texto sobre un fondo de acento (botones) */ --on-accent: #ffffff; /* Tono activo (se redefine por página en body.p-*) */ --accent: var(--c-research); --deep: var(--d-research); /* Marcador de contenido pendiente de editar */ --flag-bg: #f3e8c8; --flag-ink: #6d5716; /* Tipografía: Neue Haas Grotesk, la del MIT (Adobe Fonts), si está disponible; si no, Inter Tight / Inter (Google Fonts), muy parecidas. */ --font-display: "neue-haas-grotesk-display", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "neue-haas-grotesk-text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-label: var(--font-body); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #141816; --surface: #1c2220; --ink: #e8ece9; --muted: #9cA8a2; --line: #323b37; --c-home: #e07a8a; --c-research: #6aa8c9; --c-growth: #e0904f; --c-data: #5cb39e; --c-teach: #a992d6; --flag-bg: #3d3517; --flag-ink: #e3cd7b; --on-accent: #141816; } } :root[data-theme="dark"] { color-scheme: dark; --paper: #141816; --surface: #1c2220; --ink: #e8ece9; --muted: #9cA8a2; --line: #323b37; --c-home: #e07a8a; --c-research: #6aa8c9; --c-growth: #e0904f; --c-data: #5cb39e; --c-teach: #a992d6; --flag-bg: #3d3517; --flag-ink: #e3cd7b; --on-accent: #141816; } /* Tono por página */ body.p-home { --accent: var(--c-home); --deep: var(--d-home); } body.p-research { --accent: var(--c-research); --deep: var(--d-research); } body.p-growth { --accent: var(--c-growth); --deep: var(--d-growth); } body.p-data { --accent: var(--c-data); --deep: var(--d-data); } body.p-teach { --accent: var(--c-teach); --deep: var(--d-teach); } /* Se declaran en body (no en :root) para que usen el acento de cada página */ body { --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--paper)); --accent-faint: color-mix(in srgb, var(--accent) 5%, var(--paper)); } /* ---------- Base ---------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } /* Mientras carga la traducción (ver assets/js/i18n.js) */ .i18n-pending body { visibility: hidden; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html { height: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.02rem; line-height: 1.62; -webkit-font-smoothing: antialiased; } .wrap { max-width: 1060px; margin-inline: auto; padding-inline: 20px; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; margin: 0; } p { margin: 0; max-width: 62ch; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .eyebrow { font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } /* Etiqueta para contenido que Jaime debe personalizar */ .edit-tag { display: inline-block; font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.08em; padding: 0.1rem 0.45rem; border-radius: 3px; background: var(--flag-bg); color: var(--flag-ink); vertical-align: middle; } /* ---------- Cabecera / navegación ---------- */ .site-head { border-bottom: 1px solid var(--line); background: var(--paper); } .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 0.9rem; } .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; } .nav-toggle { display: none; font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; background: none; border: 1px solid var(--line); color: var(--ink); padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; } .nav-menu { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-left: auto; } .nav-menu a { font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding-block: 0.2rem; } .nav-menu a:hover { color: var(--ink); } .nav-menu a[aria-current="page"] { color: var(--accent); border-bottom: 2px solid var(--accent); } /* Selector de idioma */ .nav-tools { display: flex; align-items: center; gap: 0.6rem; } .lang-switch { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); } .lang-switch svg { width: 16px; height: 16px; flex: none; } .lang-switch select { font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 0.35rem 0.5rem; cursor: pointer; } .lang-switch select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 640px) { .nav-toggle { display: block; } .nav-tools { margin-left: auto; } .nav-menu { display: none; order: 3; margin-left: 0; width: 100%; flex-direction: column; gap: 0.6rem; padding-block: 0.6rem 1rem; } .nav-menu.open { display: flex; } } /* ---------- Héroe ---------- */ .hero { padding-block: 4.5rem 3.5rem; } .hero.tinted { background: var(--deep); color: var(--on-deep); } .hero.tinted .eyebrow { color: var(--on-deep-muted); } .hero.tinted .lede { color: var(--on-deep-muted); } .hero.tinted .btn { background: var(--on-deep); color: var(--deep); } /* Portada: héroe claro con el tono suave */ .p-home .hero { background: var(--accent-soft); } .hero .eyebrow { display: block; margin-bottom: 1rem; } .hero h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 700; letter-spacing: -0.025em; } .hero .lede { margin-top: 1.4rem; font-size: clamp(1.15rem, 2.4vw, 1.35rem); max-width: 36ch; color: var(--muted); } .hero .btn { margin-top: 2rem; } .hero .chip-row { margin-top: 1.8rem; } /* Héroe con foto (hub) */ .hero-split { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center; } /* La foto va en images/; si no carga, se ven las iniciales */ .portrait { position: relative; width: clamp(170px, 24vw, 250px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); border: 1px solid var(--line); } .portrait .initials { font-family: var(--font-display); font-weight: 700; font-size: 3.2rem; color: var(--accent); } .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 720px) { .hero-split { grid-template-columns: 1fr; gap: 1.8rem; } .portrait { order: -1; width: 150px; } } /* ---------- Recuadro destacado (Optimización en Acción) ---------- */ .promo { background: var(--accent-soft); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: clamp(1.4rem, 4vw, 2.4rem); display: flex; flex-direction: column; gap: 0.9rem; } .promo h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 700; } .promo p { color: var(--ink); } .promo .chip-row { margin-top: 0.3rem; } .promo .btn { align-self: flex-start; margin-top: 0.6rem; } /* ---------- Botones ---------- */ .btn { display: inline-block; font-family: var(--font-label); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 0.85rem 1.3rem; border-radius: 4px; background: var(--accent); color: var(--on-accent); transition: filter 0.15s ease; } .btn:hover { filter: brightness(0.92); } /* ---------- Secciones ---------- */ .section { padding-block: 3.5rem; } /* Fondos alternados con el tono de la página */ main > .section:nth-child(even of .section) { background: var(--accent-faint); } .section h2 { font-size: 1.55rem; font-weight: 600; margin-bottom: 1.8rem; display: flex; align-items: center; gap: 0.7rem; } .section h2::before { content: ""; width: 0.55em; height: 0.55em; background: var(--accent); flex: none; } /* ---------- Tarjetas de perfil (hub) ---------- */ .profile-grid { display: grid; /* 2 x 2 en escritorio, 1 columna en móvil */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.2rem; } .profile-card { display: flex; flex-direction: column; gap: 0.8rem; background: var(--surface); border: 1px solid var(--line); padding: 1.6rem 1.5rem 1.5rem; text-decoration: none; color: var(--ink); transition: border-color 0.15s ease, transform 0.15s ease; } .profile-card:hover { border-color: var(--card-accent); transform: translateY(-2px); } .profile-card .eyebrow { color: var(--card-accent); } .profile-card h3 { font-size: 1.3rem; font-weight: 600; } .profile-card:hover h3 { color: var(--card-accent); } .profile-card p { font-size: 0.98rem; color: var(--muted); } .profile-card .go { margin-top: auto; font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--card-accent); } .profile-card.card-research { --card-accent: var(--c-research); } .profile-card.card-growth { --card-accent: var(--c-growth); } .profile-card.card-data { --card-accent: var(--c-data); } .profile-card.card-teach { --card-accent: var(--c-teach); } /* ---------- Listas de servicios ---------- */ .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.6rem 2.2rem; } /* Para 4 elementos: 2 x 2 en escritorio */ .service-grid.pairs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .service { border-top: 2px solid var(--line); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .service h3 { font-size: 1.08rem; font-weight: 600; } .service p { font-size: 0.97rem; color: var(--muted); } /* ---------- Destacados ---------- */ .highlight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.3rem; } .highlight-list li { border-left: 3px solid var(--accent); padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.25rem; } .highlight-list strong { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; } .highlight-list span { color: var(--muted); font-size: 0.97rem; } /* Estado de una publicación (publicada, en revisión, en preparación) */ .status { align-self: flex-start; font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: 3px; padding: 0.05rem 0.45rem; } .highlight-list .meta { font-size: 0.9rem; } /* ---------- Cifras destacadas ---------- */ .stat-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.2rem 2rem; } .stat-row li { display: flex; flex-direction: column; gap: 0.3rem; } .stat-row strong { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 700; line-height: 1.1; color: var(--accent); } .stat-row span { font-size: 0.95rem; color: var(--muted); max-width: 30ch; } /* ---------- Datos rápidos / stack ---------- */ .chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip { font-family: var(--font-label); font-size: 0.8rem; padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); } /* ---------- CTA / contacto ---------- */ .cta { background: var(--deep); color: var(--on-deep); padding-block: 3.2rem; } .cta h2 { font-size: 1.7rem; font-weight: 600; margin-bottom: 0.8rem; } .cta p { color: var(--on-deep-muted); margin-bottom: 1.5rem; } .cta .mail { font-family: var(--font-label); font-size: clamp(0.95rem, 2.5vw, 1.15rem); color: var(--on-deep); word-break: break-all; } .cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; } /* En el bloque profundo, el botón invierte colores */ .cta .btn { background: var(--on-deep); color: var(--deep); } /* ---------- Pie ---------- */ .site-foot { background: var(--accent-soft); border-top: 3px solid var(--accent); padding-block: 2.2rem 2.2rem; } .foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.4rem 2rem; flex-wrap: wrap; margin-bottom: 1.6rem; } .foot-id { display: flex; flex-direction: column; gap: 0.3rem; } .foot-tag { font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); } /* Redes sociales */ .social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; } .social a { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--muted); text-decoration: none; padding-block: 0.3rem; } .social a:hover { color: var(--accent); } .social svg { width: 18px; height: 18px; flex: none; } .foot-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); } .foot-row a { color: var(--muted); } .foot-row a:hover { color: var(--ink); } /* Enlace final a learn-optimization, en todas las páginas */ .foot-row .foot-learn { color: var(--accent); text-decoration: none; } .foot-row .foot-learn [data-i18n] { text-decoration: underline; text-underline-offset: 3px; } .foot-row .foot-learn .domain { white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .profile-card, .btn { transition: none; } .profile-card:hover { transform: none; } }