/* =========================================================
   Jaramiyo — jaramiyo.com
   Paleta: cacao oscuro + rosa palo · Concepto: navegador de servidores
   ========================================================= */

:root{
  --ink:        #1B1216;
  --surface:    #271B20;
  --surface-2:  #34252B;
  --line:       #45333A;
  --rose:       #EDB2C2;
  --rose-hot:   #D9738F;
  --lilac:      #A392C0;
  --cream:      #F6EAE6;
  --muted:      #BFA3A8;
  --online:     #8FD9A8;
  --dev:        #E8C88F;

  --on-rose:        #2A1218;   /* texto sobre rosa */
  --piece-bg:       #160E12;   /* fondo de capturas 3D */
  --black:          #000;      /* letterbox de vídeo */
  --topbar-bg:        rgba(27,18,22,.86);
  --topbar-bg-scroll: rgba(27,18,22,.94);
  --scrim:          rgba(10,6,8,.9);      /* overlay lightbox */
  --console-bg:     rgba(20,12,16,.97);
  --online-glow:    rgba(143,217,168,.6);
  --rose-glow:      rgba(237,178,194,.30);
  --rose-glow-2:    rgba(237,178,194,.4);
  --blob-rose-hot:  rgba(217,115,143,.5);
  --blob-lilac:     rgba(163,146,192,.45);
  --shadow-soft:    rgba(0,0,0,.5);
  --shadow-strong:  rgba(0,0,0,.55);

  --display: "Baloo 2", system-ui, sans-serif;
  --body:    "Karla", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --radius: 18px;
  --shadow: 4px 4px 0 var(--line);
  --wrap: 1140px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:84px; background:var(--ink); }

body{
  margin:0;
  position:relative; z-index:0;   /* contexto de apilado: pétalos detrás (z-1), grano encima */
  background:transparent;
  color:var(--cream);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Navegación entre páginas: la gestiona el ÚNICO sistema STAGE (main.js + .sweep), no @view-transition. */

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--rose); text-decoration:none; }
a:hover{ color:var(--rose-hot); }

:focus-visible{
  outline:3px solid var(--rose);
  outline-offset:3px;
  border-radius:6px;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--rose); color:var(--ink); padding:10px 16px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

.wrap{ width:min(var(--wrap), calc(100% - 48px)); margin-inline:auto; }

/* ---------- Tipografía ---------- */
h1,h2,h3{ font-family:var(--display); line-height:1.15; margin:0 0 .5em; }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:700; }
h3{ font-size:1.2rem; font-weight:700; }

.eyebrow{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lilac);
  margin:0 0 .6rem;
}
.eyebrow--gap{ margin-top:1.9rem; }   /* separa el bloque de Partners de los contactos */

.section__title{ margin-bottom:.3em; }
.section__sub{ color:var(--muted); margin:0 0 2.4rem; max-width:52ch; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--topbar-bg);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.topbar.is-scrolled{
  border-bottom-color:var(--line);
  background:var(--topbar-bg-scroll);
}
.topbar__inner{
  display:flex; align-items:center; gap:24px;
  min-height:68px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:800; font-size:1.25rem;
  color:var(--cream);
}
.brand img{ border-radius:50%; border:2px solid var(--rose); }
.brand:hover{ color:var(--rose); }

.nav{ display:flex; gap:22px; margin-left:auto; }
.nav a{
  color:var(--muted); font-size:.95rem; font-weight:500;
  padding:4px 0; border-bottom:2px solid transparent;
}
.nav a:hover{ color:var(--cream); border-bottom-color:var(--rose); }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--cream);
}
.pill--live:hover{ border-color:var(--rose); color:var(--cream); }
.dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--online);
  box-shadow:0 0 0 0 var(--online-glow);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 8px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--display); font-weight:700; font-size:1rem;
  padding:12px 24px; border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn--solid{
  background:var(--rose); color:var(--on-rose);
  box-shadow:3px 3px 0 var(--rose-hot);
}
.btn--solid:hover{ color:var(--on-rose); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--rose-hot); }
.btn--ghost{
  border:2px solid var(--muted); color:var(--cream);   /* borde con contraste >=3:1 sobre --ink (7.88:1) */
}
.btn--ghost:hover{ border-color:var(--rose); color:var(--cream); }
.btn.is-disabled{ opacity:.5; pointer-events:none; cursor:not-allowed; }

/* ---------- Hero ---------- */
.hero{ padding:72px 0 96px; position:relative; overflow:hidden; }
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:48px; align-items:center;
}
.hero__name{
  font-size:clamp(3.4rem, 9vw, 6.2rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 .15em;
  background:linear-gradient(100deg, var(--cream) 10%, var(--rose) 40%, var(--lilac) 60%, var(--cream) 90%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:nameSheen 8s linear infinite;
}
@keyframes nameSheen{
  to{ background-position:220% center; }
}
.hero__line{ font-size:1.15rem; color:var(--muted); max-width:44ch; margin:0 0 1.8rem; }

.ticker{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; padding:0; margin:0 0 2rem;
}
.ticker li{
  font-family:var(--mono); font-size:.74rem;
  padding:5px 11px; border-radius:8px;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__art{ position:relative; justify-self:center; }
.hero__art > img{ position:relative; max-height:600px; width:auto; }   /* avatar plano de 404/500 */
.hero__video{ position:relative; z-index:1; width:100%; max-width:640px; height:auto; display:block; border-radius:18px; }
.glow{
  position:absolute; inset:8% 4% 12%;
  background:radial-gradient(circle at 50% 45%, var(--rose-glow), transparent 68%);
  filter:blur(28px);
}

/* ---------- Miyo: avatar vivo por capas ---------- */
.miyo{ position:relative; display:inline-block; perspective:1000px; }
/* la base define el tamaño (como el <img> anterior) y lleva un rim/backlight suave y constante */
.miyo__base{ position:relative; display:block; max-height:600px; width:auto; z-index:1;
  filter:drop-shadow(0 8px 16px rgba(163,146,192,.32)); }
.miyo__breath{ position:relative; display:block; transform-origin:50% 100%; }
.miyo__tilt{ position:relative; display:block; transform-style:preserve-3d; }
/* will-change solo cuando el avatar está vivo (escritorio); en el fallback estático no promociona capas */
.is-live .miyo__breath, .is-live .miyo__tilt{ will-change:transform; }
/* capa de parpadeo: misma silueta, encima de la base, oculta por defecto (fallback = ojos abiertos) */
.miyo__blink{ position:absolute; inset:0; width:100%; height:100%; opacity:0; z-index:2; pointer-events:none; }
/* luz dinámica: se recorta a la silueta con la propia base como máscara -> la luz cae SOBRE el personaje */
.miyo__light{ position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:0;
  --lx:50%; --ly:36%;
  background:radial-gradient(circle at var(--lx) var(--ly), rgba(255,244,248,.6), rgba(237,178,194,.12) 34%, transparent 52%);
  -webkit-mask:url("assets/hero-cutout.webp") center/100% 100% no-repeat;
          mask:url("assets/hero-cutout.webp") center/100% 100% no-repeat; }
.is-live .miyo__light{ opacity:.55; }
.miyo__shadow{ position:absolute; left:50%; bottom:-1%; width:58%; height:4%; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(20,10,14,.4), transparent 70%); filter:blur(7px); z-index:0; pointer-events:none; }
.miyo__spark{ position:absolute; inset:-8% -12%; z-index:4; pointer-events:none; overflow:visible; }
.miyo__glint{ position:absolute; width:9px; height:9px; margin:-4.5px; border-radius:50%; will-change:transform,opacity;
  background:radial-gradient(circle, #fff, rgba(237,178,194,.7) 42%, transparent 70%); }
/* Miyo v2: canvas WebGL (malla-depth). Cuando está activo, oculta las capas DOM (que quedan de fallback). */
.miyo__gl{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
/* El crossfade del DOM->canvas lo hace el JS (opacity de .miyo__breath). Aquí solo soltamos la promoción GPU del DOM oculto. */
.miyo.is-shaded .miyo__breath, .miyo.is-shaded .miyo__tilt{ will-change:auto; }

/* ---------- Secciones ---------- */
.section{ padding:88px 0; }
.section--alt{ background:var(--surface); border-block:1px solid var(--line); }

/* ---------- Sobre mí ---------- */
.about{
  display:grid; grid-template-columns:380px 1fr; gap:56px; align-items:center;
}
.about__img img{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
}
.about__text p{ color:var(--muted); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.4rem; }
.chip{
  font-family:var(--mono); font-size:.74rem;
  padding:6px 12px; border-radius:999px;
  background:var(--surface-2); color:var(--rose);
  border:1px solid var(--line);
}

/* ---------- Paneles ---------- */
.panel{
  position:relative;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.section--alt .panel{ background:var(--ink); }
.panel h3{ color:var(--rose); }
.panel__mascot{
  position:absolute; right:-14px; bottom:-14px;
  width:150px; opacity:.5; pointer-events:none;
}

.stack{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }

.list{ margin:0; padding-left:0; list-style:none; }
.list li{
  position:relative; padding-left:20px; margin-bottom:.6rem;
  color:var(--muted); font-size:.95rem;
}
.list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:2px;
  background:var(--rose); transform:rotate(45deg);
}

/* ---------- Navegador de servidores (firma) ---------- */
.browser{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
}
.server{
  display:grid;
  grid-template-columns:44px 1fr 210px;
  gap:18px; align-items:center;
  padding:20px 22px;
  border-bottom:1px solid var(--line);
  transition:background .18s ease;
}
.server:last-child{ border-bottom:0; }
.server:hover{ background:var(--surface-2); }
.server h3{ margin:0 0 .25em; font-size:1.08rem; }
.server p{ margin:0; color:var(--muted); font-size:.92rem; }

.server__status{ display:flex; justify-content:center; }
.server__meta{ text-align:right; }
.server__meta code{
  display:block; font-family:var(--mono); font-size:.72rem;
  color:var(--lilac); margin-bottom:6px;
}
.state{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.05em; text-transform:uppercase;
}

.is-online .dot{ background:var(--online); }
.is-online .state{ color:var(--online); }
.is-dev .dot{ background:var(--dev); animation:none; }
.is-dev .state{ color:var(--dev); }
.is-paused .dot{ background:var(--muted); animation:none; }
.is-paused .state{ color:var(--muted); }

/* ---------- Servicios ---------- */
.services{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:22px; }
.panel--service{ display:flex; flex-direction:column; }
.panel--service .btn{ align-self:flex-start; margin-top:auto; padding-top:12px; }
.panel--service .list{ margin-bottom:1.6rem; }

/* ---------- Piezas 3D ---------- */
.pieces{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr));
  gap:22px;
}
.piece{
  margin:0;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.piece > img{
  /* capturas del viewport de Blender en 16:9 -> contain sobre fondo oscuro,
     con cover se recortarían */
  width:100%; aspect-ratio:16/9; object-fit:contain;
  border-bottom:1px solid var(--line);
  background:var(--piece-bg);
  cursor:zoom-in;
}
.piece figcaption{ padding:20px 22px 22px; }
.piece h3{ margin:0 0 .35em; font-size:1.05rem; color:var(--rose); }
.piece p{ margin:0 0 .9rem; color:var(--muted); font-size:.9rem; }
.piece code{
  font-family:var(--mono); font-size:.7rem; color:var(--lilac);
  letter-spacing:.03em;
}

/* ---------- Galería ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.gallery__item{
  margin:0; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
  aspect-ratio:1/1;
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.gallery__item:hover img{ transform:scale(1.05); }

/* ---------- Contacto ---------- */
.section--contact{ background:var(--surface); border-top:1px solid var(--line); }
.contact{ display:grid; grid-template-columns:1fr 340px; gap:56px; align-items:center; }
.contact p{ color:var(--muted); max-width:48ch; }

.links{ list-style:none; padding:0; margin:1.8rem 0 0; display:grid; gap:10px; }
.links a{
  display:inline-block;
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  color:var(--cream);
  border-bottom:2px solid transparent;
}
.links a:hover{ color:var(--rose); border-bottom-color:var(--rose); }
.links code{ font-family:var(--mono); font-size:.82rem; color:var(--lilac); }

/* ---------- Footer ---------- */
.footer{ padding:36px 0; border-top:1px solid var(--line); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer__stickers{ max-width:240px; opacity:.85; }
.footer p{ font-family:var(--mono); font-size:.76rem; color:var(--muted); margin:0; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }

/* ---------- Menú móvil ---------- */
.nav-toggle{
  display:none;                 /* oculto en escritorio */
  width:44px; height:44px;
  align-items:center; justify-content:center;
  padding:0; border:0; background:transparent;
  color:var(--cream); cursor:pointer;
}
.nav-toggle:hover{ color:var(--rose); }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:""; display:block;
  width:24px; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars{ position:relative; }
.nav-toggle__bars::before{ position:absolute; left:0; top:-7px; }
.nav-toggle__bars::after{  position:absolute; left:0; top:7px; }
/* estado abierto: las barras forman una X */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:40;   /* bajo la topbar (z-50): la X sigue accesible */
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  animation:menuIn .2s ease;
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu__nav{ display:flex; flex-direction:column; gap:6px; text-align:center; }
.mobile-menu__nav a{
  font-family:var(--display); font-weight:700;
  font-size:1.7rem; color:var(--cream);
  padding:10px 28px; border-radius:14px;
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible{ color:var(--rose); background:var(--surface); }
@keyframes menuIn{ from{ opacity:0; } to{ opacity:1; } }
body.menu-open{ overflow:hidden; }

/* ---------- Grano sutil sobre todo el sitio ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.04;
  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");
  background-size:120px 120px;
}

/* ---------- Fondo animado del hero ---------- */
.hero__grid{ position:relative; z-index:1; }
.hero__bg{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.hero__blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.hero__blob--1{
  width:46vw; height:46vw; left:-8%; top:-12%;
  background:radial-gradient(circle, var(--blob-rose-hot), transparent 65%);
  animation:drift1 18s ease-in-out infinite alternate;
}
.hero__blob--2{
  width:40vw; height:40vw; right:-6%; top:8%;
  background:radial-gradient(circle, var(--blob-lilac), transparent 65%);
  animation:drift2 22s ease-in-out infinite alternate;
}
.hero__blob--3{
  width:36vw; height:36vw; left:28%; bottom:-20%;
  background:radial-gradient(circle, var(--rose-glow-2), transparent 65%);
  animation:drift3 26s ease-in-out infinite alternate;
}
@keyframes drift1{ to{ transform:translate(6%,8%) scale(1.10); } }
@keyframes drift2{ to{ transform:translate(-8%,6%) scale(1.08); } }
@keyframes drift3{ to{ transform:translate(4%,-6%) scale(1.12); } }

/* ---------- Selector de idioma ---------- */
.lang{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.lang__btn{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
  padding:6px 11px; border:0; background:transparent; color:var(--muted); cursor:pointer;
}
.lang__btn:hover{ color:var(--cream); }
.lang__btn.is-active{ background:var(--rose); color:var(--on-rose); }

/* ---------- Pista de consola + tecla ---------- */
.hero__hint{ margin:1.6rem 0 0; }
.kbd-hint{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:0; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; color:var(--muted);
}
.kbd-hint:hover{ color:var(--rose); }
kbd{
  font-family:var(--mono); font-size:.72rem; color:var(--cream);
  background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:6px; padding:2px 8px;
}

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--surface); }
.marquee__track{
  display:flex; width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--mono); font-size:.8rem; color:var(--muted);
  padding:14px 26px; white-space:nowrap; border-right:1px solid var(--line);
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Demo ---------- */
.demo__card{
  display:grid; grid-template-columns:1.55fr .78fr; gap:30px; align-items:center;
  background:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px;
}
.demo__card + .demo__card{ margin-top:clamp(40px,6vw,72px); }  /* aire entre demos para que cada una respire */
.demo__media{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--black); }
.demo__video{ width:100%; aspect-ratio:16/9; display:block; background:var(--black); }
.demo__body h2{ margin-bottom:.1em; }
.demo__tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--lilac); margin:0 0 1rem;
}
.demo__body p{ color:var(--muted); }
.demo__credits{ font-family:var(--mono); font-size:.7rem; color:var(--muted); margin:0; max-width:54ch; }

/* ---------- Nota de arte ---------- */
.art__note{ font-family:var(--mono); font-size:.72rem; color:var(--muted); margin:1.6rem 0 0; max-width:72ch; }
.gallery__item img{ cursor:zoom-in; }

/* ---------- Enlaces de contacto ---------- */
.links__net{ font-family:var(--display); }

/* ---------- Nav activo ---------- */
.nav a.is-active{ color:var(--cream); border-bottom-color:var(--rose); }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:80; padding:5vmin;
  display:flex; align-items:center; justify-content:center;
  background:var(--scrim); backdrop-filter:blur(6px);
}
.lightbox[hidden]{ display:none; }
.lightbox__img{
  max-width:92vw; max-height:88vh; width:auto; height:auto;
  border-radius:12px; border:1px solid var(--line);
  box-shadow:0 20px 60px var(--shadow-strong); background:var(--ink);
}
.lightbox__close{
  position:absolute; top:18px; right:20px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--cream);
  font-size:1.4rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox__close:hover{ border-color:var(--rose); color:var(--rose); }

/* ---------- Consola ---------- */
.console{ position:fixed; left:0; right:0; top:0; z-index:90; }
.console[hidden]{ display:none; }
.console__panel{
  background:var(--console-bg); border-bottom:1px solid var(--line);
  box-shadow:0 12px 40px var(--shadow-soft);
  max-height:min(60vh,440px); display:flex; flex-direction:column;
  animation:consoleDrop .18s ease;
}
@keyframes consoleDrop{ from{ transform:translateY(-100%); } to{ transform:none; } }
.console__log{
  padding:16px 18px; overflow-y:auto;
  font-family:var(--mono); font-size:.82rem; line-height:1.6; color:var(--cream);
}
.console__line{ white-space:pre-wrap; word-break:break-word; margin:0; }
.console__line--sys{ color:var(--lilac); }
.console__line--err{ color:var(--rose-hot); }
.console__form{ display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding:10px 18px; }
.console__prompt{ color:var(--rose); font-family:var(--mono); font-size:.85rem; }
.console__input{
  flex:1; background:transparent; border:0; color:var(--cream);
  font-family:var(--mono); font-size:.85rem;
}

/* ---------- Pantalla de conexión ---------- */
.boot{
  position:fixed; inset:0; z-index:120; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:24px;
}
.boot[hidden]{ display:none; }
.boot__avatar{ width:90px; height:90px; border-radius:50%; border:2px solid var(--rose); }
.boot__log{
  font-family:var(--mono); font-size:.82rem; line-height:1.85; color:var(--cream);
  width:min(520px,92vw); min-height:190px;
}
.boot__log .ok{ color:var(--online); }
.boot__log .dim{ color:var(--muted); }
.boot__barwrap{ width:min(520px,92vw); height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.boot__bar{ height:100%; width:0; background:linear-gradient(90deg,var(--rose),var(--lilac)); transition:width .25s ease; }
.boot__skip{
  font-family:var(--mono); font-size:.72rem; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:999px; padding:8px 16px; cursor:pointer;
}
.boot__skip:hover{ color:var(--cream); border-color:var(--rose); }
body.boot-open{ overflow:hidden; }

/* ---------- Responsive del demo ---------- */
@media (max-width:820px){
  .demo__card{ grid-template-columns:1fr; gap:22px; }
}

/* ========================================================
   Rediseño "Jaramiyo OS"
   ======================================================== */

/* ---------- Cursor propio ---------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; border-radius:50%;
  pointer-events:none; z-index:200; will-change:transform;
}
.cursor-dot{ width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background:var(--rose); }
.cursor-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px; border:2px solid var(--rose);
  transition:width .2s ease, height .2s ease, margin .2s ease, background .2s ease;
}
.cursor-ring.is-active{
  width:52px; height:52px; margin:-26px 0 0 -26px;
  background:color-mix(in srgb, var(--rose) 22%, transparent);
}
body.custom-cursor, body.custom-cursor a, body.custom-cursor button,
body.custom-cursor [tabindex], body.custom-cursor input{ cursor:none; }

/* ---------- Pétalos ---------- */
.petals{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

/* ---------- Barra de progreso de lectura ---------- */
.reading-bar{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background:transparent; pointer-events:none;
}
.reading-bar__fill{
  height:100%; width:0; transform-origin:left;
  background:linear-gradient(90deg, var(--rose), var(--lilac));
}
@supports (animation-timeline: scroll()){
  body.motion .reading-bar__fill{
    width:100%; transform:scaleX(0);
    animation:readgrow linear both; animation-timeline:scroll(root);
  }
  @keyframes readgrow{ to{ transform:scaleX(1); } }
}

/* ---------- Interruptor de sonido ---------- */
.snd{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--muted); cursor:pointer;
}
.snd:hover{ color:var(--cream); border-color:var(--rose); }
.snd[aria-pressed="true"]{ color:var(--on-rose); background:var(--rose); border-color:var(--rose); }
.snd__icon{ position:relative; width:14px; height:14px; display:flex; align-items:center; justify-content:center; }
.snd__icon::before{ content:"\266A"; font-size:.95rem; line-height:1; }
.snd[aria-pressed="false"] .snd__icon::after{
  content:""; position:absolute; left:-3px; right:-3px; top:50%; height:2px;
  background:currentColor; transform:rotate(-45deg);
}

/* ---------- HUD del sistema ---------- */
/* ---------- HUD — consola de mano premium (AAA) ---------- */
.hud{ position:fixed; left:18px; bottom:18px; z-index:45; font-family:var(--mono); }
.hud[hidden]{ display:none; }

/* Panel: la consola. Anclada abajo-izquierda; se desvanece al minimizar. */
.hud__panel{
  position:absolute; left:0; bottom:0; width:230px; overflow:hidden;
  background:linear-gradient(158deg, color-mix(in srgb, var(--rose) 7%, var(--ink)) 0%, var(--ink) 60%);
  border:1px solid color-mix(in srgb, var(--rose) 24%, var(--line));
  border-radius:16px; transform-origin:0 100%;
  box-shadow:0 16px 38px var(--shadow-soft),
    inset 0 1px 0 color-mix(in srgb, var(--rose) 22%, transparent),
    inset 0 0 26px color-mix(in srgb, var(--rose) 7%, transparent);
  transition:opacity .32s cubic-bezier(.5,.05,.2,1), transform .32s cubic-bezier(.5,.05,.2,1);
}
.hud__panel::after{ /* scanline de consola */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.05) 3px 4px);
}
/* Barra de título integrada (el botón vive AQUÍ, no flotando encima) */
.hud__bar{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:8px 8px 8px 12px;
  border-bottom:1px solid color-mix(in srgb, var(--rose) 16%, var(--line));
  background:linear-gradient(color-mix(in srgb, var(--rose) 9%, transparent), transparent);
}
.hud__id{ display:inline-flex; align-items:center; gap:8px; }
.hud__title{ font-size:.6rem; letter-spacing:.22em; color:color-mix(in srgb, var(--cream) 80%, var(--rose)); }
.hud__led{
  width:8px; height:8px; border-radius:50%; background:var(--online); flex:0 0 auto;
  box-shadow:0 0 8px var(--online-glow); animation:hudLed 2.6s ease-in-out infinite;
}
@keyframes hudLed{ 0%,100%{ opacity:.5; box-shadow:0 0 4px var(--online-glow); } 50%{ opacity:1; box-shadow:0 0 11px var(--online-glow); } }
.hud__toggle{
  width:22px; height:22px; display:grid; place-items:center; cursor:pointer;
  background:color-mix(in srgb, var(--rose) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--rose) 26%, var(--line));
  border-radius:7px; transition:background .2s ease, transform .15s ease;
}
.hud__toggle:hover{ background:color-mix(in srgb, var(--rose) 24%, transparent); transform:scale(1.08); }
.hud__toggle span{ width:9px; height:2px; border-radius:2px; background:var(--rose); }   /* icono "−" limpio */
.hud__body{ position:relative; z-index:2; padding:14px; display:flex; gap:13px; align-items:center; }
.hud__avatar{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  border:2px solid color-mix(in srgb, var(--rose) 45%, var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--rose) 12%, transparent), 0 0 15px color-mix(in srgb, var(--rose) 28%, transparent);
}
.hud__stats{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:.66rem; flex:1; }
.hud__stats > div{ display:contents; }
.hud__stats dt{ color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:.56rem; align-self:center; }
.hud__stats dd{ margin:0; color:var(--cream); text-align:right; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
#hudFps{ color:var(--rose); font-weight:700; }

/* Botón flotante de reapertura — pequeño, elegante; oculto cuando el HUD está abierto */
.hud__reopen{
  position:absolute; left:0; bottom:0; width:54px; height:54px; border-radius:50%; cursor:pointer; padding:0;
  display:grid; place-items:center; transform-origin:0 100%;
  background:linear-gradient(158deg, color-mix(in srgb, var(--rose) 12%, var(--ink)), var(--ink));
  border:1px solid color-mix(in srgb, var(--rose) 34%, var(--line));
  box-shadow:0 10px 26px var(--shadow-soft), 0 0 0 4px color-mix(in srgb, var(--rose) 8%, transparent);
  opacity:0; transform:scale(.5); pointer-events:none;
  transition:opacity .3s cubic-bezier(.5,.05,.2,1), transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.hud__reopen img{ width:40px; height:40px; border-radius:50%; }
.hud__reopen .hud__led{ position:absolute; right:2px; bottom:2px; width:10px; height:10px; border:2px solid var(--ink); }
.hud__reopen:hover{ transform:scale(1.06); box-shadow:0 10px 26px var(--shadow-soft), 0 0 22px color-mix(in srgb, var(--rose) 45%, transparent); }

/* Estados: abierto <-> minimizado (crossfade anclado abajo-izquierda) */
.hud.is-min .hud__panel{ opacity:0; transform:scale(.88) translateY(6px); pointer-events:none; }
.hud.is-min .hud__reopen{ opacity:1; transform:scale(1); pointer-events:auto; }

/* ---------- Tilt 3D + magnético ---------- */
.tilt{ transition:transform .14s ease; transform-style:preserve-3d; }
.magnetic{ transition:transform .18s ease; }

/* ---------- Revelado por palabras ---------- */
.reveal-word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.reveal-word{ display:inline-block; }
body.motion .reveal-word{ transform:translateY(110%); }
body.motion .reveal-lines.is-in .reveal-word{
  transform:none; transition:transform .55s cubic-bezier(.2,.7,.2,1);
}

/* ---------- Carga con desenfoque ---------- */
.blurup{ filter:blur(14px); transform:scale(1.03); transition:filter .6s ease, transform .6s ease; }
.blurup.is-loaded{ filter:none; transform:none; }

/* ---------- Galería 3D horizontal ---------- */
.hgallery__track{
  display:flex; gap:22px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; padding:6px 2px 22px; cursor:grab;
  scrollbar-color:var(--line) transparent;
}
.hgallery__track:focus-visible{ outline:3px solid var(--rose); outline-offset:4px; border-radius:12px; }
.hgallery__track.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.hgallery__track .piece{ flex:0 0 min(360px, 82%); scroll-snap-align:center; }
.hgallery__track::-webkit-scrollbar{ height:8px; }
.hgallery__track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.hgallery__track::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Demo jugable ---------- */
.demo__media{ position:relative; aspect-ratio:16/9; }
.demo__play{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:var(--black); cursor:pointer; display:block; overflow:hidden; }
.demo__cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.demo__play:hover .demo__cover,
.demo__play:focus-visible .demo__cover{ transform:scale(1.04); }
.demo__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 42%, transparent 42%, color-mix(in srgb, var(--ink) 60%, transparent)),
    linear-gradient(to top, color-mix(in srgb, var(--ink) 90%, transparent), transparent 48%);
}
/* badge "en vivo" -> deja claro que es un juego jugable, no un vídeo */
.demo__live{
  position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px; background:var(--console-bg); border:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--cream);
}
.demo__livedot{
  width:8px; height:8px; border-radius:50%; background:var(--online); flex:none;
  box-shadow:0 0 0 0 var(--online-glow); animation:demoLive 1.9s ease-out infinite;
}
@keyframes demoLive{ 0%{ box-shadow:0 0 0 0 var(--online-glow) } 70%{ box-shadow:0 0 0 7px transparent } 100%{ box-shadow:0 0 0 0 transparent } }
/* CTA central: teclas de ritmo + botón Jugar (nada de triángulo de vídeo) */
.demo__cta{
  position:absolute; left:50%; top:53%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.demo__keys{ display:flex; gap:8px; }
.demo__keys b{
  width:40px; height:40px; display:grid; place-items:center; border-radius:11px;
  background:color-mix(in srgb, var(--ink) 72%, transparent); border:1.5px solid var(--rose);
  color:var(--rose); font-family:var(--display); font-weight:700; font-size:1.15rem; line-height:1;
  box-shadow:0 3px 0 color-mix(in srgb, var(--rose-hot) 55%, transparent);
}
.demo__ctatxt{
  display:inline-flex; align-items:center; gap:9px; padding:12px 30px; border-radius:999px;
  background:var(--rose); color:var(--on-rose); font-family:var(--display); font-weight:700; font-size:1.15rem;
  box-shadow:3px 3px 0 var(--rose-hot); transition:transform .2s ease, box-shadow .2s ease;
}
.demo__ctatxt::before{ content:"\25B8"; font-size:1.05em; }
.demo__play:hover .demo__ctatxt,
.demo__play:focus-visible .demo__ctatxt{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--rose-hot); }
@media (prefers-reduced-motion: reduce){
  .demo__livedot{ animation:none; }
  .demo__cover, .demo__ctatxt{ transition:none; }
}
.demo__media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.demo__soon{
  position:absolute; inset:auto 12px 12px; padding:10px 12px; border-radius:10px;
  background:var(--console-bg); border:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem; color:var(--cream);
}
.demo__actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:.2rem 0 1.1rem; }
.demo__kbd{ font-family:var(--mono); font-size:.72rem; color:var(--muted); }

/* Recompensa por ganar la demo */
.demo__reward{
  margin:1.1rem 0 1.2rem; padding:14px 16px; border-radius:14px;
  background:color-mix(in srgb, var(--rose) 12%, var(--ink));
  border:1px solid color-mix(in srgb, var(--rose) 40%, var(--line));
}
.demo__reward-tag{
  display:inline-block; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rose); margin-bottom:.35rem;
}
.demo__reward-pct{
  font-family:var(--display); font-weight:800; font-size:1.5rem; line-height:1.05;
  color:var(--cream); margin:0 0 .3rem;
}
.demo__reward-text{ font-size:.9rem; color:var(--muted); margin:0; }

/* Nota "solo teclado" para móvil/táctil */
.demo__nokbd{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(78%, 340px); text-align:center; padding:14px 16px; border-radius:14px;
  background:var(--console-bg); border:1px solid var(--line);
  font-family:var(--mono); font-size:.82rem; line-height:1.5; color:var(--cream);
  display:none;
}
.demo__media.is-touch .demo__cta{ display:none; }
.demo__media.is-touch .demo__nokbd{ display:block; }
.demo__media.is-touch .demo__live{ display:none; }   /* evita que el badge choque con la nota en móvil */

/* Overlay de carga al pulsar Jugar */
.demo__loading{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; background:var(--black); color:var(--cream); font-family:var(--mono); font-size:.85rem; z-index:2;
}
.demo__spinner{
  width:38px; height:38px; border-radius:50%;
  border:3px solid color-mix(in srgb, var(--rose) 30%, transparent); border-top-color:var(--rose);
  animation:demoSpin .8s linear infinite;
}
@keyframes demoSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .demo__spinner{ display:none; } }

/* ---------- Pie: fila legal ---------- */
.footer__meta{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.footer__legal{ display:flex; gap:16px; flex-wrap:wrap; }
.footer__legal a{ font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.footer__legal a:hover{ color:var(--rose); }

/* ---------- Páginas legales ---------- */
.legal__head{ display:flex; align-items:center; gap:24px; margin-bottom:2rem; flex-wrap:wrap; }
.legal__img{ width:120px; height:auto; }
.legal__title{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,5vw,3rem); margin:0; color:var(--cream); }
.legal__body{ max-width:70ch; }
.legal__body h2{ font-size:1.3rem; margin:2.2rem 0 .6rem; color:var(--rose); }
.legal__body p{ color:var(--muted); margin:0 0 1rem; }
.legal__note{
  font-family:var(--mono); font-size:.8rem; color:var(--muted);
  border-left:3px solid var(--line); padding:12px 16px; margin:0 0 1.6rem;
  background:var(--surface); border-radius:0 10px 10px 0;
}
.legal__back{ margin-top:2.6rem; }
.legal__back a{ font-family:var(--display); font-weight:700; }

/* ========================================================
   FASE A — animación premium (GSAP / Lenis / OGL)
   ======================================================== */

/* ---------- #13 Contadores ---------- */
.stats{ border-block:1px solid var(--line); background:var(--surface); }
.stats__row{ display:flex; justify-content:center; gap:clamp(30px,8vw,90px); padding:40px 0; flex-wrap:wrap; text-align:center; }
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat__num{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,6vw,3.6rem); line-height:1; color:var(--rose); font-variant-numeric:tabular-nums; }
.stat__label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ---------- Ola 1: game-feel · latido · odómetro ---------- */
/* GSAP dirige el transform de los botones: quitamos su transición CSS para no doblar el easing. */
.anim-on .btn{ transition:box-shadow .15s ease; }
/* El latido de los dots lo marca el beat (sys): apagamos el @keyframes pulse. */
.beat-on .dot{ animation:none; }

/* Odómetro de arcade: cada dígito es una columna que gira y se traba con rebote. */
.odo-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.stat__num--odo{ display:inline-flex; align-items:flex-start; }
.odo{ display:inline-flex; align-items:flex-start; line-height:1; }
.odo__col{ display:block; height:1.1em; overflow:hidden; }
.odo__strip{ display:block; will-change:transform; }
.odo__strip b{ display:flex; align-items:center; justify-content:center; height:1.1em; line-height:1;
  font-weight:inherit; font-variant-numeric:tabular-nums; }
.odo__suf{ display:flex; align-items:center; height:1.1em; }

/* ---------- Ola 2: strumline del marquee + selector de nivel del nav ---------- */
/* Nav: la marca activa viaja como el cursor de un menú de juego (sustituye el border estático). */
.nav.has-cursor{ position:relative; }
.nav.has-cursor a,
.nav.has-cursor a:hover,
.nav.has-cursor a.is-active{ border-bottom-color:transparent; }
.nav__cursor{ position:absolute; left:0; bottom:0; height:3px; width:0; border-radius:3px;
  background:linear-gradient(90deg, var(--rose), var(--rose-hot)); opacity:0; pointer-events:none;
  box-shadow:0 0 10px color-mix(in srgb, var(--rose) 70%, transparent); will-change:transform,width; }

/* Marquee = strumline FNF: playhead fijo; cada tag salta y se enciende al cruzarlo. */
.marquee.has-playhead{ position:relative; }
.marquee__playhead{ position:absolute; top:0; bottom:0; left:30%; width:2px; z-index:1;
  background:linear-gradient(var(--rose), var(--rose-hot)); opacity:.85; pointer-events:none;
  box-shadow:0 0 12px color-mix(in srgb, var(--rose) 80%, transparent); }
.marquee__playhead::before{ content:""; position:absolute; left:50%; top:6px; width:8px; height:8px;
  margin-left:-4px; border-radius:50%; background:var(--rose); box-shadow:0 0 10px var(--rose); }

/* ---------- #1 Preloader con contador ---------- */
.preloader{
  position:fixed; inset:0; z-index:120; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:24px;
  clip-path:inset(0 0 0 0);
}
.preloader.is-out{ transition:clip-path .8s cubic-bezier(.76,0,.24,1); clip-path:inset(0 0 100% 0); }
.preloader__inner{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:16px 28px; align-items:end; width:min(680px,92vw); }
.preloader__count{ grid-row:1/3; font-family:var(--display); font-weight:800; font-size:clamp(5rem,17vw,10.5rem); line-height:.9; color:var(--cream); font-variant-numeric:tabular-nums; }
.preloader__count::after{ content:"%"; font-size:.34em; color:var(--rose); vertical-align:super; margin-left:.08em; }
.preloader.is-out .preloader__count{ transition:transform .7s cubic-bezier(.76,0,.24,1), opacity .5s; transform:scale(6); opacity:0; transform-origin:left bottom; }
.preloader__side{ display:flex; align-items:center; gap:14px; align-self:end; }
.preloader__avatar{ width:72px; height:72px; border-radius:50%; border:2px solid var(--rose); }
.preloader__log{ font-family:var(--mono); font-size:.72rem; line-height:1.7; color:var(--muted); min-height:74px; }
.preloader__log .ok{ color:var(--online); }
.preloader__bar{ grid-column:1/3; height:4px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.preloader__fill{ height:100%; width:0; background:linear-gradient(90deg,var(--rose),var(--lilac)); }
.preloader__skip{ font-family:var(--mono); font-size:.72rem; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:999px; padding:8px 16px; cursor:pointer; }
.preloader__skip:hover{ color:var(--cream); border-color:var(--rose); }

/* ---------- #5 Nombre troceado ---------- */
.hero__name.is-split{ background:none !important; -webkit-text-fill-color:var(--cream); color:var(--cream); animation:none; }
.hero__name .char{ display:inline-block; will-change:transform, opacity; }
.hero__name .word{ display:inline-block; }

/* ---------- #2/#3 Hero WebGL ---------- */
.hero__gl{ position:absolute; inset:0; width:100%; height:100%; }
.hero.gl-on .hero__blob{ display:none; }

/* ---------- #7 Galería con pin ---------- */
.hgallery{ position:relative; }
.hgallery.is-pinned{ height:78vh; min-height:420px; overflow:hidden; display:flex; align-items:center; padding:0; }
.hgallery.is-pinned .hgallery__track{ overflow:visible; flex-wrap:nowrap; padding:0 6vw; cursor:auto; scroll-snap-type:none; will-change:transform; }
.hgallery.is-pinned .hgallery__track .piece{ flex:0 0 min(420px,72vw); }
.hgallery__progress{ position:absolute; left:6vw; right:6vw; bottom:6%; height:3px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.hgallery__progress span{ display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,var(--rose),var(--lilac)); }

/* ---------- #9 Cursor con etiquetas ---------- */
body.labeled-cursor, body.labeled-cursor *{ cursor:none !important; }
.cur-glow, .cur-ring, .cur-dot{ position:fixed; top:0; left:0; pointer-events:none; z-index:200; border-radius:50%; will-change:transform; }
/* aura rosa muy suave que sigue con retardo */
.cur-glow{ width:190px; height:190px; margin:-95px 0 0 -95px; opacity:.5; filter:blur(6px);
  background:radial-gradient(circle, color-mix(in srgb, var(--rose) 42%, transparent) 0%, transparent 60%); }
/* punto preciso */
.cur-dot{ width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--cream); mix-blend-mode:difference; }
/* aro base */
.cur-ring{ width:34px; height:34px; margin:-17px 0 0 -17px; background:transparent;
  border:1.6px solid color-mix(in srgb, var(--rose) 85%, var(--cream));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 12px color-mix(in srgb, var(--rose) 30%, transparent);
  transition:width .28s cubic-bezier(.34,1.56,.64,1), height .28s cubic-bezier(.34,1.56,.64,1),
             margin .28s cubic-bezier(.34,1.56,.64,1), background .22s ease, border-color .22s ease, opacity .3s; }
/* enlace genérico: se encoge un poco */
.cur-ring.is-link{ width:26px; height:26px; margin:-13px 0 0 -13px; border-color:color-mix(in srgb, var(--rose) 60%, var(--cream)); }
/* botón (magnético): se agranda con relleno translúcido */
.cur-ring.is-magnet{ width:54px; height:54px; margin:-27px 0 0 -27px;
  background:color-mix(in srgb, var(--rose) 16%, transparent); border-color:var(--rose); }
/* estado con etiqueta (VER / JUGAR / ABRIR / CONTACTO): píldora rosa */
.cur-ring.is-text{ width:auto; min-width:66px; height:34px; margin:-17px 0 0 -33px; padding:0 15px; border-radius:999px;
  background:var(--rose); border-color:var(--rose); box-shadow:0 6px 18px color-mix(in srgb, var(--rose) 40%, transparent); }
.cur-ring.is-down{ box-shadow:0 0 18px color-mix(in srgb, var(--rose) 55%, transparent); }
.cur-label{ font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-rose); opacity:0; white-space:nowrap; transition:opacity .2s; }
.cur-ring.is-text .cur-label{ opacity:1; }
/* pétalo al hacer click */
.cur-petal{ position:fixed; top:0; left:0; width:16px; height:16px; margin:-8px 0 0 -8px; pointer-events:none; z-index:199;
  background:url("assets/petal.png") center/contain no-repeat; will-change:transform,opacity; }

/* ---------- #8 Vista previa flotante ---------- */
.srv-preview{ position:fixed; top:0; left:0; z-index:150; width:260px; pointer-events:none; opacity:0; transition:opacity .25s ease; will-change:transform; }
.srv-preview.is-open{ opacity:1; }
.srv-preview__mask{ position:relative; width:100%; aspect-ratio:16/10; border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow:0 16px 40px var(--shadow-strong); clip-path:inset(0 100% 0 0); }
.srv-preview.is-open .srv-preview__mask{ clip-path:inset(0 0 0 0); transition:clip-path .45s cubic-bezier(.76,0,.24,1); }
.srv-preview__img, .srv-preview__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.srv-preview__vid[hidden]{ display:none; }

/* ---------- #11 STAGE: ÚNICO sistema de navegación (secciones + páginas + volver) ---------- */
.sweep{ position:fixed; inset:0; z-index:999; display:none; overflow:hidden; pointer-events:none; }
.sweep.is-on{ display:block; }
.sweep__band{ position:absolute; inset:0; will-change:transform; transform:translateX(-101%);
  transition:transform .5s cubic-bezier(.76,0,.24,1) !important; }   /* !important: la cortina se mueve incluso bajo reduced-motion */
.sweep__band:nth-child(1){ background:var(--rose); }
.sweep__band:nth-child(2){ background:var(--lilac); transition-delay:.07s !important; }
.sweep__band:nth-child(3){ background:var(--rose); transition-delay:.14s !important; }
.sweep.cover .sweep__band{ transform:translateX(0); }         /* cubre (entra por la izquierda) */
.sweep.reveal .sweep__band{ transform:translateX(101%); }     /* revela (sale por la derecha; misma dirección continua) */
.sweep.no-anim .sweep__band, .sweep.no-anim .sweep__banner{ transition:none !important; }
.sweep__banner{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.25em; will-change:transform,opacity;
  opacity:0; transform:scale(1.35); transition:opacity .3s ease, transform .32s cubic-bezier(.34,1.56,.64,1); }
.sweep.cover .sweep__banner{ opacity:1; transform:scale(1); transition-delay:.18s; }
.sweep.reveal .sweep__banner{ opacity:0; transform:scale(.92); }
.sweep__tag{ font-family:var(--mono); font-size:.8rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--on-rose); opacity:.75; padding-left:.42em; }
.sweep__label{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,7vw,4.5rem); color:var(--on-rose); }
/* Cobertura instantánea al ATERRIZAR de una navegación STAGE (evita el flash antes de que main.js monte la cortina) */
html.stage-cover::before{ content:""; position:fixed; inset:0; z-index:998; background:linear-gradient(160deg, var(--rose), var(--lilac)); }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .nav-toggle{ display:inline-flex; }
  .hud{ display:none; }
  .hgallery__track{ display:grid; grid-template-columns:1fr; overflow:visible; cursor:auto; }
  .hgallery__track .piece{ flex:none; }
  .footer__meta{ align-items:center; }
  .topbar__inner{ gap:12px; }
  .topbar__inner .lang{ margin-left:auto; }
  .hero__grid{ grid-template-columns:1fr; text-align:center; }
  .hero__text{ order:2; }
  .hero__art{ order:1; }
  .miyo__base, .hero__art > img{ max-height:400px; margin-inline:auto; }
  .ticker, .hero__cta{ justify-content:center; }
  .hero__line{ margin-inline:auto; }
  .about{ grid-template-columns:1fr; gap:32px; }
  .about__img{ max-width:340px; margin-inline:auto; }
  .stack{ grid-template-columns:1fr; }
  .services{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .contact__img{ max-width:280px; margin-inline:auto; }
  .nav{ display:none; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ width:calc(100% - 32px); }
  .section{ padding:64px 0; }
  .server{ grid-template-columns:28px 1fr; row-gap:10px; }
  .server__meta{ grid-column:2; text-align:left; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .footer__inner{ flex-direction:column; text-align:center; }
  /* en pantallas estrechas el pill estorba: se accede a contacto desde el menú */
  .topbar__inner .pill{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .cursor-dot, .cursor-ring, .petals{ display:none !important; }
  .reveal-word{ transform:none !important; }
  .blurup{ filter:none !important; transform:none !important; }
}