/* ALE LEONÉS — Portafolio 2026. Sistema: negro, hueso, gris cálido del sin fin; un rojo contado. */
:root {
  --bg: #000; --bg2: #0b0b0c; --ink: #f5f5f7; --ink2: #8a8a8e; --ink3: #5c5c60; --line: rgba(255,255,255,.14);
  --paper: #d9d6cf; --paper2: #cfccc4; --inkd: #1d1d1f; --inkd2: #6e6e73; --lined: rgba(0,0,0,.14);
  --red: #c8102e;
  --disp: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 6vw; --gutter-m: 16px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--text); font-size: 17px; line-height: 1.47; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.lock { overflow: hidden; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; }
.h { font-family: var(--disp); font-weight: 600; letter-spacing: -.045em; line-height: .92; font-size: clamp(44px, 9vw, 168px); margin: 0; }
.h.small { font-size: clamp(34px, 6vw, 110px); }
.p { max-width: 680px; color: var(--ink); }
.p.dim { color: var(--ink2); }
.mask { display: inline-block; overflow: hidden; vertical-align: top; }
.mask > span { display: inline-block; transform: translateY(112%); transition: transform .62s var(--ease); will-change: transform; }
.on .mask > span { transform: translateY(0); }
.on .mask.d1 > span { transition-delay: .06s; } .on .mask.d2 > span { transition-delay: .12s; } .on .mask.d3 > span { transition-delay: .18s; }
.hide { opacity: 0; pointer-events: none; }

/* ---------- chrome ---------- */
.ui { position: fixed; z-index: 50; pointer-events: none; mix-blend-mode: difference; color: #fff; }
.ui-tl { top: 22px; left: var(--gutter); pointer-events: auto; }
.ui-tr { top: 22px; right: var(--gutter); display: flex; gap: 22px; align-items: center; pointer-events: auto; }
.ui-bl { bottom: 22px; left: var(--gutter); }
.ui-br { bottom: 22px; right: var(--gutter); }
.ui .wordmark { font-family: var(--disp); font-weight: 700; letter-spacing: -.04em; font-size: 15px; }
.ui .idx { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; }
.ui .idx b { font-weight: 400; }
.ui .audio { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.ui .audio i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff; display: inline-block; }
.ui .audio.on i { background: #fff; }
.ui .sec { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.ui .hint { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; width: 0; background: #fff; mix-blend-mode: difference; }

/* ---------- pin/stage ---------- */
.pin { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage-in { position: absolute; inset: 0; }
.title { position: absolute; left: var(--gutter); top: 14vh; z-index: 3; }
.cap { position: absolute; left: var(--gutter); bottom: 6vh; right: var(--gutter); z-index: 3; color: var(--ink2); display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; }
.cap .r { text-align: right; }
.counter { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink2); }

/* ---------- portada ---------- */
#hero { background: #000; }
#hero .stage { background: radial-gradient(120% 90% at 50% 40%, #dcd9d2 0%, #cfccc4 45%, #a9a69f 100%); }
#hero .bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, #dcd9d2 0%, #cfccc4 45%, #a9a69f 100%); }
#hero .spot { position: absolute; inset: 0; background: radial-gradient(38% 60% at 50% 62%, rgba(255,255,255,.14), rgba(0,0,0,0) 70%); opacity: 0; }
#hero .name { position: absolute; left: 0; right: 0; top: 64px; margin: 0; text-align: center; font-family: var(--disp); font-weight: 700; letter-spacing: -.055em; line-height: .84; color: #1d1d1f; white-space: nowrap; font-size: 20vw; z-index: 1; }
#hero .name .mask { overflow: hidden; display: inline-block; padding-top: .24em; margin-top: -.24em; } /* el relleno deja ver la tilde de la É sin mover la línea */
#hero .name .mask > span { transition-duration: .9s; }
#hero .person { position: absolute; left: 50%; bottom: 0; height: 80vh; height: 80svh; width: max-content; transform: translateX(-50%); z-index: 2; opacity: 0; transform-origin: 50% 100%; }
/* la foto conserva su proporción: con left 50% la caja sólo tenía media pantalla de ancho y el max-width global la apretaba (en el teléfono se veía «jalado») */
#hero .person img { height: 100%; width: auto; max-width: none; }
#hero.ready .person { opacity: 1; }
#hero .roles { position: absolute; left: var(--gutter); bottom: 64px; color: #1d1d1f; z-index: 4; }
#hero .roles div { line-height: 1.75; }
#hero .claim { position: absolute; right: var(--gutter); bottom: 64px; width: min(26vw, 320px); color: #3a3a3c; font-size: 15px; line-height: 1.45; text-align: right; z-index: 4; }
#hero .claim p { margin: 0; }
#hero .place { margin-top: 14px; color: #1d1d1f; }
#hero .line { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 18px; height: 1px; background: rgba(0,0,0,.25); z-index: 4; }
#hero .line i { display: block; height: 100%; width: 0; background: #1d1d1f; }
/* salida atada al scroll (main.js): un velo negro apaga el sin fin; los textos pasan de tinta a blanco cuando el fondo cruza el gris medio */
#hero .veil { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }
#hero .name, #hero .roles, #hero .place { color: var(--hero-ink, #1d1d1f); }
#hero .claim { color: var(--hero-claim, #3a3a3c); }
#hero .line { background: var(--hero-line, rgba(0,0,0,.25)); } #hero .line i { background: var(--hero-ink, #1d1d1f); }
#hero .person img { will-change: opacity, transform; }

/* ---------- 3D cámaras ---------- */
.cam .stage { background: #000; }
.cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cam .labels { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.cam .lab { position: absolute; transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s linear; }
.cam .lab i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #fff; }
.cam .lab .tx { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 0 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; }
.cam .lab .tx b { display: block; font-weight: 400; color: #fff; }
.cam .lab .tx span { display: block; color: var(--ink2); font-size: 10px; }
.cam .lab.r .tx { left: 0; text-align: left; border-left: 1px solid rgba(255,255,255,.35); margin-left: 14px; }
.cam .lab.l .tx { right: 0; text-align: right; border-right: 1px solid rgba(255,255,255,.35); margin-right: 14px; }
.cam .spec { position: absolute; right: var(--gutter); bottom: 6vh; text-align: right; color: var(--ink2); z-index: 3; }
.cam .bts { position: absolute; inset: 0; z-index: 5; }
.cam .bts img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }

/* ---------- mundos (fotografía) ---------- */
#mundos .stage { background: #000; }
.mundo { position: absolute; inset: 0; display: none; }
.mundo.show { display: block; }
.mundo .ph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 72vh; height: 72svh; max-width: 88vw; }
.mundo .ph img { height: 100%; width: auto; max-width: 88vw; object-fit: contain; transform-origin: 50% 50%; will-change: transform; }
.mundo .ph { will-change: clip-path, transform; }
.mundo .cap { transition: none; }
.mundo .title { top: 12vh; }
.mundo .cap { bottom: 5vh; }
.mundo .cap .more { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; pointer-events: auto; cursor: pointer; }
.mundo .cap .more:hover { border-color: var(--ink); }
/* hoja de contactos */
.sheet { position: fixed; inset: 0; z-index: 80; background: #000; overflow: auto; display: none; padding: 80px var(--gutter) 60px; }
.sheet.open { display: block; }
.sheet .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.sheet .grid figure { margin: 0; background: #0b0b0c; aspect-ratio: 4/5; overflow: hidden; }
.sheet .grid img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.sheet .grid img.ld { opacity: 1; }
.sheet .head { position: fixed; left: var(--gutter); right: var(--gutter); top: 22px; display: flex; justify-content: space-between; z-index: 2; mix-blend-mode: difference; }
.sheet .close { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.96); display: none; align-items: center; justify-content: center; }
.viewer.open { display: flex; }
.viewer img { max-width: 94vw; max-height: 92vh; object-fit: contain; }
.viewer .x { position: absolute; top: 22px; right: var(--gutter); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- dron ---------- */
#dron .stage { background: #000; }
#dron canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#dron .aer { position: absolute; inset: 0; display: none; background: #000; }
#dron .aer.show { display: block; }
#dron .aer .clip { position: absolute; inset: 0; display: none; }
#dron .aer .clip.show { display: block; }
#dron .aer .clip video { width: 100%; height: 100%; object-fit: cover; }
#dron .aer .cap { bottom: 5vh; }
#dron .aer .g { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; height: 64vh; }
#dron .aer .g > * { overflow: hidden; }
#dron .aer img, #dron .aer video { width: 100%; height: 100%; object-fit: cover; }
#dron .drag { position: absolute; left: 0; right: 0; bottom: 6vh; text-align: center; color: var(--ink2); opacity: 0; transition: opacity .3s; }
#dron .drag.show { opacity: 1; }

/* ---------- films ---------- */
#films .stage { background: #000; }
.film { position: absolute; inset: 0; display: none; }
.film.show { display: block; }
.film .v { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 74vh; height: 74svh; max-width: 88vw; background: #0b0b0c; }
.film .v video { height: 100%; width: auto; max-width: 88vw; object-fit: contain; }
.film .v.v916 { aspect-ratio: 9/16; }
.film .v.v169 { aspect-ratio: 16/9; height: auto; width: min(88vw, 130vh); }
.film .v.v169 video { width: 100%; height: auto; }
.film .meta { position: absolute; left: var(--gutter); bottom: 6vh; z-index: 3; }
.film .meta .h { font-size: clamp(28px, 4vw, 64px); }
.film .meta .mono { color: var(--ink2); margin-top: 10px; }
.film .play { position: absolute; right: var(--gutter); bottom: 6vh; z-index: 3; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.film .play:hover { border-color: var(--ink); }
.morefilms { padding: 12vh var(--gutter); border-top: 1px solid var(--line); }
.morefilms ul { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 40px; }
.morefilms li { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.morefilms li:hover .nm { color: #fff; }
.morefilms .nm { font-family: var(--disp); font-weight: 500; font-size: 20px; letter-spacing: -.02em; color: var(--ink); }
.morefilms .mono { color: var(--ink2); }
dialog.lb { border: 0; padding: 0; background: #000; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; }
dialog.lb::backdrop { background: #000; }
dialog.lb video { width: 100%; height: 100%; object-fit: contain; background: #000; }
dialog.lb .x { position: fixed; top: 22px; right: var(--gutter); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; z-index: 2; }
dialog.lb .nm { position: fixed; left: var(--gutter); bottom: 22px; color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- un cuadro ---------- */
#cuadro .stage { background: #000; }
#cuadro .frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 128vh); aspect-ratio: 16/9; background: #000; overflow: hidden; }
#cuadro .frame video, #cuadro .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#cuadro .frame img { opacity: 0; }
#cuadro .frame.photo img { opacity: 1; }
#cuadro .frame.photo video { opacity: 0; }
#cuadro .bar { position: absolute; left: 0; right: 0; height: 50%; background: #000; transform: scaleY(0); z-index: 3; }
#cuadro .bar.t { top: 0; transform-origin: top; } #cuadro .bar.b { bottom: 0; transform-origin: bottom; }
#cuadro .frame.shut .bar { transform: scaleY(1); }
#cuadro .rec { position: absolute; left: var(--gutter); top: 14vh; display: flex; gap: 10px; align-items: center; color: var(--ink); z-index: 3; }
#cuadro .rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); display: inline-block; }
#cuadro .rec.off i { background: transparent; border: 1px solid var(--ink3); }
#cuadro .cap { bottom: 5vh; }
#cuadro .white { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 4; pointer-events: none; }

/* ---------- el corte ---------- */
#corte .stage { background: #000; }
#corte .mon { position: absolute; left: 58%; top: 42%; transform: translate(-50%, -50%); width: min(62vw, 96vh); aspect-ratio: 16/9; background: #0b0b0c; overflow: hidden; }
#corte .mon video { width: 100%; height: 100%; object-fit: cover; }
#corte .tl { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 16vh; height: 58px; }
#corte .tl .tr { position: absolute; inset: 0; display: flex; gap: 2px; }
#corte .tl .tr i { flex: 1 1 0; background: #1a1a1c; position: relative; overflow: hidden; }
#corte .tl .tr i img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
#corte .tl .tr i.on { outline: 1px solid #f5f5f7; }
#corte .tl .tr i.on img { opacity: .9; }
#corte .tl .head { position: absolute; top: -8px; bottom: -8px; width: 1px; background: #fff; left: 0; z-index: 2; }
#corte .tc { position: absolute; left: var(--gutter); bottom: 9vh; color: var(--ink2); }
#corte .tc b { color: var(--ink); font-weight: 400; }
#corte .cnt { position: absolute; right: var(--gutter); bottom: 9vh; text-align: right; color: var(--ink2); }

/* ---------- color ---------- */
#color .stage { background: #000; }
#color .look { position: absolute; inset: 0; display: none; }
#color .look.show { display: block; }
#color .look video, #color .look img { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(58vw, 100vh); aspect-ratio: 16/9; object-fit: cover; }
#color .scopes { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(28vw, 360px); display: grid; gap: 14px; }
#color .scopes canvas { width: 100%; aspect-ratio: 16/9; background: #000; border: 1px solid var(--line); }
#color .scopes canvas.vs { aspect-ratio: 1/1; }
#color .scopes .mono { color: var(--ink2); }

/* ---------- sonido ---------- */
#sonido .stage { background: #000; }
#sonido .mon { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); height: 50vh; height: 50svh; max-width: 88vw; aspect-ratio: 16/9; background: #0b0b0c; overflow: hidden; }
#sonido .mon video { width: 100%; height: 100%; object-fit: cover; }
#sonido .wave { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12vh; height: 110px; }
#sonido .wave canvas { width: 100%; height: 100%; }
#sonido .bands { position: absolute; left: var(--gutter); bottom: 6vh; display: flex; gap: 26px; z-index: 3; }
#sonido .bands button { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); padding-bottom: 3px; border-bottom: 1px solid transparent; }
#sonido .bands button.on { color: var(--ink); border-color: var(--ink); }
#sonido .listen { position: absolute; right: var(--gutter); bottom: 6vh; z-index: 3; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
#sonido .listen i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; }
#sonido .listen i::after { content: ""; width: 0; height: 0; border-left: 9px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
#sonido .listen.on i::after { border: 0; width: 8px; height: 10px; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); margin: 0; }

/* ---------- retoque ---------- */
#retoque .stage { background: #000; }
.par { position: absolute; inset: 0; display: none; }
.par.show { display: block; }
.par .cmp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 68vh; height: 68svh; max-width: 88vw; aspect-ratio: var(--ar, 3/2); overflow: hidden; cursor: ew-resize; touch-action: pan-y; }
.par .cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.par .cmp .after { clip-path: inset(0 0 0 var(--x, 50%)); }
.par .cmp .cut { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 1px; background: #fff; }
.par .cmp .tag { position: absolute; top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.55); padding: 4px 8px; }
.par .cmp .tag.a { left: 12px; } .par .cmp .tag.b { right: 12px; }
.par .lupa { position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background-repeat: no-repeat; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 5; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.par .lupa.show { opacity: 1; }
.par .title { top: 12vh; }
.par .cap { bottom: 5vh; }

/* ---------- ia ---------- */
#ia .stage { background: #000; }
.iaset { position: absolute; inset: 0; display: none; }
.iaset.show { display: block; }
.iaset .obj { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 68vh; height: 68svh; max-width: 88vw; background: #000; }
.iaset .obj video, .iaset .obj img { height: 100%; width: auto; max-width: 88vw; object-fit: contain; }
.iaset .obj.wide { height: auto; width: min(80vw, 96vh); aspect-ratio: 3/2; top: 54%; }
.iaset .obj.wide img { width: 100%; height: 100%; object-fit: cover; }
.iaset .title { top: 12vh; }
.iaset .cap { bottom: 5vh; }
.iaset .tag { position: absolute; right: var(--gutter); top: 14vh; color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- web ---------- */
#web { background: var(--paper); color: var(--inkd); }
#web .stage { background: var(--paper); }
#web .big { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); font-family: var(--disp); font-weight: 700; letter-spacing: -.06em; line-height: .8; font-size: 34vw; color: var(--inkd); opacity: .08; z-index: 0; }
#web .phone { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 78vh; height: 78svh; aspect-ratio: 9/19.5; border-radius: 44px; border: 1px solid rgba(0,0,0,.28); background: #000; overflow: hidden; z-index: 2; box-shadow: 0 40px 80px rgba(0,0,0,.18); }
#web .phone video { width: 100%; height: 100%; object-fit: cover; opacity: 0; position: absolute; inset: 0; }
#web .phone video.show { opacity: 1; }
#web .info { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(30vw, 360px); z-index: 3; }
#web .info .h { font-size: clamp(28px, 3.6vw, 56px); color: var(--inkd); }
#web .info .mono { color: var(--inkd2); margin-top: 12px; }
#web .info .p { color: var(--inkd); margin-top: 18px; font-size: 16px; }
#web .info a { border-bottom: 1px solid var(--lined); }
#web .title { color: var(--inkd); top: 12vh; }
#web .cnt { position: absolute; left: var(--gutter); bottom: 6vh; color: var(--inkd2); }
.weblist { background: var(--paper); color: var(--inkd); padding: 10vh var(--gutter) 14vh; border-top: 1px solid var(--lined); }
.weblist ol { list-style: none; margin: 28px 0 0; padding: 0; columns: 3; column-gap: 40px; }
.weblist li { break-inside: avoid; display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--lined); font-family: var(--disp); font-weight: 500; letter-spacing: -.01em; font-size: 17px; }
.weblist li .n { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--inkd2); min-width: 28px; padding-top: 5px; }
.weblist li a { border-bottom: 1px solid transparent; } .weblist li a:hover { border-color: var(--inkd); }
.weblist .mono { color: var(--inkd2); }

/* ---------- sobre mí ---------- */
#sobre { background: var(--paper); color: var(--inkd); }
#sobre .stage { background: #000; }
#sobre .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#sobre .stage .title { color: #f5f5f7; top: auto; bottom: 8vh; }
body .bio { background: var(--paper); color: var(--inkd); padding: calc(var(--vh, 1vh) * 12) var(--gutter) calc(var(--vh, 1vh) * 10); display: grid; grid-template-columns: minmax(0, 680px) minmax(240px, 360px); gap: 8vw; align-items: start; }
body .bio .h.small { color: var(--inkd); font-size: clamp(32px, 4.6vw, 72px); margin-bottom: 28px; }
body .bio p { color: var(--inkd); margin: 0 0 18px; }
body .bio .p.dim { color: var(--inkd2); }
body .facts { display: grid; gap: 26px; }
body .facts h4 { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 400; color: var(--inkd2); }
body .facts p { margin: 0; font-size: 15px; line-height: 1.55; }
body .facts .pd { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--inkd); color: #f5f5f7; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
body .facts .pd i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
body .facts .pd:hover { background: #000; }
body .contact { background: var(--paper); color: var(--inkd); padding: 4vh var(--gutter) 12vh; border-top: 1px solid var(--lined); display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
body .contact .h { color: var(--inkd); font-size: clamp(30px, 5vw, 84px); }
body .contact .h a { position: relative; }
body .contact .h a::after { content: ""; position: absolute; left: 0; bottom: -.04em; height: 2px; width: 0; background: var(--inkd); transition: width .5s var(--ease); }
body .contact .h a:hover::after { width: 100%; }
body .contact .links { display: grid; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--inkd2); text-align: right; }
body .contact .links a:hover { color: var(--inkd); }
footer a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
footer { background: var(--paper); color: var(--inkd2); padding: 0 var(--gutter) 30px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- transiciones entre actos ---------- */
.acto { height: calc(var(--vh, 1vh) * 100); display: flex; align-items: center; justify-content: center; background: #000; color: var(--ink2); }

/* ---------- móvil ---------- */
@media (max-width: 1100px) { .ui-br { display: none; } }
#dron .stage.aerial > .cap, #dron .stage.aerial > .drag { display: none; }
.cap { bottom: 7vh; }
@media (max-width: 820px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .ui-tl, .ui-tr { top: 16px; } .ui-bl, .ui-br { bottom: 16px; }
  .ui .hint { display: none; }
  .h { font-size: clamp(40px, 13vw, 96px); }
  .title { top: 11vh; }
  #hero .name { font-size: 30vw; line-height: .86; top: 128px; white-space: normal; text-align: left; padding-left: var(--gutter); } /* a la izquierda, con los oficios: la tilde de la É no cae bajo «ALE» */
  #hero .roles { top: 60px; bottom: auto; display: flex; flex-wrap: wrap; gap: 0 10px; max-width: 70vw; }
  #hero .roles div { line-height: 1.5; }
  #hero .claim { display: none; }
  #hero .person { height: 67vh; height: 67svh; }
  .cam .spec { right: auto; left: var(--gutter); text-align: left; bottom: 5vh; }
  .cam .lab .tx { padding: 0 8px; font-size: 9px; }
  .mundo .ph { height: 62vh; height: 62svh; }
  /* foto horizontal en el teléfono: más alta y recorrida de lado a lado con el scroll (se ve entera, sin quedar chiquita) */
  .mundo .ph.pan { width: 92vw; max-width: none; height: 54vh; height: 54svh; overflow: hidden; }
  .mundo .ph.pan img { max-width: none; width: auto; height: 100%; transform-origin: 0 50%; }
  .mundo .cap { flex-direction: column; align-items: flex-start; gap: 10px; } .mundo .cap .r { text-align: left; }
  #dron .aer .g { grid-template-columns: 1fr 1fr; height: 56vh; }
  .film .v { height: 62vh; height: 62svh; }
  .film .v.v169 { width: 92vw; }
  .film .meta { bottom: 12vh; } .film .play { bottom: 6vh; left: var(--gutter); right: auto; }
  #cuadro .frame { width: 94vw; }
  #corte .mon { width: 92vw; top: 38%; }
  #corte .tl { height: 40px; bottom: 12vh; }
  #color .look video, #color .look img { left: var(--gutter); top: 36%; width: calc(100vw - 32px); }
  #color .scopes { left: var(--gutter); right: var(--gutter); top: auto; bottom: 8vh; transform: none; width: auto; grid-template-columns: 1fr 1fr; }
  #color .scopes canvas.vs { aspect-ratio: 16/9; }
  #sonido .mon { width: 92vw; top: 30%; }
  #sonido .wave { bottom: 16vh; height: 80px; }
  #sonido .bands { gap: 16px; bottom: 6vh; } #sonido .listen { bottom: 6vh; right: var(--gutter); }
  .par .cmp { height: 52vh; height: 52svh; max-width: 94vw; }
  .par .lupa { display: none; }
  .iaset .obj { height: 56vh; height: 56svh; }
  #web .big { font-size: 60vw; top: 40%; }
  #web .phone { height: 60vh; height: 60svh; top: 46%; }
  #web .info { left: var(--gutter); right: var(--gutter); top: auto; bottom: 6vh; transform: none; width: auto; }
  #web .info .p { display: none; }
  #web .cnt { bottom: auto; top: 11vh; right: var(--gutter); left: auto; }
  .weblist ol { columns: 1; }
  body .bio { grid-template-columns: 1fr; gap: 40px; }
  .morefilms ul { grid-template-columns: 1fr; }
}

/* ---------- marcas ---------- */
#marcas .stage { background: #000; }
#marcas .wall { position: absolute; left: var(--gutter); right: var(--gutter); top: 55%; transform: translateY(-50%); display: flex; flex-wrap: wrap; gap: 4px 28px; align-content: center; }
#marcas .wall span { font-family: var(--disp); font-weight: 600; letter-spacing: -.035em; font-size: clamp(19px, 2.9vw, 52px); line-height: 1.14; color: var(--ink3); opacity: .16; transform: translateY(8px); transition: opacity .55s var(--ease), transform .55s var(--ease), color .55s; white-space: nowrap; }
#marcas .wall span.on { opacity: 1; transform: none; color: var(--ink); }
#marcas .wall span.has { pointer-events: auto; cursor: pointer; padding-right: .42em; position: relative; }
#marcas .wall span.has::after { content: ''; position: absolute; right: .08em; top: .32em; width: .16em; height: .16em; border-radius: 50%; background: var(--red); opacity: 0; transition: opacity .4s; }
#marcas .wall span.has.on::after { opacity: 1; }
#marcas .wall span.has:hover { color: #fff; }
.sheet .head .hb { display: flex; gap: 22px; align-items: center; }
.sheet .head .film { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 2px; display: none; }
.sheet .head .film:hover { border-color: var(--ink); }
#marcas .cap { bottom: 5vh; }

/* ---------- piezas verticales y 4:3 ---------- */
#color .look.v916 video { width: auto; height: min(78vh, 78svh); aspect-ratio: 9/16; }
#color .look.v43 video { width: min(50vw, 96vh); aspect-ratio: 4/3; }
.film .v.v43 { aspect-ratio: 4/3; height: 74vh; height: 74svh; width: auto; }
.film .v.v43 video { height: 100%; width: auto; }
.iaset .cap .play { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 2px; pointer-events: auto; }
.iaset .cap .play:hover { border-color: var(--ink); }

/* ---------- lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (max-width: 820px) {
  #marcas .wall { top: 52%; gap: 2px 14px; }
  #marcas .wall span { font-size: 19px; }
  #color .look.v916 video { left: 50%; top: 34%; transform: translate(-50%, -50%); width: auto; height: 44vh; height: 44svh; }
  #color .look.v43 video { width: calc(100vw - 32px); }
  #sonido .mon { width: auto; height: 38vh; height: 38svh; max-width: 92vw; top: 30%; }
  #color .scopes .mono { display: none; }
  .film .v.v43 { height: 62vh; height: 62svh; }
}

@media (prefers-reduced-motion: reduce) { .mask > span { transition: none; } }

/* etiquetas 3D: los textos largos se parten en dos líneas y nunca salen de la pantalla */
.cam .lab .tx { white-space: normal; width: max-content; max-width: min(46vw, 340px); }
@media (max-width: 760px) { .cam .lab .tx { max-width: 62vw; background: rgba(0,0,0,.62); padding: 2px 8px; border-radius: 2px; } }

/* relato del lente (Fotografía): una frase por tramo del scroll, al centro y flotando; main.js mueve opacidad y transform */
.cam .narr { position: absolute; left: 50%; top: 50%; width: min(880px, 84vw); height: 0; transform: translateX(-50%); z-index: 4; pointer-events: none; }
.cam .narr .n { position: absolute; left: 0; right: 0; top: 0; text-align: center; opacity: 0; visibility: hidden; transform: translate3d(0, -50%, 0); will-change: transform, opacity; }
/* un halo oscuro detrás de la frase: se lee sobre el lente sin taparlo */
.cam .narr .n::before { content: ''; position: absolute; left: 50%; top: 50%; width: 130%; height: 240%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(0,0,0,.62), rgba(0,0,0,.3) 55%, rgba(0,0,0,0)); z-index: -1; }
.cam .narr b { display: block; text-wrap: balance; font-family: var(--disp); font-weight: 600; font-size: clamp(34px, 4.6vw, 76px); letter-spacing: -.035em; line-height: 1.02; color: #fff; text-shadow: 0 4px 34px rgba(0,0,0,.6); }
.cam .narr span { display: block; text-wrap: balance; margin: 18px auto 0; max-width: 34em; color: #d2d2d7; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.45; text-shadow: 0 2px 18px rgba(0,0,0,.85); will-change: transform; }
@media (max-width: 760px) {
  .cam .narr { width: calc(100vw - 2 * var(--gutter)); top: 47%; }
  .cam .narr b { font-size: 31px; line-height: 1.04; }
  .cam .narr span { margin-top: 12px; font-size: 14px; max-width: 22em; }
  .cam .narr .n::before { width: 120%; height: 200%; }
}

/* portada → lente: la luz se apaga suave en vez de cortar */
#hero .person { transition: opacity .9s ease; } /* sólo la entrada de Ale al cargar; la salida la maneja el scroll */

/* Edición: lista de 10 proyectos */
#corte .projs { position: absolute; left: var(--gutter); top: 42%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 7px; width: 22vw; max-width: 300px; }
#corte .projs span { color: var(--ink2); cursor: pointer; line-height: 1.45; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; transition: color .25s; padding-left: 18px; position: relative; }
#corte .projs span::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: rgba(255,255,255,.35); transition: background .25s, width .25s; }
#corte .projs span:hover, #corte .projs span.on { color: #fff; }
#corte .projs span.on::before { width: 12px; background: #fff; }
@media (max-width: 760px) {
  #corte .mon { left: 50%; width: 92vw; top: 44%; }
  #corte .projs { left: var(--gutter); right: var(--gutter); top: 22vh; transform: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 16px; width: auto; max-width: none; white-space: nowrap; padding-bottom: 6px; scrollbar-width: none; }
  #corte .projs span { padding-left: 0; }
  #corte .projs span::before { display: none; }
}
@media (max-width: 760px) { #corte .tc { right: 36%; } #corte .mon { top: 47%; } }

/* ---------- títulos: las letras con cola (g, j, p) ya no se cortan en la máscara ---------- */
.mask { padding-bottom: .14em; margin-bottom: -.14em; }
.mask > span { transform: translateY(128%); }

/* ---------- teléfono: orden y proporción (1 oct). En computadora no cambia nada. ---------- */
@media (max-width: 820px) {
  /* pie de cada escena: en columna, con aire sobre el nombre de la sección y sin partir los contadores */
  .cap { flex-direction: column; align-items: flex-start; gap: 6px; bottom: 7.5vh; }
  .cap .r { text-align: left; }
  .mundo .cap { bottom: 6vh; }
  .mundo .ph { height: 58vh; height: 58svh; top: 47%; }
  .mundo .ph.pan { height: 50vh; height: 50svh; }
  .cam .spec { bottom: 7.5vh; }

  /* Dron: degradados que dejan leer el título y el pie sobre el cielo; los clips aéreos en un cuadro 4:5 centrado */
  #dron .stage::before, #dron .stage::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
  #dron .stage::before { top: 0; height: 30vh; background: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,0)); }
  #dron .stage::after { bottom: 0; height: 26vh; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.72)); }
  #dron .stage .title, #dron .stage .cap, #dron .aer .cap { z-index: 3; }
  #dron .aer .clip video { position: absolute; left: 0; top: 49%; transform: translateY(-50%); width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }

  /* Films: el video arriba y el título debajo, sin encimarse */
  .film .v { top: 40.5svh; height: 55svh; }
  .film .v.v169 { width: calc(100vw - 32px); height: auto; }
  .film .v.v43 { width: calc(100vw - 32px); height: auto; }
  .film .v.v43 video { width: 100%; height: auto; }
  .film .meta { bottom: 12.5vh; right: var(--gutter); }
  .film .meta .h { font-size: 26px; }

  /* El corte: la tira de planos, el código de tiempo y el conteo en tres renglones que no se pisan; la lista avisa que sigue */
  #corte .tl { bottom: 17vh; }
  #corte .tc { right: var(--gutter); bottom: 10vh; }
  #corte .cnt { left: var(--gutter); right: auto; bottom: 6.5vh; text-align: left; }
  #corte .projs { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }

  /* Color: título, película, forma de onda y pie, cada uno en su franja */
  #color .look video, #color .look img { top: 21svh; left: 50%; transform: translateX(-50%); width: calc(100vw - 32px); height: auto; }
  #color .look.v916 video { top: 21svh; left: 50%; transform: translateX(-50%); height: 40svh; width: auto; }
  #color .look.v43 video { width: calc(100vw - 32px); height: auto; }
  #color .scopes { top: 64svh; bottom: auto; grid-template-columns: 1fr; }
  #color .scopes canvas.wf { aspect-ratio: 3/1; }
  #color .scopes canvas.vs { display: none; }

  /* Sonido: el video bajo el título, el botón de escuchar encima del video y las bandas solas abajo */
  #sonido .mon { top: 21svh; transform: translateX(-50%); height: 36svh; }
  #sonido .listen { right: auto; bottom: auto; left: 50%; top: calc(21svh + 18svh); transform: translate(-50%, -50%); flex-direction: column; gap: 6px; background: rgba(0,0,0,.45); padding: 12px 14px; border-radius: 14px; }
  #sonido .cap { top: calc(21svh + 36svh + 3vh) !important; bottom: auto; }
  #sonido .wave { bottom: 14vh; height: 72px; }
  #sonido .bands { bottom: 7.5vh; gap: 18px; }

  /* Web: el teléfono debajo del título */
  #web .phone { top: 47.5svh; height: 55svh; }

  /* contacto y pie alineados a la izquierda, en columna */
  body .contact .links { text-align: left; }
  footer { flex-direction: column; gap: 8px; padding-bottom: 40px; }
  body.past .ui-bl, body.past .ui-br { opacity: 0; transition: opacity .3s; }
}
@media (max-width: 760px) { #corte .tc { right: var(--gutter); } }

/* ---------- teléfono, fluidez (1 oct, ronda 2) ---------- */
@media (max-width: 820px) {
  /* barra fija sin «diferencia»: el color cambia según el fondo de la sección (main.js → uiTone) */
  .ui { mix-blend-mode: normal; color: #f5f5f7; transition: color .35s; }
  .ui .audio i { border-color: currentColor; } .ui .audio.on i { background: currentColor; }
  body.ui-dark .ui { color: #1d1d1f; }
  .progress i { mix-blend-mode: normal; background: #f5f5f7; }
  body.ui-dark .progress i { background: #1d1d1f; }
  /* Mundos: la foto se abre con dos franjas que se corren (sin clip-path, que repinta la foto en cada cuadro) */
  .mundo .ph { overflow: hidden; will-change: transform; }
  .mundo .ph .bar { position: absolute; left: -1px; right: -1px; height: 50.5%; background: #000; z-index: 2; pointer-events: none; will-change: transform; }
  .mundo .ph .bar.t { top: -1px; } .mundo .ph .bar.b { bottom: -1px; }
}
@media (max-width: 820px) {
  /* Color: onda precalculada (tira de 12 cuadros) en vez de leer los píxeles del video */
  #color .scopes .wfm { width: 100%; aspect-ratio: 3/1; background: #000 no-repeat 0 0 / 100% 1200%; border: 1px solid var(--line); }
  /* Dron: un solo video con los 7 cortes, en el mismo cuadro 4:5 */
  #dron .aer .clip { display: none !important; }
  #dron .aer .reel { position: absolute; left: 0; top: 49%; transform: translateY(-50%); width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; background: #000; }
}
}
@media (max-width: 820px) {
  /* Color: la forma de onda se apoya justo encima del pie (su alto cambia con cada película; main.js lo mide en --caph) */
  #color .scopes { top: auto; bottom: calc(7.5vh + var(--caph, 84px) + 14px); }
  /* y la película usa sólo el alto que queda entre el título y la onda (en un iPhone SE la vertical se montaba sobre la onda) */
  #color .stage { --wfh: calc((100vw - 2 * var(--gutter)) / 3 + 2px); --vidh: calc(100svh - 21svh - 7.5vh - var(--caph, 84px) - var(--wfh) - 28px); }
  #color .look video, #color .look img { width: min(calc(100vw - 32px), calc(var(--vidh) * 16 / 9)); }
  #color .look.v916 video { height: min(40svh, var(--vidh)); width: auto; }
  #color .look.v43 video { width: min(calc(100vw - 32px), calc(var(--vidh) * 4 / 3)); }
}

/* ================= Cine: el recorrido ================= */
/* el capítulo activo enciende una sola pieza: etiqueta junto a su punto (main.js → labelsTag) */
.cam .labels.tag .lab .tx { top: 0; left: 20px; right: auto; transform: translateY(-50%); margin: 0; border: 0; padding: 7px 10px; background: rgba(0,0,0,.72); border-radius: 3px; white-space: normal; width: max-content; max-width: min(290px, 60vw); text-align: left; }
.cam .labels.tag .lab.l .tx { left: auto; right: 20px; text-align: right; }
.cam .labels.tag .lab .tx b { font-size: 11px; }
.cam .labels.tag .lab .tx span { font-size: 10.5px; color: #c7c7cc; margin-top: 2px; }
.cam .labels.tag .lab i { width: 9px; height: 9px; margin: -4.5px; box-shadow: 0 0 0 5px rgba(255,255,255,.18); }
.cam .labels.tag .lab u { position: absolute; top: 0; left: 6px; width: 14px; height: 1px; background: rgba(255,255,255,.6); }
.cam .labels.tag .lab.l u { left: auto; right: 6px; }
/* el título y el primer capítulo van sobre la foto del set (con un velo a la izquierda para leerse) */
#cine .title { z-index: 6; }
#cine .bts::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.42) 36%, rgba(0,0,0,0) 62%); }
#cine .story { position: absolute; left: var(--gutter); top: 35vh; width: min(30vw, 440px); height: 0; z-index: 6; pointer-events: none; }
#cine .story .ch { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; will-change: transform, opacity; }
#cine .story .y { display: block; font-family: var(--disp); font-weight: 600; font-size: clamp(56px, 6vw, 104px); letter-spacing: -.05em; line-height: .9; color: #fff; }
#cine .story .k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
#cine .story b { display: block; margin-top: 12px; font-family: var(--disp); font-weight: 600; font-size: clamp(26px, 2.4vw, 40px); letter-spacing: -.03em; line-height: 1.06; color: #fff; text-wrap: balance; }
#cine .story p { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: #c7c7cc; text-wrap: pretty; }
#cine .story .cta { pointer-events: auto; color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 3px; }
#cine .story .cta:hover { border-color: #fff; }
/* cronograma: barras (histograma por mes) sobre el eje, dos franjas debajo y los años */
#cine .rail { position: absolute; left: var(--gutter); bottom: 12vh; width: min(30vw, 440px); height: 104px; z-index: 6; pointer-events: none; }
#cine .rail .lg { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--ink2); }
#cine .rail .bars { position: absolute; left: 0; right: 0; top: 20px; height: 30px; }
#cine .rail .bars i { position: absolute; bottom: 0; width: 3px; margin-left: -1.5px; background: rgba(255,255,255,.2); transition: background-color .3s linear; }
#cine .rail .bars i.on { background: #fff; }
#cine .rail .axis { position: absolute; left: 0; right: 0; top: 50px; height: 1px; background: rgba(255,255,255,.22); }
#cine .rail .band { position: absolute; right: 0; height: 2px; background: rgba(255,255,255,.1); }
#cine .rail .band.b0 { top: 8px; } #cine .rail .band.b1 { top: 24px; }
#cine .rail .band u { position: absolute; inset: 0; background: rgba(255,255,255,.8); transform-origin: 0 50%; transform: scaleX(0); }
#cine .rail .band span { position: absolute; left: 0; top: 5px; font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
#cine .rail .yr { position: absolute; top: 44px; transform: translateX(-50%); font: 400 10px/1 var(--mono); letter-spacing: .06em; color: var(--ink2); }
#cine .rail .yr:first-of-type { transform: none; } #cine .rail .yr.hoy { transform: translateX(-100%); color: #fff; }
#cine .rail .head { position: absolute; left: 0; top: 14px; width: 1px; height: 52px; background: #fff; will-change: transform; }
#cine .rail .head::after { content: ''; position: absolute; left: -4px; top: 32px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
@media (max-width: 760px) {
  #cine .bts::after { background: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.5) 42%, rgba(0,0,0,.12) 72%); }
  #cine .story { left: var(--gutter); right: var(--gutter); width: auto; top: calc(14vh + 13vw + 6px); }
  #cine .story .y { font-size: 34px; }
  #cine .story b { margin-top: 4px; font-size: 20px; }
  #cine .story p { margin-top: 7px; font-size: 13px; line-height: 1.4; }
  #cine .spec { display: none; }
  /* cronograma compacto: sin nombres en las franjas */
  #cine .rail { left: var(--gutter); right: var(--gutter); width: auto; bottom: 6.5vh; height: 58px; }
  #cine .rail .bars { top: 14px; height: 22px; }
  #cine .rail .axis { top: 36px; }
  #cine .rail .band.b0 { top: 3px; } #cine .rail .band.b1 { top: 7px; }
  #cine .rail .band span { display: none; }
  #cine .rail .yr { top: 12px; font-size: 9px; }
  #cine .rail .head { top: 10px; height: 34px; }
  #cine .rail .head::after { top: 22px; }
  /* la etiqueta de la pieza: arriba o abajo del punto (main.js la mantiene dentro de la pantalla) */
  .cam .labels.tag .lab .tx { transform: none; width: max-content; max-width: min(250px, calc(100vw - 32px)); }
  .cam .labels.tag .lab u { left: 0; width: 1px; height: 10px; }
  .cam .labels.tag .lab.l .tx { right: auto; text-align: left; }
}
.cam .labels.tag .lab i { z-index: 2; }