:root{ --bg:#0c0c0c; --fg:#f3f1ea; --muted:#8a8880; --accent:#DE4841; --line: rgba(243,241,234,0.14); } html[data-theme="light"]{ --bg:#FAFAFA; --fg:#171717; --muted:#6b6b6b; --accent:#DE4841; --line: rgba(23,23,23,0.12); } html[data-theme="light"] body{cursor:none;} html[data-theme="light"] .preloader-bg{background:var(--bg);} *{margin:0;padding:0;box-sizing:border-box;} /* on mobile, the actual scrolling element is , not — the old overflow-x:hidden on body alone didn't stop it, so a diagonal swipe (any vertical drag with the slightest sideways component) would trigger the browser's native horizontal rubber-band/overscroll bounce: the whole page visibly shifts sideways for a moment even though there's no real horizontal content to scroll to. touch-action tells the browser up front to only ever treat touches as vertical panning, so it never even attempts that horizontal gesture; overscroll-behavior-x and overflow-x are extra layers of the same guarantee for browsers/inputs that don't honor touch-action. overflow-x:clip, not hidden — hidden (like auto/scroll) forces the OTHER axis to also resolve away from visible per spec, silently turning html/body into scroll containers of their own; every position:sticky element on the page (the pinned photo, the Servicios text column) computes itself relative to the nearest such container, so it broke against these instead of the real viewport and simply stopped sticking anywhere on the page. clip clips the same overflow without that side effect. */ html{ scroll-behavior:smooth; overflow-x:clip; overscroll-behavior-x:none; touch-action:pan-y; } body{ background:var(--bg); color:var(--fg); font-family:'Helvetica Neue', Arial, sans-serif; overflow-x:clip; overscroll-behavior-x:none; cursor:none; } ::selection{background:var(--accent);color:#0c0c0c;} /* cursor */ #cursor{ position:fixed;top:0;left:0;width:18px;height:18px; border-radius:50%;background:var(--accent); pointer-events:none;z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:normal; transition:width .25s ease, height .25s ease, background .2s ease; } #cursor.big{width:56px;height:56px;} #cursor.cursor-invert{mix-blend-mode:difference;background:var(--accent);} #cursor.cursor-on-accent{background:#ffffff;mix-blend-mode:normal;} #cursor.cursor-on-accent-text{background:#ffffff;mix-blend-mode:difference;} /* no real pointer to follow on touch devices — the dot would just sit wherever the last touch was instead of tracking anything live */ @media (hover:none), (pointer:coarse){ #cursor{display:none;} } /* preloader */ #preloader{ position:fixed;inset:0;background:var(--bg);z-index:9998; display:flex;align-items:center;justify-content:center; font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } #preloader span{opacity:0;animation:blink 1s infinite;} @keyframes blink{50%{opacity:1;}} #dot-grid-base{ position:fixed;inset:0;z-index:-3; background-image:radial-gradient(circle, var(--muted) 1px, transparent 1.4px); background-size:26px 26px; opacity:0.18; pointer-events:none; } #dot-grid-highlight{ position:fixed;inset:0;z-index:-2; background-image:radial-gradient(circle, var(--fg) 1px, transparent 1.4px); background-size:26px 26px; opacity:0.7; pointer-events:none; -webkit-mask-image:radial-gradient(circle 160px at var(--mx,50%) var(--my,50%), black 0%, transparent 100%); mask-image:radial-gradient(circle 160px at var(--mx,50%) var(--my,50%), black 0%, transparent 100%); } #mouse-glow{ position:fixed;top:0;left:0; width:560px;height:560px; margin-left:-280px;margin-top:-280px; border-radius:50%; background:radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity:0.22; filter:blur(70px); pointer-events:none; z-index:-1; will-change:transform; } #scroll-progress{ position:fixed;top:0;left:0;width:100%;height:3px;z-index:200; background:transparent; } #scroll-progress-bar{ height:100%;width:0%;background:var(--accent); transform-origin:left;will-change:width; } header{ position:fixed;top:0;left:0;width:100%;z-index:100; display:flex;flex-direction:column;align-items:center;gap:14px; padding:22px 48px; background:rgba(250,250,250,0.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:transform .4s ease; } header.header-hidden{ transform:translateY(-100%); } header .logo, header nav a, header .icon-btn, header .lang-switch span, header .lang-btn{ color:#111111; } .header-controls{ display:flex;align-items:center;gap:14px; } .icon-btn{ background:none;border:none;cursor:pointer;padding:0; width:26px;height:26px;display:flex;align-items:center;justify-content:center; color:var(--fg); } .icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;} .icon-btn .icon-moon{display:none;} html[data-theme="light"] .icon-btn .icon-sun{display:none;} html[data-theme="light"] .icon-btn .icon-moon{display:flex;} .lang-switch{ display:flex;align-items:center;gap:5px; font-size:11px;letter-spacing:.05em; } .lang-switch span{color:var(--muted);} .lang-btn{ background:none;border:none;cursor:pointer;font-family:inherit; font-size:11px;letter-spacing:.05em;color:var(--muted);padding:2px; } .lang-btn.active{color:var(--fg);font-weight:600;} /* mobile menu hamburger — hidden on desktop, shown at the same 640px breakpoint where the inline nav disappears. Bars are hardcoded to #111111 like .header-orb::after, matching the header's always-light glass bar (see the "header .logo, header nav a..." rule above). */ .menu-toggle{ display:none; position:relative; width:22px;height:14px; background:none;border:none;padding:0;cursor:pointer; flex:0 0 auto; } .menu-toggle-bar{ position:absolute;left:0;width:100%;height:1.6px;background:#111111; transition:top .35s cubic-bezier(.65,0,.35,1), transform .35s cubic-bezier(.65,0,.35,1); } .menu-toggle-bar:nth-child(1){top:0;} .menu-toggle-bar:nth-child(2){top:calc(100% - 1.6px);} .menu-toggle.open .menu-toggle-bar{top:calc(50% - .8px);} .menu-toggle.open .menu-toggle-bar:nth-child(1){transform:rotate(45deg);} .menu-toggle.open .menu-toggle-bar:nth-child(2){transform:rotate(-45deg);} .header-row{ width:100%;display:flex;justify-content:space-between;align-items:center; position:relative; } .logo-group{display:flex;align-items:center;} header .logo{font-size:15px;letter-spacing:.05em;font-weight:600;text-decoration:none;} nav{display:flex;gap:32px;} nav a{color:var(--fg);text-decoration:none;font-size:13px;letter-spacing:.05em;position:relative;} nav a::after{ content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--fg); transition:width .3s ease; } nav a:hover::after{width:100%;} nav a.active::after{width:100%;} /* small moving card in header */ .header-orb{ position:relative; width:14px;height:20px;border-radius:50%; background:var(--accent); margin-left:12px;flex:0 0 auto; will-change:transform; } .header-orb::after{ content:'';position:absolute;top:-4px;left:50%; width:1.5px;height:9px;background:#111111; transform:translateX(-50%) rotate(18deg); transform-origin:bottom center; } .availability-badge{ display:inline-flex;align-items:center;gap:9px; padding:8px 16px;border-radius:999px; font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:#111111; } .availability-badge .dot{ width:8px;height:8px;border-radius:50%; background:var(--accent);position:relative;flex:0 0 auto; } .availability-badge .dot::after{ content:'';position:absolute;inset:-4px;border-radius:50%; background:var(--accent);opacity:.5; animation:badgePulse 1.8s ease-out infinite; } @keyframes badgePulse{ 0%{transform:scale(.6);opacity:.5;} 100%{transform:scale(1.8);opacity:0;} } /* full-screen mobile nav overlay — sits just under the header (which stays fixed above it so the hamburger/close button remains visible and clickable) and reveals itself as a circle growing from the button's corner. Follows the page theme (var(--bg)/var(--fg)), unlike the header itself which always stays a light glass bar. */ .mobile-menu{ position:fixed;inset:0;z-index:99; display:none; flex-direction:column; justify-content:center; padding:0 20px; background:var(--bg); clip-path:circle(0% at calc(100% - 32px) 36px); pointer-events:none; } .mobile-menu.open{display:flex;pointer-events:auto;} .mobile-menu-nav{display:flex;flex-direction:column;} .mobile-menu-nav a{ display:flex;align-items:baseline;gap:16px; padding:18px 0;border-top:1px solid var(--line); text-decoration:none;color:var(--fg); transition:color .25s ease; } .mobile-menu-nav a:last-child{border-bottom:1px solid var(--line);} .mobile-menu-nav a:active{color:var(--accent);} .mobile-menu-num{font-size:12px;color:var(--accent);letter-spacing:.05em;flex:0 0 auto;} .mobile-menu-label{font-size:clamp(30px,10vw,44px);font-weight:600;letter-spacing:-.01em;} .mobile-menu-footer{ position:absolute;left:20px;bottom:28px; font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted); } @media(min-width:641px){ .mobile-menu{display:none !important;} } /* "¿Por qué elegirnos?" — one container (marquee flush against its top edge, then title 180px below, cards 80px below that, 180px of margin after) that rises up to cover the pinned image as you scroll, same idea as vicrojo.com's transition. It's never height-constrained — only transform-shifted — so it can grow freely with its content without clipping. The pixel/squares pinned animation further below rises to cover this one in turn, starting well before it's fully scrolled past (see the JS comment on that trigger). */ .whyus-content{ position:relative;z-index:2; background:#fdfdfb; padding:0 0 180px; min-height:0; will-change:transform; } .whyus-marquee{ overflow:hidden; border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:20px 0; width:100%; margin-bottom:180px; } .whyus-marquee-track{ display:flex;width:max-content; animation:whyus-marquee-scroll 22s linear infinite; } .whyus-marquee-track span{ font-size:clamp(26px,4.5vw,58px);font-weight:800;letter-spacing:-.01em;text-transform:uppercase; color:#111111;white-space:nowrap;margin-right:40px; display:inline-flex;align-items:center;gap:40px; } .whyus-marquee-track span::after{content:'→';color:var(--accent);} @keyframes whyus-marquee-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* .scroll-marquee: the track only moves in response to page scroll (no autoplay) — driven by JS, so the CSS loop is turned off here. */ .scroll-marquee .whyus-marquee-track{animation:none;} .whyus-body{padding:0 48px;} /* home-page eyebrows in red — Servicios keeps its own white (it sits on the red fill itself, see .pixel-content .eyebrow below). */ #about .eyebrow, .whyus-body .eyebrow, .work-header .eyebrow, #faq .eyebrow, #contact .eyebrow{ color:var(--accent); } #about .eyebrow::before, .whyus-body .eyebrow::before, .work-header .eyebrow::before, #faq .eyebrow::before, #contact .eyebrow::before{ background:var(--accent); } .whyus-title{ font-size:clamp(32px,5vw,56px);font-weight:800;color:#111111; line-height:1.1;text-align:left;letter-spacing:-.02em; } /* title + "view all" link on the same row, link pinned to the far right — shared between the Casos and Servicios section headers. */ .section-title-row{ display:flex;justify-content:space-between;align-items:center; gap:24px;flex-wrap:wrap; } .section-title-row > h2{margin:0;} .whyus-body .section-title-row{margin:16px 0 24px;} .pixel-content .section-title-row{margin-bottom:40px;} .view-all-link{ display:inline-flex;align-items:center;gap:8px; flex:0 0 auto; font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--accent);text-decoration:none;white-space:nowrap; } .view-all-arrow{transition:transform .25s ease;} .view-all-link:hover .view-all-arrow{transform:translateX(4px);} .pixel-content .view-all-link{color:#ffffff;} .whyus-intro{ font-size:16px;line-height:1.6;color:#4a4a4a; max-width:640px;margin:0 0 56px; } .whyus-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} /* portfolio-card pattern copied from vicrojo.com's work grid: no border, image-only at rest, a blurred dark scrim + the title fade and slide up into view on hover. */ .whyus-card{ display:block;color:inherit;text-decoration:none; position:relative;overflow:hidden;border-radius:14px; aspect-ratio:667/502;cursor:pointer; background:#161616; } .whyus-card img{ width:100%;height:100%;object-fit:cover;display:block; } .whyus-card-overlay{position:absolute;inset:0;color:#fdfff6;} .whyus-card-blur{ position:absolute;inset:0; background:rgba(0,0,0,0.28); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); opacity:0;transition:opacity .6s; } .whyus-card-content{ position:relative;height:100%; display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end; padding:2em; opacity:0;transform:translateY(25%); transition:opacity 1.2s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1); } .whyus-card-content p{margin-top:12px;font-size:15px;line-height:1.5;max-width:36ch;} .whyus-card-content h3{ font-size:clamp(26px,3vw,40px);font-weight:600;line-height:1.2; color:#fdfff6; } .whyus-card:hover .whyus-card-blur{opacity:1;} .whyus-card:hover .whyus-card-content{opacity:1;transform:translateY(0);} /* IMAGE — pinned (sticky) for a stretch of scroll while "¿por qué elegirnos?" rises up from below to cover it. */ #pixel-fill{height:200vh;position:relative;} .pixel-inner{ position:sticky;top:0;height:100vh;overflow:hidden; } .pixel-photo-layer{ position:absolute;inset:0;z-index:1; overflow:hidden; opacity:0; transform:translateY(50px); will-change:transform, opacity; } .pixel-photo-img{ position:absolute;left:0;right:0;top:0; height:130%; background-image:url('../vermu-hero-bg.png'); background-size:cover; background-position:center; transform:translateY(-23%); will-change:transform; } .pixel-photo-caption{ position:absolute;right:32px;top:50%;transform:translateY(-50%);z-index:2; display:inline-flex;align-items:center;gap:12px; max-width:min(360px, calc(100% - 64px)); font-size:19px;line-height:1.4;letter-spacing:.01em; color:#ffffff; } html:not([data-theme="light"]) .pixel-photo-caption{color:var(--accent);} .pixel-photo-caption .dot{ width:8px;height:8px;border-radius:50%; background:var(--accent);position:relative;flex:0 0 auto; } .pixel-photo-caption .dot::after{ content:'';position:absolute;inset:-4px;border-radius:50%; background:var(--accent);opacity:.5; animation:badgePulse 1.8s ease-out infinite; } /* PIXEL SQUARES — rises to cover "¿Por qué elegirnos?" (starting well before it's fully scrolled past — see the JS trigger), the red grid filling bottom row first as it rises, transitioning the white background into Servicios' red. No pin of its own: the whole section is just transform-positioned into place by that same JS, the same way "¿por qué elegirnos?" rises over the photo above it. */ #pixel-squares{height:100vh;position:relative;z-index:3;} .pixel-squares-inner{ height:100vh;overflow:hidden; display:grid; background:#fdfdfb; } .pixel-cell{ background:var(--accent); transform:scale(0); will-change:transform; } .pixel-content{ position:relative;z-index:4; background:var(--accent); min-height:100vh; padding:120px 48px 100px; will-change:transform; } /* text (eyebrow/title/intro) on the left, services accordion on the right — the text column sticks in place while the accordion scrolls past it, since the list can grow much taller than the text once rows are expanded. */ .pixel-content-grid{ display:flex;gap:64px;align-items:flex-start; } .pixel-content-text{ flex:0 0 360px; position:sticky;top:120px; } .pixel-content-list{ flex:1 1 auto; min-width:0; } .pixel-content .eyebrow{color:#ffffff;margin-bottom:24px;} .pixel-content .eyebrow::before{background:#ffffff;} .pixel-content-title{ color:#ffffff; font-size:clamp(32px,5vw,56px);font-weight:800; line-height:1.1;text-align:left;letter-spacing:-.02em; } .pixel-content-intro{ color:#ffffff; font-size:16px;line-height:1.6; margin-bottom:40px; } .pixel-content .skill-row{ border-top-color:rgba(255,255,255,0.25); opacity:1; transform:none; display:block; cursor:pointer; pointer-events:auto; position:relative; } .pixel-content .skill-row-header{ display:flex;align-items:center;gap:24px; position:relative; } .pixel-content .skill-row .desc{ max-height:0;opacity:0;overflow:hidden; transition:max-height .4s ease, opacity .35s ease, padding .4s ease; padding-top:0; display:flex;gap:56px;align-items:flex-start;flex-wrap:wrap; text-align:left;margin-left:0;max-width:960px; font-size:16px; position:relative; } .pixel-content .skill-row.open .desc{ max-height:2000px;opacity:1;padding-top:14px; } .pixel-content .skill-row .desc p{margin:0;flex:1 1 300px;} .pixel-content .skill-row .desc ul{ list-style:none;margin:0;flex:1 1 260px; } .pixel-content .skill-row .desc ul li{ font-size:16px;line-height:1.5;padding:10px 0 10px 24px;position:relative; color:rgba(255,255,255,0.85); border-bottom:1px solid rgba(255,255,255,0.14); transition:padding-left .25s ease, color .25s ease; } .pixel-content .skill-row .desc ul li:first-child{padding-top:0;} .pixel-content .skill-row .desc ul li:last-child{border-bottom:none;padding-bottom:0;} .pixel-content .skill-row .desc ul li::before{ content:'→';position:absolute;left:0;top:9px;color:#ffffff;font-size:12px; transition:transform .25s ease; } .pixel-content .skill-row .desc ul li:hover{ color:#ffffff;padding-left:30px; } .pixel-content .skill-row .desc ul li:hover::before{ transform:translateX(4px); } .pixel-content .skill-row .plus-icon{ margin-left:auto;flex:0 0 auto; width:20px;height:20px;position:relative; color:#ffffff; } .pixel-content .skill-row .plus-icon::before, .pixel-content .skill-row .plus-icon::after{ content:'';position:absolute;top:50%;left:50%; background:currentColor; transition:transform .3s ease; } .pixel-content .skill-row .plus-icon::before{ width:14px;height:2px;transform:translate(-50%,-50%); } .pixel-content .skill-row .plus-icon::after{ width:2px;height:14px;transform:translate(-50%,-50%); } .pixel-content .skill-row.open .plus-icon::after{ transform:translate(-50%,-50%) rotate(90deg);opacity:0; } .pixel-content .skill-row.open .plus-icon::before{ transform:translate(-50%,-50%) rotate(180deg); } .pixel-content .skill-row:last-child{border-bottom-color:rgba(255,255,255,0.25);} .pixel-content .skill-row .num{color:#ffffff;} .pixel-content .skill-row .title{color:#ffffff;} .pixel-content .skill-row .desc{color:rgba(255,255,255,0.75);} .pixel-label{ position:absolute;bottom:40px;left:48px;z-index:3; font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bg); mix-blend-mode:difference; } section{ min-height:100vh; padding:120px 48px 100px; position:relative; } /* HERO */ #hero{ position:relative; display:flex;flex-direction:column;justify-content:space-between; min-height:100vh;padding-bottom:40px;padding-top:140px; } .hero-top{text-align:left;} .hero-bottom{ text-align:right;margin-top:auto; } .hero-bottom-inner{display:inline-block;text-align:left;position:relative;} /* shared two-line title treatment: each line masks and slides its own span in independently, used by both the hero-top and hero-bottom titles */ .hero-line{overflow:hidden;padding-bottom:0.1em;} .hero-line span{ display:inline-block; font-size:clamp(48px,9vw,140px); font-weight:800; line-height:.95; letter-spacing:-.02em; transform:translateY(110%); will-change:transform; } .hero-bottom-inner .fill{ position:absolute;inset:0;color:var(--accent); clip-path:inset(0 0 100% 0); } .hero-glass{ position:absolute;left:50%;top:50%; width:min(24vw,200px); transform:translate(-50%,-50%) rotate(0deg); transform-origin:50% 54%; z-index:-1;pointer-events:none; filter:drop-shadow(0 20px 40px rgba(0,0,0,0.2)); } .hero-glass svg{display:block;width:100%;height:auto;} .hero-sub{ margin-top:24px;max-width:420px;color:var(--muted); font-size:16px;line-height:1.6; opacity:0;transform:translateY(20px); } /* HERO FOOTER ROW: left label+text / center field / right clock */ .hero-footer{ display:flex;justify-content:space-between;align-items:flex-end; gap:24px;flex-wrap:wrap;padding-bottom:24px; } .hero-footer .col{opacity:0;transform:translateY(16px);} .hero-footer .label{ font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); margin-bottom:10px;display:block; } .hero-footer .col-left p{ max-width:320px;font-size:13px;line-height:1.6;color:var(--fg); } .hero-footer .col-field{ display:flex;align-items:center;gap:8px; border:1px solid var(--line);border-radius:6px; padding:8px 14px;font-size:12px;color:var(--muted); background:rgba(243,241,234,0.03); } .hero-footer .col-field input{ background:transparent;border:none;outline:none;color:var(--fg); font-size:12px;width:120px;font-family:inherit; } .hero-footer .col-field input::placeholder{color:var(--muted);} .hero-footer .col-right{text-align:right;} .hero-footer .col-right .clock{ font-size:13px;color:var(--fg);letter-spacing:.05em; } /* SECTION LABEL */ .eyebrow{ display:flex;align-items:center;gap:12px;margin-bottom:60px; font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted); } .eyebrow::before{content:'';width:32px;height:1px;background:var(--muted);} /* REVEAL TEXT BLOCK (about) */ .reveal-block{ max-width:900px; } .reveal-line{overflow:hidden;} .reveal-line p{ font-size:clamp(24px,3.4vw,44px); line-height:1.35;font-weight:500; transform:translateY(100%); will-change:transform; } .reveal-line p .muted{color:var(--muted);} /* SKILLS - number rows */ .skill-row{ display:flex;align-items:baseline;gap:28px; padding:26px 0;border-top:1px solid var(--line); opacity:0;transform:translateX(-24px); } .skill-row:last-child{border-bottom:1px solid var(--line);} .skill-row .num{font-size:13px;color:var(--accent);} .skill-row .title{font-size:clamp(22px,3vw,36px);font-weight:600;} .skill-row .desc{margin-left:auto;max-width:340px;color:var(--muted);font-size:14px;text-align:right;} /* WORK HEADER (pinned title+line+body inside the carousel) */ .work-header{ padding:41px 48px 0; text-align:left;flex:0 0 auto; } .work-header h2{ font-size:clamp(32px,5vw,56px);font-weight:800;text-align:left; line-height:1.1;letter-spacing:-.02em; margin-bottom:40px; } .work-header .divider-line{ height:1px;background:var(--line); margin-bottom:40px; } .work-header p{ max-width:640px;margin:0 0 40px;text-align:left;font-size:16px;line-height:1.7;color:var(--muted); } /* SCROLL DIVIDER (teaser dot sliding down a line between sections) */ .case-lead{ display:flex;justify-content:center; height:100px;position:relative; padding:24px 0;box-sizing:border-box; } .case-lead .teaser-stem{ width:1px;height:100%;background:var(--line);position:relative; } .case-lead .teaser-dot{ position:absolute;left:50%;top:0; transform:translate(-50%,-50%); width:8px;height:8px;background:var(--accent); will-change:top; } /* HOW WE WORK - horizontal scroll gallery */ #how-pin{height:300vh;position:relative;} .work-inner{ position:sticky;top:0;height:100vh;overflow:hidden; display:flex;flex-direction:column; } .work-track{ display:flex;align-items:center;gap:40px;padding:0 48px; flex:1 1 auto;min-height:0;will-change:transform; } .work-card{ flex:0 0 auto;width:min(60vw,520px); color:inherit;text-decoration:none;display:block; } .work-card .frame{ width:100%;aspect-ratio:16/10; background:#161616;border:1px solid var(--line);border-radius:6px; margin-bottom:18px;position:relative;overflow:hidden; } .work-card .frame::after{ content:'';position:absolute;inset:0; background:repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(255,255,255,0.03) 18px, rgba(255,255,255,0.03) 36px); } .work-card .idx{font-size:12px;color:var(--accent);margin-bottom:6px;} .work-card h3{font-size:22px;font-weight:600;margin-bottom:4px;} .work-card p{font-size:13px;color:var(--muted);} /* "Cómo trabajamos" cards — bordered box, small accent number, title, description, plus a closing card about pricing */ .how-card{ border:2px solid var(--line);border-radius:6px;padding:32px; width:min(65vw,360px);min-height:440px; display:flex;flex-direction:column;justify-content:flex-start; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .how-card:hover{ border-color:var(--accent); transform:translateY(-8px); box-shadow:0 16px 32px rgba(0,0,0,0.12); } .how-card .step-num{ display:block;font-size:36px;font-weight:800;color:var(--accent);margin-bottom:24px; } .how-card h3{font-size:19px;font-weight:700;margin-bottom:12px;line-height:1.3;} .how-card p{font-size:16px;line-height:1.7;} .how-invest-card{ justify-content:center; border-color:var(--accent); } .how-invest-card h3{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);} .how-invest-card p{font-size:15px;line-height:1.8;} /* STATS — always-dark strip regardless of site theme, same idea as Servicios always being red: a few big numbers for quick credibility right before FAQ. */ #stats{ min-height:auto; padding:56px 48px; } .stats-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:40px; border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:56px 0; text-align:center; } .stat-number{ font-size:clamp(40px,7vw,88px);font-weight:800;color:var(--fg); line-height:1;letter-spacing:-.02em; display:flex;align-items:flex-start;justify-content:center; } .stat-plus{font-size:.4em;color:var(--accent);margin-left:2px;} .stat-label{ margin-top:20px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } @media(max-width:640px){ #stats{padding:32px 20px;} .stats-grid{gap:16px;padding:32px 0;} } /* CONTACT */ #contact{ display:flex;flex-direction:column;justify-content:center;min-height:80vh; } .contact-title{ font-size:clamp(28px,4vw,44px);font-weight:800;color:var(--fg); line-height:1.15;letter-spacing:-.02em;margin-bottom:24px;max-width:16ch; } .contact-link{ font-size:clamp(40px,7vw,96px);font-weight:700; display:inline-block;text-decoration:none;color:var(--fg); border-bottom:2px solid transparent; transition:border-color .3s ease, color .3s ease; } .contact-link:hover{border-color:var(--accent);color:var(--accent);} .bio-contact-email{font-size:clamp(32px,9.2vw,190px);white-space:nowrap;} footer{ display:flex;justify-content:space-between;padding:32px 48px; font-size:12px;color:var(--muted);border-top:1px solid var(--line); } footer a{color:inherit;text-decoration:none;} [data-fade]{opacity:0;transform:translateY(30px);} /* INTERIOR PAGES (about/services/case-study/profile content pages) */ body{counter-reset:case-section;} .back-nav{ display:inline-flex;align-items:center;gap:6px; margin-bottom:32px; font-size:13px;letter-spacing:.03em;color:var(--muted); text-decoration:none; } .back-nav:hover{color:var(--fg);} .page-hero{ min-height:auto; padding:190px 48px 80px; } .page-hero .page-title{ font-size:clamp(40px,7vw,104px);font-weight:800;line-height:1;letter-spacing:-.02em; max-width:1000px;margin-bottom:28px; opacity:0;transform:translateY(44px);will-change:transform,opacity; } .page-hero .page-intro{ max-width:640px;font-size:16px;line-height:1.75;color:var(--muted); opacity:0;transform:translateY(26px);will-change:transform,opacity; } .page-meta{ display:flex;flex-wrap:wrap;gap:32px;margin-top:40px; } .page-meta .meta-item{font-size:13px;color:var(--muted);} .page-meta .meta-item b{display:block;color:var(--fg);font-weight:600;margin-bottom:4px;} .page-cover{ margin:0 48px 100px;border-radius:6px;overflow:hidden; aspect-ratio:16/9;position:relative;background:rgba(128,128,128,0.06); opacity:0;transform:translateY(48px) scale(.97);will-change:transform,opacity; } .page-cover img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .8s cubic-bezier(.16,1,.3,1); } .page-cover:hover img{transform:scale(1.045);} .page-cover::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 47%, transparent 64%); transform:translateX(-130%); transition:transform 1s ease; } .page-cover:hover::after{transform:translateX(130%);} .article-section{ max-width:820px;margin:0 auto;padding:0 48px 100px; opacity:0;transform:translateY(40px);will-change:transform,opacity; } .article-section .eyebrow{margin-bottom:24px;} .article-section:has(> h2){counter-increment:case-section;} .article-section h2{ font-size:clamp(24px,3vw,34px);font-weight:700;margin-bottom:22px;line-height:1.25; position:relative; } .article-section h2::before{ content:counter(case-section,decimal-leading-zero); display:block; font-size:12px;font-weight:700;letter-spacing:.15em; color:var(--accent);margin-bottom:14px; } .article-section p{ font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:20px;max-width:720px; } .article-section p:last-child{margin-bottom:0;} /* NOSOTROS — brand-story block: title left, body pushed right, closing line right-aligned — same mixed-alignment idea as the hero's left title / right payoff, reused here at article-section scale. */ .nosotros-story{max-width:none;margin:0;} .nosotros-story-inner{max-width:1100px;} .nosotros-story-title{ font-size:clamp(38px,6.5vw,88px);font-weight:800;line-height:1.05; letter-spacing:-.02em;text-align:left;max-width:900px; margin-bottom:48px;color:var(--fg); } .nosotros-story-inner .nosotros-story-title::before{content:none;} .nosotros-story-body{ margin-left:auto;max-width:560px; } .nosotros-story-body p{ font-size:18px;line-height:1.7;color:var(--fg);margin-bottom:24px;max-width:none; } .nosotros-story-body p:last-child{margin-bottom:0;} .nosotros-story-body em{font-style:italic;color:var(--accent);} .nosotros-story-tagline{ display:flex;align-items:flex-start;gap:32px; max-width:680px;margin:56px 0 0 auto; } .nosotros-story-tag{ flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--accent);white-space:nowrap; margin-top:6px; } .nosotros-story-close{ font-size:clamp(22px,2.6vw,32px);font-weight:600;line-height:1.35; text-align:left;color:var(--fg); } @media(max-width:640px){ .nosotros-story-title{margin-bottom:32px;} .nosotros-story-body{margin-left:0;max-width:none;} .nosotros-story-body p{font-size:16px;} .nosotros-story-tagline{flex-direction:column;gap:12px;margin:32px 0 0;max-width:none;} } /* NOSOTROS — team photo grid: 2-column masonry, photo then name row with a "+" underneath, matching the old site's team layout. */ .team-grid{columns:2;column-gap:24px;margin-top:8px;} .team-card{ display:block;break-inside:avoid;margin-bottom:24px; color:inherit;text-decoration:none; } .team-card img{width:100%;display:block;border-radius:6px;background:rgba(128,128,128,0.06);} .team-card-label{ display:flex;justify-content:space-between;align-items:center;gap:12px; border-top:1px solid var(--line);margin-top:16px;padding-top:12px; font-size:16px;font-weight:700; } .team-card-plus{color:var(--accent);font-size:18px;line-height:1;} a.team-card:hover .team-card-label{color:var(--accent);} @media(max-width:640px){ .team-grid{columns:1;} } .case-grid{ display:flex;flex-wrap:wrap;gap:40px; padding:0 48px 100px; } .case-grid .work-card{width:calc(50% - 20px);} @media(max-width:820px){ .case-grid .work-card{width:100%;} } /* CASE STUDY — rich editorial layout (two-column eyebrow/title + body, overlapping photo pairs, side-by-side text+image, staggered gallery) */ .case-row{ display:flex;gap:64px;padding:0 48px 60px;flex-wrap:wrap; } .case-row-text{flex:0 0 320px;} .case-row-text .eyebrow{margin-bottom:0;} .case-row-text h2{ font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.3;margin-top:16px; } .case-row-body{flex:1 1 420px;max-width:640px;} .case-row-body p{font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:18px;} .case-row-body p:last-child{margin-bottom:0;} .case-media{padding:0 48px 100px;} .case-media img{width:100%;display:block;border-radius:6px;object-fit:cover;} .case-media-full img{aspect-ratio:2/1;} .case-media-overlap{position:relative;padding:0 48px 140px;} .case-media-overlap .media-main{ width:64%;max-width:820px;aspect-ratio:4/5;object-fit:cover;border-radius:6px;display:block; } .case-media-overlap .media-accent{ position:absolute;left:calc(46% + 24px);bottom:0; width:38%;max-width:440px;aspect-ratio:4/5;object-fit:cover;border-radius:6px; box-shadow:0 24px 48px rgba(0,0,0,0.25); border:6px solid var(--bg); } .case-split{ display:flex;gap:64px;padding:0 48px 100px;align-items:flex-start;flex-wrap:wrap; } .case-split-text{flex:1 1 380px;max-width:480px;} .case-split-text h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;margin:16px 0 20px;line-height:1.3;} .case-split-text h4{font-size:13px;font-weight:700;letter-spacing:.03em;margin-bottom:16px;} .case-split-text p{font-size:15px;line-height:1.85;color:var(--muted);} .case-split-media{flex:1 1 420px;display:flex;flex-direction:column;gap:24px;} .case-split-media img{width:100%;border-radius:6px;display:block;object-fit:cover;aspect-ratio:3/2;} .case-media-natural img{aspect-ratio:auto;} .case-gallery{display:flex;gap:24px;padding:0 48px 100px;} .case-gallery-col{flex:1 1 0;display:flex;flex-direction:column;gap:24px;} .case-gallery-col img{width:100%;border-radius:6px;display:block;object-fit:cover;aspect-ratio:4/3;} .case-gallery-col-offset{margin-top:-120px;} .case-links{padding:0 48px 100px;} .page-cover .cover-logo{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:min(22%,220px);z-index:2;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.25)); } .case-cols{display:flex;gap:64px;padding:0 48px 100px;flex-wrap:wrap;} .case-cols>div{flex:1 1 380px;} .case-text{max-width:640px;padding:0 48px 60px;} .case-media-right{padding:0 48px 100px;display:flex;justify-content:flex-end;} .case-media-right img{width:min(42%,600px);border-radius:6px;object-fit:cover;aspect-ratio:1/1;display:block;} .case-phases{display:flex;gap:24px;flex-wrap:wrap;padding:0 48px 100px;} .case-phases>div{flex:1 1 240px;border-top:1px solid var(--line);padding-top:20px;} .case-phases .phase-num{font-size:22px;font-weight:800;color:var(--accent);margin-bottom:10px;display:block;} .case-phases .phase-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:block;} .case-phases ul{list-style:none;} .case-phases ul li{font-size:13px;line-height:1.6;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--line);} .case-phases ul li:last-child{border-bottom:none;} .case-row-text h4,.case-row-body h4{font-size:14px;font-weight:700;margin:24px 0 16px;} .case-row-body h4:first-child{margin-top:0;} /* case-study TOC layout — left column is a sticky, scroll-spy index; the other two columns are one wide left-aligned content flow. Sections inside .case-toc-content are plain, single-column blocks (no case-row split), since the index already claims a column. */ .case-toc-layout{ display:flex;gap:64px;align-items:flex-start; padding:0 48px 100px; } .case-toc{ flex:0 0 220px; position:sticky;top:120px; display:flex;flex-direction:column;gap:14px; } .case-toc-link{ font-size:13px;color:var(--muted);text-decoration:none; transition:color .3s ease; } .case-toc-link::after{content:none;} .case-toc-link:hover{color:var(--fg);} .case-toc-link.active{color:var(--accent);font-weight:600;} .case-toc-content{flex:1 1 auto;min-width:0;max-width:820px;} .case-toc-section{padding-bottom:100px;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; } .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-media{margin-top:40px;} .case-toc-media.case-toc-gallery{display:flex;gap:24px;} .case-toc-media.case-toc-gallery>div{flex:1 1 0;display:flex;flex-direction:column;gap:24px;} .case-toc-media.case-toc-gallery>div:last-child{margin-top:-80px;} .case-toc-media img{width:100%;border-radius:6px;display:block;object-fit:cover;} .case-toc-media.case-toc-gallery img{aspect-ratio:4/3;} .case-toc-media.case-toc-full img{aspect-ratio:2/1;} .case-toc-media.case-toc-full.case-toc-natural img{aspect-ratio: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%;border-radius:6px;display:block;object-fit:cover;aspect-ratio:3/2;} @media(max-width:960px){ .case-toc-layout{flex-direction:column;gap:32px;padding:0 20px 60px;} .case-toc{ position:static;flex-direction:row;flex-wrap:wrap;gap:10px 24px; width:100%;padding-bottom:20px;border-bottom:1px solid var(--line); } .case-toc-link{padding-bottom:0;} .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;} } @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" "photo" "bottom" "quote" "content"; row-gap:6px; padding-bottom:8px;padding-top:clamp(36px,6vh,60px); } .bio-hero-full .hero-top{grid-area:top;position:relative;z-index:2;} .bio-hero-full .hero-mid-photo{ grid-area:photo;justify-self:start;align-self:start; width:300px;max-height:52vh;aspect-ratio:3/4; margin-top:-80px;position:relative;z-index:1; overflow:hidden;background:#161616; opacity:0;transform:translateY(20px); } .bio-hero-full .hero-mid-photo img{width:100%;height:100%;object-fit:cover;display:block;} .bio-hero-full .hero-bottom{grid-area:bottom;align-self:end;text-align:left;margin-top:0;} .bio-hero-full .hero-contact{ grid-area:content; 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{ grid-area:quote;align-self:start; 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;} } /* 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; font-size:clamp(90px,30vw,170px); letter-spacing:0; } @media(min-width:641px){ .bio-hero-full .hero-line-name span{ font-size:clamp(130px,min(15vw,24vh),260px); } } .bio-process,.bio-experience,.bio-education,.bio-skills,.bio-areas,.exp-static{ padding-top:80px;padding-bottom:100px; } .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;} .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-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;} /* 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, .exp-static .pixel-content-text{position:static;} .exp-static-row{ display:grid;grid-template-columns:repeat(2,1fr);gap:56px 64px; padding:48px 0;border-bottom:1px solid var(--line); } .exp-static-row:first-child{padding-top:0;} .exp-static-row:last-child{border-bottom:none;padding-bottom:0;} .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-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;} @media(max-width:640px){ .exp-static-row{grid-template-columns:1fr;gap:40px;} } .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 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