/* Cabina de Flow
   ---------------------------------------------------------------
   Los materiales salen del propio bar:
   · azulejo negro brillante -> fondo del calendario (la pared)
   · latón                   -> marcos y baldas, como las estanterías
   · mármol crema            -> las fichas (la barra)
   · neón cian y magenta     -> el rótulo

   Y el color dice el estado:
   cian  = noche libre, el tubo encendido esperando
   latón = noche cogida, el DJ ya está colocado en la estantería    */

:root{
  /* Pared */
  --negro:#08080A;
  --azulejo:#0C0C10;
  --junta:rgba(255,255,255,.035);
  /* Neón */
  --cian:#14D8F0;
  --magenta:#F0189E;
  /* Metal */
  --laton:#C9A24B;
  --laton-claro:#E7CB8A;
  /* Barra */
  --marmol:#F2EEE7;
  --tinta:#16151A;
  --tinta-suave:#6B6560;
  /* Texto sobre negro */
  --hueso:#EDEAE4;
  --gris:#8A8A96;

  --display:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --texto:'Jost',system-ui,sans-serif;
}

*{box-sizing:border-box}

/* ---------------------------------------------------------------- */
/* La pared: azulejo negro con brillo y el reflejo del rótulo        */
/* ---------------------------------------------------------------- */

body{
  margin:0;
  background-color:var(--negro);
  color:var(--hueso);
  font-family:var(--texto);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(75vw 45vh at 12% -8%, rgba(20,216,240,.13), transparent 62%),
    radial-gradient(65vw 40vh at 92% 2%, rgba(240,24,158,.11), transparent 62%),
    linear-gradient(168deg, rgba(255,255,255,.05) 0%, transparent 26%),
    repeating-linear-gradient(0deg, var(--junta) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, var(--junta) 0 1px, transparent 1px 88px);
  background-attachment:fixed;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat;
}

a{color:inherit}
img{max-width:100%;display:block}

/* ---------------------------------------------------------------- */
/* Portada                                                           */
/* ---------------------------------------------------------------- */

.portada{padding:60px 20px 30px;text-align:center;max-width:720px;margin:0 auto}
.portada .logo{
  width:min(300px,72vw);
  height:auto;
  margin:0 auto 30px;
  filter:drop-shadow(0 0 26px rgba(20,216,240,.28)) drop-shadow(0 0 40px rgba(240,24,158,.18));
}
.portada h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.2rem,6.4vw,3.4rem);
  line-height:1.12;
  letter-spacing:.005em;
  margin:0 0 14px;
  /* pan de oro: del latón mate al brillo y vuelta */
  background:linear-gradient(96deg,#A8842F 0%,#E7CB8A 26%,#FFF3D0 44%,#D8B25E 62%,#9C7A2A 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:#E7CB8A;
  -webkit-text-fill-color:transparent;
  padding-bottom:.08em;
}
.portada h1 em{font-style:italic;font-weight:400}
.entradilla{color:var(--gris);margin:0 0 22px;font-size:1.02rem;font-weight:300;letter-spacing:.01em}
.dato{
  display:inline-block;
  margin:0;
  padding:8px 18px;
  border:1px solid rgba(201,162,75,.5);
  border-radius:999px;
  color:var(--laton-claro);
  font-size:.84rem;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 0 18px rgba(201,162,75,.12);
}
.dato .cifra{font-family:var(--display);font-weight:600;font-size:1.25rem;color:#FFF3D0}

/* ---------------------------------------------------------------- */
/* Estructura                                                        */
/* ---------------------------------------------------------------- */

.envoltorio{max-width:1080px;margin:0 auto;padding:8px 20px 80px}
.envoltorio.estrecho{max-width:620px;padding-top:44px}
.vacio{color:var(--gris);text-align:center;padding:40px 0}

/* La línea de cada mes es una balda de latón */
.mes{margin:46px 0 0}
.mes h2{
  display:flex;
  align-items:center;
  gap:16px;
  font-family:var(--display);
  font-weight:500;
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--laton-claro);
  margin:0 0 18px;
}
.mes h2 i{font-style:italic;font-weight:400;color:rgba(201,162,75,.65);letter-spacing:.1em}
.mes h2::after{
  content:'';
  flex:1;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--laton) 0%,rgba(201,162,75,.35) 45%,transparent 100%);
}

/* ---------------------------------------------------------------- */
/* Calendario mensual                                                */
/* ---------------------------------------------------------------- */

.leyenda{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  margin:26px 0 0;
  font-size:.78rem;
  font-weight:300;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gris);
}
.leyenda span{display:inline-flex;align-items:center;gap:8px}
.punto{width:9px;height:9px;border-radius:50%;display:inline-block}
.punto.libre{background:var(--cian);box-shadow:0 0 8px rgba(20,216,240,.8)}
.punto.cogida{background:var(--laton);box-shadow:0 0 8px rgba(201,162,75,.6)}
.punto.cerrada{background:#3A3A42}

.calendario{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}

.cabecera{
  text-align:center;
  padding:4px 0 8px;
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.16em;
  color:var(--gris);
}

.celda{
  position:relative;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:6px 7px;
  text-decoration:none;
  color:inherit;
}
.celda .num{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(.95rem,3.2vw,1.35rem);
  line-height:1;
}

/* Día sin sesión y días de relleno */
.celda.fuera{background:none}
.celda.muda{background:rgba(255,255,255,.016);border:1px solid rgba(255,255,255,.04)}
.celda.muda .num{color:#4A4A54}

/* Cerrada a inscripciones */
.celda.cerrada{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.celda.cerrada .num{color:#6E6E78}

/* Libre: tubo de neón encendido */
.celda.libre{
  border:1.5px solid rgba(20,216,240,.55);
  background:linear-gradient(170deg,rgba(20,216,240,.1),rgba(240,24,158,.06));
  box-shadow:inset 0 -14px 22px -14px rgba(240,24,158,.55),0 0 14px rgba(20,216,240,.14);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.celda.libre .num{color:var(--cian)}
.celda.libre .etiqueta{
  margin-top:auto;
  font-size:.6rem;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(20,216,240,.85);
}
.celda.libre:hover,
.celda.libre:focus-visible{
  transform:translateY(-2px);
  border-color:var(--cian);
  box-shadow:inset 0 -16px 26px -14px rgba(240,24,158,.7),0 0 24px rgba(20,216,240,.3);
}

/* Cogida: la foto dentro de la casilla, con el canto de latón */
.celda.cogida{
  border:1px solid rgba(201,162,75,.45);
  border-bottom:2px solid var(--laton);
  background:var(--azulejo);
}
.celda.cogida img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.celda.cogida::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(8,8,10,.25) 0%,rgba(8,8,10,.5) 40%,rgba(8,8,10,.9) 100%);
}
.celda.cogida .num,
.celda.cogida .quien{position:relative;z-index:2}
.celda.cogida .num{color:#FFF3D0;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.celda.cogida .quien{
  margin-top:auto;
  font-size:.6rem;
  font-weight:400;
  line-height:1.15;
  letter-spacing:.02em;
  color:rgba(255,246,226,.95);
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.celda.pasada{opacity:.45}

@media (max-width:560px){
  .calendario{gap:4px}
  .celda{border-radius:8px;padding:4px 5px}
  .celda.cogida .quien,
  .celda.libre .etiqueta{display:none}
}

@media (prefers-reduced-motion:reduce){
  .celda.libre{transition:none}
  .celda.libre:hover{transform:none}
}

/* Quién pincha este mes, debajo de la rejilla */
.cartel{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cartel li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 4px;
  border-bottom:1px solid rgba(201,162,75,.16);
}
.cartel img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid rgba(201,162,75,.6)}
.cartel .fecha-mini{
  font-family:var(--display);
  font-size:.9rem;
  color:var(--laton-claro);
  min-width:56px;
}
.cartel .nombre{font-family:var(--display);font-weight:600;font-size:1rem;color:#FFF6E2}
.cartel .estilo{font-size:.82rem;font-weight:300;font-style:italic;color:var(--gris)}
.cartel .ig{margin-left:auto;font-size:.78rem;color:var(--gris);text-decoration:none}
.cartel .ig:hover{color:var(--cian)}
@media (max-width:560px){
  .cartel li{flex-wrap:wrap;gap:8px}
  .cartel .estilo{width:100%;padding-left:50px;margin-top:-4px}
  .cartel .ig{margin-left:auto}
}

/* ---------------------------------------------------------------- */
/* La barra: ficha de mármol                                         */
/* ---------------------------------------------------------------- */

.volver{display:inline-block;margin-bottom:20px;color:var(--gris);text-decoration:none;font-size:.92rem}
.volver:hover{color:var(--cian)}

.ficha{
  position:relative;
  border-radius:20px;
  padding:32px;
  color:var(--tinta);
  background-color:var(--marmol);
  background-image:
    linear-gradient(112deg,transparent 38%,rgba(150,140,124,.11) 39.2%,transparent 40.4%),
    linear-gradient(97deg,transparent 62%,rgba(150,140,124,.08) 62.8%,transparent 64%),
    linear-gradient(126deg,transparent 74%,rgba(150,140,124,.07) 75%,transparent 76.5%),
    linear-gradient(160deg,rgba(255,255,255,.7),transparent 45%);
  border:1px solid rgba(201,162,75,.45);
  box-shadow:0 22px 50px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04);
}
.ficha.hecho{border-color:var(--laton);box-shadow:0 0 34px rgba(201,162,75,.18),0 22px 50px -24px rgba(0,0,0,.9)}
.logo-oro{width:118px;height:auto;margin:0 0 22px}

.eyebrow{margin:0 0 10px;font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.26em;color:#9A7B2E}
.ficha h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.7rem,5.4vw,2.4rem);
  line-height:1.14;
  margin:0 0 12px;
  color:var(--tinta);
}
.ficha .entradilla{color:var(--tinta-suave);margin:0;font-weight:300}

.resumen{display:flex;gap:18px;align-items:flex-start;margin:26px 0;flex-wrap:wrap}
.resumen img{width:120px;height:120px;border-radius:12px;object-fit:cover;border:2px solid var(--laton)}
.resumen ul{list-style:none;margin:0;padding:0;flex:1;min-width:200px}
.resumen li{padding:7px 0;border-bottom:1px solid rgba(22,21,26,.1);font-size:.95rem}
.resumen li span{display:block;color:var(--tinta-suave);font-size:.72rem;text-transform:uppercase;letter-spacing:.11em}

.aviso{
  margin:24px 0;
  padding:16px 18px;
  border-radius:12px;
  background:rgba(22,21,26,.05);
  border:1px solid rgba(22,21,26,.14);
  font-size:.95rem;
}
.aviso p{margin:0 0 8px}
.aviso p:last-child{margin-bottom:0}
.enlace-cancelar{word-break:break-all;font-size:.85rem}
.enlace-cancelar a{color:#0E7C8C;font-weight:500}
.menudo{font-size:.85rem;color:var(--tinta-suave)}

/* Ya tiene noche: no es un error, es un aviso amable */
.limite{
  margin:0 0 22px;
  padding:18px 20px;
  border-radius:12px;
  background:rgba(201,162,75,.1);
  border:1px solid rgba(201,162,75,.55);
}
.limite .grande{
  margin:0 0 8px;
  font-family:var(--display);
  font-weight:500;
  font-size:1.05rem;
  line-height:1.35;
  color:#6E5416;
}
.limite .menudo{margin:0}

.errores{
  margin:0 0 22px;
  padding:14px 16px;
  border-radius:12px;
  background:#FBE9E9;
  border:1px solid rgba(190,60,60,.35);
  color:#8C2020;
  font-size:.94rem;
}
.errores p{margin:0 0 6px}
.errores p:last-child{margin:0}

/* ---------------------------------------------------------------- */
/* Formulario, sobre el mármol                                       */
/* ---------------------------------------------------------------- */

.formulario{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.formulario label{display:flex;flex-direction:column;gap:7px;font-size:.86rem;color:var(--tinta-suave);font-weight:500}
.par{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.par{grid-template-columns:1fr}}
.opcional{color:rgba(107,101,96,.75);font-size:.78rem;font-weight:400}

.ficha input[type=text],
.ficha input[type=email],
.ficha input[type=tel],
.ficha textarea{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(22,21,26,.2);
  background:rgba(255,255,255,.78);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:1rem;
}
.ficha input[type=file]{
  padding:13px;
  border-radius:10px;
  border:1.5px dashed rgba(201,162,75,.75);
  background:rgba(201,162,75,.07);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:.9rem;
  width:100%;
}
.ficha textarea{resize:vertical}
.ficha input:focus-visible,
.ficha textarea:focus-visible{outline:2px solid #0E7C8C;outline-offset:1px}
button:focus-visible,a:focus-visible{outline:2px solid var(--cian);outline-offset:2px}
.pista{font-size:.8rem;color:var(--tinta-suave);line-height:1.4;font-weight:400}
.previa{margin-top:-4px}
.previa img{width:104px;height:104px;object-fit:cover;border-radius:10px;border:2px solid var(--laton)}

.casilla{flex-direction:row!important;align-items:flex-start;gap:12px;font-size:.85rem;line-height:1.5}
.casilla input{margin-top:3px;width:18px;height:18px;accent-color:var(--magenta);flex:0 0 auto}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------- */
/* Botones                                                           */
/* ---------------------------------------------------------------- */

.botones{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.boton{
  display:inline-block;
  padding:13px 24px;
  border-radius:999px;
  border:none;
  background:var(--magenta);
  color:#fff;
  font-family:var(--texto);
  font-weight:500;
  font-size:.92rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
}
.boton:hover{filter:brightness(1.1)}
.boton.grande{width:100%;padding:17px;font-size:.98rem;margin-top:8px}
.boton.fantasma{background:transparent;border:1.5px solid rgba(22,21,26,.28);color:var(--tinta)}
.boton.peligro{background:#B32B2B;color:#fff}

/* ---------------------------------------------------------------- */
/* Pie                                                               */
/* ---------------------------------------------------------------- */

.pie{
  text-align:center;
  padding:34px 20px 60px;
  color:var(--gris);
  font-size:.88rem;
  border-top:1px solid rgba(201,162,75,.28);
  margin-top:20px;
}
.pie p{margin:4px 0}
.pie a{color:var(--cian);text-decoration:none}