:root{ --page:#F7F9F9; --sand:#DED8C8; --silver:#C0C0C0; --ink:#000; --void:#050505; /* La piel. El manual pone el blanco como base del sistema, así que la clara es la de por defecto; la noche es exactamente la V6. */ --bg:#F7F9F9; --fg:#0B0B0B; --bgc:247,249,249; --fgc:11,11,11; --skin:.28s var(--ease); /* Tinta para las capas que van en `difference` —header, rail—, que se pintan restándose del fondo para leerse igual sobre un video claro que sobre uno oscuro. Ahí el color que se declara no es el que se ve: sobre la página, |247 − 236| da la tinta negra; sobre un cuadro oscuro, el mismo 236 sale claro. De noche el que cumple ese papel es el blanco base, que es lo que V6 hacía sin nombrarlo. */ --ink-x:#ECECEC; --face:'Helvetica Neue',Helvetica,Arial,sans-serif; --serif:'PP Editorial New',Didot,serif; --ease:cubic-bezier(.19,1,.22,1); --gut:clamp(16px,2.4vw,28px); /* El aire entre secciones es UNA medida, no una por sección. Cada tramo tenía la suya —14vh, 18vh, 112svh de alto mínimo, 88svh— y el resultado era un ritmo que cambiaba sin motivo: unas secciones pegadas y otras con media pantalla de nada. Las dos excepciones que quedan tienen razón: "qué filmamos" necesita que la lista recorra la ventana entera para que el foco pase palabra por palabra, y el acordeón está clavado y mide lo que dura su recorrido. */ --aire:24vh; /* era 16vh: Nico sentía el inicio apretado (22 oct) */ /* Cada borde se reparte entre las dos secciones que se tocan: media medida cada una. Con la medida entera en las dos, el hueco entre A y B salía el doble que entre B y C cuando C no tenía padding —178 contra 89 en el mismo recorrido—. Repartido, todos los bordes miden --aire. */ --media:calc(var(--aire) / 2); --vbar:0px; /* sin barra de prototipo en el sitio real */ --r:16px; /* el manual prohíbe bordes cuadrados en media */ /* Helvetica bold apretada, no versalitas. El sitio escribía en mayúsculas toda la interfaz —filtros, contadores, rótulos, el menú— con tracking positivo, que es lo que pide el manual PARA mayúsculas: abiertas se leen, juntas se pegan. Nico las quiere en minúscula, y en minúscula la letra ya trae su propio ritmo: abrirla la desarma. Por eso el signo se invierte. El peso lo pone cada regla. */ --tk:-.022em; } /* La noche es la V6 tal cual: #050505 de fondo, la tinta en el blanco base. No es un filtro invertido — son los mismos cuatro valores del manual cambiados de lugar, que es la razón por la que las dos pieles se ven dibujadas y no calculadas. */ :root[data-skin="noche"]{ --bg:var(--void); --fg:var(--page); --bgc:5,5,5; --fgc:247,249,249; --ink-x:var(--page); } /* La página abre de día, siempre, tenga el sistema la piel que tenga: el blanco es lo que esta versión viene a proponer, y arrancar en oscuro porque el Mac está en oscuro la volvería indistinguible de la V6. La noche es una elección, y una vez hecha se recuerda. */ /* El cambio de piel se cruza en un cuarto de segundo. Más lento se siente un fundido de video; más rápido, un parpadeo de sistema operativo. */ html,body{transition:background-color var(--skin),color var(--skin)} @media (prefers-reduced-motion:reduce){ html,body{transition:none} } @font-face{font-family:'PP Editorial New';font-style:italic;font-weight:400;font-display:swap; src:url("/assets/fonts/ppeditorial-italic.woff2") format("woff2");} /* Southera es de pago; Mrs Saint Delafield la sustituye hasta comprarla */ @font-face{font-family:'KV Script';font-style:normal;font-weight:400;font-display:swap; src:url("/assets/fonts/script.woff2") format("woff2");} *{box-sizing:border-box;margin:0;padding:0} /* Tres detalles que solo se notan en un teléfono, y que son la diferencia entre una página que se abre en el celular y una que se siente hecha para el celular: · el destello gris que Safari y Chrome dibujan sobre cada cosa que se toca, que en un sitio así se ve como un error; · el zoom automático de texto de iOS al girar la pantalla, que rompe cualquier escala tipográfica pensada; · el rebote elástico al llegar al final, que deja ver el fondo del navegador debajo de la página. */ html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none} *{-webkit-tap-highlight-color:transparent} html{background:var(--bg)} body{background:var(--bg);color:var(--fg);font-family:var(--face); -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:var(--vbar)} body.locked{overflow:hidden} ::selection{background:var(--fg);color:var(--bg)} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} :focus-visible{outline:2px solid currentColor;outline-offset:4px} img,video{display:block} ul{list-style:none} /* La escala es de VANA: tipografía enorme en peso regular, interlínea bajo 1, tracking apretado. La cara es la de Kai, no el peso habitual de Kai. */ .huge{font-weight:400;font-size:clamp(2.4rem,11.4vw,13.5rem);line-height:.8; letter-spacing:-.042em} /* La itálica de Editorial iba empujada .08em hacia abajo y la palabra se leía caída respecto de "Love for": lo que alinea dos palabras del mismo renglón es la base, no el tope. Vuelven a compartir base, y la itálica baja un pelo de tamaño para que su altura de x calce con la de Helvetica —166 contra 144 de ascendente medidos en la propia página— sin perder el gesto de la serif. */ .em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em; font-size:.95em} /* El título de cada sección deja la versalita. La mayúscula con tracking es la voz de la metadata —fechas, duraciones, países—, no la de un encabezado, y usada en los dos lugares aplanaba la jerarquía. Los títulos pasan a Helvetica bold apretada, que es la voz de la marca. */ /* Los rótulos son h2 y no span: Google lee la estructura de una página por sus encabezados, y este sitio tenía dos h1, ningún h2 y seis h4. Que no se dibujen es una decisión visual; que no existan era un problema. */ .sec{font-size:clamp(.92rem,1.15vw,1.06rem);font-weight:700; letter-spacing:-.025em;display:block;color:rgba(var(--fgc),.5);margin:0} /* Primera parada del tabulador: quien navega con teclado no tiene que recorrer el header entero para llegar al contenido. */ .salto{position:absolute;left:-9999px;top:0;z-index:1000; background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:0 0 10px 0; font-size:.8rem;font-weight:700} .salto:focus{left:0} .lbl{font-size:.74rem;letter-spacing:var(--tk);font-weight:700; font-variant-numeric:tabular-nums} .dim{color:rgba(var(--fgc),.5)} /* "Idea N* 018" va en la script del manual, no en versalitas */ .script{font-family:'KV Script',cursive;text-transform:none;letter-spacing:0; font-size:1.62em;line-height:1;position:relative;top:.06em} /* Máscara de revelado que NO corta descendentes. El padding vive dentro del área de recorte y se cancela con el margen, así que la caja no se mueve y aun así hay lugar para y, p, g, j, q, Q y para la itálica (descendente .30em + el .08em que la baja). Vale para cualquier frase futura, incluidas mayúsculas acentuadas. */ .rv{--asc:.52em;--desc:.44em} .rv .ln{display:block;overflow:hidden; padding:var(--asc) 0 var(--desc); margin:calc(var(--asc) * -1) 0 calc(var(--desc) * -1)} .rv .ln>span{display:block;transform:translateY(calc(100% + var(--desc))); transition:transform 1.25s var(--ease)} .rv.on .ln>span{transform:none} .rv .ln:nth-child(2)>span{transition-delay:.1s} .rv .ln:nth-child(3)>span{transition-delay:.2s} .rv .ln:nth-child(4)>span{transition-delay:.3s} .rv .ln:nth-child(5)>span{transition-delay:.4s} /* ============ barra de prototipo ============ */ .vbar{position:fixed;top:0;left:0;right:0;height:var(--vbar);z-index:900; background:#111;color:#fff;display:flex;align-items:center;gap:14px; padding:0 14px;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase} .vbar b{font-weight:600;opacity:.5} .vbar nav{display:flex;gap:6px;margin-left:auto} .vbar a{padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.24);opacity:.72} .vbar a:hover{opacity:1} .vbar a[aria-current=true]{background:#fff;color:#111;border-color:#fff;opacity:1} @media (max-width:620px){.vbar b span{display:none}.vbar a{padding:5px 8px}} /* ============ chrome ============ La barra es una barra. Flotaba en `difference` sobre lo que hubiera detrás: eso resuelve el contraste solo, pero sobre el video de portada devuelve el complemento del fotograma —un color que no es ninguno de los cuatro de la marca y que cambia con el plano— y sobre un cuadro claro la marca se perdía del todo. Ahora la barra tiene fondo de página y tinta de página: el logo se lee negro sobre la hoja y blanco de noche, siempre igual, sin depender de lo que esté pasando en el video. El logo vive a la izquierda y no se mueve. La lente centrada que aparecía al bajar se fue con él: escondía toda la navegación detrás de un gesto que hay que descubrir, y con la barra opaca ya no hay nada que despejar. */ header.site{position:fixed;top:var(--vbar);left:0;right:0;z-index:500; display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px var(--gut);pointer-events:none; color:var(--fg); /* Vidrio esmerilado, no una hoja opaca. Nico: la barra blanca "me distrae", "que no sea 100 % blanco", "con bordes suavecitos, que no sea una línea fuerte que corte", "que se vea debajo el video desenfocado". Queda la hoja al 72 % con lo de atrás desenfocado: el logo sigue leyéndose negro —el fondo nunca baja de un 72 % de blanco—, y sobre el video se intuye el plano en vez de taparlo con un rectángulo. */ transition:color var(--skin)} /* El vidrio va en una capa propia y no en la barra: Safari 26 pinta la franja de la hora con el fondo del elemento fijo que esté arriba de todo, y si lo leía de la barra la franja quedaba siempre del blanco del vidrio. Ahora lo lee de .tinta (abajo), que el JS va tiñendo con lo que pasa debajo de la barra. Los pseudoelementos Safari no los mira. */ header.site::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:rgba(var(--bgc),.72); -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25); transition:background-color var(--skin)} /* La franja que lee Safari: fija, arriba de todo, a lo ancho y de 6 px (el mínimo que toma en cuenta), detrás del vidrio de la barra. Su color es la misma mezcla que hace el vidrio, así que tampoco se nota. */ /* debajo del portafolio (400) y de la barra (500): Safari la lee igual */ .tinta{position:fixed;top:0;left:0;right:0;height:6px;z-index:390; pointer-events:none;background:var(--bg)} /* El borde de abajo no es una línea: es el mismo vidrio que se desvanece en 22 px. Un degradado del color de la página encima de un desenfoque que también se apaga (mask), así no hay un filo donde termina la barra. */ header.site::after{content:"";position:absolute;left:0;right:0;top:100%; height:22px;pointer-events:none; background:linear-gradient(rgba(var(--bgc),.42),rgba(var(--bgc),0)); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); -webkit-mask-image:linear-gradient(#000,transparent); mask-image:linear-gradient(#000,transparent)} header.site>*{pointer-events:auto} header.site{min-height:58px} .mark{color:inherit} .mark svg{height:26px;width:auto;display:block} .chrome{display:flex;align-items:center;gap:clamp(12px,2vw,22px);color:inherit} /* botón de menú: tres líneas */ /* La barra de secciones solo existe donde hay ancho para ella. Debajo de 1024 vuelve el botón, que ahí sí es el patrón correcto. */ .navbar{display:none;gap:clamp(20px,2.2vw,38px);align-items:center; font-size:.86rem;letter-spacing:var(--tk);font-weight:700; margin-left:auto;margin-right:clamp(16px,2vw,32px)} /* Al apuntar, la palabra cambia de cara: Helvetica bold pasa a la itálica de Editorial, la misma de "ideas". El cambio de tipografía ya dice que eso se puede apretar, así que la línea que se dibujaba abajo sobra —era decir dos veces lo mismo, y la segunda con un subrayado, que es el gesto más gastado que hay. Cómo: el texto de verdad se queda en el DOM y define el ancho, así que nada se mueve de lugar; se le va el color mientras la copia en itálica —un ::after que lee data-txt— aparece encima. Si el ::after no llegara a dibujarse, el enlace se sigue viendo normal: la copia es el adorno, no el contenido. Ancladas las dos a la izquierda: centrar la itálica la hacía saltar de sitio y el cambio se leía como un parpadeo, no como un morph. */ /* El cruce de las dos caras tenía un hueco. Las dos tardaban lo mismo —tres décimas— así que a mitad de camino la Helvetica ya estaba medio transparente y la itálica todavía medio invisible: la palabra se veía desaparecer. Ahora la itálica entra primero y rápido, y la Helvetica se va después; nunca hay un momento en que ninguna de las dos esté puesta. Y el cruce entero baja de 300 a 180 milisegundos, que a este tamaño se lee como un cambio de tipografía y no como una animación. */ .navbar a{color:inherit;opacity:.78;position:relative;padding:8px 2px; transition:opacity .3s var(--ease),color .12s linear .06s} /* Las dos caras ocupan la misma celda de una grilla, y ahí se resuelven los dos defectos de golpe: · `align-items:baseline` las alinea por la línea de base, que es lo único que hace que dos tipografías distintas se lean a la misma altura. Antes iba absoluta y centrada por su caja, y la caja de una letra no es la letra: cada familia reparte distinto el alto entre ascendente y descendente, así que centrando cajas la itálica quedaba más arriba. · `justify-items:center` las ancla por el medio. Antes estaban pegadas a la izquierda, y como la itálica no mide lo mismo, la palabra se corría hacia un lado al cambiar. El tamaño se empata por altura de x, que es la que el ojo compara, no por cuerpo: medido en la propia página, Helvetica Neue Bold da 51,7 y la itálica de Editorial 54,3 al mismo cuerpo. 51,7 / 54,3 = 0,95. Y el tracking negativo porque la itálica de una didona trae espacios laterales pensados para texto corrido; en una palabra suelta de trece píxeles eso la desarma. */ .navbar a{display:grid;align-items:baseline;justify-items:center} .navbar a>span{grid-area:1/1} .navbar a::after{content:attr(data-txt);grid-area:1/1; white-space:nowrap;pointer-events:none; font-family:var(--serif);font-style:italic;font-weight:400; font-size:.95em;letter-spacing:-.02em;color:var(--fg); opacity:0;transition:opacity .18s var(--ease)} .navbar a:hover,.navbar a:focus-visible{opacity:1;color:transparent} .navbar a:hover::after,.navbar a:focus-visible::after{opacity:1} @media (prefers-reduced-motion:reduce){ .navbar a::after{transition:none} } /* KaiContent en el menú: la palabra con su color, sin caja ni fondo. Resalta lo justo; no compite con las secciones. */ .navbar a.nav__kc{opacity:1;color:#E4572E;font-weight:700;letter-spacing:-.02em} .navbar a.nav__kc::after{content:none} .navbar a.nav__kc:hover,.navbar a.nav__kc:focus-visible{color:#E4572E;opacity:.72} .nav__kc em,.menu__kc em{font-family:var(--serif);font-style:italic;font-weight:400; letter-spacing:-.02em;font-size:.95em} .menu a.big.menu__kc{color:#E4572E;font-weight:700} .menu a.big.menu__kc:hover{color:#E4572E;opacity:.72} .burger{display:grid;gap:4px;padding:6px 0;width:22px} @media (min-width:1025px){ .navbar{display:flex} /* el botón se va: con las cuatro a la vista, sería una puerta repetida. Va después de la regla base o pierde por orden con la misma especificidad — la trampa de siempre en esta hoja. */ .burger{display:none} } .burger i{display:block;height:1px;background:currentColor;transition:transform .5s var(--ease),opacity .3s} .burger.x i:nth-child(1){transform:translateY(5px) rotate(45deg)} .burger.x i:nth-child(2){opacity:0} .burger.x i:nth-child(3){transform:translateY(-5px) rotate(-45deg)} /* El interruptor de piel es un obturador: de día está abierto a la mitad, de noche cerrado del todo. Ni sol ni luna — la marca ya es una lente. */ /* Vive dentro del header, que se pinta en `difference`: aquí el color no se declara, se hereda de --ink-x. Con var(--fg) el obturador salía restado del fondo y quedaba invisible sobre la hoja. */ .skin{width:15px;height:15px;border-radius:50%;position:relative;overflow:hidden; flex:0 0 auto;border:1px solid currentColor;opacity:.55; transition:opacity .3s} .skin span{position:absolute;inset:-1px;background:currentColor; transform:translateX(-50%);transition:transform .5s var(--ease)} .skin:hover{opacity:1} :root[data-skin="noche"] .skin span{transform:none} @media (prefers-reduced-motion:reduce){ .skin span{transition:none} } /* ============ WhatsApp ============ Abajo a la derecha y por encima del portafolio, que es lo que pide el informe: "fijo y visible en todas las vistas, incluido el portafolio". Por debajo del visor, que cuando hay un video abierto no compite nadie. Va en el verde de WhatsApp (#25D366) y no en la tinta de la marca. Estuvo en negro y Nico lo pidió verde. Tiene razón y el manual no se rompe: este botón no es la marca hablando, es el logo de otra empresa puesto en el sitio —como el de Instagram en el pie—, y el verde es parte de ese logo. Cambiarle el color a un logo ajeno es lo que sí estaría mal. Además es el único color del sitio que significa "apretá acá y te contesta una persona", y eso vale más que la pureza de la paleta. `display` va en `.wa:not([hidden])` a propósito: `display:inline-flex` le gana a `[hidden]{display:none}` por especificidad, y por eso el botón se estuvo dibujando en el sitio en vivo con `href="#"` —sin número cargado, `montarWa()` le pone `hidden` y el botón igual aparecía, llevando a ninguna parte. */ /* Un círculo con el logo; al apuntarlo se estira hacia la izquierda y aparece "Escríbenos". Nico no quería la píldora ancha fija ("grande, estirada horizontal"): el círculo ocupa lo mínimo y se abre solo cuando alguien muestra interés. El texto se despliega con max-width —el ancho real de la palabra, sin número mágico de más— y entra un poco después que el ancho, para que no aparezca cortado mientras se abre. */ .wa{position:fixed;right:var(--gut);bottom:var(--gut);z-index:410; align-items:center;gap:0; padding:14px;border-radius:999px; background:#25D366;color:#fff; border:1px solid #25D366; font-size:.78rem;font-weight:700;letter-spacing:var(--tk); box-shadow:0 10px 30px -12px rgba(0,0,0,.45); transition:background-color .35s var(--ease),border-color .35s var(--ease), transform .35s var(--ease),opacity .35s var(--ease)} .wa:not([hidden]){display:inline-flex} .wa:hover{background:#1DAF54;border-color:#1DAF54;transform:translateY(-2px)} .wa span{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap; margin-left:0; transition:max-width .6s cubic-bezier(.22,1,.36,1),margin-left .6s cubic-bezier(.22,1,.36,1), opacity .25s ease} @media (hover:hover){ .wa:hover,.wa:focus-visible{padding-right:22px} .wa:hover span,.wa:focus-visible span{max-width:8em;margin-left:10px;opacity:1; transition:max-width .6s cubic-bezier(.22,1,.36,1),margin-left .6s cubic-bezier(.22,1,.36,1), opacity .35s ease .14s} } .wa{transition:background-color .35s var(--ease),border-color .35s var(--ease), transform .35s var(--ease),opacity .35s var(--ease),padding .6s cubic-bezier(.22,1,.36,1)} .wa:focus-visible{outline:2px solid var(--fg);outline-offset:3px} .wa svg{display:block;flex:0 0 auto} /* Con el menú abierto se va: ahí adentro ya está el camino al contacto y el botón quedaría flotando encima de la hoja sin nada que hacer. */ body.menu-abierto .wa{opacity:0;pointer-events:none;transform:translateY(8px)} /* En el teléfono queda el círculo: una píldora con texto abajo a la derecha se come el pulgar y tapa la grilla. */ @media (max-width:620px){ .wa{padding:14px;gap:0} .wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} } @media (prefers-reduced-motion:reduce){ .wa{transition:none} } /* ============ cursor ============ De V3, sin la palabra "VER" adentro: el círculo no explica lo que va a pasar, lo muestra. Todo lo que queda dentro se invierte de verdad —un disco blanco en `difference` da el negativo exacto de lo que tapa— así que sobre el reel el cursor va revelando el negativo del cuadro. Va pegado al puntero. Lo que cambia con suavidad es su tamaño, no su posición: ahí está el gesto. */ .cur{position:fixed;left:0;top:0;z-index:900;width:11px;height:11px; border-radius:50%;background:#fff;mix-blend-mode:difference; pointer-events:none;will-change:transform; transition:width .34s var(--ease),height .34s var(--ease)} .cur--big{width:48px;height:48px} @media (hover:hover) and (pointer:fine){ body,a,button,label,summary,input,[role=button]{cursor:none} } @media (prefers-reduced-motion:reduce){ .cur{transition:none} } /* ============ menú ============ */ /* El menú se alinea a la derecha, que es de donde sale: el botón de las tres líneas vive en esa esquina, y tener que cruzar la pantalla entera para elegir una opción es trabajo de más por nada. */ /* El menú entra deslizándose desde la derecha, que es de donde sale: el botón vive en esa esquina. Aparecer por desvanecido no dice de dónde viene; entrar de costado sí, y de paso el ojo ya sabe hacia dónde devolverlo. La curva es de salida larga —arranca rápido y frena mucho al final—, que es lo que hace que un panel grande no se sienta pesado. Y mientras se mueve lleva un arrastre horizontal: es el rastro de algo que viaja, no un desenfoque. Se apaga al llegar, porque un panel quieto y borroso sería un error. */ .menu{position:fixed;inset:var(--vbar) 0 0;z-index:450;background:var(--bg); display:grid;align-content:center;justify-items:end;text-align:right; gap:1vh;padding:14vh var(--gut) 8vh; opacity:0;visibility:hidden; transform:translate3d(100%,0,0); transition:transform .62s cubic-bezier(.16,1,.3,1), opacity .34s var(--ease), visibility .62s} .menu.open{opacity:1;visibility:visible;transform:none} /* el arrastre solo mientras viaja */ .menu.viajando{filter:url(#kvdrag)} @media (prefers-reduced-motion:reduce){ .menu{transform:none;transition:opacity .3s,visibility .3s} .menu.viajando{filter:none} } .menu a.big{font-weight:400;font-size:clamp(2.6rem,10vw,8rem);line-height:1; letter-spacing:-.04em;width:max-content;max-width:100%; opacity:0;transform:translateY(18px); transition:opacity .7s var(--ease),transform .7s var(--ease),color .3s} .menu.open a.big{opacity:1;transform:none} .menu.open a.big:nth-child(2){transition-delay:.06s} .menu.open a.big:nth-child(3){transition-delay:.12s} .menu.open a.big:nth-child(4){transition-delay:.18s} /* En el teléfono salen todas juntas y más rápido: con la cascada y el arrastre del panel, "Lugares" aparecía sola y las demás se hacían esperar (pedido de Nico, 22 oct). */ @media (max-width:760px){ .menu{transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .24s var(--ease),visibility .42s} .menu.viajando{filter:none} .menu a.big{transition:opacity .32s var(--ease),transform .32s var(--ease),color .3s} .menu.open a.big:nth-child(n){transition-delay:0s} } .menu a.big:hover{color:var(--sand)} /* ancho completo: si la caja se encoge al contenido, la fila que se va abajo al plegarse queda alineada a la izquierda mientras todo lo demás está a la derecha — es lo que hacía el selector de idioma */ .menu__foot{margin-top:3.5vh;display:flex;gap:22px;flex-wrap:wrap;width:100%; align-items:center;justify-content:flex-end} /* pegado al resto y no empujado al borde opuesto: la columna ya está a la derecha, el margen automático lo mandaba de vuelta al otro lado */ .lang{display:inline-flex;align-items:center;gap:7px} .lang i{font-style:normal;opacity:.35} .lang button{letter-spacing:var(--tk);font-weight:700;font-size:.66rem; opacity:.45;transition:opacity .3s} .lang button:hover{opacity:.8} .lang button[aria-pressed=true]{opacity:1;color:var(--fg)} /* en el teléfono ocupa su propia fila; sin esto quedaba pegado a la izquierda mientras el correo y el Instagram estaban a la derecha */ @media (max-width:620px){.lang{margin-left:0;width:100%;justify-content:flex-end}} .rail{position:fixed;right:var(--gut);top:50%;transform:translateY(-50%);z-index:300; display:grid;gap:11px;mix-blend-mode:difference} .rail button{width:7px;height:7px;border-radius:50%;background:var(--ink-x);opacity:.28; transition:opacity .4s,transform .4s} .rail button[aria-current=true]{opacity:1;transform:scale(1.5)} @media (max-width:980px){.rail{display:none}} /* el rail y la tarjeta de KaiContent viven en el mismo punto de la pantalla: arriba manda la tarjeta, apenas empieza el recorrido manda el rail */ .rail{transition:opacity .45s var(--ease)} body.kc-on .rail{opacity:0;pointer-events:none} /* ============ KAICONTENT ============ Propuesta, no sección. La marca hermana todavía no existe —sin logo y sin manual— así que aquí es una puerta que se anuncia y nada más. Vive solo en la primera pantalla: cuando arranca el recorrido se va sola. Presencia sin disputarle el sitio al reel, que es de lo que se trata la página. */ /* Va en negativo contra la página: de día la tarjeta es negra, de noche blanca. Es la única pieza del sitio que se invierte, y por eso se ve — el vidrio esmerilado de antes la dejaba a la altura del fondo y Nico no la encontraba. La marca hermana se anuncia, no se disculpa. */ .kc{position:fixed;right:0;top:50%;z-index:320;transform:translate(0,-50%); display:grid;gap:6px;justify-items:start;text-align:left; padding:14px 17px 15px 18px;border-radius:var(--r) 0 0 var(--r); /* Naranja y no la tinta: contra una hoja blanca el negro se leía como un elemento más de la interfaz. KaiContent es otra marca —todavía sin identidad propia— y lo único que tiene que hacer aquí es que la vean. */ background:#E4572E;color:#fff; transition:opacity .55s var(--ease),transform .55s var(--ease), background-color .3s,color var(--skin)} .kc__tag{font-size:.5rem;opacity:.8} /* kai en Helvetica bold, content en Editorial itálica bold, todo en minúscula y pegado: una palabra sola con dos voces */ .kc__n{font-size:.94rem;line-height:1;letter-spacing:-.03em;font-weight:700; text-transform:lowercase;display:flex;align-items:baseline} .kc__n em{font-family:var(--serif);font-style:italic;font-weight:700; letter-spacing:-.015em} .kc__n span{opacity:.5;margin-left:.55em;font-weight:400; transition:transform .45s var(--ease)} .kc:hover{transform:translate(-4px,-50%)} .kc:hover .kc__n span{transform:translateX(3px)} .kc--off{opacity:0;transform:translate(22px,-50%);pointer-events:none} /* Al llegar al cierre vuelve a asomar, una sola vez, con un resplandor corto: es el único momento del recorrido en que pedir atención para la marca hermana no interrumpe nada. */ @keyframes kcGlow{ 0% {box-shadow:0 0 0 0 rgba(228,87,46,0)} 30% {box-shadow:0 0 34px 6px rgba(228,87,46,.55)} 100%{box-shadow:0 0 0 0 rgba(228,87,46,0)} } .kc--glow{animation:kcGlow 2.1s var(--ease) 1} @media (max-width:620px){ .kc{padding:10px 12px 11px 13px} .kc__n{font-size:.84rem} } /* ============ scroll cinematográfico ============ Al scrollear rápido los planos del reel arrastran: desenfoque vertical, el motion blur de una cámara. Quieto, filtro apagado y cero costo. */ /* el plano que está siendo tapado sale de foco para no competir con el que entra: es un rack focus entre planos, no un fundido */ .shot__frame{transition:filter .12s linear} /* ============ intro ============ Dos tiempos. Primero la marca se arma y el foco cierra: los arcos entran, la pupila se abre, el punto de grabación aterriza último, y todo eso llega desenfocado y termina nítido. Eso es de V6. El contorno delineado de V4 quedó afuera a pedido de Nico: la marca no se dibuja, aparece. Después la pantalla se abre como se abre una lente. Dos hojas negras, cada una con su mitad del isotipo, se separan por el eje y atrás está la página. El detalle que Nico marcó en V4: ahí la línea del eje se desvanecía justo antes del corte y quedaba sucio. Aquí cada línea está pegada al filo de su hoja, así que se va con ella. La línea no desaparece: la línea ES el corte, y el corte se abre. Y frena al llegar al ancho de la marca, sin cruzarla — un eje de lente, no un tajo por el medio del sujeto. El telón va negro en las dos pieles. Es la sala antes de la proyección: se apaga, aparece la marca, se abre, y recién ahí está la hoja blanca. */ @property --pluma{syntax:"";inherits:false;initial-value:0px} .intro{position:fixed;inset:0;z-index:1000;pointer-events:none; --in-size:clamp(66px,7vw,104px); /* el hueco mide exactamente la marca: la línea llega a tocarla y para */ --in-gap:calc(var(--in-size)/2 + 1px)} .intro.gone{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s} /* ---- la entrada en video ---- El video va encima de las hojas mientras corre. Al terminar se esconde y debajo ya están las hojas con el logo completo exactamente donde lo dejó el último cuadro: el mismo viewBox, centrado, y del ancho que le da el encuadre (lo calcula el JavaScript con la misma cuenta que object-fit:cover). */ .in__vid{position:absolute;inset:0;z-index:2;width:100%;height:100%; object-fit:cover;background:var(--void);opacity:0} /* opacity y no display:none mientras espera: el iPhone pausa solo un video que no se dibuja, y el play de arranque nunca empezaba */ .intro.con-video .in__vid{opacity:1} .intro.con-video.video-fin .in__vid{display:none} /* el dial vectorial va encima del video, con su mismo encuadre */ .in__dial{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none} .in__logo{position:absolute;left:50%;width:var(--in-logo,300px);display:none} .in__half--t .in__logo{top:100%;transform:translate(-50%,-50%)} .in__half--b .in__logo{top:0;transform:translate(-50%,-50%)} .in__logo svg{width:100%;height:auto;display:block;color:var(--page)} .intro.con-video .in__stage{display:none} .intro.con-video .in__logo{display:block} /* el filo para en el borde del logo completo, no en el del isotipo */ .intro.con-video{--in-gap:calc(var(--in-logo,300px)/2 + 1px)} .in__half{position:absolute;left:0;right:0;height:50%;overflow:hidden; background:var(--void);will-change:transform} .in__half--t{top:0} .in__half--b{top:50%} /* cada hoja lleva su propia copia de la marca, alineada al eje: juntas leen como una sola, y al abrirse el isotipo se parte al medio */ .in__stage{position:absolute;left:50%;width:var(--in-size)} .in__half--t .in__stage{top:100%;transform:translate(-50%,-50%)} .in__half--b .in__stage{top:0;transform:translate(-50%,-50%)} /* El isotipo es vectorial, pero el `filter:blur` del rack focus lo obliga a rasterizarse en una capa aparte, y `will-change` + `translateZ(0)` hacían que esa capa siguiera ahí cuando el desenfoque ya había llegado a cero. La marca quedaba dibujada a la resolución de la capa y no a la de la pantalla: en un Retina, la pupila y el punto se veían con el borde escalonado. Al terminar el armado se suelta la capa —sin filtro, sin will-change, sin transform— y el navegador la vuelve a dibujar como vector, nítida a cualquier densidad. */ .in__stage svg{width:100%;height:auto;display:block; color:var(--page);fill:currentColor;overflow:visible; filter:blur(5px);opacity:.001} .intro.play .in__stage svg{will-change:filter,opacity,transform} /* rack focus sobre el armado: entra desenfocada y cierra nítida */ .intro.play .in__stage svg{animation:isoRack .62s var(--ease) forwards} .in__stage path{opacity:0;transform-box:fill-box;transform-origin:50% 50%} .intro.play .p-arcL{animation:arcL .46s var(--ease) .02s forwards} .intro.play .p-arcR{animation:arcR .46s var(--ease) .09s forwards} .intro.play .p-eye {animation:eye .40s var(--ease) .22s forwards} .intro.play .p-dot {animation:dot .30s var(--ease) .40s forwards} /* Cuando el armado terminó, se suelta la capa. Va acá y no arriba porque estas reglas tienen la misma especificidad que las de .play: si se declaran antes, pierden por orden y el filtro sigue puesto. */ .intro.nitido .in__stage svg{ filter:none;opacity:1;transform:none;animation:none;will-change:auto} .intro.nitido .in__stage path{opacity:1;transform:none;animation:none} /* el filo de cada hoja */ .in__edge{position:absolute;left:0;right:0;display:flex; justify-content:space-between;align-items:center} .in__half--t .in__edge{bottom:0} .in__half--b .in__edge{top:0} .in__edge i{display:block;height:1px;width:0;background:rgba(247,249,249,.42)} .intro.axis .in__edge i{width:calc(50% - var(--in-gap)); transition:width .58s var(--ease)} /* 22 oct (Nico): el corte no es una línea blanca ni un filo duro. La línea se va, y cada hoja se desvanece en su borde —hacia arriba la de arriba, hacia abajo la de abajo— mientras se separa. El desvanecido nace en cero (cerradas son una sola pantalla negra) y crece con la apertura; --pluma se anima porque está registrada con @property. Sin @property el desvanecido aparece de una vez al abrirse, sin animar. */ .in__edge{display:none} .in__half--t{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 var(--pluma)); mask-image:linear-gradient(to top,transparent 0,#000 var(--pluma))} .in__half--b{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--pluma)); mask-image:linear-gradient(to bottom,transparent 0,#000 var(--pluma))} .intro.cut .in__half{--pluma:30vh; transition:transform 1s cubic-bezier(.62,0,.12,1),--pluma .75s cubic-bezier(.33,0,.2,1)} .intro.cut .in__half--t{transform:translateY(-100%)} .intro.cut .in__half--b{transform:translateY(100%)} @keyframes arcL{from{opacity:0;transform:rotate(-26deg) translateX(-8px)}to{opacity:1;transform:none}} @keyframes arcR{from{opacity:0;transform:rotate(26deg) translateX(8px)}to{opacity:1;transform:none}} @keyframes eye {from{opacity:0;transform:scale(.62)}to{opacity:1;transform:none}} @keyframes dot {from{opacity:0;transform:scale(.7) translateY(-4px)}to{opacity:1;transform:none}} @keyframes isoRack{ 0% {filter:blur(5px);opacity:.001;transform:scale(1.05)} 45% {opacity:1} /* el foco cierra antes del final: el último tramo va nítido, así la pupila y el punto no terminan de armarse detrás del desenfoque */ 72% {filter:blur(0)} 100%{filter:blur(0);opacity:1;transform:scale(1)} } @media (prefers-reduced-motion:reduce){ .intro{display:none} } /* ============ 01 · apertura ============ El video ya no es una textura detrás del texto: es la portada. La versión anterior lo dejaba al 16% de opacidad y en gris para que la tipografía respirara, y el resultado era que la única prueba de que esto es una productora de video entraba apagada. Ahora corre a calidad plena, a sangre, y la marca se apoya encima centrada — el patrón de verostudio, que es la referencia que trajo Nico: obra al 100%, nombre al medio, una línea chica abajo, y nada más. Sin velo. El texto se sostiene con sombra proyectada, no oscureciendo el material. */ /* ---- la portada como escenario ---- La sección mide una pantalla más el recorrido de la rueda; adentro, el plano fijo (sticky) ocupa la pantalla y no se mueve mientras se recorre. Sin la rueda —movimiento reducido— mide una pantalla y nada más. El recorte va en el plano y no en la sección: un overflow:hidden en la sección anula el sticky. */ /* La portada mide el alto GRANDE de la pantalla (lvh: con las barras del navegador recogidas), no el chico (svh). En el iPhone con Safari 26 la barra de abajo flota sobre la página, así que con svh quedaba una franja blanca entre el video y la barra (Nico, 22 oct). En el computador las dos medidas son la misma. svh queda de respaldo para navegadores viejos. */ .ov{height:calc(100svh - var(--vbar));height:calc(100lvh - var(--vbar));margin-bottom:var(--media);position:relative} .ov.con-rueda{height:calc(100svh - var(--vbar) + var(--rueda-largo,0px)); height:calc(100lvh - var(--vbar) + var(--rueda-largo,0px))} .ov__pin{position:sticky;top:0;height:calc(100svh - var(--vbar));height:calc(100lvh - var(--vbar)); display:grid;place-items:center;padding:var(--gut);overflow:hidden; /* la frase se centra en lo que se ve, no en lo que queda detrás de la barra del navegador */ padding-bottom:calc(var(--gut) + 100lvh - 100svh)} /* El plano se estira un píxel por debajo del borde de la sección: con alturas en svh el alto rara vez cae en un número entero, y ese resto dejaba una línea clara del fondo de la página asomando al pie de la portada. */ .ov__vid{position:absolute;inset:0 0 -1px;opacity:1;overflow:hidden; background:var(--void)} /* El paralaje que pidió Nico: mientras gira la rueda, el plano sube apenas, como si la página se moviera más lento que el scroll. Un 4 % en todo el recorrido. Para que el borde no asome, el plano es un 5 % más alto que la pantalla —quieto, no es un zoom que se mueva—. */ /* 12 % de recorrido (era 4): Nico lo quería "un poco más notorio". */ /* El contenedor queda del tamaño de la pantalla y se agranda con una escala FIJA desde arriba. Antes se lo hacía más alto (inset -13 %) y el reproductor de Stream, que se dimensiona contra la pantalla y no contra su caja, quedaba más corto: abajo asomaba la miniatura quieta, que es lo que vio Nico. La escala no se mueve —no es un zoom—; lo que se mueve es el desplazamiento. */ .ov.con-rueda .ov__vid{transform-origin:50% 0;will-change:transform; transform:translate3d(0,0,0) scale(1.14)} .ov__vid video{width:100%;height:100%;object-fit:cover} /* El reproductor de Stream viene en 16:9 dentro de un marco: para que llene la pantalla sin bandas se agranda desde el centro hasta cubrir el lado más largo. Es el equivalente a object-fit:cover para un iframe. */ /* El reproductor entra por encima de la miniatura y no de golpe: mientras Stream arranca, lo que se ve es el fotograma, no un rectángulo negro. Cuando el telón de la intro se abre, el video ya está corriendo debajo. */ .ov__vid iframe{position:absolute;top:50%;left:50%;border:0; width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh; transform:translate(-50%,-50%);pointer-events:none; opacity:0;transition:opacity .7s var(--ease)} .ov__vid.andando iframe{opacity:1} .ov__vid img{width:100%;height:100%;object-fit:cover;display:block} /* Un velo, pero no el de antes. El de antes apagaba el plano entero al 16% y lo pasaba a gris, y por eso se sacó. Este es una mancha negra neutra, blanda y SOLO detrás del titular: el borde de la pantalla queda intacto, que es donde el ojo mira el plano. La sombra del texto sola no alcanzaba con las tomas de tono medio —vidrio, hormigón, cielo— y Nico avisó que "Love for ideas" no se leía. Es la misma regla que usa en sus videos: nunca una banda clara, siempre un degradado negro neutro con el texto blanco encima. */ .ov__vid::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(ellipse 62% 42% at 50% 52%, rgba(0,0,0,.34) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,0) 78%)} /* La frase se centra en la fila 1fr: si crece más que esa fila se desborda hacia arriba y hacia abajo y pisa el pie. Cuatro líneas a line-height .8 miden 3.2×, así que el cuerpo lleva techo por alto de ventana además del de ancho. */ /* Dos líneas en vez de cuatro: el bloque mide 1.6× y aguanta mucho más cuerpo. El techo por alto queda solo como red de seguridad. */ /* El bloque central: marca y bajada como una sola unidad, centrada en la ventana. Nada de esquinas ni de barras: el ojo entra por el video y encuentra el nombre en el medio. */ .ov__c{position:relative;z-index:2;display:grid;justify-items:center; gap:clamp(10px,1.6vh,20px);text-align:center;color:var(--page); opacity:0;transform:translateY(14px); transition:opacity 1.1s var(--ease) .25s,transform 1.1s var(--ease) .25s} .ov.on .ov__c{opacity:1;transform:none} /* La mitad de cuerpo que antes. En el sitio que Nico ya tiene, la frase ocupa una fracción chica de la pantalla y por eso se lee elegante: el protagonista es el plano, no la tipografía. Y va en bold — es la voz de la marca; el regular la dejaba blanda. */ .ov h1{min-width:0;line-height:.94;font-weight:700;letter-spacing:-.035em; font-size:min(clamp(1.5rem,4.2vw,3.9rem),11vh); text-shadow:0 2px 34px rgba(0,0,0,.45)} /* la palabra especial mantiene la itálica del manual, sin el bold */ .ov h1 .em{font-weight:400} /* ---- la rueda: Love for ______ ---- El manual usa "Love for…" como fórmula para hablar de todo (Tono de voz, Territorios: "Usamos esta fórmula para hablar de todos los temas posibles") y trae la serie: ideas, design, details, architecture, people, nature, places, hospitality… En dos líneas, como el manual la compone en una de sus páginas: "Love for" arriba, fijo, y la palabra abajo. Así cada palabra se centra sola y "Love for" no se corre nunca, aunque "architecture" mida el triple que "ideas". Con todo en una línea, cada cambio movía la frase entera de un lado a otro. La palabra vive en un cilindro: cada una gira alrededor de un eje que está detrás (transform-origin en z), y se ven tenues la anterior y la siguiente. Quieta ya se nota que es una rueda, que es lo que invita a scrollear. */ /* v2 (22-10): una sola línea, la palabra a la derecha de "Love for". De la referencia de RE/MAX que dejó Nico ("You build it with ___"): la palabra cambia adentro de una ventana que la recorta —no se ve la que viene, que era lo que no le gustaba del cilindro— y la frase entera se recentra en el mismo movimiento y con la misma curva. Nada salta de lado: el ancho de la ventana va de una palabra a la otra mientras gira. En el teléfono "Love for hospitality" no cabe en una línea: ahí la palabra baja a la segunda, centrada. */ .ov h1.con-rueda{white-space:nowrap} .ov h1 .ln--rueda{display:inline-block;vertical-align:bottom} .rueda{position:relative;display:inline-block;vertical-align:bottom; /* margin-bottom -.282em y no -.14: medido en la página, la palabra quedaba 0,142em más alta que "Love for" (6 px a 43 px). Una caja con overflow:hidden se alinea por su borde de abajo, no por la línea base del texto, así que la línea base hay que llevarla a mano. */ /* La ventana es más alta que la palabra (.12em arriba, .16em abajo) para que el desvanecido de los bordes no lave las astas de la "d" o la "l" ni las colas de la "g" y la "p". Crece hacia los dos lados sin mover la palabra: lo que se agrega abajo se descuenta en el margen. */ height:2.1em;margin-bottom:-.762em;overflow:hidden; /* el recorte se suaviza arriba y abajo —la palabra entra y sale, no aparece cortada a tijera— y también a la derecha: mientras la ventana cambia de ancho, una palabra larga ("architecture") quedaba cortada por una línea dura (Nico, 22 oct). Para que en reposo el desvanecido no toque ninguna letra, la palabra lleva .5em de aire a la derecha, y el margen negativo lo devuelve: la frase sigue centrada igual. */ margin-right:-.42em; -webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent), linear-gradient(to right,#000 calc(100% - .44em),transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent), linear-gradient(to right,#000 calc(100% - .44em),transparent); mask-composite:intersect} .rueda__w{position:absolute;left:0;top:calc(.48em + var(--rueda-dy,0px));display:block;white-space:nowrap; font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em; padding-right:.5em;will-change:transform,opacity} /* En pantallas táctiles, sin máscara ni recorte: en el iPhone una caja con máscara cuyo contenido se mueve no se redibujaba mientras el dedo scrolleaba, y las palabras desaparecían hasta que la rueda se detenía (Nico, 22 oct, en Safari y en Chrome). Sin máscara, cada palabra se apaga sola con su propia opacidad antes de salir de su lugar (girarRueda), y tampoco hay borde duro a la derecha. */ @media (hover:none) and (pointer:coarse){ .rueda{overflow:visible;-webkit-mask-image:none;mask-image:none} } /* En el teléfono también en una sola línea, más chica (Nico la eligió el 22 oct frente a la versión apilada). */ @media (max-width:760px){ .ov h1.huge.con-rueda{white-space:nowrap;font-size:min(9.4vw,6.5vh)} } /* el texto que se lee en voz alta: la frase entera, una sola vez */ .ov h1 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* Fuera de la vista, a pedido de Nico ("no me gusta que esté la frase, hay que borrarla"): la portada queda solo con la rueda. Se mantiene en el HTML para buscadores y lectores de pantalla, que sí la necesitan. */ .ov__sub{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .ov__sub--viejo{max-width:52ch;font-size:clamp(.7rem,.82vw,.8rem);line-height:1.6; color:rgba(247,249,249,.86);text-shadow:0 1px 18px rgba(0,0,0,.5)} /* la flecha de scroll: abajo, chica, sin palabra */ /* la flecha se mide desde el borde de la pantalla visible (svh), no desde el fondo del video, que ahora sigue detrás de la barra del navegador */ .ov__go{position:absolute;left:50%;bottom:clamp(18px,3.4vh,38px); bottom:calc(100lvh - 100svh + clamp(18px,3.4svh,38px));z-index:2; transform:translateX(-50%);color:rgba(247,249,249,.7); animation:ovGo 2.6s var(--ease) infinite} @keyframes ovGo{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}} /* ============ 02 · qué filmamos ============ Igual que [Benefits] en VANA: la lista va en flujo normal —la scrollea la página, no un carrusel— el rótulo es sticky a la mitad exacta, y cada palabra recibe opacidad y desenfoque según su distancia a esa línea. */ /* Compacto a pedido: interlínea corta y sin aire extra entre palabras. El recorrido por el foco es exactamente el alto de la lista —la scrollea la página— así que al apretarlas el paso se acelera; se compensa ensanchando un poco la banda de desenfoque, no alargando la sección. */ /* El aire de esta sección es el mismo que el de todas: el recorrido del foco lo da el alto de la lista, no el padding. Las palabras cruzan la línea igual mientras la sección entra y sale de la ventana. */ .scl{position:relative;display:flex;align-items:flex-start; gap:clamp(18px,6vw,90px);padding:var(--media) var(--gut)} .scl__lab{position:sticky;top:50%;z-index:2;flex:none;padding-top:.85em} .scl__list{flex:1;min-width:0} .scl__list li{position:relative; font-weight:400;font-size:clamp(2.6rem,9.4vw,9.4rem);line-height:.94; letter-spacing:-.042em;padding:0 0 .04em; cursor:pointer;width:max-content;max-width:100%; will-change:opacity,filter} /* Al pasar el mouse, el óvalo del manual —no un subrayado— se dibuja alrededor de la palabra, medido para cada una, y al salir se desarma siguiendo de largo (Nico, 22 oct). Lo arma el JS (ovalarFilmamos). */ .scl__ov{position:absolute;pointer-events:none;overflow:visible;fill:none; stroke:currentColor;stroke-linecap:round;stroke-width:1.5px; transition:transform .6s cubic-bezier(.22,1,.36,1)} @media (hover:hover) and (pointer:fine){ .scl__list li{transform-origin:40% 50%; transition:transform .6s cubic-bezier(.22,1,.36,1)} } @media (max-width:760px){ .scl{flex-direction:column;gap:14px;padding:var(--media) var(--gut)} .scl__lab{position:relative;top:auto;padding-top:0} } /* ============ 03 · el reel ============ */ /* ============ los países, en acordeón ============ Reemplaza al reel de destacados en el inicio. La idea es de white-desert: paneles verticales que se van abriendo de a uno mientras te desplazas. El cerrado lleva el nombre en vertical, casi como el canto de un libro; al abrirse el nombre gira a horizontal y queda centrado sobre el plano. Sirve mejor que tres videos sueltos porque contesta la pregunta que un cliente se hace primero, que es dónde trabajan — y de ahí se entra directo al país. */ /* El recorrido era de más de tres pantallas para cinco paneles y se sentía como un tramo muerto: mucho scroll, poco cambio. Ahora la sección mide poco más que una pantalla y los paneles se abren uno tras otro de izquierda a derecha dentro de ese tramo corto. */ /* 22 oct: ya no se clava. Nico: "no me gusta que la página se clave al llegar al borde de abajo, ni tener que hacer scroll para pasar esa sección". Mide una pantalla y se pasa de largo; los paneles se abren mientras la sección cruza la ventana (ver alScroll). */ .acc{position:relative;height:calc(100svh - var(--vbar)); margin:var(--media) 0} /* Va de borde a borde y sin aire entre paneles: acá el medio no es una pieza apoyada en la hoja, es la hoja. Es la única parte del sitio donde el marco redondeado se deja de lado, y a propósito. */ .acc__pin{position:relative;height:100%;overflow:hidden} .acc__lab{position:absolute;z-index:3;top:clamp(20px,4vh,52px);left:var(--gut); color:var(--page);mix-blend-mode:normal; text-shadow:0 1px 22px rgba(0,0,0,.45)} /* 22 oct, rediseño (Nico: "las líneas entre medio se ven baratas, muy robótico"): cada país es una pantalla redondeada —la regla del manual— con aire entre una y otra, y el panel que se abre crece con un pequeño rebote hacia los lados antes de asentarse: la curva pasa de largo un pelo y vuelve (y > 1 en la bezier). */ .acc__pin{padding:0 var(--gut)} /* 22 oct (Nico): como la portada, pero al revés. Los países llegan con el marco de hoja; cuando la sección llena la pantalla, los dos de los extremos se estiran hasta el borde y pierden sus esquinas de afuera (las separaciones de adentro quedan); al irse, se vuelven a despegar. El JS mueve --acc-pad y --acc-ext entre el margen y cero. */ @media (min-width:701px){ .acc__pin{padding:0 var(--acc-pad,var(--gut))} .acc__p:first-child{border-top-left-radius:var(--acc-ext,var(--r));border-bottom-left-radius:var(--acc-ext,var(--r))} .acc__p:last-child{border-top-right-radius:var(--acc-ext,var(--r));border-bottom-right-radius:var(--acc-ext,var(--r))} } .acc__row{display:flex;gap:clamp(6px,.6vw,10px);height:100%;border-radius:0;overflow:visible} .acc__p{position:relative;flex:1 1 0;min-width:0;overflow:hidden; border-radius:var(--r);background:var(--void);cursor:pointer; transition:flex-grow 1.15s cubic-bezier(.3,1.22,.4,1)} /* El plano vive en una capa del ancho de la ventana, centrada, y no en el panel. Antes la imagen medía 100% del panel: al abrirse, el panel crecía y la imagen se re-encuadraba cuadro a cuadro — de ahí el tirón de que "se abre desde abajo". Ahora el plano no se mueve nunca; lo que cambia es cuánto de él se ve. La transición pasa a ser una cortina, y una cortina no puede tironear. */ .acc__f{position:absolute;top:0;left:50%;height:100%;width:100vw; margin-left:-50vw;overflow:hidden; transition:transform 1.2s cubic-bezier(.22,1,.36,1)} /* una línea de un pixel separa los paneles: sin ella, dos planos oscuros pegados se leen como uno solo */ .acc__p+.acc__p::before{display:none} .acc__p.on{flex-grow:5.6} /* Los paneles cerrados estaban tan apagados que cuatro de cinco se leían como un rectángulo negro. Se los deja respirar: siguen atrás del abierto, pero se ve qué hay en cada uno. */ /* la miniatura queda debajo como piso: se ve mientras el reproductor arranca, y si el video no llega a cargar nunca, sigue sosteniendo */ .acc__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:1} /* el reproductor tiene que tapar la capa entera, no acomodarse dentro: con 16:9 dentro de una caja más alta, Stream pinta bandas negras */ .acc__f iframe{position:absolute;top:50%;left:50%;border:0;z-index:1; width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh; transform:translate(-50%,-50%);pointer-events:none; /* entra sobre la miniatura, no en lugar de ella: cuando Stream termina de arrancar, el plano ya estaba ahí y solo se pone en movimiento */ opacity:0;animation:accEntra 1.2s var(--ease) .6s forwards} @keyframes accEntra{to{opacity:1}} /* 22 oct (Nico: "se queda un poco pegada"): con los cinco videos corriendo dentro de pantallas redondeadas que cambian de ancho, el navegador recortaba cinco videos por cuadro. Solo el país abierto muestra video; los cerrados quedan con su foto fija (en penumbra casi no se distingue) y el video del que se abre entra con un fundido cuando el panel ya creció. visibility, no display: el reproductor sigue cargado y vuelve al instante. */ /* 22 oct, de vuelta (Nico): al abrir un país el video "volvía a cargar" y saltaba —era la foto fija del panel cerrado que cambiaba por el video—. Ahora los cinco corren siempre, también cerrados: abrir es solo mostrar más de lo mismo que ya iba corriendo. Entran una sola vez, al acercarse la sección, con el fundido de accEntra (todavía fuera de cuadro). */ /* Con los cinco planos corriendo, lo que distingue al abierto ya no puede ser que sea el único con movimiento: es el único que está a plena luz. Los cerrados quedan bajo un velo más denso, en penumbra, insinuando lo que pasa adentro. */ .acc__p::after{content:"";position:absolute;inset:0;z-index:2; background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.68)); opacity:.88;transition:opacity .9s var(--ease)} .acc__p.on::after{opacity:.4} /* El nombre es lo único que queda encima del plano, así que carga con todo el peso: de canto mientras el panel está cerrado, y grande de verdad cuando se abre. */ /* El nombre del país en la voz de la marca: Helvetica bold, tracking apretado y la mayúscula solo donde la lleva la palabra. La caja alta entera es la voz de la metadata —fechas, duraciones, rótulos—, no la de un nombre propio a tamaño de cartel. */ .acc__n{position:absolute;inset:0;z-index:3;display:grid;place-items:center; color:var(--page);font-weight:700;letter-spacing:-.04em;line-height:.94; pointer-events:none; font-size:clamp(1.1rem,1.5vw,1.45rem); text-shadow:0 2px 30px rgba(0,0,0,.4)} .acc__n{transition:transform .9s cubic-bezier(.22,1,.36,1)} /* El nombre: de canto en el panel cerrado, a tamaño de cartel en el abierto. Nada de girar con rebote (Nico, 22 oct: "se ve childish"): es un cambio de foco, como en cámara. El de canto se desvanece rápido y el horizontal entra desde un desenfoque, subiendo apenas, y cierra nítido. Son dos textos en la misma celda, así ninguno cambia de forma. */ /* 22 oct (Nico): nada de nombres de canto —siempre horizontales— y una entrada tope de línea al abrir. El cerrado lleva el nombre chico y horizontal (si no cabe, en dos líneas). Al abrirse, el nombre grande entra letra por letra, cada una subiendo desde su propia ranura —una máscara justo en su línea de base— con una curva que frena largo. Sin desenfoque ni rebote. Al cerrar, las letras bajan juntas y rápido. */ .acc__n>span{grid-area:1/1;display:block} /* sin sombra (Nico, 22 oct): con cada letra en su ranura, la sombra quedaba recortada en cajas alrededor de las letras */ .acc__n{text-shadow:none} .acc__v{font-size:clamp(.88rem,1.05vw,1.08rem);letter-spacing:-.02em;line-height:1.08; white-space:normal;text-align:center;padding:0 12px;max-width:100%;opacity:.95; transition:opacity .4s var(--ease) .3s} .acc__h{white-space:nowrap;opacity:1} .acc__l{display:inline-block;overflow:hidden;vertical-align:bottom; padding:.14em .015em .2em;margin:-.14em -.015em -.2em} .acc__l i{display:inline-block;font-style:normal;transform:translate3d(0,112%,0); transition:transform .28s cubic-bezier(.5,0,.75,0)} .acc__sp{display:inline-block;width:.26em} /* El nombre va al medio del panel, no en una esquina: es lo único que hay sobre el plano y en el centro se lee como un rótulo de país y no como un pie de foto. */ /* la celda mide lo que el panel, no lo que el nombre: si no, un nombre más ancho que el panel cerrado ensanchaba la celda y quedaba corrido afuera */ .acc__n{font-size:clamp(2.6rem,6.6vw,6.4rem); grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)} .acc__p.on .acc__n{place-items:center;padding:0 var(--gut)} .acc__p.on .acc__v{opacity:0;transition:opacity .2s var(--ease)} .acc__p.on .acc__l i{transform:none; transition:transform 1.05s cubic-bezier(.16,1,.3,1) calc(.3s + var(--k) * 34ms)} /* 22 oct, otra vez (Nico): el nombre no desaparece y vuelve a entrar —ya estaba ahí—. Es uno solo, siempre a la vista, y crece con la pantalla: cerrado es chico (un 16 % del tamaño abierto, lo que medía el rótulo de antes) y al abrirse se agranda al mismo tiempo que el panel, con la misma duración y un rebote más corto que el del panel para que no se vuelva infantil. Letras un poco más apretadas. */ .acc__p .acc__n>.acc__v{display:none} .acc__p .acc__n{letter-spacing:-.055em} .acc__p .acc__h{transform:scale(.16);transform-origin:50% 50%; transition:transform 1.15s cubic-bezier(.3,1.1,.4,1)} .acc__p.on .acc__h{transform:none} .acc__p .acc__l i,.acc__p.on .acc__l i{transform:none;transition:none} @media (max-width:700px){ .acc{height:auto} .acc__pin{position:static;height:auto;overflow:visible} .acc__lab{position:static;padding:0 var(--gut) 12px;text-shadow:none; color:var(--ink)} .acc__row{flex-direction:column;height:auto} .acc__p{flex:none;height:38svh} .acc__p+.acc__p::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px} .acc__f{left:0;width:100%;margin-left:0} .acc__p .acc__n{place-items:center;letter-spacing:-.04em; padding:0 var(--gut);font-size:clamp(2rem,9vw,3rem)} } .reel{position:relative} /* Los planos se apilan. Cada uno es sticky al mismo tope, así que cuando el que viene llega arriba se queda pegado ENCIMA del anterior, que no se mueve: se queda abajo hasta quedar tapado del todo. Antes cada plano vivía en su propia sección de 190svh y el anterior se despegaba y subía — por eso se sentía como pasar de página y no como un plano cubriendo a otro. El orden del DOM ya hace que el posterior se pinte encima. */ .shot{position:sticky;top:var(--vbar);height:calc(100svh - var(--vbar))} .shot__pin{position:absolute;inset:0} /* El marco es lo que se aleja y se redondea en el pasaje de un plano al otro; el recorte vive aquí y no en el pin, así el negro de atrás asoma cuando las esquinas se curvan. */ /* El plano va sobre negro en las dos pieles. Antes el marco tomaba el color de la piel y en modo día el degradado de encima era BLANCO: le lavaba el contraste a cada preview, que es exactamente lo que Nico venía sintiendo que le faltaba a la página. Un plano de video no se apoya sobre papel, se apoya sobre negro. */ .shot__frame{position:absolute;inset:0;overflow:hidden;background:var(--void); transform-origin:50% 50%;will-change:transform,border-radius} /* el primero no entra desde ningún lado: ya está */ .shot:first-child .shot__frame{transform:none!important;border-radius:0!important} .shot__media{position:absolute;inset:0;will-change:transform} .shot__media img,.shot__media video{width:100%;height:100%;object-fit:cover} /* Y el degradado deja de ser un velo parejo: ahora solo pisa arriba y abajo, donde va el texto, y el medio del cuadro queda limpio. El material se ve. */ .shot__frame::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 24%, rgba(0,0,0,0) 55%,rgba(0,0,0,.72) 100%)} .shot__in{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column; justify-content:space-between;padding:calc(var(--gut) + 40px) var(--gut) var(--gut); color:var(--page)} .shot__in .dim{color:rgba(247,249,249,.62)} .shot__ix{display:flex;gap:14px;align-items:baseline} .shot__loc{display:block;margin-bottom:clamp(20px,3.2vh,42px); opacity:0;transform:translateY(9px)} /* el nombre abre la pieza: es botón, no adorno */ /* Helvetica bold, la voz de la marca. La itálica de Editorial se reserva para la palabra especial de la portada, no para cada título de pieza. Y va en blanco en las dos pieles: está sobre un video, no sobre la página — en modo día salía negra sobre el plano y se veía mal pegada. */ .shot__name{position:relative;display:inline-block; font-family:var(--face);font-style:normal;font-weight:700; font-size:clamp(2.1rem,7.4vw,7.2rem);line-height:.92;letter-spacing:-.035em; text-align:left;cursor:pointer;color:var(--page)} .shot__name span.t{display:inline-block;transform:translateY(28px);opacity:0; transition:transform 1s var(--ease),opacity 1s var(--ease)} .shot.on .shot__name span.t{transform:none;opacity:1} /* el óvalo a mano alzada es el recurso gráfico del manual: se dibuja al pasar */ /* alto generoso: la itálica de PP Editorial baja mucho y el óvalo no puede cortar la p de "Zapallar" */ .shot__oval{position:absolute;left:-2.2%;top:-22%;width:104.4%;height:154%; pointer-events:none;overflow:visible} /* pathLength=1 normaliza el trazo: sin eso, dasharray 1 1 sobre un path de ~2000 unidades daba una línea punteada en vez de un delineado. */ .shot__oval path{fill:none;stroke:var(--page);stroke-width:1.4; vector-effect:non-scaling-stroke;stroke-linecap:round; stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0; /* al salir el mouse se des-dibuja hacia atrás: la opacidad se va recién al final, si no se apagaba antes de terminar el recorrido */ transition:stroke-dashoffset .9s var(--ease),opacity .25s ease .65s} .shot__name:hover .shot__oval path, .shot__name:focus-visible .shot__oval path{stroke-dashoffset:0;opacity:.85; transition:stroke-dashoffset .9s var(--ease),opacity .2s ease} /* la itálica de PP Editorial termina con cola larga: el rótulo necesita aire */ .shot__play{display:inline-flex;align-items:center;gap:9px;margin-left:.62em; vertical-align:middle;opacity:0;transform:translateX(-8px); transition:opacity .45s var(--ease),transform .45s var(--ease)} .shot__name:hover .shot__play, .shot__name:focus-visible .shot__play{opacity:.8;transform:none} .shot__meta{margin-top:18px;display:flex;gap:clamp(14px,3vw,44px);flex-wrap:wrap; border-top:1px solid rgba(var(--fgc),.24);padding-top:12px} .shot__meta div{opacity:0;transform:translateY(9px)} /* la barra no es blanco puro y se apaga al terminar el plano, para no dejar una línea colgada sobre el siguiente */ .shot__bar{position:absolute;left:0;right:0;bottom:0;height:2px; background:rgba(var(--fgc),.10);z-index:4} .shot__bar i{display:block;height:100%;background:rgba(var(--fgc),.5); transform-origin:0 50%;transform:scaleX(0)} /* ============ 04 · confían en nosotros ============ */ /* la sección centra su contenido en vez de apoyarlo arriba: la tira quedaba descolgada respecto de lo que viene antes y después */ /* Sin `min-height`. La tenía en 56svh y el contenido mide 207px: los 297px que sobraban los repartía `align-content:center` arriba y abajo, así que esta sección sumaba 148px de aire a cada lado en vez de los 72 de --media. El resultado eran dos bordes de 220px entre seis de 144: el doble, exactamente. El aire de una sección lo pone el token, no un alto mínimo que nadie vuelve a mirar. */ .cl{padding:var(--media) 0;overflow:hidden;display:grid;align-content:center} .cl__lab{padding:0 var(--gut);display:block} /* Dos hileras cruzadas y lentas: en una sola línea los nombres pasaban demasiado rápido y no se alcanzaban a leer. */ /* el rótulo de la sección está oculto, así que este margen ya no separa de nada: sumaba aire de más justo en el borde con la sección anterior */ .cl__rows{display:grid;gap:clamp(6px,1.2vh,18px)} .cl__strip{display:flex;gap:clamp(4px,1vw,16px);width:max-content;will-change:transform} /* Sin cajas: el logo suelto y nada más. Todos los archivos vienen en un lienzo idéntico (660×236) con la marca ya normalizada por masa de tinta y centrada, así que alcanza con darles el mismo alto para que queden alineados y con el mismo peso visual. */ /* flex y no grid: con `place-items:center` el alto porcentual de la imagen no resolvía y se dibujaba en su tamaño natural */ .cl__c{flex:none;display:flex;align-items:center;justify-content:center; height:clamp(46px,4.6vw,62px);padding:0 clamp(18px,2.2vw,32px); font-size:clamp(.72rem,1.05vw,.92rem);letter-spacing:.02em;line-height:1.2; text-align:center;color:rgba(var(--fgc),.62)} /* sin hilera destacada: a este tamaño todos pesan igual y la tira se lee como una sola cinta de confianza, no como un ranking */ .cl__strip--lead .cl__c{height:clamp(46px,4.6vw,62px); padding:0 clamp(18px,2.2vw,32px);color:rgba(var(--fgc),.82)} /* Los archivos vienen en blanco sobre transparente, hechos para el fondo negro de V6. Sobre la hoja desaparecen, así que de día se invierten: como son de un solo tono, invertir los pasa a negro sin tocar la transparencia. De noche se dejan como están, que es su forma original. */ :root[data-skin="dia"] .cl__c img{filter:invert(1)} .cl__c img{display:block;height:100%;width:auto;object-fit:contain; opacity:.66;transition:opacity .45s} .cl__c:hover img{opacity:1} /* ============ 05 · nosotros ============ La referencia que trajo Nico enfoca unas frases y apaga el resto. Aquí va en dosis baja: la línea que estás leyendo va nítida, las de más arriba y más abajo se atenúan y desenfocan apenas, y las frases clave quedan siempre en blanco. Nada de la niebla fuerte del original. */ /* mismo margen izquierdo que las líneas de "la diferencia" (difAlign 9vw), para que las dos secciones arranquen alineadas */ .ab{padding:var(--media) var(--gut);padding-left:calc(var(--gut) + 9vw); display:grid;gap:6vh;justify-items:start} /* Estaba a 2.5rem con 24ch de medida: entraban cuatro o cinco palabras por línea y leerlo era saltar de renglón todo el tiempo. El cuerpo baja y la medida sube a 38ch, que es la franja donde el ojo no se pierde. Sigue siendo una sección de escala, pero ahora se lee. */ .ab__t{font-weight:400;font-size:clamp(1.12rem,1.85vw,1.62rem);line-height:1.5; letter-spacing:-.02em;max-width:38ch;text-wrap:pretty} /* el gris de antes se comía la sección: sube el piso y el destacado va pleno */ /* Sin will-change: lo que anima el JS son las líneas, no las palabras. En las palabras solo servía para que el navegador reservara una capa por cada una —más de cincuenta— y no las tocara nunca. */ .ab__t .w{color:rgba(var(--fgc),.58); transition:color .45s ease} .ab__t .w.key{color:var(--fg)} .ab__t .ln{display:block;will-change:opacity,filter} .ab__foot{display:flex;gap:clamp(18px,4vw,52px);flex-wrap:wrap; color:rgba(var(--fgc),.42)} /* ============ 06 · la diferencia ============ El movimiento de [Microdose] en VANA: tres líneas, cada una corrida lateralmente una cantidad distinta mientras te desplazas. */ /* El padding lateral va en cero y lo ponen los hijos: las tres frases se corren de costado y tienen que poder salirse del ancho de la columna. */ .say{padding:var(--media) 0;display:grid;align-content:center;gap:3.4vh; overflow:hidden} .say>.lbl{padding:0 var(--gut)} .say__l{display:block;font-weight:400;font-size:clamp(1.9rem,8.2vw,8rem);line-height:1; letter-spacing:-.042em;white-space:nowrap;padding:.02em var(--gut) .12em; will-change:transform} .say__l.em2{font-family:var(--serif);font-style:italic;letter-spacing:-.02em} /* ============ 07 · índice + cierre ============ */ .close{display:grid;align-content:center;justify-items:center;gap:5vh; padding:var(--media) var(--gut);text-align:center} /* dentro del portafolio el cierre arranca pegado a la grilla */ /* El cierre va a sangre también adentro del portafolio. El contenedor de la grilla tiene su margen lateral y su aire abajo, y el cierre los heredaba: quedaba un bloque negro flotando con una franja blanca a cada lado y otra abajo, justo el borde duro que el resto del sitio evita. Los márgenes negativos le devuelven el ancho de la ventana y lo pegan al fondo. */ .end--pf{margin:8vh calc(var(--gut) * -1) -12vh;padding-top:12vh;width:auto} .close__cta{display:block;font-weight:400;letter-spacing:-.045em;line-height:1; font-size:clamp(2.4rem,7.4vw,7.6rem);color:var(--fg)} .close__cta span{display:block} .close__cta em{font-family:var(--serif);font-style:italic;letter-spacing:-.02em} .close__cta i{display:inline-block;font-style:normal;margin-left:.22em; transition:transform .6s cubic-bezier(.22,1,.36,1)} .close__cta:hover i{transform:translateX(.18em)} .close__pie a{color:inherit;border-bottom:1px solid rgba(var(--fgc),.25)} .close a.mail{font-weight:400;font-size:clamp(1.1rem,4.6vw,4rem);letter-spacing:-.03em; border-bottom:1px solid rgba(var(--fgc),.3);padding-bottom:.06em;word-break:break-word} /* ============ cierre: la marca a tamaño de cartel ============ La referencia que trajo Nico (alethia.earth) cierra con el nombre enorme sobre un plano en movimiento. Funciona porque el último golpe de vista no es un dato de contacto: es la marca, grande, con material atrás. El video va desenfocado y a media luz a propósito — no compite con la palabra, la sostiene. Cuál plano va aquí lo elige Nico después; hoy corre el mismo del reel. */ .end{position:relative;overflow:hidden;background:var(--void); display:grid;align-content:end;gap:clamp(20px,4vh,44px); padding:var(--aire) var(--gut) 0;min-height:62svh; /* la portada y el acordeón no llevan padding —uno es un plano a sangre y el otro un bloque clavado—, así que su media medida va por fuera */ margin-top:var(--media)} .end__v{position:absolute;inset:0;pointer-events:none} .end__v video,.end__v img{width:100%;height:100%;object-fit:cover; filter:blur(16px) saturate(.86);transform:scale(1.12);opacity:.52} .end__v iframe{position:absolute;top:50%;left:50%;border:0; width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh; transform:translate(-50%,-50%) scale(1.12); filter:blur(16px) saturate(.86);opacity:.52;pointer-events:none} .end__v::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(5,5,5,.72),rgba(5,5,5,.35) 45%,rgba(5,5,5,.9))} .end__in{position:relative;z-index:2;display:grid;gap:clamp(14px,2.4vh,26px); color:var(--page)} .end__in .lbl{color:rgba(247,249,249,.55)} /* La palabra es el logo, no una tipografía parecida: se usa el mismo dibujo del lockup con la lente recortada. Ocupa todo el ancho y se apoya en el borde inferior, como en la referencia. */ .end__mark{display:block;width:100%; opacity:0;transform:translateY(26px); transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)} .end__mark svg{width:100%;height:auto;display:block;color:var(--page)} .end.on .end__mark{opacity:1;transform:none} /* arriba de la palabra: el dato que en la referencia va suelto sobre el bloque grande */ .end__top{display:flex;justify-content:space-between;align-items:flex-end; gap:20px;flex-wrap:wrap;padding-bottom:clamp(14px,2.4vh,26px)} .end__where{font-size:clamp(1rem,1.7vw,1.5rem);font-weight:700; letter-spacing:-.03em;line-height:1.15} .end__iso{width:26px;height:26px;flex:none;opacity:.55} .end__iso svg{width:100%;height:auto;display:block;color:var(--page)} /* el pie: columnas de links, como cualquier estudio serio */ .end__cols{display:grid;gap:clamp(18px,3vw,44px);padding:clamp(26px,4vh,48px) 0 30px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border-top:1px solid rgba(247,249,249,.16);margin-top:clamp(20px,3vh,36px)} .end__col{display:grid;gap:9px;align-content:start} /* El botón del cierre. Va en negativo contra el plano oscuro del fondo, que es donde vive esa sección: relleno de página con la tinta encima, y al apuntarlo se vacía. Mismo píldora que el resto de los botones del sitio. */ .cierre__b{display:inline-flex;align-items:center;justify-self:center; margin-top:clamp(14px,2.4vh,26px);padding:14px 28px;border-radius:999px; background:var(--page);color:var(--ink);border:1px solid var(--page); font-size:.8rem;font-weight:700;letter-spacing:var(--tk); transition:background-color .35s var(--ease),color .35s var(--ease)} .cierre__b:hover{background:none;color:var(--page)} .end__col h4{font-size:.66rem;letter-spacing:var(--tk);font-weight:700; font-weight:400;color:rgba(247,249,249,.42)} .end__col a,.end__col span{font-size:.82rem;letter-spacing:-.01em; color:rgba(247,249,249,.78);transition:color .3s} .end__col a:hover{color:var(--page)} .end__legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-bottom:26px;color:rgba(247,249,249,.4)} footer.f{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:0 var(--gut) 34px} /* ============ portafolio completo ============ */ /* El telón del pasaje: las mismas dos hojas de la intro, pero al revés — cierran, cambia lo que hay detrás, y vuelven a abrir. Antes el portafolio entraba con un fundido y la página se iba a negro en el medio, que es un corte, no una transición. Aquí el gesto es el mismo de la apertura del sitio: la lente se cierra y se abre. */ .wipe{position:fixed;inset:0;z-index:880;pointer-events:none;visibility:hidden} .wipe i{position:absolute;left:0;right:0;height:50.4%;background:var(--void); display:block;transition:transform .46s cubic-bezier(.76,0,.24,1)} .wipe i:first-child{top:0;transform:translateY(-100%)} .wipe i:last-child{bottom:0;transform:translateY(100%)} .wipe--in{visibility:visible} .wipe--in i{transform:none} .wipe--out{visibility:visible} .wipe--out i{transition-duration:.58s} .wipe--out i:first-child{transform:translateY(-100%)} .wipe--out i:last-child{transform:translateY(100%)} @media (prefers-reduced-motion:reduce){ .wipe{display:none} } .pf{position:fixed;inset:var(--vbar) 0 0;z-index:400;background:var(--bg); overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s} .pf.open{opacity:1;visibility:visible} /* mientras se empuja: el cursor lo dice y nada se selecciona por accidente */ .pf--mano{cursor:grabbing;user-select:none} .pf--mano *{cursor:grabbing!important} /* El header del sitio es fixed y vive por encima del portafolio, así que el contenido arranca debajo de su alto real, que mide el JS en --hdr. */ .pf__in{padding:calc(var(--hdr-in) + 26px) var(--gut) 12vh} /* Franja opaca bajo el header fijo: el contenido pasa por debajo sin verse detrás del logo. Va aparte de la barra — pegada a ella tapaba el título. */ .pf__veil{position:fixed;left:0;right:0;top:var(--vbar); height:var(--hdr-in);background:var(--bg);z-index:3;pointer-events:none} /* 22 oct: la barra de arriba ya es vidrio, así que la franja opaca sobra —y era lo que dejaba el portafolio en blanco puro mientras la franja de la hora tomaba el color de lo que pasaba debajo (Nico). */ .pf__veil{display:none} /* El estilo colgaba de `.pf h1`. Al pasar los títulos de sección a h2 —que es lo correcto: el h1 de la página es la portada— el selector dejó de alcanzarlo y "Portafolio" quedó con el tamaño por defecto del navegador. Ahora cuelga de la clase, que no depende de la etiqueta. */ .pv__t{font-weight:400;font-size:clamp(2.2rem,8vw,6.4rem);line-height:.9; letter-spacing:-.042em} /* Barra compacta: siempre una línea. Muestra lo que está activo; el resto de las opciones vive detrás de los tres puntos. En mobile la lista completa ocupaba siete filas y se comía la pantalla. */ /* Los filtros, pegados bajo la barra, son del mismo vidrio que ella y a todo el ancho; el borde de abajo no es una línea sino el mismo desvanecido de 22 px de la barra del inicio. Las dos piezas se leen como una sola. */ .pf__fs{position:sticky;top:var(--hdr-in);z-index:4; margin:4vh calc(var(--gut) * -1) 3vh;padding:0 var(--gut); background:rgba(var(--bgc),.72); -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25)} .pf__fs::after{content:"";position:absolute;left:0;right:0;top:100%; height:22px;pointer-events:none; background:linear-gradient(rgba(var(--bgc),.42),rgba(var(--bgc),0)); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); -webkit-mask-image:linear-gradient(#000,transparent); mask-image:linear-gradient(#000,transparent)} .pf__bar{display:flex;align-items:center;gap:8px;padding:12px 0} /* con los filtros pegados debajo, el desvanecido de la barra quedaba encima de ellos como una segunda banda: en el portafolio lo pone la fila de filtros */ body:has(.pf.open) header.site::after{display:none} /* Con los filtros pegados arriba, barra y filtros son UN solo vidrio: dos vidrios separados desenfocan cada uno solo lo que tienen detrás, y en la unión la imagen desenfocada no calzaba (se veía un corte). La capa se enciende recién cuando los filtros se pegan; antes, cada uno el suyo. */ .pf__glass{position:fixed;left:0;right:0;top:var(--vbar);z-index:3;pointer-events:none; height:calc(var(--hdr-in) + var(--fsh,62px));opacity:0; background:rgba(var(--bgc),.72); -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25)} .pf__glass::after{content:"";position:absolute;left:0;right:0;top:100%; height:22px;pointer-events:none; background:linear-gradient(rgba(var(--bgc),.42),rgba(var(--bgc),0)); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); -webkit-mask-image:linear-gradient(#000,transparent); mask-image:linear-gradient(#000,transparent)} .pf.pegado .pf__glass{opacity:1} .pf.pegado .pf__fs{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none} .pf.pegado .pf__fs::after{display:none} body:has(.pf.pegado) header.site::before{opacity:0} .pf__cur{display:inline-flex;align-items:baseline;gap:8px;flex:none; border:1px solid rgba(var(--fgc),.24);border-radius:999px; padding:8px 15px;font-size:.74rem;letter-spacing:var(--tk);font-weight:700; color:rgba(var(--fgc),.55);transition:border-color .35s,color .35s; max-width:46vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .pf__cur:hover{color:var(--fg);border-color:rgba(var(--fgc),.45)} .pf__cur .k{opacity:.5} .pf__cur .v{color:var(--fg)} /* activo = fondo lleno, para que se lea de un vistazo qué está filtrando */ .pf__cur.on{background:var(--fg);border-color:var(--fg);color:var(--bg)} .pf__cur.on .k{opacity:.45} .pf__cur.on .v{color:var(--bg)} /* solo aparece si hay algo que limpiar */ .pf__clear{flex:none;display:inline-flex;align-items:center;gap:7px; padding:8px 14px;border-radius:999px; border:1px solid rgba(var(--fgc),.18); font-size:.74rem;letter-spacing:var(--tk);font-weight:700; color:rgba(var(--fgc),.5);transition:color .3s,border-color .3s} .pf__clear:hover{color:var(--fg);border-color:rgba(var(--fgc),.45)} .pf__clear i{font-style:normal;font-size:.8em;opacity:.7} .pf__count{margin-left:auto;flex:none;font-size:.74rem;letter-spacing:var(--tk); font-weight:700;color:rgba(var(--fgc),.35); font-variant-numeric:tabular-nums} .pf__more{flex:none;display:inline-flex;align-items:center;gap:4px; border:1px solid rgba(var(--fgc),.24);border-radius:999px; padding:11px 14px;transition:border-color .35s,background .35s} .pf__more:hover{border-color:rgba(var(--fgc),.5)} .pf__more i{display:block;width:3px;height:3px;border-radius:50%; background:currentColor;opacity:.65;transition:opacity .3s,transform .35s var(--ease)} .pf__more[aria-expanded=true]{background:rgba(var(--fgc),.10); border-color:rgba(var(--fgc),.45)} .pf__more[aria-expanded=true] i{opacity:1} .pf__more[aria-expanded=true] i:nth-child(1){transform:translateX(3px)} .pf__more[aria-expanded=true] i:nth-child(3){transform:translateX(-3px)} /* Panel desplegable. Va con grid-template-rows 0fr→1fr en vez de max-height: anima al alto real del contenido, sin número mágico que adivinar. */ .pf__panel{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .5s var(--ease),opacity .35s ease} .pf__panel.open{grid-template-rows:1fr;opacity:1} .pf__panel>.inner{overflow:hidden;display:grid;gap:16px; padding:0;transition:padding .5s var(--ease)} .pf__panel.open>.inner{padding:18px 0 22px} .pf__f{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .pf__f>.pf__k{color:rgba(var(--fgc),.34);width:100%;margin-bottom:2px} .pf__f button{border:1px solid rgba(var(--fgc),.24);border-radius:999px; padding:9px 17px;font-size:.74rem;letter-spacing:var(--tk);font-weight:700; color:rgba(var(--fgc),.6);transition:all .35s} .pf__f button:hover{color:var(--fg);border-color:rgba(var(--fgc),.5)} .pf__f button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)} @media (max-width:560px){ .pf__cur{padding:8px 12px;max-width:40vw} .pf__count{display:none} } /* ============ portafolio · las tres vistas ============ Nico tenía razón sobre su sitio actual: entrar por el país es más lindo que entrar por una base de datos. Pero la base también sirve. Así que están las dos, y no compiten: el portafolio entra por lugar —Croacia, Chile, España, Estados Unidos, Argentina— y desde cualquier punto hay una puerta a "todos los videos", que es donde viven los filtros. El bloque de país toma la idea de white-desert: el material ocupa todo, el nombre encima, y nada más que eso. */ .pv{display:none} #pf[data-vista="paises"] #pvPaises, #pf[data-vista="tipos"] #pvTipos, #pf[data-vista="pais"] #pvPais, #pf[data-vista="base"] #pvBase{display:block} /* Fullscreen, como el sitio que Nico ya tiene y que en esto acierta: cada país ocupa la pantalla entera, con el plano a sangre en panorámico. No es una grilla de tarjetas — es una sala por país. La grilla con filtros queda para "todos los videos", que es otra cosa y tiene que verse como otra cosa. */ /* Sin anclaje: el scroll se frenaba en cada país y quedaba pegado ahí. El recorrido tiene que ser continuo; el ritmo lo dan los planos, no un imán. El deslizamiento suave lo pone el JS más abajo. */ #pf[data-vista="paises"] .pf__in,#pf[data-vista="pais"] .pf__in, #pf[data-vista="tipos"] .pf__in{padding:0;max-width:none} .pv__stack{display:block} /* Panorámicos y no a pantalla completa: en el sitio que Nico ya tiene los bloques son anchos y bajos, y esa proporción es la que hace que se lean como planos de cine y no como pantallas sueltas. */ .fs{position:relative;height:clamp(320px,74svh,780px); display:block;width:100%;text-align:left;overflow:hidden;background:var(--void)} .fs__m{position:absolute;inset:0} .fs__m img,.fs__m video{width:100%;height:100%;object-fit:cover; transition:transform 1.6s var(--ease)} /* el reproductor tiene que cubrir, no acomodarse: con 16:9 dentro de una caja de otra proporción, Stream pinta bandas negras */ .fs__m iframe{position:absolute;top:50%;left:50%;border:0; width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh; transform:translate(-50%,-50%);pointer-events:none; opacity:0;animation:accEntra 1.2s var(--ease) .6s forwards} /* Igual que en el inicio: el video entra antes de que el bloque llegue a la pantalla y no depende del foco. Abrirse es recorte y velo, nunca un cambio de foto a video. */ .fs:hover .fs__m img{transform:scale(1.035)} .fs::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%, rgba(0,0,0,0) 52%,rgba(0,0,0,.78) 100%)} /* El nombre va al medio y chico. Antes ocupaba media pantalla abajo a la izquierda y competía con el plano; a esta escala el que habla es el material y el texto solo lo nombra. */ /* Mismo tono que el acordeón del inicio: queda el nombre del país y nada más. El conteo de piezas y el rótulo de arriba se fueron — eran datos que nadie estaba leyendo y le quitaban lugar al plano. */ .fs__in{position:absolute;inset:0;z-index:2;display:grid; place-items:end start;color:var(--page); padding:0 var(--gut) clamp(26px,5vh,58px)} .fs__top{display:none} .fs__n{font-weight:700;letter-spacing:-.03em;line-height:.98; font-size:clamp(1.3rem,2.6vw,2.3rem); text-shadow:0 2px 30px rgba(0,0,0,.4); transform:translateY(26px);opacity:0; transition:transform 1.1s var(--ease),opacity 1.1s var(--ease)} .fs.on .fs__n{transform:none;opacity:1} /* el bloque de un país lleva el nombre a la escala del acordeón */ .fs--pais .fs__n{line-height:.94;letter-spacing:-.04em; font-size:clamp(2.4rem,6.2vw,6rem)} .fs__m2{display:block;color:rgba(247,249,249,.7);margin-top:9px; opacity:0;transform:translateY(10px); transition:opacity 1s var(--ease) .18s,transform 1s var(--ease) .18s} .fs__m2 span+span::before{content:" · "} .fs.on .fs__m2{opacity:1;transform:none} .fs__b{display:none} /* Croacia todavía no tiene material rodado */ .fs--soon{background:var(--sand)} .fs--soon .fs__in{color:var(--ink)} .fs--soon::after{background:none} /* el último bloque no es un país: es la puerta a la base completa */ .fs--db{background:var(--bg);height:auto;min-height:38svh; display:grid;place-items:center;text-align:center} .fs--db::after{display:none} .fs--db .fs__dbn{font-weight:700;letter-spacing:-.035em; font-size:clamp(1.6rem,4.4vw,3.4rem);color:var(--fg)} /* el título de la vista flota sobre el primer plano */ /* debajo del header medido, no de un número escrito a mano */ .pv__h{position:fixed;top:calc(var(--hdr) + 14px);left:var(--gut);z-index:6; color:var(--page);font-weight:700;letter-spacing:-.03em; font-size:clamp(1rem,1.3vw,1.2rem);mix-blend-mode:difference} /* En /lugares el rótulo "Lugares" sobraba encima del primer plano (Nico, 22 oct): queda solo para lectores de pantalla. El de adentro de un país —el botón de volver— sigue a la vista. */ #pvPaises>.pv__h,#pvTipos>.pv__h{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* y el nombre de cada país, al centro de su plano */ .fs--pais .fs__in{place-items:center;text-align:center;padding:0 var(--gut)} .fs--pais .fs__n{text-shadow:0 2px 40px rgba(0,0,0,.45)} /* ---- 22 oct: lugares con el oficio del acordeón del inicio ---- Nico: darle a /lugares "ese toque profesional" de los países de la portada. Los planos ya no van a sangre con borde duro —el manual lo prohíbe—: cada uno es una pantalla redondeada con aire alrededor. La que llega al centro de la ventana se abre: el plano se agranda hasta su borde con el mismo rebote del acordeón (la curva pasa de largo un pelo y vuelve), el velo se levanta y el nombre entra letra por letra desde su ranura. Las demás esperan más chicas y en penumbra. El alto de cada bloque no cambia nunca: lo que se anima es el recorte, así el scroll no salta. Mismo sistema adentro de cada país y en Qué filmamos. */ div.pv__stack{display:flex;flex-direction:column;gap:clamp(8px,1vw,14px); padding:calc(var(--hdr,64px) + clamp(10px,1.6vh,22px)) var(--gut) clamp(18px,3vh,40px)} .fs{background:transparent;overflow:visible;border-radius:var(--r)} .fs::after{display:none} .fs__m{border-radius:var(--r);overflow:hidden;background:var(--void); clip-path:inset(5% 4% round var(--r)); transition:clip-path 1.15s cubic-bezier(.3,1.22,.4,1)} .fs.on .fs__m{clip-path:inset(0 round var(--r))} /* el velo vive adentro del recorte, si no quedaría un rectángulo duro */ .fs__m::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.68)); opacity:.9;transition:opacity .9s var(--ease)} .fs.on .fs__m::after{opacity:.42} .fs:not(.fs--pais) .fs__m::after{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 32%,rgba(0,0,0,0) 50%,rgba(0,0,0,.78) 100%)} .fs:not(.fs--pais).on .fs__m::after{opacity:1} .fs:hover .fs__m img{transform:none} .fs__in{z-index:3;padding:0 calc(var(--gut) + 2%) clamp(26px,5vh,58px)} .fs--pais .fs__in{padding:0 var(--gut)} /* el nombre y su línea de datos juntos, abajo a la izquierda */ .fs:not(.fs--pais) .fs__in{display:flex;flex-direction:column; justify-content:flex-end;align-items:flex-start} /* el nombre del país: las mismas ranuras del acordeón */ .fs--pais .fs__n{transform:none;opacity:1;text-shadow:none;transition:none; font-size:clamp(2.6rem,6.6vw,6.4rem)} .fs .acc__l i{transition:transform .28s cubic-bezier(.5,0,.75,0)} .fs.on .acc__l i{transform:none; transition:transform 1.05s cubic-bezier(.16,1,.3,1) calc(.3s + var(--k) * 34ms)} /* la puerta al archivo: una pantalla de arena, el color de la acción */ .fs--soon .fs__m{background:var(--sand)} .fs--db{background:var(--sand);min-height:30svh;border-radius:var(--r); transition:background-color .4s var(--ease)} .fs--db .fs__dbn{color:var(--ink);transition:transform .5s var(--ease)} .fs--db:hover .fs__dbn{transform:translateX(6px)} /* Adentro de un país, el botón de volver flotaba fijo sobre el primer plano; con las pantallas separadas de la hoja quedaba encima del borde. Ahora es el título de la página, en su lugar, con la cuenta debajo. */ #pvPais .pv__back{position:relative;top:auto;left:auto;z-index:auto;display:flex; margin:calc(var(--hdr,64px) + clamp(16px,2.4vh,30px)) var(--gut) 0;mix-blend-mode:normal; color:var(--fg);font-size:clamp(1.7rem,3.4vw,3rem);letter-spacing:-.035em;line-height:1} #pvPais .pv__back i{font-style:normal;font-weight:400;transition:transform .35s var(--ease)} #pvPais .pv__back:hover i{transform:translateX(-5px)} #pvPaisN{display:block;padding:8px var(--gut) 0;font-size:.78rem;font-weight:700; letter-spacing:var(--tk);color:rgba(var(--fgc),.45)} #pvPaisG{padding-top:clamp(16px,2.4vh,30px)} @media (max-width:700px){ .fs{height:clamp(260px,56svh,560px)} .fs__m{clip-path:inset(4% 3% round var(--r))} .fs--pais .fs__n{font-size:clamp(2.2rem,11vw,3.4rem)} .fs--db{min-height:22svh} } .pv__back{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(14px,2vh,26px); font-size:.78rem;letter-spacing:var(--tk);font-weight:700; color:rgba(var(--fgc),.5);transition:color .3s} .pv__back:hover{color:var(--fg)} .pv__sub{margin-top:8px;color:rgba(var(--fgc),.45)} .pv__db{display:inline-flex;align-items:center;gap:11px; margin:clamp(26px,4vh,52px) 0 clamp(30px,6vh,70px);padding:13px 20px; border:1px solid rgba(var(--fgc),.24);border-radius:999px; font-size:.78rem;letter-spacing:var(--tk);font-weight:700; transition:border-color .35s,background-color .35s,color .35s} .pv__db:hover{border-color:var(--fg);background:var(--fg);color:var(--bg)} .pv__db i{transition:transform .35s var(--ease)} .pv__db:hover i{transform:translateX(4px)} #pvPais .pf__g{margin-top:clamp(18px,2.6vh,32px)} /* ---- el destacado de un tipo (PRUEBA, 22 oct) ---- Al filtrar por un tipo, la pieza que Nico quiere que vean va primero y a lo grande: una pantalla de cine que corre sola, el nombre letra por letra y un óvalo a mano marcando "Destacado" —la anotación del manual—. Debajo, la grilla con todo lo demás. Solo se ve con ?prueba en la dirección hasta que Nico lo apruebe. */ .star{position:relative;height:clamp(340px,68svh,800px); margin:clamp(16px,2.6vh,30px) 0 clamp(30px,5vh,64px);cursor:pointer} .star__m{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;background:var(--void); clip-path:inset(6% 5% round var(--r));transition:clip-path 1.25s cubic-bezier(.3,1.22,.4,1)} .star.on .star__m{clip-path:inset(0 round var(--r))} .star__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .star__m iframe{position:absolute;top:50%;left:50%;border:0;pointer-events:none; width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%); opacity:0;animation:accEntra 1.2s var(--ease) .6s forwards} .star__m::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 48%,rgba(0,0,0,.72) 100%)} .star__in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column; justify-content:space-between;padding:clamp(22px,3.4vw,46px);color:var(--page);pointer-events:none} .star__tag{position:relative;align-self:flex-start;font-size:.78rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;padding:.5em .2em; opacity:0;transition:opacity .8s var(--ease) .5s} .star.on .star__tag{opacity:1} .star__tag svg{position:absolute;left:-14px;top:-9px;overflow:visible;pointer-events:none} .star__tag path{fill:none;stroke:var(--sand);stroke-width:1.6;stroke-linecap:round; stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .9s} .star.on .star__tag path{stroke-dashoffset:0} .star__n{font-weight:700;letter-spacing:-.04em;line-height:.94; font-size:clamp(2.2rem,5.6vw,5.6rem);max-width:16ch} .star .acc__l i{transition:none} .star.on .acc__l i{transform:none; transition:transform 1.05s cubic-bezier(.16,1,.3,1) calc(.45s + var(--k) * 30ms)} .star__pie{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} .star__m2{display:block;margin-top:12px;color:rgba(247,249,249,.75);font-size:.82rem;font-weight:700; letter-spacing:-.01em} .star__m2 span+span::before{content:" · "} .star__ver{pointer-events:auto;display:inline-flex;align-items:center;gap:10px; padding:14px 22px;border-radius:999px;background:var(--sand);color:var(--ink); font-weight:700;letter-spacing:-.02em;font-size:.95rem;transition:transform .4s var(--ease)} .star:hover .star__ver{transform:translateX(4px)} @media (max-width:700px){ .star{height:clamp(300px,62svh,560px)} .star__n{font-size:clamp(2rem,10vw,3.2rem)} } /* ============ portafolio ============ Vuelve la grilla —la cinta escondía cuánto material hay, que es justamente lo que un portafolio tiene que gritar— pero no la de antes. La de antes era la retícula por defecto: todas las piezas del mismo tamaño, en 16:9, con una línea y el título debajo. Eso es un contenedor, no una decisión, y se nota. Tres movimientos, todos con vocabulario que el sitio ya tenía: 1. Formatos mixtos. Las piezas destacadas ocupan dos columnas y van apaisadas; el resto va vertical. La grilla deja de ser una planilla y pasa a tener el ritmo de una doble página. 2. El foco, que es el alma de esta dirección. Al apuntar una pieza, las demás bajan — el mismo gesto que hace la lista de "qué filmamos". 3. La anotación a mano. El "Idea N*0XX" en script, que vivía en el reel, aquí marca cada pieza. Y lo que se fue: la línea divisoria sobre el pie, que era el detalle que más la envejecía. */ /* Columna angosta a propósito: como las destacadas ocupan dos, una retícula ancha dejaba apenas dos piezas por fila y el portafolio parecía tener menos material del que hay. Con la columna más angosta entran seis, las destacadas siguen pesando el doble, y `dense` mete las verticales en los huecos que quedan. */ .pf__g{display:grid;gap:clamp(10px,1.3vw,20px);grid-auto-flow:dense; grid-template-columns:repeat(auto-fill,minmax(min(100%,204px),1fr))} .card{position:relative;display:block;text-align:left;grid-column:span 1; opacity:0;transform:translateY(22px); transition:opacity .62s var(--ease),transform .62s var(--ease)} .card.in{opacity:1;transform:none} /* las piezas que Nico marca como destacadas mandan: doble ancho y apaisadas */ .card--big{grid-column:span 2} /* Los tamaños que se eligen en el panel (22 oct): S normal, M destacada (dos columnas), L panorámica (tres columnas, el alto de una fila) y XL jumbo (dos columnas por dos filas). L y XL no llevan proporción propia: el plano llena el alto que le da la fila, así nunca queda una tarjeta más alta que sus vecinas con una franja vacía abajo. */ .card--l{grid-column:span 3} .card--xl{grid-column:span 2;grid-row:span 2} .card--l,.card--xl{display:flex;flex-direction:column} .card--l .card__s,.card--xl .card__s{flex:1 1 auto;min-height:0;display:flex;flex-direction:column} /* .card.card--l y no .card--l: la regla de .card--big (16:9) va más abajo y con la misma fuerza le ganaba */ .card.card--l .card__m,.card.card--xl .card__m{aspect-ratio:auto;flex:1 1 auto;min-height:120px} /* la foto no empuja el alto: llena el que le da la fila. El mínimo es bajo a propósito: con 15vw, en un monitor ancho la L quedaba más alta que las S y estiraba la fila (Nico, 22 oct). */ .card--l .card__m img,.card--xl .card__m img{position:absolute;inset:0} /* En un teléfono la columna mínima de 204px no entraba dos veces y la grilla caía a una pieza por fila: había que scrollear ochenta pantallas para recorrer el portafolio. Con la columna más angosta entran dos, y la destacada sigue pesando el doble ocupando la fila entera. */ /* En el teléfono los tamaños del computador no mandan (Nico, 22 oct): la grilla es de dos columnas y tiene su propio ritmo. Cada tarjeta trae una clase de celular —la elegida en el panel, o la que arma el ritmo automático— y todo lo demás vuelve a ser una tarjeta común: card--m-s media pantalla, 4:5 (la de siempre) card--m-ancho toda la pantalla, apaisada 16:9 card--m-alto toda la pantalla, vertical 4:5 */ @media (max-width:700px){ .pf__g{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))} .pf__g .card--big,.pf__g .card--l,.pf__g .card--xl{grid-column:span 1;grid-row:auto;display:block} .pf__g .card.card--big .card__m,.pf__g .card.card--l .card__m,.pf__g .card.card--xl .card__m{aspect-ratio:4/5;min-height:0;flex:none} .pf__g .card--l .card__m img,.pf__g .card--xl .card__m img{position:static} .pf__g .card--big .card__t{font-size:.92rem} .pf__g .card--m-ancho,.pf__g .card--m-alto{grid-column:1/-1} .pf__g .card.card--m-ancho .card__m{aspect-ratio:16/9} .pf__g .card.card--m-alto .card__m{aspect-ratio:4/5} .pf__g .card--m-ancho .card__t,.pf__g .card--m-alto .card__t{font-size:1rem} } @media (max-width:380px){ .pf__g{grid-template-columns:repeat(auto-fill,minmax(min(100%,118px),1fr))} } /* Antes, apuntar una apagaba a todas las demás: la grilla entera se lavaba y la página perdía contraste. Ahora el que se apunta es el único que se mueve — se levanta un poco del plano, como si se acercara al que mira, y el resto queda intacto. El eje X del giro sigue al mouse, así que la pieza responde a dónde estás parado sin llegar a ser un truco. */ @media (hover:hover) and (prefers-reduced-motion:no-preference){ /* La perspectiva va en el envoltorio y no en la tarjeta: tiene que estar en el padre directo del plano que gira, y ese padre ahora es .card__s. */ .card__s{perspective:900px} /* --k es la cercanía al cursor, de 0 a 1. Todo lo que sigue es una sola cuenta multiplicada por ella: la pieza apuntada llega al máximo y las vecinas quedan a mitad de camino, sin ningún salto entre una y otra. */ .card__m{ transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(calc(var(--k,0) * 26px)) scale(calc(1 + var(--k,0) * .012)); /* medio segundo era mucho: la grilla contestaba tarde y con el cursor ya inmediato eso se notaba todavía más. A un tercio de segundo el movimiento sigue leyéndose suave y va donde va la mano. */ transition:transform .3s var(--ease); will-change:transform} /* La sombra ya no es box-shadow. Un box-shadow sigue al border-radius, no a un recorte: detrás de un squircle dibujaba un rectángulo. drop-shadow se calcula sobre lo que de verdad quedó pintado, así que sigue la silueta —y la inclinación— exacta. Va en el envoltorio porque un filtro en el mismo plano recortado se lo come el propio recorte: el orden del navegador es filtro y después recorte. Y va solo en las tarjetas cerca del cursor: un filtro en las sesenta y cuatro, aunque esté en cero, son sesenta y cuatro capas. */ .card[data-k]:not([data-k="0"]):not([data-k="0.000"]) .card__s{ filter:drop-shadow(0 calc(var(--k,0) * 16px) calc(var(--k,0) * 18px) rgba(0,0,0,calc(var(--k,0) * .30)))} .card__b{transform:translateY(calc(var(--k,0) * 2px)); transition:transform .3s var(--ease)} } .card__s{position:relative} .card__m{position:relative;aspect-ratio:4/5;border-radius:var(--r); overflow:hidden;background:rgba(var(--fgc),.07)} /* Con el squircle puesto, el borde redondeado se apaga: si quedara, sus esquinas circulares recortarían por dentro de la curva del squircle y se perdería justamente la forma. El border-radius queda solo como respaldo para el instante antes de que el JS mida la tarjeta. */ .card__m.sq{border-radius:0} .card--big .card__m{aspect-ratio:16/9} /* Hubo una línea de duración pegada al borde de abajo de cada video: llenaba una parte del ancho según cuánto duraba la pieza contra la más larga de la grilla, y se ponía arena al verla. Se sacó en octubre de 2026: Nico no la entendía —y si quien la aprobó no la lee, un visitante tampoco— y la duración ya está escrita en el pie. Lo de "ya visto" sigue, en el título, que baja de tono como un enlace visitado. */ .card{--k:0} .card.visto .card__t{color:rgba(var(--fgc),.52)} .card.visto .card__m img{opacity:.9} .card__m img,.card__m video{width:100%;height:100%;object-fit:cover; transition:transform 1.1s var(--ease),opacity .5s} .card:hover .card__m img{transform:scale(1.04)} .card__m video{position:absolute;inset:0;opacity:0} /* El reproductor cubre la caja sea cual sea su forma: en una panorámica (L) o un jumbo (XL) el 16:9 quedaba más chico que la tarjeta, con negro a los lados (Nico, 22 oct). Con unidades de contenedor se calcula contra el ancho y el alto reales de la caja: el lado que falte, se estira. */ .card__m{container-type:size} .card__m iframe{position:absolute;top:50%;left:50%;border:0; width:max(100cqw, 177.78cqh);height:max(100cqh, 56.25cqw); transform:translate(-50%,-50%);opacity:0;pointer-events:none; transition:opacity .4s var(--e)} .card.play .card__m video,.card.play .card__m iframe{opacity:1} /* La anotación "Idea N*0XX" se fue: era un número que Nico no lleva. Con cientos de videos, numerar las ideas no significaba nada. */ .card__soon{position:absolute;inset:0;display:grid;place-items:center; align-content:center;gap:10px;padding:20px;text-align:center; border:1px dashed rgba(var(--fgc),.22);border-radius:var(--r)} .card__soon .t{font-family:var(--serif);font-style:italic; font-size:clamp(1.1rem,2.4vw,1.7rem);letter-spacing:-.02em; color:rgba(var(--fgc),.75)} /* sin línea divisoria y sin caja: el pie cuelga de la pieza */ /* El pie mide siempre lo mismo, tenga la pieza cliente y tipo o no tenga nada. Una que llega sin datos dejaba su bloque más corto y la fila entera se leía desalineada — el defecto que salta en la primera pieza cuando no tiene ni cliente ni categoría. Dos renglones reservados para el nombre y uno para la metadata, siempre. */ .card__b{display:grid;gap:2px;padding:11px 2px 0; grid-template-rows:auto auto;align-content:start} .card__t{font-size:.92rem;letter-spacing:-.015em;line-height:1.15; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-height:calc(2 * 1.15em)} .card--big .card__t{font-size:1.05rem} /* la panorámica comparte fila con las S: mismo pie, mismo alto de foto */ .card.card--l .card__t{font-size:.92rem} .card__c{min-height:1.3em; font-size:.68rem;letter-spacing:var(--tk);font-weight:700; color:rgba(var(--fgc),.44);font-variant-numeric:tabular-nums} /* El cartel de la pieza sin video: sobre la imagen, en arena, sin tapar el plano. No es un error —es una pieza que existe y todavía no se puede ver— así que no va en rojo ni con cruz. */ /* En la esquina, como estaba: con el radio de 24px la curva a esa altura está a menos de dos píxeles del borde y el cartel entra entero. */ .card__pend{position:absolute;left:10px;top:10px;z-index:2;white-space:nowrap; padding:5px 10px;border-radius:999px; background:var(--sand);color:var(--ink); font-weight:700;letter-spacing:var(--tk)} .pf__empty{padding:8vh 0;color:rgba(var(--fgc),.45);font-size:.9rem} /* la cruz del portafolio ocupa el mismo lugar que el botón de menú: mientras el portafolio está abierto, el de abajo se apaga */ /* El portafolio es una página por derecho propio, no un pop-up del inicio: no lleva botón de cerrar. Se navega con el menú, igual que todo lo demás. */ /* visor: ver la pieza completa sin salir del portafolio */ .lb{position:fixed;inset:var(--vbar) 0 0;z-index:700;background:rgba(var(--bgc),.94); display:grid;align-content:center;gap:18px;padding:6vh clamp(16px,6vw,90px); opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s} .lb.open{opacity:1;visibility:visible} /* El desenfoque va sobre main y sobre el portafolio, nunca sobre un contenedor que tenga sticky adentro mientras se lo está usando: un filtro sobre un ancestro rompe position:sticky. Acá no molesta porque con el visor abierto no se scrollea nada de lo que está atrás. */ body.teatro main,body.teatro #pf{ filter:blur(9px) saturate(.9);transform:scale(.985); transition:filter .55s var(--ease),transform .55s var(--ease)} main,#pf{transition:filter .45s var(--ease),transform .45s var(--ease)} body.teatro .kc{opacity:0;pointer-events:none} @media (prefers-reduced-motion:reduce){ body.teatro main,body.teatro #pf{filter:none;transform:none} } /* En un teléfono no: desenfocar la página entera mientras se reproduce un video es de las cosas más caras que se le pueden pedir, y ahí el visor ya ocupa el ancho completo — no hay nada atrás que estorbe. */ @media (max-width:700px){ body.teatro main,body.teatro #pf{filter:none;transform:none} } /* El marco toma la forma del video: un vertical dentro de una caja 16:9 quedaba con dos franjas negras enormes a los lados. La altura manda y el ancho sale de la proporción, así un vertical se ve alto y angosto y un apaisado sigue ocupando todo el ancho. */ .lb__v{display:grid;place-items:center;min-height:0} .lb video,.lb iframe{display:block;border:0;border-radius:var(--r); background:var(--void);object-fit:contain; aspect-ratio:var(--lb-ar,16/9); height:min(74svh, calc(100vw - 2 * clamp(16px,6vw,90px)) / (var(--lb-arn,1.7778))); width:auto;max-width:100%} .lb [hidden]{display:none} .lb__b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline} /* Helvetica: el Editorial se reserva para palabras especiales, no para cualquier título */ .lb__t{font-size:clamp(1rem,2.2vw,1.5rem);letter-spacing:-.015em} /* 22 oct (Nico): el visor va siempre a oscuras —también de día— y deja ver el portafolio detrás, apagado. Tocar en cualquier parte fuera del video lo cierra; las flechas pasan al anterior y al siguiente de la misma lista, y cada video tiene su dirección para compartirlo. */ .lb{background:rgba(8,8,9,.8);color:#F7F9F9} body.teatro main,body.teatro #pf{filter:blur(4px) saturate(.85)} .lb .lbl{color:rgba(247,249,249,.72)} .lb .lbl:hover{color:#F7F9F9} .lb__b{width:min(100%, calc(min(74svh, calc(100vw - 2 * clamp(16px,6vw,90px)) / (var(--lb-arn,1.7778))) * var(--lb-arn,1.7778))); justify-self:center} .lb__acc{display:inline-flex;gap:22px;align-items:baseline} .lb__fl{position:absolute;top:50%;z-index:2;width:clamp(44px,4.4vw,60px);aspect-ratio:1; border-radius:50%;display:grid;place-items:center;color:#F7F9F9; background:rgba(247,249,249,.1);transform:translateY(-50%); font-size:1.25rem;transition:background-color .3s var(--ease),transform .3s var(--ease)} .lb__fl i{font-style:normal} .lb__fl:hover{background:rgba(247,249,249,.2)} .lb__fl--a{left:clamp(10px,2vw,30px)} .lb__fl--b{right:clamp(10px,2vw,30px)} .lb__fl--a:hover{transform:translate(-3px,-50%)} .lb__fl--b:hover{transform:translate(3px,-50%)} .lb__fl[hidden]{display:none} @media (max-width:700px){ .lb__fl{top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:none;width:48px} .lb__fl--a:hover,.lb__fl--b:hover{transform:none} } /* ============ el inicio en un teléfono ============ Las alturas del inicio están pensadas para una pantalla apaisada: en vertical, 14vh arriba y 16vh abajo se suman a una pantalla entera de nada entre una sección y la siguiente. Se compactan sin tocar el ritmo del escritorio. */ @media (max-width:700px){ .scl{padding:10vh var(--gut) 12vh} .cl{padding:9vh 0} .cl__rows{margin-top:0} .ab{padding:var(--media) var(--gut)} .say{padding:var(--media) 0;gap:2.4vh} .close{padding:var(--media) var(--gut);gap:3.4vh} .end{min-height:0;padding:var(--aire) var(--gut) 0} .end--pf{margin:5vh calc(var(--gut) * -1) -12vh;padding-top:9vh} /* el acordeón vertical ya no necesita una pantalla por país */ .acc__p{height:30svh} } /* ═══════════════ EL SITIO EN UN TELÉFONO ═══════════════ Casi todo lo que hace linda a esta página en un monitor —el foco que recorre una lista mientras uno baja, las frases que se cruzan de costado, los planos que corren de fondo— está calculado contra una ventana apaisada y con un mouse encima. En un teléfono esas mismas ideas se vuelven en contra: el texto queda desenfocado sin que nada lo enfoque, las frases se van de la pantalla, y media docena de reproductores compiten por un procesador que no da abasto. Lo que sigue no apaga el diseño: lo traduce. */ @media (max-width:700px){ :root{--aire:15vh} /* La barra opaca vale igual acá: más baja, respetando la muesca. */ header.site{min-height:52px; padding:calc(10px + env(safe-area-inset-top)) var(--gut) 10px} .mark svg{height:19px;width:auto} /* ── 02 · qué filmamos ── El desenfoque necesita una ventana alta para tener sentido: acá las siete palabras entran juntas y el efecto solo lograba que ninguna se leyera. Se quedan grandes y nítidas, y entran escalonadas. */ /* La sección tiene que medir más que la ventana o la lista nunca llega a cruzar la línea de foco: el recorrido del efecto es exactamente el alto de la lista, porque la scrollea la página. Con siete palabras a ~62px la lista mide unos 430, y el aire de arriba y abajo lleva la sección a poco más de una pantalla y media, que es lo que hace falta para que cada palabra tenga su turno. */ /* El recorrido del efecto es el alto de la lista, así que la sección tiene que medir una ventana MÁS la lista: si no, el foco arranca ya pasada la primera palabra y se agota antes de llegar a la última —con 34vh de aire barría solo de la segunda a la sexta. El aire de arriba deja la primera palabra justo en la línea de foco cuando la sección entra, y el de abajo deja la última cuando termina de salir. */ .scl{padding:var(--media) var(--gut);gap:0} /* Más grandes y más juntas: con 1.42 de interlínea las palabras flotaban sueltas y la lista se leía como un menú. A 1.14 vuelven a ser un bloque, que es lo que hace que el foco recorriéndolas signifique algo. */ .scl__list li{font-size:clamp(2.6rem,13.5vw,4.1rem);letter-spacing:-.05em; line-height:1.14;padding-bottom:0; transform-origin:0 50%; will-change:opacity,filter,transform} /* ── 03 · clientes ── Tres tiras cortadas al medio en una pantalla de 375px: se veían medias marcas y ninguna entera. Dos tiras, logos más grandes, y los bordes se desvanecen en vez de cortar — lo que sale de cuadro se va, no se parte. */ .cl{padding:var(--media) 0} .cl__lab{margin-bottom:1vh} /* Tres columnas: es el ancho justo para que el logo más apaisado del set —Balearic, 8.7:1— siga siendo legible, y para que ninguna fila quede coja. Cada celda tiene el mismo alto, así que la línea de base es una sola aunque las marcas sean de proporciones muy distintas. */ /* la rueda de logos: los logos se ubican desde el JS (aroPintar) */ .cl__rows--anillo{position:relative;display:block;height:76vw;margin:0;overflow:hidden} .cl__rows--anillo .cl__c{position:absolute;left:50%;top:50%;width:28vw;height:10vw; margin:-5vw 0 0 -14vw;padding:0;will-change:transform,opacity} .cl__rows--anillo .cl__c img{width:100%;height:100%;object-fit:contain;opacity:1} .cl__rows--grilla{display:grid;gap:6px 2px;margin-top:0; grid-template-columns:repeat(3,1fr);width:100%; padding:0 var(--gut)} /* min-width:0 no es un detalle: una celda de grilla mide por defecto lo que mide su contenido, así que un logo apaisado empujaba su columna a 153px y las tres juntas se iban 120px fuera de la pantalla. Ocho de los veinticuatro quedaban cortados —el defecto original, ahora en grilla—. Con esto la columna manda y el logo se acomoda adentro. */ /* Sin transición: la opacidad y el corrimiento los escribe el scroll cuadro a cuadro, y una transición encima solo agregaría retraso entre lo que hace el dedo y lo que hace la pantalla. */ /* Sin will-change: son veinticuatro celdas, y pedirle al navegador que reserve una capa para cada una es más memoria de video de la que ahorra. Escribir opacity y transform ya las compone sin promoverlas de antemano. */ .cl__rows--grilla .cl__c{min-width:0;height:54px;padding:0 5px; flex:none;width:auto;opacity:0} .cl__rows--grilla.in .cl__c{opacity:1;transform:none} /* todos los archivos vienen en un lienzo idéntico de 660×236 con la marca ya centrada y normalizada por masa de tinta, así que `contain` dentro de una celda igual los deja alineados y con el mismo peso, sin ajustes */ .cl__rows--grilla .cl__c img{width:100%;height:100%;max-width:100%; object-fit:contain;opacity:.72} .cl__rows--grilla .cl__c:active img{opacity:1} /* ── 04 · dónde filmamos ── El mismo acordeón del escritorio, girado. En un monitor los paneles se reparten el ancho y el abierto se lleva la mayor parte; acá se reparten el alto y pasa lo mismo. El pin vuelve —la sección mide más que la ventana y el bloque se queda quieto mientras el scroll avanza el índice—, así que bajando se van abriendo uno tras otro sin tocar nada. Antes era una pila de cinco recortes fijos: se veían los cinco países y no pasaba nada. Es la sección que más se parecía a un catálogo. Sin reproductores igual: cinco iframes autoplay en un teléfono es lo que hacía que el scroll se sintiera pegajoso. Quedan los fotogramas, que ya se piden en alta y entran al instante. */ /* 22 oct: tampoco se clava en el teléfono. Los países van apilados como pantallas redondeadas y se abren mientras la sección pasa, con el mismo rebote; siempre hay uno abierto, así que la sección no cambia de alto. */ .acc{height:auto} .acc__pin{position:relative;top:auto;height:auto;overflow:visible;padding:0 var(--gut)} .acc__row{flex-direction:column;height:auto;gap:8px} .acc__p{flex:none;height:12svh;min-height:0; transition:height 1.05s cubic-bezier(.3,1.2,.4,1)} .acc__p.on{height:50svh} .acc__f{left:0;width:100%;margin-left:0} .acc__f iframe{display:none} .acc__p img{opacity:.82} .acc__p.on img{opacity:1} /* el nombre siempre horizontal; crece con el panel, con el mismo rebote */ .acc__p .acc__n{place-items:center;padding:0 var(--gut); font-size:clamp(2.2rem,11vw,3.4rem);letter-spacing:-.055em} /* .acc__n>.acc__v y no .acc__v: la regla general .acc__n>span{display:block} es más específica y lo volvía a mostrar, y en el teléfono se veían los dos nombres encimados (Nico, 22 oct) */ .acc__n>.acc__v{display:none} .acc__p .acc__h{opacity:.95;transform:scale(.42); transition:transform 1.05s cubic-bezier(.3,1.1,.4,1)} .acc__p.on .acc__h{transform:none;transition:transform 1.05s cubic-bezier(.3,1.1,.4,1)} .acc__l i,.acc__p.on .acc__l i{transform:none;transition:none} .acc__p+.acc__p::before{display:none} /* ── la tarjeta de KaiContent ── En un monitor asoma por el costado a media altura y no molesta a nadie. En 375px queda justo encima de la bajada de la portada y le come dos renglones. Se va abajo a la derecha, arriba de la flecha, donde sigue viéndose y no tapa nada. */ .kc{top:auto;bottom:calc(13vh + env(safe-area-inset-bottom)); transform:translate(0,0)} .kc:hover{transform:translate(0,0)} .kc--off{transform:translate(22px,0)} /* ── la portada ── La bajada se va. En un monitor acompaña a la frase; en 375px son tres renglones de cuerpo chico debajo de un título que ya dice lo que hay que decir, y lo único que hacen es achicar la frase para dejarles lugar. Lo que gana la portada al sacarlos es escala: "Love for ideas" pasa de 43 a 75 píxeles, que es la diferencia entre una frase puesta sobre un video y una portada. El texto no se pierde — sigue en el código para lectores de pantalla y buscadores, solo no se dibuja. */ .ov__sub{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} /* El tamaño de la portada lo fija `.ov h1`, que es más específico que `.huge`: sin apuntarle a él, la frase se quedaba en los 24px que salen de su tope de 13vh. El tope sigue existiendo —una frase que se coma la pantalla alta deja el video sin aire— pero en vertical hay lugar de sobra, así que sube a 22vh. */ .ov h1.huge{font-size:min(clamp(2.2rem,12vw,3.6rem),16vh); line-height:.88;letter-spacing:-.05em} .ov__c{gap:0} /* ── el visor ── Un apaisado en una pantalla vertical no puede ser más ancho que la pantalla, así que cada píxel de margen es píxel de video que se pierde. El marco va de lado a lado —con sus esquinas, que eso no se negocia— y el título y el cerrar quedan con su propio aire. */ .lb{padding:6vh 0 calc(4vh + env(safe-area-inset-bottom));gap:14px} .lb video,.lb iframe{ height:min(72svh, 100vw / var(--lb-arn,1.7778))} .lb__b{padding:0 var(--gut)} /* ── el portafolio ── El pie de cada pieza usaba el cuerpo del escritorio: con nombres como "Casa Santa Ponsa LIÓ 2 BP.mp4 · Balearic Properties" el título se comía tres renglones, empujaba la metadata fuera de la tarjeta y dejaba las filas desparejas. Va más chico y cortado a dos renglones, así todas las tarjetas miden lo mismo y la grilla se lee como grilla. */ .card__b{padding:8px 2px 0;gap:1px} .card__t{font-size:.76rem;line-height:1.24;min-height:calc(2 * 1.24em)} .card--big .card__t{font-size:.82rem} .card__c{font-size:.55rem} /* la barra de filtros se desliza de costado en vez de cortar el último chip contra el borde */ .pf__bar{overflow-x:auto;scrollbar-width:none; padding-right:var(--gut);margin-right:calc(var(--gut) * -1)} .pf__bar::-webkit-scrollbar{display:none} .pf__cur{flex:none} .pf__in{padding-left:var(--gut);padding-right:var(--gut)} /* el cierre del portafolio no necesita el aire de un monitor */ .end--pf{margin:4vh calc(var(--gut) * -1) -12vh;padding-top:8vh} /* ── 06 · la diferencia ── Las tres frases se corren de costado en unidades de ventana. En un monitor eso las hace converger; en 375px las manda fuera de cuadro y corta las palabras. Acá se quedan quietas y alineadas a la izquierda. */ .say{text-align:left} .say__l{transform:none!important;display:block} /* ── el cierre ── Tampoco lleva plano de fondo: es un video desenfocado que nadie mira y que en un teléfono se paga caro. */ .end__v iframe{display:none} .end__cols{gap:22px} } /* En una tableta el diseño de escritorio ya entra, pero el aire sigue siendo el de un monitor grande. */ @media (min-width:701px) and (max-width:1024px){ .ab{padding:var(--media) var(--gut)} } /* ══ los rótulos de sección ══ "Qué filmamos", "Confían en nosotros", "Dónde filmamos", "La diferencia", "Contacto". Eran seis etiquetas chicas y grises anunciando cada tramo, y ninguna hacía falta: la lista de palabras ya dice qué se filma, una fila de logos ya dice que son clientes, y un mail enorme al final ya dice que es el contacto. Nombrar lo que se está viendo es lo que hace ver barata una página que por lo demás confía en el material. Queda el de Nosotros, porque ahí sí abre un bloque de texto que sin él empieza en el aire. No se borran del código: siguen en el HTML para lectores de pantalla y para los buscadores, que usan esos rótulos para entender la estructura. Se dejan de dibujar, que es distinto de no existir. Va acá abajo, después de todo, porque .acc__lab y .scl__lab declaran su propia posición y con la misma especificidad gana el último. */ .sec{position:absolute;width:1px;height:1px;padding:0;margin:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap} .ab .sec{position:static;width:auto;height:auto;overflow:visible; clip-path:none;white-space:normal} /* "Qué filmamos" sí se ve, chico y de lado a la izquierda de la lista (Nico, 22 oct): vertical no empuja las palabras grandes y queda como un rótulo de canto. Clavado a la mitad de la ventana mientras la lista pasa. En el teléfono sigue escondido: ahí la lista ocupa todo el ancho. */ @media (min-width:761px){ /* Va con la línea de foco entre la primera y la última palabra: arranca a la altura de la primera, acompaña a la que está en foco y termina con la última (Nico, 22 oct: antes quedaba más arriba). Lo ubica el JS. */ .scl h2.scl__lab{position:relative;top:0;width:auto;height:auto;overflow:visible; clip-path:none;white-space:nowrap;align-self:flex-start;will-change:transform; writing-mode:vertical-rl;transform:rotate(180deg); padding:0;margin-top:0;font-size:.74rem;font-weight:700;letter-spacing:-.01em; color:rgba(var(--fgc),.5)} /* el rótulo de canto necesita poco aire: la lista se corre lo justo */ /* aire suficiente para que el óvalo de la palabra no choque con el rótulo (Nico, 22 oct) */ .scl{gap:clamp(48px,7.5vw,128px)} } /* ═══ contraste y blancos de clic ═══ La auditoría midió texto de 1,89:1 y botones de 7×7 px. El mínimo de la norma es 4,5:1 para texto chico y 24×24 px de área tocable (WCAG 2.2, criterios 1.4.3 y 2.5.8). Nada de esto cambia el diseño: son valores. El área tocable no es el dibujo: un punto de 7px puede seguir midiendo 7px y tener 24 de zona sensible alrededor. Eso se hace con un ::after invisible, no agrandando el punto. */ .rail button{position:relative} .rail button::after{content:"";position:absolute;left:50%;top:50%; width:24px;height:24px;transform:translate(-50%,-50%)} .skin{position:relative} .skin::after{content:"";position:absolute;left:50%;top:50%; width:24px;height:24px;transform:translate(-50%,-50%)} .burger{position:relative;padding:9px 0} .burger::after{content:"";position:absolute;left:50%;top:50%; width:24px;height:26px;transform:translate(-50%,-50%)} #lbX{position:relative;padding:7px 2px} #lbX::after{content:"";position:absolute;inset:-6px -4px} /* Los grises que quedaban casi del color de la hoja. Cada uno sube hasta pasar 4,5:1 sobre #F7F9F9 sin cambiar de familia. */ .pf__k{color:rgba(var(--fgc),.72)} .pf__count{color:rgba(var(--fgc),.66)} .card__c{color:rgba(var(--fgc),.62)} .lbl.dim,.dim{color:rgba(var(--fgc),.62)} .ab__paises span{color:rgba(var(--fgc),.66)} .end__in .lbl{color:rgba(247,249,249,.72)} .pf__f button{color:rgba(var(--fgc),.72)} .fs__m2{color:rgba(247,249,249,.82)} @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}