/* ---------- tokens ---------- */
:root{
  --bg: #0b0b0b;
  --ink: #e9e9ee;
  --ink-dim: #bebec3;
  --accent: #7c6cf0;
  --accent-2: #f0b1e0;
  --accent-3: #6cd6f0;
  --line: rgba(255,255,255,0.08);
  --font-display: "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --nav-h: 96px;
  --max-w: 1100px;

  /* Máscara por defecto del rayo (antes de que mask.js calcule la real):
     sólido arriba, se difumina hacia abajo, para evitar un flash de barra completa. */
  --stem-mask: linear-gradient(180deg, black 0%, black 30%, transparent 70%);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }

/* ---------- background layers ---------- */
#bg-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.grain{
  display:none;
}
@media (prefers-reduced-motion: reduce){
  .grain{ animation: none; }
}

/* ---------- layout shell ---------- */
.page{
  position:relative; z-index:2;
  min-height:100%;
  display:flex; flex-direction:column;
}

.site-header{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding-top: 60px;
  min-height: var(--nav-h);
}
.stem{
  position:fixed; top:0px; left:50%; transform:translateX(-50%);
  width:3px; height:100vh;
  transition: left .38s cubic-bezier(.65,0,.35,1);
  z-index:1; pointer-events:none;
}
.stem-line{
  position:absolute; inset:0;
  width:100%; height:100%;
  background: var(--accent);
  -webkit-mask-image: var(--stem-mask);
          mask-image: var(--stem-mask);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  box-shadow: 0 0 8px 0px rgba(124, 108, 240, 0.25);
}
/* La flecha vive en .stem (no en .stem-line), así la máscara del rayo
   nunca la recorta y siempre se ve, sin importar el resto del degradado. */
.stem::before {
  content: '';
  position: fixed;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 20px;
  background-image: url('data:image/svg+xml;utf8,<svg width="29" height="24" viewBox="0 0 29 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 3V10.6918C0 11.526 0.347345 12.3225 0.958646 12.8902L12.0277 23.1686C13.1499 24.2106 14.8767 24.2402 16.0339 23.2373L27.9648 12.8972C28.6223 12.3274 29 11.5002 29 10.6301V3C29 1.34315 27.6569 0 26 0H3C1.34315 0 0 1.34315 0 3Z" fill="%237c6cf0"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 10px rgba(124, 108, 240, 0.6));
  z-index: 3;
  pointer-events: none;
}
.stem-dot{
  display:none;
}
.main-nav{
  display:flex; gap:44px;
  font-family: var(--font-display);
  font-weight:300; font-size:1.15rem;
  color: var(--ink-dim);
}
.nav-link{ position:relative; padding-bottom:4px; transition: color .25s ease; }
.nav-link:hover{ color: var(--ink); }
.nav-link.active{ color:#fff; font-weight:500; font-size:1.28rem; }
.lang-toggle{
  position:absolute; top:24px; right:32px;
  background:transparent; color:var(--ink-dim);
  border:1px dashed var(--line); border-radius:4px;
  padding:4px 10px; font-size:0.75rem; letter-spacing:0.05em;
  cursor:pointer; transition: color .2s ease, border-color .2s ease;
}
.lang-toggle:hover{ color:#fff; border-color: var(--accent); }

main#app{
  flex:1;
  width:100%; max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px 24px 120px;
}

.view{ animation: view-in .5s ease both; }
@keyframes view-in{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .view{ animation:none; }
}

.section-heading{
  font-family: var(--font-display); font-weight:300;
  font-size:1.6rem; text-align:center; margin: 0 0 48px;
  color:#fff;
}

/* ---------- home ---------- */
#view-home{ text-align:center; padding-top: 40px; }
.eyebrow{
  text-transform: uppercase; letter-spacing:0.25em; font-size:0.72rem;
  color: var(--accent-3); margin:0 0 18px;
}
.home-name{
  font-family: var(--font-display); font-weight:200;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  margin:0 0 14px; color:#fff;
}
.home-tagline{
  color: var(--ink-dim); font-size:1.05rem; max-width:480px;
  margin: 0 auto 34px;
   white-space: pre-line;
}

.cta-link{
  display:inline-block; padding:12px 28px; border-radius:999px;
  border:1px solid var(--accent); color:#fff; font-size:0.9rem;
  letter-spacing:0.03em; transition: background .25s ease, transform .2s ease;
}
.cta-link:hover{ background: rgba(124,108,240,0.15); transform: translateY(-2px); }

/* ---------- home showreel ---------- */
/* ---------- home showreel ---------- */

.home-reel{
    position:relative;
    width:100%;
    max-width:780px;
    margin:12px auto 40px;

    overflow:hidden;
    border-radius:18px;

    background:#000;
    border:1px solid var(--line);

    transition:.35s ease;
}

.home-reel:hover{
    transform:translateY(-3px);
    border-color:var(--accent);
}

.home-reel-video{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    background:#000;
}

/* Oculta controles hasta reproducir */

.home-reel video::-webkit-media-controls{
    opacity:0;
    transition:.2s;
}

.home-reel.playing video::-webkit-media-controls{
    opacity:1;
}

/* Overlay */

.reel-play{
    position:absolute;
    inset:0;

    display:grid;
    place-items:center;

    background:
        radial-gradient(circle, rgba(0,0,0,.08), rgba(0,0,0,.45));

    border:none;
    cursor:pointer;

    transition:.35s;
}

.reel-play svg{
    width:84px;
    height:84px;

    fill:white;
    opacity:.9;

    transition:.3s;
}

.reel-play:hover svg{
    transform:scale(1.12);
}

.home-reel.playing .reel-play{
    opacity:0;
    pointer-events:none;
}

.home-socials{ margin-top:80px; }
.socials-label{
  color: var(--ink-dim); font-size:0.78rem; text-transform:uppercase;
  letter-spacing:0.15em; margin-bottom:18px;
}
.social-list{ display:flex; justify-content:center; gap:22px; }
.social-list a{
  color: var(--ink-dim); display:inline-flex; padding:8px;
  border-radius:50%; transition: color .2s ease, background .2s ease;
}
.social-list a:hover{ color:#fff; background: rgba(255,255,255,0.06); }

/* ---------- about ---------- */
.about-grid{
  display:grid; grid-template-columns: 220px 1fr; gap: 48px;
  align-items:start; max-width: 700px; margin: 0 auto;
}
.about-photo img{
  border-radius:50%; aspect-ratio:1/1; object-fit:cover;
  filter: grayscale(15%);
  box-shadow: 0 0 40px -6px var(--accent);
}
.about-text p{ color: var(--ink-dim); line-height:1.75; margin:0 0 20px; }
.tools{ margin-top:48px; }
.tools h3{
  font-family: var(--font-display); font-weight:300; font-size:1.2rem;
  color:#fff; margin-bottom:18px; text-align:center;
}
.tool-list{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.tool-list li{
  border:4px dashed var(--line); border-radius:999px;
  padding:12px 12px; font-size:0.8rem; color: var(--ink-dim);
}

@media (max-width: 700px){
  .about-grid{ grid-template-columns: 1fr; justify-items:center; text-align:center; gap:28px; }
  .about-photo{ width:150px; margin:0 auto; }
  .about-text{ text-align:center; }
}

/* ---------- about: clients slider ---------- */
.clients-slider{ margin-top:56px; text-align:center; max-width: 420px; margin-left:auto; margin-right:auto; }
.clients-slider h3{
  font-family: var(--font-display); font-weight:300; font-size:1.2rem;
  color:#fff; margin-bottom:26px;
}
.slider-track-wrap{
  position:relative; display:flex; align-items:center;
  overflow:hidden; padding: 10px 46px;
}
.slider-track{
  display:flex; align-items:flex-start; gap:24px;
  transition: transform .4s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
.slider-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:96px; flex-shrink:0; cursor:pointer;
  opacity:.55; transform: scale(.82); transition: opacity .35s ease, transform .35s ease;
}
.slider-item.is-active{ opacity:1; transform: scale(1); }
.slider-avatar{
  width:72px; height:72px; border-radius:50%; overflow:hidden;
  background:#141414; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); transition: width .35s ease, height .35s ease;
}
.slider-item.is-active .slider-avatar{
  width:100px; height:100px;
  border: 2px solid transparent;
  background:
    linear-gradient(#141414,#141414) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3)) border-box;
  box-shadow: 0 0 10px -6px var(--accent);
}
.slider-avatar img{ width:100%; height:100%; object-fit:contain; }
.slider-name{
  font-size:0.78rem; color: var(--ink-dim); text-align:center;
  max-width:100px; line-height:1.3;
}
.slider-item.is-active .slider-name{ color:#fff; font-weight:500; }
.slider-subtitle{ font-size:0.68rem; color: var(--ink-dim); opacity:.75; }

.slider-arrow{
  position:absolute; top:44%; transform: translateY(-50%);
  background:none; border:none; color: var(--ink-dim);
  font-size:1.8rem; line-height:1; cursor:pointer; padding:8px; z-index:2;
  transition: color .2s ease;
}
.slider-arrow:hover{ color: var(--accent-3); }
.slider-prev{ left:0; }
.slider-next{ right:0; }

.slider-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.slider-dot{
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background: var(--line); cursor:pointer; transition: background .2s ease;
}
.slider-dot.is-active{ background: var(--accent); }

@media (max-width: 480px){
  .slider-track-wrap{ padding: 10px 34px; }
  .slider-item{ width:78px; }
  .slider-avatar{ width:60px; height:60px; }
  .slider-item.is-active .slider-avatar{ width:82px; height:82px; }
}

/* ---------- projects ---------- */
.accordion-item{ 
  position: relative;
  border-top: none;
}
.accordion-item::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  width: 100vw; height: 1px;
  background: var(--line);
  transform: translateX(-50%);
}
.accordion-item:last-child{ 
  border-bottom: none;
}
.accordion-item:last-child::after{
  content: '';
  position: absolute; bottom: 0; left: 50%;
  width: 100vw; height: 1px;
  background: var(--line);
  transform: translateX(-50%);
}
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:flex-end; gap:12px;
  background:none; border:none; color:#fff; cursor:pointer;
  font-family: var(--font-display); font-weight:300; font-size:1.1rem;
  padding: 18px 4px; text-align:left;
}
.chevron{ font-size:0.7rem; color: var(--accent-3); width:14px; display:inline-block; }
.accordion-panel{ padding: 6px 4px 28px 0; }
.accordion-panel:empty::before{
  content: attr(data-empty-text);
  display:block; color: var(--ink-dim); font-size:0.85rem;
}

.client-group{
  display:flex; align-items:flex-start; gap:18px;
  padding: 4px 0;
}
.client-group + .client-group{ border-top: 1px dashed var(--line); }

/* Encabezado plegable de cada cliente: arranca cerrado (aria-expanded
   false) y se abre/cierra con la flechita de la derecha. */
.client-toggle{
  flex: 0 1 180px; min-width:0;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:8px; background:none; border:none; color:inherit; text-align:left;
  cursor:pointer; padding: 12px 4px;
}
.client-info{
  flex: 1;                      /* ocupa todo el espacio disponible */
  display: flex;
  flex-direction: column;
  align-items: flex-start;       /* asegura alineación izquierda */
  gap: 5px;
  min-width: 0;
  text-align: left;
}
.client-name{
  margin:0; font-family: var(--font-display); font-weight:500;
  font-size:1.15rem; color: var(--accent);
}
.client-count{ color: var(--ink-dim); font-weight:300; font-size:0.95rem; }
.client-subtitle{ font-size:0.82rem; color: var(--ink-dim); }
.client-chevron{
  flex-shrink:0; font-size:0.95rem; line-height:1;
  color: var(--accent); transition: transform .25s ease;
}
.client-toggle[aria-expanded="true"] .client-chevron{ transform: rotate(180deg); }
.client-toggle:hover .client-name{ color:#fff; }

.client-thumbs{
  flex: 1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:10px;
  padding: 12px 0 30px;
}
.client-thumbs[hidden]{ display:none; }

/* Miniaturas horizontales y verticales van en filas separadas (las
   horizontales primero), con una línea corta y centrada entre ambas —
   nunca un separador que cruce todo el ancho de la página. */
.thumb-row{
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start;
}
.thumb-row:empty{ display:none; }
.thumb-divider{
  width: 100%; max-width: 100%;
  height: 1px; margin: 22px auto;
  background: var(--line);
}

@media (max-width: 700px){
  .client-group{ flex-direction: column; gap: 6px; }
  .client-toggle{ flex: 1 1 auto; width: 100%; }
  .client-thumbs{ width: 100%; padding-top: 0; }
  .thumb-row{ gap: 12px; justify-content: center; }
}

.project-thumb{
  position: relative;
  flex-shrink: 0;               /* que nunca se achique: si no cabe, salta de línea */
  height: 210px;               /* <- altura común para todas las miniaturas */
  aspect-ratio: var(--thumb-ratio, 16/9); /* el ancho sale de aquí, ya no lo fijamos */
  border-radius: 8px; overflow: hidden;
  background: #111; cursor: pointer; border: 1px solid var(--line);
}
.project-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.project-thumb:hover img{ transform: scale(1.05); }
.project-thumb video{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 700px){
  .project-thumb{
    flex: 1 1 160px;   /* crece/encoge para llenar el ancho de la fila */
    height: auto;      /* la altura ya no es fija: sale del aspect-ratio + ancho */
    max-width: 100%;
  }
}

/* Preview en hover (estilo YouTube): oculto hasta que empieza a reproducir. */
.thumb-preview{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.project-thumb.is-previewing .thumb-preview{ opacity:1; }
.project-thumb.is-previewing img{ opacity:0; }
.project-thumb.is-previewing .play-btn{ opacity:.55; }
.play-btn{
  position:absolute; inset:0; margin:auto; width:44px; height:44px;
  border-radius:50%; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; border:none; cursor:pointer;
}
.play-btn svg{ width:16px; height:16px; margin-left:2px; }

/* ---------- contact ---------- */
#view-contact{ max-width:480px; margin:0 auto; text-align:center; }
.contact-intro{ color: var(--ink-dim); margin-bottom:40px; }
.contact-block{ margin-bottom:28px; }
.contact-label{
  display:block; text-transform:uppercase; letter-spacing:0.15em;
  font-size:0.72rem; color: var(--accent-3); margin-bottom:8px;
}
.contact-value{ font-size:1.1rem; }
.contact-block .social-list{ margin-top:4px; }

/* separador entre el bloque de correo y el de redes */
.contact-divider{
  width: 100%; max-width: 220px;
  margin: 8px auto 32px;
  border: none;
  border-top: 1px solid var(--line);
}

/* íconos circulares "sólidos" (distintos a los ghost-icon de home) */
.social-list-solid{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.social-list-solid a,
.social-list-solid button{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background: var(--ink);
  color: var(--bg);
  border:none; padding:0; margin:0;
  font:inherit; cursor:pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.social-list-solid a:hover,
.social-list-solid button:hover{
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color:#fff;
  transform: translateY(-2px);
}

/* botón "copiar" (Discord): tooltip de confirmación al hacer clic */
.copy-trigger{ position:relative; }
.copy-trigger::after{
  content:'¡Copiado!';
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#000; color:#fff; font-size:0.68rem; white-space:nowrap;
  padding:5px 9px; border-radius:5px;
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.copy-trigger.copied::after{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* El ícono es una máscara: la forma viene del .svg suelto, el color lo
   pone `background-color: currentColor` (por eso hereda el color del
   <a>/<button> de arriba en vez de quedar fijo como pasaría con un <img>). */
.social-list-solid .social-icon{
  display:block; width:30px; height:30px;
  background-color: currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.icon-ig   .social-icon{ -webkit-mask-image:url('../assets/img/svg/ig.svg');   mask-image:url('../assets/img/svg/ig.svg');}
.icon-disc .social-icon{ -webkit-mask-image:url('../assets/img/svg/disc.svg'); mask-image:url('../assets/img/svg/disc.svg');}
.icon-yt   .social-icon{ -webkit-mask-image:url('../assets/img/svg/yt.svg');   mask-image:url('../assets/img/svg/yt.svg'); }
.icon-tik  .social-icon{ -webkit-mask-image:url('../assets/img/svg/tik.svg');  mask-image:url('../assets/img/svg/tik.svg'); }
.icon-x    .social-icon{ -webkit-mask-image:url('../assets/img/svg/x.svg');    mask-image:url('../assets/img/svg/x.svg'); }
.icon-fi   .social-icon{ -webkit-mask-image:url('../assets/img/svg/fi.svg');   mask-image:url('../assets/img/svg/fi.svg'); }

/* ---------- footer ---------- */
.site-footer{
  display:flex; flex-direction:column; align-items:left; 
  color: var(--ink-dim); font-size:0.6rem;
}
.logo-mark{ color: var(--ink-dim); }

/* ---------- focus visibility ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent-3); outline-offset:3px;
}

/* ---------- video overlay ---------- */
body.overlay-open{ overflow: hidden; }

.video-overlay{
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: 4vh 4vw;
}
.video-overlay.is-open{ display: flex; }

.video-overlay-backdrop{
  position: absolute; inset: 0;
  background: rgba(5,5,8,0.86);
  backdrop-filter: blur(3px);
}

/* El contenedor se ajusta al tamaño real del <video> (sin ancho fijo),
   así nunca sobran bordes/franjas negras alrededor. Mientras se cargan
   los metadatos (is-loading), toma un tamaño placeholder neutro para
   mostrar el loader, y solo se revela cuando ya se conoce el formato
   real (ver reveal() en main.js) — así nunca "salta" de horizontal a
   vertical después de mostrarse. */
.video-overlay-content{
  position: relative;
  z-index: 1;
  max-width: 96vw;
  max-height: 92vh;
  line-height: 0; /* evita el espacio fantasma bajo el <video> */
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 60px -10px var(--accent);
  animation: overlay-in .25s ease both;
  /* Anima el paso del tamaño placeholder (loader) al tamaño real del
     video, calculado y aplicado en px por main.js (ver reveal()). */
  transition: width .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1);
}
.video-overlay-content.is-loading{
  width: min(460px, 84vw);
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
}
.video-overlay-content.is-loading .video-overlay-player{ display: none; }

@keyframes overlay-in{
  from{ opacity:0; transform: scale(.97); }
  to{ opacity:1; transform: scale(1); }
}

.video-overlay-player{
  display: block;
  width: 100%;
  height: 100%;
  /* cover en vez de contain: así, mientras el contenedor pasa de la
     proporción del loader a la del video, se recorta un poco en vez de
     dejar ver bordes negros. El tamaño final (calculado en main.js) sí
     coincide exactamente con la proporción real del video, así que al
     terminar la animación no queda nada recortado. */
  object-fit: cover;
}

.video-overlay-close{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.video-overlay-close:hover{ background: rgba(124,108,240,0.6); }

/* ---- loader de puntos (mientras se conoce el formato del video) ---- */
.video-overlay-loader{
  display: none;
  gap: 9px;
}
.video-overlay-content.is-loading .video-overlay-loader{
  display: flex;
}
.video-overlay-loader span{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  animation: loader-bounce 1s ease-in-out infinite;
}
.video-overlay-loader span:nth-child(2){ animation-delay: .15s; background: var(--accent-2); }
.video-overlay-loader span:nth-child(3){ animation-delay: .3s; background: var(--accent-3); }
@keyframes loader-bounce{
  0%, 80%, 100% { transform: scale(.6); opacity:.45; }
  40% { transform: scale(1); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .video-overlay-content{ animation: none; }
  .video-overlay-loader span{ animation: none; opacity: .8; }
}