:root{
    --bg:#F3F3F3;
    --text:#1B1B1B;
    --text-muted:rgba(27,27,27,0.62);

    --magenta:#5B5B5B;
    --texto-magenta:#FFFFFF;
    --violeta:#575757;

    --container: 1120px;
    --section-pad: 96px;

    /* paleta oscura de las secciones (no la usa el Hero) */
    --dark-bg:#0D0614;
    --dark-card:#170C22;
    --dark-text:#F1ECF7;
    --accent:#FF4A85;
  }

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

  /* evita scroll horizontal a nivel de página */
  html, body{
    overflow-x:hidden;
    max-width:100%;
  }

  html{
    scroll-behavior:smooth;
    scroll-padding-top:80px;
    font-size:18px;
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24' shape-rendering='crispEdges'%3E%3Cpolygon points='2,2 2,20 6,16 9,22 12,20 9,14 16,14' fill='white' stroke='black' stroke-width='2' stroke-linejoin='miter'/%3E%3C/svg%3E") 2 2, default;
  }
  body, a, button, select, [role='button']{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24' shape-rendering='crispEdges'%3E%3Cpolygon points='2,2 2,20 6,16 9,22 12,20 9,14 16,14' fill='white' stroke='black' stroke-width='2' stroke-linejoin='miter'/%3E%3C/svg%3E") 2 2, default;
  }
  a:hover, button:hover, select:hover, [role='button']:hover,
  a:active, button:active, select:active, [role='button']:active{
    cursor:pointer;
  }

  /* ---------- utilidades ---------- */
  .pixel-art, .pixel-icon{
    image-rendering:-moz-crisp-edges;
    image-rendering:crisp-edges;
    image-rendering:pixelated;
  }

  /* rastro de cursor: cuadraditos que aparecen y se desvanecen */
  .cursor-trail-dot{
    position:fixed;
    top:0;
    left:0;
    width:8px;
    height:8px;
    background:#E0407A;
    pointer-events:none;
    z-index:9999;
    will-change:transform, opacity;
    animation:trailFade 0.5s steps(6) forwards;
  }
  @keyframes trailFade{
    0%{ opacity:0.9; transform:translate(-50%,-50%) scale(1); }
    100%{ opacity:0; transform:translate(-50%,-50%) scale(0.15); }
  }

  /* líneas de escaneo tipo CRT */
  .crt-scanlines{
    background-image:repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.15) 0px,
      rgba(0,0,0,0.15) 1px,
      transparent 1px,
      transparent 3px
    );
  }

  /* divisor de píxeles: cuadrícula que se materializa al hacer scroll y queda fija */
  .pixel-divider{
    display:grid;
    grid-template-columns:repeat(24, 1fr);
    width:100%;
    height:32px;
    background:currentColor;
  }
  .pixel-divider span{
    display:none;
  }
  .js .pixel-divider span{
    opacity:0;
    transform:scale(0.4);
    transition:opacity 0.3s steps(4), transform 0.3s steps(4);
  }
  .js .pixel-divider.in-view span{
    opacity:1;
    transform:scale(1);
  }
  .pixel-divider span:nth-child(6n+1){ transition-delay:0.05s; }
  .pixel-divider span:nth-child(6n+2){ transition-delay:0.22s; }
  .pixel-divider span:nth-child(6n+3){ transition-delay:0.02s; }
  .pixel-divider span:nth-child(6n+4){ transition-delay:0.3s; }
  .pixel-divider span:nth-child(6n+5){ transition-delay:0.12s; }
  .pixel-divider span:nth-child(6n){ transition-delay:0.38s; }

  body{
    background:var(--dark-bg);
    color:var(--dark-text);
    font-family:'VT323', monospace;
    font-weight:400;
    line-height:1.6;
  }

  h1,h2,h3{
    font-family:'Press Start 2P', sans-serif;
    letter-spacing:0.03em;
  }

  .btn{
    font-family:'Press Start 2P', sans-serif;
    letter-spacing:0.03em;
  }

  a{ color:inherit; text-decoration:none; }

  .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 24px;
  }

  /* ---------- scroll reveal (solo si hay JS activo) ---------- */
  .js .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .js .reveal.in-view{
    opacity:1;
    transform:none;
  }

  /* ---------- section scaffolding ---------- */
  section{
    padding:var(--section-pad) 0;
  }

  .section-title{
    font-size:clamp(1.6rem, 7vw, 2.8rem);
    text-align:center;
    text-transform:uppercase;
    color:var(--accent);
    text-shadow:3px 3px 0 #000000;
  }

  .divider{
    display:flex;
    gap:7px;
    justify-content:center;
    margin:14px 0 0;
  }
  .divider span:nth-child(1){ width:9px; height:9px; background:var(--accent); }
  .divider span:nth-child(2){ width:9px; height:9px; background:var(--accent); opacity:0.7; }
  .divider span:nth-child(3){ width:9px; height:9px; background:var(--accent); opacity:0.45; }

  .section-lede{
    max-width:640px;
    margin:22px auto 0;
    text-align:center;
    color:var(--dark-text);
    text-shadow:2px 2px 0 #000000;
    font-family:'Quicksand', sans-serif;
  }

  /* ---------- navbar (superpuesto sobre el Hero) ---------- */
  .nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:50;
    padding:14px 0;
    background:transparent;
    transition:background-color 0.2s ease;
    animation:navFadeIn 0.8s ease both;
  }
  /* tema del navbar según la sección que está pasando por detrás */
  .nav.theme-dark{
    background:rgba(13,6,20,0.82);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .nav.theme-dark .nav-links a{ color:#F2EFD9; }
  .nav.theme-light{
    background:rgba(242,239,217,0.82);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .nav.theme-light .nav-links a{ color:#1B1B1B; }
  .nav.theme-dark .nav-links a:hover,
  .nav.theme-dark .nav-links a:focus-visible,
  .nav.theme-light .nav-links a:hover,
  .nav.theme-light .nav-links a:focus-visible,
  .nav-links a:hover,
  .nav-links a:focus-visible{ color:#FF4A85; }
  .nav .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  .nav-logo{
    display:block;
    flex-shrink:0;
  }

  .nav-toggle{
    display:none;
    width:44px;
    height:44px;
    padding:9px;
    border:3px solid #1B1B1B;
    background:#F2EFD9;
    color:#1B1B1B;
    cursor:pointer;
  }
  .nav-toggle span{
    display:block;
    height:3px;
    margin:4px 0;
    background:currentColor;
    transition:transform 0.15s steps(2), opacity 0.15s steps(2);
  }
  .nav.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  @keyframes navFadeIn{
    from{ opacity:0; transform:translateY(-12px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .logo-img{
    height:clamp(64px, 5.5vw, 100px);
    width:auto;
    display:block;
    transform-origin:50% 60%;
  }
  .logo-img:hover{ animation:logoWiggle 0.5s ease-in-out; }

  @keyframes logoWiggle{
    0%{ transform:scale(1) rotate(0deg); }
    20%{ transform:scale(1.1) rotate(-10deg); }
    50%{ transform:scale(1.1) rotate(8deg); }
    75%{ transform:scale(1.1) rotate(-4deg); }
    100%{ transform:scale(1.1) rotate(0deg); }
  }

  .nav-links{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:24px;
  }
  .nav-links a{
    position:relative;
    display:inline-flex;
    align-items:center;
    font-family:'Press Start 2P', sans-serif;
    letter-spacing:0.03em;
    font-size:0.7rem;
    color:#1B1B1B;
    transition:color 0.15s ease;
  }
  .nav-links a::before{
    content:"";
    width:7px;
    height:7px;
    background:#FFD23F;
    margin-right:0;
    transform:scale(0);
    transition:transform 0.15s steps(1), margin-right 0.15s steps(1);
  }
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    height:2px;
    width:0%;
    background:#FFD23F;
    transition:width 0.15s steps(3);
  }
  .nav-links a:hover::before{
    transform:scale(1);
    margin-right:7px;
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-links a:hover{
    color:#FF4A85;
    animation:navPixelBounce 0.3s steps(4) 1;
  }

  @keyframes navPixelBounce{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
    100%{ transform:translateY(0); }
  }

  /* ---------- botones (simples) ---------- */
  .btn{
    display:inline-block;
    line-height:1;
    background:var(--bg);
    color:var(--text);
    font-size:0.8rem;
    padding:14px 24px;
    border-radius:0;
    border:4px solid var(--text);
    cursor:pointer;
    transition:transform 0.15s steps(2), box-shadow 0.15s steps(2), border-color 0.15s steps(2);
  }
  .btn:hover{
    border-color:var(--accent);
    transform:translateY(-6px);
    box-shadow:0 6px 0 0 #000000;
  }
  .btn:active{ transform:translateY(0); box-shadow:none; }
  .btn:focus-visible{ outline:3px solid #FFD23F; outline-offset:2px; }

  .btn-outline{
    display:inline-block;
    line-height:1;
    font-family:'Press Start 2P', sans-serif;
    letter-spacing:0.00em;
    background:var(--bg);
    color:var(--text);
    font-size:0.8rem;
    padding:12px 32px;
    border:4px solid var(--text);
    cursor:pointer;
    transition:transform 0.15s steps(2), box-shadow 0.15s steps(2), border-color 0.15s steps(2);
  }
  .btn-outline:hover{
    border-color:#FF4A85;
    transform:translateY(-6px);
    box-shadow:0 6px 0 0 rgba(27,27,27,0.85);
  }
  .btn-outline:active{ transform:translateY(0); box-shadow:none; }
  .btn-outline:focus-visible{ outline:3px solid var(--violeta); outline-offset:2px; }

  /* ---------- hero ---------- */
  .hero{ padding:0; }

  .hero-scene{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg);
  }

  /* capas del Hero: position:absolute + z-index */

  /* fondo celeste */
  .hero-sky{
    position:absolute;
    z-index:1;
    /* 6% extra por lado para el parallax de mouse */
    top:-6%;
    left:-6%;
    width:112%;
    height:112%;
    background-image:url('assets/fondo-hero.png');
    background-size:cover;
    background-position:center;
    /* blur para disimular una línea de la imagen */
    filter:blur(6px);
    pointer-events:none;
    will-change:transform;
  }

  /* textura de nubes a pantalla completa, encima del cielo */
  .hero-nubes-bg{
    position:absolute;
    z-index:2;
    top:-6%;
    left:-6%;
    width:112%;
    height:112%;
    background-image:url('assets/hero-nubes.png');
    background-size:cover;
    /* un poco más abajo que el centro */
    background-position:center 35%;
    /* blur para disimular la costura del patrón espejado */
    filter:blur(4px);
    pointer-events:none;
    will-change:transform;
  }

  /* nube suelta: wrapper se desliza solo, la <img> reacciona al mouse */
  .hero-cloud-wrap{
    position:absolute;
    left:-30%;
    z-index:3;
    pointer-events:none;
    animation-name:cloudDrift;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
  }
  @keyframes cloudDrift{
    from{ transform:translateX(0); }
    to{ transform:translateX(150vw); }
  }
  .hero-cloud{
    display:block;
    width:100%;
    height:auto;
    pointer-events:none;
    will-change:transform;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-cloud-wrap{ animation:none; }
  }

  /* interfaz (logo, texto, botón), centrada por encima de todo */
  .hero-content{
    position:relative;
    z-index:10;
    max-width:560px;
    margin:0 auto;
    padding:0 24px;
    text-align:center;
    animation:heroContentIn 0.9s ease-out both;
  }
  .hero-logo{
    display:block;
    width:100%;
    max-width:clamp(300px, 72vw, 520px);
    height:auto;
    margin:0 auto;
    filter:drop-shadow(0 6px 14px rgba(27,27,27,0.3));
    animation:pixelFloat 2.4s steps(4) infinite;
  }
  @keyframes pixelFloat{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-4px); }
    100%{ transform:translateY(0); }
  }
  .hero-content p{
    /* compensa el aire del logo */
    margin:clamp(-18px, -1.5vw, -8px) auto 0;
    max-width:34rem;
    font-family:'Quicksand', sans-serif;
    color:#1B1B1B;
    font-size:1.05rem;
  }
  .hero-cta{
    display:inline-block;
    margin-top:22px;
  }

  .hero-actions{
    position:absolute;
    right:32px;
    bottom:32px;
    z-index:10;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .hero-mini-btn{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    color:var(--bg);
    font-family:'Press Start 2P', sans-serif;
    font-size:0.7rem;
    text-transform:uppercase;
    transition:transform 0.15s ease;
  }
  .hero-mini-btn img{ filter:invert(1); }
  .hero-mini-btn:hover{ transform:translateY(-2px); }

  @keyframes heroContentIn{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:none; }
  }

  /* ---------- transición Hero -> Sombras (separador skyline) ---------- */
  .portal-divider{
    position:relative;
    z-index:2;
    /* la imagen trae su propio cielo pintado, por eso necesita más alto */
    height:420px;
    margin-top:-60px;
    /* respaldo por si la imagen no cubre el 100% del alto */
    background-color:var(--dark-bg);
    background-image:url('assets/separador-pixel.png');
    background-repeat:no-repeat;
    background-position:bottom center;
    background-size:cover;
    background-position:center bottom;
    image-rendering:pixelated;
    overflow:hidden;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }
  /* variante para cuando la sección de arriba es clara/beige (footer) */
  .portal-divider--beige{
    /* asset propio con cielo beige ya pintado, calza con Newsletter sin máscara */
    background-image:url('assets/separador-pixel-footer.png');
    height:320px;
    margin-top:-40px;
    -webkit-mask-image:none;
    mask-image:none;
  }
  /* pisa el fundido genérico de .reveal: esta franja siempre se ve */
  .js .portal-divider{
    opacity:1 !important;
    transform:scale(1) !important;
    transition:transform 0.5s steps(5) !important;
  }
  .js .portal-divider.in-view{
    transform:scale(1.06) !important;
  }

  /* ---------- sobre el juego ---------- */
  .about-game{
    position:relative;
    z-index:0;
    overflow:hidden;
    background:var(--dark-bg);
  }
  .about-game > .container{
    position:relative;
    z-index:1;
  }
  .about-game .divider span:nth-child(1){ background:#FFD23F; }
  .about-game .divider span:nth-child(2){ background:#FFD23F; opacity:0.7; }
  .about-game .divider span:nth-child(3){ background:#FFD23F; opacity:0.45; }

  /* fondo de partículas: cuadraditos que parpadean y flotan (steps) */
  .pixel-magic-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
  }
  .pixel-magic-bg span{
    position:absolute;
    width:8px;
    height:8px;
    will-change:transform, opacity;
    opacity:0;
    animation-name:pixelSparkle;
    animation-timing-function:steps(4);
    animation-iteration-count:infinite;
  }
  @keyframes pixelSparkle{
    0%{ opacity:0; transform:scale(0.4) translateY(0); }
    40%{ opacity:1; transform:scale(1.2) translateY(-6px); }
    70%{ opacity:0.8; transform:scale(0.9) translateY(-10px); }
    100%{ opacity:0; transform:scale(0.4) translateY(-14px); }
  }
  @media (prefers-reduced-motion: reduce){
    .pixel-magic-bg span{ animation:none; opacity:0; }
  }

  .about-game .section-title,
  .about-game .divider,
  .about-game .section-lede{
    text-align:left;
    justify-content:flex-start;
    margin-left:0;
  }
  .about-game-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:48px;
    align-items:center;
  }
  .about-game-text .section-lede{
    margin-top:22px;
  }

  .char-select{
    display:flex;
    justify-content:center;
    perspective:1200px;
    /* sombra acá y no en .char-card, para no romper su overflow:hidden */
    filter:drop-shadow(0 30px 40px rgba(0,0,0,0.5));
    transition:filter 0.2s ease-out;
  }
  .char-select:hover{ filter:drop-shadow(0 40px 50px rgba(0,0,0,0.6)); }
  .char-arrow{
    flex-shrink:0;
    width:32px;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    transition:transform 0.15s ease;
  }
  .char-arrow img{ display:block; width:100%; height:auto; }
  .char-arrow{ margin-top:2px; }
  .char-arrow:hover{ transform:scale(1.15); }
  .char-arrow:active{ transform:scale(0.95); }

  .char-card{
    position:relative;
    width:100%;
    max-width:500px;
    overflow:hidden;
    /* recorte extra para que el brillo no se salga de la card */
    clip-path:inset(0);
    will-change:transform;
    transition:transform 0.2s ease-out;
  }
  .char-card::after{
    content:"";
    position:absolute;
    top:8%;
    left:0;
    right:0;
    height:84%;
    z-index:2;
    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    transform:translateX(-160%);
    transition:transform 1s ease;
    pointer-events:none;
  }
  .char-card:hover::after{ transform:translateX(120%); }
  .char-portrait{
    display:block;
    width:100%;
    height:auto;
  }
  .char-card-footer{
    position:absolute;
    left:0;
    right:0;
    bottom:19%;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
  }
  .char-card-info{ text-align:center; }
  .char-card-info h3{
    font-family:'Jersey 15', sans-serif;
    font-size:1.15rem;
    text-transform:uppercase;
    color:#6D3E32;
  }
  .char-card-info p{
    font-family:'VT323', monospace;
    margin-top:-4px;
    color:rgba(109,62,50,0.75);
    font-size:1.1rem;
  }

  @media (max-width:720px){
    .about-game-grid{ grid-template-columns:1fr; }
    .about-game .section-title,
    .about-game .divider,
    .about-game .section-lede{ text-align:center; justify-content:center; margin:0 auto; }
    .char-select{ margin-top:12px; }
  }

  /* ---------- trailer ---------- */
  .trailer{ background:#F2EFD9; }
  .trailer .video-frame{ border-color:#1B1B1B; }
  .trailer .section-title{
    font-size:clamp(2.6rem, 11vw, 4.6rem);
    letter-spacing:0.12em;
  }
  .video-frame{
    position:relative;
    width:100%;
    max-width:780px;
    aspect-ratio:16/9;
    margin:40px auto 0;
    background-size:cover;
    background-position:center;
    border-radius:0;
    border:4px solid var(--dark-text);
    box-shadow:8px 8px 0 0 #000000;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .trailer-poster{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .video-overlay{
    position:absolute;
    inset:0;
    background:rgba(27,27,27,0.4);
  }
  .play-btn{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    background:none;
    border:none;
    cursor:pointer;
  }
  .play-icon{
    width:78px;
    height:78px;
    border-radius:50%;
    background:var(--magenta);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .play-icon svg{ margin-left:4px; }
  .play-btn span{
    font-family:'VT323', monospace;
    font-weight:700;
    font-size:1.15rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--dark-text);
  }
  .play-btn:hover .play-icon{ background:var(--accent); }

  .video-frame.playing .video-overlay,
  .video-frame.playing .play-btn{
    display:none;
  }

  .video-frame-player{
    position:absolute;
    inset:0;
    z-index:3;
    display:none;
  }
  .video-frame.playing .video-frame-player{ display:block; }
  .video-frame-player iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
  }

  /* ---------- galería ---------- */
  .screens{ background:#F2EFD9; }
  .screens .section-lede{ color:#1B1B1B; text-shadow:none; }
  .screens .divider span:nth-child(1){ background:#FFD23F; }
  .screens .divider span:nth-child(2){ background:#FFD23F; opacity:0.7; }
  .screens .divider span:nth-child(3){ background:#FFD23F; opacity:0.45; }
  .screens-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:48px;
  }
  .screen-item img{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:0;
    border:4px solid #1B1B1B;
    box-shadow:6px 6px 0 0 #000000;
    cursor:pointer;
    transition:transform 0.15s steps(2), border-color 0.15s steps(2);
  }
  .screen-item img:hover{
    border-color:var(--accent);
    transform:translateY(-4px);
  }
  .screen-item:nth-child(2), .screen-item:nth-child(5){ transition-delay:0.1s; }
  .screen-item:nth-child(3), .screen-item:nth-child(6){ transition-delay:0.2s; }
  .screen-item:nth-child(7){ transition-delay:0.15s; }

  .lightbox{
    position:fixed;
    inset:0;
    z-index:100;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  .lightbox.open{ display:flex; }
  .lightbox-backdrop{
    position:absolute;
    inset:0;
    background:rgba(27,27,27,0.92);
  }
  .lightbox-image{
    position:relative;
    z-index:2;
    max-width:min(90vw, 1100px);
    max-height:85vh;
    border-radius:12px;
    object-fit:contain;
  }
  .lightbox-close{
    position:absolute;
    z-index:3;
    top:20px;
    right:20px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:none;
    background:var(--magenta);
    color:var(--texto-magenta);
    font-size:1rem;
    cursor:pointer;
  }
  .lightbox-close:hover{ background:#7D7D7D; }
  .lightbox-prev, .lightbox-next{
    position:absolute;
    z-index:3;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border-radius:50%;
    border:none;
    background:rgba(243,243,243,0.15);
    color:var(--bg);
    font-size:1.8rem;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .lightbox-prev{ left:20px; }
  .lightbox-next{ right:20px; }
  .lightbox-prev:hover, .lightbox-next:hover{ background:var(--magenta); }

  /* ---------- equipo ---------- */
  .about{
    position:relative;
    z-index:0;
    background:var(--dark-bg);
    border-bottom:32px solid #FFD23F;
  }
  .about > .container{ position:relative; z-index:1; }

  .team-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    max-width:800px;
    margin:48px auto 0;
    perspective:1200px;
  }
  .team-card{
    background:var(--dark-card);
    border-radius:0;
    border:4px solid #F2EFD9;
    /* sombra dura + sombra suave para que se sienta despegada del fondo */
    box-shadow:8px 8px 0 0 #000000, 0 30px 45px -12px rgba(0,0,0,0.55);
    overflow:hidden;
    will-change:transform;
    /* fluido, no steps(): sigue al mouse en vivo */
    transition:transform 0.2s ease-out, box-shadow 0.2s ease-out;
  }
  .team-card:hover{
    box-shadow:14px 14px 0 0 #000000, 0 40px 55px -10px rgba(0,0,0,0.65);
  }
  .team-photo{
    position:relative;
    aspect-ratio:1/1;
  }
  .team-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .team-role{
    position:absolute;
    z-index:2;
    left:16px;
    bottom:16px;
    background:var(--magenta);
    color:var(--texto-magenta);
    font-family:'VT323', monospace;
    font-weight:700;
    font-size:0.85rem;
    letter-spacing:0.03em;
    text-transform:uppercase;
    padding:6px 12px;
    border-radius:6px;
  }
  .team-card:nth-child(1) .team-role{ background:#FF4A85; color:#F2EFD9; }
  .team-card:nth-child(2) .team-role{ background:#FFD23F; color:#1B1B1B; }
  .team-body{
    background:#F2EFD9;
    padding:22px 24px 26px;
    text-align:left;
  }
  .team-body h3{
    color:#1B1B1B;
    font-size:1.4rem;
    text-transform:uppercase;
  }
  .team-body p{
    margin-top:10px;
    font-family:'Quicksand', sans-serif;
    color:rgba(27,27,27,0.75);
    font-size:0.95rem;
  }
  .team-card:nth-child(2){ transition-delay:0.15s; }

  @media (max-width:720px){
    .team-grid{ grid-template-columns:1fr; }
    .screens-grid{ grid-template-columns:repeat(2, 1fr); }
  }

  /* ---------- disponible en ---------- */
  .platforms{ position:relative; z-index:0; background:var(--dark-bg); }
  .platforms > .container{ position:relative; z-index:1; }
  .platforms .section-title{ color:#FFD23F; }
  .platform-row{
    position:relative;
    z-index:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
    margin-top:40px;
  }
  .platform-link{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 22px;
    border-radius:0;
    font-family:'Press Start 2P', sans-serif;
    letter-spacing:0.03em;
    font-size:0.75rem;
    background:var(--bg);
    color:var(--dark-bg);
    border:4px solid #FFD23F;
    transition:transform 0.15s steps(2), box-shadow 0.15s steps(2), border-color 0.15s steps(2);
  }
  .platform-link:hover{
    border-color:var(--accent);
    transform:translateY(-6px);
    box-shadow:0 6px 0 0 #000000;
  }

  /* entrada escalonada de izquierda a derecha, pop tosco tipo menú de 16-bits */
  .js .platform-link{ opacity:0; }
  .js .platform-row.in-view .platform-link{
    animation:platformPop 0.35s steps(3) both;
  }
  .platform-link:nth-child(1){ animation-delay:0s; }
  .platform-link:nth-child(2){ animation-delay:0.08s; }
  .platform-link:nth-child(3){ animation-delay:0.16s; }
  @keyframes platformPop{
    from{ opacity:0; transform:scale(0.4); }
    to{ opacity:1; transform:scale(1); }
  }

  /* chispas al pasar el mouse; se borran de golpe al sacar el mouse (JS) */
  .spark-pixel{
    position:absolute;
    top:0;
    left:0;
    width:6px;
    height:6px;
    background:#FF4A85;
    z-index:0;
    pointer-events:none;
    transform:translate(-50%, -50%);
    animation:sparkBurst 0.45s steps(5) forwards;
  }
  @keyframes sparkBurst{
    0%{ transform:translate(-50%, -50%) translate(0, 0) scale(1); opacity:1; }
    100%{ transform:translate(-50%, -50%) translate(var(--sx), var(--sy)) scale(0.4); opacity:0; }
  }
  /* ---------- newsletter ---------- */
  .newsletter{ background:#F2EFD9; text-align:center; }
  .newsletter .section-lede{ color:#1B1B1B; text-shadow:none; }
  .newsletter .divider span:nth-child(1){ background:#FFD23F; }
  .newsletter .divider span:nth-child(2){ background:#FFD23F; opacity:0.7; }
  .newsletter .divider span:nth-child(3){ background:#FFD23F; opacity:0.45; }

  .newsletter-form{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0;
    margin-top:36px;
  }
  .newsletter-form input[type="email"]{
    flex:1 1 280px;
    max-width:340px;
    padding:12px 18px;
    border-radius:0;
    border:4px solid #FF4A85;
    border-right:none;
    background:var(--bg);
    color:var(--text);
    font-family:'Quicksand', sans-serif;
    font-weight:400;
    font-size:1rem;
    transition:border-color 0.15s steps(2);
  }
  .newsletter-form input[type="email"]::placeholder{ color:var(--text-muted); }
  .newsletter-form input[type="email"]:focus-visible{
    outline:3px solid #FFD23F;
    outline-offset:2px;
  }
  .newsletter-form .btn{ border-color:#FF4A85; }

  /* foco en campo o botón: ambos cambian a amarillo, como un solo bloque */
  .newsletter-form:focus-within input[type="email"],
  .newsletter-form:focus-within .btn{
    border-color:#FFD23F;
  }
  .newsletter-form .btn:active{ border-color:#FFD23F; }

  .newsletter-note{
    margin-top:16px;
    min-height:1.2em;
    color:rgba(27,27,27,0.65);
    font-size:0.9rem;
  }

  /* ---------- footer ---------- */
  footer{
    position:relative;
    z-index:0;
    background-color:var(--dark-bg);
    border-top:1px solid rgba(241,236,247,0.15);
    padding:48px 0;
    overflow:hidden;
  }
  footer > .pixel-magic-bg{ inset:8% 0 0; }
  footer > .pixel-magic-bg span{ width:clamp(5px, 0.55vw, 8px); height:clamp(5px, 0.55vw, 8px); }
  footer .container{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    text-align:center;
  }

  .footer-icons{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .icon-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:0;
    border:4px solid #FFD23F;
    background:var(--bg);
    transition:transform 0.15s steps(2), box-shadow 0.15s steps(2), border-color 0.15s steps(2);
  }
  .icon-link:hover{
    border-color:#FF4A85;
    transform:translateY(-6px);
    box-shadow:0 6px 0 0 #000000;
  }

  .discord-link{
    font-family:'Press Start 2P', sans-serif;
    letter-spacing:0.03em;
    font-size:0.75rem;
    text-transform:uppercase;
    color:var(--text);
    background:var(--bg);
    padding:12px 20px;
    border-radius:0;
    border:4px solid #FFD23F;
    display:inline-block;
    transition:transform 0.15s steps(2), box-shadow 0.15s steps(2), border-color 0.15s steps(2);
  }
  .discord-link:hover{
    border-color:#FF4A85;
    transform:translateY(-6px);
    box-shadow:0 6px 0 0 #000000;
  }

  .footer-contact{
    font-family:'Quicksand', sans-serif;
    color:rgba(241,236,247,0.75);
    font-size:0.9rem;
  }
  .footer-contact:hover{ color:#FF4A85; text-decoration:underline; }

  .footer-meta{
    font-family:'Quicksand', sans-serif;
    color:rgba(241,236,247,0.5);
    font-size:0.85rem;
  }

  /* ---------- responsive: navbar + hero en tablet ---------- */
  @media (max-width:960px){
    .nav .container{ gap:16px; }
    .nav-links{ gap:14px; }
    .nav-links a{ font-size:0.6rem; }
    .logo-img{ height:56px; }
    .hero-actions{ right:20px; bottom:20px; gap:8px; }
    .hero-mini-btn{ font-size:0.62rem; padding:8px 12px; }
  }

  @media (max-width:768px){
    html{ scroll-padding-top:132px; }

    /* navegación táctil: los enlaces aparecen dentro del menú hamburguesa */
    .nav{ padding:8px 0; }
    .nav .container{
      position:relative;
      min-height:44px;
      align-items:center;
    }
    .nav-toggle{ display:block; margin-left:auto; }
    .nav-links{
      display:none;
      position:absolute;
      top:calc(100% + 8px);
      left:16px;
      right:16px;
      z-index:2;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      padding:8px;
      background:rgba(242,239,217,0.98);
      border:3px solid #1B1B1B;
      box-shadow:5px 5px 0 #000000;
    }
    .nav.menu-open .nav-links{ display:flex; }
    .nav-links a{
      justify-content:center;
      min-height:44px;
      padding:10px 8px;
      color:#1B1B1B;
      font-size:0.6rem;
    }
    .nav-links a::before{
      display:block;
      flex:0 0 7px;
      margin-right:0;
    }
    .nav-links a:hover{ animation:none; }
    .logo-img{ height:42px; }

    /* el hero deja de centrar en una sola fila: apila contenido y accesos */
    .hero-scene{
      flex-direction:column;
      justify-content:center;
      min-height:100vh;
      min-height:100svh;
      min-height:100dvh;
      padding:150px 16px 48px;
      gap:24px;
    }
    .hero-content{ padding:0; }
    .hero-actions{
      position:static;
      right:auto;
      bottom:auto;
      justify-content:center;
      gap:10px;
      max-width:100%;
    }
    .hero-logo{ max-width:min(520px, 82vw); }
    .hero-content p{ max-width:34rem; }
  }

  /* ---------- responsive: pantallas chicas (celulares) ---------- */
  @media (max-width:640px){
    :root{ --section-pad:56px; }

    .about{ border-bottom-width:24px; }

    .container{ padding:0 16px; }

    .nav{ padding:8px 0; }
    .logo-img{ height:60px; }
    .hero-scene{ min-height:100vh; min-height:100svh; min-height:100dvh; padding:116px 14px 34px; gap:18px; }
    .hero-logo{ max-width:100%; }
    .hero-content p{ margin-top:-10px; max-width:34rem; font-size:clamp(0.92rem, 4.2vw, 1rem); line-height:1.45; }
    .hero-actions{ width:100%; flex-wrap:wrap; }
    .hero-mini-btn{ font-size:0.58rem; padding:8px 10px; }
    /* tope de ancho para las nubes en pantalla chica */
    .hero-cloud-wrap{ max-width:220px; }
    .pixel-magic-bg span{ width:6px; height:6px; }
    /* separador más chico en pantalla chica */
    .portal-divider{ height:220px; margin-top:-30px; }
    .portal-divider--beige{ height:110px; margin-top:-12px; }
    .btn{ font-size:0.85rem; padding:9px 18px; }
    .btn-outline{ font-size:0.55rem; padding:7px 16px; }
    .nav-links a{ font-size:0.58rem; }

    .section-lede{ font-size:0.95rem; }

    /* evita que los títulos pixelados fuercen scroll horizontal en móviles pequeños */
    .section-title{ font-size:clamp(1.35rem, 7vw, 2.2rem); }
    .trailer .section-title{ font-size:clamp(1.8rem, 10vw, 3.2rem); letter-spacing:0.06em; }

    .screens-grid{ grid-template-columns:1fr; }

    .platform-row{ gap:10px; }
    .platform-link{
      padding:9px 16px;
      font-size:0.6rem;
    }

    .lightbox-prev, .lightbox-next{ width:38px; height:38px; font-size:1.4rem; }
    .lightbox-prev{ left:8px; }
    .lightbox-next{ right:8px; }
    .lightbox-close{ top:10px; right:10px; }
  }

  @media (max-width:380px){
    .logo-img{ height:56px; }
    .btn{ font-size:0.78rem; padding:8px 14px; }
    .btn-outline{ font-size:0.5rem; padding:6px 12px; }
    .hero-logo{ max-width:100%; }
    .hero-mini-btn{ font-size:0.52rem; padding:7px 8px; gap:6px; }
  }

  @media (prefers-reduced-motion: reduce){
    .reveal{ transition:none; }
    .portal-divider{ transition:none; }
    .hero-logo{ animation:none; }
    .cursor-trail-dot, .spark-pixel{ animation:none; display:none; }
    .platform-link{ animation:none !important; }
  }