/* ════════════════════════════════════════════════════════════
   VL BARBER — WEB PÚBLICA
   Mobile-first. Todo el flujo de reserva cabe en una columna;
   a partir de 900px el asistente pasa a dos columnas con el
   resumen fijo a la derecha.
════════════════════════════════════════════════════════════ */

/* Textura sutil de fondo: dos halos dorados muy tenues */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 78% -8%, rgba(212,175,55,.10), transparent 62%),
    radial-gradient(52vw 52vw at 4% 96%, rgba(201,207,216,.05), transparent 60%);
}

.contenedor{ width:100%; max-width:1120px; margin-inline:auto; padding-inline:20px }

/* ── NAV ─────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(8,8,10,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:62px }
.logo{ display:flex; align-items:center; gap:11px }
.logo-marca{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:11px; background:linear-gradient(135deg,var(--oro-luz),var(--oro-oscuro));
  color:#0a0a0c; font-family:var(--fD); font-size:1.3rem; letter-spacing:.02em;
}
.logo-txt{ font-family:var(--fD); font-size:1.45rem; letter-spacing:.06em }
.logo-txt span{ color:var(--oro) }
.nav-links{ display:none; gap:26px; font-size:.85rem; font-weight:600; color:var(--text-2) }
.nav-links a:hover{ color:var(--oro) }
@media (min-width:760px){ .nav-links{ display:flex } }

/* ── HERO ────────────────────────────────────────────────── */
.hero{ padding:56px 0 44px; position:relative }
.hero h1{
  font-family:var(--fD); font-size:clamp(3.1rem,17vw,7rem);
  line-height:.86; letter-spacing:.01em; text-transform:uppercase; margin:18px 0 14px;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--oro-luz),var(--oro) 45%,#8c6d1f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ color:var(--text-2); max-width:44ch; font-size:1.02rem }
.hero-acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }
.hero-datos{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin-top:38px; padding-top:26px; border-top:1px solid var(--line);
}
.hero-datos b{ display:block; font-family:var(--fD); font-size:1.8rem; color:var(--oro); letter-spacing:.02em }
.hero-datos span{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--dim) }

/* ── SECCIONES ───────────────────────────────────────────── */
.seccion{ padding:52px 0; scroll-margin-top:70px }
.seccion-cab{ margin-bottom:26px }
.seccion-cab h2{
  font-family:var(--fD); font-size:clamp(2.1rem,8vw,3.2rem);
  letter-spacing:.02em; text-transform:uppercase; margin-top:10px;
}
.seccion-cab p{ color:var(--dim); max-width:52ch; margin-top:6px }

/* ── SERVICIOS (escaparate) ──────────────────────────────── */
.rejilla-servicios{ display:grid; gap:12px; grid-template-columns:1fr }
@media (min-width:640px){ .rejilla-servicios{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:960px){ .rejilla-servicios{ grid-template-columns:repeat(3,1fr) } }
.servicio-vitrina{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:18px 20px; border-radius:var(--r-md);
  background:var(--panel); border:1px solid var(--line);
  transition:border-color .2s var(--ease-fast), transform .25s var(--ease);
}
.servicio-vitrina:hover{ border-color:var(--line-2); transform:translateY(-2px) }
.servicio-vitrina h3{ font-size:1rem; font-weight:700 }
.servicio-vitrina small{ color:var(--dim); font-size:.8rem }
.servicio-vitrina b{ font-family:var(--fD); font-size:1.55rem; color:var(--oro); letter-spacing:.02em }

/* ════════════════════════════════════════════════════════════
   ASISTENTE DE RESERVA
════════════════════════════════════════════════════════════ */
/* minmax(0,…) en vez de 1fr: si no, la tira de días (que scrollea sola)
   estira la columna con su ancho completo y el móvil se va de lado. */
.reserva{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr) }
.reserva > *{ min-width:0 }
@media (min-width:900px){
  .reserva{ grid-template-columns:minmax(0,1fr) 320px; align-items:start }
  .resumen{ position:sticky; top:82px }
}

/* Barra de pasos */
.pasos{ display:flex; align-items:center; gap:6px; margin-bottom:22px }
.paso{ flex:1; display:flex; flex-direction:column; gap:7px; min-width:0 }
.paso-barra{ height:3px; border-radius:3px; background:var(--line-2); overflow:hidden }
.paso-barra i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--oro-luz),var(--oro));
  transition:width .5s var(--ease);
}
.paso.activo .paso-barra i,.paso.hecho .paso-barra i{ width:100% }
.paso span{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.paso.activo span{ color:var(--oro) }
.paso.hecho span{ color:var(--text-2) }

/* Móvil estrecho: cuatro rótulos no caben sin recortarse, así que se
   dejan solo las barras y se escribe debajo el paso en el que estás. */
.paso-actual{ display:none }
@media (max-width:560px){
  .pasos .paso span{ display:none }
  .paso-actual{
    display:block; margin:-12px 0 18px;
    font-size:.72rem; font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; color:var(--oro);
  }
}

.panel-paso{ padding:22px 18px }
@media (min-width:560px){ .panel-paso{ padding:28px 26px } }
.panel-paso h3{
  font-family:var(--fD); font-size:1.7rem; letter-spacing:.03em;
  text-transform:uppercase; margin-bottom:4px;
}
.panel-paso > p.sub{ color:var(--dim); font-size:.88rem; margin-bottom:20px }

/* Paso 1 — tarjetas de servicio */
.lista-servicios{ display:grid; gap:10px }
.opcion-servicio{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px; border-radius:var(--r-md);
  background:var(--panel-2); border:1px solid var(--line-2);
  transition:border-color .18s var(--ease-fast), background .18s var(--ease-fast), transform .2s var(--ease);
}
.opcion-servicio:hover{ border-color:var(--oro-oscuro); background:var(--panel-3) }
.opcion-servicio:active{ transform:scale(.99) }
.opcion-servicio.sel{ border-color:var(--oro); background:rgba(212,175,55,.08); box-shadow:var(--brillo-oro) }
.opcion-servicio .icono{
  width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:12px; background:var(--bg-2); border:1px solid var(--line-2);
  font-family:var(--fD); font-size:1.15rem; color:var(--oro);
}
.opcion-servicio .txt{ flex:1; min-width:0 }
.opcion-servicio .txt b{ display:block; font-size:.98rem }
.opcion-servicio .txt small{ color:var(--dim); font-size:.79rem }
.opcion-servicio .precio{ font-family:var(--fD); font-size:1.5rem; color:var(--oro); letter-spacing:.02em }

/* Paso 1 — variantes del servicio (sabores de cachimba, colores…) */
.bloque-servicio + .bloque-servicio{ margin-top:10px }
.opcion-servicio.agotado{ opacity:.45; cursor:not-allowed }
.servicio-vitrina.agotado{ opacity:.5 }
.opciones-servicio{
  margin-top:8px; padding:16px;
  border:1px solid var(--oro-oscuro); border-top:0;
  border-radius:0 0 var(--r-md) var(--r-md);
  background:rgba(212,175,55,.05);
}
.opciones-titulo{
  font-size:.72rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--oro); margin-bottom:11px;
}
.opciones-titulo span{ color:var(--dim); font-weight:600; letter-spacing:.1em }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px }
.chip{
  padding:10px 15px; min-height:42px; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--line-2);
  font-size:.87rem; font-weight:600;
  transition:border-color .16s var(--ease-fast), background .16s var(--ease-fast), transform .18s var(--ease);
}
.chip:hover{ border-color:var(--oro-oscuro); transform:translateY(-1px) }
.chip.sel{
  border-color:var(--oro); color:#0a0a0c; font-weight:800;
  background:linear-gradient(135deg,var(--oro-luz),var(--oro));
}

/* Paso 2 — tira de días */
.tira-dias{
  display:flex; gap:9px; overflow-x:auto; padding:4px 2px 12px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.dia{
  flex:0 0 auto; width:70px; scroll-snap-align:center;
  padding:11px 0 10px; border-radius:var(--r-md); text-align:center;
  background:var(--panel-2); border:1px solid var(--line-2);
  transition:border-color .18s var(--ease-fast), background .18s var(--ease-fast), transform .2s var(--ease);
}
.dia small{ display:block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim) }
.dia b{ display:block; font-family:var(--fD); font-size:1.7rem; line-height:1.1; letter-spacing:.02em }
.dia i{ display:block; font-style:normal; font-size:.63rem; color:var(--mute); margin-top:2px }
.dia:hover:not(:disabled){ border-color:var(--oro-oscuro); transform:translateY(-2px) }
.dia.sel{ border-color:var(--oro); background:rgba(212,175,55,.1) }
.dia.sel b,.dia.sel small{ color:var(--oro) }
.dia:disabled{ opacity:.32; cursor:not-allowed }
.dia.hoy::after{
  content:''; display:block; width:5px; height:5px; margin:5px auto 0;
  border-radius:50%; background:var(--oro);
}

/* Paso 2 — horas */
.turno-titulo{
  display:flex; align-items:center; gap:10px; margin:20px 0 10px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.turno-titulo::after{ content:''; flex:1; height:1px; background:var(--line) }
.rejilla-horas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:9px }
.hora{
  padding:13px 6px; min-height:48px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line-2);
  font-weight:700; font-size:.95rem; letter-spacing:.02em;
  transition:border-color .16s var(--ease-fast), background .16s var(--ease-fast), transform .18s var(--ease);
}
.hora:hover{ border-color:var(--oro-oscuro); transform:translateY(-2px) }
.hora.sel{
  border-color:var(--oro); color:#0a0a0c;
  background:linear-gradient(135deg,var(--oro-luz),var(--oro));
}
.vacio{
  padding:30px 18px; text-align:center; color:var(--dim); font-size:.9rem;
  border:1px dashed var(--line-2); border-radius:var(--r-md);
}
.vacio b{ display:block; color:var(--text-2); margin-bottom:4px }

/* Paso 3 — formulario */
.form{ display:grid; gap:16px }
@media (min-width:560px){ .form-2{ grid-template-columns:1fr 1fr } }

/* Paso 4 — confirmación */
.exito{ text-align:center; padding:12px 0 4px }
.exito .sello{
  width:76px; height:76px; margin:0 auto 18px; display:grid; place-items:center;
  border-radius:50%; background:rgba(212,175,55,.12); border:1px solid var(--oro);
  font-size:2rem; animation:sello .6s var(--ease) both;
}
@keyframes sello{ from{transform:scale(.5); opacity:0} to{transform:none; opacity:1} }
.exito h3{ margin-bottom:6px }
.ticket{
  margin:22px 0; padding:18px; border-radius:var(--r-md); text-align:left;
  background:var(--bg-2); border:1px dashed var(--line-2);
}
.ticket div{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; font-size:.9rem }
.ticket div + div{ border-top:1px solid var(--line) }
.ticket span{ color:var(--dim) }
.ticket b{ text-align:right }

/* Resumen lateral / pie del asistente */
.resumen{ padding:20px }
.resumen h4{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin-bottom:14px;
}
.resumen-linea{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:.9rem }
.resumen-linea + .resumen-linea{ border-top:1px solid var(--line) }
.resumen-linea span{ color:var(--dim) }
.resumen-linea b{ text-align:right; max-width:60% }
.resumen-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2);
}
.resumen-total b{ font-family:var(--fD); font-size:2rem; color:var(--oro); letter-spacing:.02em }

.acciones-paso{ display:flex; gap:10px; margin-top:24px }
.acciones-paso .btn{ flex:1 }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{ display:grid; gap:10px }
.faq details{
  padding:16px 18px; border-radius:var(--r-md);
  background:var(--panel); border:1px solid var(--line);
}
.faq summary{
  cursor:pointer; font-weight:700; font-size:.95rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; color:var(--oro); font-size:1.3rem; line-height:1 }
.faq details[open] summary::after{ content:'−' }
.faq p{ color:var(--text-2); font-size:.9rem; margin-top:11px }

/* ── PIE ─────────────────────────────────────────────────── */
.pie{ border-top:1px solid var(--line); padding:36px 0 calc(30px + var(--safe-b)); margin-top:20px }
.pie-in{ display:grid; gap:22px }
@media (min-width:760px){ .pie-in{ grid-template-columns:1.4fr 1fr 1fr } }
.pie h5{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:11px }
.pie p,.pie a{ color:var(--text-2); font-size:.88rem }
.pie a:hover{ color:var(--oro) }
.pie ul{ list-style:none; display:grid; gap:7px }
.pie-legal{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.78rem; color:var(--mute);
}

/* ── CTA fija en móvil ───────────────────────────────────── */
.cta-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:12px 16px calc(12px + var(--safe-b));
  background:linear-gradient(to top,var(--bg) 68%,transparent);
  transform:translateY(130%); transition:transform .35s var(--ease);
}
.cta-movil.visible{ transform:none }
@media (min-width:900px){ .cta-movil{ display:none } }