/* ========================================================================== Reset base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background-color: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } h1, h2, h3, p, ul { margin: 0; } ul { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } /* Foco accesible, igual al del sitio de referencia */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } /* ========================================================================== Layout ========================================================================== */ .container { max-width: var(--container-max-width); margin: 0 auto; padding: var(--container-padding-y-mobile) var(--container-padding-x); } @media (min-width: 640px) { .container { padding-top: var(--container-padding-y-desktop); padding-bottom: var(--container-padding-y-desktop); } } .section { margin-bottom: var(--space-section-gap); } .section:last-child { margin-bottom: 0; } .section-title { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: var(--leading-relaxed); margin-bottom: var(--space-heading-gap); } /* ========================================================================== Links de texto (inline, dentro de párrafos/bio) ========================================================================== */ .link { font-weight: var(--font-weight-medium); color: var(--color-text-primary); text-decoration-line: underline; text-decoration-color: var(--color-link-underline); text-underline-offset: 3px; transition: text-decoration-color var(--transition-base) var(--ease-out); } .link:hover { text-decoration-color: var(--color-link-underline-hover); } /* ========================================================================== Íconos (sprite SVG, ver al inicio del ) ========================================================================== */ .icon-arrow { width: 1rem; /* 16px */ height: 1rem; flex-shrink: 0; color: var(--color-text-tertiary); transition: color var(--transition-base) var(--ease-out); } /* ========================================================================== Intro ========================================================================== */ .intro { display: flex; flex-direction: column; gap: var(--space-intro-gap); margin-bottom: var(--space-intro-section-gap); } .intro__header { display: flex; align-items: center; gap: 0.75rem; } .intro__avatar { width: var(--avatar-size); height: var(--avatar-size); border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; } .intro__name { font-size: var(--text-base); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: var(--leading-snug); } .intro__role { font-size: var(--text-base); font-weight: var(--font-weight-normal); color: var(--color-text-secondary); line-height: var(--leading-snug); } .intro__bio-group { display: flex; flex-direction: column; gap: var(--space-bio-paragraph-gap); } .intro__bio { color: var(--color-text-secondary); line-height: var(--leading-relaxed); } /* ========================================================================== Proyectos (formato posteo) ========================================================================== */ .post-list { display: flex; flex-direction: column; gap: var(--space-post-item-gap); } .post-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 -0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-xl); transition: background-color var(--transition-base) var(--ease-out); } .post-item:hover { background-color: var(--color-row-hover-bg); } .post-item__title { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--color-text-secondary); transition: color var(--transition-base) var(--ease-out); } .post-item:hover .post-item__title, .post-item:hover .post-item__meta, .post-item:hover .icon-arrow { color: var(--color-text-primary); } .post-item__meta { flex-shrink: 0; font-size: var(--text-base); color: var(--color-text-tertiary); white-space: nowrap; transition: color var(--transition-base) var(--ease-out); } /* ========================================================================== Educación ========================================================================== */ .edu-list { display: flex; flex-direction: column; gap: var(--space-post-item-gap); } .edu-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 -0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-xl); transition: background-color var(--transition-base) var(--ease-out); } .edu-item:hover { background-color: var(--color-row-hover-bg); } .edu-item__left { display: flex; flex-direction: column; gap: 0.125rem; } .edu-item__institution { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--color-text-secondary); transition: color var(--transition-base) var(--ease-out); } .edu-item:hover .edu-item__institution, .edu-item:hover .edu-item__year, .edu-item:hover .icon-arrow { color: var(--color-text-primary); } .edu-item__title { font-size: var(--text-sm); color: var(--color-text-tertiary); } .edu-item__year { flex-shrink: 0; font-size: var(--text-base); color: var(--color-text-tertiary); white-space: nowrap; transition: color var(--transition-base) var(--ease-out); } /* ========================================================================== Contacto ========================================================================== */ .link-list { display: flex; flex-direction: column; gap: 0.625rem; } .link-list a { display: inline-block; width: fit-content; font-weight: var(--font-weight-medium); color: var(--color-text-primary); text-decoration-line: underline; text-decoration-color: var(--color-link-underline); text-underline-offset: 3px; transition: text-decoration-color var(--transition-base) var(--ease-out); } .link-list a:hover { text-decoration-color: var(--color-link-underline-hover); } /* ========================================================================== Página de detalle de proyecto ========================================================================== */ .back-link { display: inline-block; margin-bottom: var(--space-section-gap); font-size: var(--text-sm); color: var(--color-text-secondary); } .project-detail__title { font-size: var(--text-2xl); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: var(--leading-snug); margin-bottom: var(--space-heading-gap); } .project-detail__meta { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-bottom: var(--space-section-gap); } .project-detail__body p { color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-paragraph-gap); } .project-detail__body p:last-child { margin-bottom: 0; }