/* ===========================================================
   Neko Social Club — Design System
   Palette: burdeos (vino) + blanco. SIN naranja, SIN oro.
   Matiz del vino 345-350°. Nunca bajar de 340: se vuelve teja.
   Type: Playfair Display (display) + Inter (UI)
   =========================================================== */

:root{
  /* color */
  --burgundy-900:#3D0A16;
  --burgundy-800:#5C0F20;
  --burgundy-700:#7B142B;   /* primario */
  --burgundy-600:#96203A;
  --burgundy-500:#B32D4A;
  --burgundy-400:#D1526C;
  --lienzo:#F3ECE1;          /* fondo beige de la página (micropigmento) */
  --surface:#FFFFFF;         /* tarjetas: blancas, para levantar sobre el beige */
  --surface-soft:#F7EFE4;    /* bandas suaves, beige un punto más cálido */
  --surface-alt:#F0E7D8;     /* zonas alternas, beige un punto más marcado */
  --border:#E4DACB;          /* borde afinado al beige, no al blanco */
  --text:#3D0A16;
  --text-muted:#6B5A60;
  --on-dark:#FFFFFF;
  --on-dark-muted:#F0D6DC;

  /* spacing scale */
  --space-1:8px; --space-2:16px; --space-3:24px;
  --space-4:32px; --space-5:48px; --space-6:64px; --space-7:96px;

  /* radius / shadow */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(61,10,22,.06), 0 2px 8px rgba(61,10,22,.05);
  --shadow-md:0 8px 28px rgba(61,10,22,.10);
  --shadow-lg:0 24px 60px rgba(61,10,22,.16);

  /* type */
  --font-display:"Playfair Display", Georgia, serif;

  /* Tipografia de las CIFRAS. Los numeros iban en Playfair, que es una
     serif de mucho contraste: en un precio o en un dia del mes las astas
     finas se afinan tanto que a tamano pequeno cuesta leerlos, y el «1»
     y el «7» se parecen. Van en la sans, que es lo que pidio el cliente
     el 9/8/2026 ensenando una referencia.

     Solo cambia la TIPOGRAFIA: cada cifra conserva el color que tuviera.
     Y solo se aplica a numeros — los titulos, la marca y los kanji de
     E-Awards siguen en Playfair, que es donde esa serif hace su trabajo.

     Si algun dia se quiere otra fuente para las cifras, se cambia aqui y
     cambia en toda la web. */
  --font-num:var(--font-ui);
  --font-ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:220ms;

  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 90px);}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--lienzo);
  -webkit-font-smoothing:antialiased;
}
/* Micropigmento: grano finísimo de ruido fractal sobre el beige. Fijo al
   viewport para que no "resbale" al hacer scroll y no tape ninguna interacción. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;margin:0 0 var(--space-2);letter-spacing:-.02em;}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem);font-weight:800;}
h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:700;}
h3{font-size:1.25rem;font-weight:700;}
p{margin:0 0 var(--space-2);}

.wrap{width:min(1180px,100% - 2*var(--space-3));margin-inline:auto;}
.section{padding:var(--space-7) 0;}
.section-soft{background:var(--surface-alt);}
.section-dark{background:linear-gradient(155deg,var(--burgundy-800),var(--burgundy-900));color:var(--on-dark);}
.section-dark h2,.section-dark h3{color:var(--on-dark);}
.section-dark .lead{color:var(--on-dark-muted);}
/* Las tarjetas claras dentro de una banda oscura recuperan el texto oscuro:
   si no, el h3 sale blanco sobre blanco y desaparece. */
.section-dark .join-card h2,
.section-dark .join-card h3,
.section-dark .spec-card h3,
.section-dark .card h3{color:var(--text);}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--burgundy-700);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 var(--r-sm) 0;}
.skip-link:focus{left:0;}

/* Foco: burdeos sobre claro, blanco sobre las zonas oscuras */
:focus-visible{outline:3px solid var(--burgundy-500);outline-offset:2px;border-radius:4px;}
.section-dark :focus-visible,
.header-inner :focus-visible,
.site-footer :focus-visible{outline-color:#fff;}

.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--burgundy-600);margin:0 0 var(--space-1);
}
.eyebrow.gold{color:#fff;}
.lead{font-size:1.125rem;color:var(--text-muted);max-width:56ch;}
.hint{font-size:.85rem;color:var(--text-muted);margin:6px 0 0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 26px;border-radius:var(--r-full);
  font-family:var(--font-ui);font-size:.95rem;font-weight:600;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--burgundy-700);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--burgundy-600);box-shadow:var(--shadow-md);}
.btn-outline{border-color:currentColor;color:var(--burgundy-700);background:transparent;}
.btn-outline:hover{background:var(--burgundy-700);color:#fff;}
.btn-ghost{color:var(--burgundy-700);background:var(--surface-soft);}
.btn-ghost:hover{background:#F8DEE5;}
/* CTA sobre fondo burdeos: se invierte a blanco */
.btn-gold{background:#fff;color:var(--burgundy-800);}
.btn-gold:hover{background:var(--surface-soft);}
.btn-sm{min-height:40px;padding:0 18px;font-size:.875rem;}
.btn-block{width:100%;}

.btn-icon{
  width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--r-full);background:#fff;color:var(--burgundy-700);
  cursor:pointer;transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-icon:hover{background:var(--surface-soft);transform:translateY(-1px);}
.btn-icon svg{width:20px;height:20px;}

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{position:sticky;top:0;z-index:60;}
.header-inner{
  height:var(--header-h);
  background:linear-gradient(120deg,var(--burgundy-800),var(--burgundy-700) 60%,var(--burgundy-600));
  color:#fff;display:flex;align-items:center;gap:var(--space-3);
  padding-inline:clamp(16px,4vw,40px);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;margin-right:auto;}
.brand-mark{width:40px;height:40px;flex:none;display:grid;place-items:center;color:#fff;}
.brand-mark svg{width:32px;height:32px;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:-.01em;}
.brand-tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-muted);}

/* 6 ítems: ritmo horizontal ajustado para que quepan */
.main-nav{display:flex;gap:2px;}
.main-nav a{
  position:relative;padding:12px 13px;border-radius:var(--r-full);text-decoration:none;
  font-size:.88rem;font-weight:500;color:#fff;white-space:nowrap;
  transition:background var(--dur) var(--ease);
}
.main-nav a:hover{background:rgba(255,255,255,.14);}
.nav-sep{opacity:.5;margin:0 1px;}
/* Secciones aún sin construir: punto discreto, sin bloquear el enlace */
.main-nav a[data-soon]::after{
  content:"";position:absolute;top:7px;right:7px;
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);
}
.main-nav a[data-soon]:hover::after{background:#fff;}

.header-actions{display:flex;align-items:center;gap:10px;}
.header-actions .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:transparent;}
.header-actions .btn-ghost:hover{background:rgba(255,255,255,.24);}
.header-actions .btn-icon{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;}
.header-actions .btn-icon:hover{background:rgba(255,255,255,.24);}
.nav-toggle{display:none;}

/* ===========================================================
   HERO
   =========================================================== */
.hero{position:relative;overflow:hidden;padding:var(--space-7) 0 var(--space-6);background:transparent;}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(179,45,74,.13), transparent 60%),
    radial-gradient(700px 380px at 8% 110%, rgba(123,20,43,.10), transparent 60%);
}
.hero-inner{position:relative;text-align:center;}
.hero h1 em{font-style:italic;color:var(--burgundy-700);}
.hero .lead{margin-inline:auto;margin-top:var(--space-2);}
.hero-cta{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;margin-top:var(--space-4);}

.hero-stats{
  display:flex;justify-content:center;gap:clamp(24px,6vw,72px);flex-wrap:wrap;
  margin:var(--space-6) 0 0;padding-top:var(--space-4);border-top:1px solid var(--border);
}
.hero-stats div{text-align:center;}
.hero-stats dt{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);order:2;}
.hero-stats dd{margin:0 0 4px;font-family:var(--font-num);font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--burgundy-700);}

/* ===========================================================
   SECTIONS
   =========================================================== */
.section-head{max-width:60ch;margin-bottom:var(--space-5);}
.section-sub{color:var(--text-muted);}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-3);}
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.card-media{
  position:relative;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--burgundy-700),var(--burgundy-500));
}
.card-media.alt{background:linear-gradient(135deg,var(--burgundy-900),var(--burgundy-600));}
.card-media.alt2{background:linear-gradient(135deg,var(--burgundy-500),var(--burgundy-800));}
.card-body{padding:var(--space-3);}
.card-meta{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.card p{color:var(--text-muted);}

/* min-height 44px: objetivo táctil cómodo sin cambiar el aspecto del enlace */
.link-arrow{
  font-weight:600;color:var(--burgundy-700);text-decoration:none;
  display:inline-flex;gap:6px;align-items:center;min-height:44px;
}
.link-arrow::after{content:"→";transition:transform var(--dur) var(--ease);}
.link-arrow:hover::after{transform:translateX(4px);}

.live-pill{
  position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;
  background:#fff;color:var(--burgundy-700);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  padding:6px 12px;border-radius:var(--r-full);box-shadow:var(--shadow-sm);
}
.live-pill i{width:8px;height:8px;border-radius:50%;background:var(--burgundy-500);animation:pulse 1.6s var(--ease) infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.8);}}

/* ---------- categorías ---------- */
.topics{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--space-2);
}
.topic a{
  display:block;height:100%;text-decoration:none;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--space-3);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.topic a:hover{transform:translateY(-4px);border-color:var(--burgundy-600);box-shadow:var(--shadow-md);}
.topic-ico{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:var(--space-2);
  border-radius:var(--r-md);background:var(--surface-soft);color:var(--burgundy-700);
}
.topic-ico svg{width:23px;height:23px;}
.topic h3{margin-bottom:4px;}
.topic p{color:var(--text-muted);font-size:.95rem;margin-bottom:10px;}
.topic-meta{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--burgundy-600);}
/* ---------- miembros ---------- */
.members{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-2);
}
.member{
  display:flex;align-items:flex-start;gap:var(--space-2);
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-3);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.member:hover{border-color:var(--burgundy-600);box-shadow:var(--shadow-md);}
.member > div{flex:1 1 auto;min-width:0;}
.member h3{font-size:1.05rem;margin-bottom:2px;}
.member-role{font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.member-line{font-size:.95rem;color:var(--text-muted);margin:0;}
.member-badge{
  flex:none;align-self:center;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--burgundy-700);background:var(--surface-soft);padding:6px 11px;border-radius:var(--r-full);
}
.avatar{
  flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--burgundy-700),var(--burgundy-500));
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.15rem;
}
.avatar::after{content:attr(data-initials);}
.avatar-2{background:linear-gradient(140deg,var(--burgundy-900),var(--burgundy-600));}
.avatar-3{background:linear-gradient(140deg,var(--burgundy-500),var(--burgundy-800));}
.avatar-4{background:var(--surface-soft);color:var(--burgundy-700);border:1.5px dashed var(--burgundy-600);}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-6);align-items:center;}
.feature-list{list-style:none;padding:0;margin:var(--space-3) 0 var(--space-4);display:grid;gap:12px;}
.feature-list li{display:flex;gap:12px;color:var(--on-dark-muted);}
.feature-list span{color:#fff;}

.join-card{background:#fff;color:var(--text);border-radius:var(--r-lg);padding:var(--space-4);box-shadow:var(--shadow-lg);}
.join-card p{color:var(--text-muted);}
.join-form{display:grid;gap:6px;margin-top:var(--space-3);}
.join-form label{font-size:.85rem;font-weight:600;}
.join-form input{
  min-height:48px;padding:0 16px;border:1.5px solid var(--border);border-radius:var(--r-md);
  font:inherit;font-size:1rem;transition:border-color var(--dur) var(--ease);
}
.join-form input:focus{border-color:var(--burgundy-600);}
.join-form .btn{margin-top:var(--space-2);}

/* ---------- eventos ---------- */
.events{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.event{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-3);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.event:hover{border-color:var(--burgundy-600);box-shadow:var(--shadow-md);}
.event-date{
  flex:none;width:74px;height:74px;border-radius:var(--r-md);display:grid;place-content:center;text-align:center;
  background:var(--surface-soft);color:var(--burgundy-700);
}
.event-date span{font-family:var(--font-num);font-size:1.8rem;font-weight:800;line-height:1;}
.event-date small{font-size:.7rem;letter-spacing:.12em;font-weight:700;}
.event-body{flex:1 1 240px;}
.event-body h3{margin-bottom:4px;}
.event-body p{margin:0;color:var(--text-muted);}

/* ---------- patrocinio ---------- */
.sponsor{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:center;}
.spec-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-4);box-shadow:var(--shadow-md);}
.spec-table{width:100%;border-collapse:collapse;margin-top:var(--space-2);}
.spec-table th,.spec-table td{text-align:left;padding:11px 0;border-bottom:1px solid var(--border);font-size:.95rem;}
.spec-table th{font-weight:600;color:var(--text-muted);width:52%;}
.spec-table th small{display:block;font-weight:400;font-size:.8em;opacity:.8;}
code{background:var(--surface-soft);color:var(--burgundy-700);padding:3px 8px;border-radius:6px;font-size:.9em;}

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{background:var(--burgundy-900);color:var(--on-dark);padding:var(--space-6) 0 var(--space-3);}
.footer-inner{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;align-items:center;}
.footer-brand{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin:0;}
.footer-note{color:var(--on-dark-muted);margin:4px 0 0;font-size:.92rem;}
.site-footer nav{display:flex;gap:var(--space-2);flex-wrap:wrap;}
.site-footer nav a{
  color:var(--on-dark-muted);text-decoration:none;font-size:.95rem;
  display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;
}
.site-footer nav a:hover{color:#fff;}
.copyright{
  text-align:center;color:var(--on-dark-muted);font-size:.85rem;
  margin:var(--space-5) 0 0;padding-top:var(--space-3);border-top:1px solid rgba(255,255,255,.12);
}

/* ===========================================================
   DRAWER (panel de banners)
   =========================================================== */
.drawer-backdrop{position:fixed;inset:0;background:rgba(61,10,22,.5);z-index:90;animation:fade 200ms var(--ease);}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(460px,100%);
  background:#fff;z-index:100;display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);animation:slideIn 260ms var(--ease);
}
@keyframes slideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-3);border-bottom:1px solid var(--border);
  background:var(--burgundy-700);color:#fff;
}
.drawer-head h2{margin:0;font-size:1.35rem;color:#fff;}
.drawer-head .btn-icon{background:rgba(255,255,255,.14);border-color:transparent;color:#fff;}
.drawer-body{overflow-y:auto;padding:var(--space-3);display:grid;gap:var(--space-4);}


.toggle{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:500;}

/* ===========================================================
   REVEAL
   =========================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 600ms var(--ease), transform 600ms var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1100px){
  /* con 6 ítems + marca + CTA el menú no cabe antes de esto */
  .main-nav{
    display:none;position:absolute;top:var(--header-h);left:0;right:0;z-index:5;
    flex-direction:column;gap:0;padding:12px;
    background:var(--burgundy-800);box-shadow:var(--shadow-md);
  }
  .main-nav.is-open{display:flex;}
  .main-nav a{padding:14px 16px;border-radius:var(--r-sm);font-size:.95rem;}
  .main-nav a[data-soon]::after{top:50%;right:16px;transform:translateY(-50%);}
  .nav-toggle{display:inline-flex;}
}
@media (max-width:960px){
  .split,.sponsor{grid-template-columns:1fr;gap:var(--space-4);}
}
@media (max-width:820px){
  :root{--header-h:66px;}
  .header-actions .btn-ghost{display:none;}
  .brand-name{font-size:1.1rem;}
  .brand-tag{display:none;}
  /* en móvil todo lo pulsable llega a 44px (objetivo táctil) */
  .btn-sm{min-height:44px;}
  .section{padding:var(--space-6) 0;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}

/* ===========================================================
   APP SHELL — layout tipo intranet (sidebar izquierda + saludo)
   Estructura de vuestra intranet, estética nuestra (beige + vino).
   =========================================================== */
:root{--shell-nav:248px;--shell-nav-min:74px;}

/* El ancho se anima con una variable CSS: la transición corre sobre --w y el
   grid la lee, en vez de animar grid-template-columns (mucho más caro). */
@property --w{syntax:"<length>";inherits:false;initial-value:248px;}
.shell{
  display:grid;grid-template-columns:var(--w) 1fr;min-height:100vh;
  --w:248px;transition:--w 220ms var(--ease);
}

/* ---------- modo compacto (retráctil): solo iconos ---------- */
.shell.compacta{--w:74px;}
.shell.compacta .shell-nav{padding-inline:10px;}
.shell.compacta .shell-brand{gap:0;padding:10px 0 var(--space-3);}
.shell.compacta .shell-brand b{display:none;}   /* colapsado: solo el logo */
.shell.compacta .brand-logo{width:30px;height:44px;}
.shell.compacta .shell-menu a{justify-content:center;padding:12px 0;font-size:0;gap:0;}  /* font-size:0 oculta el texto suelto */
.shell.compacta .shell-menu a svg{width:20px;height:20px;}
.shell.compacta .shell-menu a[data-soon]::after{display:none;}
.shell.compacta .shell-nav-pie{display:none;}
.shell-backdrop{
  position:fixed;inset:0;background:rgba(23,17,15,.5);z-index:50;
  opacity:0;visibility:hidden;transition:opacity 200ms var(--ease);
}
.shell.nav-abierta .shell-backdrop{opacity:1;visibility:visible;}

/* ---------- sidebar ---------- */
.shell-nav{
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  background:linear-gradient(180deg,var(--burgundy-800),var(--burgundy-900));
  color:#fff;display:flex;flex-direction:column;padding:var(--space-3) var(--space-2);
}
/* Marca: logo arriba, nombre debajo en una sola línea. */
.shell-brand{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:10px 6px var(--space-4);text-decoration:none;color:#fff;text-align:center;
}
/* El logo se pinta con máscara: así toma el color del texto (currentColor) y
   sirve igual sobre fondo burdeos o claro, sin duplicar archivos. */
.brand-logo{
  display:block;width:40px;height:58px;flex:none;background:currentColor;
  -webkit-mask:url("img/logo-neko.svg") center/contain no-repeat;
  mask:url("img/logo-neko.svg") center/contain no-repeat;
  transition:width var(--dur) var(--ease),height var(--dur) var(--ease);
}
.shell-brand b{
  font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1.1;
  letter-spacing:-.01em;white-space:nowrap;
}

.shell-menu{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;gap:2px;}
.shell-menu a{
  position:relative;display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--on-dark-muted);font-size:.94rem;font-weight:500;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.shell-menu a svg{width:19px;height:19px;flex:none;}
.shell-menu a:hover{background:rgba(255,255,255,.1);color:#fff;}
.shell-menu a[aria-current="page"]{background:rgba(255,255,255,.16);color:#fff;}
.shell-menu a[data-soon]::after{
  content:"Pronto";margin-left:auto;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-muted);background:rgba(255,255,255,.12);padding:2px 7px;border-radius:var(--r-full);
}
/* ---------- desplegables del menú (Eventos, Sobre Nosotros) ---------- */
/* El enlace y el botón de abrir comparten fila: se puede ir a la sección
   principal sin verse obligado a desplegarla. */
.shell-menu-fila{display:flex;align-items:center;}
.shell-menu-fila > a{flex:1;min-width:0;}
.shell-menu-abrir{
  flex:none;display:grid;place-items:center;
  /* 44px de objetivo táctil aunque la flecha sea pequeña */
  width:44px;height:44px;margin-left:-4px;
  background:none;border:0;padding:0;cursor:pointer;color:var(--on-dark-muted);
  border-radius:var(--r-sm);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.shell-menu-abrir:hover{background:rgba(255,255,255,.1);color:#fff;}
.shell-menu-abrir svg{width:16px;height:16px;transition:transform var(--dur) var(--ease);}
.shell-menu-abrir[aria-expanded="true"] svg{transform:rotate(180deg);}

.shell-submenu{list-style:none;margin:2px 0 4px;padding:0 0 0 16px;display:grid;gap:2px;}
/* Línea guía que ata visualmente los hijos con su padre. */
.shell-submenu{border-left:1px solid rgba(255,255,255,.14);margin-left:18px;}
.shell-submenu a{padding:10px 12px;font-size:.88rem;}
.shell-submenu a svg{width:17px;height:17px;}

/* Con el panel plegado a 74px no caben submenús: se ocultan y queda el icono. */
.shell.compacta .shell-menu-abrir,
.shell.compacta .shell-submenu{display:none;}

.shell-nav-pie{margin-top:auto;padding-top:var(--space-3);display:grid;gap:8px;}
.shell-nav-pie .btn{width:100%;}
.shell-nav-note{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted);text-align:center;padding-top:6px;}

/* ---------- columna principal ---------- */
.shell-main{min-width:0;display:flex;flex-direction:column;}
.shell-top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--space-2);
  /* Mismo padding lateral que el contenido de abajo, para que buscador y botón
     queden en la misma columna que las tarjetas. */
  padding:12px clamp(16px,3vw,32px);
  background:color-mix(in srgb,var(--lienzo) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.shell-buscador{
  position:relative;flex:1 1 auto;max-width:420px;
}
.shell-buscador svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-muted);pointer-events:none;}
.shell-buscador input{
  width:100%;min-height:44px;padding:0 16px 0 42px;border:1.5px solid var(--border);border-radius:var(--r-full);
  background:var(--surface);font:inherit;font-size:.95rem;transition:border-color var(--dur) var(--ease);
}
.shell-buscador input:focus{border-color:var(--burgundy-600);}
.shell-top-der{margin-left:auto;display:flex;align-items:center;gap:10px;}
.btn-menu-shell{display:none;}
/* botón de colapsar el panel: solo en escritorio */
.btn-compacta svg{transition:transform 220ms var(--ease);}
.shell.compacta .btn-compacta svg{transform:rotate(180deg);}

/* Sin tope de ancho: el contenido ocupa todo el espacio disponible junto al panel
   lateral, sin huecos muertos a los lados. Solo queda el padding lateral para que
   nada quede pegado al borde. */
.shell-scroll{padding:clamp(20px,3vw,36px) clamp(16px,3vw,32px);display:grid;gap:var(--space-4);width:100%;}
/* Los hijos de un grid no bajan de su contenido (min-width:auto). Sin esto,
   cualquier bloque con scroll interno ensancha la página entera. */
.shell-scroll > *,.shell-bloque > *{min-width:0;}

/* ---------- saludo ---------- */
.saludo h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:6px;}
.saludo h1 .mano{font-style:normal;}
.saludo .subtitulo{color:var(--text-muted);font-size:1.05rem;margin:0;}
.saludo .linea{width:64px;height:4px;border-radius:2px;background:var(--burgundy-600);margin:12px 0 0;}

/* ---------- tarjeta destacada (próximo evento) ---------- */
.destacada{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--burgundy-800),var(--burgundy-900));
  color:#fff;padding:clamp(20px,3vw,36px);box-shadow:var(--shadow-md);
}
.destacada::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(500px 300px at 90% -20%,rgba(179,45,74,.5),transparent 60%);
}
.destacada .rel{position:relative;z-index:1;}
.destacada .et{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted);margin:0 0 10px;}
.destacada h2{font-size:clamp(1.8rem,4vw,3rem);text-transform:uppercase;color:#fff;line-height:1;margin:0 0 12px;}
.destacada .meta{color:var(--on-dark-muted);margin:0 0 var(--space-3);}
.destacada .acc{display:flex;gap:12px;flex-wrap:wrap;}
.destacada .btn-invert{background:#fff;color:var(--burgundy-800);border-color:#fff;}
.destacada .btn-invert:hover{background:var(--surface-soft);}
.destacada .btn-fantasma{background:rgba(255,255,255,.14);color:#fff;border-color:transparent;}
.destacada .btn-fantasma:hover{background:rgba(255,255,255,.24);}

/* La rejilla de KPIs del hero se reaprovecha dentro del shell */
.shell-scroll .hero-stats{margin-top:0;border-top:0;padding-top:0;justify-content:flex-start;gap:clamp(20px,5vw,56px);}

/* Dentro del shell, las secciones ya no llevan su propio padding vertical */
.shell-scroll .section{padding:0;}
.shell-scroll .wrap{width:100%;}
.shell-bloque{display:grid;gap:var(--space-3);}

@media (max-width:1000px){
  .shell{grid-template-columns:1fr;}
  .shell-nav{
    position:fixed;left:0;top:0;bottom:0;width:280px;z-index:60;
    transform:translateX(-100%);transition:transform 260ms var(--ease);
  }
  .shell.nav-abierta .shell-nav{transform:none;}
  .btn-menu-shell{display:inline-flex;}
  /* en móvil el panel se abre entero como cajón; el compacto no aplica */
  .shell,.shell.compacta{grid-template-columns:1fr;}
  .shell.compacta .shell-nav{padding-inline:var(--space-2);}
  .shell.compacta .shell-brand{gap:12px;padding:10px 6px var(--space-4);}
  .shell.compacta .shell-brand b{display:block;}
  .shell.compacta .brand-logo{width:40px;height:58px;}
  .shell.compacta .shell-menu a{justify-content:flex-start;padding:14px 16px;font-size:.95rem;gap:12px;}
  .shell.compacta .shell-menu a[data-soon]::after{display:inline;}
  .shell.compacta .shell-nav-pie{display:grid;}
  .btn-compacta{display:none;}
}
@media (max-width:560px){
  .shell-buscador{display:none;}
}

/* ===========================================================
   CUENTA · PERFIL · ROLES
   =========================================================== */
.btn-cuenta{
  display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;
  border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);
  font:inherit;font-size:.88rem;font-weight:600;color:var(--text);cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn-cuenta:hover{background:var(--surface-soft);border-color:var(--burgundy-600);}
.avatar-chip{
  width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--burgundy-700),var(--burgundy-500));
  color:#fff;font-size:.76rem;font-weight:700;background-size:cover;background-position:center;
}
.avatar-chip.con-foto{color:transparent;}
/* Firebase tarda ~1 s en decir si hay sesion. Hasta entonces el chip no
   dice ni «?» ni un nombre: se queda como un hueco apagado y latiendo, que
   es lo unico honesto cuando todavia no se sabe. Sin esto, quien tiene la
   sesion puesta se veia como invitado y la barra le cambiaba sola. */
.avatar-chip.esta-cargando{
  background:var(--border);color:transparent;
  animation:chip-latido 1.1s ease-in-out infinite;
}
@keyframes chip-latido{50%{opacity:.45;}}
@media (prefers-reduced-motion:reduce){
  .avatar-chip.esta-cargando{animation:none;opacity:.6;}
}
.cuenta-nom{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* avatar reutilizable (perfil, listas, cajón) */
.avatar.con-foto{background-size:cover;background-position:center;color:transparent;}
.avatar-grande{width:96px;height:96px;font-size:1.9rem;}

.perfil-resumen{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);}
.perfil-resumen h3{margin:0 0 2px;}
.perfil-resumen .ayuda{margin:0 0 8px;}

.rol-chip{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:var(--r-full);
}
.rol-admin{background:var(--burgundy-700);color:#fff;}
.rol-staff{background:var(--burgundy-400);color:#fff;}
/* `neko` sustituye al antiguo `miembro`; se deja el viejo por si queda algún resto. */
.rol-neko,
.rol-miembro{background:var(--surface-soft);color:var(--burgundy-700);border:1px solid var(--border);}
.rol-tecnico{background:var(--burgundy-800);color:#fff;}

/* ---------- MI ESPACIO ---------- */

/* Etiquetas (member, oro, E-Market, embajador). Se distinguen del rol por la
   forma: el rol va macizo, las etiquetas van con borde. */
.chips-perfil{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px;}
.eti-chip{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:var(--r-full);
  background:transparent;border:1.5px solid var(--burgundy-400);color:var(--burgundy-700);
}
/* El oro es la única excepción de color de toda la web, y solo aquí y en
   E-Awards. Medido sobre la tarjeta blanca componiendo el 9% de fondo:
   texto #8A6A12 = 4.65:1 (AA para texto), borde #96731B = 3.06:1 (mínimo para
   elementos de interfaz). Un oro más claro se queda en 2:1 y no se lee. */
.eti-member_oro{border-color:#96731B;color:#8A6A12;background:rgba(184,145,42,.09);}
.eti-e_market{border-color:var(--burgundy-600);}
.eti-embajador{border-color:var(--burgundy-800);color:var(--burgundy-800);}

.espacio-vacio{
  border:1px dashed var(--border);border-radius:var(--r-md);
  padding:var(--space-3);text-align:center;background:var(--surface-alt);
}
.espacio-vacio h3{font-family:var(--font-ui);font-size:1rem;font-weight:700;margin:0 0 6px;}
.espacio-vacio .ayuda{margin:0 auto;max-width:52ch;}
.espacio-vacio .btn{margin-top:var(--space-2);}
.panel-tarjeta .espacio-vacio + .espacio-vacio{margin-top:var(--space-2);}

/* Tarjeta pública del artista de E-Market. */
.tarjeta-artista{
  position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;
  background:var(--burgundy-800) center/cover no-repeat;
  display:flex;align-items:flex-end;padding:var(--space-3);
}
/* Degradado funcional: sin él, un fondo claro se come el nombre del artista. */
.tarjeta-artista::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(61,10,22,.85),rgba(61,10,22,0) 60%);
}
.tarjeta-artista-nick{
  position:relative;z-index:1;color:#fff;font-family:var(--font-display);
  font-size:1.5rem;font-weight:700;line-height:1.1;
}

/* ---------- barra de vista previa (?demo) ----------
   A propósito fea y llamativa: tiene que ser imposible confundirla con la
   web de verdad ni olvidarse de que está puesta. */
.demo-barra{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px max(12px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  background:#1E1E1E;color:#fff;font-size:.85rem;
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
.demo-barra strong{
  background:#F5C518;color:#1E1E1E;padding:3px 9px;border-radius:var(--r-full);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.demo-barra span{color:#D6D2CE;flex:1;min-width:180px;}
.demo-barra select{
  min-height:44px;padding:0 12px;border-radius:var(--r-md);
  border:1px solid #4A4A4A;background:#2A2A2A;color:#fff;font:inherit;cursor:pointer;
}
.demo-barra a{
  min-height:44px;display:inline-flex;align-items:center;padding:0 14px;
  border-radius:var(--r-full);background:#fff;color:#1E1E1E;
  text-decoration:none;font-weight:700;
}
/* Que la barra no tape el final del contenido. */
body:has(.demo-barra) .shell-scroll{padding-bottom:120px;}

/* ---------- aviso de sesión a medias ----------
   Sale cuando hay sesión abierta pero el perfil no ha cargado. Va arriba y
   fija: el fallo era precisamente que la web se callaba, así que esto no
   puede quedarse fuera de pantalla. En burdeos, no en rojo de error: no es
   un fallo de quien mira, y la paleta no admite un tercer color. */
.aviso-sesion{
  position:fixed;top:0;left:0;right:0;z-index:9100;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px max(12px,env(safe-area-inset-left));
  background:var(--burgundy-800);color:var(--on-dark);
  font-size:.9rem;box-shadow:var(--shadow-md);
}
.aviso-sesion-txt{flex:1;min-width:220px;display:flex;flex-direction:column;}
.aviso-sesion-txt strong{font-weight:700;}
.aviso-sesion-txt span{color:var(--on-dark-muted);font-size:.85rem;line-height:1.45;}
.aviso-sesion-btns{display:flex;gap:8px;flex-wrap:wrap;}
.aviso-sesion .btn-claro{
  min-height:44px;display:inline-flex;align-items:center;padding:0 16px;
  border:0;border-radius:var(--r-full);
  background:var(--on-dark);color:var(--burgundy-800);
  font:inherit;font-weight:700;cursor:pointer;
}
.aviso-sesion .btn-claro:hover{background:var(--on-dark-muted);}
.aviso-sesion .btn-claro[disabled]{opacity:.6;cursor:default;}
/* Que no tape la cabecera ni el primer bloque de contenido. La altura no
   se puede fijar: en móvil el texto ocupa tres líneas y la tira crece.
   `cuenta.js` mide la tira y escribe --aviso-sesion-h. */
body:has(.aviso-sesion) .shell-scroll{padding-top:calc(var(--aviso-sesion-h,84px) + 8px);}

/* «Reenviar» es un enlace de texto dentro de una línea de datos: se le da
   altura táctil de 44px con padding, sin que parezca un botón. */
.perfil-meta .link-boton{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
}

.lista-pedidos{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.lista-pedidos li{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
}
.lista-pedidos li > div{flex:1;min-width:0;}
.lista-pedidos .ayuda{margin:2px 0 0;}
.pedido-estado{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-full);background:var(--surface-soft);
  color:var(--burgundy-700);border:1px solid var(--border);
}
.pedido-total{font-weight:700;font-variant-numeric:tabular-nums;}

/* Chip de estado de la Zona Admin. Vive aqui y no en una hoja de la
   pantalla porque admin.html solo carga styles.css y eventos.css, y este
   chip lo usan ya dos paneles. Los tres colores son los mismos que gasta
   Mi Espacio para los estados de evento, para que «Activo» signifique lo
   mismo en las dos pantallas. */
.estado-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-full);
  font-size:.7rem;font-weight:700;white-space:nowrap;
}
.estado-chip::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:currentColor;}
.estado-chip.es-confirmado{background:rgba(47,111,42,.10);color:#2F6F2A;}
.estado-chip.es-pendiente {background:#FBF3E2;color:#8A6212;}
.estado-chip.es-finalizado{background:rgba(61,10,22,.06);color:rgba(61,10,22,.55);}

.foto-alta{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);}
.foto-alta .avatar{background-size:cover;background-position:center;}
.foto-alta .ayuda{margin:6px 0 0;}
.foto-alta label.btn{cursor:pointer;}

.campo{display:grid;gap:5px;margin-bottom:var(--space-2);}
.campo label{font-size:.86rem;font-weight:600;}
.campo .ayuda{font-size:.8rem;color:var(--text-muted);}
.campo input,.campo textarea,.campo select{
  min-height:48px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);
  font:inherit;font-size:1rem;width:100%;background:var(--surface);
  transition:border-color var(--dur) var(--ease);
}
.campo textarea{min-height:110px;resize:vertical;}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--burgundy-600);}
.campo.error input,.campo.error textarea{border-color:var(--burgundy-500);}
.msg-error{
  font-size:.82rem;color:var(--burgundy-500);font-weight:500;
  display:flex;gap:6px;align-items:center;
}
.msg-error::before{
  content:"!";width:16px;height:16px;flex:none;border-radius:50%;
  background:var(--burgundy-500);color:#fff;font-size:.7rem;font-weight:700;
  display:grid;place-items:center;
}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);}
.link-boton{
  background:none;border:0;padding:0;color:var(--burgundy-700);
  font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;
}

/* ===========================================================
   QUIÉNES SOMOS
   =========================================================== */
.quienes-inner{
  display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-5);align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,44px);box-shadow:var(--shadow-sm);
}
.quienes-texto h2{margin-bottom:var(--space-2);}
.quienes-media{position:relative;}
.quienes-media img{width:100%;border-radius:var(--r-md);}
.quienes-placeholder{
  aspect-ratio:4/3;border-radius:var(--r-md);display:grid;place-items:center;
  background:linear-gradient(140deg,var(--burgundy-800),var(--burgundy-900));
}
.quienes-placeholder .brand-logo{width:64px;height:92px;color:rgba(255,255,255,.22);}

.wa-bloque{margin-top:var(--space-3);}
.btn-wa{
  background:#25D366;color:#0B2E17;border-color:#25D366;
  display:inline-flex;align-items:center;gap:10px;
}
.btn-wa svg{width:21px;height:21px;}
.btn-wa:hover{background:#1FBA57;border-color:#1FBA57;}
/* sin sesión: se ve, pero deja claro que está cerrado */
.btn-wa.esta-bloqueado{
  background:var(--surface-alt);color:var(--text-muted);border-color:var(--border);
}
.btn-wa.esta-bloqueado:hover{background:var(--surface-soft);transform:none;}
.wa-aviso{
  font-size:.86rem;color:var(--text-muted);margin:10px 0 0;
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
}
.wa-aviso strong{color:var(--burgundy-700);}
/* sobre la banda oscura de Comunidad, el aviso y su enlace van en claro */
.section-dark .wa-aviso{color:var(--on-dark-muted);}
.section-dark .wa-aviso strong{color:#fff;}
.section-dark .link-boton{color:#fff;}
/* bloqueado sobre fondo oscuro: apagado pero legible */
.section-dark .btn-wa.esta-bloqueado{
  background:rgba(255,255,255,.14);color:#fff;border-color:transparent;
}
.section-dark .btn-wa.esta-bloqueado:hover{background:rgba(255,255,255,.22);}

@media (max-width:860px){
  .quienes-inner{grid-template-columns:1fr;gap:var(--space-3);}
  .quienes-media{order:-1;}
  .fila-2{grid-template-columns:1fr;}
}

/* ===========================================================
   PÁGINAS DE PANEL (perfil y admin)
   =========================================================== */
.panel-tarjeta{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(20px,2.5vw,32px);box-shadow:var(--shadow-sm);
}
.panel-tit{font-size:1.3rem;margin-bottom:var(--space-3);}
.vacio-panel{
  text-align:center;padding:var(--space-6) var(--space-3);
  border:1px dashed var(--border);border-radius:var(--r-lg);background:var(--surface-alt);
}
.vacio-panel h2{font-size:1.4rem;}
.vacio-panel p{color:var(--text-muted);margin-bottom:var(--space-3);}

.perfil-grid{display:grid;grid-template-columns:300px 1fr;gap:var(--space-3);align-items:start;}
.perfil-lateral{text-align:center;display:grid;gap:12px;justify-items:center;}
.perfil-lateral h2{font-size:1.25rem;margin:0;}
.perfil-foto-acc{display:grid;gap:8px;justify-items:center;}
.perfil-foto-acc label{cursor:pointer;}
.perfil-meta{
  width:100%;margin:var(--space-2) 0 0;padding-top:var(--space-2);
  border-top:1px solid var(--border);display:grid;gap:10px;
}
.perfil-meta div{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;}
.perfil-meta dt{color:var(--text-muted);margin:0;}
.perfil-meta dd{margin:0;font-weight:600;}

.form-acc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:var(--space-2);}
.guardado{font-size:.88rem;font-weight:600;color:#1C7A47;}
.zona-riesgo{margin-top:var(--space-3);}

/* ---------- admin ---------- */
.admin-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:var(--space-3);}
.admin-tabs button{
  border:1px solid var(--border);background:var(--surface);border-radius:var(--r-full);
  padding:11px 20px;cursor:pointer;font:inherit;font-size:.9rem;font-weight:600;color:var(--text-muted);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.admin-tabs button:hover{border-color:var(--burgundy-600);}
.admin-tabs button[aria-selected="true"]{background:var(--burgundy-700);color:#fff;border-color:var(--burgundy-700);}

/* ---------- Zona Admin · entradas de la gala de E-Awards ----------
   Port de `Zona Admin E-Awards.dc.html`. El mock ya venia con la paleta del
   proyecto (#F3ECE1, #7B142B, #E4DACB), asi que aqui la equivalencia es
   directa y solo se cambian los literales por sus variables. */
.ea-form{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;}
.ea-campo{display:flex;flex-direction:column;gap:6px;}
.ea-campo > span:first-child{
  font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
}
.ea-campo input,.ea-campo select{
  width:100%;box-sizing:border-box;min-height:44px;padding:0 14px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  font:inherit;font-size:15px;color:var(--text);
}
.ea-campo input[type="number"]{width:92px;font-variant-numeric:tabular-nums;font-weight:600;}
.ea-buscar{display:flex;gap:8px;align-items:center;}
.ea-buscar input{flex:1;min-width:0;}
#eaSocioAviso.es-ok{color:#2F6F2A;font-weight:600;}

.ea-socio{
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:16px;margin-bottom:14px;display:flex;flex-direction:column;gap:12px;
}
.ea-socio:last-child{margin-bottom:0;}
.ea-socio-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ea-avatar{
  display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-full);
  background:linear-gradient(150deg,var(--burgundy-600),var(--burgundy-800));
  color:#fff;font-size:12.5px;font-weight:700;flex:none;
}
.ea-socio-nom{font-size:1.05rem;font-weight:600;}
.ea-cuantas{
  margin-left:auto;padding:6px 12px;border-radius:var(--r-full);
  background:var(--surface-soft);border:1px solid var(--border);
  font-size:.8rem;font-weight:600;color:var(--text-muted);white-space:nowrap;
}

.ea-entrada{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 16px;background:var(--surface-soft);
  border:1px solid var(--border);border-radius:var(--r-md);
}
.ea-num{
  flex:none;font-family:var(--font-num);font-size:.82rem;font-weight:600;
  color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ea-entrada-datos{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px;}
.ea-tipo{font-size:.95rem;font-weight:600;}
.ea-entrada-datos .ayuda{margin:0;font-size:.78rem;}
.ea-archivo{
  display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-muted);
}
.ea-archivo.es-hay{color:var(--burgundy-700);font-weight:600;}

/* El desplegable de estado lleva el color de su estado, como en el diseño.
   Son los mismos cuatro que ya pinta `mi-espacio.css` en la tarjeta del
   socio, pero medidos para fondo claro: alli van sobre el casi negro. */
.ea-estado{
  flex:none;min-height:40px;padding:0 14px;border-radius:var(--r-full);
  border:1.5px solid var(--border);background:var(--surface);
  font:inherit;font-size:.85rem;font-weight:600;color:var(--text-muted);cursor:pointer;
}
.ea-estado.es-valida  {border-color:var(--burgundy-600);color:var(--burgundy-700);}
.ea-estado.es-usada   {background:var(--surface-alt);}
.ea-estado.es-anulada {border-color:var(--burgundy-400);color:var(--burgundy-600);background:var(--surface-alt);}

@media (max-width:640px){
  .ea-entrada{align-items:flex-start;}
  .ea-cuantas{margin-left:0;}
}

/* ---------- Zona Admin · cola de validacion de E-Market ----------
   Las tarjetas de solicitud. Se leen de una en una y con calma: aprobar a
   alguien le da la etiqueta de artista, asi que interesa ver el portafolio
   entero antes de pulsar, no un resumen apretado. */
.em-val-lista{display:flex;flex-direction:column;gap:14px;}
.em-val{
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);padding:16px;
  display:flex;flex-direction:column;gap:14px;
}
.em-val-cab{display:flex;align-items:flex-start;gap:13px;flex-wrap:wrap;}
.em-val-foto{
  flex:none;width:56px;height:56px;border-radius:14px;overflow:hidden;
  background:var(--surface-alt);border:1px solid var(--border);
  display:grid;place-items:center;
}
.em-val-foto img{width:100%;height:100%;object-fit:cover;}
.em-val-foto .brand-logo{opacity:.35;}
.em-val-datos{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.em-val-datos strong{font-size:1.02rem;}
.em-val-datos .ayuda{margin:0;}
.em-val-cuerpo{display:flex;flex-direction:column;gap:9px;}
.em-val-cuerpo p{margin:0;}
.em-val-obras{display:flex;gap:8px;flex-wrap:wrap;}
.em-val-obras span{
  width:72px;height:72px;border-radius:11px;overflow:hidden;display:block;
  background:var(--surface-alt);border:1px solid var(--border);
}
.em-val-obras img{width:100%;height:100%;object-fit:cover;}
.em-val-acc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}

.tabla-usuarios{width:100%;border-collapse:collapse;}
.tabla-usuarios th,.tabla-usuarios td{
  text-align:left;padding:12px 10px;border-bottom:1px solid var(--border);font-size:.9rem;
  vertical-align:middle;
}
.tabla-usuarios th{
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);font-weight:600;
}
.tabla-usuarios tr:last-child td{border-bottom:0;}
.celda-usuario{display:flex;align-items:center;gap:11px;}
.celda-usuario .avatar{width:40px;height:40px;font-size:.8rem;}
.celda-usuario .nom{font-weight:600;}
.celda-usuario .mail{font-size:.8rem;color:var(--text-muted);}
.select-rol{
  min-height:40px;padding:0 10px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font:inherit;font-size:.86rem;background:var(--surface);cursor:pointer;
}
.tabla-scroll{overflow-x:auto;}

.bloque-editable{
  display:grid;gap:8px;padding:var(--space-3) 0;border-bottom:1px solid var(--border);
}
.bloque-editable:last-child{border-bottom:0;}
.bloque-editable > label{font-size:.9rem;font-weight:600;}
.bloque-editable textarea,.bloque-editable input[type=text],.bloque-editable input[type=url]{
  min-height:48px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);
  font:inherit;font-size:.98rem;width:100%;background:var(--surface);
}
.bloque-editable textarea{min-height:96px;resize:vertical;}
.bloque-editable input:focus,.bloque-editable textarea:focus{border-color:var(--burgundy-600);}
.bloque-acc{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.previa-img{
  max-width:220px;border-radius:var(--r-md);border:1px solid var(--border);margin-top:8px;
}

.aviso-caja{
  background:var(--surface-soft);border-left:3px solid var(--burgundy-700);
  padding:var(--space-2) var(--space-3);border-radius:0 var(--r-md) var(--r-md) 0;
  margin-bottom:var(--space-3);
}
.aviso-caja p{margin:0;font-size:.92rem;}
.aviso-caja p + p{margin-top:8px;}
.aviso-caja strong{color:var(--burgundy-700);}

@media (max-width:860px){
  .perfil-grid{grid-template-columns:1fr;}
}

/* ===========================================================
   DESCARGA LA APP  (`app.html`)

   Pantalla corta y sin adornos: quien llega aqui quiere instalarla, no
   leer. Lo unico que se cuida es que los pasos de iPhone se sigan sin
   pensar, porque ahi no hay boton que valga y todo depende de que la
   persona encuentre «Compartir».
   =========================================================== */
.app-wrap{display:grid;gap:var(--space-3);max-width:52rem;}
.app-tarjeta{display:grid;gap:12px;justify-items:start;}
.app-tarjeta p{margin:0;max-width:60ch;}

.app-hecho{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--burgundy-700);color:#fff;font-size:1.3rem;font-weight:700;
}

.app-pasos{margin:4px 0 0;padding-left:20px;display:grid;gap:12px;max-width:60ch;}
.app-pasos li{line-height:1.55;}
/* Los iconos van dentro de la linea de texto, asi que se alinean con ella
   y no con la caja: si no, «Compartir» y su icono bailan medio pixel y se
   lee como un error de maquetacion. */
.app-pasos svg{vertical-align:-4px;color:var(--burgundy-700);}

.app-ventajas{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.app-ventajas li{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:14px 16px;font-size:.9rem;line-height:1.5;
}
.app-ventajas strong{display:block;color:var(--burgundy-700);margin-bottom:2px;}

.app-nota{
  border-radius:var(--r-md);padding:14px 16px;
  background:var(--surface-alt);border:1px solid var(--border);
}
.app-nota p{margin:0;font-size:.88rem;line-height:1.55;color:var(--text-muted);}
.app-nota strong{color:var(--text);}

/* ---------------------------------------------------------------------
   PRONTO — entradas del menú cerradas y cortina de página (15/8/2026)
   Ver pronto.js. Se quita entero cuando Eventos y Store se reabran.
   --------------------------------------------------------------------- */
/* Va calcado a `.shell-menu a`, que es lo que sustituye. OJO CON EL
   ICONO: todas las reglas del menu apuntan a `.shell-menu a`, y esto es
   un <span>, asi que NO hereda ninguna — incluida la medida del SVG. Sin
   width/height el icono sale a su tamano natural y se come el menu
   entero. Paso el 15/8/2026, en produccion, y se veia a la primera. */
.shell-pronto{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px;border-radius:var(--r-sm);
  color:var(--on-dark-muted);font-size:.94rem;font-weight:500;
  cursor:default;
}
.shell-pronto svg{width:19px;height:19px;flex:none;opacity:.75;}
.shell-pronto > span{flex:1;min-width:0;}
.shell-submenu .shell-pronto{padding:10px 12px;font-size:.88rem;}
.shell-submenu .shell-pronto svg{width:17px;height:17px;}
.shell-pronto-et{
  flex:none;margin-left:auto;
  font-style:normal;font-size:.6rem;letter-spacing:.1em;font-weight:700;
  text-transform:uppercase;padding:2px 7px;border-radius:var(--r-full);
  background:rgba(255,255,255,.12);color:var(--on-dark-muted);
}
/* Menu plegado: solo el icono, centrado, como los enlaces. La etiqueta
   no cabe y se esconde — igual que hace el texto con `font-size:0`. */
.shell.compacta .shell-pronto{justify-content:center;padding:12px 0;font-size:0;gap:0;}
.shell.compacta .shell-pronto svg{width:20px;height:20px;}
.shell.compacta .shell-pronto-et{display:none;}
@media (max-width:900px){
  .shell.compacta .shell-pronto{justify-content:flex-start;padding:14px 16px;font-size:.95rem;gap:12px;}
  .shell.compacta .shell-pronto-et{display:inline;}
}

.pronto-caja{
  max-width:56ch;margin:0 auto;padding:var(--space-6,64px) var(--space-3,20px);
  text-align:center;display:grid;gap:14px;justify-items:center;
}
.pronto-marca{
  width:64px;height:64px;background:var(--burgundy-700);
  -webkit-mask:url(img/logo-neko.svg) center/contain no-repeat;
          mask:url(img/logo-neko.svg) center/contain no-repeat;
}
.pronto-et{
  margin:0;font-size:.72rem;letter-spacing:.22em;font-weight:700;
  color:var(--burgundy-600);
}
.pronto-tit{margin:0;font-size:clamp(1.6rem,5vw,2.4rem);}
.pronto-txt{margin:0;color:var(--text-muted);max-width:46ch;}
.pronto-acc{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px;}

/* ---------------------------------------------------------------------
   «¿Qué haces en el club?» — intereses y datos del campamento
   Se usa en el registro (cuenta.js) y en Mi perfil (perfil.js).
   --------------------------------------------------------------------- */
.int-caja{
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--space-3);margin:var(--space-3) 0;
}
.int-caja legend{font-weight:700;font-size:.95rem;padding:0 6px;}
.int-caja > .ayuda{margin:0 0 10px;}
.int-lista{display:grid;gap:8px;}
.int-opcion{
  display:flex;align-items:flex-start;gap:10px;min-height:44px;
  padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-md);
  cursor:pointer;background:var(--surface);
  transition:border-color .18s ease,background .18s ease;
}
.int-opcion:hover{border-color:var(--burgundy-600);}
.int-opcion input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--burgundy-700);}
.int-opcion span{display:grid;gap:2px;}
.int-opcion em{font-style:normal;font-size:.82rem;color:var(--text-muted);}
.int-opcion:has(input:checked){border-color:var(--burgundy-700);background:var(--surface-soft);}
/* Subcategorias de un interes (hoy Pokemon → TCG y VGC). Se sangran y se
   marcan con una guia a la izquierda para que se lean como «dentro de»
   la casilla de arriba y no como dos intereses mas de la lista. */
.int-subs{
  display:grid;gap:8px;
  margin:8px 0 2px 14px;padding-left:14px;
  border-left:2px solid var(--border);
}
.int-subs[hidden]{display:none;}
.int-opcion.int-sub{padding:8px 12px;background:var(--surface-soft);}
.int-menor{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);
}
.int-menor select{
  min-height:48px;padding:12px 14px;border:1.5px solid var(--border);
  border-radius:var(--r-md);font:inherit;width:100%;background:var(--surface);
}
/* Chip de la fase, en la Zona Admin y en Mi perfil. */
.fase-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:var(--r-full);
  background:var(--surface-soft);border:1px solid var(--border);
  font-size:.78rem;font-weight:700;color:var(--burgundy-700);
}
.fase-chip[data-fase="0"]{color:var(--text-muted);}

/* ---------------------------------------------------------
   VISOR DE IMÁGENES  (visor.js, 16/8/2026)

   Compartido por la escaleta de Mi Espacio, las obras del E-Market y la
   vista previa del artista. Vive en styles.css y no en la hoja de una
   pantalla concreta porque lo usan tres.

   ⚠️ LAS DOS LINEAS QUE SOSTIENEN EL SCROLL, y que parecen de adorno:

     · `overflow:auto` en el contenedor, obvio.
     · `margin:auto` en la imagen EN LUGAR de `align-items:center`. Un
       hijo mas alto que su contenedor flex centrado se desborda por
       ARRIBA, y esa parte no se alcanza ni con la rueda ni con el
       teclado. Con `margin:auto` se centra cuando cabe y se pega arriba
       cuando no. Si alguien lo «arregla» poniendo `place-items:center`,
       vuelve el fallo y solo se nota con imagenes altas.
   --------------------------------------------------------- */
.neko-visor{
  position:fixed;inset:0;z-index:200;
  display:flex;overflow:auto;overscroll-behavior:contain;
  padding:clamp(12px,3vw,40px);
  background:rgba(20,6,10,.92);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  cursor:zoom-out;
  -webkit-overflow-scrolling:touch;
}
.neko-visor[hidden]{display:none;}

/* Manda el ANCHO: la imagen se ve grande y lo que sobra se recorre.
   Nada de `max-height`, que era lo que dejaba las escaletas ilegibles. */
.neko-visor img{
  margin:auto;
  max-width:100%;width:auto;height:auto;
  border-radius:var(--r-md);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  cursor:default;
}

.neko-visor-cerrar{
  position:fixed;top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);
  display:grid;place-items:center;
  width:44px;height:44px;                  /* objetivo tactil de 44 px */
  border:1px solid rgba(255,255,255,.24);border-radius:50%;
  background:rgba(20,6,10,.6);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;transition:background .25s ease;z-index:1;
}
.neko-visor-cerrar:hover{background:rgba(255,255,255,.26);}

/* Lo que se puede ampliar lo dice el cursor, y se puede pulsar con teclado. */
[data-ampliar]{cursor:zoom-in;}