/* =================================================================
   [TU NOMBRE] — PORTFOLIO
   Paleta: negro/rojo, estética underground/cine.
   Todas las variables de marca están aquí arriba — cambia colores
   y tipografías desde este bloque sin tocar el resto del CSS.
   ================================================================= */

:root{
  --black: #0a0908;
  --black-2: #121110;
  --black-3: #1a1817;
  --red: #e0111b;
  --red-dim: #7a0d12;
  --off-white: #ede9e4;
  --grey: #8a8580;
  --line: rgba(237,233,228,0.12);

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --section-pad: clamp(2.6rem, 6vw, 5.5rem);
}

*,*::before,*::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

body{
  background: var(--black);
  color: var(--off-white);
  font-family: var(--font-body);
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; }

::selection{ background: var(--red); color: var(--black); }

/* Scrollbar (webkit) */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--black); }
::-webkit-scrollbar-thumb{ background: var(--red-dim); border: 2px solid var(--black); }

/* =================================================================
   GRANO / TEXTURA — capa fija encima de todo, mezcla sutil de ruido
   ================================================================= */
.grain-overlay{
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.8s steps(4) infinite;
}
@keyframes grain-shift{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(-2%,2%); }
  50%{ transform: translate(2%,-1%); }
  75%{ transform: translate(-1%,-2%); }
  100%{ transform: translate(0,0); }
}

/* =================================================================
   PRELOADER
   ================================================================= */
#preloader{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
#preloader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.leader-circle{
  width: clamp(90px, 12vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.leader-circle::before{
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border-top: 1px solid var(--red-dim);
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  animation: spin 1.2s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
#leader-number{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--off-white);
}
.leader-label{
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  color: var(--grey);
  text-transform: uppercase;
}

/* =================================================================
   CURSOR PERSONALIZADO (desktop)
   ================================================================= */
.cursor-dot, .cursor-ring{
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor-dot{
  width: 6px; height: 6px;
  background: var(--red);
}
.cursor-ring{
  width: 34px; height: 34px;
  border: 1px solid var(--off-white);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s var(--ease), opacity .25s;
}
.cursor-ring.is-active{
  width: 60px; height: 60px;
  border-color: var(--red);
}
@media (hover: none), (pointer: coarse){
  .cursor-dot, .cursor-ring{ display: none; }
}
@media (hover: hover) and (pointer: fine){
  *{ cursor: none !important; }
}

/* =================================================================
   HEADER / NAV
   ================================================================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem clamp(1.4rem, 5vw, 3.5rem);
  mix-blend-mode: difference;
}
.logo{
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--off-white);
  z-index: 501;
}
.logo-dot{ color: var(--red); }

.main-nav{
  display: flex;
  gap: clamp(1.2rem, 2.5vw, 2.6rem);
}
.nav-link{
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--off-white);
  position: relative;
  padding-bottom: 3px;
  display: inline-flex;
  gap: 0.4em;
}
.nav-index{ color: var(--red); font-size: 0.7rem; }
.nav-link::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--off-white);
  transition: width 0.3s var(--ease);
}
.nav-link:hover::after{ width: 100%; }

.burger{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 501;
}
.burger span{
  display: block;
  height: 2px;
  background: var(--off-white);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  .burger{ display: flex; }
  .main-nav{
    position: fixed;
    inset: 0;
    background: var(--black);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 2rem;
    gap: 1.6rem;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    mix-blend-mode: normal;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .nav-link{ font-size: 1.6rem; font-family: var(--font-display); text-transform: uppercase; }
  .site-header:has(.main-nav.is-open){ mix-blend-mode: normal; }
}

/* =================================================================
   HERO
   ================================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  overflow: hidden;
}
/* Foto real de fondo con viñeteado (nítida, oscurecida solo en los bordes)
   en vez de desenfoque pesado — foto de referencia por sustituir. */
.hero-photo{
  position: absolute;
  inset: -10%;
  z-index: -2;
  width: 120%;
  height: 120%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(0.35) brightness(0.45) contrast(1.15);
  animation: bg-drift 14s ease-in-out infinite alternate;
}
.hero-bg{
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(65% 55% at 50% 42%, transparent 30%, rgba(10,9,8,0.55) 78%, rgba(10,9,8,0.94) 100%),
    linear-gradient(180deg, rgba(10,9,8,0.15) 0%, rgba(10,9,8,0.55) 100%);
  animation: bg-drift 14s ease-in-out infinite alternate;
}
@keyframes bg-drift{
  0%{ transform: scale(1) translate(0,0); }
  100%{ transform: scale(1.08) translate(-1%, 1%); }
}

.sprocket{
  position: absolute;
  top: 0; bottom: 0;
  width: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  opacity: 0.5;
}
.sprocket-left{ left: clamp(6px, 2vw, 22px); }
.sprocket-right{ right: clamp(6px, 2vw, 22px); }
.sprocket::before, .sprocket::after{ content: ""; }
.sprocket{ background-image: none; }
.sprocket span{ display: none; }
.sprocket{
  background: repeating-linear-gradient(
    to bottom,
    var(--line) 0 12px,
    transparent 12px 34px
  );
}

.hero-content{ max-width: 900px; }
.hero-eyebrow{
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero-title{
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 7.5rem);
  line-height: 0.94;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
  letter-spacing: 0.01em;
}
.hero-title span{ display: block; }
.hero-subtitle{
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--grey);
  max-width: 560px;
}
.hero-subtitle-red{
  color: var(--red);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin: 0 auto;
  font-weight: 300;
}

.reveal-line{
  overflow: hidden;
  display: block;
}
.reveal-line > *{ display: block; }

.scroll-cue{
  position: absolute;
  bottom: clamp(1.4rem, 4vw, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--grey);
}
.scroll-cue-line{
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--red), transparent);
  animation: cue-pulse 1.8s ease-in-out infinite;
}
@keyframes cue-pulse{
  0%,100%{ transform: scaleY(0.6); opacity: 0.5; }
  50%{ transform: scaleY(1); opacity: 1; }
}

/* =================================================================
   MARQUEE — separador animado entre secciones
   ================================================================= */
.marquee{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--black-2);
  overflow: hidden;
  white-space: nowrap;
  padding: 0.9rem 0;
  transform: rotate(-1.2deg) scale(1.03);
}
.marquee-track{
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: marquee-scroll 22s linear infinite;
}
.marquee-reverse{ transform: rotate(1.2deg) scale(1.03); }
.marquee-reverse .marquee-track{
  color: var(--off-white);
  animation-direction: reverse;
  animation-duration: 26s;
}
.marquee-dot{
  color: var(--red);
  font-style: normal;
}
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =================================================================
   SECCIONES GENÉRICAS
   ================================================================= */
.section{
  padding: var(--section-pad) clamp(1.4rem, 6vw, 4rem);
  position: relative;
  scroll-margin-top: 80px;
}
.section-heading{
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(2.4rem, 6vw, 4rem);
}
.section-number{
  font-family: var(--font-display);
  color: var(--red-dim);
  font-size: clamp(1.4rem, 3vw, 2rem);
}
.section-heading h2, .contact-title{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Reveal on scroll (clase base — activada por JS con IntersectionObserver).
   Nota: no usar clip-path aquí — deja el elemento con área 0 y el
   IntersectionObserver nunca llega al threshold, así que nunca se revela. */
.reveal{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =================================================================
   SOBRE MÍ
   ================================================================= */
.about-grid{
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.portrait-frame{
  aspect-ratio: 4/5;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.portrait-frame::before{
  content: "";
  position: absolute;
  inset: 0;
  border: 10px solid var(--black);
  z-index: 2;
  pointer-events: none;
}
.portrait-placeholder{
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--black-3), var(--black-2));
  color: var(--grey);
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  font-size: 0.9rem;
}
.portrait-photo{
  width: 100%; height: 100%;
  object-fit: cover;
  /* Blanco y negro — el grano ya lo aporta la textura global de la web. */
  filter: grayscale(1) contrast(1.08) brightness(1.02);
}
.about-lead{
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 400;
  color: var(--off-white);
  margin-top: 0;
}
.about-text p{
  color: var(--grey);
  line-height: 1.7;
  font-weight: 300;
}
.about-facts{
  margin: 2.2rem 0 2.4rem;
  border-top: 1px solid var(--line);
}
.about-facts li{
  display: flex;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.about-facts li span{
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.btn-outline{
  display: inline-block;
  border: 1px solid var(--off-white);
  padding: 0.9rem 1.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-outline::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: translateX(-101%);
  transition: transform 0.35s var(--ease);
  z-index: -1;
}
.btn-outline:hover{ border-color: var(--red); }
.btn-outline:hover::before{ transform: translateX(0); }

@media (max-width: 760px){
  .about-grid{ grid-template-columns: 1fr; }
  .portrait-frame{ max-width: 280px; }
}

/* =================================================================
   TRABAJOS
   ================================================================= */
/* Índice de categorías — menú de capítulos tipo DVD/cine, rejilla 2x2.
   Navegación principal de "Trabajos": al pulsar una categoría se muestran
   solo sus .work-group (el resto queda oculto, nada vive fuera de su
   categoría) y se hace scroll hasta el contenido. No hay pestaña "Todos". */
.work-index{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  /* Poco margen aquí a propósito: por defecto ninguna categoría está
     abierta, así que este hueco no se rellena con nada y se nota si es
     grande — solo hace falta un respiro pequeño antes de la sección
     siguiente cuando no hay ninguna ficha desplegada. */
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
}
.index-tile{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: clamp(1rem, 2.5vw, 1.6rem);
  background: none;
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.6rem, 3vw, 2.6rem);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
}
/* Portada de la categoría — sustituye al barrido rojo sólido, misma
   animación (scaleX desde la izquierda). Debajo va un velo negro (sin
   teñir de rojo, para no pelear con fotos en blanco y negro) que
   garantiza que el texto siga siendo legible sea cual sea la foto.
   El rojo se reserva para el filo inferior, como acento puntual. */
.index-cover-frame{
  position: absolute; inset: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-color: var(--black-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  z-index: -2;
}
.index-tile:hover .index-cover-frame,
.index-tile.is-active .index-cover-frame{ transform: scaleX(1); }
.index-tile::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.32) 0%, rgba(10,9,8,0.85) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.index-tile::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease) 0.08s;
}
.index-tile:hover::before,
.index-tile.is-active::before,
.index-tile:hover::after,
.index-tile.is-active::after{ transform: scaleX(1); }

/* Fichas sin foto todavía (categorías sin contenido real conectado aún) —
   degradado negro/rojo en vez de una imagen, hasta que haya foto real. */
.index-tile--plain::before{
  background: linear-gradient(160deg, rgba(224,17,27,0.28) 0%, rgba(10,9,8,0.92) 100%);
}

.index-number{
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--red-dim);
  transition: color 0.35s;
}
.index-name{
  grid-column: 2; grid-row: 1;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--off-white);
  transition: color 0.35s;
}
.index-count{
  grid-column: 2; grid-row: 2;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  transition: color 0.35s;
}
.index-arrow{
  grid-row: 1 / 3;
  font-size: 1.5rem;
  color: var(--off-white);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.35s, transform 0.35s, color 0.35s;
}
/* Sobre la portada+velo el texto se queda claro (no negro) para que
   siga leyéndose bien encima de una foto en vez de un rojo sólido. */
.index-tile:hover .index-number,
.index-tile.is-active .index-number{ color: var(--off-white); }
.index-tile:hover .index-name,
.index-tile.is-active .index-name{ color: var(--off-white); }
.index-tile:hover .index-count,
.index-tile.is-active .index-count{ color: rgba(237,233,228,0.8); }
.index-tile:hover .index-arrow,
.index-tile.is-active .index-arrow{
  opacity: 1;
  transform: translateX(0);
  color: var(--off-white);
}

@media (max-width: 640px){
  .work-index{ grid-template-columns: 1fr; }
}

.work-groups{
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5rem);
  scroll-margin-top: 100px;
}
.work-group.is-hidden{ display: none; }

.group-header{
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.group-title{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: 0.01em;
}
.group-meta{
  color: var(--red);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.work-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
.work-card{
  cursor: pointer;
  transition: transform 0.5s;
}
.work-card.is-hidden{ display: none; }
.work-thumb{
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--black-2);
  border: 1px solid var(--line);
}
.thumb-placeholder{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--black-3) 0%, var(--black-2) 60%, var(--red-dim) 160%);
  color: var(--grey);
  font-family: var(--font-display);
  letter-spacing: 0.2em;
  font-size: 0.85rem;
}
/* Sello de año sobre la miniatura — para piezas antiguas que se quiere
   que se noten como tal a simple vista, sin tener que leer el texto. */
.work-year-badge{
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  z-index: 1;
  background: var(--black);
  border: 1px solid var(--red-dim);
  color: var(--off-white);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
}
.work-play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.85);
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1px solid var(--off-white);
  display: flex; align-items: center; justify-content: center;
  color: var(--off-white);
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.35s, border-color .35s;
}
.work-card:hover .work-play{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
  background: var(--red);
  border-color: var(--red);
  color: var(--black);
}
.work-card:hover .thumb-placeholder{ filter: brightness(0.6); }
.thumb-placeholder{ transition: filter 0.35s; }

.work-thumb img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 0.35s, transform 0.6s var(--ease);
}
.work-card:hover .work-thumb img{
  filter: brightness(0.6);
  transform: scale(1.04);
}

.work-info{ padding: 1rem 0.1rem 0; }
.work-info h4{
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}
.work-info p{
  margin: 0;
  color: var(--grey);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.work-note{
  margin-top: 3rem;
  color: var(--grey);
  font-size: 0.9rem;
}
.work-note a{ color: var(--red); border-bottom: 1px solid var(--red-dim); }

/* Modal de vídeo */
.video-modal{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.video-modal.is-open{ opacity: 1; visibility: visible; }
.video-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(10,9,8,0.92);
  backdrop-filter: blur(4px);
}
.video-modal-inner{
  position: relative;
  width: min(90vw, 1100px);
  z-index: 1;
}
.video-modal-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--black-2);
  border: 1px solid var(--line);
}
.video-modal-frame iframe,
.video-modal-frame video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: var(--black);
  object-fit: contain;
}
/* Reels de RRSS (Instagram) suelen ser verticales, pero alguno puede venir
   en horizontal — en vez de forzar un aspect-ratio fijo (que estiraría o
   dejaría hueco de más según el caso), le damos una caja alta y estrecha;
   Instagram centra su propio contenido dentro sea cual sea su orientación. */
.video-modal-frame.is-vertical{
  aspect-ratio: auto;
  width: min(90vw, 400px);
  height: min(85vh, 711px);
  margin: 0 auto;
}
.video-modal-close{
  position: absolute;
  top: -46px; right: 0;
  background: none;
  border: 1px solid var(--line);
  color: var(--off-white);
  width: 38px; height: 38px;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}
.video-modal-close:hover{ border-color: var(--red); color: var(--red); }

/* =================================================================
   EXPERIENCIA
   ================================================================= */
.timeline{
  border-top: 1px solid var(--line);
}
.timeline-item{
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line);
}
.timeline-year{
  font-family: var(--font-display);
  color: var(--red);
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.timeline-body h3{
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
}
.timeline-place{
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  margin: 0 0 0.7rem;
}
.timeline-body p:last-child{
  color: var(--grey);
  font-weight: 300;
  line-height: 1.6;
  max-width: 640px;
}
@media (max-width: 640px){
  .timeline-item{ grid-template-columns: 1fr; gap: 0.5rem; }
}

.skills{ margin-top: clamp(3rem, 6vw, 5rem); }
.skills-title{
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: var(--grey);
  margin-bottom: 1.2rem;
}
.skills-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.skills-tags span{
  border: 1px solid var(--line);
  padding: 0.55rem 1.1rem;
  font-size: 0.8rem;
  color: var(--off-white);
}
.skills + .skills{ margin-top: clamp(1.6rem, 3vw, 2.2rem); }

.skills-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 760px){
  .skills-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .skills-grid{ grid-template-columns: 1fr; }
}
.skill-item{
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--black);
  padding: 1rem 1.2rem;
}
.skill-name{
  font-size: 0.9rem;
  color: var(--off-white);
  font-weight: 500;
}
.skill-level{
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}

/* =================================================================
   CONTACTO
   ================================================================= */
.contact{
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.contact::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 100%, rgba(224,17,27,0.16), transparent 70%);
  z-index: -1;
}
.contact-inner{ max-width: 900px; }
.contact-title{ margin: 1rem 0 1.6rem; }
.text-outline{
  -webkit-text-stroke: 1.5px var(--red);
  color: transparent;
}
/* Estilo "tag" de grafitero de verdad — tipografía de rotulador (no la
   condensada del resto de la web), rojo sólido, inclinada, con una sombra
   duplicada detrás simulando el trazo de spray. Sigue siendo legible. */
.text-tag{
  display: inline-block;
  font-family: 'Permanent Marker', cursive;
  -webkit-text-stroke: 0;
  color: var(--red);
  text-transform: none;
  font-size: 1.15em;
  transform: rotate(-4deg);
  letter-spacing: 0;
  text-shadow:
    2px 2px 0 rgba(10,9,8,0.6),
    4px 4px 0 rgba(224,17,27,0.25);
}
.contact-lead{
  color: var(--grey);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 300;
  max-width: 520px;
  margin-bottom: 2.2rem;
}
.contact-email{
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 3rem);
  text-transform: lowercase;
  border-bottom: 2px solid var(--red);
  padding-bottom: 0.2rem;
  margin-bottom: 2.6rem;
  word-break: break-all;
  transition: color 0.25s, border-color 0.25s;
}
.contact-email:hover{ color: var(--red); }

.contact-social{
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 2rem;
}
.contact-social a{
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey);
  position: relative;
  padding-bottom: 4px;
}
.contact-social a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.contact-social a:hover{ color: var(--off-white); }
.contact-social a:hover::after{ transform: scaleX(1); }

.contact-location{
  color: var(--grey);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.contact-note{
  margin-top: 0.8rem;
  padding: 0.5rem 0.8rem;
  border: 1px dashed var(--line);
  display: inline-block;
  color: var(--grey);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

/* =================================================================
   DJ — faceta aparte: fondo invertido (rojo sólido) para que se note
   claramente que es "otra cosa", con una tarjeta de press kit que se
   voltea en 3D en vez de un simple enlace de descarga.
   ================================================================= */
.dj-section{
  background: var(--red);
  color: var(--black);
  overflow: hidden;
  position: relative;
}
.dj-section .section-number{ color: rgba(10,9,8,0.5); }
.dj-section .section-heading h2{ color: var(--black); }
.dj-section .section-heading,
.dj-inner{ position: relative; z-index: 1; }
.dj-inner{ display: flex; flex-direction: column; align-items: flex-start; }
.dj-lead{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  color: var(--black);
  margin: 0 0 1rem;
}
.dj-socials{
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.dj-instagram{
  font-size: 1rem;
  font-weight: 600;
  color: var(--black);
  border-bottom: 2px solid var(--black);
  padding-bottom: 0.2rem;
  transition: opacity 0.25s;
}
.dj-instagram:hover{ opacity: 0.6; }

/* Grafismo decorativo — un vinilo girando lentamente de fondo, para que
   el rojo plano no se quede tan soso. Puramente CSS, sin imagen. */
.dj-vinyl{
  position: absolute;
  top: 50%;
  right: -14%;
  width: min(60vw, 560px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      rgba(10,9,8,0.4) 0px, rgba(10,9,8,0.4) 2px,
      transparent 2px, transparent 10px);
  box-shadow: 0 0 0 2px rgba(10,9,8,0.15);
  opacity: 0.55;
  z-index: 0;
  animation: vinyl-spin 25s linear infinite;
  pointer-events: none;
}
.dj-vinyl::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16%; height: 16%;
  background: var(--black);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--red);
}
@keyframes vinyl-spin{
  to{ transform: translateY(-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .dj-vinyl{ animation: none; }
}

.dj-media{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  width: 100%;
}

.presskit-flip{
  perspective: 1200px;
  width: min(100%, 340px);
  height: 210px;
  cursor: pointer;
  outline: none;
}
.presskit-flip-inner{
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.6s var(--ease);
  transform-style: preserve-3d;
}
.presskit-flip.is-open .presskit-flip-inner{ transform: rotateY(180deg); }
.presskit-face{
  position: absolute; inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  border: 2px solid var(--black);
  background: var(--black);
  text-align: center;
  overflow: hidden;
}
.presskit-back{ transform: rotateY(180deg); padding: 1.5rem; }
.presskit-front{ padding: 0; }
.presskit-cover-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.presskit-hint{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(0deg, rgba(10,9,8,0.85), transparent);
  font-size: 0.7rem;
  color: var(--off-white);
  letter-spacing: 0.04em;
}
.presskit-title{
  font-family: var(--font-display);
  font-size: 1.8rem;
  text-transform: uppercase;
  color: var(--red);
}
.presskit-sub{
  font-size: 0.75rem;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.presskit-link{
  color: var(--off-white);
  border-bottom: 1px solid var(--red);
  font-size: 0.95rem;
  padding-bottom: 0.2rem;
}
.presskit-badge{
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 1;
  padding: 0.3rem 0.7rem;
  background: var(--red);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dj-carousel-label{
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(10,9,8,0.65);
  margin: 0 0 0.6rem;
}

/* Carrusel de vídeos — pensado para deslizar en móvil (scroll-snap
   nativo, sin JS). Ya cabe 1 vídeo real + huecos de plantilla; solo
   hay que duplicar el bloque en el HTML según se vayan añadiendo más. */
.dj-carousel{
  display: flex;
  gap: 1rem;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.6rem;
  scrollbar-width: none; /* Firefox */
}
.dj-carousel::-webkit-scrollbar{ display: none; } /* Chrome/Safari/Edge */
/* El que se mueve solo NO lleva scroll-snap: el snap "devolvía" la
   posición justo después de cada micro-paso del auto-scroll. */
.dj-carousel--auto{ scroll-snap-type: none; }
.dj-carousel--auto .dj-video-card{ scroll-snap-align: none; }

/* Miniatura del vídeo de Instagram — abre en el modal de vídeo general
   de la web (igual que el resto de reels), no incrustado directo
   (Instagram bloquea el embed persistente en algunos posts). */
.dj-video-card{
  flex: 0 0 auto;
  width: min(78vw, 260px);
  scroll-snap-align: start;
  transition: transform 0.3s var(--ease);
  transform-origin: center;
}
.dj-video-card:hover{
  transform: scale(1.06);
  z-index: 2;
}
.dj-video-card:hover .work-thumb{
  box-shadow: 0 0 0 2px var(--black);
}
/* Sets de YouTube — formato horizontal, tarjeta más ancha. */
.dj-video-card--wide{
  width: min(85vw, 360px);
}
.dj-video-card .work-info h4,
.dj-video-card .work-info p{
  color: var(--black);
}
.dj-video-card .work-info p{ color: rgba(10,9,8,0.65); }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2rem clamp(1.4rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
  color: var(--grey);
  font-size: 0.78rem;
}
.back-to-top{
  color: var(--off-white);
  transition: color 0.25s;
}
.back-to-top:hover{ color: var(--red); }