/* ============================================================================ PERFIL PÚBLICO — traspaso de «Perfil Creativo.dc.html» (Claude Design, 2-ago-2026). ---------------------------------------------------------------------------- Valores tal cual salieron del diseño, no traducidos a las variables del sitio: es la forma que pidió el dueño después de tres tandas que fallaron por «interpretar» los colores. Esta página tiene paleta PROPIA -arena y tinta, no el azul del panel- y por eso vive en su hoja: mezclarla con marketing.css le cambiaría la cara a media web. Todo cuelga de .pf. Manrope NO se carga de Google Fonts, a diferencia del .dc: el contrato §9 prohíbe pedirle tipografías a un tercero (una petición más, un rastreador más y una página que se queda sin letra si ese dominio cae). Se usa la del sistema, que es la que ya usan las demás pantallas. ========================================================================== */ /* ── Guarda: esta hoja convive con la piel del sitio ───────────────────────── La página se sirve dentro de , que es lo que trae la cabecera y el pie que tienen las demás páginas. Ahí estilos-v2.css declara `.v2 a {color: cobre}` con peso (0,1,1) y `.v2 a:hover` con (0,2,1), y las reglas de esta hoja son de UNA sola clase (0,1,0): pierden. Sin esta guarda, las pestañas, los títulos de las fichas, los enlaces del costado y los dos botones salen naranjas sobre el fondo arena del diseño. No se inventa ni un color: son los mismos que el diseño declara más abajo, repetidos con `.pf` delante para que pesen más que `.v2 a`. Va arriba del todo para que las variantes de abajo -`--oscuro`, `[data-sigo]`- sigan mandando, que empatan en peso y van después. ------------------------------------------------------------------------- */ .pf .pf-btn, .pf .pf-btn:hover, .pf .pf-enlace, .pf .pf-enlace:hover, .pf .pf-pestana, .pf .pf-pestana:hover, .pf .pf-obra__titulo, .pf .pf-fija__btn, .pf .pf-fija__btn:hover, .pf .pf-btn--oscuro[data-sigo="1"], .pf .pf-btn--oscuro[data-sigo="1"]:hover { color: var(--pf-tinta); } .pf .pf-btn--oscuro, .pf .pf-btn--oscuro:hover { color: #fff; } .pf .pf-obra__titulo:hover { color: #b4552b; } .pf { --pf-tinta: #1a1a19; --pf-fondo: #f4f3f1; --pf-linea: #e6e3de; --pf-suave: #6b665e; --pf-tenue: #9b968e; --pf-crema: #f0efec; min-height: 100vh; padding-bottom: 96px; background: var(--pf-fondo); color: var(--pf-tinta); font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .pf .num { font-variant-numeric: tabular-nums; } .pf .crece { flex: 1 1 auto; min-width: 0; } .pf .una-linea { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-franja { height: clamp(120px, 18vw, 200px); background: linear-gradient(120deg, #2b2a27 0%, #57493d 48%, #b4855c 100%); } .pf-ancho { max-width: 1220px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 32px); display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 26px); } /* ── Identidad ───────────────────────────────────────────────────────────── */ .pf-id { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2vw, 20px); margin-top: -52px; padding: 18px; border: 1px solid var(--pf-linea); border-radius: 18px; background: #fff; } /* El avatar sube fuera de la tarjeta, como en el diseño. */ .pf-avatar { width: clamp(72px, 9vw, 96px); height: clamp(72px, 9vw, 96px); flex: none; margin-top: -52px; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(140deg, #c9b9a6, #8a7561); box-shadow: 0 6px 18px rgba(26,26,25,.14); } .pf-id__texto { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 9px; } .pf-id__nombres { display: flex; flex-direction: column; gap: 3px; } .pf-nombre { margin: 0; font-size: clamp(19px, 2.6vw, 25px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; } .pf-titular { margin: 0; font-size: 13.5px; color: var(--pf-suave); } .pf-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; } .pf-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 20px; background: var(--pf-crema); font-size: 12px; color: #4a463f; } .pf-chip--grande { padding: 6px 12px; font-size: 12.5px; font-weight: 600; } .pf-chip--ok { background: #eef7f0; color: #2f7a51; font-weight: 600; padding: 5px 11px; } .pf-punto { width: 6px; height: 6px; border-radius: 50%; background: #3f9d67; } .pf-acciones { flex: 1 1 300px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .pf-btn { flex: 1 1 96px; display: inline-flex; align-items: center; justify-content: center; padding: 11px; border: 1px solid #ded9d2; border-radius: 12px; background: #fff; color: var(--pf-tinta); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; } .pf-btn:hover { border-color: var(--pf-tinta); color: var(--pf-tinta); } .pf-btn--oscuro { border-color: var(--pf-tinta); background: var(--pf-tinta); color: #fff; font-weight: 700; } .pf-btn--oscuro:hover { background: #333330; color: #fff; } /* Ya siguiendo: el boton se apaga. Sigue siendo el mismo boton -vuelve a pulsarse para dejar de seguir- pero deja de pedir atencion. */ .pf-btn--oscuro[data-sigo="1"] { background: var(--pf-crema); border-color: var(--pf-linea); color: var(--pf-tinta); } /* ── Cuerpo ──────────────────────────────────────────────────────────────── */ .pf-cuerpo { display: flex; flex-wrap: wrap-reverse; align-items: flex-start; gap: clamp(18px, 3vw, 34px); } .pf-lado { flex: 1 1 250px; display: flex; flex-direction: column; gap: 16px; } .pf-main { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .pf-tarjeta { padding: 16px 18px; border: 1px solid var(--pf-linea); border-radius: 18px; background: #fff; } .pf-cifras { display: flex; flex-direction: column; gap: 2px; } .pf-cifra { display: flex; align-items: center; padding: 7px 0; } .pf-cifra + .pf-cifra { border-top: 1px solid #f2f0ed; } .pf-cifra > span { flex: 1; font-size: 13px; color: var(--pf-suave); } .pf-cifra > b { font-size: 14px; font-weight: 700; } .pf-web { display: flex; flex-direction: column; gap: 10px; } .pf-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--pf-tenue); } .pf-enlace { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #eceae5; border-radius: 12px; color: var(--pf-tinta); text-decoration: none; font-size: 13px; font-weight: 600; } .pf-enlace:hover { border-color: var(--pf-tinta); color: var(--pf-tinta); } .pf-enlace__ico { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--pf-fondo); } .pf-enlace__fuera { color: #b3aea6; font-size: 12px; } .pf-miembro { font-size: 11.5px; color: var(--pf-tenue); padding-top: 2px; } /* ── Pestañas ────────────────────────────────────────────────────────────── */ .pf-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .pf-pestanas { display: flex; gap: 4px; padding: 4px; border-radius: 24px; background: #eae7e2; } .pf-pestana { padding: 8px 15px; border-radius: 20px; text-decoration: none; font-size: 13px; font-weight: 650; color: var(--pf-tinta); background: transparent; } .pf-pestana.es-activa { background: #fff; box-shadow: 0 1px 3px rgba(26,26,25,.12); } .pf-total { font-size: 12.5px; color: var(--pf-tenue); } /* ── Trabajos ────────────────────────────────────────────────────────────── */ .pf-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: clamp(10px, 1.4vw, 18px); } .pf-obra { display: flex; flex-direction: column; gap: 9px; } .pf-obra__foto { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #e6e3de; } .pf-obra__foto:hover { opacity: .94; } .pf-obra__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-obra__vacio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .pf-obra__lugar { position: absolute; left: 9px; top: 9px; padding: 3px 8px; border-radius: 8px; background: rgba(26,26,25,.55); color: #fff; font-size: 10.5px; font-weight: 600; } .pf-obra__pie { display: flex; align-items: flex-start; gap: 8px; } .pf-obra__pie > .crece { display: flex; flex-direction: column; gap: 2px; } .pf-obra__titulo { font-size: 13px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--pf-tinta); text-decoration: none; } .pf-obra__titulo:hover { color: #b4552b; } .pf-obra__autor { font-size: 11.5px; color: var(--pf-tenue); } .pf-obra__cifras { display: flex; align-items: center; gap: 9px; padding-top: 2px; color: var(--pf-tenue); font-size: 11.5px; } .pf-obra__cifras > span { display: flex; align-items: center; gap: 4px; } .pf-hueco { margin: 0; padding: 26px; border: 1px dashed #ded9d2; border-radius: 16px; background: #fbfaf9; color: var(--pf-tenue); font-size: 13px; text-align: center; } /* ── Sobre mí ────────────────────────────────────────────────────────────── */ .pf-sobre { display: flex; flex-direction: column; gap: 16px; padding: 22px; } .pf-bio { margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.65; color: #3a3833; text-wrap: pretty; } .pf-bloque { display: flex; flex-direction: column; gap: 8px; } .pf-datos { display: flex; flex-wrap: wrap; gap: 10px; } .pf-dato { flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; background: #f7f6f4; } .pf-dato > b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; } .pf-dato > span { font-size: 12px; color: var(--pf-suave); } /* ── Barra fija ──────────────────────────────────────────────────────────── */ .pf-fija { position: fixed; left: 50%; bottom: 16px; z-index: 40; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; border-radius: 18px; background: var(--pf-tinta); color: #fff; box-shadow: 0 14px 34px rgba(26,26,25,.28); font-size: 13px; font-weight: 600; } .pf-fija__avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; background: linear-gradient(140deg, #c9b9a6, #8a7561); } .pf-fija__btn { flex: none; padding: 9px 16px; border: 0; border-radius: 12px; background: #fff; color: var(--pf-tinta); font-size: 12.5px; font-weight: 700; text-decoration: none; } .pf-fija__btn:hover { background: var(--pf-crema); color: var(--pf-tinta); } .pf-fija__x { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; } .pf-fija__x:hover { background: rgba(255,255,255,.22); } .pf-fija[hidden] { display: none; } /* En un teléfono la barra fija tapa la última fila de trabajos: se le deja sitio abajo en vez de esconderla, que es lo que de verdad quiere el creador que la puso. */ @media (max-width: 560px) { .pf { padding-bottom: 140px; } .pf-acciones { justify-content: stretch; } } /* La portada y el avatar de verdad, cuando los hay. El degradado se queda de fondo: si la imagen tarda o falla, la franja no aparece en blanco. */ .pf-franja { background-size: cover; background-position: center; } .pf-avatar { overflow: hidden; display: block; } .pf-avatar img, .pf-fija__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .pf-fija__avatar { overflow: hidden; }