/* ---------------------------------------
   1350px — split layout (left CV / right masonry)
--------------------------------------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0b0b0b;
  --bg-deep: #050505;
  --line: #232323;
  --text: #f2f2f0;
  --muted: #9a9a95;

  /* Degradado de marca: violeta → rosa → naranja cálido.
     Se usa en detalles puntuales (stats, título de proyecto, botón "More")
     para dar un punto de color sin salirse del tono oscuro del resto. */
  --accent-gradient: linear-gradient(100deg, #8C7BFF 0%, #FF6FA5 50%, #FFB86C 100%);

  --font-body: 'Switzer', 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

html, body {
  height: 100%;
  background: radial-gradient(120% 140% at 15% 0%, var(--bg) 0%, var(--bg-deep) 100%);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden; /* el scroll vive dentro de cada panel */
}

body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
hr.rule { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }

/* -------------------- PROGRESS BAR -------------------- */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--line);
  z-index: 100;
}
.progress__fill {
  height: 100%;
  width: 0%;
  background: var(--text);
  transition: width 0.08s linear;
}

/* -------------------- LAYOUT -------------------- */
.layout {
  display: flex;
  height: 100vh;
  padding-top: 2px;
}

.panel {
  height: calc(100vh - 2px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.panel::-webkit-scrollbar { width: 6px; }
.panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }

.panel--left {
  width: 38%;
  min-width: 340px;
  padding: 3rem 3rem 5rem;
  border-right: 1px solid var(--line);
}

.panel--right {
  width: 62%;
  flex: 1;
  padding: 1.25rem;
}

/* -------------------- PROFILE HEADER -------------------- */
.profile {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 2rem;
}
.profile__avatar {
  width: 78px;
  height: 78px;
  border-radius: 16px;
  object-fit: cover;
  cursor: zoom-in;
}
.profile__name {
  font-size: 1.85rem;
  font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile__role { font-size: 1.05rem; color: var(--muted); }

/* -------------------- TEXT -------------------- */
.lede { font-size: 1.08rem; line-height: 1.6; margin-bottom: 1rem; color: var(--muted); }
.lede strong { color: var(--text); font-weight: 600; }
.lede--muted { color: var(--muted); }
.lede--white { color: #ffffff; }

.section-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; }
.section-label { font-size: 1.08rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.5rem; }
.section-label strong { color: var(--text); font-weight: 600; }

/* -------------------- STATUS / BUTTON -------------------- */
.status-row { margin: 1.25rem 0 1rem; }
.status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--muted); }
.status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #55c56a;
  box-shadow: 0 0 0 3px rgba(85, 197, 106, 0.15);
}

.btn {
  display: inline-block;
  background: var(--accent-gradient);
  color: #0b0b0b;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.6rem 1.4rem;
  border-radius: 100px;
  box-shadow: 0 0 0 0 rgba(255, 111, 165, 0);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.1) saturate(1.15);
  box-shadow: 0 10px 24px -6px rgba(255, 111, 165, 0.45);
}
.btn:active {
  transform: translateY(-1px) scale(0.98);
  filter: brightness(1.02);
  box-shadow: 0 4px 12px -4px rgba(255, 111, 165, 0.4);
}

/* -------------------- BUTTON ROW (Behance + social icons) -------------------- */
.button-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}

.social-icon__svg {
  display: block;
  width: 18px;
  height: 18px;
}
.social-icon__svg path,
.social-icon__svg circle {
  transition: fill 0.18s ease;
}
.social-icon:hover .social-icon__svg path,
.social-icon:hover .social-icon__svg circle {
  fill: #ffffff;
}

/* -------------------- LOGOS: scroll lateral infinito -------------------- */
.logos-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  width: max-content;
  animation: marquee 22s linear infinite;
}

.logos-track img {
  height: 34px;
  width: 100px;
  object-fit: contain;
  opacity: 0.55;
  flex-shrink: 0;
  filter: grayscale(1) brightness(1.4);
}

/* Meléndez y Scale75 son PNG con muy poco margen interno: a igual caja
   se ven más grandes/pesados que los SVG de al lado, así que se reducen
   un poco para quedar al mismo nivel visual que el resto. */
.logos-track img.logo-compact {
  height: 22px;
  width: 80px;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* la mitad = un set completo, ya que está duplicado */
}

/* -------------------- STATS -------------------- */
.stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 1.5rem;
}
.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat__num {
  font-size: 1.3rem;
  font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label { font-size: 0.84rem; color: var(--muted); }

/* -------------------- SKILLS -------------------- */
.skills-list { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; }
.skills-list li { display: flex; align-items: center; gap: 0.9rem; }
.skills-list strong { font-size: 1rem; display: block; }
.skills-list p { font-size: 0.87rem; color: var(--muted); margin-top: 0.1rem; }

.badge {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* -------------------- EXPERIENCE -------------------- */
.job { margin-bottom: 1.4rem; }
.job__meta { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.3rem; }
.job__meta span { color: var(--muted); font-weight: 400; margin: 0 0.15rem; }
.job__desc { font-size: 0.92rem; color: var(--muted); line-height: 1.55; }

/* -------------------- CONTACT -------------------- */
.email-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--text);
  padding-bottom: 2px;
}
.email-link--gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-bottom: 1px solid;
  border-image: var(--accent-gradient) 1;
  transition: filter 0.18s ease;
}
.email-link--gradient:hover { filter: brightness(1.1) saturate(1.15); }

.socials {
  display: flex;
  gap: 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.82rem;
}
.socials__link {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: filter 0.18s ease;
}
.socials__link:hover { filter: brightness(1.15) saturate(1.2); }
.copyright { margin-top: 2rem; font-size: 0.75rem; color: var(--muted); }

/* -------------------- CONTENT BLOCKS (título + galería, tipo Veny / SpaceMoon) -------------------- */
.content-block { margin-bottom: 0; }

.content-block__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.75rem 0;
}
.content-block:first-child .content-block__title { margin-top: 0; }

/* -------------------- MASONRY (pinterest-style, tamaño real de cada imagen) -------------------- */
.masonry {
  columns: 2;
  column-gap: 1rem;
}

.tile {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 1rem;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #141414;
  cursor: zoom-in;
}

.tile img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.4s ease, transform 0.4s ease;
}
.tile:hover img {
  filter: grayscale(0) contrast(1.05);
  transform: scale(1.02);
}

.tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.15rem;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 45%, transparent 75%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tile:hover .tile__overlay { opacity: 1; }

/* -------------------- TRANSICIÓN SUAVE ENTRE PÁGINAS -------------------- */
/* La regla crítica (html.page-transition / page-loaded / page-leaving) vive
   inline en el <head> de cada página para evitar el flash blanco mientras
   carga este archivo. Aquí solo queda como respaldo por si se abre este
   CSS de forma aislada. */
html.page-transition {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s cubic-bezier(.22,.61,.36,1), transform 0.4s cubic-bezier(.22,.61,.36,1);
}
html.page-transition.page-loaded { opacity: 1; transform: translateY(0); }
html.page-transition.page-leaving { opacity: 0; transform: translateY(-8px); }

/* -------------------- ENTRADA ESCALONADA (panel izquierdo: home y proyectos) -------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel--left > * {
  opacity: 0;
  animation: fadeInUp 0.5s ease forwards;
}
.panel--left > *:nth-child(1)  { animation-delay: 0.02s; }
.panel--left > *:nth-child(2)  { animation-delay: 0.06s; }
.panel--left > *:nth-child(3)  { animation-delay: 0.10s; }
.panel--left > *:nth-child(4)  { animation-delay: 0.14s; }
.panel--left > *:nth-child(5)  { animation-delay: 0.18s; }
.panel--left > *:nth-child(6)  { animation-delay: 0.22s; }
.panel--left > *:nth-child(7)  { animation-delay: 0.26s; }
.panel--left > *:nth-child(8)  { animation-delay: 0.30s; }
.panel--left > *:nth-child(9)  { animation-delay: 0.33s; }
.panel--left > *:nth-child(10) { animation-delay: 0.36s; }
.panel--left > *:nth-child(11) { animation-delay: 0.39s; }
.panel--left > *:nth-child(12) { animation-delay: 0.42s; }
.panel--left > *:nth-child(13) { animation-delay: 0.45s; }
.panel--left > *:nth-child(14) { animation-delay: 0.48s; }
.panel--left > *:nth-child(15) { animation-delay: 0.51s; }
.panel--left > *:nth-child(16) { animation-delay: 0.54s; }
.panel--left > *:nth-child(17) { animation-delay: 0.57s; }
.panel--left > *:nth-child(18) { animation-delay: 0.60s; }
.panel--left > *:nth-child(19) { animation-delay: 0.63s; }
.panel--left > *:nth-child(20) { animation-delay: 0.66s; }
.panel--left > *:nth-child(n+21) { animation-delay: 0.68s; }

/* Entrada del grid derecho en el home: un único fundido global, sin
   retraso por imagen — todas aparecen ya cargadas a la vez. */
.panel--right .masonry {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.panel--right .masonry.is-loaded {
  opacity: 1;
}

/* -------------------- FADE IN global al entrar en un proyecto -------------------- */
/* Un solo fundido para toda la galería una vez han cargado todas las
   imágenes — nada de animaciones escalonadas por imagen. */
#work {
  opacity: 0;
  transition: opacity 0.3s ease;
}
#work.is-loaded {
  opacity: 1;
}

.tile__title { font-size: 1.05rem; font-weight: 600; color: #fff; }
.tile__cat { font-size: 0.85rem; color: var(--muted); }

/* -------------------- LIGHTBOX -------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 6, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__img {
  max-width: min(90vw, 1000px);
  max-height: 75vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.lightbox__caption { font-size: 0.9rem; color: var(--muted); text-align: center; }

.lightbox__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid #fff;
  padding-bottom: 2px;
}

.lightbox__close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox__close:hover { background: var(--line); }

/* -------------------- PROJECT PAGE -------------------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 2rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.back-link:hover {
  color: var(--text);
  background: var(--line);
  border-color: var(--line);
}

.project-title {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.project-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 0.5rem;
}

.project-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1.1rem;
  margin: 2rem 0;
}
.project-meta__item { display: flex; flex-direction: column; gap: 0.25rem; }
.project-meta__label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.project-meta__value { font-size: 0.92rem; font-weight: 600; }

.subnav {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.subnav a { font-size: 0.85rem; color: var(--muted); }
.subnav a.is-active { color: var(--text); font-weight: 600; }
.subnav a:hover { color: var(--text); }

.project-intro {
  padding: 0.6rem 0 1.25rem;
}
.project-intro p:last-child {
  margin-bottom: 0;
}

/* project gallery: grid en orden de lectura (izq->der, arriba->abajo) */
.gallery {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.gallery-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.gallery .tile {
  margin-bottom: 0;
  cursor: zoom-in;
  background: linear-gradient(100deg, #141414 8%, #232323 22%, #141414 36%);
  background-size: 250% 100%;
  animation: tileShimmer 1.6s ease-in-out infinite;
  /* Mientras no hay imagen real, el tile no tiene alto propio y colapsa,
     amontonando todos los huecos arriba del todo -> el lazy load los ve
     a todos como "visibles" de golpe. Reservamos un alto aproximado con
     aspect-ratio hasta que carga, así cada tile ocupa su sitio real en
     la página desde el principio. */
  aspect-ratio: 3 / 4;
  /* El navegador se salta por completo el trabajo de estilo/pintado
     (incluida la animación de shimmer de arriba) de los tiles que están
     fuera de pantalla. En galerías con muchas imágenes (ej. Movie Posters
     Collection) esto es lo que más nota se hace en el scroll, porque sin
     esto todos los tiles sin cargar animan su shimmer a la vez, estén
     visibles o no. contain-intrinsic-size da una altura aproximada de
     respaldo para que el scrollbar no salte mientras el tile no se ha
     renderizado todavía. */
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
.gallery .tile.is-img-loaded {
  animation: none;
  background: #141414;
  aspect-ratio: auto; /* al cargar, pasa a la proporción real de la imagen */
}
.gallery .tile img {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gallery .tile img.is-loaded {
  opacity: 1;
}
@keyframes tileShimmer {
  0% { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}
/* a color siempre, solo zoom suave en hover (sin blanco y negro) */
.gallery .tile img { filter: none; }
.gallery .tile:hover img { filter: none; transform: scale(1.035); }
.gallery .tile__overlay { display: none; }

/* -------------------- RESPONSIVE -------------------- */

/* Tabs "About / Work" — SOLO en móvil. En PC y tablet no se generan
   visualmente (display:none fuera del media query de abajo). */
.mobile-tabs { display: none; }

@media (max-width: 900px) {
  html, body { overflow: auto; height: auto; }
  .layout { flex-direction: column; height: auto; padding-top: 2px; }
  .panel, .panel--left, .panel--right {
    height: auto;
    overflow: visible;
    width: 100%;
  }
  .panel--left { border-right: none; border-bottom: 1px solid var(--line); padding: 2rem 1.5rem 3rem; }
  .panel--right { padding: 1rem; }
  .progress { position: sticky; }
  .masonry { columns: 2; }

  .mobile-tabs {
    display: flex;
    gap: 0.4rem;
    position: sticky;
    top: 2px;
    z-index: 60;
    padding: 0.6rem;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--line);
  }
  .mobile-tab {
    flex: 1;
    padding: 0.6rem 0;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .mobile-tab.is-active {
    background: var(--accent-gradient);
    color: #0b0b0b;
  }
  .layout[data-mobile-view="left"] .panel--right { display: none; }
  .layout[data-mobile-view="right"] .panel--left { display: none; }
}

@media (max-width: 560px) {
  .masonry { columns: 1; }
  .stats { flex-wrap: wrap; gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}