/* ==========================================================================
   CLUB — sistema de diseño de la web
   Fuente de verdad: brand-book-club.html (V2, jul 2026) del repo `club`.
   Lo replica aquí porque la web y la app tienen que verse de la misma familia.

   Las tres reglas que gobiernan este archivo:
   1. CLUB no tiene color. Blanco y negro estricto; el color lo ponen las
      fotos de la noche, nunca la plataforma.
   2. Poppins manda en titulares, UI y cuerpo — geométrica y redonda, hace
      familia con la burbuja. Bagel Fat One es SOLO para lo divertido:
      stickers, el boleto, el carnet, insignias. Nunca en títulos.
   3. El logo vive a -6° y nunca se endereza. Todo lo demás rota máximo ±3°.

   Escrito mobile-first: lo que hay antes del primer @media es el teléfono.
   ========================================================================== */

/* ------------------------------------------------------------- fuentes
   Servidas desde el propio sitio. La voz que estructura es POPPINS —
   geométrica y redonda, hace familia con la burbuja en vez de contrastarla
   (brand-book-club.html §04, la copia oficial vive en este mismo repo).
   Bagel Fat One sigue reservada a lo divertido: stickers, el boleto,
   el carnet, badges e insignias. Nunca en títulos.
   Licencias y procedencia en /assets/fuentes/LEEME.txt

   font-display:swap — el texto se lee desde el primer instante con la fuente
   del sistema y cambia cuando llega la nuestra. En una puerta a las 11 p.m.
   con mala señal, texto invisible esperando una fuente es inaceptable. */

@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fuentes/poppins-400.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fuentes/poppins-500.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fuentes/poppins-600.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fuentes/poppins-700.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/assets/fuentes/poppins-800.woff2') format('woff2');
}
@font-face{
  font-family:'Bagel Fat One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fuentes/bagel-fat-one.woff2') format('woff2');
}

:root{
  /* Color — no hay más que estos dos, y sus derivados de opacidad */
  --negro:#000;
  --blanco:#fff;
  --texto-2:rgba(255,255,255,.62);   /* texto secundario */
  --texto-3:rgba(255,255,255,.42);   /* metadatos, letra chica */
  --keyline:rgba(255,255,255,.22);   /* bordes suaves */
  --keyline-fuerte:rgba(255,255,255,.5);
  --superficie:#0b0b0b;              /* tarjetas sobre el negro */
  --superficie-2:#141414;            /* campos y estados hover */

  /* Tipografía */
  --ui:'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --disp:'Bagel Fat One', var(--ui);

  /* Constantes de marca */
  --tilt-logo:-6deg;
  --tilt-sticker:-3deg;

  /* Espaciado (mismos nombres que Tokens.swift) */
  --xs:4px; --s:8px; --m:16px; --l:24px; --xl:32px; --xxl:48px;

  /* Radios y trazos */
  --r-campo:14px; --r-boton:16px; --r-card:20px;
  --trazo:1.5px;

  /* Un solo spring de marca: física de globo, squash & stretch */
  --spring:cubic-bezier(.2,1.6,.4,1);
  --rapido:.14s;

  /* Alto real de la ventana en móvil (barra del navegador incluida) */
  --vh:100dvh;
}

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

html{
  background:var(--negro);
  /* Evita que iOS infle los tamaños al girar el teléfono */
  -webkit-text-size-adjust:100%;
}

body{
  min-height:var(--vh);
  background:var(--negro);
  color:var(--blanco);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* El pulgar nunca queda debajo del notch ni de la barra de gestos */
  padding-bottom:env(safe-area-inset-bottom);
}

::selection{background:var(--blanco); color:var(--negro);}

/* height:auto es obligatorio: sin él, una <img> con atributos width/height
   (que deben estar, para que la página no salte al cargar) se DEFORMA en
   cuanto el CSS le cambia solo el ancho. */
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}

/* Grano de película sobre todo: la textura que hace que el negro no se lea
   como un fondo vacío sino como una noche. */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- tipografía */

.h1, h1{font-family:var(--ui); font-weight:800; font-size:clamp(28px,7vw,44px); line-height:1.05; letter-spacing:-.02em;}
.h2, h2{font-family:var(--ui); font-weight:700; font-size:clamp(21px,5vw,30px); line-height:1.12; letter-spacing:-.015em;}
.h3, h3{font-family:var(--ui); font-weight:600; font-size:clamp(17px,4vw,21px); line-height:1.2;}

/* Rótulo de sección: la voz que estructura, nunca protagonista */
.kicker{
  font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--texto-3);
}

.dim{color:var(--texto-2);}
.dimmer{color:var(--texto-3);}
.fine{font-size:12.5px; line-height:1.6; color:var(--texto-3);}

/* Numerales: precios, fechas y números de miembro con ancho fijo, para que
   una columna de horas no baile. */
.num{font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;}

/* ------------------------------------------------------- dispositivo sticker
   El contorno del logo —relleno blanco + trazo negro + keyline blanco exterior—
   aplicado a texto. Es regla de sistema, no decoración: cualquier palabra que
   quiera leerse como CLUB pasa por aquí. */
.sticker{
  font-family:var(--disp);
  color:var(--blanco);
  -webkit-text-stroke:6px var(--negro);
  paint-order:stroke fill;
  position:relative; display:inline-block;
  transform:rotate(var(--tilt-sticker));
  line-height:1;
}
.sticker::before{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%;
  -webkit-text-stroke:14px var(--blanco);
  paint-order:stroke fill; z-index:-1;
}
.sticker.recto{transform:none;}
.sticker.chico{-webkit-text-stroke-width:4px;}
.sticker.chico::before{-webkit-text-stroke-width:10px;}

/* ------------------------------------------------------------------ cinta */

.tape{
  overflow:hidden; max-width:100%; background:var(--negro);
  border-top:2px solid var(--blanco); border-bottom:2px solid var(--blanco);
  padding:7px 0; flex:none; position:relative; z-index:2;
}
.tape .track{display:flex; width:max-content; animation:mq 70s linear infinite; will-change:transform;}
.tape .in{display:block; white-space:nowrap; font-weight:700; font-size:12px; letter-spacing:.3em;}
.tape .c{font-family:var(--disp); font-size:14px; display:inline-block; transform:rotate(var(--tilt-logo)) translateY(1px); margin:0 4px;}
.tape.rev .track{animation-direction:reverse;}
@keyframes mq{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ------------------------------------------------------------------ marco */

.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 18px;}
.wrap.angosto{max-width:640px;}
.wrap.medio{max-width:840px;}

/* Barra superior: el logo siempre a la izquierda, siempre torcido */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(0,0,0,.86);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.09);
  padding-top:env(safe-area-inset-top);
}
.topbar .in{display:flex; align-items:center; gap:var(--m); height:56px;}
.topbar .logo{height:26px; width:auto; flex:none;}
.topbar nav{margin-left:auto; display:flex; align-items:center; gap:2px;}
.topbar nav a{
  font-size:13px; font-weight:600; color:var(--texto-2); text-decoration:none;
  padding:8px 10px; border-radius:999px; transition:color var(--rapido), background var(--rapido);
  white-space:nowrap;
}
.topbar nav a:hover, .topbar nav a[aria-current]{color:var(--blanco); background:rgba(255,255,255,.09);}

/* -------------------------------------------------------------- botones
   Un solo curve de marca: al tocar se aplasta, al soltar rebota. */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ui); font-weight:700; font-size:15px; line-height:1;
  padding:15px 22px; border-radius:var(--r-boton); border:none; cursor:pointer;
  text-decoration:none; text-align:center;
  transition:transform var(--rapido) var(--spring), background var(--rapido), border-color var(--rapido), opacity var(--rapido);
  /* 44px de alto mínimo: el estándar de área táctil de Apple */
  min-height:48px;
  -webkit-tap-highlight-color:transparent;
}
.btn.primario{background:var(--blanco); color:var(--negro);}
.btn.secundario{background:transparent; color:var(--blanco); border:2px solid rgba(255,255,255,.28);}
.btn.secundario:hover{border-color:var(--blanco);}
.btn.fantasma{background:transparent; color:var(--texto-2); padding:10px 12px; min-height:40px; font-weight:600;}
.btn.fantasma:hover{color:var(--blanco);}
.btn.bloque{width:100%;}
.btn.chico{padding:10px 16px; font-size:13.5px; min-height:40px; border-radius:999px;}
.btn:active{transform:scale(.95);}
.btn:hover{transform:scale(1.03);}
.btn:disabled, .btn[aria-disabled=true]{opacity:.45; cursor:not-allowed; transform:none;}
.btn:focus-visible{outline:3px solid var(--blanco); outline-offset:3px;}

/* -------------------------------------------------------------- campos */

.campo{display:block; width:100%;}
.campo + .campo{margin-top:var(--m);}
.campo .lbl{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--texto-3); margin-bottom:7px;
}
.campo input, .campo textarea, .campo select{
  width:100%; background:var(--superficie-2); color:var(--blanco);
  border:2px solid rgba(255,255,255,.14); border-radius:var(--r-campo);
  padding:14px 16px; font-family:var(--ui);
  /* 16px exactos: por debajo de eso, Safari en iPhone hace zoom al enfocar */
  font-size:16px;
  outline:none; transition:border-color var(--rapido), background var(--rapido);
  -webkit-appearance:none; appearance:none;
}
.campo textarea{min-height:110px; resize:vertical; line-height:1.5;}
.campo input::placeholder, .campo textarea::placeholder{color:rgba(255,255,255,.3);}
.campo input:focus, .campo textarea:focus, .campo select:focus{
  border-color:var(--blanco); background:#181818;
}
.campo .ayuda{margin-top:6px; font-size:12px; color:var(--texto-3);}
.campo .mal{margin-top:6px; font-size:12.5px; color:#ff8c8c; display:none;}
.campo.error input, .campo.error textarea{border-color:#ff8c8c;}
.campo.error .mal{display:block;}

/* Selector con flecha propia (el nativo de Android rompe el B/N) */
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px;
}

/* -------------------------------------------------------------- tarjetas */

.card{
  background:var(--superficie); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-card); overflow:hidden;
}
.card.tocable{transition:transform var(--rapido) var(--spring), border-color var(--rapido);}
.card.tocable:hover{border-color:var(--keyline-fuerte); transform:translateY(-2px);}
.card.tocable:active{transform:scale(.985);}

/* Insignia / pastilla de estado */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; border:1px solid var(--keyline);
  color:var(--texto-2); white-space:nowrap;
}
.pill.fuerte{background:var(--blanco); color:var(--negro); border-color:var(--blanco);}
.pill.apagada{opacity:.55;}

/* Bloque de fecha: el dato que más se busca en una tarjeta de evento */
.fecha-bloque{
  flex:none; width:56px; text-align:center; border:1px solid var(--keyline);
  border-radius:12px; padding:8px 4px; line-height:1;
}
.fecha-bloque .mes{font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-2);}
.fecha-bloque .dia{font-size:22px; font-weight:700; margin-top:3px;}

/* --------------------------------------------------------------- avatares */

/* Inicial o emoji dentro de un círculo. Se usa para clubes y para miembros.
   El grayscale no es un efecto: es la regla. CLUB no tiene color y un emoji
   a todo color mete una paleta ajena en una marca B/N estricta. El único
   color de una pieza CLUB lo ponen las fotos de la noche. */
.avatar{
  flex:none; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--superficie-2); border:1px solid var(--keyline);
  font-family:var(--disp); font-size:18px; line-height:1;
  overflow:hidden;
  filter:grayscale(1) contrast(1.15);
}
.avatar.grande{width:76px; height:76px; font-size:32px;}
.avatar.chico{width:30px; height:30px; font-size:13px;}
.avatar img{width:100%; height:100%; object-fit:cover;}

/* Fila de caras superpuestas: "quién va" de un vistazo */
.caras{display:flex; align-items:center;}
.caras .avatar{margin-right:-10px; border:2px solid var(--negro);}
.caras .avatar:last-child{margin-right:0;}

/* ------------------------------------------------------------- utilidades */

.fila{display:flex; align-items:center; gap:var(--m);}
.fila.arriba{align-items:flex-start;}
.entre{justify-content:space-between;}
.crece{flex:1; min-width:0;}   /* min-width:0 evita que un texto largo rompa el flex */
.col{display:flex; flex-direction:column;}
.gap-s{gap:var(--s);} .gap-m{gap:var(--m);} .gap-l{gap:var(--l);}
.centro{text-align:center;}
.oculto{display:none !important;}
.mt-s{margin-top:var(--s);} .mt-m{margin-top:var(--m);} .mt-l{margin-top:var(--l);} .mt-xl{margin-top:var(--xl);}
.seccion{padding:var(--xl) 0;}
.divisor{height:1px; background:rgba(255,255,255,.1); border:0; margin:var(--l) 0;}

/* Texto que no puede romper el ancho de su tarjeta */
.trunca{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.trunca-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.trunca-3{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}

/* Solo para lectores de pantalla */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ------------------------------------------------------------- esqueletos
   El estado de carga nunca es un spinner en blanco: es la forma de lo que
   viene, para que la página no salte cuando llega. */
.skel{
  background:linear-gradient(90deg, #131313 25%, #1d1d1d 37%, #131313 63%);
  background-size:400% 100%; animation:brillo 1.4s ease infinite; border-radius:8px;
}
@keyframes brillo{from{background-position:100% 50%} to{background-position:0 50%}}

/* --------------------------------------------------------------- vacíos */

.vacio{
  text-align:center; padding:var(--xxl) var(--l);
  border:1px dashed rgba(255,255,255,.18); border-radius:var(--r-card);
}
.vacio .icono{font-size:34px; margin-bottom:var(--m); display:block;}

/* ------------------------------------------------------------- idiomas */

.langs{display:flex; gap:5px;}
.langs button{
  background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--texto-3);
  font-family:inherit; font-size:11.5px; font-weight:600; letter-spacing:.06em;
  padding:0 12px; border-radius:999px; cursor:pointer; transition:all var(--rapido);
  /* 40px: por debajo de eso el dedo falla, y estas pastillas se tocan con el
     teléfono en una mano. */
  min-height:40px; min-width:44px;
}
.langs button:hover{color:var(--blanco); border-color:var(--keyline-fuerte);}
.langs button.on{background:var(--blanco); color:var(--negro); border-color:var(--blanco);}

/* --------------------------------------------------------------- footer */

.pie{
  border-top:1px solid rgba(255,255,255,.1); margin-top:var(--xxl);
  padding:var(--l) 0 calc(var(--xl) + env(safe-area-inset-bottom));
  text-align:center; font-size:12.5px; color:var(--texto-3);
}
.pie a{color:var(--texto-2); text-decoration:none; font-weight:600;}
.pie a:hover{color:var(--blanco);}
.pie .linea + .linea{margin-top:8px;}

/* ------------------------------------------------------------- mensajes */

.aviso{
  border:1px solid var(--keyline); border-radius:var(--r-campo);
  padding:14px 16px; font-size:14px; line-height:1.5; color:var(--texto-2);
  background:var(--superficie);
}
.aviso.malo{border-color:rgba(255,140,140,.45); color:#ffc9c9;}
.aviso.bueno{border-color:rgba(255,255,255,.5); color:var(--blanco);}

/* ------------------------------------------------------------- pantallas
   Mobile-first: todo lo de arriba es el teléfono. Aquí solo se ensancha. */

@media (min-width:600px){
  body{font-size:16.5px;}
  .wrap{padding:0 24px;}
  .topbar .in{height:64px;}
  .topbar .logo{height:30px;}
  .topbar nav a{font-size:14px; padding:9px 13px;}
  .seccion{padding:var(--xxl) 0;}
  .fecha-bloque{width:64px;}
}

@media (min-width:900px){
  .wrap{padding:0 32px;}
}

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}