/* ========================================================================== Perfil profesional — Jhan Isaac Castillo Tuesta Complementa css/novo.css (tokens, botones, tarjetas, footer). Incluye modo claro/oscuro y hoja de impresión. ========================================================================== */ /* -------------------------------------------------------------- 01. Modo oscuro (se activa con data-theme="dark" en ) -------------------------------------------------------------- */ :root[data-theme="dark"] { --brand-2: #3fd8f5; --brand-soft: rgba(2, 168, 212, .14); --brand-line: rgba(53, 224, 245, .34); --bg: #070d16; --bg-2: #0b1421; --surface: #101b2b; --surface-2: #162336; --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .17); --tx: #eaf2fa; --tx-2: #a8bccf; --tx-3: #7c93a8; --sh-soft: 0 2px 14px rgba(0, 0, 0, .35); --sh: 0 26px 55px -28px rgba(0, 0, 0, .9); color-scheme: dark; } /* Superficies que en novo.css están fijadas a blanco */ :root[data-theme="dark"] body { background: var(--bg); } :root[data-theme="dark"] .nav.is-stuck { background: rgba(7, 13, 22, .82); } :root[data-theme="dark"] .nav__burger, :root[data-theme="dark"] .btn--ghost, :root[data-theme="dark"] .stats__item, :root[data-theme="dark"] .stack__group, :root[data-theme="dark"] .social a, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .job, :root[data-theme="dark"] .edu__item, :root[data-theme="dark"] .certs li, :root[data-theme="dark"] .lang, :root[data-theme="dark"] .hl { background: var(--surface); } :root[data-theme="dark"] .btn--ghost { color: var(--tx); } :root[data-theme="dark"] .card { background: var(--surface); } :root[data-theme="dark"] .card__tags li, :root[data-theme="dark"] .lang__bar { background: var(--surface-2); } :root[data-theme="dark"] .section--tint { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 12%, var(--bg-2) 88%, var(--bg) 100%); } :root[data-theme="dark"] .footer { background: linear-gradient(180deg, #09111c, #070d16); } :root[data-theme="dark"] .job::before, :root[data-theme="dark"] .cvhero__photo { background: var(--surface); } :root[data-theme="dark"] .chips li a, :root[data-theme="dark"] .chips li span { background: rgba(255, 255, 255, .04); } :root[data-theme="dark"] .cvhero { background: linear-gradient(180deg, #0a1626 0%, #08111d 55%, var(--bg) 100%); } :root[data-theme="dark"] .cvhero::after { background: linear-gradient(180deg, rgba(7, 13, 22, 0), var(--bg) 88%); } :root[data-theme="dark"] .cvhero__badge { background: rgba(16, 27, 43, .9); } :root[data-theme="dark"] .cvhero__float { background: rgba(16, 27, 43, .88); } :root[data-theme="dark"] .sec-num { color: rgba(53, 224, 245, .55); } :root[data-theme="dark"] .grain { opacity: .16; } /* -------------------------------------------------------------- 02. Barra de progreso de lectura -------------------------------------------------------------- */ .progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 120; background: linear-gradient(90deg, var(--brand), #35e0f5 60%, #7ad9ff); box-shadow: 0 0 14px rgba(2, 168, 212, .7); transition: width .12s linear; } /* El logotipo cambia de versión según el tema */ .nav__logo .logo-dark { display: none; } :root[data-theme="dark"] .nav__logo .logo-light { display: none; } :root[data-theme="dark"] .nav__logo .logo-dark { display: block; } /* Botón de tema */ .theme-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--tx-2); cursor: pointer; margin-left: 6px; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .3s ease; } .theme-btn:hover { color: var(--brand-2); border-color: var(--brand); transform: rotate(-18deg); } .theme-btn svg { width: 18px; height: 18px; } .theme-btn .icon-dark { display: none; } :root[data-theme="dark"] .theme-btn .icon-dark { display: block; } :root[data-theme="dark"] .theme-btn .icon-light { display: none; } @media (max-width: 980px) { .theme-btn { margin: 0 8px 0 auto; } .nav__burger { margin-left: 0; } /* En móvil el menú es un panel desplegable: ahí sí lleva fondo */ :root[data-theme="dark"] .nav__links { background: var(--surface); } } /* -------------------------------------------------------------- 03. Numeración editorial de secciones -------------------------------------------------------------- */ .sec-num { display: inline-flex; align-items: center; gap: 12px; font-family: 'Space Grotesk', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .22em; color: var(--brand); margin-bottom: 14px; } .sec-num::after { content: ""; width: 46px; height: 1px; background: linear-gradient(90deg, var(--brand), transparent); } .section-head.center .sec-num { justify-content: center; } /* -------------------------------------------------------------- 04. Cabecera de perfil -------------------------------------------------------------- */ .cvhero { position: relative; padding-block: 168px 100px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #e8f5fc 0%, #f7fcfe 58%, #fff 100%); } .cvhero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 240px; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 88%); } /* Aurora animada */ .cvhero__aurora { position: absolute; z-index: -3; border-radius: 50%; filter: blur(100px); animation: aurora 22s ease-in-out infinite; } .cvhero__aurora--1 { width: 520px; height: 520px; top: -160px; right: -80px; background: rgba(2, 168, 212, .34); } .cvhero__aurora--2 { width: 420px; height: 420px; bottom: -160px; left: -110px; background: rgba(53, 224, 245, .28); animation-delay: -8s; } .cvhero__aurora--3 { width: 360px; height: 360px; top: 40%; left: 42%; background: rgba(11, 110, 168, .18); animation-delay: -15s; } @keyframes aurora { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(30px, 40px, 0) scale(1.12); } 66% { transform: translate3d(-24px, 18px, 0) scale(.95); } } /* Retícula sutil */ .cvhero__mesh { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(11, 58, 90, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 58, 90, .05) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(75% 60% at 45% 35%, #000 15%, transparent 78%); -webkit-mask-image: radial-gradient(75% 60% at 45% 35%, #000 15%, transparent 78%); } :root[data-theme="dark"] .cvhero__mesh { background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); } /* Grano fino: da profundidad de impresión */ .grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .30; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .grain { mix-blend-mode: screen; } .cvhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 400px); gap: clamp(34px, 5vw, 76px); align-items: center; } @media (max-width: 940px) { .cvhero { padding-block: 124px 74px; } .cvhero__grid { grid-template-columns: 1fr; } .cvhero__photo { order: -1; max-width: 320px; margin-inline: auto; } } .status { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-2); background: var(--brand-soft); border: 1px solid var(--brand-line); padding: 8px 16px; border-radius: var(--r-pill); margin-bottom: 26px; } .status i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); position: relative; } .status i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--brand); animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; } @keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.9); opacity: 0; } } .cvhero h1 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); letter-spacing: -.035em; margin-bottom: .18em; } .cvhero h1 .surname { display: block; } .cvhero__role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(.95rem, 1.5vw, 1.12rem); font-weight: 600; color: var(--brand-2); margin-bottom: 20px; } .cvhero__role em { font-style: normal; color: var(--tx-3); } .cvhero__intro { max-width: 600px; margin-bottom: 28px; } /* Foto con anillo de marca */ .cvhero__photo { position: relative; width: 100%; aspect-ratio: 1086 / 1448; border-radius: 26px; padding: 6px; background: linear-gradient(150deg, var(--brand) 0%, rgba(53, 224, 245, .35) 40%, transparent 70%); box-shadow: 0 40px 80px -40px rgba(9, 51, 77, .7), 0 8px 24px -12px rgba(9, 51, 77, .3); transition: transform .5s cubic-bezier(.2, .8, .3, 1), box-shadow .5s ease; } .cvhero__photo:hover { transform: translateY(-6px) rotate(-.5deg); } .cvhero__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 21px; display: block; } .cvhero__badge { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 12px 16px; border-radius: var(--r); background: rgba(255, 255, 255, .93); backdrop-filter: blur(12px); border: 1px solid var(--line); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-2); text-align: center; } /* Credenciales flotantes */ .cvhero__float { position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 15px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(9, 51, 77, .6); font-size: .8rem; font-weight: 600; color: var(--tx); white-space: nowrap; animation: bob 7s ease-in-out infinite; } .cvhero__float svg { width: 15px; height: 15px; color: var(--brand); } .cvhero__float--1 { top: 12%; left: -46px; } .cvhero__float--2 { bottom: 26%; right: -38px; animation-delay: -3.5s; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (max-width: 1180px) { .cvhero__float { display: none; } } /* Datos de contacto */ .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; padding: 0; list-style: none; } .chips li a, .chips li span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); font-size: .87rem; color: var(--tx-2); transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease; } .chips li a:hover { border-color: var(--brand); color: var(--brand-2); transform: translateY(-2px); } .chips svg { width: 15px; height: 15px; color: var(--brand); flex: none; } .cvhero__actions { display: flex; flex-wrap: wrap; gap: 13px; } /* -------------------------------------------------------------- 05. Logros destacados -------------------------------------------------------------- */ .highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); } .hl { position: relative; padding: 32px 30px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-soft); overflow: hidden; transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease, border-color .35s ease; } .hl::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand), #35e0f5); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .8, .3, 1); } .hl:hover { transform: translateY(-6px); box-shadow: var(--sh); border-color: var(--brand-line); } .hl:hover::after { transform: scaleX(1); } .hl__icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(140deg, var(--brand), #0b6ea8); color: #fff; box-shadow: 0 12px 26px -14px rgba(2, 168, 212, .9); margin-bottom: 20px; } .hl__icon svg { width: 23px; height: 23px; } .hl h3 { font-size: 1.12rem; margin-bottom: .45em; } .hl p { font-size: .94rem; } .hl__tag { display: inline-block; margin-top: 16px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-2); } /* -------------------------------------------------------------- 06. Síntesis -------------------------------------------------------------- */ .split { display: grid; grid-template-columns: minmax(0, .44fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: start; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } } .split .section-head { margin-bottom: 0; position: sticky; top: 110px; } @media (max-width: 880px) { .split .section-head { position: static; } } .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-soft); padding: clamp(28px, 3.6vw, 46px); position: relative; overflow: hidden; } .panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--brand), rgba(2, 168, 212, .1)); } .panel p { font-size: 1.02rem; } .panel p + p { margin-top: 1.1em; } .panel strong { color: var(--tx); } /* -------------------------------------------------------------- 07. Línea de tiempo de experiencia -------------------------------------------------------------- */ .timeline { position: relative; display: grid; gap: 24px; padding-left: 40px; } .timeline::before { content: ""; position: absolute; left: 10px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(180deg, var(--brand), rgba(2, 168, 212, .10)); } @media (max-width: 620px) { .timeline { padding-left: 26px; } .timeline::before { left: 3px; } } .job { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-soft); padding: 30px 34px; transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease, border-color .35s ease; } .job:hover { transform: translateX(4px); border-color: var(--brand-line); box-shadow: var(--sh); } .job::before { content: ""; position: absolute; left: -36px; top: 34px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 0 0 5px rgba(2, 168, 212, .10); } .job--now::before { background: var(--brand); } .job--now::after { content: ""; position: absolute; left: -36px; top: 34px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--brand); animation: ping 2.6s cubic-bezier(0, 0, .2, 1) infinite; } @media (max-width: 620px) { .job { padding: 24px 22px; } .job::before, .job--now::after { left: -29px; top: 28px; } } .job__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 18px; margin-bottom: 5px; } .job h3 { font-size: 1.22rem; margin: 0; } .job__meta { font-size: .94rem; color: var(--tx-3); margin-bottom: 18px; } .job__meta strong { color: var(--tx-2); font-weight: 600; } .badge { font-size: .73rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-2); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-pill); padding: 5px 13px; white-space: nowrap; } .badge--now { color: #0f6b3d; background: #e9faf1; border-color: #8fd9b0; } :root[data-theme="dark"] .badge--now { color: #7ff0ac; background: rgba(37, 211, 102, .12); border-color: rgba(37, 211, 102, .4); } .job ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .job li { position: relative; padding-left: 25px; font-size: .96rem; color: var(--tx-2); } .job li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--brand); rotate: 45deg; } .job li strong { color: var(--tx); } .job__impact { margin-top: 20px; padding: 16px 20px; border-radius: var(--r); background: linear-gradient(120deg, rgba(2, 168, 212, .12), rgba(2, 168, 212, .02)); border: 1px solid var(--brand-line); font-size: .96rem; color: var(--tx); } .job__impact strong { color: var(--brand-2); } /* -------------------------------------------------------------- 08. Formación, certificaciones e idiomas -------------------------------------------------------------- */ .block-title { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 18px; } .edu { display: grid; gap: 14px; } .edu__item { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r); box-shadow: var(--sh-soft); padding: 22px 26px; transition: transform .3s ease, box-shadow .3s ease; } .edu__item:hover { transform: translateX(3px); box-shadow: var(--sh); } .edu__item h3 { font-size: 1.06rem; margin: 0 0 5px; } .edu__item p { margin: 0; font-size: .89rem; color: var(--tx-3); } .certs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .certs li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-soft); padding: 15px 20px; font-size: .94rem; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .certs li:hover { transform: translateY(-2px); border-color: var(--brand-line); box-shadow: var(--sh); } .certs svg { width: 18px; height: 18px; color: var(--brand); flex: none; } .certs b { font-weight: 600; color: var(--tx); } .certs span { font-size: .76rem; letter-spacing: .04em; color: var(--tx-3); margin-left: auto; white-space: nowrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 11px; } .langs { display: grid; gap: 14px; } .lang { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-soft); padding: 22px 26px; } .lang__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .lang h3 { font-size: 1.02rem; margin: 0; } .lang__head span { font-size: .82rem; color: var(--tx-3); } .lang__bar { height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; } .lang__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #22c3e8, var(--brand)); transition: width 1.2s cubic-bezier(.2, .8, .3, 1); } /* -------------------------------------------------------------- 09. Métricas de esta página -------------------------------------------------------------- */ .stats--cv { margin-top: 0; } .stats--cv .stats__num { font-size: clamp(1.8rem, 3vw, 2.5rem); } /* -------------------------------------------------------------- 10. Impresión / Guardar como PDF -------------------------------------------------------------- */ @media print { @page { margin: 12mm; } .nav, .progress, .theme-btn, .cvhero__actions, .cvhero__aurora, .cvhero__mesh, .grain, .cta, .wa-float, .footer .social, .cvhero__float, .cvhero__badge, .status, .section-head p { display: none !important; } :root { --pad-y: 14px; } :root[data-theme="dark"] { --bg: #fff; --bg-2: #fff; --surface: #fff; --surface-2: #fff; --tx: #111; --tx-2: #333; --tx-3: #666; --line: #d8e2ea; --line-strong: #c3d4e0; } html, body { background: #fff !important; } body { color: #111 !important; font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* El texto con degradado no imprime bien: se pasa a color plano */ .grad { background: none !important; -webkit-text-fill-color: #0b6ea8 !important; color: #0b6ea8 !important; } /* Cabecera compacta: datos a la izquierda, foto pequeña a la derecha */ .cvhero { padding: 0 0 12px !important; background: #fff !important; } .cvhero::after { display: none; } .cvhero__grid { grid-template-columns: 1fr 128px !important; gap: 18px !important; align-items: start !important; } .cvhero__photo { order: 0 !important; max-width: 128px !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; } .cvhero__photo img { border-radius: 8px; } .cvhero h1 { font-size: 23pt !important; margin-bottom: 3pt !important; } .cvhero__role { font-size: 10pt !important; margin-bottom: 8pt !important; } .cvhero__intro { font-size: 9.5pt !important; margin-bottom: 9pt !important; } .chips { gap: 6px !important; margin-bottom: 0 !important; } .chips li a, .chips li span { padding: 3px 9px !important; font-size: 8.5pt !important; background: none !important; } .section { padding-block: 12px !important; } .section--tint { background: none !important; } .section-head { margin-bottom: 12px !important; } .section-head h2 { font-size: 15pt !important; } .split .section-head { position: static !important; } .stats { margin-top: 0 !important; } .stats__item { padding: 12px 8px !important; } /* Los iconos dependen de un fondo de color: en papel se dibujan con contorno */ .hl__icon, .card__icon { background: none !important; border: 1px solid #b9d9e6 !important; color: #0b6ea8 !important; box-shadow: none !important; } /* Sin rieles ni puntos en la línea de tiempo impresa */ .timeline { padding-left: 0 !important; } .timeline::before, .job::before, .job--now::after { display: none !important; } .job { padding: 14px 18px !important; } .job h3 { font-size: 12pt !important; } .lang__bar i[data-level="100"] { width: 100% !important; } .lang__bar i[data-level="60"] { width: 60% !important; } /* Densidad de papel: el perfil completo entra en pocas hojas */ .stats { grid-template-columns: repeat(4, 1fr) !important; } .highlights, .cards { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } .hl, .card { padding: 15px 17px !important; } .hl h3, .card h3 { font-size: 10.5pt !important; } .hl p, .card p, .job li, .panel p { font-size: 9pt !important; } .hl__icon, .card__icon { width: 34px !important; height: 34px !important; margin-bottom: 10px !important; } .panel { padding: 18px 22px !important; } .certs li, .edu__item, .lang { padding: 10px 14px !important; } .certs, .edu, .langs { gap: 7px !important; } .timeline { gap: 12px !important; } .job__impact { margin-top: 12px !important; padding: 10px 14px !important; font-size: 9pt !important; } .footer { margin-top: 10px !important; padding-block: 10px !important; background: none !important; } .panel, .job, .hl, .card, .edu__item, .certs li, .lang, .stats { box-shadow: none !important; border-color: #d8e2ea !important; break-inside: avoid; page-break-inside: avoid; } .job:hover, .hl:hover, .card:hover, .certs li:hover, .edu__item:hover { transform: none !important; } .reveal { opacity: 1 !important; transform: none !important; } a { text-decoration: none; color: inherit; } }