/* Global base */
* { box-sizing: border-box; }
body::-webkit-scrollbar { width: 0; height: 0; }
body { scrollbar-width: none; margin: 0; font-family: 'Montserrat Alternates', system-ui, sans-serif; }
html { color-scheme: light dark; }
/* ===== THEME TOKENS ===== */
:root {
  /* base */
  --bg: #ffffff;
  --text: #0f172a;         /* gris muy oscuro (igual vibe "Work") */
  --muted: #667085;        /* copy secundaria */
  --card: #ffffff;
  --card-ink: #0f172a;

  /* UI / chrome */
  --panel-bg: rgba(255,255,255,0.67);
  --panel-ink: #6b7280;
  --shadow-sm: 0 4px 14px rgba(0,0,0,.08);
  --shadow-md: 0 10px 30px rgba(0,0,0,.10);

  /* overlays y efectos */
  --overlay-grad-dark: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 55%);
  --overlay-grad-light: linear-gradient(0deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%);

  /* bordes / fills claros */
  --stroke: rgba(15,23,42,.10);
  --fill-soft: rgba(15,23,42,.04);
}

/* Tema oscuro opcional: cambia sólo tokens (no toques componentes) */
:root[data-theme="dark"] {
  --bg: #0a0a0b;
  --text: #f1f5f9;
  --muted: #c2c6cf;
  --card: #0b0b0c;
  --card-ink: #f3f4f6;

  --panel-bg: rgba(217,217,217,0.67);
  --panel-ink: #7c7c7c;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.24);
  --shadow-md: 0 18px 50px rgba(0,0,0,.30);

  --overlay-grad-dark: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 55%);
  --overlay-grad-light: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 55%);

  --stroke: rgba(255,255,255,.12);
  --fill-soft: rgba(255,255,255,.06);
}
h1,h2,h3,h4,h5,h6 { font-weight: 700; margin: 0; color: var(--text); }
p { margin: 0; }
body { color: var(--text); background: var(--bg); }

/* Navigation */
.site-nav { position: fixed; top: 0; left: 0; right: 0; height: auto; display: flex; align-items: flex-start; justify-content: center; z-index: 2000; background: transparent; }
.nav-inner { width: 100%; max-width: 1200px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 24px 16px 0; }
.right-links { grid-column: 3; display: flex; justify-content: flex-end; }
.menu-bar { grid-column: 2; display:flex; align-items:center; justify-content: space-between; gap: 24px; height: 56px; padding: 0 24px; border-radius: 8px; background: var(--panel-bg); backdrop-filter: blur(7.55px); -webkit-backdrop-filter: blur(7.55px); box-shadow: var(--shadow-sm); min-width: 460px; margin: 0 auto; color: var(--panel-ink); }

/* Mobile: remove min-width constraint and set smaller min-width */
@media (max-width: 768px) {
  .menu-bar { 
    min-width: 150px; 
    gap: 16px; 
    padding: 0 16px; 
  }
}
.menu-logo { display:inline-flex; align-items:center; gap: 0; text-decoration:none; position: relative; }
.menu-logo img { height: 24px; display:block; }
.logo-mask { position:absolute; inset:0; width:100%; height:100%; max-width:24px; max-height:24px; opacity:0; pointer-events:none; }
.logo-mask.gradient { opacity:1; -webkit-mask: url(../assets/cursors/JS_GRIS.svg) no-repeat center / contain; mask: url(../assets/cursors/JS_GRIS.svg) no-repeat center / contain; background: linear-gradient(45deg, #bbb, #777); }

/* Menu toggle (hamburger → X) */
.menu-toggle { position: relative; width: 40px; height: 40px; cursor: pointer; color:#7c7c7c; display:inline-flex; align-items:center; justify-content:center; background: transparent; border: none; appearance: none; -webkit-appearance: none; border-radius: 10px; }
.menu-toggle input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; }
.menu-toggle .bars { margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 22px; height: 12px; }
.menu-toggle .bars span { position: absolute; display: block; width: 100%; height: 2px; background-color: currentColor; border-radius: 1px; transition: all .2s cubic-bezier(0.1, 0.82, 0.76, 0.965); }
.menu-toggle .bars span:first-of-type { top: 0; }
.menu-toggle .bars span:last-of-type { bottom: 0; }
.menu-overlay.open ~ * { pointer-events:none; }
.menu-toggle.open .bars span:first-of-type,
.menu-toggle input:checked + .bars span:first-of-type { transform: rotate(45deg); top: 5px; }
.menu-toggle.open .bars span:last-of-type,
.menu-toggle input:checked + .bars span:last-of-type { transform: rotate(-45deg); bottom: 5px; }
.menu-toggle:hover .bars span:first-of-type { width: 26px; }
.menu-toggle:hover .bars span:last-of-type { width: 12px; }
.menu-toggle.open:hover .bars span:first-of-type,
.menu-toggle.open:hover .bars span:last-of-type { width: 22px; }

/* Menu overlay */
.menu-overlay { position: fixed; inset: 0; display:block; background: transparent; opacity:0; pointer-events:none; visibility:hidden; transition: opacity .5s cubic-bezier(.16,1,.3,1); z-index:9999; }
.menu-overlay.open { opacity:1; pointer-events:auto; visibility:visible; }
.menu-panel { position: absolute; left: 50%; transform: translateX(-50%) translateY(-14px); opacity: 0.98; transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s cubic-bezier(.16,1,.3,1); background: rgba(217,217,217,0.67); backdrop-filter: blur(7.55px); -webkit-backdrop-filter: blur(7.55px); border-radius:8px; padding:19px 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); width: min(90vw, 460px); color:#7c7c7c; font-family: 'Montserrat Alternates', ui-sans-serif, system-ui; pointer-events:auto; }
.menu-overlay.open .menu-panel { transform: translateX(-50%) translateY(0); opacity: 1; }
.menu-links { display:flex; flex-direction:column; gap:24px; align-items:flex-end; }
.menu-links a { text-decoration: none; color: currentColor; font-size: clamp(32px, 8vw, 72px); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; border-radius: 12px; transition: transform .15s ease, background-color .15s ease, color .15s ease; align-self: stretch; text-align: right; }
.menu-links a:hover { transform: translateX(-6px); background: rgba(0,0,0,0.06); color: #5f5f5f; }

/* Work page specific utilities */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.gallery-track { will-change: transform; }

/* Border radius utilities */
.rounded-inherit { border-radius: inherit; }
.clip-rounded { clip-path: inset(0 round 1rem); } /* fallback extra para Safari */

/* Asegura clipping perfecto en todos los hijos/efectos */
.work-card {
  position: relative;
  border-radius: 1rem;     /* igual que rounded-2xl */
  overflow: hidden;
  isolation: isolate;      /* nuevo stacking context */
}

/* Todos los hijos copian el radio (imgs, overlays, etc.) */
.work-card > * { border-radius: inherit; }
.work-card > .absolute { overflow: hidden; } /* media wrapper */

/* Capa de hover sin JS, siempre clippeada */
.work-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
  /* usa un gradiente suave; cámbialo si quieres */
  background: linear-gradient(to top, rgba(0,0,0,.14), rgba(0,0,0,0));
}
.work-card:hover::after{ opacity:.8; }

/* Asegura radio + recorte del "bloque media" (top 60%) */
.work-card > .absolute.media-clip {
  /* solo esquinas superiores redondeadas */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;            /* imprescindible para el blur */
  isolation: isolate;          /* nuevo stacking para evitar sangrados */
}

/* Fix WebKit/iOS: el blur puede ignorar el border-radius sin máscara */
.work-card > .absolute.media-clip {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* La imagen y gradiente SOLO esquinas superiores redondeadas */
.work-card > .absolute.media-clip img,
.work-card > .absolute.media-clip > .absolute {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Work page main padding */
body[data-page="work"] main { padding-top: 56px; }

/* About page */
body[data-page="about"] { 
  padding-top: 56px; 
  background-image: url('../assets/Projects/JS/JS_Portrait.png'); 
  background-size: cover; 
  background-position: center center; 
  background-attachment: fixed; 
  color: #fff; 
  transition: background-image 0.5s ease-in-out;
}
body[data-page="about"] main { width: 50vw; max-width: 60ch; margin: 0 auto; padding: 24px; color: #fff; min-height: calc(100vh - 56px); display: flex; flex-direction: column; justify-content: center; text-align: left; }
body[data-page="about"] h1 { margin: 24px 0; letter-spacing: 0.2px; font-size: 3rem; color: #fff; }
body[data-page="about"] p { font-size: 1.35rem; line-height: 1.85; }
body[data-page="about"] .afterglow { height: 120vh; }
@media (max-width: 768px) { body[data-page="about"] main { width: 100vw; padding: 20px; } body[data-page="about"] .afterglow { height: 80vh; } }

/* AI Corner page */
body[data-page="ai"] { padding-top: 56px; background: var(--bg); }
body[data-page="ai"] main { min-height: calc(100vh - 56px); padding: 24px 24px 48px; }
body[data-page="ai"] .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; margin: 24px auto; max-width: 1200px; height: calc(100% - 48px); }
body[data-page="ai"] .card { grid-column: span 3; display: grid; grid-template-rows: 1fr auto; border-radius: 16px; background: var(--card); color: var(--card-ink); cursor: pointer; overflow: hidden; transition: transform .3s; }
body[data-page="ai"] .card.large { grid-column: span 6; }
body[data-page="ai"] .card:hover { transform: translateY(-4px) scale(1.01); }
body[data-page="ai"] .card-media { position: relative; height: 100%; }
body[data-page="ai"] .card-media img { width: 100%; height: 100%; object-fit: cover; }
body[data-page="ai"] .card-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6)); }
body[data-page="ai"] .card-body { padding: 14px 16px; }
body[data-page="ai"] .card-desc { margin: 0; font-size: 14px; color: var(--muted); }
body[data-page="ai"] .modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 2000; }
body[data-page="ai"] .modal-backdrop[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
body[data-page="ai"] .modal { width: min(820px, 90%); max-height: 90vh; background: var(--card); color: var(--card-ink); border-radius: 18px; overflow-y: auto; padding: 24px; transform: translateY(16px) scale(0.98); opacity: 0; transition: transform .3s, opacity .3s; position: relative; }
body[data-page="ai"] .modal-backdrop[aria-hidden="false"] .modal { transform: translateY(0) scale(1); opacity: 1; }
body[data-page="ai"] .modal h2 { margin-top: 0; }
body[data-page="ai"] .modal img { width: 100%; border-radius: 12px; margin-bottom: 16px; }
body[data-page="ai"] .modal-close { position: absolute; top: 16px; right: 16px; background: transparent; border: none; color: var(--card-ink); font-size: 28px; cursor: pointer; }

/* Liquido Hover page */
:root { --background-color: #ffffff; --liquid-color-1: rgba(0, 68, 255, 0.4); --liquid-color-2: rgba(0, 130, 255, 0.35); --liquid-color-3: rgba(0, 200, 255, 0.3); --outline-color: #000000; }
body[data-page="liquido"] { background: var(--background-color); display: flex; justify-content: center; align-items: center; height: 100vh; padding: 10vh 20vw; transition: background 0.5s ease; }
body[data-page="liquido"] .container { cursor: none; position: relative; display: inline-block; }
body[data-page="liquido"] svg { width: 100%; height: 100%; transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease; }
body[data-page="liquido"] .container:hover svg { transform: scale(1.03) rotate(-0.5deg); filter: drop-shadow(0 0 10px var(--outline-color)) drop-shadow(0 0 24px var(--outline-color)) drop-shadow(0 8px 24px rgba(0,0,0,0.12)); }
body[data-page="liquido"] .container::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; background: radial-gradient(circle, rgba(255,255,255,0.6), rgba(255,255,255,0)); border-radius: 9999px; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
body[data-page="liquido"] .container:active::after { animation: clickBurst 450ms ease-out forwards; }
@keyframes clickBurst { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; } 80% { opacity: 0.15; } 100% { transform: translate(-50%, -50%) scale(25); opacity: 0; } }
body[data-page="liquido"] .fill { transform-origin: center; mix-blend-mode: multiply; filter: url(#liquidFilterSmooth); transition: transform 0.2s ease-out; }
body[data-page="liquido"] .fill1 { fill: var(--liquid-color-1); opacity: 0.4; }
body[data-page="liquido"] .fill2 { fill: var(--liquid-color-2); opacity: 0.35; }
body[data-page="liquido"] .fill3 { fill: var(--liquid-color-3); opacity: 0.3; }
body[data-page="liquido"] .outline { fill: none; stroke: var(--outline-color); stroke-width: 4; pointer-events: none; transition: stroke 0.5s ease; }
body[data-page="liquido"] .mask-path { fill: white; }
body[data-page="liquido"] .wave-clip { animation: waveClip 4s infinite ease-in-out; transform-box: fill-box; transform-origin: bottom; }
@keyframes waveClip { 0% { transform: translateY(0); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0); } }
.cursor-rotating { animation: rotateCursor 1.2s linear infinite; }
@keyframes rotateCursor { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

#us-bg { position: fixed; inset: 0; height: 100vh; z-index: -1; pointer-events: none; }
.container { position: relative; z-index: 1; }

/* WORK: main con padding-top 16px y sin recortar */
body[data-page="work"] main {
  padding-top: 16px !important;   /* antes 56px */
  overflow: visible !important;   /* que no recorte las cards */
}

/* WORK: el wrapper del carrusel no debe imponer altura rígida ni recortar */
body[data-page="work"] main > section {
  height: auto !important;                            /* anula h-[calc(...)] de Tailwind */
  min-height: calc(100dvh - 16px) !important;         /* ocupar el alto útil real */
  padding-block: 16px;                                 /* aire para el scale en hover */
  overflow-x: hidden;                                  /* sin scroll lateral */
  overflow-y: visible;                                  /* NO recortar en vertical */
}

/* Por si el contenedor absoluto del carrusel hereda ocultación */
body[data-page="work"] #gallery {
  overflow: visible !important;
}

/* El enlace invisible que hace clic en toda la card de work */
.work-card { position: relative; }
.work-card__link { position: absolute; inset: 0; z-index: 50; }

/* Asegura z-index correcto de capas dentro de la card */
.work-card .hover-gradient { z-index: 10; }

/* ===== AI Corner (modo unificado por tokens) ===== */
body[data-page="ai"] {
  background: var(--bg);
  color: var(--text);
}

/* Canvas/grid */
body[data-page="ai"] main { /* respeta tus alturas/espaciados actuales */
  color: var(--text);
}
body[data-page="ai"] .grid { /* ya tenías esto en la página, aquí sólo color */
  color: var(--text);
}

/* Cards */
body[data-page="ai"] .card {
  background: var(--card);
  color: var(--card-ink);
}

/* Media (hover en light: menos "oscurecer", más "desaturar + blur") */
body[data-page="ai"] .card-media img {
  filter: saturate(1) contrast(1);
  transform: scale(1.02);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
body[data-page="ai"] .card:hover .card-media img {
  transform: scale(1.06);
  filter: blur(8px) brightness(.92) saturate(.9);
}

/* Gradiente de imagen base (ligero y claro) */
body[data-page="ai"] .card-gradient {
  background:
    radial-gradient(120% 120% at 50% 10%, rgba(0,0,0,0.06), rgba(0,0,0,0.0)),
    linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.55));
}

/* Overlay (ahora coherente con "Work": tipografía oscura) */
body[data-page="ai"] .card-overlay {
  color: var(--text);
}
/* Card titles - consistent across pages */
.card-title, 
body[data-page="ai"] .card-overlay h3,
body[data-page="ai"] .card-body h3 { 
  color: var(--text); 
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
body[data-page="ai"] .card-overlay p  { color: var(--muted); }

/* Degradado de legibilidad: en light es blanco → transparente */
body[data-page="ai"] .card-overlay::before {
  background: var(--overlay-grad-light);
}

/* En expandida, mantenemos legibilidad sin "oscurecer" de más */
body[data-page="ai"] .card.is-expanded .card-media img {
  filter: blur(8px) brightness(.98) saturate(.9);
}
body[data-page="ai"] .card.is-expanded:hover .card-media img {
  filter: blur(8px) brightness(.98) saturate(.9);
}

/* CTA del overlay en light */
body[data-page="ai"] .overlay-cta {
  border: 1px solid var(--stroke);
  background: var(--fill-soft);
  color: var(--text);
}
body[data-page="ai"] .overlay-cta:hover {
  transform: translateY(-1px);
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.18);
}

/* Iconos del overlay en light (ligeramente más oscuros) */
body[data-page="ai"] .card-overlay .icons svg {
  opacity: .9;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.12));
}