:root { --gold:#327061; --teal:hsl(156,28%,30%); --bg:#070707; --fg:#fff; --mut:rgba(255,255,255,.42); --faint:rgba(255,255,255,.14); --ease:cubic-bezier(.2,.7,.1,1); }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--fg); font:300 14px/1.7 Jost,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.mono { font-family:"Courier Prime",monospace; font-size:11px; letter-spacing:.08em; color:var(--mut); text-transform:uppercase; }
.small { font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--mut); }
.label { display:block; margin-bottom:40px; }
.wrap { padding:0 4vw; }

/* ---------- barra + menú ---------- */
header { position:fixed; inset:0 0 auto 0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:26px 4vw; mix-blend-mode:difference; }
header .brand { color:#fff; }
header nav { display:flex; gap:32px; }
header nav a, header button { font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:#fff; opacity:.7; transition:opacity .4s; }
header nav a:hover, header nav a.on { opacity:1; }
header button { background:none; border:0; font:inherit; font-size:11px; cursor:pointer; display:none; opacity:1; }
.menu { position:fixed; inset:0; z-index:15; background:rgba(7,7,7,.97); display:flex; flex-direction:column; justify-content:center; padding:0 12vw; gap:18px;
        opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }
.menu.open { opacity:1; pointer-events:auto; }
.menu a { font-weight:200; font-size:clamp(2rem,8vw,4.5rem); letter-spacing:.12em; text-transform:uppercase; line-height:1.1; color:var(--mut); }
.menu a:hover { color:#fff; }

/* ---------- entrada (home) ---------- */
.intro { height:86vh; min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; }
.intro .bgvid { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 60%, #0e1513 0%, #070707 70%); }
.intro .bgvid::after { content:"[ montaje de clips TDN + Padre · en bucle · muy oscurecido ]"; position:absolute; bottom:64px; left:0; right:0; font:11px "Courier Prime",monospace; color:rgba(255,255,255,.12); }
.intro h1 { position:relative; font-weight:200; font-size:clamp(1.8rem,5.6vw,5.4rem); letter-spacing:.42em; margin-right:-.42em; text-transform:uppercase; line-height:1.15; }
.intro p { position:relative; margin-top:28px; }
.intro .down { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-size:18px; color:var(--mut); animation:bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform:translate(-50%,6px); } }
.fade { opacity:0; animation:in 1.6s var(--ease) forwards; } .fade.d2 { animation-delay:.6s; }
@keyframes in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---------- clips (imagen B/N → color) ---------- */
.clip { position:relative; display:block; overflow:hidden; background:#111; cursor:none; }
.clip .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform:scale(1.001);
            filter:grayscale(1) brightness(.55); transition:filter 1.2s var(--ease), transform 1.6s var(--ease); }
.clip .ph span { font:11px "Courier Prime",monospace; color:rgba(255,255,255,.45); letter-spacing:.1em; text-align:center; padding:0 8px; }
.clip:hover .ph, .clip.seen .ph { filter:none; transform:scale(1.025); }
@media (hover:hover) { .clip.seen .ph { filter:grayscale(1) brightness(.55); transform:scale(1.001); } .clip.seen:hover .ph { filter:none; transform:scale(1.025); } }
.clip .tc { position:absolute; bottom:8px; right:10px; font:10px "Courier Prime",monospace; color:rgba(255,255,255,.5); }
.hero { aspect-ratio:2.39/1; }
.clips { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2vw; margin-top:1.2vw; }
.clips .clip { aspect-ratio:16/9; }

.c1 { background:linear-gradient(160deg,#2da387 0%,#166250 45%,#0d1715 100%); }
.c2 { background:linear-gradient(170deg,#6fb5d6 0%,#30deb5 55%,#269178 100%); }
.c3 { background:linear-gradient(160deg,#12eeba 0%,#e6567a 60%,#3a2350 100%); }
.c4 { background:linear-gradient(170deg,#2f5b3a 0%,#8a2c1f 60%,#0f0f0f 100%); }
.c5 { background:linear-gradient(160deg,#e98fb4 0%,#6a8fd8 55%,#1c2340 100%); }
.c6 { background:linear-gradient(170deg,#1bbb96 0%,#3a4a7a 60%,#0f0f16 100%); }

.cursor { position:fixed; z-index:30; left:0; top:0; width:72px; height:72px; margin:-36px 0 0 -36px; border:1px solid rgba(255,255,255,.8); border-radius:50%;
          display:flex; align-items:center; justify-content:center; font-size:10px; letter-spacing:.25em; text-transform:uppercase; pointer-events:none;
          opacity:0; transform:scale(.6); transition:opacity .4s, transform .4s var(--ease); }
.cursor.on { opacity:1; transform:scale(1); }

/* ---------- home: últimos trabajos ---------- */
.work { padding:10vh 4vw 0; }
.proj { margin-bottom:12vh; }
.meta { display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end; margin-top:28px; }
.meta h2 { font-weight:200; font-size:clamp(1.4rem,2.8vw,2.4rem); letter-spacing:.2em; text-transform:uppercase; line-height:1.15; margin-top:8px; }
.meta .facts { text-align:right; display:flex; flex-direction:column; gap:4px; }
.more { display:flex; justify-content:center; padding:0 4vw 16vh; }
.cta { font-size:11px; letter-spacing:.32em; text-transform:uppercase; border-bottom:1px solid var(--faint); padding-bottom:6px; transition:border-color .6s, letter-spacing .8s var(--ease); }
.cta:hover { border-color:#fff; letter-spacing:.4em; }

/* ---------- cabecera de página interior ---------- */
.pagehead { padding:20vh 4vw 8vh; }
.pagehead h1 { font-weight:200; font-size:clamp(2.2rem,6vw,5rem); letter-spacing:.16em; text-transform:uppercase; line-height:1.05; margin-top:14px; }
.pagehead .lead { margin-top:24px; max-width:56ch; font-weight:200; font-size:clamp(1rem,1.5vw,1.2rem); color:rgba(255,255,255,.75); }
.back { display:inline-block; margin-bottom:28px; transition:color .4s; }
.back:hover { color:#fff; }

/* ---------- portfolio ---------- */
.filters { display:flex; flex-wrap:wrap; gap:8px 28px; padding:0 4vw 6vh; }
.filters button { background:none; border:0; border-bottom:1px solid transparent; color:var(--mut); font:inherit; font-size:11px; letter-spacing:.32em; text-transform:uppercase; padding-bottom:5px; cursor:pointer; transition:color .4s, border-color .4s; }
.filters button:hover { color:#fff; }
.filters button.on { color:#fff; border-color:#fff; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5vh 2.4vw; padding:0 4vw 16vh; }
.card .clip { aspect-ratio:2/3; }
.card h2 { font-weight:200; font-size:clamp(1.05rem,1.5vw,1.35rem); letter-spacing:.16em; text-transform:uppercase; line-height:1.2; margin-top:16px; }
.card .mono { display:block; margin-top:6px; }
.card.hide { display:none; }

/* ---------- ficha de proyecto ---------- */
.detail { display:grid; grid-template-columns:minmax(260px,1fr) 1.4fr; gap:6vw; padding:8vh 4vw; }
.spec div { display:grid; grid-template-columns:120px 1fr; gap:20px; padding:10px 0; border-top:1px solid var(--faint); }
.spec dt { font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--mut); padding-top:3px; }
.spec dd { font-size:14px; }
.text p { font-weight:300; font-size:16px; color:rgba(255,255,255,.8); margin-bottom:18px; max-width:62ch; }
.pnav { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; padding:10vh 4vw 8vh; border-top:1px solid var(--faint); margin-top:8vh; }
.pnav a { transition:color .4s; }
.pnav a:hover { color:#fff; }
.pnav .prev h3, .pnav .next h3 { font-weight:200; font-size:clamp(1rem,1.8vw,1.5rem); letter-spacing:.14em; text-transform:uppercase; margin-top:6px; color:#fff; }
.pnav .next { text-align:right; }

/* ---------- trayectoria ---------- */
.block { padding:6vh 4vw; }
.block > .small { display:block; margin-bottom:22px; }
.row { display:grid; grid-template-columns:150px 1fr auto; gap:28px; padding:16px 0; border-top:1px solid var(--faint); align-items:baseline; }
.row h3 { font-weight:200; font-size:clamp(1.05rem,1.7vw,1.4rem); letter-spacing:.04em; line-height:1.35; }
.row p { color:var(--mut); font-size:13px; margin-top:2px; }
.row .where { text-align:right; }
.row.l2 h3 { font-size:15px; font-weight:300; color:rgba(255,255,255,.8); }

/* ---------- servicios ---------- */
.offer { padding:10vh 4vw; border-top:1px solid var(--faint); }
.offer .in { max-width:760px; }
.offer.r .in { margin-left:auto; }
.offer .num { font-weight:200; font-size:clamp(3rem,7vw,6rem); line-height:1; color:rgba(255,255,255,.08); letter-spacing:.1em; }
.offer h2 { font-weight:200; font-size:clamp(1.5rem,3.2vw,2.6rem); letter-spacing:.16em; text-transform:uppercase; line-height:1.15; margin:14px 0 22px; }
.offer .lead { font-weight:200; font-size:clamp(1rem,1.5vw,1.25rem); max-width:46ch; color:rgba(255,255,255,.8); }
.offer .spec { margin:44px 0 40px; }

/* ---------- contacto ---------- */
.contactpage { min-height:78vh; display:flex; flex-direction:column; justify-content:center; padding:20vh 4vw 10vh; }
.contactpage .mail { font-weight:200; font-size:clamp(1.4rem,4.4vw,3.6rem); letter-spacing:.08em; border-bottom:1px solid var(--faint); align-self:flex-start; transition:border-color .6s; margin:20px 0 40px; }
.contactpage .mail:hover { border-color:#fff; }
.contactpage .links { display:flex; gap:32px; flex-wrap:wrap; }

footer { padding:28px 4vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.3); border-top:1px solid var(--faint); }
footer a:hover { color:#fff; }


/* ---------- v3: imágenes reales, vídeo, logos ---------- */
.ph.img { background-size:cover; background-position:center; }
.card .ph { background-size:cover; background-position:center; }
.ph.type { flex-direction:column; gap:10px; padding:16px; background:linear-gradient(170deg,#1b1b1b,#0b0b0b); border:1px solid var(--faint); filter:none !important; transform:none !important; }
.ph.type b { font-weight:200; font-size:clamp(1rem,1.8vw,1.5rem); letter-spacing:.2em; text-transform:uppercase; text-align:center; line-height:1.3; color:#fff; }
.ph.type i { font:11px "Courier Prime",monospace; font-style:normal; color:var(--mut); }
.clip.play { cursor:pointer; }
.playbtn { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:76px; height:76px; border:1px solid rgba(255,255,255,.85); border-radius:50%;
           display:flex; align-items:center; justify-content:center; font-size:18px; padding-left:4px; pointer-events:none; transition:transform .6s var(--ease), background .6s; }
.clip.play:hover .playbtn { transform:translate(-50%,-50%) scale(1.08); background:rgba(255,255,255,.08); }
.clip.playing { background:#000; }
.clip.playing iframe, .clip.playing video { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.clip.still .ph { filter:grayscale(.3) brightness(.8); }
.watchrow { display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
.watch { display:inline-flex; align-items:center; gap:12px; border:1px solid var(--faint); padding:10px 16px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; transition:border-color .5s, background .5s; }
.watch:hover { border-color:#fff; background:rgba(255,255,255,.05); }
.watch img { height:16px; width:auto; max-width:90px; filter:brightness(0) invert(1); opacity:.9; }
.meta .facts { align-items:flex-end; gap:12px; }
.meta .sum { color:rgba(255,255,255,.65); max-width:52ch; margin-top:12px; font-size:15px; }
.sub2 { font-weight:200; font-size:clamp(1rem,2vw,1.6rem); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:10px; }
.reels { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2vw; margin-bottom:6vh; }
.reels video { width:100%; aspect-ratio:9/16; object-fit:cover; background:#111; }
.strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2vw; margin-bottom:6vh; }
.strip .clip { aspect-ratio:3/2; cursor:auto; }

/* portada */
.intro .bgimg { position:absolute; inset:0; background-size:cover; background-position:center; filter:grayscale(1) brightness(.28); transform:scale(1.04); animation:slow 24s ease-out forwards; }
@keyframes slow { to { transform:scale(1); } }
.intro .bgimg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(7,7,7,.75) 80%); }
.intro .tagline { position:relative; margin-top:30px; max-width:46ch; font-weight:200; font-size:clamp(.98rem,1.5vw,1.2rem); line-height:1.6; color:rgba(255,255,255,.85); padding:0 20px; }
.intro .tagline b { font-weight:300; letter-spacing:.06em; }
.seen-on { display:flex; justify-content:center; align-items:center; gap:clamp(28px,6vw,72px); flex-wrap:wrap; padding:6vh 4vw 4vh; }
.seen-on span { width:100%; text-align:center; }
.seen-on img { height:20px; width:auto; filter:brightness(0) invert(1); opacity:.55; }
#rodaje { padding:4vh 4vw 10vh; }


/* ---------- v4: obra a color; al pasar, crece un poco ---------- */
.clip .ph, .clip.seen .ph, .clip.seen:hover .ph { filter:none; }
.clip:hover .ph, .clip.seen:hover .ph { transform:scale(1.05); }
.card .clip { transition:box-shadow .8s var(--ease); }
.card:hover .clip { box-shadow:0 30px 60px rgba(0,0,0,.6); }
.offer .ref { margin:36px 0 40px; }
.offer .ref a { color:#fff; border-bottom:1px solid var(--faint); }
.card h2 { font-size:clamp(.95rem,1.25vw,1.15rem); letter-spacing:.1em; }

/* ---------- trayectoria: miniaturas y créditos ---------- */
.thumbs { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.thumbs figure { margin:0; width:160px; }
.thumbs img { display:block; width:160px; height:90px; object-fit:cover; background:#111; transition:transform .6s var(--ease); }
.thumbs figure:hover img { transform:scale(1.06); }
.thumbs figcaption { font:10px "Courier Prime",monospace; color:var(--mut); letter-spacing:.06em; margin-top:6px; text-transform:uppercase; }
.credits2 { display:grid; grid-template-columns:150px 1fr; gap:14px 28px; padding:22px 0 6px; border-top:1px solid var(--faint); }
.credits2 > div { display:contents; }
.credits2 p { font-weight:200; font-size:clamp(.95rem,1.3vw,1.1rem); letter-spacing:.06em; line-height:1.9; color:rgba(255,255,255,.85); }
.lnk { border-bottom:1px solid var(--faint); color:#fff; }

/* ---------- detrás de la cámara ---------- */
#rodaje .strip { grid-template-columns:repeat(auto-fill,minmax(260px,380px)); gap:2vw; }
.shot { margin:0; }
.shot img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.2s var(--ease); }
.shot { overflow:hidden; }
.shot:hover img { transform:scale(1.04); }
.shot figcaption { display:block; margin-top:12px; }

/* ---------- trayectoria: bio con foto ---------- */
.bio { display:grid; grid-template-columns:minmax(220px,340px) 1fr; gap:5vw; align-items:end; padding:0 4vw 8vh; }
.bio p { font-weight:200; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.7; color:rgba(255,255,255,.85); max-width:54ch; margin-bottom:16px; }
.seen-on .studios { width:100%; text-align:center; font-weight:200; font-size:clamp(.8rem,1.1vw,.95rem); letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); line-height:2.2; margin-top:4px; }
.seen-on img.tall { height:34px; }
/* logos que llegan como foto sobre fondo claro: se invierten y el fondo se funde con el negro */
.seen-on img.photo { height:56px; filter:grayscale(1) invert(1) contrast(1.8) brightness(1.15); mix-blend-mode:screen; opacity:.6; }
.seen-on img.tall { height:56px; }
/* logos sobre fondo negro: a blanco y el fondo se funde */
.seen-on img.onblack { height:18px; filter:grayscale(1) brightness(1.8); mix-blend-mode:screen; opacity:.6; }

/* ---------- galería de fotografía en la ficha ---------- */
.gal { padding-bottom:4vh; }
.galgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,420px)); gap:2vw; }
.galgrid .shot img { aspect-ratio:auto; height:auto; }
.galpie { margin-top:16px; max-width:60ch; }
.galgrid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.dos img { transition:opacity .4s; }
.vers { display:flex; gap:16px; margin-top:12px; }
.vers button { background:none; border:0; border-bottom:1px solid transparent; color:var(--mut); font:10px "Courier Prime",monospace; letter-spacing:.12em; text-transform:uppercase; padding:0 0 4px; cursor:pointer; }
.vers button:hover { color:#fff; }
.vers button.on { color:#fff; border-color:#fff; }
.galfoot { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-top:22px; }
.galfoot .mono { max-width:60ch; }

/* ---------- fotografía ---------- */
.photogrid { grid-template-columns:repeat(2,minmax(0,420px)); }
.detail .shot img { aspect-ratio:auto; }
.dossier { padding:2vh 4vw 6vh; display:flex; flex-direction:column; gap:6vh; }
.ds-slide { position:relative; aspect-ratio:16/9; background:#0d0d0d; border:1px solid var(--faint); }
.ds-img { position:absolute; margin:0; overflow:hidden; }
.ds-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.ds-img:hover img { transform:scale(1.04); }
.ds-title, .ds-sub, .ds-label { position:absolute; white-space:nowrap; display:flex; align-items:center; }
.ds-title { font-weight:300; font-size:clamp(.9rem,2.3vw,2rem); letter-spacing:.24em; text-transform:uppercase; justify-content:center; width:auto !important; left:0 !important; right:0; }
.ds-title i { font-style:normal; color:var(--mut); }
.ds-sub { font-weight:300; font-size:clamp(.6rem,1.3vw,1.1rem); letter-spacing:.2em; text-transform:uppercase; }
.ds-label { font:clamp(8px,.95vw,12px) "Courier Prime",monospace; color:var(--mut); letter-spacing:.06em; }
.ds-title i { margin:0 .6em; }
.shot.wide { max-width:900px; margin:0 auto; } .shot.wide img { aspect-ratio:auto; } .photogrid { grid-template-columns:repeat(3,minmax(0,380px)); } 
.shot.wide.vert { max-width:560px; }
.minis { display:flex; flex-wrap:wrap; gap:1.2vw; margin-bottom:6vh; } .minis .shot { width:min(420px,100%); } .minis .shot img { aspect-ratio:auto; }

/* ---------- en pantalla: fotograma vs. foto original ---------- */
.pantalla { padding-bottom:6vh; }
.pgrid { display:grid; grid-template-columns:2.39fr .67fr; gap:2vw; align-items:end; }
.pgrid .shot img { aspect-ratio:auto; }
.pgrid figcaption { display:block; margin-top:10px; }
.frame { position:relative; }
.frame .mark { position:absolute; left:87.6%; top:79.5%; width:7.6%; height:20%; border:1px solid rgba(255,255,255,.85); box-shadow:0 0 0 9999px rgba(0,0,0,.25); pointer-events:none; }
.fwrap { position:relative; overflow:hidden; } .frame { position:static; } .frame .mark { left:87.8%; top:80.5%; width:7%; height:19.5%; }






/* ---------- matices dorado y turquesa (mínimos) ---------- */
.cta:hover { border-color:var(--gold); }
.watch:hover { border-color:var(--gold); }
.spec dt { color:color-mix(in srgb, var(--teal) 55%, var(--mut)); }
.lnk:hover, .pnav a:hover h3 { color:var(--gold); }

/* ---------- antología: tiras de película ---------- */
.film { --h:16px; display:flex; flex-direction:column; gap:5vh; padding:0 8vw 16vh; }
.tira { position:relative; display:grid; grid-template-columns:repeat(8,1fr); gap:6px; padding:var(--h) 6px; background:#0e0d0b;
        background-image:radial-gradient(ellipse 5px 4px at center, var(--bg) 92%, transparent 100%), radial-gradient(ellipse 5px 4px at center, var(--bg) 92%, transparent 100%);
        background-size:18px var(--h), 18px var(--h); background-position:0 0, 0 100%; background-repeat:repeat-x;
        box-shadow:0 0 0 1px rgba(50,112,97,.25); }
.tira:nth-child(even) { transform:rotate(-.35deg); } .tira:nth-child(odd) { transform:rotate(.25deg); }
.fr { position:relative; margin:0; aspect-ratio:1.37; overflow:hidden; cursor:zoom-in; outline:none; background:#000; }
.fr img { width:100%; height:100%; object-fit:cover; display:block; filter:sepia(.35) saturate(.75) contrast(1.05) brightness(.9); transition:filter .5s var(--ease), transform .8s var(--ease); }
.fr::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 18px rgba(0,0,0,.75); pointer-events:none; }
.fr .num { position:absolute; left:4px; bottom:2px; font:9px "Courier Prime",monospace; color:var(--teal); opacity:.9; z-index:1; }
.fr:hover img, .fr:focus img { filter:none; transform:scale(1.05); }
.fr:focus-visible { box-shadow:0 0 0 1px var(--gold); }

/* ficha: igual para todas, 80 % del ancho */
.ficha { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.78);
         opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s .35s; }
.ficha.on { opacity:1; visibility:visible; transition:opacity .35s var(--ease); }
.ficha-in { position:relative; width:80vw; height:72vh; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:3vw; padding:3vh 3vw;
            background:var(--bg); border:1px solid var(--gold); transform:scale(.97); transition:transform .45s var(--ease); }
.ficha.on .ficha-in { transform:none; }
.ficha-img { min-height:0; display:flex; align-items:center; justify-content:center; background:#000; }
.ficha-img img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.ficha-txt { align-self:end; min-width:0; }
.ficha-txt h2 { font-weight:200; font-size:clamp(1.6rem,2.6vw,2.6rem); letter-spacing:.14em; text-transform:uppercase; line-height:1.1; margin:10px 0 24px; }
.ficha-txt p { font-weight:300; font-size:15px; line-height:1.6; color:rgba(255,255,255,.8); margin-top:22px; max-width:40ch; }
.ficha-x { position:absolute; top:14px; right:18px; background:none; border:0; color:var(--mut); font:inherit; font-size:11px; letter-spacing:.32em; text-transform:uppercase; cursor:pointer; }
.ficha-x:hover { color:var(--gold); }

/* ficha con marco de película */
.ficha-in { padding:46px 34px; border-radius:4px; border:1px solid var(--gold);
            background:url(assets/film/vel-3.svg) center/100% 100%,
                       url(assets/film/grano.svg), linear-gradient(180deg,#102621,#16322b 50%,#0e231e); }
.ficha-img { border-radius:4px; overflow:hidden; position:relative; box-shadow:inset 0 0 0 1px rgba(184,184,184,.15); }
.ficha-txt { background:rgba(7,7,7,.55); padding:24px; border-radius:4px; }
.ficha-x { top:16px; right:22px; color:#b8b8b8; background:rgba(7,7,7,.6); padding:4px 8px; }

/* ---------- antología v3: celuloide viejo transparente, bordes gastados, veladuras ---------- */
.film { --fh:30px; gap:2.2vh; padding:2vh 6vw 16vh; }
.tira { position:relative; gap:10px; padding:var(--fh) 12px; background:none; box-shadow:none; border-radius:0; }
/* base: acetato amarillento casi transparente, con perforaciones caladas y bordes irregulares */
.tira::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(assets/film/grano.svg), linear-gradient(180deg, rgba(175,175,175,.20), rgba(61,186,157,.15) 50%, rgba(175,175,175,.22));
  -webkit-mask:url(assets/film/borde-1.svg) 0 0/100% 100% no-repeat, url(assets/film/agujero.svg) 0 5px/26px 18px repeat-x, url(assets/film/agujero.svg) 0 calc(100% - 5px)/26px 18px repeat-x;
  -webkit-mask-composite:xor; mask-composite:exclude; }
.tira:nth-child(2)::before { -webkit-mask-image:url(assets/film/borde-2.svg), url(assets/film/agujero.svg), url(assets/film/agujero.svg); mask-image:url(assets/film/borde-2.svg), url(assets/film/agujero.svg), url(assets/film/agujero.svg); }
.tira:nth-child(3)::before { -webkit-mask-image:url(assets/film/borde-3.svg), url(assets/film/agujero.svg), url(assets/film/agujero.svg); mask-image:url(assets/film/borde-3.svg), url(assets/film/agujero.svg), url(assets/film/agujero.svg); }
/* veladura de la tira entera (incluye bordes y fotogramas) */
.tira::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.8;
  background:url(assets/film/tira-vel-1.svg) center/100% 100% no-repeat;
  -webkit-mask:url(assets/film/borde-1.svg) 0 0/100% 100% no-repeat; mask:url(assets/film/borde-1.svg) 0 0/100% 100% no-repeat; }
.tira:nth-child(2)::after { background-image:url(assets/film/tira-vel-2.svg); -webkit-mask-image:url(assets/film/borde-2.svg); mask-image:url(assets/film/borde-2.svg); }
.tira:nth-child(3)::after { background-image:url(assets/film/tira-vel-3.svg); -webkit-mask-image:url(assets/film/borde-3.svg); mask-image:url(assets/film/borde-3.svg); }
.fr { aspect-ratio:1.37; border-radius:3px; overflow:visible; background:#060e0c; z-index:1; transition:transform .45s cubic-bezier(.3,1.4,.5,1), box-shadow .45s; }
.fr img { border-radius:3px; filter:sepia(.5) saturate(.72) contrast(1.08) brightness(.84); }
.fr::before { content:""; position:absolute; inset:0; border-radius:3px; z-index:1; pointer-events:none; mix-blend-mode:screen; opacity:.8;
  background:url(assets/film/vel-1.svg) center/100% 100% no-repeat, radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr::after { border-radius:3px; box-shadow:inset 0 0 22px rgba(2,8,7,.85); }
.fr .ver { position:absolute; left:50%; bottom:10px; transform:translate(-50%,6px); z-index:3; opacity:0; padding:5px 10px; background:rgba(7,7,7,.75);
  border:1px solid var(--gold); font-size:8px; letter-spacing:.3em; text-transform:uppercase; white-space:nowrap; transition:opacity .35s, transform .35s; }
.fr:hover, .fr:focus { transform:scale(1.18); z-index:5; box-shadow:0 22px 50px rgba(0,0,0,.85), 0 0 0 1px var(--gold); }
.fr:hover img, .fr:focus img { filter:sepia(.15) saturate(.95) contrast(1.05); transform:none; }
.fr:hover .ver, .fr:focus .ver { opacity:1; transform:translate(-50%,0); }
.fr.v1::before { background-image:url(assets/film/vel-1.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr.v2::before { background-image:url(assets/film/vel-2.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr.v3::before { background-image:url(assets/film/vel-3.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr.v4::before { background-image:url(assets/film/vel-4.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr.v5::before { background-image:url(assets/film/vel-5.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr.v6::before { background-image:url(assets/film/vel-6.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr.v7::before { background-image:url(assets/film/vel-7.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr.v8::before { background-image:url(assets/film/vel-8.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr.v9::before { background-image:url(assets/film/vel-9.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr.v10::before { background-image:url(assets/film/vel-10.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr.v11::before { background-image:url(assets/film/vel-11.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }
.fr.v12::before { background-image:url(assets/film/vel-12.svg), radial-gradient(ellipse at center, transparent 45%, rgba(3,16,13,.7) 100%); }

/* ---------- antología v4 ---------- */
:root { --gold:rgba(42,209,170,.62); }
.film { --fh:16px; gap:4vh; padding:6vh 7vw 18vh; }
.film, .film *, .ficha, .ficha * { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M15 3 L26 27 M15 3 L4 27 M9 19 H21' stroke='%23000' stroke-width='3.5'/%3E%3Cpath d='M15 3 L26 27 M15 3 L4 27 M9 19 H21' stroke='%23d1d1d1' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E") 15 3, pointer; }
.tira { padding:var(--fh) 10px; }
.tira:nth-child(1) { transform:rotate(3.2deg); } .tira:nth-child(2) { transform:rotate(-2.4deg) translateX(1.5vw); } .tira:nth-child(3) { transform:rotate(1.6deg) translateX(-1vw); }
.tira::before { background:url(assets/film/grano.svg), linear-gradient(180deg, rgba(180,180,180,.12), rgba(48,218,178,.08) 50%, rgba(180,180,180,.13));
  -webkit-mask-position:0 0, 0 3px, 0 calc(100% - 3px); mask-position:0 0, 0 3px, 0 calc(100% - 3px);
  -webkit-mask-size:100% 100%, 22px 10px, 22px 10px; mask-size:100% 100%, 22px 10px, 22px 10px; }
.tira::after { opacity:.48; }
.fr .ver { left:auto; right:10px; bottom:10px; width:30px; height:30px; padding:0; border-radius:50%; transform:scale(.6);
  background:rgba(7,7,7,.55); border:1px solid var(--gold); }
.fr .ver::before, .fr .ver::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:1px; background:#d1d1d1; transform:translate(-50%,-50%); }
.fr .ver::after { transform:translate(-50%,-50%) rotate(90deg); }
.fr:hover .ver, .fr:focus .ver { opacity:1; transform:scale(1); }
.ficha-in { background:url(assets/film/vel-3.svg) center/100% 100%, url(assets/film/grano.svg), linear-gradient(180deg, rgba(16,38,33,.6), rgba(22,50,43,.6) 50%, rgba(14,35,30,.6)); }

/* ---------- antología v5: caos ---------- */
:root { --gold:rgba(19,231,181,.62); }
.tira { grid-template-columns:repeat(10,1fr); gap:3px; }
.tira::before { background:url(assets/film/grano.svg), linear-gradient(180deg, rgba(29,248,197,.12), rgba(var(--v),.04) 50%, rgba(29,248,197,.13)); }
.tira::before, .tira::after { clip-path:var(--corte, none); }
.fr.cut { pointer-events:none; }
.fr.cut .num, .fr.cut .ver { display:none; }
/* cada tira con su ángulo, su largo y su desplazamiento */
.tira:nth-child(1) { transform:rotate(2.3deg) translate(-3vw, 0); width:104%; }
.tira:nth-child(2) { transform:rotate(-3.7deg) translate(2vw, -1.2vh); width:98%; }
.tira:nth-child(3) { transform:rotate(.9deg) translate(-1vw, -2.6vh); width:110%; }
/* +30 % amarillo */
:root { --gold:rgba(3,230,177,.6); }
.tira::before { background:url(assets/film/grano.svg), linear-gradient(180deg, rgba(0,244,187,.16), rgba(5,227,175,.11) 50%, rgba(0,244,187,.17)); }

/* ---------- antología v6: ámbar dorado de la referencia, perforaciones pequeñas, quemados, profundidad ---------- */
:root { --gold:rgba(var(--v),.72); }
.film { --fh:12px; perspective:1600px; }
.tira { padding:var(--fh) 6px; gap:3px; }
.tira::before {
  background:
    radial-gradient(ellipse 9% 70% at 4% 60%, rgba(5,56,44,.55), transparent 70%),
    radial-gradient(ellipse 14% 50% at 63% 100%, rgba(6,72,57,.45), transparent 70%),
    linear-gradient(180deg, rgba(27,216,172,.62) 0, rgba(27,216,172,.62) var(--fh), rgba(32,128,106,.22) calc(var(--fh) + 1px), rgba(32,128,106,.22) calc(100% - var(--fh) - 1px), rgba(27,216,172,.62) calc(100% - var(--fh)), rgba(27,216,172,.62) 100%),
    url(assets/film/grano.svg);
  -webkit-mask-position:0 0, 0 2.5px, 0 calc(100% - 2.5px); mask-position:0 0, 0 2.5px, 0 calc(100% - 2.5px);
  -webkit-mask-size:100% 100%, 14px 7px, 14px 7px; mask-size:100% 100%, 14px 7px, 14px 7px; }
.tira:nth-child(2)::before { background:
    radial-gradient(ellipse 10% 60% at 96% 40%, rgba(5,56,44,.55), transparent 70%),
    radial-gradient(ellipse 16% 45% at 30% 0%, rgba(6,72,57,.4), transparent 70%),
    linear-gradient(180deg, rgba(27,216,172,.62) 0, rgba(27,216,172,.62) var(--fh), rgba(32,128,106,.22) calc(var(--fh) + 1px), rgba(32,128,106,.22) calc(100% - var(--fh) - 1px), rgba(27,216,172,.62) calc(100% - var(--fh)), rgba(27,216,172,.62) 100%),
    url(assets/film/grano.svg); }
.tira:nth-child(3)::before { background:
    radial-gradient(ellipse 12% 70% at 8% 50%, rgba(5,56,44,.5), transparent 70%),
    radial-gradient(ellipse 12% 50% at 78% 100%, rgba(6,72,57,.45), transparent 70%),
    linear-gradient(180deg, rgba(27,216,172,.62) 0, rgba(27,216,172,.62) var(--fh), rgba(32,128,106,.22) calc(var(--fh) + 1px), rgba(32,128,106,.22) calc(100% - var(--fh) - 1px), rgba(27,216,172,.62) calc(100% - var(--fh)), rgba(27,216,172,.62) 100%),
    url(assets/film/grano.svg); }
.fr { border-radius:1px; box-shadow:0 0 0 1.5px rgba(27,216,172,.55); }
.fr img, .fr::before, .fr::after { border-radius:1px; }
.tira:nth-child(1) { transform:rotateY(-11deg) rotate(2.3deg) translate(-3vw, 0); }
.tira:nth-child(2) { transform:rotateY(9deg) rotate(-3.7deg) translate(2vw, -1.2vh); }
.tira:nth-child(3) { transform:rotateY(-5deg) rotate(.9deg) translate(-1vw, -2.6vh); }

/* ---------- antología v7: tira en ola por segmentos ---------- */
.tira { display:block; padding:0; gap:0; width:100% !important; transform:none !important; }
.tira::before, .tira::after { content:none; }
.film { gap:0; perspective:1400px; }
.seg { position:absolute; left:0; top:0; padding:12px 0; transform-style:preserve-3d; }
.seg:hover { z-index:5; }
.seg::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(27,216,172,.62) 0 12px, rgba(32,128,106,.22) 12px calc(100% - 12px), rgba(27,216,172,.62) calc(100% - 12px)), url(assets/film/grano.svg);
  -webkit-mask:url(assets/film/borde-1.svg) var(--o) 0/var(--L) 100% no-repeat, url(assets/film/agujero.svg) var(--o) 2.5px/14px 7px repeat-x, url(assets/film/agujero.svg) var(--o) calc(100% - 2.5px)/14px 7px repeat-x;
  -webkit-mask-composite:xor; mask-composite:exclude; }
.tira:nth-child(2) .seg::before { -webkit-mask-image:url(assets/film/borde-2.svg), url(assets/film/agujero.svg), url(assets/film/agujero.svg); mask-image:url(assets/film/borde-2.svg), url(assets/film/agujero.svg), url(assets/film/agujero.svg); }
.tira:nth-child(3) .seg::before { -webkit-mask-image:url(assets/film/borde-3.svg), url(assets/film/agujero.svg), url(assets/film/agujero.svg); mask-image:url(assets/film/borde-3.svg), url(assets/film/agujero.svg), url(assets/film/agujero.svg); }
.seg::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.45;
  background:url(assets/film/tira-vel-1.svg) var(--o) 0/var(--L) 100% no-repeat; }
.tira:nth-child(2) .seg::after { background-image:url(assets/film/tira-vel-2.svg); } .tira:nth-child(3) .seg::after { background-image:url(assets/film/tira-vel-3.svg); }
.seg .fr { width:calc(100% - 3px); margin:0 1.5px; }
.seg:first-child .fr, .seg:last-child .fr { filter:brightness(.7); }
.tira + .tira { margin-top:-2vh; }

/* ---------- antología v8: atmósfera de sala (haz de proyector, flare anamórfico, marca de agua, grano) ---------- */
.film { position:relative; isolation:isolate; padding-top:10vh; }
.film::before { content:""; position:absolute; z-index:-1; inset:-20vh -10vw -10vh; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 38% at 18% 0%, rgba(213,213,213,.10), transparent 70%),
    conic-gradient(from 155deg at 12% -8%, transparent 0deg, rgba(213,213,213,.06) 8deg, transparent 22deg, rgba(213,213,213,.045) 30deg, transparent 44deg),
    url(assets/film/leader.svg) 78% 46% / min(46vw, 640px) no-repeat;
  opacity:1; }
.film::after { content:""; position:absolute; z-index:-1; left:-10vw; right:-10vw; top:38%; height:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(150,200,190,.0) 20%, rgba(160,215,205,.55) 48%, rgba(223,223,223,.8) 50%, rgba(160,215,205,.55) 52%, transparent 80%);
  filter:blur(1.2px); box-shadow:0 0 18px 4px rgba(120,190,180,.18); animation:flare 14s ease-in-out infinite alternate; }
@keyframes flare { from { transform:translateX(-18vw) scaleX(.8); opacity:.35; } to { transform:translateX(18vw) scaleX(1.1); opacity:.75; } }
/* grano de película sobre toda la página, muy sutil y vivo */
body:has(.film)::after { content:""; position:fixed; inset:-50%; z-index:80; pointer-events:none; opacity:.07; background:url(assets/film/grano.svg); animation:grano .9s steps(6) infinite; }
@keyframes grano { 0% { transform:translate(0,0); } 20% { transform:translate(-3%,2%); } 40% { transform:translate(2%,-3%); } 60% { transform:translate(-2%,-1%); } 80% { transform:translate(3%,3%); } 100% { transform:translate(0,0); } }
/* tiras: sombra y brillo de celuloide, sin quemados aparatosos */
.tira { filter:drop-shadow(0 26px 30px rgba(0,0,0,.65)); }
.seg::before { background:
  linear-gradient(100deg, transparent 30%, rgba(230,230,230,.10) 48%, transparent 62%),
  linear-gradient(180deg, rgba(35,198,160,.58) 0 12px, rgba(30,120,99,.18) 12px calc(100% - 12px), rgba(35,198,160,.58) calc(100% - 12px)),
  url(assets/film/grano.svg) !important; }
.seg::after { opacity:.32; }
@media (prefers-reduced-motion:reduce) { .film::after, body:has(.film)::after { animation:none; } }
/* todo en blanco y negro */
.fr img, .fr:hover img, .fr:focus img { filter:grayscale(1) contrast(1.12) brightness(.9); }
.fr:hover img, .fr:focus img { filter:grayscale(1) contrast(1.18) brightness(1.04); }
.ficha-img img { filter:grayscale(1) contrast(1.08); }

/* ---------- antología v9 ---------- */
.film, .film *, .ficha, .ficha * { cursor:default; }
.ficha-x { cursor:pointer; }
/* el fotograma crece con su trozo de película */
.seg { transition:scale .45s cubic-bezier(.3,1.4,.5,1); }
.seg:hover, .seg:focus-within { scale:1.16; z-index:6; }
.fr:hover, .fr:focus { transform:none; box-shadow:0 0 0 1px var(--gold); }
/* naranja: −30 % saturación, −20 % opacidad */
.seg::before { background:
  linear-gradient(100deg, transparent 30%, rgba(230,230,230,.08) 48%, transparent 62%),
  linear-gradient(180deg, rgba(61,186,157,.46) 0 12px, rgba(50,112,97,.14) 12px calc(100% - 12px), rgba(61,186,157,.46) calc(100% - 12px)),
  url(assets/film/grano.svg) !important; }
.fr { box-shadow:0 0 0 1.5px rgba(61,186,157,.4); }
/* sin franja negra: la página arranca antes y el fondo se funde arriba */
.film + .ficha, .pagehead + .proyector { }
body:has(.film) .pagehead { padding-bottom:0; }
.film { padding-top:2vh; margin-top:-2vh; }
.film::before { background:url(assets/film/leader.svg) 30% 40% / min(42vw, 600px) no-repeat;
  -webkit-mask:linear-gradient(180deg, transparent, #000 22%); mask:linear-gradient(180deg, transparent, #000 22%); }
/* proyector Super 8 a la derecha, haz hacia la izquierda con polvo en suspensión */
.proyector { position:absolute; right:2vw; top:22vh; width:min(19vw,260px); z-index:0; pointer-events:none; }
.proyector img { position:relative; width:100%; display:block; opacity:.85; }
.haz { position:absolute; right:78%; top:-22vh; width:92vw; height:90vh; transform-origin:100% 50%;
  background:linear-gradient(270deg, rgba(213,213,213,.20), rgba(213,213,213,.06) 45%, transparent 85%);
  clip-path:polygon(100% 47%, 0 0, 0 100%, 100% 53%); filter:blur(6px); animation:haz 4s steps(1) infinite; }
@keyframes haz { 0%,100% { opacity:1; } 30% { opacity:.92; } 31% { opacity:1; } 70% { opacity:.95; } }
.polvo { position:absolute; right:78%; top:-22vh; width:92vw; height:90vh; }
.film { z-index:1; }
@media (prefers-reduced-motion:reduce) { .haz { animation:none; } }

/* ---------- portada: banner horizontal pegado al menú ---------- */
.intro.banner { height:auto; min-height:0; aspect-ratio:3/1; max-height:42vh; margin-top:64px;
  -webkit-mask:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.intro.banner .bgimg { background:radial-gradient(ellipse at 50% 50%, #0c1211, #070707 70%); filter:none; animation:none; transform:none; }
.intro.banner .bgimg::after { content:none; }
.seen-on { padding:1vh 4vw 0; gap:clamp(24px,4vw,56px); min-height:64px; }
.work { padding-top:4vh; }
.work .label { margin-bottom:22px; }
.proj { margin-bottom:6vh; }
.meta { margin-top:18px; }
.haz, .polvo { right:90%; top:calc(min(19vw,260px) * .5 - 45vh); }
.haz { background:linear-gradient(270deg, rgba(213,213,213,.30), rgba(213,213,213,.09) 45%, transparent 85%); }
/* haz difuso: varias capas con desenfoque fuerte, sin filo */
.haz { clip-path:none; filter:blur(26px); background:none; }
.haz::before, .haz::after { content:""; position:absolute; inset:0; }
.haz::before { background:linear-gradient(270deg, rgba(213,213,213,.20), rgba(213,213,213,.06) 50%, transparent 90%); clip-path:polygon(100% 44%, 0 -6%, 0 106%, 100% 56%); }
.haz::after { background:linear-gradient(270deg, rgba(230,230,230,.22), transparent 60%); clip-path:polygon(100% 48%, 0 22%, 0 78%, 100% 52%); filter:blur(10px); }
.haz { -webkit-mask:linear-gradient(270deg, #000 60%, transparent); mask:linear-gradient(270deg, #000 60%, transparent); }
/* proyector fotográfico; el haz sale del objetivo, más luz y sin corte */
.proyector { width:min(24vw,340px); top:16vh; right:1vw; }
.proyector img { opacity:1; filter:drop-shadow(0 30px 40px rgba(0,0,0,.8)); }
.haz, .polvo { right:61%; top:calc(min(24vw,340px) * .347 - 45vh); width:96vw; }
.haz { -webkit-mask:none; mask:none; filter:blur(30px); }
.haz::before { background:linear-gradient(270deg, rgba(225,225,225,.34), rgba(218,218,218,.12) 45%, rgba(218,218,218,.04) 80%, transparent); clip-path:polygon(100% 45%, 0 -12%, 0 112%, 100% 55%); }
.haz::after { background:linear-gradient(270deg, rgba(235,235,235,.42), rgba(235,235,235,.08) 55%, transparent 95%); clip-path:polygon(100% 48.5%, 0 25%, 0 75%, 100% 51.5%); filter:blur(8px); }
.proyector::after { content:""; position:absolute; left:39%; top:52%; width:14%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(238,238,238,.85), rgba(223,223,223,.25) 40%, transparent 70%); filter:blur(4px); mix-blend-mode:screen; }
.credito { padding:0 4vw 4vh; font-size:10px; color:rgba(255,255,255,.28); letter-spacing:.04em; }
.credito a { color:inherit; border-bottom:1px solid rgba(255,255,255,.15); }

/* hover sin desplazamiento: la escala va dentro del transform de cada segmento */
.seg { transition:transform .45s cubic-bezier(.3,1.4,.5,1); scale:none; }
.seg:hover, .seg:focus-within { scale:none; --s:1.16; }
/* puntero de la web: doble flecha */
html, html *, html *::before, html *::after { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22'%3E%3Cg stroke='%23070707' stroke-width='1.2' stroke-linejoin='miter' fill='%23d1d1d1'%3E%3Cpath d='M1 1h6.5l8 10-8 10H1l8-10z'/%3E%3Cpath d='M13 1.5L29 11 13 20.5l6.5-9.5z'/%3E%3C/g%3E%3C/svg%3E") 28 11, auto !important; }

/* ---------- portada: nombre + polaroid de los 90, con luz cálida y motas ---------- */
.intro.banner { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4vw; padding:0 10vw; text-align:left; -webkit-mask:none; mask:none; overflow:visible; }
.intro.banner h1 { margin-right:0; }
.intro.banner .bgimg { -webkit-mask:linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask:linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.intro .luz { position:absolute; right:4vw; top:50%; width:46vw; height:150%; transform:translateY(-50%); pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 62% 50%, rgba(215,215,215,.20), rgba(215,215,215,.06) 45%, transparent 72%); filter:blur(10px); animation:haz 5s steps(1) infinite; }
.intro .motas { position:absolute; inset:-20% 0; width:100%; height:140%; pointer-events:none; }
.polaroid { position:relative; margin:0; height:calc(min(42vh, 33vw) * .92); aspect-ratio:.82; padding:5% 5% 18%; background:#e0e0e0;
  box-shadow:0 30px 60px rgba(0,0,0,.75), inset 0 0 30px rgba(48,96,85,.18); transform:rotate(3.5deg); }
.polaroid img { width:100%; height:100%; object-fit:cover; display:block; filter:sepia(.18) saturate(.9) contrast(1.02); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.polaroid::after { content:""; position:absolute; inset:5% 5% 18%; background:url(assets/film/grano.svg); opacity:.18; mix-blend-mode:overlay; pointer-events:none; }
.polaroid.fade { animation-name:aparece; } @keyframes aparece { from { opacity:0; } to { opacity:1; } }
/* puntero inclinado como el de Windows (punta arriba a la izquierda) */
html, html *, html *::before, html *::after { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-120 16 16) translate(1 5)' stroke='%23070707' stroke-width='1.2' fill='%23d1d1d1'%3E%3Cpath d='M1 1h6.5l8 10-8 10H1l8-10z'/%3E%3Cpath d='M13 1.5L29 11 13 20.5l6.5-9.5z'/%3E%3C/g%3E%3C/svg%3E") 9 4, auto !important; }
/* Antología: al pasar, encadenado del blanco y negro al color */
.fr img { transition:filter 1.1s ease-in-out; }
.fr:hover img, .fr:focus img { filter:grayscale(0) contrast(1.04) brightness(1); }
.polaroid figcaption { position:absolute; left:5%; right:5%; bottom:4%; text-align:center; font:500 clamp(.85rem,1.35vw,1.25rem)/1.1 Caveat, "Segoe Print", cursive; color:#2b2a33; transform:rotate(-1.5deg); opacity:.88; }
.fr img { transition:filter .55s ease-in-out; }
/* proyector Sankyo con bobinas: objetivo a la izquierda (15 %, 56 %) */
.proyector { width:min(28vw,400px); top:12vh; right:1vw; }
.haz, .polvo { right:85%; top:calc(min(28vw,400px) * .443 - 45vh); }
.proyector::after { left:15%; top:56%; width:9%; }
/* sello de fecha de cámara de los 90 sobre la foto */
.polaroid .fecha { position:absolute; right:8%; bottom:21%; font:600 clamp(.55rem,.8vw,.75rem)/1 "Courier Prime",monospace; letter-spacing:.06em; color:#00eeb6;
  text-shadow:0 0 4px rgba(0,228,175,.7); opacity:.85; z-index:2; }
/* polaroid real y gastada, con otra debajo; escrita a mano con bolígrafo */
.polaroid { background:
    radial-gradient(ellipse 30% 22% at 18% 82%, rgba(40,120,101,.28), transparent 70%),
    radial-gradient(ellipse 26% 18% at 84% 12%, rgba(48,128,109,.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(36,112,94,.18), transparent 70%),
    url(assets/film/grano.svg), linear-gradient(160deg, #dbdbdb, #c6c6c6 60%, #b5b5b5);
  box-shadow:0 30px 60px rgba(0,0,0,.75), inset 0 0 40px rgba(24,88,73,.35), inset 0 0 0 1px rgba(255,255,255,.25); }
.polaroid::before { content:""; position:absolute; inset:0; z-index:-1; transform:rotate(-7deg) translate(-4%, 2%);
  background:url(assets/film/grano.svg), linear-gradient(160deg, #cbcbcb, #5cb8a3); box-shadow:0 20px 40px rgba(0,0,0,.6), inset 0 0 30px rgba(24,88,73,.35); }
.polaroid img { filter:sepia(.32) saturate(.82) contrast(.96) brightness(.97); box-shadow:inset 0 0 0 1px rgba(8,48,39,.25); }
.polaroid figcaption { font:400 clamp(.8rem,1.25vw,1.15rem)/1 "Homemade Apple", "Segoe Script", cursive; color:#2f3d78; opacity:.82; transform:rotate(-3deg); bottom:5.5%; letter-spacing:.02em; }
.polaroid .fecha { display:none; }
/* proyector definitivo: objetivo en (12,5 %, 57 %) */
.haz, .polvo { right:87.5%; top:calc(min(28vw,400px) * .4275 - 45vh); }
.proyector::after { left:12.5%; top:57%; width:10%; }
/* imágenes originales con transparencia, sin retocar */
.proyector img { filter:brightness(.86) drop-shadow(0 30px 40px rgba(0,0,0,.8)); }
.polaroid2 { position:relative; margin:0; height:calc(min(42vh, 33vw) * 1.02); aspect-ratio:1054/1222; overflow:visible; filter:drop-shadow(0 26px 40px rgba(0,0,0,.7)); }
.polaroid2.fade { animation-name:aparece; }
.polaroid2 img { position:absolute; width:116.6%; max-width:none; left:-10.63%; top:-37.19%; height:auto; aspect-ratio:1229/2000; }

/* Antología con la plantilla de tiras: fotos detrás de las ventanas, plantilla encima tal cual */
.film2 { padding:2vh 4vw 16vh; position:relative; z-index:1; }
.plantilla { position:relative; width:100%; aspect-ratio:2000/740; }
.plantilla .marco { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; display:block; }
.vf { position:absolute; margin:0; z-index:1; overflow:hidden; background:#0b0a08; outline:none; }
.vf:not(.cut) { cursor:zoom-in; }
.vf img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.08) brightness(.82); transition:filter .55s ease-in-out; }
.vf:not(.cut):hover img, .vf:not(.cut):focus img { filter:grayscale(0) saturate(.7) brightness(.95); }
.vf { transition:transform .45s cubic-bezier(.3,1.4,.5,1); }
.vf:not(.cut):hover, .vf:not(.cut):focus { transform:scale(1.22); z-index:3; }
/* hover como las tiras anteriores: crece con rebote, reborde dorado, sombra y botón + */
.vf { overflow:visible; background:none; border-radius:3px; transition:transform .45s cubic-bezier(.3,1.4,.5,1), box-shadow .45s; }
.vf img { clip-path:var(--q); border-radius:3px; transition:filter .55s ease-in-out, clip-path .3s ease; }
.vf:not(.cut):hover, .vf:not(.cut):focus { transform:scale(1.22); z-index:3; box-shadow:0 22px 50px rgba(0,0,0,.85), 0 0 0 1px var(--gold); }
.vf:not(.cut):hover img, .vf:not(.cut):focus img { clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
.vf .ver { position:absolute; right:8px; bottom:8px; width:26px; height:26px; border-radius:50%; z-index:3; opacity:0; transform:scale(.6);
  background:rgba(7,7,7,.55); border:1px solid var(--gold); transition:opacity .35s, transform .35s; }
.vf .ver::before, .vf .ver::after { content:""; position:absolute; left:50%; top:50%; width:11px; height:1px; background:#d1d1d1; transform:translate(-50%,-50%); }
.vf .ver::after { transform:translate(-50%,-50%) rotate(90deg); }
.vf:not(.cut):hover .ver, .vf:not(.cut):focus .ver { opacity:1; transform:scale(1); }
.film2 { margin-top:-6vh; z-index:2; }
.vf img { clip-path:none; -webkit-mask:url(assets/film/ventanas.png) var(--mp) / var(--ms) no-repeat; mask:url(assets/film/ventanas.png) var(--mp) / var(--ms) no-repeat; }
.vf:not(.cut):hover img, .vf:not(.cut):focus img { clip-path:none; -webkit-mask:none; mask:none; }
/* ficha con el color de la película de la plantilla (#124438) */
.ficha-in { background:url(assets/film/vel-3.svg) center/100% 100%, url(assets/film/grano.svg), linear-gradient(180deg, rgba(11,43,36,.6), rgba(14,56,46,.6) 50%, rgba(10,40,33,.6)); }
/* Antología: título y tiras más arriba, montados sobre el proyector */
.pagehead:has(+ .proyector) { padding-top:13vh; }
.film2 { margin-top:calc(5vh - 30px); }
/* Antología: título y tiras suben para montarse un poco sobre el proyector */
.pagehead:has(+ .proyector) { padding-top:13vh; padding-bottom:4vh; position:relative; z-index:2; }
.film2 { margin-top:calc(5vh - 30px); }

/* Antología: visor de fondo. Marcas de margen de seguridad (terminan sobre el pie), dos trazos diagonales,
   regla de fotogramas en el margen izquierdo y un icono de rebobinado. Todo casi invisible */
.visor { position:absolute; left:0; right:0; top:0; height:var(--alto,100%); z-index:0; pointer-events:none; overflow:hidden; --c:rgba(255,255,255,.085);
  background:
    linear-gradient(162deg, transparent calc(58% - .5px), rgba(255,255,255,.055) 0 calc(58% + .5px), transparent 0),
    linear-gradient(162deg, transparent calc(61% - .5px), rgba(var(--v),.04) 0 calc(61% + .5px), transparent 0); }
.visor::before { content:""; position:absolute; inset:9vh 4vw 3vh;
  background:
    linear-gradient(var(--c),var(--c)) left top / 32px 1px, linear-gradient(var(--c),var(--c)) left top / 1px 32px,
    linear-gradient(var(--c),var(--c)) right top / 32px 1px, linear-gradient(var(--c),var(--c)) right top / 1px 32px,
    linear-gradient(var(--c),var(--c)) left bottom / 32px 1px, linear-gradient(var(--c),var(--c)) left bottom / 1px 32px,
    linear-gradient(var(--c),var(--c)) right bottom / 32px 1px, linear-gradient(var(--c),var(--c)) right bottom / 1px 32px;
  background-repeat:no-repeat; }
.visor .regla { position:absolute; left:calc(4vw + 56px); right:calc(4vw + 56px); bottom:3vh; height:9px;
  background:repeating-linear-gradient(90deg, var(--c) 0 1px, transparent 1px 64px) bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px) bottom / 100% 4px no-repeat; }
.visor .rew { position:absolute; left:calc(4vw + 46px); top:calc(9vh + 10px); width:16px; height:10px; opacity:.14;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M8 1 3 5l5 4M14 1 9 5l5 4' fill='none' stroke='%23fff' stroke-width='.8'/%3E%3C/svg%3E") center / contain no-repeat; }
/* espacio negativo bajo las tiras: guías de formato (2.39 y 16:9 superpuestas), rayado diagonal de claqueta,
   marca de registro y avance (cierra el rebobinado de arriba) */
.visor .rayas, .visor .reg, .visor .fwd { position:absolute; opacity:.16; background-position:center; background-size:contain; background-repeat:no-repeat; }
.visor .rayas { right:calc(4vw + 56px); bottom:calc(3vh + 46px); width:70px; height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 14'%3E%3Cg stroke='%23d6dce3' stroke-width='.7'%3E%3Cpath d='M0 13.5h70M4 13 14 1M18 13 28 1M32 13 42 1M46 13 56 1M60 13 70 1'/%3E%3C/g%3E%3C/svg%3E"); }
.visor .reg { left:calc(4vw + 56px); bottom:calc(3vh + 46px); width:16px; height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23fff' stroke-width='.7'%3E%3Ccircle cx='8' cy='8' r='4.5'/%3E%3Cpath d='M8 0v16M0 8h16'/%3E%3C/g%3E%3C/svg%3E"); }
.visor .fwd { right:calc(4vw + 46px); bottom:calc(3vh + 14px); width:16px; height:10px; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 1l5 4-5 4M8 1l5 4-5 4' fill='none' stroke='%23fff' stroke-width='.8'/%3E%3C/svg%3E"); }
/* franja inferior: la Osa Mayor (las siete estrellas de Madrid) sobre un hilo de vía láctea */
.visor::after { content:""; position:absolute; left:8%; right:8%; bottom:calc(3vh + 14px); height:150px;
  background:url(assets/film/osa-mayor.svg) 38% 40% / auto 78px no-repeat, url(assets/film/via-lactea.svg) center / 100% 100% no-repeat;
  opacity:.38; -webkit-mask:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.plantilla .marco { filter:saturate(.67); }
.visor .cita { position:absolute; right:calc(4vw + 56px); bottom:calc(3vh + 72px); text-align:right; font:9px/1.6 "Courier Prime",monospace; letter-spacing:.05em; color:rgba(255,255,255,.24); }
.visor .cita i { display:block; margin-top:2px; font-style:normal; font-size:7px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.18); }
/* Bio: la polaroid de la infancia, a la derecha de la cabecera */
.pagehead.conpol { position:relative; }
.pagehead.conpol .polaroid2 { position:absolute; right:8vw; top:13vh; height:calc(min(36vh, 26vw) * 1.02); transform:rotate(3deg); }

/* Portada en un solo pantallazo 16:9, sin scroll: nombre y cargo, logos, dos proyectos en 16:9 y «Ver todo el cine» */
body:has(.intro.banner) { height:100vh; overflow:hidden; display:flex; flex-direction:column; }
body:has(.intro.banner) > * { flex:0 0 auto; }
body:has(.intro.banner) .intro.banner { aspect-ratio:auto; height:21vh; max-height:none; margin-top:52px; padding:0 4vw; grid-template-columns:1fr; }
body:has(.intro.banner) .intro h1 { font-size:clamp(1.5rem,3.2vw,3rem); }
.intro .cargo { margin-top:12px; font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:rgba(255,255,255,.6); }
body:has(.intro.banner) .seen-on { min-height:0; padding:1vh 4vw 1.5vh; }
body:has(.intro.banner) .seen-on img { height:16px; } body:has(.intro.banner) .seen-on img.tall, body:has(.intro.banner) .seen-on img.photo { height:38px; } body:has(.intro.banner) .seen-on img.onblack { height:14px; }
body:has(.intro.banner) .work { flex:1 1 auto; min-height:0; padding:1vh 4vw 0; container-type:size; display:flex; flex-direction:column; }
body:has(.intro.banner) .work .label { margin-bottom:10px; }
body:has(.intro.banner) #destacados { flex:1; min-height:0; display:flex; justify-content:center; gap:3vw; }
/* cada proyecto: imagen siempre 16:9; el ancho se ajusta para que imagen + textos quepan en el alto disponible */
body:has(.intro.banner) .proj { margin:0; width:min(calc((100cqw - 3vw) / 2), calc((100cqh - 120px) * 16 / 9)); }
body:has(.intro.banner) .proj .clip.hero { aspect-ratio:16/9; height:auto; }
body:has(.intro.banner) .proj .clip.hero .ph { height:100%; }
body:has(.intro.banner) .meta { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:10px; }
body:has(.intro.banner) .meta h2 { font-size:clamp(.8rem,1.1vw,1.05rem); margin-top:4px; letter-spacing:.16em; }
body:has(.intro.banner) .meta > div:first-child { min-width:0; } body:has(.intro.banner) .meta .facts { flex-shrink:0; }
body:has(.intro.banner) .meta .sum { display:none; }
body:has(.intro.banner) .meta .facts { flex-direction:row; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap; }
body:has(.intro.banner) .more { padding:1.6vh 4vw; }
body:has(.intro.banner) footer { padding:10px 4vw; }
/* logos de plataforma en su color original */
.watch img { filter:none; opacity:1; }
/* portada: título a la izquierda, botones de plataforma con texto a la derecha; «Ver ficha» sobre la imagen */
body:has(.intro.banner) .meta { align-items:center; }
body:has(.intro.banner) .meta .watch { padding:7px 12px; gap:10px; font-size:9px; letter-spacing:.2em; }
body:has(.intro.banner) .meta .watch img { height:13px; }
body:has(.intro.banner) .meta .facts { flex-direction:column; align-items:flex-end; gap:6px; }
.proj .clip.hero { position:relative; }
.proj .verficha { position:absolute; right:14px; bottom:14px; padding:7px 12px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#fff;
  background:rgba(7,7,7,.55); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px); transition:background .4s, border-color .4s; }
.proj .clip.hero:hover .verficha { background:rgba(7,7,7,.8); border-color:var(--gold); }

/* Cine: carrusel de fichas 3:4 (mismo funcionamiento que los casos de estudio de Cinema Hood) */
body:has(#carrusel) .pagehead { padding:14vh 4vw 4vh; }
.carrusel { padding:0 0 12vh; }
.car-vp { position:relative; overflow:hidden; }
.car-vp::before, .car-vp::after { content:""; position:absolute; top:0; bottom:16px; width:clamp(28px,6vw,90px); z-index:3; pointer-events:none; }
.car-vp::before { left:0; background:linear-gradient(90deg, var(--bg,#070707), transparent); }
.car-vp::after { right:0; background:linear-gradient(270deg, var(--bg,#070707), transparent); }
.car-track { display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:10px 4vw 16px; }
.car-track::-webkit-scrollbar { display:none; }
.car-track.auto { scroll-snap-type:none; }
.car-card { position:relative; flex:0 0 clamp(260px, 24vw, 380px); aspect-ratio:3/4; overflow:hidden; scroll-snap-align:start; scroll-margin-left:4vw;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--v),.14); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.car-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.car-card:hover, .car-card:focus-visible { transform:translateY(-6px); box-shadow:0 40px 90px -25px rgba(0,0,0,.88), 0 0 0 1px rgba(var(--v),.42); }
.car-card:hover img { transform:scale(1.07); }
.car-ver { position:absolute; top:16px; left:16px; z-index:2; padding:7px 14px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#fff;
  background:rgba(5,6,8,.62); backdrop-filter:blur(6px); border:1px solid rgba(var(--v),.42); }
.car-meta { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:flex-end; gap:14px; padding:clamp(16px,2vw,24px);
  background:linear-gradient(0deg, rgba(4,5,6,.92), rgba(4,5,6,.4) 60%, transparent); }
.car-num { font-weight:200; font-size:clamp(26px,2.6vw,36px); line-height:1; color:rgba(var(--v),.42); }
.car-tag { margin:0 0 6px; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.car-meta h3 { font-weight:300; font-size:clamp(.9rem,1.25vw,1.15rem); letter-spacing:.12em; text-transform:uppercase; line-height:1.3; }
.car-dots { display:flex; justify-content:center; gap:10px; margin-top:26px; }
.car-dot { width:8px; height:8px; padding:0; border:0; border-radius:999px; background:rgba(233,233,233,.22); cursor:pointer; transition:width .3s, background .3s; }
.car-dot:hover { background:rgba(var(--v),.42); }
.car-dot.on { width:26px; background:var(--gold); }

/* ---------- Fondos de luz por página (sin repetir ninguno) ---------- */
.fondo { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
/* el carrusel se funde en los bordes con máscara (no con bandas negras), así deja ver la luz del fondo */
.car-vp::before, .car-vp::after { content:none; }
.car-vp { -webkit-mask:linear-gradient(90deg, transparent, #000 5vw, #000 calc(100% - 5vw), transparent); mask:linear-gradient(90deg, transparent, #000 5vw, #000 calc(100% - 5vw), transparent); }

/* Documental: Fresnel de tungsteno fuera de cuadro, a la izquierda. Las viseras recortan el haz en un trapecio
   de bordes nítidos; en el origen, el halo de anillos concéntricos de la lente */
.fresnel .haz { position:absolute; left:0; top:0; width:100%; height:100%;
  clip-path:polygon(0 24%, 100% 6%, 100% 84%, 0 38%);
  background:radial-gradient(ellipse 95% 70% at 0% 31%, rgba(194,194,194,.28), rgba(179,179,179,.11) 45%, rgba(21,255,200,.03) 75%, transparent);
  filter:blur(1.2px); animation:tungsteno 9s ease-in-out infinite alternate; }
.fresnel .haz::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(208,208,208,.05), transparent 14%, transparent 86%, rgba(208,208,208,.04)); }
.fresnel .lente { position:absolute; left:-15vw; top:calc(31vh - 15vw); width:30vw; aspect-ratio:1; border-radius:50%;
  background:repeating-radial-gradient(circle, rgba(208,208,208,.22) 0 1px, transparent 1px 13px), radial-gradient(circle, rgba(201,201,201,.6), rgba(183,183,183,.1) 38%, transparent 68%);
  -webkit-mask:radial-gradient(circle, #000 25%, transparent 70%); mask:radial-gradient(circle, #000 25%, transparent 70%); animation:tungsteno 9s ease-in-out infinite alternate; }
@keyframes tungsteno { from { opacity:.86; } to { opacity:1; } }



.montaje .monitor { position:absolute; inset:0; background:radial-gradient(ellipse 70% 55% at 50% 0%, hsla(156,32%,38%,.16), transparent 70%), radial-gradient(ellipse 90% 60% at 50% 100%, hsla(156,30%,30%,.10), transparent 70%);
  animation:cortes 14s steps(1) infinite; }
@keyframes cortes { 0% { opacity:1; } 18% { opacity:.72; } 31% { opacity:.9; } 52% { opacity:.62; } 67% { opacity:1; } 83% { opacity:.8; } }
/* Documental: líneas técnicas de la luz: eje del haz y ficha de la luz junto a la visera superior */
.fresnel .eje { position:absolute; left:5vw; top:31vh; width:92vw; border-top:1px dashed rgba(208,208,208,.16); transform:rotate(4.5deg); transform-origin:left; }
.fresnel .eje::before { content:""; position:absolute; left:-3px; top:-4px; width:7px; height:7px; border:1px solid rgba(208,208,208,.3); border-radius:50%; }
.fresnel .dato { position:absolute; right:7vw; top:calc(8vh + 18px); transform:rotate(-5.8deg); transform-origin:right; font:9px "Courier Prime",monospace; letter-spacing:.24em; color:rgba(208,208,208,.34); }
/* Desk: instrumentos de medición dibujados a línea: vectorscopio, monitor de forma de onda y espiral áurea */
.montaje .vscope { position:absolute; right:6vw; top:11vh; width:min(17vw,300px); opacity:.42; animation:respira 6s ease-in-out infinite alternate; }
.montaje .wform { position:absolute; left:15vw; bottom:3vh; width:70vw; opacity:.3; }
.montaje .aurea { position:absolute; left:50vw; bottom:28vh; width:22vw; opacity:.2; }
@keyframes respira { from { opacity:.3; } to { opacity:.48; } }
/* Documental (v2): luz de verdad, sin formas geométricas. Un contraluz cálido detrás del carrusel y,
   detrás de las imágenes, los anillos concéntricos de una lente Fresnel que se pierden hacia fuera */
.fresnel .halo { position:absolute; inset:0; background:radial-gradient(ellipse 55% 48% at 50% 55%, rgba(190,190,190,.22), rgba(178,178,178,.08) 45%, transparent 75%);
  animation:tungsteno 9s ease-in-out infinite alternate; }
.fresnel .lente { left:50%; top:55%; width:120vw; transform:translate(-50%,-50%);
  background:url(assets/fondos/anillos.svg) center / 100% 100% no-repeat;
  -webkit-mask:radial-gradient(circle, transparent 12%, #000 30%, transparent 62%); mask:radial-gradient(circle, transparent 12%, #000 30%, transparent 62%); }
.fresnel .suspension { position:absolute; inset:0; width:100%; height:100%; }
/* Antología: guiño. Un X-wing a línea fina cruza muy despacio la vía láctea, junto a la Osa Mayor */
.visor .xwing { position:absolute; left:12%; bottom:calc(3vh + 34px); width:46px; height:27px; opacity:0;
  background:url(assets/film/xwing.svg) center / contain no-repeat; transform:rotate(-5deg); animation:xwing 80s linear infinite; }
@keyframes xwing { 0% { left:12%; bottom:calc(3vh + 34px); opacity:0; } 6% { opacity:.42; } 88% { opacity:.42; } 100% { left:84%; bottom:calc(3vh + 132px); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .visor .xwing { animation:none; left:62%; bottom:calc(3vh + 96px); opacity:.35; } }
/* Antología en un solo pantallazo 16:9: cabecera más corta, tiras escaladas al alto de la pantalla y la franja de
   constelaciones bajo ellas sin hueco extra. El proyector sube lo mismo para mantener el solape */
.pagehead:has(+ .proyector) { padding-top:10vh; padding-bottom:2vh; }
.film2 { padding-top:0; padding-bottom:14vh; }
.plantilla { width:min(100%, 128vh); margin:0 auto; }
.proyector { top:calc(12vh - 40px); }
/* Cine: guiños de ciencia ficción a línea fina, casi invisibles.
   La Enterprise cruza despacio la franja de arriba; el monolito de 2001 (proporción 1:4:9) con la alineación
   de astros; y las dos estelas de fuego del DeLorean a 88 millas por hora */
.fresnel .enterprise { position:absolute; top:calc(14vh + 12px); left:calc(4vw + 260px); width:44px; height:54px; opacity:0; transform:rotate(90deg);
  background:url(assets/fondos/enterprise.svg) center / contain no-repeat; animation:enterprise 70s linear infinite; }
@keyframes enterprise { 0% { left:calc(4vw + 260px); top:calc(14vh + 12px); opacity:0; } 3% { opacity:.55; } 95% { opacity:.55; } 100% { left:94%; top:calc(9vh + 12px); opacity:0; } }
.fresnel .monolito { position:absolute; left:5vw; bottom:4vh; width:26px; height:60px; opacity:.32; background:url(assets/fondos/monolito.svg) center / contain no-repeat; }
.fresnel .delorean { position:absolute; right:6vw; bottom:6vh; width:150px; height:22px; opacity:.5; }
.fresnel .delorean i { position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(5,255,197,.35) 55%, rgba(198,198,198,.9)); }
.fresnel .delorean i:first-child { top:4px; } .fresnel .delorean i:nth-child(2) { top:12px; }
.fresnel .delorean i::after { content:""; position:absolute; right:-2px; top:-2px; width:5px; height:5px; border-radius:50%; background:rgba(188,188,188,.8); filter:blur(1.5px); animation:llama 1.2s ease-in-out infinite alternate; }
@keyframes llama { from { opacity:.4; } to { opacity:1; } }
.fresnel .delorean b { position:absolute; right:0; top:18px; font:400 8px "Courier Prime",monospace; letter-spacing:.25em; color:rgba(208,208,208,.7); }
@media (prefers-reduced-motion: reduce) { .fresnel .enterprise { animation:none; left:40%; opacity:.5; } }
/* menú: línea que separa el portfolio (Cine, Documental, Antología) de la información (Desk, Bio, Contacto) */
header nav .sep { width:1px; height:12px; align-self:center; background:rgba(255,255,255,.4); }
/* Documental: botón «Contratar» dentro de un anillo de enfoque pequeño, a la altura del título y a la derecha.
   El anillo gira con inercia: arranca rápido, frena poco a poco, rebota y coge velocidad hacia el otro lado */
.pagehead.conboton { position:relative; }
.foco-btn { position:absolute; right:4vw; top:calc(10vh + 4px); width:92px; height:92px; display:grid; place-items:center; }
.foco-btn img { position:absolute; inset:0; width:100%; height:100%; opacity:.75; animation:foco 16s infinite; transition:opacity .4s; }
.foco-btn::before { content:""; position:absolute; left:50%; top:-8px; border:4px solid transparent; border-top:6px solid #d0d0d0; transform:translateX(-50%); }
.foco-btn span { position:relative; font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:#d1d1d1; padding-left:.24em; transition:color .4s; }
.foco-btn:hover img { opacity:1; } .foco-btn:hover span { color:#fff; }
@keyframes foco {
  0% { transform:rotate(-150deg); animation-timing-function:cubic-bezier(.15,.6,.25,1); }
  42% { transform:rotate(150deg); animation-timing-function:ease-in-out; }
  47% { transform:rotate(136deg); animation-timing-function:cubic-bezier(.55,0,.25,1); }
  92% { transform:rotate(-150deg); animation-timing-function:ease-in-out; }
  97% { transform:rotate(-136deg); animation-timing-function:ease-in-out; }
  100% { transform:rotate(-150deg); } }
.fresnel .tela { position:absolute; inset:0; width:100%; height:100%; }
/* Carrusel: carteles en su formato (2:3) y dimensionados por el alto de la pantalla, no por el ancho:
   así en cualquier monitor se ven unos tres y medio y el carrusel tiene sentido */
.car-card { flex-basis:max(240px, calc(58vh * 2 / 3)); aspect-ratio:2/3; }
body:has(#carrusel) .pagehead { padding:10vh 4vw 2vh; }
.carrusel { padding-bottom:3vh; }

/* ---------- Documental: tres proyectos en 16:9 ---------- */
.docs { padding:1vh 4vw 4vh; }
/* 1 · Índice con proyección */
.d-indice { display:grid; grid-template-columns:minmax(0,1fr) min(58vw, calc(62vh * 16 / 9)); gap:4vw; align-items:center; }
.d-indice ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3.4vh; }
.d-indice li a { display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:6px; opacity:.38; transition:opacity .5s, transform .5s var(--ease); }
.d-indice li a.on { opacity:1; transform:translateX(8px); }
.d-indice .n { grid-row:span 2; font-weight:200; font-size:clamp(1.4rem,2vw,2rem); color:rgba(var(--v),.72); line-height:1; }
.d-indice .t { font-weight:200; font-size:clamp(1.1rem,1.9vw,1.9rem); letter-spacing:.12em; text-transform:uppercase; line-height:1.15; }
.d-indice .t em { display:block; font-style:normal; font-size:.62em; letter-spacing:.16em; color:rgba(255,255,255,.7); margin-top:4px; }
.d-indice .m { grid-column:2; font:10px "Courier Prime",monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.pantalla { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--v),.42); }
.pantalla img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity 1.1s ease, transform 6s ease-out; }
.pantalla img.on { opacity:1; transform:scale(1); }
.docs .verficha { position:absolute; right:14px; bottom:14px; padding:7px 12px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#fff;
  background:rgba(7,7,7,.55); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px); transition:background .4s, border-color .4s; }
.pantalla:hover .verficha { background:rgba(7,7,7,.8); border-color:var(--gold); }
body:has(#docs) .pagehead { padding:10vh 4vw 2vh; }
.d-indice .pantalla { width:min(100%, calc((100vh - 360px) * 16 / 9)); justify-self:end; }
.d-indice { grid-template-columns:minmax(0,1fr) min(58vw, calc((100vh - 360px) * 16 / 9)); }
/* Antología: película un 10 % más transparente y el recorte de la plantilla algo suavizado */
.plantilla .marco { opacity:.9; filter:saturate(.67) blur(.4px) drop-shadow(0 0 2px rgba(0,0,0,.55)); }
/* Cine: el mismo botón, pero el anillo se mueve como una aguja de velocímetro (lo anima main.js) */
.foco-btn.vel img { animation:none; }
/* Cine: el Halcón Milenario cruza por debajo de los carteles en sentido contrario a la Enterprise */
.fresnel .halcon { position:absolute; bottom:calc(9vh + 6px); left:100%; width:44px; height:54px; opacity:0; transform:rotate(-90deg);
  background:url(assets/fondos/halcon.svg) center / contain no-repeat; animation:halcon 85s linear infinite; animation-delay:-20s; }
@keyframes halcon { 0% { left:100%; opacity:0; } 3% { opacity:.5; } 95% { opacity:.5; } 100% { left:-5%; opacity:0; } }
@media (prefers-reduced-motion: reduce) { .fresnel .halcon { animation:none; left:60%; opacity:.45; } }
/* Documental sin fichas: los títulos son botones; debajo, la explicación del activo; la pantalla reproduce */
.d-indice { align-items:start; }
.d-col { display:flex; flex-direction:column; gap:4vh; padding-top:1vh; }
.d-indice li button { all:unset; cursor:pointer; display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:6px; opacity:.38; transition:opacity .5s, transform .5s var(--ease); }
.d-indice li button:hover { opacity:.7; }
.d-indice li button.on { opacity:1; transform:translateX(8px); }
.d-indice li button:focus-visible { outline:1px solid var(--gold); outline-offset:6px; }
.d-txt { max-width:46ch; font-weight:200; font-size:15px; line-height:1.7; color:rgba(255,255,255,.72); border-left:1px solid rgba(var(--v),.42); padding-left:16px; min-height:5em; }
.pantalla iframe, .pantalla > img { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; opacity:1; transform:none; }
/* Antología: el haz del proyector, con el mismo dorado cálido que la luz de Cine y Documental */
.haz::before { background:linear-gradient(270deg, rgba(193,193,193,.24), rgba(184,184,184,.07) 50%, transparent 90%); }
.haz::after { background:linear-gradient(270deg, rgba(208,208,208,.24), transparent 60%); }
/* Documental: llamada muy discreta junto al botón «Contratar» */
.foco-pre { position:absolute; right:calc(4vw + 92px + 18px); top:calc(10vh + 4px + 46px); transform:translateY(-50%); font:11px "Courier Prime",monospace; letter-spacing:.06em; color:rgba(209,209,209,.5); transition:color .4s; }
.foco-pre:hover, .pagehead.conboton:has(.foco-btn:hover) .foco-pre { color:rgba(209,209,209,.9); }
.d-ver { display:flex; flex-wrap:wrap; gap:10px; margin-top:-1vh; }
.d-ver:empty { display:none; }

/* ---------- Servicios ---------- */
/* Fondo: papel de documento. Renglones finos que no terminan (se funden en los bordes), doble línea de margen,
   número de página de guion y cabecera de hoja. Todo en dorado, casi invisible */
.papel .renglones { position:absolute; inset:0; background:repeating-linear-gradient(180deg, transparent 0 31px, rgba(var(--v),.04) 31px 32px);
  -webkit-mask:radial-gradient(ellipse 75% 70% at 50% 50%, #000 35%, transparent 90%); mask:radial-gradient(ellipse 75% 70% at 50% 50%, #000 35%, transparent 90%); }
.papel .margen { position:absolute; top:0; bottom:0; left:calc(4vw + 30%); width:5px; border-left:1px solid rgba(var(--v),.14); border-right:1px solid rgba(var(--v),.04);
  -webkit-mask:linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask:linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.papel .folio { position:absolute; right:4vw; top:calc(10vh + 6px); font:12px "Courier Prime",monospace; color:rgba(var(--v),.42); }
.papel .cabecera { position:absolute; left:50%; top:calc(10vh + 8px); transform:translateX(-50%); font:9px "Courier Prime",monospace; letter-spacing:.3em; color:rgba(var(--v),.42); }
body:has(.serv) .pagehead { padding:10vh 4vw 4vh; }
.serv { display:grid; grid-template-columns:30% 1fr; gap:0; padding:0 4vw 10vh; min-height:46vh; }
.serv-lista { list-style:none; margin:0; padding:1vh 3vw 0 0; display:flex; flex-direction:column; gap:3vh; }
.serv-lista button { all:unset; cursor:pointer; display:grid; grid-template-columns:2.4em 1fr; align-items:baseline; font-weight:200; font-size:clamp(1rem,1.6vw,1.5rem); letter-spacing:.12em; text-transform:uppercase; line-height:1.25; opacity:.38; transition:opacity .5s, transform .5s var(--ease); }
.serv-lista button:hover { opacity:.7; }
.serv-lista button.on { opacity:1; transform:translateX(8px); }
.serv-lista button:focus-visible { outline:1px solid var(--gold); outline-offset:6px; }
.serv-lista .n { font:12px "Courier Prime",monospace; letter-spacing:.1em; color:var(--gold); }
.serv-hojas { position:relative; padding-left:calc(3vw + 5px); }
.serv-hoja { position:absolute; inset:0 0 auto calc(3vw + 5px); max-width:60ch; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .6s, transform .6s var(--ease), visibility 0s .6s; }
.serv-hoja.on { opacity:1; visibility:visible; transform:none; transition:opacity .6s, transform .6s var(--ease); }
.serv-hoja h2 { font-weight:200; font-size:clamp(1.6rem,3vw,2.8rem); letter-spacing:.14em; text-transform:uppercase; line-height:1.15; margin-bottom:3vh; }
.serv-hoja p { font-weight:200; font-size:clamp(1rem,1.25vw,1.2rem); line-height:1.75; color:rgba(255,255,255,.8); margin-bottom:2.4vh; }
.serv-hoja .ref { font-size:11px; color:rgba(255,255,255,.55); }
.serv-hoja .ref a { color:#d1d1d1; }
.serv-hoja .cta { display:inline-block; margin-top:2vh; }
body:has(.serv) { min-height:100vh; display:flex; flex-direction:column; }
body:has(.serv) > .serv { flex:1; }
.serv-hoja { max-width:min(56vw, 900px); }
.serv-hoja p { max-width:62ch; }
/* Servicios (v2): sin renglones; la doble línea vertical, pegada al índice */
.papel .renglones { display:none; }
.serv { grid-template-columns:24vw 1fr; }
.papel .margen { left:28vw; }
.serv-hojas { padding-left:0; }
.serv-hoja { inset:0 0 auto 3vw; max-width:none; }
/* Cine para marcas: texto a la izquierda y tres láminas del dossier de Cinema Hood en abanico */
.serv-hoja.marcas { display:grid; grid-template-columns:minmax(0, 30ch) 1fr; gap:4vw; align-items:start; right:0; }
.dossier { position:relative; display:block; width:min(100%, 36vw); aspect-ratio:16/9; margin-top:2vh; }
.dossier img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; box-shadow:0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--v),.42); transition:transform .7s var(--ease); }
.dossier img:nth-child(1) { transform:translate(-7%, -9%) rotate(-5deg) scale(.86); filter:brightness(.55); }
.dossier img:nth-child(2) { transform:translate(8%, -4%) rotate(4deg) scale(.9); filter:brightness(.7); }
.dossier:hover img:nth-child(1) { transform:translate(-12%, -13%) rotate(-8deg) scale(.86); }
.dossier:hover img:nth-child(2) { transform:translate(13%, -6%) rotate(7deg) scale(.9); }
.dossier:hover img:nth-child(3) { transform:translateY(4%) scale(1.02); }
.serv-lista button { font-size:clamp(.9rem,1.2vw,1.15rem); }
.serv-hoja.marcas { grid-template-columns:minmax(0, 36ch) 1fr; }
.dossier img:nth-child(1) { transform:translate(-13%, -15%) rotate(-6deg) scale(.8); }
.dossier img:nth-child(2) { transform:translate(13%, -9%) rotate(5deg) scale(.84); }
.dossier:hover img:nth-child(1) { transform:translate(-17%, -19%) rotate(-8deg) scale(.8); }
.dossier:hover img:nth-child(2) { transform:translate(17%, -11%) rotate(7deg) scale(.84); }
/* Cine para marcas: el dossier de Cinema Hood como hoja de storyboard (8 viñetas numeradas con su pie) */
.serv-hoja.marcas { display:block; }
.serv-hoja.marcas > div:not(.storyboard) { display:grid; grid-template-columns:auto 1fr auto; column-gap:3vw; align-items:end; margin-bottom:3.5vh; }
.serv-hoja.marcas > div:not(.storyboard) h2 { margin:0; }
.serv-hoja.marcas > div:not(.storyboard) p { margin:0; max-width:52ch; font-size:clamp(.9rem,1.05vw,1.05rem); }
.storyboard { display:grid; grid-template-columns:repeat(4, 1fr); gap:2.2vh 1.4vw; width:min(100%, calc((100vh - 440px) * 2.6)); }
.storyboard figure { position:relative; margin:0; }
.storyboard img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid rgba(var(--v),.42); filter:saturate(.85) brightness(.85); transition:filter .5s, transform .5s var(--ease); }
.storyboard figure:hover img { filter:none; transform:translateY(-3px); }
.storyboard .sb-n { position:absolute; left:6px; top:5px; z-index:1; font:9px "Courier Prime",monospace; color:#d1d1d1; background:rgba(7,7,7,.65); padding:1px 5px; }
.storyboard figcaption { margin-top:7px; font:10px/1.4 "Courier Prime",monospace; letter-spacing:.04em; color:rgba(209,209,209,.6); }
/* Cine para marcas: título, storyboard y, debajo, la explicación con el botón grande de Cinema Hood */
.serv-hoja.marcas > h2 { margin-bottom:2.6vh; }
.storyboard { width:min(100%, calc((100vh - 520px) * 2.6)); }
.marcas-pie { display:flex; align-items:center; justify-content:space-between; gap:3vw; margin-top:3.2vh; width:min(100%, calc((100vh - 520px) * 2.6)); }
.marcas-pie p { margin:0; max-width:54ch; font-size:clamp(.9rem,1.05vw,1.05rem); }
.boton-ch { flex-shrink:0; display:inline-flex; align-items:center; gap:14px; padding:18px 30px; background:linear-gradient(180deg, rgb(var(--v)), #3a947f); color:#060908; font-weight:400; font-size:13px; letter-spacing:.28em; text-transform:uppercase;
  box-shadow:0 18px 40px -16px rgba(var(--v),.42); transition:transform .4s var(--ease), box-shadow .4s, filter .4s; }
.boton-ch span { font-size:18px; letter-spacing:0; transition:transform .4s var(--ease); }
.boton-ch:hover { transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 24px 50px -16px rgba(var(--v),.72); }
.boton-ch:hover span { transform:translateX(4px); }
.boton-ch { padding:24px 46px; font-size:15px; } .boton-ch span { font-size:22px; }
/* explicación en dos renglones y botón de Cinema Hood más fino, a la derecha */
.marcas-pie p { max-width:none; }
.marcas-pie p span { display:block; white-space:nowrap; }
.boton-ch { padding:15px 28px; font-size:11px; letter-spacing:.32em; gap:12px; font-weight:400;
  background:linear-gradient(180deg, #42caab, #3b9681); border:1px solid rgba(226,226,226,.55); box-shadow:inset 0 0 0 3px rgba(6,9,8,.18), 0 14px 30px -14px rgba(var(--v),.72); }
.boton-ch span { font-size:15px; }
.marcas-pie p { flex:0 0 auto; font-size:clamp(.85rem,.95vw,1rem); } .boton-ch { letter-spacing:.24em; margin-left:auto; }
.serv-hoja.marcas > .marcas-pie { display:flex; align-items:center; justify-content:space-between; margin-bottom:0; }
/* Storyboard: al pasar el ratón, la lámina crece el doble desde su centro (como los fotogramas de la Antología).
   La lámina ampliada no capta el ratón: sigue mandando la casilla original, así que al moverte a la derecha
   o hacia abajo se abre la siguiente sin quedarte enganchado */
.storyboard img { pointer-events:none; transform-origin:50% 50%; transition:transform .45s cubic-bezier(.3,1.25,.5,1), filter .4s, box-shadow .4s; }
.storyboard figure:hover { z-index:10; }
.storyboard figure:hover img { transform:scale(2); filter:none; box-shadow:0 26px 70px rgba(0,0,0,.9); border-color:rgba(var(--v),.42); }
.storyboard figure:hover figcaption, .storyboard figure:hover .sb-n { opacity:0; }
.storyboard figcaption, .storyboard .sb-n { transition:opacity .25s; }
.storyboard:has(figure:hover) figure:not(:hover) img { filter:brightness(.35) saturate(.6); }
/* Ficha con foto vertical y pequeña (p. ej. De Caperucita a loba): deja el protagonismo a los vídeos */
.hero-v { margin:0; width:min(260px, 22vw); }
.hero-v img { display:block; width:100%; aspect-ratio:2/3; object-fit:cover; box-shadow:0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(var(--v),.14); }
/* Ficha: piezas verticales (9:16) en el mismo carrusel que Cine */
.reels-car { padding:0; margin-top:14px; }
.reels-car .car-card { aspect-ratio:9/16; flex-basis:max(200px, calc(64vh * 9 / 16)); }
.reels-car .car-card video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.reels-car .car-num { position:absolute; left:12px; top:10px; z-index:2; font-size:22px; pointer-events:none; }
.reels-car .car-card:hover { transform:none; }
/* Ficha con cartel vertical y piezas: arriba del todo, un sexto para el cartel y cinco sextos para el carrusel */
.top-v { display:grid; grid-template-columns:1fr 5fr; gap:5vw; align-items:start; }
.top-v .hero-v { width:100%; }
.top-v .reels-car { margin-top:0; min-width:0; padding-left:2.6vw; border-left:1px solid rgba(var(--v),.14); }
.top-v .reels-car .car-card { flex-basis:calc((92vw - 7.6vw) / 6 * 1.5 * 9 / 16); }
.top-v .reels-car .car-track { padding:0 0 12px; gap:14px; }
.top-v .reels-car .car-dots { margin-top:14px; }
.top-v .reels-car .car-num { font-size:16px; left:8px; top:6px; }
/* Ficha con cartel y piezas arriba: todo más compacto (cabecera, piezas y ficha técnica caben casi en una pantalla) */
body:has(.top-v, .hoja) .pagehead { padding:9vh 4vw 2vh; }
body:has(.top-v, .hoja) .pagehead h1 { font-size:clamp(1.8rem,3.6vw,3.4rem); }
body:has(.top-v, .hoja) .detail { padding:2.5vh 4vw 1vh; }
/* todo en un pantallazo 16:9: navegación anterior/siguiente y pie más ceñidos */
body:has(.top-v, .hoja) .pnav { margin-top:0; padding:2vh 4vw 1.5vh; }
body:has(.top-v, .hoja) footer { padding-top:1.6vh; padding-bottom:1.6vh; }
body:has(.top-v, .hoja) .wrap:not(.top-v):empty { display:none; }
/* Ficha de De Caperucita a loba: el mismo contraluz con partículas y, a línea fina, un bosque de pinos.
   Caperucita camina a la izquierda; el lobo acecha a la derecha y aparece y desaparece muy despacio */
.bosque .pinos { position:absolute; left:0; right:0; bottom:0; height:30vh; opacity:.13; background:url(assets/fondos/pinos.svg) center bottom / 100% 100% no-repeat; }
.bosque .caperucita { position:absolute; left:32vw; bottom:7vh; width:42px; height:67px; opacity:.6; background:url(assets/fondos/caperucita.svg) center / contain no-repeat; }
.bosque .lobo { position:absolute; right:29vw; bottom:7vh; width:130px; height:70px; opacity:.1; background:url(assets/fondos/lobo.svg) center / contain no-repeat; animation:acecha 14s ease-in-out infinite alternate; }
@keyframes acecha { 0%, 30% { opacity:.1; } 100% { opacity:.55; } }
@media (prefers-reduced-motion: reduce) { .bosque .lobo { animation:none; opacity:.3; } }
/* Padre no hay más que uno 5: hoja de contactos de foto fija, 5 × 2, todo en un pantallazo.
   El ancho se limita por el alto de la pantalla para que las dos filas quepan siempre */
.hj { position:relative; margin:0; aspect-ratio:3/2; flex:0 0 calc(24vh * 1.5); overflow:hidden; background:#0b0a09; cursor:zoom-in; box-shadow:0 0 0 1px rgba(var(--v),.14); }
.hj img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9); transition:transform .6s, filter .6s; }
.hj:hover img, .hj:focus img { transform:scale(1.05); filter:none; }
.hj span { position:absolute; left:8px; bottom:6px; font-size:10px; letter-spacing:.2em; color:rgba(209,209,209,.75); }
.lupa { position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(2,4,4,.94); opacity:0; pointer-events:none; transition:opacity .35s; cursor:zoom-out; }
.lupa.on { opacity:1; pointer-events:auto; }
.lupa img { max-width:68vw; max-height:70vh; box-shadow:0 30px 80px -30px #000; cursor:pointer; }
.lupa span { position:absolute; bottom:4vh; font-size:11px; letter-spacing:.3em; color:rgba(209,209,209,.6); }
/* en la hoja de contactos la ficha técnica va en una sola fila bajo las fotos */
body:has(.hoja) .pagehead .sub2 { margin-top:.2em; }
body:has(.hoja) .detail { display:block; padding:2.4vh 4vw 0; }
body:has(.hoja) .detail .spec { display:grid; grid-template-columns:repeat(5, auto); justify-content:space-between; gap:0 3vw; border:0; }
body:has(.hoja) .detail .spec div { display:block; border:0; padding:0; }
body:has(.hoja) .detail .spec dt { margin-bottom:.5em; }
body:has(.hoja) .detail .text { display:none; }
/* Padre 5 (v2): tira de fotos pequeñas en carrusel con flechas a los lados, en lugar de la hoja de 5 × 2 */
.hoja { padding:5vh 0 4vh; }
.fotos-car { position:relative; padding:0 4vw; }
.fotos-car .car-track { gap:14px; padding:6px 0 10px; }
.fotos-car .car-dots { margin-top:12px; }
.fotos-car:has(.hj:hover) .hj:not(:hover) img { filter:saturate(.6) brightness(.7); }
.car-flecha { position:absolute; top:calc(50% - 16px); z-index:2; width:30px; height:34px; padding:0; border:0; background:none; cursor:pointer; transform:translateY(-50%); }
.car-flecha svg { width:100%; height:100%; fill:#d1d1d1; stroke:#070707; stroke-width:1.2; opacity:.7; transition:opacity .3s, transform .3s; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.car-flecha:hover svg { opacity:1; transform:translateX(3px); }
.car-flecha.izq { left:calc(4vw - 40px); } .car-flecha.izq svg { transform:scaleX(-1); } .car-flecha.izq:hover svg { transform:scaleX(-1) translateX(3px); }
.car-flecha.der { right:calc(4vw - 40px); }
.lupa .car-flecha { top:50%; width:36px; height:42px; }
.lupa .car-flecha.izq { left:11vw; } .lupa .car-flecha.der { right:11vw; }
/* Padre 5 (foto fija): el mismo contraluz con partículas; las esquinas de encuadre de un visor y una cámara de fotos
   a línea dorada junto al título, que de vez en cuando dispara un flash muy tenue */
.visorfoto .esq { position:absolute; inset:9vh 2.4vw 3vh; opacity:.22;
  background:linear-gradient(#d1d1d1,#d1d1d1) left top / 26px 1px, linear-gradient(#d1d1d1,#d1d1d1) left top / 1px 26px,
    linear-gradient(#d1d1d1,#d1d1d1) right top / 26px 1px, linear-gradient(#d1d1d1,#d1d1d1) right top / 1px 26px,
    linear-gradient(#d1d1d1,#d1d1d1) left bottom / 26px 1px, linear-gradient(#d1d1d1,#d1d1d1) left bottom / 1px 26px,
    linear-gradient(#d1d1d1,#d1d1d1) right bottom / 26px 1px, linear-gradient(#d1d1d1,#d1d1d1) right bottom / 1px 26px;
  background-repeat:no-repeat; }
.visorfoto .camara { position:absolute; right:9vw; top:calc(9vh + 74px); width:72px; height:50px; opacity:.45; background:url(assets/fondos/camara.svg) center / contain no-repeat; }
.visorfoto .camara i { position:absolute; left:6px; top:-14px; width:30px; height:30px; border-radius:50%; background:radial-gradient(circle, rgba(227,227,227,.9), rgba(208,208,208,.25) 40%, transparent 70%); opacity:0; animation:flash 11s ease-out infinite; }
@keyframes flash { 0%, 93% { opacity:0; transform:scale(.6); } 94% { opacity:1; transform:scale(1.4); } 100% { opacity:0; transform:scale(2.2); } }
@media (prefers-reduced-motion: reduce) { .visorfoto .camara i { animation:none; } }
/* Piezas horizontales (Vimeo) en el carrusel de arriba, junto al cartel vertical */
.top-v .reels-car .car-card.pieza169 { aspect-ratio:auto; flex-basis:calc((92vw - 7.6vw) * 5 / 6 / 2.7); overflow:visible; box-shadow:none; }
.pieza169 .clip { aspect-ratio:16/9; box-shadow:0 0 0 1px rgba(var(--v),.14); }
.pieza169 .playbtn { width:52px; height:52px; }
.pieza169 figcaption { display:flex; justify-content:space-between; gap:10px; padding-top:10px; font-size:12px; }
.pieza169 figcaption b { font-weight:300; letter-spacing:.06em; } .pieza169 figcaption span { font:11px "Courier Prime",monospace; color:var(--mut); }
.pieza169 .car-num { position:absolute; left:8px; top:6px; }
/* Tierra de Nadie (narcos): el mismo contraluz con partículas; abajo un mar a línea fina, una lancha que avanza
   despacio hacia la costa y un faro cuyo haz barre el mar arrastrando motas de luz */
.costa .mar { position:absolute; left:0; right:0; bottom:0; height:11vh; opacity:.16; background:url(assets/fondos/mar.svg) center / 100% 100% no-repeat; }
.costa .lancha { position:absolute; bottom:6.5vh; left:4vw; width:54px; height:17px; opacity:.6; background:url(assets/fondos/lancha.svg) center / contain no-repeat; animation:lancha 90s linear infinite; }
.costa .lancha i { position:absolute; right:100%; top:13px; width:70px; height:1px; background:linear-gradient(90deg, transparent, rgba(209,209,209,.45)); }
@keyframes lancha { 0% { left:4vw; opacity:0; } 5% { opacity:.6; } 90% { opacity:.6; } 100% { left:78vw; opacity:0; } }
.costa .faro { position:absolute; right:5vw; bottom:3vh; width:34px; height:79px; opacity:.6; background:url(assets/fondos/faro.svg) center / contain no-repeat; }
.costa .faro .haz { position:absolute; left:17px; top:20px; width:46vw; height:90px; margin-top:-45px; transform-origin:0 50%;
  clip-path:polygon(0 47%, 100% 0, 100% 100%, 0 53%);
  background:radial-gradient(circle, rgba(218,218,218,.9) 0 1px, transparent 1.6px) 0 0 / 23px 17px, radial-gradient(circle, rgba(218,218,218,.7) 0 .8px, transparent 1.4px) 9px 7px / 31px 23px,
    linear-gradient(90deg, rgba(208,208,208,.32), rgba(208,208,208,.08) 60%, transparent);
  -webkit-mask:linear-gradient(90deg, #000 20%, transparent); mask:linear-gradient(90deg, #000 20%, transparent);
  animation:barre 14s ease-in-out infinite alternate, motas 9s linear infinite; }
@keyframes barre { from { transform:rotate(168deg); } to { transform:rotate(196deg); } }
@keyframes motas { to { background-position:-230px 0, -310px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .costa .lancha, .costa .faro .haz { animation:none; } .costa .faro .haz { transform:rotate(180deg); } }
/* fichas con cartel vertical arriba: la ficha técnica en dos columnas para que todo quepa en un pantallazo */
body:has(.top-v) .detail { grid-template-columns:2.3fr 1fr; gap:4vw; }
body:has(.top-v) .detail .spec { display:grid; grid-template-columns:1fr 1fr; column-gap:3vw; align-content:start; }
body:has(.top-v) .detail .spec div { grid-template-columns:96px 1fr; gap:14px; padding:7px 0; }
/* la escena del mar va en el hueco a la derecha, bajo el texto, como una viñeta pequeña (no bajo la navegación) */
.costa .mar { left:64vw; right:4vw; bottom:17vh; height:5.5vh; opacity:.2;
  -webkit-mask:linear-gradient(90deg, transparent, #000 25%); mask:linear-gradient(90deg, transparent, #000 25%); }
.costa .faro { right:4.5vw; bottom:calc(17vh + 18px); width:28px; height:65px; }
.costa .faro .haz { left:14px; top:16px; width:24vw; height:70px; margin-top:-35px; }
.costa .lancha { bottom:calc(17vh + 14px); width:44px; height:14px; animation-duration:70s; }
.costa .lancha i { top:10px; width:50px; }
@keyframes lancha { 0% { left:63vw; opacity:0; } 8% { opacity:.6; } 88% { opacity:.6; } 100% { left:87vw; opacity:0; } }
body:has(.top-v) .detail { padding-top:2vh; }
/* plantilla de fichas de Cine: foto fija junto al cartel (con sus flechas) y marcos vacíos mientras no haya material */
.top-v .fotos-car { padding:0 40px 0 calc(2.6vw + 40px); border-left:1px solid rgba(var(--v),.14); min-width:0; }
.top-v .fotos-car .car-flecha.izq { left:calc(2.6vw + 2px); } .top-v .fotos-car .car-flecha.der { right:2px; }
.top-v .fotos-car .hj { flex-basis:calc(22vh * 1.5); }
.pieza169.hueco .clip { background:none; box-shadow:none; border:1px dashed rgba(var(--v),.14); }
.pieza169.hueco:hover { transform:none; }
/* en la plantilla de Cine: subtítulo pegado al título, etiquetas de la ficha sin partir y los botones de ver bajo el texto */
body:has(.top-v) .pagehead .sub2 { margin-top:.15em; font-size:clamp(1rem,1.4vw,1.25rem); }
body:has(.top-v) .detail .spec div { grid-template-columns:128px 1fr; }
body:has(.top-v) .detail .text p { font-size:14px; line-height:1.6; }
body:has(.top-v) .detail .watchrow { margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; }
/* ficha técnica en rejilla: etiqueta encima del dato, tantas columnas como quepan (2 filas como mucho) */
body:has(.top-v) .detail .spec { grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); column-gap:2.4vw; }
body:has(.top-v) .detail .spec div { display:block; padding:9px 0; }
body:has(.top-v) .detail .spec dt { margin-bottom:5px; padding-top:0; }
body:has(.top-v) .detail .spec dd { font-size:13px; line-height:1.45; }
/* plantilla de Cine algo más baja: el cartel ocupa un séptimo; las piezas mantienen su proporción con él */
.top-v { grid-template-columns:1fr 6fr; }
.top-v .reels-car .car-card { flex-basis:calc((92vw - 7.6vw) / 7 * 1.5 * 9 / 16); }
.top-v .reels-car .car-card.pieza169 { flex-basis:calc((92vw - 7.6vw) * 6 / 7 / 2.9); }
.top-v .fotos-car .hj { flex-basis:calc(19vh * 1.5); }
body:has(.top-v) .detail .watchrow { flex-wrap:nowrap; }
body:has(.top-v) .detail .watchrow > * { transform-origin:left center; }
body:has(.top-v) .detail .watch { padding:7px 12px; gap:10px; font-size:9px; letter-spacing:.2em; white-space:nowrap; }
body:has(.top-v) .detail { grid-template-columns:minmax(0, 2.2fr) minmax(0, 1fr); }
body:has(.top-v) .detail .watchrow { gap:8px; }
body:has(.top-v) .detail .watch { padding:6px 10px; gap:8px; letter-spacing:.16em; }
body:has(.top-v) .pnav { padding-top:1.4vh; padding-bottom:1.2vh; }
/* Bio: los guiños de 2001 y Regreso al futuro, a la derecha del texto (en Cine quedaban tapados por los carteles) */
.guinos .monolito { left:auto; right:16vw; bottom:20vh; }

/* ====== Plantilla común de las fichas de Cine (alturas fijas: la barra anterior/siguiente cae en el mismo píxel) ======
   cabecera 24vh · cartel + carrusel 38vh · franja de ficha 9vh · barra; lo demás va debajo, con scroll */
body:has(.franja) .pagehead.fc-head { box-sizing:border-box; height:24vh; padding:0 4vw 2.2vh; display:flex; flex-direction:column; justify-content:flex-end; }
.fc-head h1 { font-size:clamp(1.8rem,3.4vw,3.2rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fc-head h1 .sub2 { display:inline; margin-left:.8em; font-size:.38em; letter-spacing:.24em; vertical-align:.35em; color:var(--mut); }
body:has(.franja) .top-v { box-sizing:border-box; height:38vh; grid-template-columns:auto minmax(0, 1fr); gap:2.4vw; align-items:center; }
body:has(.franja) .top-v .hero-v { width:auto; height:38vh; }
body:has(.franja) .top-v .hero-v img { width:auto; height:100%; aspect-ratio:2/3; }
body:has(.franja) .top-v .reels-car .car-card.reel { flex-basis:auto; height:calc(38vh - 46px); width:calc((38vh - 46px) * 9 / 16); }
body:has(.franja) .top-v .reels-car .car-card.pieza169 { flex-basis:auto; width:calc((38vh - 86px) * 16 / 9); }
body:has(.franja) .top-v .fotos-car .hj { flex-basis:calc(21vh * 1.5); }
.franja { box-sizing:border-box; height:9vh; padding:1.6vh 4vw 0; overflow:hidden; }
.franja .spec { display:flex; gap:3vw; max-width:64vw; margin:0; }
.franja .spec div { display:block; min-width:0; flex:0 1 auto; padding:0; border:0; }
.franja .spec dt { font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--mut); margin-bottom:6px; }
.franja .spec dd { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:22vw; }
body:has(.franja) .pnav { margin-top:0; padding:1.8vh 4vw 1.6vh; }
body:has(.franja) .detail.extra { padding:5vh 4vw 6vh; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
body:has(.franja) .detail.extra .spec div { grid-template-columns:150px 1fr; display:grid; }

/* La escena de cada película: diminuta, siempre en el mismo rincón (a la derecha de la franja, sobre la barra) */
.ficha-cine .escena { position:absolute; right:4vw; top:61vh; width:26vw; height:9vh; }
.escena > span { position:absolute; bottom:0; background:center / contain no-repeat; }
/* Caperucita: pinos a su escala; ella camina hacia el bosque y el lobo aparece y desaparece entre los árboles */
.escena .pinos { right:0; width:130px; height:52px; opacity:.4; background-image:url(assets/fondos/pinos-mini.svg); }
.escena .caperucita { left:0; width:19px; height:30px; opacity:.65; background-image:url(assets/fondos/caperucita.svg); animation:camina 46s linear infinite; }
@keyframes camina { 0% { left:0; opacity:0; } 6% { opacity:.65; } 85% { opacity:.65; } 100% { left:52%; opacity:0; } }
.escena .lobo { right:58px; width:60px; height:32px; opacity:.1; background-image:url(assets/fondos/lobo.svg); animation:acecha 14s ease-in-out infinite alternate; }
/* Tierra de Nadie: mar, lancha hacia la costa y el haz del faro barriendo el agua con motas de luz */
.escena .mar { left:0; right:0; height:42%; opacity:.22; background:url(assets/fondos/mar.svg) center / 100% 100% no-repeat;
  -webkit-mask:linear-gradient(90deg, transparent, #000 25%); mask:linear-gradient(90deg, transparent, #000 25%); }
.escena .lancha { bottom:22%; width:40px; height:13px; opacity:.6; background-image:url(assets/fondos/lancha.svg); animation:lancha2 70s linear infinite; }
.escena .lancha i { position:absolute; right:100%; top:9px; width:46px; height:1px; background:linear-gradient(90deg, transparent, rgba(209,209,209,.45)); }
@keyframes lancha2 { 0% { left:0; opacity:0; } 8% { opacity:.6; } 88% { opacity:.6; } 100% { left:78%; opacity:0; } }
.escena .faro { right:0; bottom:8%; width:26px; height:61px; opacity:.6; background-image:url(assets/fondos/faro.svg); }
.escena .faro .haz { position:absolute; left:13px; top:15px; width:22vw; height:64px; margin-top:-32px; transform-origin:0 50%;
  clip-path:polygon(0 47%, 100% 0, 100% 100%, 0 53%);
  background:radial-gradient(circle, rgba(218,218,218,.9) 0 1px, transparent 1.6px) 0 0 / 23px 17px, radial-gradient(circle, rgba(218,218,218,.7) 0 .8px, transparent 1.4px) 9px 7px / 31px 23px,
    linear-gradient(90deg, rgba(208,208,208,.32), rgba(208,208,208,.08) 60%, transparent);
  -webkit-mask:linear-gradient(90deg, #000 20%, transparent); mask:linear-gradient(90deg, #000 20%, transparent);
  animation:barre 14s ease-in-out infinite alternate, motas 9s linear infinite; }
/* Padre 5: la cámara de fotos en el rincón, con su flash ocasional */
.escena .camara { right:0; width:64px; height:44px; opacity:.5; background-image:url(assets/fondos/camara.svg); }
.escena .camara i { position:absolute; left:5px; top:-13px; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle, rgba(227,227,227,.9), rgba(208,208,208,.25) 40%, transparent 70%); opacity:0; animation:flash 11s ease-out infinite; }
/* La familia Benetón +2: una fila de niños; uno salta y a otro se le escapa un globo */
.escena .ninos { right:0; width:170px; height:45px; opacity:.5; background-image:url(assets/fondos/ninos.svg); }
.escena .salto { right:176px; width:14px; height:26px; opacity:.55; background-image:url(assets/fondos/salto.svg); animation:salta 1.6s cubic-bezier(.3,0,.7,1) infinite alternate; }
@keyframes salta { 0%, 30% { transform:translateY(0); } 100% { transform:translateY(-12px); } }
.escena .globo { right:40px; bottom:24px; width:11px; height:27px; opacity:0; background-image:url(assets/fondos/globo.svg); animation:globo 16s ease-in infinite; }
@keyframes globo { 0%, 20% { transform:translate(0,0); opacity:.55; } 100% { transform:translate(-30px,-9vh); opacity:0; } }
/* Ya no quedan junglas: una pistola que de vez en cuando dispara (fogonazo y traza de la bala) */
.escena .pistola { right:0; width:60px; height:36px; opacity:.55; background-image:url(assets/fondos/pistola.svg); }
.escena .pistola .fogonazo { position:absolute; left:-12px; top:1px; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle, rgba(223,223,223,.95), rgba(183,183,183,.35) 45%, transparent 70%); opacity:0; animation:fogonazo 7s linear infinite; }
.escena .pistola .traza { position:absolute; right:calc(100% + 8px); top:9px; width:20vw; height:1px; background:linear-gradient(90deg, transparent, rgba(208,208,208,.7)); transform-origin:right; transform:scaleX(0); opacity:0; animation:traza 7s ease-out infinite; }
@keyframes fogonazo { 0%, 90% { opacity:0; } 91% { opacity:1; } 95%, 100% { opacity:0; } }
@keyframes traza { 0%, 90% { transform:scaleX(0); opacity:0; } 91% { opacity:1; } 96% { transform:scaleX(1); opacity:.6; } 100% { transform:scaleX(1); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .escena *, .escena > span { animation:none !important; } }
body:has(.franja) .pagehead.fc-head { height:26vh; }
body:has(.franja) .top-v { height:37vh; }
body:has(.franja) .top-v .hero-v { height:37vh; }
body:has(.franja) .top-v .reels-car .car-card.reel { height:calc(37vh - 46px); width:calc((37vh - 46px) * 9 / 16); }
body:has(.franja) .top-v .reels-car .car-card.pieza169 { width:calc((37vh - 86px) * 16 / 9); }
.franja { height:8vh; }
.pieza169.hueco .clip { border-color:rgba(var(--v),.42); }
.franja .spec { gap:2.4vw; max-width:66vw; } .franja .spec dd { max-width:30vw; }
/* Padre 5: flashazo de vez en cuando. Destello grande en la cámara y, a la vez, un golpe de luz muy breve en toda la pantalla */
.escena .camara i { left:-22px; top:-40px; width:84px; height:84px; animation:flashazo 9s ease-out infinite; }
.escena.padre-no-hay-mas-que-uno-5::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse 80% 70% at 90% 70%, rgba(240,240,240,.16), rgba(233,233,233,.05) 50%, transparent 80%); animation:flashazo 9s ease-out infinite; }
@keyframes flashazo { 0%, 88% { opacity:0; transform:scale(.5); } 88.6% { opacity:1; transform:scale(1.15); } 91% { opacity:.25; transform:scale(1.4); } 94%, 100% { opacity:0; transform:scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .escena.padre-no-hay-mas-que-uno-5::before { animation:none; } }
/* Padre 5 (v2): flash de verdad. Predestello y disparo secos (décimas de segundo), con brillo en cruz en la zapata
   de la cámara y un golpe blanco en toda la pantalla; nada de círculos que crecen */
.escena .camara i { left:-33px; top:-35px; width:90px; height:90px; border-radius:0; transform:none;
  background:radial-gradient(circle, #fff 0 2.5px, rgba(240,240,240,.75) 5px, rgba(233,233,233,.15) 12px, transparent 18px),
    linear-gradient(90deg, transparent, rgba(247,247,247,.95) 50%, transparent) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(247,247,247,.8) 50%, transparent) center / 1px 64% no-repeat;
  animation:disparo 9s linear infinite; }
.escena.padre-no-hay-mas-que-uno-5::before { transform:none; background:radial-gradient(ellipse 70% 60% at 88% 68%, rgba(248,248,248,.22), rgba(248,248,248,.07) 55%, rgba(248,248,248,.03)); animation:disparo 9s linear infinite; }
@keyframes disparo { 0%, 90% { opacity:0; } 90.1% { opacity:.7; } 90.6% { opacity:0; } 91.8% { opacity:0; } 91.9% { opacity:1; } 92.8% { opacity:.35; } 93.6%, 100% { opacity:0; } }
/* Antología: la foto ampliada en la ficha va en su color original */
.ficha-img img { filter:none; }
/* Ficha de Antología (v2, más apetecible): la foto a su tamaño, sin bandas negras, con sombra y filo dorado;
   el texto en un panel centrado con filete dorado, título en caja normal y la segunda parte en una línea pequeña.
   Se conserva el fondo de película velada de la ficha */
.ficha-in { width:min(86vw, 1240px); height:80vh; grid-template-columns:auto minmax(320px, 1fr); gap:3.4vw; align-items:center; padding:5vh 3.4vw; }
.ficha-img { height:100%; background:none; box-shadow:none; border-radius:0; overflow:visible; justify-content:flex-start; }
.ficha-img img { width:auto; height:auto; max-height:100%; max-width:54vw; border-radius:3px;
  box-shadow:0 34px 80px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(209,209,209,.28); }
.ficha.on .ficha-img img { animation:entraFoto .7s var(--ease) both; }
@keyframes entraFoto { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
.ficha-txt { align-self:center; background:rgba(8,7,6,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:36px 36px 32px; border-radius:2px; border-left:1px solid rgba(var(--v),.72); box-shadow:0 30px 70px -30px rgba(0,0,0,.8); }
.ficha-txt > .small { color:var(--gold); letter-spacing:.34em; }
.ficha-txt h2 { text-transform:none; letter-spacing:.02em; font-weight:200; font-size:clamp(1.8rem,2.6vw,2.6rem); line-height:1.12; margin:12px 0 26px; }
.ficha-txt h2 small { display:block; margin-top:12px; font-size:11px; font-weight:300; letter-spacing:.26em; text-transform:uppercase; color:rgba(209,209,209,.7); line-height:1.6; }
.ficha-txt .spec div { grid-template-columns:110px 1fr; padding:11px 0; border-top:1px solid rgba(var(--v),.14); }
.ficha-txt .spec dt { color:rgba(var(--v),.72); }
.ficha-txt .spec dd { font-size:14px; color:#e9e9e9; }
.ficha.on .ficha-txt { animation:entraTxt .7s .12s var(--ease) both; }
@keyframes entraTxt { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
.ficha-txt { max-width:500px; }
/* foto a la derecha en la ficha cuando el personaje mira a la izquierda (mira hacia el texto) */
.ficha.foto-der .ficha-in { grid-template-columns:minmax(320px, 1fr) auto; }
.ficha.foto-der .ficha-img { order:2; justify-content:flex-end; }
.ficha.foto-der .ficha-txt { order:1; justify-self:end; border-left:0; border-right:1px solid rgba(var(--v),.72); }
.ficha.foto-der.on .ficha-txt { animation-name:entraTxtIzq; }
@keyframes entraTxtIzq { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } }
/* el fondo de película velada de la ficha, a la mitad de opacidad (pasa a una capa propia detrás del contenido) */
.ficha-in { isolation:isolate; background:none; }
.ficha-in::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:.5; pointer-events:none;
  background:url(assets/film/vel-3.svg) center/100% 100%, url(assets/film/grano.svg), linear-gradient(180deg, rgba(11,43,36,.6), rgba(14,56,46,.6) 50%, rgba(10,40,33,.6)); }
.ficha-in { background:#070a0a; }

/* Portada en móvil: sin el pantallazo fijo; scroll normal y un proyecto debajo de otro */

/* Documental en móvil: los tres uno debajo de otro; la pregunta «¿Quieres grabar…?» bajo el título */
.d-lista { display:flex; flex-direction:column; gap:8vh; }
.d-item .pantalla { width:100%; }
.d-info { display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:6px; margin-top:16px; }
.d-info .n { grid-row:span 2; font-weight:200; font-size:1.6rem; color:rgba(var(--v),.72); line-height:1; }
.d-info .t { font-weight:200; font-size:1.2rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.2; }
.d-info .t em { display:block; font-style:normal; font-size:.7em; letter-spacing:.16em; color:rgba(255,255,255,.7); margin-top:4px; }
.d-info .m { grid-column:2; font:10px "Courier Prime",monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.d-info .d-txt, .d-info .d-ver { grid-column:1 / -1; margin-top:10px; }
.d-info .d-txt { color:rgba(255,255,255,.7); font-size:15px; line-height:1.6; }
.d-info .d-ver:empty { display:none; }

/* Cine en móvil: la Enterprise vuela más alta y algo más pequeña, sin cruzarse con las fichas */

/* Servicios en móvil: todos abiertos, uno debajo de otro. Índice I · II · III fijo arriba que marca dónde estás;
   los storyboards, en tira que se desliza de lado con contador, barra y aviso «Desliza» */
.sb-guia { display:none; }
@media (max-width:760px) and (prefers-reduced-motion:reduce) { .sb-desliza span { animation:none; } }

/* Visor del storyboard (móvil): la viñeta a pantalla completa; se pasa con flechas o deslizando; en horizontal, más grande */
.sb-visor { position:fixed; inset:0; z-index:60; background:rgba(2,4,4,.97); opacity:0; pointer-events:none; transition:opacity .3s; }
.sb-visor.on { opacity:1; pointer-events:auto; }
.sb-pista { position:absolute; inset:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior:contain; }
.sb-pista::-webkit-scrollbar { display:none; }
.sb-pista figure { flex:0 0 100%; height:100%; margin:0; padding:0 14px; scroll-snap-align:center; scroll-snap-stop:always; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sb-pista img { max-width:100%; max-height:calc(100dvh - 140px); object-fit:contain; border:1px solid rgba(var(--v),.42); box-shadow:0 30px 80px -30px #000; }
.sb-pista figcaption { margin-top:14px; font:12px/1.4 "Courier Prime",monospace; letter-spacing:.04em; color:rgba(209,209,209,.75); text-align:center; }
.sb-vcont { position:absolute; top:22px; left:18px; z-index:2; font:11px "Courier Prime",monospace; letter-spacing:.14em; color:rgba(209,209,209,.7); }
.sb-x { position:absolute; top:8px; right:8px; z-index:2; width:44px; height:44px; padding:0; border:0; background:none; color:#d1d1d1; font:300 30px/1 Jost, sans-serif; cursor:pointer; }
.sb-visor .car-flecha { top:50%; width:34px; height:40px; }
.sb-visor .car-flecha.izq { left:4px; } .sb-visor .car-flecha.der { right:4px; }
.sb-visor .car-flecha[hidden] { display:none; }
/* Servicios con el teléfono en horizontal: índice en una sola línea y viñetas más estrechas para que quepan en alto */
/* Visor del storyboard en ordenador: se abre al pinchar una viñeta; flechas más separadas y la diapositiva más grande */
.storyboard figure { cursor:zoom-in; }
@media (min-width:761px) {
  .sb-pista img { max-width:min(84vw, 1500px); max-height:calc(100vh - 160px); }
  .sb-visor .car-flecha { width:40px; height:48px; }
  .sb-visor .car-flecha.izq { left:3vw; } .sb-visor .car-flecha.der { right:3vw; }
  .sb-vcont { top:28px; left:3vw; } .sb-x { top:16px; right:2.4vw; }
}
@media (min-width:761px) { .sb-pista img { width:min(80vw, calc((100vh - 170px) * 16 / 9)); height:auto; } }

/* ---------- Páginas legales y 404 ---------- */
footer .legales { display:flex; gap:2.2vw; }
.legal { max-width:760px; padding:2vh 4vw 10vh; font-size:15px; line-height:1.7; color:rgba(233,233,233,.82); }
.legal h2 { margin:5vh 0 1.4vh; font-weight:300; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.legal p { margin:0 0 1.2em; max-width:68ch; }
.legal a { color:#d1d1d1; border-bottom:1px solid rgba(var(--v),.42); }
.legal a:hover { color:#fff; }
.legal .spec { margin:1.6em 0; }
.legal .spec dd { font-size:14px; line-height:1.6; }
.legal-fecha { margin-top:7vh !important; font-size:11px; color:var(--mut); }
.hueco { color:var(--gold); background:rgba(var(--v),.14); padding:0 4px; border-radius:2px; }
.no-encontrada { min-height:calc(100vh - 160px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12vh 4vw 6vh; }
.no-encontrada h1 { font-weight:200; font-size:clamp(1.6rem,3vw,2.6rem); letter-spacing:.2em; text-transform:uppercase; margin:4vh 0 1.4vh; }
.no-encontrada p { color:var(--mut); margin:0 0 4vh; }
.no-encontrada .links { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
/* cuenta atrás de cola de película (leader), a línea dorada, con la aguja girando */
.no-encontrada .cuenta { position:relative; width:150px; height:150px; border-radius:50%; border:1px solid rgba(var(--v),.42); display:grid; place-items:center;
  background:linear-gradient(rgba(var(--v),.42),rgba(var(--v),.42)) center / 1px 100% no-repeat, linear-gradient(rgba(var(--v),.42),rgba(var(--v),.42)) center / 100% 1px no-repeat; }
.no-encontrada .cuenta::before { content:""; position:absolute; inset:12px; border-radius:50%; border:1px solid rgba(var(--v),.42); }
.no-encontrada .cuenta i { position:absolute; inset:0; border-radius:50%; background:conic-gradient(rgba(var(--v),.14) 0deg, transparent 0deg); animation:leader 2s linear infinite; }
@property --g { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.no-encontrada .cuenta i { background:conic-gradient(rgba(var(--v),.14) var(--g), transparent var(--g)); }
@keyframes leader { to { --g:360deg; } }
.no-encontrada .cuenta span { position:relative; font:300 2.2rem Jost, sans-serif; letter-spacing:.12em; color:#d1d1d1; background:#070707; padding:0 10px; }
@media (prefers-reduced-motion: reduce) { .no-encontrada .cuenta i { animation:none; } }

/* ---------- Contacto: un solo pantallazo; correo, teléfono y dónde. Abajo a la derecha, una lechuza con un sobre en el pico
   (el correo de las lechuzas), a línea dorada; parpadea de vez en cuando y ladea la cabeza ---------- */
.contactpage { min-height:calc(100vh - 80px); box-sizing:border-box; padding:16vh 4vw 8vh; }
.contactpage .mail { margin:22px 0 18px; }
.contactpage .tel { align-self:flex-start; font-weight:200; font-size:clamp(1.1rem,2.2vw,1.9rem); letter-spacing:.12em; color:rgba(233,233,233,.85); border-bottom:1px solid transparent; transition:border-color .6s; }
.contactpage .tel:hover { border-color:rgba(var(--v),.72); }
.contactpage .donde { margin:4.5vh 0 5vh; font:12px "Courier Prime",monospace; letter-spacing:.14em; color:rgba(209,209,209,.62); }
.buho .lechuza { position:absolute; right:7vw; bottom:12vh; width:74px; height:94px; opacity:.6; transform-origin:50% 90%; animation:ladea 13s ease-in-out infinite; }
.buho .ojos { animation:ojos 6.5s steps(1) infinite; } .buho .parpados { opacity:0; animation:parpado 6.5s steps(1) infinite; }
@keyframes ojos { 0%, 93% { opacity:1; } 94%, 96% { opacity:0; } 97% { opacity:1; } }
@keyframes parpado { 0%, 93% { opacity:0; } 94%, 96% { opacity:1; } 97% { opacity:0; } }
@keyframes ladea { 0%, 60%, 100% { transform:rotate(0); } 66%, 74% { transform:rotate(-9deg); } 80% { transform:rotate(0); } }
@media (prefers-reduced-motion: reduce) { .buho .lechuza, .buho .ojos, .buho .parpados { animation:none; } }
/* Contacto (v2): la carta llega volando, ondulando como un papel, hasta el pico de la lechuza; ella da un saltito
   al cogerla, la sostiene un rato y la carta se desvanece (entregada). Ciclo de 16 s */
.buho .nido { position:absolute; right:7vw; bottom:12vh; width:74px; height:94px; animation:salto 16s ease-out infinite; }
.buho .lechuza { position:absolute; inset:0; right:auto; bottom:auto; width:100%; height:100%; }
.buho .sobre { opacity:0; animation:sobre 16s steps(1) infinite; }
.buho .carta { position:absolute; left:25px; top:46px; width:24px; height:15px; opacity:0; z-index:1; animation:vuela 16s cubic-bezier(.3,.2,.3,1) infinite; }
@keyframes vuela {
  0% { opacity:0; transform:translate(-46vw,-38vh) rotate(-24deg) scale(1.4); }
  3% { opacity:.85; }
  10% { transform:translate(-34vw,-30vh) rotate(14deg) scale(1.3); }
  18% { transform:translate(-22vw,-22vh) rotate(-12deg) scale(1.2); }
  26% { transform:translate(-11vw,-11vh) rotate(10deg) scale(1.1); }
  33% { transform:translate(-3vw,-3vh) rotate(-6deg) scale(1.02); opacity:.85; }
  36% { transform:none; opacity:.85; }
  36.5%, 100% { transform:none; opacity:0; } }
@keyframes sobre { 0% { opacity:0; } 36.5% { opacity:1; } 90% { opacity:0; } }
@keyframes salto { 0%, 35%, 41%, 100% { transform:none; } 37.5% { transform:translateY(-5px); } }
.buho .sobre { transition:opacity .6s; }
@media (prefers-reduced-motion: reduce) { .buho .carta, .buho .nido { animation:none; } .buho .sobre { animation:none; opacity:1; } }

/* Home (v2): una foto de rodaje fundida en la luz, a la derecha del nombre: Andy con la cámara apuntando hacia la luz dorada.
   Virada a sepia, oscurecida y con bordes desvanecidos para que se lea como parte del contraluz, no como una foto pegada */
.intro .retrato { position:absolute; right:24vw; top:50%; width:min(34vw, 520px); height:170%; transform:translateY(-50%); pointer-events:none;
  background:url(assets/rodaje/merida.jpg) 40% 32% / cover no-repeat;
  filter:grayscale(1) sepia(.55) saturate(.9) brightness(.62) contrast(1.15); mix-blend-mode:lighten; opacity:.9;
  -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 72%); mask:radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 72%); }
/* llamada a la acción: dos botones centrados bajo los proyectos; Contacto principal (dorado), Servicios secundario (filete) */
.more.acciones { gap:18px; align-items:center; }
.btn-oro, .btn-linea { display:inline-flex; align-items:center; gap:12px; padding:16px 34px; font-size:12px; font-weight:400; letter-spacing:.3em; text-transform:uppercase; transition:transform .4s var(--ease), filter .4s, box-shadow .4s, border-color .4s, color .4s; }
.btn-oro { background:linear-gradient(180deg, rgb(var(--v)), #3a947f); color:#060908; box-shadow:0 14px 34px -18px rgba(var(--v),.72); }
.btn-oro span { font-size:16px; letter-spacing:0; transition:transform .4s var(--ease); }
.btn-oro:hover { transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 24px 50px -16px rgba(var(--v),.72); } .btn-oro:hover span { transform:translateX(4px); }
.btn-linea { border:1px solid rgba(var(--v),.42); color:#d1d1d1; }
.btn-linea:hover { transform:translateY(-2px); border-color:rgb(var(--v)); color:#fff; }
body:has(.intro.banner) .more.acciones { padding:1.4vh 4vw 2.2vh; }
.intro .retrato { top:56%; height:118%; width:min(30vw, 470px); right:23vw; background-position:44% 30%; background-size:118% auto; -webkit-mask:radial-gradient(ellipse 52% 54% at 50% 50%, #000 38%, transparent 74%); mask:radial-gradient(ellipse 52% 54% at 50% 50%, #000 38%, transparent 74%); }

/* Home: la foto volteada, mirando hacia el nombre */
.intro .retrato { transform:translateY(-50%) scaleX(-1); right:19vw; }

/* ====== Botones de toda la web (v2): fuera las cajas cuadradas. Píldora con filete dorado finísimo, fondo de cristal
   oscuro con un brillo interior arriba y, al pasar el ratón, el filete se enciende y aparece un halo dorado suave.
   Solo cambia la forma y la textura; cada botón conserva su tamaño ====== */
.watch, .btn-oro, .btn-linea, .car-ver, .verficha, .ficha-x, .boton-ch {
  border-radius:999px; border:1px solid rgba(var(--v),.42);
  background:linear-gradient(180deg, rgba(227,227,227,.07), rgba(var(--v),.04)), rgba(10,9,7,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(233,233,233,.12), 0 10px 30px -18px rgba(0,0,0,.9);
  color:#d1d1d1; transition:border-color .45s, background .45s, box-shadow .45s, transform .45s var(--ease), color .45s; }
.watch:hover, .btn-oro:hover, .btn-linea:hover, .car-ver:hover, .verficha:hover, .ficha-x:hover, .boton-ch:hover,
a:hover > .car-ver, a:hover > .verficha {
  border-color:rgba(var(--v),.72); color:#fff; filter:none;
  background:linear-gradient(180deg, rgba(227,227,227,.12), rgba(var(--v),.04)), rgba(7,11,10,.6);
  box-shadow:inset 0 1px 0 rgba(233,233,233,.18), 0 0 0 4px rgba(var(--v),.04), 0 16px 38px -16px rgba(var(--v),.42); }
/* Home: Contacto y Servicios al mismo nivel, idénticos */
.btn-oro span { font-size:15px; }
.btn-oro, .btn-linea { padding:15px 34px; }
/* Cinema Hood conserva su oro (botón de salida a otra web), ahora redondeado y con brillo */
.boton-ch { background:linear-gradient(180deg, #3fd6b3, #3a947f); color:#060908; border-color:rgba(var(--v),.72);
  box-shadow:inset 0 1px 0 rgba(243,243,243,.55), 0 14px 34px -18px rgba(var(--v),.72); }
.boton-ch:hover { background:linear-gradient(180deg, #bbbbbb, #3ca98f); color:#060908; box-shadow:inset 0 1px 0 rgba(243,243,243,.6), 0 0 0 4px rgba(var(--v),.14), 0 22px 46px -16px rgba(var(--v),.72); }
.ficha-x { padding:6px 14px; }
.btn-linea span { font-size:15px; letter-spacing:0; transition:transform .4s var(--ease); } .btn-linea:hover span { transform:translateX(4px); }
/* Home: la flecha de los botones es el cursor de la web (doble punta dorada con filo oscuro) */
.acciones .flecha-cursor { display:inline-flex; width:22px; height:16px; transition:transform .4s var(--ease); }
.acciones .flecha-cursor svg { width:100%; height:100%; fill:#d1d1d1; stroke:#070707; stroke-width:1.2; stroke-linejoin:miter; }
.acciones a:hover .flecha-cursor { transform:translateX(4px); }
.acciones a:hover .flecha-cursor svg { fill:#dcdcdc; }

/* Home (v3): sin foto. Iluminación de rodaje: dos focos Fresnel a línea dorada sobre su pie, uno a cada lado,
   apuntando al nombre (centrado). El de la derecha es la luz principal y el de la izquierda, el relleno; los haces
   cruzan el aire con las motas y el nombre queda en el punto donde se encuentran */
.intro .retrato { display:none; }
body:has(.intro.banner) .intro.banner { text-align:center; justify-items:center; }
.intro .luz { right:auto; left:50%; width:56vw; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(215,215,215,.16), rgba(215,215,215,.05) 45%, transparent 72%); }
.intro .foco { position:absolute; bottom:-2%; height:96%; aspect-ratio:60/120; pointer-events:none; z-index:0; }
.intro .foco.izq { left:7vw; } .intro .foco.der { right:7vw; transform:scaleX(-1); }
.intro .foco svg { position:absolute; inset:0; width:100%; height:100%; opacity:.62; }
/* la boca del foco (lente) en el 65 % del ancho y el 19 % del alto del dibujo */
.intro .foco .lente { position:absolute; left:63%; top:20%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  background:radial-gradient(circle, rgba(239,239,239,.95), rgba(208,208,208,.35) 45%, transparent 70%); animation:tungsteno 6s ease-in-out infinite alternate; }
.intro .foco .haz { position:absolute; left:65%; top:20%; width:34vw; height:170px; margin-top:-85px; transform-origin:0 50%; transform:rotate(9deg);
  clip-path:polygon(0 44%, 100% 0, 100% 100%, 0 56%);
  background:linear-gradient(90deg, rgba(218,218,218,.30), rgba(212,212,212,.10) 55%, transparent 92%); filter:blur(2px); mix-blend-mode:screen;
  animation:tungsteno 7s ease-in-out infinite alternate; }
.intro .foco.izq .haz { opacity:.6; } /* relleno, más suave */
.intro .nombre { position:relative; z-index:1; }
/* El cursor de la web como flecha en toda la web (Anterior / Siguiente, volver a la sección, Desliza, Cinema Hood…) */
.cur-flecha { display:inline-flex; vertical-align:-.18em; width:1.55em; height:1.12em; transition:transform .4s var(--ease); }
.cur-flecha svg { width:100%; height:100%; fill:#d1d1d1; stroke:#070707; stroke-width:1.2; stroke-linejoin:miter; }
.cur-flecha.izq { transform:scaleX(-1); }
a:hover .cur-flecha { transform:translateX(4px); } a:hover .cur-flecha.izq { transform:scaleX(-1) translateX(4px); }
.boton-ch .cur-flecha svg { fill:#060908; stroke:#b8b8b8; }
.pnav .small .cur-flecha { margin:0 .3em; }
.car-flecha svg { stroke-width:1.1; }
/* Home: la misma atmósfera dorada del resto de la web, sobre todo en la mitad de abajo (proyectos y botones):
   partículas en suspensión que se desvanecen hacia arriba y un resplandor cálido muy tenue desde el suelo */
.fondo.casa .halo { background:radial-gradient(ellipse 60% 45% at 50% 100%, rgba(190,190,190,.13), rgba(178,178,178,.04) 50%, transparent 78%); }
.fondo.casa .suspension { opacity:.75; -webkit-mask:linear-gradient(180deg, transparent 22%, #000 62%); mask:linear-gradient(180deg, transparent 22%, #000 62%); }
/* Home: haces de luz difusos, sin aristas: nada de triángulo recortado; dos óvalos de luz desenfocados que nacen en la
   lente y se abren y se apagan poco a poco, como luz atravesando el humo del set */
.intro .foco .haz { clip-path:none; width:36vw; height:230px; margin-top:-115px; filter:blur(14px); mix-blend-mode:screen;
  background:radial-gradient(ellipse 98% 30% at 0% 50%, rgba(218,218,218,.26), rgba(212,212,212,.09) 45%, transparent 74%),
    radial-gradient(ellipse 75% 50% at 6% 50%, rgba(208,208,208,.09), transparent 72%);
  -webkit-mask:linear-gradient(90deg, #000 25%, transparent 96%); mask:linear-gradient(90deg, #000 25%, transparent 96%);
  animation:tungsteno 7s ease-in-out infinite alternate, humo 11s ease-in-out infinite alternate; }
@keyframes humo { from { transform:rotate(8deg) scaleY(.94); } to { transform:rotate(10deg) scaleY(1.06); } }
.intro.banner .bgimg { display:none; } /* el fondo antiguo del encabezado se veía como una franja rectangular */
/* las capas geométricas del haz del proyector de Antología (.haz::before/::after) no deben aplicarse a los focos de la home */
.intro .foco .haz::before, .intro .foco .haz::after { content:none; }
/* Home (v4): el haz nace en el frontal de la cabeza (inclinada 15°) y llega hasta el nombre; bordes difusos, sin aristas */
.intro .foco .lente { left:63.3%; top:21.8%; }
.intro .foco .haz { left:63.3%; top:21.8%; width:44vw; height:220px; margin-top:-110px; filter:blur(10px);
  background:radial-gradient(ellipse 100% 30% at 0% 50%, rgba(218,218,218,.32), rgba(212,212,212,.15) 50%, rgba(212,212,212,.05) 82%, transparent 100%),
    radial-gradient(ellipse 80% 48% at 0% 50%, rgba(208,208,208,.08), transparent 80%);
  -webkit-mask:linear-gradient(90deg, #000 70%, transparent 100%); mask:linear-gradient(90deg, #000 70%, transparent 100%); }
@keyframes humo { from { transform:rotate(7deg) scaleY(.95); } to { transform:rotate(9deg) scaleY(1.05); } }
/* el haz arranca un poco por detrás de la lente y se enciende gradualmente: sin corte vertical en su origen */
.intro .foco .haz { left:calc(63.3% - 24px); transform-origin:24px 50%;
  background:radial-gradient(ellipse 100% 30% at 24px 50%, rgba(218,218,218,.32), rgba(212,212,212,.15) 50%, rgba(212,212,212,.05) 82%, transparent 100%),
    radial-gradient(ellipse 80% 48% at 24px 50%, rgba(208,208,208,.08), transparent 80%);
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 40px, #000 70%, transparent 100%); mask:linear-gradient(90deg, transparent 0, #000 40px, #000 70%, transparent 100%); }
.intro .foco svg.luzhaz { opacity:1; } .intro .foco.izq svg.luzhaz { opacity:.7; }
/* Home (v5): el haz de cada foco es un dibujo con la geometría del aparato: nace en la bombilla y queda encerrado
   entre las dos palas (opacas), así que no hay luz por detrás ni por fuera de ellas; se apaga al llegar al nombre */
.intro .foco svg.luzhaz { overflow:visible; mix-blend-mode:screen; animation:tungsteno 7s ease-in-out infinite alternate; }
/* haz mucho más sutil (misma dirección y ángulos de las palas) */
.intro .foco svg.luzhaz { opacity:.34; } .intro .foco.izq svg.luzhaz { opacity:.22; }
.intro .foco svg.luzhaz { animation:none; }
/* Home: los botones suben y dejan aire sobre el pie (los proyectos ceden un poco de alto) */
body:has(.intro.banner) .more.acciones { padding:1.2vh 4vw 6.5vh; }

/* ====== Fichas de Cine en el móvil: la plantilla de alturas fijas es para el 16:9 de ordenador; en el teléfono
   todo va en una columna: título completo, cartel, carrusel a lo ancho, ficha técnica en bloques y la barra debajo ====== */
/* Home: cada destacado lleva encima el nombre de su sección (Documental, Cine), en dorado; imagen y etiqueta llevan a ella */
.proj .seccion-etq { display:inline-block; margin-bottom:8px; font-size:11px; letter-spacing:.38em; text-transform:uppercase; color:var(--gold); transition:color .4s; }
.proj .seccion-etq:hover { color:#d1d1d1; }
.proj .verficha { display:inline-flex; align-items:center; gap:.5em; }
body:has(.intro.banner) .proj { display:flex; flex-direction:column; }
/* Bio: una silla de director a línea dorada, sin nombre, junto al monolito y el DeLorean */
.guinos .silla { position:absolute; right:7vw; bottom:30vh; width:50px; height:62px; opacity:.5; background:url(assets/fondos/silla.svg) center / contain no-repeat; }
/* Servicios · Audiovisual B2B: hasta que llegue el dossier, marcos vacíos 16:9 con su número */
.storyboard .sb-hueco { aspect-ratio:16/9; border:1px dashed rgba(var(--v),.42); margin:0; cursor:default; }
.b2b .marcas-pie p { flex:1 1 auto; min-width:0; } /* el texto de B2B es más largo: que no se meta bajo el botón */
.b2b .marcas-pie p span { white-space:normal; }

/* Servicios · Audiovisual B2B: línea de tiempo del proceso. Un filete dorado finísimo con cuatro hitos; cada hito tiene
   su paso, su nombre y una descripción tenue que se enciende al pasar el ratón (el hito brilla y la línea se ilumina hasta él) */
.proceso { position:relative; list-style:none; margin:4vh 0 5vh; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:2.6vw; }
.proceso::before, .proceso::after { content:""; position:absolute; left:0; top:7px; height:1px; }
.proceso::before { right:0; background:linear-gradient(90deg, rgba(var(--v),.42), rgba(var(--v),.42) 85%, transparent); }
.proceso::after { width:0; background:linear-gradient(90deg, rgba(var(--v),.14), #b8b8b8); box-shadow:0 0 12px rgba(184,184,184,.55); transition:width .7s var(--ease); }
.proceso:has(li:nth-child(1):hover, li:nth-child(1):focus)::after { width:2%; }
.proceso:has(li:nth-child(2):hover, li:nth-child(2):focus)::after { width:27%; }
.proceso:has(li:nth-child(3):hover, li:nth-child(3):focus)::after { width:52.5%; }
.proceso:has(li:nth-child(4):hover, li:nth-child(4):focus)::after { width:78%; }
.proceso li { position:relative; padding-top:34px; cursor:default; outline:none; }
.proceso .hito { position:absolute; left:0; top:0; width:15px; height:15px; border-radius:50%; border:1px solid rgba(var(--v),.72); background:#0b0a08; z-index:1; transition:box-shadow .5s, border-color .5s; }
.proceso .hito i { position:absolute; inset:4px; border-radius:50%; background:rgb(var(--v)); transform:scale(0); transition:transform .45s cubic-bezier(.3,1.4,.5,1); }
.proceso .paso { display:block; font:10px "Courier Prime",monospace; letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--v),.72); }
.proceso b { display:block; margin:8px 0 12px; font-weight:200; font-size:clamp(1rem,1.35vw,1.3rem); letter-spacing:.14em; text-transform:uppercase; color:#e9e9e9; transition:color .4s; }
.proceso p { margin:0; font-size:13px; line-height:1.6; color:rgba(233,233,233,.38); transform:translateY(4px); transition:color .5s, transform .5s var(--ease); }
.proceso li:hover .hito, .proceso li:focus .hito { border-color:#b8b8b8; box-shadow:0 0 0 5px rgba(var(--v),.14), 0 0 18px rgba(184,184,184,.55); }
.proceso li:hover .hito i, .proceso li:focus .hito i { transform:scale(1); }
.proceso li:hover b, .proceso li:focus b { color:#fff; }
.proceso li:hover p, .proceso li:focus p { color:rgba(233,233,233,.88); transform:none; }
/* Servicios: viñetas del índice con el cursor de la web en lugar de números romanos; el activo se enciende */
.serv-lista .n { display:inline-flex; width:18px; height:13px; }
.serv-lista .n svg { width:100%; height:100%; fill:#d1d1d1; stroke:#070707; stroke-width:1.2; opacity:.35; transition:opacity .4s, transform .4s var(--ease); }
.serv-lista button.on .n svg, .serv-lista button:hover .n svg { opacity:1; }
.serv-lista button:hover .n svg { transform:translateX(3px); }
/* Documental de autor: botón a Arte Buscavidas, bajo «Escribir» */
.boton-ab { display:flex; width:max-content; margin:4vh 0 0; }
/* Audiovisual B2B: casos en una sola fila, discretos (cliente en dorado, una línea de qué se hizo) */
.casos { list-style:none; margin:0 0 3.4vh; padding:2vh 0 0; display:grid; grid-template-columns:repeat(4, 1fr); gap:2vw; border-top:1px solid rgba(var(--v),.14); }
.casos b { display:block; margin-bottom:5px; font:10px "Courier Prime",monospace; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--v),.72); }
.casos span { font-size:12.5px; line-height:1.5; color:rgba(233,233,233,.62); }
.b2b .proceso { margin:3vh 0 3.4vh; }
.b2b .marcas-pie p { max-width:none; margin-right:3vw; } .b2b .proceso { margin:2.4vh 0 2.6vh; } .b2b .casos { margin-bottom:2.4vh; padding-top:1.6vh; } .b2b h2 { margin-bottom:.4em; }
.serv-hoja.marcas.b2b > div.marcas-pie p { max-width:none; flex:1 1 0; margin:0 3vw 0 0; font-size:clamp(.85rem,.95vw,1rem); line-height:1.6; }
.serv-hoja.marcas.b2b .boton-ch { flex-shrink:0; white-space:nowrap; }
/* Home: la Osa Mayor se aparta a la izquierda para no quedar detrás del botón Contacto */
.visor.portada::after { background-position:6% 40%, center; }
/* Home: el X-wing cruza solo el tramo izquierdo y se desvanece antes de llegar a los botones */
.visor.portada .xwing { animation-name:xwing-portada; }
@keyframes xwing-portada { 0% { left:4%; bottom:calc(3vh + 30px); opacity:0; } 3% { opacity:.42; } 30% { opacity:.42; } 36% { left:30%; bottom:calc(3vh + 62px); opacity:0; } 100% { left:30%; bottom:calc(3vh + 62px); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .visor.portada .xwing { left:20%; bottom:calc(3vh + 50px); } }
/* Home 16:9: las fichas ocupan la franja inferior, así que la Osa Mayor y la cita suben a los costados del nombre */
.visor.portada::after { top:calc(9vh + 14px); bottom:auto; left:calc(4vw + 40px); right:auto; width:26vw; height:150px;
  background-position:35% 50%, center; }
.visor.portada .cita { top:calc(9vh + 58px); bottom:auto; }
/* Publicidad: infografía de spots (equipo) a la izquierda y cuatro piezas de realización a la derecha, en un pantallazo */
.publicidad { position:relative; z-index:1; display:grid; grid-template-columns:1.55fr 1fr; gap:3vw; align-items:start; padding:0 4vw; }
.pub-infografia img { display:block; width:100%; height:auto; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.pub-infografia p { margin-top:1.4vh; color:rgba(255,255,255,.55); letter-spacing:.18em; }
.pub-piezas { display:grid; grid-template-columns:1fr 1fr; gap:2.4vh 1.6vw; }
.pub-pieza { margin:0; }
.pub-img { position:relative; aspect-ratio:16/9; overflow:hidden; background:#0d0c0a; border:1px solid rgba(var(--v),.14); }
.pub-img img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.85); }
/* el fotograma de Benzema trae arriba un aviso del navegador: se recorta mostrando la parte inferior */
.pub-img.benzema img { object-position:center bottom; transform:scale(1.12); transform-origin:center bottom; }
.pub-img.sin { display:flex; align-items:center; justify-content:center; }
.pub-img.sin span { font-family:Jost,sans-serif; font-weight:300; letter-spacing:.4em; color:rgba(var(--v),.42); font-size:1.1rem; }
.pub-pieza figcaption { padding-top:.8vh; display:flex; flex-direction:column; gap:.2em; }
.pub-pieza figcaption b { font-weight:400; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:#d1d1d1; }
.pub-pieza figcaption span { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.pub-pieza figcaption i { font-style:normal; font-size:.78rem; color:rgba(255,255,255,.62); }
.pagehead:has(+ .publicidad) { padding-top:15vh; padding-bottom:5vh; }
/* Publicidad · muro de caras: retratos en blanco y negro que toman color al pasar el ratón; sin fotograma, las iniciales */
.publicidad { grid-template-columns:1.25fr 1fr; }
.pub-caras { display:grid; grid-template-columns:repeat(5,1fr); gap:2vh .9vw; }
.cara { margin:0; display:block; color:inherit; text-decoration:none; }
.cara-img { position:relative; aspect-ratio:3/4; overflow:hidden; background:#0d0c0a; border:1px solid rgba(var(--v),.14); }
.cara-img img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05) brightness(.9); transition:filter .5s, transform .8s; }
.cara:hover .cara-img img, .cara:focus-within .cara-img img { filter:none; transform:scale(1.04); }
.cara-img .ini { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:300 1.1rem Jost,sans-serif; letter-spacing:.3em; color:rgba(var(--v),.42); }
.cara figcaption { padding-top:.7vh; display:flex; flex-direction:column; gap:.15em; }
.cara figcaption b { font:400 .72rem/1.25 Jost,sans-serif; letter-spacing:.08em; color:#d1d1d1; }
.cara figcaption span { font:.6rem/1.35 "Courier Prime",monospace; color:rgba(255,255,255,.45); }
/* Filmo: texto y créditos a la izquierda; a la derecha el tablero de «¿Quién es quién?» (marco dorado, caras en B/N) */
.filmo { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.1fr); gap:3.4vw; padding:12vh 4vw 3vh; align-items:start; }
.filmo h1 { font-weight:200; font-size:clamp(2.2rem,4.4vw,4.2rem); letter-spacing:.16em; text-transform:uppercase; line-height:1; }
.filmo-txt p { margin-top:2.6vh; font-weight:200; font-size:clamp(.85rem,.95vw,1rem); line-height:1.65; color:rgba(255,255,255,.75); }
.tablero { position:relative; border:1px solid rgba(var(--v),.42); border-radius:14px; padding:4.2vh 1.4vw 2vh; background:linear-gradient(180deg, rgba(var(--v),.04), transparent 40%); }
.tablero-tit { position:absolute; top:-.7em; left:50%; transform:translateX(-50%); padding:0 1em; background:#000; font:400 .72rem Jost,sans-serif; letter-spacing:.3em; text-transform:uppercase; color:#d1d1d1; white-space:nowrap; }
.filmo-caras { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:1.6vh .7vw; }
.filmo-caras .cara-img { border-radius:4px 4px 0 0; }
.filmo-caras .cara figcaption b { font-size:.64rem; }
.filmo-caras .cara figcaption span { font-size:.54rem; }
.filmo-txt p { margin-top:2vh; }
/* Filmo con 30 caras: diez por fila, tres filas */
.filmo-caras { grid-template-columns:repeat(10,minmax(0,1fr)); gap:1.4vh .6vw; }
/* Filmo sin lista de créditos (están en Bio): título y frase arriba, tablero a todo el ancho, 15 caras por fila */
.filmo { display:block; padding:13vh 4vw 3vh; }
.filmo-txt { display:flex; align-items:baseline; gap:3vw; flex-wrap:wrap; }
.filmo-txt p { margin:0; max-width:62ch; font-size:clamp(.95rem,1.1vw,1.15rem); }
.tablero { margin-top:5vh; padding:4.6vh 1.6vw 2.4vh; }
.filmo-caras { grid-template-columns:repeat(15,minmax(0,1fr)); gap:2.2vh .7vw; }
/* Filmo: la frase en una sola línea, ocupando el ancho junto al título */
@media (min-width:901px) { .filmo-txt { flex-wrap:nowrap; } .filmo-txt p { flex:1; max-width:none; white-space:nowrap; } }
/* Contacto: idiomas bajo la ubicación, un punto más discreto */
.donde.idiomas { margin-top:.6em; opacity:.7; }
/* Créditos: cabecera con índice fijo al hacer scroll; cada bloque es un tablero (Reparto con caras, el resto con carteles) */
html:has(.creditos) { scroll-behavior:smooth; scroll-padding-top:150px; }
.cred-cab { padding:15vh 4vw 0; }
.cred-cab h1 { font-weight:200; font-size:clamp(2.2rem,4.4vw,4.2rem); letter-spacing:.16em; text-transform:uppercase; line-height:1; }
.cred-indice { position:sticky; top:0; z-index:15; display:flex; flex-wrap:wrap; gap:.6em 2.4vw; margin-top:3.4vh; padding:2.2vh 0 1.8vh; border-bottom:1px solid rgba(var(--v),.14); }
.cred-indice a { font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.55); text-decoration:none; transition:color .3s; }
.cred-indice a:hover, .cred-indice a.on { color:#d1d1d1; }
.creditos { position:relative; z-index:1; padding:0 4vw 10vh; }
.cred-bloque { padding-top:9vh; }
.cred-bloque h2 { display:flex; align-items:baseline; gap:1.2em; margin:0 0 3.4vh; font-weight:200; font-size:clamp(1.3rem,2vw,1.9rem); letter-spacing:.18em; text-transform:uppercase; }
.cred-bloque h2 span { font:.72rem "Courier Prime",monospace; letter-spacing:.1em; color:rgba(var(--v),.72); }
.cred-intro { margin:-1.6vh 0 4vh; font-weight:200; font-size:clamp(.95rem,1.1vw,1.15rem); color:rgba(255,255,255,.75); }
.cred-bloque .tablero { margin-top:0; }
.cred-rejilla { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:3vh 1.2vw; }
.cred-ficha { margin:0; }
.cred-img { position:relative; aspect-ratio:2/3; overflow:hidden; background:#0d0c0a; border:1px solid rgba(var(--v),.14); border-radius:3px; }
.cred-img img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) brightness(.85); transition:filter .5s, transform .8s; }
.cred-ficha:hover .cred-img img { filter:none; transform:scale(1.04); }
.cred-img .hueco { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1em; text-align:center; font:300 .72rem/1.4 Jost,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(var(--v),.42); }
.cred-ficha.vacio .cred-img { border-style:dashed; background:transparent; }
.cred-dato { position:absolute; inset:auto 0 0 0; padding:2.4em .8em .8em; font:.62rem/1.45 "Courier Prime",monospace; color:#d1d1d1; background:linear-gradient(transparent, rgba(0,0,0,.92) 45%); opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s; }
.cred-dato:empty { display:none; }
.cred-ficha:hover .cred-dato, .cred-ficha:focus-within .cred-dato { opacity:1; transform:none; }
.cred-ficha figcaption { padding-top:.8vh; font-size:.7rem; letter-spacing:.06em; line-height:1.35; color:rgba(255,255,255,.8); }
.cred-ficha.vacio figcaption { color:rgba(255,255,255,.3); }
/* Formación y docencia: sellos horizontales en una sola fila, con el dato siempre visible */
.cred-bloque.sello .cred-rejilla { grid-template-columns:repeat(5,minmax(0,1fr)); }
.cred-bloque.sello .cred-img { aspect-ratio:16/9; }
.cred-bloque.sello .cred-dato { opacity:1; transform:none; background:none; padding:0 .8em .8em; color:rgba(255,255,255,.55); }
.cred-bloque.sello figcaption { display:none; }
.cred-bloque.sello .hueco { align-items:flex-start; padding-top:1.2em; color:#d1d1d1; }
.cred-infografia img { display:block; width:min(100%,1100px); height:auto; margin:0 auto; box-shadow:0 20px 60px rgba(0,0,0,.6); }
@media (hover:none) { .cred-dato { opacity:1; transform:none; } }
.cred-indice { top:64px; margin:3.4vh 4vw 0; background:#000; }
/* Menú de escritorio: Cine, Documental y Publicidad bajo un paraguas dorado finísimo con «Portfolio» encima */
.grupo-port { position:relative; display:flex; gap:32px; }
.grupo-port::before { content:""; position:absolute; left:-6px; right:-6px; top:-7px; height:4px; border:1px solid rgba(var(--v),.42); border-bottom:0; pointer-events:none; }
.grupo-port::after { content:attr(data-titulo); position:absolute; left:50%; top:-16px; transform:translateX(-50%); padding:0 .7em; background:#000; font-size:7px; letter-spacing:.42em; text-transform:uppercase; color:rgba(var(--v),.72); line-height:1; white-space:nowrap; }
/* Menú móvil: «Portfolio» se despliega en sus tres categorías */
.menu-port summary { list-style:none; cursor:pointer; font-weight:200; font-size:clamp(2rem,8vw,4.5rem); letter-spacing:.12em; text-transform:uppercase; line-height:1.1; color:var(--mut); }
.menu-port summary::-webkit-details-marker { display:none; }
.menu-port summary::after { content:"+"; margin-left:.4em; font-size:.5em; vertical-align:middle; color:#d1d1d1; }
.menu-port[open] summary::after { content:"−"; }
.menu-port > div { display:flex; flex-direction:column; gap:10px; padding:14px 0 6px 1.2em; border-left:1px solid rgba(var(--v),.42); margin-top:12px; }
.menu-port > div a { font-size:clamp(1.3rem,5vw,2.4rem); }
/* Créditos · Publicidad: tablero de logos (productoras y clientes) */
.tablero.logos h3 { margin:0 0 1.6vh; font:400 .7rem Jost,sans-serif; letter-spacing:.3em; text-transform:uppercase; color:rgba(var(--v),.72); }
.tablero.logos h3 + .logo-rejilla { margin-bottom:4vh; }
.tablero.logos .logo-rejilla:last-child { margin-bottom:0; }
.logo-rejilla { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:1.4vh .9vw; }
.logo-ficha { margin:0; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; padding:.8em; border:1px solid rgba(var(--v),.14); border-radius:3px; background:#0d0c0a; transition:border-color .4s; }
.logo-ficha:hover { border-color:rgba(var(--v),.42); }
.logo-ficha img { max-width:100%; max-height:100%; object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.75; transition:filter .5s, opacity .5s; }
.logo-ficha:hover img { filter:none; opacity:1; }
.logo-ficha span { font:300 .68rem/1.3 Jost,sans-serif; letter-spacing:.14em; text-transform:uppercase; text-align:center; color:rgba(255,255,255,.55); }
/* Home en móvil: no hay costados libres junto al nombre, así que la cita y la Osa Mayor se ocultan */
/* Créditos: subtítulo bajo el título y nota con asterisco abajo a la derecha del tablero de caras */
.cred-sub { margin-top:1.6vh; font-weight:200; font-size:clamp(.9rem,1vw,1.05rem); letter-spacing:.04em; color:rgba(255,255,255,.6); }
.tablero-nota { margin:2.2vh 0 0; text-align:right; font:.62rem "Courier Prime",monospace; color:rgba(255,255,255,.42); }
.tablero-nota { font-size:.78rem; color:rgba(255,255,255,.55); }
/* Fichas de cine: selector de miniaturas bajo el carrusel (todas las piezas a la vista; la activa en dorado).
   Las tarjetas encogen lo que ocupa la tira para que la barra anterior/siguiente siga en el mismo píxel */
.car-dots.car-minis { gap:8px; margin-top:10px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.car-dots.car-minis::-webkit-scrollbar { display:none; }
.car-minis .car-dot { position:relative; flex:none; width:auto; height:34px; aspect-ratio:16/9; border-radius:2px; overflow:hidden; background:#14120f; outline:1px solid rgba(var(--v),.14); opacity:.55; transition:opacity .3s, outline-color .3s; }
.car-minis .car-dot.v { aspect-ratio:9/16; }
.car-minis .car-dot:hover { background:#14120f; opacity:.85; }
.car-minis .car-dot.on { width:auto; background:#14120f; opacity:1; outline:1px solid var(--gold); }
.car-minis .car-dot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.car-minis .car-dot.on img, .car-minis .car-dot:hover img { filter:none; }
.car-minis .car-dot span { position:absolute; left:3px; bottom:1px; font:9px "Courier Prime",monospace; color:#d1d1d1; text-shadow:0 0 3px #000; }
body:has(.franja) .top-v .reels-car .car-card.reel { height:calc(37vh - 68px); width:calc((37vh - 68px) * 9 / 16); }
body:has(.franja) .top-v .reels-car .car-card.pieza169 { width:calc((37vh - 108px) * 16 / 9); }
.top-v .reels-car .car-dots.car-minis, .top-v .fotos-car .car-dots.car-minis { margin-top:10px; }
/* Miniaturas más grandes (52 px) para reconocer cada pieza; los vídeos ceden ese alto (tienen su pantalla completa) */
.car-minis .car-dot { height:52px; }
.car-minis .car-dot span { font-size:10px; left:4px; bottom:2px; }
body:has(.franja) .top-v .reels-car .car-card.reel { height:calc(37vh - 86px); width:calc((37vh - 86px) * 9 / 16); }
body:has(.franja) .top-v .reels-car .car-card.pieza169 { width:calc((37vh - 126px) * 16 / 9); }
/* Fichas de cine: el selector de miniaturas como lista vertical entre el separador y el carrusel.
   Inactivas apagadas; la activa a pleno color con una línea dorada a la izquierda. El carrusel recupera el alto */
body:has(.franja) .top-v .reels-car { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:1.6vw; }
body:has(.franja) .top-v .reels-car .car-marco { grid-column:2; grid-row:1; }
body:has(.franja) .top-v .reels-car .car-dots.car-minis { grid-column:1; grid-row:1; flex-direction:column; justify-content:center; gap:6px; margin:0; overflow:visible; }
body:has(.franja) .car-minis .car-dot { height:calc((37vh - 30px) / 6 - 6px); max-height:52px; outline:none; border-radius:1px; opacity:.35; transition:opacity .3s, transform .3s; }
body:has(.franja) .car-minis .car-dot::before { content:""; position:absolute; left:-9px; top:15%; bottom:15%; width:1px; background:var(--gold); opacity:0; transition:opacity .3s; }
body:has(.franja) .car-minis .car-dot { overflow:visible; }
body:has(.franja) .car-minis .car-dot img { border-radius:1px; }
body:has(.franja) .car-minis .car-dot:hover { opacity:.7; }
body:has(.franja) .car-minis .car-dot.on { opacity:1; outline:none; transform:translateX(4px); }
body:has(.franja) .car-minis .car-dot.on::before { opacity:1; }
body:has(.franja) .car-minis .car-dot span { display:none; }
body:has(.franja) .top-v .reels-car .car-card.pieza169 { width:calc((37vh - 72px) * 16 / 9); }
/* Fichas de cine: lista con más contraste (inactivas al 60 % en B/N con reborde tenue) y carrusel finito:
   sin degradado a la izquierda al principio ni a la derecha al final */
body:has(.franja) .car-minis .car-dot { opacity:.6; outline:1px solid rgba(var(--v),.42); outline-offset:0; }
body:has(.franja) .car-minis .car-dot:hover { opacity:.85; }
body:has(.franja) .car-minis .car-dot.on { opacity:1; outline:1px solid rgba(var(--v),.72); }
.reels-car[data-finito] .car-vp { -webkit-mask:linear-gradient(90deg, transparent, #000 5vw, #000 calc(100% - 5vw), transparent); mask:linear-gradient(90deg, transparent, #000 5vw, #000 calc(100% - 5vw), transparent); }
.reels-car[data-finito].al-ini .car-vp { -webkit-mask:linear-gradient(90deg, #000, #000 calc(100% - 5vw), transparent); mask:linear-gradient(90deg, #000, #000 calc(100% - 5vw), transparent); }
.reels-car[data-finito].al-fin .car-vp { -webkit-mask:linear-gradient(90deg, transparent, #000 5vw, #000); mask:linear-gradient(90deg, transparent, #000 5vw, #000); }
.reels-car[data-finito].al-ini.al-fin .car-vp { -webkit-mask:none; mask:none; }
/* Lista vertical en todas las fichas: alto de cada miniatura según su formato; si no caben, la lista se desliza.
   Los reels verticales recuperan el alto que ocupaba la tira inferior. Las fotos (Padre 5) mantienen la tira horizontal */
body:has(.franja) .top-v .reels-car .car-dots.car-minis { max-height:37vh; overflow-y:auto; padding:2px 0 2px 10px; }
body:has(.franja) .top-v .reels-car .car-minis .car-dot { height:min(52px, calc((37vh - 30px) / 6 - 6px)); }
body:has(.franja) .top-v .reels-car .car-minis .car-dot.v { height:min(72px, calc((37vh - 30px) / 4 - 6px)); }
body:has(.franja) .top-v .reels-car .car-card.reel { height:calc(37vh - 34px); width:calc((37vh - 34px) * 9 / 16); }
.fotos-car[data-finito] .car-vp { -webkit-mask:linear-gradient(90deg, transparent, #000 5vw, #000 calc(100% - 5vw), transparent); mask:linear-gradient(90deg, transparent, #000 5vw, #000 calc(100% - 5vw), transparent); }
.fotos-car[data-finito].al-ini .car-vp { -webkit-mask:linear-gradient(90deg, #000, #000 calc(100% - 5vw), transparent); mask:linear-gradient(90deg, #000, #000 calc(100% - 5vw), transparent); }
.fotos-car[data-finito].al-fin .car-vp { -webkit-mask:linear-gradient(90deg, transparent, #000 5vw, #000); mask:linear-gradient(90deg, transparent, #000 5vw, #000); }
/* Flechas en los carruseles de vídeo (como en Padre 5): sobre los bordes del carrusel; se apagan en el extremo
   alcanzado y desaparecen si todo cabe. En móvil se desliza con el dedo, sin flechas */
.car-marco { position:relative; min-width:0; }
.reels-car .car-marco .car-flecha.izq { left:6px; } .reels-car .car-marco .car-flecha.der { right:6px; }
.reels-car .car-marco .car-flecha { top:calc(50% - 10px); }
.carrusel[data-finito] .car-flecha { transition:opacity .3s; }
.carrusel[data-finito].al-ini .car-flecha.izq, .carrusel[data-finito].al-fin .car-flecha.der { opacity:.15; pointer-events:none; }
.carrusel[data-finito].al-ini.al-fin .car-flecha { display:none; }
/* Publicidad: el cartel de la ficha siempre en 2:3 (aunque la imagen sea un fotograma horizontal) y, sin imagen,
   el nombre de la marca en tipografía dentro de un marco del mismo tamaño */
body:has(.franja) .top-v .hero-v.pub { overflow:hidden; aspect-ratio:2/3; }
body:has(.franja) .top-v .hero-v.pub img { width:100%; height:100%; object-fit:cover; }
body:has(.franja) .top-v .hero-v.tipo { aspect-ratio:2/3; height:37vh; display:flex; align-items:center; justify-content:center; padding:1.2em; box-sizing:border-box; border:1px solid rgba(var(--v),.42); background:linear-gradient(160deg, rgba(var(--v),.04), transparent 60%); }
.hero-v.tipo span { font-weight:200; font-size:clamp(1rem,1.5vw,1.5rem); letter-spacing:.2em; text-transform:uppercase; text-align:center; line-height:1.3; color:#d1d1d1; }
.pub-info { position:relative; z-index:1; padding:6vh 4vw 8vh; text-align:center; }
.pub-info .label { display:block; margin-bottom:3vh; }
.pub-info img { display:block; width:min(100%,1100px); height:auto; margin:0 auto; box-shadow:0 20px 60px rgba(0,0,0,.6); }
/* Tarjeta del portfolio sin imagen: el nombre de la marca en tipografía dorada sobre un marco tenue */
.car-card .car-tipo { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1.5em; text-align:center; font-weight:200; font-size:clamp(1.2rem,2vw,2rem); letter-spacing:.22em; text-transform:uppercase; color:#d1d1d1; background:linear-gradient(160deg, rgba(var(--v),.04), transparent 60%), #0c0b09; border:1px solid rgba(var(--v),.14); }
/* Huecos verticales (proyectos de piezas verticales aún sin material) */
.car-card.reel.hueco { padding:0; background:none; box-shadow:none; border:1px dashed rgba(var(--v),.42); border-radius:6px; }
.car-card.reel.hueco .clip { display:none; }
.car-card.reel.hueco:hover { transform:none; }
/* Ficha con aviso (piezas aún no publicables): una nota sobria en el lugar del carrusel */
.reels-car .car-aviso { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; height:calc(37vh - 20px); margin:0; padding:0 3vw; border:1px dashed rgba(var(--v),.42); border-radius:6px; text-align:center; font:.8rem/1.6 "Courier Prime",monospace; letter-spacing:.06em; color:rgba(209,209,209,.75); }
/* Reels verticales de Vimeo: la tarjeta entera es el reproductor; sin póster, fondo oscuro con ▶ */
.car-card.reel.vim { position:relative; overflow:hidden; background:#0d0c0a; border:1px solid rgba(var(--v),.14); border-radius:6px; }
.car-card.reel.vim .clip { position:absolute; inset:0; height:100%; aspect-ratio:auto; border-radius:0; }
.car-card.reel.vim .clip .ph { position:absolute; inset:0; background-size:cover; background-position:center; }
.car-card.reel.vim .clip iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.car-card.reel.vim figcaption { position:absolute; left:0; right:0; bottom:0; padding:2em .7em .6em; background:linear-gradient(transparent, rgba(0,0,0,.8)); pointer-events:none; }
.car-card.reel.vim figcaption b { font-weight:400; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#d1d1d1; }
.car-card.reel.vim .clip.playing ~ figcaption { display:none; }
/* Aviso con fotograma de vista previa: la imagen apagada y en B/N detrás, el texto encima */
.reels-car .car-aviso.con-img { position:relative; overflow:hidden; border-style:solid; border-color:rgba(var(--v),.42); }
.reels-car .car-aviso.con-img::before { content:""; position:absolute; inset:0; background:var(--img) center / cover no-repeat; filter:grayscale(1) brightness(.38); }
.reels-car .car-aviso span { position:relative; padding:.6em 1.2em; border:1px solid rgba(var(--v),.42); background:rgba(0,0,0,.45); }
/* Sin la línea vertical de texto: ni el puntero en forma de I sobre los textos ni el cursor parpadeante al hacer clic.
   Enlaces y botones mantienen la mano; los campos de formulario (si los hubiera) conservan su cursor */
html, body { cursor:default; caret-color:transparent; }
a, button, summary, label, [role="button"], .car-card, .clip.play, .cara, .cred-ficha { cursor:pointer; }
input, textarea, select { cursor:auto; caret-color:auto; }
/* Branded Content: objeto de marca en la esquina inferior derecha, con un vaivén lento y sutil de izquierda a derecha */
.escena .bc { right:0; bottom:0; opacity:.5; background:center / contain no-repeat; animation:vaiven 11s ease-in-out infinite alternate; }
@keyframes vaiven { from { transform:translateX(-46px); } to { transform:translateX(0); } }
.escena .cereales { width:34px; height:42px; background-image:url(assets/fondos/cereales.svg); }
.escena .balon { width:32px; height:32px; background-image:url(assets/fondos/balon.svg); animation-name:vaiven-rueda; }
@keyframes vaiven-rueda { from { transform:translateX(-46px) rotate(-150deg); } to { transform:translateX(0) rotate(0); } }
.escena .gallina { width:40px; height:36px; background-image:url(assets/fondos/gallina.svg); }
.escena .moto { width:58px; height:32px; background-image:url(assets/fondos/moto.svg); }
.escena .copa { width:22px; height:40px; background-image:url(assets/fondos/copa.svg); }
.escena .mancuerna { width:54px; height:22px; background-image:url(assets/fondos/mancuerna.svg); }
.escena .bombilla { width:26px; height:40px; background-image:url(assets/fondos/bombilla.svg); }
.escena .bombilla i { position:absolute; left:-9px; top:-10px; width:44px; height:44px; border-radius:50%; background:radial-gradient(circle, rgba(223,223,223,.45), transparent 65%); animation:brillo 4s ease-in-out infinite alternate; }
@keyframes brillo { from { opacity:.25; } to { opacity:.9; } }
/* Vino, peso muerto y bombilla: no se desplazan; solo su propia acción */
.escena .bc.vino, .escena .bc.pesomuerto, .escena .bc.bombilla { animation:none; transform:none; }
.escena .vino { width:76px; height:56px; }
.escena .vino svg, .escena .pesomuerto svg { width:100%; height:100%; display:block; overflow:visible; }
.escena .vino .botella { transform-box:view-box; transform-origin:27.9px 39.5px; animation:servir 10s ease-in-out infinite; }
@keyframes servir { 0%, 52% { transform:rotate(0); } 60%, 84% { transform:rotate(60deg); } 92%, 100% { transform:rotate(0); } }
.escena .vino .chorro { opacity:0; animation:chorro 10s linear infinite; }
@keyframes chorro { 0%, 60% { opacity:0; } 62%, 82% { opacity:.9; } 84%, 100% { opacity:0; } }
.escena .vino .liquido { transform-box:view-box; transform-origin:50px 27px; transform:scaleY(0); animation:llenar 10s ease-in-out infinite; }
@keyframes llenar { 0%, 62% { transform:scaleY(0); opacity:.7; } 84% { transform:scaleY(1); opacity:.7; } 96% { transform:scaleY(1); opacity:.7; } 100% { transform:scaleY(1); opacity:0; } }
.escena .pesomuerto { width:46px; height:48px; }
.escena .pesomuerto .dl-arriba { animation:dl-arriba 3.4s ease-in-out infinite; }
.escena .pesomuerto .dl-abajo { animation:dl-abajo 3.4s ease-in-out infinite; }
@keyframes dl-arriba { 0%, 38% { opacity:1; } 50%, 88% { opacity:0; } 100% { opacity:1; } }
@keyframes dl-abajo { 0%, 38% { opacity:0; } 50%, 88% { opacity:1; } 100% { opacity:0; } }
.escena .bombilla i { animation:brillo-suave 7s ease-in-out infinite; }
@keyframes brillo-suave { 0%, 35% { opacity:.12; } 50%, 85% { opacity:.6; } 100% { opacity:.12; } }
/* Kellogg's: gallina que pica del suelo y se mueve un poco a izquierda y derecha */
.escena .gallina-pica { width:40px; height:36px; animation:vaiven-corto 7s ease-in-out infinite alternate; }
@keyframes vaiven-corto { from { transform:translateX(-14px); } to { transform:translateX(6px); } }
.escena .gallina-pica i { position:absolute; inset:0; background:url(assets/fondos/gallina.svg) center / contain no-repeat; transform-origin:45% 92%; animation:picar 3.2s ease-in-out infinite; }
@keyframes picar { 0%, 55% { transform:rotate(0); } 62% { transform:rotate(30deg); } 68% { transform:rotate(4deg); } 74% { transform:rotate(30deg); } 82%, 100% { transform:rotate(0); } }
.escena .gallina-pica b { position:absolute; right:-6px; bottom:0; width:10px; height:2px; background:radial-gradient(circle, rgba(209,209,209,.7) 0 1px, transparent 1.2px) 0 0 / 4px 2px repeat-x; opacity:.6; }
/* LINE: bocadillo de chat con los tres puntos de «escribiendo…», sin desplazarse */
.escena .bc.chat { width:42px; height:36px; animation:none; }
.escena .chat svg { width:100%; height:100%; display:block; }
.escena .chat circle { opacity:.2; animation:escribe 1.8s ease-in-out infinite; }
.escena .chat .p2 { animation-delay:.3s; } .escena .chat .p3 { animation-delay:.6s; }
@keyframes escribe { 0%, 60%, 100% { opacity:.2; } 30% { opacity:1; } }
/* LINE: conejo con el móvil; en la pantalla, los tres puntos de «escribiendo…» y un leve brillo. No se desplaza */
.escena .bc.conejo { width:42px; height:50px; animation:none; }
.escena .conejo svg { width:100%; height:100%; display:block; overflow:visible; }
.escena .conejo circle[class] { opacity:.2; animation:escribe 1.8s ease-in-out infinite; }
.escena .conejo .p2 { animation-delay:.3s; } .escena .conejo .p3 { animation-delay:.6s; }
.escena .conejo .movil { fill:rgba(209,209,209,.08); animation:pantalla 3.6s ease-in-out infinite; }
@keyframes pantalla { 0%, 100% { fill:rgba(209,209,209,.05); } 50% { fill:rgba(209,209,209,.2); } }
/* Adidas · Real Madrid: el balón gira sobre sí mismo dando toques, sin desplazarse */
.escena .bc.balon { animation:toques 2.6s ease-in-out infinite; }
@keyframes toques { 0% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-16px) rotate(180deg); } 100% { transform:translateY(0) rotate(360deg); } }
.escena .bc.balon::after { content:""; position:absolute; left:50%; bottom:-5px; width:22px; height:3px; margin-left:-11px; border-radius:50%; background:rgba(209,209,209,.25); filter:blur(1px); }
/* Adidas: el balón (dentro) da toques y gira; la sombra se queda en el suelo y se encoge cuando el balón sube */
.escena .bc.balon { background:none; animation:none; transform:none; }
.escena .balon i { position:absolute; inset:0; background:url(assets/fondos/balon.svg) center / contain no-repeat; animation:toques 2.6s ease-in-out infinite; }
.escena .bc.balon::after { animation:sombra 2.6s ease-in-out infinite; }
@keyframes sombra { 0%, 100% { transform:scaleX(1); opacity:1; } 50% { transform:scaleX(.55); opacity:.5; } }
/* Antoni Barcelona Glass: la moto avanza y retrocede un buen tramo, con las ruedas girando, la carrocería vibrando y estela */
.escena .bc.moto { width:64px; height:36px; background:none; animation:rodar 9s ease-in-out infinite alternate; }
@keyframes rodar { from { transform:translateX(-120px); } to { transform:translateX(0); } }
.escena .moto svg { width:100%; height:100%; display:block; overflow:visible; }
.escena .moto .rueda { transform-box:fill-box; transform-origin:center; animation:rueda .9s linear infinite; }
@keyframes rueda { to { transform:rotate(360deg); } }
.escena .moto .cuerpo { animation:vibra .18s steps(2) infinite; }
@keyframes vibra { 50% { transform:translateY(-.6px); } }
.escena .moto .estela { animation:estela .5s linear infinite; }
@keyframes estela { 0% { opacity:.2; transform:translateX(0); } 100% { opacity:.6; transform:translateX(-4px); } }
/* Movistar Estudiantes: un balón de baloncesto botando en el sitio (cae rápido, se aplasta un poco al tocar el suelo y sube) */
.escena .bc.basket { width:30px; height:30px; background:none; animation:none; transform:none; }
.escena .basket i { position:absolute; inset:0; background:url(assets/fondos/basket.svg) center / contain no-repeat; transform-origin:50% 100%; animation:bote 1.4s infinite; }
@keyframes bote { 0% { transform:translateY(-22px); animation-timing-function:cubic-bezier(.5,0,1,.6); } 46% { transform:translateY(0) scale(1.08,.9); animation-timing-function:linear; } 50% { transform:translateY(0) scale(1); animation-timing-function:cubic-bezier(0,.4,.5,1); } 100% { transform:translateY(-22px); } }
.escena .bc.basket::after { content:""; position:absolute; left:50%; bottom:-5px; width:22px; height:3px; margin-left:-11px; border-radius:50%; background:rgba(209,209,209,.25); filter:blur(1px); animation:sombra-bote 1.4s infinite; }
@keyframes sombra-bote { 0%, 100% { transform:scaleX(.55); opacity:.5; } 48% { transform:scaleX(1); opacity:1; } }
/* Carrusel con una sola pieza: sin flechas, sin índice de miniaturas y sin degradados */
.carrusel.uno .car-flecha { display:none; }
.carrusel.uno .car-dots { visibility:hidden; }
.carrusel.uno .car-vp { -webkit-mask:none !important; mask:none !important; }
/* Branded Content: índice con los logos de todas las marcas bajo el carrusel (en color; la elegida, con filo dorado) */
.car-logos .car-dots.car-minis { justify-content:center; gap:10px; margin-top:22px; overflow:visible; flex-wrap:wrap; }
.car-logos .car-minis .car-dot { height:72px; aspect-ratio:2/3; opacity:.5; outline:1px solid rgba(var(--v),.14); transition:opacity .3s, transform .3s, outline-color .3s; }
.car-logos .car-minis .car-dot img { filter:none; }
.car-logos .car-minis .car-dot:hover { opacity:.85; }
.car-logos .car-minis .car-dot.on { opacity:1; outline:1px solid var(--gold); transform:translateY(-3px); }
.car-logos .car-minis .car-dot span { display:none; }
/* para que el índice de logos quepa en la misma pantalla, las tarjetas de Branded Content son algo más bajas */
.car-logos .car-card { flex-basis:max(220px, calc(52vh * 2 / 3)); }
.car-logos .car-dots.car-minis { margin-top:16px; }
.car-logos .car-minis .car-dot { height:min(64px, 7vh); }
/* Branded Content: flechas sobre los bordes del carrusel, a la altura del centro de las tarjetas */
.car-logos .car-marco .car-flecha { top:50%; width:34px; height:40px; }
.car-logos .car-marco .car-flecha.izq { left:1.4vw; } .car-logos .car-marco .car-flecha.der { right:1.4vw; }
/* ====== Fichas en el teléfono ======
   En vertical el cartel (o logo) no ocupa una pantalla: va en miniatura junto al título y el carrusel de piezas sube.
   En horizontal manda el vídeo: el carrusel ocupa casi todo el alto, sin la columna del cartel ni el índice de miniaturas. */
.fc-logo { display:none; }
/* la cabecera de la ficha es flex en columna: en el teléfono pasa a rejilla para poner la miniatura del cartel a la izquierda del título */
/* teléfono en horizontal: el menú completo no cabe, se usa el botón MENÚ como en vertical */
/* títulos compuestos («Adidas · Real Madrid»): en el teléfono cada parte en su línea, sin el punto */
/* ====== Fichas en el teléfono: anterior/siguiente arriba, junto a «volver» (la barra de abajo no se veía sin bajar) ====== */
.fc-nav { display:none; }
/* teléfono en horizontal: todo en una pantalla, sin bajar. Una línea arriba (volver, logo, título, flechas) y el resto, vídeo */
/* ====== Cine y Branded Content: tarjetas con chaflán en diagonal (arriba a la izquierda y abajo a la derecha),
   filo dorado que sigue el contorno y una segunda línea fina paralela a cada corte. El dibujo es un SVG con la misma
   proporción 2:3 que la tarjeta, así que las diagonales no se deforman ====== */
#carrusel .car-card { clip-path:polygon(7% 0, 100% 0, 100% 95.33%, 93% 100%, 0 100%, 0 4.67%); box-shadow:none; }
#carrusel .car-card:hover, #carrusel .car-card:focus-visible { box-shadow:none; }
#carrusel .car-card::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.45; transition:opacity .5s var(--ease);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300' preserveAspectRatio='none' fill='none' stroke='%23d6dce3'%3E%3Cpath vector-effect='non-scaling-stroke' d='M14 .5H199.5V286L186 299.5H.5V14Z'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-opacity='.8' d='M24 5 5 24M195 276 176 295'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
#carrusel .car-card:hover::after, #carrusel .car-card:focus-visible::after { opacity:1; }
#carrusel .car-ver { left:clamp(30px, 9%, 44px); }
/* Cine y Branded Content: el cartel o el logo ya dicen qué es: en la tarjeta, solo el número */
#carrusel .car-meta > div { display:none; }
#carrusel .car-meta { background:none; }
#carrusel .car-num { color:rgba(209,209,209,.9); text-shadow:0 1px 10px rgba(0,0,0,.45); }
/* Cine y Branded Content: «Ver ficha» abajo en el centro, a la altura del número */
#carrusel .car-ver { top:auto; left:50%; bottom:clamp(18px,2.2vw,28px); transform:translateX(-50%); white-space:nowrap; }
/* sin texto en la tarjeta basta con un velo suave abajo para que el número y «Ver ficha» se lean sobre carteles con mucho detalle */
#carrusel .car-meta { height:30%; background:linear-gradient(0deg, rgba(4,5,6,.78), rgba(4,5,6,.35) 55%, transparent); }
/* Formación y docencia en pantallas estrechas: nombre arriba y dato debajo, uno tras otro (en el sello 16:9 se montaban) */
/* Formación y docencia, en cualquier ancho: nombre arriba y dato debajo, en flujo (con el sello 16:9 fijo se montaban
   en pantallas medianas); el alto lo pone el contenido */
.cred-bloque.sello .cred-img { aspect-ratio:auto; min-height:8.5rem; display:flex; flex-direction:column; justify-content:space-between; gap:.8em; }
.cred-bloque.sello .cred-img .hueco, .cred-bloque.sello .cred-dato { position:static; }
.cred-bloque.sello .cred-img .hueco { padding:1em .8em 0; }
/* sello con imagen (título del máster): el documento entero arriba, sin recortar, y el dato debajo */
.cred-bloque.sello .cred-img:has(img) { justify-content:flex-start; }
.cred-bloque.sello .cred-img img { height:auto; aspect-ratio:1755/1241; object-fit:cover; }
.cred-bloque.sello .cred-img:has(img) .cred-dato { padding-top:.8em; }
.cred-bloque.sello .cred-rejilla { align-items:stretch; }
.cred-bloque.sello .cred-ficha { display:flex; flex-direction:column; }
.cred-bloque.sello .cred-ficha .cred-img { flex:1; }
/* Créditos: la lupa deja el documento grande para que se lea (más que en la hoja de contactos) y el pie en una línea */
.lupa-cred img { max-width:84vw; max-height:80vh; }
.lupa-cred span { max-width:80vw; text-align:center; line-height:1.6; }
.lupa .car-flecha[hidden] { display:none; }
.lupa-cred .car-flecha.izq { left:2.5vw; } .lupa-cred .car-flecha.der { right:2.5vw; }
/* Créditos (títulos de Formación): vista previa a media pantalla, con la página visible detrás y una X clara para cerrar */
.lupa-cred { background:rgba(2,4,4,.55); cursor:default; }
.lupa-cred .lupa-caja { position:relative; width:min(50vw, 820px); }
.lupa-cred img { display:block; width:100%; height:auto; max-width:none; max-height:none; cursor:default; box-shadow:0 30px 90px -20px #000, 0 0 0 1px rgba(var(--v),.42); }
.lupa-x { position:absolute; top:-18px; right:-18px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(var(--v),.72); background:#060908; color:#d1d1d1; font-size:18px; line-height:1; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.6); }
.lupa-x:hover { background:#d1d1d1; color:#060908; }
.lupa-cred span { bottom:auto; top:calc(50% + min(18vw, 295px)); }
.lupa-cred .lupa-caja span { position:static; display:block; max-width:none; margin-top:14px; }
.lupa-cred .lupa-caja span { padding:10px 14px; background:rgba(4,6,6,.9); border:1px solid rgba(var(--v),.42); }
/* flechas dentro de la vista previa, sobre los lados de la imagen (a media altura de la imagen, no de la caja con el pie) */
.lupa-cred .lupa-caja .car-flecha { position:absolute; top:calc(50% - 22px); width:34px; height:40px; transform:translateY(-50%); }
.lupa-cred .lupa-caja .car-flecha.izq { left:14px; right:auto; } .lupa-cred .lupa-caja .car-flecha.der { right:14px; left:auto; }
/* ventana de las piezas verticales: el vídeo a casi todo el alto, 9:16 */
.lupa-video .lupa-caja { width:auto; }
.lupa-video .lv-marco { height:min(84vh, 160vw); aspect-ratio:9/16; background:#000; box-shadow:0 30px 90px -20px #000, 0 0 0 1px rgba(var(--v),.42); }
.lupa-video .lv-marco iframe { width:100%; height:100%; border:0; display:block; }
.lupa-video .lupa-caja .car-flecha.izq { left:-56px; } .lupa-video .lupa-caja .car-flecha.der { right:-56px; }
.lupa-video .lupa-caja span { position:static; display:block; margin-top:10px; padding:8px 12px; text-align:center; }
/* logos de productoras sacados de la web antigua (fondo blanco): en negativo y fundidos con el tablero oscuro */
.logo-ficha img[src*="assets/cv/"], .logo-ficha:hover img[src*="assets/cv/"] { object-fit:cover; filter:grayscale(1) invert(1) brightness(1.15); mix-blend-mode:screen; opacity:.8; }
/* Televisión y Teatro: las imágenes son horizontales, así que las tarjetas también (16:9, enteras, sin recortar) */
.cred-bloque.apaisado .cred-rejilla { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3vh 1.4vw; }
.cred-bloque.apaisado .cred-img { aspect-ratio:16/9; }
/* ====== Créditos = «¿Quién es quién?»: nube de caras y, debajo, una ficha por persona ====== */
.caras-rejilla .cara { cursor:pointer; }
.quienes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3.2vh 3vw; padding:7vh 4vw 10vh; max-width:1500px; margin:0 auto; }
.quien { display:grid; grid-template-columns:clamp(84px,7vw,120px) minmax(0,1fr); gap:1.6vw; align-items:start; padding:2.4vh 0; border-top:1px solid rgba(var(--v),.14); scroll-margin-top:90px; }
.quien:target { border-top-color:var(--gold); }
.quien:target .quien-img { box-shadow:0 0 0 1px var(--gold); }
.quien-img { position:relative; aspect-ratio:3/4; overflow:hidden; background:#0d0c0a; border:1px solid rgba(var(--v),.14); }
.quien-img img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) brightness(.9); }
.quien-img .ini { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:300 1rem Jost,sans-serif; letter-spacing:.3em; color:rgba(var(--v),.42); }
.quien-num { font:.62rem "Courier Prime",monospace; letter-spacing:.2em; color:var(--gold); }
.quien h3 { margin:.3em 0 .25em; font-weight:300; font-size:clamp(1rem,1.3vw,1.3rem); letter-spacing:.12em; text-transform:uppercase; color:#d1d1d1; }
.quien-proy { margin:0 0 .9em; font:.7rem/1.5 "Courier Prime",monospace; color:rgba(255,255,255,.55); }
.quien-hic { margin:0 0 .9em; font-weight:300; font-size:.92rem; line-height:1.6; color:rgba(255,255,255,.78); }
.quien-apr { margin:0; padding-left:1em; border-left:1px solid var(--gold); font-weight:300; font-style:italic; font-size:.98rem; line-height:1.6; color:#fff; }
.quien-apr.pendiente { font-style:normal; font-size:.72rem; letter-spacing:.06em; color:rgba(255,255,255,.3); border-left-color:rgba(var(--v),.42); }
/* Créditos: la nube en 3 filas de 12 (36 personas) */
.caras-rejilla.filmo-caras { grid-template-columns:repeat(12,minmax(0,1fr)); gap:2.2vh .8vw; }
/* ====== Créditos en una pantalla 16:9: cabecera compacta y la nube de 3×12; las fichas son flotantes ====== */
body:has(.caras-rejilla) .cred-cab { padding:11vh 4vw 0; }
body:has(.caras-rejilla) .cred-cab h1 { font-size:clamp(2rem,3.6vw,3.4rem); }
body:has(.caras-rejilla) .cred-sub { margin-top:1.2vh; }
body:has(.caras-rejilla) .creditos { padding-top:3.5vh; padding-bottom:2vh; }
body:has(.caras-rejilla) .tablero { padding:3.6vh 1.4vw 1.6vh; }
.caras-rejilla.filmo-caras { gap:1.6vh .8vw; }
.caras-rejilla .cara { padding:0; border:0; background:none; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.caras-rejilla .cara-img { aspect-ratio:4/5; height:auto; }
.caras-rejilla .cara figcaption span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.caras-rejilla .cara.activa .cara-img { box-shadow:0 0 0 1px var(--gold); }
.caras-rejilla .cara.activa .cara-img img { filter:none; }
body:has(.caras-rejilla) .tablero-nota { margin-top:1.2vh; }
/* ficha flotante: legible, sin velo, la página sigue usable detrás */
.quien-pop { position:fixed; z-index:40; width:min(380px, 88vw); display:grid; grid-template-columns:110px minmax(0,1fr); gap:16px; padding:18px 18px 14px; background:rgba(10,9,7,.96); border:1px solid rgba(var(--v),.42); border-radius:8px; box-shadow:0 30px 80px -20px #000; opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .25s, transform .25s; }
.quien-pop.on { opacity:1; pointer-events:auto; transform:none; }
.quien-pop .lupa-x { top:-14px; right:-14px; width:32px; height:32px; font-size:14px; }
.qp-img { position:relative; aspect-ratio:3/4; overflow:hidden; background:#0d0c0a; border:1px solid rgba(var(--v),.14); }
.qp-img img { width:100%; height:100%; object-fit:cover; display:block; }
.qp-img .ini { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:300 1.1rem Jost,sans-serif; letter-spacing:.3em; color:rgba(var(--v),.42); }
.qp-num { font:.6rem "Courier Prime",monospace; letter-spacing:.2em; color:var(--gold); }
.quien-pop h3 { margin:.35em 0 .25em; font-weight:300; font-size:1.15rem; letter-spacing:.1em; text-transform:uppercase; color:#d1d1d1; line-height:1.2; }
.qp-proy { margin:0 0 .8em; font:.72rem/1.5 "Courier Prime",monospace; color:rgba(255,255,255,.6); }
.qp-hic { margin:0 0 .8em; font-weight:300; font-size:.9rem; line-height:1.55; color:rgba(255,255,255,.82); }
.qp-apr { margin:0; padding-left:.9em; border-left:1px solid var(--gold); font-weight:300; font-style:italic; font-size:.95rem; line-height:1.55; color:#fff; }
.qp-apr.pendiente { font-style:normal; font-size:.72rem; color:rgba(255,255,255,.35); border-left-color:rgba(var(--v),.42); }
.qp-nav { grid-column:1 / -1; display:flex; justify-content:space-between; padding-top:4px; border-top:1px solid rgba(var(--v),.14); }
.qp-nav .car-flecha { position:static; transform:none; width:30px; height:34px; }
/* ajuste para que la página entera (con el pie) quepa en 16:9 */
.caras-rejilla .cara-img { aspect-ratio:1/1; }
.caras-rejilla .cara figcaption span { -webkit-line-clamp:1; }
body:has(.caras-rejilla) .cred-cab { padding-top:9vh; }
body:has(.caras-rejilla) .creditos { padding-top:2.6vh; padding-bottom:1vh; }
body:has(.caras-rejilla) .tablero { padding-top:3vh; padding-bottom:1.2vh; }
/* 41 personas: 3 filas de 14 para que siga cabiendo en una pantalla 16:9 */
.caras-rejilla.filmo-caras { grid-template-columns:repeat(14,minmax(0,1fr)); gap:1.6vh .7vw; }
/* caras otra vez en 4:5 */
.caras-rejilla .cara-img { aspect-ratio:4/5; }
body:has(.caras-rejilla) .creditos { padding-top:1.8vh; }
/* 45 personas: 3 filas de 15; en la cuadrícula solo el nombre (el proyecto se lee en la ficha) */
.caras-rejilla.filmo-caras { grid-template-columns:repeat(15,minmax(0,1fr)); gap:1.8vh .65vw; }
.caras-rejilla .cara figcaption span { display:none; }
/* 46 personas: 3 filas de 16 (caben hasta 48 en una pantalla) */
.caras-rejilla.filmo-caras { grid-template-columns:repeat(16,minmax(0,1fr)); gap:1.8vh .6vw; }
/* grupos dentro de la nube: cada grupo empieza con una casilla con su nombre (actores, humoristas…). 48 + 5 = 53 casillas: 3 filas de 18 */
.caras-rejilla.filmo-caras { grid-template-columns:repeat(18,minmax(0,1fr)); gap:1.8vh .55vw; }
.cara-grupo { display:flex; align-items:flex-start; justify-content:flex-start; aspect-ratio:4/5; border-top:1px solid var(--gold); padding-top:.6em; }
.cara-grupo span { font:400 .62rem/1.3 Jost,sans-serif; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); writing-mode:horizontal-tb; }
/* grupos: sin casillas propias; la primera cara de cada grupo lleva encima el nombre del grupo y un filo dorado.
   48 caras = 3 filas de 16 */
.caras-rejilla.filmo-caras { grid-template-columns:repeat(16,minmax(0,1fr)); gap:2.6vh .6vw; }
.cara.grupo-ini { position:relative; }
.cara.grupo-ini::before { content:attr(data-grupo); position:absolute; left:0; bottom:calc(100% + 4px); font:400 .58rem Jost,sans-serif; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.cara.grupo-ini .cara-img { box-shadow:-6px 0 0 -5px var(--gold); }
/* fotos siempre alineadas: cada casilla empieza arriba y el nombre tiene reservado el alto de dos líneas */
.caras-rejilla.filmo-caras { align-items:start; }
.caras-rejilla .cara { display:flex; flex-direction:column; justify-content:flex-start; }
.caras-rejilla .cara figcaption b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; line-height:1.25; }
.caras-rejilla .cara figcaption, .caras-rejilla .cara figcaption b { text-align:center; align-items:center; }
/* Cine: texto de presentación a la derecha del título, en la misma franja (no añade alto a la página) */
.pagehead.con-intro { display:flex; align-items:flex-end; gap:3vw; }
.pagehead-intro { max-width:34em; margin:0 0 .5em; padding-right:150px; font-weight:200; font-size:clamp(.92rem,1.05vw,1.1rem); line-height:1.55; color:rgba(255,255,255,.75); }
/* Cine: con el texto junto al título, la Enterprise cruza solo el tramo libre entre el texto y el botón Contratar */
body:has(.con-intro) .fresnel .enterprise { animation-name:enterprise-cine; animation-duration:40s; }
@keyframes enterprise-cine { 0% { left:59%; top:calc(14vh + 12px); opacity:0; } 6% { opacity:.55; } 92% { opacity:.55; } 100% { left:calc(100% - 4vw - 200px); top:calc(10vh + 12px); opacity:0; } }
/* ¿Quién es quién?: fotos en color desde el principio (al pasar el ratón solo se iluminan un poco) */
.caras-rejilla .cara-img img { filter:none; }
.caras-rejilla .cara:hover .cara-img img, .caras-rejilla .cara.activa .cara-img img { filter:brightness(1.08); }
/* reproductor ampliado también para vídeos horizontales: 16:9, casi todo el ancho sin pasarse del alto */
.lupa-video .lv-marco.h { height:auto; width:min(86vw, calc(80vh * 16 / 9)); aspect-ratio:16/9; }
.lupa-video .lv-marco video { width:100%; height:100%; display:block; background:#000; }
.lupa-video .lupa-caja span[hidden] { display:none; }
/* fichas: el texto de abajo, más ancho (un párrafo de tres frases cabe en dos líneas en pantalla de ordenador) */
@media (min-width:761px) {
  body:has(.franja) .detail.extra { grid-template-columns:minmax(0,.7fr) minmax(0,3fr); }
  body:has(.franja) .detail.extra .text p { max-width:none; }
}
/* 4 filas de 14: la nube sube y aprovecha el hueco bajo el título */
body:has(.caras-rejilla) .cred-bloque { padding-top:0; }
.caras-rejilla.filmo-caras { grid-template-columns:repeat(14,minmax(0,1fr)); }
body:has(.caras-rejilla) .cred-cab { padding-top:7vh; }
@media (min-width:901px) { .caras-rejilla.filmo-caras { width:min(100%,138vh); margin-inline:auto; } }
/* blanco y negro con un toque dorado; color al pasar el ratón o con la ficha abierta */
.caras-rejilla .cara-img img { filter:grayscale(1) sepia(.28) contrast(1.06) brightness(.92); }
.caras-rejilla .cara:hover .cara-img img, .caras-rejilla .cara:focus-visible .cara-img img, .caras-rejilla .cara.activa .cara-img img { filter:none; }
/* 44 personas: 4 filas de 11 */
.caras-rejilla.filmo-caras { grid-template-columns:repeat(11,minmax(0,1fr)); }
@media (min-width:901px) { .caras-rejilla.filmo-caras { width:min(100%,95vh); } }
/* cabecera de Créditos: texto a la izquierda, vídeo del método a la derecha */
body:has(.caras-rejilla) .cred-cab { display:flex; align-items:flex-end; justify-content:space-between; gap:4vw; }
body:has(.caras-rejilla) .cred-sub + .cred-sub { margin-top:.4vh; }
.cred-video { flex:none; height:17vh; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; border:1px solid rgba(var(--v),.42); border-radius:4px; background:rgba(255,255,255,.03); }
.cred-video span { font:.62rem "Courier Prime",monospace; letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--v),.72); }
/* el vídeo del método entra en la cuadrícula: arriba a la derecha, 6 columnas × 2 filas; las caras lo rodean */
body:has(.caras-rejilla) .cred-cab { display:block; }
.caras-rejilla.filmo-caras { grid-template-columns:repeat(14,minmax(0,1fr)); grid-auto-flow:row dense; }
@media (min-width:901px) { .caras-rejilla.filmo-caras { width:min(100%,130vh); } }
.caras-rejilla .cred-video { grid-column:-7 / -1; grid-row:1 / span 2; align-self:stretch; height:auto; aspect-ratio:auto; margin:0 0 2.6vh; display:flex; align-items:center; justify-content:center; background:#0b0a08; border:1px solid rgba(var(--v),.42); border-radius:4px; }
/* vídeo del método: miniatura con velo, triángulo de play y título */
.caras-rejilla .cred-video { position:relative; overflow:hidden; cursor:pointer; background:#0b0a08 url(assets/metodo-direccion.jpg) center/cover no-repeat; }
.caras-rejilla .cred-video::before { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.25) 55%, rgba(0,0,0,.35)); transition:background .3s; }
.caras-rejilla .cred-video::after { content:""; position:absolute; left:50%; top:50%; width:64px; height:64px; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(var(--v),.72); background:rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%231ed0a7'/%3E%3C/svg%3E") center/30px no-repeat; transition:transform .3s; }
.caras-rejilla .cred-video:hover::before { background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.1) 55%, rgba(0,0,0,.2)); }
.caras-rejilla .cred-video:hover::after { transform:translate(-50%,-50%) scale(1.08); }
.caras-rejilla .cred-video span { position:absolute; left:16px; bottom:12px; z-index:1; color:#d1d1d1; }
/* vídeo a la izquierda; título más grande */
@media (min-width:901px) { .caras-rejilla .cred-video { grid-column:1 / span 6; } }
.caras-rejilla .cred-video span { left:20px; bottom:16px; font:300 clamp(1rem,1.5vw,1.45rem) Jost,sans-serif; letter-spacing:.14em; color:#d1d1d1; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.caras-rejilla .cred-video span { white-space:nowrap; line-height:1.35; }
.caras-rejilla .cara figcaption b i.nl { display:block; font-style:normal; }
/* Marta González de Vega: -15 % de saturación cuando se ve en color */
.caras-rejilla .cara:hover img[src$="marta-gonzalez-de-vega.jpg"], .caras-rejilla .cara:focus-visible img[src$="marta-gonzalez-de-vega.jpg"], .caras-rejilla .cara.activa img[src$="marta-gonzalez-de-vega.jpg"], .qp-img img[src$="marta-gonzalez-de-vega.jpg"] { filter:saturate(.85); }
/* Luis Álvaro: -25 % de saturación cuando se ve en color */
.caras-rejilla .cara:hover img[src$="luis-alvaro.jpg"], .caras-rejilla .cara:focus-visible img[src$="luis-alvaro.jpg"], .caras-rejilla .cara.activa img[src$="luis-alvaro.jpg"], .qp-img img[src$="luis-alvaro.jpg"] { filter:saturate(.75); }
/* ficha flotante: «¿Quién es…?» */
.quien-pop { width:min(460px, 92vw); }
.qp-quien { margin:0 0 .8em; }
.qp-quien span { display:block; margin-bottom:.3em; font:.62rem "Courier Prime",monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.qp-quien p { margin:0; font-weight:300; font-size:.84rem; line-height:1.55; color:rgba(255,255,255,.8); }
/* ====== Perfil: una pantalla, cuatro pestañas ====== */
body:has(.pestanas) { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
body:has(.pestanas) footer { margin-top:auto; }
.perfil-cab { padding-bottom:2vh; }
.pestanas { display:flex; gap:2.6vw; padding:0 4vw; border-bottom:1px solid var(--faint); }
.pestanas button { position:relative; padding:1.2vh 0 1.4vh; background:none; border:0; cursor:pointer; font:300 .78rem Jost,sans-serif; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.45); transition:color .3s; }
.pestanas button:hover { color:#fff; }
.pestanas button[aria-selected="true"] { color:#d1d1d1; }
.pestanas button[aria-selected="true"]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--gold); }
.paneles { flex:1 1 auto; min-height:0; position:relative; }
.paneles .panel { height:100%; padding:3.5vh 4vw 2vh; overflow:hidden; }
.paneles .panel[hidden] { display:none; }
.paneles .panel.bio { align-items:center; }
.paneles .panel.bio .shot img { max-height:52vh; width:auto; }
.paneles .panel.desliza { overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(var(--v),.42) transparent; -webkit-mask:linear-gradient(to bottom, transparent, #000 2.5vh, #000 calc(100% - 4vh), transparent); mask:linear-gradient(to bottom, transparent, #000 2.5vh, #000 calc(100% - 4vh), transparent); }
.paneles .panel.desliza .block { padding:2vh 0 3vh; }
.paneles .panel-bio { display:flex; align-items:center; justify-content:center; }
.paneles .panel-bio .polaroid2 { height:calc(min(48vh, 34vw) * 1.02); transform:rotate(-2deg); }
/* fondo del Perfil: trama de curvas tipo anillo de enfoque, guiños repartidos y claqueta */
.claqueta { position:absolute; right:5vw; bottom:9vh; width:74px; height:62px; opacity:.5; }
.claqueta .cq-cuerpo { position:absolute; left:0; right:0; bottom:0; height:44px; border:1px solid rgba(214,220,227,.75); border-radius:2px; display:flex; flex-direction:column; justify-content:space-around; padding:5px 6px; }
.claqueta .cq-cuerpo b { font:400 6px "Courier Prime",monospace; letter-spacing:.25em; color:rgba(214,220,227,.75); border-bottom:1px solid rgba(214,220,227,.3); }
.claqueta .cq-palo { position:absolute; left:0; right:0; bottom:44px; height:11px; border:1px solid rgba(214,220,227,.75); border-radius:1px; background:repeating-linear-gradient(-55deg, rgba(214,220,227,.7) 0 6px, transparent 6px 12px); transform-origin:0 100%; animation:claqueta 7s ease-in infinite; }
@keyframes claqueta { 0%,82% { transform:rotate(-24deg); } 88% { transform:rotate(0); } 90% { transform:rotate(-4deg); } 92%,96% { transform:rotate(0); } 100% { transform:rotate(-24deg); } }
@media (prefers-reduced-motion:reduce) { .claqueta .cq-palo { animation:none; transform:rotate(-24deg); } }
/* Perfil (v2): las pestañas son el título; fondo como el resto (halo, lente y polvo en suspensión) */
.oculto { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.perfil-cab { padding:13vh 4vw 0; }
.perfil-cab .pestanas { padding:0; border:0; gap:3.2vw; flex-wrap:wrap; }
.perfil-cab .pestanas button { padding:0 0 .9vh; font:200 clamp(1.5rem,3.4vw,3rem) Jost,sans-serif; letter-spacing:.16em; color:rgba(255,255,255,.2); }
.perfil-cab .pestanas button:hover { color:rgba(255,255,255,.6); }
.perfil-cab .pestanas button[aria-selected="true"] { color:#fff; }
.perfil-cab .pestanas button[aria-selected="true"]::after { left:.1em; right:auto; width:2.2em; bottom:0; background:var(--gold); }
.paneles .panel { padding:5vh 4vw 2vh; }
.panel-perfil { max-width:62ch; }
.panel-perfil .lead { margin-bottom:3vh; }
.panel-perfil p:not(.lead) { font-weight:200; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.75; color:rgba(255,255,255,.82); margin-bottom:2vh; }
.panel-perfil { max-width:none; width:min(58vw, 820px); }
.panel-perfil .lead { max-width:none; font-weight:200; font-size:clamp(1.25rem,2vw,1.75rem); line-height:1.4; color:#d1d1d1; }
.panel-perfil p:not(.lead) { max-width:62ch; }
/* Contacto: fondo de la portada; su Osa Mayor («MADRID») se coloca junto a «Base en Madrid» */
body:has(.contactpage) .visor.portada::after { top:calc(50vh - 62px); left:calc(4vw + 330px); }
/* ====== Contacto: un cielo en 16:9 con la tarjeta en el centro ====== */
body:has(.cielo-cont) { position:relative; height:100vh; overflow:hidden; }
body:has(.cielo-cont) footer { position:absolute; left:0; right:0; bottom:0; }
.visor.cielo { background:none; }
.visor.cielo::after { display:none; }
.visor.cielo .estrellas { position:absolute; inset:0; opacity:.9; }
.contactpage.cielo-cont { position:absolute; left:0; right:0; top:0; height:calc(100vh - 81px); min-height:0; padding:0; display:block; }
.tarjeta { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:1.6vh; padding:5vh 4vw 4.4vh; min-width:min(460px, 86vw); text-align:center;
  background:linear-gradient(180deg, rgba(7,11,10,.72), rgba(4,6,6,.6)); border:1px solid rgba(var(--v),.42); border-radius:3px; box-shadow:0 40px 90px -30px #000, inset 0 0 0 1px rgba(255,255,255,.02); backdrop-filter:blur(3px); }
.tarjeta::before, .tarjeta::after { content:""; position:absolute; width:14px; height:14px; border:solid rgba(var(--v),.42); }
.tarjeta::before { left:-1px; top:-1px; border-width:1px 0 0 1px; }
.tarjeta::after { right:-1px; bottom:-1px; border-width:0 1px 1px 0; }
.tarjeta .small { letter-spacing:.32em; color:rgba(209,209,209,.6); }
.contactpage .tarjeta .mail { align-self:center; margin:1vh 0 0; font-size:clamp(1.05rem,1.7vw,1.5rem); letter-spacing:.1em; }
.contactpage .tarjeta .tel { align-self:center; font-size:clamp(.95rem,1.3vw,1.15rem); letter-spacing:.18em; }
.tarjeta .cta { margin-top:1.6vh; }
.astro { position:absolute; margin:0; font:10px/1.7 "Courier Prime",monospace; letter-spacing:.2em; text-transform:uppercase; color:rgba(225,229,235,.55); }
.astro-madrid { right:13.5%; top:27%; text-align:right; }
.astro-idiomas { right:11.5%; top:80%; text-align:right; }
/* Contacto v2: vía láctea en lienzo y tarjeta como cartón de créditos */
.visor.cielo .via-lactea { position:absolute; inset:0; width:100%; height:100%; }
.tarjeta { gap:0; padding:0; min-width:0; background:none; border:0; box-shadow:none; backdrop-filter:none; }
.tarjeta::before { left:50%; top:50%; width:150%; height:190%; border:0; transform:translate(-50%,-50%); z-index:-1;
  background:radial-gradient(closest-side, rgba(4,4,6,.82), rgba(4,4,6,.55) 55%, transparent); }
.tarjeta::after { display:none; }
.tarjeta .t-nombre { font:200 clamp(1.9rem,3.3vw,3rem) Jost,sans-serif; letter-spacing:.34em; margin-right:-.34em; text-transform:uppercase; color:#fff; }
.tarjeta .t-cargo { margin-top:1.4vh; font:400 10px "Courier Prime",monospace; letter-spacing:.38em; text-transform:uppercase; color:rgba(209,209,209,.62); }
.tarjeta .t-sep { display:block; width:56px; height:1px; margin:3.6vh 0 3.2vh; background:linear-gradient(90deg, transparent, rgba(var(--v),.72), transparent); }
.contactpage .tarjeta .mail { margin:0; border-bottom:1px solid transparent; font:200 clamp(1rem,1.45vw,1.3rem) Jost,sans-serif; letter-spacing:.14em; color:rgba(255,255,255,.9); }
.contactpage .tarjeta .mail:hover { border-color:rgba(var(--v),.42); }
.contactpage .tarjeta .tel { margin-top:1.4vh; font:200 clamp(.9rem,1.15vw,1.05rem) Jost,sans-serif; letter-spacing:.22em; color:rgba(255,255,255,.62); }
.tarjeta .cta { margin-top:3.4vh; }
.astro { color:rgba(225,229,235,.5); }
.astro-madrid { right:calc(4vw + 56px); top:calc(9vh + 26px); }
.astro-idiomas { right:calc(4vw + 56px); top:auto; bottom:calc(3vh + 40px); }
.visor.cielo .via-lactea { filter:saturate(0); }
/* Contacto v3: negro elegante con luz. Sin figuras: una luz cálida que rasga en diagonal desde arriba, un filo horizontal muy fino a la altura de la tarjeta y un viñeteado que lo cierra todo; respiran despacio */
.visor.cielo { background:#050505; }
.visor.cielo .luz { position:absolute; pointer-events:none; }
.visor.cielo .luz-a { left:-20%; top:-45%; width:95%; height:120%; transform:rotate(-18deg);
  background:radial-gradient(ellipse 50% 42% at 55% 55%, rgba(212,212,212,.085), rgba(203,203,203,.03) 45%, transparent 72%); filter:blur(30px); animation:respira 14s ease-in-out infinite alternate; }
.visor.cielo .luz-b { left:0; right:0; top:calc(52% - 1px); height:2px;
  background:linear-gradient(90deg, transparent 6%, rgba(227,227,227,.06) 30%, rgba(238,238,238,.16) 50%, rgba(227,227,227,.06) 70%, transparent 94%); filter:blur(1.5px); animation:respira 9s ease-in-out 2s infinite alternate; }
.visor.cielo .luz-b::after { content:""; position:absolute; left:20%; right:20%; top:-60px; height:120px; background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(223,223,223,.045), transparent 70%); filter:blur(18px); }
.visor.cielo .luz-c { inset:0; background:radial-gradient(ellipse 75% 70% at 50% 52%, transparent 40%, rgba(0,0,0,.65) 100%); }
@keyframes respira { from { opacity:.7; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .visor.cielo .luz { animation:none; } }
.tarjeta .t-base { margin-top:2.6vh; font:400 10px "Courier Prime",monospace; letter-spacing:.3em; text-transform:uppercase; color:rgba(225,229,235,.55); }
.tarjeta .cta { margin-top:2.6vh; }
/* Contacto: esquinas en plateado, iris de obturador esquemático detrás de la tarjeta e iconos de contacto */
.visor.cielo { --c:rgba(214,220,227,.2); }
.visor.cielo .rew, .visor.cielo .fwd, .visor.cielo .reg { opacity:.24; }
.visor.cielo .iris { position:absolute; left:50%; top:52%; width:118vh; aspect-ratio:1; transform:translate(-50%,-50%); background:url(assets/fondos/iris.svg) center / contain no-repeat; opacity:.075; animation:iris 240s linear infinite; }
@keyframes iris { to { transform:translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .visor.cielo .iris { animation:none; } }
.t-iconos { display:flex; gap:22px; margin-top:3.2vh; }
.t-iconos a { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(214,220,227,.22); border-radius:50%; color:rgba(214,220,227,.75); transition:border-color .4s, color .4s, background .4s; }
.t-iconos a:hover, .t-iconos a:focus-visible { border-color:rgba(var(--v),.72); color:#d1d1d1; background:rgba(var(--v),.04); }
.t-iconos svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.tarjeta .cta { display:none; }
/* Contacto v4: narrativa de obturador. Sin marco ni regla; el iris se abre cada 10 s detrás del nombre con un destello */
.visor.cielo::before { display:none; }
.visor.cielo .iris { animation:none; opacity:.34; width:112vh; }
.visor.cielo .destello { position:absolute; left:50%; top:52%; width:70vh; height:70vh; transform:translate(-50%,-50%); opacity:0;
  background:radial-gradient(circle, rgba(242,242,242,.55), rgba(221,221,221,.22) 22%, rgba(208,208,208,.06) 45%, transparent 66%); animation:destello 10s linear infinite; }
.visor.cielo .destello::after { content:""; position:absolute; left:-60%; right:-60%; top:calc(50% - 1px); height:2px;
  background:linear-gradient(90deg, transparent, rgba(233,233,233,.5) 40%, rgba(248,248,248,.9) 50%, rgba(233,233,233,.5) 60%, transparent); filter:blur(1px); }
@keyframes destello { 0%, 84% { opacity:0; } 88% { opacity:1; } 93% { opacity:.8; } 97%, 100% { opacity:0; } }
.tarjeta::before { background:radial-gradient(closest-side, rgba(4,4,6,.55), rgba(4,4,6,.3) 55%, transparent); }
@media (prefers-reduced-motion:reduce) { .visor.cielo .destello { animation:none; } }
/* Contacto v5: iris esquemático de líneas (sin relleno), abierto alrededor de la tarjeta; cada 10 s hace «clic»: se cierra y vuelve a abrir.
   El centro queda enmascarado para que nunca tape la lectura; el destello es un anillo de luz en el borde de la apertura */
.visor.cielo .iris { opacity:.2; width:116vh; -webkit-mask:radial-gradient(circle, transparent 0 17%, #000 33%); mask:radial-gradient(circle, transparent 0 17%, #000 33%); }
.visor.cielo .destello { width:116vh; height:116vh; background:radial-gradient(circle, transparent 0 22%, rgba(226,226,226,.10) 27%, rgba(233,233,233,.05) 31%, transparent 40%); }
.visor.cielo .destello::after { display:none; }
@keyframes destello { 0%, 85% { opacity:0; } 89% { opacity:1; } 92% { opacity:.85; } 97%, 100% { opacity:0; } }
.tarjeta::before { background:radial-gradient(closest-side, rgba(4,4,6,.7), rgba(4,4,6,.4) 55%, transparent); }
/* Contacto v6: en reposo el iris casi desaparece; solo se hace presente cuando entra la luz */
.visor.cielo .iris { opacity:.08; animation:iris-clic 10s linear infinite; }
@keyframes iris-clic { 0%, 84% { opacity:.08; } 88% { opacity:.24; } 93% { opacity:.2; } 98%, 100% { opacity:.08; } }
@media (prefers-reduced-motion:reduce) { .visor.cielo .iris { animation:none; } }
/* ====== Paleta turquesa, ajuste fino: letras de botones en blanco, rellenos en turquesa profundo; el brillo llega con el hover ====== */
.btn-oro, .boton-ch { background:linear-gradient(180deg, #257b67, #175647); color:#fff; border-color:rgba(var(--v),.42); box-shadow:0 14px 34px -20px rgba(37,123,103,.8); }
.btn-oro:hover, .boton-ch:hover { background:linear-gradient(180deg, #2b8f78, #1b6251); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 4px rgba(var(--v),.14), 0 22px 46px -16px rgba(var(--v),.42); }
.btn-oro .flecha-cursor svg, .boton-ch .cur-flecha svg { fill:#fff; }
.btn-linea, .btn-linea:hover, .cta, .plat, .foco-btn span, .car-ver, .verficha { color:#fff; }
.foco-btn:hover span { color:#fff; text-shadow:0 0 12px rgba(var(--v),.72); }
/* ====== Sistema de verde: una base (--v) con tres niveles de opacidad (.14 sutil · .42 normal · .72 destacado) y un velo (.04) ====== */
:root { --v:30,208,167; }
/* Prueba en la Home: verde con un 20 % menos de luz y un 8 % más hacia el azul, y botones con más oficio */
.btn-oro, .btn-linea, .boton-ch {
  position:relative; overflow:hidden; color:#fff; border:1px solid rgba(var(--v),.42);
  background:linear-gradient(180deg, rgba(var(--v),.16), rgba(var(--v),.03) 60%, rgba(0,0,0,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -18px 30px -24px rgba(var(--v),.5), 0 18px 40px -26px rgba(var(--v),.55); backdrop-filter:blur(4px); }
.btn-linea { background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.2)); border-color:rgba(255,255,255,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.btn-oro::after, .btn-linea::after, .boton-ch::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; transform:skewX(-20deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); transition:left .8s var(--ease); pointer-events:none; }
.btn-oro:hover, .btn-linea:hover, .boton-ch:hover { transform:translateY(-2px); border-color:rgba(var(--v),.72); background:linear-gradient(180deg, rgba(var(--v),.26), rgba(var(--v),.06) 60%, rgba(0,0,0,.2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -18px 30px -20px rgba(var(--v),.6), 0 22px 46px -22px rgba(var(--v),.7); }
.btn-oro:hover::after, .btn-linea:hover::after, .boton-ch:hover::after { left:120%; }
.btn-oro .flecha-cursor svg, .btn-linea .flecha-cursor svg { fill:rgb(var(--v)); }
body { --gold:rgba(var(--v),.72); }
/* Home: cita de Yoda en una línea justificada y firma a la derecha */
.visor.portada .cita .cita-l1 { display:block; font-weight:400; text-align:justify; text-align-last:justify; white-space:nowrap; }
.visor.portada .cita i { text-align:right; text-transform:none; letter-spacing:.12em; }
/* Bordes de imágenes (carteles, miniaturas, fotos, pantallas) en plata, no en verde */
:root { --plata:214,220,227; }
.car-card, .car-card:hover, .car-card:focus-visible { box-shadow:0 30px 70px -25px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--plata),.22); }
.car-card:hover, .car-card:focus-visible { box-shadow:0 40px 90px -25px rgba(0,0,0,.88), 0 0 0 1px rgba(var(--plata),.45); }
.pantalla, .hero-v img, .pieza169 .clip, .dossier img, .lupa-video .lv-marco, .lupa-cred img { box-shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--plata),.22); }
.hj { box-shadow:0 0 0 1px rgba(var(--plata),.22); }
.car-card.reel.vim, .car-card.reel.hueco, .pieza169.hueco .clip, .pub-img, .cara-img, .cred-img, .quien-img, .qp-img, .logo-ficha, .storyboard img, .sb-pista img, .cred-video { border-color:rgba(var(--plata),.22); }
.logo-ficha:hover, .storyboard figure:hover img { border-color:rgba(var(--plata),.5); }
.car-minis .car-dot, body:has(.franja) .car-minis .car-dot, .car-logos .car-minis .car-dot { outline-color:rgba(var(--plata),.22); }
.car-minis .car-dot.on, body:has(.franja) .car-minis .car-dot.on, .car-logos .car-minis .car-dot.on { outline-color:rgba(var(--plata),.7); }
/* Créditos: menos verde. Marco del tablero, vídeo y botón de play en plata; el verde solo aparece al pasar el ratón */
.tablero { border-color:rgba(var(--plata),.16); background:linear-gradient(180deg, rgba(255,255,255,.015), transparent); box-shadow:none; }
.tablero-tit { color:rgba(var(--plata),.7); }
.caras-rejilla .cred-video { border-color:rgba(var(--plata),.22); }
.caras-rejilla .cred-video::after { border-color:rgba(var(--plata),.7); background-color:rgba(0,0,0,.35); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23ffffff'/%3E%3C/svg%3E"); }
.caras-rejilla .cred-video:hover::after { border-color:rgba(var(--v),.72); }
.caras-rejilla .cara.activa .cara-img { box-shadow:0 0 0 1px rgba(var(--plata),.7); }
.quien-pop { border-color:rgba(var(--plata),.28); }
.qp-nav { border-top-color:rgba(var(--plata),.14); }
/* Contacto: el nombre y el cargo llevan el verde de la marca */
.tarjeta .t-nombre { color:rgb(var(--v)); }
.tarjeta .t-cargo { color:rgba(var(--v),.72); }
.tarjeta .t-sep { background:linear-gradient(90deg, transparent, rgba(var(--v),.72), transparent); }
/* Contacto v2 de color: nombre en blanco, cargo en verde, detalles en plata */
.tarjeta .t-nombre { color:#fff; }
.tarjeta .t-cargo { color:rgba(var(--v),.85); }
.tarjeta .t-sep { background:linear-gradient(90deg, transparent, rgba(var(--plata),.8), transparent); }
.tarjeta .t-base { color:rgba(var(--plata),.62); }
.contactpage .tarjeta .tel { color:rgba(var(--plata),.8); }
.t-iconos a { border-color:rgba(var(--plata),.3); color:rgba(var(--plata),.85); }
/* ====== Perfil v3: una pantalla 16:9, negro con un leve toque de luz, cuatro capítulos ====== */
.pf-fondo { background:#050505; }
.pf-fondo .pf-luz { position:absolute; right:-18%; top:-40%; width:85%; height:120%; transform:rotate(14deg); filter:blur(40px);
  background:radial-gradient(ellipse 48% 40% at 45% 55%, rgba(255,255,255,.075), rgba(255,255,255,.025) 45%, transparent 72%); animation:respira 16s ease-in-out infinite alternate; }
.pf-fondo .pf-filo { position:absolute; left:0; right:0; top:31%; height:1px; background:linear-gradient(90deg, transparent 8%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.12) 62%, transparent 92%); filter:blur(.6px); }
.pf-fondo .pf-vin { position:absolute; inset:0; background:radial-gradient(ellipse 80% 75% at 55% 45%, transparent 45%, rgba(0,0,0,.7)); }
.pf-cab { padding:13vh 4vw 0; }
.pf-tabs { display:flex; gap:3.4vw; padding:0 0 1.8vh; border-bottom:1px solid rgba(var(--plata),.14); flex-wrap:wrap; }
.pf-tabs button { position:relative; display:flex; align-items:baseline; gap:.7em; padding:0; background:none; border:0; cursor:pointer;
  font:200 clamp(1.1rem,1.9vw,1.7rem) Jost,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.28); transition:color .4s; }
.pf-tabs button i { font:400 .62rem "Courier Prime",monospace; font-style:normal; letter-spacing:.2em; color:rgba(var(--plata),.4); transition:color .4s; }
.pf-tabs button:hover { color:rgba(255,255,255,.7); }
.pf-tabs button[aria-selected="true"] { color:#fff; }
.pf-tabs button[aria-selected="true"] i { color:rgba(var(--v),.85); }
.pf-tabs button[aria-selected="true"]::after { content:""; position:absolute; left:0; right:0; bottom:calc(-1.8vh - 1px); height:1px; background:rgba(var(--plata),.7); }
.pf-paneles .panel { height:100%; padding:5vh 4vw 3vh; box-sizing:border-box; overflow:hidden; }
.pf-anos { font:400 .66rem "Courier Prime",monospace; letter-spacing:.22em; text-transform:uppercase; color:rgba(var(--v),.72); }
.pf-etq { font:400 .62rem "Courier Prime",monospace; letter-spacing:.3em; text-transform:uppercase; color:rgba(var(--plata),.55); }
/* 01 Perfil: titular y texto a la izquierda, ficha técnica a la derecha */
.pf-perfil:not([hidden]) { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:7vw; align-items:center; }
.pf-titular { margin:0 0 4vh; font-weight:200; font-size:clamp(1.6rem,2.7vw,2.6rem); line-height:1.28; letter-spacing:.01em; color:#fff; }
.pf-texto p:not(.pf-titular) { max-width:58ch; margin:0 0 2vh; font-weight:300; font-size:clamp(.95rem,1.1vw,1.08rem); line-height:1.8; color:rgba(255,255,255,.66); }
.pf-ficha { margin:0; border-top:1px solid rgba(var(--plata),.14); }
.pf-ficha div { display:grid; grid-template-columns:8.5em 1fr; gap:1.4em; padding:2.1vh 0; border-bottom:1px solid rgba(var(--plata),.14); }
.pf-ficha dt { font:400 .64rem "Courier Prime",monospace; letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--plata),.55); padding-top:.3em; }
.pf-ficha dd { margin:0; font-weight:300; font-size:clamp(.95rem,1.05vw,1.05rem); letter-spacing:.04em; color:#fff; }
/* 02 Formación: dos títulos mayores como cartones y la lista menor */
.pf-formacion:not([hidden]) { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:6vw; align-items:center; }
.pf-mayores { display:grid; gap:6vh; }
.pf-mayores h3 { margin:1.2vh 0 1vh; font-weight:200; font-size:clamp(1.4rem,2.3vw,2.2rem); line-height:1.25; color:#fff; }
.pf-mayores p { margin:0; font-weight:300; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:rgba(var(--plata),.7); }
.pf-menores { list-style:none; margin:0; padding:0; border-left:1px solid rgba(var(--plata),.14); }
.pf-menores li { display:grid; gap:.5vh; padding:2.2vh 0 2.2vh 2.4vw; }
.pf-menores b { font-weight:300; font-size:clamp(.95rem,1.05vw,1.05rem); color:#fff; }
.pf-menores em { font-style:normal; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(var(--plata),.6); }
/* 03 Experiencia: «Ahora» arriba, seis áreas en rejilla y los clientes pasando como créditos */
.pf-experiencia:not([hidden]) { display:grid; grid-template-rows:auto 1fr auto; gap:3vh; padding-top:3.6vh; }
.pf-ahora { display:flex; align-items:baseline; gap:3vw; flex-wrap:wrap; }
.pf-ahora p { margin:0; font-weight:300; font-size:clamp(.95rem,1.1vw,1.1rem); color:rgba(255,255,255,.7); }
.pf-ahora b { font-weight:400; color:#fff; }
.pf-ahora .pf-anos { margin-left:.8em; }
.pf-areas { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:1fr 1fr; gap:2.4vh 2.6vw; min-height:0; }
.pf-areas article { display:flex; flex-direction:column; min-height:0; padding-top:1.6vh; border-top:1px solid rgba(var(--plata),.14); }
.pf-areas h3 { margin:.8vh 0 .8vh; font-weight:300; font-size:clamp(1rem,1.3vw,1.25rem); letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.pf-areas p { margin:0 0 1.2vh; font-weight:300; font-size:clamp(.8rem,.88vw,.92rem); line-height:1.6; color:rgba(255,255,255,.6); }
.pf-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:auto; }
.pf-thumbs figure { margin:0; aspect-ratio:16/9; overflow:hidden; background:#0b0b0b; box-shadow:0 0 0 1px rgba(var(--plata),.14); }
.pf-thumbs img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05) brightness(.85); transition:filter .5s; }
.pf-areas article:hover .pf-thumbs img { filter:none; }
.pf-clientes { overflow:hidden; border-top:1px solid rgba(var(--plata),.1); padding-top:1.4vh; -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pf-clientes div { display:flex; width:max-content; animation:creditos-h 70s linear infinite; }
.pf-clientes span { font:400 .66rem "Courier Prime",monospace; letter-spacing:.26em; text-transform:uppercase; color:rgba(var(--plata),.5); white-space:nowrap; }
@keyframes creditos-h { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .pf-clientes div { animation:none; } }
/* 04 Bio: la polaroid sola, como un objeto sobre la mesa */
.pf-bio:not([hidden]) { display:flex; align-items:center; justify-content:center; }
.pf-bio .polaroid2 { height:calc(min(52vh, 36vw) * 1.02); transform:rotate(-2.5deg); filter:drop-shadow(0 40px 60px rgba(0,0,0,.85)); }
.pf-areas { grid-template-rows:repeat(2, minmax(0,1fr)); }
.pf-areas article { overflow:hidden; }
.pf-thumbs figure { aspect-ratio:auto; height:min(9.5vh, 84px); }
/* Perfil: palos de la baraja en lugar de números; el palo activo en verde y un subrayado que vira de plata a verde */
.pf-tabs button i { font:400 .78em "Segoe UI Symbol","Apple Symbols","DejaVu Sans",serif; letter-spacing:0; color:rgba(var(--plata),.32); transform:translateY(-.08em); }
.pf-tabs button:hover i { color:rgba(var(--plata),.7); }
.pf-tabs button[aria-selected="true"] i { color:rgb(var(--v)); text-shadow:0 0 14px rgba(var(--v),.45); }
.pf-tabs button[aria-selected="true"]::after { background:linear-gradient(90deg, rgba(var(--v),.85), rgba(var(--plata),.5) 55%, transparent); }
/* Perfil: marcador vertical neutro y una estela que viaja entre pestañas con el X-wing al frente */
.pf-tabs { position:relative; }
.pf-tabs button { align-items:center; }
.pf-tabs button i.pf-marca { display:block; width:1px; height:.85em; background:rgba(var(--plata),.3); transform:none; text-shadow:none; transition:background .5s; }
.pf-tabs button:hover i.pf-marca { background:rgba(var(--plata),.6); }
.pf-tabs button[aria-selected="true"] i.pf-marca { background:rgba(var(--v),.72); text-shadow:none; }
.pf-tabs button[aria-selected="true"]::after { display:none; }
.pf-estela { position:absolute; bottom:-1px; height:1px; transition:left .9s cubic-bezier(.65,0,.25,1), width .9s cubic-bezier(.65,0,.25,1); }
.pf-estela[data-dir="ini"] { background:linear-gradient(90deg, rgba(var(--v),.72), rgba(var(--plata),.4) 60%, transparent); }
.pf-estela[data-dir="der"] { background:linear-gradient(90deg, transparent, rgba(var(--plata),.35) 35%, rgba(var(--v),.72)); }
.pf-estela[data-dir="izq"] { background:linear-gradient(270deg, transparent, rgba(var(--plata),.35) 35%, rgba(var(--v),.72)); }
.pf-nave { position:absolute; top:-6px; width:22px; height:13px; background:url(assets/film/xwing.svg) center / contain no-repeat; opacity:0; pointer-events:none; }
.pf-estela[data-dir="der"] .pf-nave { right:-24px; }
.pf-estela[data-dir="izq"] .pf-nave { left:-24px; transform:scaleX(-1); }
.pf-estela.vuela .pf-nave { animation:nave 1.4s ease-out; }
@keyframes nave { 0% { opacity:0; } 15% { opacity:.55; } 60% { opacity:.55; } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .pf-estela { transition:none; } .pf-estela.vuela .pf-nave { animation:none; } }
/* Perfil · pestaña Perfil: titular arriba; «no soy» / «sí soy» a la izquierda; huecos para reel y retrato */
.pf-perfil:not([hidden]) { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,.62fr); grid-template-rows:auto 1fr; gap:4.5vh 3.2vw; align-items:stretch; }
.pf-perfil .pf-titular { grid-column:1 / -1; margin:0; max-width:34ch; font-weight:200; font-size:clamp(1.5rem,2.6vw,2.5rem); line-height:1.25; color:#fff; }
.pf-soy { display:grid; grid-template-rows:auto 1fr; gap:3.6vh; align-content:start; }
.pf-soy ol { list-style:none; margin:1.4vh 0 0; padding:0; }
.pf-soy li { padding:.9vh 0; font-weight:300; font-size:clamp(.95rem,1.12vw,1.1rem); letter-spacing:.02em; border-bottom:1px solid rgba(var(--plata),.1); }
.pf-no li { color:rgba(255,255,255,.4); text-decoration:line-through; text-decoration-color:rgba(var(--plata),.45); text-decoration-thickness:1px; }
.pf-si li { position:relative; padding-left:1.1em; color:#fff; }
.pf-si li::before { content:""; position:absolute; left:0; top:50%; width:1px; height:.9em; transform:translateY(-50%); background:rgba(var(--v),.72); }
.pf-hueco { position:relative; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6vh; border:1px dashed rgba(var(--plata),.22); background:rgba(255,255,255,.015); }
.pf-hueco span { font:200 clamp(1rem,1.4vw,1.3rem) Jost,sans-serif; letter-spacing:.3em; text-transform:uppercase; color:rgba(var(--plata),.55); }
.pf-hueco small { font:400 .62rem "Courier Prime",monospace; letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--plata),.38); }
.pf-reel { align-self:start; aspect-ratio:16/9; }
.pf-foto { align-self:start; aspect-ratio:4/5; }
.pf-perfil:not([hidden]) { gap:3.6vh 3.2vw; padding-top:4vh; }
.pf-soy { gap:2.6vh; }
.pf-soy li { padding:.65vh 0; }
/* Perfil · pestaña Perfil v2: titular y «no soy» a la izquierda, reel a la derecha, los cinco «sí soy» como columnas de créditos abajo */
.pf-perfil:not([hidden]) { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:auto auto 1fr; gap:3.4vh 4vw; padding-top:4.5vh; }
.pf-perfil .pf-titular { grid-column:1; grid-row:1; max-width:30ch; font-size:clamp(1.45rem,2.4vw,2.35rem); }
.pf-perfil .pf-no { grid-column:1; grid-row:2; }
.pf-perfil .pf-reel { grid-column:2; grid-row:1 / span 2; align-self:center; width:100%; }
.pf-perfil .pf-si { grid-column:1 / -1; grid-row:3; align-self:end; padding-top:2.6vh; border-top:1px solid rgba(var(--plata),.14); }
.pf-perfil ol { list-style:none; margin:1.6vh 0 0; padding:0; display:grid; gap:2.4vw; }
.pf-perfil .pf-no ol { grid-template-columns:repeat(2, minmax(0,1fr)); }
.pf-perfil .pf-si ol { grid-template-columns:repeat(5, minmax(0,1fr)); }
.pf-perfil li { position:relative; padding:0 0 0 1em; border:0; }
.pf-perfil li::before { content:""; position:absolute; left:0; top:.35em; width:1px; height:.95em; }
.pf-perfil .pf-si li::before { background:rgba(var(--v),.72); }
.pf-perfil .pf-no li::before { background:rgba(var(--plata),.3); }
.pf-perfil li b { display:block; font-weight:300; font-size:clamp(.92rem,1.05vw,1.05rem); line-height:1.35; letter-spacing:.02em; color:#fff; }
.pf-perfil .pf-no li b { color:rgba(255,255,255,.42); text-decoration:line-through; text-decoration-color:rgba(var(--plata),.5); text-decoration-thickness:1px; }
.pf-exp { margin:.8vh 0 0; font-weight:300; font-size:clamp(.78rem,.85vw,.88rem); line-height:1.6; min-height:3.2em; color:rgba(255,255,255,.4); font-style:italic; }
.pf-perfil .pf-no li { text-decoration:none; color:inherit; padding-top:0; padding-bottom:0; border:0; }
/* Perfil · pestaña Perfil v3: composición de títulos de crédito. Todo centrado:
   titular → dos líneas de guion tachadas (lo que no soy) → botón de reel → bloque de créditos (lo que sí soy) */
.pf-perfil:not([hidden]) { display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; text-align:center; gap:0; padding:3vh 6vw 2vh; }
.pf-perfil .pf-titular { max-width:44ch; margin:0; font-weight:200; font-size:clamp(1.3rem,2.15vw,2.1rem); line-height:1.35; letter-spacing:.015em; color:#fff; }
.pf-guion { display:flex; gap:5vw; justify-content:center; }
.pf-guion p { margin:0; display:flex; flex-direction:column; gap:.6vh; }
.pf-guion s { font:400 clamp(.85rem,.95vw,.98rem) "Courier Prime",monospace; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.38); text-decoration-color:rgba(var(--plata),.55); text-decoration-thickness:1px; }
.pf-reel-btn { display:inline-flex; align-items:center; gap:1.1em; cursor:default; text-decoration:none; }
.pf-reel-btn i { position:relative; width:58px; height:58px; border-radius:50%; border:1px solid rgba(var(--plata),.4); }
.pf-reel-btn i::after { content:""; position:absolute; left:53%; top:50%; transform:translate(-50%,-50%); border-left:11px solid rgba(255,255,255,.85); border-top:7px solid transparent; border-bottom:7px solid transparent; }
.pf-reel-btn span { font:200 .95rem Jost,sans-serif; letter-spacing:.45em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.pf-billing { list-style:none; margin:0; padding:2.6vh 0 0; width:100%; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border-top:1px solid rgba(var(--plata),.12); }
.pf-billing li { padding:0 1.4vw; border-left:1px solid rgba(var(--plata),.12); display:flex; flex-direction:column; align-items:center; gap:1vh; }
.pf-billing li:first-child { border-left:0; }
.pf-billing b { font-weight:300; font-size:clamp(.72rem,.82vw,.86rem); letter-spacing:.3em; line-height:1.6; text-transform:uppercase; color:#fff; }
.pf-perfil .pf-exp { display:block; font-weight:300; font-size:clamp(.76rem,.82vw,.86rem); line-height:1.55; color:rgba(255,255,255,.5); font-style:normal; min-height:0; }
.pf-perfil .pf-exp:empty { display:none; }
/* Perfil · pestaña Perfil v4: créditos arriba como titular, reel a la izquierda y «no soy» a la derecha, la frase como subtítulo final */
.pf-perfil:not([hidden]) { display:grid; grid-template-rows:auto minmax(0,1fr) auto; justify-items:stretch; text-align:left; gap:3.4vh; padding:4.2vh 4vw 2.6vh; }
.pf-perfil .pf-billing { padding:0 0 2.6vh; border-top:0; border-bottom:1px solid rgba(var(--plata),.12); }
.pf-perfil .pf-billing b { font-size:clamp(.8rem,.95vw,1rem); }
.pf-medio { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:5vw; align-items:center; min-height:0; }
.pf-pantalla { position:relative; justify-content:center; width:100%; aspect-ratio:16/9; max-height:100%; justify-self:start;
  background:radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.04), transparent 70%), #070707; box-shadow:0 0 0 1px rgba(var(--plata),.16), 0 40px 80px -40px #000; }
.pf-medio .pf-guion { flex-direction:column; gap:3.4vh; justify-content:center; text-align:left; }
.pf-medio .pf-guion s { font-size:clamp(.95rem,1.15vw,1.15rem); }
.pf-subtitulo { justify-self:center; text-align:center; max-width:none; margin:0; font-weight:300 !important; font-size:clamp(.85rem,1vw,1rem) !important; letter-spacing:.04em !important; color:rgba(255,255,255,.72) !important; text-shadow:0 1px 2px #000; }
.pf-perfil:not([hidden]) { grid-template-columns:minmax(0,1fr); }
.pf-perfil > * { grid-column:1 !important; grid-row:auto !important; }
.pf-perfil .pf-billing { width:100%; }
.pf-pantalla { height:auto; max-height:44vh; width:auto; }
.pf-pantalla { display:flex; width:min(100%, calc(42vh * 16 / 9)); max-height:none; }
.pf-subtitulo { white-space:nowrap; max-width:none !important; font-size:clamp(.78rem,.95vw,1rem) !important; }
.pf-ir { color:inherit; border-bottom:1px solid rgba(var(--v),.5); transition:color .3s, border-color .3s; } .pf-ir:hover { color:#fff; border-color:rgba(var(--v),.9); }
/* Perfil: el reel con su fotograma, oscurecido; el play encima */
.pf-pantalla { cursor:pointer; overflow:hidden; }
.pf-pantalla .ph { position:absolute; inset:0; background-size:cover; background-position:center; filter:grayscale(.35) brightness(.42); transition:filter .6s, transform 1.2s var(--ease); }
.pf-pantalla:hover .ph { filter:grayscale(0) brightness(.6); transform:scale(1.02); }
.pf-pantalla i, .pf-pantalla span { position:relative; z-index:1; }
.pf-pantalla:hover i { border-color:rgba(var(--v),.72); }
.pf-pantalla .playbtn, .pf-pantalla .car-num { display:none; }
.pf-perfil .pf-pantalla .ph { filter:grayscale(.35) brightness(.42) !important; }
.pf-perfil .pf-pantalla:hover .ph { filter:grayscale(0) brightness(.62) !important; }
.pf-perfil .pf-pantalla i { width:64px; height:64px; background:rgba(0,0,0,.35); }
/* Perfil · pestaña Perfil v5: créditos arriba; reel con leyenda en cursiva a la izquierda; «no soy» con su párrafo a la derecha; todo en un 16:9 */
.pf-perfil:not([hidden]) { grid-template-rows:auto minmax(0,1fr); gap:3vh; padding:4vh 4vw 2.4vh; }
.pf-medio { align-items:center; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:4.5vw; }
.pf-reel-fig { margin:0; display:flex; flex-direction:column; gap:1.6vh; min-height:0; }
.pf-reel-fig .pf-pantalla { width:min(100%, calc(46vh * 16 / 9)); }
.pf-leyenda { font-weight:300; font-style:italic; font-size:clamp(.82rem,.92vw,.95rem); letter-spacing:.02em; line-height:1.5; color:rgba(255,255,255,.6); }
.pf-medio .pf-guion { display:flex; flex-direction:column; gap:4.5vh; }
.pf-medio .pf-guion > div { display:flex; flex-direction:column; gap:1.4vh; }
.pf-medio .pf-guion s { font-size:clamp(1rem,1.25vw,1.25rem); color:rgba(255,255,255,.5); }
.pf-medio .pf-exp { display:block !important; margin:0; font-style:normal; font-weight:300; font-size:clamp(.88rem,.98vw,1rem); line-height:1.7; color:rgba(255,255,255,.72); max-width:48ch; }
.pf-medio .pf-pend { color:rgba(var(--plata),.35); }
/* Perfil: puntos con la flecha doble de la web */
.pf-puntos { list-style:none; margin:0; padding:0; display:grid; gap:1.3vh; max-width:58ch; }
.pf-puntos li { display:grid; grid-template-columns:auto 1fr; gap:.9em; align-items:baseline; font-weight:300; font-size:clamp(.82rem,.92vw,.95rem); line-height:1.6; color:rgba(255,255,255,.75); }
.pf-flecha { width:14px; height:10px; fill:rgba(var(--v),.72); transform:translateY(1px); }
.pf-medio .pf-guion { gap:3.6vh; }
/* Formación: cada título mayor con su diploma al lado, como un documento sobre la mesa */
.pf-mayores { gap:4.5vh; }
.pf-titulo { display:grid; grid-template-columns:minmax(0,19vw) minmax(0,1fr); gap:2.6vw; align-items:center; }
.pf-diploma { margin:0; aspect-ratio:1.414; overflow:hidden; background:#0b0b0b; box-shadow:0 0 0 1px rgba(var(--plata),.18), 0 30px 60px -30px #000; }
.pf-diploma img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) brightness(.78) contrast(1.05); transition:filter .5s, transform .8s var(--ease); cursor:zoom-in; }
.pf-titulo:hover .pf-diploma img { filter:none; transform:scale(1.03); }
.pf-titulo h3 { margin:1vh 0 .8vh; font-size:clamp(1.15rem,1.8vw,1.7rem); }
/* Formación: los diplomas en su color original (los dos son de tonos amarillos y casan) */
.pf-diploma img { filter:none; }
/* Formación v2: columna derecha con conmutador y lista en dos columnas para que todo quepa en un 16:9 */
.pf-formacion:not([hidden]) { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:4vw; }
.pf-conmuta { display:flex; gap:2.2vw; margin:0 0 2.4vh; padding-left:2.4vw; }
.pf-conmuta button { background:none; border:0; padding:0 0 .8vh; cursor:pointer; font:inherit; font-weight:300; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--plata),.45); border-bottom:1px solid transparent; transition:color .3s, border-color .3s; }
.pf-conmuta button:hover { color:rgba(var(--plata),.85); }
.pf-conmuta button.on { color:#fff; border-bottom-color:rgba(var(--v),.72); }
.pf-lado .pf-menores { display:grid; grid-template-columns:1fr 1fr; column-gap:2vw; }
.pf-lado .pf-menores[hidden] { display:none; }
.pf-lado .pf-menores li { padding:1.6vh 0 1.6vh 2.4vw; align-content:start; }
/* Experiencia v2: Publicidad (con la infografía de productoras y clientes como protagonista) y Cine, series y documental;
   debajo, «Más experiencia» en cuatro columnas de texto */
.pf-experiencia:not([hidden]) { grid-template-rows:auto minmax(0,1fr) auto; gap:3.2vh; }
.pf-dos { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:3.4vw; min-height:0; }
.pf-dos article { display:flex; flex-direction:column; min-height:0; padding-top:1.6vh; border-top:1px solid rgba(var(--plata),.14); }
.pf-dos h3, .pf-mas h3 { margin:.8vh 0 .8vh; font-weight:300; font-size:clamp(1rem,1.3vw,1.25rem); letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.pf-dos p, .pf-mas p { margin:0 0 1.4vh; font-weight:300; font-size:clamp(.8rem,.88vw,.92rem); line-height:1.6; color:rgba(255,255,255,.6); }
.pf-info { margin:auto 0 0; min-height:0; }
.pf-info img { display:block; width:100%; max-height:42vh; object-fit:contain; object-position:left bottom; cursor:zoom-in; box-shadow:0 0 0 1px rgba(var(--plata),.18), 0 30px 60px -30px #000; }
.pf-cine .pf-thumbs { grid-template-columns:1fr; gap:1vh; }
.pf-cine .pf-thumbs figure { height:auto; aspect-ratio:16/9; max-height:11vh; }
.pf-cine .pf-thumbs { grid-template-columns:repeat(3,1fr); }
.pf-cine .pf-thumbs figure { max-height:none; }
.pf-mas { border-top:1px solid rgba(var(--plata),.1); padding-top:1.6vh; }
.pf-mas-rej { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.6vw; margin-top:.6vh; }
.pf-mas h3 { font-size:clamp(.85rem,1vw,1rem); }
.pf-mas p { font-size:clamp(.74rem,.8vw,.85rem); margin:0; }
.pf-dos { overflow:hidden; }
.pf-info { flex:1 1 0; min-height:0; margin:0; }
.pf-info img { width:100%; height:100%; max-height:none; object-fit:contain; object-position:left top; box-shadow:none; }
.pf-cine .pf-thumbs { margin-top:1vh; }
/* Publicidad: la infografía manda; el texto va a su derecha para que la imagen gane altura */
.pf-pub-cuerpo { flex:1 1 0; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,13vw); gap:2vw; align-items:start; margin-top:.6vh; }
.pf-pub-cuerpo .pf-info { height:100%; }
.pf-pub-cuerpo p { margin:0; }
.pf-experiencia:not([hidden]) { gap:2.6vh; }
.pf-pub-cuerpo { grid-template-columns:auto minmax(0,1fr); grid-template-rows:100%; }
.pf-pub-cuerpo .pf-info img { width:auto; height:100%; max-width:100%; }
/* Experiencia v3: conmutador como en Formación — «Publicidad y cine» / «Más experiencia» ocupan el mismo hueco */
.pf-experiencia:not([hidden]) { grid-template-rows:auto auto minmax(0,1fr); gap:2.4vh; }
.pf-conmuta-exp { padding-left:0; margin:0; }
.pf-vistas { min-height:0; display:grid; }
.pf-vistas > [hidden] { display:none !important; }
.pf-mas { border-top:0; padding-top:0; min-height:0; }
.pf-mas-rej { height:100%; margin:0; }
.pf-mas-rej article { display:flex; flex-direction:column; min-height:0; padding-top:1.6vh; border-top:1px solid rgba(var(--plata),.14); }
.pf-mas h3 { font-size:clamp(1rem,1.3vw,1.25rem); }
.pf-mas p { font-size:clamp(.8rem,.88vw,.92rem); margin:0 0 1.4vh; }
.pf-mas .pf-thumbs { grid-template-columns:1fr; gap:1vh; margin-top:auto; }
.pf-mas .pf-thumbs figure { height:auto; aspect-ratio:16/9; }
.pf-pub-cuerpo { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:1.4vh; }
.pf-pub-cuerpo p { order:-1; }
/* Experiencia v4: seis pestañas internas; cada vista = texto a la izquierda y material a la derecha */
.pf-conmuta-exp { flex-wrap:wrap; row-gap:1vh; }
.pf-vista { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.1fr); gap:3.4vw; min-height:0; padding-top:2.4vh; border-top:1px solid rgba(var(--plata),.14); }
.pf-vista[hidden] { display:none !important; }
.pf-vista:not(:has(> :nth-child(2))) { grid-template-columns:minmax(0,1fr); max-width:46vw; }
.pf-vtxt h3 { margin:.8vh 0 1.2vh; font-weight:200; font-size:clamp(1.4rem,2.3vw,2.2rem); line-height:1.2; color:#fff; letter-spacing:0; text-transform:none; }
.pf-vtxt p { margin:0 0 1.4vh; font-weight:300; font-size:clamp(.88rem,1vw,1rem); line-height:1.7; color:rgba(255,255,255,.65); }
.pf-vista .pf-thumbs { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1vw; margin:0; align-self:start; }
.pf-vista .pf-thumbs figure { height:auto; aspect-ratio:16/9; }
.pf-vista:hover .pf-thumbs img { filter:none; }
.pf-vista .pf-info { margin:0; min-height:0; height:100%; }
.pf-vista .pf-info img { width:100%; height:100%; object-fit:contain; object-position:left top; }
/* Storyboard: la viñeta ampliada crece hacia dentro (las de los bordes no se salen del 16:9) */
.storyboard figure:nth-child(4n+1) img { transform-origin:0 50%; }
.storyboard figure:nth-child(4n) img { transform-origin:100% 50%; }
.storyboard figure:nth-child(5) img { transform-origin:0 100%; }
.storyboard figure:nth-child(6) img, .storyboard figure:nth-child(7) img { transform-origin:50% 100%; }
.storyboard figure:nth-child(8) img { transform-origin:100% 100%; }
.storyboard figure:nth-child(1) img { transform-origin:0 0; }
.storyboard figure:nth-child(2) img, .storyboard figure:nth-child(3) img { transform-origin:50% 0; }
.storyboard figure:nth-child(4) img { transform-origin:100% 0; }
/* Servicios: llamada a la acción común a las tres pestañas, abajo a la derecha (teléfono, correo, WhatsApp, LinkedIn) */
.serv { position:relative; }
.serv-contacto { position:absolute; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:1.6vw; padding:1.4vh 0 0 1.6vw; }
.serv-contacto .sc-tit { font:400 .66rem "Courier Prime",monospace; letter-spacing:.3em; text-transform:uppercase; color:rgba(var(--v),.72); }
.serv-contacto .sc-tel { font-weight:300; font-size:clamp(1rem,1.25vw,1.25rem); letter-spacing:.08em; color:#fff; text-decoration:none; white-space:nowrap; }
.serv-contacto .sc-tel:hover { color:rgba(var(--v),.72); }
.serv-contacto .t-iconos { margin:0; gap:14px; }
.serv-contacto { right:4vw; bottom:4vh; }
/* Servicios · Realización: miniaturas del portfolio enlazadas a cada ficha */
.serv-thumbs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2vw; margin-top:3.4vh; max-width:62vw; }
.serv-thumbs a { display:block; text-decoration:none; }
.serv-thumbs img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid rgba(var(--plata),.22); filter:saturate(.85) brightness(.85); transition:filter .5s, transform .5s var(--ease); }
.serv-thumbs a:hover img { filter:none; transform:translateY(-3px); }
.serv-thumbs span { display:block; margin-top:8px; font:10px/1.4 "Courier Prime",monospace; letter-spacing:.04em; color:rgba(209,209,209,.6); }
.serv-thumbs a:hover span { color:#fff; }
/* Realización: dos filas de fotogramas de mi cámara, sin enlaces (no sacan de Servicios) */
.serv-thumbs { margin-top:3vh; gap:1.6vh 1vw; }
.serv-thumbs figure { margin:0; }
.serv-thumbs img { cursor:default; }
.serv-thumbs figure:hover img { filter:none; }
.serv-thumbs figcaption { margin-top:6px; font:10px/1.4 "Courier Prime",monospace; letter-spacing:.04em; color:rgba(209,209,209,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.sc-tit { text-decoration:none; border-bottom:1px solid rgba(var(--v),.42); padding-bottom:3px; }
a.sc-tit:hover { color:#fff; }
.serv-thumbs { max-width:54vw; margin-top:2.6vh; }
/* Subpestañas (Formación y Experiencia) con la misma gramática que las pestañas principales: marcador vertical,
   línea de base y estela con el X-wing que viaja a la elegida */
.pf-conmuta { position:relative; display:flex; flex-wrap:wrap; gap:1.2vh 2.8vw; margin:0 0 2.4vh; padding:0 0 1.4vh; border-bottom:1px solid rgba(var(--plata),.14); }
.pf-conmuta button { display:flex; align-items:center; gap:.7em; padding:0; border:0; font-weight:300; font-size:clamp(.8rem,.95vw,.95rem); letter-spacing:.2em; color:rgba(var(--plata),.55); }
.pf-conmuta button:hover { color:rgba(255,255,255,.85); }
.pf-conmuta button.on { color:#fff; border:0; }
.pf-conmuta i.pf-marca { display:block; width:1px; height:.95em; background:rgba(var(--plata),.3); transition:background .5s; }
.pf-conmuta button:hover i.pf-marca { background:rgba(var(--plata),.6); }
.pf-conmuta button.on i.pf-marca { background:rgba(var(--v),.72); }
.pf-conmuta .pf-estela { bottom:-1px; }
.pf-conmuta-exp { margin:0; }
.pf-vista { border-top:0; }
.pf-conmuta { flex-wrap:nowrap; gap:2.2vw; } .pf-conmuta button { letter-spacing:.14em; font-size:clamp(.74rem,.86vw,.9rem); white-space:nowrap; }
/* Subpestañas en vertical: columna a la izquierda con raíl fino; la estela baja o sube con el X-wing apuntando hacia donde va */
.pf-conmuta.vert { flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:2.6vh; margin:0; padding:.4vh 0 .4vh 1.4vw; border-bottom:0; border-left:1px solid rgba(var(--plata),.14); align-self:start; }
.pf-conmuta.vert button { white-space:normal; text-align:left; line-height:1.35; align-items:baseline; }
.pf-conmuta.vert i.pf-marca { display:none; }
.pf-conmuta.vert .pf-estela { left:-1px; bottom:auto; width:1px; transition:top .9s cubic-bezier(.65,0,.25,1), height .9s cubic-bezier(.65,0,.25,1); }
.pf-conmuta.vert .pf-estela[data-dir="ini"] { background:linear-gradient(180deg, rgba(var(--v),.72), rgba(var(--plata),.4) 60%, transparent); }
.pf-conmuta.vert .pf-estela[data-dir="der"] { background:linear-gradient(180deg, transparent, rgba(var(--plata),.35) 35%, rgba(var(--v),.72)); }
.pf-conmuta.vert .pf-estela[data-dir="izq"] { background:linear-gradient(0deg, transparent, rgba(var(--plata),.35) 35%, rgba(var(--v),.72)); }
.pf-conmuta.vert .pf-nave { left:-11px; right:auto; top:auto; }
.pf-conmuta.vert .pf-estela[data-dir="der"] .pf-nave { bottom:-20px; left:-11px; right:auto; transform:rotate(90deg); }
.pf-conmuta.vert .pf-estela[data-dir="izq"] .pf-nave { top:-20px; left:-11px; transform:rotate(-90deg); }
/* Experiencia: subpestañas a la izquierda, la vista a la derecha */
.pf-experiencia:not([hidden]) { grid-template-columns:minmax(0,15vw) minmax(0,1fr); grid-template-rows:minmax(0,1fr); column-gap:3.4vw; }
.pf-experiencia .pf-vista { padding-top:0; }
/* Formación: en la columna derecha, subpestañas a la izquierda y la lista a la derecha */
.pf-lado { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:2.4vw; align-items:start; }
.pf-lado .pf-conmuta.vert { max-width:11vw; }
.pf-lado .pf-menores { border-left:0; }
.pf-lado .pf-menores li { padding-left:0; padding-top:0; padding-bottom:3vh; }
/* Subpestañas verticales más grandes, repartidas a lo alto del panel */
.pf-conmuta.vert { align-self:stretch; justify-content:space-between; gap:0; padding:1vh 0 1vh 1.6vw; }
.pf-conmuta.vert button { font-weight:200; font-size:clamp(1.05rem,1.45vw,1.45rem); letter-spacing:.06em; text-transform:none; }
.pf-experiencia:not([hidden]) { grid-template-columns:minmax(0,21vw) minmax(0,1fr); }
.pf-experiencia .pf-conmuta.vert { max-height:62vh; }
.pf-lado { align-items:stretch; }
.pf-lado .pf-conmuta.vert { max-width:14vw; justify-content:flex-start; gap:4vh; }
/* Experiencia: cada vista ocupa todo el alto — texto arriba, imágenes grandes debajo */
.pf-experiencia .pf-vista { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:3vh; max-width:none; height:100%; }
.pf-experiencia .pf-vtxt p { max-width:70ch; }
.pf-experiencia .pf-vista .pf-thumbs { gap:1.4vw; align-self:start; }
.pf-experiencia .pf-vista .pf-info img { object-position:left top; }
/* Subpestañas verticales como línea de tiempo: raíl verde con un hito por categoría (como el proceso de B2B, en vertical) */
.pf-conmuta.vert { border-left-color:rgba(var(--v),.42); padding-left:calc(1.6vw + 6px); }
.pf-conmuta.vert button { position:relative; }
.pf-conmuta.vert i.pf-marca { display:block; position:absolute; left:calc(-1.6vw - 6px - 8px); top:.32em; width:15px; height:15px; border-radius:50%; border:1px solid rgba(var(--v),.72); background:#0b0a08; z-index:2; transition:box-shadow .5s, border-color .5s; }
.pf-conmuta.vert i.pf-marca::after { content:""; position:absolute; inset:4px; border-radius:50%; background:rgb(var(--v)); transform:scale(0); transition:transform .45s cubic-bezier(.3,1.4,.5,1); }
.pf-conmuta.vert button:hover i.pf-marca { background:#0b0a08; border-color:#b8b8b8; }
.pf-conmuta.vert button.on i.pf-marca { background:#0b0a08; box-shadow:0 0 0 5px rgba(var(--v),.14), 0 0 18px rgba(var(--v),.35); }
.pf-conmuta.vert button.on i.pf-marca::after, .pf-conmuta.vert button:hover i.pf-marca::after { transform:scale(1); }
.pf-conmuta.vert .pf-estela { z-index:1; }
/* Formación: vuelve el conmutador pequeño de antes (encima de la lista, en mayúsculas, subrayado verde) */
.pf-lado { display:block; }
.pf-sw { display:flex; gap:2.2vw; margin:0 0 2.4vh; padding-left:2.4vw; }
.pf-sw button { background:none; border:0; padding:0 0 .8vh; cursor:pointer; font:inherit; font-weight:300; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--plata),.45); border-bottom:1px solid transparent; transition:color .3s, border-color .3s; }
.pf-sw button:hover { color:rgba(var(--plata),.85); }
.pf-sw button.on { color:#fff; border-bottom-color:rgba(var(--v),.72); }
.pf-lado .pf-menores { border-left:1px solid rgba(var(--plata),.14); }
.pf-lado .pf-menores li { padding:1.6vh 0 1.6vh 2.4vw; }
/* Experiencia v5: menú interno como claqueta de áreas — cada área es una tarjeta con su fotograma de fondo
   (apagado en reposo, encendido en la elegida); etiqueta «Áreas» arriba. Imágenes de la vista a tamaño pequeño. */
.pf-conmuta-exp.vert { justify-content:flex-start; gap:1.2vh; max-height:none; }
.pf-areas-etq { font:400 .66rem "Courier Prime",monospace; letter-spacing:.3em; text-transform:uppercase; color:rgba(var(--v),.72); margin:0 0 .8vh; }
.pf-conmuta-exp.vert button { width:100%; isolation:isolate; padding:2.1vh 1.2vw; align-items:center; font-size:clamp(1rem,1.3vw,1.3rem); color:rgba(255,255,255,.62); border:1px solid rgba(var(--plata),.1); background:#070707; overflow:visible; transition:color .4s, border-color .4s; }
.pf-conmuta-exp.vert button::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(5,5,5,.92) 15%, rgba(5,5,5,.35)), var(--fondo, none) center / cover no-repeat; opacity:.35; filter:grayscale(1) brightness(.8); transition:opacity .6s, filter .6s; }
.pf-conmuta-exp.vert button:hover { color:#fff; border-color:rgba(var(--plata),.3); }
.pf-conmuta-exp.vert button:hover::before { opacity:.7; }
.pf-conmuta-exp.vert button.on { color:#fff; border-color:rgba(var(--plata),.45); box-shadow:0 18px 40px -22px #000; }
.pf-conmuta-exp.vert button.on::before { opacity:1; filter:grayscale(.2) brightness(.9); }
.pf-conmuta-exp.vert i.pf-marca { top:50%; margin-top:-8px; }
/* imágenes de cada vista a tamaño pequeño */
.pf-experiencia .pf-vista { grid-template-rows:auto auto; align-content:start; }
.pf-experiencia .pf-vista .pf-thumbs { max-width:46vw; }
.pf-experiencia .pf-vista .pf-info { height:auto; max-width:46vw; }
.pf-experiencia .pf-vista .pf-info img { height:auto; }
/* Experiencia: tarjetas del menú sin fotograma — chaflán en dos esquinas, filo plateado y velo turquesa,
   en la familia de los botones de cristal de la web */
.pf-conmuta-exp.vert button { --ch:14px; border:0; background:none; box-shadow:none; }
.pf-conmuta-exp.vert button::before, .pf-conmuta-exp.vert button::after { content:""; position:absolute; z-index:-1; clip-path:polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch)); transition:background .6s, opacity .6s; filter:none; opacity:1; }
.pf-conmuta-exp.vert button::before { inset:0; background:linear-gradient(135deg, rgba(var(--plata),.28), rgba(var(--plata),.08) 45%, rgba(var(--plata),.22)); }
.pf-conmuta-exp.vert button::after { inset:1px; clip-path:polygon(calc(var(--ch) - .5px) 0, 100% 0, 100% calc(100% - var(--ch) + .5px), calc(100% - var(--ch) + .5px) 100%, 0 100%, 0 calc(var(--ch) - .5px));
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%) -200% 0 / 250% 100% no-repeat, linear-gradient(135deg, rgba(var(--v),.05), #090909 55%); }
.pf-conmuta-exp.vert button:hover::before { background:linear-gradient(135deg, rgba(var(--plata),.55), rgba(var(--plata),.14) 45%, rgba(var(--plata),.4)); }
.pf-conmuta-exp.vert button:hover::after { background-position:120% 0, 0 0; transition:background-position 1s; }
.pf-conmuta-exp.vert button.on::before { background:linear-gradient(135deg, rgba(var(--v),.85), rgba(var(--plata),.3) 50%, rgba(var(--v),.5)); }
.pf-conmuta-exp.vert button.on::after { background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%) -200% 0 / 250% 100% no-repeat, linear-gradient(135deg, rgba(var(--v),.2), rgba(var(--v),.04) 50%, #090909); }
.pf-conmuta-exp.vert button.on::after { background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%) -200% 0 / 250% 100% no-repeat, linear-gradient(135deg, rgba(var(--v),.11), rgba(var(--v),.02) 50%, #090909); }
/* Experiencia: menú en mayúsculas; la tarjeta elegida, más oscura (filo y velo turquesa apagados) */
.pf-conmuta-exp.vert button { text-transform:uppercase; letter-spacing:.16em; font-weight:300; font-size:clamp(.82rem,1vw,1rem); }
.pf-conmuta-exp.vert button.on::before { background:linear-gradient(135deg, rgba(var(--v),.5), rgba(var(--plata),.16) 50%, rgba(var(--v),.28)); }
.pf-conmuta-exp.vert button.on::after { background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.05) 45%, transparent 60%) -200% 0 / 250% 100% no-repeat, linear-gradient(135deg, rgba(var(--v),.06), #080808 45%); }
.pf-conmuta-exp.vert button:hover::before { background:linear-gradient(135deg, rgba(var(--plata),.4), rgba(var(--plata),.1) 45%, rgba(var(--plata),.28)); }
/* Experiencia: las tarjetas no se cierran por la derecha — se difuminan hasta desvanecerse; solo chaflán arriba a la izquierda */
.pf-conmuta-exp.vert button::before, .pf-conmuta-exp.vert button::after { clip-path:polygon(var(--ch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ch));
  -webkit-mask-image:linear-gradient(90deg, #000 35%, transparent 96%); mask-image:linear-gradient(90deg, #000 35%, transparent 96%); }
.pf-conmuta-exp.vert button::after { clip-path:polygon(calc(var(--ch) - .5px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--ch) - .5px)); }
.pf-conmuta-exp.vert button::after, .pf-conmuta-exp.vert button:hover::after { background:linear-gradient(180deg, #0b0b0b, #060606); }
.pf-conmuta-exp.vert button.on::after { background:linear-gradient(135deg, rgba(var(--v),.07), #070707 55%); }
/* Televisión: diez cabeceras en dos filas de cinco */
.pf-experiencia .pf-vista .pf-thumbs.pf-tv { grid-template-columns:repeat(5,minmax(0,1fr)); max-width:62vw; gap:1vw; }
.pf-thumbs.pf-tv img { filter:saturate(.8) brightness(.85); }
.pf-thumbs.pf-tv figure:hover img { filter:none; }
/* X-wing de las pestañas: más visible al volar */
.pf-nave { width:28px; height:16px; top:-8px; }
@keyframes nave { 0% { opacity:0; } 12% { opacity:1; } 70% { opacity:1; } 100% { opacity:0; } }
/* Perfil: reel y texto como un bloque centrado (el reel ya no se queda pegado a la izquierda con hueco a su derecha) */
.pf-medio { grid-template-columns:auto minmax(0,52ch); justify-content:center; column-gap:4.5vw; }
.pf-reel-fig .pf-pantalla { width:min(calc(46vh * 16 / 9), 50vw); }
/* Perfil v6: el reel a la izquierda del margen y el texto ocupando el resto, con la misma altura que el reel.
   Titulares de los «no soy» como rótulos (Jost fina, mayúsculas, tachado plateado) con filete debajo; puntos más legibles */
.pf-medio { grid-template-columns:auto minmax(0,1fr); justify-content:stretch; align-items:stretch; column-gap:4vw; }
.pf-medio .pf-guion { justify-content:space-between; gap:0; padding:.4vh 0; }
.pf-medio .pf-guion > div { gap:1.8vh; }
.pf-medio .pf-guion s { font:200 clamp(1.15rem,1.55vw,1.6rem) "Jost",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  text-decoration:line-through; text-decoration-color:rgba(var(--plata),.6); text-decoration-thickness:1px;
  padding-bottom:1.4vh; border-bottom:1px solid rgba(var(--plata),.14); }
.pf-medio .pf-puntos { max-width:none; gap:1.6vh; }
.pf-medio .pf-puntos li { font-size:clamp(.88rem,1vw,1.02rem); line-height:1.65; color:rgba(255,255,255,.78); }
/* Perfil: los dos «no soy» seguidos arriba; abajo, párrafo de venta como cierre */
.pf-medio .pf-guion { justify-content:flex-start; gap:3.2vh; }
.pf-venta { margin:auto 0 0; padding-top:2vh; border-top:1px solid rgba(var(--plata),.14); font-weight:200; font-size:clamp(1.05rem,1.35vw,1.4rem); line-height:1.5; color:#fff; }
.pf-venta a { color:rgba(var(--v),.85); text-decoration:none; border-bottom:1px solid rgba(var(--v),.42); }
.pf-venta a:hover { color:#fff; }
/* Perfil: el párrafo de venta como cierre a todo lo ancho, debajo del reel y del texto */
.pf-perfil:not([hidden]) { grid-template-rows:auto minmax(0,1fr) auto; gap:2.8vh; }
.pf-venta { margin:0; padding-top:2.2vh; text-align:center; font-size:clamp(1.05rem,1.4vw,1.45rem); }
.pf-reel-fig .pf-pantalla { width:min(calc(40vh * 16 / 9), 50vw); }
.pf-medio .pf-guion { gap:2.6vh; }
/* Perfil: cierre con el párrafo de venta a la izquierda y la ficha de contacto de Servicios a la derecha */
.pf-cierre { display:flex; align-items:center; justify-content:space-between; gap:3vw; padding-top:2.2vh; border-top:1px solid rgba(var(--plata),.14); }
.pf-cierre .pf-venta { padding:0; border:0; text-align:left; max-width:62ch; font-size:clamp(1rem,1.25vw,1.3rem); }
.pf-cierre .serv-contacto { position:static; padding:0; flex:none; }
/* Perfil: la ficha de contacto, a la derecha justo encima de la franja final; la franja, para el texto de venta a lo ancho */
.pf-perfil:not([hidden]) { grid-template-rows:auto minmax(0,1fr) auto auto; gap:2.2vh; }
.pf-perfil > .serv-contacto { position:static; justify-self:end; padding:0; }
.pf-cierre { display:block; }
.pf-cierre .pf-venta { max-width:none; text-align:left; }
.pf-reel-fig .pf-pantalla { width:min(calc(37vh * 16 / 9), 50vw); }
.pf-medio .pf-guion { gap:2vh; }
.pf-medio .pf-guion > div { gap:1.2vh; }
.pf-medio .pf-guion s { font-size:clamp(1.05rem,1.3vw,1.35rem); padding-bottom:1vh; }
.pf-medio .pf-puntos { gap:1vh; }
.pf-medio .pf-puntos li { font-size:clamp(.84rem,.92vw,.95rem); line-height:1.55; }
.pf-cierre { padding-top:1.8vh; }
.pf-cierre .pf-venta { font-size:clamp(.98rem,1.15vw,1.2rem); }
/* Perfil v7: la ficha de contacto dentro de la columna de texto, con su base alineada con la del reel */
.pf-perfil:not([hidden]) { grid-template-rows:auto minmax(0,1fr) auto; }
.pf-medio .pf-guion .serv-contacto { position:static; margin-top:auto; align-self:flex-end; padding:0; }
.pf-reel-fig .pf-pantalla { width:min(calc(43vh * 16 / 9), 50vw); }
/* Cierre: frase en cursiva y centrada, con filete plateado que se desvanece en los extremos, un rombo turquesa en el centro
   y una luz suave detrás (como los detalles de Contacto) */
.pf-cierre { position:relative; border-top:0; padding-top:2.6vh; text-align:center; }
.pf-cierre::before { content:""; position:absolute; left:8%; right:8%; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(var(--plata),.45) 30%, rgba(var(--plata),.45) 70%, transparent); }
.pf-cierre::after { content:""; position:absolute; left:50%; top:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; transform:rotate(45deg); background:#080808; border:1px solid rgba(var(--v),.72); box-shadow:0 0 12px rgba(var(--v),.35); }
.pf-cierre .pf-venta { position:relative; display:inline-block; text-align:center; font-style:italic; font-weight:200; color:rgba(255,255,255,.9); max-width:92ch; }
.pf-cierre .pf-venta::before { content:""; position:absolute; inset:-3vh -6vw; z-index:-1; pointer-events:none; background:radial-gradient(50% 60% at 50% 40%, rgba(var(--plata),.06), transparent 70%); }
.pf-medio .pf-guion > .serv-contacto { flex-direction:row; align-items:center; gap:1.6vw; }
.pf-reel-fig .pf-pantalla { width:min(calc(42vh * 16 / 9), 50vw); }
.pf-perfil:not([hidden]) { gap:1.8vh; }
.pf-perfil .pf-billing { padding-bottom:1.8vh; }
.pf-medio .pf-guion { padding:0; }
.pf-reel-fig .pf-pantalla { width:min(calc(43vh * 16 / 9), 50vw); }
/* Perfil: «No soy una línea recta» baja (reparte el hueco con la ficha de contacto); filete solo bajo el rótulo */
.pf-medio .pf-guion > div:nth-child(2) { margin-top:auto; }
.pf-medio .pf-guion s { align-self:flex-start; }
.pf-medio .pf-guion .serv-contacto { margin-top:1vh; }
.pf-medio .pf-guion { gap:0; } .pf-medio .pf-guion .serv-contacto { margin-top:.9vh; }
/* Perfil: los tres bloques de la columna (filmmaker, línea recta, contacto) con el mismo hueco entre ellos */
.pf-medio .pf-guion { justify-content:space-between; gap:0; }
.pf-medio .pf-guion > div:nth-child(2), .pf-medio .pf-guion .serv-contacto { margin-top:0; }
/* ====== Perfil v8: cabecera de la home (nombre, luz, motas, cita, Osa Mayor) arriba; pestañas y paneles debajo,
   más pequeños y compactos para caber en el lienzo que queda ====== */
body:has(.pf-paneles) .pf-cab { padding:1.2vh 4vw 0; }
body:has(.pf-paneles) .pf-tabs { padding-bottom:1.2vh; gap:2.6vw; }
body:has(.pf-paneles) .pf-tabs button { font-size:clamp(.85rem,1.2vw,1.1rem); letter-spacing:.24em; }
body:has(.pf-paneles) .pf-paneles { flex:1 1 auto; min-height:0; }
body:has(.pf-paneles) .pf-paneles .panel { padding:2.4vh 4vw 1.4vh; }
/* Perfil */
body:has(.pf-paneles) .pf-perfil:not([hidden]) { padding:2.2vh 4vw 1.2vh; gap:1.8vh; }
body:has(.pf-paneles) .pf-perfil .pf-billing { padding-bottom:1.4vh; }
body:has(.pf-paneles) .pf-perfil .pf-billing b { font-size:clamp(.66rem,.74vw,.78rem); }
body:has(.pf-paneles) .pf-reel-fig .pf-pantalla { width:min(calc(30vh * 16 / 9), 44vw); }
body:has(.pf-paneles) .pf-medio .pf-guion s { font-size:clamp(.9rem,1.05vw,1.1rem); padding-bottom:.7vh; }
body:has(.pf-paneles) .pf-medio .pf-guion > div { gap:.9vh; }
body:has(.pf-paneles) .pf-medio .pf-puntos { gap:.6vh; }
body:has(.pf-paneles) .pf-medio .pf-puntos li { font-size:clamp(.76rem,.82vw,.86rem); line-height:1.5; }
body:has(.pf-paneles) .pf-cierre { padding-top:1.6vh; }
body:has(.pf-paneles) .pf-cierre .pf-venta { font-size:clamp(.86rem,.98vw,1.02rem); }
/* Formación */
body:has(.pf-paneles) .pf-titulo { grid-template-columns:minmax(0,13vw) minmax(0,1fr); }
body:has(.pf-paneles) .pf-mayores { gap:3vh; }
body:has(.pf-paneles) .pf-titulo h3 { font-size:clamp(1rem,1.4vw,1.35rem); }
body:has(.pf-paneles) .pf-lado .pf-menores li { padding:1.1vh 0 1.1vh 2vw; }
/* Experiencia */
body:has(.pf-paneles) .pf-conmuta-exp.vert { gap:.8vh; }
body:has(.pf-paneles) .pf-conmuta-exp.vert button { padding:1.3vh 1.1vw; font-size:clamp(.72rem,.82vw,.86rem); }
body:has(.pf-paneles) .pf-vtxt h3 { font-size:clamp(1.15rem,1.7vw,1.6rem); margin:.6vh 0 .8vh; }
body:has(.pf-paneles) .pf-vtxt p { font-size:clamp(.8rem,.88vw,.92rem); }
body:has(.pf-paneles) .pf-experiencia .pf-vista { gap:2vh; }
body:has(.pf-paneles) .pf-experiencia .pf-vista .pf-thumbs { max-width:40vw; }
body:has(.pf-paneles) .pf-experiencia .pf-vista .pf-thumbs.pf-tv { max-width:52vw; }
body:has(.pf-paneles) .pf-experiencia .pf-vista .pf-info { max-width:36vw; }
/* Bio */
body:has(.pf-paneles) .paneles .panel-bio .polaroid2, body:has(.pf-paneles) .pf-bio .polaroid2 { height:min(40vh, 30vw); }
/* Perfil: de la portada solo la franja superior; fuera la regla, las rayas y el X-wing de abajo (pisaban los paneles) */
body:has(.pf-paneles) .visor .regla, body:has(.pf-paneles) .visor .rayas, body:has(.pf-paneles) .visor .reg, body:has(.pf-paneles) .visor .xwing { display:none; }
/* Perfil: los cinco «sí soy» como línea de créditos (texto corrido con puntos), no como botones */
body:has(.pf-paneles) .pf-perfil .pf-billing { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:0; border-bottom:0; padding:0 0 .4vh; }
body:has(.pf-paneles) .pf-perfil .pf-billing li { display:inline; border:0; padding:0; }
body:has(.pf-paneles) .pf-perfil .pf-billing li + li::before { content:"·"; margin:0 1.4em; color:rgba(var(--v),.72); font-weight:400; }
body:has(.pf-paneles) .pf-perfil .pf-billing b { display:inline; font-weight:200; font-size:clamp(.78rem,.92vw,.96rem); letter-spacing:.32em; color:rgba(255,255,255,.82); cursor:default; }
body:has(.pf-paneles) .pf-perfil .pf-billing .pf-exp { display:none; }
body:has(.pf-paneles) .pf-perfil .pf-billing li + li::before { display:inline; position:static; width:auto; height:auto; background:none; border:0; }
/* Cita: Yoda esquemático (trazo blanco, muy tenue) a la izquierda del texto */
.visor.portada .cita::before { content:""; position:absolute; right:calc(100% + 14px); top:50%; width:56px; height:38px; transform:translateY(-50%);
  background:url(assets/film/yoda.png) center / contain no-repeat; opacity:.3; pointer-events:none; }
/* Perfil v9: reel y texto a partes iguales (dos columnas de la misma anchura y la misma altura);
   el reel llena su mitad en 16:9 y el texto reparte sus tres bloques a lo alto */
body:has(.pf-paneles) .pf-medio { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:4vw; align-items:stretch; justify-content:stretch; }
body:has(.pf-paneles) .pf-reel-fig { justify-content:center; }
body:has(.pf-paneles) .pf-reel-fig .pf-pantalla { width:100%; max-width:calc(44vh * 16 / 9); aspect-ratio:16/9; height:auto; }
body:has(.pf-paneles) .pf-medio .pf-guion { justify-content:space-between; }
/* Yoda a la derecha de la cita, con un halo de luz suave y los bordes fundidos */
.visor.portada .cita::before { right:auto; left:calc(100% + 16px); width:60px; height:40px; opacity:.32;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.35)) drop-shadow(0 0 14px rgba(var(--plata),.18));
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 45%, #000 45%, transparent 100%); mask-image:radial-gradient(ellipse 62% 70% at 50% 45%, #000 45%, transparent 100%); }
.visor.portada .cita::after { content:""; position:absolute; left:calc(100% + 2px); top:50%; width:88px; height:70px; transform:translateY(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--plata),.07), transparent); }
.visor.portada .cita::before { transform:translateY(-50%) scaleX(-1); } /* Yoda mirando hacia la cita */
/* Perfil: párrafo de introducción encima de «No soy un filmmaker» */
.pf-medio .pf-guion > .pf-intro { gap:.8vh; }
.pf-intro p { margin:0; font-weight:300; font-size:clamp(.86rem,.98vw,1.02rem); line-height:1.6; color:rgba(255,255,255,.88); }
/* Perfil: más contraste en los textos de la columna (puntos e introducción), sin llegar al blanco puro */
body:has(.pf-paneles) .pf-medio .pf-puntos li { color:rgba(255,255,255,.9); }
body:has(.pf-paneles) .pf-intro p { color:rgba(255,255,255,.94); }
body:has(.pf-paneles) .pf-cierre .pf-venta { color:rgba(255,255,255,.92); }
/* Pie: aviso de derechos de imagen, discreto y enlazado al aviso legal */
footer .pie-derechos { color:inherit; text-decoration:none; opacity:.8; }
footer .pie-derechos:hover { color:#fff; opacity:1; }
/* Páginas legales en escritorio: a todo el ancho, con los títulos en una columna a la izquierda y el texto a la derecha */
@media (min-width:901px) {
  .legal { max-width:none; display:grid; grid-template-columns:minmax(0,22vw) minmax(0,1fr); column-gap:5vw; align-items:start; padding:2vh 4vw 10vh; }
  .legal > * { grid-column:2; }
  .legal > h2 { grid-column:1; margin:0; padding-top:.45em; border-top:1px solid rgba(var(--plata),.14); padding-top:1.6vh; }
  .legal > h2 + * { border-top:1px solid rgba(var(--plata),.14); padding-top:1.6vh; }
  .legal > h2, .legal > h2 + * { margin-top:4vh; }
  .legal p { max-width:78ch; }
}
@media (min-width:901px) { .legal > * { max-width:min(78ch,100%); } .legal > h2 { max-width:none; } }
@media (min-width:901px) { .legal { font-size:clamp(15px,1.05vw,17px); } .legal > * { max-width:min(96ch,100%); } .legal p { max-width:96ch; } }
.caras-rejilla .cara { cursor:default; }
/* Experiencia · Cine: texto en dos columnas y, debajo, tres carteles y la foto de Cuéntame a la misma altura, sin recortar */
.pf-vista-cine .pf-vtxt p { max-width:none; }
.pf-vista-cine .pf-vtxt { column-count:2; column-gap:3vw; }
.pf-vista-cine .pf-vtxt .pf-anos, .pf-vista-cine .pf-vtxt h3 { column-span:all; }
.pf-vista-cine .pf-vtxt p { break-inside:avoid; margin:0 0 1.2vh; }
.pf-vista-cine em { font-style:italic; color:#fff; }
.pf-carteles { display:flex; gap:1.2vw; align-items:flex-end; height:min(26vh, 240px); }
.pf-carteles figure { margin:0; height:100%; }
.pf-carteles img { height:100%; width:auto; display:block; box-shadow:0 0 0 1px rgba(var(--plata),.22), 0 18px 40px -20px #000; filter:saturate(.85) brightness(.9); transition:filter .5s, transform .5s; }
.pf-carteles figure:hover img { filter:none; transform:translateY(-3px); }
/* Experiencia · Cine: línea de tiempo horizontal, de lo más reciente (izquierda) a lo más lejano (derecha).
   Raíl verde con hitos; cada etapa con su imagen a la misma altura; al pasar el ratón se amplía y aparece el texto */
.pf-vista-cine .pf-vtxt { column-count:auto; }
.pf-vista-cine { grid-template-rows:auto minmax(0,1fr); }
.pf-tl { list-style:none; margin:0; padding:0; display:flex; align-items:flex-start; gap:1.8vw; position:relative; }
.pf-tl::before { content:""; position:absolute; left:0; right:0; top:calc(1.4em + 1.2vh + 7px); height:1px; background:linear-gradient(90deg, rgba(var(--v),.72), rgba(var(--v),.25)); }
.pf-tl li { position:relative; flex:0 0 auto; display:flex; flex-direction:column; gap:1.2vh; outline:none; }
.tl-ano { font:400 .66rem "Courier Prime",monospace; letter-spacing:.22em; text-transform:uppercase; color:rgba(var(--v),.85); height:1.4em; }
.tl-hito { position:relative; display:block; width:15px; height:15px; border-radius:50%; border:1px solid rgba(var(--v),.72); background:#0b0a08; z-index:1; transition:box-shadow .5s; }
.tl-hito::after { content:""; position:absolute; inset:4px; border-radius:50%; background:rgb(var(--v)); transform:scale(0); transition:transform .45s cubic-bezier(.3,1.4,.5,1); }
.pf-tl figure { margin:0; height:min(24vh, 220px); transform-origin:50% 0; transition:transform .5s cubic-bezier(.3,1.2,.5,1); }
.pf-tl img { height:100%; width:auto; display:block; box-shadow:0 0 0 1px rgba(var(--plata),.22), 0 18px 40px -20px #000; filter:saturate(.8) brightness(.82); transition:filter .5s; }
.pf-tl b { font-weight:300; font-size:clamp(.78rem,.88vw,.92rem); letter-spacing:.04em; color:#fff; max-width:22ch; }
.pf-tl b em { font-style:italic; }
.tl-info { position:absolute; left:0; top:100%; margin:.8vh 0 0; width:max(100%, 30ch); font-weight:300; font-size:clamp(.78rem,.86vw,.9rem); line-height:1.55; color:rgba(255,255,255,.9);
  opacity:0; transform:translateY(-6px); transition:opacity .4s, transform .4s; pointer-events:none; z-index:3; }
.pf-tl li:hover figure, .pf-tl li:focus-visible figure { transform:scale(1.06); }
.pf-tl li:hover img, .pf-tl li:focus-visible img { filter:none; }
.pf-tl li:hover .tl-hito::after, .pf-tl li:focus-visible .tl-hito::after { transform:scale(1); }
.pf-tl li:hover .tl-hito, .pf-tl li:focus-visible .tl-hito { box-shadow:0 0 0 5px rgba(var(--v),.14), 0 0 18px rgba(var(--v),.35); }
.pf-tl li:hover .tl-info, .pf-tl li:focus-visible .tl-info { opacity:1; transform:none; }
.pf-tl:has(li:hover) li:not(:hover) img { filter:saturate(.5) brightness(.5); }
.pf-tl figure { height:min(18.5vh, calc((100vw - 4vw - 21vw - 3.4vw - 4vw - 7.2vw) / 5.66)); } .pf-tl { gap:1.8vw; }
.pf-tl li { width:min-content; } .pf-tl b { max-width:none; } .pf-tl li:nth-last-child(-n+2) .tl-info { left:auto; right:0; text-align:right; }
.pf-tl::before { background:linear-gradient(90deg, rgba(var(--v),.25), rgba(var(--v),.72)); }
/* Cine v3: «La vida es un plano secuencia». Tira de diez tarjetas 9:16 sobre el raíl; al pasar el ratón,
   debajo se abre la ficha con una imagen 16:9 distinta, el año, el título y el texto (por defecto, la más reciente) */
.pf-vista-cine .pf-vtxt h3 { margin:0 0 .8vh; }
.pf-vista-cine .pf-vtxt p { max-width:96ch; margin:0; }
.pf-tl { gap:.8vw; justify-content:space-between; padding-bottom:calc(min(20vh,190px) + 2.4vh); margin-top:2.6vh; }
.pf-tl li { position:static; width:auto; flex:1 1 0; min-width:0; gap:1vh; }
.pf-tl li > .tl-ano { font-size:.58rem; letter-spacing:.12em; white-space:nowrap; }
.pf-tl::before { top:calc(1.4em + 1vh + 7px); }
.pf-tl li > figure { height:auto; aspect-ratio:9/16; width:100%; overflow:hidden; transform-origin:50% 0; }
.pf-tl li > figure img { width:100%; height:100%; object-fit:cover; }
.pf-tl li > b, .pf-tl li > .tl-info { display:none; }
.tl-ficha { position:absolute; left:0; right:0; bottom:0; height:min(20vh,190px); display:grid; grid-template-columns:auto minmax(0,1fr); gap:2vw; align-items:center;
  opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; pointer-events:none; }
.tl-ficha > img { height:100%; aspect-ratio:16/9; width:auto; object-fit:cover; box-shadow:0 0 0 1px rgba(var(--plata),.22), 0 18px 40px -20px #000; }
.tl-ficha div { display:flex; flex-direction:column; gap:.8vh; }
.tl-ficha b { font-weight:200; font-size:clamp(1.1rem,1.5vw,1.5rem); color:#fff; }
.tl-ficha b em { font-style:italic; }
.tl-ficha p { margin:0; font-weight:300; font-size:clamp(.82rem,.92vw,.96rem); line-height:1.6; color:rgba(255,255,255,.88); max-width:60ch; }
.pf-tl li:hover .tl-ficha, .pf-tl li:focus-visible .tl-ficha, .pf-tl:not(:has(li:hover, li:focus-visible)) li:last-child .tl-ficha { opacity:1; transform:none; }
.pf-tl:not(:has(li:hover)) li:last-child > figure img { filter:none; }
.pf-tl:not(:has(li:hover)) li:last-child .tl-hito::after { transform:scale(1); }
.tl-ficha > img { height:min(20vh,190px); width:calc(min(20vh,190px) * 16 / 9); max-width:none; }
/* Formación: logotipos pequeños junto a cada centro (los oscuros, en blanco para leerse sobre negro) */
.pf-logo { height:1.9em; width:auto; vertical-align:middle; margin-right:.8em; opacity:.85; }
.pf-logo.blanco { filter:brightness(0) invert(1); opacity:.7; }
.pf-mayores p { display:flex; align-items:center; }
.pf-menores em { display:flex; align-items:center; }
.pf-menores .pf-logo { height:1.6em; }
.pf-logo-txt { display:inline-grid; place-items:center; height:auto; padding:.25em .5em; border:1px solid rgba(var(--plata),.45); font:400 .7rem "Jost",sans-serif; letter-spacing:.2em; color:#fff; }
.pf-logo-ucla { filter:grayscale(1) brightness(2.2); opacity:.75; } .pf-mayores .pf-logo { height:2.6em; }
/* Formación: Paris 8 y UCLA con su logotipo grande, encima del curso (dan autoridad y tienen que verse) */
.pf-menores li.con-logo .pf-logo-g { display:block; height:clamp(34px,4.6vh,48px); width:auto; margin:0 0 1.2vh; }
.pf-logo-g.blanco { filter:brightness(0) invert(1); opacity:.92; }
/* Formación · Especialización: cuatro fichas con el sello del centro arriba, todos en blanco y a la misma altura óptica,
   un filete y debajo año, curso y centro */
.pf-lado .pf-esp-logos { grid-template-columns:1fr 1fr; gap:3.4vh 2.6vw; border-left:0; }
.pf-esp-logos li { padding:0 !important; display:flex; flex-direction:column; gap:.6vh; }
.pf-sello { display:flex; align-items:center; height:clamp(40px,5.4vh,54px); padding-bottom:1.4vh; margin-bottom:.8vh; border-bottom:1px solid rgba(var(--plata),.16); }
.pf-sello img { max-height:100%; max-width:62%; width:auto; height:auto; opacity:.9; transition:opacity .4s; }
.pf-esp-logos li:hover .pf-sello img { opacity:1; }
/* Altura óptica: los logos compactos (Paris 8, Ondas) más altos que las palabras sueltas (UCLA, UNED) */
.pf-sello { height:clamp(46px,6.2vh,60px); }
.pf-sello img { max-width:none; }
.pf-sello img[alt="Université Paris 8"], .pf-sello img[alt="Ondas Formación"] { height:100%; }
.pf-sello img[alt="UCLA"], .pf-sello img[alt="UNED"] { height:62%; }
.pf-sello img[alt="UNED"] { height:100%; } .pf-sello img { opacity:1; }
/* Especialización: una sola columna — logotipo a la izquierda (columna fija) y los datos a la derecha */
.pf-lado .pf-esp-logos { grid-template-columns:1fr; gap:0; }
.pf-esp-logos li { display:grid !important; grid-template-columns:minmax(0,9vw) minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:2.2vw; row-gap:.4vh; align-items:center; padding:1.8vh 0 !important; border-bottom:1px solid rgba(var(--plata),.12); }
.pf-esp-logos li:last-child { border-bottom:0; }
.pf-esp-logos .pf-sello { grid-row:1 / span 3; grid-column:1; height:clamp(40px,5.6vh,54px); padding:0; margin:0; border:0; justify-content:flex-start; }
.pf-esp-logos li > :not(.pf-sello) { grid-column:2; }
/* Formación · títulos mayores: el logotipo del centro grande encima del año, como en Especialización */
.pf-titulo > div { display:flex; flex-direction:column; align-items:flex-start; }
.pf-sello-mayor { display:block; height:clamp(64px,9vh,88px); margin-bottom:1.2vh; }
.pf-sello-mayor img { height:100%; width:auto; display:block; }
/* Formación · títulos mayores (MCS primero): logotipo a la izquierda y datos a la derecha, como Especialización;
   el diploma centrado debajo */
body:has(.pf-paneles) .pf-mayores { gap:3.2vh; }
.pf-titulo { display:flex !important; flex-direction:column; align-items:stretch; gap:1.6vh; }
.pf-tit-fila { display:grid; grid-template-columns:minmax(0,9vw) minmax(0,1fr); column-gap:2.2vw; align-items:center; }
.pf-tit-fila > div { display:flex; flex-direction:column; align-items:flex-start; }
.pf-tit-fila .pf-sello-mayor { height:clamp(46px,6.2vh,60px); margin:0; display:flex; align-items:center; }
.pf-tit-fila h3 { margin:.6vh 0 .4vh !important; font-size:clamp(.95rem,1.15vw,1.15rem) !important; }
.pf-titulo .pf-diploma { align-self:center; width:auto; height:min(15vh,140px); }
.pf-titulo .pf-diploma img { height:100%; width:auto; }
.pf-titulo > .pf-tit-fila { display:grid; flex-direction:initial; align-items:center; }
.pf-titulo .pf-diploma { height:min(13vh,120px); }
body:has(.pf-paneles) .pf-mayores { gap:2.4vh; }
/* Formación · títulos mayores v3: el nombre de la titulación manda (grande, fino, blanco); encima una etiqueta pequeña
   (Máster / Licenciatura); debajo, tras un filete, el logo pequeño con el centro y la fecha discreta. El diploma a la izquierda. */
.pf-mayores-v2 { display:flex; flex-direction:column; gap:5vh; }
.pf-mayores-v2 .pf-titulo { display:grid !important; grid-template-columns:auto minmax(0,1fr); column-gap:2.4vw; align-items:center; }
.pf-mayores-v2 .pf-diploma { height:min(17vh,150px); width:auto; aspect-ratio:1.414; align-self:center; }
.pf-mayores-v2 .pf-diploma img { height:100%; width:100%; object-fit:cover; }
.pf-tit-txt { display:flex; flex-direction:column; align-items:flex-start; }
.pf-tit-etq { font:400 .62rem "Courier Prime",monospace; letter-spacing:.3em; text-transform:uppercase; color:rgba(var(--v),.85); }
.pf-mayores-v2 h3 { margin:.8vh 0 1.4vh !important; font-weight:200 !important; font-size:clamp(1.25rem,1.75vw,1.75rem) !important; line-height:1.22; color:#fff; letter-spacing:.01em; }
.pf-tit-centro { display:flex !important; align-items:center; gap:.9em; margin:0; padding-top:1.2vh; border-top:1px solid rgba(var(--plata),.16); width:100%;
  font-weight:300; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(var(--plata),.75); }
.pf-tit-centro img { height:30px; width:auto; }
.pf-tit-centro i { margin-left:auto; font:400 .62rem "Courier Prime",monospace; font-style:normal; letter-spacing:.18em; color:rgba(var(--plata),.45); }
.pf-tit-centro { letter-spacing:.1em; white-space:nowrap; } .pf-tit-centro i { white-space:nowrap; } .pf-mayores-v2 { gap:7vh; }
body:has(.pf-paneles) .pf-mayores.pf-mayores-v2 { gap:7vh; } .pf-tit-centro { letter-spacing:.06em; font-size:.7rem; }
.pf-tit-centro { gap:.7em; } .pf-tit-centro img { height:26px; }
.pf-tit-centro { letter-spacing:.03em; }
/* Formación: el bloque de Especialización / Otra formación, centrado en su mitad (en pantallas grandes no deja un cuarto vacío) */
.pf-formacion:not([hidden]) > .pf-lado { justify-self:center; width:max-content; max-width:100%; }
.pf-lado .pf-esp-logos li { grid-template-columns:clamp(110px,9vw,160px) max-content; }
/* Formación · títulos mayores v4: misma rejilla que Especialización (logo del mismo tamaño en la columna izquierda,
   titulación a la derecha) y el diploma debajo, alineado con el texto. Bloque centrado en su mitad. */
.pf-formacion:not([hidden]) > .pf-mayores-v3 { justify-self:center; width:min(100%, 38vw); }
body:has(.pf-paneles) .pf-mayores.pf-mayores-v3 { display:flex; flex-direction:column; gap:4vh; }
.pf-mayores-v3 .pf-titulo { display:grid !important; grid-template-columns:clamp(110px,9vw,160px) minmax(0,1fr); column-gap:2.2vw; row-gap:1.6vh; }
.pf-mayores-v3 .pf-titulo > .pf-tit-fila { display:contents; }
.pf-mayores-v3 .pf-sello { grid-column:1; height:clamp(46px,6.2vh,60px); padding:0; margin:0; border:0; display:flex; align-items:center; align-self:center; }
.pf-mayores-v3 .pf-sello img { height:100%; width:auto; max-width:100%; object-fit:contain; }
.pf-mayores-v3 .pf-tit-txt { grid-column:2; }
.pf-mayores-v3 h3 { margin:.6vh 0 1vh !important; font-weight:200 !important; font-size:clamp(1.2rem,1.6vw,1.7rem) !important; line-height:1.22; color:#fff; }
.pf-mayores-v3 .pf-diploma { grid-column:2; justify-self:start; height:min(13vh,150px); width:auto; aspect-ratio:1.414; margin:0; }
.pf-mayores-v3 .pf-diploma img { width:100%; height:100%; object-fit:cover; }
.pf-mayores-v3 .pf-tit-centro { white-space:nowrap; }
.pf-mayores-v3 .pf-sello img[alt="Universidad Complutense de Madrid"] { height:118%; } .pf-mayores-v3 .pf-sello { overflow:visible; }
.pf-mayores-v3 .pf-titulo { grid-template-columns:clamp(80px,5.6vw,104px) minmax(0,1fr); column-gap:1.8vw; } .pf-mayores-v3 .pf-sello { justify-content:center; }
/* Formación · títulos mayores v5: logo pegado a la titulación (fila flexible) y diploma centrado bajo el bloque */
.pf-mayores-v3 .pf-titulo { display:flex !important; flex-direction:column; align-items:stretch; gap:2vh; }
.pf-mayores-v3 .pf-titulo > .pf-tit-fila { display:flex; align-items:center; gap:18px; }
.pf-mayores-v3 .pf-sello { flex:none; width:auto; justify-content:flex-end; }
.pf-mayores-v3 .pf-tit-txt { flex:1; min-width:0; }
.pf-mayores-v3 .pf-diploma { align-self:center; justify-self:auto; }
.pf-mayores-v3 .pf-sello { width:clamp(66px,4.6vw,88px); justify-content:flex-end; }
/* Formación: dos mitades iguales y simétricas; cada bloque centrado en la suya. La columna izquierda mide lo que
   la primera línea del máster («Creatividad y Eficacia en Branded Content,»). Entre las dos, una ranura vertical
   como el separador de Contacto: filete plateado que se funde arriba y abajo, con su sombra. */
.pf-formacion:not([hidden]) { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:0; position:relative; }
.pf-formacion:not([hidden]) > .pf-mayores-v3 { justify-self:center; width:max-content; max-width:100%; }
.pf-mayores-v3 h3 { white-space:nowrap; }
.pf-formacion:not([hidden])::before { content:""; position:absolute; left:50%; top:8%; bottom:8%; width:1px; transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(var(--plata),.55) 30%, rgba(var(--plata),.55) 70%, transparent);
  box-shadow:-1px 0 0 rgba(0,0,0,.85), 1px 0 0 rgba(0,0,0,.85), 0 0 14px rgba(var(--plata),.12); pointer-events:none; }
.pf-formacion:not([hidden])::after { content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%) rotate(45deg);
  background:#080808; border:1px solid rgba(var(--v),.72); box-shadow:0 0 12px rgba(var(--v),.35); pointer-events:none; }
/* Formación · columna derecha: las dos listas ocupan la misma celda (la oculta solo se hace invisible), así el bloque
   mide siempre lo mismo y las pestañas «Especialización / Otra formación» no se mueven al cambiar */
.pf-formacion:not([hidden]) > .pf-lado { display:grid; grid-template-columns:max-content; grid-template-rows:auto auto; align-content:start; }
.pf-lado > .pf-sw { grid-row:1; grid-column:1; }
.pf-lado > .pf-menores { grid-row:2; grid-column:1; align-self:start; }
.pf-lado > .pf-menores[hidden] { display:grid !important; visibility:hidden; pointer-events:none; }
/* Otra formación: misma pauta que Especialización, en una columna, con el texto alineado con el de arriba */
.pf-lado #pf-otra { grid-template-columns:1fr; gap:0; border-left:0; }
.pf-lado #pf-otra li { padding:1.5vh 0 1.5vh calc(clamp(110px,9vw,160px) + 2.2vw) !important; border-bottom:1px solid rgba(var(--plata),.12); display:flex; flex-direction:column; gap:.4vh; }
.pf-lado #pf-otra li:last-child { border-bottom:0; }
.pf-lado #pf-otra li { padding-top:1vh !important; padding-bottom:1vh !important; gap:.2vh; }
/* Otra formación: sangría a la altura de la primera «a» de «Especialización» */ .pf-lado #pf-otra li { padding-left:calc(2.4vw + 3.15rem) !important; }
/* Cine v4: diecisiete etapas. Tarjetas provisionales (formación con su logo, el resto con el título sobre negro) */
.pf-tl { gap:.45vw; }
.pf-tl li > .tl-ano { font-size:.5rem; letter-spacing:.06em; }
.tl-vacio { display:grid; place-items:center; background:linear-gradient(160deg, #141414, #0a0a0a); box-shadow:0 0 0 1px rgba(var(--plata),.22); padding:6px; text-align:center; }
.tl-vacio span { font-weight:300; font-size:clamp(.5rem,.62vw,.66rem); line-height:1.3; color:rgba(255,255,255,.75); }
.tl-vacio span em { font-style:italic; }
.tl-logo img { width:88% !important; height:auto !important; object-fit:contain !important; filter:none !important; }
.tl-ficha-vacia { display:grid; place-items:center; height:min(20vh,190px); width:calc(min(20vh,190px) * 16 / 9); background:linear-gradient(160deg, #141414, #0a0a0a); box-shadow:0 0 0 1px rgba(var(--plata),.22);
  font:400 .62rem "Courier Prime",monospace; letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--plata),.5); }
.tl-ficha .tl-ano { text-transform:uppercase; }
.tl-formación .tl-hito { border-color:rgba(var(--plata),.8); }
.tl-documental .tl-hito { border-style:dashed; }
/* Cine v5: eje temporal horizontal. Arriba (formación, documental, producción) y abajo (cine y series) las tarjetas
   cuelgan del eje y pueden solaparse; al pasar el ratón la tarjeta sube al frente y abajo se abre su ficha.
   Entre 2011 y 2020 el eje se corta (···). */
.pf-tl-eje { --card:clamp(54px,4.4vw,78px); --alto:calc(var(--card) * 16 / 9); --lane:calc(var(--alto) + 2.2em + 16px);
  display:block !important; position:relative; height:calc(var(--lane) * 2); margin-top:2.4vh; padding:0 !important; margin-bottom:calc(min(20vh,190px) + 3vh); }
.pf-tl-eje::before { top:50% !important; height:1px; background:linear-gradient(90deg, rgba(var(--v),.15), rgba(var(--v),.72) 48%, transparent 50%, transparent 54%, rgba(var(--v),.72) 56%, rgba(var(--v),.9)) !important; }
.pf-tl-eje > li { position:static !important; display:block !important; width:auto !important; flex:none !important; }
.tl-corte { position:absolute !important; left:52%; top:50%; transform:translate(-50%,-50%); font:400 .8rem "Courier Prime",monospace; letter-spacing:.3em; color:rgba(var(--v),.72); }
.tl-punto { position:absolute; left:var(--x); width:var(--card); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; outline:none; z-index:1; transition:z-index 0s; }
.tl-arriba .tl-punto { bottom:50%; flex-direction:column-reverse; padding-bottom:0; }
.tl-abajo .tl-punto { top:50%; }
.tl-punto .tl-hito { flex:none; margin:-8px 0; }
.tl-abajo .tl-punto .tl-hito { margin-top:-8px; }
.tl-arriba .tl-punto .tl-hito { margin-bottom:-8px; }
.tl-punto .tl-ano { font:400 .5rem "Courier Prime",monospace; letter-spacing:.04em; white-space:nowrap; color:rgba(var(--v),.85); order:0; }
.tl-punto > figure { width:var(--card); height:var(--alto); margin:0; overflow:hidden; aspect-ratio:auto; box-shadow:0 0 0 1px rgba(var(--plata),.22), 0 14px 30px -12px #000; transition:transform .45s cubic-bezier(.3,1.2,.5,1); }
.tl-punto > figure img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.8) brightness(.82); transition:filter .4s; }
.tl-arriba .tl-punto > figure { transform-origin:50% 100%; }
.tl-abajo .tl-punto > figure { transform-origin:50% 0; }
.pf-tl-eje li:hover .tl-punto, .pf-tl-eje li:focus-within .tl-punto { z-index:5; }
.pf-tl-eje li:hover .tl-punto > figure, .pf-tl-eje li:focus-within .tl-punto > figure { transform:scale(1.14); }
.pf-tl-eje li:hover .tl-punto > figure img { filter:none; }
.pf-tl-eje li:hover .tl-hito::after { transform:scale(1); }
.pf-tl-eje:has(li:hover) li:not(:hover) .tl-punto > figure img { filter:saturate(.5) brightness(.45); }
.pf-tl-eje .tl-ficha { position:absolute; left:0; right:0; top:calc(100% + 3vh); bottom:auto; }
.pf-tl-eje:not(:has(li:hover, li:focus-within)) li:last-child .tl-ficha { opacity:1; transform:none; }
.pf-tl-eje li:hover .tl-ficha, .pf-tl-eje li:focus-within .tl-ficha { opacity:1; transform:none; }
.pf-tl-eje { --lane:calc(var(--alto) + 1.6em + 10px); margin-top:1.4vh; margin-bottom:calc(min(15vh,150px) + 2vh); }
.pf-tl-eje .tl-ficha { top:calc(100% + 2vh); height:min(15vh,150px); }
.pf-tl-eje .tl-ficha > img, .pf-tl-eje .tl-ficha-vacia { height:min(15vh,150px); width:calc(min(15vh,150px) * 16 / 9); }
/* Eje: sin ficha por defecto (solo aparece al pasar el ratón); tarjetas algo menores en pantallas bajas */
.pf-tl-eje:not(:has(li:hover, li:focus-within)) li:last-child .tl-ficha { opacity:0; transform:translateY(6px); }
.pf-tl-eje:not(:has(li:hover)) li:last-child .tl-punto > figure img { filter:saturate(.8) brightness(.82); }
.pf-tl-eje:not(:has(li:hover)) li:last-child .tl-hito::after { transform:scale(0); }
.pf-tl-eje { --card:clamp(46px, min(4.4vw, 6.6vh), 78px); }
.pf-tl-eje .tl-ficha { top:calc(100% + 1.2vh); }
/* Eje v2: sin hueco reservado para la ficha — los carteles crecen hasta llenar el alto disponible y la ficha flota
   sobre el carril contrario al pasar el ratón (sensación de muchas cosas, a costa de solaparse) */
.pf-tl-eje { --alto:clamp(96px, calc((100vh - 520px) / 2 - 30px), 300px); --card:calc(var(--alto) * 9 / 16); --lane:calc(var(--alto) + 1.6em + 10px); margin-bottom:0; }
.pf-tl-eje .tl-ficha { left:0; right:auto; height:auto; padding:14px 18px; gap:1.4vw; z-index:20; background:rgba(6,6,6,.94); box-shadow:0 0 0 1px rgba(var(--plata),.2), 0 24px 60px -20px #000; backdrop-filter:blur(6px); }
.pf-tl-eje .tl-arriba .tl-ficha { top:calc(50% + 14px); bottom:auto; }
.pf-tl-eje .tl-abajo .tl-ficha { top:auto; bottom:calc(50% + 14px); }
.pf-tl-eje .tl-ficha > img, .pf-tl-eje .tl-ficha-vacia { height:min(17vh,170px); width:calc(min(17vh,170px) * 16 / 9); }
.pf-tl-eje { --alto:clamp(96px, calc((100vh - 560px) / 2 - 24px), 300px); }
/* Eje v3: sin solapes. Diecisiete columnas iguales en orden cronológico que ocupan todo el ancho; cada etapa en su
   columna, arriba (formación, documental…) o abajo (cine y series), colgando del eje. Sin ficha de momento. */
.pf-tl-eje { display:grid !important; grid-template-columns:repeat(17, minmax(0,1fr)); grid-template-rows:auto auto; column-gap:.6vw; row-gap:30px; height:auto !important; margin:2.4vh 0 0 !important; }
.pf-tl-eje > li { display:contents !important; }
.pf-tl-eje .tl-corte { display:none !important; }
.pf-tl-eje .tl-punto { position:static !important; transform:none !important; width:auto !important; grid-column:var(--c); left:auto; }
.pf-tl-eje .tl-arriba .tl-punto { grid-row:1; align-self:end; }
.pf-tl-eje .tl-abajo .tl-punto { grid-row:2; align-self:start; }
.pf-tl-eje .tl-punto > figure { width:100% !important; height:auto !important; aspect-ratio:9/16; }
.pf-tl-eje .tl-arriba .tl-hito { margin:0 0 -22px !important; }
.pf-tl-eje .tl-abajo .tl-hito { margin:-22px 0 0 !important; }
.pf-tl-eje::before { top:50% !important; background:linear-gradient(90deg, rgba(var(--v),.25), rgba(var(--v),.85)) !important; }
.pf-tl-eje .tl-ficha { display:none !important; }
.pf-tl-eje li:hover .tl-punto > figure { transform:scale(1.04); }
/* Eje v4: cada carril reparte sus tarjetas por todo el ancho sin solaparse (rejilla de 70: arriba 7 huecos de 10,
   abajo 10 huecos de 7). Todas las tarjetas miden lo mismo: lo máximo que permiten el ancho y el alto. */
.pf-tl-eje { grid-template-columns:repeat(70, minmax(0,1fr)) !important; column-gap:0 !important;
  --w:min(calc(72vw / 10 - 14px), calc((100vh - 560px) / 2 * .5625)); }
.pf-tl-eje .tl-arriba .tl-punto { grid-column:calc((var(--i) - 1) * 10 + 1) / span 10; }
.pf-tl-eje .tl-abajo .tl-punto { grid-column:calc((var(--i) - 1) * 7 + 1) / span 7; }
.pf-tl-eje .tl-punto { justify-self:center; width:var(--w) !important; }
/* Eje v5: arriba 9 etapas (rejilla de 90: huecos de 10), abajo 10 (huecos de 9). Tarjetas algo menores para que respiren.
   Cada tarjeta: arriba cartel · año · hito; abajo hito · año · cartel. Los hitos caen justo sobre el eje.
   Elipsis «···» en el eje entre 2010 y 2020. */
.pf-tl-eje { grid-template-columns:repeat(90, minmax(0,1fr)) !important; row-gap:0 !important;
  --w:min(calc(72vw / 10 * .78), calc((100vh - 600px) / 2 * .5625)); }
.pf-tl-eje .tl-arriba .tl-punto { grid-column:calc((var(--i) - 1) * 10 + 1) / span 10 !important; flex-direction:column !important; padding-bottom:0; }
.pf-tl-eje .tl-abajo .tl-punto { grid-column:calc((var(--i) - 1) * 9 + 1) / span 9 !important; flex-direction:column !important; }
.pf-tl-eje .tl-arriba .tl-punto > figure { order:1; } .pf-tl-eje .tl-arriba .tl-punto > .tl-ano { order:2; } .pf-tl-eje .tl-arriba .tl-punto > .tl-hito { order:3; margin:0 0 -8px !important; }
.pf-tl-eje .tl-abajo .tl-punto > .tl-hito { order:1; margin:-8px 0 0 !important; } .pf-tl-eje .tl-abajo .tl-punto > .tl-ano { order:2; } .pf-tl-eje .tl-abajo .tl-punto > figure { order:3; }
.pf-tl-eje .tl-punto { gap:7px; }
.pf-tl-eje::before { top:50% !important; background:linear-gradient(90deg, rgba(var(--v),.2), rgba(var(--v),.7) 38%, transparent 39%, transparent 43%, rgba(var(--v),.7) 44%, rgba(var(--v),.9)) !important; }
.pf-tl-eje::after { content:"···"; position:absolute; left:41%; top:50%; transform:translate(-50%,-55%); font:400 .9rem "Courier Prime",monospace; letter-spacing:.25em; color:rgba(var(--v),.85); pointer-events:none; }
/* Eje v6: cine y series arriba (10, huecos de 9), formación y documental abajo (9, huecos de 10).
   Hitos reducidos a un punto sobre el eje (no se pisan); al pasar el ratón crecen y se encienden como antes.
   Media flecha del cursor de la web (un chevrón) entre el año y el cartel, señalando hacia él. */
.pf-tl-eje .tl-arriba .tl-punto { grid-column:calc((var(--i) - 1) * 9 + 1) / span 9 !important; }
.pf-tl-eje .tl-abajo .tl-punto { grid-column:calc((var(--i) - 1) * 10 + 1) / span 10 !important; }
.pf-tl-eje .tl-hito { width:5px !important; height:5px !important; border:0 !important; background:rgba(var(--v),.85) !important; box-shadow:none !important; transition:width .35s, height .35s, box-shadow .35s, background .35s; }
.pf-tl-eje .tl-arriba .tl-punto > .tl-hito { margin:0 0 -2.5px !important; order:5; }
.pf-tl-eje .tl-abajo .tl-punto > .tl-hito { margin:-2.5px 0 0 !important; order:0; }
.pf-tl-eje li:hover .tl-hito, .pf-tl-eje li:focus-within .tl-hito { width:15px !important; height:15px !important; background:#0b0a08 !important; border:1px solid rgba(var(--v),.72) !important; box-shadow:0 0 0 5px rgba(var(--v),.14), 0 0 18px rgba(var(--v),.35) !important; }
.pf-tl-eje .tl-arriba li:hover .tl-hito { margin-bottom:-7.5px !important; }
.pf-tl-eje li.tl-arriba:hover .tl-hito { margin-bottom:-7.5px !important; }
.pf-tl-eje li.tl-abajo:hover .tl-hito { margin-top:-7.5px !important; }
.tl-flecha { display:block; width:9px; height:7px; background:rgba(var(--v),.8);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M1 15.5V9L11 1l10 8v6.5L11 7.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M1 15.5V9L11 1l10 8v6.5L11 7.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pf-tl-eje .tl-arriba .tl-punto > figure { order:1; } .pf-tl-eje .tl-arriba .tl-punto > .tl-flecha { order:2; } .pf-tl-eje .tl-arriba .tl-punto > .tl-ano { order:3; }
.pf-tl-eje .tl-abajo .tl-punto > .tl-ano { order:1; } .pf-tl-eje .tl-abajo .tl-punto > .tl-flecha { order:2; transform:rotate(180deg); } .pf-tl-eje .tl-abajo .tl-punto > figure { order:3; }
/* Eje v7: orden cronológico real, alternando arriba/abajo (impares arriba, pares abajo). Rejilla de 20: cada tarjeta
   ocupa 2 columnas a partir de su posición, así las del mismo carril nunca se tocan. Elipsis entre 2011 y 2017. */
.pf-tl-eje { grid-template-columns:repeat(20, minmax(0,1fr)) !important; --w:min(calc(72vw / 10 * .8), calc((100vh - 600px) / 2 * .5625)); }
.pf-tl-eje .tl-arriba .tl-punto, .pf-tl-eje .tl-abajo .tl-punto { grid-column:var(--i) / span 2 !important; }
.pf-tl-eje::before { background:linear-gradient(90deg, rgba(var(--v),.2), rgba(var(--v),.7) 50.5%, transparent 51%, transparent 54%, rgba(var(--v),.7) 54.5%, rgba(var(--v),.9)) !important; }
.pf-tl-eje::after { left:52.5% !important; }
/* Eje v8: sin las dos de formación (17 etapas). Entre 2011 y 2017 queda un hueco de dos columnas en el que el eje
   se desvanece y vuelve a aparecer, en lugar de los puntos suspensivos. */
.pf-tl-eje::after { content:none !important; }
.pf-tl-eje::before { background:linear-gradient(90deg, rgba(var(--v),.25) 0%, rgba(var(--v),.75) 38%, rgba(var(--v),0) 45.5%, rgba(var(--v),0) 49.5%, rgba(var(--v),.75) 57%, rgba(var(--v),.9) 100%) !important; }
/* Esperpentos: el cartel entero (sin recortar las letras), completando arriba y abajo con su mismo blanco */
.pf-tl-eje .tl-punto > figure.tl-entero { background:#fff; }
.pf-tl-eje .tl-punto > figure.tl-entero img { object-fit:contain !important; }
/* Ficha limpia: al pasar el ratón ocupa el sitio del titular de la pestaña (que se desvanece), sin caja ni borde,
   con la imagen 16:9 y el texto; no tapa ningún cartel */
.pf-vista-cine { position:relative; }
.pf-vista-cine .pf-vtxt { transition:opacity .35s; }
.pf-vista-cine:has(.pf-tl-eje li:hover, .pf-tl-eje li:focus-within) .pf-vtxt { opacity:0; }
.pf-tl-eje .tl-ficha { display:grid !important; position:absolute !important; left:0 !important; right:auto !important; top:auto !important; bottom:calc(100% + 1.8vh) !important;
  height:clamp(70px,11vh,120px) !important; padding:0 !important; background:none !important; box-shadow:none !important; backdrop-filter:none !important;
  grid-template-columns:auto minmax(0,1fr); gap:1.6vw; align-items:center; opacity:0; transform:translateY(4px); transition:opacity .35s, transform .35s; pointer-events:none; }
.pf-tl-eje .tl-ficha > img, .pf-tl-eje .tl-ficha .tl-ficha-vacia { height:100% !important; width:auto !important; aspect-ratio:16/9; object-fit:cover; box-shadow:0 0 0 1px rgba(var(--plata),.22); }
.pf-tl-eje .tl-ficha b { font-size:clamp(1rem,1.3vw,1.3rem); }
.pf-tl-eje .tl-ficha p { font-size:clamp(.8rem,.88vw,.92rem); margin:0; }
.pf-tl-eje li:hover .tl-ficha, .pf-tl-eje li:focus-within .tl-ficha { opacity:1 !important; transform:none !important; }
.pf-tl-eje .tl-ficha > img, .pf-tl-eje .tl-ficha .tl-ficha-vacia { height:clamp(70px,11vh,120px) !important; width:calc(clamp(70px,11vh,120px) * 16 / 9) !important; max-width:none; } .pf-tl-eje .tl-ficha > div { min-width:0; } .pf-tl-eje .tl-ficha { width:max-content; max-width:100%; }
/* Esperpentos: relleno del mismo blanco roto del cartel y el filtro aplicado al conjunto (no solo a la imagen) */
.pf-tl-eje .tl-punto > figure.tl-entero { background:#f4f3ef; filter:saturate(.8) brightness(.82); transition:filter .4s, transform .45s cubic-bezier(.3,1.2,.5,1); }
.pf-tl-eje .tl-punto > figure.tl-entero img { filter:none !important; }
.pf-tl-eje li:hover .tl-punto > figure.tl-entero, .pf-tl-eje li:focus-within .tl-punto > figure.tl-entero { filter:none; }
.pf-tl-eje:has(li:hover) li:not(:hover) .tl-punto > figure.tl-entero { filter:saturate(.5) brightness(.45); }
/* Ficha al estilo de Créditos: tarjeta flotante junto al cartel (a su derecha; en la mitad derecha, a su izquierda),
   fondo casi negro, filo turquesa y esquinas suaves; imagen 16:9 arriba y el texto debajo */
.pf-vista-cine:has(.pf-tl-eje li:hover, .pf-tl-eje li:focus-within) .pf-vtxt { opacity:1; }
.pf-tl-eje .tl-punto { position:relative !important; }
.pf-tl-eje .tl-punto .tl-ficha { display:flex !important; flex-direction:column; align-items:stretch; gap:10px; position:absolute !important; z-index:30;
  top:0 !important; bottom:auto !important; left:calc(100% + 14px) !important; right:auto !important; width:min(300px, 24vw) !important; height:auto !important;
  padding:14px !important; background:rgba(10,9,7,.96) !important; border:1px solid rgba(var(--v),.42); border-radius:8px; box-shadow:0 30px 60px -20px #000 !important;
  opacity:0; transform:translateY(4px); }
.pf-tl-eje .tl-abajo .tl-punto .tl-ficha { top:auto !important; bottom:0 !important; }
.pf-tl-eje .tl-punto.tl-izq .tl-ficha { left:auto !important; right:calc(100% + 14px) !important; }
.pf-tl-eje .tl-punto .tl-ficha > img, .pf-tl-eje .tl-punto .tl-ficha .tl-ficha-vacia { width:100% !important; height:auto !important; aspect-ratio:16/9; border:1px solid rgba(var(--v),.14); box-shadow:none; }
.pf-tl-eje .tl-punto .tl-ficha b { font-size:1rem; }
.pf-tl-eje .tl-punto .tl-ficha p { font-size:.86rem; line-height:1.5; }
.pf-tl-eje .tl-punto { top:auto !important; bottom:auto !important; left:auto !important; }
.pf-tl-eje .tl-punto .tl-ficha { max-width:none !important; }
/* Fichas: subtítulo y, mientras no se fije el tamaño definitivo, desplazamiento interno si el texto no cabe */
.pf-tl-eje .tl-punto .tl-ficha { max-height:min(70vh, 620px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(var(--v),.42) transparent; pointer-events:auto; }
.pf-tl-eje .tl-punto .tl-ficha .tl-sub { font-style:italic; color:rgba(var(--v),.85); margin:0; }
.pf-tl-eje .tl-punto .tl-ficha div p + p { margin-top:.6em; }
.pf-tl-eje .tl-punto .tl-ficha { pointer-events:none; } .pf-tl-eje li:hover .tl-punto .tl-ficha { pointer-events:auto; }
.pf-tl-eje .tl-punto .tl-ficha { max-height:46vh; }
/* Línea de tiempo: sin ficha flotante al pasar el ratón; al pulsar, hoja grande sobre la pantalla con X (voz propia) */
.pf-tl-eje .tl-punto .tl-ficha { display:none !important; }
.pf-tl-eje .tl-punto { cursor:pointer; }
.tl-capa { position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(4,4,5,.86); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .35s; }
.tl-capa.on { opacity:1; pointer-events:auto; }
.tl-hoja { position:relative; width:min(1180px, 88vw); height:min(820px, 86vh); display:flex; flex-direction:column; background:rgba(10,9,7,.97); border:1px solid rgba(var(--v),.42); border-radius:10px; box-shadow:0 40px 90px -30px #000; transform:translateY(10px); transition:transform .45s cubic-bezier(.3,1.2,.5,1); }
.tl-capa.on .tl-hoja { transform:none; }
.tl-hoja .lupa-x { top:-18px; right:-18px; z-index:2; }
.tl-hoja-in { flex:1; min-height:0; overflow-y:auto; padding:4.4vh 4vw 3vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:3.4vw; align-content:start;
  scrollbar-width:thin; scrollbar-color:rgba(var(--v),.42) transparent; }
.tl-hoja-in > img, .tl-hoja-in > .tl-ficha-vacia { grid-column:1; grid-row:1 / span 2; width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; border:1px solid rgba(var(--v),.14); position:sticky; top:0; }
.tl-hoja-in > .tl-ficha-vacia { display:grid; place-items:center; font:400 .7rem "Courier Prime",monospace; letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--plata),.5); background:#0b0b0b; }
.tl-hoja-in > div { grid-column:2; grid-row:1 / span 2; }
.tl-hoja-in .tl-ano { display:block; font:400 .7rem "Courier Prime",monospace; letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--v),.85); margin-bottom:1.2vh; }
.tl-hoja-in b { display:block; font-weight:200; font-size:clamp(1.6rem,2.4vw,2.4rem); line-height:1.15; color:#fff; margin-bottom:.4em; }
.tl-hoja-in b em { font-style:italic; }
.tl-hoja-in .tl-sub { margin:0 0 1.4em; font-style:italic; font-size:clamp(1rem,1.2vw,1.2rem); color:rgba(var(--v),.85); }
.tl-hoja-in p { margin:0 0 1em; font-weight:300; font-size:clamp(.95rem,1.05vw,1.08rem); line-height:1.7; color:rgba(255,255,255,.88); }
.tl-hoja-nav { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-top:1px solid rgba(var(--v),.14); }
.tl-hoja-nav .car-flecha { position:static; transform:none; width:34px; height:36px; }
.tl-hoja-num { font:.66rem "Courier Prime",monospace; letter-spacing:.24em; color:rgba(var(--plata),.6); }
/* Hoja: imagen y cabecera (año, título, subtítulo) arriba; el texto debajo a todo el ancho, en dos columnas */
.tl-hoja-in { grid-template-rows:auto auto; row-gap:3.4vh; }
.tl-hoja-in > img, .tl-hoja-in > .tl-ficha-vacia { grid-row:1 !important; position:static !important; }
.tl-hoja-in > .tl-hoja-cab { grid-column:2; grid-row:1 !important; align-self:end; }
.tl-hoja-in > .tl-hoja-cab .tl-sub { margin-bottom:0; }
.tl-hoja-cuerpo { grid-column:1 / -1; grid-row:2; column-count:2; column-gap:3.4vw; padding-top:2.6vh; border-top:1px solid rgba(var(--v),.14); }
.tl-hoja-cuerpo p { break-inside:avoid-column; }
.tl-hoja-in > .tl-hoja-cuerpo { grid-column:1 / -1 !important; grid-row:2 !important; } .tl-hoja-in > .tl-hoja-cab { grid-column:2 !important; }
/* Hoja de etapa v3: sin desplazamiento; la imagen flota a la izquierda y la cabecera y el texto empiezan a su derecha
   y, al pasar su altura, ocupan todo el ancho. Sin numeración. */
.tl-hoja-in { display:block !important; overflow:hidden !important; }
.tl-hoja-in > img, .tl-hoja-in > .tl-ficha-vacia { float:left; width:48% !important; margin:0 2.8vw 1.6vh 0; }
.tl-hoja-in > .tl-hoja-cab { display:block; padding-top:.4vh; }
.tl-hoja-cuerpo { column-count:auto !important; border-top:0 !important; padding-top:1.4vh !important; }
.tl-hoja-cuerpo p { font-size:clamp(.9rem,1vw,1.02rem) !important; line-height:1.65 !important; }
.tl-hoja-nav { justify-content:space-between; }
.tl-hoja-num { display:none !important; }
/* Tarjetas: al pasar el ratón crecen un poco y aparece «Anécdotas», como «Ver ficha» en el carrusel */
.pf-tl-eje .tl-anec { position:absolute; left:50%; transform:translate(-50%, 6px); top:auto; z-index:3; padding:6px 9px; font-size:8px; letter-spacing:.18em; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; }
.pf-tl-eje .tl-arriba .tl-anec { bottom:calc(11px + 7px + 7px + 14px + 12px); }
.pf-tl-eje .tl-abajo .tl-anec { bottom:12px; }
.pf-tl-eje li:hover .tl-anec, .pf-tl-eje li:focus-within .tl-anec { opacity:1; transform:translate(-50%, 0); }
.pf-tl-eje li:hover .tl-punto > figure { transform:scale(1.06); }
/* Hoja de etapa v4: la imagen como cabecera de cine a todo el ancho (franja panorámica) con el título y el subtítulo
   sobre un degradado; debajo, el texto en dos columnas equilibradas que llenan la hoja. Sin etiquetas repetidas. */
.tl-hoja-in { display:flex !important; flex-direction:column; padding:0 !important; overflow:hidden !important; }
.tl-hoja-portada { position:relative; flex:none; height:40%; overflow:hidden; border-radius:10px 10px 0 0; }
.tl-hoja-portada > img, .tl-hoja-portada > .tl-ficha-vacia { float:none !important; position:absolute !important; inset:0; width:100% !important; height:100% !important; margin:0 !important; object-fit:cover; object-position:50% 35%; border:0 !important; aspect-ratio:auto !important; }
.tl-hoja-portada::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(10,9,7,.55) 65%, rgba(10,9,7,.97)); }
.tl-hoja-portada > .tl-hoja-cab { position:absolute; left:4vw; right:4vw; bottom:2.6vh; z-index:1; padding:0 !important; }
.tl-hoja-cab b { margin-bottom:.15em !important; text-shadow:0 2px 18px rgba(0,0,0,.6); }
.tl-hoja-cab .tl-sub { margin:0 !important; }
.tl-hoja-cuerpo { flex:1; min-height:0; overflow:hidden; column-count:2 !important; column-gap:3.6vw !important; column-fill:balance; padding:3.4vh 4vw 2vh !important; border:0 !important; }
.tl-hoja-cuerpo p { margin:0 0 .9em !important; }
.tl-hoja-cuerpo p { font-size:clamp(.98rem,1.12vw,1.14rem) !important; line-height:1.7 !important; }
.tl-hoja-cuerpo p { font-size:clamp(.92rem,1vw,1.04rem) !important; line-height:1.68 !important; break-inside:auto !important; }
/* Hoja: el título y el subtítulo van debajo de la imagen (no encima) */
.tl-hoja-portada { height:36%; }
.tl-hoja-portada::after { background:linear-gradient(180deg, transparent 60%, rgba(10,9,7,.9)); }
.tl-hoja-in > .tl-hoja-cab { position:static !important; flex:none; padding:2.2vh 4vw 0 !important; }
.tl-hoja-cab b { text-shadow:none !important; }
.tl-hoja-cab .tl-alt { font-size:.6em; color:rgba(255,255,255,.55); }
.tl-hoja-cuerpo { padding-top:2.2vh !important; }
.pf-tl-eje .tl-anec { letter-spacing:.12em; padding:6px 7px; }
.tl-hoja-in > .tl-hoja-cab { align-self:stretch !important; padding:1.8vh 4vw 0 !important; } .tl-hoja-portada { height:31%; } .tl-hoja-cab b { font-size:clamp(1.4rem,2vw,2rem) !important; } .tl-hoja-cuerpo { padding-top:1.8vh !important; }
.tl-hoja-portada { height:28%; } .tl-hoja-cuerpo p { font-size:clamp(.88rem,.95vw,.98rem) !important; line-height:1.6 !important; margin-bottom:.75em !important; }
/* Hoja v5: banner a todo el ancho; justo debajo, pegada a él, una barra de título (título y subtítulo en una línea,
   filete fino debajo); después el texto en dos columnas */
.tl-hoja-portada { height:34% !important; }
.tl-hoja-portada::after { background:linear-gradient(180deg, transparent 70%, rgba(10,9,7,.85)) !important; }
.tl-hoja-in > .tl-hoja-cab { display:flex !important; align-items:baseline; flex-wrap:wrap; gap:.3em 1.4vw; padding:1.5vh 4vw 1.5vh !important; margin:0; border-bottom:1px solid rgba(var(--v),.18); }
.tl-hoja-cab b { margin:0 !important; font-size:clamp(1.4rem,1.9vw,1.9rem) !important; }
.tl-hoja-cab .tl-sub { margin:0 !important; font-size:clamp(.92rem,1.05vw,1.08rem) !important; }
.tl-hoja-cuerpo { padding-top:2.2vh !important; }
/* Hoja v6: estética de la home (rótulo de cine). Título en Jost fina, mayúsculas y mucho tracking, pegado al banner;
   subtítulo como pie técnico en Courier; texto con filete plateado entre columnas. */
.tl-hoja-portada::after { background:linear-gradient(180deg, transparent 55%, rgba(10,9,7,.6) 82%, rgba(10,9,7,.97)) !important; }
.tl-hoja-in > .tl-hoja-cab { margin-top:-3.2vh !important; position:relative !important; z-index:2; padding:0 4vw 1.6vh !important; border-bottom:0 !important; flex-direction:column; align-items:flex-start; gap:.9vh; }
.tl-hoja-cab b, .tl-hoja-cab b em { font-style:normal !important; font-weight:200 !important; font-size:clamp(1.3rem,1.9vw,1.95rem) !important; letter-spacing:.32em; text-transform:uppercase; line-height:1.2; color:#fff; }
.tl-hoja-cab .tl-sub { font:400 .7rem "Courier Prime",monospace !important; font-style:normal !important; letter-spacing:.26em; text-transform:uppercase; color:rgba(var(--v),.85) !important; }
.tl-hoja-cab::after { content:""; display:block; width:56px; height:1px; margin-top:.6vh; background:linear-gradient(90deg, rgba(var(--plata),.8), transparent); }
.tl-hoja-cuerpo { column-rule:1px solid rgba(var(--plata),.12); padding-top:1.4vh !important; }
.tl-hoja-cuerpo p { color:rgba(255,255,255,.84) !important; }
/* Perfil: en los «no soy» solo se tacha la palabra clave (filmmaker / línea recta); el resto de la frase queda limpio */
.pf-medio .pf-guion s { text-decoration:none; }
.pf-medio .pf-guion s del { text-decoration:line-through; text-decoration-color:rgba(var(--plata),.75); text-decoration-thickness:1px; color:inherit; }
/* Formación: las dos columnas suben hacia el menú de pestañas (solo el aire de arriba; la maquetación de cada lista no cambia) */
body:has(.pf-paneles) .pf-paneles .panel.pf-formacion:not([hidden]) { padding-top:2.4vh; align-items:start; }
/* Cita + Yoda como una unidad, en espejo de la Osa Mayor: el centro del conjunto queda a la misma distancia del borde derecho que la Osa del izquierdo */
.visor.portada .cita { right:calc(13.1vw - 19.5px); }
/* Portada: contrapunto muy tenue de la vía láctea en el lado de la cita, en espejo (la diagonal sube hacia el centro desde ambos lados) */
.visor .via-dcha { display:none; }
.visor.portada .via-dcha { display:block; position:absolute; top:calc(9vh + 14px); right:calc(4vw + 40px); width:26vw; height:150px; pointer-events:none;
  background:url(assets/film/via-lactea.svg) center / 100% 100% no-repeat; transform:scaleX(-1); opacity:.2;
  -webkit-mask:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
body:has(.contactpage) .visor.portada .via-dcha { display:none; }
/* Contacto: al pasar el ratón por el correo (cuando aparece el subrayado verde) el diafragma se dispara una vez: se cierra un poco girando, vuelve a abrir y entra el anillo de luz */
body:has(.tarjeta .mail:hover, .tarjeta .mail:focus-visible) .visor.cielo .iris { animation:iris-disparo 1.1s cubic-bezier(.2,.7,.2,1) 1; }
body:has(.tarjeta .mail:hover, .tarjeta .mail:focus-visible) .visor.cielo .destello { animation:destello-disparo 1.1s ease-out 1; }
@keyframes iris-disparo {
  0% { opacity:.08; transform:translate(-50%,-50%) rotate(0) scale(1); }
  22% { opacity:.24; transform:translate(-50%,-50%) rotate(7deg) scale(.95); }
  55% { opacity:.2; transform:translate(-50%,-50%) rotate(0) scale(1); }
  100% { opacity:.08; transform:translate(-50%,-50%) rotate(0) scale(1); } }
@keyframes destello-disparo { 0% { opacity:0; } 25% { opacity:1; } 45% { opacity:.85; } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { body:has(.tarjeta .mail:hover) .visor.cielo .iris, body:has(.tarjeta .mail:hover) .visor.cielo .destello { animation:none; } }
/* Experiencia · Televisión: el mismo eje que Cine, continuo (sin el hueco 2011–2017) y sin carteles en blanco */
.pf-tl-eje.pf-tl-tv::before { background:linear-gradient(90deg, rgba(var(--v),.25), rgba(var(--v),.75) 30%, rgba(var(--v),.9)) !important; }
/* Experiencia · Publicidad: Tesauro y Lee Films (texto del CV) bajo la introducción, compacto para que quepa junto a la infografía */
.pf-pub-casas { display:grid; gap:2vh; margin-top:2.2vh; }
.pf-pub-casa { padding-top:1.4vh; border-top:1px solid rgba(var(--plata),.14); }
.pf-pub-casa h4 { margin:0; font:200 clamp(1rem,1.2vw,1.2rem) "Jost",sans-serif; letter-spacing:.22em; text-transform:uppercase; color:#fff; }
.pf-pub-meta { display:block; margin:.4vh 0 1vh; font:400 9px "Courier Prime",monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(var(--v),.85); }
.pf-pub-casa ul { margin:0; padding:0; list-style:none; display:grid; gap:.7vh; }
.pf-pub-casa li { font-size:clamp(.74rem,.8vw,.84rem); line-height:1.5; color:rgba(255,255,255,.72); }
.pf-pub-casa li b { font-weight:400; color:#fff; }
/* Publicidad: la introducción arriba a todo el ancho; debajo, la infografía (sin cambios) y a su derecha Tesauro y Lee Films */
body:has(.pf-paneles) .pf-experiencia :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc):not([hidden]) { grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); column-gap:3vw; align-items:start; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-vtxt { grid-column:1 / -1; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-info { grid-column:1; grid-row:2; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-casas { grid-column:2; grid-row:2; margin-top:0; gap:1.6vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa:first-child { border-top:0; padding-top:0; }
/* Publicidad: la introducción arriba a todo el ancho; debajo, la infografía (sin cambios) y a su derecha Tesauro y Lee Films */
body:has(.pf-paneles) .pf-experiencia :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc):not([hidden]) { grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); column-gap:3vw; align-items:start; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-vtxt { grid-column:1 / -1; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-info { grid-column:1; grid-row:2; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-casas { grid-column:2; grid-row:2; margin-top:0; gap:1.6vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa:first-child { border-top:0; padding-top:0; }
/* Publicidad: Tesauro, Lee Films y Otros freelance suben a la altura del título (columna derecha a todo el alto) */
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-vtxt { grid-column:1; grid-row:1; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-casas { grid-row:1 / 3; }
/* Publicidad: «Otros freelance» bajo la infografía, en dos columnas; Tesauro y Lee Films a la derecha a todo el alto */
body:has(.pf-paneles) .pf-experiencia :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc):not([hidden]) { grid-template-rows:auto auto minmax(0,1fr); row-gap:1.6vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-casas { grid-row:1 / 4; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros { grid-column:1; grid-row:3; padding-top:1.2vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros ul { grid-template-columns:1fr 1fr; column-gap:2vw; gap:.4vh 2vw; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-vtxt, :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros { width:0; min-width:100%; } /* no ensanchan la columna de la infografía */
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros .pf-pub-meta { margin:.2vh 0 .6vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros li { line-height:1.4; }
body:has(.pf-paneles) .pf-experiencia :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc):not([hidden]) { row-gap:1.2vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros ul { display:block; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros li { display:inline; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros li + li::before { content:" · "; color:rgba(var(--v),.6); }
/* Otros freelance: título y subtítulo en una línea para que quepa a 1600×900 */
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:1.2vw; padding-top:.6vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros .pf-pub-meta { margin:0 0 .6vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros ul { flex-basis:100%; }
/* Publicidad v2: infografía más pequeña; columnas de texto con rótulos de cine (Jost fina con tracking, Courier verde,
   filete plata que se desvanece con rombo) y las marcas de Lee Films como línea de créditos */
body:has(.pf-paneles) .pf-experiencia :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-info { max-width:27vw; }
body:has(.pf-paneles) .pf-experiencia :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc):not([hidden]) { column-gap:3.6vw; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa { position:relative; border-top:0; padding-top:1.6vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, rgba(var(--plata),.45), rgba(var(--plata),.12) 60%, transparent); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa::after { content:""; position:absolute; left:0; top:-3px; width:6px; height:6px; transform:rotate(45deg); background:rgba(var(--v),.85); box-shadow:0 0 8px rgba(var(--v),.5); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-casa:first-child { padding-top:1.6vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa h4 { font:200 clamp(1.05rem,1.3vw,1.3rem) "Jost",sans-serif; letter-spacing:.32em; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-meta { letter-spacing:.2em; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa li { padding-left:14px; position:relative; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa li::before { content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:rgba(var(--v),.7); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-otros li { padding-left:0; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-otros li::before { position:static; width:auto; height:auto; background:none; }
.pf-pub-marcas { margin:1.2vh 0 0; font:300 clamp(.62rem,.66vw,.7rem) "Jost",sans-serif; letter-spacing:.18em; text-transform:uppercase; line-height:1.9; color:rgba(var(--plata),.75); text-align:justify; }
.pf-pub-marcas span + span::before { content:"·"; margin:0 .7em; color:rgba(var(--v),.6); }
.pf-pub-marcas .pf-pub-etq { color:rgba(var(--v),.9); font-family:"Courier Prime",monospace; letter-spacing:.2em; }
.pf-pub-marcas .pf-pub-etq + span::before { content:"—"; }
.pf-pub-marcas { text-align:left; line-height:1.75; }
.pf-pub-marcas span { white-space:nowrap; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-casas { gap:1.2vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa ul { gap:.5vh; }
.pf-pub-marcas span { display:inline-block; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa { min-width:0; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-otros { min-width:100%; }
/* Publicidad v3: «Otros freelance» vuelve a la columna derecha, debajo de Tesauro y Lee Films */
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-otros { grid-column:auto; grid-row:auto; width:auto; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:1.2vw; padding-top:1.6vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-otros .pf-pub-meta { margin:0 0 .6vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-otros ul { display:block; flex-basis:100%; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-otros li { display:inline; padding-left:0; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-otros li::before { position:static; width:auto; height:auto; background:none; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-otros li + li::before { content:" · "; color:rgba(var(--v),.6); }
body:has(.pf-paneles) .pf-experiencia :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc):not([hidden]) { grid-template-rows:auto minmax(0,1fr); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-casas { grid-row:1 / 3; }
/* Publicidad v4: Tesauro y Lee Films lado a lado; «Otros freelance» debajo de ambos a todo el ancho; infografía más estrecha */
body:has(.pf-paneles) .pf-experiencia :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-info { max-width:21vw; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-casas { grid-template-columns:1fr 1fr; column-gap:2.4vw; row-gap:1.6vh; align-content:start; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-otros { grid-column:1 / -1; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-casas { grid-template-rows:auto 1fr; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-casa:first-child { grid-column:1; grid-row:1 / 3; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-casa:nth-child(2) { grid-column:2; grid-row:1; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-otros { grid-column:2; grid-row:2; align-self:start; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa ul { gap:.3vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa li { line-height:1.45; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-marcas { line-height:1.65; }
/* Publicidad v5: acordeón (Tesauro · Lee Films · Otros freelance), uno abierto cada vez; columna derecha única; infografía al 27 % */
body:has(.pf-paneles) .pf-experiencia :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-info { max-width:27vw; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-casas { display:flex; flex-direction:column; gap:0; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-casa, :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-otros { display:block; grid-column:auto; grid-row:auto; padding:0; width:auto; min-width:0; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-casa:first-child { padding-top:0; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary { list-style:none; cursor:pointer; position:relative; padding:1.5vh 28px 1.3vh 0; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary::-webkit-details-marker { display:none; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary::after { content:""; position:absolute; right:4px; top:50%; width:7px; height:7px; border-right:1px solid rgba(var(--plata),.7); border-bottom:1px solid rgba(var(--plata),.7); transform:translateY(-70%) rotate(45deg); transition:transform .35s, border-color .35s; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa[open] summary::after { transform:translateY(-30%) rotate(-135deg); border-color:rgba(var(--v),.9); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary h4 { transition:color .3s, text-shadow .3s; color:rgba(255,255,255,.72); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary:hover h4, :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa[open] summary h4 { color:#fff; text-shadow:0 0 14px rgba(var(--v),.35); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary .pf-pub-meta { margin:.5vh 0 0; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa::after { top:-3px; opacity:.45; transition:opacity .3s; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa[open]::after { opacity:1; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-cuerpo { padding:.4vh 0 1.8vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa[open] .pf-pub-cuerpo { animation:pub-abre .45s ease-out; }
@keyframes pub-abre { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa li { font-size:clamp(.8rem,.86vw,.9rem); line-height:1.6; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa ul { gap:.6vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-otros .pf-pub-cuerpo ul { display:grid; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-otros .pf-pub-cuerpo li { display:block; padding-left:14px; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-otros .pf-pub-cuerpo li::before { content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:rgba(var(--v),.7); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-otros { flex-wrap:nowrap; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-cuerpo { display:block; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary { display:block; width:auto; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casas > .pf-pub-otros { width:100%; }
/* Publicidad v6: el acordeón con las mismas tarjetas biseladas que los botones de «Áreas» (esquina cortada, borde plata, turquesa al abrir) */
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa::before, :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa::after { content:none; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) > .pf-pub-casas { gap:.8vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary { --ch:14px; isolation:isolate; padding:1.3vh 46px 1.2vh 1.2vw; color:rgba(255,255,255,.72); transition:color .4s; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary::before, :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary::after { content:""; position:absolute; z-index:-1; border:0; width:auto; height:auto; right:auto; top:auto; transform:none; transition:background .6s; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary::before { inset:0; clip-path:polygon(var(--ch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ch));
  background:linear-gradient(135deg, rgba(var(--plata),.28), rgba(var(--plata),.08) 45%, rgba(var(--plata),.22)); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary::after { inset:1px; clip-path:polygon(calc(var(--ch) - .5px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--ch) - .5px));
  background:linear-gradient(180deg, #0b0b0b, #060606); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary:hover::before { background:linear-gradient(135deg, rgba(var(--plata),.4), rgba(var(--plata),.1) 45%, rgba(var(--plata),.28)); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa[open] summary::before { background:linear-gradient(135deg, rgba(var(--v),.5), rgba(var(--plata),.16) 50%, rgba(var(--v),.28)); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa[open] summary::after { background:linear-gradient(135deg, rgba(var(--v),.07), #070707 55%); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary h4 { text-shadow:none; font-size:clamp(.9rem,1.05vw,1.08rem); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary:hover h4, :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa[open] summary h4 { color:#fff; text-shadow:none; }
/* indicador: + que se convierte en − al abrir */
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary h4::before, :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary h4::after { content:""; position:absolute; right:20px; top:50%; width:12px; height:1px; background:rgba(var(--plata),.8); transition:transform .35s, background .35s; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary h4::after { transform:rotate(90deg); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa[open] summary h4::after { transform:rotate(0); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa[open] summary h4::before, :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa[open] summary h4::after { background:rgba(var(--v),.95); }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary:hover h4::before, :is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa summary:hover h4::after { background:#fff; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-cuerpo { padding:1.4vh 1.2vw 1.2vh; }
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-casa[open] summary::after { transform:none; border:0; }
/* Publicidad: aire antes de la línea de spots */
:is(#pf-x-pub,#pf-x-teatro,#pf-x-doc) .pf-pub-marcas { margin-top:2.4vh; padding-top:1.4vh; border-top:1px solid rgba(var(--plata),.1); }
/* Teatro y Docencia con el mismo acordeón que Publicidad: introducción (y fotos en Teatro) a la izquierda, acordeón a la derecha */
#pf-x-teatro > .pf-thumbs { grid-column:1; grid-row:2; width:27vw; max-width:27vw; }
#pf-x-doc > .pf-vtxt { grid-row:1 / 3; }
body:has(.pf-paneles) .pf-experiencia #pf-x-doc:not([hidden]) { grid-template-columns:27vw minmax(0,1fr); }
/* Documental v3: el fondo deja de competir. Negro elegante como el resto: el contraluz baja a un susurro y la tela
   de líneas queda casi invisible, solo una textura que se intuye */
.fondo.doc { background:#050505; }
.fondo.doc .halo { background:radial-gradient(ellipse 60% 50% at 62% 45%, rgba(200,200,200,.07), rgba(var(--v),.015) 45%, transparent 75%); animation:none; }
.fondo.doc .tela { opacity:.32; }
/* Televisión: eje compacto (los programas seguidos en la mitad izquierda) y, a la derecha, dos fotos mías en rodaje */
#pf-x-tv { position:relative; }
.pf-tl-eje.pf-tl-tv::before { background:linear-gradient(90deg, rgba(var(--v),.25), rgba(var(--v),.8) 40%, rgba(var(--v),.6) 52%, transparent 58%) !important; }
.pf-tv-fotos { position:absolute; right:0; bottom:0; width:36%; display:grid; grid-template-rows:1fr 1fr; gap:1.6vh; height:calc(100% - 9vh); align-content:center; }
.pf-tv-fotos figure { margin:0; aspect-ratio:16/9; width:100%; max-height:100%; display:grid; place-items:center; border:1px solid rgba(var(--plata),.18); background:#080808; overflow:hidden; }
.pf-tv-fotos figure img { width:100%; height:100%; object-fit:cover; filter:saturate(.8) brightness(.9); }
.pf-tv-fotos figure.tl-vacio span { font:400 9px "Courier Prime",monospace; letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--plata),.5); }
/* Televisión: en lugar de dos huecos, una foto en rodaje (Radio Gaga) con su explicación */
.pf-tv-destacado { grid-template-rows:auto auto; align-content:center; gap:1.4vh; }
.pf-tv-destacado figure { border-color:rgba(var(--plata),.22); box-shadow:0 24px 50px -28px #000; }
.pf-tv-destacado figure img { filter:saturate(.75) brightness(.88) contrast(1.05); transition:filter .5s; }
.pf-tv-destacado:hover figure img { filter:none; }
.pf-tv-nota h4 { margin:.4vh 0 .8vh; font:200 clamp(.95rem,1.1vw,1.15rem) "Jost",sans-serif; letter-spacing:.24em; text-transform:uppercase; color:#fff; }
.pf-tv-nota p { margin:0 0 .6vh; font-size:clamp(.78rem,.84vw,.88rem); line-height:1.6; color:rgba(255,255,255,.74); }
.pf-tv-fotos.pf-tv-destacado { width:31%; }
.pf-tl-eje.pf-tl-tv::before { background:linear-gradient(90deg, rgba(var(--v),.25), rgba(var(--v),.8) 40%, rgba(var(--v),.6) 58%, transparent 64%) !important; }
/* Televisión: la foto de Radio Gaga a la izquierda (matiza: la tele es parte de mi recorrido, no mi posicionamiento) y el eje a la derecha */
.pf-tv-fotos.pf-tv-destacado { right:auto; left:0; }
.pf-tl-eje.pf-tl-tv::before { background:linear-gradient(90deg, transparent 34%, rgba(var(--v),.6) 40%, rgba(var(--v),.8) 60%, rgba(var(--v),.9)) !important; }
/* Radio Gaga dentro del eje: su borde superior coincide con el de los carteles de arriba */
.pf-tl-eje.pf-tl-tv { position:relative; }
.pf-tl-eje.pf-tl-tv > li.pf-tv-destacado { display:grid !important; position:absolute; left:0; top:0; bottom:auto; height:auto; width:31%; align-content:start; }
/* (vuelve fuera del eje; main.js alinea su borde superior con el de los carteles) */
.pf-tv-fotos.pf-tv-destacado { top:var(--tv-top, auto); bottom:auto; height:auto; align-content:start; }
/* Radio Gaga: segunda foto (el set) a la mitad de ancho —un cuarto de superficie— incrustada en la esquina inferior derecha
   del texto, que la rodea; su borde inferior coincide con el de los carteles de abajo (alturas fijadas en main.js) */
.pf-tv-destacado { height:var(--tv-h, auto); grid-template-rows:auto minmax(0,1fr); }
.pf-tv-nota { position:relative; height:100%; overflow:hidden; }
.pf-tv-hueco { float:right; width:0; height:calc(100% - var(--ins-h, 0px)); }
.pf-tv-inserto { float:right; clear:right; width:50%; aspect-ratio:16/9; margin:0 0 0 1.2vw; border:1px solid rgba(var(--plata),.22); overflow:hidden; box-shadow:0 18px 40px -24px #000; }
.pf-tv-inserto img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.75) brightness(.88) contrast(1.05); transition:filter .5s; }
.pf-tv-inserto:hover img { filter:none; }
.pf-tv-fotos.pf-tv-destacado { height:var(--tv-h, auto); grid-template-rows:auto minmax(0,1fr); }
.pf-tv-fotos .pf-tv-inserto { width:50%; max-height:none; display:block; margin:0 0 0 1.2vw; }
.pf-tv-fotos.pf-tv-destacado { gap:1vh; }
.pf-tv-nota h4 { letter-spacing:.14em; font-size:clamp(.86rem,.98vw,1.02rem); margin:.3vh 0 .6vh; white-space:nowrap; }
.pf-tv-nota p { line-height:1.5; margin:0 0 .4vh; }
/* Cine: la intro larga (tres párrafos) en tres columnas para que el eje siga cabiendo en la pantalla */
#pf-x-cine .pf-vtxt { column-count:3 !important; column-gap:2.6vw; column-rule:1px solid rgba(var(--plata),.1); }
#pf-x-cine .pf-vtxt h3 { column-span:all; }
#pf-x-cine .pf-vtxt p { margin:0 0 .8vh; break-inside:auto; font-size:clamp(.76rem,.8vw,.86rem); line-height:1.55; max-width:none; }
#pf-x-cine .pf-tl-eje { --w:min(calc(72vw / 10 * .72), calc((100vh - 655px) / 2 * .5625)) !important; }
/* Cine: intro en una sola columna (sin columnas) */
#pf-x-cine .pf-vtxt { column-count:auto !important; column-rule:none; }
#pf-x-cine .pf-vtxt p { margin:0 0 .5vh; max-width:none; }
#pf-x-cine .pf-vtxt p { margin:0 0 .3vh; line-height:1.5; }
#pf-x-cine .pf-vtxt h3 { margin-bottom:.6vh; }
/* Cine: solo el titular y, a su lado, la miniatura-botón (yo de pequeño, con «+») que abre la historia en una hoja */
#pf-x-cine .pf-intro-fila { display:flex; align-items:center; gap:1.4vw; }
#pf-x-cine .pf-intro-fila h3 { margin:0; }
.pf-intro-btn { position:relative; flex:none; width:clamp(40px,3.2vw,56px); aspect-ratio:640/768; padding:0; border:0; background:none; cursor:pointer; transform:rotate(-4deg); transition:transform .35s cubic-bezier(.3,1.3,.5,1), filter .35s; filter:saturate(.7) brightness(.85); }
.pf-intro-btn img { display:block; width:100%; height:100%; object-fit:cover; box-shadow:0 8px 20px -8px #000; }
.pf-intro-btn b { position:absolute; right:-9px; bottom:-9px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; font:300 17px/1 "Jost",sans-serif; color:#fff;
  background:linear-gradient(180deg, #257b67, #175647); border:1px solid rgba(var(--v),.6); box-shadow:0 0 0 3px rgba(5,5,5,.9), 0 0 12px rgba(var(--v),.45); }
.pf-intro-btn:hover, .pf-intro-btn:focus-visible { transform:rotate(0) scale(1.12); filter:none; }
#pf-x-cine .pf-tl-eje { --w:min(calc(72vw / 10 * .8), calc((100vh - 600px) / 2 * .5625)) !important; }
/* la hoja: polaroid a la izquierda, ligeramente girada; texto a la derecha */
.pf-intro-hoja { height:auto !important; max-height:86vh; width:min(1060px,86vw) !important; }
.pf-intro-in { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:4vw; align-items:center; padding:5vh 4vw; }
.pf-intro-in figure { margin:0; transform:rotate(-3deg); }
.pf-intro-in figure img { display:block; width:100%; height:auto; box-shadow:0 30px 60px -25px #000; }
.pf-intro-txt b { display:block; margin:0 0 2.2vh; padding-bottom:1.6vh; font:200 clamp(1.1rem,1.5vw,1.5rem)/1.35 "Jost",sans-serif; letter-spacing:.06em; color:#fff; border-bottom:1px solid rgba(var(--plata),.2); }
.pf-intro-txt p { margin:0 0 1.4vh; font-size:clamp(.9rem,1vw,1.02rem); line-height:1.7; color:rgba(255,255,255,.82); }
/* Polaroid de pequeño: WebP original con transparencia; el encuadre se recorta con CSS (sin recomprimir) */
.pf-polaroid { position:relative; display:block; width:100%; aspect-ratio:1000/1160; overflow:visible; }
.pf-polaroid img { position:absolute; left:-14%; top:-37.5%; width:122.9% !important; max-width:none; height:auto !important; object-fit:fill !important; box-shadow:none !important; filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.pf-intro-btn { aspect-ratio:1000/1160; transform:none; }
.pf-intro-btn .pf-polaroid { height:100%; }
.pf-intro-btn img { filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)); }
.pf-intro-btn:hover { transform:scale(1.12); }
.pf-intro-in figure { transform:none; }
.pf-intro-hoja { overflow:hidden !important; }
/* Ficha de la intro: detrás de la polaroid, un pequeño cielo de partículas (estrellas finas que derivan despacio y un halo tenue) */
.pf-intro-in figure { position:relative; isolation:isolate; padding:4vh 1.5vw; }
.pf-intro-in figure::before, .pf-intro-in figure::after { content:""; position:absolute; inset:-6% -10%; z-index:-1; pointer-events:none;
  -webkit-mask:radial-gradient(ellipse 60% 55% at 50% 50%, #000 35%, transparent 75%); mask:radial-gradient(ellipse 60% 55% at 50% 50%, #000 35%, transparent 75%); }
.pf-intro-in figure::before {
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 64%, rgba(var(--v),.8), transparent 60%),
    radial-gradient(1px 1px at 24% 82%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 52% 6%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 6% 52%, rgba(var(--plata),.7), transparent 60%),
    radial-gradient(1px 1px at 64% 90%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 94% 30%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 38% 40%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 70% 44%, rgba(255,255,255,.35), transparent 60%);
  background-size:180px 180px; animation:polvo-estelar 60s linear infinite; opacity:.85; }
.pf-intro-in figure::after { background:radial-gradient(ellipse 45% 40% at 50% 48%, rgba(var(--plata),.10), rgba(var(--v),.04) 50%, transparent 75%); animation:respira 7s ease-in-out infinite alternate; }
@keyframes polvo-estelar { to { background-position:180px -180px; } }
@media (prefers-reduced-motion:reduce) { .pf-intro-in figure::before, .pf-intro-in figure::after { animation:none; } }
/* (más presencia: dos capas de estrellas con distinta deriva y una nebulosa turquesa muy suave) */
.pf-intro-in figure::before {
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(1.4px 1.4px at 78% 12%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(2px 2px at 88% 64%, rgba(var(--v),.95), transparent 70%),
    radial-gradient(1.4px 1.4px at 24% 82%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(1.2px 1.2px at 52% 6%, rgba(255,255,255,.65), transparent 70%),
    radial-gradient(1.8px 1.8px at 6% 52%, rgba(var(--plata),.85), transparent 70%),
    radial-gradient(1.2px 1.2px at 64% 90%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(1.2px 1.2px at 94% 30%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(1.2px 1.2px at 40% 34%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(1.2px 1.2px at 70% 46%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(1.4px 1.4px at 30% 60%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(1px 1px at 58% 70%, rgba(255,255,255,.5), transparent 70%);
  background-size:150px 150px; animation:polvo-estelar 50s linear infinite; opacity:1; }
.pf-intro-in figure::after {
  background:
    radial-gradient(1.2px 1.2px at 20% 30%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(1.2px 1.2px at 70% 20%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(1px 1px at 45% 75%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(1px 1px at 85% 85%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(ellipse 55% 45% at 45% 45%, rgba(var(--v),.10), rgba(var(--plata),.05) 45%, transparent 75%);
  background-size:90px 90px, 90px 90px, 90px 90px, 90px 90px, 100% 100%;
  animation:polvo-cerca 30s linear infinite; }
@keyframes polvo-cerca { to { background-position:-90px 90px, -90px 90px, -90px 90px, -90px 90px, 0 0; } }
.pf-intro-in figure::before, .pf-intro-in figure::after { inset:-12% -18%; -webkit-mask:radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%); mask:radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%); }
/* Ficha de la intro v2: título a todo el ancho; la polaroid encajada a la izquierda del texto, que la rodea.
   La ficha crece con el texto y, si hace falta, desplaza por dentro; la X queda siempre visible dentro de la esquina */
.pf-intro-hoja { overflow:visible !important; width:min(980px,86vw) !important; }
.pf-intro-hoja .lupa-x { top:14px; right:14px; }
.pf-intro-in { display:block; max-height:86vh; overflow-y:auto; padding:5vh 4.4vw 4vh; scrollbar-width:thin; scrollbar-color:rgba(var(--v),.42) transparent; }
.pf-intro-tit { display:block; margin:0 40px 3vh 0; padding-bottom:1.8vh; font:200 clamp(1.2rem,1.7vw,1.7rem)/1.3 "Jost",sans-serif; letter-spacing:.06em; color:#fff; border-bottom:1px solid rgba(var(--plata),.2); }
.pf-intro-txt b { display:none; }
.pf-intro-txt figure { float:left; width:clamp(170px,18vw,250px); margin:.4vh 2.6vw 1.6vh 0; padding:0; }
.pf-intro-txt p { margin:0 0 1.5vh; }
.pf-intro-txt::after { content:""; display:block; clear:both; }
/* Ficha de la intro: proporciones relativas a la pantalla (no topes en px), para que en monitores grandes se vea igual que a 1600 px */
.pf-intro-hoja { width:62vw !important; max-width:none !important; }
.pf-intro-tit { font-size:clamp(1.2rem,1.7vw,3rem); }
.pf-intro-txt p { font-size:clamp(.9rem,1.02vw,1.8rem); }
.pf-intro-txt figure { width:15.5vw; }
.pf-intro-hoja .lupa-x { width:clamp(34px,2.5vw,60px); height:clamp(34px,2.5vw,60px); font-size:clamp(15px,1.1vw,26px); }
.pf-intro-tit { font-size:clamp(1rem,1.45vw,3rem); letter-spacing:.03em; }
/* Filmart: el logo (negro sobre blanco) centrado en el cartel vertical, con aire alrededor */
.pf-tl-eje .tl-punto > figure.tl-logo { background:#f4f3ef; display:grid; place-items:center; }
.pf-tl-eje .tl-punto > figure.tl-logo img { width:86% !important; height:auto !important; object-fit:contain !important; }
/* el blanco del PNG se funde con el blanco roto del cartel (igual que Esperpentos) */
.pf-tl-eje .tl-punto > figure.tl-logo { isolation:isolate; }
.pf-tl-eje .tl-punto > figure.tl-logo img { mix-blend-mode:multiply; }
/* Tiempo muerto: cartel entero (sin cortar el título) sobre el marrón de su propio marco */
.pf-tl-eje .tl-punto > figure.tl-entero.tl-tm { background:rgb(89,46,30); }
/* cartel con logo superpuesto (La línea roja) */
.pf-tl-eje .tl-punto > figure.tl-con-logo { position:relative; }
.pf-tl-eje .tl-punto > figure.tl-con-logo .tl-logo-sobre { position:absolute; left:12%; bottom:6%; width:76% !important; height:auto !important; object-fit:contain !important; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
/* cartel que se ve entero (sin recortar los lados) sobre negro */
.pf-tl-eje .tl-punto > figure.tl-entero.tl-ancho { background:#000; filter:none; }
/* títulos muy largos en la hoja: un pelín más pequeños para caber en una línea */
.tl-hoja .tl-hoja-cab b em.tl-tit-largo { font-size:.82em !important; white-space:nowrap; }
.pf-tl-eje .tl-punto > figure.tl-zoom10 { overflow:hidden; }
.pf-tl-eje .tl-punto > figure.tl-zoom10 img { transform:scale(1.1); }
.pf-tv-nota p b { font-weight:400; color:#fff; }
/* APAGADO (no borrar): áreas Realización freelance y Docencia, y el botón «Aprendizajes» de las fichas del timeline */
.pf-conmuta-exp button[data-lista="pf-x-b2b"], .pf-conmuta-exp button[data-lista="pf-x-doc"] { display:none !important; }
.pf-tl-eje .tl-anec { display:none !important; }
.pf-tl-eje .tl-punto { cursor:default !important; }
/* Teatro: eje continuo como Televisión */
.pf-tl-eje.pf-tl-teatro::before { background:linear-gradient(90deg, rgba(var(--v),.25), rgba(var(--v),.75) 30%, rgba(var(--v),.9)) !important; }
/* Teatro ya no usa la maquetación de acordeón: título a todo el ancho y eje debajo, como Cine */
body:has(.pf-paneles) .pf-experiencia #pf-x-teatro:not([hidden]) { grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto minmax(0,1fr) !important; }
#pf-x-teatro > .pf-vtxt { grid-column:1 !important; grid-row:1 !important; width:auto !important; min-width:0 !important; }
/* ====== Escala proporcional en cualquier ordenador ======
   Toda la maquetación se aprobó a 1600×900 con 16 px de base. La base crece o encoge con la pantalla
   (proporción 16:9, limitada por el lado que falte) y todos los tamaños en rem escalan con ella:
   1366×768 → 13,7 px · 1600×900 → 16 px · 1920×1080 → 19,2 px · 2560×1440 → 25,6 px */
html { font-size:clamp(11px, min(1vw, 1.7778vh), 40px); }
.tl-hoja { width:min(73.75rem, 88vw); height:min(51.25rem, 86vh); }
body:has(.pf-paneles) .pf-experiencia #pf-x-pub:not([hidden]) { grid-template-columns:27vw minmax(0,1fr); }
#pf-x-pub .pf-info, #pf-x-pub .pf-info img { width:100%; }
/* Home: iconos de contacto (correo, WhatsApp, LinkedIn) junto a los botones */
.home-iconos { justify-content:center; margin:2vh 0 0; }
/* Créditos: aviso del vídeo en proceso */
.cred-video { position:relative; }
.cred-aviso { position:absolute; inset:auto 8% 8% 8%; margin:0; padding:1.2em 1.4em; background:rgba(6,8,8,.92); border:1px solid rgba(var(--v),.6); color:#fff; font-size:.9rem; line-height:1.5; text-align:center; box-shadow:0 18px 40px -18px #000; }
.cred-aviso { inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(80%, 30rem); z-index:3; }
.cred-video:has(.cred-aviso:not([hidden])) > span { opacity:0; transition:opacity .3s; }
.cred-video:has(.cred-aviso:not([hidden])) span { opacity:0 !important; }
/* Home: los iconos de contacto en la misma fila que Contacto y Servicios */
.more.acciones { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:1.2vw; }
.more.acciones .home-iconos { margin:0 0 0 .6vw; display:flex; gap:.8vw; }
/* Prueba (Tierra de Nadie): el reproductor muestra un solo vídeo a todo el ancho; se navega con las miniaturas */
main.fc-plantilla .reels-car .car-track { gap:0 !important; scroll-snap-type:x mandatory; }
main.fc-plantilla .reels-car .car-track > .car-card { flex:0 0 100% !important; width:100% !important; max-width:none !important; scroll-snap-align:start; }
main.fc-plantilla .reels-car .car-track > .car-card { display:flex; flex-direction:column; align-items:center; }
main.fc-plantilla .reels-car .car-track > .car-card .clip { width:auto !important; height:min(36vh, 22vw) !important; aspect-ratio:16/9; }
main.fc-plantilla .reels-car .car-track > .car-card > :not(.clip) { width:calc(min(36vh, 22vw) * 16 / 9); }
/* Prueba (Tierra de Nadie): cartel · reproductor · columna de texto (1,5 carteles) */
main.fc-plantilla .top-v { grid-template-columns:auto minmax(0,1fr) calc(var(--cart, 12vw) * 2) !important; column-gap:2.4vw; align-items:stretch; }
main.fc-plantilla .fc-texto { display:flex; flex-direction:column; justify-content:space-between; gap:1.2vh; padding-left:2vw; border-left:1px solid rgba(var(--plata),.18); }
.fc-texto-etq { font:400 .62rem "Courier Prime",monospace; letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--v),.9); }
.fc-texto p { margin:0; font-size:.86rem; line-height:1.6; color:rgba(255,255,255,.8); }
.fc-texto p em { color:#fff; }
/* el texto deja libre el margen derecho donde vive el faro */
main.fc-plantilla .fc-texto { padding-right:calc(3.2vw + 26px); }
main.fc-plantilla .reels-car .car-track > .car-card .clip { max-width:100%; height:auto !important; max-height:min(36vh, 22vw); }
main.fc-plantilla .reels-car .car-track > .car-card > :not(.clip) { width:min(100%, calc(min(36vh, 22vw) * 16 / 9)); }
main.fc-plantilla .reels-car .car-track > .car-card .clip { width:min(100%, calc(min(36vh, 22vw) * 16 / 9)) !important; height:auto !important; max-height:none; aspect-ratio:16/9; }
/* Plantilla de ficha: también el carrusel de fotos (Padre 5) muestra una sola imagen a la vez */
main.fc-plantilla .fotos-car .car-track { gap:0 !important; scroll-snap-type:x mandatory; }
main.fc-plantilla .fotos-car .car-track > .car-card { flex:0 0 100% !important; width:100% !important; max-width:none !important; scroll-snap-align:start; display:flex; justify-content:center; }
main.fc-plantilla .fotos-car .car-track > .car-card img { width:auto !important; max-width:100%; height:min(36vh, 22vw) !important; object-fit:contain; }
main.fc-plantilla .fc-texto { justify-content:flex-start; gap:1.6vh; }
main.fc-plantilla[data-slug="tierra-de-nadie"] .fc-texto { justify-content:space-between; }
/* Plantilla: en el carrusel de fotos, las miniaturas en columna a la izquierda (como los vídeos) */
main.fc-plantilla .top-v .fotos-car { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:1.6vw; position:relative; }
main.fc-plantilla .top-v .fotos-car .car-vp { grid-column:2; grid-row:1; }
main.fc-plantilla .top-v .fotos-car .car-dots { grid-column:1; grid-row:1; flex-direction:column; justify-content:center; gap:6px; margin:0; max-height:37vh; overflow-y:auto; overflow-x:visible; flex-wrap:nowrap; padding:2px 0 2px 10px; scrollbar-width:none; }
main.fc-plantilla .top-v .fotos-car .car-dots > * { height:min(52px, calc((37vh - 30px) / 6 - 6px)); width:auto; flex:none; }
/* Cine y Branded: fichas del carrusel al ~58 % y hueco de texto arriba (maqueta) */
#carrusel .car-card { flex-basis:max(140px, calc(58vh * 2 / 3 * .58 * .93)); } /* Cine y Branded, mismo tamaño fijo (un 7 % menos que antes) */
.port-texto { position:relative; z-index:1; margin:2vh 4vw 3vh; padding:3vh 2.4vw; min-height:20vh; border:1px dashed rgba(var(--plata),.3); display:flex; flex-direction:column; justify-content:center; gap:1vh; }
.port-texto p { margin:0; max-width:70ch; font-size:.95rem; line-height:1.6; color:rgba(255,255,255,.55); }
.port-texto .port-texto-etq { font:400 .62rem "Courier Prime",monospace; letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--v),.9); }
/* con pocas fichas, el carrusel no se repite: fichas centradas */
#carrusel[data-finito] .car-track { justify-content:center; }
/* Branded: las 8 fichas caben a la vez */
.port-texto.con-texto { border:0; min-height:0; padding:1vh 0; margin:1vh 4vw 3vh; }
.port-texto.con-texto p { font-size:clamp(1rem,1.2vw,1.3rem); line-height:1.6; color:rgba(255,255,255,.85); max-width:62ch; }
/* Cine y Branded: contacto discreto bajo el carrusel (teléfono e iconos), sin robar protagonismo */
.port-contacto { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:1.4vw; margin:2.4vh auto 0; opacity:.55; transition:opacity .4s; }
.port-contacto:hover, .port-contacto:focus-within { opacity:1; }
.port-contacto .port-tel { font:400 .72rem "Courier Prime",monospace; letter-spacing:.18em; color:rgba(var(--plata),.9); text-decoration:none; }
.port-contacto .port-tel:hover { color:#fff; }
.port-contacto a:not(.port-tel) { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid rgba(var(--plata),.25); border-radius:50%; color:rgba(var(--plata),.85); }
.port-contacto a:not(.port-tel):hover { border-color:rgba(var(--v),.7); color:#fff; }
.port-contacto svg { width:.95rem; height:.95rem; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.port-texto:not(.con-texto) { min-height:12vh; margin:1vh 4vw 2vh; padding:2vh 2.4vw; }
.port-contacto { margin-top:1.6vh; }
/* contacto discreto en la esquina inferior derecha, sobre el pie */
.port-contacto { position:fixed; right:4vw; bottom:calc(3.2rem + 1.6vh); margin:0; z-index:5; gap:1vw; }
/* pie: teléfono junto al correo */
footer .pie-contacto { display:inline-flex; gap:1.6vw; }
/* pie proporcional a la pantalla (antes 10 px fijos): cabe en una línea también a 1366 px */
footer { font-size:.625rem; letter-spacing:.24em; }
/* Juego del Halcón: puntero de mira y explosión */
html.mira-halcon, html.mira-halcon * { cursor:crosshair !important; }
.fresnel .halcon.boom { visibility:hidden; }
.explosion { position:fixed; z-index:50; width:0; height:0; pointer-events:none; }
.explosion::before { content:""; position:absolute; left:-40px; top:-40px; width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle, #fff 0, rgba(255,214,140,.95) 18%, rgba(255,120,40,.6) 40%, transparent 70%); animation:boom-flash .7s ease-out forwards; }
.explosion::after { content:""; position:absolute; left:-10px; top:-10px; width:20px; height:20px; border-radius:50%; border:2px solid rgba(var(--v),.9); animation:boom-onda .9s ease-out forwards; }
.explosion i { position:absolute; width:3px; height:3px; border-radius:50%; background:#ffd38a; box-shadow:0 0 6px #ff9a3c; animation:boom-chispa 1.2s ease-out forwards; }
@keyframes boom-flash { 0% { transform:scale(.2); opacity:1; } 100% { transform:scale(1.8); opacity:0; } }
@keyframes boom-onda { 0% { transform:scale(.5); opacity:1; } 100% { transform:scale(9); opacity:0; } }
@keyframes boom-chispa { 0% { transform:translate(0,0); opacity:1; } 100% { transform:translate(var(--dx), var(--dy)); opacity:0; } }
/* Juego: rutas alternativas de las naves tras explotar (4 rutas en orden) */
.fresnel .halcon.ruta-1 { animation:halcon-r1 30s linear infinite !important; }
.fresnel .halcon.ruta-2 { animation:halcon-r2 30s linear infinite !important; }
.fresnel .halcon.ruta-3 { animation:halcon-r3 30s linear infinite !important; }
@keyframes halcon-r1 { 0% { left:-5%; top:72%; bottom:auto; opacity:0; transform:rotate(80deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:102%; top:40%; opacity:0; transform:rotate(80deg); } }
@keyframes halcon-r2 { 0% { left:102%; top:24%; bottom:auto; opacity:0; transform:rotate(-95deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:-5%; top:34%; opacity:0; transform:rotate(-95deg); } }
@keyframes halcon-r3 { 0% { left:8%; top:-6%; bottom:auto; opacity:0; transform:rotate(150deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:88%; top:104%; opacity:0; transform:rotate(150deg); } }
.fresnel .enterprise.ruta-1 { animation:ent-r1 30s linear infinite !important; }
.fresnel .enterprise.ruta-2 { animation:ent-r2 30s linear infinite !important; }
.fresnel .enterprise.ruta-3 { animation:ent-r3 30s linear infinite !important; }
@keyframes ent-r1 { 0% { left:102%; top:58%; opacity:0; transform:rotate(-90deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:-5%; top:52%; opacity:0; transform:rotate(-90deg); } }
@keyframes ent-r2 { 0% { left:-5%; top:82%; opacity:0; transform:rotate(85deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:102%; top:76%; opacity:0; transform:rotate(85deg); } }
@keyframes ent-r3 { 0% { left:92%; top:-6%; opacity:0; transform:rotate(-150deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:12%; top:104%; opacity:0; transform:rotate(-150deg); } }
/* Juego: las rutas nunca pasan por detrás de las fichas (franja de arriba o de abajo), y la nave alcanzada desaparece seguro */
.fresnel .halcon.boom, .fresnel .enterprise.boom { visibility:hidden !important; opacity:0 !important; }
@keyframes halcon-r1 { 0% { left:-5%; top:84%; bottom:auto; opacity:0; transform:rotate(90deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:102%; top:80%; opacity:0; transform:rotate(90deg); } }
@keyframes halcon-r2 { 0% { left:102%; top:24%; bottom:auto; opacity:0; transform:rotate(-90deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:-5%; top:30%; opacity:0; transform:rotate(-90deg); } }
@keyframes halcon-r3 { 0% { left:-5%; top:14%; bottom:auto; opacity:0; transform:rotate(90deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:102%; top:20%; opacity:0; transform:rotate(90deg); } }
@keyframes ent-r1 { 0% { left:102%; top:26%; opacity:0; transform:rotate(-90deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:-5%; top:20%; opacity:0; transform:rotate(-90deg); } }
@keyframes ent-r2 { 0% { left:-5%; top:86%; opacity:0; transform:rotate(90deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:102%; top:82%; opacity:0; transform:rotate(90deg); } }
@keyframes ent-r3 { 0% { left:102%; top:12%; opacity:0; transform:rotate(-90deg); } 4% { opacity:.55; } 96% { opacity:.55; } 100% { left:-5%; top:16%; opacity:0; transform:rotate(-90deg); } }
/* mensaje al acertar */
.explosion b { position:absolute; left:50%; top:-3.2rem; transform:translateX(-50%); white-space:nowrap; font:400 .8rem "Courier Prime",monospace; letter-spacing:.3em; text-transform:uppercase; color:#fff; text-shadow:0 0 10px rgba(var(--v),.9); animation:on-target 1.6s ease-out forwards; }
@keyframes on-target { 0% { opacity:0; transform:translate(-50%, 8px) scale(.9); } 15% { opacity:1; transform:translate(-50%, 0) scale(1); } 70% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -14px); } }
.d-txt p { margin:0 0 .8em; }
.d-txt p:last-child { margin-bottom:0; }
/* Documental (escritorio): el texto de cada documental bajo la pantalla, a dos columnas, para que quepa entero */
.d-indice { grid-template-rows:auto auto; align-items:start; }
.d-indice > .d-col { grid-column:1; grid-row:1 / 3; }
.d-indice > .pantalla { grid-column:2; grid-row:1; width:min(100%, calc(48vh * 16 / 9)); justify-self:start; }
.d-indice > .d-txt { grid-column:2; grid-row:2; width:min(100%, calc(48vh * 16 / 9)); column-count:2; column-gap:2.4vw; margin-top:2vh; font-size:.86rem; line-height:1.6; color:rgba(255,255,255,.8); }
.d-indice > .d-txt p { break-inside:avoid; }
.d-indice > .d-txt { max-width:none !important; width:calc(min(100%, 48vh * 16 / 9)) !important; margin:1.6vh 0 0 !important; }
.d-indice { row-gap:0 !important; }
/* sin scroll: foto algo más pequeña */
.d-indice > .pantalla { width:min(100%, calc(40vh * 16 / 9)) !important; }
.d-indice > .d-txt { width:min(100%, calc(40vh * 16 / 9)) !important; font-size:.84rem; line-height:1.55; }
.d-indice > .pantalla, .d-indice > .d-txt { width:min(100%, calc(35vh * 16 / 9)) !important; }
.d-indice > .d-txt { margin-top:1vh !important; line-height:1.5; }
/* ====== Documental v3 (escritorio): índice y texto a la izquierda; imagen a la derecha con el botón de ver en su esquina ====== */
.d-indice { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) !important; grid-template-rows:auto !important; column-gap:4vw; align-items:start; }
.d-indice > .d-col { grid-row:1 !important; display:flex; flex-direction:column; gap:2.4vh; }
.d-indice > .pantalla { grid-column:2; grid-row:1 !important; width:100% !important; position:relative; justify-self:stretch; }
.d-indice .d-col > .d-txt { width:auto !important; column-count:1 !important; margin:0 !important; max-width:none !important; font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.8); padding-top:2vh; border-top:1px solid rgba(var(--plata),.16); }
.d-indice .d-col > .d-txt p { margin:0 0 .9em; }
.pantalla > .d-ver { position:absolute; right:1.2vw; bottom:1.2vw; z-index:3; margin:0; display:flex; gap:.6vw; }
.d-indice > .pantalla-marco { grid-column:2; grid-row:1; position:relative; }
.pantalla-marco > .pantalla { width:100% !important; }
.pantalla-marco > .d-ver { position:absolute; right:1.2vw; bottom:1.2vw; z-index:3; margin:0; display:flex; gap:.6vw; }
/* Servicios: formatos */
.formatos{margin-top:1.6rem}
.fm-tit{font-family:'Courier Prime',monospace;letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;opacity:.7;margin:0 0 .6rem}
.fm-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.fm{position:relative;border:1px solid rgba(255,255,255,.18);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.4rem;background:rgba(0,0,0,.35)}
.fm h3{font-family:Jost,sans-serif;font-weight:300;letter-spacing:.12em;text-transform:uppercase;font-size:1.05rem;margin:0}
.fm p{font-family:'Courier Prime',monospace;font-size:.9rem;margin:0;flex:1}
.fm-cta{align-self:flex-start;border:1px solid currentColor;padding:.35rem .9rem;letter-spacing:.15em;text-transform:uppercase;font-size:.8rem;text-decoration:none}
.fm.dest{border-color:#c9a45c}
.fm.dest .fm-cta{background:#c9a45c;color:#000;border-color:#c9a45c}
.fm-etq{position:absolute;top:-.7rem;left:1rem;background:#c9a45c;color:#000;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;padding:.1rem .5rem}
/* Servicios: formatos como submenú del servicio activo, en la columna izquierda */
.serv-lista .fm-sub{display:none;list-style:none;margin:.6rem 0 1rem 2.2rem;padding:0;gap:.7rem;flex-direction:column}
.serv-lista li:has(button.on) .fm-sub{display:flex}
.fm-sub .fm{padding:.6rem .8rem;background:none}
.fm-sub .fm h3{font-size:.9rem}
.fm-sub .fm p{font-size:.8rem}
.fm-sub .fm-cta{font-size:.7rem;padding:.25rem .7rem}
/* Servicios: submenú de formatos (solo nombres) */
.serv-lista .fm-sub{margin:.3rem 0 .8rem 2.2rem;gap:.2rem}
.fm-b{background:none;border:0;color:inherit;font:inherit;font-size:.85em;letter-spacing:.1em;text-transform:uppercase;opacity:.6;cursor:pointer;padding:.25rem 0;text-align:left;display:flex;align-items:center;gap:.6rem}
.fm-b:hover,.fm-b.on{opacity:1}
.fm-b.on::before{content:'—'}
.fm-b .fm-etq,.fm-hoja .fm-etq{position:static;display:inline-block}
.fm-hoja .fm-etq{margin:0 0 1rem}
.serv-lista .fm-sub .fm-b{width:auto;min-width:0;white-space:nowrap;display:flex;font-size:1em;padding:.25rem 0;border:0;background:none}
.pagehead h1.h1-sm{font-size:3.75rem}
/* Colaborar sin título: el contenido baja por debajo de la cabecera */
.fondo.papel + .serv{padding-top:7rem}
/* Colaborar: menú con la estética de Experiencia (tarjetas con esquina cortada, línea vertical y punto verde) */
.serv-lista { border-left:1px solid rgba(var(--v),.42); padding-left:calc(1.6vw + 6px); display:flex; flex-direction:column; gap:1.2vh; }
.serv-lista > li > button { --ch:14px; position:relative; isolation:isolate; width:100%; display:flex; align-items:center; padding:2.1vh 1.2vw; border:0; background:none; box-shadow:none; white-space:nowrap; text-transform:uppercase; letter-spacing:.16em; font-weight:300; font-size:clamp(.82rem,1vw,1rem); color:rgba(255,255,255,.62); cursor:pointer; transition:color .4s; }
.serv-lista > li > button::before, .serv-lista > li > button::after { content:""; position:absolute; z-index:-1; clip-path:polygon(var(--ch) 0,100% 0,100% 100%,0 100%,0 var(--ch)); transition:background .6s; }
.serv-lista > li > button::before { inset:0; background:linear-gradient(135deg, rgba(var(--plata),.28), rgba(var(--plata),.08) 45%, rgba(var(--plata),.22)); }
.serv-lista > li > button::after { inset:1px; clip-path:polygon(calc(var(--ch) - .5px) 0,100% 0,100% 100%,0 100%,0 calc(var(--ch) - .5px)); background:linear-gradient(180deg,#0b0b0b,#060606); }
.serv-lista > li > button:hover { color:#fff; }
.serv-lista > li > button:hover::before { background:linear-gradient(135deg, rgba(var(--plata),.4), rgba(var(--plata),.1) 45%, rgba(var(--plata),.28)); }
.serv-lista > li > button.on { color:#fff; }
.serv-lista > li > button.on::before { background:linear-gradient(135deg, rgba(var(--v),.5), rgba(var(--plata),.16) 50%, rgba(var(--v),.28)); }
.serv-lista > li > button.on::after { background:linear-gradient(135deg, rgba(var(--v),.07), #070707 55%); }
.serv-lista > li > button .n { display:block; position:absolute; left:calc(-1.6vw - 6px - 8px); top:50%; margin-top:-8px; width:15px; height:15px; border-radius:50%; border:1px solid rgba(var(--v),.72); background:#0b0a08; z-index:2; transition:box-shadow .5s; }
.serv-lista > li > button .n svg { display:none; }
.serv-lista > li > button .n::after { content:""; position:absolute; inset:4px; border-radius:50%; background:rgb(var(--v)); transform:scale(0); transition:transform .45s cubic-bezier(.3,1.4,.5,1); }
.serv-lista > li > button.on .n { box-shadow:0 0 0 5px rgba(var(--v),.14), 0 0 18px rgba(var(--v),.35); }
.serv-lista > li > button.on .n::after, .serv-lista > li > button:hover .n::after { transform:scale(1); }
.serv-lista .fm-sub { margin:1vh 0 .6vh 1.2vw; }
.serv-lista .fm-sub .fm-b.on { color:#fff; } .serv-lista .fm-sub .fm-b.on::before { color:rgb(var(--v)); }
.serv-lista > li > button { letter-spacing:.08em; font-size:clamp(.74rem,.88vw,.9rem); padding:2.1vh .9vw; }
/* Colaborar: submenú de formatos, versión pequeña de las tarjetas */
.serv-lista .fm-sub { margin:1vh 0 .4vh 1.4vw; gap:.6vh; border-left:1px solid rgba(var(--plata),.14); padding-left:0; }
.serv-lista .fm-sub .fm-b { position:relative; width:100%; padding:1.1vh .9vw 1.1vh 1.1vw; font-size:clamp(.7rem,.8vw,.82rem); letter-spacing:.14em; color:rgba(255,255,255,.5); opacity:1; transition:color .4s, background .5s; }
.serv-lista .fm-sub .fm-b::before { content:""; position:absolute; left:-1px; top:20%; bottom:20%; width:1px; background:rgb(var(--v)); transform:scaleY(0); transition:transform .45s cubic-bezier(.3,1.4,.5,1); }
.serv-lista .fm-sub .fm-b:hover { color:#fff; background:linear-gradient(90deg, rgba(var(--plata),.06), transparent 80%); }
.serv-lista .fm-sub .fm-b.on { color:#fff; background:linear-gradient(90deg, rgba(var(--v),.14), transparent 85%); }
.serv-lista .fm-sub .fm-b.on::before, .serv-lista .fm-sub .fm-b:hover::before { transform:scaleY(1); }
.serv-lista .fm-sub .fm-b .fm-etq { margin-left:auto; font-size:.62rem; letter-spacing:.14em; padding:.15rem .45rem; }
/* Colaborar: cambio de hoja solo con fundido, sin desplazamiento */
.serv-hoja { transform:none !important; transition:opacity .45s ease, visibility 0s .45s !important; }
.serv-hoja.on { transition:opacity .45s ease .15s, visibility 0s !important; }
/* Colaborar: estela con X-wing por la línea del menú */
.serv-lista { position:relative; }
.serv-lista .serv-estela { position:absolute; left:-1px; bottom:auto; width:1px; height:0; z-index:1; transition:top .9s cubic-bezier(.65,0,.25,1), height .9s cubic-bezier(.65,0,.25,1); list-style:none; }
.serv-estela[data-dir="ini"] { background:linear-gradient(180deg, rgba(var(--v),.72), rgba(var(--plata),.4) 60%, transparent); }
.serv-estela[data-dir="der"] { background:linear-gradient(180deg, transparent, rgba(var(--plata),.35) 35%, rgba(var(--v),.72)); }
.serv-estela[data-dir="izq"] { background:linear-gradient(0deg, transparent, rgba(var(--plata),.35) 35%, rgba(var(--v),.72)); }
.serv-estela .pf-nave { left:-13px; right:auto; top:auto; }
.serv-estela[data-dir="der"] .pf-nave { bottom:-20px; transform:rotate(90deg); }
.serv-estela[data-dir="izq"] .pf-nave { top:-20px; transform:rotate(-90deg); }
/* el servicio no activo se ve claro para que nadie se lo salte */
.serv-lista > li > button:not(.on) { color:rgba(255,255,255,.88); }
.serv-lista > li > button:not(.on)::before { background:linear-gradient(135deg, rgba(var(--plata),.5), rgba(var(--plata),.16) 45%, rgba(var(--plata),.4)); }
.serv-lista > li > button:not(.on) .n::after { transform:scale(.6); background:rgba(var(--plata),.7); }
/* Menú superior: Colaborar destacado */
nav a.nav-colab { color:#fff; padding:.35em 1em; border:1px solid rgba(var(--v),.6); background:linear-gradient(135deg, rgba(var(--v),.16), transparent 70%); box-shadow:0 0 14px rgba(var(--v),.18); transition:box-shadow .4s, border-color .4s; }
nav a.nav-colab:hover { border-color:rgb(var(--v)); box-shadow:0 0 22px rgba(var(--v),.35); }
/* Sin recuadros: Colaborar destaca solo por color y un subrayado verde fino */
nav a.nav-colab { padding:0; border:0; background:none; box-shadow:none; color:#fff; border-bottom:1px solid rgba(var(--v),.8); }
nav a.nav-colab:hover { box-shadow:none; border-color:rgb(var(--v)); }
/* Menú vertical sin tarjetas: texto limpio, el punto y la línea marcan el activo */
.serv-lista > li > button::before, .serv-lista > li > button::after { display:none; }
.serv-lista > li > button, .serv-lista > li > button:not(.on) { color:#fff; }
.serv-lista > li > button.on { color:rgb(var(--v)); }
.serv-lista .fm-sub .fm-b:hover, .serv-lista .fm-sub .fm-b.on { background:none; }
.serv-lista > li > button, .serv-lista > li > button:not(.on) { opacity:1; }
.serv-lista > li > button.on, .serv-lista > li > button:hover { transform:none; }
.serv-lista .fm-sub .fm-b.dest { flex-wrap:wrap; row-gap:.5vh; white-space:normal; } .serv-lista .fm-sub .fm-b.dest .fm-etq { margin-left:0; flex-basis:auto; }
/* Experiencia · Cine: rótulos discretos de las dos etapas, bajo cada tramo */
.pf-tl-eje { position:relative; }
.pf-tl-eje > .tl-etapa { display:block !important; position:absolute !important; bottom:-3.2vh; font:400 .66rem "Courier Prime",monospace; letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--plata),.5); white-space:nowrap; pointer-events:none; list-style:none; }
.pf-tl-eje > .tl-etapa-a { left:0; } .pf-tl-eje > .tl-etapa-b { right:0; }
.tl-etapas { display:flex; justify-content:space-between; margin-top:2.4vh; font:400 .66rem "Courier Prime",monospace; letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--plata),.5); }
/* Experiencia: botón de la foto con + apagado (no borrar) */
.pf-intro-btn { display:none !important; }
/* Botón Contratar también en Colaborar y Créditos */
.serv, .cred-cab { position:relative; }
.serv > .foco-btn { top:-1vh; right:0; }
.cred-cab > .foco-btn { top:0; }
.serv > .foco-btn { top:auto; bottom:4vh; left:1.6vw; right:auto; }

.cred-cab > .foco-btn { position:relative; display:inline-grid; vertical-align:middle; top:auto; right:auto; margin-left:2.4vw; width:60px; height:60px; }
/* Contratar en Colaborar y Créditos: mismas coordenadas que en Cine y Branded */
.serv > .foco-btn, .cred-cab > .foco-btn { position:fixed; display:grid; top:calc(10vh + 4px); right:4vw; bottom:auto; left:auto; width:92px; height:92px; margin:0; z-index:5; }
/* Créditos: cabe en pantalla sin scroll (en 16:9 se pasaba 25px) */
body:has(.caras-rejilla) .cred-cab { padding-top:4.5vh; } body:has(.caras-rejilla) .creditos { padding-top:.8vh; }
/* Portfolio: títulos del mismo tamaño que Créditos */
.pagehead h1.port-tit { font-size:3.4rem; letter-spacing:.16em; font-weight:200; }
/* Cine y Branded: tira de miniaturas bajo el carrusel apagada hasta que haya más portfolio (no borrar) */
.carrusel.car-logos .car-minis { display:none !important; }
/* Footer siempre pegado abajo, con el mismo margen en cualquier pantalla */
body { min-height:100vh; display:flex; flex-direction:column; }
body > footer { margin-top:auto; }
/* Páginas legales: sin scroll en 16:9, texto a columnas a todo el ancho, sin adornos */
body:has(.legal) .pagehead { padding-top:9vh; padding-bottom:1vh; }
body:has(.legal) .pagehead h1 { font-size:2.2rem; }
.legal { max-width:none; columns:3; column-gap:3vw; padding:1vh 4vw 2vh; font-size:.82rem; line-height:1.45; }
.legal p { max-width:none; margin:0 0 .7em; }
.legal h2 { margin:1.6vh 0 .6vh; font-size:.72rem; break-after:avoid; }
.legal .spec { margin:.6em 0; } .legal .spec dd { font-size:.82rem; line-height:1.45; }
.legal-fecha { margin-top:1.2vh !important; }
.legal { columns:4; column-gap:2.4vw; }
.legal dl, .legal .spec, .legal div, .legal section { break-inside:auto; }
.legal { display:block !important; columns:3; column-gap:3vw; }
/* Móvil: base para lo añadido en esta sesión */
/* Tablet: el menú superior cabe entero */
@media (min-width:601px) and (max-width:1100px) { header nav a { letter-spacing:.1em !important; font-size:10px !important; } header nav { gap:14px !important; } header nav .sep { margin:0 !important; } }
/* Teatro: carteles enteros, sin recortar los laterales */
.pf-tl-teatro figure img { object-fit:contain !important; background:#050505; }
.pf-tl-teatro figure { aspect-ratio:1 / 1.414 !important; height:auto !important; } .pf-tl-teatro figure img { object-fit:cover !important; width:100%; height:100%; }
.pf-tl-teatro figure { width:7.4vw !important; max-width:none !important; }
.pf-tl-teatro .tl-punto { width:7.4vw !important; }
.pf-tv-destacado .pf-tv-nota { height:auto !important; max-height:none !important; overflow:visible !important; } .pf-tv-destacado .pf-tv-nota p { font-size:.78rem; line-height:1.45; }
.pf-tv-destacado .pf-tv-nota p { text-align:justify; hyphens:auto; }
main.fc-plantilla .top-v .fotos-car { padding-left:0 !important; padding-right:2.4vw !important; border-left:0 !important; }
main.fc-plantilla .top-v .fotos-car .car-card { height:auto !important; aspect-ratio:3 / 2 !important; } main.fc-plantilla .top-v .fotos-car .car-card img { width:100% !important; height:100% !important; object-fit:contain; }
main.fc-plantilla .top-v:has(.fotos-car) { grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr) !important; }
main.fc-plantilla:has(.fotos-car) .detail.extra { display:none; }
main.fc-plantilla .top-v .fotos-car .car-card { aspect-ratio:auto !important; height:min(32vh,20vw) !important; }
/* Fichas: el texto ya va en la columna derecha; abajo solo quedan los datos extra si los hay */
main.fc-plantilla:has(.fc-texto) .detail.extra .text { display:none; }
main.fc-plantilla:has(.fc-texto) .detail.extra:not(:has(dl)) { display:none; }
main.fc-plantilla .detail.extra { display:none !important; }
/* Franja de datos de las fichas: los valores se leen enteros, en varias líneas si hace falta */
main.fc-plantilla .franja .spec dd, main.fc-plantilla .franja .spec dt { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; max-width:none !important; -webkit-line-clamp:unset !important; display:block; }
main.fc-plantilla .franja .spec > div { min-width:0; }
main.fc-plantilla .franja { height:auto !important; max-height:none !important; overflow:visible !important; }
/* Ficha Adidas: texto largo, letra e interlineado algo menores para que quepa */
main.fc-plantilla:has(img[src*="adidas-real-madrid"]) .fc-texto p { font-size:min(1.53vh, .86vw) !important; line-height:1.45 !important; margin-bottom:.5em !important; }
/* Experiencia · Cine: texto de las dos etapas sobre la línea de tiempo */
.pf-cine-etapas { margin-top:1vh; } .pf-cine-etapas p { margin:0 0 .7em !important; line-height:1.5 !important; font-size:min(1.5vh, .85vw) !important; }
@media (min-width:1500px) { #pf-x-cine .pf-tl-eje .tl-punto { width:min(100%, 6.6vh) !important; margin-inline:auto; } }
/* Portfolio Branded: enlace a la trayectoria subrayado */
.port-texto a { color:inherit; text-decoration:underline; text-decoration-color:rgba(var(--v),.8); text-underline-offset:.22em; text-decoration-thickness:1px; transition:color .3s; } .port-texto a:hover { color:#fff; text-decoration-color:rgb(var(--v)); }
/* Perfil: la fila de roles es una descripción, no un menú: más pequeña, cursiva y gris */
.pf-perfil .pf-billing li, .pf-perfil .pf-billing b { cursor:default; pointer-events:none; }
.pf-perfil .pf-billing b { font-style:italic; font-weight:300; text-transform:none; letter-spacing:.04em; color:rgba(255,255,255,.55); font-size:.82em; }
/* Visor: fuera el ▸▸ de la esquina inferior derecha (parecía un botón) */
.visor .fwd { display:none !important; }
/* Ficha Padre (la serie): mismo ajuste que Adidas para que el texto quepa */
main.fc-plantilla:has(img[src*="caso-padre-no-hay-mas-que-uno"]) .fc-texto p { font-size:min(1.53vh, .86vw) !important; line-height:1.45 !important; margin-bottom:.5em !important; }
/* Home: logo Bowfinger International en blanco (la imagen tiene fondo blanco: se invierte y el negro se funde) */
.seen-on img.bowf { filter:invert(1) grayscale(1) brightness(1.4); mix-blend-mode:screen; height:28px !important; opacity:.7; }
.seen-on img[alt="Sony Pictures"] { height:12px !important; }
.seen-on img.nflx { filter:grayscale(1); mix-blend-mode:screen; height:16px !important; opacity:.6; }
.seen-on img[alt="A Contracorriente Films"] { height:20px !important; }
.visor .rew { display:none !important; }
/* Home: logos a una altura visual parecida (referencia: Sony Pictures) */
.seen-on img[alt="Prime Video"] { height:22px !important; }
.seen-on img[alt="Atresplayer"] { height:18px !important; }
.seen-on img[alt="A Contracorriente Films"] { height:24px !important; }
.seen-on img.nflx { height:15px !important; }
.seen-on img.bowf { height:26px !important; }
/* Ficha Tierra de Nadie (cine): mismo ajuste que Adidas para que el texto quepa */
main.fc-plantilla:has(img[src*="cartel-tdn-largometraje"]) .fc-texto p { font-size:min(1.53vh, .86vw) !important; line-height:1.4 !important; margin-bottom:.45em !important; }
main.fc-plantilla:has(img[src*="cartel-tdn-largometraje"]) .fc-texto { justify-content:flex-start !important; }
/* Fichas: botones de ver (Atresplayer, Prime…) en una fila al final del texto */
main.fc-plantilla .fc-texto .watchrow { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:.4vw; margin-top:.6vh; }
main.fc-plantilla .fc-texto .watchrow .watch { padding:.4em .55em !important; gap:.35em !important; font-size:min(1.15vh,.66vw) !important; letter-spacing:.02em !important; white-space:nowrap; flex:0 1 auto; min-width:0; min-height:0 !important; height:auto !important; }
main.fc-plantilla .fc-texto .watchrow .watch img { height:1.2em !important; width:auto !important; }
main.fc-plantilla:has(img[src*="caso-padre-no-hay-mas-que-uno"]) .fc-texto p { margin-bottom:.45em !important; line-height:1.4 !important; }
main.fc-plantilla .fc-texto .watchrow .watch { overflow:hidden; } main.fc-plantilla .fc-texto .watchrow .watch span { overflow:hidden; text-overflow:ellipsis; }
/* Textos de las fichas y de Portfolio Documental: justificados */
main.fc-plantilla .fc-texto p, .d-txt p { text-align:justify; hyphens:auto; }
/* Sin cortar palabras con guion en ningún texto */
main.fc-plantilla .fc-texto p, .d-txt p, .pf-tv-destacado .pf-tv-nota p { hyphens:manual !important; -webkit-hyphens:manual !important; }
/* Fichas: las flechas de navegación se ponen verdes al pasar el cursor */
.fc-nav a:hover .cur-flecha svg, .pnav a:hover .cur-flecha svg, .fc-head .back:hover .cur-flecha svg { fill:rgb(var(--v)); transition:fill .3s; }
/* Fichas: fuera la franja de datos (Rol, Dirección, Producción…), apagada por temas legales (no borrar) */
main.fc-plantilla .franja { display:none !important; }
/* Fichas: los reels verticales se previsualizan en vertical (9:16), centrados, sin cambiar el hueco de la plantilla */
main.fc-plantilla .reels-car .car-card.reel { display:flex; flex-direction:column; align-items:center; justify-content:center; }
main.fc-plantilla .reels-car .car-card.reel .clip { aspect-ratio:9 / 16 !important; height:auto !important; width:auto !important; max-width:100%; max-height:calc(100% - 2.2em); flex:0 1 auto; align-self:center; }
main.fc-plantilla .reels-car .car-card.reel .clip .ph { position:absolute; inset:0; height:100% !important; }
main.fc-plantilla .top-v .carrusel .car-card.pieza169 { display:flex; flex-direction:column; justify-content:center; }
main.fc-plantilla .top-v .carrusel .car-card .clip { margin-left:auto !important; margin-right:auto !important; }
main.fc-plantilla .fc-texto .fc-texto-etq { color:rgb(var(--v)) !important; opacity:1 !important; }
.serv-hoja .bc-intro { margin:0 0 1.6vh; max-width:none !important; width:100%; }
.marcas-pie .bc-360 { margin-top:.5vh; max-width:none !important; width:100%; grid-column:1 / -1; grid-row:2; } .marcas-pie .bc-360 a { color:inherit; text-decoration:underline; text-decoration-color:rgba(var(--v),.8); text-underline-offset:.2em; }
.serv-hoja.marcas .marcas-pie { max-width:none !important; width:100% !important; }
.marcas-pie .bc-360b { grid-row:3; margin-top:0 !important; }
.serv-hoja.marcas .marcas-pie { row-gap:.4vh !important; margin-top:1vh !important; }
.serv-hoja.marcas .marcas-pie p { margin-bottom:0 !important; }
/* Brand Cinema: textos con tono de cine (cabecera de cartel + nota de guion + llamada) */
.serv-hoja.marcas .bc-lema { font-family:Jost, sans-serif; font-weight:200; font-size:min(2.1vh,1.2vw); letter-spacing:.06em; line-height:1.45; color:#fff; }
.serv-hoja.marcas .bc-lema span { display:block; }
.serv-hoja.marcas .bc-lema span + span { color:rgba(255,255,255,.62); font-size:.82em; }
.serv-hoja.marcas .marcas-pie .bc-360 { font-family:"Courier Prime", monospace; font-size:min(1.45vh,.82vw); line-height:1.6; color:rgba(255,255,255,.72); border-left:1px solid rgba(var(--v),.6); padding-left:1.2vw; margin-top:1.4vh !important; }
.serv-hoja.marcas .marcas-pie .bc-360b { border-left:0; padding-left:0; margin-top:.8vh !important; font-family:Jost, sans-serif; text-transform:uppercase; letter-spacing:.22em; font-size:min(1.15vh,.66vw); color:rgba(255,255,255,.55); }
.serv-hoja.marcas .marcas-pie .bc-360b a { color:rgb(var(--v)); text-decoration:none; border-bottom:1px solid rgba(var(--v),.6); }
.serv-hoja.marcas .marcas-pie .bc-360b a:hover { color:#fff; }
/* Brand Cinema: textos como cartelas de tráiler (una sola familia, centrados, mucho tracking) */
.serv-hoja.marcas .marcas-pie { text-align:center; justify-items:center; padding-top:1.6vh; background:linear-gradient(90deg, transparent, rgba(var(--plata),.25), transparent) top / 60% 1px no-repeat; }
.serv-hoja.marcas .bc-lema { font-family:Jost, sans-serif; font-weight:300; text-transform:uppercase; letter-spacing:.32em; font-size:min(1.25vh,.72vw); line-height:2; color:#fff; }
.serv-hoja.marcas .bc-lema span + span { text-transform:none; letter-spacing:.04em; font-style:italic; font-weight:200; font-size:min(1.6vh,.9vw); color:rgba(255,255,255,.6); }
.serv-hoja.marcas .marcas-pie .bc-360 { font-family:Jost, sans-serif; font-weight:200; font-size:min(1.75vh,1vw); line-height:1.55; letter-spacing:.02em; color:rgba(255,255,255,.88); border-left:0; padding-left:0; max-width:60em !important; margin-inline:auto; }
.serv-hoja.marcas .marcas-pie .bc-360b { font-weight:300; letter-spacing:.3em; font-size:min(1.1vh,.64vw); color:rgba(255,255,255,.5); }
.serv-hoja.marcas .bc-lema { grid-column:1 / -1; width:100%; }
.serv-hoja.marcas .marcas-pie p, .serv-hoja.marcas .marcas-pie p span { text-align:center !important; margin-left:auto !important; margin-right:auto !important; justify-self:center !important; }
.serv-hoja.marcas .bc-lema { width:100% !important; max-width:none !important; justify-self:stretch !important; } .serv-hoja.marcas .bc-lema span { white-space:normal !important; width:auto !important; }
/* Brand Cinema: el lema sube bajo el título, alineado a la izquierda como el resto de la cabecera */
.serv-hoja.marcas .bc-lema { text-align:left !important; margin:0 0 1vh !important; grid-column:auto; justify-self:auto !important; }
.serv-hoja.marcas .bc-lema span { text-align:left !important; margin-left:0 !important; }
.serv-hoja.marcas .bc-intro { text-align:center; margin:1.6vh 0 0 !important; font-weight:200; font-size:min(1.75vh,1vw); letter-spacing:.02em; color:rgba(255,255,255,.88); }
.marcas-pie .bc-360b { grid-row:auto !important; } .serv-hoja.marcas .bc-intro { max-width:62em !important; margin-left:auto !important; margin-right:auto !important; line-height:1.55; }
/* Brand Cinema: párrafo serio, justificado y con interlineado amplio, como el resto de textos de la web */
.serv-hoja.marcas .bc-intro { text-align:justify !important; text-align-last:left; hyphens:manual; max-width:none !important; margin:2vh 0 0 !important; font-family:Jost, sans-serif; font-weight:300; font-size:min(1.6vh,.92vw); line-height:1.8; letter-spacing:.01em; color:rgba(255,255,255,.82); }
.serv-hoja.marcas .marcas-pie { text-align:left; justify-items:start; background:none; padding-top:0; }
.serv-hoja.marcas .marcas-pie .bc-360b { text-align:left !important; margin-left:0 !important; justify-self:start !important; margin-top:1.4vh !important; }
.serv-hoja.marcas .marcas-pie { justify-items:center !important; } .serv-hoja.marcas .marcas-pie .bc-360b { text-align:center !important; justify-self:center !important; margin-left:auto !important; margin-right:auto !important; }
.serv-hoja.marcas .bc-firma { margin-top:.6vh !important; }
/* Colaborar: huecos de imagen provisionales del storyboard */
.storyboard .sb-hueco { aspect-ratio:16 / 9; display:grid; place-items:center; background:#0d0d0d; border:1px dashed rgba(var(--plata),.25); color:rgba(255,255,255,.35); font:400 .7rem "Courier Prime",monospace; letter-spacing:.2em; text-transform:uppercase; }
.storyboard figure:has(.sb-hueco) { pointer-events:none; }


/* Pantalla de carga con el bufón: aparece solo si la carga pasa de medio segundo */
.carga{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none;transition:opacity .45s,visibility 0s .45s}
.carga::before{content:"";position:absolute;inset:0;background:#070707;opacity:0;animation:carga-in .4s .5s forwards}
.carga img{position:relative;height:18vh;width:auto;opacity:0;animation:carga-in .4s .5s forwards,carga-bufon 1.6s ease-in-out infinite;transform-origin:50% 20%}
@keyframes carga-in{to{opacity:1}}
@keyframes carga-bufon{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
html.cargada .carga{opacity:0;visibility:hidden}
@media (prefers-reduced-motion: reduce){.carga img{animation:carga-in .4s .5s forwards}}

/* 404: el bufón dentro de la cuenta atrás, con el número debajo */
.no-encontrada .cuenta{width:min(24vh,13vw);height:min(24vh,13vw);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4vh}
.no-encontrada .cuenta-logo{position:relative;height:42%;width:auto}
.no-encontrada .cuenta span{font-size:min(2.6vh,1.4vw);padding:0 .6vh}

/* Pantalla de carga: rótulo «Loading» y barrita verde que avanza y se completa al terminar */
.carga{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.6vh}
.carga-txt,.carga-barra{position:relative;opacity:0;animation:carga-in .4s .5s forwards}
.carga-txt{font:300 min(1.6vh,.9vw) Jost,sans-serif;letter-spacing:.5em;text-transform:uppercase;color:#d1d1d1;margin-right:-.5em}
.carga-barra{display:block;width:22vh;height:2px;background:rgba(var(--v),.14);overflow:hidden}
.carga-barra b{display:block;height:100%;width:0;background:rgb(var(--v));box-shadow:0 0 1vh rgba(var(--v),.72);animation:carga-avance 5s cubic-bezier(.15,.7,.3,1) .5s forwards}
@keyframes carga-avance{to{width:92%}}
html.cargada .carga-barra b{animation:none;width:100%;transition:width .3s}


/* Créditos: más aire. La rejilla de caras usa todo el ancho (19 columnas, 3 filas) y el título baja para no pisar el bufón */
@media (min-width:901px){
  .caras-rejilla.filmo-caras{grid-template-columns:repeat(19,minmax(0,1fr));width:100%;gap:3vh .55vw}
  body:has(.caras-rejilla) .cred-cab{padding:calc(26px + 4.2vh + 3vh) calc(4vw + 92px + 2vw) 0 4vw}
  body:has(.caras-rejilla) .cred-cab .cred-sub:first-of-type{margin-top:1.6vh}
  body:has(.caras-rejilla) .creditos{padding-top:4vh}
}
/* Créditos: nota de derechos mucho más pequeña */
.tablero-nota{font-size:.56rem}


/* Portfolio Cine y Branded: el bufón como botón a Colaborar, abajo en el centro */
.port-colab{position:fixed;left:50%;bottom:calc(3.2rem + 3vh);transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:1vh;text-decoration:none}
.port-colab .bufon{height:8.5vh;width:auto;transition:transform .35s}
.port-colab span{font:300 min(1.3vh,.75vw) Jost,sans-serif;letter-spacing:.4em;margin-right:-.4em;text-transform:uppercase;color:#d1d1d1;transition:color .3s,text-shadow .3s}
.port-colab:hover .bufon{transform:rotate(-8deg) scale(1.06)}
.port-colab:hover span{color:#fff;text-shadow:0 0 12px rgba(var(--v),.72)}
/* el botón Colaborar va encima de los iconos sociales (abajo a la derecha), centrado sobre ellos */
.port-colab{left:auto;right:calc(5vw + 3rem);transform:translateX(50%);bottom:calc(3.2rem + 1.6vh + 2rem + 1.8vh)}
/* «Colaborar» solo aparece al pasar el ratón */
.port-colab span{opacity:0;transition:opacity .3s,color .3s,text-shadow .3s}
.port-colab:hover span,.port-colab:focus-visible span{opacity:1}
/* el rótulo sale encima del bufón, sin ocupar alto */
.port-colab span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:.8vh;white-space:nowrap}
/* «Colaborar» siempre visible, en gris, entre el bufón y los iconos sociales; en verde al pasar el ratón */
.port-colab{gap:.6vh}
.port-colab .bufon{height:8vh}
.port-colab span{position:static;transform:none;margin:0 -.4em 0 0;opacity:1;color:rgba(var(--plata),.55)}
.port-colab:hover span,.port-colab:focus-visible span{color:rgb(var(--v));text-shadow:none}

/* Bufón de Colaborar: destello de luz que lo cruza despacio cada pocos segundos */
.port-colab .bufon-w{position:relative;display:block;line-height:0;-webkit-mask:url(assets/logos/bufon-256.png) center/contain no-repeat;mask:url(assets/logos/bufon-256.png) center/contain no-repeat;transition:transform .35s}
.port-colab .bufon-w::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;animation:bufon-brillo 7s ease-in-out infinite}
@keyframes bufon-brillo{0%,70%{background-position:150% 0}100%{background-position:-50% 0}}
.port-colab:hover .bufon-w{transform:rotate(-8deg) scale(1.06)}
.port-colab:hover .bufon{transform:none}
@media (prefers-reduced-motion: reduce){.port-colab .bufon-w::after{animation:none}}



/* Contacto: el bufón en monocromo como sello de marca de fondo, grande y muy tenue detrás de la tarjeta */
.contactpage .marca-fondo{position:fixed;left:50%;top:52%;height:82vh;aspect-ratio:1;transform:translate(-50%,-50%);background:url(assets/logos/bufon-mono.png) center/contain no-repeat;opacity:.075;pointer-events:none;z-index:0;-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent)}
.contactpage .tarjeta{position:relative;z-index:1}

/* Colaborar: sin iconos sociales, el texto de abajo respira más */
.serv-hoja.marcas .bc-intro{margin-top:4.2vh !important}
.serv-hoja.marcas .bc-firma{margin-top:1.4vh !important}
.serv-hoja.marcas .marcas-pie{margin-top:4.6vh !important}

/* Contacto: capa en color de la máscara (se enciende al disparar el obturador) */
.contactpage .marca-fondo::after{content:"";position:absolute;inset:0;background:url(assets/logos/bufon-1254.png) center/contain no-repeat;opacity:0}

@media (prefers-reduced-motion:reduce){.contactpage .marca-fondo,.contactpage .marca-fondo::after{animation:none}}

/* Contacto: mientras el cursor está sobre el nombre, el obturador se queda abierto y la luz va subiendo poco a poco, como en una larga exposición */
.tarjeta .t-nombre{cursor:default}
body:has(.tarjeta .t-nombre:hover) .visor.cielo .iris{animation:obt-iris 7s cubic-bezier(.3,0,.5,1) forwards}
body:has(.tarjeta .t-nombre:hover) .visor.cielo .destello{animation:obt-luz 7s cubic-bezier(.3,0,.5,1) forwards}
body:has(.tarjeta .t-nombre:hover) .contactpage .marca-fondo{animation:obt-marca 7s cubic-bezier(.3,0,.5,1) forwards}
body:has(.tarjeta .t-nombre:hover) .contactpage .marca-fondo::after{animation:obt-color 7s cubic-bezier(.3,0,.5,1) forwards}
@keyframes obt-iris{to{opacity:.34}}
@keyframes obt-luz{to{opacity:1;filter:brightness(1.8)}}
@keyframes obt-marca{to{opacity:.5}}
@keyframes obt-color{to{opacity:1;filter:brightness(1.25)}}

/* Contacto: idiomas justo debajo de «Disponible worldwide» */
.tarjeta .t-idiomas{margin-top:1vh}

/* Contacto: al pasar el ratón por el correo o el teléfono salta el obturador; la máscara se ve en color un segundo y pico y se desvanece despacio.
   main.js pone body.dispara unos 4 s, así la animación termina aunque el ratón ya se haya ido */
body.dispara .visor.cielo .iris{animation:iris-disparo 1.1s cubic-bezier(.2,.7,.2,1) 1}
body.dispara .visor.cielo .destello{animation:destello-disparo 1.1s ease-out 1}
body.dispara .contactpage .marca-fondo{animation:marca-disparo 4s linear 1}
body.dispara .contactpage .marca-fondo::after{animation:marca-disparo-color 4s linear 1}
@keyframes marca-disparo{0%{opacity:.075}8%{opacity:.6}38%{opacity:.55}100%{opacity:.075}}
@keyframes marca-disparo-color{0%{opacity:0}8%{opacity:1}38%{opacity:.95}100%{opacity:0}}

/* Home: al pasar el ratón por la imagen de un portfolio aparece «Ver portfolio …» en la esquina */
.proj .ver-bufon{position:absolute;right:1.4vw;bottom:1.6vh;display:flex;align-items:center;gap:1vw;z-index:2;pointer-events:none}
.proj .vb-txt{font:300 min(1.3vh,.75vw) Jost,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;transform:translateX(1vw);transition:opacity .4s,transform .4s;text-shadow:0 0 1.2vh rgba(0,0,0,.9)}
.proj .clip.hero:hover .vb-txt,.proj .clip.hero:focus-visible .vb-txt{opacity:1;transform:none}
.proj .ver-bufon{flex-direction:column;gap:.9vh;right:1.2vw;bottom:1.4vh}
.proj .vb-txt{font-size:min(1.05vh,.6vw);letter-spacing:.28em;margin-right:-.28em;transform:translateY(-.6vh)}
/* v3: sin botón; solo el rótulo «Ver portfolio …» en la esquina al pasar el ratón por la imagen */
.proj .ver-bufon{right:1.4vw;bottom:1.8vh}
.proj .vb-txt{font-size:min(1.2vh,.68vw);transform:translateY(.6vh)}

/* Home: título y mini ficha como faldón sobre la parte baja de la imagen (menos saturación debajo); los enlaces a plataformas siguen debajo, a la derecha */
.proj .hero-wrap{position:relative}
.proj .faldon{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:6vh 1.4vw 1.8vh;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55) 45%,rgba(0,0,0,.85));pointer-events:none;border-radius:0 0 inherit inherit}
.proj .faldon .mono{font-size:min(1.1vh,.62vw);letter-spacing:.3em;color:rgba(255,255,255,.7)}
.proj .faldon h2{margin:.6vh 0 0;font-weight:200;font-size:min(2vh,1.15vw);letter-spacing:.16em;text-transform:uppercase;line-height:1.25}
.proj .faldon h2 a{pointer-events:auto;color:#fff;text-decoration:none}
.proj .faldon h2 a:hover{color:rgb(var(--v))}
.proj .clip.hero .ver-bufon{z-index:2}
body:has(.intro.banner) .proj .meta{justify-content:flex-end;margin-top:1.2vh}

/* Home, faldón cinematográfico: etiqueta corta en máquina de escribir tras un filete verde y el título fino con mucho tracking; plataformas en una línea */
.proj .faldon{padding:7vh 1.8vw 2.2vh}
.proj .faldon .f-etq{display:flex;align-items:center;gap:.9vw;font:400 min(1.15vh,.65vw) "Courier Prime",monospace;letter-spacing:.34em;text-transform:uppercase;color:rgba(var(--plata),.8)}
.proj .faldon .f-etq::before{content:"";width:2.4vw;height:1px;background:rgba(var(--v),.8)}
.proj .faldon h2{margin-top:1.1vh;font-size:min(2.3vh,1.3vw);letter-spacing:.24em;line-height:1.35;text-shadow:0 .2vh 1.6vh rgba(0,0,0,.6)}
body:has(.intro.banner) .proj .meta .facts{flex-direction:row;align-items:center;gap:.6vw}

/* Juego de las naves: fuera el círculo verde de la onda; queda solo el destello de la explosión */
.explosion::after{display:none}

/* Perfil: «Un filmmaker / Yo» como tabla comparativa sobria (cabeceras con tracking, «Yo» subrayado en verde, filetes finos entre filas) */
.pf-vs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:3vw;margin-top:2.4vh}
.pf-vs > div{display:contents}
.pf-vs-cab span{font:300 min(1.5vh,.85vw) Jost,sans-serif;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.55);padding-bottom:1.6vh}
.pf-vs-cab span:last-child{color:#fff;justify-self:start;position:relative}
.pf-vs-cab span:last-child::after{content:"";position:absolute;left:0;bottom:.8vh;width:2.6em;height:2px;background:rgb(var(--v))}
.pf-vs-fila span{padding:1.6vh 0;font:300 min(1.6vh,.9vw)/1.55 Jost,sans-serif;border-top:1px solid rgba(var(--plata),.12)}
.pf-vs-fila span:first-child{color:rgba(255,255,255,.5)}
.pf-vs-fila span:last-child{color:#fff;font-weight:400}
.pf-vs-cab + .pf-vs-fila span{border-top:0}
body:has(.pf-paneles) .pf-medio .pf-guion > .pf-vs{display:grid;gap:0 3vw}
body:has(.pf-paneles) .pf-medio .pf-guion > .pf-vs{margin:3.2vh 0 2vh}
.pf-vs-fila span{padding:1.9vh 0}


/* ====== Perfil v4: arriba la bobina, el titular y, a la derecha, la tabla Un filmmaker / Yo en un recuadro pequeño;
   debajo, a todo el ancho, los tres párrafos ====== */
@media (min-width:901px){
  body:has(.pf-paneles) .pf-perfil .pf-medio.pf-v3{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:3.5vw;row-gap:4.5vh;align-items:center;align-content:center}
  body:has(.pf-paneles) .pf-v3 .pf-reel-fig{display:block;margin:0;grid-column:1;grid-row:1}
  body:has(.pf-paneles) .pf-v3 .pf-reel-fig .pf-pantalla{width:calc(24vh * 16 / 9);max-width:30vw;aspect-ratio:16/9;height:auto}
  .pf-v3 > .pf-tit{grid-column:2;grid-row:1;margin:0;font:200 min(3.2vh,1.8vw)/1.35 Jost,sans-serif;letter-spacing:.03em;color:#fff}
  .pf-v3 .pf-texto{grid-column:1 / -1;grid-row:2;display:flex;flex-direction:column;gap:1.4vh;padding-top:3.5vh;border-top:1px solid rgba(var(--plata),.12)}
  .pf-v3 .pf-texto p{margin:0;max-width:none;font:300 min(1.95vh,1.1vw)/1.6 Jost,sans-serif;color:rgba(255,255,255,.85);text-align:justify;text-align-last:left;hyphens:none}
  .pf-v3 > .pf-vs-caja{grid-column:3;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:1.4vh}
  body:has(.pf-paneles) .pf-perfil .pf-v3 .pf-vs-caja > .pf-vs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 1.6vw;margin:0;width:min(30vw,52vh);padding:1.6vh 1.4vw;border:1px solid rgba(var(--plata),.18);border-radius:4px;background:rgba(255,255,255,.02)}
  .pf-v3 .pf-vs-cab span{font-size:min(1.1vh,.62vw);letter-spacing:.32em;padding-bottom:1vh}
  .pf-v3 .pf-vs-cab span:last-child::after{bottom:.4vh;height:1px}
  .pf-v3 .pf-vs-fila span{font-size:min(1.25vh,.7vw);line-height:1.45;padding:.9vh 0}
}
/* Perfil: título discreto sobre la tabla, «No soy un filmmaker» con filmmaker tachado */
.pf-vs-tit{margin:0;text-align:center;font:300 min(1.25vh,.7vw) Jost,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.pf-vs-tit del{text-decoration:line-through;text-decoration-color:rgba(var(--plata),.75);text-decoration-thickness:1px;color:inherit}
/* el tachado baja por debajo del centro de las letras y es más fino, para que «filmmaker» se lea bien */
.pf-vs-tit del{text-decoration:none;position:relative}
.pf-vs-tit del::after{content:"";position:absolute;left:-.15em;right:.15em;top:64%;height:1px;background:rgba(var(--plata),.55)}

/* Perfil: las cuatro frases más pequeñas, en cursiva y algo más grises, con la flecha verde; el bloque centrado y las frases alineadas entre sí */
@media (min-width:901px){
  .pf-v3 .pf-texto{display:grid;justify-content:center;gap:1.3vh}
  .pf-v3 .pf-texto p{position:relative;padding-left:2em;font-size:min(1.7vh,.95vw);font-style:italic;color:rgba(255,255,255,.68);text-align:left}
  .pf-v3 .pf-texto p::before{content:"";position:absolute;left:0;top:.5em;width:1.1em;height:.8em;background:rgba(var(--v),.72);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M1 1h6.5l8 10-8 10H1l8-10z'/%3E%3Cpath d='M13 1.5L29 11 13 20.5l6.5-9.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M1 1h6.5l8 10-8 10H1l8-10z'/%3E%3Cpath d='M13 1.5L29 11 13 20.5l6.5-9.5z'/%3E%3C/svg%3E") center/contain no-repeat}
}
/* Perfil: «No soy una línea recta» (tachado) sobre las cuatro frases, igual que el título de la tabla */
@media (min-width:901px){
  .pf-v3 .pf-texto p.pf-vs-tit{padding-left:0;justify-self:center;margin-bottom:.8vh;font-style:normal;font-size:min(1.25vh,.7vw);color:rgba(255,255,255,.45);text-align:center}
  .pf-v3 .pf-texto p.pf-vs-tit::before{content:none}
}

/* Menú: un reflejo de luz cruza «Colaborar» cada 30 s. Va en una copia de la palabra superpuesta, así la palabra normal no cambia */
header nav a.nav-colab{position:relative}
header nav a.nav-colab::after{content:"Colaborar";position:absolute;left:0;top:0;pointer-events:none;color:transparent;-webkit-text-fill-color:transparent;background:linear-gradient(100deg,transparent 40%,rgba(var(--v),.55) 46%,rgb(var(--v)) 50%,rgba(var(--v),.55) 54%,transparent 60%) no-repeat;background-size:350% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 6px rgba(var(--v),.8));animation:colab-reflejo 30s linear 3s infinite}
@keyframes colab-reflejo{0%{background-position:100% 0}6%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){header nav a.nav-colab::after{animation:none}}

/* Fichas: el nombre de la ficha anterior y siguiente, muy pequeño y discreto */
.pnav .prev h3,.pnav .next h3{font-size:min(1.15vh,.65vw);letter-spacing:.28em;margin-top:.6vh;color:rgba(255,255,255,.5)}

/* Colaborar · Arte Buscavidas: el cuento del bufón por capítulos (imagen a la izquierda, texto a la derecha, sin scroll) */
.cuento .cu-sub{margin:.8vh 0 0;font:400 min(1.3vh,.74vw) "Courier Prime",monospace;letter-spacing:.3em;text-transform:uppercase;color:rgba(var(--plata),.7)}
.cuento .cu-caps{margin-top:3.2vh}
.cuento .cu-cap{display:none;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2.6vw;align-items:start}
.cuento .cu-cap.on{display:grid;animation:cu-entra .6s ease both}
@keyframes cu-entra{from{opacity:0}to{opacity:1}}
.cuento figure{margin:0}
.cuento figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(var(--plata),.22);border-radius:3px}
.cuento .cu-logo{display:grid;place-items:center;aspect-ratio:16/9;border:1px solid rgba(var(--plata),.14);border-radius:3px;background:radial-gradient(closest-side,rgba(255,255,255,.04),transparent)}
.cuento .cu-logo img{width:auto;height:72%;aspect-ratio:1;border:0;object-fit:contain}
.cuento .cu-txt h3{margin:0 0 1.4vh;font:200 min(2.2vh,1.25vw)/1.3 Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.cuento .cu-txt h3 span{display:block;margin-bottom:.6vh;font:400 min(1.15vh,.65vw) "Courier Prime",monospace;letter-spacing:.3em;color:rgba(var(--v),.85)}
.cuento .cu-txt p{margin:0 0 .9vh;font:300 min(1.55vh,.88vw)/1.6 Jost,sans-serif;color:rgba(255,255,255,.82);text-align:justify;text-align-last:left;hyphens:none}
.cuento .cu-nav{display:flex;justify-content:center;align-items:center;gap:1vw;margin-top:3vh}
.cuento .cu-nav button{width:3.4vh;height:3.4vh;display:grid;place-items:center;padding:0;border:1px solid rgba(var(--plata),.25);border-radius:50%;background:none;color:rgba(255,255,255,.6);font:300 min(1.3vh,.75vw) Jost,sans-serif;cursor:pointer;transition:border-color .3s,color .3s}
.cuento .cu-nav .cu-prev,.cuento .cu-nav .cu-next{border:0;font-size:min(2.6vh,1.5vw);color:rgba(var(--v),.85)}
.cuento .cu-nav button:hover{color:#fff;border-color:rgba(var(--v),.7)}
.cuento .cu-nav .cu-n.on{color:#fff;border-color:rgb(var(--v));box-shadow:0 0 1vh rgba(var(--v),.35)}
.cuento .cu-sub{white-space:nowrap}
.cuento .cu-cap{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:2.4vw}
.cuento .cu-txt p{margin-bottom:.6vh;line-height:1.55}
.cuento .cu-caps{margin-top:2.6vh}
.cuento .cu-nav{margin-top:2.2vh}
.cuento .cu-logo{position:relative;display:block;width:100%;height:auto}
.cuento .cu-logo img{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:76%;width:auto}
/* los cuatro capítulos ocupan la misma celda: la botonera queda siempre a la misma altura */
.cuento .cu-caps{display:grid}
.cuento .cu-cap{display:grid;grid-area:1 / 1;visibility:hidden;opacity:0;transition:opacity .5s,visibility 0s .5s;animation:none}
.cuento .cu-cap.on{visibility:visible;opacity:1;transition:opacity .5s .1s,visibility 0s}
/* Capítulos 1-3: debajo del cuento, el error equivalente en la publicidad de hoy, con un hueco 16:9 a la derecha (en diagonal con la imagen del cuento) */
.cuento .cu-cap{grid-template-rows:auto auto;row-gap:2.4vh;align-content:start}
.cuento .cu-hoy{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:2.4vw;align-items:center;padding-top:2.2vh;border-top:1px solid rgba(var(--plata),.12)}
.cuento .cu-etq{display:block;margin-bottom:.8vh;font:400 min(1.15vh,.65vw) "Courier Prime",monospace;letter-spacing:.3em;text-transform:uppercase;color:rgba(var(--v),.85)}
.cuento .cu-hoy-txt p{margin:0;font:300 italic min(1.5vh,.85vw)/1.6 Jost,sans-serif;color:rgba(255,255,255,.7);text-align:justify;text-align-last:left;hyphens:none}
.cuento .cu-hueco{display:grid;place-items:center;aspect-ratio:16/9;border:1px dashed rgba(var(--plata),.25);border-radius:3px;background:#0d0d0d}
.cuento .cu-hueco span{font:400 min(1.1vh,.62vw) "Courier Prime",monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);text-align:center;padding:0 1vw}
.cuento .cu-cap{row-gap:2vh}
.cuento .cu-hoy{padding-top:1.8vh}
.cuento .cu-caps{margin-top:2.2vh}
.cuento .cu-nav{margin-top:1.8vh}
.cuento p{max-width:none !important}

/* Manifiesto: página propia con el cuento del bufón (antes hoja de Colaborar) */
.manifiesto{position:relative;z-index:1;padding:0 4vw}
.manifiesto .cuento{width:min(100%,128vh)}
.manifiesto .cuento .cu-sub{margin-top:0}
body:has(.manifiesto) .pagehead{padding-top:10vh;padding-bottom:2vh}

/* Manifiesto v2: los 10 puntos en dos columnas y, a la derecha, la viñeta del cuento que abre una capa con el cuento completo */
.mf-v2{display:grid;grid-template-columns:minmax(0,1fr) min(26vw,40vh);gap:4vw;align-items:center;padding:1vh 4vw 0;padding-right:calc(4vw + 7rem)}
.mf-puntos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(5,auto);gap:2.6vh 3vw;counter-reset:mf}
.mf-puntos li{counter-increment:mf;display:grid;grid-template-columns:auto 1fr;column-gap:1vw;padding-top:1.2vh;border-top:1px solid rgba(var(--plata),.12)}
.mf-puntos li::before{content:counter(mf,decimal-leading-zero);grid-row:1 / 3;font:400 min(1.2vh,.68vw) "Courier Prime",monospace;letter-spacing:.2em;color:rgba(var(--v),.85);padding-top:.35em}
.mf-puntos b{font:300 min(1.75vh,1vw) Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.mf-puntos span{margin-top:.5vh;font:300 italic min(1.45vh,.82vw)/1.5 Jost,sans-serif;color:rgba(255,255,255,.55)}
.mf-cuento{display:flex;flex-direction:column;gap:1vh;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:#fff}
.mf-cuento img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid rgba(var(--plata),.25);border-radius:3px;transition:transform .5s,filter .5s;filter:brightness(.85)}
.mf-cuento:hover img{transform:scale(1.02);filter:brightness(1)}
.mf-etq{font:400 min(1.15vh,.65vw) "Courier Prime",monospace;letter-spacing:.3em;text-transform:uppercase;color:rgba(var(--v),.85)}
.mf-cuento b{font:200 min(2vh,1.15vw)/1.3 Jost,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.mf-cuento i{font:300 min(1.3vh,.75vw) Jost,sans-serif;font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.mf-capa{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(4,4,5,.9);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.mf-capa.on{opacity:1;visibility:visible;transition:opacity .4s}
.mf-hoja{position:relative;width:min(88vw,150vh);padding:4vh 3vw;background:#080808;border:1px solid rgba(var(--plata),.18);border-radius:4px}
.mf-x{position:absolute;top:1.6vh;right:1.4vw;background:none;border:0;color:#fff;font-size:min(2.2vh,1.2vw);cursor:pointer}
.mf-hoja .cuento .cu-caps{margin-top:2vh}
.mf-cuento img{object-position:50% 30%}
/* Manifiesto v3: el arlequín en el centro y cinco puntos a cada lado (la lista se reparte con display:contents) */
.mf-v2{grid-template-columns:minmax(0,1fr) min(22vw,36vh) minmax(0,1fr);grid-template-rows:repeat(5,auto);column-gap:3vw;row-gap:2.6vh;padding-right:calc(4vw + 7rem)}
.mf-v2 .mf-puntos{display:contents}
.mf-v2 .mf-puntos li:nth-child(-n+5){grid-column:1}
.mf-v2 .mf-puntos li:nth-child(n+6){grid-column:3}
.mf-v2 .mf-puntos li:nth-child(1),.mf-v2 .mf-puntos li:nth-child(6){grid-row:1}
.mf-v2 .mf-puntos li:nth-child(2),.mf-v2 .mf-puntos li:nth-child(7){grid-row:2}
.mf-v2 .mf-puntos li:nth-child(3),.mf-v2 .mf-puntos li:nth-child(8){grid-row:3}
.mf-v2 .mf-puntos li:nth-child(4),.mf-v2 .mf-puntos li:nth-child(9){grid-row:4}
.mf-v2 .mf-puntos li:nth-child(5),.mf-v2 .mf-puntos li:nth-child(10){grid-row:5}
.mf-v2 .mf-cuento{grid-column:2;grid-row:1 / 6;align-self:center;align-items:center;text-align:center}
.mf-v2{padding-left:calc(4vw + 7rem)}

/* Manifiesto: viñeta del cuento como un cartel de cine (título sobre la imagen, con degradado) y «Leer» en verde con un filete */
.mf-marco{position:relative;display:block;width:100%;overflow:hidden;border:1px solid rgba(var(--plata),.22);border-radius:3px;box-shadow:0 3vh 6vh -3vh #000}
.mf-cuento .mf-marco img{display:block;border:0;border-radius:0;filter:brightness(.8) contrast(1.05);transition:transform 1.2s ease,filter .8s}
.mf-cuento:hover .mf-marco img{transform:scale(1.04);filter:brightness(.95) contrast(1.05)}
.mf-marco::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 55%,rgba(0,0,0,.85));pointer-events:none}
.mf-cuento .mf-marco b{position:absolute;left:0;right:0;bottom:3.2vh;z-index:1;font:200 min(2.1vh,1.2vw)/1.35 Jost,sans-serif;letter-spacing:.24em;margin-right:-.24em;text-transform:uppercase;color:#fff;text-shadow:0 .3vh 2vh rgba(0,0,0,.8)}
.mf-cuento > i{display:flex;align-items:center;gap:.9vw;margin-top:1vh;font:400 min(1.25vh,.7vw) "Courier Prime",monospace;letter-spacing:.4em;margin-right:-.4em;text-transform:uppercase;color:rgb(var(--v))}
.mf-cuento > i::before,.mf-cuento > i::after{content:"";width:2.4vw;height:1px;background:rgba(var(--v),.6);transition:width .4s}
.mf-cuento:hover > i::before,.mf-cuento:hover > i::after{width:3.6vw}
/* puntos: más aire y el número como en un guion */
.mf-puntos b{letter-spacing:.18em}
.mf-puntos li{border-top-color:rgba(var(--plata),.09)}
/* con la capa cerrada, el capítulo activo (que fuerza visibility:visible) no debe tapar el cartel */
.mf-capa:not(.on){pointer-events:none}
.mf-capa:not(.on) .cuento .cu-cap.on{visibility:hidden}
/* Cuento: cada bloque «En la publicidad de hoy» lleva su título (Interrumpir…) */
.cuento .cu-hoy-txt h4{margin:0 0 .8vh;font:200 min(1.9vh,1.08vw)/1.3 Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff}
/* Cuento: capítulo y nombre en una sola fila, grandes y en verde; los títulos «Interrumpir…» también en verde */
.cuento .cu-txt h3{color:rgb(var(--v))}
.cuento .cu-txt h3 span{display:inline;margin:0;font:inherit;letter-spacing:inherit;color:inherit}
.cuento .cu-txt h3 span::after{content:" · "}
.cuento .cu-hoy-txt h4{color:rgb(var(--v))}
.cuento .cu-port img{object-position:50% 28%}
/* Cuento: capítulo 2 en espejo (foto del cuento a la derecha, hueco de hoy a la izquierda) para que pasar de página sea más ameno */
.cuento .cu-cap.cu-espejo{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)}
.cuento .cu-cap.cu-espejo > figure{grid-column:2;grid-row:1}
.cuento .cu-cap.cu-espejo > .cu-txt{grid-column:1;grid-row:1}
.cuento .cu-cap.cu-espejo .cu-hoy{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.cuento .cu-cap.cu-espejo .cu-hoy .cu-hueco{grid-column:1;grid-row:1}
.cuento .cu-cap.cu-espejo .cu-hoy .cu-hoy-txt{grid-column:2;grid-row:1}
/* capítulo 4: el arlequín en vertical */
.cuento .cu-cap.cu-vert{grid-template-columns:auto minmax(0,1fr)}
.cuento .cu-cap.cu-vert .cu-port img{width:auto;height:44vh;aspect-ratio:2/3;object-position:50% 40%}
/* Cuento: las flechas de la web a los lados de la hoja (solo en ordenador) */
.mf-hoja .cu-lado{top:50%;width:min(4vh,2.4vw);height:min(4.6vh,2.8vw)}
.mf-hoja .cu-lado.izq{left:calc(-1 * min(6vh,3.6vw))}
.mf-hoja .cu-lado.der{right:calc(-1 * min(6vh,3.6vw))}

/* Portfolios: sin número en las tarjetas de las fichas (ya llevan «Ver ficha») */
a.car-card .car-num{display:none}
/* capítulo 4: la foto vertical ocupa las dos filas; el cuento y «Ser el espectáculo» van a su derecha */
.cuento .cu-cap.cu-vert > figure{grid-column:1;grid-row:1 / 3}
.cuento .cu-cap.cu-vert > .cu-txt{grid-column:2;grid-row:1}
.cuento .cu-cap.cu-vert .cu-hoy{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
.cuento .cu-cap.cu-vert .cu-txt p{margin-bottom:.35vh;line-height:1.5}
/* capítulo 5: la chapa «Buscavidas» en vertical, como el arlequín del 4 */
.cuento .cu-cap.cu-firmas{grid-template-columns:auto minmax(0,1fr)}
.cuento .cu-cap.cu-firmas .cu-port img{width:auto;height:44vh;aspect-ratio:2/3;object-position:50% 60%}
/* capítulo 5 · Arte Buscavidas & Cinema Hood: la chapa domina; cita de Instagram, historia y los dos logos (futuros enlaces a sus webs) */
.cuento .cu-cap.cu-firmas .cu-port img{height:50vh}
.cuento .cu-firmas .cu-txt{display:flex;flex-direction:column}
/* capítulo 5: dos tarjetas 16:9 iguales (Arte Buscavidas con el bufón sobre negro; Cinema Hood con su ficha 1), con sombra y el nombre */
.cuento .cu-marcas{display:grid;grid-template-columns:1fr 1fr;gap:2vw;margin-top:auto;padding-top:2.4vh}
.cuento .cu-marca{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(var(--plata),.18);border-radius:3px;background:#030303;box-shadow:0 2.4vh 4vh -1.6vh #000,0 0 0 1px rgba(0,0,0,.6)}
.cuento .cu-marca img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;aspect-ratio:auto}
.cuento .cu-marca-ab img{object-fit:contain;padding:12% 0 22%}
.cuento .cu-marca::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.85))}
.cuento .cu-marca b{position:absolute;left:0;right:0;bottom:1.4vh;z-index:1;text-align:center;font:300 min(1.35vh,.76vw) Jost,sans-serif;letter-spacing:.32em;margin-right:-.32em;text-transform:uppercase;color:#fff}
/* el nombre va debajo de cada tarjeta (en la de Cinema Hood la imagen ya trae texto y se pisaban) */
.cuento .cu-marca{overflow:visible;margin-bottom:3.4vh}
.cuento .cu-marca img{border-radius:3px}
.cuento .cu-marca::after{content:none}
.cuento .cu-marca b{bottom:auto;top:calc(100% + 1.2vh)}
.cuento .cu-marca-ab img{padding:10% 0}
.cuento .cu-marca-ab img{object-fit:cover;padding:0}
/* tarjetas de empresas: los dos escudos centrados sobre negro, mismo tamaño */
.cuento .cu-marca-ab img,.cuento .cu-marca-ch img{object-fit:contain;padding:9% 0;border-radius:3px}
.cuento .cu-marca-ab img,.cuento .cu-marca-ch img{padding:calc(6.5% * 9 / 16) 0}
/* capítulo 5 v3: arriba título y frase de la yaya; debajo, a la izquierda las dos tarjetas en vertical con su texto al lado, y a la derecha la chapa con el alto de las dos */
.cuento .cu-cap.cu-firmas{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:2.6vh;column-gap:2.6vw;align-items:stretch}
.cuento .cu-firmas > .cu-txt{grid-column:1 / -1;grid-row:1}
.cuento .cu-firmas .cu-empresas{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:2.4vh}
.cuento .cu-emp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.8vw;align-items:center}
.cuento .cu-emp .cu-marca{height:15vh;width:auto;aspect-ratio:16/9;margin:0}
.cuento .cu-emp h4{margin:0 0 .8vh;font:200 min(1.9vh,1.08vw)/1.3 Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--v))}
.cuento .cu-emp p{margin:0;font:300 min(1.55vh,.88vw)/1.6 Jost,sans-serif;color:rgba(255,255,255,.82);text-align:justify;text-align-last:left;hyphens:none}
.cuento .cu-firmas > .cu-port{grid-column:2;grid-row:2;position:relative;height:100%;aspect-ratio:708 / 1210}
.cuento .cu-cap.cu-firmas .cu-port img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}

/* Manifiesto: en el centro, el pantallazo de Instagram de la chapa (la parábola pasa a Perfil · Andy) */
.mf-v2 .mf-ig{grid-column:2;grid-row:1 / 6;align-self:center;justify-self:center;margin:0}
.mf-v2 .mf-ig img{display:block;height:min(64vh,46vw);width:auto;border-radius:1.6vh;border:1px solid rgba(var(--plata),.22);box-shadow:0 3vh 6vh -2vh #000}
.mf-v2{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
/* Perfil · Andy: el cuento por capítulos dentro de la pestaña */
.pf-andy .cuento{position:relative;width:min(100%,150vh);margin:0 auto}
.pf-andy .cuento .cu-caps{margin-top:1.6vh}
.pf-andy .cu-lado.izq{left:calc(-1 * min(5vh,3vw))}
.pf-andy .cu-lado.der{right:calc(-1 * min(5vh,3vw))}
.pf-andy .cuento{width:100%}
.pf-paneles .panel.pf-andy{padding-top:2.6vh;padding-bottom:1vh}
.pf-andy .cuento .cu-cap.cu-vert .cu-port img,.pf-andy .cuento .cu-cap.cu-firmas .cu-port img{height:36vh}
/* Perfil · Andy: imágenes con alto fijo proporcional para que el cuento quepa en la pestaña */
.pf-andy .cuento .cu-cap{grid-template-columns:auto minmax(0,1fr)}
.pf-andy .cuento .cu-cap.cu-espejo{grid-template-columns:minmax(0,1fr) auto}
.pf-andy .cuento .cu-hoy{grid-template-columns:minmax(0,1fr) auto}
.pf-andy .cuento .cu-cap.cu-espejo .cu-hoy{grid-template-columns:auto minmax(0,1fr)}
.pf-andy .cuento .cu-cap > figure:not(.cu-port) img,.pf-andy .cuento .cu-hueco{height:19vh;width:auto;aspect-ratio:16/9}
.pf-andy .cuento .cu-cap.cu-vert .cu-port img,.pf-andy .cuento .cu-cap.cu-firmas .cu-port img{height:34vh}
.pf-andy .cuento .cu-emp .cu-marca{height:13vh}
.pf-andy .cuento .cu-cap.cu-firmas{grid-template-columns:minmax(0,1fr) auto}
/* empresas sin la chapa: una sola columna */
.cuento .cu-cap.cu-firmas,.pf-andy .cuento .cu-cap.cu-firmas{grid-template-columns:minmax(0,1fr)}

/* Colaborar: el sello de la casa bajo el índice, según el bloque activo (marca → Cinema Hood; productora → Arte Buscavidas) */
.serv-lista > li.serv-sello{position:relative;width:min(16vh,11vw);aspect-ratio:1;margin:3vh 0 0;list-style:none}
.serv-sello img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s}
.serv:has(.serv-lista > li:nth-child(2) > button.on) .serv-sello .sello-ch,.serv:has(.serv-lista > li:nth-child(3) > button.on) .serv-sello .sello-ab{opacity:1}
/* Perfil · Andy: las empresas solo con texto (los logos pasan a Colaborar) */
.cuento .cu-emp{grid-template-columns:minmax(0,1fr)}

/* APAGADOS (no borrados): el Manifiesto en el menú y la pestaña Andy de Perfil */
header nav a[href="manifiesto.html"],.menu a[href="manifiesto.html"],#t-andy,#p-andy{display:none !important}
/* Colaborar: el sello, mucho más grande y centrado en el hueco libre bajo el índice (los dos en el mismo punto, se intercambian con un fundido) */
.serv-lista > li.serv-sello{width:min(34vh,20vw);margin:auto;align-self:center}
/* anclado: mismo punto y mismo tamaño en los dos bloques (no depende de cuántos submenús haya abiertos) */
.serv-lista > li.serv-sello{position:absolute;margin:0;width:min(30vh,20vw);bottom:2.4vh;left:calc(50% + (1.6vw + 6px) / 2);transform:translateX(-50%)}
/* centrado entre la línea verde del índice y el filete que separa la columna de las hojas */
.serv-lista > li.serv-sello{left:50%}
/* Colaborar: cada bloque del índice dice qué casa lo atiende */
.serv-lista > li > button .serv-casa{margin-left:.5em;color:inherit}

/* Colaborar: en lugar de «Más info», el logo de la casa del bloque activo como botón (de momento a Contacto; luego, a su web) */
.serv-casa-btn{position:fixed;top:calc(10vh + 4px);right:4vw;z-index:5;display:flex;flex-direction:column;align-items:center;gap:.8vh;text-decoration:none}
.serv-casa-btn i{position:relative;display:block;width:min(13vh,8vw);aspect-ratio:1}
.serv-casa-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s,transform .4s}
.serv:has(.serv-lista > li:nth-child(2) > button.on) .serv-casa-btn .sello-ch,.serv:has(.serv-lista > li:nth-child(3) > button.on) .serv-casa-btn .sello-ab{opacity:1}
.serv-casa-btn span{font:300 min(1.15vh,.65vw) Jost,sans-serif;letter-spacing:.32em;margin-right:-.32em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:color .3s}
.serv-casa-btn:hover img{transform:scale(1.05)}
.serv-casa-btn:hover span{color:rgb(var(--v))}
/* mismo tamaño que el bufón de Colaborar de las otras páginas */
.serv-casa-btn i{width:8vh}

/* Perfil · Manifiesto (primera pestaña): los 10 puntos a los lados y el pantallazo de la chapa en el centro, dentro del panel */
.pf-manifiesto .mf-v2{padding:0;row-gap:1.6vh;column-gap:2.6vw;height:100%;align-content:center}
.pf-manifiesto .mf-v2 .mf-ig img{height:min(40vh,30vw)}
.pf-manifiesto .mf-puntos li{padding-top:.9vh}
/* Sin el dibujo de Yoda (Home y Perfil); la cita sola, centrada donde estaba el conjunto cita + Yoda */
.visor.portada .cita::before,.visor.portada .cita::after{content:none !important}
.visor.portada .cita{right:calc(13.1vw - 57.5px)}
/* Manifiesto: en el centro, las dos casas (tarjetas 16:9 con el escudo sobre negro, nombre y una línea); llevan a su bloque de Colaborar */
.mf-v2 .mf-casas{grid-column:2;grid-row:1 / 6;align-self:center;display:flex;flex-direction:column;gap:3vh;width:calc(15vh * 16 / 9)}
.mf-casa{display:flex;flex-direction:column;align-items:center;gap:.6vh;text-decoration:none;color:#fff}
.mf-tarjeta{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#030303;border:1px solid rgba(var(--plata),.18);border-radius:3px;box-shadow:0 2.4vh 4vh -1.6vh #000;overflow:hidden}
.mf-tarjeta img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:calc(6.5% * 9 / 16) 0;transition:transform .5s}
.mf-casa:hover .mf-tarjeta img{transform:scale(1.05)}
.mf-casa b{margin-top:.6vh;font:300 min(1.35vh,.76vw) Jost,sans-serif;letter-spacing:.32em;margin-right:-.32em;text-transform:uppercase}
.mf-casa i{font:300 italic min(1.25vh,.7vw) Jost,sans-serif;color:rgba(255,255,255,.55)}
.mf-casa:hover b{color:rgb(var(--v))}

/* Perfil · primera pestaña: solo las dos casas, cada una con su tarjeta y su explicación (el manifiesto largo, apagado) */
.pf-casas{height:100%;display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-content:center;padding:0 4vw}
.pf-casa{display:flex;flex-direction:column;align-items:flex-start}
.pf-casa .mf-tarjeta{width:100%;max-width:calc(30vh * 16 / 9)}
.pf-casa h3{margin:2.4vh 0 0;font:200 min(2.4vh,1.35vw)/1.3 Jost,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--v))}
.pf-casa .pf-casa-etq{margin:.6vh 0 1.6vh;font:400 min(1.15vh,.65vw) "Courier Prime",monospace;letter-spacing:.24em;text-transform:uppercase;color:rgba(var(--plata),.7)}
.pf-casa p:not(.pf-casa-etq){margin:0;max-width:calc(30vh * 16 / 9);font:300 min(1.65vh,.92vw)/1.65 Jost,sans-serif;color:rgba(255,255,255,.82);text-align:justify;text-align-last:left;hyphens:none}
.pf-casa .mf-tarjeta:hover img{transform:scale(1.04)}


/* Branded: como en Cine, solo se ven las 6 del centro (ventana del ancho de 6 tarjetas) y aire a los lados; las demás, con las flechas */
#carrusel[data-seccion="publicidad"] > .car-marco,#carrusel[data-seccion="publicidad"] > .car-vp{width:min(100%, calc(6 * max(140px, calc(58vh * 2 / 3 * .58 * .93)) + 5 * 22px + 8vw));margin-left:auto;margin-right:auto}

/* Portfolios Cine y Branded: el texto de arriba reserva siempre tres líneas, así el carrusel sale a la misma altura en las dos páginas */
.port-texto.con-texto p{min-height:calc(3lh)}
@supports not (height:1lh){.port-texto.con-texto p{min-height:4.8em}}
/* Perfil · casas: las dos columnas simétricas (cada bloque centrado en su mitad) y un filete vertical muy fino entre ellas */
.pf-casas{position:relative}
.pf-casa{justify-self:center;width:min(100%, calc(30vh * 16 / 9))}
.pf-casas::before{content:"";position:absolute;left:50%;top:12%;bottom:12%;width:1px;background:linear-gradient(180deg,transparent,rgba(var(--plata),.22) 25%,rgba(var(--plata),.22) 75%,transparent)}

/* ====== Colaborar v2: al entrar, las dos casas (como en Perfil); al elegir una, pasa a la izquierda y su hoja se abre a la derecha ====== */
.sv-casa{display:flex;flex-direction:column;align-items:flex-start;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer;font:inherit}
.sv-casa .mf-tarjeta{transition:box-shadow .4s,border-color .4s}
.sv-casa:hover .mf-tarjeta img{transform:scale(1.04)}
.sv-casa b{margin-top:2vh;font:200 min(2.4vh,1.35vw)/1.3 Jost,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--v));transition:color .3s}
.sv-casa .sv-etq{margin:.6vh 0 1.4vh;font:400 min(1.15vh,.65vw) "Courier Prime",monospace;font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:rgba(var(--plata),.7)}
.sv-casa .sv-txt{font:300 min(1.65vh,.92vw)/1.65 Jost,sans-serif;color:rgba(255,255,255,.82);text-align:justify;text-align-last:left;hyphens:none}
/* inicio: las dos casas, simétricas, con un filete fino entre ellas; sin hojas */
.serv-v2:not([data-casa]){display:block}
.serv-v2:not([data-casa]) .serv-hojas,.serv-v2:not([data-casa]) .serv-casa-btn{display:none}
.serv-v2:not([data-casa]) .sv-casas{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start;padding:6vh 4vw 0}
.serv-v2:not([data-casa]) .sv-casa{justify-self:center;width:min(100%, calc(30vh * 16 / 9))}
.serv-v2:not([data-casa]) .sv-casa .mf-tarjeta{width:100%}
.serv-v2:not([data-casa]) .sv-casas::before{content:"";position:absolute;left:50%;top:10%;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(var(--plata),.22) 25%,rgba(var(--plata),.22) 75%,transparent)}
/* abierta: las casas en columna a la izquierda, pequeñas; la activa marcada y la otra apagada */
.serv-v2[data-casa] .sv-casas{display:flex;flex-direction:column;gap:3.4vh;padding-right:3vw}
.serv-v2[data-casa] .sv-casa .mf-tarjeta{width:min(100%, calc(17vh * 16 / 9))}
.serv-v2[data-casa] .sv-casa b{margin-top:1.2vh;font-size:min(1.7vh,.95vw)}
.serv-v2[data-casa] .sv-casa .sv-etq{margin-bottom:0}
.serv-v2[data-casa] .sv-casa .sv-txt{display:none}
.serv-v2[data-casa] .sv-casa:not(.on){opacity:.45;transition:opacity .4s}
.serv-v2[data-casa] .sv-casa:not(.on):hover{opacity:.85}
.serv-v2[data-casa] .sv-casa.on .mf-tarjeta{border-color:rgba(var(--v),.6);box-shadow:0 0 0 1px rgba(var(--v),.35),0 2.4vh 4vh -1.6vh #000}
/* botón de arriba a la derecha: el logo de la casa abierta */
.serv-v2[data-casa="ch"] .serv-casa-btn .sello-ch,.serv-v2[data-casa="ab"] .serv-casa-btn .sello-ab{opacity:1}
/* Colaborar v2b: entrada como el Manifiesto (una casa a cada lado con su sinopsis) y la propuesta completa en una capa grande */
.serv-v2 .sv-casas{padding-top:4vh}
.serv-v2 .sv-casa .sv-ver{display:flex;align-items:center;gap:.9vw;margin-top:2.6vh;font:400 min(1.25vh,.7vw) "Courier Prime",monospace;letter-spacing:.34em;text-transform:uppercase;color:rgb(var(--v))}
.serv-v2 .sv-casa .sv-ver::after{content:"";width:2.4vw;height:1px;background:rgba(var(--v),.6);transition:width .4s}
.serv-v2 .sv-casa:hover .sv-ver::after{width:4.2vw}
.serv-v2 .sv-casa:hover .mf-tarjeta{border-color:rgba(var(--v),.5)}
.sv-capa{position:fixed;inset:0;z-index:55;display:grid;place-items:center;background:rgba(4,4,5,.9);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.sv-capa:not(.on), .sv-capa:not(.on) *{pointer-events:none !important}
.sv-capa.on{opacity:1;visibility:visible;transition:opacity .4s}
.sv-caja{position:relative;width:min(88vw,150vh);max-height:90vh;padding:4vh 3vw;background:#080808;border:1px solid rgba(var(--plata),.18);border-radius:4px}
.sv-x{position:absolute;top:1.6vh;right:1.4vw;z-index:2;background:none;border:0;color:#fff;font-size:min(2.2vh,1.2vw);cursor:pointer}
.serv-v2 .sv-capa .serv-hojas{display:block;padding:0}
.sv-capa .serv-hoja{position:static;inset:auto;max-width:none;display:none;opacity:1;visibility:inherit;transform:none}
.sv-capa .serv-hoja.on{display:block}
#t-manifiesto{display:none !important}
/* Arte Buscavidas: 6 viñetas + la foto vertical de la chapa ocupando la columna derecha entera */
#fm-ab .storyboard .sb-vert{grid-column:4;grid-row:1 / span 2}
#fm-ab .storyboard .sb-vert img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:50% 0;border:0;background:none}
/* Arte Buscavidas: sus imágenes no se amplían (ni al pasar el ratón ni al pinchar) */
#fm-ab .storyboard figure, #fm-ab .storyboard figure:hover img{cursor:default;transform:none !important;box-shadow:none}
#fm-ab .storyboard figure:hover figcaption, #fm-ab .storyboard figure:hover .sb-n{opacity:1}
#fm-ab .storyboard:has(figure:hover) figure:not(:hover) img{filter:saturate(.85) brightness(.85)}
/* ===== Móvil en vertical (en horizontal se ve la versión de ordenador) ===== */
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Portfolios: las tarjetas de una pieza, en rejilla hacia abajo (sin copias del infinito, sin flechas) */
  #carrusel > .car-marco, #carrusel > .car-vp, #carrusel .car-vp, #carrusel .car-marco { width:auto !important; overflow:visible !important; margin:0 !important; }
  #carrusel .car-track { display:grid !important; grid-template-columns:1fr 1fr; gap:18px 14px; transform:none !important; width:auto !important; }
  #carrusel .car-card { flex-basis:auto !important; width:auto !important; transform:none !important; opacity:1 !important; }
  #carrusel .car-card[aria-hidden="true"], #carrusel .car-flecha, #carrusel .car-dots { display:none !important; }
  /* El bufón de Colaborar y los iconos: al final del contenido, no flotando encima */
  .port-colab, .port-contacto { position:static !important; inset:auto !important; transform:none !important; margin:28px auto 0 !important; display:flex !important; justify-content:center; }
  /* Colaborar: una casa debajo de otra; la propuesta, a pantalla completa y con scroll */
  .serv-v2 .sv-casas::before, .serv-v2::before { display:none !important; }
  .sv-capa { place-items:start center; overflow:auto; }
  .sv-caja { width:100vw !important; max-height:none !important; min-height:100vh; padding:56px 5vw 40px !important; border:0 !important; border-radius:0 !important; }
  .sv-x { position:fixed !important; top:14px !important; right:16px !important; font-size:22px !important; }
  .sv-capa .storyboard { grid-template-columns:1fr 1fr !important; width:100% !important; gap:16px 12px !important; }
  #fm-ab .storyboard .sb-vert { grid-column:1 / -1; grid-row:auto; }
  #fm-ab .storyboard .sb-vert img { position:static; height:auto; aspect-ratio:auto; }
  /* Créditos: unas pocas caras, luego el vídeo y después el resto */
  .filmo-caras.caras-rejilla > * { order:2; }
  .filmo-caras.caras-rejilla > :nth-child(-n+5) { order:0; }
  .filmo-caras.caras-rejilla > .cred-video { order:1; grid-column:1 / -1; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Cabecera opaca al bajar, para que no se monte sobre el contenido */
  header { background:linear-gradient(#070707 62%, rgba(7,7,7,0)); }
  .cred-cab { padding-top:84px; }
  /* Colaborar: textos legibles en el teléfono */
  .sv-casa b { font-size:20px !important; } .sv-casa .sv-etq { font-size:11px !important; }
  .sv-casa .sv-txt { font-size:15px !important; line-height:1.55 !important; } .sv-casa .sv-ver { font-size:12px !important; }
  .sv-capa .bc-lema span { font-size:14px !important; } .sv-capa .bc-intro, .sv-capa .bc-360 { font-size:15px !important; line-height:1.6; }
  .sv-capa .storyboard figcaption { font-size:11px !important; }
  #fm-ab .storyboard .sb-vert { width:72%; justify-self:center; }
  /* Contacto: el bloque crece hacia abajo en vez de salirse por arriba */
  .contactpage { height:auto !important; min-height:100vh; padding:96px 0 48px !important; display:flex !important; flex-direction:column; justify-content:center !important; }
  .contactpage .tarjeta { transform:none !important; top:auto !important; left:auto !important; margin:0 auto !important; }
  .pf-vista { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
/* ===== Móvil (vertical), hecho sobre el diseño de escritorio actual: se desliza hacia abajo y todo va en una columna ===== */
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  html { height:auto !important; overflow:visible !important; font-size:15px !important; }
  body { height:auto !important; min-height:100vh !important; max-height:none !important; overflow:visible !important; overflow-x:clip !important; }
  header { padding-left:16px !important; padding-right:16px !important; }
  header nav { display:none !important; }
  header button { display:block !important; }
  footer { flex-direction:column !important; align-items:flex-start !important; gap:10px !important; height:auto !important; padding:22px 16px !important; }
  footer * { white-space:normal !important; }
  /* Portada */
  .seen-on { flex-wrap:wrap !important; justify-content:center !important; gap:18px 26px !important; height:auto !important; padding:24px 16px !important; }
  .work { flex-direction:column !important; height:auto !important; padding:0 16px 32px !important; }
  .work { flex:none !important; container-type:inline-size !important; }
  .work > div { flex-direction:column !important; gap:32px !important; width:100% !important; height:auto !important; min-height:0 !important; flex:none !important; }
  .work .facts { flex-wrap:wrap !important; max-width:100% !important; gap:8px !important; }
  .work .proj { width:100% !important; }
  .work .watchrow, .work [class*="ver-"] { flex-wrap:wrap !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Títulos de página: a la medida del teléfono; «Más info» debajo del título, no encima */
  .pagehead h1 { font-size:2.1rem !important; line-height:1.08 !important; }
  .pagehead { padding-left:16px !important; padding-right:16px !important; }
  .visor.portada .cita { display:none !important; }
  /* Documental: la pantalla arriba, luego la lista y después el texto */
  #docs .d-indice { grid-template-columns:1fr !important; gap:22px !important; }
  #docs .d-indice > * { grid-column:1 !important; grid-row:auto !important; }
  #docs .pantalla-marco { order:-1; width:100% !important; }
  #docs .pantalla-marco .pantalla { width:100% !important; }
  #docs .pantalla-marco .d-ver { position:static !important; transform:none !important; width:auto !important; margin-top:12px; }
  #docs .d-col { width:auto !important; }
  #docs .d-txt { text-align:left !important; width:auto !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Perfil · Sinopsis: bobina, titular, cuadro y texto, uno debajo de otro */
  .pf-v3 { grid-template-columns:1fr !important; gap:22px !important; }
  .pf-v3 > * { grid-column:1 !important; grid-row:auto !important; width:auto !important; }
  .pf-v3 > .pf-reel-fig { order:0; } .pf-v3 > .pf-tit { order:1; } .pf-v3 > .pf-vs-caja { order:2; } .pf-v3 > .pf-texto { order:3; }
  /* Créditos: título bajo la cabecera; caras de cuatro en cuatro, con el vídeo tras la primera fila */
  .cred-cab { padding-top:92px !important; }
  .filmo-caras.caras-rejilla { grid-template-columns:repeat(4, 1fr) !important; grid-template-rows:none !important; grid-auto-rows:auto !important; gap:14px 10px !important; }
  .filmo-caras.caras-rejilla > * { grid-column:auto !important; grid-row:auto !important; }
  .filmo-caras.caras-rejilla > .cred-video { grid-column:1 / -1 !important; position:relative !important; inset:auto !important; aspect-ratio:16 / 9; width:auto !important; height:auto !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  .pf-vs-caja { font-size:13px !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Fichas: cartel, texto y piezas, uno debajo de otro */
  #proyecto section.wrap { display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:none !important; gap:24px !important; height:auto !important; padding-left:16px !important; padding-right:16px !important; }
  #proyecto section.wrap > * { grid-column:1 !important; grid-row:auto !important; width:auto !important; max-width:100% !important; height:auto !important; }
  #proyecto .hero-v { justify-self:center; width:72% !important; }
  #proyecto .fc-texto { order:1; } #proyecto .carrusel { order:2; min-width:0; }
  #proyecto .fc-texto p, #proyecto .fc-texto li, #proyecto .fc-texto dd, #proyecto .fc-texto dt { font-size:15px !important; line-height:1.6 !important; }
  #proyecto .hero-v { width:78% !important; }

}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  #proyecto .hero-v { height:auto !important; aspect-ratio:auto !important; }
  #proyecto .hero-v img, #proyecto .hero-v video { position:static !important; width:100% !important; height:auto !important; max-height:none !important; transform:none !important; }
  #carrusel .car-flecha, #carrusel .lente { display:none !important; }
}
/* ===== Móvil (vertical) · segunda pasada ===== */
.solo-movil { display:none; }
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  .solo-movil { display:block; }
  /* «Más info» solo tiene sentido en escritorio */
  .foco-btn { display:none !important; }
  /* Naves y adornos del fondo: fuera en el teléfono (cruzaban el pie) */
  .fresnel .enterprise, .fresnel .halcon, .fresnel .lente { display:none !important; }
  /* Osa Mayor de los encabezados: más abajo y centrada */
  .visor::after { background-position:50% 50%, center !important; bottom:6px !important; left:4% !important; right:4% !important; }
  /* Portada: los botones de ver, más pequeños y en una sola línea */
  .work .watchrow { flex-wrap:nowrap !important; gap:6px !important; justify-content:flex-end !important; }
  .work .watchrow a { font-size:9px !important; padding:5px 9px 5px 7px !important; gap:6px !important; white-space:nowrap !important; letter-spacing:.08em !important; }
  .work .watchrow a img, .work .watchrow a svg { height:12px !important; width:auto !important; }
  /* Bufón + iconos: un paquete compacto, separado del pie */
  .port-colab, .port-contacto { margin:22px auto 0 !important; }
  .port-contacto { margin:10px auto 44px !important; }
  .port-colab img { height:56px !important; width:auto !important; }
  /* Documental: los tres, uno debajo de otro: título, imagen, sinopsis y enlaces */
  #docs .d-lista { display:flex; flex-direction:column; gap:48px; padding:0 16px; }
  #docs .d-item { display:flex; flex-direction:column; gap:12px; }
  #docs .d-item .d-info { display:contents; }
  #docs .d-item .n, #docs .d-item .t, #docs .d-item .m { order:0; }
  #docs .d-item .pantalla { order:1; width:100%; aspect-ratio:16 / 9; position:relative; overflow:hidden; }
  #docs .d-item .pantalla img { width:100%; height:100%; object-fit:cover; display:block; }
  #docs .d-item .d-txt { order:2; font-size:15px; line-height:1.6; text-align:left; margin:0; }
  #docs .d-item .d-ver { order:3; display:flex; justify-content:center; }
  #docs .d-item .n { font:200 22px/1 Jost, sans-serif; color:var(--acc, #1ed0a7); }
  #docs .d-item .t { margin:0; font-weight:200; font-size:24px; letter-spacing:.08em; text-transform:uppercase; }
  #docs .d-item .t em { display:block; font-style:normal; font-size:13px; letter-spacing:.14em; opacity:.75; margin-top:4px; }
  #docs .d-item .m { font:11px "Courier Prime", monospace; letter-spacing:.12em; text-transform:uppercase; color:#1ed0a7; }
  #docs .d-item .verficha { position:absolute; right:10px; bottom:10px; }
  /* Colaborar: primero Cinema Hood (la vista va al primer elemento) */
  .serv-v2 .sv-casas { display:flex !important; flex-direction:column !important; gap:48px !important; }
  .serv-v2 .sv-casa[data-casa="ch"] { order:-1; }
  /* Perfil · Sinopsis: bobina, titular, «No soy una línea recta» y, al final, la tabla fila a fila */
  .pf-v3 > .pf-texto { order:2 !important; } .pf-v3 > .pf-vs-caja { order:3 !important; }
  .pf-vs-cab { display:none !important; }
  .pf-vs { display:block !important; }
  .pf-vs-fila { display:block !important; padding:14px 0 !important; border-bottom:1px solid rgba(255,255,255,.1); }
  .pf-vs-fila > span { display:block !important; width:auto !important; }
  .pf-vs-fila > span:first-child { font:13px "Courier Prime", monospace !important; text-decoration:line-through; opacity:.6; margin-bottom:6px; }
  .pf-vs-fila > span:last-child { font-size:15px !important; line-height:1.55 !important; }
  /* Perfil · Trayectoria: áreas en acordeón; textos legibles */
  .pf-conmuta-exp { display:flex !important; flex-direction:column !important; width:auto !important; position:static !important; gap:0 !important; margin:0 !important; }
  .pf-conmuta-exp .pf-estela, .pf-conmuta-exp .pf-areas-etq { display:none !important; }
  .pf-vtxt, .pf-vtxt p { font-size:15px !important; line-height:1.6 !important; }
  /* Fichas de la línea de tiempo: casi a pantalla completa, con su X */
  .tl-hoja { width:100vw !important; height:100dvh !important; max-height:none !important; border:0 !important; border-radius:0 !important; overflow:auto; }
  .tl-hoja .lupa-x { position:fixed !important; top:12px !important; right:12px !important; z-index:5; }
  .lupa .lupa-caja, .quien-pop { max-width:100vw !important; }
  /* Perfil · Formación: cada bloque a todo el ancho, uno debajo de otro */
  .pf-formacion, .pf-formacion * { max-width:100% !important; }
  /* Créditos: ocho caras, el vídeo y luego el resto; sin la última (sin foto) para cuadrar de cuatro en cuatro */
  .filmo-caras.caras-rejilla > :nth-child(-n+9) { order:0 !important; }
  .filmo-caras.caras-rejilla > .cred-video { order:1 !important; }
  .filmo-caras.caras-rejilla > :nth-child(n+10) { order:2 !important; }
  /* Contacto: el bufón del fondo entero en pantalla */
  .contactpage .marca-fondo { height:auto !important; width:min(86vw, 52vh) !important; top:47% !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  .work .facts { flex-wrap:nowrap !important; justify-content:flex-end !important; gap:6px !important; width:100% !important; }
  .work a.watch { font-size:8px !important; letter-spacing:.06em !important; padding:5px 9px 5px 7px !important; gap:5px !important; white-space:nowrap !important; min-width:0 !important; }
  .work a.watch img, .work a.watch svg { height:11px !important; width:auto !important; }
  .pagehead > * { position:static !important; transform:none !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  .pf-vs, .pf-vs-fila, .pf-vs-fila > span, .pf-vs-caja { height:auto !important; min-height:0 !important; }
  .pf-vs-fila > span { padding:0 !important; }
  .pf-vs-caja { margin-top:28px !important; padding:0 !important; }
  .pf-vs-tit { margin:0 0 8px !important; }
  .pf-texto p { margin:0 0 14px !important; }
  .pf-pie-movil { padding:36px 0 8px; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  .pf-conmuta-exp > .pf-vista { min-width:0 !important; max-width:100% !important; width:100% !important; box-sizing:border-box; }
  .pf-conmuta-exp > .pf-vista .pf-vtxt { width:auto !important; max-width:calc(100vw - 32px) !important; position:sticky; left:0; }
  .pf-conmuta-exp { border-left:0 !important; padding-left:0 !important; }
  .pf-conmuta-exp > button .pf-marca { display:none !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Perfil · Formación: todo a lo ancho y hacia abajo: máster, licenciatura, especialización y, al final, otra formación */
  #p-formacion:not([hidden]) { display:block !important; }
  #p-formacion .pf-mayores, #p-formacion .pf-lado { width:auto !important; margin:0 0 36px !important; }
  #p-formacion .pf-titulo { display:block !important; width:auto !important; margin:0 0 36px !important; }
  #p-formacion .pf-tit-fila { display:flex !important; gap:14px !important; align-items:center; width:auto !important; }
  #p-formacion .pf-tit-txt { flex:1; width:auto !important; }
  #p-formacion .pf-diploma { width:100% !important; margin-top:14px !important; height:auto !important; }
  #p-formacion .pf-diploma img { width:100% !important; height:auto !important; }
  #p-formacion .pf-sw { display:none !important; }
  #p-formacion .pf-menores, #p-formacion .pf-menores[hidden] { display:grid !important; grid-template-columns:1fr !important; width:auto !important; height:auto !important; margin:0 0 32px !important; gap:18px !important; }
  #p-formacion .pf-menores::before { font:11px "Courier Prime", monospace; letter-spacing:.16em; text-transform:uppercase; color:#1ed0a7; }
  #pf-esp::before { content:"Especialización audiovisual"; } #pf-otra::before { content:"Otra formación"; }
  #p-formacion .pf-menores > li { display:grid !important; grid-template-columns:84px 1fr !important; gap:4px 14px !important; width:auto !important; height:auto !important; align-items:start; }
  #p-formacion .pf-menores > li > .pf-sello { grid-row:1 / span 3; width:84px !important; }
  #p-formacion .pf-menores > li > :not(.pf-sello) { grid-column:2; width:auto !important; height:auto !important; }
  #p-formacion b, #p-formacion .pf-tit-txt { font-size:15px !important; line-height:1.4 !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  #p-formacion .pf-lado, #p-formacion .pf-mayores { display:block !important; }
  #p-formacion .pf-menores, #p-formacion .pf-menores > li { width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box; }
  .pf-formacion:not([hidden])::before, .pf-formacion:not([hidden])::after { display:none !important; }
}
/* ===== Móvil · tercera pasada ===== */
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Formación: «Otra formación» estaba oculta (en escritorio va tras el conmutador) */
  #p-formacion .pf-menores, #p-formacion .pf-menores > li { visibility:visible !important; opacity:1 !important; transform:none !important; }
  /* Trayectoria: la línea de tiempo pasa a lista vertical: cartel, año, título y subtítulo; al tocar, la ficha a pantalla completa */
  .pf-conmuta-exp > .pf-vista { overflow:visible !important; }
  /* Colaborar: la propuesta se abre como una página (no flotante), con su pie debajo */
  .sv-capa { position:static !important; inset:auto !important; display:none !important; background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; opacity:1 !important; visibility:visible !important; transition:none !important; }
  .sv-capa.on { display:block !important; }
  .serv-v2:has(.sv-capa.on) .sv-casas, .serv-v2:has(.sv-capa.on) .serv-casa-btn { display:none !important; }
  .sv-caja { min-height:0 !important; padding:8px 16px 24px !important; background:none !important; }
  .sv-x { position:static !important; display:block !important; margin:0 0 14px auto !important; }
  body:has(.sv-capa.on[data-casa="ch"]) .pf-pie-movil .bufon { content:url(assets/logos/cinema-hood.webp); }
  #fm-ab > .sb-vert { display:block; width:72% !important; margin:18px auto 0 !important; }
  #fm-ab > .sb-vert img { position:static !important; width:100% !important; height:auto !important; }
  /* Créditos: el vídeo «Dirigir talento» con alto propio, para que se vea siempre */
  .filmo-caras.caras-rejilla > .cred-video { height:calc((min(100vw, 760px) - 32px) * 9 / 16) !important; min-height:180px; background-size:cover !important; background-position:center !important; }
  /* Contacto: el bufón del fondo, a la altura del nombre */
  .contactpage .marca-fondo { top:33% !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  #p-experiencia:not([hidden]) { display:block !important; }
  #p-experiencia .pf-conmuta-exp { width:100% !important; max-width:none !important; }
  #p-experiencia .pf-vistas { display:none !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  html body #p-experiencia.panel:not([hidden]) { display:block !important; grid-template-columns:minmax(0,1fr) !important; }
  html body #p-experiencia .pf-conmuta-exp { grid-column:1 / -1 !important; width:100% !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  html body .pf-experiencia .pf-vista:not([hidden]) { display:block !important; height:auto !important; max-height:none !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  .pf-experiencia .pf-tl, .pf-experiencia .tl-etapas { display:none !important; }
  .tl-movil { list-style:none; margin:20px 0 0; padding:0; }
  .tl-movil li { display:grid; grid-template-columns:60px minmax(0,1fr); gap:14px; align-items:start; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.09); cursor:pointer; }
  .tl-movil img, .tl-movil i { width:60px; aspect-ratio:2 / 3; object-fit:cover; display:block; border:1px solid rgba(255,255,255,.12); }
  .tl-movil span { display:block; font:11px "Courier Prime", monospace; letter-spacing:.14em; color:#1ed0a7; margin-bottom:4px; }
  .tl-movil b { display:block; font-weight:400; font-size:15px; line-height:1.35; color:#fff; }
  .tl-movil em { display:block; font-style:normal; font-size:13px; line-height:1.45; opacity:.7; margin-top:3px; }
}
.lupa-movil { position:fixed; inset:0; z-index:90; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:56px 12px 24px; background:rgba(4,4,5,.96); }
.lupa-movil.on { display:flex; }
.lupa-movil img { max-width:100%; max-height:78vh; object-fit:contain; }
.lupa-movil p { margin:0; color:#d1d1d1; font-size:14px; text-align:center; }
.lupa-movil button { position:absolute; top:12px; right:14px; background:none; border:1px solid rgba(255,255,255,.3); border-radius:50%; width:40px; height:40px; color:#fff; font-size:18px; }
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  html body #p-experiencia .pf-conmuta-exp { height:auto !important; max-height:none !important; }
  html body #p-experiencia .pf-conmuta-exp > * { flex:none !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  .visor.osa-movil::after { top:var(--osa-y) !important; bottom:auto !important; left:calc(var(--osa-x) - 38px) !important; right:auto !important; width:76px !important; height:34px !important; background:url(assets/film/osa-mayor-sin-texto.svg) center / contain no-repeat !important; -webkit-mask:none !important; mask:none !important; opacity:.42 !important; }
}
/* Móvil girado: la misma versión de móvil, aprovechando el ancho (más columnas, imágenes contenidas) */
@media (max-height:500px) and (orientation:landscape) {
  #carrusel .car-track { grid-template-columns:repeat(4, 1fr) !important; }
  .filmo-caras.caras-rejilla { grid-template-columns:repeat(8, 1fr) !important; }
  .filmo-caras.caras-rejilla > :nth-child(-n+9) { order:0 !important; }
  .filmo-caras.caras-rejilla > .cred-video { height:min(calc((100vw - 32px) * 9 / 16), 80vh) !important; width:min(100%, calc(80vh * 16 / 9)) !important; justify-self:center; }
  #docs .d-item .pantalla, .work .proj, .sv-casa, .pf-reel-fig, #proyecto .hero-v, .sv-capa .storyboard { max-width:560px !important; margin-left:auto !important; margin-right:auto !important; }
  .sv-capa .storyboard { grid-template-columns:repeat(4, 1fr) !important; }
  .contactpage .marca-fondo { width:min(60vw, 70vh) !important; top:50% !important; }
}
/* ===== Móvil · cuarta pasada ===== */
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* «No soy un filmmaker»: tan grande como «No soy una línea recta» */
  .pf-vs-caja .pf-vs-tit { font-size:14.25px !important; letter-spacing:.34em !important; font-weight:300 !important; text-align:center; margin:0 0 14px !important; }
  /* Trayectoria · Publicidad: la infografía de productoras a todo el ancho */
  #pf-x-pub .pf-info, #pf-x-pub .pf-info img, #pf-x-pub .pf-pub-casas { width:100% !important; max-width:100% !important; height:auto !important; position:static !important; transform:none !important; }
  #pf-x-pub .pf-pub-casas { display:block !important; margin-top:20px; }
  /* Trayectoria · Televisión: Radio Gaga (mi foto y su nota) debajo de la lista, a todo el ancho */
  #pf-x-tv .pf-tv-fotos { position:static !important; inset:auto !important; display:block !important; width:auto !important; height:auto !important; margin:28px 0 0 !important; transform:none !important; }
  #pf-x-tv .pf-tv-fotos figure, #pf-x-tv .pf-tv-fotos img { display:block !important; width:100% !important; height:auto !important; position:static !important; }
  #pf-x-tv .pf-tv-nota { position:static !important; width:auto !important; height:auto !important; margin-top:14px !important; }
  #pf-x-tv .pf-tv-nota .pf-tv-hueco { display:none !important; }
  #pf-x-tv .pf-tv-nota p { font-size:15px !important; line-height:1.6 !important; height:auto !important; }
  /* Miniaturas de la lista: carteles enteros y logos/fotos apaisadas sin recortar */
  .tl-movil img { object-fit:contain !important; background:#111; }
  /* Otra formación: interlineado limpio */
  #p-formacion .pf-menores > li > * { display:block !important; line-height:1.45 !important; height:auto !important; margin:0 0 4px !important; }
  #p-formacion .pf-menores > li .pf-anos { font-size:11px !important; letter-spacing:.14em; }
  #p-formacion .pf-menores > li em { font-size:13px !important; opacity:.75; font-style:normal; }
  #pf-otra > li { grid-template-columns:1fr !important; }
  #pf-otra > li > * { grid-column:1 !important; }
  /* Colaborar: sin bufón abajo (ya está en la tarjeta); la llamada a la acción, como botón grande */
  .serv-v2 ~ .pf-pie-movil .port-colab { display:none !important; }
  .sv-capa .marcas-pie a, .sv-capa .bc-360 a { display:block; margin:26px 0 10px; padding:15px 18px; border:1px solid #1ed0a7; border-radius:999px; text-align:center; font-size:13px !important; letter-spacing:.16em; text-transform:uppercase; color:#1ed0a7 !important; text-decoration:none; }
}
/* Móvil girado: no se usa; se pide volver a ponerlo en vertical (los vídeos a pantalla completa sí giran) */
@media (max-height:500px) and (orientation:landscape) and (pointer:coarse) {
  body::after { content:"Gira el móvil para ver la web"; position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:#070707 url(assets/logos/bufon-256.png) center 32% / 64px no-repeat; padding-top:90px; color:#d1d1d1; font:300 14px/1.4 Jost, sans-serif; letter-spacing:.2em; text-transform:uppercase; }
  body { overflow:hidden !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  .tl-movil b em { display:inline !important; font-style:italic; opacity:1; font-size:inherit; margin:0; }
  .tl-movil small { display:block; font-size:13px; line-height:1.45; opacity:.7; margin-top:3px; }
  .tl-movil li.tl-etapa { display:block; grid-template-columns:none; padding:22px 0 8px; border-bottom:1px solid rgba(30,208,167,.35); cursor:default; font:11px "Courier Prime", monospace; letter-spacing:.16em; text-transform:uppercase; color:#1ed0a7; }
  .pf-pub-casa { border:0 !important; background:none !important; padding:0 !important; margin:0 0 26px !important; box-shadow:none !important; }
  .pf-pub-casa > summary { list-style:none; cursor:default; pointer-events:none; border:0 !important; background:none !important; padding:0 0 8px !important; margin:0 0 10px !important; border-bottom:1px solid rgba(255,255,255,.14) !important; border-radius:0 !important; }
  .pf-pub-casa > summary::-webkit-details-marker { display:none; }
  .pf-pub-casa > summary::after, .pf-pub-casa > summary::before { display:none !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Colaborar: la propuesta nunca más ancha que la pantalla (la X siempre visible) */
  .sv-caja { width:auto !important; max-width:100% !important; box-sizing:border-box !important; }
  .sv-capa, .sv-capa .serv-hojas, .sv-capa .serv-hoja { max-width:100% !important; box-sizing:border-box; min-width:0 !important; }
  .sv-capa img { max-width:100%; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Nada más ancho que la pantalla: los destellos y adornos no deben ensanchar la página (en el móvil la alejaría) */
  html { overflow-x:clip !important; }
  #proyecto .pagehead *, .sub2 { white-space:normal !important; max-width:100% !important; overflow-wrap:anywhere; }
  main a, .legal a, section a { overflow-wrap:anywhere; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  .pf-pub-casa.abierta { display:block !important; border:0 !important; background:none !important; padding:0 !important; margin:0 0 28px !important; }
  .pf-pub-casa.abierta > .pf-pub-tit { padding:0 0 8px; margin:0 0 12px; border-bottom:1px solid rgba(255,255,255,.14); }
  .pf-pub-casa.abierta > .pf-pub-tit::after, .pf-pub-casa.abierta > .pf-pub-tit::before { display:none !important; }
  .pf-pub-casa.abierta > *:not(.pf-pub-tit) { display:block !important; }
}
/* Móvil girado: con un visor de imágenes abierto (Brand Cinema, fotos, fichas) sí se puede ver en horizontal */
@media (max-height:500px) and (orientation:landscape) and (pointer:coarse) {
  body:has(.sb-visor.on, .lupa.on, .lupa-movil.on)::after { display:none !important; }
  .sb-visor.on .sb-pista figure img, .lupa.on img, .lupa-movil.on img { max-height:88vh !important; max-width:92vw !important; width:auto !important; height:auto !important; object-fit:contain !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Encabezado: «Director de cine · Showrunner» un poco más grande */
  .nombre .cargo { font-size:13px !important; letter-spacing:.2em !important; }
}
.osa-madrid { display:none; }
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* «Madrid» bajo la Osa Mayor, legible */
  .visor.osa-movil .osa-madrid { display:block; position:absolute; z-index:2; top:calc(var(--osa-y) + 16px); left:calc(var(--osa-x) - 35px); transform:none; font:400 6.6px/1 Jost, sans-serif; letter-spacing:.42em; text-transform:uppercase; color:rgba(255,255,255,.6); pointer-events:none; }
  /* Portada: el título y la etiqueta dentro de la foto, a tamaño legible */
  .work .faldon h2, .work .faldon h2 a { font-size:15px !important; line-height:1.25 !important; }
  .work .faldon .f-etq { font-size:10px !important; letter-spacing:.18em !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Trayectoria: pestañas de texto sencillas (arriba y abajo) */
  html body #p-experiencia .pf-conmuta-exp { flex-direction:row !important; flex-wrap:wrap !important; gap:4px 18px !important; padding:0 0 10px !important; margin:0 0 6px !important; border-bottom:1px solid rgba(255,255,255,.12) !important; }
  html body #p-experiencia .pf-conmuta-exp.pf-areas-abajo { border-bottom:0 !important; border-top:1px solid rgba(255,255,255,.12) !important; padding:12px 0 0 !important; margin:28px 0 0 !important; }
  html body #p-experiencia .pf-conmuta-exp > button { width:auto !important; flex:none !important; padding:8px 0 !important; border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important; font-size:11px !important; letter-spacing:.14em !important; text-transform:uppercase; color:rgba(255,255,255,.55) !important; min-height:0 !important; height:auto !important; }
  html body #p-experiencia .pf-conmuta-exp > button.on { color:#1ed0a7 !important; box-shadow:inset 0 -1px 0 #1ed0a7 !important; }
  html body #p-experiencia .pf-conmuta-exp > button::before, html body #p-experiencia .pf-conmuta-exp > button::after { display:none !important; }
  html body #p-experiencia .pf-conmuta-exp > button[hidden], html body #p-experiencia .pf-conmuta-exp > button:not([data-lista]) { display:none !important; }
  html body #p-experiencia > .pf-vista:not([hidden]) { display:block !important; height:auto !important; padding:18px 0 0; }
  html body #p-experiencia > .pf-vista[hidden] { display:none !important; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Fichas: los vídeos uno debajo de otro, a todo el ancho y con su título (sin carrusel ni miniaturas al lado) */
  #proyecto .carrusel { display:block !important; width:auto !important; height:auto !important; }
  #proyecto .carrusel .car-vp, #proyecto .carrusel .car-marco { width:auto !important; height:auto !important; overflow:visible !important; margin:0 !important; }
  #proyecto .carrusel .car-track { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:22px !important; transform:none !important; width:auto !important; height:auto !important; }
  #proyecto .carrusel .car-card { width:auto !important; max-width:none !important; flex:none !important; transform:none !important; opacity:1 !important; filter:none !important; margin:0 !important; }
  #proyecto .carrusel .car-card[aria-hidden="true"], #proyecto .carrusel .car-flecha, #proyecto .carrusel .car-dots, #proyecto .carrusel .lente { display:none !important; }
  #proyecto .carrusel .car-card .clip { width:100% !important; height:auto !important; aspect-ratio:16 / 9; }
  #proyecto .carrusel .car-card figcaption, #proyecto .carrusel .car-card .mono, #proyecto .carrusel .car-card span { font-size:13px !important; position:static !important; opacity:1 !important; }
}
/* Índice de miniaturas de las piezas (fichas con muchas): barra de desplazamiento fina y visible */
.car-dots.car-minis { justify-content:safe center !important; overflow-y:auto !important; overscroll-behavior:contain; scrollbar-width:thin !important; scrollbar-color:rgba(30,208,167,.7) rgba(255,255,255,.07) !important; padding-right:6px !important; }
.car-dots.car-minis::-webkit-scrollbar { display:block !important; width:4px !important; }
.car-dots.car-minis::-webkit-scrollbar-track { background:rgba(255,255,255,.07); border-radius:4px; }
.car-dots.car-minis::-webkit-scrollbar-thumb { background:rgba(30,208,167,.7); border-radius:4px; }
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Fichas: las piezas verticales, centradas y a un tamaño que cabe en la pantalla */
  #proyecto .carrusel .car-card:not(.pieza169) { width:62% !important; max-width:240px !important; height:auto !important; aspect-ratio:auto !important; justify-self:center; }
  #proyecto .carrusel .car-card:not(.pieza169) .clip { position:relative !important; inset:auto !important; flex:none !important; width:100% !important; height:auto !important; aspect-ratio:9 / 16; }
}
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Piezas verticales alojadas en la web (vídeo propio): a tamaño de pantalla */
  #proyecto .carrusel .car-card:not(.pieza169) > video { position:relative !important; inset:auto !important; display:block !important; width:100% !important; height:auto !important; aspect-ratio:9 / 16; object-fit:cover; background:#000; }
}
/* Piezas verticales alojadas en la web: siempre enteras (con bandas si el hueco es apaisado) */
.car-card.reel > video { object-fit:contain; background:#000; }
@media (max-width:760px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  /* Créditos: Melania mira hacia la derecha; en el móvil va la última, que cae en la primera columna */
  .filmo-caras.caras-rejilla > .cara:has(img[src*="melania-urbina"]) { display:none !important; } /* en el móvil, filas completas de cuatro */
}
.tarjeta h1.t-nombre { margin-block:0; }

/* Imágenes: sin menú de guardar en móvil (pulsación larga) ni arrastre */
img, video, svg { -webkit-touch-callout:none; -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }