/* ==========================================================================
   VELOUR — home
   Una pantalla: reel de fondo (o terciopelo), isotipo en el centro y
   palabras flotantes unidas al logo por líneas. El contenido se abre en un
   panel (lateral en escritorio, hoja inferior en el móvil) sin hacer scroll
   de página.
   ========================================================================== */

html:has(body[data-page="home"]),body[data-page="home"]{height:100%;overflow:hidden;overscroll-behavior:none}

.stage{position:fixed;inset:0;overflow:hidden;color:var(--bone);background:var(--ink);touch-action:pinch-zoom;-webkit-tap-highlight-color:transparent;isolation:isolate;
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--sat:env(safe-area-inset-top,0px);
  --ui:var(--bone);--ui-2:rgba(239,232,221,.84);--ui-line:rgba(239,232,221,.34);--ui-fill:rgba(11,8,9,.38);--ui-inv:var(--ink)}
.stage[data-mode="pixels"]{--accent:#6b1424;color:var(--ink);background:#e6e0d6;--ui:#141011;--ui-2:rgba(20,16,17,.86);--ui-line:rgba(20,16,17,.3);--ui-fill:rgba(246,242,235,.5);--ui-inv:#f4efe7}

/* ---------- fondo: terciopelo y reel ---------- */
.bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.bg__velvet{opacity:1;transition:opacity .8s var(--ease)}
.bg__video{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease);background:#000}
.stage.is-video .bg__video{opacity:1}
.bg__file{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg__vimeo{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.bg__vimeo.is-on{opacity:1}
.bg__vimeo iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
.bg__shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 48%,rgba(11,8,9,.18),rgba(11,8,9,.62)),rgba(11,8,9,.32);opacity:0;transition:opacity 1s var(--ease)}
.stage.is-video .bg__shade{opacity:1}
.stage.has-panel .bg__shade{opacity:1;background:radial-gradient(ellipse 70% 60% at 50% 48%,rgba(11,8,9,.42),rgba(11,8,9,.78)),rgba(11,8,9,.3)}
.stage[data-mode="pixels"] .bg__video,.stage[data-mode="pixels"] .bg__shade{opacity:0 !important}

/* ---------- isotipo ---------- */
.logo{position:absolute;left:0;top:0;z-index:5;width:var(--lw,280px);aspect-ratio:500/219;cursor:pointer;transform:translate3d(calc(var(--lx,50vw) - 50%),calc(var(--ly,50vh) - 50%),0) scale(var(--ls,1));transition:transform 1s cubic-bezier(.65,0,.2,1);color:var(--ui);outline:none}
.logo:focus-visible{outline:1px solid var(--ui);outline-offset:6px}
.stage :focus-visible{outline-color:var(--ui)}
.logo__mark{position:absolute;inset:0;background:currentColor;-webkit-mask:url('../img/brand/isotipo.svg') center/contain no-repeat;mask:url('../img/brand/isotipo.svg') center/contain no-repeat;opacity:0;transition:opacity .35s var(--ease),transform .7s var(--ease);filter:drop-shadow(0 6px 30px rgba(0,0,0,.35))}
.logo.is-formed .logo__mark{opacity:1}
.logo.is-glitch .logo__mark{opacity:0}
.logo__px{position:absolute;left:-30%;top:-60%;width:160%;height:220%;max-width:none;pointer-events:none}
.logo__ring{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;border:1px solid var(--ui-line);border-radius:50%;transform:translate(-50%,-50%) scale(.92);opacity:0;pointer-events:none;transition:opacity .6s}
.stage[data-state="home"] .logo__ring{animation:breathe 4.2s var(--ease-io) 1.2s infinite}
/* la frase bajo el isotipo: solo antes de abrir el menú */
.logo__tag{position:absolute;left:50%;top:calc(100% + clamp(20px,3.4vh,34px));transform:translate(-50%,8px);white-space:nowrap;pointer-events:none;
  font-family:var(--serif);font-size:clamp(17px,1.45vw,21px);letter-spacing:.01em;line-height:1;color:var(--ui-2);text-shadow:0 1px 18px rgba(0,0,0,.45);
  opacity:0;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.logo__tag em{font-style:italic;color:var(--champagne)}
.stage[data-mode="pixels"] .logo__tag{text-shadow:none}
.stage[data-mode="pixels"] .logo__tag em{color:inherit}
.stage[data-state="home"] .logo.is-formed .logo__tag{opacity:1;transform:translate(-50%,0);transition-duration:1.1s;transition-delay:.35s}
@media (prefers-reduced-motion:reduce){.stage[data-state="home"] .logo__ring{animation:none}}
@keyframes breathe{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.86)}50%{opacity:.55;transform:translate(-50%,-50%) scale(1)}}
.stage[data-state="panel"] .logo::after{content:'';position:absolute;inset:-10px}
@media (hover:hover){.stage[data-state="home"] .logo:hover .logo__mark{transform:scale(1.06)}}

/* ---------- el logotipo en el menú: píxeles con vida y ventanas que invierten lo que tienen debajo ---------- */
.wm{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.wm-rects{position:absolute;inset:0;z-index:5;pointer-events:none}
.wm-rect{position:absolute;left:0;top:0;border:1.4px solid var(--ui);-webkit-backdrop-filter:invert(1);backdrop-filter:invert(1);opacity:0}
.stage.is-wm .logo__mark{opacity:0 !important}
.stage.is-wm .logo{filter:none}

/* ---------- líneas y palabras ---------- */
.lines{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.lines line{stroke:var(--ui-line);stroke-width:1;vector-effect:non-scaling-stroke}
.lines rect{fill:var(--ui)}
.lines .is-sel{stroke:var(--ui)}
.words{position:absolute;inset:0;z-index:6;pointer-events:none}
.word{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;font-family:var(--sans);font-size:clamp(13px,1.05vw,15px);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ui);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s var(--ease),filter .5s var(--ease);filter:blur(6px);will-change:transform}
.word.is-in{opacity:1;filter:none;pointer-events:auto}
.word__dot{flex:none;width:5px;height:5px;background:currentColor}
.word--r{flex-direction:row-reverse}
.word__lbl{position:relative;padding:3px 6px;transition:background .3s,color .3s,letter-spacing .4s var(--ease)}
.word:hover .word__lbl{letter-spacing:.26em}
.word.is-sel .word__lbl{background:var(--ui);color:var(--ui-inv)}
.word__ext{font-size:.85em;margin-left:4px;opacity:.7}
.word:focus-visible{outline:none}
.word:focus-visible .word__lbl{outline:1px solid var(--ui);outline-offset:3px}

/* ---------- panel ---------- */
.panel{position:absolute;z-index:7;display:flex;flex-direction:column;background:rgba(11,8,9,.74);border:1px solid rgba(239,232,221,.14);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);color:var(--bone);opacity:0;transition:opacity .5s var(--ease),transform .7s cubic-bezier(.2,.8,.2,1)}
.panel.is-open{opacity:1;transform:none}
.stage[data-mode="pixels"] .panel{background:rgba(247,243,236,.8);border-color:rgba(20,16,17,.14);color:var(--ink)}
.panel__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(239,232,221,.25) transparent;padding:26px clamp(18px,2.4vw,34px) calc(30px + var(--safe-b))}
.panel__grip{display:none}
/* escritorio (y móvil en horizontal): panel a la derecha */
@media (min-aspect-ratio:1/1) and (min-width:600px){
  .panel{top:76px;right:28px;bottom:76px;width:min(46vw,640px);transform:translateX(30px)}
}
/* móvil y vertical: hoja inferior que deja el logo y las palabras arriba */
@media (max-aspect-ratio:1/1),(max-width:599px){
  .panel{left:0;right:0;bottom:0;height:61vh;height:var(--sheet-h,61dvh);border-width:1px 0 0;border-radius:16px 16px 0 0;transform:translateY(40px);
    transition:opacity .5s var(--ease),transform .7s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1),background-color .45s var(--ease)}
  /* a pantalla completa: hasta justo debajo de la barra de arriba (volver, velour/pixels, idioma) */
  .panel.is-full{height:calc(100vh - 64px);height:calc(100dvh - 64px - env(safe-area-inset-top,0px));background:rgba(11,8,9,.93)}
  .stage[data-mode="pixels"] .panel.is-full{background:rgba(247,243,236,.96)}
  .panel__grip{display:block;flex:none;position:relative;width:100%;height:30px;padding:0;border:0;background:none;color:inherit;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
  .panel__grip::before{content:'';position:absolute;left:50%;top:11px;width:44px;height:4px;margin-left:-22px;border-radius:2px;background:currentColor;opacity:.3;transition:opacity .3s,width .3s,margin .3s}
  .panel__grip:hover::before,.panel__grip:focus-visible::before{opacity:.7;width:56px;margin-left:-28px}
  .panel__grip:focus-visible{outline:none}
  .panel__scroll{padding-top:6px}
}
/* móvil en horizontal: el panel aprovecha casi toda la altura */
@media (min-aspect-ratio:1/1) and (min-width:600px) and (max-height:500px){.panel{top:62px;bottom:calc(14px + var(--safe-b))}}

/* contenido del panel */
.p-head{display:grid;gap:8px;margin-bottom:22px}
.p-title{margin:0;font-family:var(--serif);font-weight:380;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.01em}
.p-title em{font-style:italic}
.p-lead{margin:0;font-family:var(--serif);font-size:clamp(22px,2vw,28px);line-height:1.22}
.p-text p{margin:0 0 1em;color:inherit;opacity:.82;font-size:15px;line-height:1.7}
.p-sec{margin-top:34px;padding-top:20px;border-top:1px solid rgba(239,232,221,.14)}
.stage[data-mode="pixels"] .p-sec{border-color:rgba(20,16,17,.14)}
.p-sec > .label{display:block;margin-bottom:14px}
.p-count{font-variant-numeric:tabular-nums}

/* lista de trabajos */
.works{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.work{display:grid;gap:10px;width:100%;text-align:left;color:inherit}
.work__img{position:relative;overflow:hidden;background:rgba(239,232,221,.06);aspect-ratio:var(--ar,16/10)}
.work__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .6s;opacity:0}
.work__img img.is-on{opacity:1}
.work:hover .work__img img,.work:focus-visible .work__img img{transform:scale(1.035)}
.work__meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.work__title{margin:0;font-family:var(--serif);font-size:clamp(22px,1.8vw,28px);line-height:1.1}
.work__title em{font-style:italic}
.work__who{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.work__stat{position:absolute;left:10px;bottom:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--bone);color:var(--ink);padding:5px 8px}
.work__play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(239,232,221,.7);display:grid;place-items:center;background:rgba(11,8,9,.35);color:var(--bone)}
.work__play::after{content:'';border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;margin-left:2px}
@media (min-width:1100px) and (min-aspect-ratio:1/1){.works{grid-template-columns:1fr 1fr;gap:26px 18px}.works .work--wide{grid-column:1 / -1}}
@media (min-width:560px) and (max-aspect-ratio:1/1){.works{grid-template-columns:1fr 1fr}.works .work--wide{grid-column:1 / -1}}

/* equipo: de píxel a retrato */
.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}
.member p{margin:0}
.member__img{position:relative;aspect-ratio:1;overflow:hidden;background:rgba(239,232,221,.06);margin-bottom:8px}
.member__img img,.member__img canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.member__img canvas{image-rendering:pixelated;transition:opacity .5s}
.member__name{font-size:12.5px;font-weight:500;letter-spacing:.02em;line-height:1.3}
.member__role{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;line-height:1.45;margin-top:2px !important}
@media (min-width:1100px) and (min-aspect-ratio:1/1){.team{grid-template-columns:repeat(3,minmax(0,1fr))}}
.clients{display:flex;flex-wrap:wrap;gap:6px 0;margin:0;padding:0;list-style:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.9}
.clients li{opacity:.86}
.clients li:not(:last-child)::after{content:'·';margin:0 10px;opacity:.4}
.chapter{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}
.chapter img{width:96px;aspect-ratio:9/16;object-fit:cover}
.chapter p{margin:0;font-size:14px;line-height:1.65;opacity:.8}

/* contacto */
.contact-big{display:block;font-family:var(--serif);font-size:clamp(28px,3.4vw,46px);line-height:1.1;word-break:break-word}
.contact-rows{display:grid;gap:14px;margin:22px 0 0}
.contact-rows div{display:grid;gap:2px}
.contact-rows dd{margin:0;font-size:16px}
.contact-rows dd a{display:inline-block;padding:11px 0;margin:-11px 0}
.p-form{display:grid;gap:22px;margin-top:8px}
.p-form .btn{width:100%}
.stage[data-mode="pixels"] .input{color:var(--ink);border-color:rgba(20,16,17,.25)}
.stage[data-mode="pixels"] .chip{color:var(--ink);border-color:rgba(20,16,17,.25)}
.stage[data-mode="pixels"] .chip[aria-pressed="true"]{background:var(--ink);color:#f4efe7}
.stage[data-mode="pixels"] .btn{color:var(--ink);border-color:rgba(20,16,17,.3)}
.stage[data-mode="pixels"] .btn--solid{background:var(--ink);color:#f4efe7}
.stage[data-mode="pixels"] .input:focus{border-color:var(--ink)}
.stage[data-mode="pixels"] .panel .label{color:rgba(20,16,17,.68)}
.stage[data-mode="pixels"] .check,.stage[data-mode="pixels"] .check a{color:var(--ink)}
.stage[data-mode="pixels"] .check a{border-color:rgba(20,16,17,.3)}
.stage[data-mode="pixels"] .check__box{border-color:rgba(20,16,17,.45)}
.stage[data-mode="pixels"] .check input:checked + .check__box{background:var(--ink);border-color:var(--ink)}
.stage[data-mode="pixels"] .check input:checked + .check__box::after{border-color:#f4efe7}
.stage[data-mode="pixels"] .check input:focus-visible + .check__box{outline-color:var(--ink)}
.stage[data-mode="pixels"] .form-msg{color:rgba(20,16,17,.68)}
.stage[data-mode="pixels"] .form-msg.is-err{color:#9a2f22}
.stage[data-mode="pixels"] .form-msg.is-ok{color:#3f5a2a}

/* galerías (fotografía, eventos) */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.gal button{position:relative;aspect-ratio:4/5;overflow:hidden;background:rgba(20,16,17,.06)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal button:hover img{transform:scale(1.04)}
.gal-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px}
.gal-h .p-lead{font-size:24px}
.ep{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- esquinas ---------- */
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-fill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:lowercase;color:var(--ui);transition:border-color .3s,background .3s,color .3s}
.pill::after{content:'';position:absolute;inset:-4px}
.pill:hover{border-color:var(--ui)}
.pill__dot{width:6px;height:6px;flex:none;background:currentColor;transition:transform .5s var(--ease)}
.pill--bg.is-velvet .pill__dot{transform:rotate(45deg) scale(1.15)}
.pill--back{position:absolute;z-index:9;top:calc(18px + env(safe-area-inset-top,0px));left:calc(16px + env(safe-area-inset-left,0px))}
.corner{position:absolute;z-index:9;display:flex;align-items:center;gap:8px}
.corner--tr{top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px))}
.corner--bl{bottom:calc(18px + var(--safe-b));left:calc(16px + env(safe-area-inset-left,0px))}
.corner--br{bottom:calc(24px + var(--safe-b));right:calc(18px + env(safe-area-inset-right,0px))}
.corner__link{display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:lowercase;color:var(--ui-2);padding:14px 4px}
.corner__link:hover{color:var(--ui)}
.stage .lang button{color:var(--ui-2)}
.stage .lang button[aria-pressed="true"]{color:var(--ui)}
.stage .lang i{color:var(--ui-line)}
.switch{position:absolute;z-index:9;left:50%;top:calc(13px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;align-items:center;gap:4px;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.switch button{min-height:44px;padding:0 8px;color:var(--ui-2);transition:color .3s,letter-spacing .4s var(--ease)}
.switch button[aria-pressed="true"]{color:var(--ui);font-weight:600}
.switch button:hover{letter-spacing:.3em}
.switch i{color:var(--ui-line);font-style:normal}
.stage.has-panel .corner--bl,.stage.has-panel .corner--br{opacity:0;pointer-events:none;visibility:hidden}
.corner--bl,.corner--br{transition:opacity .4s,visibility .4s}
@media (min-aspect-ratio:1/1) and (min-width:600px){
  .stage.has-panel .corner--bl{opacity:1;pointer-events:auto;visibility:visible}
}
@media (max-width:400px){.pill--back{padding:0 14px}.pill--back [lang]{display:none}.switch{font-size:10px;letter-spacing:.18em}.switch button{padding:0 5px}.stage .lang button{min-width:28px}}

/* ---------- ficha de proyecto ---------- */
.ficha{position:fixed;inset:0;z-index:40;background:var(--ink);color:var(--bone);overflow-y:auto;overscroll-behavior:contain;animation:fichaIn .5s var(--ease)}
.ficha[hidden]{display:none}
@keyframes fichaIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ficha__bar{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gutter) 12px;background:linear-gradient(var(--ink) 70%,rgba(11,8,9,0))}
.ficha__bar .pill{--ui:var(--bone);--ui-line:rgba(239,232,221,.34);--ui-fill:rgba(11,8,9,.4)}
.ficha__bar>[data-ficha-close]{justify-self:start}
.ficha__kicker{text-align:center}
.ficha__nav{display:flex;gap:6px;justify-self:end}
/* alto que le queda al vídeo bajo la barra y el título (el título va primero; home.js mide --fh) */
.ficha{--fvh:max(100vh - var(--fh,250px),45vh)}
@supports (height:100svh){.ficha{--fvh:max(100svh - var(--fh,250px),45svh)}}
.ficha__body{max-width:1180px;margin:0 auto;padding:8px var(--gutter) calc(60px + var(--safe-b));display:grid;gap:clamp(22px,3vw,40px)}
.ficha__media{position:relative;background:#000}
.ficha__media .player{aspect-ratio:16/9}
.ficha__media .player:not(.player--v){max-width:calc(var(--fvh) * 16 / 9);margin-inline:auto}
@media (max-width:400px){.ficha__media .player.player--gate:not(.player--v){aspect-ratio:auto;min-height:250px}}
.ficha__media .player--v{aspect-ratio:9/16;max-height:var(--fvh);width:auto;margin:0 auto}
/* frames de la pieza: tira bajo el reproductor, del mismo ancho; junto al vertical de Instagram */
.ficha__media.has-frames{display:grid;gap:8px;width:100%;max-width:calc(var(--fvh) * 16 / 9);margin-inline:auto;background:none}
.ficha__media.has-frames .player{max-width:none;background:#000}
.fframes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:599px){.fframes{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* con menos recuadros, la fila se reparte entre los que hay */
.fframes[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.fframes[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.fframes[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.ficha__media.has-frames.is-v{max-width:none}
.ficha__media.is-v .player--v{justify-self:center;width:min(100%,calc(var(--fvh) * 9 / 16));max-height:none}
@media (min-width:900px){
  /* los frames, nunca más altos que el vídeo vertical (dos filas de 4:5 → ancho × 1,25) */
  .ficha__media.has-frames.is-v{grid-template-columns:calc(var(--fvh) * 9 / 16) minmax(0,min(560px,calc((var(--fvh) - 8px) / 1.25)));justify-content:center;align-items:center;gap:12px}
  .ficha__media.has-frames.is-v .player--v{width:100%}
  .ficha__media.is-v .fframes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ficha__media.is-v .fframes[data-n="3"] .fframe:nth-child(3){display:none}
}
.fframe{position:relative;aspect-ratio:var(--far,16/9);overflow:hidden;background:#000}
.fframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.fframe img.is-on{opacity:1;animation:fkb 9s ease-in-out infinite alternate}
.fframe:nth-child(2n) img.is-on{animation-direction:alternate-reverse}
.fframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transform:scale(1.03);transition:opacity .9s var(--ease)}
.fframe.is-on iframe{opacity:1}
/* vídeo vertical en recuadros 4:5: el reproductor llena el recuadro (sobra por arriba y por abajo), sin bandas */
.fframes[data-v] .fframe iframe{top:50%;bottom:auto;height:auto;aspect-ratio:9/16;transform:translateY(-50%) scale(1.03)}
@keyframes fkb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2.5%,-1.5%)}}
@media (prefers-reduced-motion:reduce){.fframe img.is-on{animation:none}}
.ficha__head{display:grid;gap:10px}
.ficha__title{margin:0;font-family:var(--serif);font-weight:380;font-size:clamp(40px,6vw,92px);line-height:.95;letter-spacing:-.015em}
.ficha__cols{display:grid;gap:clamp(22px,4vw,64px)}
@media (min-width:900px){.ficha__cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.ficha__desc{font-family:var(--serif);font-size:clamp(21px,1.9vw,28px);line-height:1.3;margin:0}
.ficha__stat{display:inline-block;justify-self:start;padding:7px 11px;background:var(--bone);color:var(--ink);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.ficha__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ficha__list li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:15px;line-height:1.6;opacity:.86}
.ficha__list li::before{content:'→';opacity:.6}
.stills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter)}
.stills::-webkit-scrollbar{display:none}
.stills:focus-visible{outline:1px solid var(--bone);outline-offset:4px}
.stills img{flex:none;height:min(52vh,420px);width:auto;scroll-snap-align:start;object-fit:cover}
.ficha__link{justify-self:start}