, so the generic section{padding:120px 48px 100px} rule would otherwise add its own 48px left/right on top of the inset .case-toc-layout already provides around the whole column — double padding, which is exactly what was quietly shrinking every image in here by 96px. Zero those two sides out; keep min-height from leaking in too, since these stack one after another rather than each filling a viewport. */ .case-toc-section{ padding-bottom:100px;padding-left:0;padding-right:0;min-height:0; scroll-margin-top:120px; } .case-toc-section:last-child{padding-bottom:0;} .case-toc-section .eyebrow{margin-bottom:0;} .case-toc-section h2{ font-size:clamp(24px,3vw,34px);font-weight:700;margin:16px 0 22px;line-height:1.25; max-width:720px; } .case-toc-section p{font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:18px;max-width:720px;} .case-toc-section p:last-child{margin-bottom:0;} .case-toc-section p strong{color:var(--fg);font-weight:600;} .case-toc-section ul{margin:0 0 18px;padding-left:20px;max-width:720px;} .case-toc-section ul:last-child{margin-bottom:0;} .case-toc-section ul li{font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:8px;} .case-toc-section ul li:last-child{margin-bottom:0;} .case-toc-section ul li strong{color:var(--fg);font-weight:600;} .case-toc-media{margin-top:40px;overflow:hidden;border-radius:6px;} .case-toc-media.case-toc-gallery{display:flex;gap:24px;margin-top:100px;overflow:visible;border-radius:0;} .case-toc-media.case-toc-gallery>div{flex:1 1 0;display:flex;flex-direction:column;gap:24px;overflow:hidden;border-radius:6px;} .case-toc-media.case-toc-gallery>div:last-child{margin-top:-60px;} .case-toc-media img{width:100%;border-radius:6px;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1);} @media(hover:hover) and (pointer:fine){ .case-toc-media:not(.case-toc-gallery):hover img{transform:scale(1.035);} .case-toc-media.case-toc-gallery>div:hover img{transform:scale(1.035);} } .case-toc-media.case-toc-gallery img{aspect-ratio:4/3;height:auto;} .case-toc-media.case-toc-full img{aspect-ratio:2/1;height:auto;} /* height:auto is load-bearing here (see .case-media-natural above for why) — without it the img's height="…" attribute won out over aspect-ratio, and object-fit:cover zoomed/cropped to fill that wrong, too-tall box. */ .case-toc-media.case-toc-full.case-toc-natural img{aspect-ratio:auto;height:auto;} /* Reuse the existing case-* media/grid components unchanged inside a TOC section — just drop their own left/right page padding, since the .case-toc-layout column already provides that inset. */ .case-toc-content .case-media, .case-toc-content .case-media-overlap, .case-toc-content .case-media-right, .case-toc-content .case-gallery, .case-toc-content .case-cols, .case-toc-content .case-phases, .case-toc-content .case-split-media-only{ padding-left:0;padding-right:0;margin-top:40px; } .case-toc-content .case-media:first-child, .case-toc-content .case-media-overlap:first-child, .case-toc-content .case-gallery:first-child{margin-top:0;} .case-toc-content .case-gallery-col-offset{margin-top:0;} .case-toc-content .case-split-media-only{display:flex;gap:24px;} .case-toc-content .case-split-media-only img{width:100%;height:auto;border-radius:6px;display:block;object-fit:cover;aspect-ratio:3/2;} /* the FAB itself is created by main.js (only when a .case-toc exists on the page) and appended to , not written into every case page's HTML by hand. Hidden outside this breakpoint since desktop keeps the sticky sidebar index instead. */ .case-toc-fab{display:none;} .case-toc-drawer-title{display:none;} @media(max-width:960px){ .case-toc-layout{flex-direction:column;gap:32px;padding:0 20px 60px;} /* collapsed to a fixed, top-anchored drawer instead of an inline row — on a phone the row of 8 links used to push all the actual content below the fold. Slides down over the header (rather than computing the header's own, breakpoint-dependent height) since it's a short-lived overlay, same spirit as .mobile-menu covering everything while it's open. */ .case-toc{ position:fixed;top:0;left:0;right:0;z-index:110; flex-direction:column;flex-wrap:nowrap;gap:2px; width:100%;max-height:85vh;overflow-y:auto; background:var(--bg); padding:100px 20px 28px; border-bottom:1px solid var(--line); box-shadow:0 20px 40px rgba(0,0,0,.18); transform:translateY(-100%); transition:transform .45s cubic-bezier(.16,1,.3,1); } .case-toc.open{transform:translateY(0);} .case-toc-drawer-title{ display:block; font-size:clamp(22px,6vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.15; margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line); } .case-toc-link{ padding:13px 0;border-bottom:1px solid var(--line); font-size:15px; } .case-toc-content{max-width:100%;} .case-toc-media.case-toc-gallery{flex-direction:column;gap:16px;} .case-toc-media.case-toc-gallery>div:last-child{margin-top:0;} .case-toc-fab{ display:flex;position:fixed;right:20px;bottom:24px;z-index:120; width:52px;height:52px;border-radius:50%; align-items:center;justify-content:center; background:var(--fg);color:var(--bg);border:none;cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.28); transition:background .3s ease,color .3s ease,transform .3s ease; } .case-toc-fab svg{ width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7; position:absolute; } /* two icons stacked in the same spot (absolute + the button's own flex centering), swapped by display rather than morphed — the list icon has dots the plain hamburger elsewhere on the site doesn't, so it can't reuse that bars-rotate-into-an-X trick. */ .case-toc-fab-icon-close{display:none;} .case-toc-fab.open .case-toc-fab-icon-list{display:none;} .case-toc-fab.open .case-toc-fab-icon-close{display:block;} .case-toc-fab.open{background:var(--accent);color:#ffffff;} } @media(max-width:820px){ .case-row{gap:24px;padding:0 20px 40px;} .case-row-text{flex:1 1 100%;} .case-media,.case-media-overlap,.case-split,.case-gallery,.case-links{padding-left:20px;padding-right:20px;} .case-media-overlap{padding-bottom:60px;} .case-media-overlap .media-main{width:100%;} .case-media-overlap .media-accent{ position:static;width:70%;margin:16px 0 0 auto;box-shadow:none;border-width:4px; } .case-split{gap:24px;padding-bottom:60px;} .case-gallery{flex-direction:column;gap:16px;} .case-gallery-col{gap:16px;} .case-gallery-col-offset{margin-top:0;} } .profile-list{list-style:none;margin-top:16px;} .profile-list li{ font-size:14px;line-height:1.8;color:var(--muted);padding-left:20px;position:relative; } .profile-list li::before{ content:'';position:absolute;left:0;top:10px;width:8px;height:1px;background:var(--accent); } /* BELÉN PROFILE PAGE — reuses the home page's own components (.whyus-card, .faq-item, .how-card, .brand-marquee, .section-title, .view-all-link, #contact) for everything reusable; these bio-* rules only cover the handful of bits that are genuinely page-specific (the hero and the skill tags). */ /* hero re-uses #hero/.hero-top/.hero-bottom/.hero-glass as-is (see the base rules above) — everything below is page-specific: a portrait photo, a tagline + contact links sitting under the two title lines. #hero's children (top/photo/bottom/content/quote/meta) are all direct, unnested children of #hero itself, placed with named grid areas — that's what lets mobile resequence them (photo right under the name, tagline+links pushed after DILOY) independently of desktop's layout, with no DOM reordering needed. Desktop: BELÉN and DILOY share one full-width row (pinned to the outer edges via text-align), the photo sits on its own row underneath at its regular size, then contact links (left) / tagline (right) below that — the existing scroll-driven drift (BELÉN left / DILOY right) still applies since it targets .hero-line-name regardless of layout. */ #hero.bio-hero-full{ display:grid; grid-template-columns:1fr; grid-template-areas: "top" "media"; row-gap:6px; min-height:auto; padding-bottom:120px;padding-top:clamp(96px,14vh,140px); } .bio-hero-full .hero-top{grid-area:top;position:relative;z-index:2;} .bio-hero-full .hero-role-label{margin-bottom:16px;} /* mobile: BELÉN / DILOY stack as two lines (DILOY overlapping the photo below, see the max-width query). Desktop: they sit side by side on one full-width line instead — see the min-width query. */ .bio-hero-full .hero-name-row{ display:flex;flex-direction:column;align-items:flex-start; } /* the photo + its side column (links, then tagline) ride up to tuck under the name — side stretches to the photo's own height so the tagline's bottom edge lands flush with the photo's bottom edge. */ .bio-hero-full .hero-media-row{ grid-area:media; display:flex;flex-direction:column; margin-top:-40px;position:relative;z-index:1; } .bio-hero-full .hero-mid-photo{ width:300px;max-height:80vh;aspect-ratio:3/4; position:relative; opacity:0;transform:translateY(20px); } /* the crop/background live on this inner wrapper instead of .hero-mid-photo itself, so the waving illustration (a sibling, anchored to .hero-mid-photo's actual — possibly flex-shrunk — width via left:100%) can extend past the photo's right edge without being clipped by its overflow:hidden. */ .bio-hero-full .hero-mid-photo-inner{width:100%;height:100%;overflow:hidden;background:#161616;} .bio-hero-full .hero-mid-photo img{width:100%;height:100%;object-fit:cover;display:block;} /* "say hi" pill on the photo itself, bottom-left — clear of the face (framed upper-right of this particular crop) at any of the photo's sizes. Pointer-events:none so it never steals the tap/hover that's bound to .hero-mid-photo itself; the pulsing dot reuses the same badgePulse keyframe as the header's own availability dot. Colours are hardcoded rather than the theme tokens — it sits on a photograph, not the page chrome, so it needs to read the same in light or dark mode. */ .hero-photo-badge{ /* right is negative so the text's tail spills past the photo's own right edge onto the page — see .hero-photo-badge-text below for the hard-edge colour split that lines up with that same edge. */ position:absolute;right:-36px;top:56%;transform:translateY(-50%);z-index:4; display:inline-flex;align-items:center;gap:8px; pointer-events:none; } .hero-photo-badge-dot{ width:7px;height:7px;border-radius:50%;background:var(--accent); position:relative;flex:0 0 auto; } .hero-photo-badge-dot::after{ content:'';position:absolute;inset:-4px;border-radius:50%; background:var(--accent);opacity:.5; animation:badgePulse 1.8s ease-out infinite; } /* the text reads white over the photo and black once it spills past its edge onto the page — not mix-blend-mode (real browsers routinely fail to blend it across a transformed/layer-promoted ancestor, which this hero has several of), but a hard-stop gradient clipped to the glyphs instead, split at the exact pixel where the photo's edge falls (the badge's own right-offset above, 36px desktop / 32px on mobile). */ .hero-photo-badge-text{ font-size:14px;font-weight:800;letter-spacing:.02em;white-space:nowrap; background-image:linear-gradient(to right,#fff 0,#fff calc(100% - 36px),#111 calc(100% - 36px),#111 100%); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } .hero-photo-badge-text-mobile{display:none;} /* desktop copy is two lines on a forced break (not wherever the browser would wrap) — right-aligned so each line's true right edge lines up with the fixed gradient split above, instead of trailing whitespace on the shorter line landing on the split. */ .hero-photo-badge-text-desktop{white-space:pre-line;text-align:right;line-height:1.25;} /* waving hello, tucked beside the photo — hidden until you hover the photo, then slides in left-to-right inside its own clipped window (same reveal technique as the marquee illustration, just on the horizontal axis instead of vertical). */ .bio-hero-full .hero-wave-wrap{ position:absolute;left:100%;top:50%;transform:translateY(-50%);z-index:3; width:clamp(90px,9vw,140px);aspect-ratio:188/213; overflow:hidden;pointer-events:none; } .bio-hero-full .hero-wave{ display:block;width:100%;height:auto; transform:translateX(-100%); transition:transform .5s cubic-bezier(.34,1.2,.36,1); } /* revealed by hover with a real pointer, or by the tap-toggled class on touch. The hover rule is gated behind hover:hover on purpose: iOS leaves a tap-induced hover state stuck on the element, which would keep the illustration out even after the second tap removed the class. */ @media (hover:hover) and (pointer:fine){ .bio-hero-full .hero-mid-photo:hover .hero-wave{ transform:translateX(0); } } .bio-hero-full .hero-mid-photo.wave-active .hero-wave{ transform:translateX(0); } .bio-hero-full .hero-side{ display:flex;flex-direction:column;gap:24px;margin-top:20px; } .bio-hero-full .hero-contact{ display:flex;flex-direction:column;align-items:flex-start;gap:8px; opacity:0;transform:translateY(20px); } .bio-hero-full .hero-contact a{ font-size:14px;color:var(--fg);text-decoration:none; border-bottom:1px solid var(--line);padding-bottom:2px; transition:color .2s ease, border-color .2s ease; } .bio-hero-full .hero-contact a:hover{border-color:var(--accent);color:var(--accent);} .link-arrow{ display:inline-block;width:.75em;height:.75em;margin-left:5px; vertical-align:-0.05em; fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; } .bio-hero-full .hero-quote{ max-width:480px;margin:0;font-size:13px;line-height:1.6;letter-spacing:.02em; text-transform:uppercase;font-weight:700;text-align:left; color:var(--fg);opacity:0;transform:translateY(16px); } .bio-hero-full .hero-quote strong{color:var(--accent);font-weight:inherit;position:relative;cursor:default;} .bio-hero-full .hero-quote .heart-pop{ position:absolute;top:-.3em;right:-.1em; width:.85em;height:.85em; color:var(--accent); opacity:0;transform:scale(.3) translateY(4px) rotate(-8deg); pointer-events:none; } .bio-hero-full .hero-quote strong:hover .heart-pop{ animation:heart-pop .6s cubic-bezier(.34,1.56,.64,1) forwards; } @keyframes heart-pop{ 0%{opacity:0;transform:scale(.3) translateY(4px) rotate(-8deg);} 45%{opacity:1;transform:scale(1.25) translateY(-11px) rotate(8deg);} 70%{transform:scale(.95) translateY(-8px) rotate(-4deg);} 100%{opacity:1;transform:scale(1.05) translateY(-10px) rotate(4deg);} } @media(prefers-reduced-motion:reduce){ .bio-hero-full .hero-quote strong:hover .heart-pop{animation:none;opacity:1;transform:none;} } /* little easter egg standing right on the marquee line, centered — lives inside the projects panel itself (not the hero) so it rides up for free with that panel's existing rise animation instead of needing its own scroll-synced position. bottom:100% keeps its feet flush with the panel's own top edge regardless of its (responsive) height, so it never dips into the marquee text; the negative z-index tucks it behind the panel's own opaque background, so nothing of it shows through the panel itself. The wrapper clips the image and the image itself slides up inside that window (see the JS) — a real reveal-from-below, not just a crossing of the viewport edge. */ .hero-easter-egg-wrap{ position:absolute;left:50%;bottom:100%;z-index:-1; transform:translateX(-50%); width:clamp(110px,16vw,190px);aspect-ratio:762/1026; overflow:hidden;pointer-events:none; } .hero-easter-egg{ display:block;width:100%;height:auto; } /* the hero title is her name, set in a serif display face (vicrojo.com reference), each line drifting in opposite horizontal directions as the hero scrolls past — see the matching JS block. */ .bio-hero-full .hero-line-name{ display:inline-block;overflow:visible; } .bio-hero-full .hero-line-name span{ font-family:'Fraunces', Georgia, serif; font-weight:600; /* mobile sizing: one word per line, so each can run the full width (desktop overrides this with --name-size, where both share a line) */ font-size:clamp(90px,30vw,170px); letter-spacing:0; } @media(min-width:641px){ /* the photo's overlap rides on the same variable as the name's own font-size so the two stay proportional at every width instead of drifting apart. */ #hero.bio-hero-full{ --name-size:clamp(88px,calc(16.5vw - 18px),400px); } .bio-hero-full .hero-name-row{ flex-direction:row;align-items:flex-start;width:100%; } .bio-hero-full .hero-line-name span{ font-size:var(--name-size); } .bio-hero-full .hero-media-row{ flex-direction:row;align-items:stretch;gap:48px; margin-top:calc(-0.46 * var(--name-size)); } .bio-hero-full .hero-side{ flex:1 1 auto;flex-direction:row;align-items:flex-end; justify-content:space-between;margin-top:0;gap:24px; } .bio-hero-full .hero-quote{ margin:0 180px 0 0;text-align:left; } } .bio-process,.bio-experience,.bio-education,.bio-skills,.bio-areas,.exp-static{ padding-top:80px;padding-bottom:100px; } /* .bio-education/.bio-skills inherit the global section{min-height:100vh} but their content never gets close to a full viewport — left unset, that floor was padding out well past their own 80/100 bottom padding with 100+px of dead background (visible as a near-black gap under Skills on shorter viewports). .bio-areas keeps its own min-height:100vh from .pixel-content on purpose — that one's sized for its pinned reveal animation. */ .bio-education,.bio-skills{ min-height:0; } .whyus-card-tag{ display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase; opacity:.8;margin-bottom:10px; } .bio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;} .bio-cards .how-card{ width:100%;min-height:auto; opacity:0;transform:translateY(28px) scale(.97);will-change:transform,opacity; } .bio-cards .how-card h3{font-size:20px;margin-bottom:4px;} .bio-cards .how-card .muted{color:var(--muted);font-weight:400;} .bio-exp-date{ display:block;font-size:13px;font-weight:700;letter-spacing:.03em; text-transform:uppercase;color:var(--muted);margin-bottom:16px; } /* Experience — same horizontal-pinned-carousel mechanic as the home page's "Cómo trabajamos" (#how-pin/.work-inner/.work-track), reused here under its own id/classes so both pages' JS can target them independently. Cards reuse .work-card (fixed width for the track) together with .how-card (the bordered look), exactly like home. */ #processPin{height:300vh;position:relative;} .exp-inner{ position:sticky;top:0;height:100vh;overflow:hidden; display:flex;flex-direction:column; } .exp-header{padding:clamp(40px,8vh,80px) 48px 0;text-align:left;flex:0 0 auto;} .exp-header .section-title{font-size:clamp(28px,4vw,44px);margin-bottom:24px;} .exp-header p{max-width:640px;margin:0 0 clamp(20px,4vh,40px);font-size:16px;line-height:1.7;color:var(--muted);} .exp-track{ display:flex;align-items:center;gap:24px;padding:0 48px; flex:1 1 auto;min-height:0;will-change:transform; } @media(min-width:641px){ .exp-track .how-card{min-height:min(440px,100%);} } @media(max-width:640px){ #processPin{height:auto;} .exp-inner{position:static;height:auto;overflow:visible;} .exp-header{padding-left:20px;padding-right:20px;} .exp-track{ flex-direction:column;align-items:stretch;overflow:visible; padding:0 20px;gap:24px; } .exp-track .work-card{width:100%;} } /* Experience — static two-column list (company/role/dates/desc cards), using the page's own type system throughout, reusing the .pixel-content-grid text-left/list-right layout without the red background. Company name is the heading — role and employer are secondary context underneath. */ .exp-static .section-title-row{margin-bottom:60px;} .exp-static-intro{ font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 40px; opacity:0;transform:translateY(28px) scale(.97);will-change:transform,opacity; } /* the intro paragraph in Disciplinas and Experience shouldn't float in place while its accordion/grid scrolls past — just scroll normally with the page (home's own Servicios section keeps the sticky text column as-is; this only un-sticks it here). */ .bio-areas .pixel-content-text{position:static;} /* relative (not the shared sticky, but not static either) so the flying figure below has something to anchor to. top:0 overrides the shared rule's own top:120px (meant for the sticky positioning it used before) — relative still honors top even though this isn't sticky, so without this it was shifting the whole column down. */ .exp-static .pixel-content-text{position:relative;top:0;} /* the little flying figure that keeps pace with the row list as you scroll through it — three layers (cape/hair/base, same stacking order and proportions as the source illustration) each swaying on their own infinite CSS loop, while the wrapper's own translateY is driven by scroll progress through .pixel-content-list (JS). In flow (not absolute) and centered under the intro text, rather than pinned to a corner. */ .exp-fly-wrap{ position:relative;z-index:2; width:clamp(90px,8vw,130px);aspect-ratio:837/1080; margin:32px auto 0; pointer-events:none; } /* rotated upside down by default, so it dives head-first as it travels down the page instead of flying upright — a separate layer from .exp-fly-figure since that one's own transform is already fully owned by the bob keyframes below. JS spins this element a further 180° clockwise (always adding, never subtracting, so it never visually reverses) every time the scroll direction changes. */ .exp-fly-flip{ width:100%;height:100%; transform:rotate(180deg); } .exp-fly-figure{ position:relative;width:100%;height:100%; animation:expFlyBob 4s ease-in-out infinite; transform-origin:50% 50%; } .exp-fly-layer{position:absolute;display:block;} .exp-fly-layer img{width:100%;height:100%;display:block;} .exp-fly-base{left:25.93%;top:0;width:48.15%;height:99.35%;} .exp-fly-cape{ left:.12%;top:23.89%;width:100%;height:57.13%; transform-origin:49.8% 15.77%; animation:expFlyCapeSway 4s ease-in-out infinite; animation-delay:-1s; } .exp-fly-hair{ left:37.16%;top:7.22%;width:46.95%;height:32.5%; transform-origin:28.85% 6.15%; animation:expFlyHairSway 2s ease-in-out infinite; animation-delay:-.4s; } @keyframes expFlyBob{ 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-2.6%) rotate(-1.1deg);} } @keyframes expFlyCapeSway{ 0%,100%{transform:rotate(0deg) skewX(0deg);} 25%{transform:rotate(3deg) skewX(-4deg);} 50%{transform:rotate(-1.5deg) skewX(2deg);} 75%{transform:rotate(2deg) skewX(-3deg);} } @keyframes expFlyHairSway{ 0%,100%{transform:rotate(0deg);} 30%{transform:rotate(-7deg);} 60%{transform:rotate(5deg);} } @media(max-width:640px){ .exp-fly-wrap{display:none;} } .exp-static-row{ display:grid;grid-template-columns:repeat(2,1fr);gap:56px 64px; padding:48px 0; } .exp-static-row:first-child{padding-top:0;} .exp-static-row:last-child{padding-bottom:0;} /* floating scroll-reveal pre-state — see the ScrollTrigger.batch calls in index.html's inline script for the fade/rise/scale-in itself. */ .exp-static-card{opacity:0;transform:translateY(28px) scale(.97);will-change:transform,opacity;} .exp-static-card .company{ font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.01em; line-height:1.2;margin-bottom:14px; } .exp-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;} .exp-title-row .company{margin-bottom:0;} /* "still live" badge — a pulsing dot (same ping as the header's availability badge) plus a hover-revealed external-link arrow, so it reads as a live status at rest and as an invitation to click on hover. Hover-gated behind hover:hover so it doesn't stick open on iOS after a tap. */ .live-badge{ display:inline-flex;align-items:center;gap:7px; padding:6px 12px;border-radius:999px; background:var(--line);color:var(--muted); font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; text-decoration:none;white-space:nowrap; transition:background .3s ease,color .3s ease; } .live-badge-dot{ width:6px;height:6px;border-radius:50%;background:var(--accent); position:relative;flex:0 0 auto; transition:background .3s ease; } .live-badge-dot::after{ content:'';position:absolute;inset:-4px;border-radius:50%; background:var(--accent);opacity:.5; animation:badgePulse 1.8s ease-out infinite; transition:background .3s ease; } .live-badge-arrow{ display:inline-block;max-width:0;opacity:0;overflow:hidden; transition:max-width .3s ease,opacity .3s ease,margin-left .3s ease; } @media(hover:hover) and (pointer:fine){ .live-badge:hover{background:var(--accent);color:#ffffff;} .live-badge:hover .live-badge-dot, .live-badge:hover .live-badge-dot::after{background:#ffffff;} .live-badge:hover .live-badge-arrow{max-width:14px;opacity:1;margin-left:1px;} } .exp-static-card .role{font-size:14px;color:var(--muted);margin-bottom:20px;} .exp-static-card .role .sep{margin:0 6px;opacity:.6;} .exp-static-card .dates{ font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase; color:var(--muted);margin-bottom:20px; } .exp-static-card p{font-size:16px;line-height:1.7;color:var(--fg);max-width:480px;} .exp-case-link{margin-top:16px;} @media(max-width:640px){ /* on mobile every row collapses to one column, so what used to be "two cards side by side, rows stacked below each other" becomes one continuous list — but the row's own top/bottom padding (for the desktop 2-column layout) was still adding extra space between rows on top of the grid gap between cards inside a row, so consecutive experiences weren't evenly spaced. Zeroing the row's padding/gap and spacing every card by its own margin instead makes the gap the same everywhere, row boundaries or not. */ .exp-static-row{grid-template-columns:1fr;gap:0;padding:0;} .exp-static-card{margin-bottom:40px;} .exp-static-row:last-child .exp-static-card:last-child{margin-bottom:0;} } .bio-cards-compact .how-card{padding:24px;} .bio-cards-compact .how-card h3{font-size:16px;margin-bottom:6px;} .bio-cards-compact .how-card p{font-size:14px;color:var(--muted);} .bio-cards-compact .how-card .edu-note{font-size:12px;opacity:.7;} .bio-cards-compact .how-card .edu-dates{ display:block;font-size:12px;letter-spacing:.03em;text-transform:uppercase; color:var(--muted);margin-top:10px;opacity:.7; } /* Skills — dark 3-column grid (category + plain list), reference the user supplied for the visual pattern. Page-specific, so it's fine to break from the light theme just for this one section. */ .bio-skills{ background:#0c0c0c;color:#f3f1ea; } .bio-skills .eyebrow{color:rgba(243,241,234,0.6);} .bio-skills .eyebrow::before{background:rgba(243,241,234,0.6);} .skills-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:48px; margin-top:48px; } .skills-col{opacity:0;transform:translateY(28px) scale(.97);will-change:transform,opacity;} .skills-col h3{ font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:#8a8880;border-bottom:1px solid rgba(243,241,234,0.14); padding-bottom:16px;margin-bottom:20px; } .skills-col ul{list-style:none;} .skills-col li{font-size:16px;line-height:2;color:#f3f1ea;} @media(max-width:640px){ .skills-grid{grid-template-columns:1fr;gap:32px;} } .skill-tags{display:flex;flex-wrap:wrap;gap:12px;} .skill-tag{ border:1px solid var(--line);border-radius:999px; padding:10px 22px;font-size:14px;color:var(--fg); } /* TEAM PROFILE PAGES (belen-diloy, gerardo-daglio) ------------------------------------------------ Everything here is scoped under .profile-page so it never reaches the other 23 pages, which share several of these class names (.page-title, .whyus-marquee, .article-section) with different intent. The page-specific JS lives in assets/profile.js, loaded only by these two pages, so assets/main.js stays untouched. Layout: an oversized name as the hero (photo left, lead text bottom right, meta row underneath), then a full-bleed parallax image that a following container rises over as you scroll — the same transform-driven rise the home page uses for "¿Por qué elegirnos?", reimplemented here rather than shared, since the home page version is wired to its own pinned photo. */ .profile-page .page-title{ font-family:'Fraunces', Georgia, serif; font-weight:600; } .profile-page .whyus-marquee-track span{ color:var(--fg); } .profile-page .whyus-content{ background:var(--bg); } /* the shared #contact{min-height:80vh} centers a full CTA title + giant email link, which leaves a huge empty gap here since these two pages only show the small eyebrow + email line. */ .profile-page #contact{ min-height:auto; } /* --- hero ------------------------------------------------------- */ .profile-hero{ padding:150px 48px 56px; } .profile-hero-title{ font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:clamp(56px,14.5vw,210px); line-height:.92; letter-spacing:-.02em; margin-bottom:0; /* the JS fit sizes the line to the measure exactly; without this a sub-pixel rounding difference is enough to wrap it onto a second line, which silently doubles the hero's height */ white-space:nowrap; } /* Wide: the two halves of the name sit side by side as a single line, which is what lets the type be set to the full measure at a sane size — stacking them would need ~2.2x the cap height to fill the same width. Narrow: they stack. (The mobile rule lives in the breakpoint block at the end of this section.) */ .profile-hero-title .ph-line{ display:inline-block; vertical-align:bottom; overflow:hidden; /* clips the entrance slide-up */ } .profile-hero-title .ph-line + .ph-line{margin-left:.2em;} .profile-hero-title .ph-line > span{ display:inline-block; transform:translateY(105%); will-change:transform; } /* The kitten hides inside the counter of a real "o" and climbs out as you scroll. The letter itself still renders as text, so the word reads normally with JS off; the clipping window is a separate absolutely positioned layer, which keeps it out of the inline flow entirely — putting overflow:hidden on the letter's own inline-block would move its baseline to the box bottom and drop the "o" below the rest of the word. */ .letter-cat{position:relative;display:inline-block;} .letter-cat-clip{ position:absolute;left:0;right:0;bottom:.06em; height:.72em; /* the window is the letter's body only */ overflow:hidden; pointer-events:none; } .letter-cat-clip .cat{ position:absolute;left:50%;bottom:0; width:.58em;height:1.15em; transform:translate(-50%,100%); /* fully tucked away until scrolled */ will-change:transform; } .letter-cat-clip .cat svg{width:100%;height:100%;display:block;overflow:visible;} .letter-cat-clip .cat-tail{ transform-box:fill-box;transform-origin:left center; animation:catTail 2.6s ease-in-out infinite; } @keyframes catTail{ 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(-13deg);} } @media(prefers-reduced-motion:reduce){ .letter-cat-clip .cat{transform:translate(-50%,8%);} } /* Small portrait low on the left, lead text bottom-right, both sitting on the same baseline — the name is the hero, the photo is a footnote to it, not a second focal point. */ .profile-hero-grid{ display:flex;justify-content:space-between;align-items:flex-end; gap:48px;margin-top:72px; } .profile-hero-photo{ flex:0 0 auto; width:clamp(150px,17vw,250px); aspect-ratio:3/4;border-radius:6px;overflow:hidden; background:rgba(128,128,128,.06);position:relative; } .profile-hero-photo img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .9s cubic-bezier(.16,1,.3,1); } .profile-hero-photo:hover img{transform:scale(1.05);} .profile-hero-text{flex:0 1 auto;max-width:460px;padding-bottom:4px;} .profile-hero-lead{ font-size:clamp(14px,1.15vw,16px);line-height:1.65;color:var(--muted); } .profile-hero-footer{ display:flex;justify-content:space-between;gap:24px; margin-top:56px;padding-top:20px;border-top:1px solid var(--line); font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); } /* --- parallax image + the container that rises over it ---------- */ /* The extra height here is scroll distance, not visual height: the inner sticks for a full viewport while the page scrolls through it, which is what gives the image room to drift and the next section room to climb over it. */ .profile-parallax{height:190vh;position:relative;} .profile-parallax-inner{ position:sticky;top:0;height:100vh;overflow:hidden; } .profile-parallax-inner img{ position:absolute;left:0;top:-15%; width:100%;height:130%;object-fit:cover; will-change:transform; } /* Opaque, so it actually hides the image it climbs over — but the dot grid is a fixed z-index:-3 layer that any opaque background covers, so the pattern is repainted here to keep it continuous across the seam. z-index:-1 puts it above this element's own background yet below its in-flow content, which is exactly the slot the fixed grid occupies everywhere else on the page. */ /* Reset the global section{min-height:100vh; padding:120px 48px 100px}: it was inserting 120px above the marquee and insetting it 48px from each edge, when the band has to run flush to the panel's top and bleed the full width. .profile-work brings its own gutters. */ .profile-rise{ position:relative;z-index:2; background:var(--bg); min-height:0; padding:0 0 40px; will-change:transform; } .profile-rise::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(circle, var(--muted) 1px, transparent 1.4px); background-size:26px 26px; opacity:.18; } .profile-rise .whyus-marquee{margin:0 0 100px;} /* --- work cards ------------------------------------------------- */ .profile-work{padding:0 48px 100px;} .profile-work-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; } /* Pin the column count for the two counts we actually have, so neither page ends on an orphan row: auto-fit would give four across and leave 1 dangling at four cases and 2 at six. */ .profile-work-grid:has(> :nth-child(4):last-child){ grid-template-columns:repeat(2,1fr); } .profile-work-grid:has(> :nth-child(6):last-child){ grid-template-columns:repeat(3,1fr); } /* Resting state is the bare image — no border, no caption. The name and description only exist on hover, behind a blur. */ .profile-work-card{ position:relative;display:block;overflow:hidden; aspect-ratio:4/3;border-radius:6px; background:rgba(128,128,128,.06); text-decoration:none;color:inherit; } .profile-work-card img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .8s cubic-bezier(.16,1,.3,1); } .profile-work-card:hover img{transform:scale(1.05);} .profile-work-card .pw-overlay{ position:absolute;inset:0; display:flex;flex-direction:column;justify-content:center;align-items:center; padding:32px;text-align:center; background:rgba(12,12,12,.42); -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px); opacity:0; transition:opacity .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease; } .profile-work-card:hover .pw-overlay, .profile-work-card:focus-visible .pw-overlay{ opacity:1; -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); } .profile-work-card .pw-name{ font-size:clamp(22px,2.1vw,34px);font-weight:700;line-height:1.15; letter-spacing:-.01em;color:#ffffff; transform:translateY(12px);transition:transform .45s cubic-bezier(.16,1,.3,1) .04s; } .profile-work-card .pw-desc{ margin-top:14px;max-width:36ch; font-size:14px;font-weight:400;line-height:1.55;color:rgba(255,255,255,.85); transform:translateY(12px);transition:transform .45s cubic-bezier(.16,1,.3,1) .1s; } .profile-work-card:hover .pw-name, .profile-work-card:hover .pw-desc, .profile-work-card:focus-visible .pw-name, .profile-work-card:focus-visible .pw-desc{transform:translateY(0);} /* --- methodology accordion -------------------------------------- Each step is a real