/* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #060606; --page: #0e0d0c; --page-2: #080807; --cream: #f2ece1; --cream-dim: #b8b1a6; --white: #ffffff; --muted: #837d73; --line: rgba(242, 236, 225, 0.14); --accent: #c9a27f; --transition:0.35s cubic-bezier(0.4, 0, 0.2, 1); --zoom: 1.45s cubic-bezier(0.3, 0.8, 0.18, 1); /* cámara mesa ↔ lectura */ /* La revista mantiene SIEMPRE la proporción 1240:760 (≈1.63:1): el ancho se limita también por el alto disponible (88vh × proporción), así en pantallas bajas se achica entera en vez de quedar alargada. Lo usan flechas y escenario. */ --stage-w: min(94vw, 1240px, calc(88vh * (1240 / 760))); --book-scale: 0.75; /* tamaño en modo lectura (como un zoom de navegador al 75%) */ } /* dvh: alto real del viewport en celular (100vh clásico no descuenta la barra de URL, y al mostrarse/ocultarse la barra el layout saltaba o quedaba roto). */ @supports (height: 100dvh) { :root { --stage-w: min(94vw, 1240px, calc(88dvh * (1240 / 760))); } } /* La escena vive en un solo viewport: nada debe generar scroll (la hoja que gira sobresale del libro a propósito y no tiene que disparar scrollbars). */ html { scroll-behavior: smooth; overflow: hidden; /* En celular: sin pull-to-refresh (recargaba la página al arrastrar hacia abajo) y sin zoom por doble tap / pinch, que rompían la escena fija. */ overscroll-behavior: none; touch-action: pan-x pan-y; /* iPhone pinta el fondo de en las franjas del notch / home indicator y en el rebote del scroll: sin esto aparecían bordes blancos. */ background: #0a0706; } body { font-family: 'Archivo', sans-serif; /* Mesa: luz cálida arriba, tablones sutiles y base de madera muy oscura */ background: radial-gradient(85% 60% at 50% 8%, rgba(224, 186, 134, 0.12), transparent 60%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 146px, rgba(0, 0, 0, 0.35) 146px, rgba(0, 0, 0, 0.35) 149px), linear-gradient(115deg, #191310 0%, #120d0a 48%, #0a0706 100%); color: var(--cream); min-height: 100vh; min-height: 100dvh; /* sigue a la barra de URL del celular sin saltos */ overflow: hidden; overscroll-behavior: none; touch-action: pan-x pan-y; } /* Grano de la superficie */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); /* Sin mix-blend-mode: mezclar todo el viewport en cada frame trababa las animaciones. */ opacity: 0.07; } /* Viñeta cinematográfica sobre la mesa */ body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(125% 105% at 50% 40%, transparent 52%, rgba(0, 0, 0, 0.6) 100%); } .display { font-family: 'Anton', 'Archivo', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.9; } /* Etiqueta pequeña reutilizable */ .kicker { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); } .accent { color: var(--accent); } /* ════════════════════════════════════════════════════════════ REVISTA / PÁGINA ÚNICA ════════════════════════════════════════════════════════════ */ .mag { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 26px 16px; } /* ── Cámara: la revista descansa en la mesa y al hacer click se acerca ── */ .book { position: relative; transform: perspective(2400px) rotateX(0deg) rotateZ(0deg) scale(var(--book-scale)) translateY(0%); transition: transform var(--zoom); } body.is-table .book { transform: perspective(2400px) rotateX(30deg) rotateZ(-7.5deg) scale(0.45) translateY(3%); cursor: zoom-in; } /* En la mesa, la revista entera es un solo botón: acercarse. */ body.is-table .book * { pointer-events: none; } /* Con una hoja en el aire las páginas no reciben clicks: un click a mitad de giro caía en la hoja vieja y abría su galería. */ .book.is-flipping .page { pointer-events: none; } .mag__hint { position: absolute; bottom: 6vh; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream-dim); opacity: 0; pointer-events: none; transition: opacity 0.6s ease 0.3s; white-space: nowrap; } body.is-table .mag__hint { opacity: 1; animation: pulseHint 2.8s ease infinite; } .zoomout { position: fixed; top: 14px; right: 16px; z-index: 750; background: rgba(18,16,14,0.62); border: 1px solid var(--line); color: var(--cream); border-radius: 100px; padding: 10px 18px; font-family: 'Archivo', sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background var(--transition), color var(--transition); } .zoomout:hover { background: var(--accent); color: #111; } .zoomout[hidden] { display: none; } body.is-table .ctrl, body.is-table .topnav, body.is-table .zoomout { display: none; } .book__stage { position: relative; width: var(--stage-w); aspect-ratio: 1240 / 760; perspective: 2000px; border-radius: 8px; /* Sólo el canto de hojas apiladas (sólido, sin blur): las sombras blandas viven en pseudo-elementos del .book y se cruzan por opacidad — transicionar box-shadow repintaba una sombra difusa gigante en cada frame. */ box-shadow: 2px 0 0 #050505, 5px 0 0 #0c0b0a, 8px 0 0 #050505, 11px 0 0 #0c0b0a; } .book::before, .book::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 8px; pointer-events: none; transition: opacity var(--zoom); } /* Sombra de lectura (revista frente a cámara) */ .book::before { box-shadow: 0 50px 90px rgba(0,0,0,0.7); opacity: 1; } /* Sombra de contacto contra la mesa */ .book::after { box-shadow: 0 22px 26px -12px rgba(0,0,0,0.6), 0 70px 110px rgba(0,0,0,0.55); opacity: 0; } body.is-table .book::before { opacity: 0; } body.is-table .book::after { opacity: 1; } /* ── Hoja ── */ .page { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; border-radius: 8px; /* El giro lo anima el JS (Web Animations API) para poder combar la hoja, levantarla y desvanecerla; will-change sólo en la hoja que gira. */ } .page.is-flipped { transform: rotateY(-180deg); visibility: hidden; /* al reposar quedan fuera de vista (ya no hay overflow que las recorte) */ } .page__front, .page__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: inherit; } .page__front { display: flex; box-shadow: inset 30px 0 60px -42px rgba(0,0,0,0.95); } /* Sombra dinámica que barre la página al girar: simula el papel doblándose y tomando luz (la opacidad la anima el JS en cada pase). */ .page__shade { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: linear-gradient(105deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.14) 26%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.05) 60%, rgba(0,0,0,0.32) 100%); } .page__back { transform: rotateY(180deg); background: radial-gradient(60% 50% at 50% 45%, #131210 0%, var(--page-2) 75%); } .page__back::after { content: 'MLP'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; font-size: 54px; letter-spacing: 0.12em; color: rgba(242,236,225,0.045); } /* Base de cada página */ .pg { position: relative; flex: 1; background: var(--page); color: var(--cream); overflow: hidden; } .pg__bar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 22px clamp(24px, 4vw, 48px); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); z-index: 4; } .pg__hint { position: absolute; bottom: 28px; right: clamp(24px, 4vw, 48px); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-dim); animation: pulseHint 2.6s ease infinite; } .pg__foot { position: absolute; bottom: 26px; left: clamp(24px, 4vw, 48px); font-size: 10px; letter-spacing: 0.12em; color: var(--muted); } /* ── PORTADA ── */ .pg--cover { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 7vw, 84px); cursor: pointer; background-image: linear-gradient(100deg, rgba(6,6,6,0.92) 0%, rgba(6,6,6,0.6) 42%, rgba(6,6,6,0.32) 100%), url('cover.jpg'); background-size: cover; background-position: center; } .cover-title { font-size: clamp(72px, 15vw, 220px); line-height: 0.8; color: var(--cream); } .cover-by { margin-top: clamp(22px, 4vw, 40px); display: flex; flex-direction: column; gap: 6px; } .cover-by__name { font-size: clamp(30px, 5.2vw, 66px); font-weight: 800; line-height: 1.0; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--accent); /* naranjita */ } .cover-by__role { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream-dim); /* blanquito-grisecito */ } /* ── ÍNDICE ── */ /* container-type: size → los tamaños de abajo van en `cqw` (1cqw = 1% del ancho de la página) y el padding en %, así todo escala en proporción a la página. Antes, con clamps en `vw` y pisos en px, al achicar el escenario (zoom o pantallas chicas) el contenido quedaba más alto que la página y se recortaba arriba y abajo. */ .pg--toc { container-type: size; display: flex; flex-direction: column; justify-content: center; /* Menos padding vertical que horizontal: el índice (título + 7 ítems) llenaba casi toda la altura y así entra con margen a cualquier tamaño. */ padding: 4.5% 6.5%; } .toc-title { font-size: 9.65cqw; color: var(--cream); margin-bottom: 3.34cqw; } .toc2 { list-style: none; } .toc2__item { display: flex; align-items: baseline; gap: 1.85cqw; padding: 1.67cqw 0; border-top: 1px solid var(--line); cursor: pointer; transition: padding-left var(--transition), color var(--transition); } .toc2__item:last-child { border-bottom: 1px solid var(--line); } .toc2__item:hover { padding-left: 12px; color: var(--white); } .toc2__item:hover .toc2__n { color: var(--accent); } .toc2__n { font-size: 1.11cqw; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); width: 2.6cqw; flex-shrink: 0; } .toc2__label { font-size: 3.15cqw; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; } .toc2__line { flex: 1; border-bottom: 1px dotted rgba(242,236,225,0.2); transform: translateY(-5px); } /* ── SOBRE MÍ ── */ .pg--about { display: flex; } .about__bg { position: absolute; inset: 0; background-size: cover; background-position: 10% center; filter: grayscale(0.4) contrast(1.05) brightness(0.5); } .about__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,8,7,0.96) 30%, rgba(8,8,7,0.55) 100%); } .about__inner { position: relative; z-index: 2; align-self: center; max-width: 640px; padding: clamp(40px, 7vw, 90px); } .about__inner .kicker { margin-bottom: 18px; } .about-title { font-size: clamp(40px, 7.5vw, 94px); color: var(--cream); margin-bottom: 26px; } .about__bio { font-size: clamp(14px, 1.5vw, 16px); line-height: 1.7; color: var(--cream-dim); max-width: 48ch; } .about__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .about__tags li { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px; } /* ── DIVISOR DE SECCIÓN ── */ .pg--divider { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 7vw, 88px); background: radial-gradient(80% 70% at 15% 25%, color-mix(in srgb, var(--accent) 12%, #0c0b0a) 0%, #0a0908 70%); } .divider__num { font-size: clamp(120px, 26vw, 360px); line-height: 0.7; color: transparent; -webkit-text-stroke: 1.5px rgba(242,236,225,0.18); position: absolute; top: clamp(10px, 2vw, 30px); right: clamp(16px, 3vw, 48px); pointer-events: none; } .divider__main { position: relative; z-index: 2; max-width: 70%; } .divider__main .kicker { margin-bottom: 16px; } .divider__title { font-size: clamp(42px, 8.5vw, 120px); color: var(--cream); margin-bottom: 20px; } .divider__desc { font-size: clamp(14px, 1.5vw, 17px); line-height: 1.65; color: var(--cream-dim); max-width: 42ch; } .divider__thumbs { position: absolute; bottom: clamp(28px, 4vw, 54px); right: clamp(28px, 4vw, 54px); display: flex; gap: 10px; z-index: 2; } .divider__thumb { width: clamp(56px, 9vw, 104px); aspect-ratio: 3 / 4; background-size: cover; background-position: center; border-radius: 3px; filter: grayscale(0.2); } /* ════════════════════════════════════════════════════════════ PÁGINAS DE TRABAJO (variantes) ════════════════════════════════════════════════════════════ */ /* Sólo la imagen/preview, el collage y el CTA abren la galería. */ .pg--work { cursor: default; } .pg--work .work-bg, .pg--work .work-img, .pg--work .collage__cell, .pg--work .media-play, .pg--work .work-cta { cursor: pointer; } .work-bg__grad { pointer-events: none; } .media-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border: none; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: none; box-shadow: 0 10px 34px rgba(0,0,0,0.45); transition: transform var(--transition), background var(--transition); z-index: 3; } .media-play svg { width: 24px; height: 24px; margin-left: 3px; fill: #111; transition: fill var(--transition); } .pg--work:hover .media-play { transform: translate(-50%, -50%) scale(1.1); background: var(--accent); } .pg--work:hover .media-play svg { fill: #fff; } /* Tipografía común de trabajo */ .work-no { font-size: clamp(40px, 6vw, 88px); color: var(--accent); line-height: 0.8; } .work-title { font-size: clamp(34px, 6vw, 78px); color: var(--cream); margin: 14px 0 12px; } .work-meta { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); } .work-desc { margin-top: 18px; font-size: clamp(13px, 1.4vw, 15px); line-height: 1.7; color: var(--cream-dim); max-width: 46ch; } .work-cta { display: inline-block; margin-top: 24px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); padding-bottom: 5px; border-bottom: 1px solid var(--accent); transition: color var(--transition); } .pg--work:hover .work-cta { color: var(--accent); } /* Variante FULL: foto a sangre + texto abajo */ .v-full { display: block; } .v-full .work-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .v-full:hover .work-bg { transform: scale(1.05); } .v-full .work-bg__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,6,0.96) 8%, rgba(6,6,6,0.15) 55%, rgba(6,6,6,0.6) 100%); } .v-full .work-no { position: absolute; top: clamp(20px, 3vw, 40px); right: clamp(24px, 4vw, 48px); color: rgba(255,255,255,0.85); z-index: 3; } .v-full .work-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(28px, 4vw, 56px); z-index: 3; display: flex; flex-direction: column; } .v-full .work-foot .work-no { display: none; } /* FULL «is-side»: tratamiento tipo "Sobre mí" — foto revelada a la derecha, oscurecida a la izquierda, texto en columna izquierda centrado vertical. */ .v-full.is-side .work-bg { background-position: center 72%; } .v-full.is-side .work-bg__grad { background: linear-gradient(97deg, rgba(6,6,6,0.97) 24%, rgba(6,6,6,0.72) 46%, rgba(6,6,6,0.2) 78%, rgba(6,6,6,0.06) 100%); } .v-full.is-side .work-foot { top: 0; bottom: 0; right: auto; width: min(58%, 640px); justify-content: center; padding: clamp(32px, 5vw, 72px); } /* Variante SPLIT: media columna texto / media columna foto */ .v-split { display: grid; grid-template-columns: 1fr 1fr; } .v-split .work-col { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4.5vw, 64px); } .v-split .work-img { position: relative; background-size: cover; background-position: center; } .v-splitL .work-col { order: 2; } .v-splitL .work-img { order: 1; } /* Variante EDITORIAL: mucho negro, número fantasma, foto enmarcada */ .v-editorial { display: grid; grid-template-columns: 1fr 0.92fr; align-items: center; gap: clamp(20px, 3vw, 48px); padding: clamp(34px, 5vw, 72px); } .v-editorial .work-no--ghost { position: absolute; top: clamp(6px, 1vw, 18px); left: clamp(20px, 3vw, 48px); font-size: clamp(120px, 22vw, 300px); color: transparent; -webkit-text-stroke: 1.5px rgba(242,236,225,0.1); pointer-events: none; } /* «num-mini» (DULCE): número chico en la esquina inferior derecha, como un índice discreto y no un número gigante que se lea como divisor de sección. */ .v-editorial.num-mini .work-no--ghost { top: auto; left: auto; right: clamp(20px, 3vw, 48px); bottom: clamp(18px, 3vw, 38px); font-size: clamp(28px, 4vw, 56px); -webkit-text-stroke: 1px rgba(242,236,225,0.16); } .v-editorial .work-col { position: relative; z-index: 2; } .v-editorial .work-frame { position: relative; height: 76%; align-self: center; padding: 10px; border: 1px solid var(--line); } .v-editorial .work-img { position: relative; width: 100%; height: 100%; background-size: cover; background-position: center; } /* Variante COLLAGE: grilla de fotos + texto */ .v-collage { display: grid; grid-template-columns: 1.05fr 0.95fr; } .v-collage .collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 6px; padding: 14px; } .v-collage .collage__cell { background-size: cover; background-position: center; border-radius: 2px; } .v-collage .collage__cell.c0 { grid-row: span 2; } .v-collage .collage__cell.c3 { grid-column: span 2; } .v-collage .work-col { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 60px); } /* Card «logo» (BAFA): isotipo como imagen + textos debajo sobre fondo oscuro */ .pg--bafa { position: relative; overflow: hidden; container-type: size; background: radial-gradient(70% 60% at 50% 44%, color-mix(in srgb, var(--accent) 14%, #0c0b0a) 0%, #080707 76%); } .pg--bafa .work-no { position: absolute; top: clamp(10px, 2vw, 30px); right: clamp(16px, 3vw, 48px); color: transparent; -webkit-text-stroke: 1.5px rgba(242,236,225,0.16); pointer-events: none; z-index: 4; } .bafa-badge { position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 1; } /* Contenedor del isotipo: permite superponer la descripción DENTRO del círculo. */ .bafa-figure { position: relative; display: flex; flex-shrink: 0; } .bafa-figure__desc { position: absolute; /* En la mitad INFERIOR del disco, debajo del wordmark «BAFA» del isotipo, para que no se pisen. */ top: 75%; left: 50%; transform: translate(-50%, -50%); width: 62%; /* dentro del disco, sin tocar el borde */ margin: 0; text-align: center; color: #14110f; /* negro sobre el círculo blanco */ font-weight: 600; line-height: 1.3; font-size: clamp(11px, 3.1cqmin, 18px); pointer-events: none; } .bafa-logo { width: min(68cqmin, 480px); height: min(68cqmin, 480px); /* flex-shrink:0 + alto explícito: dentro del flex-column .bafa-badge el flex comprimía la altura al faltar espacio (al cambiar resolución / en el celu), y el círculo quedaba ovalado. Fijar el alto y bloquear el shrink lo mantiene siempre perfectamente redondo. */ flex-shrink: 0; aspect-ratio: 1 / 1; display: block; object-fit: cover; border-radius: 50%; } .bafa-badge__cta { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: min(72cqmin, 420px); margin-top: clamp(18px, 2.8cqmin, 28px); } .bafa-badge__cta .work-cta { margin-top: 14px; color: var(--cream); border-bottom-color: rgba(242, 236, 225, 0.42); } .bafa-badge__cta .work-extlink { margin-top: 36px; color: var(--cream); border-bottom-color: rgba(242, 236, 225, 0.32); } .bafa-badge__cta .work-extlink:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Franja superior (eyebrow) con velo oscuro para legibilidad sobre el círculo */ .bafa-top { position: absolute; top: 0; left: 0; right: 0; padding: clamp(22px, 3.5vw, 42px); z-index: 3; pointer-events: none; background: linear-gradient(to bottom, rgba(6,6,6,0.72), rgba(6,6,6,0) 92%); } .bafa-top .kicker { pointer-events: auto; } /* El CTA reacciona a SU propio hover, no al de toda la página (si no, quedaba en color acento mientras el cursor estuviera en cualquier parte de la card). */ .pg--bafa:hover .bafa-badge__cta .work-cta { color: var(--cream); } .pg--bafa .bafa-badge__cta .work-cta:hover { color: var(--accent); } .work-extlink { margin-top: 24px; /* Separación un poco más reducida para que entre en el círculo */ display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #14110f; /* Texto en negro */ text-decoration: none; /* Subrayado negro semitransparente que cambia a acento en hover */ border-bottom: 1px solid rgba(20, 17, 15, 0.3); padding-bottom: 4px; transition: color var(--transition), border-color var(--transition); } .work-extlink:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Placeholder "Próximamente": proyecto sin contenido aún, no clickeable */ .pg--soon { display: flex; align-items: center; justify-content: center; cursor: default; background: radial-gradient(75% 65% at 50% 40%, color-mix(in srgb, var(--accent) 10%, #0c0b0a) 0%, #0a0908 72%); } .pg--soon .work-no { position: absolute; top: clamp(10px, 2vw, 30px); right: clamp(16px, 3vw, 48px); color: transparent; -webkit-text-stroke: 1.5px rgba(242,236,225,0.16); pointer-events: none; } .soon-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(30px, 6vw, 72px); } .soon-inner .kicker { margin-bottom: 14px; } .soon-inner .work-title { margin: 0 0 10px; } .soon-inner .work-meta { margin-bottom: 22px; } .soon-tag { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 100px; padding: 9px 20px; } /* ── CONTACTO ── */ /* Mismo criterio que el índice: container-type + `cqw`/`%` para que el bloque escale con la página y no se recorte al achicar el escenario (zoom o pantallas chicas). */ .pg--thanks { container-type: size; display: flex; flex-direction: column; justify-content: center; padding: 6.8%; background: radial-gradient(80% 80% at 50% 30%, #161412 0%, #090807 75%); } .thanks-title { /* Más chico que el «GRACIAS.» anterior: la frase es el doble de larga y a ese cuerpo se desbordaba del ancho de la página. */ font-size: 12.3cqw; color: var(--cream); line-height: 1.02; /* aire entre «TRABAJEMOS» y «JUNTOS» */ } .thanks__contact { margin-top: 4.1cqw; } .thanks__email { font-size: 2.24cqw; font-weight: 700; color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(201,162,127,0.4); padding-bottom: 3px; transition: border-color var(--transition); } .thanks__email:hover { border-color: var(--accent); } .thanks__socials { margin-top: 2.43cqw; display: flex; gap: 2.61cqw; } .thanks__socials a { display: inline-flex; align-items: center; gap: 0.84cqw; font-size: 1.31cqw; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); text-decoration: none; padding: 4px 0; transition: color var(--transition); } .thanks__socials a svg { width: 1.59cqw; height: 1.59cqw; flex-shrink: 0; } .thanks__socials a:hover { color: var(--cream); } /* Link a Muna Films con su logo (SVG que hereda el color del texto) */ .thanks__muna { margin-top: 4.48cqw; display: inline-flex; align-items: center; gap: 1.12cqw; font-size: 1.12cqw; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color var(--transition); } .thanks__muna svg { width: 3.73cqw; height: auto; flex-shrink: 0; } .thanks__muna:hover { color: var(--cream); } /* ════════════════════════════════════════════════════════════ BARRA DE SECCIONES (arriba de la revista) ════════════════════════════════════════════════════════════ */ .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 700; display: flex; justify-content: center; padding: 12px 14px; pointer-events: none; } .topnav[hidden] { display: none; } .topnav__inner { pointer-events: auto; display: flex; gap: 2px; max-width: 100%; overflow-x: auto; background: rgba(14,13,12,0.9); /* opaco: el backdrop-filter re-desenfocaba en cada frame del giro */ border: 1px solid var(--line); border-radius: 100px; padding: 5px 6px; scrollbar-width: none; } .topnav__inner::-webkit-scrollbar { display: none; } .topnav__tab { flex: 0 0 auto; background: none; border: none; border-radius: 100px; color: var(--muted); font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; padding: 8px 16px; cursor: pointer; white-space: nowrap; transition: color var(--transition), background var(--transition); } .topnav__tab:hover { color: var(--cream); } .topnav__tab.is-active { color: var(--tab-accent); background: color-mix(in srgb, var(--tab-accent) 16%, transparent); } /* ════════════════════════════════════════════════════════════ FLECHAS (pegadas a los bordes de la revista) ════════════════════════════════════════════════════════════ */ .ctrl { position: fixed; /* relativas a la ventana, justo por fuera de la revista */ z-index: 90; top: 50%; transform: translateY(-50%); width: 62px; height: 62px; border-radius: 50%; font-size: 26px; display: flex; align-items: center; justify-content: center; background: rgba(14,12,10,0.82); border: 1px solid var(--line); color: var(--cream); cursor: pointer; box-shadow: 0 8px 26px rgba(0,0,0,0.45); transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); } .ctrl[hidden] { display: none; } /* Justo por fuera del borde de la revista (ya escalada), con ~16px de aire. El max() evita que se salgan de la pantalla cuando no hay margen. */ .ctrl--prev { left: max(8px, calc(50vw - var(--stage-w) * var(--book-scale) / 2 - 78px)); } .ctrl--next { right: max(8px, calc(50vw - var(--stage-w) * var(--book-scale) / 2 - 78px)); } .ctrl:hover { background: var(--accent); color: #111; border-color: var(--accent); transform: translateY(-50%) scale(1.06); } /* ════════════════════════════════════════════════════════════ DESPLIEGUE DE TRABAJO ════════════════════════════════════════════════════════════ */ .work { position: fixed; inset: 0; z-index: 800; background: radial-gradient(100% 80% at 50% 0%, #131210 0%, var(--bg) 70%); overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .work.open { opacity: 1; pointer-events: all; } .work__bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; /* Mismo contenedor centrado que .work__body (1400px + igual padding): así el borde derecho del botón "Volver a la revista" queda alineado con el final de los videos, y no pegado al borde de la pantalla en monitores anchos. */ max-width: 1400px; margin: 0 auto; padding: 30px clamp(20px, 5vw, 64px); background: linear-gradient(to bottom, rgba(6,6,6,0.97), rgba(6,6,6,0)); } .work__heading { display: flex; flex-direction: column; max-width: 60ch; } .work__eyebrow { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .work__title { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 5vw, 56px); line-height: 0.95; color: var(--cream); } .work__meta { margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dim); } .work__desc { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--cream-dim); } .work__close { flex-shrink: 0; white-space: nowrap; /* la ✕ no baja de renglón */ background: rgba(18,16,14,0.85); border: 1px solid var(--line); color: var(--cream); border-radius: 100px; padding: 11px 20px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background var(--transition), color var(--transition); } .work__close:hover { background: var(--accent); color: #111; } .work__body { padding: 10px clamp(20px, 5vw, 64px) 90px; max-width: 1400px; margin: 0 auto; } .work__body--single { max-width: 1100px; display: flex; justify-content: center; } /* Galería con sub-galerías: menú lateral izquierdo + mural */ .work__body--cats { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: clamp(20px, 3vw, 44px); align-items: start; } .cat-nav { position: sticky; top: 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; transition: opacity 0.3s ease, transform 0.3s ease; } /* Al scrollear una sección hacia abajo, el menú de sub-galerías se desvanece (JS le pone .is-hidden); al subir vuelve a aparecer. */ .cat-nav.is-hidden { opacity: 0; transform: translateY(-6px); pointer-events: none; } .cat-nav__btn { text-align: left; background: none; border: none; border-bottom: 2px solid transparent; /* subrayado activo — no desplaza el texto */ color: var(--muted); font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 0; /* sin sangría: alineado con el borde de la galería y los títulos */ cursor: pointer; transition: color var(--transition), border-color var(--transition); } .cat-nav__btn:hover { color: var(--cream); } .cat-nav__btn.is-active { color: var(--accent); border-bottom-color: var(--accent); } .cat-gallery { min-width: 0; } /* evita que el masonry desborde la columna del grid */ /* Sub-galerías de BAFA: los clips son verticales y de altura uniforme, así que una grilla ordenada queda mejor que el masonry de columnas — este balanceaba los ítems (p.ej. 7 en 3 columnas → 3/2/2) y dejaba una columna corta con un hueco raro en el medio. Con grid, cualquier resto cae en la última fila. */ .cat-gallery .masonry { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; } .cat-gallery .masonry__item { margin-bottom: 0; } @media (max-width: 1100px) { .cat-gallery .masonry { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .cat-gallery .masonry { grid-template-columns: 1fr; } } .cat-empty { padding: 56px 4px; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); } .work__player { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0a0a0a; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .work__player iframe { width: 100%; height: 100%; border: none; } /* Video alojado en el proyecto: mismo marco que el iframe de YouTube. */ .work__player video { width: 100%; height: 100%; border: none; display: block; object-fit: contain; background: #0a0a0a; } /* ── Mural ── */ .masonry { columns: 3; column-gap: 12px; } @media (max-width: 1100px) { .masonry { columns: 2; } } @media (max-width: 700px) { .masonry { columns: 1; } } /* Grilla ordenada (opt-in por work con `gridGallery`): para sets de fotos con proporción uniforme, donde el masonry de columnas balanceaba mal y dejaba una columna corta con un hueco vacío al final. Con grid el sobrante cae ordenado en la última fila. Mismo criterio que las sub-galerías de BAFA. */ .masonry--grid { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .masonry--grid .masonry__item { margin-bottom: 0; } @media (max-width: 1100px) { .masonry--grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .masonry--grid { grid-template-columns: 1fr; } } .masonry__item { break-inside: avoid; margin-bottom: 12px; position: relative; overflow: hidden; cursor: pointer; border-radius: 3px; background: var(--page); animation: fadeIn 0.5s ease both; } .masonry__item img { display: block; width: 100%; height: auto; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); } .masonry__item:hover img { transform: scale(1.04); } .masonry__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%); opacity: 0; transition: opacity var(--transition); display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; } .masonry__item:hover .masonry__overlay { opacity: 1; } .masonry__caption { font-size: 12px; color: rgba(255,255,255,0.92); letter-spacing: 0.05em; } .masonry__meta { display: block; margin-top: 3px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); } .masonry__item--video .masonry__media { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #0a0a0a; } /* Zoom leve: recorta cualquier borde residual de la miniatura de YouTube */ .masonry__item--video .masonry__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); } /* Clips locales: la proporción la da el propio video (hay piezas verticales) */ .masonry__item--video .masonry__media--clip { aspect-ratio: auto; } .masonry__media--clip video { display: block; width: 100%; height: auto; pointer-events: none; } .masonry__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border: none; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: none; box-shadow: 0 6px 24px rgba(0,0,0,0.3); transition: transform var(--transition), background var(--transition); } .masonry__play svg { width: 22px; height: 22px; margin-left: 2px; fill: #111; transition: fill var(--transition); } .masonry__item--video:hover .masonry__play { transform: translate(-50%, -50%) scale(1.12); background: var(--accent); } .masonry__item--video:hover .masonry__play svg { fill: #fff; } .masonry__item--video:hover img { transform: scale(1.05); } /* sin zoom extra al pasar el mouse */ /* ════════════════════════════════════════════════════════════ LIGHTBOX ════════════════════════════════════════════════════════════ */ .lightbox { position: fixed; inset: 0; background: rgba(5,5,5,0.97); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .lightbox.open { opacity: 1; pointer-events: all; } .lightbox__media { max-width: 90vw; max-height: 85vh; display: flex; align-items: center; justify-content: center; } .lightbox__media img { max-width: 90vw; max-height: 85vh; border-radius: 3px; object-fit: contain; } .lightbox__video { width: min(90vw, 1100px); aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: #0a0a0a; box-shadow: 0 8px 40px rgba(0,0,0,0.4); } .lightbox__video iframe { width: 100%; height: 100%; border: none; } /* Video local expandido: se adapta a horizontal o vertical */ .lightbox__clip { display: block; max-width: 90vw; max-height: 85vh; border-radius: 6px; background: #0a0a0a; box-shadow: 0 8px 40px rgba(0,0,0,0.4); } .lightbox__caption { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); white-space: nowrap; } .lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 20px; padding: 12px; line-height: 1; transition: color var(--transition); } .lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { color: var(--white); } .lightbox__close { top: 24px; right: 32px; font-size: 18px; } .lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); font-size: 28px; } .lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); font-size: 28px; } /* ── Animaciones ── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulseHint { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } /* ════════════════════════════════════════════════════════════ RESPONSIVE Sólo en VERTICAL (portrait) se apila como mobile. En horizontal (landscape) — aunque sea un celular — se usa el layout de PC. ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) and (orientation: portrait) { :root { --book-scale: 1; } /* en el celu no sobra pantalla: lectura a tamaño completo */ .mag { padding: 12px 8px; } /* 80dvh (antes 86): deja aire arriba para el navbar y abajo para el botón "Dejar en la mesa" — con 86 la revista tocaba a ambos. El min() garantiza ese aire (~85px por lado) también en pantallas bajas. */ .book__stage { width: 96vw; height: 80vh; height: min(80dvh, calc(100dvh - 170px)); } .ctrl--prev, .ctrl--next { width: 52px; height: 52px; font-size: 22px; } .ctrl--prev { left: 10px; } .ctrl--next { right: 10px; } /* Índice y Contacto en el celu: la card es alta y angosta (retrato), muy distinta a la card ancha de PC. Los tamaños base van en `cqw` (ancho), que en la card angosta quedan chicos y dejan la card medio vacía. Acá escalamos con base en la ALTURA (`cqh`) para llenarla; los labels se topan por ancho con `min(…cqw)` para no desbordar en pantallas angostas. */ .toc-title { font-size: min(9.5cqh, 14cqw); margin-bottom: 4cqh; } .toc2__item { padding: 4.3cqh 0; } .toc2__n { font-size: 2.2cqw; width: 5.5cqw; } .toc2__label { font-size: min(5cqh, 5.6cqw); } .thanks-title { font-size: min(13cqh, 15cqw); } .thanks__contact { margin-top: 6cqh; } .thanks__email { font-size: min(3.4cqh, 4.2cqw); } /* is-side en el celu: la columna al 58% queda muy angosta — el texto pasa a banda inferior con oscurecido de abajo, y la foto se ve arriba. */ .v-full.is-side .work-foot { top: auto; bottom: 0; right: 0; width: auto; justify-content: flex-end; padding: clamp(24px, 7vw, 40px); } .v-full.is-side .work-bg__grad { background: linear-gradient(to top, rgba(6,6,6,0.96) 10%, rgba(6,6,6,0.2) 52%, rgba(6,6,6,0.5) 100%); } .v-full.is-side .work-bg { background-position: center 40%; } /* Apilar variantes en vertical */ .v-split, .v-editorial, .v-collage { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .v-split .work-img, .v-collage .collage { min-height: 40%; } .v-splitL .work-col { order: 2; } .v-splitL .work-img { order: 1; } .v-split .work-col, .v-collage .work-col, .v-editorial .work-col { padding: clamp(22px, 6vw, 36px); } /* El marco editorial debe llenar su fila (1fr): con height:76% heredado y align-items:center el marco colapsaba a la altura del play → en el celu no se veía el thumbnail ni se podía tocar el botón. align-self:stretch + flex hace que el marco ocupe la fila y la imagen lo llene. */ .v-editorial .work-frame { height: auto; align-self: stretch; display: flex; } .v-editorial .work-img { min-height: 0; } .v-collage .collage { grid-template-rows: repeat(2, 1fr); } .v-collage .collage__cell.c0 { grid-row: span 1; } .v-collage .collage__cell.c4 { display: none; } .divider__main { max-width: 100%; } .divider__thumbs { display: none; } /* "Dejar en la mesa": abajo y centrado (arriba tapaba y quedaba lejos del pulgar) */ .zoomout { top: auto; right: auto; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); } /* Sub-galerías en el celu: el menú pasa a fila horizontal arriba */ .work__body--cats { grid-template-columns: 1fr; gap: 6px; } .cat-nav { position: sticky; top: 0; z-index: 6; flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none; background: rgba(6,6,6,0.92); padding: 4px 0 8px; } .cat-nav::-webkit-scrollbar { display: none; } .cat-nav__btn { flex: 0 0 auto; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; padding: 10px 13px; font-size: 11px; } .cat-nav__btn.is-active { border-left-color: transparent; border-bottom-color: var(--accent); } /* En el celu: la fila con la flecha de regreso a la izquierda y los textos al lado. */ .work__bar { flex-direction: row; align-items: flex-start; gap: 12px; padding: 18px 16px; } /* "Volver a la revista" pasa a ser una flecha ← arriba a la izquierda, junto a los textos (se oculta el texto con font-size:0 y se dibuja la flecha). */ .work__close { order: -1; /* antes del heading → queda a la izquierda */ position: static; transform: none; flex-shrink: 0; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0; /* oculta "Volver a la revista ✕" */ } .work__close::before { content: '\2190'; font-size: 20px; letter-spacing: 0; } /* ← */ /* Ya no hay botón flotante abajo: alcanza con el aire normal. */ .work__body { padding-bottom: calc(40px + env(safe-area-inset-bottom)); } .masonry { columns: 2; column-gap: 8px; } .masonry__item { margin-bottom: 8px; } .lightbox__prev { left: 8px; font-size: 22px; } .lightbox__next { right: 8px; font-size: 22px; } .lightbox__close { top: 16px; right: 16px; } /* Video en el lightbox: en el celu los controles nativos del reproductor ocupan las esquinas (volumen, pantalla completa, PiP) y el centro (saltos). Achicamos un poco el video para dejar una franja negra arriba y abajo, y llevamos la ✕ arriba y las flechas abajo —con fondo, como botones— para que no se solapen con esos controles. Las imágenes no se tocan. */ .lightbox.is-video .lightbox__clip { max-height: 66vh; } .lightbox.is-video .lightbox__close, .lightbox.is-video .lightbox__prev, .lightbox.is-video .lightbox__next { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(18,16,14,0.78); border-radius: 50%; color: var(--cream); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .lightbox.is-video .lightbox__close { top: calc(8px + env(safe-area-inset-top)); right: 14px; font-size: 16px; } .lightbox.is-video .lightbox__prev, .lightbox.is-video .lightbox__next { top: auto; transform: none; bottom: calc(14px + env(safe-area-inset-bottom)); font-size: 22px; } .lightbox.is-video .lightbox__prev { left: 18px; } .lightbox.is-video .lightbox__next { right: 18px; } /* La leyenda sube y queda centrada entre las dos flechas. */ .lightbox.is-video .lightbox__caption { bottom: calc(70px + env(safe-area-inset-bottom)); } /* Contacto: en el celu la página es ~1/3 del ancho de PC — los botones con px fijos de desktop desbordaban. */ .thanks__socials { margin-top: 18px; gap: 8px 16px; flex-wrap: wrap; } .thanks__socials a { font-size: 11px; letter-spacing: 0.14em; gap: 6px; padding: 2px 0; } .thanks__socials a svg { width: 14px; height: 14px; } .thanks__muna { margin-top: 28px; font-size: 10px; letter-spacing: 0.18em; gap: 9px; } .thanks__muna svg { width: 28px; } } @media (max-width: 460px) { .masonry { columns: 1; } }