/* ============================================================================ VICENT HERNÁNDEZ-CHOVER — Complementos de la web personal Se carga DESPUÉS de styles.css y sólo añade lo específico de este sitio: 1. Selector de idioma (ES / VA) — muestra/oculta contenido sin recargar 2. Monograma del hero (sin foto) 3. Ficha de datos (perfil) 4. Trayectoria / formación (timeline) 5. Caja destacada ECO-GREEN 6. Enlaces académicos (chips) 7. Ajustes de la lista de publicaciones Reutiliza los tokens de diseño de styles.css (:root). ========================================================================== */ /* ============================================================================ 1. SELECTOR DE IDIOMA Ambos idiomas están en el HTML (bueno para SEO y para quien no tenga JS). Por defecto se muestra español; al cambiar data-lang en se alterna. ========================================================================== */ [data-lang="es"] [data-l="va"], [data-lang="va"] [data-l="es"] { display: none !important; } .lang-switch { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--gray-200); border-radius: 999px; padding: 3px; background: var(--white); margin-left: var(--space-2); } .lang-switch__btn { appearance: none; border: 0; background: transparent; color: var(--gray-500); font: inherit; font-size: var(--fs-small); font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); } .lang-switch__btn:hover { color: var(--green-700); } .lang-switch__btn[aria-pressed="true"] { background: var(--green-700); color: var(--white); } /* ============================================================================ 2. HERO — avatar circular (estilo LinkedIn) + texto ========================================================================== */ .hero__inner { display: block; } .hero__media { margin-bottom: var(--space-3); } .hero__photo { width: clamp(88px, 9vw, 120px); height: clamp(88px, 9vw, 120px); border-radius: 50%; object-fit: cover; object-position: center top; border: 4px solid var(--white); box-shadow: var(--shadow-md); background: var(--gray-100); } /* Monograma: se conserva como respaldo si la foto no cargara */ .hero__monogram { display: inline-flex; align-items: center; justify-content: center; width: clamp(72px, 8vw, 104px); height: clamp(72px, 8vw, 104px); border-radius: 24px; background: linear-gradient(150deg, var(--green-700), var(--petrol-600)); color: var(--white); font-weight: 700; letter-spacing: -0.04em; font-size: clamp(1.75rem, 1rem + 2.4vw, 2.75rem); margin-bottom: var(--space-3); box-shadow: var(--shadow-md); } .hero__role { font-size: var(--fs-lead); color: var(--green-700); font-weight: 600; margin: 0 0 var(--space-2); } .hero__affil { color: var(--gray-500); font-size: var(--fs-small); margin-bottom: var(--space-3); } /* ============================================================================ 3. FICHA DE DATOS (perfil) ========================================================================== */ .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); margin-top: var(--space-4); } .fact { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: var(--space-3); background: var(--white); } .fact__label { display: block; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--green-700); margin-bottom: 6px; } .fact__value { font-weight: 600; color: var(--gray-900); } .fact__value small { display: block; font-weight: 400; color: var(--gray-500); font-size: var(--fs-small); } /* ============================================================================ 4. TRAYECTORIA / FORMACIÓN — línea de tiempo sencilla ========================================================================== */ .timeline { position: relative; margin-top: var(--space-4); } .timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--gray-200); } .timeline__item { position: relative; padding-left: var(--space-4); padding-bottom: var(--space-4); } .timeline__item:last-child { padding-bottom: 0; } .timeline__item::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid var(--green-700); } .timeline__year { font-size: var(--fs-small); font-weight: 600; color: var(--petrol-600); } .timeline__title { font-size: var(--fs-h3); margin: 2px 0 4px; } .timeline__place { color: var(--gray-500); font-size: var(--fs-small); } /* ============================================================================ 5. CAJA DESTACADA — enlace a ECO-GREEN ANALYTICS ========================================================================== */ .callout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); background: var(--green-050); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .callout__mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--green-700); color: var(--white); } .callout__mark svg { width: 30px; height: 30px; stroke: currentColor; } .callout__eyebrow { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--green-700); } .callout__title { font-size: var(--fs-h3); margin: 2px 0 4px; } .callout__text { color: var(--gray-500); font-size: var(--fs-small); margin: 0; } @media (max-width: 640px) { .callout { grid-template-columns: 1fr; text-align: left; } } /* ============================================================================ 5b. CONTACTO — sólo información (sin formulario) ========================================================================== */ .contact__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); } .contact__info .contact__block { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: var(--space-4); background: var(--white); } .contact__info .contact__title { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; color: var(--green-700); margin-bottom: var(--space-2); } /* ============================================================================ 6. ENLACES ACADÉMICOS (chips) ========================================================================== */ .links { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); } .link-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--gray-200); border-radius: 999px; padding: 8px 16px; font-size: var(--fs-small); font-weight: 600; color: var(--gray-900); background: var(--white); transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); } .link-chip:hover { border-color: var(--green-700); color: var(--green-700); text-decoration: none; transform: translateY(-1px); } .link-chip svg { width: 16px; height: 16px; } /* ============================================================================ 7. LISTA DE PUBLICACIONES ========================================================================== */ .pubs__year { font-size: var(--fs-h3); color: var(--green-700); margin: var(--space-4) 0 var(--space-2); padding-bottom: 6px; border-bottom: 2px solid var(--green-050); } .pubs__year:first-child { margin-top: 0; } /* Badge de cuartil (extiende .pub__badge de styles.css por si acaso) */ .pub__badge { display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); white-space: nowrap; } .pub__badge--q1 { background: var(--green-700); color: var(--white); } .pub__badge--q2 { background: var(--petrol-600); color: var(--white); } .filters { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); } .filter { appearance: none; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-500); font: inherit; font-size: var(--fs-small); font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: all var(--t-fast); } .filter:hover { border-color: var(--green-700); color: var(--green-700); } .filter.is-active { background: var(--green-700); border-color: var(--green-700); color: var(--white); }