/* =====================================================================
   its.javiii · creación visual — hoja de estilo
   Monocroma sobre negro cálido. Dorado con cuentagotas.
   ===================================================================== */

:root{
  /* Monocromo puro — solo blancos y negros neutros, sin acento de color */
  --bg:        #0E0E0E;
  --bg-2:      #151515;
  --bg-3:      #1C1C1C;

  /* Texto (todos pasan WCAG AA sobre --bg) */
  --text:      #EDEDED;
  --text-hi:   #F7F7F7;   /* blanco de realce (hover de botón) */
  --text-2:    #A6A6A6;
  --ash:       #8C8C8C;

  /* Líneas */
  --border:    #262626;
  --border-2:  #3A3A3A;

  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm: 7px; --r-md: 11px;
  --nav-h: 66px; --max: 1500px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-deck: cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-weight:300; font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--text); color:var(--bg); }
:focus-visible{ outline:2px solid var(--text-2); outline-offset:3px; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--text); color:var(--bg); padding:10px 18px; font-weight:600; }
.skip-link:focus{ left:12px; top:12px; }


/* ---------- Grano/estática (generado, fino) ------------------------
   z-index:-1 → al fondo del todo, por debajo de cualquier objeto. Se ve
   como textura de fondo pero nunca emborrona el contenido (que va encima). */
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--bg);
  background-image:url("../img/grain.webp");
  background-size:320px 320px; background-repeat:repeat;
}


/* ---------- Tipografía --------------------------------------------- */
h1,h2,h3{ margin:0; font-weight:300; line-height:1.12; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
.eyebrow{ font-size:.68rem; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--ash); margin:0 0 18px; }
.lead{ color:var(--text-2); font-size:1.05rem; max-width:62ch; font-weight:300; }
.lead--big{ font-size:clamp(1.15rem,2.4vw,1.5rem); color:var(--text); line-height:1.5; letter-spacing:-.01em; }


/* ---------- Layout -------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }
.section{ padding:60px 0; }
@media (min-width:768px){ .wrap{ padding:0 56px; } .section{ padding:92px 0; } }


/* ---------- Botones -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; padding:13px 24px; border-radius:var(--r-sm);
  border:1px solid transparent; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--wa{ background:var(--text); color:var(--bg); }      /* CTA: blanco sobre negro */
.btn--wa:hover{ background:var(--text-hi); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--border-2); }
.btn--ghost:hover{ border-color:var(--text-2); }


/* ---------- NAV ------------------------------------------------------ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--nav-h);
  background:rgba(14,14,14,.6); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent; transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav.is-scrolled{ border-bottom-color:var(--border); background:rgba(14,14,14,.9); }
.nav__inner{ height:100%; max-width:var(--max); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:22px; }
@media (min-width:768px){ .nav__inner{ padding:0 56px; } }
.nav__logo{ display:flex; align-items:center; gap:9px; margin-right:auto; }
.nav__drone{ width:32px; height:22px; color:var(--text); flex:none; }
.nav__wordmark{ display:flex; flex-direction:column; line-height:1; }
.nav__name{ font-size:1rem; font-weight:600; letter-spacing:-.01em; }
.nav__tag{ font-size:.54rem; font-weight:300; font-style:italic; letter-spacing:.22em; color:var(--ash); margin-top:3px; }

.nav__links{ display:none; gap:26px; }
.nav__links a{ font-size:.8rem; font-weight:400; letter-spacing:.03em; color:var(--text-2); padding:6px 0; position:relative; white-space:nowrap; transition:color .3s var(--ease); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--text); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav__links a:hover, .nav__links a.is-active{ color:var(--text); }
.nav__links a.is-active::after, .nav__links a:hover::after{ transform:scaleX(1); }
.nav__wa{ display:none; padding:9px 18px; }

@media (min-width:1100px){ .nav__links{ display:flex; } .nav__wa{ display:inline-flex; } .nav__burger{ display:none !important; } }

.nav__burger{ display:flex; flex-direction:column; justify-content:center; gap:6px; width:42px; height:42px; padding:0; background:none; border:1px solid var(--border-2); border-radius:var(--r-sm); cursor:pointer; }
.nav__burger span{ display:block; width:18px; height:1.5px; margin:0 auto; background:var(--text); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.mobilemenu{ position:fixed; inset:var(--nav-h) 0 auto 0; z-index:199; background:rgba(14,14,14,.98); backdrop-filter:blur(18px); border-bottom:1px solid var(--border); padding:22px 22px 32px; }
.mobilemenu[hidden]{ display:none; }
/* se despliega como una persiana desde la barra y los enlaces caen uno a
   uno; al cerrar se recogen todos a la vez y la persiana sube */
.mobilemenu{ clip-path:inset(0 0 100% 0); transition:clip-path .46s cubic-bezier(.7,0,.25,1); }
.mobilemenu.is-open{ clip-path:inset(0 0 -1px 0); transition-timing-function:cubic-bezier(.2,.75,.15,1); }
.mobilemenu nav{ display:flex; flex-direction:column; gap:2px; }
.mobilemenu a{ font-size:1.3rem; font-weight:400; padding:14px 0; border-bottom:1px solid var(--border); color:var(--text);
  opacity:0; transform:translateY(-12px); transition:opacity .22s var(--ease), transform .3s var(--ease); }
.mobilemenu.is-open a{ opacity:1; transform:none; transition:opacity .5s var(--ease) var(--md,0s), transform .6s cubic-bezier(.2,.8,.2,1) var(--md,0s); }
.mobilemenu a:nth-child(1){ --md:.1s; }  .mobilemenu a:nth-child(2){ --md:.16s; } .mobilemenu a:nth-child(3){ --md:.22s; }
.mobilemenu a:nth-child(4){ --md:.28s; } .mobilemenu a:nth-child(5){ --md:.34s; } .mobilemenu a:nth-child(6){ --md:.4s; }
.mobilemenu a:last-child{ border-bottom:0; }


/* ---------- Transición de vista -------------------------------------- */
.views{ min-height:100vh; }
.view{ animation:viewIn .5s var(--ease) both; }
@keyframes viewIn{ from{ opacity:0; } to{ opacity:1; } }


/* ---------- HERO (compacto, poco espacio muerto) --------------------- */
.hero{ position:relative; min-height:64vh; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--nav-h) + 34px) 0 30px; }
@media (min-width:768px){ .hero{ min-height:66vh; padding:calc(var(--nav-h) + 24px) 0 44px; } }
/* misma caja que la barra superior (.nav__inner): así el texto arranca justo
   en la vertical del logo, en cualquier ancho de pantalla */
.hero__inner{ max-width:var(--max); margin:0 auto; width:100%; padding:0 24px; }
@media (min-width:768px){ .hero__inner{ padding:0 56px; } }

/* titular: fino, pequeño, 3 líneas (una frase por línea, sin partirse) */
.hero__title{ font-size:clamp(.8rem,2.7vw,2rem); font-weight:300; line-height:1.5; letter-spacing:-.005em; margin:0 0 30px; color:var(--text); }
.hero__line{ display:block; white-space:nowrap; }

/* ya visible pero borroso; se hace nítido despacio, línea a línea */
.hero__line{ opacity:.45; filter:blur(16px); transition:opacity 1.7s var(--ease), filter 1.9s var(--ease); }
.hero__line.is-in{ opacity:1; filter:blur(0); }

.hero__contact{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; color:var(--text-2); font-size:.95rem; opacity:0; transition:opacity 1.2s var(--ease); }
.hero__contact.is-in{ opacity:1; }
.hero__ci{ display:inline-flex; align-items:center; gap:9px; color:var(--text-2); transition:color .3s var(--ease); }
.hero__ci svg{ width:16px; height:16px; flex:none; }
a.hero__ci:hover{ color:var(--text); }
/* líneas finas entre ubicación · correo · WhatsApp */
.hero__sep{ width:40px; height:1px; background:var(--border-2); flex:none; }


/* ---------- Showreel justo bajo el titular ---------------------------- */
.reel-sec{ padding:8px 0 0; }

/* ---------- Logos de marcas (en blanco, misma presencia visual) ------- */
.logos{ padding:clamp(40px,6vw,76px) 24px clamp(14px,2.4vw,28px); }
.logos__lista{ list-style:none; margin:0 auto; padding:0; max-width:1100px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(24px,4vw,60px) clamp(34px,6.5vw,96px); }
.logos__item img{ --lh:34px; --lhn:34; height:var(--lh); width:auto; max-width:46vw; display:block;
  filter:brightness(0) invert(1); opacity:.62; transition:opacity .4s var(--ease); }
.logos__item img:hover{ opacity:1; }
/* en móvil, los cuatro en una sola fila: el tamaño va con el ancho de la
   pantalla (--lhn = alto de escritorio sin unidad) y nunca pasa del 60 % */
@media (max-width:600px){
  .logos{ padding-left:16px; padding-right:16px; }
  .logos__lista{ flex-wrap:nowrap; gap:0 5.5vw; }
  .logos__item img{ height:min(calc(var(--lhn) * .15vw), calc(var(--lhn) * .6px)); max-width:none; }
}

/* ---------- Tira de categorías (quieta, sin rayas, guiones finos) ---- */
.tira{ display:flex; justify-content:center; padding:6px 22px 0; }
.tira__track{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
.tira__item{ padding:12px 0; color:var(--text-2); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; transition:color .3s var(--ease); }
a.tira__item:hover{ color:var(--text); }
.tira__sep{ width:46px; height:1px; background:var(--border-2); margin:0 24px; flex:none; }


/* ---------- Cabecera de sección (editorial, entra desenfocada) ------- */
.shead{ margin-bottom:44px; padding-left:clamp(0px, 5vw, 74px); }
.shead h2{ font-size:clamp(1.9rem,4.8vw,3.3rem); font-weight:300; letter-spacing:-.03em; line-height:1.04; }
.shead__sub{ color:var(--text-2); margin-top:16px; font-size:1rem; max-width:60ch; }
.shead__more{ display:inline-block; margin-top:20px; color:var(--text-2); font-size:.82rem; letter-spacing:.04em; border-bottom:1px solid var(--border-2); padding-bottom:2px; transition:color .3s var(--ease), border-color .3s var(--ease); }
.shead__more:hover{ color:var(--text); border-color:var(--text-2); }

/* frase-manifiesto (como el hero, 3 líneas, aparece de una vez) */
.frase{ padding-left:clamp(0px, 5vw, 74px); margin:0 0 46px; font-size:clamp(1.02rem,2.3vw,1.55rem); font-weight:300; line-height:1.45; color:var(--text-2); letter-spacing:-.01em; }
.frase span{ display:block; }


/* ---------- Showreel (un poco más pequeño, botón "showreel" giratorio) */
.reel{ position:relative; z-index:2; aspect-ratio:16/9; width:100%; max-width:1180px; margin:0 auto; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.reel__preview{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
/* Misma estática fina de las previsualizaciones; queda sobre el clip y bajo el aro. */
.reel::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.32;
  background:url("../img/estatica.webp") 0 0/256px 256px repeat; mix-blend-mode:soft-light;
  animation:granoH .3s steps(1) infinite; }
.reel__play{ position:absolute; inset:0; z-index:2; margin:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:inherit; text-decoration:none; cursor:pointer; }
.reel__play:focus-visible{ outline:1px solid var(--text); outline-offset:-8px; }
.reel__badge{ position:relative; width:172px; height:172px; display:flex; align-items:center; justify-content:center; }
.reel__ring{ position:absolute; inset:0; width:100%; height:100%; animation:spin 18s linear infinite; }
.reel__ringtext{ fill:var(--text); font-family:var(--font); font-size:12.5px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; }
.reel__playicon{ position:relative; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid var(--text); border-radius:50%; color:var(--text); transition:background .3s var(--ease); }
.reel__play:hover .reel__playicon{ background:rgba(255,255,255,.08); }
.reel__playicon svg{ width:16px; height:16px; margin-left:3px; }
@keyframes spin{ to{ transform:rotate(360deg); } }


/* ---------- Rejilla de trabajos: 2 por línea, escalonados ------------ */
/* la rejilla de trabajos va fuera del contenedor de textos: ocupa todo el
   ancho con un margen pequeño, como en samkolder.com (los textos no cambian) */
.obras{ --wm:clamp(16px,4.5vw,96px); padding:0 var(--wm); }
.works{ display:grid; gap:34px 26px; grid-template-columns:1fr; }
@media (min-width:700px){
  .works{ grid-template-columns:repeat(2,1fr); gap:20px var(--wm, 34px); }
  .work:nth-child(even){ margin-top:64px; }          /* escalonado sutil */
}
.work__media{ position:relative; display:block; width:100%; padding:0; border:0; aspect-ratio:16/9; background:var(--bg-3); overflow:hidden; border-radius:var(--r-sm); }
.work__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), opacity .5s var(--ease); }
.work__media--play{ cursor:pointer; }
.work__media--play:hover img{ transform:scale(1.045); }

/* hueco vacío elegante — aún sin material */
.work__media--empty{ display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.02), transparent 62%), var(--bg-3); }
.work__ph{ display:flex; flex-direction:column; align-items:center; gap:13px; color:var(--ash); }
.work__ph .ring{ width:46px; height:46px; border:1px solid var(--border-2); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.work__ph .ring svg{ width:15px; height:15px; margin-left:2px; opacity:.85; }
.work__ph span{ font-size:.55rem; letter-spacing:.26em; text-transform:uppercase; }

.play{ position:absolute; inset:0; margin:auto; width:54px; height:54px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(236,230,218,.5); border-radius:50%; background:rgba(12,12,12,.4); color:var(--text); transition:background .35s var(--ease), border-color .35s var(--ease); backdrop-filter:blur(2px); }
.work__media--play:hover .play{ background:rgba(12,12,12,.65); border-color:var(--text); }
.play svg{ width:17px; height:17px; margin-left:3px; }

/* pie: título / línea / categoría / línea / fecha */
.work__body{ padding:16px 2px 0; }
.work__t{ font-size:1.12rem; font-weight:400; letter-spacing:-.01em; color:var(--text); }
.work__cat, .work__date{ display:block; margin-top:13px; padding-top:13px; border-top:1px solid var(--border); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; }
.work__cat{ color:var(--text-2); }
.work__date{ color:var(--ash); }

/* la tarjeta entera es un enlace a la página del trabajo.
   z-index:2 → la imagen/vídeo van por encima del grano (limpios) */
a.work{ display:block; color:inherit; position:relative; z-index:2; }
/* previsualización que se inyecta al pasar el cursor.
   pointer-events:none → el iframe no roba el ratón, así el cursor no se
   congela y el click sigue llegando al enlace de la tarjeta. */
.work__preview{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; z-index:1; pointer-events:none; opacity:0; transition:opacity .5s var(--ease); }
.work__preview.is-on{ opacity:1; }
/* estática de tele, muy sutil, fundida con el clip mientras se reproduce
   (al pasar el ratón): ruido fino que parpadea rápido */
.work__media::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:url("../img/estatica.webp") 0 0/256px 256px repeat;
  mix-blend-mode:soft-light; transition:opacity .6s var(--ease); }
.work__media:hover::after{ opacity:.32; animation:granoH .3s steps(1) infinite; }
@keyframes granoH{
  0%  { background-position:0 0; }
  20% { background-position:-61px 97px; }
  40% { background-position:113px -38px; }
  60% { background-position:-29px -141px; }
  80% { background-position:77px 53px; }
}


/* ---------- Página de trabajo (vídeo interno) ------------------------ */
.trabajo{ padding-top:calc(var(--nav-h) + 58px); }
.trabajo__head{ text-align:center; margin-bottom:28px; }
.trabajo__eyebrow{ font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ash); margin:0 0 14px; }
.trabajo__t{ font-size:clamp(1.6rem,4vw,2.6rem); font-weight:300; letter-spacing:-.02em; line-height:1.08; }
.trabajo__meta{ margin-top:14px; display:flex; flex-wrap:wrap; gap:9px; align-items:center; justify-content:center; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash); }
.trabajo__meta .sep{ width:3px; height:3px; border-radius:50%; background:var(--border-2); }
.trabajo__cat{ color:var(--text-2); }
.trabajo__desc{ max-width:64ch; margin:32px auto 0; text-align:center; color:var(--text-2); }
.trabajo__more{ margin-top:112px; }   /* más aire para "Seguir viendo" / descripción */

/* reproductor propio (más pequeño y centrado) */
.player{ position:relative; z-index:2; width:100%; max-width:1040px; margin:0 auto; background:#000; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.player__frame{ position:relative; aspect-ratio:16/9; background:#000; }
.player__frame iframe, .player__frame video, .player__frame .youtube-player{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.player__frame video{ object-fit:contain; pointer-events:none; }
.player__load{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ash); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; }
/* capa transparente sobre el iframe: impide que Vimeo capture el ratón (así el
   cursor no se congela) y permite pausar/reanudar al hacer click en el vídeo */
.player__click{ position:absolute; inset:0; z-index:3; }
/* YouTube limpio: el iframe sobresale --yt-corte por arriba y por abajo → el
   vídeo (16:9) llena el marco y el título / logo de YouTube caen en la franja
   recortada. La portada tapa el botón rojo hasta que el vídeo arranca. */
.player__frame--yt{ overflow:hidden; --yt-corte:84px; }
.player__frame.player__frame--yt iframe{ top:calc(var(--yt-corte) * -1); bottom:auto; height:calc(100% + var(--yt-corte) * 2); }
.player__portada{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; transition:opacity .45s var(--ease), visibility 0s; }
.player__frame--yt .player__load{ z-index:2; }
.player__frame.is-yt-on .player__portada{ opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s .45s; }
@media (max-width:560px){ .player__frame--yt{ --yt-corte:64px; } }

.pbar{ position:relative; z-index:4; display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--bg-2); border-top:1px solid var(--border); }
.pbar__btn{ background:none; border:0; color:var(--text); cursor:pointer; width:26px; height:26px; display:flex; align-items:center; justify-content:center; flex:none; opacity:.85; transition:opacity .2s var(--ease); }
.pbar__btn:hover{ opacity:1; }
.pbar__btn svg{ width:18px; height:18px; }
.pbar__t{ font-size:.72rem; color:var(--text-2); font-variant-numeric:tabular-nums; flex:none; min-width:40px; }
.pbar__t--dur{ text-align:right; }
/* barra de tiempo / volumen = <input type="range"> nativo → clicable y
   arrastrable en TODO el ancho (sin zonas muertas) */
.pbar__seek, .pbar__vol{ -webkit-appearance:none; appearance:none; height:16px; margin:0; background:transparent; cursor:pointer; }
.pbar__seek{ flex:1; min-width:0; --p:0%; }
.pbar__vol{ width:78px; flex:none; --pv:100%; }
.pbar__seek::-webkit-slider-runnable-track{ height:3px; border-radius:2px; background:linear-gradient(var(--text),var(--text)) 0/var(--p) 100% no-repeat, var(--border-2); }
.pbar__vol::-webkit-slider-runnable-track{ height:3px; border-radius:2px; background:linear-gradient(var(--text-2),var(--text-2)) 0/var(--pv) 100% no-repeat, var(--border-2); }
.pbar__seek::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:11px; height:11px; border-radius:50%; background:var(--text); margin-top:-4px; }
.pbar__vol::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:11px; height:11px; border-radius:50%; background:var(--text-2); margin-top:-4px; }
.pbar__seek::-moz-range-track, .pbar__vol::-moz-range-track{ height:3px; border-radius:2px; background:var(--border-2); }
.pbar__seek::-moz-range-progress{ height:3px; border-radius:2px; background:var(--text); }
.pbar__vol::-moz-range-progress{ height:3px; border-radius:2px; background:var(--text-2); }
.pbar__seek::-moz-range-thumb{ width:11px; height:11px; border:0; border-radius:50%; background:var(--text); }
.pbar__vol::-moz-range-thumb{ width:11px; height:11px; border:0; border-radius:50%; background:var(--text-2); }
.pbar__fs{ display:none; }   /* fullscreen general: solo el showreel lo muestra también en escritorio */
.player--showreel .pbar__fs{ display:flex; }
/* en móvil ocultamos el deslizador de volumen (queda el botón de silenciar) y
   mostramos el de pantalla completa: así la barra no se corta y todo cabe */
@media (max-width:560px){ .pbar{ gap:10px; padding:10px 12px; } .pbar__vol{ display:none; } .pbar__fs{ display:flex; } }

/* pantalla completa: el vídeo llena y la barra queda abajo */
.player:fullscreen{ max-width:none; display:flex; flex-direction:column; border:0; border-radius:0; background:#000; }
.player:fullscreen .player__frame{ flex:1; aspect-ratio:auto; }
.player:fullscreen .pbar{ background:rgba(20,20,20,.86); }
/* en pantalla completa el cursor personalizado no se ve → devolvemos el nativo */
.player:fullscreen, .player:fullscreen *{ cursor:auto; }
.player:fullscreen .pbar__btn, .player:fullscreen .pbar__seek, .player:fullscreen .pbar__vol, .player:fullscreen .player__click{ cursor:pointer; }


/* ---------- Filtro de Trabajos (centrado, sin numerar) --------------- */
.filtros{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:8px 30px; margin:0 0 50px; }
.filtro{ background:none; border:0; cursor:pointer; font-family:inherit; font-size:clamp(1rem,2.2vw,1.25rem); font-weight:300; letter-spacing:-.01em; color:var(--text-2); padding:8px 0; position:relative; transition:color .35s var(--ease); }
.filtro__n{ font-size:.58rem; color:var(--ash); vertical-align:super; margin-left:4px; }
.filtro:hover{ color:var(--text); }
.filtro.is-active{ color:var(--text); }
.filtro.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:var(--text); transform-origin:left; animation:fltin .4s var(--ease); }
@keyframes fltin{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }


/* ---------- "Por qué trabajar conmigo" (inicio) ---------------------- */
.porque__grid{ display:grid; gap:34px; grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .porque__grid{ grid-template-columns:1fr 1fr; gap:56px; } }
.porque__text .lead--big{ margin:0 0 30px; }
.porque__logo{ display:flex; align-items:center; gap:14px; margin:0 0 22px; color:var(--text); }
.porque__logo .drone{ width:52px; height:35px; flex:none; color:var(--text); }
.porque__logo .n{ font-size:1.35rem; font-weight:600; letter-spacing:-.01em; display:block; line-height:1; }
.porque__logo .t{ font-size:.6rem; font-style:italic; font-weight:300; letter-spacing:.26em; color:var(--ash); display:block; margin-top:5px; }
.porque__links{ display:flex; flex-wrap:wrap; gap:9px; }
.porque__links a{ font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:8px 15px; border:1px solid var(--border-2); border-radius:var(--r-sm); color:var(--text-2); transition:color .3s var(--ease), border-color .3s var(--ease); }
.porque__links a:hover{ color:var(--text); border-color:var(--text-2); }

.mosaico{ display:grid; gap:12px; grid-template-columns:1.12fr .88fr; grid-template-rows:1fr 1fr; aspect-ratio:4/3.4; }
.mosaico button{ overflow:hidden; border:0; padding:0; cursor:zoom-in; background:var(--bg-2); border-radius:var(--r-sm); position:relative; z-index:2; }
.mosaico button:nth-child(1){ grid-row:1 / span 2; }
.mosaico img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.mosaico button:hover img{ transform:scale(1.04); }
@media (max-width:560px){
  .mosaico{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; aspect-ratio:auto; }
  .mosaico button:nth-child(1){ grid-column:1 / span 2; grid-row:auto; aspect-ratio:16/10; }
  .mosaico button:nth-child(2),.mosaico button:nth-child(3){ aspect-ratio:3/4; }
}


/* ---------- Galería de fotografía (mosaico por columnas) --------------
   Nunca se recorta ninguna foto (alto natural). Móvil 2 columnas,
   escritorio 3. Las columnas las monta el JS (galeriaReparto): con
   column-count, Safari de iPhone solapaba las fotos. */
.masonry{ display:flex; align-items:flex-start; margin:0 -5px; }
@media (min-width:1000px){ .masonry{ margin:0 -8px; } }
.masonry__col{ flex:1 1 0; min-width:0; }
/* cada foto es un croquis (.sk-frame + .sm__img, igual que en "Quién soy").
   Las líneas se dibujan DENTRO de un margen interior de la propia foto: si
   sobresalieran, las columnas las partirían y dejarían trozos sueltos.
   El hueco entre fotos sale de sumar los márgenes (5+5 / 8+8 px). */
.masonry .masonry__item{ display:block; width:100%; position:relative; z-index:2;
  margin:0; padding:5px; --sk-over:5px; --sk-in:5px; }
@media (min-width:1000px){ .masonry .masonry__item{ padding:8px; --sk-over:8px; --sk-in:8px; } }


/* ---------- QUIÉN SOY (página) --------------------------------------- */
.split{ display:grid; gap:36px; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .split{ grid-template-columns:.8fr 1.2fr; gap:60px; } }
.split__photo{ position:relative; z-index:2; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--bg-2); aspect-ratio:3/4; }
.split__photo img{ width:100%; height:100%; object-fit:cover; }

.marquee{ position:relative; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:22px 0; margin-top:60px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track{ display:flex; gap:46px; width:max-content; animation:marquee 46s linear infinite; }
.marquee span{ font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash); white-space:nowrap; display:flex; align-items:center; gap:46px; }
.marquee span::after{ content:""; width:3px; height:3px; background:var(--border-2); border-radius:50%; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }


/* ---------- "Quién soy": el relato por capítulos ---------------------
   Texto en columna legible con sangría editorial; las fotos van en
   bloques con distinta disposición (izq/der/ancho/dúo/trío/tira/collage).
   Ninguna foto se recorta: todas conservan su proporción. */
.sm{ padding-top:calc(var(--nav-h) + 56px); --sm-ind:clamp(0px, 7vw, 148px); }
.sm__titulo{ font-size:clamp(2.1rem,6.4vw,4.4rem); font-weight:300; letter-spacing:-.035em; line-height:1.02; max-width:13ch; margin:0 0 clamp(34px,5vw,64px); }


/* hilo vertical que une los capítulos y se va trazando con el scroll */
.sm__caps{ position:relative; }
.sm__hilo{ --hp:0; position:absolute; left:calc(var(--sm-ind) / 2 - .5px); top:22px; bottom:0; width:1px; background:var(--border); pointer-events:none; }
.sm__hilo span{ position:absolute; inset:0; background:var(--text-2); transform-origin:50% 0; transform:scaleY(var(--hp)); }

.sm__cap{ position:relative; margin:0 0 clamp(16px,2.4vw,32px); }
.sm__cab{ position:relative; display:flex; align-items:center; gap:18px; margin:0 0 14px; padding-left:var(--sm-ind); }

/* filas: texto junto a su foto (o dos párrafos a la vez), alternando lado.
   Cada fila trae su propio "desorden" desde el JS: proporción de columnas
   (--cols), alineación (--al), sangrías (--pt/--ml), desplazamiento y giro
   de las fotos (--tx/--rz) y hacia dónde se va una baraja suelta (--jc). */
.sm__filas{ margin-left:var(--sm-ind);
  --cols:minmax(0,1.05fr) minmax(0,.95fr); --al:center; --pt:0px; --ml:0px; --tx:0px; --rz:0deg; --jc:center; }
.sm__fila{ display:grid; grid-template-columns:var(--cols, minmax(0,1.05fr) minmax(0,.95fr)); gap:clamp(14px,2.6vw,40px);
  align-items:var(--al, center); margin:0 0 clamp(4px,1vw,12px); }
.sm__fila--inv > :first-child{ order:2; }
.sm__fila--sola{ grid-template-columns:minmax(0,1fr); }
.sm__fila > .sm__p{ margin:0 0 0 var(--ml,0); padding-top:var(--pt,0px); max-width:none; font-size:1rem; }
.sm__fila--sola > .sm__p{ max-width:62ch; }
.sm__fila > .sm__media{ margin-top:0; margin-bottom:0; translate:var(--tx,0px) 0; rotate:var(--rz,0deg); }
.sm__fila > .sm__deck{ margin:2px auto calc(34px + (var(--n) - 1) * (var(--n) - 1) * 1.4px); }
/* baraja sola en su fila: centrada sobre su cota, más grande y tirando a la derecha */
.sm__fila--sola > .sm__deck{ --max:300px; width:min(100%, 820px); margin-left:auto; margin-right:clamp(0px,3vw,40px); }
.sm__fila > .sm__media--centro, .sm__fila > .sm__media--sangre{ translate:none; rotate:none; }
/* filas con dispersa / cuadro: el texto a media altura de las fotos (sin
   huecos grandes) y, hasta 900 px, el texto encima y las fotos debajo */
.sm__fila.sm__fila--ancha{ align-items:center; }
@media (max-width:900px){
  .sm__fila--ancha{ grid-template-columns:minmax(0,1fr); }
  .sm__fila--ancha.sm__fila--inv > :first-child{ order:0; }
  .sm__fila--ancha > .sm__media{ max-width:640px; margin-left:auto; margin-right:auto; }
}
@media (min-width:901px){
  .sm__fila:not(.sm__fila--sola) > .sm__deck{ --ovo:-.3; }
}
@media (min-width:640px) and (max-width:900px){
  .sm__fila:not(.sm__fila--sola) > .sm__deck{ --max:150px; --ovo:-.42; }
  .sm__fila > .sm__p{ font-size:.95rem; line-height:1.62; }
}
@media (max-width:639px){
  .sm__fila, .sm__fila--inv{ grid-template-columns:minmax(0,1fr); gap:10px; margin-bottom:4px; }
  .sm__fila--inv > :first-child{ order:0; }
  .sm__fila > .sm__p{ margin-left:0; padding-top:0; }
  .sm__fila > .sm__media{ translate:none; }
  .sm__fila > .sm__deck{ margin-bottom:calc(28px + (var(--n) - 1) * (var(--n) - 1) * 1.2px); }
  .sm__fila--sola > .sm__deck{ margin-left:auto; margin-right:auto; }
}
.sm__h{ flex:0 1 auto; font-size:clamp(1.45rem,3.6vw,2.3rem); font-weight:300; letter-spacing:-.025em; line-height:1.12; color:var(--text); }
/* línea que sale del título del capítulo hacia la derecha */
.sm__cab::after{ content:""; flex:1 1 40px; min-width:40px; height:1px; background:var(--border-2);
  transform:scaleX(0); transform-origin:0 50%; transition:transform 2.2s var(--ease-deck) .7s; }
.sm__cab.is-in::after{ transform:scaleX(1); }
/* número de capítulo dentro de un círculo a mano (como los ejes de un plano) */
.sm__num{ position:absolute; left:calc(var(--sm-ind) / 2 - 21px); top:50%; margin-top:-21px; width:42px; height:42px;
  display:grid; place-items:center; background:var(--bg); border-radius:50%; z-index:2;
  font-size:.66rem; letter-spacing:.1em; color:var(--text-2); font-variant-numeric:tabular-nums; }
.sm__num svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sm__num path{ fill:none; stroke:var(--text); stroke-width:1; stroke-linecap:round; opacity:.85;
  stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-dashoffset 1.9s var(--ease-deck) .4s; }
.sm__cab.is-in .sm__num path{ stroke-dashoffset:0; }

.sm__p{ max-width:60ch; margin:0 0 14px var(--sm-ind); color:var(--text-2); font-size:1.05rem; line-height:1.7; }
/* negrita + cursiva, con un trazo que la subraya al aparecer */
.sm__p strong{ color:var(--text); font-weight:500; font-style:italic;
  background-image:linear-gradient(var(--text-2),var(--text-2)); background-repeat:no-repeat;
  background-position:0 96%; background-size:0% 1px; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-size 1.8s var(--ease-deck) .9s; }
.sm__p.is-in strong{ background-size:100% 1px; }
.sm__p em{ color:var(--text); font-style:italic; }
.sm__link{ color:var(--text); border-bottom:1px solid var(--border-2); padding-bottom:1px; transition:border-color .3s var(--ease); }
.sm__link:hover{ border-color:var(--text); }

/* ---- Foto = croquis: hoja en blanco → garabato que la descubre → color ---- */
.sm__img{ --kx:0deg; --ky:0deg; --ks:1; --gx:50%; --gy:50%;
  display:block; width:100%; padding:0; border:0; background:var(--bg-2); border-radius:var(--r-sm); overflow:hidden;
  cursor:zoom-in; position:relative; z-index:2; box-shadow:0 10px 26px rgba(0,0,0,.4);
  transform:perspective(900px) rotateX(var(--kx)) rotateY(var(--ky)) scale(var(--ks));
  transition:transform .7s var(--ease-deck), box-shadow .4s var(--ease); }
.sm__img img{ width:100%; height:auto; display:block; filter:grayscale(1) contrast(1.35) brightness(1.08);
  transition:filter 1.6s ease 1.1s, transform .9s var(--ease); }
.sm__img.is-drawn img{ filter:none; }
.sm__img:hover img{ transform:scale(1.02); }
/* la "hoja": tapa la foto y un garabato la va borrando de arriba abajo */
.sk-cover{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.sk-cover .sk-paper{ fill:var(--bg-2); }
/* la X de "aquí va una imagen", como en un plano, hasta que se dibuja */
.sk-cover .sk-x{ fill:none; stroke:var(--border-2); stroke-width:1; }
.sk-scrib{ fill:none; stroke:#000; stroke-width:22; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1 1; stroke-dashoffset:1; }
.sm__img.is-drawn .sk-scrib{ stroke-dashoffset:0; transition:stroke-dashoffset 1.5s cubic-bezier(.55,.1,.35,1); }
/* al dibujarse, la foto asoma (sube y crece un pelín); en las barajas cada
   carta da un saltito al caer en la mesa. Van con translate/scale sueltos,
   así no pisan el transform de la inclinación ni el del abanico. */
.sm__img.is-drawn{ animation:skAsoma .95s cubic-bezier(.2,.9,.3,1.15); }
.sm__deck .sm__img.is-drawn{ animation:skSalto .8s cubic-bezier(.3,.7,.3,1); }
.sm__disp-sat .sm__img.is-drawn{ animation:none; }
@keyframes skAsoma{ from{ translate:0 16px; scale:.96; } to{ translate:0 0; scale:1; } }
@keyframes skSalto{ 0%{ translate:0 0; } 32%{ translate:0 -24px; scale:1.03; } 64%{ translate:0 3px; scale:1; } 100%{ translate:0 0; } }
.sm__img.is-done .sk-cover{ display:none; }
/* brillo que sigue al ratón (inclinación 3D) */
.sm__img::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.32), transparent 58%);
  mix-blend-mode:soft-light; transition:opacity .4s var(--ease); }
.sm__img.is-tilt{ --ks:1.03; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .4s var(--ease) !important; }
.sm__img.is-tilt::after{ opacity:1; }

/* líneas de construcción: se trazan alrededor y se pasan de las esquinas */
.sk-frame{ position:relative; display:block; }
.sk-ln{ position:absolute; display:block; background:var(--text); opacity:.75; pointer-events:none; z-index:3;
  transition:transform 1.1s var(--ease-deck) var(--d,0s), opacity 1.6s ease calc(var(--d,0s) + 1.4s); }
/* --sk-over: cuánto se pasan las líneas de las esquinas.
   --sk-in: margen interior entre el marco y la foto (0 = las líneas sobresalen). */
.sk-frame{ --sk-over:16px; --sk-in:0px; }
.sk-ln--t{ --d:0s;  --rr:-.3deg; top:calc(var(--sk-in) - 1px); left:calc(var(--sk-in) - var(--sk-over)); right:calc(var(--sk-in) - var(--sk-over)); height:1px; transform-origin:0 50%;   transform:rotate(var(--rr)) scaleX(0); }
.sk-ln--r{ --d:.18s; --rr:.25deg; right:calc(var(--sk-in) - 1px); top:calc(var(--sk-in) - var(--sk-over)); bottom:calc(var(--sk-in) - var(--sk-over)); width:1px; transform-origin:50% 0;  transform:rotate(var(--rr)) scaleY(0); }
.sk-ln--b{ --d:.36s; --rr:.2deg;  bottom:calc(var(--sk-in) - 1px); left:calc(var(--sk-in) - var(--sk-over)); right:calc(var(--sk-in) - var(--sk-over)); height:1px; transform-origin:100% 50%; transform:rotate(var(--rr)) scaleX(0); }
.sk-ln--l{ --d:.54s; --rr:-.3deg; left:calc(var(--sk-in) - 1px); top:calc(var(--sk-in) - var(--sk-over)); bottom:calc(var(--sk-in) - var(--sk-over)); width:1px; transform-origin:50% 100%; transform:rotate(var(--rr)) scaleY(0); }
.sk-frame.is-drawn .sk-ln{ transform:rotate(var(--rr)); opacity:.26; }
.sk-frame.is-drawn:hover .sk-ln{ opacity:.7; transition-delay:0s; }

.sm__media{ margin:clamp(16px,2.5vw,32px) 0; }

/* capítulo 0: retrato + texto al lado */
.sm__intro{ display:grid; gap:clamp(26px,3.6vw,44px); grid-template-columns:1fr; align-items:center; margin:0 0 clamp(14px,2vw,26px); }
@media (min-width:640px){ .sm__intro{ grid-template-columns:minmax(0,clamp(220px,30vw,320px)) 1fr; } }
.sm__intro-foto{ width:100%; max-width:clamp(240px,42vw,320px); rotate:-1.2deg; }
.sm__p--intro{ margin-left:0; max-width:46ch; font-size:clamp(1.06rem,1.8vw,1.32rem); line-height:1.6; color:var(--text); }

/* una sola foto — pequeñas y con aire */
.sm__media--ancho{ max-width:clamp(340px,66vw,720px); margin-left:auto; margin-right:auto; }
.sm__media--izq{ max-width:clamp(260px,36vw,430px); margin-right:auto; }
.sm__media--der{ max-width:clamp(260px,36vw,430px); margin-left:auto; }
.sm__media--centro{ max-width:clamp(280px,44vw,500px); margin-left:auto; margin-right:auto; }
.sm__media--ancho, .sm__media--izq, .sm__media--der, .sm__media--centro{ width:100%; }

/* ---- Grupos = baraja en 3D --------------------------------------------
   Empiezan tumbadas sobre la mesa y muy solapadas; se dibujan una a una y
   se levantan en abanico con rebote. Debajo, una cota de arquitecto.
   Al pasar el ratón por una carta, sube y se inclina hacia el cursor. */
/* tamaño de cada carta: el grupo abierto ocupa ~92% del hueco disponible
   (los % se resuelven sobre el ancho de la baraja), con un tope (--max) */
.sm__deck{ --n:3; --max:210px; --ovo:-.24; --ovf:-.66;
  --cw:min(var(--max), calc(92% / (1 + (var(--n) - 1) * (1 + var(--ovo)))));
  position:relative; display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-end;
  gap:0; perspective:1100px; margin:clamp(34px,5vw,64px) auto clamp(48px,6vw,80px); }
.sm__deck .sm__img{ --i:0; --j:0;
  --c:calc(var(--i) - (var(--n) - 1) / 2);
  --drx:46deg; --dry:0deg; --drz:calc(var(--c) * 4deg + var(--j) * 3deg); --dz:calc(var(--i) * 3px); --dy:0px;
  flex:none; width:var(--cw); margin:0; transform-origin:50% 100%;
  transform:translate3d(0,var(--dy),var(--dz)) rotateY(var(--dry)) rotateZ(var(--drz)) rotateX(var(--drx)) rotateX(var(--kx)) rotateY(var(--ky)) scale(var(--ks));
  z-index:calc(20 - var(--c) * var(--c) * 2);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  transition:transform 1.35s cubic-bezier(.34,1.5,.5,1) calc(var(--i) * 110ms),
             margin-left 1.35s var(--ease-deck) calc(var(--i) * 110ms), box-shadow .4s var(--ease); }
.sm__deck .sm__img + .sm__img{ margin-left:calc(var(--cw) * var(--ovf)); }
.sm__deck.is-open{ --ovf:var(--ovo); }
.sm__deck.is-open .sm__img{ --drx:0deg; --dry:calc(var(--c) * -15deg); --drz:calc(var(--c) * 5deg + var(--j) * 2.4deg);
  --dz:calc(var(--c) * var(--c) * -22px); --dy:calc(var(--c) * var(--c) * 6px + var(--j) * 5px); }
/* ya abierta y quieta: responde rápido y sin el retardo escalonado de la apertura */
.sm__deck.is-settled .sm__img{ transition:transform .55s cubic-bezier(.2,.8,.2,1), margin-left .55s var(--ease-deck), box-shadow .4s var(--ease); }
.sm__deck.is-settled .sm__img:hover{ --dz:80px; --dy:-14px; --dry:0deg; --drz:0deg; z-index:40; box-shadow:0 30px 60px rgba(0,0,0,.65); }
/* cota de arquitecto: línea con marcas a 45° + rótulo escrito encima.
   Primero se traza la línea, luego el texto se "escribe" desde el centro. */
.sk-cota{ position:absolute; left:50%; bottom:-34px; height:11px; width:100%; transform:translateX(-50%); pointer-events:none; z-index:4; }
.sm__deck > .sk-cota{ width:calc(var(--cw) * (1 + (var(--n) - 1) * (1 + var(--ovo))));
  bottom:calc(-38px - (var(--n) - 1) * (var(--n) - 1) * 1.6px); }
.sk-cota::before{ content:""; position:absolute; inset:0; opacity:.8;
  background:
    linear-gradient(var(--ash),var(--ash)) center/100% 1px no-repeat,
    linear-gradient(135deg, transparent calc(50% - .7px), var(--text-2) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)) left center/11px 11px no-repeat,
    linear-gradient(135deg, transparent calc(50% - .7px), var(--text-2) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)) right center/11px 11px no-repeat;
  transform:scaleX(0); transition:transform 1.4s var(--ease-deck) .2s; }
.sk-cota span{ position:absolute; left:50%; bottom:100%; transform:translate(-50%,-2px); white-space:nowrap;
  font-size:.58rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--text-2);
  clip-path:inset(0 50% 0 50%); transition:clip-path 1.2s cubic-bezier(.6,.05,.3,1) 1.1s; }
.sm__deck.is-open > .sk-cota::before, .sk-frame.is-drawn > .sk-cota::before{ transform:scaleX(1); }
.sm__deck.is-open > .sk-cota span, .sk-frame.is-drawn > .sk-cota span{ clip-path:inset(0 -2% 0 -2%); }
.sk-frame--cota{ margin-bottom:36px; }

/* ---- Cuadro: rejilla 2×2 (fotos enteras, sin recortar) en un solo croquis ---- */
.sm__media--cuadro, .sm__media--dispersa{ width:100%; }
.sm__cuadro{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(5px,.7vw,9px); --sk-over:14px; }
.sm__cuadro .sm__img{ box-shadow:0 8px 22px rgba(0,0,0,.4); }

/* ---- Dispersa: la foto principal y, alrededor, copias sueltas como sobre la
   mesa de trabajo. La principal se dibuja; las demás caen una a una.
   Posiciones en % de un bloque de proporción fija: escalan igual en móvil.
   Huecos 2.º y 3.º pensados para fotos apaisadas; el resto, verticales. ---- */
.sm__disp{ position:relative; width:100%; aspect-ratio:5 / 4; }
.sm__disp-main{ position:absolute; left:30%; top:7%; width:40%; z-index:3; }
.sm__disp-sat{ --x:0%; --y:0%; --w:20%; --r:0deg; --fx:0px; --fy:0px; --z:2;
  position:absolute; left:var(--x); top:var(--y); width:var(--w); z-index:var(--z);
  opacity:0; transform:translate(var(--fx), var(--fy)) rotate(calc(var(--r) * 3)) scale(1.35);
  transition:transform 1s cubic-bezier(.3,1.35,.5,1), opacity .3s ease; }
.sm__disp-sat.is-in{ opacity:1; transform:rotate(var(--r)); }
.sm__disp.is-settled .sm__disp-sat{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.sm__disp.is-settled .sm__disp-sat:hover{ --z:8; transform:translateY(-8px) rotate(0deg) scale(1.06); }
.sm__disp-sat .sm__img{ box-shadow:0 14px 30px rgba(0,0,0,.55); }
/* el rótulo es más ancho que la foto: con fondo, se lee aunque pise una copia */
.sm__disp-main .sk-cota span{ background:var(--bg); padding:1px 7px; border-radius:2px; }
.sm__disp-sat:nth-child(2){ --x:12%; --y:3%;  --w:19%; --r:-7deg; --fx:70px;  --fy:50px; }
.sm__disp-sat:nth-child(3){ --x:0%;  --y:52%; --w:33%; --r:4deg;  --fx:60px;  --fy:-40px; }
.sm__disp-sat:nth-child(4){ --x:63%; --y:0%;  --w:30%; --r:6deg;  --fx:-60px; --fy:50px; --z:4; }
.sm__disp-sat:nth-child(5){ --x:80%; --y:31%; --w:18%; --r:-5deg; --fx:-80px; --fy:0px; }
.sm__disp-sat:nth-child(6){ --x:71%; --y:62%; --w:17%; --r:8deg;  --fx:-50px; --fy:-50px; }
@media (max-width:639px){
  /* más alto: las dos de abajo quedan por debajo del rótulo de la cota */
  .sm__disp{ aspect-ratio:1 / 1.25; }
  .sm__disp-main{ left:27%; top:8%; width:46%; }
  .sm__disp-sat:nth-child(2){ --x:2%;  --y:12%; --w:25%; }
  .sm__disp-sat:nth-child(3){ --x:2%;  --y:73%; --w:38%; }
  .sm__disp-sat:nth-child(4){ --x:60%; --y:0%;  --w:38%; }
  .sm__disp-sat:nth-child(5){ --x:76%; --y:30%; --w:23%; }
  .sm__disp-sat:nth-child(6){ --x:64%; --y:71%; --w:24%; }
}

/* ---- Sangre: foto de lado a lado de la pantalla (el JS ajusta ancho y margen) ---- */
.sm__media--sangre{ width:100%; max-width:none; }
.sm__media--sangre .sk-frame{ --sk-over:0px; }
.sm__media--sangre .sk-ln--l, .sm__media--sangre .sk-ln--r{ display:none; }
.sm__media--sangre .sm__img{ border-radius:0; }
.sm__media--sangre .sk-cota{ width:min(70%, 520px); }

/* cierre */
.sm__cierre{ font-size:clamp(1.35rem,3.4vw,2.1rem); font-weight:300; line-height:1.28; letter-spacing:-.025em; color:var(--text); max-width:20ch; margin:clamp(36px,5vw,64px) 0 0 var(--sm-ind); }
.sm__cta{ margin:clamp(40px,6vw,72px) 0 0 var(--sm-ind); border-top:1px solid var(--border); padding-top:clamp(30px,5vw,50px); max-width:60ch; }
.sm__cta p{ color:var(--text-2); font-size:1.05rem; line-height:1.7; margin:0 0 24px; }

@media (max-width:700px){
  .sm__p, .sm__cierre, .sm__cta, .sm__filas{ margin-left:0; }
  .sm__cab{ padding-left:0; }
  .sm__num{ position:relative; left:auto; top:auto; margin:0; flex:none; }
  .sm__hilo{ display:none; }
  /* en móvil las fotos sueltas, grandes y centradas (así su cota nunca se sale) */
  .sm__media--izq, .sm__media--der, .sm__media--centro{ max-width:88%; margin-left:auto; margin-right:auto; }
  .sm__media--ancho{ max-width:100%; }
  .sm__cap{ margin-bottom:14px; }
  .sm__cab{ margin-bottom:10px; }
}
@media (max-width:560px){
  .sm__deck{ --max:170px; --ovo:-.46; --ovf:-.7; }
}


/* ---------- MI TALLER: galería de equipo con efecto de profundidad ----
   3 por fila. --mx / --my (−0.5…0.5) los pone el JS según el ratón: la
   tarjeta se inclina y cada capa se desplaza a su profundidad. */
.taller{ padding-top:calc(var(--nav-h) + 60px); }
.taller__titulo{ font-size:clamp(2.1rem,6.4vw,4.4rem); font-weight:300; letter-spacing:-.035em; line-height:1.02; margin:0 0 18px; }
.taller__intro{ color:var(--text-2); max-width:52ch; margin:0 0 clamp(30px,4.5vw,54px); }
.taller__lista{ --wm:clamp(16px,4.5vw,96px); padding:0 var(--wm); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,40px); }
@media (max-width:1000px){ .taller__lista{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .taller__lista{ grid-template-columns:minmax(0,1fr); } }

.equipo__escena{ --mx:0; --my:0; position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-md); border:1px solid var(--border);
  background:radial-gradient(ellipse 65% 55% at 50% 62%, #1b1b1b, #101010 76%); z-index:2; container-type:inline-size;
  transform:perspective(900px) rotateX(calc(var(--my) * -14deg)) rotateY(calc(var(--mx) * 18deg));
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  transition:transform .7s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease); }
.equipo__escena.is-tilt{ border-color:var(--border-2); box-shadow:0 28px 60px rgba(0,0,0,.5);
  transition:transform .18s linear, border-color .4s var(--ease), box-shadow .5s var(--ease); }
.equipo__escena--giro.is-tilt{ transform:perspective(1100px) rotateX(calc(var(--my) * -5deg)) rotateY(calc(var(--mx) * 6deg)); }
.equipo__escena > *{ transition:transform .7s var(--ease), opacity .5s var(--ease); }
.equipo__escena.is-tilt > *{ transition:transform .18s linear, opacity .5s var(--ease); }

.equipo__n{ position:absolute; top:14px; left:16px; z-index:4; font-size:.6rem; letter-spacing:.22em; color:var(--ash); font-variant-numeric:tabular-nums; }
/* fondo: nombre gigante en contorno, se mueve al revés (está "detrás") */
.equipo__fondo{ position:absolute; left:50%; top:13%; white-space:nowrap; line-height:1; pointer-events:none;
  font-family:'Unbounded', var(--font); font-weight:800; font-size:clamp(40px,15cqw,150px); letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px rgba(237,237,237,.13);
  transform:translate(calc(-50% + var(--mx) * -30px), calc(var(--my) * -16px)); }
/* sombra de apoyo: se aleja hacia el lado contrario */
.equipo__sombra{ position:absolute; left:50%; bottom:7%; width:64%; height:11%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.65), transparent 70%); filter:blur(7px);
  transform:translate(calc(-50% + var(--mx) * -18px), calc(var(--my) * -6px));
  transition:transform .7s var(--ease), width .6s var(--ease), filter .6s var(--ease), opacity .6s var(--ease); }
/* el equipo: delante, se adelanta y crece un pelín al pasar el ratón */
.equipo__modelo{ position:absolute; inset:0; z-index:2; pointer-events:none;
  transform:translate(calc(var(--mx) * 22px), calc(var(--my) * 14px)) scale(1); }
.equipo__escena.is-tilt .equipo__modelo{ transform:translate(calc(var(--mx) * 22px), calc(var(--my) * 14px - 5px)) scale(1.06); }
.equipo__escena--giro .equipo__modelo{ transform:perspective(1000px) translate(calc(var(--mx) * 18px), calc(var(--my) * 10px)) rotateX(calc(var(--my) * -11deg)); transform-origin:50% 62%; }
.equipo__escena--giro.is-tilt .equipo__modelo{ transform:perspective(1000px) translate(calc(var(--mx) * 18px), calc(var(--my) * 8px - 5px)) rotateX(calc(var(--my) * -15deg)) scale(1.04); }
.equipo__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; user-select:none;
  transition:filter .6s var(--ease); }
.equipo__escena--giro{ cursor:ew-resize; touch-action:pan-y; }
.equipo__foto--vista{ opacity:0; transition:opacity .08s linear, filter .6s var(--ease); will-change:opacity; }
.equipo__foto--espejo{ transform:scaleX(-1); }
.equipo__foto--vista.is-visible{ opacity:1; }
.equipo__giro-ayuda{ position:absolute; z-index:4; right:16px; bottom:14px; pointer-events:none;
  color:var(--text-2); font-size:.51rem; letter-spacing:.1em; text-transform:uppercase; }
.equipo__giro-ayuda span{ display:none; }
.equipo__giro-ayuda span:first-child{ display:inline; }

/* ---- luz cenital de estudio: como una maqueta bajo un foco ----------- */
/* la luz que cae sobre el equipo (solo sobre él: su recorte es la máscara) */
.equipo__luz{ position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease) .12s;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  background:linear-gradient(to bottom, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 38%, rgba(255,255,255,0) 68%);
  mix-blend-mode:soft-light; }
/* cono de luz desde arriba, lámpara y charco de luz en el suelo */
.equipo__cenital{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:
    radial-gradient(ellipse 34% 9% at 50% 86%, rgba(255,255,255,.16), transparent 70%),
    conic-gradient(from 180deg at 50% -4%, transparent 0deg 156deg, rgba(255,255,255,.09) 166deg, rgba(255,255,255,.17) 180deg, rgba(255,255,255,.09) 194deg, transparent 204deg 360deg);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  transition:opacity .5s var(--ease); }
.equipo__lampara{ position:absolute; left:50%; top:-14px; width:38%; height:30px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.9), rgba(255,255,255,.18) 45%, transparent 72%); filter:blur(3px); }
.equipo__escena.is-luz .equipo__cenital{ opacity:1; animation:encender .55s steps(1) 1; }
.equipo__escena.is-luz .equipo__luz{ opacity:1; }
.equipo__escena.is-luz .equipo__foto{ filter:brightness(1.1) contrast(1.06); }
/* fuera del cono, la escena se apaga un poco */
.equipo__escena.is-luz{ background:radial-gradient(ellipse 50% 60% at 50% 55%, #1c1c1c, #070707 80%); }
.equipo__escena.is-luz .equipo__fondo{ opacity:.55; }
/* con la luz justo encima, la sombra se recoge y se oscurece bajo el equipo */
.equipo__escena.is-luz .equipo__sombra{ width:50%; filter:blur(4px); }
/* la lámpara "se enciende" con un pequeño parpadeo */
@keyframes encender{ 0%{ opacity:0 } 18%{ opacity:.8 } 30%{ opacity:.2 } 46%{ opacity:1 } 60%{ opacity:.6 } 72%{ opacity:1 } }
/* brillo que sigue al cursor */
.equipo__brillo{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; mix-blend-mode:soft-light;
  background:radial-gradient(circle at calc((var(--mx) + .5) * 100%) calc((var(--my) + .5) * 100%), rgba(255,255,255,.38), transparent 55%); }
.equipo__escena.is-tilt .equipo__brillo{ opacity:1; }

/* móvil (sin ratón): el equipo flota despacio */
@media (hover:none){
  .equipo__modelo{ animation:flotar 5.5s ease-in-out infinite; }
  .equipo:nth-child(2) .equipo__modelo{ animation-delay:-1.8s; }
  .equipo:nth-child(3) .equipo__modelo{ animation-delay:-3.6s; }
  .equipo__escena--giro .equipo__modelo{ animation:none; }
  .equipo__giro-ayuda span:first-child{ display:none; }
  .equipo__giro-ayuda span:last-child{ display:inline; }
}
@keyframes flotar{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

@media (prefers-reduced-motion:reduce){
  .equipo__foto--vista{ transition:none; }
}

.equipo__info{ padding:16px 4px 0; }
.equipo__marca{ display:block; font-size:.62rem; letter-spacing:.38em; text-transform:uppercase; color:var(--text-2); margin-bottom:7px; }
.equipo__nombre{ font-family:'Unbounded', var(--font); font-weight:800; font-size:clamp(1.15rem,1.9vw,1.6rem); letter-spacing:-.01em; line-height:1; color:var(--text); }
.equipo__datos{ margin:10px 0 0; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash); }
.equipo__tags{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.equipo__tags li{ font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--border-2); border-radius:999px; color:var(--text-2); }

/* ---------- CONTACTO -------------------------------------------------- */
.contacto{ padding-top:calc(var(--nav-h) + 64px); }
.contacto__title{ max-width:17ch; margin-bottom:36px; font-size:clamp(1.7rem,4.4vw,2.9rem); font-weight:300; line-height:1.16; letter-spacing:-.02em; }
.contacto__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:48px; }
.contacto__list{ display:grid; gap:2px; max-width:540px; }
.contacto__row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--border); transition:border-color .3s var(--ease); }
.contacto__row:hover{ border-color:var(--text-2); }
.contacto__k{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ash); }
.contacto__v{ font-size:.98rem; color:var(--text); }


/* ---------- FOOTER ---------------------------------------------------- */
.footer{ border-top:1px solid var(--border); background:var(--bg-3); padding:56px 0 40px; margin-top:40px; }
.footer__inner{ max-width:var(--max); margin:0 auto; padding:0 22px; display:flex; flex-direction:column; align-items:center; gap:26px; text-align:center; }
.footer__logo{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.footer__name{ font-size:1.25rem; font-weight:600; letter-spacing:-.01em; }
.footer__tag{ font-size:.6rem; font-style:italic; font-weight:300; letter-spacing:.26em; color:var(--ash); }
.footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; }
.footer__nav a{ font-size:.82rem; color:var(--text-2); transition:color .3s var(--ease); }
.footer__nav a:hover{ color:var(--text); }
.footer__meta{ font-size:.8rem; color:var(--ash); display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; }
.footer__meta a:hover{ color:var(--text); }
.footer__legal{ font-size:.72rem; color:var(--ash); margin:0; }


/* ---------- FAB ------------------------------------------------------- */
.fab{ position:fixed; right:16px; bottom:16px; z-index:180; width:50px; height:50px; display:flex; align-items:center; justify-content:center; background:var(--text); color:var(--bg); border-radius:50%; box-shadow:0 6px 22px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background .3s var(--ease); }
.fab.is-visible{ opacity:1; visibility:visible; transform:none; }
.fab:hover{ background:var(--text-hi); }
.fab svg{ width:25px; height:25px; }
@media (min-width:768px){ .fab{ right:26px; bottom:26px; width:54px; height:54px; } }


/* ---------- LIGHTBOX -------------------------------------------------- */
.lightbox{ position:fixed; inset:0; z-index:500; background:rgba(8,8,8,.97); display:flex; align-items:center; justify-content:center; padding:56px 12px; animation:lbIn .3s var(--ease); }
.lightbox[hidden]{ display:none; }
@keyframes lbIn{ from{opacity:0} to{opacity:1} }
.lightbox__stage{ max-width:1400px; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.lightbox__stage img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:var(--r-sm); animation:lbZoom .35s var(--ease); }
@keyframes lbZoom{ from{opacity:0;transform:scale(.97)} to{opacity:1;transform:none} }
.lightbox__stage .videobox{ width:100%; max-width:1200px; aspect-ratio:16/9; background:#000; border-radius:var(--r-sm); overflow:hidden; }
.lightbox__stage iframe{ width:100%; height:100%; border:0; }
.lightbox__close,.lightbox__nav{ position:absolute; background:rgba(12,12,12,.6); border:1px solid var(--border-2); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); transition:border-color .3s var(--ease), color .3s var(--ease); }
.lightbox__close:hover,.lightbox__nav:hover{ border-color:var(--text); }
.lightbox__close{ top:14px; right:14px; width:42px; height:42px; font-size:1.7rem; line-height:1; }
.lightbox__nav{ top:50%; transform:translateY(-50%); width:42px; height:60px; font-size:2rem; line-height:1; }
.lightbox__nav--prev{ left:10px; } .lightbox__nav--next{ right:10px; }
@media (min-width:768px){ .lightbox__nav{ width:50px; height:74px; } .lightbox__nav--prev{ left:22px; } .lightbox__nav--next{ right:22px; } }
.lightbox__caption{ position:absolute; bottom:16px; left:0; right:0; text-align:center; font-size:.78rem; color:var(--text-2); letter-spacing:.06em; padding:0 20px; }
body.is-locked{ overflow:hidden; }


/* ---------- Aviso pendiente ------------------------------------------ */
.nota{ border:1px solid var(--border-2); border-left:2px solid var(--text-2); border-radius:var(--r-sm); padding:16px 20px; background:var(--bg-2); color:var(--text-2); font-size:.86rem; margin:0 0 40px; }
.nota strong{ color:var(--text); font-weight:500; }


/* ---------- Reveals --------------------------------------------------- */
/* texto/cabeceras: ya visibles pero borrosas → nítidas */
.blurin{ opacity:.3; filter:blur(12px); }
.blurin.is-in{ opacity:1; filter:blur(0); transition:opacity 1.1s var(--ease), filter 1.2s var(--ease); }
/* fotos y vídeos: aparecen enfocándose, y SIEMPRE después del texto */
.blurin-media{ opacity:0; filter:blur(18px); }
.blurin-media.is-in{ opacity:1; filter:blur(0); transition:opacity 1.1s var(--ease), filter 1.4s var(--ease); }
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }

.err{ padding-top:calc(var(--nav-h) + 90px); }


/* ---------- Ajustes de móvil ----------------------------------------- */
@media (max-width:600px){
  /* frase del inicio: más grande y de lado a lado (que se parta en más líneas) */
  .hero__title{ font-size:clamp(1.5rem,6.6vw,2.1rem); line-height:1.32; max-width:none; }
  .hero__line{ white-space:normal; }
  /* ubicación, correo y whatsapp uno debajo del otro */
  .hero__contact{ flex-direction:column; align-items:flex-start; gap:13px; }
  /* ámbitos: de dos en dos, cada pareja centrada y con su guion justo en
     medio (FPV — Estabilizado, Cámara — Videoclips); Fotografía sola debajo.
     Los separadores pares hacen de salto de línea. */
  .tira{ padding:6px 22px 0; }
  .tira__track{ row-gap:6px; }
  .tira__item{ padding:6px 0; }
  /* a la izquierda, 14px menos el espaciado que el texto deja tras su última letra */
  .tira__sep{ width:16px; margin:0 14px 0 calc(14px - .18 * .78rem); }
  .tira__sep:nth-of-type(even){ flex-basis:100%; width:auto; height:0; margin:0; background:none; }
}


/* ---------- Cursor minimalista (solo ratón fino) --------------------- */
.cursor{
  position:fixed; top:0; left:0; z-index:10001;
  width:9px; height:9px; border-radius:50%;
  background:#fff; mix-blend-mode:difference;     /* siempre visible en b/n */
  pointer-events:none; transform:translate(-50%,-50%);
  transition:width .28s var(--ease), height .28s var(--ease), opacity .3s var(--ease);
  will-change:transform;
}
.cursor.is-hover{ width:48px; height:48px; }
.cursor.is-down{ width:30px; height:30px; }
.cursor.is-out{ opacity:0; }
@media (hover:hover) and (pointer:fine){
  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button,
  body.has-cursor [data-foto],
  body.has-cursor [data-video],
  body.has-cursor [data-mosaico]{ cursor:none; }
}


/* ---------- Menos movimiento ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal,.blurin,.blurin-media,.hero__line,.hero__contact{ opacity:1 !important; transform:none !important; filter:none !important; }
  .sk-cover{ display:none !important; } .sm__img img{ filter:none !important; }
  .sm__disp-sat{ opacity:1 !important; transform:rotate(var(--r)) !important; }
  .sk-ln{ transform:none !important; opacity:.26 !important; }
  .sm__num path{ stroke-dashoffset:0 !important; }
  .sm__p strong{ background-size:100% 1px !important; }
  .grain{ display:none; }
  .cursor{ display:none; }
}