/* Peptivé — Catálogo Completo de Productos Estilos exclusivos de portafolio.html. Requiere tokens.css, base.css y sections.css cargados antes (reutiliza .container, .grain-overlay, .fade-up, .sr-only y el header/footer compartidos). */ body { background-color: var(--travertine-light); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .portfolio-container { max-width: 1200px; } /* QA de lanzamiento — Hallazgo 4: --s-7 (128px) es menor que la altura real del header fijo (137px), así que el título quedaba solapado (-9px medido en desktop). Mismo ajuste ya aplicado en calculadora.css/servicio.css para el mismo problema. */ .portfolio-hero { padding: 190px 0 var(--s-5); text-align: center; } .portfolio-hero-title { font-family: var(--font-editorial); font-weight: 300; font-variation-settings: 'opsz' 144; font-size: var(--text-heading-l-size); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink-100); margin-bottom: var(--s-2); } .portfolio-hero-subtitle { font-family: var(--font-body); font-size: var(--text-body-l-size); color: var(--ink-70); max-width: 56ch; margin-inline: auto; margin-bottom: var(--s-5); } /* ============================================ BUSCADOR ============================================ */ /* Barra de búsqueda + filtros pegajosa (Fase 5): mismo clearance vertical que section[id] usa para el header fijo (sections.css), reutilizado aquí en vez de un valor nuevo. Fondo sólido igual al de para que la grilla de resultados no se transparente por debajo al hacer scroll. */ .portfolio-filter-bar { position: sticky; top: 100px; z-index: 20; background-color: var(--travertine-light); padding-block: var(--s-3); } @media (min-width: 1024px) { .portfolio-filter-bar { top: 160px; } } .portfolio-search-wrap { max-width: 640px; margin: 0 auto var(--s-4); } .portfolio-search-input { width: 100%; padding: var(--s-3) var(--s-4); border: 1px solid var(--ink-30); border-radius: var(--r-pill); background-color: var(--paper); box-shadow: var(--shadow-sm); font-family: var(--font-body); font-size: var(--text-body-m-size); color: var(--ink-100); text-align: center; } .portfolio-search-input::placeholder { color: var(--ink-30); } .portfolio-search-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--ink-70); } /* ============================================ PILLS DE CATEGORÍA ============================================ */ .portfolio-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); } .portfolio-pill { padding: var(--s-1) var(--s-3); border: 1px solid var(--ink-30); border-radius: var(--r-pill); background-color: transparent; font-family: var(--font-body); font-weight: var(--weight-body-medium); font-size: var(--text-body-m-size); color: var(--ink-70); cursor: pointer; transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out; } .portfolio-pill:hover { border-color: var(--ink-70); color: var(--ink-100); } .portfolio-pill.is-active { background-color: var(--ink-100); border-color: var(--ink-100); color: var(--paper); } .portfolio-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* La barra de filtros ahora es pegajosa (Fase 5): en mobile, dejar que las pills envuelvan en 4-5 filas ocuparía casi toda la pantalla una vez fija. Una sola fila con scroll horizontal mantiene la barra compacta sin quitar ninguna categoría. */ @media (max-width: 639px) { .portfolio-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: var(--s-1); } .portfolio-pill { flex: 0 0 auto; } } /* ============================================ RESULTADOS — grid de tarjetas resumen ============================================ */ .portfolio-results { padding-bottom: var(--s-7); } .portfolio-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } @media (min-width: 640px) { .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* display:flex de abajo pisaría [hidden] sin esto — mismo bug ya visto en el FAB/modal de este archivo. */ .portfolio-teaser[hidden] { display: none; } .portfolio-teaser { display: flex; flex-direction: column; align-items: flex-start; background-color: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: var(--s-4); transition: box-shadow 200ms ease-out, transform 200ms ease-out; } .portfolio-teaser-media { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; margin-bottom: var(--s-3); background-color: var(--travertine); } .portfolio-teaser-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Reincorporación de foto por producto (2026-09-08/09): los 5 productos que nunca tuvieron imagen en brand_assets/imagenes/ (Cagrilintide, Glutathione, NAD+, SS-31, Kisspeptin-10) ya están integrados. .portfolio-teaser-media--empty se conserva como marcador semántico/aria para cualquier tarjeta futura sin foto. */ .portfolio-teaser:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07); transform: translateY(-2px); } .portfolio-teaser-tag { display: inline-flex; align-items: center; padding: 4px var(--s-2); border-radius: var(--r-pill); background-color: var(--travertine); font-family: var(--font-body); font-weight: var(--weight-body-semibold); font-size: var(--text-label-size); line-height: var(--text-label-line); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-deep); margin-bottom: var(--s-2); } .portfolio-teaser-title { font-family: var(--font-editorial); font-weight: 300; font-variation-settings: 'opsz' 32; font-size: var(--text-heading-m-size); line-height: 1.15; color: var(--ink-100); margin-bottom: var(--s-2); } .portfolio-teaser-text { color: var(--ink-70); margin-bottom: var(--s-3); } /* Ajuste de navegación de portafolio (2026-09-08): primer nivel simplificado a nombre + presentaciones + "Ver información". Reutiliza la escala tipográfica y el color de cuerpo ya usados en .portfolio-teaser-text -- ninguna paleta ni tamaño nuevo. */ .portfolio-teaser-presentations { font-family: var(--font-body); font-size: var(--text-body-m-size); color: var(--ink-70); margin-bottom: var(--s-3); } .portfolio-teaser-link { margin-top: auto; border: none; background: none; padding: 0; cursor: pointer; font-family: var(--font-body); font-weight: var(--weight-body-bold); font-size: var(--text-body-m-size); color: var(--ink-100); transition: color 200ms ease-out; } .portfolio-teaser-link:hover { color: var(--gold-deep); } .portfolio-teaser-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .portfolio-teaser-protocols-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s-2); font-family: var(--font-body); font-weight: var(--weight-body-bold); font-size: var(--text-body-s-size, var(--text-label-size)); color: var(--gold-deep); text-decoration: none; } .portfolio-teaser-protocols-cta:hover { color: var(--ink-100); } .portfolio-teaser-protocols-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .portfolio-empty { text-align: center; color: var(--ink-70); padding: var(--s-5) 0; } /* ============================================ FAB — botón flotante de descarga ============================================ */ .portfolio-fab { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 90; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: none; border-radius: var(--r-pill); background-color: var(--travertine-deep); color: var(--ink-100); font-family: var(--font-body); font-weight: var(--weight-body-bold); font-size: var(--text-body-m-size); box-shadow: 0 8px 24px rgba(13, 13, 13, 0.14); cursor: pointer; transition: transform 200ms ease-out, box-shadow 200ms ease-out; } .portfolio-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13, 13, 13, 0.18); } /* UX Uplift — Fase 5/11: en mobile angosto, el FAB con texto completo ("Solicitar Lista de Precios") solapa la fila de pills de categoría justo donde el usuario está filtrando -- se reduce a solo ícono (el texto sigue disponible para lectores de pantalla, no se quita ni se reescribe, solo se oculta visualmente por debajo de 480px). */ @media (max-width: 480px) { .portfolio-fab { padding: var(--s-3); } .portfolio-fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } .portfolio-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ============================================ MODAL ============================================ */ .portfolio-modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--s-4); background-color: color-mix(in srgb, var(--ink) 55%, transparent); animation: portfolioFadeIn 200ms ease-out; } /* display:flex de arriba pisaría [hidden] sin esto — mismo bug ya visto en Stacks, el Generador y la calculadora. */ .portfolio-modal-overlay[hidden] { display: none; } @keyframes portfolioFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes portfolioProfileIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .portfolio-modal { position: relative; width: 100%; max-width: 440px; background-color: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--s-5); animation: portfolioProfileIn 250ms ease-out; } .portfolio-modal-close { position: absolute; top: var(--s-3); right: var(--s-3); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 50%; font-size: 1.25rem; line-height: 1; color: var(--ink-50); cursor: pointer; } .portfolio-modal-close:hover { background-color: var(--travertine); color: var(--ink-100); } .portfolio-modal-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .portfolio-modal-title { font-family: var(--font-editorial); font-weight: 300; font-variation-settings: 'opsz' 32; font-size: var(--text-heading-m-size); line-height: 1.2; color: var(--ink-100); max-width: 26ch; margin-bottom: var(--s-4); } .portfolio-modal-form { display: flex; flex-direction: column; gap: var(--s-2); } /* display:flex de arriba pisaría [hidden] sin esto. */ .portfolio-modal-form[hidden] { display: none; } .portfolio-modal-input { width: 100%; padding: var(--s-3); border: 1px solid var(--ink-30); border-radius: var(--r-sm); background-color: var(--paper); font-family: var(--font-body); font-size: var(--text-body-m-size); color: var(--ink-100); } .portfolio-modal-input::placeholder { color: var(--ink-30); } .portfolio-modal-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--ink-100); } .portfolio-modal-submit { width: 100%; padding: var(--s-3) var(--s-5); border: none; border-radius: var(--r-sm); background-color: var(--ink-100); color: var(--paper); font-family: var(--font-body); font-weight: var(--weight-body-bold); font-size: var(--text-body-m-size); cursor: pointer; } .portfolio-modal-submit:hover { background-color: var(--ink-90); } .portfolio-modal-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .portfolio-modal-success { text-align: center; padding-block: var(--s-3); } .portfolio-modal-success-icon { display: block; font-size: 2rem; color: var(--gold-deep); margin-bottom: var(--s-2); } .portfolio-modal-success-text { color: var(--ink-70); } /* ============================================ FICHA CLÍNICA — modal de detalle a dos columnas ============================================ */ .portfolio-profile-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--s-4); background-color: color-mix(in srgb, var(--ink) 55%, transparent); animation: portfolioFadeIn 200ms ease-out; } /* display:flex de arriba pisaría [hidden] sin esto — mismo bug ya visto en el resto de los modales de este archivo. */ .portfolio-profile-overlay[hidden] { display: none; } .portfolio-profile { position: relative; width: 100%; max-width: 1200px; max-height: 90vh; overflow-y: auto; background-color: var(--travertine-light); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--s-5); animation: portfolioProfileIn 250ms ease-out; } .portfolio-profile-close { position: absolute; top: var(--s-4); right: var(--s-4); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--ink-50); cursor: pointer; } .portfolio-profile-close:hover { background-color: var(--travertine-deep); color: var(--ink-100); } .portfolio-profile-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .portfolio-profile-header { max-width: 46rem; padding-right: var(--s-6); padding-bottom: var(--s-4); margin-bottom: var(--s-5); border-bottom: 1px solid var(--ink-30); } .portfolio-profile-header-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); } .portfolio-profile-tag { display: inline-flex; align-items: center; padding: 4px var(--s-2); border-radius: var(--r-pill); background-color: var(--travertine-deep); font-family: var(--font-body); font-weight: var(--weight-body-semibold); font-size: var(--text-label-size); line-height: var(--text-label-line); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-deep); } /* display:inline-flex de abajo pisaría [hidden] sin esto — mismo bug ya visto en el resto de los modales de este archivo. */ .portfolio-profile-status-badge[hidden] { display: none; } .portfolio-profile-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px var(--s-2); border-radius: var(--r-pill); background-color: var(--travertine); font-family: var(--font-body); font-size: var(--text-label-size); line-height: var(--text-label-line); color: var(--ink-70); } .portfolio-profile-status-badge-icon { font-size: 0.85rem; line-height: 1; } .portfolio-profile-title { font-family: var(--font-editorial); font-weight: 300; font-variation-settings: 'opsz' 144; font-size: var(--text-heading-l-size); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink-100); margin-bottom: var(--s-2); } .portfolio-profile-subtitle { font-family: var(--font-body); font-size: var(--text-body-l-size); color: var(--ink-70); } .portfolio-profile-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } @media (min-width: 768px) { .portfolio-profile-body { grid-template-columns: 3fr 2fr; } } .portfolio-profile-main { min-width: 0; } .portfolio-profile-section { margin-bottom: var(--s-4); } .portfolio-profile-heading { font-family: var(--font-body); font-weight: var(--weight-body-bold); font-size: var(--text-body-l-size); color: var(--ink-100); margin-bottom: var(--s-2); } .portfolio-profile-text { color: var(--ink-70); max-width: 65ch; } /* ============================================ TABS — Resumen / Guía Profunda ============================================ */ /* display:flex de abajo pisaría [hidden] sin esto — mismo bug ya visto en el resto de los modales de este archivo. */ .portfolio-profile-tabs[hidden] { display: none; } .portfolio-profile-tabs { display: flex; gap: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--ink-30); } .portfolio-profile-tab { padding: var(--s-2) 0 var(--s-3); border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font-family: var(--font-body); font-weight: var(--weight-body-semibold); font-size: var(--text-body-m-size); color: var(--ink-50); cursor: pointer; transition: color 200ms ease-out, border-color 200ms ease-out; } .portfolio-profile-tab:hover { color: var(--ink-100); } .portfolio-profile-tab.is-active { color: var(--ink-100); border-bottom-color: var(--gold); } .portfolio-profile-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .portfolio-profile-also-known { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-variation-settings: 'opsz' 24; font-size: var(--text-body-m-size); color: var(--ink-50); margin-bottom: var(--s-4); } .portfolio-profile-also-known-label { font-style: normal; font-weight: var(--weight-body-semibold); margin-right: 4px; } .portfolio-profile-bullet-list { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2); } .portfolio-profile-bullet-list li { position: relative; padding-left: var(--s-3); color: var(--ink-70); max-width: 65ch; } .portfolio-profile-bullet-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background-color: var(--gold); } .portfolio-profile-pills { display: flex; flex-wrap: wrap; gap: var(--s-1); } .portfolio-profile-pill { display: inline-flex; align-items: center; padding: 4px var(--s-2); border-radius: var(--r-pill); background-color: var(--travertine-deep); font-family: var(--font-body); font-weight: var(--weight-body-semibold); font-size: var(--text-label-size); line-height: var(--text-label-line); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-70); } .portfolio-profile-considerations { display: flex; gap: var(--s-2); background-color: var(--gold-pale); border-left: 3px solid var(--gold); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); } .portfolio-profile-considerations-icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.4; } .portfolio-profile-considerations-heading { font-family: var(--font-body); font-weight: var(--weight-body-bold); font-size: var(--text-body-m-size); color: var(--ink-100); margin-bottom: var(--s-1); } .portfolio-profile-considerations-text { font-family: var(--font-body); color: var(--ink-90); } .portfolio-profile-faq-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--s-2); border-top: 1px solid var(--ink-30); } .portfolio-profile-faq-item { border-bottom: 1px solid var(--ink-30); } .portfolio-profile-faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-3); list-style: none; font-family: var(--font-body); font-weight: var(--weight-body-bold); font-size: var(--text-body-m-size); color: var(--ink-100); cursor: pointer; } .portfolio-profile-faq-question::-webkit-details-marker { display: none; } .portfolio-profile-faq-question::after { content: '+'; flex-shrink: 0; font-weight: var(--weight-body-regular); font-size: var(--text-heading-m-size); line-height: 1; color: var(--ink-50); transition: transform 300ms ease-out; } .portfolio-profile-faq-item[open] .portfolio-profile-faq-question::after { transform: rotate(45deg); } .portfolio-profile-faq-question:hover { color: var(--gold-deep); } .portfolio-profile-faq-question:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } .portfolio-profile-faq-answer { max-width: 65ch; padding-bottom: var(--s-3); color: var(--ink-70); } .portfolio-profile-references-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--s-2); border-top: 1px solid var(--ink-30); } .portfolio-profile-reference { padding-block: var(--s-3); border-bottom: 1px solid var(--ink-30); } .portfolio-profile-reference-label { display: inline-flex; align-items: center; padding: 4px var(--s-2); border-radius: var(--r-pill); background-color: var(--travertine-deep); font-family: var(--font-body); font-weight: var(--weight-body-semibold); font-size: var(--text-label-size); line-height: var(--text-label-line); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-70); margin-bottom: var(--s-2); } .portfolio-profile-reference-citation { max-width: 65ch; color: var(--ink-90); margin-bottom: var(--s-1); } .portfolio-profile-reference-topic { display: block; font-size: 0.875rem; color: var(--ink-50); margin-bottom: var(--s-2); } .portfolio-profile-reference-links { display: flex; flex-wrap: wrap; gap: var(--s-3); } .portfolio-profile-reference-link { font-family: var(--font-body); font-weight: var(--weight-body-semibold); font-size: var(--text-label-size); color: var(--ink-100); } .portfolio-profile-reference-link:hover { color: var(--gold-deep); } .portfolio-profile-reference-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* display:inline-flex de abajo pisaría [hidden] sin esto — mismo bug ya visto en el resto de los modales de este archivo. */ .portfolio-profile-pubmed[hidden] { display: none; } .portfolio-profile-pubmed { display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: var(--weight-body-bold); font-size: var(--text-body-m-size); color: var(--ink-100); } .portfolio-profile-pubmed:hover { color: var(--gold-deep); } .portfolio-profile-pubmed:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .portfolio-profile-pending { background-color: var(--travertine-deep); border: 1px dashed var(--ink-30); border-radius: var(--r-sm); padding: var(--s-4); } .portfolio-profile-pending-text { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-variation-settings: 'opsz' 24; font-size: var(--text-body-m-size); color: var(--ink-70); } .portfolio-profile-aside { min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); } @media (min-width: 768px) { .portfolio-profile-aside { position: sticky; top: var(--s-5); } } .portfolio-profile-lead-card { display: flex; flex-direction: column; background-color: var(--paper); border-radius: var(--r-md); box-shadow: 0 8px 32px rgba(13, 13, 13, 0.08); padding: var(--s-5) var(--s-4); } .portfolio-profile-lead-title { font-family: var(--font-editorial); font-weight: 300; font-variation-settings: 'opsz' 32; font-size: 1.5rem; line-height: 1.25; color: var(--ink-100); margin-bottom: var(--s-2); } .portfolio-profile-lead-text { font-size: var(--text-body-m-size); color: var(--ink-70); margin-bottom: var(--s-4); } .portfolio-profile-lead-form { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; } /* display:flex de arriba pisaría [hidden] sin esto — mismo bug ya visto en el resto de los modales de este archivo. */ .portfolio-profile-lead-form[hidden] { display: none; } .portfolio-profile-lead-input { width: 100%; padding: var(--s-3); border: 1px solid var(--ink-30); border-radius: var(--r-sm); background-color: var(--paper); font-family: var(--font-body); font-size: var(--text-body-m-size); color: var(--ink-100); } .portfolio-profile-lead-input::placeholder { color: var(--ink-30); } .portfolio-profile-lead-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--ink-100); } .portfolio-profile-lead-submit { width: 100%; padding: var(--s-3) var(--s-5); border: none; border-radius: var(--r-sm); background-color: var(--ink-100); color: var(--paper); font-family: var(--font-body); font-weight: var(--weight-body-bold); font-size: var(--text-body-m-size); cursor: pointer; } .portfolio-profile-lead-submit:hover { background-color: var(--ink-90); } .portfolio-profile-lead-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ============================================ COLUMNA DERECHA — bloques B/C/D (investigado para, comparar, péptidos relacionados) ============================================ */ .portfolio-profile-side-block { padding-top: var(--s-4); border-top: 1px solid var(--ink-30); } .portfolio-profile-side-heading { font-family: var(--font-body); font-weight: var(--weight-body-bold); font-size: var(--text-body-m-size); color: var(--ink-100); margin-bottom: var(--s-2); } .portfolio-profile-side-list { display: flex; flex-direction: column; gap: var(--s-1); } .portfolio-profile-side-list li { position: relative; padding-left: var(--s-3); font-size: var(--text-body-m-size); color: var(--ink-70); } .portfolio-profile-side-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background-color: var(--gold); } .portfolio-profile-related-list { display: flex; flex-direction: column; gap: var(--s-3); } .portfolio-profile-related-list li { display: flex; flex-direction: column; gap: 2px; } /* Ítem de relacionado clickeable — reutiliza renderProfile() para mostrar la ficha del producto relacionado dentro del mismo modal, sin navegar a una página nueva. */ .portfolio-profile-related-button { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0; border: none; background: none; text-align: left; cursor: pointer; } .portfolio-profile-related-button:hover strong { color: var(--gold-deep); } .portfolio-profile-related-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .portfolio-profile-related-list strong { font-family: var(--font-body); font-weight: var(--weight-body-bold); font-size: var(--text-body-m-size); color: var(--ink-100); } .portfolio-profile-related-list span { font-size: var(--text-body-m-size); color: var(--ink-70); } @media (prefers-reduced-motion: reduce) { .portfolio-teaser, .portfolio-modal-overlay, .portfolio-profile-overlay, .portfolio-modal, .portfolio-profile { transition: none; animation: none; } }