@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#0d0c0b;
  --bg-alt:#17140f;
  --ink:#f2ede4;
  --ink-dim:#a79e8e;
  --ink-faint:#6e6759;
  --accent:#1c3d24;
  --accent-light:#4CAF6B;
  --line:rgba(242,237,228,0.12);
  --line-strong:rgba(242,237,228,0.22);
  --bar-tex:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="160" height="160"%3E%3Cfilter id="camtex" x="-30%25" y="-30%25" width="160%25" height="160%25"%3E%3CfeTurbulence type="turbulence" baseFrequency="0.05 0.032" numOctaves="5" seed="44" stitchTiles="stitch" result="noise"/%3E%3CfeDiffuseLighting in="noise" lighting-color="%23110f0d" surfaceScale="6" diffuseConstant="0.9" result="diff"%3E%3CfeDistantLight azimuth="230" elevation="46"/%3E%3C/feDiffuseLighting%3E%3CfeSpecularLighting in="noise" lighting-color="%23ffffff" surfaceScale="6" specularConstant="0.17" specularExponent="24" result="spec"%3E%3CfeDistantLight azimuth="230" elevation="46"/%3E%3C/feSpecularLighting%3E%3CfeComposite in="spec" in2="SourceAlpha" operator="in" result="specClip"/%3E%3CfeBlend in="specClip" in2="diff" mode="screen"/%3E%3C/filter%3E%3Crect width="160" height="160" filter="url(%23camtex)" opacity="0.42"/%3E%3C/svg%3E');
  --btn-tex:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="90" height="90"%3E%3Cfilter id="btex" x="-30%25" y="-30%25" width="160%25" height="160%25"%3E%3CfeTurbulence type="turbulence" baseFrequency="0.09 0.06" numOctaves="5" seed="44" stitchTiles="stitch" result="noise"/%3E%3CfeDiffuseLighting in="noise" lighting-color="%23110f0d" surfaceScale="4" diffuseConstant="0.9" result="diff"%3E%3CfeDistantLight azimuth="230" elevation="46"/%3E%3C/feDiffuseLighting%3E%3CfeSpecularLighting in="noise" lighting-color="%23ffffff" surfaceScale="4" specularConstant="0.22" specularExponent="22" result="spec"%3E%3CfeDistantLight azimuth="230" elevation="46"/%3E%3C/feSpecularLighting%3E%3CfeComposite in="spec" in2="SourceAlpha" operator="in" result="specClip"/%3E%3CfeBlend in="specClip" in2="diff" mode="screen"/%3E%3C/filter%3E%3Crect width="90" height="90" filter="url(%23btex)" opacity="0.4"/%3E%3C/svg%3E');
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  cursor:none;
  transition:background-color .5s ease;
}
body.iso-hi{background:#f4f2ec;}
a, button, .work-card, .btn{
  cursor:none;
}
/* En pantallas táctiles no hay ratón real, así que el círculo que lo sustituye
   se queda "flotando" sin moverse. Lo ocultamos y devolvemos el cursor normal. */
@media (hover:none), (pointer:coarse){
  body, a, button, .work-card, .btn{cursor:auto;}
  .cursor-ring{display:none;}
}
.cursor-ring{
  position:fixed;top:0;left:0;width:26px;height:26px;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  opacity:1;
  transition:width .3s cubic-bezier(.34,1.56,.4,1), height .3s cubic-bezier(.34,1.56,.4,1);
  will-change:transform;
}
/* Cuadrado con la línea intermitente: se corta en el punto medio de cada lado,
   quedando 4 esquinas largas (como el recuadro de enfoque de una cámara) */
.cursor-ring::before{
  content:'';position:absolute;inset:0;box-sizing:border-box;
  border:2px solid #ffffff;border-radius:0;
  -webkit-mask:
    linear-gradient(90deg, #000 0 36%, transparent 36% 64%, #000 64% 100%),
    linear-gradient(0deg, #000 0 36%, transparent 36% 64%, #000 64% 100%);
  -webkit-mask-composite:source-in;
          mask:
    linear-gradient(90deg, #000 0 36%, transparent 36% 64%, #000 64% 100%),
    linear-gradient(0deg, #000 0 36%, transparent 36% 64%, #000 64% 100%);
          mask-composite:intersect;
  transition:border-color .25s ease, border-width .25s ease;
}
.cursor-ring::after{
  content:'';position:absolute;top:50%;left:50%;
  width:4px;height:4px;background:#ffffff;border-radius:0;
  transform:translate(-50%,-50%);
  transition:background .25s ease,opacity .25s ease;
}
.cursor-ring.is-active{
  width:36px;height:36px;
}
/* En grande, cuadrado continuo (sin trocear) */
.cursor-ring.is-active::before{
  border-width:1.8px;border-color:#ffffff;
  -webkit-mask:none;mask:none;
}
.cursor-ring.is-active::after{
  background:#ffffff;
}
body.iso-hi .cursor-ring::before{border-color:#0D0C0B;}
body.iso-hi .cursor-ring::after{background:#0D0C0B;}
/* Al pasar por encima de algo clicable, el cursor se queda en blanco aunque el ISO esté en 1600 */
body.iso-hi .cursor-ring.is-active::before{border-color:#ffffff;}
body.iso-hi .cursor-ring.is-active::after{background:#ffffff;}
a{color:inherit;text-decoration:none;}
.serif{font-family:'Archivo Black',sans-serif;font-weight:500;}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
img{display:block;max-width:100%;}
::selection{background:var(--accent);color:var(--ink);}

/* HEADER — estética "placa superior de cámara" */
header{
  position:sticky;top:0;z-index:100;
  background-color:#070605;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.008) 12%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0.6) 100%),
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="160" height="160"%3E%3Cfilter id="camtex" x="-30%25" y="-30%25" width="160%25" height="160%25"%3E%3CfeTurbulence type="turbulence" baseFrequency="0.05 0.032" numOctaves="5" seed="44" stitchTiles="stitch" result="noise"/%3E%3CfeDiffuseLighting in="noise" lighting-color="%23110f0d" surfaceScale="6" diffuseConstant="0.9" result="diff"%3E%3CfeDistantLight azimuth="230" elevation="46"/%3E%3C/feDiffuseLighting%3E%3CfeSpecularLighting in="noise" lighting-color="%23ffffff" surfaceScale="6" specularConstant="0.17" specularExponent="24" result="spec"%3E%3CfeDistantLight azimuth="230" elevation="46"/%3E%3C/feSpecularLighting%3E%3CfeComposite in="spec" in2="SourceAlpha" operator="in" result="specClip"/%3E%3CfeBlend in="specClip" in2="diff" mode="screen"/%3E%3C/filter%3E%3Crect width="160" height="160" filter="url(%23camtex)" opacity="0.36"/%3E%3C/svg%3E');
  background-repeat:no-repeat, repeat;
  background-size:100% 100%, 30px 30px;
  backdrop-filter:blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -4px 6px rgba(0,0,0,0.6),
    0 8px 16px rgba(0,0,0,0.6);
  border-bottom:1px solid rgba(0,0,0,0.6);
  border-top:1px solid rgba(255,255,255,0.05);
  transition:background-color .5s ease, border-color .5s ease;
}
/* Remaches decorativos, como los tornillos de una carcasa de cámara */
header::before,
header::after{
  content:'';position:absolute;top:9px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.55), rgba(255,255,255,0.06) 70%);
  box-shadow:0 0 0 1px rgba(0,0,0,0.45);
  pointer-events:none;
}
header::before{left:12px;}
header::after{right:12px;}

header .wrap{
  position:relative;max-width:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 56px;
}

.hdr-left{display:flex;align-items:center;gap:30px;}
.hdr-right{display:flex;align-items:center;gap:22px;}

/* ARCHIVADO (oculto con display:none en todas las páginas).
   Para recuperarlo: quitar el display:none de abajo y, si el <div class="hdr-viewfinder"> ya no está en el HTML, añadir <div class="hdr-viewfinder" aria-hidden="true"></div>
   justo antes de <div class="hdr-right"> en cada página.
   Visor óptico de cámara: ya SOLO el marco/cristal (sin el óvalo de goma
   alrededor), un poco más alargado horizontalmente, flotando directamente
   sobre la textura del header con una sombra de contacto vía CSS. */
.hdr-viewfinder{
  display:none;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:142px;height:78px;
  pointer-events:none;z-index:2;
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 110"%3E%3Cdefs%3E%3ClinearGradient id="tabGrad" x1="0" y1="0" x2="1" y2="0.3"%3E%3Cstop offset="0" stop-color="%2328251f"/%3E%3Cstop offset="0.5" stop-color="%23151310"/%3E%3Cstop offset="1" stop-color="%23060504"/%3E%3C/linearGradient%3E%3ClinearGradient id="frame1Grad" x1="0" y1="0" x2="0" y2="1"%3E%3Cstop offset="0" stop-color="%23433e30"/%3E%3Cstop offset="0.18" stop-color="%231f1c15"/%3E%3Cstop offset="0.5" stop-color="%230e0c08"/%3E%3Cstop offset="0.82" stop-color="%231a1813"/%3E%3Cstop offset="1" stop-color="%23050403"/%3E%3C/linearGradient%3E%3ClinearGradient id="frame2Grad" x1="0" y1="0" x2="0" y2="1"%3E%3Cstop offset="0" stop-color="%23524c38"/%3E%3Cstop offset="0.22" stop-color="%23242014"/%3E%3Cstop offset="0.55" stop-color="%23110f0a"/%3E%3Cstop offset="0.85" stop-color="%23211e15"/%3E%3Cstop offset="1" stop-color="%23050403"/%3E%3C/linearGradient%3E%3CradialGradient id="holeGrad" cx="0.5" cy="0.3" r="0.8"%3E%3Cstop offset="0" stop-color="%23040302"/%3E%3Cstop offset="0.5" stop-color="%23080604"/%3E%3Cstop offset="1" stop-color="%23000000"/%3E%3C/radialGradient%3E%3CradialGradient id="lensBase" cx="0.3" cy="0.22" r="0.9"%3E%3Cstop offset="0" stop-color="%236d6a62"/%3E%3Cstop offset="0.12" stop-color="%2338352c"/%3E%3Cstop offset="0.35" stop-color="%2316140e"/%3E%3Cstop offset="0.68" stop-color="%23070605"/%3E%3Cstop offset="1" stop-color="%23010101"/%3E%3C/radialGradient%3E%3ClinearGradient id="chromaRim" x1="0" y1="0" x2="1" y2="1"%3E%3Cstop offset="0" stop-color="%237f9cb3" stop-opacity="0.5"/%3E%3Cstop offset="0.3" stop-color="%23ab85b5" stop-opacity="0.28"/%3E%3Cstop offset="0.6" stop-color="%23d9bd89" stop-opacity="0.22"/%3E%3Cstop offset="1" stop-color="%23669599" stop-opacity="0.4"/%3E%3C/linearGradient%3E%3CradialGradient id="screwGrad" cx="0.35" cy="0.3" r="0.8"%3E%3Cstop offset="0" stop-color="%2395927f"/%3E%3Cstop offset="0.4" stop-color="%23454237"/%3E%3Cstop offset="1" stop-color="%230b0a08"/%3E%3C/radialGradient%3E%3CclipPath id="lensClip"%3E%3Crect x="68" y="35" width="64" height="40" rx="6"/%3E%3C/clipPath%3E%3Cfilter id="blurM" x="-50%25" y="-50%25" width="200%25" height="200%25"%3E%3CfeGaussianBlur stdDeviation="4.5"/%3E%3C/filter%3E%3Cfilter id="blurS" x="-50%25" y="-50%25" width="200%25" height="200%25"%3E%3CfeGaussianBlur stdDeviation="1.4"/%3E%3C/filter%3E%3Cfilter id="grainVF" x="-20%25" y="-20%25" width="140%25" height="140%25"%3E%3CfeTurbulence type="turbulence" baseFrequency="0.13 0.1" numOctaves="5" seed="44" stitchTiles="stitch" result="noise"/%3E%3CfeDiffuseLighting in="noise" lighting-color="%23110f0d" surfaceScale="3" diffuseConstant="0.9" result="diff"%3E%3CfeDistantLight azimuth="230" elevation="46"/%3E%3C/feDiffuseLighting%3E%3CfeSpecularLighting in="noise" lighting-color="%23ffffff" surfaceScale="3" specularConstant="0.25" specularExponent="20" result="spec"%3E%3CfeDistantLight azimuth="230" elevation="46"/%3E%3C/feSpecularLighting%3E%3CfeComposite in="spec" in2="SourceAlpha" operator="in" result="specClip"/%3E%3CfeBlend in="specClip" in2="diff" mode="screen" result="grain"/%3E%3CfeComposite in="grain" in2="SourceAlpha" operator="in"/%3E%3C/filter%3E%3C/defs%3E%3Crect x="4" y="30" width="11" height="30" rx="4" fill="url(%23tabGrad)" stroke="%23000000" stroke-width="1"/%3E%3Crect x="5.5" y="33" width="1.6" height="24" rx="0.8" fill="%234f4a3a" opacity="0.6"/%3E%3Crect x="15" y="13" width="170" height="84" rx="20" fill="url(%23frame1Grad)" stroke="%23000000" stroke-width="1.3"/%3E%3Crect x="15" y="13" width="170" height="84" rx="20" fill="%23000000" filter="url(%23grainVF)" opacity="0.4"/%3E%3Crect x="23" y="20" width="154" height="70" rx="14" fill="url(%23frame2Grad)" stroke="%23000000" stroke-width="1"/%3E%3Crect x="23" y="20" width="154" height="70" rx="14" fill="%23000000" filter="url(%23grainVF)" opacity="0.38"/%3E%3Crect x="35" y="28" width="130" height="54" rx="9" fill="url(%23holeGrad)"/%3E%3Ccircle cx="23" cy="20" r="3.4" fill="url(%23screwGrad)" stroke="%23000000" stroke-width="0.6"/%3E%3Ccircle cx="177" cy="90" r="3.4" fill="url(%23screwGrad)" stroke="%23000000" stroke-width="0.6"/%3E%3Crect x="68" y="35" width="64" height="40" rx="6" fill="url(%23lensBase)"/%3E%3Crect x="68" y="35" width="64" height="40" rx="6" fill="none" stroke="url(%23chromaRim)" stroke-width="1.6"/%3E%3Cg clip-path="url(%23lensClip)"%3E%3Cellipse cx="84" cy="43" rx="16" ry="10" fill="%23efede3" opacity="0.68" filter="url(%23blurS)"/%3E%3Cellipse cx="84" cy="43" rx="6.5" ry="4.2" fill="%23ffffff" opacity="0.88" filter="url(%23blurS)"/%3E%3Cellipse cx="112" cy="65" rx="12" ry="7.5" fill="%23bfc8ce" opacity="0.26" filter="url(%23blurM)"/%3E%3Cellipse cx="122" cy="40" rx="6.5" ry="13" fill="%2387a9bd" opacity="0.16" filter="url(%23blurM)"/%3E%3Cellipse cx="76" cy="67" rx="7.5" ry="11" fill="%23c3967f" opacity="0.13" filter="url(%23blurM)"/%3E%3C/g%3E%3Crect x="68" y="35" width="64" height="40" rx="6" fill="none" stroke="%23000000" stroke-width="1" opacity="0.65"/%3E%3C/svg%3E');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.6)) drop-shadow(0 1px 0 rgba(0,0,0,0.85));
}

/* Indicador de batería de cámara (decorativo) */
.cam-battery{display:flex;align-items:center;gap:2px;}
.batt-body{
  position:relative;width:26px;height:13px;
  border:1.4px solid rgba(255,255,255,0.5);border-radius:2px;
  background:rgba(255,255,255,0.04);overflow:hidden;
  transition:border-color .5s ease;
}
.batt-level{position:absolute;top:1.5px;bottom:1.5px;left:1.5px;width:65%;
  background:#ffffff;border-radius:1px;transition:background-color .5s ease;}
.batt-nub{width:3px;height:6px;background:rgba(255,255,255,0.5);border-radius:0 2px 2px 0;transition:background-color .5s ease;}

/* Control de ISO — clic para alternar 100 / 1600. Botón físico de cámara: aro metálico,
   cúpula convexa cuando está "fuera", y se hunde (sombras invertidas) cuando está pulsado. */
.cam-iso{
  position:relative;
  width:50px;height:50px;border-radius:50%;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 8%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 70%),
    var(--bar-tex),
    radial-gradient(circle at 34% 28%, #2a2927 0%, #121110 62%, #080706 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:100% 100%, 19px 19px, 100% 100%;
  border:none;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  line-height:1.1;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.9),
    0 0 0 3.5px rgba(255,255,255,0.16),
    0 0 0 4.5px rgba(0,0,0,0.9),
    0 7px 12px rgba(0,0,0,0.75),
    0 2px 3px rgba(0,0,0,0.8),
    inset 0 2px 2px rgba(255,255,255,0.22),
    inset 0 -4px 6px rgba(0,0,0,0.7);
  transition:box-shadow .15s ease, transform .15s ease, background .5s ease;
}
.cam-iso .iso-label, .cam-iso .iso-value, nav a{text-shadow:0 1px 2px rgba(0,0,0,0.95);}
.cam-iso .iso-label{
  font-size:8px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);
  transition:color .5s ease;
}
.cam-iso .iso-value{
  font-family:monospace;font-size:12.5px;color:#fff;margin-left:0;
  transition:color .2s ease;
}
.cam-iso:hover .iso-value{color:#E4483D;}
body.iso-hi .cam-iso:hover .iso-value{color:#E4483D;}

/* Estado pulsado: el botón se hunde en su alojamiento */
.cam-iso:active,
.cam-iso[aria-pressed="true"]{
  transform:translateY(1px);
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.9),
    0 0 0 3.5px rgba(255,255,255,0.1),
    0 0 0 4.5px rgba(0,0,0,0.9),
    inset 0 3px 5px rgba(0,0,0,0.85),
    inset 0 -1px 1px rgba(255,255,255,0.05);
}
/* La barra superior (header) se queda siempre con su aspecto por defecto,
   no se invierte con el ISO — solo el resto de bloques (footer, textos, logos...) */

/* Estado "ISO alto": invierte footer, descripciones de proyecto y logos, como un flash */
body.iso-hi footer{background:#f4f2ec;border-top-color:rgba(13,12,11,0.15);}
body.iso-hi footer p{color:#0D0C0B;}

body.iso-hi .project-body{background:#f4f2ec;}
body.iso-hi .project-body p{color:#0D0C0B;}
body.iso-hi .project-body strong{color:#0D0C0B;}

body.iso-hi .logos-section{background:#f4f2ec;}
body.iso-hi .logos-section .eyebrow{color:#0D0C0B;}
body.iso-hi .logo-word{color:#0D0C0B;}
body.iso-hi .logo-real{filter:invert(1);}

nav ul{list-style:none;display:flex;gap:32px;}
/* "Trabajo" como botón de cámara: rectangular con borde redondeado, mismo bisel que el ISO */
nav a{
  display:inline-flex;align-items:center;justify-content:center;
  height:37px;padding:0 21px;border-radius:19px;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 8%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 70%),
    var(--bar-tex),
    radial-gradient(circle at 34% 28%, #2a2927 0%, #121110 62%, #080706 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:100% 100%, 19px 19px, 100% 100%;
  box-shadow:
    0 0 0 1.5px rgba(0,0,0,0.9),
    0 0 0 2.5px rgba(255,255,255,0.15),
    0 0 0 3.5px rgba(0,0,0,0.9),
    0 6px 10px rgba(0,0,0,0.75),
    0 2px 3px rgba(0,0,0,0.8),
    inset 0 1.5px 2px rgba(255,255,255,0.22),
    inset 0 -3px 5px rgba(0,0,0,0.7);
  font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);
  transition:color .5s ease, box-shadow .15s ease, transform .15s ease;
}
nav a:hover{color:#ffffff;}
nav a:active{
  transform:translateY(2px);
  box-shadow:
    0 0 0 1.5px rgba(0,0,0,0.9),
    0 0 0 2.5px rgba(255,255,255,0.1),
    0 0 0 3.5px rgba(0,0,0,0.9),
    0 1px 2px rgba(0,0,0,0.6),
    inset 0 3px 6px rgba(0,0,0,0.85);
}

/* Instagram y LinkedIn, mismo formato redondo que el ISO, en dos tamaños distintos */
.social-icons{display:flex;gap:13px;align-items:center;}
.social-icons a{
  width:35px;height:35px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 8%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 70%),
    var(--bar-tex),
    radial-gradient(circle at 34% 28%, #2a2927 0%, #121110 62%, #080706 100%);
  background-repeat:no-repeat, repeat, no-repeat;
  background-size:100% 100%, 19px 19px, 100% 100%;
  box-shadow:
    0 0 0 1.4px rgba(0,0,0,0.9),
    0 0 0 2.3px rgba(255,255,255,0.15),
    0 0 0 3.2px rgba(0,0,0,0.9),
    0 6px 10px rgba(0,0,0,0.75),
    0 2px 3px rgba(0,0,0,0.8),
    inset 0 1.4px 2px rgba(255,255,255,0.22),
    inset 0 -3px 5px rgba(0,0,0,0.7);
  color:var(--ink);
  transition:color .5s ease, box-shadow .15s ease, transform .15s ease;
}
.social-icons a[aria-label="LinkedIn"]{width:29px;height:29px;}
.social-icons a:hover{color:#ffffff;}
.social-icons a:active{
  transform:translateY(2px);
  box-shadow:
    0 0 0 1.4px rgba(0,0,0,0.9),
    0 0 0 2.3px rgba(255,255,255,0.1),
    0 0 0 3.2px rgba(0,0,0,0.9),
    0 1px 2px rgba(0,0,0,0.6),
    inset 0 3px 6px rgba(0,0,0,0.85);
}
.social-ico{width:18px;height:18px;display:block;opacity:1;transition:opacity .2s ease;}
.social-icons a[aria-label="LinkedIn"] .social-ico{width:15px;height:15px;}
.social-icons a:hover .social-ico{opacity:1;}
.social-icons a:hover .social-ico{opacity:1;transform:translateY(-1px);}
.nav-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink);transition:color .5s ease;}

@media (max-width:760px){
  header::before,header::after{display:none;}
  /* Barra más estrecha en móvil */
  header{background-size:100% 100%, 20px 20px;}
  header .wrap{padding:14px 30px;}
  /* Hamburguesa a la izquierda, batería/ISO a la derecha (como en escritorio) */
  .nav-toggle{order:1;}
  .hdr-left{order:2;}
  .hdr-right{order:3;display:flex;gap:14px;}
  .cam-iso{width:41px;height:41px;}
  .cam-iso .iso-label{font-size:7px;}
  .cam-iso .iso-value{font-size:11px;}
  /* Visor óptico más pequeño en móvil, misma ilustración a escala */
  .hdr-viewfinder{width:68px;height:38px;}
  nav ul{
    position:fixed;top:66px;left:0;right:0;background:var(--bg);
    flex-direction:column;gap:0;border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  nav ul.open{max-height:300px;}
  nav ul li{border-top:1px solid var(--line);}
  nav ul a{
    text-shadow:none;display:block;height:auto;padding:18px 32px;
    background:none;box-shadow:none;border-radius:0;
    justify-content:flex-start;
  }
  nav ul a:active{box-shadow:none;transform:none;}
  .social-icons{display:none;}
  .nav-toggle{display:block;}
}

/* ARCHIVADO (retirado de index.html): capa global de grano / ruido de píxel "gamberra".
   Para recuperarla hace falta volver a añadir el <div class="fx-grain"> y su script en index.html.
   Ajustes rápidos: --fx-grain (intensidad del ruido 0-1) y --fx-grid (intensidad de la rejilla de píxeles). */
.fx-grain{
  --fx-grain:0.22;
  --fx-grid:0.03;
  position:fixed;z-index:9000;pointer-events:none;
  top:-200px;left:-200px;width:calc(100% + 400px);height:calc(100% + 400px);
  background-image:var(--fx-noise, none);
  background-size:96px 96px;             /* cada píxel del ruido ocupa 0,5px (1 píxel real en pantallas retina) */
  background-position:0 var(--fx-y, 0px); /* se desplaza con el scroll, como si fuera parte de la página */
  image-rendering:pixelated;
  opacity:var(--fx-grain);
  animation:fxGrainJitter .9s steps(1) infinite;
  will-change:transform;
}
/* Rejilla fina de píxeles por encima (no se mueve) */
.fx-grain::after{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,var(--fx-grid)) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,var(--fx-grid)) 1px, transparent 1px);
  background-size:2px 2px;
  background-position:0 var(--fx-y, 0px);
}
@keyframes fxGrainJitter{
  0%{transform:translate(0,0);}
  12%{transform:translate(-57px,31px);}
  25%{transform:translate(43px,-84px);}
  37%{transform:translate(-120px,-22px);}
  50%{transform:translate(78px,96px);}
  62%{transform:translate(-31px,-143px);}
  75%{transform:translate(133px,12px);}
  87%{transform:translate(-96px,70px);}
  100%{transform:translate(0,0);}
}
@media (prefers-reduced-motion:reduce){ .fx-grain{animation:none;} }

/* Carrusel 3D de marcas dentro del banner (anillo de logos que gira).
   --ring-w = ancho de cada logo; el radio del anillo se calcula en JS (ocupa casi todo el ancho).
   --ring-drop = distancia del logo frontal por debajo del centro del banner. */
.logo-ring{
  --ring-w:clamp(42px,4.8vw,70px);
  --ring-drop:clamp(64px,9vh,86px);
  --ring-sag:0px;
  --ring-h:calc(var(--ring-w) * 1.5 + var(--ring-sag) * 2 + 60px);   /* alto de sobra: la máscara recorta lo que sobresale de la caja */
  position:absolute;left:0;right:0;
  top:calc(50% + var(--ring-drop) - var(--ring-sag) - var(--ring-h) / 2);
  height:var(--ring-h);
  transform:translateY(var(--py,0px));will-change:transform;   /* acompaña el parallax del título */
  z-index:3;
  perspective:900px;perspective-origin:50% 38%;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.ring-stage{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.ring-logo{
  position:absolute;left:0;top:0;
  width:var(--ring-w);height:calc(var(--ring-w) * 1.5);
  margin:calc(var(--ring-w) * -0.75) 0 0 calc(var(--ring-w) * -0.5);
  max-width:none;object-fit:contain;pointer-events:none;-webkit-user-drag:none;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.55));
  will-change:transform,opacity;
}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:40px 0;margin-top:100px;transition:background-color .5s ease, border-color .5s ease;}
footer.work-footer{margin-top:0;}
footer .wrap{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:16px;}
footer p{font-size:12px;color:var(--ink-faint);letter-spacing:0.03em;text-align:center;transition:color .5s ease;}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--ink);color:var(--ink);
  padding:14px 26px;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;
  transition:background .25s ease, color .25s ease;
}
.btn:hover{background:var(--ink);color:var(--bg);}
.btn.filled{background:var(--accent);border-color:var(--accent);color:var(--ink);}
.btn.filled:hover{background:var(--accent-light);color:#0d0c0b;}

/* EYEBROW */
.eyebrow{
  font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#ffffff;
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.eyebrow::before{content:'';width:28px;height:1px;background:#ffffff;}

/* WORK GRID (home) */
.hero-group{position:relative;}

.hero-banner{
  position:relative;overflow:hidden;background:#000;
  height:44vh;min-height:340px;
}
.hero-bg{position:absolute;inset:0;transform:translateY(var(--py,0));will-change:transform;}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 15%;
  filter:url(#heroWave) grayscale(12%) sepia(6%) contrast(1.1) saturate(1.08) brightness(0.95);
  animation:heroSway 12s ease-in-out infinite;
  transform-origin:center;will-change:transform;
}
@keyframes heroSway{
  0%,100%{transform:scale(1.06) translate(0,0);}
  33%{transform:scale(1.06) translate(-0.8%,0.4%);}
  66%{transform:scale(1.06) translate(0.8%,-0.4%);}
}
.hero-defs{position:absolute;pointer-events:none;}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,12,11,0.1) 0%, rgba(13,12,11,0.35) 55%, rgba(13,12,11,0.92) 100%);
}

/* Capa recortada de la figura (PNG con fondo transparente).
   Se coloca por encima del texto para el efecto sándwich:
   foto de fondo → texto → figura. Rellena --hero-figure con tu PNG. */
.hero-figure{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:var(--hero-figure, none);
  background-size:cover;
  background-position:center 15%;
  transform:translateY(var(--py,0));will-change:transform;
  /* mismo filtro que el fondo para que encaje visualmente */
  filter:grayscale(35%) sepia(12%) contrast(1.15) saturate(1.05) brightness(0.92);
}
.hero-divider{
  position:absolute;left:0;right:0;bottom:-1px;width:100%;height:90px;
  z-index:5;display:block;pointer-events:none;
}
/* La curva del hero también se invierte con el ISO, como el fondo de la descripción */
.hero-divider path{fill:#0D0C0B;transition:fill .5s ease;}
body.iso-hi .hero-divider path{fill:#f4f2ec;}

/* Vintage grain + scanlines over the hero image */
.hero-grain{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:0.28;
  background-image:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}

/* ---- Grano de película animado (reutilizable) ----
   Se coloca como capa sobre cualquier contenedor con position:relative.
   El patrón es mayor que el contenedor para poder moverlo sin dejar huecos. */
.film-grain{
  position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  pointer-events:none;z-index:4;
  opacity:0.18;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat:repeat;
  animation:grainShift 0.7s steps(1) infinite;
  will-change:transform;
}
@keyframes grainShift{
  0%   {transform:translate(0,0);}
  12%  {transform:translate(-3%,-2%);}
  25%  {transform:translate(2%,-4%);}
  37%  {transform:translate(-4%,3%);}
  50%  {transform:translate(3%,2%);}
  62%  {transform:translate(-2%,4%);}
  75%  {transform:translate(4%,-3%);}
  87%  {transform:translate(-3%,-4%);}
  100% {transform:translate(0,0);}
}
/* Un poco más sutil en las miniaturas de proyecto */
.work-thumb-media .film-grain{z-index:2;}
.work-thumb-media .tv-scanlines{z-index:2;}

/* Variante fuerte: estática de televisor antiguo */
.film-grain.tv-static{
  opacity:0.10;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0.35 0.7 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 0.2s steps(1) infinite;
}
/* Líneas de barrido que recorren la imagen, como una tele desincronizada */
.tv-scanlines{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.35) 0px,
    rgba(0,0,0,0.35) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity:0.14;
  animation:scanRoll 6s linear infinite;
}
@keyframes scanRoll{
  0%{background-position:0 0;}
  100%{background-position:0 100px;}
}
@media (prefers-reduced-motion: reduce){
  .tv-scanlines{animation:none;}
}

@media (prefers-reduced-motion: reduce){
  .film-grain{animation:none;}
}

/* Mira/lupa que pixeliza la imagen bajo el puntero */
.pixel-aura{
  position:absolute;top:0;left:0;width:170px;height:170px;
  transform:translate(-1000px,-1000px);
  pointer-events:none;z-index:2;opacity:0;
  transition:opacity 0.2s ease;
  background-image:var(--hero-src, none);
  background-repeat:no-repeat;
  image-rendering:pixelated;
  border:1px solid rgba(255,255,255,0.5);
  box-shadow:0 0 0 1px rgba(0,0,0,0.4), 0 4px 18px rgba(0,0,0,0.5);
  -webkit-mask-image:radial-gradient(circle, #000 60%, transparent 72%);
  mask-image:radial-gradient(circle, #000 60%, transparent 72%);
}
.pixel-aura::after{
  content:'';position:absolute;inset:0;
  border:1px solid rgba(230,57,70,0.6);
  mix-blend-mode:screen;
}

/* Camera HUD overlay — white lines, like a viewfinder while recording */
.camera-hud{
  position:absolute;inset:0;pointer-events:none;z-index:6;
  font-family:'Inter',sans-serif;color:#ffffff;
}
.camera-hud .hud-frame{position:absolute;inset:18px;border:1px solid rgba(255,255,255,0.35);}
.camera-hud .hud-corner{position:absolute;width:22px;height:22px;}
.camera-hud .hud-corner::before,.camera-hud .hud-corner::after{content:'';position:absolute;background:#ffffff;}
.camera-hud .hud-corner::before{width:100%;height:2px;}
.camera-hud .hud-corner::after{width:2px;height:100%;}
.camera-hud .hud-corner.tl{top:10px;left:10px;}
.camera-hud .hud-corner.tr{top:10px;right:10px;}
.camera-hud .hud-corner.tr::before,.camera-hud .hud-corner.tr::after{right:0;}
.camera-hud .hud-corner.bl{bottom:10px;left:10px;}
.camera-hud .hud-corner.bl::before,.camera-hud .hud-corner.bl::after{bottom:0;}
.camera-hud .hud-corner.br{bottom:10px;right:10px;}
.camera-hud .hud-corner.br::before{bottom:0;right:0;width:100%;height:2px;}
.camera-hud .hud-corner.br::after{bottom:0;right:0;width:2px;height:100%;}

.camera-hud .hud-rec{
  position:absolute;top:26px;left:26px;display:flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
}
.camera-hud .hud-rec .dot{
  width:9px;height:9px;border-radius:50%;background:#ff3b30;
  animation:hud-blink 1.2s infinite;
}
@keyframes hud-blink{0%,45%{opacity:1;}50%,95%{opacity:0.15;}100%{opacity:1;}}

.camera-hud .hud-timecode{
  position:absolute;bottom:26px;left:26px;font-size:12px;letter-spacing:0.06em;
  font-variant-numeric:tabular-nums;
}

.camera-hud .hud-battery{
  position:absolute;top:26px;right:26px;display:flex;align-items:center;
}
.camera-hud .hud-focus{
  position:absolute;bottom:26px;right:26px;font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;opacity:0.85;
}
.camera-hud .hud-crosshair{
  position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,0.5);
}
.camera-hud .hud-crosshair::before,.camera-hud .hud-crosshair::after{content:'';position:absolute;background:rgba(255,255,255,0.6);}
.camera-hud .hud-crosshair::before{top:50%;left:-6px;width:6px;height:1px;}
.camera-hud .hud-crosshair::after{top:-6px;left:50%;width:1px;height:6px;}

@media (max-width:760px){
  .camera-hud .hud-rec,.camera-hud .hud-timecode,.camera-hud .hud-battery,.camera-hud .hud-focus{font-size:7.5px;}
  .camera-hud .hud-battery{gap:4px;top:15px;right:16px;}
  .camera-hud .cam-battery .batt-body{width:14px;height:7px;border-width:1px;}
  .camera-hud .cam-battery .batt-nub{width:2px;height:4px;}
  .camera-hud .hud-frame{inset:8px;}
  .camera-hud .hud-corner{width:13px;height:13px;}
  .camera-hud .hud-corner::before{height:1.5px;}
  .camera-hud .hud-corner::after{width:1.5px;}
  .camera-hud .hud-corner.tl,.camera-hud .hud-corner.tr{top:6px;}
  .camera-hud .hud-corner.bl,.camera-hud .hud-corner.br{bottom:6px;}
  .camera-hud .hud-corner.tl,.camera-hud .hud-corner.bl{left:6px;}
  .camera-hud .hud-corner.tr,.camera-hud .hud-corner.br{right:6px;}
  .camera-hud .hud-rec{top:15px;left:16px;gap:4px;}
  .camera-hud .hud-rec .dot{width:5px;height:5px;}
  .camera-hud .hud-timecode{bottom:14px;left:16px;}
  .camera-hud .hud-focus{bottom:14px;right:16px;}
}
.hero-overlay-content{
  position:absolute;left:0;right:0;top:50%;z-index:2;
  padding:0 32px;text-align:center;
  transform:translateY(calc(var(--py,0px) - 50% - 46px));will-change:transform;
  perspective:1500px;perspective-origin:50% 60%;
}
.hero-tagline{
  font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(15px,1.6vw,21px);
  color:#dcd8cd;letter-spacing:0.02em;margin-bottom:8px;
}
.hero-tagline strong{font-weight:700;color:#ffffff;text-transform:uppercase;}
.hero-title{
  font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  color:#ffffff;font-size:clamp(44px,7.6vw,112px);letter-spacing:0.005em;line-height:0.9;
  transform:scaleY(0.8);transform-origin:center;
}
/* Letras sueltas (las separa el JS) para curvar el texto sobre un cilindro, como el carrusel */
.hero-tagline, .hero-title{transform-style:preserve-3d;}
.hero-title{transform-style:preserve-3d;}
.hero-tagline .w, .hero-title .w{display:inline-block;white-space:nowrap;transform-style:preserve-3d;}
.hero-tagline .ch, .hero-title .ch{display:inline-block;will-change:transform;}

@media (max-width:760px){
  .hero-banner{height:25vh;min-height:200px;}
  .hero-overlay-content{padding:0 16px;transform:translateY(calc(var(--py,0px) - 50% - 27px));}
  .hero-tagline{font-size:11.5px;margin-bottom:5px;}
  .hero-title{font-size:clamp(26px,8.2vw,44px);}
  .logo-ring{--ring-w:34px;--ring-drop:44px;}
}

.intro{padding:90px 0 60px;}
.intro h2{font-family:'Archivo Black',sans-serif;font-size:clamp(30px,4vw,46px);font-weight:500;max-width:16ch;}
.intro p{margin-top:22px;font-size:17px;line-height:1.7;color:var(--ink-dim);max-width:58ch;}

.logos-section{
  position:relative;overflow:hidden;
  background:transparent;
  padding:0;
  margin-top:0;
  transition:background-color .5s ease;
}
.logos-section .eyebrow{
  color:#ffffff;justify-content:center;
  font-size:16px;letter-spacing:0.12em;margin-bottom:0;
  transition:color .5s ease;
}
.logos-section .eyebrow::before{display:none;}
.logos-section .wrap{position:relative;z-index:2;}
.logos-track{
  position:relative;z-index:2;
  margin-top:0;overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-row{
  display:flex;align-items:center;gap:70px;width:max-content;
  animation:scrollLogos 40s linear infinite;
  height:clamp(90px,10vw,140px);
}
/* Cuando el JS toma el control (arrastrar / empujar), se desactiva la animación CSS */
.logos-row.is-js{animation:none;will-change:transform;}
.logos-track{touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.logos-track img{-webkit-user-drag:none;user-drag:none;pointer-events:none;}
@keyframes scrollLogos{
  from{transform:translateX(0);}
  to{transform:translateX(-16.6667%);}
}
.logo-word{
  font-family:'Archivo Black',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,34px);
  letter-spacing:0.02em;color:#ffffff;white-space:nowrap;opacity:0.95;
  transition:color .5s ease;
}
.logo-real{
  height:clamp(100px,11.5vw,175px);width:auto;display:block;opacity:1;
  flex-shrink:0;transition:filter .5s ease;
}

/* Barra sobre la rejilla de proyectos, con el filtro de IA */
.work-toolbar{position:relative;z-index:30;height:0;padding:0;}   /* sin altura: los proyectos empiezan justo tras el banner */
.work-toolbar .wrap{
  position:absolute;left:0;right:0;top:16px;
  max-width:none;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.work-toolbar .view-filter{pointer-events:auto;}
.view-filter{
  display:inline-flex;align-items:center;gap:2px;
  background:#000000;border:1px solid rgba(255,255,255,0.2);border-radius:3px;
  box-shadow:0 4px 14px rgba(0,0,0,0.5);
  cursor:pointer;
  padding:3px;
}
.view-filter-btn{
  background:none;border:none;cursor:pointer;border-radius:2px;
  font-family:monospace;font-size:12px;letter-spacing:0.04em;
  color:rgba(255,255,255,0.62);padding:6px 18px;
  transition:background .3s ease, color .3s ease;
}
.view-filter-btn:hover{color:#fff;}
.view-filter-btn.is-active{
  background:#ffffff;color:#0D0C0B;
}
.view-filter-btn.is-active:hover{color:#0D0C0B;}

/* Modo ISO alto (fondo claro): el filtro Todos/IA invierte sus colores igual que el resto */
/* (ahora el filtro va sobre las imágenes de los proyectos, así que no se invierte con el ISO) */

.work-full-bleed{width:100%;}
.work-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);
}
@media (max-width:760px){.work-grid{grid-template-columns:1fr;}}
.work-card{
  position:relative;aspect-ratio:16/11;overflow:hidden;display:block;background:#000;
  transition:filter .5s ease, opacity .5s ease;
}
/* Filtro de IA activo: los proyectos sin data-ai se oscurecen, los de IA se resaltan */
.work-grid.ai-filter-on .work-card:not([data-ai]){
  filter:grayscale(85%) brightness(0.35);
  opacity:0.6;
}
.work-grid.ai-filter-on .work-card[data-ai]{
  box-shadow:0 0 0 2px var(--accent-light) inset;
}
.work-thumb-media{position:absolute;inset:0;overflow:hidden;}
.work-thumb-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(15%) brightness(0.82);transition:filter .5s ease, transform .6s ease;}
.work-card:hover .work-thumb-media img{transform:scale(1.04);filter:grayscale(0%) brightness(0.95);}
.thumb-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;pointer-events:none;
  background:transparent;
  opacity:0;transition:opacity .4s ease;
  filter:grayscale(15%) brightness(0.82);
}
.thumb-video.is-playing{opacity:1;}
.work-card:hover .thumb-video{filter:grayscale(0%) brightness(0.95);}
/* Los clips de KOI traen barras negras quemadas: se amplían para ocultarlas */
.work-card.koi-fill .thumb-video{transform:scale(1.5);}
.work-card.koi-fill:hover .thumb-video{transform:scale(1.55);}
.thumb-video-frame{
  position:absolute;top:-20%;left:-20%;width:140%;height:140%;border:0;pointer-events:none;
}
.work-overlay{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, rgba(13,12,11,0.94) 100%);
  display:flex;align-items:flex-end;padding:clamp(20px,3vw,44px);
}
.work-overlay h3{font-family:'Archivo Black',sans-serif;font-size:clamp(20px,2.4vw,30px);font-weight:500;color:var(--ink);}
.work-overlay .tag{margin-top:8px;font-size:13px;color:var(--ink-dim);}

/* PROJECT DETAIL PAGE */

.meta-fields{
  display:flex;flex-wrap:wrap;gap:0;margin:44px 0 48px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.meta-field{
  flex:1 1 160px;padding:22px 28px;border-left:1px solid var(--line);
}
.meta-field:first-child{border-left:none;}
.meta-field .label{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);}
.meta-field .value{margin-top:8px;font-family:'Archivo Black',sans-serif;font-size:18px;color:var(--ink);}

.video-block{margin:48px 0;}
.video-block img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:20px;}
.video-block h3{font-family:'Archivo Black',sans-serif;font-size:22px;margin-bottom:16px;}

.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;
  margin:40px 0 60px;
}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;}

.project-nav{
  display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:34px 0;
  font-size:13px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-dim);
}
.project-nav a:hover{color:#ffffff;}

/* ABOUT PAGE */
.about-hero{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:center;padding:70px 0 40px;}
.about-hero img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(20%);}
.about-hero h1{font-family:'Archivo Black',sans-serif;font-size:clamp(38px,5vw,58px);font-weight:500;}
.about-hero blockquote{margin-top:24px;font-size:18px;line-height:1.75;color:var(--ink-dim);max-width:52ch;}
.about-hero blockquote + blockquote{margin-top:16px;}
@media (max-width:760px){.about-hero{grid-template-columns:1fr;}}

.dedico{padding:70px 0;border-top:1px solid var(--line);}
.dedico h2{font-family:'Archivo Black',sans-serif;font-size:clamp(28px,4vw,40px);margin-bottom:44px;}
.dedico-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}
@media (max-width:760px){.dedico-grid{grid-template-columns:1fr;}}
.dedico-item h4{font-family:'Archivo Black',sans-serif;font-size:20px;margin-bottom:10px;color:#ffffff;}
.dedico-item p{font-size:15px;line-height:1.7;color:var(--ink-dim);}

.cta-block{
  text-align:center;padding:90px 0;border-top:1px solid var(--line);
}
.cta-block h2{font-family:'Archivo Black',sans-serif;font-size:clamp(30px,5vw,46px);max-width:22ch;margin:0 auto 20px;}
.cta-block p{color:var(--ink-dim);max-width:52ch;margin:0 auto 34px;font-size:16px;}

/* CONTACT PAGE */
.contact-page{padding:80px 0 100px;text-align:center;}
.contact-page h1{font-family:'Archivo Black',sans-serif;font-size:clamp(40px,7vw,80px);font-weight:500;}
.contact-page p.lead{margin:22px auto 46px;max-width:48ch;color:var(--ink-dim);font-size:17px;}
.contact-list{display:flex;flex-direction:column;gap:16px;align-items:center;}
.contact-row{
  display:flex;align-items:center;gap:14px;font-size:17px;padding:18px 30px;
  border:1px solid var(--line-strong);min-width:280px;justify-content:center;
  transition:border-color .25s ease, color .25s ease;
}
.contact-row:hover{border-color:#ffffff;color:#ffffff;}
.contact-row .label{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);margin-right:auto;}

/* ============================================
   PÁGINA DE PROYECTO
   ============================================ */

.project-hero{
  position:relative;height:48vh;min-height:360px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.project-hero-bg{position:absolute;inset:0;}
.project-hero-bg img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(6%) contrast(1.06) brightness(0.82);
}
.project-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,12,11,0.55) 0%, rgba(13,12,11,0.3) 45%, rgba(13,12,11,0.85) 100%);
}
.project-hero-content{
  position:relative;z-index:2;width:100%;max-width:1180px;
  padding:0 32px;text-align:center;
}
.project-title{
  font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  color:#fff;font-size:clamp(32px,5.6vw,82px);line-height:0.95;letter-spacing:0.01em;
  margin-bottom:clamp(16px,2.4vw,28px);
}
.project-meta{
  display:flex;justify-content:center;align-items:center;
  gap:24px;max-width:900px;margin:0 auto;
}
.meta-item{flex:1;text-align:center;}
.meta-label{
  display:block;font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(15px,1.8vw,26px);color:#fff;letter-spacing:0.02em;margin-bottom:8px;
}
.meta-value{
  display:block;font-family:'Inter',sans-serif;font-weight:300;
  font-size:clamp(13px,1.3vw,17px);color:#cfcabd;
}

.project-body{padding:clamp(28px,3.6vw,48px) 0;transition:background-color .5s ease;}
.project-body .wrap.narrow{max-width:820px;}
.project-body .wrap.center{text-align:center;max-width:1560px;}
.project-h2{
  font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  color:#6FBF8B;
  font-size:clamp(30px,5vw,64px);line-height:1;margin-bottom:28px;
}
.project-body p{
  font-family:'Inter',sans-serif;font-weight:300;
  font-size:clamp(15px,1.5vw,18px);line-height:1.75;color:#d8d4c9;
  margin-bottom:14px;transition:color .5s ease;
}
.project-body strong{font-weight:700;color:#fff;transition:color .5s ease;}
.project-body a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.4);transition:color .5s ease, text-decoration-color .5s ease;}
.project-body a:hover{text-decoration-color:currentColor;}
body.iso-hi .project-body a{text-decoration-color:rgba(13,12,11,0.4);}

/* Vídeo */
.project-video{
  padding:clamp(20px,3vw,40px) 0;
  position:relative;overflow:hidden;
  isolation:isolate;
}
.project-video-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  filter:grayscale(25%) brightness(0.85);
}
.project-video::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(13,12,11,0.45) 0%, rgba(13,12,11,0.2) 50%, rgba(13,12,11,0.55) 100%);
}
.project-video .video-grain{z-index:1;}
.project-video .wrap{position:relative;z-index:2;}
.video-frame{
  position:relative;width:100%;aspect-ratio:16/9;
  background:rgba(38,37,35,0.72);overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,0.16);
  transition:background .35s ease;
}
.video-frame:hover{background:rgba(48,47,44,0.78);}
.video-play{
  position:absolute;inset:0;margin:auto;width:max-content;height:max-content;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:0;color:#fff;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:13px;letter-spacing:0.16em;
  text-transform:uppercase;
}
.video-play svg{
  border:1.6px solid rgba(255,255,255,0.8);border-radius:50%;
  padding:14px;transition:background .3s ease,transform .3s ease;
}
.video-frame:hover .video-play svg{background:rgba(255,255,255,0.15);transform:scale(1.06);}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;}
.video-frame.is-external{
  display:block;text-decoration:none;
}
.video-frame.is-external .video-play{
  position:absolute;inset:0;margin:auto;width:max-content;height:max-content;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#fff;font-family:'Inter',sans-serif;font-size:13px;
  letter-spacing:0.16em;text-transform:uppercase;
}
.video-frame.is-loaded .video-play{display:none;}

/* El grano/escaneado del vídeo solo afecta al fondo, nunca al vídeo ya en reproducción */
.project-video .tv-scanlines{z-index:1;}

/* Galería de rodaje */
.project-gallery{padding:36px 0;}
.gallery-viewport{position:relative;}
.gallery-track{
  display:flex;gap:24px;overflow-x:auto;
  padding:0 clamp(16px,4vw,60px);
  scrollbar-width:none;-ms-overflow-style:none;
}
.gallery-track::-webkit-scrollbar{display:none;}
.gal-item{
  position:relative;overflow:hidden;
  flex:0 0 clamp(180px,24vw,360px);margin:0;
}
.gal-item .film-grain{z-index:2;}
.gal-item .tv-scanlines{z-index:2;}
.gal-item img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  filter:grayscale(8%) brightness(0.92);transition:filter .4s ease;
}
.gal-item img:hover{filter:grayscale(0%) brightness(1);}

/* Lightbox: la foto se despega del carrusel y se centra en grande */
.lightbox-backdrop{
  position:fixed;inset:0;z-index:9998;
  background:rgba(13,12,11,0);opacity:0;pointer-events:none;
  transition:background .4s ease, opacity .4s ease;
}
.lightbox-backdrop.is-open{background:rgba(13,12,11,0.9);opacity:1;pointer-events:auto;}
.lightbox-photo{
  position:fixed;z-index:9999;margin:0;box-sizing:border-box;
  overflow:hidden;
  transition:top .45s cubic-bezier(.22,.68,0,1.01), left .45s cubic-bezier(.22,.68,0,1.01),
             width .45s cubic-bezier(.22,.68,0,1.01), height .45s cubic-bezier(.22,.68,0,1.01);
}
.lightbox-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.gal-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,0.92);color:#0D0C0B;
  border:0;display:grid;place-items:center;cursor:pointer;
  transition:background .25s ease,transform .25s ease;
}
.gal-btn:hover{background:#fff;transform:translateY(-50%) scale(1.06);}
.gal-btn.prev{left:clamp(8px,2vw,28px);}
.gal-btn.next{right:clamp(8px,2vw,28px);}

/* Navegación entre proyectos */
.project-nav{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:clamp(20px,2.6vw,34px) clamp(20px,5vw,70px);
  border-top:1px solid rgba(255,255,255,0.12);
  transition:background-color .5s ease, border-color .5s ease;
}
.pnav{
  display:flex;align-items:center;gap:14px;
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(14px,1.8vw,22px);color:#fff;letter-spacing:0.02em;
  transition:opacity .25s ease, color .5s ease;
}
.pnav:hover{opacity:0.65;}
.pnav-arrow{font-size:1.1em;line-height:1;}

body.iso-hi .project-nav{background:#f4f2ec;border-top-color:rgba(13,12,11,0.15);}
body.iso-hi .pnav{color:#0D0C0B;}

@media (max-width:760px){
  .project-hero{height:30vh;min-height:240px;}
  .project-meta{flex-direction:column;gap:18px;}
  .gal-btn{width:42px;height:42px;}
  .project-nav{flex-direction:column;align-items:stretch;gap:16px;text-align:center;}
  .pnav{justify-content:center;}
}

/* ===== BARRA SUPERIOR MINIMALISTA (sin textura, sin botones, sin remaches) =====
   Fondo negro liso. Trabajo / Instagram / LinkedIn van como texto e iconos sencillos, sin aspecto de botón.
   Retirados (siguen en el HTML y el CSS de arriba): textura de cámara, aspecto de botón, remaches, botón ISO y hamburguesa.
   Para recuperar lo retirado basta con borrar este bloque entero. */
header{
  background-image:none;background-color:#000;
  box-shadow:none;border-top:0;border-bottom:1px solid rgba(242,237,228,0.09);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
header::before,header::after{display:none;}
header .wrap{padding:18px 56px;}
.cam-iso,.nav-toggle{display:none;}
.hdr-left{gap:28px;}

nav ul{list-style:none;display:flex;gap:28px;}
nav a{
  display:inline-flex;align-items:center;height:auto;padding:0;border-radius:0;
  background:none;box-shadow:none;
  font-family:'Inter',sans-serif;font-weight:400;font-size:12px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-dim);
  transition:color .25s ease;
}
nav a:hover{color:#ffffff;}
nav a:active{transform:none;box-shadow:none;}

.social-icons{display:flex;gap:20px;align-items:center;}
.social-icons a,
.social-icons a[aria-label="LinkedIn"]{
  width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
  color:var(--ink-dim);
  transition:color .25s ease;
}
.social-icons a:hover{color:#ffffff;}
.social-icons a:active{transform:none;box-shadow:none;}
.social-ico,
.social-icons a[aria-label="LinkedIn"] .social-ico{width:17px;height:17px;opacity:1;transform:none;}
.social-icons a:hover .social-ico{transform:none;}

@media (max-width:760px){
  header .wrap{padding:13px 22px;}
  .hdr-left{gap:20px;}
  nav ul{position:static;max-height:none;overflow:visible;background:none;border:0;flex-direction:row;gap:0;}
  nav ul li{border:0;}
  nav ul a{display:inline-flex;padding:0;font-size:11px;background:none;box-shadow:none;border-radius:0;justify-content:flex-start;}
  nav ul a:active{box-shadow:none;transform:none;}
  .social-icons{display:flex;gap:16px;}
}

/* ===== CAMBIOS 47: cabecera en 3 zonas, menú de tres rayas, zooms y filtro fijo ===== */
/* Cabecera: Trabajo a la izquierda, menú (tres rayas) en el centro, Instagram y LinkedIn a la derecha.
   Para volver al diseño anterior: borrar este bloque y quitar <div class="hdr-menu"> del HTML. */
header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
.hdr-left{display:contents;}
.hdr-right{display:none;}
header nav{grid-column:1;grid-row:1;justify-self:start;}
.hdr-menu{grid-column:2;grid-row:1;justify-self:center;position:relative;}
.social-icons{grid-column:3;grid-row:1;justify-self:end;}

.menu-btn{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:30px;padding:0 7px;background:none;border:0;cursor:pointer;
  color:var(--ink-dim);transition:color .25s ease;
}
.menu-btn span{display:block;height:1.5px;width:100%;background:currentColor;border-radius:1px;transition:transform .3s ease, opacity .2s ease;}
.menu-btn:hover,.menu-btn.is-open{color:#fff;}
.menu-btn.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu-btn.is-open span:nth-child(2){opacity:0;}
.menu-btn.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.menu-panel{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  min-width:170px;background:#000;border:1px solid rgba(255,255,255,0.2);border-radius:3px;
  box-shadow:0 10px 28px rgba(0,0,0,0.6);padding:6px;
  display:flex;flex-direction:column;gap:2px;
  animation:menuIn .22s ease;
}
.menu-panel[hidden]{display:none;}
@keyframes menuIn{from{opacity:0;transform:translate(-50%,-6px);}to{opacity:1;transform:translate(-50%,0);}}
.menu-item{
  background:none;border:0;cursor:pointer;text-align:left;border-radius:2px;
  font-family:'Inter',sans-serif;font-weight:400;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-dim);padding:11px 14px;transition:background .2s ease, color .2s ease;
}
.menu-item:hover{background:rgba(255,255,255,0.08);color:#fff;}

/* Filtro Todos/IA: se queda fijo bajo la cabecera mientras se ven los proyectos */
.work-full-bleed{position:relative;}
.work-toolbar{position:sticky;top:var(--hdr-h,57px);z-index:30;height:0;}

/* Proyectos: al pasar el cursor, se iluminan y hacen zoom (solo con ratón) */
@media (hover:hover){
  .work-thumb-media{transition:transform .7s cubic-bezier(.22,.68,0,1);will-change:transform;}
  .work-card:hover .work-thumb-media{transform:scale(1.07);}
  .work-card:hover .work-thumb-media img{transform:none;filter:grayscale(0%) brightness(1.08);}
  .work-card:hover .thumb-video{filter:grayscale(0%) brightness(1.08);}
  .work-card.koi-fill:hover .thumb-video{transform:scale(1.5);}
}

/* Móvil (la rejilla de proyectos vuelve a una sola columna, como al principio) */
@media (max-width:760px){
  header .wrap{grid-template-columns:1fr auto 1fr;}
  .menu-btn{width:30px;}
  .menu-item{font-size:11px;padding:10px 12px;}
}

/* ===== CAMBIOS 48: banners de proyecto como el de la home, barra superior en blanco, separadores negros ===== */
/* Barra superior en blanco puro. Para volver al gris: cambiar #fff por var(--ink-dim) en estas reglas. */
nav a,.social-icons a,.social-icons a[aria-label="LinkedIn"],.menu-btn,.menu-item{color:#fff;}
nav a:hover,.social-icons a:hover,.menu-btn:hover,.menu-btn.is-open{color:#fff;opacity:.7;}
.menu-item:hover{color:#fff;opacity:1;background:rgba(255,255,255,0.12);}
nav a,.social-icons a,.menu-btn{transition:opacity .25s ease;}

/* Línea que separa los proyectos: negra del todo */
.work-grid{background:#000;}

/* Banner de cada proyecto: mismo tamaño que el de la home, con textos proporcionales y curvatura 3D */
.project-hero{height:44vh;min-height:340px;}
.project-hero-content{perspective:1500px;perspective-origin:50% 60%;max-width:1180px;}
.project-title{
  font-size:clamp(30px,5vw,72px);line-height:0.9;letter-spacing:0.005em;
  margin-bottom:clamp(10px,1.6vw,22px);
  transform:scaleY(0.8);transform-origin:center;
}
.project-meta{gap:clamp(14px,2vw,28px);max-width:820px;}
.meta-label{font-size:clamp(12px,1.25vw,18px);margin-bottom:6px;}
.meta-value{font-size:clamp(11px,1.05vw,14px);line-height:1.35;}
.project-meta,.meta-item,.project-title,.meta-label,.meta-value{transform-style:preserve-3d;}
.project-title .w,.meta-label .w,.meta-value .w{display:inline-block;white-space:nowrap;transform-style:preserve-3d;}
.project-title .ch,.meta-label .ch,.meta-value .ch{display:inline-block;will-change:transform;}

@media (max-width:760px){
  .project-hero{height:25vh;min-height:200px;}
  .project-hero-content{padding:0 14px;}
  .project-title{font-size:clamp(22px,7vw,32px);margin-bottom:9px;}
  /* los roles van en fila (3 columnas), no uno encima de otro */
  .project-meta{flex-direction:row;align-items:flex-start;justify-content:center;gap:8px;max-width:none;}
  .meta-item{flex:1 1 0;min-width:0;}
  .meta-label{font-size:10px;letter-spacing:0.03em;margin-bottom:4px;}
  .meta-value{font-size:10px;line-height:1.3;}
}

/* ===== CAMBIOS 49: banner de proyecto con texto más grande (escritorio), una columna en móvil, escenario texto+vídeo+carrusel ===== */
/* Escritorio: título y roles más grandes, mismo alto de banner */
.project-hero-content{max-width:1340px;}
.project-title{font-size:clamp(34px,6.4vw,92px);margin-bottom:clamp(12px,1.8vw,26px);}
.project-meta{max-width:1000px;}
.meta-label{font-size:clamp(14px,1.75vw,26px);margin-bottom:8px;}
.meta-value{font-size:clamp(12px,1.35vw,19px);}
/* Móvil: se mantienen los tamaños pequeños de antes */
@media (max-width:760px){
  .project-title{font-size:clamp(22px,7vw,32px);margin-bottom:9px;}
  .meta-label{font-size:10px;margin-bottom:4px;}
  .meta-value{font-size:10px;}
}

/* Escenario del proyecto: la descripción, el vídeo, el carrusel y el texto de cierre comparten
   como fondo la imagen que antes solo estaba detrás del botón "Ver vídeo". */
.project-stage{position:relative;overflow:hidden;isolation:isolate;}
.project-stage > .project-video-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:grayscale(25%) brightness(0.85);
}
.project-stage::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(13,12,11,0.6) 0%, rgba(13,12,11,0.4) 45%, rgba(13,12,11,0.62) 100%);
}
.project-stage > .film-grain,.project-stage > .tv-scanlines,.project-stage > .extra-noise{z-index:1;}
.stage-content{position:relative;z-index:2;}
/* Las secciones de dentro dejan de tener fondo propio */
.project-stage .project-body,
.project-stage .project-video,
.project-stage .project-gallery{background:none;overflow:visible;isolation:auto;}
.project-stage .project-video::after{display:none;}
.project-stage .project-body{padding:clamp(22px,3vw,40px) 0;}
.stage-content > .project-body:first-child{padding-top:clamp(48px,6.5vw,92px);}
.stage-content > .project-body:last-child{padding-bottom:clamp(48px,6.5vw,92px);}
.stage-content > .project-body:first-child + .project-video{padding-top:clamp(6px,1.2vw,16px);}
.stage-content > .project-gallery:last-child{padding-bottom:clamp(48px,6vw,84px);}
.project-stage .project-body p{color:#f2eee6;text-shadow:0 1px 16px rgba(0,0,0,0.65);}
.project-stage .project-h2{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,0.6);}

/* Vídeo: la pantalla se agranda al pulsar "Ver vídeo" (ver script de cada página) */
.video-frame-ph{width:100%;aspect-ratio:16/9;}
.video-frame.is-zoom{
  position:fixed;z-index:9999;margin:0;aspect-ratio:auto;max-width:none;
  background:#000;cursor:default;box-shadow:0 30px 80px rgba(0,0,0,0.65);
}

/* ===== CAMBIOS 50: carrusel de rodaje más pequeño con desvanecido en los extremos (como el de marcas) ===== */
.gallery-viewport{max-width:min(96vw,1120px);margin:0 auto;}
.gallery-track{
  gap:clamp(12px,1.6vw,20px);
  padding:0 clamp(40px,8vw,120px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
}
.gal-item{flex:0 0 clamp(120px,15vw,210px);}
.gal-btn{width:44px;height:44px;}
@media (max-width:760px){
  .gallery-viewport{max-width:100vw;}
  .gallery-track{padding:0 36px;}
  .gal-item{flex:0 0 clamp(110px,32vw,150px);}
  .gal-btn{width:36px;height:36px;}
}

/* ===== CAMBIOS 51: zona descripción + vídeo + carrusel más compacta; carrusel automático; vídeo que sigue al encoger ===== */
/* Compactación: vídeo más pequeño (al pulsar se agranda igualmente), menos relleno y texto más estrecho */
.project-stage .video-frame:not(.is-zoom){max-width:min(100%,680px);margin-left:auto;margin-right:auto;}
.project-stage .project-video .wrap{z-index:auto;}
.project-stage .project-body .wrap{max-width:900px;}
.project-stage .project-body p{font-size:clamp(14px,1.2vw,16px);line-height:1.65;margin-bottom:6px;}
.project-stage .project-body{padding:clamp(10px,1.4vw,20px) 0;}
.stage-content > .project-body:first-child{padding-top:clamp(26px,3vw,42px);}
.stage-content > .project-body:last-child{padding-bottom:clamp(30px,3.6vw,52px);}
.project-stage .project-video{padding:clamp(6px,1vw,14px) 0;}
.stage-content > .project-body:first-child + .project-video{padding-top:0;}
.project-stage .project-gallery{padding:clamp(14px,1.8vw,26px) 0;}
.stage-content > .project-gallery:last-child{padding-bottom:clamp(30px,3.6vw,52px);}
.project-stage .project-h2{margin-bottom:14px;font-size:clamp(26px,3.6vw,46px);}

/* Carrusel de rodaje automático: la pista se mueve con transform; el desvanecido va en el visor (que no se mueve) */
.gallery-viewport{overflow:hidden;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);}
.gallery-track{
  display:flex;overflow:visible;width:max-content;padding:0;
  gap:clamp(12px,1.4vw,18px);
  -webkit-mask-image:none;mask-image:none;
  will-change:transform;
}
.gal-item{flex:0 0 clamp(100px,12vw,170px);}
.gal-item img{-webkit-user-drag:none;user-select:none;}
.gal-btn{display:none;}
@media (max-width:760px){
  .gallery-viewport{max-width:100vw;}
  .gallery-track{padding:0;}
  .gal-item{flex:0 0 clamp(100px,28vw,130px);}
  .project-stage .project-body p{font-size:12.5px;line-height:1.6;}
  .project-stage .project-body .wrap{padding-left:22px;padding-right:22px;}
}

/* Vídeo ampliado: el escenario pasa por encima de la cabecera y el cursor vuelve al normal mientras dura */
.project-stage.is-video-open{z-index:9990;}
.video-backdrop{z-index:1;cursor:default;}
body.video-open .cursor-ring{opacity:0;}
.video-expand{
  display:none;position:absolute;top:10px;right:10px;z-index:4;
  width:34px;height:34px;place-items:center;padding:0;
  background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.35);cursor:pointer;
  transition:background .25s ease;
}
.video-expand:hover{background:rgba(0,0,0,0.9);}
.video-frame.is-loaded:not(.is-zoom) .video-expand{display:grid;}

/* ===== CAMBIOS 52 (solo móvil): banner de proyecto más estrecho y carrusel de rodaje más pequeño, con margen antes del borde ===== */
@media (max-width:760px){
  .project-hero{height:19vh;min-height:150px;}
  .project-title{margin-bottom:6px;}
  .gallery-viewport{max-width:calc(100vw - 36px);}
  .gal-item{flex:0 0 clamp(86px,23vw,104px);}
  .gallery-track{gap:10px;}
}

/* ===== CAMBIOS 53: vídeo precargado (el reproductor ya está listo al pulsar "Ver vídeo"); navegación entre proyectos en móvil ===== */
/* El reproductor se carga oculto y en pausa; al pulsar "Ver vídeo" aparece y arranca */
.video-frame[data-video] iframe{opacity:0;pointer-events:none;transition:opacity .25s ease;}
.video-frame.is-loaded iframe{opacity:1;pointer-events:auto;}
.mbr{display:none;}

/* Móvil: "proyecto anterior" a la izquierda y "siguiente" a la derecha, con letra más pequeña y el nombre en dos líneas */
@media (max-width:760px){
  .project-nav{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:22px 20px;text-align:left;}
  .pnav{max-width:48%;gap:8px;font-size:12px;line-height:1.2;justify-content:flex-start;}
  .pnav.next{justify-content:flex-end;text-align:right;}
  .pnav-arrow{font-size:1.15em;flex:0 0 auto;}
  .mbr{display:inline;}
}

/* ===== CAMBIOS 54: la navegación anterior/siguiente va dentro del escenario (sobre el mismo fondo), sin barra negra aparte ===== */
.project-stage .project-nav{
  background:none;border-top:0;
  padding:clamp(6px,1vw,14px) clamp(20px,5vw,70px) clamp(24px,2.8vw,40px);
}
.project-stage .pnav{text-shadow:0 1px 14px rgba(0,0,0,0.7);}
.stage-content > .project-gallery:nth-last-child(2){padding-bottom:clamp(18px,2.2vw,30px);}
@media (max-width:760px){
  /* en móvil se queda como estaba: barra oscura abajo */
  .project-stage .project-nav{background:var(--bg);border-top:1px solid rgba(255,255,255,0.12);padding:22px 20px;}
  .project-stage .pnav{text-shadow:none;}
  .stage-content > .project-gallery:nth-last-child(2){padding-bottom:30px;}
}

/* ===== CAMBIOS 55 (PRUEBA, solo Premios ESLAND): vídeo grande a la izquierda y carrusel vertical a la derecha, como un grupo centrado =====
   Solo afecta a las páginas que usan .stage-split / .is-vertical (ahora solo Esland). Para revertir: en esa página, quitar el <div class="stage-split"> y la clase is-vertical. */
@media (min-width:761px){
  .stage-split{
    display:flex;align-items:stretch;justify-content:center;
    gap:clamp(18px,2.2vw,32px);
    max-width:1300px;margin:0 auto;padding:clamp(6px,1vw,14px) clamp(24px,5vw,72px) clamp(14px,2vw,28px);
  }
  .stage-split > .project-video{flex:1 1 0;min-width:0;padding:0;}
  .stage-split > .project-video .wrap{max-width:none;padding:0;}
  .stage-split .video-frame:not(.is-zoom){max-width:none;}
  .stage-split > .project-gallery{flex:0 0 clamp(150px,14vw,200px);padding:0;position:relative;}
  .gallery-viewport.is-vertical{
    position:absolute;inset:0;max-width:none;margin:0;touch-action:pan-x;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
  }
  .gallery-viewport.is-vertical .gallery-track{
    flex-direction:column;width:100%;gap:clamp(10px,1.1vw,16px);
  }
  .gallery-viewport.is-vertical .gal-item{flex:0 0 auto;width:100%;}
}

/* ===== CAMBIOS 56 (PRUEBA, solo Premios ESLAND): banner más estrecho y descripciones debajo del vídeo y el carrusel ===== */
@media (min-width:761px){
  .project-hero.hero-slim{height:28vh;min-height:230px;}
  .project-hero.hero-slim .project-title{font-size:clamp(30px,5.2vw,76px);margin-bottom:clamp(8px,1.2vw,16px);}
  .project-hero.hero-slim .meta-label{font-size:clamp(13px,1.45vw,21px);margin-bottom:5px;}
  .project-hero.hero-slim .meta-value{font-size:clamp(11px,1.15vw,16px);}
}
.stage-content > .stage-split:first-child{padding-top:clamp(28px,3.4vw,48px);}

/* ===== CAMBIOS 57: Esland vuelve a la composición original; sus textos de descripción en una sola línea (solo ordenador) =====
   Los bloques de PRUEBA de arriba (.stage-split, .is-vertical, .hero-slim) quedan archivados: ya no los usa ninguna página. */
@media (min-width:761px){
  .project-stage .project-body.desc-oneline .wrap{max-width:none;padding-left:clamp(20px,3vw,48px);padding-right:clamp(20px,3vw,48px);}
  .project-stage .project-body.desc-oneline p{white-space:nowrap;font-size:clamp(11px,1.15vw,16px);}
}

/* ===== CAMBIOS 60 (PRUEBA, solo Premios ESLAND): fondo del banner algo más oscuro y bloque vídeo + carrusel más pequeño/estrecho ===== */
.project-hero.hero-slim .project-hero-bg img{filter:grayscale(6%) contrast(1.06) brightness(0.62);}
@media (min-width:761px){
  .stage-split{max-width:1020px;gap:clamp(14px,1.8vw,26px);}
  .stage-split > .project-gallery{flex:0 0 clamp(116px,11vw,158px);}
}

/* ===== CAMBIOS 61: lo probado en Esland (banner estrecho y oscuro, vídeo + carrusel vertical, textos en una línea, flechas sin texto) pasa a todos los proyectos ===== */
/* Texto demasiado largo para una sola línea (CaixaBank): ocupa todo el ancho y se parte en dos líneas equilibradas */
@media (min-width:761px){
  .project-stage .project-body.desc-oneline.desc-wrap p{white-space:normal;text-wrap:balance;}
}

/* ===== CAMBIOS 62: flechas de anterior/siguiente FIJAS en el centro de la pantalla (izquierda y derecha), en un cuadrado con la flecha.
   Se ven siempre, estés donde estés de la página; ya no ocupan sitio abajo del todo. (Sustituye a las flechas de los cambios 59/61.) ===== */
.project-stage .project-nav.nav-arrows{
  position:static;display:block;height:0;min-height:0;margin:0;padding:0;border:0;background:none;
}
.project-stage .project-nav.nav-arrows .pnav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:50;
  display:flex;align-items:center;justify-content:center;
  width:clamp(40px,3.4vw,52px);height:clamp(40px,3.4vw,52px);max-width:none;padding:0;gap:0;
  background:rgba(7,6,5,0.55);
  border:1px solid rgba(255,255,255,0.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;text-shadow:none;opacity:1;
  transition:background .25s ease,border-color .25s ease;
}
.project-stage .project-nav.nav-arrows .pnav.prev{left:clamp(10px,1.6vw,28px);right:auto;}
.project-stage .project-nav.nav-arrows .pnav.next{right:clamp(10px,1.6vw,28px);left:auto;}
.project-stage .project-nav.nav-arrows .pnav:hover{background:rgba(255,255,255,0.18);border-color:#fff;opacity:1;}
.project-stage .project-nav.nav-arrows .pnav-arrow{font-size:clamp(20px,1.8vw,26px);line-height:1;}
@media (max-width:760px){
  .project-stage .project-nav.nav-arrows .pnav{width:36px;height:36px;}
  .project-stage .project-nav.nav-arrows .pnav.prev{left:6px;}
  .project-stage .project-nav.nav-arrows .pnav.next{right:6px;}
  .project-stage .project-nav.nav-arrows .pnav-arrow{font-size:18px;}
}
/* con el vídeo ampliado, las flechas se apartan */
body.video-open .project-stage .project-nav.nav-arrows .pnav{opacity:0;pointer-events:none;}

/* ===== CAMBIOS 63: menú de tres rayas con Proyectos (lista a la derecha), Sobre mí y Contacto ===== */
.menu-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;white-space:nowrap;}
.menu-caret{font-size:15px;line-height:1;opacity:.7;transition:transform .2s ease;}
.menu-group.is-sub-open > .menu-has-sub{background:rgba(255,255,255,0.12);}
.menu-sub{
  position:absolute;top:-1px;left:calc(100% + 1px);min-width:220px;
  background:#000;border:1px solid rgba(255,255,255,0.2);border-radius:3px;
  box-shadow:0 10px 28px rgba(0,0,0,0.6);padding:6px;
  display:none;flex-direction:column;gap:2px;
}
.menu-group.is-sub-open > .menu-sub{display:flex;animation:subIn .2s ease;}
@keyframes subIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:none;}}
.menu-sub a{
  font-family:'Inter',sans-serif;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;
  color:#fff;text-decoration:none;padding:10px 14px;border-radius:2px;transition:background .2s ease;
}
.menu-sub a:hover,.menu-sub a:focus-visible{background:rgba(255,255,255,0.14);}
/* Móvil: la lista de proyectos se despliega debajo de "Proyectos" (no cabe a la derecha) */
@media (max-width:760px){
  .menu-sub{position:static;min-width:0;box-shadow:none;border:0;border-left:1px solid rgba(255,255,255,0.2);border-radius:0;margin:2px 0 4px 10px;padding:2px 0 2px 4px;}
  .menu-group.is-sub-open > .menu-has-sub .menu-caret{transform:rotate(90deg);}
  .menu-sub a{font-size:11px;padding:9px 10px;}
}

/* ===== CAMBIOS 64 (PRUEBA): "Sobre mí" — la cámara se mete en el banner y aparece Óscar Parra ===== */
a.menu-item{text-decoration:none;}
body.about-open{overflow:hidden;}
.about-fx{position:fixed;inset:0;z-index:9980;pointer-events:auto;cursor:pointer;}
.about-fx-frame{position:fixed;overflow:hidden;background:#000;opacity:0;}
.about-fx.is-start .about-fx-frame{opacity:1;}
.about-fx-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 28%;
  filter:grayscale(12%) sepia(6%) contrast(1.1) saturate(1.08) brightness(0.95);
  transform:scale(1.06);
}
.about-fx.is-in .about-fx-img{animation:afxPlunge 2.2s cubic-bezier(.6,0,.2,1) forwards, afxDrift 16s ease-in-out 2.2s infinite alternate;}
@keyframes afxPlunge{
  0%{transform:scale(1.06);filter:grayscale(12%) sepia(6%) contrast(1.1) saturate(1.08) brightness(.95) blur(0);}
  65%{filter:grayscale(12%) sepia(6%) contrast(1.12) saturate(1.1) brightness(1.02) blur(3px);}
  100%{transform:scale(1);filter:grayscale(12%) sepia(6%) contrast(1.1) saturate(1.08) brightness(.95) blur(0);}
}
@keyframes afxDrift{from{transform:scale(1);}to{transform:scale(1.07) translate(-.6%,.4%);}}
.about-fx-shade{position:absolute;inset:0;opacity:0;transition:opacity 2s ease;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 40%,rgba(0,0,0,.6) 100%),linear-gradient(180deg,rgba(13,12,11,.05) 0%,rgba(13,12,11,.15) 55%,rgba(13,12,11,.75) 100%);}
.about-fx.is-in .about-fx-shade{opacity:1;}
.about-fx.is-out .about-fx-shade{opacity:0;transition-duration:1.2s;}
.about-fx-frame .film-grain{z-index:2;}
.about-fx-frame .tv-scanlines{z-index:2;}
/* destello del "boom" justo cuando la cámara llega */
.about-fx-flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.55),rgba(255,255,255,0) 65%);opacity:0;}
.about-fx.is-in .about-fx-flash{animation:afxFlash 1s ease-out 1.75s both;}
@keyframes afxFlash{0%{opacity:0;}25%{opacity:.9;}100%{opacity:0;}}
/* nombre: letra a letra, saliendo de desenfoque */
.about-fx-title{
  position:fixed;left:0;right:0;bottom:15vh;margin:0;padding:0 24px;text-align:center;pointer-events:none;
  font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;color:#fff;
  font-size:clamp(46px,9vw,150px);line-height:.95;letter-spacing:.01em;text-shadow:0 4px 40px rgba(0,0,0,.65);
}
.afx-w{display:inline-block;white-space:nowrap;margin:0 .14em;}
.afx-ch{display:inline-block;opacity:0;transform:translateY(.28em) scale(1.12);filter:blur(14px);letter-spacing:.2em;}
.about-fx.is-title .afx-ch{opacity:1;transform:none;filter:blur(0);letter-spacing:0;transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s ease,letter-spacing 1.4s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 110ms);}
.about-fx-close{
  position:fixed;top:18px;right:20px;width:44px;height:44px;border:1px solid rgba(255,255,255,.4);background:rgba(7,6,5,.5);
  color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:0;transition:opacity .5s ease .5s;
}
.about-fx.is-title .about-fx-close{opacity:1;}
.about-fx.is-out .about-fx-close{opacity:0;transition-delay:0s;}
@media (max-width:760px){
  .about-fx-title{bottom:18vh;font-size:clamp(38px,13vw,70px);}
  .about-fx-close{top:12px;right:12px;width:38px;height:38px;}
}
@media (prefers-reduced-motion:reduce){
  .about-fx.is-in .about-fx-img{animation:none;}
  .about-fx.is-in .about-fx-flash{animation:none;}
}


/* Paso 1: todo lo del banner (texto, logos, HUD, grano…) se desvanece y solo queda la imagen */
.hero-banner > :not(.hero-bg):not(.hero-defs){transition:opacity 1s ease;}
body.about-prep .hero-banner > :not(.hero-bg):not(.hero-defs){opacity:0 !important;pointer-events:none;}
body.about-prep .hero-banner .logo-ring{pointer-events:none;}

/* ===== CAMBIOS 67/72: los proyectos de la home en formato 16:9, en ordenador y en móvil ===== */
.work-card{aspect-ratio:16/9;}


/* ===== CAMBIOS 69: tarjetas de la home solo con el nombre pequeño + año, en blanco (sin el título grande) ===== */
.work-overlay .tag{margin-top:0;color:#fff;}


/* ===== CAMBIOS 70: cabecera Main · Work (lista de proyectos al mantener) · About; miniaturas sin filtro y con grano de cine ===== */
/* Work: lista de proyectos debajo, al mantener el cursor */
.nav-work{position:relative;}
.nav-sub{position:absolute;top:100%;left:-14px;padding-top:16px;display:none;z-index:120;}
.nav-work.is-open > .nav-sub{display:block;animation:navSubIn .2s ease;}
@keyframes navSubIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.nav-sub-in{
  min-width:230px;background:#000;border:1px solid rgba(255,255,255,0.2);border-radius:3px;
  box-shadow:0 10px 28px rgba(0,0,0,0.6);padding:6px;display:flex;flex-direction:column;gap:2px;
}
header nav .nav-sub-in a{
  display:block;padding:10px 14px;border-radius:2px;white-space:nowrap;font-size:12px;letter-spacing:0.12em;
  color:#fff;opacity:1;transition:background .2s ease;
}
header nav .nav-sub-in a:hover{background:rgba(255,255,255,0.14);opacity:1;}
@media (max-width:760px){
  header nav ul{gap:18px;}
  .nav-sub{left:-8px;}
  .nav-sub-in{min-width:210px;}
  header nav .nav-sub-in a{font-size:11px;padding:9px 12px;}
}
/* Miniaturas de la home: sin el filtro del banner (ni gris ni oscurecido); solo un grano de cine sutil por encima */
.work-thumb-media img,.thumb-video{filter:none;}
.work-card:hover .work-thumb-media img{filter:brightness(1.06);}
.work-card:hover .thumb-video{filter:brightness(1.06);}
.film-grain.cine-grain{
  opacity:0.2;mix-blend-mode:overlay;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:grainShift 0.5s steps(1) infinite;
}
@media (hover:hover){
  .work-card:hover .work-thumb-media img{filter:brightness(1.06);transform:none;}
}


/* ===== CAMBIOS 71: cursor más pequeño (en reposo y sobre algo clicable) ===== */
.cursor-ring{width:17px;height:17px;}
.cursor-ring.is-active{width:24px;height:24px;}
.cursor-ring::before{border-width:1.5px;}
.cursor-ring.is-active::before{border-width:1.4px;}
.cursor-ring::after{width:3px;height:3px;}



/* ===== CAMBIOS 73: las letras de "Óscar Parra" crecen un poco con el cursor; en la última A aparece una X pequeña (ParraX) ===== */
.hero-title .ch{position:relative;}
.hero-title .ch .cs{display:inline-block;transform-origin:50% 62%;will-change:transform;}
.hero-title .px{
  position:absolute;left:calc(100% + .08em);bottom:-.1em;width:.34em;height:.46em;
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.hero-title .px .bar{position:absolute;left:50%;top:50%;height:.07em;margin-top:-.035em;
  clip-path:polygon(0 50%, 14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%);}
.hero-title .px .b1{width:.5em;margin-left:-.25em;transform:rotate(71.7deg);}
.hero-title .px .b2{width:.5em;margin-left:-.25em;transform:rotate(-52deg);}
.hero-title .px .bar i{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%;transition:transform 0s linear .25s;}
.hero-title .px.is-on{opacity:1;transition:opacity .04s ease;}
.hero-title .px.is-on .bar i{transform:scaleX(1);transition:transform .1s cubic-bezier(.4,0,.2,1);}
.hero-title .px.is-on .b2 i{transition-delay:.09s;}





/* ===== CAMBIOS 79 (solo móvil): se deshace la prueba de cambios76 (los proyectos vuelven a ocupar todo) y el botón Todos/IA es más pequeño y está un poco más arriba ===== */
@media (max-width:760px){
  .work-toolbar .wrap{top:7px;}
  .view-filter{padding:2px;}
  .view-filter-btn{font-size:10px;padding:4px 13px;}
}


/* ===== CAMBIOS 80 (Premios Esland): el vídeo se reproduce solo, sin sonido y en bucle, al llegar a él; al pulsar se amplía y arranca con sonido ===== */
.video-frame.has-preview .video-preview{opacity:1!important;pointer-events:none!important;z-index:2;}
.video-frame.has-preview::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:rgba(0,0,0,0);transition:background .35s ease;}
.video-frame.has-preview:hover::after{background:rgba(0,0,0,.35);}
.video-frame.has-preview .video-play{z-index:4;opacity:0;transition:opacity .3s ease;}
.video-frame.has-preview:hover .video-play{opacity:1;}
.video-frame.has-preview.is-loaded::after{display:none;}


/* ===== CAMBIOS 81 (PRUEBA, solo Premios ESLAND): sin banner; vídeo grande + carrusel horizontal debajo (mismo ancho) + textos a la derecha, todo centrado.
   (también: cursor verde ácido en todo el sitio; etiqueta de versión en rojo). Para volver atrás en Esland: usar el premios-esland.html y el style.css de cambios80. ===== */
body .cursor-ring::before,body .cursor-ring.is-active::before,body.iso-hi .cursor-ring::before,body.iso-hi .cursor-ring.is-active::before{border-color:#a3ff12;}
body .cursor-ring::after,body .cursor-ring.is-active::after,body.iso-hi .cursor-ring::after,body.iso-hi .cursor-ring.is-active::after{background:#a3ff12;}

.es-layout{
  --hdr:57px;
  --iw:clamp(240px,21vw,320px);
  --gap:clamp(22px,2.6vw,44px);
  --pad:clamp(20px,5.6vw,96px);
  --vw:min(calc(100vw - 2*var(--pad) - var(--gap) - var(--iw)), calc((100vh - var(--hdr) - 280px)*16/9));
  display:grid;
  grid-template-columns:var(--vw) var(--iw);
  grid-template-rows:auto auto;
  column-gap:var(--gap);row-gap:clamp(12px,1.4vw,20px);
  justify-content:center;align-content:center;
  min-height:calc(100vh - var(--hdr));
  padding:28px var(--pad);
}
.es-video{grid-column:1;grid-row:1;padding:0!important;}
.es-video .wrap{max-width:none;padding:0;}
.es-layout .es-video .video-frame:not(.is-zoom){max-width:none;margin:0;}
.es-gallery{grid-column:1;grid-row:2;padding:0!important;min-width:0;}
.es-gallery .gallery-viewport{max-width:none;margin:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%);}
.es-gallery .gal-item{flex:0 0 calc(var(--vw)/7.5);}
.es-info{grid-column:2;grid-row:1;align-self:center;color:#f2eee6;text-shadow:0 1px 16px rgba(0,0,0,.65);}
.es-title{
  font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  color:#fff;font-size:clamp(26px,2.9vw,46px);line-height:.98;letter-spacing:.01em;margin-bottom:clamp(14px,1.6vw,22px);
}
.es-meta{display:grid;gap:10px;margin:0 0 clamp(16px,2vw,28px);}
.es-meta dt{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(11px,1vw,14px);letter-spacing:.04em;color:#fff;}
.es-meta dd{margin:2px 0 0;font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(12px,1.1vw,15px);color:#cfcabd;}
.es-text p{font-size:clamp(13px,1.05vw,15px);line-height:1.65;margin:0 0 10px;color:#f2eee6;}
.es-text p:last-child{margin-bottom:0;}
@media (max-width:760px){
  .es-layout{display:flex;flex-direction:column;min-height:0;padding:22px 0 30px;gap:16px;}
  .es-info{display:contents;}
  .es-head{order:1;padding:0 22px;}
  .es-video{order:2;padding:0 14px!important;}
  .es-gallery{order:3;}
  .es-text{order:4;padding:0 22px;}
  .es-title{font-size:30px;margin-bottom:12px;}
  .es-meta{grid-template-columns:repeat(3,1fr);gap:8px;margin:0;}
  .es-meta dt{font-size:10px;}
  .es-meta dd{font-size:10px;line-height:1.3;}
  .es-text p{font-size:12.5px;line-height:1.6;}
  .es-gallery .gal-item{flex:0 0 clamp(100px,28vw,130px);}
  .es-gallery .gallery-viewport{max-width:100vw;}
}


/* ===== CAMBIOS 82 (PRUEBA, solo Premios ESLAND): textos separados por líneas (título / roles / descripción) y sección final con 4 fotogramas en 2x2 a pantalla completa, 16:9 ===== */
.es-title,.es-meta{position:relative;}
.es-title{padding-bottom:clamp(14px,1.5vw,20px);margin-bottom:clamp(12px,1.3vw,18px);}
.es-title::after,.es-meta::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,#fff 0 38px,rgba(255,255,255,.26) 38px 100%);
}
.es-meta{gap:0;padding-bottom:clamp(12px,1.3vw,18px);margin:0 0 clamp(12px,1.3vw,18px);}
.es-meta > div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.09);}
.es-meta > div:last-child{border-bottom:0;}
.es-meta dt{font-size:clamp(10px,.85vw,12px);letter-spacing:.16em;color:rgba(255,255,255,.62);white-space:nowrap;}
.es-meta dd{margin:0;text-align:right;color:#fff;font-weight:400;font-size:clamp(12px,1.05vw,14.5px);}
@media (max-width:760px){
  .es-meta > div{flex-direction:column;align-items:flex-start;gap:3px;border-bottom:0;padding:0;}
  .es-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:14px;margin-bottom:0;}
  .es-meta dd{text-align:left;font-size:10px;}
  .es-meta dt{font-size:9px;letter-spacing:.12em;}
  .es-head{padding-bottom:0;}
}
.es-stills{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#000;margin:0;}
.es-stills figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:#000;}
.es-stills img{width:100%;height:100%;object-fit:cover;display:block;}





/* ===== CAMBIOS 86: estructura Esland en todos los proyectos (menos Rewind); si falta alguna imagen de fotograma, la celda queda negra sin texto ===== */
.es-stills img{color:transparent;font-size:0;}



/* ===== CAMBIOS 87: vídeo propio (MP4) en El Sueño de Emilio: se reproduce solo (mudo, en bucle) y al pulsar se amplía con sonido y controles ===== */
.video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:2;pointer-events:none;}
.video-frame.is-loaded video{pointer-events:auto;object-fit:contain;}




/* ===== CAMBIOS 90: Eneryeti — selector de cuatro vídeos (flechas + números) ===== */
.video-set{position:relative;width:100%;}
.video-set .video-frame.vs-off{display:none!important;}
.vs-ctrl{position:absolute;inset:0;z-index:6;pointer-events:none;}
.vs-arrow,.vs-num{
  pointer-events:auto;display:grid;place-items:center;padding:0;cursor:pointer;color:#fff;
  background:rgba(0,0,0,0.62);border:1px solid rgba(255,255,255,0.35);
  transition:background .25s ease,border-color .25s ease;
}
.vs-arrow:hover,.vs-num:hover{background:rgba(0,0,0,0.88);border-color:rgba(255,255,255,0.7);}
.vs-arrow{position:absolute;top:50%;width:38px;height:56px;transform:translateY(-50%);}
.vs-prev{left:0;border-left:0;}
.vs-next{right:0;border-right:0;}
.vs-nums{position:absolute;top:10px;left:10px;display:flex;gap:6px;}
.vs-num{width:34px;height:34px;font:700 13px/1 'Inter',sans-serif;letter-spacing:.04em;}
.vs-num.is-on{background:#a3ff12;border-color:#a3ff12;color:#000;}
.vs-num.is-on:hover{background:#a3ff12;}
body.video-open .vs-ctrl{display:none;}
@media (max-width:760px){
  .vs-arrow{width:30px;height:44px;}
  .vs-num{width:30px;height:30px;font-size:12px;}
  .vs-nums{top:8px;left:8px;gap:5px;}
}


/* ===== CAMBIOS 91: barra superior — al pasar el cursor, texto e iconos cambian al verde ácido (#a3ff12), el mismo del cursor ===== */
header nav a,header .social-icons a{transition:color .2s ease,opacity .2s ease;}
header nav a:hover,header nav a:focus-visible,
header .nav-work:hover > .nav-work-link,
header .social-icons a:hover,header .social-icons a:focus-visible,
header .menu-btn:hover,header .cam-iso:hover .iso-label,header .cam-iso:hover .iso-value,
header nav .nav-sub-in a:hover{color:#a3ff12;opacity:1;}


/* ===== CAMBIOS 92: Rewind Hispano — misma estructura que el resto + línea del tiempo de años ===== */
.rw-hide{display:none!important;}
.video-set{position:relative;width:100%;}
.video-set .video-frame.vs-off{display:none!important;}
.rw-bg{opacity:0;transition:opacity .7s ease;}
.rw-bg.on{opacity:1;}
.rw-time{
  position:relative;height:76px;margin:0 auto;max-width:640px;width:100%;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
}
.rw-time.is-drag{cursor:grabbing;}
.rw-line{position:absolute;left:0;right:0;bottom:12px;height:1px;background:rgba(255,255,255,.28);}
.rw-line::before{content:'';position:absolute;left:50%;bottom:0;width:1px;height:7px;background:#a3ff12;transform:translateX(-50%);}
.rw-track{position:absolute;inset:0;}
.rw-year{
  position:absolute;left:50%;top:44%;padding:0 6px;background:none;border:0;cursor:pointer;
  font-family:'Archivo Black',sans-serif;font-size:44px;line-height:1;letter-spacing:.02em;color:#cfcabd;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
  transition:transform .5s cubic-bezier(.22,.68,0,1.01),opacity .4s ease,color .3s ease;
  will-change:transform;
}
.rw-time.is-drag .rw-year{transition:none;}
.rw-year.is-on{color:#fff;cursor:default;}
.rw-year:not(.is-on):hover{color:#a3ff12;}
.rw-time:focus-visible{outline:1px solid rgba(163,255,18,.6);outline-offset:-2px;}
.es-layout.rw{--hdr:calc(57px + 76px);padding-top:6px;}
@keyframes rwInL{from{opacity:.15;transform:translateX(-34px);filter:blur(4px);}to{opacity:1;transform:none;filter:none;}}
@keyframes rwInR{from{opacity:.15;transform:translateX(34px);filter:blur(4px);}to{opacity:1;transform:none;filter:none;}}
.es-layout.rw-in-l{animation:rwInL .5s cubic-bezier(.22,.68,0,1.01);}
.es-layout.rw-in-r{animation:rwInR .5s cubic-bezier(.22,.68,0,1.01);}
body.video-open .rw-time{visibility:hidden;}
@media (max-width:760px){
  .rw-time{height:64px;max-width:100%;}
  .rw-year{font-size:34px;}
  .rw-line{bottom:8px;}
  .es-layout.rw{padding-top:12px;}
  .es-layout.rw .es-meta{grid-template-columns:repeat(2,1fr);gap:12px 8px;}
}


/* ===== CAMBIOS 93: Rewind — la línea del tiempo va centrada justo encima del recuadro del vídeo, más pequeña; el vídeo, casi tan grande como en el resto ===== */
.es-layout.rw{--hdr:57px;padding-top:28px;
  --vw:min(calc(100vw - 2*var(--pad) - var(--gap) - var(--iw)), calc((100vh - var(--hdr) - 326px)*16/9));}
.es-layout.rw .rw-time{height:46px;max-width:none;width:100%;margin:0 0 6px;}
.es-layout.rw .rw-year{font-size:30px;top:42%;}
.es-layout.rw .rw-line{bottom:6px;}
.es-layout.rw .rw-line::before{height:5px;}
@media (max-width:760px){
  .es-layout.rw{padding-top:12px;}
  .es-layout.rw .rw-time{height:48px;margin-bottom:4px;}
  .es-layout.rw .rw-year{font-size:27px;}
}



/* ===== CAMBIOS 97: "Sobre mí" — la barra de arriba se queda; plano medio de Óscar a la izquierda; a la derecha, en inglés, rol, nombre, descripción y datos separados por líneas ===== */
body.about-open header{z-index:9990;}
.about-fx{inset:var(--afx-top,57px) 0 0 0;cursor:default;}
.about-fx-flash{top:var(--afx-top,57px);}
.about-fx.is-in .about-fx-img{animation:none!important;}
.about-fx-fade{position:fixed;inset:var(--afx-top,57px) 0 0 0;height:auto;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  background:linear-gradient(270deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.88) 54%,rgba(0,0,0,.3) 62%,rgba(0,0,0,0) 70%);}
.about-fx.is-title .about-fx-fade{opacity:1;}
.about-fx-stack{position:fixed;top:var(--afx-top,57px);bottom:0;left:46vw;right:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vh,40px) clamp(24px,4vw,64px);pointer-events:none;}
.afx-panel{width:min(520px,100%);max-height:100%;pointer-events:auto;color:#f2eee6;text-shadow:0 1px 14px rgba(0,0,0,.75);}
.about-fx-kicker{margin:0 0 clamp(8px,1.2vh,14px);font:600 clamp(10px,.85vw,12px)/1 'Inter',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#a3ff12;
  opacity:0;transform:translateY(8px);transition:opacity .9s ease .5s,transform .9s ease .5s;}
.about-fx.is-title .about-fx-kicker{opacity:1;transform:none;}
.about-fx.is-out .about-fx-kicker{opacity:0;transition-delay:0s;}
.afx-panel .about-fx-title{position:static;padding:0;margin:0;text-align:left;font-size:clamp(34px,4.3vw,72px);line-height:.98;white-space:nowrap;}
.afx-panel .afx-w{margin:0 .16em 0 0;}
.afx-rule{position:relative;height:1px;margin:clamp(14px,2.2vh,24px) 0 clamp(14px,2.2vh,22px);background:rgba(255,255,255,.26);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .9s;}
.afx-rule::before{content:'';position:absolute;left:0;top:0;width:38px;height:1px;background:#fff;}
.about-fx.is-title .afx-rule{transform:none;}
.about-fx.is-out .afx-rule{transform:scaleX(0);transition-duration:.4s;transition-delay:0s;}
.afx-seq{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.about-fx.is-info .afx-seq{opacity:1;transform:none;}
.about-fx.is-info .afx-seq:nth-child(2){transition-delay:.12s;}
.about-fx.is-info .afx-rows .afx-seq:nth-child(1){transition-delay:.3s;}
.about-fx.is-info .afx-rows .afx-seq:nth-child(2){transition-delay:.4s;}
.about-fx.is-info .afx-rows .afx-seq:nth-child(3){transition-delay:.5s;}
.about-fx.is-info .afx-rows .afx-seq:nth-child(4){transition-delay:.6s;}
.about-fx.is-out .afx-seq{opacity:0;transition-delay:0s;transition-duration:.3s;}
.afx-about h3{margin:0 0 10px;font:700 10px/1 'Inter',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.afx-about p{margin:0 0 10px;font:300 clamp(13px,1.02vw,15px)/1.65 'Inter',sans-serif;color:#f2eee6;}
.afx-about p:last-child{margin-bottom:0;}
.afx-rows{margin:clamp(14px,2.2vh,22px) 0 0;border-top:1px solid rgba(255,255,255,.26);}
.afx-rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:clamp(8px,1.2vh,12px) 0;border-bottom:1px solid rgba(255,255,255,.09);}
.afx-rows > div:last-child{border-bottom:0;}
.afx-rows dt{font:700 10px/1 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap;}
.afx-rows dd{margin:0;text-align:right;font:400 clamp(12.5px,1vw,14.5px)/1.3 'Inter',sans-serif;color:#fff;}
.afx-rows dd a{pointer-events:auto;cursor:pointer;color:#fff;text-decoration:none;transition:color .2s ease;}
.afx-rows dd a:hover,.afx-rows dd a:focus-visible{color:#a3ff12;}
.afx-city{font:400 clamp(15px,1.3vw,19px)/1 'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:.02em;}
.afx-ow{margin-left:10px;font:600 10px/1 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#a3ff12;}
.afx-rows small{display:block;margin-top:5px;font:400 10.5px/1 'Inter',sans-serif;letter-spacing:.12em;color:rgba(255,255,255,.55);}

/* móvil en vertical: Óscar arriba y el texto debajo (con desplazamiento si no cabe) */
@media (max-width:760px) and (orientation:portrait){
  .about-fx-fade{background:linear-gradient(180deg,rgba(0,0,0,0) 22%,rgba(0,0,0,.74) 38%,rgba(0,0,0,.94) 100%);}
  .about-fx-stack{top:calc(var(--afx-top,47px) + 33vh);left:0;right:0;bottom:0;align-items:flex-start;justify-content:flex-start;overflow-y:auto;padding:0 20px 18px;-webkit-overflow-scrolling:touch;pointer-events:auto;}
  .afx-panel{width:100%;max-height:none;}
  .about-fx-kicker{font-size:9.5px;margin-bottom:6px;}
  .afx-panel .about-fx-title{font-size:clamp(30px,9.4vw,46px);}
  .afx-rule{margin:10px 0 10px;}
  .afx-about h3{display:none;}
  .afx-about p{font-size:12px;line-height:1.5;margin-bottom:7px;}
  .afx-rows{margin-top:8px;}
  .afx-rows > div{padding:6px 0;}
  .afx-rows dd{font-size:12.5px;}
  .afx-city{font-size:15px;}
  .afx-rows small{display:none;}
}
/* móvil en horizontal y pantallas bajas: mismo reparto que en ordenador, con letra algo más pequeña */
@media (max-height:620px) and (orientation:landscape){
  .about-fx-stack{padding-top:8px;padding-bottom:8px;}
  .afx-panel .about-fx-title{font-size:clamp(24px,4.4vw,44px);}
  .about-fx-kicker{font-size:9px;margin-bottom:4px;}
  .afx-rule{margin:8px 0;}
  .afx-about h3{display:none;}
  .afx-about p{font-size:10.5px;line-height:1.42;margin-bottom:5px;}
  .afx-rows{margin-top:8px;}
  .afx-rows > div{padding:4px 0;}
  .afx-rows dd{font-size:11px;}
  .afx-rows small{display:none;}
}
@media (prefers-reduced-motion:reduce){.afx-seq,.afx-rule{transition:none;}}




/* ===== CAMBIOS 98: "Sobre mí" — el titular es el rol (Film Director / & Generative AI), sin el nombre grande; el nombre va en la descripción en tercera persona; "Based in: Madrid · Worldwide" con la tipografía del resto de filas ===== */
.afx-panel .about-fx-title{font-size:clamp(30px,3.7vw,58px);line-height:1.02;white-space:normal;}
.afx-line{display:block;white-space:nowrap;}
.afx-line.afx-acc{color:#a3ff12;}
.afx-panel .afx-w{margin:0 .2em 0 0;}
.about-fx.is-title .afx-ch{transition-delay:calc(var(--i) * 42ms);}
.afx-about strong{font-weight:600;color:#fff;}
@media (max-width:760px) and (orientation:portrait){.afx-panel .about-fx-title{font-size:clamp(28px,9vw,42px);}}
@media (max-height:620px) and (orientation:landscape){.afx-panel .about-fx-title{font-size:clamp(22px,3.8vw,38px);}}


/* ===== CAMBIOS 99: "Sobre mí" más fluido (solo transform y clip-path, primer fotograma igual que el banner, lo pesado de detrás en pausa), todo el texto y las líneas aparecen a la vez, y texto web actualizado ===== */
html{scrollbar-gutter:stable;}                                            /* al bloquear el scroll no se mueve la página 15 px */
body.about-prep .hero-bg img{animation-play-state:paused;}                 /* el balanceo del banner se congela (y así coincide con el primer fotograma de la escena) */
.hero-banner.afx-hide-bg .hero-bg{visibility:hidden;}
.about-fx-frame{position:absolute;inset:0;overflow:hidden;background:#000;opacity:0;transition:opacity .3s ease;}
.about-fx.is-start .about-fx-frame{opacity:1;}
.about-fx-img{position:absolute;left:0;top:0;right:auto;bottom:auto;max-width:none;object-fit:fill;object-position:0 0;transform-origin:0 0;will-change:transform;
  filter:grayscale(12%) sepia(6%) contrast(1.1) saturate(1.08) brightness(.95);animation:none!important;}
.afx-fx{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease;}
.about-fx.is-title .afx-fx{opacity:1;}
.about-fx.is-out .afx-fx{opacity:0;transition-duration:.4s;}
.about-fx.is-in .about-fx-flash{animation:afxFlash 1s ease-out 2s both;}
/* líneas: nada se ve antes que el texto; la línea bajo el titular, las filas y su primera línea salen todos con el bloque de texto */
.afx-rule{transition:transform 1.1s cubic-bezier(.2,.7,.2,1) 0s;}
.about-fx.is-title .afx-rule{transform:scaleX(0);}
.about-fx.is-info .afx-rule{transform:none;}
.afx-rows{border-top:0;}
.afx-rows > div:first-child{border-top:1px solid rgba(255,255,255,.26);}


/* ===== CAMBIOS 100: formato móvil de las páginas de proyecto — 1) vídeo, 2) carrusel de imágenes (un pelín más pequeño), 3) título + roles + descripción, 4) fotogramas en UNA columna ===== */
@media (max-width:760px){
  .es-video{order:1;}
  .es-gallery{order:2;}
  .es-head{order:3;padding-top:8px;}
  .es-text{order:4;}
  .es-gallery .gal-item{flex:0 0 clamp(90px,25vw,117px);}
  .es-stills{grid-template-columns:1fr;}
  .es-layout.rw{padding-top:8px;}
}


/* ===== CAMBIOS 101: móvil, portada — un pelín de borde negro a izquierda y derecha en la parte de proyectos (el banner no); la separación entre miniaturas no cambia ===== */
@media (max-width:760px){
  .work-grid{padding-left:10px;padding-right:10px;background:#000;}
}




/* ===== CAMBIOS 104: móvil, portada — borde negro lateral de los proyectos un pelín más grueso (10px -> 16px) ===== */
@media (max-width:760px){
  .work-grid{padding-left:10px;padding-right:10px;}
}


/* ===== CAMBIOS 105: móvil, portada — se vuelve al borde lateral de 10px y se añade un pelín sutil de borde negro entre el banner y la primera miniatura ===== */
@media (max-width:760px){
  .work-grid{padding-top:6px;}
}


/* ===== CAMBIOS 106: pie de página (© + aviso de derechos de clientes); Rewind: la fila Agencia solo en 2023; móvil: tira de años más pequeña y sutil (sin negrita) ===== */
footer.work-footer .wrap{flex-direction:column;gap:8px;}
footer .ft-legal{font-size:11px;opacity:.75;letter-spacing:.02em;}
@media (max-width:760px){
  .es-layout.rw .rw-time{height:36px;margin-bottom:2px;}
  .es-layout.rw .rw-year{font-family:'Inter',sans-serif;font-weight:400;font-size:17px;letter-spacing:.06em;top:40%;}
  .es-layout.rw .rw-line{bottom:5px;}
  .es-layout.rw .rw-line::before{height:4px;}
  .es-layout.rw{padding-top:8px;}
  footer .ft-legal{padding:0 22px;line-height:1.5;}
}


/* ===== CAMBIOS 107: portada — al pasar el cursor por una miniatura, el texto (nombre · año) pasa al verde (#a3ff12) junto con el zoom y el brillo ===== */
.work-overlay .tag{transition:color .3s ease;}
.work-card:hover .work-overlay .tag{color:#a3ff12;}


/* ===== CAMBIOS 108: botón Todos/IA en negro y verde (#a3ff12); la X que sale junto a la última A de "Parra" ahora es la X nueva (PNG, trazo blanco) ===== */
.view-filter-btn.is-active{background:#a3ff12;color:#0D0C0B;}
.view-filter-btn.is-active:hover{color:#0D0C0B;}
.view-filter-btn:not(.is-active):hover{color:#a3ff12;}
.hero-title .px{width:.46em;height:.5em;bottom:-.12em;left:calc(100% + .06em);}
.hero-title .px img{display:block;width:100%;height:100%;object-fit:contain;
  clip-path:inset(0 100% 0 0);transition:clip-path 0s linear .25s;user-select:none;-webkit-user-drag:none;}
.hero-title .px.is-on img{clip-path:inset(0 0 0 0);transition:clip-path .16s cubic-bezier(.4,0,.2,1);}


/* ===== CAMBIOS 109: móvil — año / rol / productora / agencia, cada uno en su fila y separados por líneas, igual que en ordenador ===== */
@media (max-width:760px){
  .es-meta,.es-layout.rw .es-meta{display:block;grid-template-columns:none;gap:0;padding-bottom:12px;margin:0 0 12px;}
  .es-meta > div{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.09);}
  .es-meta > div:last-child{border-bottom:0;}
  .es-meta dt{font-size:10px;letter-spacing:.16em;white-space:nowrap;}
  .es-meta dd{text-align:right;font-size:13px;line-height:1.3;}
  .es-title{padding-bottom:14px;margin-bottom:10px;}
}



/* ===== CAMBIOS 111 (PRUEBA, solo móvil y solo portada): pantalla de inicio con el banner en el centro y el resto en negro; al deslizar, el banner sube, baja la barra y aparece todo como siempre ===== */
.splash-hint{display:none;}
@media (max-width:760px){
  html.splash{overflow:hidden;touch-action:none;overscroll-behavior:none;}
  html.splash,html.splash body{background:#000;}
  html.splash body{touch-action:none;}
  html.splash header{transform:translateY(-100%);opacity:0;pointer-events:none;}
  html.splash .hero-banner{margin-top:calc((100svh - max(25vh,200px))/2 - var(--hdr-h,47px));animation:splashIn 1s ease both;}
  html.splash .work-full-bleed,html.splash footer{opacity:0;pointer-events:none;}
  header{transition:transform .9s cubic-bezier(.65,0,.25,1) .1s,opacity .6s ease .2s,background-color .5s ease,border-color .5s ease;}
  .hero-banner{transition:margin-top .95s cubic-bezier(.65,0,.25,1);}
  .work-full-bleed,footer{transition:opacity .8s ease .45s;}
  html.splash-leaving{overflow-x:hidden;}
  .splash-hint{display:flex;flex-direction:column;align-items:center;gap:10px;position:fixed;left:0;right:0;
    bottom:calc(env(safe-area-inset-bottom,0px) + 34px);z-index:60;pointer-events:none;opacity:0;transition:opacity .4s ease;
    font-family:monospace;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.6);padding-left:.34em;}
  .splash-hint i{display:block;width:1px;height:34px;background:linear-gradient(to bottom,rgba(163,255,18,0),#a3ff12);animation:splashHint 1.8s ease-in-out infinite;transform-origin:top;}
  html.splash .splash-hint{opacity:1;transition-delay:1.2s;}
}
@keyframes splashIn{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:none;}}
@keyframes splashHint{0%{transform:scaleY(0);opacity:0;}40%{opacity:1;}100%{transform:scaleY(1);opacity:0;}}


/* ===== CAMBIOS 112: pantalla de inicio móvil — "Desliza hacia arriba" con flecha verde hacia arriba, pegado al banner; banner + aviso centrados como un solo conjunto ===== */
@media (max-width:760px){
  html.splash{--sp-bh:max(25vh,200px);--sp-gap:26px;--sp-hint:56px;}
  html.splash .hero-banner{margin-top:calc((100svh - var(--sp-bh) - var(--sp-gap) - var(--sp-hint))/2 - var(--hdr-h,47px));}
  .splash-hint{bottom:auto;top:calc((100svh - max(25vh,200px) - 26px - 56px)/2 + max(25vh,200px) + 26px);height:56px;gap:12px;justify-content:flex-start;}
  .splash-hint i{width:20px;height:28px;position:relative;background:none;animation:none;overflow:visible;}
  .splash-hint i::before,.splash-hint i::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-8px 0 0 -5.5px;
    border-left:1.5px solid #a3ff12;border-top:1.5px solid #a3ff12;transform:rotate(45deg);opacity:0;animation:splashUp 1.7s ease-in-out infinite;}
  .splash-hint i::after{animation-delay:.35s;}
}
@keyframes splashUp{0%{transform:translateY(9px) rotate(45deg);opacity:0;}35%{opacity:1;}100%{transform:translateY(-9px) rotate(45deg);opacity:0;}}




/* ===== CAMBIOS 115: pantalla de inicio móvil — el filtro analógico (grano + líneas de barrido) cubre toda la pantalla negra y se retira al deslizar (queda solo el del banner); "Desliza hacia arriba" más blanco y con parpadeo suave ===== */
.splash-fx{display:none;}
@media (max-width:760px){
  .splash-fx{display:block;position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .9s ease;}
  html.splash .splash-fx{opacity:1;transition:opacity 1.2s ease .2s;}
  .splash-fx::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;opacity:.11;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grainShift .2s steps(1) infinite;will-change:transform;}
  .splash-fx::after{content:'';position:absolute;inset:0;
    background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0,rgba(255,255,255,.055) 1px,transparent 1px,transparent 4px);
    animation:scanRoll 6s linear infinite;}
  html.splash .hero-banner,html.splash-leaving .hero-banner{z-index:2;}      /* el banner tapa el filtro de pantalla: conserva solo el suyo */
  .splash-hint{z-index:60;}
  .splash-hint span{color:rgba(255,255,255,.95);animation:splashBlink 2.6s ease-in-out infinite;}
}
@keyframes splashBlink{0%,100%{opacity:.28;}50%{opacity:1;}}


/* ===== CAMBIOS 116: móvil, portada — borde negro lateral de los proyectos un pelín más ancho (10px -> 13px); las miniaturas siguen en 16:9 ===== */
@media (max-width:760px){
  .work-grid{padding-left:13px;padding-right:13px;}
}


/* ===== CAMBIOS 117 (solo móvil, portada): textos de las miniaturas un pelín más pequeños; botón Todos/IA un poco más abajo ===== */
@media (max-width:760px){
  .work-overlay{padding:16px;}
  .work-overlay .tag{font-size:11.5px;letter-spacing:.01em;}
  .work-toolbar .wrap{top:15px;}
}


/* ===== CAMBIOS 118 (solo móvil, portada): el borde negro entre banner y primera miniatura mide lo mismo que los laterales (13px); el fondo negro de los proyectos lleva el filtro analógico (grano + líneas), por debajo de las miniaturas ===== */
@media (max-width:760px){
  .work-grid{padding-top:13px;position:relative;isolation:isolate;}
  .work-grid > .work-card{position:relative;z-index:1;}
  .work-grid::before,.work-grid::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;}
  .work-grid::before{opacity:.11;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:gridGrain .2s steps(1) infinite;}
  .work-grid::after{
    background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0,rgba(255,255,255,.055) 1px,transparent 1px,transparent 4px);
    animation:scanRoll 6s linear infinite;}
}
@keyframes gridGrain{
  0%{background-position:0 0;}20%{background-position:-37px 22px;}40%{background-position:51px -41px;}
  60%{background-position:-23px -58px;}80%{background-position:44px 35px;}100%{background-position:0 0;}
}


/* ===== CAMBIOS 119 (solo móvil, portada): se quita el filtro analógico del fondo negro de los proyectos (CAMBIOS 118) y el botón Todos/IA baja un poco más ===== */
.work-grid::before,.work-grid::after{content:none !important;display:none !important;animation:none !important;}
@media (max-width:760px){
  .work-toolbar .wrap{top:28px;}
}



/* ===== CAMBIOS 121 (PRUEBA, solo móvil y solo Premios ESLAND): vídeo a todo el ancho y pegado a la barra; carrusel un pelín más pequeño; imagen de fondo solo tras vídeo + carrusel; título/año/rol/agencia/descripción sobre negro y más compactos ===== */
@media (max-width:760px){
  .es-layout.esm{padding:0 0 0;gap:0;min-height:0;}
  .es-layout.esm .es-video{padding:0!important;order:1;}
  .es-layout.esm .es-video .wrap{padding:0;max-width:none;}
  .es-layout.esm .es-video .video-frame:not(.is-zoom){max-width:none;width:100%;margin:0;}
  .es-layout.esm .es-gallery{order:2;margin:12px 0 14px;}
  .es-layout.esm .es-gallery .gal-item{flex:0 0 clamp(80px,22.5vw,106px);}
  .es-layout.esm .es-head{order:3;background:#000;padding:20px 22px 0;}
  .es-layout.esm .es-text{order:4;background:#000;padding:0 22px 26px;}
  .es-layout.esm .es-title{font-size:26px;padding-bottom:10px;margin-bottom:4px;}
  .es-layout.esm .es-meta{padding-bottom:6px;margin:0 0 8px;}
  .es-layout.esm .es-meta > div{padding:5px 0;}
  .es-layout.esm .es-meta dt{font-size:9.5px;}
  .es-layout.esm .es-meta dd{font-size:12px;}
  .es-layout.esm .es-text p{font-size:12.5px;line-height:1.55;margin:0 0 8px;}
  .es-layout.esm .es-text p:last-child{margin-bottom:0;}
}


/* ===== CAMBIOS 122 (solo móvil, TODOS los proyectos): el formato probado en Premios ESLAND — vídeo a todo el ancho pegado a la barra, carrusel un pelín más pequeño, imagen de fondo centrada y proporcional a la franja visible (vídeo + carrusel), y título/año/rol/agencia/descripción sobre negro y compactos ===== */
@media (max-width:760px){
  .es-layout{padding:0;gap:0;min-height:0;}
  .es-layout.rw{padding-top:8px;}
  .es-layout .es-video{padding:0!important;order:1;}
  .es-layout .es-video .wrap{padding:0;max-width:none;}
  .es-layout .es-video .video-frame:not(.is-zoom){max-width:none;width:100%;margin:0;}
  .es-layout .es-gallery{order:2;margin:12px 0 14px;}
  .es-layout .es-gallery .gal-item{flex:0 0 clamp(80px,22.5vw,106px);}
  .es-layout .es-head{order:3;background:#000;padding:20px 22px 0;}
  .es-layout .es-text{order:4;background:#000;padding:0 22px 26px;}
  .es-layout .es-title{font-size:26px;padding-bottom:10px;margin-bottom:4px;}
  .es-layout .es-meta,.es-layout.rw .es-meta{padding-bottom:6px;margin:0 0 8px;}
  .es-layout .es-meta > div{padding:5px 0;}
  .es-layout .es-meta dt{font-size:9.5px;}
  .es-layout .es-meta dd{font-size:12px;}
  .es-layout .es-text p{font-size:12.5px;line-height:1.55;margin:0 0 8px;}
  .es-layout .es-text p:last-child{margin-bottom:0;}
  /* imagen de fondo: ancho completo, proporción 16:9 y centrada en la franja visible (la fija un pequeño script según el hueco entre vídeo y texto) */
  .project-stage > .project-video-bg{inset:auto!important;left:0!important;top:var(--esm-c,40%)!important;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;transform:translateY(-50%)!important;}
}


/* ===== CAMBIOS 123 (solo móvil): la imagen de fondo de los proyectos vuelve a ocupar toda la zona del vídeo + carrusel; Rewind: años de la tira un pelín más pequeños ===== */
@media (max-width:760px){
  .project-stage > .project-video-bg{inset:auto!important;left:0!important;top:0!important;width:100%!important;height:var(--esm-h,70vw)!important;aspect-ratio:auto;object-fit:cover;transform:none!important;}
  .es-layout.rw .rw-time{height:32px;}
  .es-layout.rw .rw-year{font-size:14px;letter-spacing:.05em;}
}

/* ===== CAMBIOS 131: la X de "ParraX" es ahora una letra real (misma fuente que el nombre), más pequeña, que sale deslizándose
   a la derecha desde detrás de la última A al crecer ésta, y se esconde de nuevo a la misma velocidad que la A recupera su tamaño
   (el movimiento va ligado directamente al zoom de la A, variable --p de 0 a 1). Para volver a la X-imagen: usar el index.html y el style.css de cambios130. ===== */
.hero-title .ch .px{
  position:absolute;left:100%;bottom:.08em;width:auto;height:auto;margin-left:.02em;
  font-size:.62em;line-height:1;opacity:1;transition:none;overflow:hidden;padding:0 .06em 0 0;
  pointer-events:none;z-index:0;
}
.hero-title .ch .cs{position:relative;z-index:1;}
.hero-title .ch .px .pxi{display:block;color:inherit;transform:translateX(calc((var(--p,0) - 1) * 115%));will-change:transform;}

/* ===== CAMBIOS 132: la X de "ParraX" se asoma más: sale entera con poco más de un tercio del zoom de la A (antes necesitaba el zoom completo y a veces se quedaba a medias)
   y ya no se recorta por arriba, abajo ni derecha (solo queda oculta por la izquierda, detrás de la A). Para volver atrás: usar el index.html y el style.css de cambios131. ===== */
.hero-title .ch .px{overflow:visible;padding:0;clip-path:inset(-.4em -.6em -.4em 0);}

/* ===== CAMBIOS 134: la última A de "Parra" es una imagen PNG (misma tipografía, Archivo Black) y la X queda realmente detrás de ella:
   la X (texto) lleva una máscara con la silueta de la A y sale deslizándose por su borde derecho, sin la línea invisible de antes.
   Todo va dentro del zoom de la A, así que crece con ella. Para volver atrás: usar el index.html y el style.css de cambios133. ===== */
.hero-title .aw{display:inline-block;position:relative;width:0.778em;height:0.728em;vertical-align:-.02em;}
.hero-title .aw .aimg{display:block;position:relative;z-index:1;width:100%;height:100%;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.hero-title .aw .px{position:absolute;left:0;top:0;bottom:auto;margin:0;padding:0;width:1.398em;height:0.728em;font-size:1em;line-height:1;
  overflow:visible;clip-path:none;opacity:1;z-index:0;pointer-events:none;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.hero-title .aw .px .pxi{position:absolute;left:1.303em;top:0.308em;display:block;font-size:0.62em;line-height:1;white-space:nowrap;color:inherit;
  transform:translateX(calc((var(--p,0) - 1) * 1.136em));will-change:transform;}


/* ===== CAMBIOS 135/136: web en inglés; "About" (texto) un poco más a la izquierda; sin el destello blanco al entrar en About (y entrada más rápida, ver index.html); las miniaturas de la home vuelven a como estaban ===== */
@media (min-width:761px){
  .about-fx-stack{left:38vw;}
  .about-fx-fade{background:linear-gradient(270deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.88) 60%,rgba(0,0,0,.3) 66%,rgba(0,0,0,0) 72%);}
}
/* sin el destello blanco al meterse en la imagen de About */
.about-fx-flash,.about-fx.is-in .about-fx-flash{display:none!important;animation:none!important;}




/* ===== CAMBIOS 138: nuevo About — glitch de cambio de canal sobre el banner y pantalla con descripción (izq.), foto (centro) y contacto (dcha.). Sustituye al zoom anterior (.about-fx, sin uso) ===== */
/* capa de glitch */
.ab-glitch{position:fixed;left:0;right:0;bottom:0;top:var(--ab-top,57px);z-index:9985;pointer-events:none;overflow:hidden;}
.ab-noise{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0;}
.ab-bar{position:absolute;left:-10%;width:120%;height:3%;top:0;opacity:0;mix-blend-mode:screen;}
.ab-glitch::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.38) 0 1px,transparent 1px 4px);}
.ab-osd{position:absolute;top:20px;left:24px;z-index:2;font:700 clamp(16px,2.2vw,28px)/1 'Inter',sans-serif;letter-spacing:.2em;color:#a3ff12;text-shadow:2px 0 #ff1a1a,-2px 0 #00e5ff;opacity:0;}
.hero-banner.ab-shake{animation:abShake .18s steps(1) infinite;}
@keyframes abShake{
  0%{transform:translate(0,0);filter:none;}
  20%{transform:translate(-10px,0) skewX(-1.4deg);filter:hue-rotate(40deg) saturate(1.7) contrast(1.25);}
  40%{transform:translate(8px,2px) skewX(1deg);filter:hue-rotate(-35deg) contrast(1.3);}
  60%{transform:translate(-4px,-2px);filter:saturate(2.2) contrast(1.15);}
  80%{transform:translate(12px,0) skewX(1.8deg);filter:hue-rotate(80deg) contrast(1.3);}
  100%{transform:translate(0,0);filter:none;}
}
/* pantalla About */
.ab-scr{position:fixed;left:0;right:0;bottom:0;top:var(--ab-top,57px);z-index:9980;background:#000;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;--ph:min(calc(100vh - var(--ab-top,57px) - 120px),640px);}
.ab-bg{position:fixed;left:0;right:0;bottom:0;top:var(--ab-top,57px);pointer-events:none;
  background:radial-gradient(ellipse 55% 60% at 50% 48%,rgba(163,255,18,.08),rgba(0,0,0,0) 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 120px);}
.ab-wrap{position:relative;min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(32px,4.5vw,76px);padding:clamp(28px,5vh,56px) clamp(24px,5vw,80px);}
.ab-left{justify-self:end;max-width:430px;}
.ab-right{justify-self:start;width:100%;max-width:390px;}
.ab-kick{margin:0 0 clamp(10px,1.6vh,16px);font:600 11px/1 'Inter',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#a3ff12;}
.ab-title{margin:0;font:400 clamp(24px,2.2vw,40px)/1.04 'Archivo Black',sans-serif;text-transform:uppercase;color:#fff;letter-spacing:.01em;}
.ab-title span{display:block;}
.ab-title .acc{color:#a3ff12;}
.ab-rule{position:relative;height:1px;margin:clamp(16px,2.4vh,26px) 0;background:rgba(255,255,255,.26);}
.ab-rule::before{content:'';position:absolute;left:0;top:0;width:38px;height:1px;background:#fff;}
.ab-p{margin:0 0 12px;font:300 clamp(13.5px,1.05vw,15.5px)/1.68 'Inter',sans-serif;color:#f2eee6;}
.ab-p:last-child{margin-bottom:0;}
.ab-p strong{font-weight:600;color:#fff;}
/* foto */
.ab-photo{margin:0;width:calc(var(--ph) * .7468);}
.ab-frame{position:relative;width:100%;height:var(--ph);overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.14);}
.ab-frame img{display:block;width:100%;height:100%;object-fit:cover;filter:contrast(1.04) brightness(.94);}
.ab-frame .film-grain{z-index:2;}
.ab-frame .tv-scanlines{z-index:3;opacity:.55;}
.ab-frame .cn{position:absolute;z-index:4;width:16px;height:16px;border:0 solid #a3ff12;}
.ab-frame .cn.tl{top:10px;left:10px;border-top-width:2px;border-left-width:2px;}
.ab-frame .cn.tr{top:10px;right:10px;border-top-width:2px;border-right-width:2px;}
.ab-frame .cn.bl{bottom:10px;left:10px;border-bottom-width:2px;border-left-width:2px;}
.ab-frame .cn.br{bottom:10px;right:10px;border-bottom-width:2px;border-right-width:2px;}
.ab-photo figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:11px;font:600 10px/1 'Inter',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.ab-photo .rec{display:inline-flex;align-items:center;gap:7px;}
.ab-photo .rec b{width:7px;height:7px;border-radius:50%;background:#ff1a1a;animation:abRec 1.2s steps(1) infinite;}
@keyframes abRec{0%,60%{opacity:1;}61%,100%{opacity:.15;}}
/* contacto */
.ab-rows{margin:0;border-top:1px solid rgba(255,255,255,.26);}
.ab-rows > div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:18px;padding:clamp(11px,1.6vh,15px) 0;border-bottom:1px solid rgba(255,255,255,.09);}
.ab-rows > div:last-child{border-bottom:0;}
.ab-rows dt{font:700 10px/1 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap;}
.ab-rows dd{margin:0;text-align:right;font:400 clamp(13px,1.02vw,14.5px)/1.3 'Inter',sans-serif;color:#fff;margin-left:auto;}
.ab-rows dd a{color:#fff;text-decoration:none;transition:color .2s ease;}
.ab-rows dd a:hover,.ab-rows dd a:focus-visible{color:#a3ff12;}
/* cerrar */
.ab-close{position:fixed;top:calc(var(--ab-top,57px) + 16px);right:clamp(16px,2.4vw,36px);z-index:5;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.22);color:#fff;font:600 10px/1 'Inter',sans-serif;letter-spacing:.24em;text-transform:uppercase;transition:color .2s ease,border-color .2s ease;}
.ab-close i{font-style:normal;font-size:15px;line-height:1;letter-spacing:0;}
.ab-close:hover,.ab-close:focus-visible{color:#a3ff12;border-color:#a3ff12;}
/* entrada: todo aparece con un parpadeo de glitch al sintonizar */
.ab-seq{opacity:0;}
.ab-scr.is-on .ab-seq{animation:abTune .5s steps(1) both;}
.ab-scr.is-on .ab-photo{animation-delay:.05s;}
.ab-scr.is-on .ab-right{animation-delay:.12s;}
@keyframes abTune{0%{opacity:0;}15%{opacity:1;transform:translateX(-8px);}30%{opacity:.2;transform:translateX(6px);}45%{opacity:1;transform:translateX(-3px);}60%{opacity:.5;transform:none;}75%,100%{opacity:1;transform:none;}}
.ab-scr.is-on .ab-frame img{animation:abPhoto .6s steps(1) .05s both;}
@keyframes abPhoto{
  0%{filter:contrast(1.5) drop-shadow(10px 0 0 rgba(255,26,26,.8)) drop-shadow(-10px 0 0 rgba(0,229,255,.8));transform:translateX(-10px);}
  25%{filter:contrast(1.3) drop-shadow(-6px 0 0 rgba(255,26,26,.7)) drop-shadow(6px 0 0 rgba(0,229,255,.7));transform:translateX(8px);}
  50%{filter:contrast(1.2) drop-shadow(4px 0 0 rgba(255,26,26,.5)) drop-shadow(-4px 0 0 rgba(0,229,255,.5));transform:translateX(-4px);}
  75%{filter:contrast(1.08);transform:translateX(2px);}
  100%{filter:contrast(1.04) brightness(.94);transform:none;}
}
/* móvil vertical y pantallas estrechas: foto arriba, luego descripción y contacto */
@media (max-width:860px){
  .ab-scr{--ph:min(46vh,380px);}
  .ab-wrap{display:flex;flex-direction:column;align-items:stretch;gap:26px;padding:62px 20px 40px;}
  .ab-photo{order:0;align-self:center;}
  .ab-left{order:1;justify-self:auto;max-width:none;}
  .ab-right{order:2;max-width:none;}
  .ab-title{font-size:clamp(24px,7.4vw,38px);}
  .ab-close{top:calc(var(--ab-top,47px) + 10px);right:12px;}
}
@media (max-height:620px) and (min-width:861px){
  .ab-scr{--ph:min(calc(100vh - var(--ab-top,57px) - 60px),400px);}
}
/* móvil en horizontal: mismo reparto de tres columnas que en ordenador, más compacto (se puede desplazar si no cabe) */
@media (max-height:620px) and (min-width:600px) and (orientation:landscape){
  .ab-scr{--ph:min(calc(100vh - var(--ab-top,47px) - 70px),360px);}
  .ab-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:24px;padding:46px 22px 24px;}
  .ab-left{order:0;justify-self:end;max-width:300px;}
  .ab-photo{order:0;align-self:center;}
  .ab-right{order:0;max-width:280px;}
  .ab-title{font-size:clamp(18px,3.2vw,26px);}
  .ab-p{font-size:12px;line-height:1.55;margin-bottom:8px;}
  .ab-rule{margin:12px 0;}
  .ab-rows > div{padding:8px 0;}
  .ab-rows dd{font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  .ab-scr.is-on .ab-seq,.ab-scr.is-on .ab-frame img,.hero-banner.ab-shake,.ab-photo .rec b{animation:none;}
  .ab-seq{opacity:1;}
}


/* ===== CAMBIOS 139: el glitch y la pantalla About viven DENTRO del banner de la home (no en toda la pantalla); el banner se estira lo justo para el contenido ===== */
.ab-glitch{position:absolute;left:0;right:0;top:0;bottom:0;z-index:40;}
.ab-osd{top:16px;left:20px;}
.hero-banner.ab-shake > :not(.ab-glitch){animation:abShake .18s steps(1) infinite;}
.hero-banner.ab-shake{animation:none;}
.hero-banner.is-about{height:auto;min-height:0;}
.hero-banner.is-about > :not(.ab-scr):not(.ab-glitch){visibility:hidden;}
.ab-scr{position:relative;left:auto;right:auto;top:auto;bottom:auto;z-index:1;overflow:visible;background:#000;min-height:0;--ph:clamp(300px,50vh,440px);}
.ab-bg{position:absolute;left:0;right:0;top:0;bottom:0;}
.ab-wrap{min-height:0;padding:clamp(30px,5vh,48px) clamp(24px,5vw,80px);}
.ab-close{position:absolute;top:16px;right:clamp(16px,2.4vw,36px);}
@media (max-width:860px){
  .ab-scr{--ph:min(38vh,320px);}
  .ab-wrap{padding:60px 20px 36px;}
  .ab-close{top:12px;right:12px;}
}
@media (max-height:620px) and (min-width:600px) and (orientation:landscape){
  .ab-scr{--ph:min(calc(100vh - 150px),300px);}
  .ab-wrap{padding:52px 22px 24px;}
}

@keyframes abShake{
  0%{translate:0 0;filter:none;}
  20%{translate:-10px 0;filter:hue-rotate(40deg) saturate(1.7) contrast(1.25);}
  40%{translate:8px 2px;filter:hue-rotate(-35deg) contrast(1.3);}
  60%{translate:-4px -2px;filter:saturate(2.2) contrast(1.15);}
  80%{translate:12px 0;filter:hue-rotate(80deg) contrast(1.3);}
  100%{translate:0 0;filter:none;}
}


/* ===== CAMBIOS 140: solo glitch (sin estática ni "canal"): el banner tiembla con barras de color y franjas que distorsionan; la altura cambia poco a poco a la vez ===== */
.ab-glitch::after{display:none;}
.ab-noise,.ab-osd{display:none;}
.ab-glitch{overflow:hidden;pointer-events:none;}
.ab-bar{mix-blend-mode:screen;}
.ab-slice{position:absolute;left:0;right:0;display:none;background:rgba(255,255,255,.02);}
.ab-scr.ab-measure{position:absolute!important;left:0;right:0;top:0;visibility:hidden;pointer-events:none;}
@keyframes abShake{
  0%{translate:0 0;filter:none;}
  16%{translate:-9px 0;filter:hue-rotate(40deg) saturate(1.7) contrast(1.2);}
  33%{translate:7px 1px;filter:hue-rotate(-35deg) contrast(1.25);}
  50%{translate:-3px -1px;filter:saturate(2) contrast(1.15);}
  66%{translate:11px 0;filter:hue-rotate(80deg) contrast(1.25);}
  83%{translate:-6px 1px;filter:hue-rotate(-60deg) saturate(1.5);}
  100%{translate:0 0;filter:none;}
}
.hero-banner.ab-shake > :not(.ab-glitch){animation-duration:.14s;}


@keyframes abTune{0%{opacity:1;transform:translateX(-10px);}20%{opacity:.35;transform:translateX(7px);}40%{opacity:1;transform:translateX(-4px);}60%{opacity:.6;transform:translateX(2px);}80%,100%{opacity:1;transform:none;}}
.ab-scr.is-on .ab-seq{animation-duration:.4s;}

/* ===== CAMBIOS 141: glitch sutil — solo toques verdes (#a3ff12) y el temblor; sin colores extra ===== */
@keyframes abShake{
  0%{translate:0 0;filter:none;}
  16%{translate:-9px 0;filter:drop-shadow(3px 0 0 rgba(163,255,18,.32));}
  33%{translate:7px 1px;filter:drop-shadow(-3px 0 0 rgba(163,255,18,.25));}
  50%{translate:-3px -1px;filter:none;}
  66%{translate:11px 0;filter:drop-shadow(3px 0 0 rgba(163,255,18,.3));}
  83%{translate:-6px 1px;filter:drop-shadow(-2px 0 0 rgba(163,255,18,.22));}
  100%{translate:0 0;filter:none;}
}
.ab-bar{mix-blend-mode:normal;}
.ab-slice{display:none!important;}


@keyframes abPhoto{
  0%{filter:contrast(1.2) drop-shadow(5px 0 0 rgba(163,255,18,.45));transform:translateX(-8px);}
  25%{filter:contrast(1.12) drop-shadow(-4px 0 0 rgba(163,255,18,.35));transform:translateX(6px);}
  50%{filter:contrast(1.08) drop-shadow(3px 0 0 rgba(163,255,18,.25));transform:translateX(-3px);}
  75%{filter:contrast(1.05);transform:translateX(1px);}
  100%{filter:contrast(1.04) brightness(.94);transform:none;}
}


/* ===== CAMBIOS 143: rendimiento — el grano de las miniaturas solo se anima en las visibles (los vídeos lejanos se descargan desde index.html) ===== */
.work-card .film-grain.cine-grain{animation-play-state:paused;will-change:auto;}
.work-card.is-vis .film-grain.cine-grain{animation-play-state:running;will-change:transform;}






/* ===== CAMBIOS 147: la versión pasa abajo a la derecha del pie (gris, integrada, formato 1.4.7); móvil: About ocupa el mismo tamaño que el banner (pantalla compacta con desplazamiento interno) ===== */
footer{position:relative;}
.ft-ver{position:absolute;right:clamp(16px,2.4vw,36px);bottom:12px;font:500 10px/1 'Inter',sans-serif;letter-spacing:.14em;color:rgba(242,237,228,.34);pointer-events:none;user-select:none;}
body.iso-hi .ft-ver{color:rgba(13,12,11,.38);}
@media (max-width:760px){
  footer.work-footer{padding-bottom:36px;}
  .ft-ver{right:16px;bottom:12px;}
  /* About en móvil: el banner conserva su altura y la pantalla va dentro (foto fija a la izquierda, texto con scroll a la derecha) */
  .hero-banner.is-about{height:25vh;min-height:200px;}
  .ab-scr{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;--bh:max(25vh,200px);}
  .ab-scr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:26px;background:linear-gradient(rgba(0,0,0,0),#000 85%);pointer-events:none;z-index:3;}
  .ab-wrap{position:absolute;left:0;right:0;top:0;bottom:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-rows:min-content;align-content:start;align-items:start;column-gap:14px;row-gap:16px;padding:12px 14px 30px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0;}
  .ab-photo{grid-column:1;grid-row:1 / span 2;position:sticky;top:12px;align-self:start;order:0;width:calc((var(--bh) - 24px) * .7468);}
  .ab-frame{height:calc(var(--bh) - 24px);}
  .ab-photo figcaption{display:none;}
  .ab-frame .cn{width:9px;height:9px;}
  .ab-frame .cn.tl{top:6px;left:6px;} .ab-frame .cn.tr{top:6px;right:6px;} .ab-frame .cn.bl{bottom:6px;left:6px;} .ab-frame .cn.br{bottom:6px;right:6px;}
  .ab-left{grid-column:2;grid-row:1;order:0;max-width:none;justify-self:stretch;padding-right:26px;}
  .ab-right{grid-column:2;grid-row:2;order:0;max-width:none;justify-self:stretch;}
  .ab-kick{font-size:9px;margin-bottom:6px;}
  .ab-title{font-size:15px;line-height:1.1;}
  .ab-rule{margin:9px 0;}
  .ab-p{font-size:11.5px;line-height:1.5;margin-bottom:7px;}
  .ab-rows > div{padding:7px 0;}
  .ab-rows dt{font-size:8.5px;}
  .ab-rows dd{font-size:11.5px;}
  .ab-close{top:6px;right:8px;padding:0;width:24px;height:24px;justify-content:center;}
  .ab-close span{display:none;}
  .ab-close i{font-size:15px;}
}

/* VERSION */:root{--ver:'147';}