/* ═══════════════════════════════════════════════════════════ SEBASTIAN RIVERA — ARCHITECTURAL VISUALIZATION PORTFOLIO Design system + motion ═══════════════════════════════════════════════════════════ */ :root{ /* Palette — neutral, architectural */ --black:#090908; --ink:#0E0E0D; --char:#161614; --stone:#22221F; --conc:#6E6D66; --mid:#9C9A92; --bone:#E7E3DA; --warm:#F6F2EA; --beige:#C6B79F; --wood:#8B6B47; --clay:#C2673D; --navy:#2C4E8A; --navy-hi:#6E9FE0; --sheen:#BFD8F7; --line:rgba(231,227,218,.13); --line-2:rgba(231,227,218,.06); --line-3:rgba(231,227,218,.24); --fd:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; --fm:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; --gut:clamp(20px,4.2vw,72px); --maxw:1680px; --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); } *,*::before,*::after{box-sizing:border-box} html{ background:var(--black); scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--black); color:var(--bone); font-family:var(--fd); font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* `clip` (not `hidden`) — `hidden` would turn into the scroll container, which breaks window.scrollY and position:sticky. */ overflow-x:clip; } body.is-locked{overflow:hidden;height:100vh} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0} ul,ol{list-style:none} ::selection{background:var(--clay);color:var(--warm)} .wrap{ width:100%;max-width:var(--maxw); margin-inline:auto;padding-inline:var(--gut); position:relative; } /* ── Micro / technical type ───────────────────────────── */ .idx,.lbl,.sec-head__n,.hud,.dimtxt{ font-family:var(--fm); font-size:clamp(9px,.72vw,11px); letter-spacing:.16em; text-transform:uppercase; font-weight:400; } /* ═══════════ REVEAL PRIMITIVES ═══════════ */ [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease) var(--d,0ms), transform 1.15s var(--ease) var(--d,0ms); will-change:opacity,transform; } [data-reveal].is-in{opacity:1;transform:none} /* line-mask reveal */ .ln{display:block;overflow:hidden;padding-bottom:.04em} .ln>i{ display:block;font-style:normal; transform:translateY(115%); transition:transform 1.25s var(--ease) var(--d,0ms); will-change:transform; } .ln[data-reveal]{opacity:1;transform:none} .ln.is-in>i,.is-in .ln>i{transform:none} /* stroke draw-on */ [data-draw]{ stroke-dasharray:var(--L,1000); stroke-dashoffset:var(--L,1000); transition:stroke-dashoffset 1.7s var(--ease-io) var(--d,0ms); } .is-in [data-draw],[data-draw].is-in{stroke-dashoffset:0} /* ═══════════ IMAGE SLOT PLACEHOLDERS ═══════════ */ .slot{opacity:0;transition:opacity 1s var(--ease)} .slot.is-ok{opacity:1} /* clip de fondo — se comporta igual que una imagen de relleno */ .bgvid{display:block;width:100%;height:100%;object-fit:cover;border:0;background:var(--char)} .hero__bg .bgvid,.contact__bg .bgvid{width:100%;height:100%} .cine .bgvid{aspect-ratio:21/9;height:auto} .ph{ position:relative;width:100%; background: linear-gradient(rgba(231,227,218,.028) 1px,transparent 1px) 0 0/100% 34px, linear-gradient(90deg,rgba(231,227,218,.028) 1px,transparent 1px) 0 0/34px 100%, var(--char); border:1px solid var(--line); display:grid;place-items:center; overflow:hidden; color:var(--conc); } .ph::before,.ph::after{ content:'';position:absolute;pointer-events:none; border:1px solid var(--line-3); } .ph::before{inset:12px;border-width:0; border-top:1px solid var(--line-3);border-left:1px solid var(--line-3); width:22px;height:22px} .ph::after{right:12px;bottom:12px; border-width:0;border-bottom:1px solid var(--line-3);border-right:1px solid var(--line-3); width:22px;height:22px} .ph__c{ position:relative;z-index:2;text-align:center; font-family:var(--fm);letter-spacing:.18em;text-transform:uppercase; display:grid;gap:9px;padding:16px; } .ph__c b{font-size:clamp(10px,.85vw,12px);color:var(--beige);font-weight:500} .ph__c span{font-size:9px;color:var(--conc)} .ph__ico{width:52px;height:52px;margin:0 auto 4px;opacity:.5} /* full-bleed background slot — label steps aside for the headline */ .ph--bg{border:0;background-size:52px 52px,52px 52px,auto} .ph--bg::before,.ph--bg::after{display:none} .ph--bg .ph__c{ position:absolute;right:clamp(20px,4vw,72px);bottom:78px; text-align:right;opacity:.6; } .ph--bg .ph__ico{display:none} /* ═══════════ VISOR A PANTALLA COMPLETA ═══════════ */ /* lo que se puede ampliar se anuncia solo, sin ensuciar la maqueta */ .zoomable{cursor:zoom-in} .zoomable:focus-visible{outline:1px solid var(--clay);outline-offset:3px} .lbox{ position:fixed;inset:0;z-index:200; background:rgba(6,6,5,.97); display:grid;grid-template-rows:1fr auto; opacity:0;transition:opacity .28s var(--ease); } /* IMPRESCINDIBLE: `display:grid` de arriba le gana a la regla `[hidden]` que trae el navegador, así que sin esto el visor se queda tendido sobre toda la página —invisible, pero a z-index 200— y se traga TODOS los clics: galería, menú, botón de contacto. Se ve solo con un clic de verdad. */ .lbox[hidden]{display:none} .lbox.is-open{opacity:1} .lbox__stage{ /* flex, no grid: un `max-height:100%` sobre un elemento de rejilla se resuelve contra una fila de tamaño automático — es circular y el navegador lo descarta, así que la pieza se desbordaba por abajo. En flex la altura del contenedor es firme y el límite sí se aplica. */ position:relative;display:flex;align-items:center;justify-content:center; /* Arriba y abajo IGUALES. Antes eran 70px y 6px, y la pieza aparecía unos 30px por debajo del centro real — se notaba como un descuadre al abrir. */ padding:clamp(52px,7vh,78px) clamp(44px,7vw,110px); min-height:0; overflow:hidden; /* al ampliar, nada se sale del marco */ } /* capa de zoom: escala y arrastre viven aquí, para no pisar la entrada */ .lbox__zoom{ display:flex;align-items:center;justify-content:center; width:100%;height:100%;min-height:0; transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--z,1)); transition:transform .25s var(--ease); will-change:transform; } .lbox__zoom.is-drag{transition:none} .lbox.is-zoomed .lbox__zoom{cursor:grab} .lbox.is-zoomed .lbox__zoom.is-drag{cursor:grabbing} /* `contain`, no `cover`: aquí la lámina se ve entera, que es el punto */ .lbox__stage img,.lbox__stage video{ max-width:100%;max-height:100%; width:auto;height:auto;object-fit:contain; border:0;background:var(--char); opacity:0; transition:opacity .34s var(--ease); } .lbox.is-ready .lbox__stage img,.lbox.is-ready .lbox__stage video{opacity:1} .lbox__cap{ display:flex;align-items:baseline;justify-content:center;gap:14px; padding:0 var(--gut) clamp(18px,3vh,30px); font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--mid);text-align:center; } .lbox__cap b{color:var(--clay);font-weight:400} .lbox__btn{ position:absolute;z-index:2; background:none;border:1px solid var(--line); color:var(--warm);cursor:pointer; display:grid;place-items:center; transition:border-color .3s,background .3s,color .3s; } .lbox__btn:hover{border-color:var(--clay);color:var(--clay)} .lbox__btn:focus-visible{outline:1px solid var(--clay);outline-offset:2px} .lbox__close{top:clamp(14px,2.4vh,26px);right:clamp(14px,2.4vw,30px);width:40px;height:40px} .lbox__close svg{width:15px;height:15px} /* el botón de pantalla completa va pegado al de cerrar, a su izquierda */ .lbox__fs{top:clamp(14px,2.4vh,26px);right:calc(clamp(14px,2.4vw,30px) + 48px);width:40px;height:40px} .lbox__fs svg{width:15px;height:15px} /* + y − siguen la misma fila que pantalla completa y cerrar */ .lbox__zin {top:clamp(14px,2.4vh,26px);right:calc(clamp(14px,2.4vw,30px) + 96px);width:40px;height:40px} .lbox__zout{top:clamp(14px,2.4vh,26px);right:calc(clamp(14px,2.4vw,30px) + 144px);width:40px;height:40px} .lbox__zin svg,.lbox__zout svg{width:15px;height:15px} .lbox__btn[disabled]{opacity:.32;cursor:default} .lbox__btn[disabled]:hover{border-color:var(--line);color:var(--warm)} /* nivel de ampliación, junto al contador */ .lbox__zlvl{ position:absolute;top:clamp(18px,2.8vh,30px);left:clamp(16px,2.6vw,32px);z-index:2; transform:translateY(18px); font-family:var(--fm);font-size:9px;letter-spacing:.18em;color:var(--clay); opacity:0;transition:opacity .25s; } .lbox.is-zoomed .lbox__zlvl{opacity:1} .lbox__nav{top:50%;transform:translateY(-50%);width:40px;height:64px} .lbox__nav svg{width:12px;height:12px} .lbox__nav--prev{left:clamp(8px,1.6vw,22px)} .lbox__nav--next{right:clamp(8px,1.6vw,22px)} .lbox__count{ position:absolute;top:clamp(18px,2.8vh,30px);left:clamp(16px,2.6vw,32px);z-index:2; font-family:var(--fm);font-size:10px;letter-spacing:.18em;color:var(--conc); } .lbox__count b{color:var(--bone);font-weight:400} /* En pantalla completa el visor ES la pantalla: el fondo tiene que ser opaco (si no, el navegador pinta negro puro detrás y el borde se nota) y la pieza puede respirar más, porque ya no compite con nada. */ .lbox:fullscreen{background:#060605} .lbox:-webkit-full-screen{background:#060605} .lbox.is-fs .lbox__stage{padding:clamp(34px,4.5vh,58px) clamp(30px,4vw,80px)} @media (max-width:640px){ .lbox__stage{padding:58px 10px} .lbox__nav{width:34px;height:52px} .lbox__fs {right:calc(clamp(14px,2.4vw,30px) + 44px)} .lbox__zin {right:calc(clamp(14px,2.4vw,30px) + 88px)} .lbox__zout{right:calc(clamp(14px,2.4vw,30px) + 132px)} } /* ═══════════ OPENING SEQUENCE ═══════════ */ .opener{ position:fixed;inset:0;z-index:100; background:var(--black); display:grid;place-items:center; overflow:hidden; } .opener__grid{ position:absolute;inset:0; background: linear-gradient(90deg,var(--line-2) 1px,transparent 1px) 0 0/8.33% 100%, linear-gradient(var(--line-2) 1px,transparent 1px) 0 0/100% 25%; opacity:0;animation:opGrid 1.4s var(--ease) .15s forwards; } @keyframes opGrid{to{opacity:1}} .opener__rule{position:absolute;background:var(--line-3)} .opener__rule--v{left:50%;top:0;width:1px;height:100%;transform:scaleY(0);transform-origin:top; animation:ruleV 1.5s var(--ease-io) .1s forwards} .opener__rule--h{top:50%;left:0;height:1px;width:100%;transform:scaleX(0);transform-origin:left; animation:ruleH 1.5s var(--ease-io) .25s forwards} @keyframes ruleV{to{transform:scaleY(1)}} @keyframes ruleH{to{transform:scaleX(1)}} .opener__inner{position:relative;z-index:3;text-align:center;padding-inline:var(--gut)} .opener__stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:max-content;max-width:92vw;opacity:0} .opener__stage[data-op="1"]{position:relative;transform:none;left:0;top:0;opacity:1} .opener__stage.is-on{opacity:1;transition:opacity .5s} .opener__stage.is-on .ln>i{transform:none} .opener__stage.is-out{opacity:1} .opener__stage.is-out .ln>i{transform:translateY(-118%)} .opener__name{ font-size:clamp(2.4rem,9vw,9rem);font-weight:800; letter-spacing:-.045em;line-height:.86;text-transform:uppercase; color:var(--warm); } .opener__roles{ font-size:clamp(.85rem,1.7vw,1.5rem);font-weight:500; line-height:1.55;color:var(--bone);letter-spacing:-.01em; } .opener__motto{ font-size:clamp(1.6rem,5.5vw,5rem);font-weight:700; letter-spacing:-.04em;color:var(--warm); display:flex;gap:.34em;justify-content:center;flex-wrap:wrap; } /* ── Opener line cadence ────────────────────────────────── Every line in a stage used to share delay 0, so a stage landed as one clump. These stagger it into distinct beats. */ .opener__stage .ln>i{transition-duration:1.05s} .opener__stage .ln:nth-child(2)>i{transition-delay:.14s} .opener__stage .ln:nth-child(3)>i{transition-delay:.28s} /* exiting is tighter than entering — it should feel like a cut */ .opener__stage.is-out .ln>i{transition-duration:.62s} .opener__stage.is-out .ln:nth-child(2)>i{transition-delay:.06s} .opener__stage.is-out .ln:nth-child(3)>i{transition-delay:.12s} /* the three motto words sit side by side, so they need a wider beat than stacked lines to read as three separate statements */ .opener__motto .ln:nth-child(2)>i{transition-delay:.26s} .opener__motto .ln:nth-child(3)>i{transition-delay:.52s} .opener__meta{ position:absolute;left:0;right:0;bottom:0;z-index:3; display:flex;justify-content:space-between;align-items:center; padding:22px var(--gut); font-family:var(--fm);font-size:10px;letter-spacing:.18em; color:var(--conc);text-transform:uppercase; } .opener__count b{color:var(--beige);font-weight:400} .opener__wipe{ position:absolute;inset:0;background:var(--black);z-index:5; transform:translateY(100%); } .opener.is-out .opener__wipe{transform:translateY(0);transition:transform .9s var(--ease-io)} .opener.is-gone{opacity:0;transition:opacity .5s;pointer-events:none} /* ═══════════ FIXED CHROME ═══════════ */ .grid-overlay{ position:fixed;inset:0;z-index:3;pointer-events:none; display:grid;grid-template-columns:repeat(6,1fr); max-width:var(--maxw);margin-inline:auto; padding-inline:var(--gut); mix-blend-mode:overlay;opacity:.5; } .grid-overlay span{border-left:1px solid var(--line-2)} .grid-overlay span:last-child{border-right:1px solid var(--line-2)} .hud{ position:fixed;left:0;right:0;z-index:20; display:flex;align-items:center;justify-content:space-between; padding:0 var(--gut);height:56px; pointer-events:none; font-family:var(--fm);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--mid); opacity:0;transition:opacity .8s .2s; } body.is-ready .hud{opacity:1} .hud a{pointer-events:auto} .hud--top{top:0;background:linear-gradient(var(--black),transparent)} .hud--bottom{bottom:0;background:linear-gradient(transparent,rgba(9,9,8,.9))} .hud__mark{display:flex;align-items:center;gap:10px;color:var(--warm);font-weight:500} .hud__mark svg{width:15px;height:15px;flex:none} .hud__nav{display:flex;gap:26px} .hud__nav a{position:relative;transition:color .4s} .hud__nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1px; background:currentColor;transition:right .5s var(--ease)} .hud__nav a:hover{color:var(--warm)} .hud__nav a:hover::after{right:0} .hud__nav .is-cta{color:var(--clay)} .hud__coord{color:var(--conc)} /* ── Botón ES / EN ────────────────────────────────────── */ /* Mando de dos posiciones, con el mismo filete azul marino que los marcos de la galería. El idioma activo va relleno, no sólo más claro: así se ve de un vistazo cuál está puesto sin tener que comparar dos tonos de gris. */ .langbtn{ display:flex;align-items:stretch; margin-left:26px;padding:0; background:none;border:2px solid var(--navy); cursor:pointer;pointer-events:auto;overflow:hidden; font-family:var(--fm);font-size:11px;letter-spacing:.14em;line-height:1; transition:border-color .3s var(--ease); } .langbtn span{ display:flex;align-items:center; padding:8px 12px; color:var(--conc); transition:color .3s var(--ease),background-color .3s var(--ease); } .langbtn span.is-on{background:var(--navy);color:var(--warm)} .langbtn i{width:2px;background:var(--navy);flex:none} .langbtn:hover{border-color:var(--navy-hi)} .langbtn:hover i{background:var(--navy-hi)} .langbtn:hover span:not(.is-on){color:var(--bone)} .langbtn:hover span.is-on{background:var(--navy-hi)} .langbtn:focus-visible{outline:1px solid var(--clay);outline-offset:3px} /* en móvil va pegado al botón de menú, un punto más compacto */ @media (max-width:820px){ .langbtn{ margin-left:auto;margin-right:12px; font-size:10px; } .langbtn span{padding:7px 10px} } .hud__sec{display:flex;align-items:center;gap:12px;color:var(--warm)} .hud__sec b{font-weight:400;color:var(--clay)} .hud__prog{flex:1;max-width:420px;height:1px;background:var(--line);margin:0 26px;position:relative} .hud__prog i{position:absolute;inset:0;right:auto;width:0;background:var(--beige);display:block} .hud__pct{color:var(--conc)} .hud__pct b{color:var(--bone);font-weight:400} @media (max-width:820px){ .hud__nav,.hud__coord{display:none} .hud__prog{margin:0 14px} } /* ── Menú de móvil ─────────────────────────────────── En pantalla ancha no existe: .hud__nav ya hace ese trabajo. */ .navbtn{ display:none; /* se enciende en la media query de abajo */ place-items:center;align-content:center;gap:5px; width:44px;height:44px;margin:-11px -9px -11px 0; background:none;border:0;cursor:pointer;pointer-events:auto; } .navbtn i{ display:block;width:19px;height:1.5px;background:var(--warm); transition:transform .38s var(--ease),opacity .28s; } .navbtn[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)} .navbtn[aria-expanded="true"] i:last-child {transform:translateY(-3.25px) rotate(-45deg)} .navmenu{ position:fixed;inset:0;z-index:90; background:rgba(9,9,8,.97); display:flex;flex-direction:column;justify-content:center; gap:clamp(14px,3.4vh,26px); padding:0 var(--gut); opacity:0;transition:opacity .3s var(--ease); } .navmenu[hidden]{display:none} /* `display:flex` le gana a [hidden] */ .navmenu.is-open{opacity:1} .navmenu a{ display:flex;align-items:baseline;gap:16px; font-size:clamp(1.5rem,8vw,2.4rem);font-weight:700; letter-spacing:-.03em;color:var(--warm); padding:5px 0; /* zona de toque holgada */ } .navmenu a b{ font-family:var(--fm);font-size:10px;letter-spacing:.18em; font-weight:400;color:var(--clay); } .navmenu a:last-of-type{color:var(--clay)} .navmenu__foot{ position:absolute;left:var(--gut);bottom:clamp(24px,5vh,44px); font-family:var(--fm);font-size:9px;letter-spacing:.18em;color:var(--conc); } /* Tiene que ir DESPUES de `.navbtn{display:none}`: misma especificidad, gana la ultima. Puesta antes, el boton no aparecia nunca en el telefono. */ @media (max-width:820px){ .navbtn{display:grid} } /* ═══════════ SECTION SHELL ═══════════ */ .s{position:relative;z-index:4} .sec-head{ display:grid;grid-template-columns:auto 1fr auto; align-items:end;gap:clamp(16px,3vw,44px); padding-block:clamp(64px,9vw,140px) clamp(28px,4vw,56px); border-bottom:1px solid var(--line); margin-bottom:clamp(30px,5vw,72px); } .sec-head .idx{color:var(--clay);align-self:start;padding-top:.5em} .sec-head__t{ font-size:clamp(2rem,6.4vw,6.4rem);font-weight:700; letter-spacing:-.045em;line-height:.9;text-transform:uppercase;color:var(--warm); } .sec-head__n{color:var(--conc);text-align:right;padding-bottom:.6em} @media (max-width:760px){ .sec-head{grid-template-columns:1fr;gap:12px} .sec-head__n{text-align:left;padding-bottom:0} } .h-lg{ font-size:clamp(1.9rem,5.2vw,5.2rem);font-weight:700; letter-spacing:-.04em;line-height:1.0;color:var(--warm); } .h-lg .ln--out{color:var(--conc)} /* ═══════════ 01 · HERO ═══════════ */ .hero{ min-height:100svh;display:flex;align-items:flex-end; overflow:hidden;padding-bottom:clamp(70px,9vh,110px); } .hero__bg{position:absolute;inset:-8% 0;z-index:0} .hero__bg img,.hero__bg .ph{width:100%;height:100%;object-fit:cover;border:0} .hero__scrim{ position:absolute;inset:0;z-index:1; background: linear-gradient(180deg,rgba(9,9,8,.86) 0%,rgba(9,9,8,.22) 38%,rgba(9,9,8,.94) 100%), radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(9,9,8,.6) 100%); } .hero__inner{z-index:2;width:100%} .hero__kicker{ display:flex;align-items:center;gap:12px; font-family:var(--fm);font-size:clamp(9px,.75vw,11px); letter-spacing:.2em;text-transform:uppercase;color:var(--beige); margin-bottom:clamp(20px,3vw,38px); } .tick{width:26px;height:1px;background:var(--clay);flex:none} .hero__title{ font-size:clamp(3rem,13.4vw,15rem);font-weight:800; letter-spacing:-.05em;line-height:.82;text-transform:uppercase; color:var(--warm);margin-bottom:clamp(28px,4vw,58px); } .hero__foot{ display:grid;grid-template-columns:1fr 1fr auto; align-items:end;gap:clamp(18px,3vw,50px); border-top:1px solid var(--line);padding-top:clamp(18px,2.4vw,32px); } .hero__roles{ font-family:var(--fm);font-size:clamp(10px,.82vw,12px); line-height:2;letter-spacing:.13em;text-transform:uppercase;color:var(--bone); } .hero__motto{ font-size:clamp(1.1rem,2.5vw,2.4rem);font-weight:700; letter-spacing:-.035em;color:var(--warm); } .hero__scroll{ display:grid;justify-items:center;gap:10px; font-family:var(--fm);font-size:9px;letter-spacing:.24em;color:var(--conc); } .hero__line{width:1px;height:52px;background:var(--line-3);position:relative;overflow:hidden} .hero__line::after{content:'';position:absolute;inset:0;background:var(--beige); animation:scrollTick 2.1s var(--ease-io) infinite} @keyframes scrollTick{ 0%{transform:translateY(-100%)}50%{transform:translateY(0)}100%{transform:translateY(100%)} } @media (max-width:900px){ .hero__foot{grid-template-columns:1fr;align-items:start} .hero__scroll{display:none} } /* ═══════════ 03 · ABOUT ═══════════ */ .about{padding-bottom:clamp(70px,10vw,170px);position:relative} .blueline{ position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:var(--line); } .about__grid{ display:grid; grid-template-columns:minmax(90px,1fr) minmax(0,7fr) minmax(0,3.4fr); gap:clamp(24px,4vw,72px); padding-top:clamp(64px,9vw,150px); } .about__label{display:grid;gap:8px;align-content:start} .about__label .idx{color:var(--clay)} .about__label .lbl{color:var(--conc)} .about__cols{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,44px); margin-top:clamp(28px,4vw,60px); } .about__cols p{ font-size:clamp(.86rem,1.02vw,1.02rem);line-height:1.75; color:var(--mid);max-width:46ch; } .about__facts{ display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,40px); margin-top:clamp(34px,5vw,74px); border-top:1px solid var(--line);padding-top:clamp(20px,2.6vw,38px); } .about__facts b{ display:block;font-size:clamp(2rem,4.4vw,4.2rem);font-weight:700; letter-spacing:-.04em;color:var(--warm);line-height:1; } .about__facts span{ display:block;margin-top:10px; font-family:var(--fm);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--conc);line-height:1.8; } .about__aside{display:grid;gap:clamp(20px,3vw,40px);align-content:start} .about__dwg{width:100%;height:auto;color:var(--conc);overflow:visible} .about__dwg .dim{color:var(--clay)} .dimtxt{fill:var(--conc);font-size:9px;letter-spacing:.1em} @media (max-width:1100px){ .about__grid{grid-template-columns:1fr} .about__label{display:flex;gap:16px} } @media (max-width:680px){ .about__cols{grid-template-columns:1fr} .about__facts{grid-template-columns:1fr;gap:22px} } /* ═══════════ 06 · 30+ PLANS ═══════════ */ .plans30{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden; padding-block:clamp(80px,12vw,180px)} .plans30__bg{position:absolute;inset:0;display:grid;align-content:center;gap:clamp(10px,2vw,30px); filter:invert(1) grayscale(1) contrast(1.2) brightness(.55);opacity:.62} .plans30__scrim{position:absolute;inset:0; background:radial-gradient(70% 60% at 50% 50%,rgba(9,9,8,.55),rgba(9,9,8,.95))} .plans30__fg{position:relative;z-index:2;text-align:center} .plans30__t{ font-size:clamp(2rem,8.4vw,9rem);font-weight:800; letter-spacing:-.05em;line-height:.86;text-transform:uppercase;color:var(--warm); } .plans30__t b{font-weight:800;color:var(--clay)} .plans30__sub{ margin-top:clamp(18px,2.6vw,34px); font-family:var(--fm);font-size:clamp(10px,1vw,13px); letter-spacing:.18em;text-transform:uppercase;color:var(--bone); } .plans30__tags{ display:flex;flex-wrap:wrap;gap:8px;justify-content:center; margin-top:clamp(26px,4vw,52px); } .plans30__tags li{ border:1px solid var(--line);padding:7px 13px; font-family:var(--fm);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--conc); } /* marquee rows */ .mq{display:flex;gap:clamp(10px,1.6vw,26px);width:max-content;will-change:transform} .mq img{height:clamp(150px,20vw,300px);width:auto;object-fit:cover;flex:none} .cine{position:relative;overflow:hidden;margin-bottom:clamp(20px,3vw,44px)} .cine img,.cine .ph{width:100%;aspect-ratio:21/9;object-fit:cover;border:0} /* day → night */ .daynight{height:230vh;position:relative;margin-top:clamp(40px,6vw,100px)} .daynight__pin{position:sticky;top:0;height:100svh;overflow:hidden} .daynight__pin img,.daynight__pin .ph{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0} .dn-night{clip-path:inset(0 0 0 calc(var(--p,0) * 100%))} .daynight__lbl{ position:absolute;left:50%;bottom:12vh;transform:translateX(-50%); display:flex;align-items:center;gap:14px;z-index:3; font-family:var(--fm);font-size:10px;letter-spacing:.24em;color:var(--warm); } .daynight__lbl i{width:clamp(60px,10vw,140px);height:1px;background:var(--line-3);position:relative} .daynight__lbl i::after{content:'';position:absolute;inset:0;right:auto; width:calc(var(--p,0) * 100%);background:var(--clay)} .daynight__lbl .a{opacity:calc(1 - var(--p,0))} .daynight__lbl .b{opacity:var(--p,0)} .daynight__t{ position:absolute;left:var(--gut);top:18vh;z-index:3; font-size:clamp(1.3rem,4vw,3.8rem);font-weight:700;letter-spacing:-.04em; line-height:1;text-transform:uppercase;color:var(--warm); mix-blend-mode:difference; } /* ═══════════ 11 · TOOLS ═══════════ */ .tools{padding-bottom:clamp(60px,9vw,140px)} .tools__list{border-top:1px solid var(--line)} .tools__list li{ display:grid;grid-template-columns:auto 1fr auto; align-items:center;gap:clamp(16px,4vw,60px); padding:clamp(22px,3.4vw,52px) 0;border-bottom:1px solid var(--line); } .tools__list .n{font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--clay)} .tools__list h3{ font-size:clamp(1.8rem,7vw,7rem);font-weight:800; letter-spacing:-.05em;line-height:.9;text-transform:uppercase;color:var(--warm); } .tools__list p{ font-family:var(--fm);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--conc);text-align:right; } @media (max-width:760px){ .tools__list li{grid-template-columns:auto 1fr;gap:14px} .tools__list p{grid-column:1/-1;text-align:left} } /* ═══════════ 12 · SERVICES ═══════════ */ .serv{padding-bottom:clamp(60px,9vw,140px)} .serv__grid{ display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.6vw,44px); } .scol{border-top:1px solid var(--line);padding-top:clamp(16px,2.2vw,28px)} .scol h3{ display:flex;align-items:center;gap:9px; font-size:clamp(.88rem,1.15vw,1.15rem);font-weight:700; letter-spacing:-.02em;color:var(--warm);margin-bottom:clamp(14px,2vw,26px); } .scol .dot{width:5px;height:5px;background:var(--clay);flex:none} .scol ul{display:grid;gap:9px} .scol li{ font-family:var(--fm);font-size:10px;letter-spacing:.1em; color:var(--mid);line-height:1.7; padding-left:14px;position:relative; } .scol li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--conc)} @media (max-width:980px){.serv__grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.serv__grid{grid-template-columns:1fr}} /* ═══════════ 14 · WORKFLOW ═══════════ */ .flow{padding-bottom:clamp(70px,10vw,160px)} .flow__list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,44px)} .flow__list li{position:relative;display:grid;gap:12px;align-content:start; border-top:1px solid var(--line);padding-top:clamp(18px,2.4vw,32px)} .flow__rail{ position:absolute;top:0;left:0;height:1px;width:100%; background:var(--clay);transform:scaleX(0);transform-origin:left; transition:transform 1.1s var(--ease-io) var(--d,0ms); } .flow__list li.is-in .flow__rail{transform:scaleX(1)} .flow__list b{font-family:var(--fm);font-size:clamp(1.4rem,3vw,2.8rem); font-weight:400;letter-spacing:-.02em;color:var(--clay);line-height:1} .flow__list h3{font-size:clamp(.85rem,1.15vw,1.12rem);font-weight:700; letter-spacing:.02em;text-transform:uppercase;color:var(--warm)} .flow__list p{font-size:clamp(.8rem,.94vw,.95rem);line-height:1.7;color:var(--mid)} @media (max-width:900px){.flow__list{grid-template-columns:1fr 1fr}} @media (max-width:560px){.flow__list{grid-template-columns:1fr}} /* ═══════════ 16 · CONTACT ═══════════ */ .contact{position:relative;min-height:100svh;display:flex;flex-direction:column; justify-content:flex-end;overflow:hidden;padding-top:clamp(80px,14vh,180px)} .contact__bg{position:absolute;inset:-8% 0;z-index:0} .contact__bg img,.contact__bg .ph{width:100%;height:100%;object-fit:cover;border:0} .contact__scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(9,9,8,.72),rgba(9,9,8,.5) 30%,rgba(9,9,8,.96))} .contact__inner{z-index:2;padding-bottom:clamp(30px,5vw,70px)} .contact__t{ font-size:clamp(2.2rem,11vw,12rem);font-weight:800;letter-spacing:-.05em; line-height:.85;text-transform:uppercase;color:var(--warm); margin-bottom:clamp(30px,5vw,80px); } .contact__grid{ display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,80px); border-top:1px solid var(--line);padding-top:clamp(20px,3vw,40px); } .contact__who{display:grid;gap:5px} .contact__who b{font-size:clamp(1rem,1.5vw,1.5rem);font-weight:700; letter-spacing:-.03em;color:var(--warm);margin-bottom:6px} .contact__who span{font-family:var(--fm);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--conc);line-height:1.9} .contact__who em{margin-top:14px;font-style:normal; font-family:var(--fm);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--beige)} .contact__list{display:grid;gap:0;align-content:start} .contact__list>div{ display:grid;grid-template-columns:130px 1fr;gap:16px; padding:clamp(11px,1.4vw,18px) 0;border-bottom:1px solid var(--line); } .contact__list dt{font-family:var(--fm);font-size:9px;letter-spacing:.18em; text-transform:uppercase;color:var(--conc);padding-top:.3em} .contact__list dd{font-size:clamp(.86rem,1.05vw,1.08rem);color:var(--bone)} .contact__list a{border-bottom:1px solid var(--line-3);transition:border-color .4s,color .4s} .contact__list a:hover{color:var(--clay);border-color:var(--clay)} /* sirve para el del marcador y para el que lo sustituya */ .contact__list [data-edit]{color:var(--conc);font-family:var(--fm);font-size:11px;letter-spacing:.14em} .cta{ display:inline-flex;align-items:center;gap:clamp(14px,2.4vw,34px); margin-top:clamp(30px,5vw,70px); padding:clamp(16px,2.2vw,26px) clamp(20px,3vw,40px); border:1px solid var(--line-3); font-size:clamp(.9rem,1.7vw,1.7rem);font-weight:600;letter-spacing:-.025em; color:var(--warm);position:relative;overflow:hidden; transition:color .5s,border-color .5s; } .cta span,.cta svg{position:relative;z-index:2} .cta svg{width:clamp(28px,3vw,44px);height:auto;flex:none;transition:transform .6s var(--ease)} .cta::before{content:'';position:absolute;inset:0;background:var(--clay); transform:translateY(101%);transition:transform .6s var(--ease);z-index:1} .cta:hover{border-color:var(--clay)} .cta:hover::before{transform:translateY(0)} .cta:hover svg{transform:translateX(8px)} .contact__foot{ position:relative;z-index:2; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:18px var(--gut) calc(18px + 56px); border-top:1px solid var(--line); font-family:var(--fm);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--conc); } @media (max-width:820px){ .contact__grid{grid-template-columns:1fr} .contact__list>div{grid-template-columns:100px 1fr} } /* tarjeta técnica del Perfil (detalle de columna) */ .techcard{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--warm)} .techcard img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center; filter:contrast(1.05)} .techcard__tag{ position:absolute;left:0;bottom:0;display:flex;gap:14px; padding:8px 12px;background:var(--black); font-family:var(--fm);font-size:9px;letter-spacing:.16em;color:var(--beige); } /* ═══════════ VISUALIZACIÓN ═══════════ */ .visual{padding-bottom:clamp(50px,8vw,120px)} .cine{position:relative;overflow:hidden;margin-block:clamp(18px,3vw,44px)} .cine img,.cine .ph{width:100%;aspect-ratio:21/9;object-fit:cover;border:0} /* ── Rejilla escalonada ─────────────────────────────────── Nada llena una fila completa a propósito: cada pieza arranca en una columna distinta y baja un poco respecto a su vecina, así que los bordes nunca se alinean. Editar .vf--N mueve esa pieza sola. */ .visgal{ display:grid;grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.6vw,26px); align-items:start; /* cada pieza conserva su altura */ } .visgal figure{position:relative;overflow:hidden;grid-column:span 12} /* Trece piezas. Ninguna fila queda recta: cada una arranca en una columna distinta y baja algo respecto a su vecina. La nueva residencia al anochecer abre la rejilla con el vano más ancho; .vf--5 es la banda a todo lo largo, el respiro. El ancho va siempre con la forma real del archivo. */ .visgal .vf--1 {grid-column:1 / span 8} .visgal .vf--2 {grid-column:10 / span 3; margin-top:clamp(32px,6.5vw,115px)} .visgal .vf--3 {grid-column:1 / span 7; margin-top:clamp(18px,3.5vw,56px)} .visgal .vf--4 {grid-column:9 / span 3; margin-top:clamp(34px,7vw,120px)} /* banda completa — el respiro */ .visgal .vf--5 {grid-column:1 / span 12; margin-top:clamp(20px,4vw,64px)} .visgal .vf--6 {grid-column:2 / span 7} .visgal .vf--7 {grid-column:9 / span 4; margin-top:clamp(30px,6vw,108px)} .visgal .vf--8 {grid-column:1 / span 6; margin-top:clamp(16px,3vw,50px)} .visgal .vf--9 {grid-column:8 / span 5; margin-top:clamp(34px,7vw,120px)} .visgal .vf--10{grid-column:2 / span 5; margin-top:clamp(20px,4vw,64px)} .visgal .vf--11{grid-column:8 / span 5; margin-top:clamp(30px,6vw,108px)} .visgal .vf--12{grid-column:1 / span 4; margin-top:clamp(18px,3.5vw,56px)} .visgal .vf--13{grid-column:6 / span 6; margin-top:clamp(32px,6.5vw,115px)} .visgal img,.visgal .ph{ width:100%;object-fit:cover;border:0; transition:transform 1.4s var(--ease); } .visgal figure:hover img{transform:scale(1.035)} .visgal figcaption{ padding-top:11px; font-family:var(--fm);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--conc); } /* en tableta el escalonado se simplifica a dos columnas desfasadas */ @media (max-width:900px){ .visgal .vf--1,.visgal .vf--3,.visgal .vf--6,.visgal .vf--8, .visgal .vf--10,.visgal .vf--12{grid-column:1 / span 7} .visgal .vf--2,.visgal .vf--4,.visgal .vf--7,.visgal .vf--9, .visgal .vf--11,.visgal .vf--13{grid-column:8 / span 5;margin-top:clamp(24px,6vw,70px)} .visgal .vf--5{grid-column:1 / span 12;margin-top:clamp(12px,3vw,36px)} } /* en móvil todo a una columna, sin desfases */ @media (max-width:560px){ .visgal figure[class*="vf--"]{grid-column:1 / span 12;margin-top:0} } /* ═══════════ PLANOS ═══════════ */ .planos{padding-bottom:0} .planos__lead{ max-width:60ch;font-size:clamp(.86rem,1vw,1rem);line-height:1.75; color:var(--mid);margin-bottom:clamp(30px,4.5vw,64px); } .pgroup{margin-bottom:clamp(38px,6vw,90px)} .pgroup__t{ display:flex;align-items:center;gap:11px; font-family:var(--fm);font-size:clamp(9px,.78vw,11px); letter-spacing:.2em;text-transform:uppercase;color:var(--beige); font-weight:400; padding-bottom:clamp(12px,1.6vw,20px);margin-bottom:clamp(16px,2.4vw,30px); border-bottom:1px solid var(--line); } .plangal{ display:grid;grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.6vw,26px); align-items:start; /* cada lámina conserva su altura */ } .plangal figure{grid-column:span 12} /* Estas clases tienen que ganarle a `.plangal figure` (una clase + un tipo), así que van calificadas con `.plangal`. Sin eso todas las láminas ocupaban las 12 columnas y la sección se caía a una sola columna. */ /* .pg--4 y .pg--8 no se usan ahora mismo; se dejan porque son los anchos disponibles al anadir una lamina nueva a un grupo. */ .plangal .pg--4{grid-column:span 4} .plangal .pg--5{grid-column:span 5} .plangal .pg--6{grid-column:span 6} .plangal .pg--7{grid-column:span 7} .plangal .pg--8{grid-column:span 8} .plangal .pg--12{grid-column:span 12} /* Proporción real, sin recorte. Una lámina forzada a 3:2 pierde el rótulo y las cotas — justo lo que demuestra que el plano es de obra. El ancho de columna se elige según la forma de cada hoja (ver PLAN_SHEETS). */ .plangal figure img{ width:100%;height:auto; background:var(--warm);border:1px solid var(--line); filter:contrast(1.04); transition:transform 1.6s var(--ease); } .plangal figure:hover img{transform:scale(1.03)} .plangal figcaption{ padding-top:11px; font-family:var(--fm);font-size:9px;letter-spacing:.14em;color:var(--conc); } @media (max-width:900px){ .plangal .pg--4,.plangal .pg--5,.plangal .pg--6, .plangal .pg--7,.plangal .pg--8{grid-column:span 12} } /* ═══════════ REDUCED MOTION ═══════════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } [data-reveal]{opacity:1;transform:none} .ln>i{transform:none} [data-draw]{stroke-dashoffset:0} .opener{display:none} .mq{animation:none!important} } /* ═══════════ RECORRIDOS EN VIDEO ═══════════ */ /* encabezado menor: separa los clips de los renders sin abrir otra sección */ .sub-head{ display:flex;align-items:center;gap:16px; margin:clamp(56px,9vw,130px) 0 clamp(22px,3.5vw,50px); padding-bottom:14px;border-bottom:1px solid var(--line); } .sub-head h3{ font-size:clamp(.95rem,1.8vw,1.6rem);font-weight:700; letter-spacing:-.02em;text-transform:uppercase;color:var(--warm); } .sub-head__n{ margin-left:auto; font-family:var(--fm);font-size:9px;letter-spacing:.18em; text-transform:uppercase;color:var(--conc); } .vidgal{ display:grid;grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.6vw,26px); align-items:start; /* cada clip conserva su altura */ } .vidgal figure{position:relative;overflow:hidden;grid-column:span 12} /* `img` incluido: con "reducir movimiento" y en la copia de vista previa, cada clip se sustituye por su cartel y tiene que ocupar el mismo hueco */ .vidgal video,.vidgal img,.vidgal .ph{ width:100%;height:auto;display:block;border:0;background:var(--char); } .vidgal figcaption{ padding-top:11px; font-family:var(--fm);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--conc); } /* Apaisado, 4:5 y vertical alternados a propósito: el cambio de formato es lo que da ritmo, y cada clip se ve entero, sin recorte. */ .vidgal .vv--1 {grid-column:1 / span 8} .vidgal .vv--2 {grid-column:10 / span 3; margin-top:clamp(26px,5vw,90px)} .vidgal .vv--3 {grid-column:1 / span 4; margin-top:clamp(18px,3.5vw,56px)} .vidgal .vv--4 {grid-column:6 / span 7; margin-top:clamp(34px,7vw,120px)} .vidgal .vv--5 {grid-column:2 / span 7} .vidgal .vv--6 {grid-column:10 / span 3; margin-top:clamp(30px,6vw,105px)} .vidgal .vv--7 {grid-column:1 / span 4} .vidgal .vv--8 {grid-column:6 / span 7; margin-top:clamp(24px,5vw,84px)} .vidgal .vv--9 {grid-column:3 / span 4; margin-top:clamp(16px,3vw,50px)} .vidgal .vv--10{grid-column:8 / span 5; margin-top:clamp(32px,6.5vw,112px)} @media (max-width:900px){ .vidgal .vv--1,.vidgal .vv--3,.vidgal .vv--5, .vidgal .vv--7,.vidgal .vv--9{grid-column:1 / span 7} .vidgal .vv--2,.vidgal .vv--4,.vidgal .vv--6, .vidgal .vv--8,.vidgal .vv--10{grid-column:8 / span 5;margin-top:clamp(24px,6vw,70px)} } @media (max-width:560px){ .vidgal figure[class*="vv--"]{grid-column:1 / span 12;margin-top:0} .sub-head__n{display:none} } /* la planta va en línea blanca sobre transparente: fondo oscuro, no papel */ .plangal img[src$="plan-steven.png"]{background:var(--char);filter:none} /* ═══════════ MARCO DE LAS PIEZAS ═══════════ */ /* Doble filete, como el montaje de una lámina enmarcada: la regla gruesa por fuera y un hilo fino por dentro, separado, haciendo de paspartú. Ambos están siempre puestos. Lo único que se mueve es el hilo interior, que respira muy despacio — nada recorre el borde ni parpadea. La respiración va en `transform`, no en `inset`: así la compone la tarjeta gráfica y cuarenta piezas a la vez no le cuestan nada al hilo principal. */ .fm{position:relative;display:block;overflow:hidden} .frame{ position:absolute;inset:0;z-index:2;pointer-events:none; box-shadow:inset 0 0 0 4px var(--navy); transition:box-shadow .45s var(--ease); } .frame>i{display:none} /* sin uso en este diseño */ /* el hilo interior */ .frame::before{ content:'';position:absolute;inset:13px; border:1px solid var(--navy-hi); opacity:.5; transform-origin:center; animation:matBreathe 9s ease-in-out infinite alternate; transition:opacity .45s var(--ease),border-color .45s var(--ease); } .frame.is-idle::before{animation-play-state:paused} @keyframes matBreathe{ from{transform:scale(1)} to {transform:scale(.988)} } /* con el cursor encima sube el tono; el movimiento sigue igual de discreto */ .fm:hover .frame,.zoomable:focus-visible .frame{box-shadow:inset 0 0 0 4px var(--navy-hi)} .fm:hover .frame::before,.zoomable:focus-visible .frame::before{opacity:.9;border-color:var(--sheen)} @media (max-width:560px){ .frame{box-shadow:inset 0 0 0 3px var(--navy)} .fm:hover .frame{box-shadow:inset 0 0 0 3px var(--navy-hi)} .frame::before{inset:9px} } /* sin animación: el doble filete se queda quieto, que ya enmarca */ @media (prefers-reduced-motion:reduce){ .frame::before{animation:none} } /* ═══════════ TELÉFONO EN HORIZONTAL ═══════════ */ /* Girar el teléfono deja 375 px de alto y casi el doble de ancho. El tipo grande escala con el ANCHO (13.4vw), así que ahí crece justo cuando lo que falta es alto: el título se comía la pantalla entera y las dos barras fijas se llevaban otros 112 px. Aquí el tipo pasa a escalar con `vh`. La condición va por ALTO, no por ancho, para no tocar tabletas ni portátiles anchos y bajos. */ @media (orientation:landscape) and (max-height:520px){ .hero{padding-bottom:clamp(40px,7vh,62px)} .hero__title{font-size:clamp(2rem,9vh,4rem);margin-bottom:clamp(12px,2.6vh,24px)} .hero__kicker{margin-bottom:clamp(8px,1.8vh,16px)} .hero__motto{font-size:clamp(.9rem,3.2vh,1.5rem)} .hero__roles{line-height:1.75} .hero__foot{padding-top:clamp(10px,2vh,18px)} /* los otros titulares grandes, por el mismo motivo */ .h-lg {font-size:clamp(1.4rem,6vh,2.6rem)} .sec-head__t {font-size:clamp(1.4rem,7vh,3rem)} .daynight__t {font-size:clamp(1rem,5vh,2rem)} .plans30__t {font-size:clamp(1.3rem,6.5vh,2.8rem)} .contact__t {font-size:clamp(1.4rem,7vh,3rem)} /* las barras fijas ocupan 112 px de 375: se ajustan un punto */ .hud{height:46px} .contact__foot{padding-block:14px} } /* ═══════════ TELÉFONO EN VERTICAL ═══════════ */ /* En vertical la pantalla es 375x812 — casi el doble de alta que ancha. Un render 16:9 obligado a llenar esa caja se recorta un 75%: se ve una tira del centro, no el edificio. Aquí esas piezas dejan de llenar la pantalla y se ven enteras, a su proporción real. Solo afecta al teléfono en vertical. En horizontal y en escritorio la caja se parece a la del render, no hay recorte que valga la pena evitar, y el fondo a sangre sigue siendo lo correcto. */ @media (max-width:560px) and (orientation:portrait){ /* ── Portada y contacto ───────────────────────────────────── El medio se ancla arriba con su altura natural; el texto vive debajo, sobre el fondo oscuro. Nada se recorta y el titular se lee mejor que encima de la imagen. */ .hero__bg,.contact__bg{ inset:0 0 auto 0; height:auto; } .hero__bg video,.hero__bg img, .contact__bg video,.contact__bg img{ width:100%;height:auto; object-fit:fill; /* con height:auto no deforma: es su proporción */ } /* La portada empuja su texto abajo sola (`align-items:flex-end`), pero contacto lo centra, y el titular se subía 125 px sobre la foto. Sacando el fondo del posicionamiento absoluto entra en el flujo: la imagen ocupa su sitio arriba y el texto viene detrás, sin solaparse y sin depender de la proporción del archivo. */ .contact{padding-top:0} .contact__bg{position:relative;inset:auto} /* Sin paralaje aquí. motion.js le pone un `transform` en línea que desplaza la imagen sin mover su hueco, y con el fondo ya en el flujo eso la metía 34 px por debajo del titular. El `!important` es para ganarle al estilo en línea, que si no manda él. */ .hero__bg,.contact__bg{transform:none !important} /* el velo arranca suave sobre la imagen y cierra en negro donde va el texto */ .hero__scrim,.contact__scrim{ background:linear-gradient(180deg, rgba(9,9,8,.28) 0%, rgba(9,9,8,.42) 26%, rgba(9,9,8,.92) 48%, var(--black) 62%); } /* ── Barrido día / noche ──────────────────────────────────── Esta sección existe para enseñar dos renders: recortarles el 74% se carga justo lo que quiere demostrar. `contain` los deja enteros y el barrido sigue funcionando igual. */ .daynight__pin img,.daynight__pin .ph{object-fit:contain} .daynight__t{top:12vh;font-size:clamp(1rem,5.5vw,1.5rem)} .daynight__lbl{bottom:16vh} }