/* ============================================================
     AZAHAR — sistema de diseño
     Paleta cálida sevillana: noche de Feria en espresso oscuro con
     acentos de terracota/naranja de farolillo y oro viejo de azulejo.
     Base heredada de Ethereal Glass + Asymmetrical Bento
     (taste-skill:soft-skill): cristal vantablack cálido, doble-bisel
     en tarjetas clave, nav isla flotante.
     ============================================================ */

  :root{
    /* --- Base: espresso oscuro cálido en tres profundidades --- */
    --bg: #0B0705;
    --bg-soft: #140D09;
    --bg-elevated: #1D140D;
    --surface-glass: rgba(255, 235, 210, 0.035);
    --surface-glass-strong: rgba(255, 235, 210, 0.065);
    --border-soft: rgba(255, 220, 180, 0.09);
    --border-strong: rgba(255, 220, 180, 0.18);

    /* --- Acentos: oro viejo de azulejo (secundario) + terracota de farolillo (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 oro/terracota cálidos. */
    --blue: #E8B94A;
    --blue-deep: #6B4E12;
    --pink: #E85A2B;
    --pink-deep: #6B2010;
    --text: #FBF3EA;
    --muted: #C4A88F;

    --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,90,43,0.35), 0 0 40px -6px rgba(232,90,43,0.5);
    --glow-blue: 0 0 0 1px rgba(232,185,74,0.3), 0 0 40px -6px rgba(232,185,74,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,90,43,0.16), transparent 60%),
      radial-gradient(ellipse 800px 640px at 96% 18%, rgba(232,185,74,0.14), transparent 60%),
      radial-gradient(ellipse 700px 600px at 50% 100%, rgba(232,90,43,0.08), transparent 65%);
  }
  nav, main, .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:'Gloock', Georgia, serif;
    font-weight:400;
    letter-spacing:-0.01em;
    font-synthesis:none;
  }

  /* ------------------------------------------------------------
     Scroll reveal — fade-up + blur al entrar en pantalla.
     Solo se oculta nada si main.js está funcionando (añade .js-reveal
     al <html>): si el JavaScript falla, el contenido se ve igualmente.
     ------------------------------------------------------------ */
  .js-reveal [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);
  }
  .js-reveal [data-reveal].is-visible{ opacity:1; transform:translateY(0); filter:blur(0); }
  .js-reveal [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);
  }
  .js-reveal [data-reveal-group].is-visible > *{ opacity:1; transform:translateY(0); filter:blur(0); }
  .js-reveal [data-reveal-group].is-visible > *:nth-child(1){ transition-delay:0ms; }
  .js-reveal [data-reveal-group].is-visible > *:nth-child(2){ transition-delay:80ms; }
  .js-reveal [data-reveal-group].is-visible > *:nth-child(3){ transition-delay:160ms; }
  .js-reveal [data-reveal-group].is-visible > *:nth-child(4){ transition-delay:240ms; }
  .js-reveal [data-reveal-group].is-visible > *:nth-child(5){ transition-delay:320ms; }
  .js-reveal [data-reveal-group].is-visible > *:nth-child(6){ transition-delay:400ms; }
  .js-reveal [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) */
  .photo-tile, .preview-tile, .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; }
    .photo-tile, .preview-tile, .bolo-item, .mod-tile{ animation:none !important; }
  }

  /* ------------------------------------------------------------
     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%, var(--blue) 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); }
  }

  /* ------------------------------------------------------------
     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:'Plus Jakarta Sans', 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 — foto del grupo, cubre toda la sección */

  /* Tinte de marca (duotono carmesí/gris), igual que en .section-portrait */

  /* ------------------------------------------------------------
     SECCIONES — cabecera común, macro-whitespace
     ------------------------------------------------------------ */
  .section-head{ margin-bottom:2.8rem; max-width:48ch; }

  .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. */

  /* Menos recortada -- se ve la foto entera en vez de un primer plano */

  /* 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:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-press) 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:'Plus Jakarta Sans', sans-serif; }
  .date-pill span{ font-size:0.76rem; color:var(--muted); }
  .date-pill.active{
    border-color:var(--blue);
    background:rgba(232,185,74,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,90,43,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, #2A0F08), var(--tile-b, #6B4E12));
    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
     ------------------------------------------------------------ */

  .admin-section{
    position:relative;
    padding:6rem clamp(1.2rem, 6vw, 5rem) 7rem;
    border-top:1px solid var(--border-soft);
  }

  /* ------------------------------------------------------------
     ADMIN: cola de peticiones
     ------------------------------------------------------------ */

  .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:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-press) 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.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);
    box-shadow:var(--bezel-highlight);
  }
  .bolo-item[data-status="cancelado"]{ 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:'Plus Jakarta Sans', sans-serif; }
  .user-item .you-tag{
    margin-left:0.5rem;
    padding:0.1rem 0.5rem;
    border-radius:var(--radius-pill);
    background:rgba(232,185,74,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;
  }

  /* ------------------------------------------------------------
     BOLOS (público) — Asymmetrical Bento
     ------------------------------------------------------------ */
  .bolos-section{
    position:relative;
    padding:9rem clamp(1.2rem, 6vw, 5rem) 6rem;
  }

  /* Bento asimétrico: la primera tarjeta ocupa el doble de ancho en desktop */

  .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.boda{ background:rgba(232,185,74,0.2); color:var(--blue); border:1px solid rgba(232,90,43,0.3); }
  .type-badge.feria{ background:rgba(232,90,43,0.2); color:var(--pink); border:1px solid rgba(232,185,74,0.3); }
  .type-badge.sala{ background:rgba(232,90,43,0.16); color:var(--pink); }
  .type-badge.festival{ background:rgba(232,185,74,0.16); color:var(--blue); }
  .type-badge.privado{ background:rgba(196,168,143,0.16); color:var(--muted); }
  .type-badge.cancelado{ background:rgba(255,77,77,0.16); color:var(--status-red); }

  /* ------------------------------------------------------------
     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,90,43,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:'Plus Jakarta Sans', 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-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); }

  .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:'Gloock', Georgia, 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, #2A0F08), var(--tile-b, #6B4E12));
    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:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-press) 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, .bolo-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.65rem 0.8rem;
    outline:none;
    transition:border-color var(--dur-base) var(--ease-out);
  }
  .bolo-form textarea{ resize:vertical; font-family:inherit; }
  .bolo-form input:focus, .bolo-form select:focus, .bolo-form textarea: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;
  }

  /* Espacio para que la barra superior fija 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); }

  /* ------------------------------------------------------------
     MODAL DE DETALLE DE BOLO
     ------------------------------------------------------------ */

  .bolo-modal{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
  }
  .bolo-modal.hidden{ display:none; }
  .bolo-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(3,3,5,0.85);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    cursor:pointer;
  }
  .bolo-modal-panel{
    position:relative;
    z-index:1;
    width:100%;
    max-width:640px;
    max-height:86vh;
    overflow-y:auto;
    background:var(--bg-elevated);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lift);
    animation:riseIn var(--dur-base) var(--ease-out) both;
  }
  .bolo-modal-close{
    position:absolute;
    top:1rem; right:1rem;
    z-index:2;
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
    border-radius:50%;
    width:2.5rem; height:2.5rem;
    color:var(--text);
    font-size:1.15rem;
    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);
  }
  .bolo-modal-close:hover{ background:var(--surface-glass-strong); }
  .bolo-modal-close:active{ transform:scale(0.9); }
  .bolo-modal-cover{
    width:100%;
    min-height:160px;
    max-height:70vh;
    background-color:var(--bg-soft);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
  }
  /* Imagen completa, sin recortar: se muestra a su proporción real dentro
     del hueco disponible, nunca "a sangre" tapando parte de la foto. */
  .bolo-modal-cover img{
    display:block;
    width:100%;
    height:auto;
    max-height:70vh;
    object-fit:contain;
  }
  .bolo-modal-cover svg{ width:48px; height:48px; stroke-width:1.3; margin:2.4rem 0; }
  .bolo-modal-body{ padding:1.8rem clamp(1.2rem, 4vw, 2.2rem) 2rem; }
  .bolo-modal-badges{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:0.9rem; }
  .bolo-modal-title{
    font-family:'Gloock', Georgia, serif;
    font-weight:700;
    font-size:1.6rem;
    line-height:1.15;
    margin-bottom:0.5rem;
  }
  .bolo-modal-meta{ color:var(--muted); font-size:0.92rem; margin-bottom:1.2rem; }
  .bolo-modal-desc{
    color:var(--text);
    line-height:1.65;
    margin-bottom:1.4rem;
    white-space:pre-line;
  }
  @media (max-width: 560px){
    .bolo-modal-cover{ max-height:50vh; }
    .bolo-modal-body{ padding:1.5rem 1.2rem 1.8rem; }
  }

  /* ------------------------------------------------------------
     PANEL — solicitudes de contratación
     ------------------------------------------------------------ */
  .admin-count{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:1.6rem; height:1.6rem; padding:0 0.45rem; margin-left:0.4rem;
    border-radius:999px; background:var(--pink); color:#140803;
    font-size:0.8rem; font-weight:800; vertical-align:middle;
  }
  .solicitudes-list{ display:flex; flex-direction:column; gap:0.9rem; max-width:860px; }
  .solicitud{
    padding:1.3rem 1.4rem;
    border-radius:var(--radius-md);
    background:var(--surface-glass);
    border:1px solid var(--border-soft);
  }
  .solicitud.is-nueva{ border-color:rgba(232,90,43,0.55); background:rgba(232,90,43,0.06); }
  .solicitud-nombre{ font-weight:800; font-size:1.05rem; }
  .solicitud-nueva{
    display:inline-block; margin-left:0.4rem; padding:0.15rem 0.55rem; border-radius:999px;
    background:var(--pink); color:#140803; font-size:0.75rem; font-weight:800; vertical-align:middle;
  }
  .solicitud-recibida{ color:var(--muted); font-size:0.85rem; margin-top:0.2rem; }
  .solicitud-datos{ display:flex; flex-wrap:wrap; gap:0.45rem; margin:0.9rem 0; }
  .solicitud-dato{
    padding:0.3rem 0.7rem; border-radius:999px; font-size:0.82rem; font-weight:600;
    background:rgba(232,185,74,0.12); color:var(--blue);
  }
  .solicitud-mensaje{ line-height:1.6; white-space:pre-line; margin-bottom:1rem; }
  .solicitud-acciones{ display:flex; flex-wrap:wrap; gap:0.5rem; }
  .solicitud-acciones a.status-btn{ text-decoration:none; }

  /* Logo de la cabecera del panel de administración */
  .logo-mark{ display:flex; align-items:center; flex:0 0 auto; }

  /* Aviso del panel: contraseña de ejemplo todavía activa */
  .admin-aviso{
    margin:0 0 1.6rem; padding:1rem 1.2rem; border-radius:12px;
    background:rgba(255,77,77,0.12); border:1px solid rgba(255,77,77,0.45);
    color:#FFD2CC; line-height:1.55; max-width:760px;
  }
  .admin-aviso strong{ color:#FFB4A8; }
  .admin-aviso-demo{ background:rgba(232,185,74,0.1); border-color:rgba(232,185,74,0.4); color:#F3E3C8; }
  .admin-aviso-demo strong{ color:var(--blue); }

  /* Lista de conciertos del panel */
  .bolo-item-title{ font-weight:700; font-size:0.98rem; }
  .bolo-item-meta{ color:var(--muted); font-size:0.85rem; margin-top:0.2rem; }