/* Requested refinements to the original portfolio. */
.variant-b .header .b-logo{gap:14px;text-decoration:none}
.variant-b .header .b-brand-role{font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.2;letter-spacing:.01em;color:#333;white-space:nowrap}
.variant-b .b-project-facts{font-size:13px;line-height:1.5;color:#444;margin-top:17px}
.variant-b .b-project-facts>span{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 7px}
.variant-b .b-project-facts strong{font-size:18px;font-weight:600;line-height:1.35;margin-right:0;color:#171715}
.variant-b .b-work-note{font-size:12.5px;line-height:1.75;color:#55554f}
.variant-b .b-process{--process-inset:33px;--process-dot-top:24px;--process-gap:10px;padding-left:var(--process-inset);gap:var(--process-gap)}
.variant-b .b-process:before{content:none}
.variant-b .b-process li:before{content:"";position:absolute;left:calc(12px - var(--process-inset));top:calc(var(--process-dot-top) + 8px);width:2px;height:calc(100% + var(--process-gap));border:0;border-radius:0;background:#8c8c83;box-sizing:border-box}
.variant-b .b-process li:last-child:before{content:none}
.variant-b .b-process li>.b-process-marker{position:absolute;left:calc(5px - var(--process-inset));top:var(--process-dot-top);width:16px;height:16px;box-sizing:border-box;border:3px solid #111110;border-radius:50%;background:#fff;z-index:1}
.variant-b .b-process li:nth-child(n+4)>.b-process-marker{background:#97978d}
.variant-b .b-process li{justify-content:flex-start;padding-top:20px;padding-bottom:20px}
.variant-b .b-process h3{line-height:24px}
.variant-b .b-process li:after{top:22px;width:20px;height:20px;font-size:12px;font-weight:600}
.variant-b .b-process p{font-size:12.5px;line-height:1.65}
.variant-b .star-measurement{font-size:13px;line-height:1.8;color:#52524c}
.variant-b .star-toc a[aria-current="location"]{font-weight:600;text-decoration:underline;text-underline-offset:5px}
.variant-b .star-story-content{min-width:0}
.variant-b .b-company-line.b-brand-marquee{display:block;min-width:0;max-width:100%;margin-top:32px}
.variant-b .b-brand-marquee>.b-brand-caption{display:block;font-size:12px;font-weight:500;line-height:1.5;margin-bottom:18px;color:#55554e}
.b-brand-window{overflow:hidden;width:100%;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.b-brand-track{display:flex;width:max-content;animation:brand-ribbon 36s linear infinite;will-change:transform}
.b-brand-group{display:flex;align-items:center;gap:44px;padding-right:44px;flex:none}
.b-brand-item{display:flex;align-items:center;justify-content:center;flex:none;width:160px;height:64px;overflow:hidden}
.b-brand-item img{display:block;width:140px;height:36px;max-width:100%;object-fit:contain;filter:grayscale(1)}
.b-brand-item.brand-holafly img{height:25px;width:115px}
.b-brand-item.brand-mercado-libre img{height:38px;width:155px}
.b-brand-item.brand-davivienda{width:200px}
.b-brand-item.brand-davivienda img{height:auto;width:calc(100% - 16px);max-width:none;flex:none;mix-blend-mode:multiply}
.b-brand-item.brand-xiaomi img{height:38px;width:142px}
.b-brand-item.brand-mccann img{width:135px;height:33px;filter:brightness(0)}
.b-brand-window:hover .b-brand-track,.b-brand-window:focus-within .b-brand-track{animation-play-state:paused}
@keyframes brand-ribbon{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(min-width:1100px){
.variant-b .star-story-layout{display:grid;grid-template-columns:176px minmax(0,1fr);gap:48px;align-items:start}
.variant-b .star-story-layout>.star-toc{position:sticky;top:28px;flex-direction:column;align-items:stretch;gap:9px;padding:17px 0;max-height:calc(100svh - 56px);overflow:auto}
.variant-b .star-story-layout>.star-toc a{padding:7px 4px;font-size:13px;text-decoration-thickness:1px}
.variant-b .star-story-content>.star-section:first-child{padding-top:0}
.variant-b .star-story-content .star-task{grid-template-columns:1fr;gap:28px}
.variant-b .star-story-content .star-decision{gap:30px;grid-template-columns:1fr 1.35fr}
.variant-b .star-story-content .star-section{scroll-margin-top:28px}
}
@media(max-width:900px){.variant-b .header nav{display:none}.variant-b .header .header-tools{margin-left:auto}}
@media(max-width:640px){
.variant-b .header .b-logo{gap:10px}
.variant-b .header .b-brand-role{font-size:12.5px;line-height:1.15;max-width:86px;white-space:normal;letter-spacing:0}
.variant-b .b-project-facts{font-size:12.5px;gap:8px 15px}
.variant-b .b-project-facts strong{font-size:17px}
.variant-b .b-work-note{font-size:12px;line-height:1.75}
.variant-b .b-process li{padding-top:18px;padding-bottom:18px}
.variant-b .b-process h3{line-height:22px}
.variant-b .b-process{--process-inset:29px;--process-dot-top:21px}
.variant-b .b-process li:after{top:19px}
.variant-b .star-measurement{font-size:13px}
.variant-b.b-photo-mode .b-portrait:after{content:none}
.variant-b .b-brand-marquee>.b-brand-caption{font-size:11px;margin-bottom:15px}
.b-brand-group{gap:30px;padding-right:30px}
.b-brand-item{width:140px;height:64px}
.b-brand-item.brand-davivienda{width:180px}
.b-brand-item img{max-width:140px}
.b-brand-item.brand-davivienda img{max-width:none}
}
@media(max-width:360px){
.variant-b .header .b-logo{gap:7px}
.variant-b .header .b-logo img{width:54px;height:auto}
.variant-b .header .b-brand-role{font-size:11px;max-width:68px}
.variant-b .header .header-tools{gap:6px}
.variant-b .header .b-contact{padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){.b-brand-track{animation:none;will-change:auto}.b-brand-window{overflow-x:auto;mask-image:none;-webkit-mask-image:none}.b-brand-group[aria-hidden="true"]{display:none}}

/* Keep the face centered in the original portrait at every card size. */
.variant-b .b-about-photo>img{object-position:50% 65%}

/* Reveal only the hovered brand's original colors from bottom to top. */
.b-brand-item{position:relative}
.b-brand-color{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;mask-image:linear-gradient(to bottom,transparent 0%,transparent 40%,#000 60%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 40%,#000 60%,#000 100%);mask-size:100% 250%;-webkit-mask-size:100% 250%;mask-position:0 0%;-webkit-mask-position:0 0%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;transition:mask-position .75s cubic-bezier(.22,.61,.36,1),-webkit-mask-position .75s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.b-brand-item .b-brand-color img{filter:none}
.b-brand-item.brand-mccann .b-brand-color img{filter:brightness(0)}
.b-brand-item:hover>.b-brand-color,.b-brand-item:focus-visible>.b-brand-color{mask-position:0 100%;-webkit-mask-position:0 100%}
.b-brand-item:focus-visible{outline:1px solid #666;outline-offset:-2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.b-brand-color{transition:none}}

/* Fade the entire portrait layer so no image can reappear below the name. */
.variant-b.b-photo-mode .b-portrait{mask-image:linear-gradient(to bottom,#000 0%,#000 65%,rgba(0,0,0,.8) 74%,transparent 94%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,rgba(0,0,0,.8) 74%,transparent 94%,transparent 100%)}
@keyframes badge-drift{0%,100%{translate:0 0}50%{translate:0 -4px}}
.variant-b .b-skills .b-pill{animation:badge-drift 7s ease-in-out infinite}
.variant-b .b-skills .b-pill:nth-child(2n){animation-duration:8s;animation-delay:-2s}
.variant-b .b-skills .b-pill:nth-child(3n){animation-duration:9s;animation-delay:-4s}
.variant-b .b-skills .b-pill:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.variant-b .b-skills .b-pill{animation:none}}

/* Project imagery responds only to its own card. */
.variant-b .b-project-image>img{transition:transform .55s ease,filter .7s ease;filter:grayscale(1) contrast(1.16)}
@media(hover:hover) and (pointer:fine){
 .variant-b .b-project-card:hover .b-project-image>img{filter:grayscale(0) contrast(1)}
}
.variant-b .b-card-link:focus-visible .b-project-image>img{filter:grayscale(0) contrast(1)}
/* Give section labels a firmer presence within the existing palette. */
.variant-b .b-tag{font-size:12px;font-weight:600;letter-spacing:.025em;line-height:1.35;padding:8px 12px;border:1px solid #b7b7aa;border-radius:7px;background:#e6e6dc;color:#23231e}
.variant-b .b-method .b-tag{background:#2a2a24;color:#f7f7f2;border-color:#65655a}
@media(max-width:640px){.variant-b .b-tag{font-size:11px;padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.variant-b .b-project-image>img{transition:none}}

/* Keep navigation available when the desktop links no longer fit. */
@media(min-width:641px) and (max-width:900px){
 .variant-b .header .menu-toggle{display:flex;width:36px;height:36px;border-radius:50%;border-width:1.5px;gap:4px}
 .variant-b .header .menu-toggle span{width:14px;height:1.5px}
 .variant-b .header .menu-toggle span:nth-child(2){width:10px;margin-left:4px}
}

/* Local color follows the cursor; captions stay above the image effect. */
.variant-b .b-about-photo>.b-color-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;filter:contrast(1.12)}
.variant-b .b-about-photo>figcaption{z-index:2}
.variant-b.b-photo-mode .b-portrait>.b-color-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:contrast(1.08)}
.variant-b .b-contact-person{padding-top:8px;display:flex;flex-direction:column;align-items:flex-start}
.variant-b .b-contact-person>.availability{margin-top:0}
.variant-b .b-contact-person .b-direct-contact{text-align:left;margin-top:20px}
@media(max-width:640px){.variant-b .b-contact-person{padding-top:0}}
@media(prefers-reduced-motion:reduce){.b-color-trail{display:none}}

/* Match the new color cutout to the existing hero's portrait framing. */
.variant-b.b-photo-mode .b-portrait[data-color-source] img{height:112%;top:2.5%;transform:translateX(-51%)}
@media(max-width:640px){.variant-b.b-photo-mode .b-portrait[data-color-source] img{height:102%;top:13%}}

/* Readable badges and comfortable controls on small screens. */
@media(max-width:640px){
 .variant-b .b-skills .b-pill{font-size:11.5px;font-weight:550;line-height:1.3;padding:8px 11px}
 .variant-b .b-tag{font-size:12.5px;line-height:1.35;padding:8px 12px}
 .variant-b .b-project-label{font-size:12px;font-weight:500;line-height:1.35;padding:8px 10px}
 .variant-b .b-about-pills span,.variant-b .star-skills>span{font-size:12.5px;line-height:1.4;padding:8px 11px}
 .variant-b .b-pill-button{font-size:14px;font-weight:550;line-height:1.4;min-height:46px;padding:11px 18px;gap:12px}
 .variant-b .b-copy-message{font-size:13px;min-height:44px}
 .variant-b .availability{font-size:12px;line-height:1.5}
 .variant-b .b-case-back{font-size:13px;min-height:44px;display:inline-flex;align-items:center;gap:8px}
 .variant-b .b-project-arrow{width:42px;height:42px}
 .variant-b .b-next-case>a{width:48px;height:48px}
 .variant-b .b-scroll{width:36px;height:36px}
 .variant-b .b-scroll svg{width:18px;height:18px}
 .variant-b .b-footer-links a{font-size:12.5px;min-height:44px;display:inline-flex;align-items:center}
 .variant-b .masthead .header{padding-inline:16px;gap:8px}
 .variant-b .header .b-logo{gap:8px}
 .variant-b .header .b-logo img{width:56px;height:auto}
 .variant-b .header .b-brand-role{font-size:13px;max-width:78px}
 .variant-b .header .header-tools{gap:6px;flex-shrink:0}
 .variant-b .header .language{gap:2px}
 .variant-b .header .language [data-lang]{font-size:12px;min-width:24px;min-height:44px;padding:4px 1px}
 .variant-b .header .b-contact{display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;line-height:1.2;min-height:42px;padding:10px 13px}
 .variant-b .header .menu-toggle{width:40px;height:40px;flex-shrink:0}
}
@media(max-width:380px){
 .variant-b .masthead .header{padding-inline:14px}
 .variant-b .header .b-logo img{width:50px}
 .variant-b .header .b-brand-role{font-size:12.5px;max-width:72px}
}
@media(max-width:340px){
 .variant-b .masthead .header{padding-inline:11px;gap:6px}
 .variant-b .header .b-logo{gap:6px}
 .variant-b .header .b-logo img{width:48px}
 .variant-b .header .b-brand-role{font-size:11.5px;max-width:60px}
 .variant-b .header .header-tools{gap:5px}
 .variant-b .header .language [data-lang]{font-size:11.5px;min-width:22px}
 .variant-b .header .b-contact{font-size:12px;padding-inline:11px}
 .variant-b .header .menu-toggle{width:38px;height:38px}
}
/* A centered, segmented STAR navigator for phones and tablets. */
@media(max-width:1099px){
 .variant-b .star-story-layout>.star-toc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:4px;position:sticky;top:8px;width:100%;max-width:520px;margin:8px auto 28px;padding:6px;border:1px solid #c3c3b6;border-radius:18px;background:#eeeee6f5;box-shadow:0 6px 20px #1111100d;backdrop-filter:blur(14px);isolation:isolate}
 .variant-b .star-toc a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:66px;padding:8px 1px;border-radius:12px;font-size:12.5px;font-weight:550;line-height:1.25;text-align:center;color:#53534b;text-decoration:none;transition:background .18s ease,color .18s ease}
 .variant-b .star-toc a span{max-width:100%;letter-spacing:-.01em}
 .variant-b .star-toc a b{width:24px;height:24px;font-size:11.5px;font-weight:600;background:#deded3;color:#35352f}
 .variant-b .star-toc a:hover{background:#e1e1d7;text-decoration:none}
 .variant-b .star-toc a[aria-current="location"]{background:#171715;color:#f7f7f2;font-weight:600;text-decoration:none}
 .variant-b .star-toc a[aria-current="location"] b{background:#f7f7f2;color:#171715}
 .variant-b .star-toc a:focus-visible{outline:2px solid #171715;outline-offset:1px}
 .variant-b .star-story-content .star-section{scroll-margin-top:112px}
}

/* One clear contact entry, with direct alternatives and the current-language CV. */
.variant-b .b-contact-hub{max-width:740px;margin:0 auto}
.variant-b .b-contact-availability{display:flex;width:fit-content;margin:0 auto 24px;font-size:13px}
.variant-b .b-contact-disclosure{border:1.5px solid #24241e;border-radius:18px;background:#fff;overflow:hidden}
.variant-b .b-contact-disclosure>summary{display:grid;grid-template-columns:44px minmax(0,1fr) 22px;align-items:center;gap:16px;list-style:none;cursor:pointer;padding:24px}
.variant-b .b-contact-disclosure>summary::-webkit-details-marker{display:none}
.variant-b .b-contact-disclosure>summary::marker{content:""}
.variant-b .b-contact-disclosure>summary:hover{background:#f2f2ea}
.variant-b .b-contact-disclosure>summary:focus-visible{outline:2px solid #171715;outline-offset:-5px;border-radius:16px}
.variant-b .b-contact-summary-icon{display:grid;place-items:center;width:44px;height:44px;background:#edede4;border-radius:12px}
.variant-b .b-contact-summary-icon svg{width:23px;height:23px;fill:none;stroke:#24241e;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.variant-b .b-contact-summary-copy{display:grid;gap:4px}
.variant-b .b-contact-summary-copy strong{font-size:18px;font-weight:600;line-height:1.35;color:#171715}
.variant-b .b-contact-summary-copy>span{font-size:13.5px;line-height:1.5;color:#626258}
.variant-b .b-contact-chevron{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.variant-b .b-contact-disclosure[open] .b-contact-chevron{transform:rotate(180deg)}
.variant-b .b-contact-form-panel{border-top:1px solid #d5d5ca;padding:24px}
.variant-b .b-contact-disclosure .b-contact-form{padding:0;border:0;border-radius:0;background:none}
.variant-b .b-contact-quick-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.variant-b .b-contact-quick-links .b-pill-button{min-height:46px;font-size:14px;background:transparent;color:#171715;border:1.5px solid #96968a}
.variant-b .b-contact-quick-links .b-pill-button:hover{background:#e5e5db;border-color:#171715}
.variant-b .b-contact-cv{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:30px;padding:23px 24px;border:1px solid #c5c5b8;border-radius:16px;background:#eeeee4}
.variant-b .b-contact-cv h3{font-size:22px;font-weight:550;line-height:1.3;letter-spacing:-.4px}
.variant-b .b-contact-cv p{font-size:13px;line-height:1.5;color:#626258;margin-top:5px}
.variant-b .b-contact-cv .b-pill-button{min-height:46px;font-size:14px;gap:12px}
@media(max-width:640px){
 .variant-b .b-contact-availability{font-size:12.5px;margin-bottom:20px}
 .variant-b .b-contact-disclosure>summary{grid-template-columns:40px minmax(0,1fr) 20px;gap:12px;padding:19px 17px}
 .variant-b .b-contact-summary-icon{width:40px;height:40px;border-radius:11px}
 .variant-b .b-contact-summary-copy strong{font-size:16.5px}
 .variant-b .b-contact-summary-copy>span{font-size:13px}
 .variant-b .b-contact-chevron{width:20px;height:20px}
 .variant-b .b-contact-form-panel{padding:21px 17px}
 .variant-b .b-contact-quick-links{gap:10px}
 .variant-b .b-contact-cv{display:grid;grid-template-columns:1fr;gap:18px;margin-top:24px;padding:20px}
 .variant-b .b-contact-cv .b-pill-button{width:100%}
}
@media(prefers-reduced-motion:reduce){.variant-b .b-contact-chevron{transition:none}}

/* Keep controls readable on phones in landscape and narrow tablets too. */
@media(min-width:641px) and (max-width:900px){
 .variant-b .b-tag{font-size:12.5px;padding:8px 12px}
 .variant-b .b-project-label{font-size:12px;line-height:1.35;padding:8px 10px}
 .variant-b .b-about-pills span,.variant-b .star-skills>span{font-size:12.5px;line-height:1.4;padding:8px 11px}
 .variant-b .b-pill-button{font-size:14px;min-height:46px;padding:11px 18px;gap:12px}
 .variant-b .header .language [data-lang]{font-size:12px;min-width:24px;min-height:44px}
 .variant-b .header .b-contact{font-size:13px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 .variant-b .header .menu-toggle{width:40px;height:40px}
 .variant-b .star-toc a{font-size:13.5px}
}

@media(max-width:340px){.variant-b .star-toc a{font-size:12px}}