/* ============================================================
     ERNESTO PEREZ — sistema de diseño
     Paleta monocromática negro/rojo carmesí, con acentos blancos y
     grises metálicos — estética urbana, industrial y nocturna.
     Base heredada de Ethereal Glass + Asymmetrical Bento
     (taste-skill:soft-skill): cristal vantablack, doble-bisel en
     tarjetas clave, nav isla flotante.
     ============================================================ */

  :root{
    /* --- Base: negro OLED en tres profundidades --- */
    --bg: #050505;
    --bg-soft: #0C0D10;
    --bg-elevated: #14161B;
    --surface-glass: rgba(255, 255, 255, 0.035);
    --surface-glass-strong: rgba(255, 255, 255, 0.065);
    --border-soft: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* --- Acentos: gris metálico (secundario) + rojo carmesí (primario) ---
       Los nombres de variable (--blue/--pink) se conservan por compatibilidad
       con el resto de la hoja de estilos -- solo cambia el color que
       representan, de azul/rosa neón a gris metálico/carmesí. */
    --blue: #AEB4C2;
    --blue-deep: #33363E;
    --pink: #E8112C;
    --pink-deep: #55040F;
    --text: #F4F5FA;
    --muted: #9BA0B4;

    --status-green: #4ADE80;
    --status-yellow: #FFD23F;
    --status-red: #FF4D4D;

    /* --- Sombras: difusas y frías, nunca negro plano --- */
    --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 20px 44px -18px rgba(0,0,0,0.65);
    --shadow-lift: 0 4px 8px rgba(0,0,0,0.4), 0 32px 60px -20px rgba(0,0,0,0.7);
    --glow-pink: 0 0 0 1px rgba(232,17,44,0.35), 0 0 40px -6px rgba(232,17,44,0.5);
    --glow-blue: 0 0 0 1px rgba(174,180,194,0.3), 0 0 40px -6px rgba(174,180,194,0.35);
    /* Bisel interior — realce superior sutil, como metal maquinado */
    --bezel-highlight: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.05);

    /* --- Movimiento: cúbicas propias, física de resorte, nunca linear/ease-in-out por defecto --- */
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-press: 180ms;
    --dur-base: 320ms;
    --dur-entry: 900ms;

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-pill: 999px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  .hidden{ display:none !important; }
  html{ scroll-behavior:smooth; }

  ::selection{ background:var(--pink); color:#0A0005; }

  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:var(--bg-elevated); border-radius:99px; border:2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--muted); }
  html{ scrollbar-color:var(--bg-elevated) var(--bg); }

  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:100%;
    line-height:1.55;
    overflow-x:hidden;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }

  /* Halo radial fijo de fondo — pointer-events:none, position:fixed, nunca sobre contenedores con scroll (regla de rendimiento) */
  body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 900px 700px at 12% -8%, rgba(232,17,44,0.16), transparent 60%),
      radial-gradient(ellipse 800px 640px at 96% 18%, rgba(174,180,194,0.14), transparent 60%),
      radial-gradient(ellipse 700px 600px at 50% 100%, rgba(232,17,44,0.08), transparent 65%);
  }
  nav, main, .hero, .page-section, footer{ position:relative; z-index:1; }

  :focus-visible{
    outline:2px solid var(--pink);
    outline-offset:3px;
    border-radius:4px;
  }

  a{ color:inherit; }
  img, video{ max-width:100%; }

  .display{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
  }

  /* ------------------------------------------------------------
     Scroll reveal — fade-up + blur, nunca aparición estática
     ------------------------------------------------------------ */
  [data-reveal]{
    opacity:0;
    transform:translateY(3rem);
    filter:blur(10px);
    transition:opacity var(--dur-entry) var(--ease-out), transform var(--dur-entry) var(--ease-out), filter var(--dur-entry) var(--ease-out);
  }
  [data-reveal].is-visible{ opacity:1; transform:translateY(0); filter:blur(0); }
  [data-reveal-group] > *{
    opacity:0;
    transform:translateY(2.4rem);
    filter:blur(8px);
    transition:opacity var(--dur-entry) var(--ease-out), transform var(--dur-entry) var(--ease-out), filter var(--dur-entry) var(--ease-out);
  }
  [data-reveal-group].is-visible > *{ opacity:1; transform:translateY(0); filter:blur(0); }
  [data-reveal-group].is-visible > *:nth-child(1){ transition-delay:0ms; }
  [data-reveal-group].is-visible > *:nth-child(2){ transition-delay:80ms; }
  [data-reveal-group].is-visible > *:nth-child(3){ transition-delay:160ms; }
  [data-reveal-group].is-visible > *:nth-child(4){ transition-delay:240ms; }
  [data-reveal-group].is-visible > *:nth-child(5){ transition-delay:320ms; }
  [data-reveal-group].is-visible > *:nth-child(6){ transition-delay:400ms; }
  [data-reveal-group].is-visible > *:nth-child(n+7){ transition-delay:460ms; }

  @keyframes riseIn{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }
  /* Contenido insertado dinámicamente por JS (búsqueda, galería) */
  .song-row, .photo-tile, .preview-tile, .queue-item, .bolo-item, .mod-tile{
    animation:riseIn var(--dur-base) var(--ease-out) both;
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    [data-reveal], [data-reveal-group] > *{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
    .song-row, .photo-tile, .preview-tile, .queue-item, .bolo-item, .mod-tile{ animation:none !important; }
  }

  /* ------------------------------------------------------------
     NAV — isla flotante de cristal, nunca pegada al borde
     ------------------------------------------------------------ */
  /* nav.nav-island NUNCA lleva transform/filter/backdrop-filter propios:
     cualquiera de los tres crea un "containing block" para los
     descendientes position:fixed, y .nav-links (el menú a pantalla
     completa en móvil) es uno de ellos — quedaría atrapado dentro del
     propio pill en vez de cubrir el viewport. El cristal esmerilado vive
     en el ::before, que es hermano visual, no ancestro real. */
  nav.nav-island{
    position:fixed;
    top:1.1rem; left:0; right:0;
    margin-inline:auto;
    z-index:50;
    display:flex;
    align-items:center;
    gap:clamp(1rem, 3vw, 2.2rem);
    padding:0.7rem 0.9rem 0.7rem 1.3rem;
    width:max-content;
    max-width:calc(100vw - 2.4rem);
    border-radius:var(--radius-pill);
    transition:box-shadow var(--dur-base) var(--ease-out);
  }
  nav.nav-island::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    background:rgba(10,10,14,0.55);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-pill);
    box-shadow:var(--shadow-soft);
  }
  .logo-mark{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    transition:opacity var(--dur-press) var(--ease-out);
  }
  .logo-mark img{ height:32px; width:32px; object-fit:cover; object-position:center; border-radius:50%; display:block; }
  .logo-mark:hover{ opacity:0.7; }
  .nav-links{
    display:flex;
    gap:clamp(0.9rem, 2.4vw, 1.7rem);
    list-style:none;
  }
  .nav-links a{
    color:var(--text);
    text-decoration:none;
    font-size:0.86rem;
    font-weight:500;
    position:relative;
    padding-bottom:2px;
    white-space:nowrap;
  }
  .nav-links a::after{
    content:'';
    position:absolute;
    left:0; bottom:-2px;
    width:100%;
    height:2px;
    background:var(--pink);
    border-radius:2px;
    clip-path:inset(0 100% 0 0);
    transition:clip-path var(--dur-base) var(--ease-out);
  }
  .nav-links a:hover::after{ clip-path:inset(0 0 0 0); }

  /* Hamburguesa → X: dos barras que rotan y se centran */
  .nav-toggle{
    display:none;
    position:relative;
    z-index:61; /* por encima de .nav-links (60) — si no, el overlay a pantalla completa lo tapa y deja de poder cerrarse */
    align-items:center;
    justify-content:center;
    width:2.6rem;
    height:2.6rem;
    min-width:44px;
    min-height:44px;
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    border-radius:50%;
    cursor:pointer;
    flex:0 0 auto;
    transition:transform var(--dur-press) var(--ease-spring), background var(--dur-base) var(--ease-out);
  }
  .nav-toggle:active{ transform:scale(0.92); }
  .nav-toggle-bar{
    position:absolute;
    left:50%; top:50%;
    width:16px; height:2px;
    background:var(--text);
    border-radius:2px;
    transform:translate(-50%, -50%) translateY(-3px);
    transition:transform var(--dur-base) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
  }
  .nav-toggle-bar + .nav-toggle-bar{ transform:translate(-50%, -50%) translateY(3px); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar{ transform:translate(-50%, -50%) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar + .nav-toggle-bar{ transform:translate(-50%, -50%) rotate(-45deg); }

  @media (max-width: 760px){
    nav.nav-island{ gap:0.6rem; padding:0.6rem 0.6rem 0.6rem 1.1rem; }
    .nav-links{
      position:fixed;
      inset:0;
      z-index:60;
      background:rgba(5,5,8,0.86);
      backdrop-filter:blur(36px) saturate(160%);
      -webkit-backdrop-filter:blur(36px) saturate(160%);
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:1.8rem;
      opacity:0;
      pointer-events:none;
      transition:opacity var(--dur-base) var(--ease-out);
    }
    .nav-links.open{ opacity:1; pointer-events:auto; }
    .nav-links li{ overflow:hidden; }
    .nav-links a{
      font-family:'Space Grotesk', sans-serif;
      font-size:1.6rem;
      font-weight:600;
      display:block;
      transform:translateY(3rem);
      opacity:0;
      transition:transform var(--dur-entry) var(--ease-spring), opacity var(--dur-entry) var(--ease-out);
    }
    .nav-links.open a{ transform:translateY(0); opacity:1; }
    .nav-links.open li:nth-child(1) a{ transition-delay:60ms; }
    .nav-links.open li:nth-child(2) a{ transition-delay:110ms; }
    .nav-links.open li:nth-child(3) a{ transition-delay:160ms; }
    .nav-links.open li:nth-child(4) a{ transition-delay:210ms; }
    .nav-links.open li:nth-child(5) a{ transition-delay:260ms; }
    .nav-links.open li:nth-child(6) a{ transition-delay:310ms; }
    .nav-links.open li:nth-child(7) a{ transition-delay:360ms; }
    .nav-toggle{ display:flex; }
  }

  /* ------------------------------------------------------------
     BOTONES — píldora, doble-bisel, icono anidado (button-in-button)
     ------------------------------------------------------------ */
  .btn{
    position:relative;
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:700;
    font-size:0.92rem;
    padding:0.85rem 1.6rem;
    border-radius:var(--radius-pill);
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    transition:transform var(--dur-press) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  }
  .btn:active{ transform:scale(0.97); }
  .btn-primary{
    background:linear-gradient(135deg, var(--pink) 0%, #C71D78 100%);
    color:#0A0005;
    box-shadow:var(--bezel-highlight), var(--shadow-soft);
  }
  @media (hover: hover) and (pointer: fine){
    .btn-primary:hover{ box-shadow:var(--bezel-highlight), var(--glow-pink); transform:translateY(-2px); }
  }
  .btn-secondary{
    background:var(--surface-glass);
    border-color:var(--border-strong);
    color:var(--text);
  }
  @media (hover: hover) and (pointer: fine){
    .btn-secondary:hover{ border-color:var(--blue); background:var(--surface-glass-strong); box-shadow:var(--glow-blue); }
  }

  /* ------------------------------------------------------------
     HERO
     ------------------------------------------------------------ */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:7rem clamp(1.2rem, 6vw, 5rem) 0;
    overflow:hidden;
  }

  .eyebrow-line{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--blue);
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    padding:0.4rem 0.9rem;
    border-radius:var(--radius-pill);
    margin-bottom:1.6rem;
    max-width:max-content;
  }

  @keyframes heroIn{
    from{ opacity:0; transform:translateY(2.4rem); filter:blur(8px); }
    to{ opacity:1; transform:translateY(0); filter:blur(0); }
  }
  .hero .eyebrow-line, .hero h1.name, .hero .tagline, .hero .cta-row{
    animation:heroIn var(--dur-entry) var(--ease-out) both;
  }
  .hero .eyebrow-line{ animation-delay:60ms; }
  .hero h1.name{ animation-delay:150ms; }
  .hero .tagline{ animation-delay:320ms; }
  .hero .cta-row{ animation-delay:460ms; }
  @media (prefers-reduced-motion: reduce){
    .hero .eyebrow-line, .hero h1.name, .hero .tagline, .hero .cta-row{ animation:none; }
  }

  h1.name{
    position:relative;
    z-index:2;
    font-size:clamp(3.2rem, 11vw, 8rem);
    line-height:0.94;
    letter-spacing:-0.02em;
  }
  h1.name .line2{
    display:block;
    background:linear-gradient(100deg, var(--pink) 10%, var(--blue) 90%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .tagline{
    position:relative;
    z-index:2;
    max-width:38ch;
    margin-top:1.6rem;
    font-size:clamp(1rem, 1.6vw, 1.15rem);
    color:var(--muted);
    font-weight:500;
    line-height:1.65;
  }

  .cta-row{
    position:relative;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:2.6rem;
  }

  /* ------------------------------------------------------------
     TICKER
     ------------------------------------------------------------ */
  .ticker-wrap{
    position:relative;
    z-index:2;
    margin-top:4rem;
    border-top:1px solid var(--border-soft);
    border-bottom:1px solid var(--border-soft);
    background:var(--surface-glass);
    color:var(--muted);
    overflow:hidden;
    white-space:nowrap;
    padding:0.9rem 0;
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .ticker{
    display:inline-block;
    font-family:'Space Grotesk', sans-serif;
    font-size:0.95rem;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--text);
    animation:scroll 26s linear infinite;
  }
  .ticker span{ margin:0 1.4rem; }
  @keyframes scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .ticker.ticker-static{
    display:flex;
    justify-content:center;
    width:100%;
    animation:none;
  }

  @media (prefers-reduced-motion: reduce){
    .ticker{ animation:none; }
  }

  /* FONDO DEL HERO — visual real del DJ (vídeo), cubre toda la sección */
  .hero-visual{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
  }
  .hero-visual video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    /* Mismo tratamiento en blanco y negro que las fotos del resto de
       páginas (ver .section-portrait) -- todo el sitio comparte un único
       lenguaje visual en vez de que cada foto/vídeo se vea "puesto encima"
       con sus propios colores originales. */
    filter:grayscale(1) contrast(1.1) brightness(0.85);
  }
  /* Tinte de marca (duotono carmesí/gris), igual que en .section-portrait */
  .hero-visual::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, var(--pink-deep) 0%, transparent 55%, var(--blue-deep) 100%);
    mix-blend-mode:color;
    opacity:0.9;
  }
  .hero-scrim{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.32) 42%, rgba(5,5,5,0.78) 100%),
      linear-gradient(90deg, rgba(5,5,5,0.8) 0%, rgba(5,5,5,0.3) 55%, rgba(5,5,5,0.12) 100%);
  }

  /* ------------------------------------------------------------
     PRÓXIMO BOLO (portada) — tarjeta de doble-bisel real
     ------------------------------------------------------------ */
  .next-bolo-section{
    position:relative;
    padding:3rem clamp(1.2rem, 6vw, 5rem) 4rem;
  }
  .next-bolo-card{
    display:flex;
    align-items:center;
    gap:1.8rem;
    max-width:900px;
    margin:0 auto;
    padding:0.5rem;
    border-radius:calc(var(--radius-lg) + 6px);
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
  }
  .next-bolo-card > .next-bolo-photo,
  .next-bolo-card > .next-bolo-body{
    background:var(--bg-soft);
  }
  .next-bolo-card{
    /* núcleo interior: mismo padding en todos los lados, fondo propio */
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:0;
    background:var(--surface-glass);
  }
  .next-bolo-photo{
    flex:0 0 auto;
    width:104px;
    height:104px;
    margin:0.9rem;
    border-radius:calc(var(--radius-lg) + 6px - 0.9rem);
    background:linear-gradient(155deg, var(--pink-deep), var(--blue-deep));
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-shadow:var(--bezel-highlight);
  }
  .next-bolo-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
  .next-bolo-photo svg{ color:rgba(244,245,250,0.85); }
  .next-bolo-body{
    padding:1.4rem 1.6rem 1.4rem 0.2rem;
    border-radius:0 calc(var(--radius-lg) + 6px - 0.9rem) calc(var(--radius-lg) + 6px - 0.9rem) 0;
    min-width:0;
  }
  .next-bolo-artist{
    font-size:clamp(1.2rem, 3vw, 1.6rem);
    margin:0.15rem 0 1rem;
  }
  .next-bolo-gig{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1.2rem;
  }
  .next-bolo-info{ min-width:0; }
  .next-bolo-card .btn-secondary{ padding:0.6rem 1.2rem; font-size:0.82rem; }
  @media (max-width: 560px){
    .next-bolo-card{ grid-template-columns:1fr; text-align:left; }
    .next-bolo-photo{ width:64px; height:64px; }
    .next-bolo-body{ padding:0 1.2rem 1.2rem; border-radius:0 0 calc(var(--radius-lg) + 6px - 0.9rem) calc(var(--radius-lg) + 6px - 0.9rem); }
  }

  /* ------------------------------------------------------------
     SECCIONES — cabecera común, macro-whitespace
     ------------------------------------------------------------ */
  .section-head{ margin-bottom:2.8rem; max-width:48ch; }
  .eyebrow-line.small{ font-size:0.68rem; margin-bottom:0.9rem; }
  .section-title{
    font-size:clamp(2rem, 5.4vw, 3.4rem);
    line-height:1.04;
    letter-spacing:-0.015em;
  }

  /* Cabecera de página con foto del artista -- presencia de marca
     consistente en todas las páginas, no solo en Inicio. En vez de un
     avatar suelto, la foto se funde con el fondo negro (mismo recurso que
     el scrim del vídeo del hero) y lleva el mismo tinte carmesí/gris que
     el resto de la web, para que se sienta parte de la página y no "una
     foto puesta encima". */
  .section-head-row{
    position:relative;
    min-height:400px;
    display:flex;
    align-items:center;
    margin-bottom:2.8rem;
    border-radius:var(--radius-lg);
    overflow:hidden;
  }
  .section-head-row .section-head{
    position:relative;
    z-index:1;
    margin-bottom:0;
    max-width:min(46ch, 54%);
    padding:2rem clamp(1rem, 3vw, 2rem);
  }
  .section-portrait{
    position:absolute;
    inset:0;
    z-index:0;
  }
  .section-portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
    /* --pos-desktop/--pos-mobile se fijan por foto (inline, en la plantilla)
       porque cada foto tiene la cara en un sitio distinto y el recorte de
       escritorio (fila ancha y baja) necesita una posición muy distinta a
       la de móvil (franja alta y estrecha) para la MISMA imagen. */
    object-position:var(--pos-desktop, 50% 35%);
    display:block;
    filter:grayscale(1) contrast(1.1) brightness(0.92);
  }
  /* Dos fotos combinadas en vez de una sola estirada muy ancha -- cada
     mitad recorta mucho menos (solo necesita cubrir la mitad del ancho),
     así se ve mejor la cara en vez de un recorte panorámico agresivo. */
  .section-portrait.duo{ display:flex; }
  .section-portrait.duo img{ width:auto; flex:1 1 0; min-width:0; }
  /* Menos recortada -- se ve la foto entera en vez de un primer plano */
  .section-portrait.zoom-out img{ object-fit:contain; object-position:center; }
  /* Tinte de marca (duotono carmesí/gris) sobre la foto en blanco y negro */
  .section-portrait::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, var(--pink-deep) 0%, transparent 55%, var(--blue-deep) 100%);
    mix-blend-mode:color;
    opacity:0.75;
  }
  /* Funde el lado de la foto que toca el texto -- el resto se queda bien
     visible, nunca un canto recto contra el fondo */
  .section-portrait::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, var(--bg) 0%, rgba(5,5,5,0.85) 18%, transparent 48%);
  }
  @media (max-width: 760px){
    .section-head-row{
      flex-direction:column;
      align-items:stretch;
      min-height:0;
    }
    .section-head-row .section-head{ max-width:100%; padding:1.5rem 1.2rem 1.8rem; }
    .section-portrait{
      position:relative;
      inset:auto;
      order:-1;
      height:320px;
    }
    .section-portrait img{ object-position:var(--pos-mobile, 50% 22%); }
    .section-portrait::after{
      background:linear-gradient(180deg, transparent 55%, var(--bg) 100%);
    }
  }

  /* GALERÍA */
  .gallery-section{
    position:relative;
    padding:9rem clamp(1.2rem, 6vw, 5rem) 6rem;
  }

  .gallery-tabs{
    display:flex;
    gap:0.6rem;
    margin-bottom:2.4rem;
    flex-wrap:wrap;
  }
  .tab-btn{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:700;
    font-size:0.86rem;
    padding:0.7rem 1.3rem;
    border-radius:var(--radius-pill);
    border:1px solid var(--border-strong);
    background:var(--surface-glass);
    color:var(--text);
    cursor:pointer;
    transition:all var(--dur-base) var(--ease-out);
  }
  .tab-btn:active{ transform:scale(0.97); }
  .tab-btn.active{
    background:var(--pink);
    border-color:var(--pink);
    color:#0A0005;
    box-shadow:var(--glow-pink);
  }

  .tab-panel.hidden{ display:none; }
  .panel-hint{
    font-weight:600;
    margin-bottom:1rem;
    color:var(--text);
  }

  .date-pills{
    display:flex;
    gap:0.7rem;
    overflow-x:auto;
    padding-bottom:0.6rem;
    margin-bottom:2rem;
  }
  .date-pill{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.15rem;
    padding:0.7rem 1.1rem;
    border-radius:var(--radius-sm);
    border:1px solid var(--border-strong);
    background:var(--surface-glass);
    color:var(--text);
    cursor:pointer;
    font-family:'Plus Jakarta Sans', sans-serif;
    min-width:120px;
    transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-spring);
  }
  .date-pill:active{ transform:scale(0.97); }
  .date-pill strong{ font-size:0.98rem; font-family:'Space Grotesk', sans-serif; }
  .date-pill span{ font-size:0.76rem; color:var(--muted); }
  .date-pill.active{
    border-color:var(--blue);
    background:rgba(174,180,194,0.1);
  }
  .date-pill.active span{ color:var(--blue); }

  .dropzone{
    border:1.5px dashed var(--border-strong);
    border-radius:var(--radius-lg);
    padding:3.2rem 1.5rem;
    text-align:center;
    cursor:pointer;
    transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  }
  .dropzone:hover{ border-color:var(--muted); }
  .dropzone.drag-over{
    border-color:var(--pink);
    background:rgba(232,17,44,0.05);
  }
  .dropzone svg{ width:38px; height:38px; margin-bottom:1rem; opacity:0.85; stroke-width:1.4; }
  .dropzone p{ font-weight:600; }
  .link-text{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
  .fineprint{
    margin-top:0.9rem;
    font-size:0.8rem;
    font-weight:400;
    color:var(--muted);
    max-width:42ch;
    margin-left:auto;
    margin-right:auto;
    line-height:1.55;
  }

  .preview-grid, .photo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:1rem;
    margin-top:1.8rem;
  }
  .preview-tile, .photo-tile{
    position:relative;
    aspect-ratio:1/1;
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--bg-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-soft);
  }
  .preview-tile img, .preview-tile video{
    width:100%; height:100%; object-fit:cover;
  }
  .photo-tile img, .photo-tile video{
    width:100%; height:100%; object-fit:cover;
    transition:transform var(--dur-entry) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine){
    .photo-tile:hover img, .photo-tile:hover video{ transform:scale(1.05); }
  }
  .preview-tag{
    position:absolute;
    bottom:0.5rem; left:0.5rem;
    background:rgba(5,5,8,0.8);
    color:var(--pink);
    font-size:0.64rem;
    font-weight:700;
    padding:0.25rem 0.55rem;
    border-radius:var(--radius-pill);
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  .photo-tile{
    background:linear-gradient(155deg, var(--tile-a, #1A0509), var(--tile-b, #33363E));
    color:rgba(244,245,250,0.85);
    cursor:pointer;
    transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine){
    .photo-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
  }
  .photo-tile svg{ width:32px; height:32px; opacity:0.85; stroke-width:1.4; }

  #submitUpload{ margin-top:2rem; border:none; }
  #submitUpload:disabled{ opacity:0.4; cursor:not-allowed; }
  .empty-state{
    color:var(--muted);
    font-size:0.95rem;
    padding:1rem 0;
  }

  /* ------------------------------------------------------------
     PETICIONES DE CANCIONES
     ------------------------------------------------------------ */
  .request-section{
    position:relative;
    padding:9rem clamp(1.2rem, 6vw, 5rem) 7rem;
  }
  .request-single{ max-width:640px; }
  .request-intro p{
    color:var(--muted);
    font-size:1rem;
    line-height:1.65;
    margin-top:1.1rem;
    max-width:44ch;
  }

  .search-box{
    display:flex;
    align-items:center;
    gap:0.7rem;
    border:1px solid var(--border-strong);
    background:var(--surface-glass);
    border-radius:var(--radius-md);
    padding:1rem 1.2rem;
    margin-top:2.4rem;
    transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  }
  .search-box:focus-within{ border-color:var(--blue); background:var(--surface-glass-strong); box-shadow:var(--glow-blue); }
  .search-box svg{ flex:0 0 auto; width:19px; height:19px; color:var(--muted); stroke-width:1.5; }
  .search-box input{
    flex:1;
    background:none;
    border:none;
    outline:none;
    color:var(--text);
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:1rem;
  }
  .search-box input::placeholder{ color:var(--muted); }

  .results-list{ margin-top:1.4rem; display:flex; flex-direction:column; gap:0.7rem; }
  .song-row{
    display:flex;
    align-items:center;
    gap:0.9rem;
    padding:0.75rem;
    border-radius:var(--radius-md);
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    box-shadow:var(--bezel-highlight);
    transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine){
    .song-row:hover{ background:var(--surface-glass-strong); border-color:var(--border-strong); }
  }
  .song-art{
    width:46px; height:46px;
    border-radius:10px;
    flex:0 0 auto;
    background:linear-gradient(155deg, var(--tile-a, #1A0509), var(--tile-b, #33363E));
    overflow:hidden;
  }
  .song-art img{ width:100%; height:100%; object-fit:cover; display:block; }
  .song-info{ flex:1; min-width:0; }
  .song-title{ font-weight:700; font-size:0.95rem; font-family:'Space Grotesk', sans-serif; }
  .song-meta{
    display:flex;
    align-items:center;
    gap:0.4rem;
    font-size:0.78rem;
    color:var(--muted);
  }
  .verified-badge{
    display:inline-flex;
    align-items:center;
    gap:0.25rem;
    color:var(--blue);
    font-weight:700;
  }
  .request-btn{
    flex:0 0 auto;
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:700;
    font-size:0.78rem;
    padding:0.5rem 1rem;
    border-radius:var(--radius-pill);
    border:1px solid var(--pink);
    background:transparent;
    color:var(--text);
    cursor:pointer;
    transition:background var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-spring);
  }
  .request-btn:active{ transform:scale(0.95); }
  @media (hover: hover) and (pointer: fine){
    .request-btn:hover{ background:var(--pink); color:#0A0005; }
  }
  .request-btn:disabled{
    border-color:var(--blue);
    color:var(--blue);
    cursor:default;
    background:transparent;
  }

  .not-found{
    margin-top:1.3rem;
    padding:1.1rem 1.2rem;
    border-radius:var(--radius-md);
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    color:var(--muted);
    font-size:0.9rem;
    line-height:1.5;
  }

  .dj-section{
    position:relative;
    padding:6rem clamp(1.2rem, 6vw, 5rem) 7rem;
    border-top:1px solid var(--border-soft);
  }
  .dj-lock-note{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.8rem;
    font-weight:600;
    color:var(--muted);
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-pill);
    padding:0.5rem 1rem;
    margin-bottom:1.8rem;
  }

  /* ------------------------------------------------------------
     ADMIN: cola de peticiones
     ------------------------------------------------------------ */
  .queue-list{
    display:flex;
    flex-direction:column;
    gap:0.9rem;
    max-width:720px;
    border-radius:var(--radius-lg);
    transition:box-shadow var(--dur-entry) var(--ease-out);
  }
  .queue-list.queue-list-flash{ box-shadow:var(--glow-pink); }
  .queue-limit-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    max-width:720px;
    margin-bottom:1.2rem;
    padding:1rem 1.2rem;
    border-radius:var(--radius-md);
    background:rgba(255,60,60,0.1);
    border:1px solid var(--status-red);
  }
  .queue-limit-banner p{
    margin:0;
    font-size:0.85rem;
    font-weight:600;
    color:var(--text);
  }
  .queue-limit-banner button{
    flex:0 0 auto;
    padding:0.6rem 1.1rem;
    border-radius:var(--radius-pill);
    border:none;
    background:var(--status-red);
    color:#fff;
    font-weight:700;
    font-size:0.82rem;
    cursor:pointer;
    transition:opacity var(--dur-press) var(--ease-out);
  }
  .queue-limit-banner button:disabled{ opacity:0.4; cursor:not-allowed; }
  .queue-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    padding:1.1rem 1.2rem;
    border-radius:var(--radius-md);
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    border-left:3px solid var(--status-yellow);
    box-shadow:var(--bezel-highlight);
  }
  .queue-item[data-status="playing"]{ border-left-color:var(--status-green); }
  .queue-item[data-status="queued"]{ border-left-color:var(--status-yellow); }
  .queue-item[data-status="rejected"]{ border-left-color:var(--status-red); opacity:0.6; }

  .queue-item .qtitle{ font-weight:700; font-size:0.95rem; font-family:'Space Grotesk', sans-serif; }
  .queue-item .qmeta{ color:var(--muted); font-size:0.78rem; }

  .status-btns{ display:flex; gap:0.4rem; flex-wrap:wrap; }
  .status-btn{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:600;
    font-size:0.72rem;
    padding:0.4rem 0.7rem;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    border-radius:var(--radius-pill);
    border:1px solid var(--border-strong);
    background:transparent;
    color:var(--text);
    cursor:pointer;
    transition:all var(--dur-base) var(--ease-out);
  }
  .status-btn:active{ transform:scale(0.95); }
  .status-btn.delete-btn{ border-color:var(--status-red); color:var(--status-red); padding:0.4rem 0.6rem; min-width:44px; justify-content:center; }
  .status-btn.delete-btn:hover{ background:var(--status-red); color:var(--bg); }
  .status-btn.playing.active{ background:var(--status-green); border-color:var(--status-green); color:#0A1408; }
  .status-btn.queued.active{ background:var(--status-yellow); border-color:var(--status-yellow); color:#1A1200; }
  .status-btn.rejected.active{ background:var(--status-red); border-color:var(--status-red); color:var(--text); }

  /* GESTIÓN DE BOLOS (panel admin) */
  .bolo-list{ display:flex; flex-direction:column; gap:0.9rem; max-width:720px; }
  .bolo-item{
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    padding:0.9rem 1.2rem;
    border-radius:var(--radius-md);
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    border-left:3px solid var(--pink);
    box-shadow:var(--bezel-highlight);
  }
  .bolo-item[data-status="cancelado"]{ border-left-color:var(--status-red); opacity:0.6; }
  .bolo-list-thumb{
    flex:0 0 auto;
    width:52px;
    height:52px;
    border-radius:12px;
    background:linear-gradient(155deg, var(--pink-deep), var(--blue-deep)) center/cover no-repeat;
  }
  .bolo-item-info{ flex:1 1 auto; min-width:0; }
  .user-list{ display:flex; flex-direction:column; gap:0.7rem; max-width:720px; }
  .user-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:0.8rem 1.1rem;
    border-radius:var(--radius-md);
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
  }
  .user-item .username{ font-weight:700; font-family:'Space Grotesk', sans-serif; }
  .user-item .you-tag{
    margin-left:0.5rem;
    padding:0.1rem 0.5rem;
    border-radius:var(--radius-pill);
    background:rgba(174,180,194,0.18);
    color:var(--blue);
    font-size:0.66rem;
    font-weight:700;
    vertical-align:middle;
  }
  .cancel-tag{
    display:inline-block;
    margin-left:0.4rem;
    padding:0.1rem 0.5rem;
    border-radius:var(--radius-pill);
    background:rgba(255,60,60,0.18);
    color:var(--status-red);
    font-size:0.66rem;
    font-weight:700;
    vertical-align:middle;
  }
  .bpm-tag{
    display:inline-block;
    padding:0.1rem 0.5rem;
    border-radius:var(--radius-pill);
    background:rgba(174,180,194,0.18);
    color:var(--blue);
    font-size:0.66rem;
    font-weight:700;
    vertical-align:middle;
  }
  .bpm-tag-unknown{
    background:var(--surface-glass);
    color:var(--muted);
  }
  .bpm-tag-estimado{
    background:transparent;
    color:var(--muted);
    border:1px dashed var(--border-strong);
  }

  /* ------------------------------------------------------------
     BOLOS (público) — Asymmetrical Bento
     ------------------------------------------------------------ */
  .bolos-section{
    position:relative;
    padding:9rem clamp(1.2rem, 6vw, 5rem) 6rem;
  }
  .bolos-list{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:1rem;
    max-width:1100px;
  }
  .bolo-card{
    grid-column:span 6;
    display:flex;
    align-items:center;
    gap:1.3rem;
    padding:1.2rem 1.5rem 1.2rem 1.1rem;
    border-radius:var(--radius-lg);
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    box-shadow:var(--bezel-highlight);
    position:relative;
    transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  }
  /* Bento asimétrico: la primera tarjeta ocupa el doble de ancho en desktop */
  .bolos-list .bolo-card:first-child{ grid-column:span 6; }
  .bolos-list .bolo-card:nth-child(2),
  .bolos-list .bolo-card:nth-child(3){ grid-column:span 3; flex-direction:column; align-items:flex-start; text-align:left; }
  @media (hover: hover) and (pointer: fine){
    .bolo-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); background:var(--surface-glass-strong); }
  }
  .bolo-thumb{
    flex:0 0 auto;
    width:76px;
    height:76px;
    border-radius:var(--radius-md);
    background:linear-gradient(155deg, var(--tile-a, #1A0509), var(--tile-b, #33363E));
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(244,245,250,0.85);
    box-shadow:var(--shadow-soft);
  }
  .bolo-thumb svg{ width:26px; height:26px; stroke-width:1.4; }
  .bolo-thumb.privado-thumb{
    background:var(--bg);
    border:1.5px dashed var(--border-strong);
    color:var(--muted);
  }
  .bolo-date{
    flex:0 0 auto;
    width:5.2rem;
    text-align:center;
  }
  .bolo-date .day{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:1.9rem;
    line-height:1;
    color:var(--pink);
  }
  .bolo-date .month{
    font-size:0.74rem;
    font-weight:600;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  .bolo-info{ flex:1; padding-left:1rem; min-width:0; }
  .bolo-name{ font-weight:700; font-size:1.05rem; font-family:'Space Grotesk', sans-serif; }
  .bolo-venue{ color:var(--muted); font-size:0.88rem; margin-top:0.2rem; }
  .bolo-meta{
    display:flex;
    align-items:center;
    gap:0.6rem;
    margin-top:0.6rem;
    flex-wrap:wrap;
  }
  .type-badge{
    font-size:0.68rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.03em;
    padding:0.3rem 0.7rem;
    border-radius:var(--radius-pill);
  }
  .type-badge.discoteca{ background:rgba(232,17,44,0.16); color:var(--pink); }
  .type-badge.festival{ background:rgba(174,180,194,0.16); color:var(--blue); }
  .type-badge.privado{ background:rgba(155,160,180,0.16); color:var(--muted); }
  .type-badge.cancelado{ background:rgba(255,77,77,0.16); color:var(--status-red); }
  .type-badge.bar{ background:rgba(74,222,128,0.16); color:var(--status-green); }
  .type-badge.fiesta{ background:rgba(232,17,44,0.2); color:var(--pink); border:1px solid rgba(174,180,194,0.3); }
  .bolo-card.is-cancelado{ opacity:0.5; }
  .bolo-card.is-cancelado .bolo-thumb{ filter:grayscale(1); }
  .bolo-city{ font-size:0.82rem; color:var(--text); }
  .bolo-city.hidden-city{ color:var(--muted); font-style:italic; }
  .bolo-hora{ font-size:0.82rem; color:var(--muted); }

  @media (max-width: 760px){
    .bolos-list{ grid-template-columns:1fr; }
    .bolos-list .bolo-card,
    .bolos-list .bolo-card:first-child,
    .bolos-list .bolo-card:nth-child(2),
    .bolos-list .bolo-card:nth-child(3){ grid-column:span 1; flex-direction:row; align-items:center; text-align:left; }
  }
  @media (max-width: 560px){
    .bolo-thumb{ width:52px; height:52px; }
    .bolo-date{ width:3.2rem; }
    .bolo-date .day{ font-size:1.4rem; }
  }

  /* ------------------------------------------------------------
     MULTIMEDIA — muro editorial
     ------------------------------------------------------------ */
  .media-section{
    padding:9rem clamp(1.2rem, 6vw, 5rem) 6rem;
  }
  .media-mosaic{ columns:3; column-gap:1rem; }
  .media-tile{
    position:relative;
    display:block;
    break-inside:avoid;
    margin-bottom:1rem;
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--bg-soft);
    box-shadow:var(--shadow-soft);
  }
  .media-tile img, .media-tile video{
    width:100%;
    height:auto;
    display:block;
    transition:transform var(--dur-entry) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine){
    .media-tile:hover img, .media-tile:hover video{ transform:scale(1.04); }
  }
  .media-tile .play-badge{
    position:absolute;
    top:0.6rem; right:0.6rem;
    width:30px; height:30px;
    border-radius:50%;
    background:rgba(5,5,8,0.65);
    backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
  }
  .media-tile .play-badge svg{ width:14px; height:14px; color:var(--text); }
  .media-tile .media-label{
    position:absolute;
    left:0.7rem; bottom:0.7rem;
    font-size:0.7rem;
    font-weight:600;
    color:var(--text);
    background:rgba(5,5,8,0.65);
    backdrop-filter:blur(8px);
    padding:0.22rem 0.6rem;
    border-radius:var(--radius-pill);
  }
  @media (max-width: 720px){ .media-mosaic{ columns:2; } }
  @media (max-width: 460px){ .media-mosaic{ columns:1; } }

  /* ------------------------------------------------------------
     REDES SOCIALES — bento asimétrico
     ------------------------------------------------------------ */
  .social-section{
    padding:9rem clamp(1.2rem, 6vw, 5rem) 6rem;
  }
  .social-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1rem;
    max-width:960px;
  }
  .social-grid a:first-child{ grid-column:span 4; }
  .social-grid a:nth-child(2),
  .social-grid a:nth-child(3),
  .social-grid a:nth-child(4){ grid-column:span 2; flex-direction:column; align-items:flex-start; gap:0.8rem; }
  @media (max-width: 760px){
    .social-grid{ grid-template-columns:1fr; }
    .social-grid a, .social-grid a:first-child, .social-grid a:nth-child(2), .social-grid a:nth-child(3), .social-grid a:nth-child(4){
      grid-column:span 1; flex-direction:row; align-items:center;
    }
  }
  .social-card{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1.3rem;
    border-radius:var(--radius-lg);
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    box-shadow:var(--bezel-highlight);
    text-decoration:none;
    color:var(--text);
    transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine){
    .social-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); background:var(--surface-glass-strong); box-shadow:var(--bezel-highlight), var(--shadow-lift); }
  }
  .social-card:active{ transform:scale(0.98); }
  .social-icon{
    flex:0 0 auto;
    width:46px; height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(232,17,44,0.14);
    color:var(--pink);
  }
  .social-icon svg{ width:21px; height:21px; stroke-width:1.4; }
  .social-name{ font-weight:700; font-size:0.98rem; font-family:'Space Grotesk', sans-serif; }
  .social-handle{ color:var(--muted); font-size:0.82rem; }
  .social-follow{
    margin-left:auto;
    font-size:0.76rem;
    font-weight:700;
    color:var(--blue);
    white-space:nowrap;
  }

  /* ------------------------------------------------------------
     CONTACTO
     ------------------------------------------------------------ */
  .contact-section{
    padding:9rem clamp(1.2rem, 6vw, 5rem) 7rem;
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:start;
  }
  @media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-intro{
    color:var(--muted);
    max-width:42ch;
    margin-top:1.1rem;
    line-height:1.65;
  }
  .contact-direct{
    display:flex;
    flex-direction:column;
    gap:0.7rem;
    margin-top:1.8rem;
  }
  .contact-line{
    color:var(--text);
    text-decoration:none;
    font-weight:600;
    font-size:0.95rem;
    transition:color var(--dur-base) var(--ease-out);
  }
  .contact-line:hover{ color:var(--blue); }

  .contact-form{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    box-shadow:var(--bezel-highlight);
    padding:2rem;
    border-radius:var(--radius-lg);
  }
  .contact-form label{
    display:flex;
    flex-direction:column;
    gap:0.4rem;
    font-size:0.84rem;
    font-weight:600;
    color:var(--muted);
  }
  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:0.95rem;
    color:var(--text);
    background:var(--bg);
    border:1.5px solid transparent;
    border-radius:var(--radius-sm);
    padding:0.7rem 0.8rem;
    outline:none;
    transition:border-color var(--dur-base) var(--ease-out);
  }
  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus{ border-color:var(--blue); }
  .contact-form textarea{ resize:vertical; }
  .form-confirm{ color:var(--status-green); font-size:0.88rem; font-weight:600; }
  .form-error{ color:var(--status-red); font-size:0.88rem; font-weight:600; }

  /* ------------------------------------------------------------
     ADMIN
     ------------------------------------------------------------ */
  .admin-menu{ display:flex; flex-wrap:wrap; gap:1rem; max-width:720px; }
  .admin-btn{
    flex:1 1 220px;
    display:flex;
    align-items:center;
    gap:0.8rem;
    padding:1.4rem 1.6rem;
    border-radius:var(--radius-lg);
    border:1px solid var(--border-strong);
    background:var(--surface-glass);
    box-shadow:var(--bezel-highlight);
    color:var(--text);
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
    text-align:left;
    transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-spring);
  }
  .admin-btn:active{ transform:scale(0.98); }
  .admin-btn:hover{ border-color:var(--blue); }
  .admin-btn-icon{ font-size:1.4rem; }

  .admin-view.hidden{ display:none; }
  .back-btn{
    background:none;
    border:none;
    color:var(--muted);
    font-weight:600;
    font-size:0.88rem;
    cursor:pointer;
    padding:0;
    margin-bottom:1.3rem;
    transition:color var(--dur-base) var(--ease-out);
  }
  .back-btn:hover{ color:var(--blue); }
  .admin-view-title{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:1.4rem;
    margin-bottom:1.5rem;
  }

  .moderation-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:1rem;
    max-width:900px;
  }
  .mod-tile{
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
  }
  .mod-thumb{
    aspect-ratio:1/1;
    background:linear-gradient(155deg, var(--tile-a, #1A0509), var(--tile-b, #33363E));
    display:flex; align-items:center; justify-content:center;
    color:rgba(244,245,250,0.8);
  }
  .mod-thumb svg{ width:28px; height:28px; stroke-width:1.4; }
  .mod-meta{ padding:0.6rem 0.7rem; }
  .mod-event{ font-size:0.78rem; font-weight:600; color:var(--muted); }
  .mod-actions{ display:flex; gap:0.4rem; margin-top:0.5rem; }
  .mod-actions button{
    flex:1;
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:700;
    font-size:0.72rem;
    padding:0.4rem 0.3rem;
    min-height:44px;
    border-radius:8px;
    border:1px solid var(--border-strong);
    background:transparent;
    color:var(--text);
    cursor:pointer;
    transition:all var(--dur-base) var(--ease-out);
  }
  .mod-actions button:active{ transform:scale(0.95); }
  .mod-actions .approve.active{ background:var(--status-green); border-color:var(--status-green); color:#0A1408; }
  .mod-actions .reject.active{ background:var(--status-red); border-color:var(--status-red); color:var(--text); }
  .mod-actions button:disabled{ opacity:0.45; cursor:default; }

  .bolo-form{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    box-shadow:var(--bezel-highlight);
    padding:2rem;
    border-radius:var(--radius-lg);
    max-width:480px;
  }
  .bolo-form label{
    display:flex;
    flex-direction:column;
    gap:0.4rem;
    font-size:0.84rem;
    font-weight:600;
    color:var(--muted);
  }
  .bolo-form input, .bolo-form select{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:0.95rem;
    color:var(--text);
    background:var(--bg);
    border:1.5px solid transparent;
    border-radius:var(--radius-sm);
    padding:0.65rem 0.8rem;
    outline:none;
    transition:border-color var(--dur-base) var(--ease-out);
  }
  .bolo-form input:focus, .bolo-form select:focus{ border-color:var(--blue); }
  .bolo-form .form-row{ display:flex; gap:1rem; }
  .bolo-form .form-row label{ flex:1; }
  .cover-preview{
    width:100%;
    aspect-ratio:16/7;
    border-radius:var(--radius-md);
    background:var(--bg);
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    font-size:0.82rem;
  }

  /* NAVEGACIÓN ENTRE PÁGINAS */
  .nav-links a.active{ color:var(--pink); }
  .nav-links a.active::after{ background:var(--pink); clip-path:inset(0 0 0 0); }

  /* Espacio para que la nav isla flotante no tape el contenido */
  .page-section{ padding-top:8.5rem; }

  /* ------------------------------------------------------------
     VISOR EN GRANDE (GALERÍA)
     ------------------------------------------------------------ */
  .lightbox{
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(3,3,5,0.92);
    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1.5rem;
    padding:2rem;
  }
  .lightbox.hidden{ display:none; }
  .lightbox-media{ max-width:90vw; max-height:74vh; }
  .lightbox-media img, .lightbox-media video{
    max-width:90vw;
    max-height:74vh;
    border-radius:var(--radius-md);
    display:block;
    box-shadow:var(--shadow-lift);
    animation:riseIn var(--dur-base) var(--ease-out) both;
  }
  .lightbox-close{
    position:absolute;
    top:1.4rem; right:1.4rem;
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    border-radius:50%;
    width:2.75rem; height:2.75rem;
    color:var(--text);
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-spring);
  }
  .lightbox-close:hover{ background:var(--surface-glass-strong); }
  .lightbox-close:active{ transform:scale(0.9); }
  .lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:var(--surface-glass);
    border:1px solid var(--border-strong);
    color:var(--text);
    font-size:2rem;
    line-height:1;
    width:3rem;
    height:3rem;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-spring);
  }
  .lightbox-nav:hover{ background:var(--surface-glass-strong); }
  .lightbox-nav:active{ transform:translateY(-50%) scale(0.92); }
  .lightbox-nav:disabled{ opacity:0.3; cursor:default; }
  .lightbox-prev{ left:1rem; }
  .lightbox-next{ right:1rem; }
  @media (max-width: 640px){
    .lightbox-nav{ width:2.4rem; height:2.4rem; font-size:1.5rem; }
    .lightbox-prev{ left:0.4rem; }
    .lightbox-next{ right:0.4rem; }
  }
  .photo-tile{ cursor:pointer; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  }

  /* ------------------------------------------------------------
     CASILLAS DE CONSENTIMIENTO (contacto, subida de fotos)
     ------------------------------------------------------------ */
  .consent-check{
    display:flex;
    align-items:flex-start;
    gap:0.7rem;
    font-size:0.82rem;
    color:var(--muted);
    line-height:1.5;
    cursor:pointer;
  }
  .consent-check input[type="checkbox"]{
    flex-shrink:0;
    width:1.15rem;
    height:1.15rem;
    margin-top:0.15rem;
    accent-color:var(--pink);
    cursor:pointer;
  }
  .consent-check a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }
  .consent-check a:hover{ color:var(--pink); }

  /* ------------------------------------------------------------
     FOOTER
     ------------------------------------------------------------ */
  footer.site-footer{
    margin-top:4rem;
    padding:2.4rem clamp(1.2rem, 6vw, 5rem) 2.8rem;
    border-top:1px solid var(--border-soft);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
  }
  .footer-brand{ font-size:0.82rem; color:var(--muted); }
  .footer-legal{
    display:flex;
    flex-wrap:wrap;
    gap:1.4rem;
    list-style:none;
  }
  .footer-legal a{
    font-size:0.82rem;
    color:var(--muted);
    text-decoration:none;
    transition:color var(--dur-base) var(--ease-out);
  }
  .footer-legal a:hover{ color:var(--pink); }

  /* ------------------------------------------------------------
     PÁGINAS LEGALES (Aviso Legal, Privacidad, Cookies)
     ------------------------------------------------------------ */
  .legal-section{
    position:relative;
    padding:9rem clamp(1.2rem, 6vw, 5rem) 6rem;
  }
  .legal-content{
    max-width:74ch;
    color:var(--muted);
    line-height:1.7;
  }
  .legal-content h2{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    color:var(--text);
    font-size:1.3rem;
    margin-top:2.4rem;
    margin-bottom:0.9rem;
  }
  .legal-content h2:first-child{ margin-top:0; }
  .legal-content p{ margin-bottom:1rem; }
  .legal-content ul{ margin:0 0 1rem 1.3rem; }
  .legal-content li{ margin-bottom:0.4rem; }
  .legal-content strong{ color:var(--text); }
  .legal-content a{ color:var(--blue); }
  .legal-content a:hover{ color:var(--pink); }
  .legal-updated{
    font-size:0.78rem;
    color:var(--muted);
    opacity:0.7;
    margin-bottom:2rem;
  }
  .legal-placeholder{
    background:rgba(232,17,44,0.1);
    border:1px dashed rgba(232,17,44,0.4);
    border-radius:var(--radius-sm);
    padding:0.15rem 0.5rem;
    color:var(--text);
    font-weight:600;
  }