* { box-sizing: border-box; } /* padding:0 pisa a proposito la regla de ../css/styles.css que en desktop le reserva 280px a la izquierda del para la nav de la app principal -- esta pagina publica no tiene esa nav (solo comparte la hoja de estilos por los tokens de color/tipografia), asi que ese padding corria todo el contenido hacia la derecha en vez de centrarlo de verdad. */ body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); } .pf-page { max-width: 720px; margin: 0 auto; padding: 40px 20px 60px; } .pf-loading, .pf-error { font-family: var(--font-mono); font-size: 13px; color: var(--ink-45); padding: 60px 0; text-align: center; } .pf-brand { display: block; text-align: center; margin: 0 0 32px; font-family: "Cinzel Decorative", var(--font-ui); font-weight: 700; font-size: 22px; letter-spacing: 0.06em; color: var(--ink); text-decoration: none; } /* Una sola columna en mobile (hero arriba, galerias abajo, orden natural del HTML). En desktop pasa a dos: hero fijo a la izquierda, galerias scrolleables a la derecha -- por eso .pf-page se ensancha ahi, 720px se queda chico para dos columnas lado a lado. */ .pf-layout { display: flex; flex-direction: column; } @media (min-width: 900px) { .pf-page { max-width: 1100px; } .pf-layout { flex-direction: row; align-items: flex-start; gap: 48px; } .pf-hero { flex: none; width: 300px; position: sticky; top: 40px; } .pf-galleries { flex: 1; min-width: 0; } } /* Bloque de identidad: alineado a la izquierda (no centrado) -- misma estructura en mobile y desktop, solo cambia el ancho del contenedor. */ .pf-hero { display: flex; flex-direction: column; align-items: flex-start; text-align: left; margin-bottom: 44px; } .pf-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--field); margin-bottom: 16px; } .pf-avatar.placeholder { display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 800; font-size: 22px; color: var(--ink-45); } .pf-name { font-family: "Cinzel Decorative", var(--font-ui); font-weight: 700; font-size: 26px; line-height: 1.25; margin: 0 0 4px; } .pf-artist-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-45); margin: 0 0 14px; } .pf-location { font-family: var(--font-mono); font-size: 12px; color: var(--ink-60); margin: 0; } .pf-location a { color: inherit; } .pf-location a::after { content: " ↗"; } .pf-divider { width: 100%; height: 1px; background: var(--ink-15); border: none; margin: 16px 0; } .pf-bio { font-size: 14px; color: var(--ink-60); line-height: 1.6; margin: 0 0 20px; } .pf-cta { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 14px; border-radius: var(--radius); background: var(--ink); color: var(--bg); text-decoration: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; } .pf-section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45); margin: 0 0 12px; } .pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 40px; } /* object-fit:contain (no cover): las fotos de tatuajes vienen de celulares, en cualquier proporcion -- nunca se recortan. --field ya hace de fondo/letterbox. */ .pf-tile { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius); cursor: pointer; touch-action: pan-y; } .pf-tile-carousel { position: absolute; inset: 0; overflow: hidden; } .pf-carousel-track { display: flex; height: 100%; width: 100%; } .pf-carousel-track img { width: 100%; height: 100%; flex: none; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; } .pf-tile .pf-badge { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 999px; background: rgba(0,0,0,0.65); color: #fff; font-family: var(--font-mono); font-size: 10px; pointer-events: none; } .pf-tile .pf-badge-tatuado { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 999px; background: var(--status-senado); color: #fff; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none; } .pf-dots { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; pointer-events: none; } .pf-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.55); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); } .pf-dot.active { background: #fff; } .pf-tile-arrow { display: none; } @media (min-width: 900px) { .pf-tile-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; margin-top: -13px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; border: none; cursor: pointer; opacity: 0; transition: opacity 0.15s; font-size: 14px; line-height: 1; } .pf-tile:hover .pf-tile-arrow { opacity: 1; } .pf-tile-arrow.prev { left: 6px; } .pf-tile-arrow.next { right: 6px; } } .pf-lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; overflow-y: auto; } /* Hijo directo nada mas -- el visor de disenos (wireDesignDetail, sin tocar) pone su suelta directo dentro de .pf-lightbox. El de trabajos (con carrusel) la anida mas adentro, adrede fuera del alcance de esta regla -- si fuera "descendiente" en vez de "hijo directo" pisaria el tamano que le pone .pf-carousel-track img mas abajo. */ .pf-lightbox > img { max-width: 100%; max-height: 70vh; object-fit: contain; } .pf-lightbox-nav { display: flex; align-items: center; gap: 20px; color: #fff; font-family: var(--font-mono); font-size: 12px; } .pf-lightbox-nav button { background: none; border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: var(--radius); padding: 6px 12px; cursor: pointer; } .pf-lightbox-close { background: none; border: none; color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; cursor: pointer; } /* ---- Visor de un trabajo, con carrusel (wireLightbox) ---- */ .pf-lightbox-panel { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 12px; } .pf-lightbox-header { display: flex; align-items: center; justify-content: space-between; } .pf-lightbox-stage { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); } .pf-lightbox-imgwrap { position: relative; height: min(60vh, 500px); border-radius: var(--radius); overflow: hidden; } .pf-lightbox-imgwrap .pf-carousel-track, .pf-lightbox-imgwrap .pf-carousel-track img { height: 100%; } .pf-lightbox-arrow { position: absolute; top: 50%; margin-top: -17px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; border: none; cursor: pointer; font-size: 18px; line-height: 1; } .pf-lightbox-arrow.prev { left: 10px; } .pf-lightbox-arrow.next { right: 10px; } .pf-lightbox-dots { display: flex; justify-content: center; gap: 5px; } .pf-lightbox-dots .pf-dot { background: rgba(255,255,255,0.3); box-shadow: none; } .pf-lightbox-dots .pf-dot.active { background: #fff; } .pf-lightbox-panel .pf-design-info { max-width: none; text-align: left; } .pf-lightbox-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; margin-bottom: 10px; } .pf-meta-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 2px; } .pf-meta-value { color: #fff; font-size: 13px; margin: 0; } .pf-design-info { max-width: 460px; text-align: center; } .pf-design-name { color: #fff; font-family: var(--font-ui); font-weight: 800; font-size: 16px; margin: 0 0 6px; } .pf-design-tatuado { color: var(--status-senado); font-weight: 700; } .pf-design-meta { color: rgba(255,255,255,0.6); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; margin: 0 0 8px; } .pf-design-desc { color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.5; margin: 0; }