/* Aspecto de la web de clientes, a juego con adolfoelmasajista.com. El panel no carga este archivo. */

@font-face { font-family: "Figtree"; font-weight: 400 700; font-display: swap; src: url(/web/figtree.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 900; font-display: swap; src: url(/web/montserrat.woff2) format("woff2"); }

/* estilos.css usa --negro para el texto y --blanco para las tarjetas: al invertirlos, casi todo se adapta solo. */
:root {
  color-scheme: dark;
  --negro: #f3efe9;
  --blanco: #161618;
  --carbon: #1f1f22;
  --naranja: #f5a33b;
  --naranja-claro: #2a1c07;
  --gris-claro: #0d0d0e;
  --gris-borde: #36363a;
  --gris-texto: #aaa59d;
  --verde: #25d366;
  --verde-claro: #0f2a1a;
  --rojo: #ff8a80;
  --rojo-claro: #2e1513;
  --radio: 18px;
  --texto-sobre-naranja: #1a1100;
  --titulos: Montserrat, "Segoe UI", system-ui, sans-serif;
}

body {
  background: radial-gradient(90% 420px at 50% 0, #1f1a13, transparent) no-repeat var(--gris-claro);
  font-family: Figtree, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

h1, h2, .servicio strong { font-family: var(--titulos); font-weight: 900; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }

.cabecera:has(a.marca) {
  position: sticky;
  background: rgba(13, 13, 14, .92);
  color: var(--negro);
  border-bottom: 1px solid var(--gris-borde);
}
a.marca img { width: auto; max-width: 100%; height: 48px; }

.portada { margin-bottom: 24px; }
.portada p { color: var(--gris-texto); }
.portada img {
  display: block;
  width: min(78%, 340px);
  height: auto;
  margin: 0 auto;
  background: radial-gradient(closest-side, rgba(245, 163, 59, .3), transparent);
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.portada .antetitulo { margin: 6px 0 8px; color: var(--naranja); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.portada h1 { margin-bottom: 8px; font-size: 2rem; }
.portada h1 span { color: var(--naranja); }

.boton { border-radius: 999px; color: var(--texto-sobre-naranja); }
.boton.negro { background: transparent; border-color: var(--naranja); color: var(--negro); }
.boton.claro { color: var(--negro); }
.boton.peligro { color: var(--rojo); }
.boton.con-icono { gap: 10px; }
.boton .icono { display: flex; flex: none; }
.tarjeta .boton { margin-top: 14px; }
.tarjeta .importe { margin-bottom: 6px; color: var(--naranja); font-family: var(--titulos); font-size: 1.5rem; font-weight: 900; }
.tarjeta .detalle { margin-bottom: 4px; }
.saldo { margin-bottom: 12px; color: var(--naranja); font-weight: 600; }
.puntos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.punto { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 2px solid var(--gris-borde); border-radius: 50%; font-weight: 700; }
.punto.hecha { border-color: var(--naranja); background: var(--naranja); color: var(--texto-sobre-naranja); }
.punto.reservada { border-color: var(--naranja); }
.punto.perdida { color: var(--gris-texto); }
.contador-texto { margin-bottom: 4px; font-size: 1.1rem; font-weight: 700; }
.enlaces { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; }
.enlaces a, .enlaces button { min-height: 44px; padding: 10px; border: 0; background: none; color: var(--gris-texto); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.desplegable { margin-top: 12px; }
.desplegable > :not(summary) { margin-top: 12px; }
.desplegable > :not(summary, .tarjeta) { padding: 0 16px 16px; }
.cabecera .enlace-ficha + .enlace-ficha { margin-left: 8px; }
.cabecera .marca { flex: 1 1 auto; min-width: 0; }
.cabecera .marca img { max-width: 100%; }
.aviso-prueba { padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); background: var(--naranja); color: var(--texto-sobre-naranja); font-size: .9rem; font-weight: 600; text-align: center; }
.desplegable.citas { background: transparent; }
.desplegable.citas > summary { min-height: 56px; padding: 12px 22px; border: 2px solid var(--naranja); border-radius: 999px; font-size: 1.05rem; color: var(--negro); }
.desplegable.citas > summary:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.desplegable.citas > div { padding: 0; }
.tipos-de-cita { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tipo-cita { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 60px; padding: 8px; border: 2px solid var(--gris-borde); border-radius: 16px; background: transparent; color: var(--negro); font: inherit; text-align: center; cursor: pointer; }
.tipo-cita small { font-size: .85rem; }
.tipo-cita.elegido { border-color: var(--naranja); background: var(--naranja); color: var(--texto-sobre-naranja); }
.tipo-cita:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.citas-lista > .detalle { margin: 4px 0; text-align: center; }
.paso-numero, .hamaca.elegida { color: var(--texto-sobre-naranja); }

.servicio { background: var(--blanco); border: 1px solid var(--gris-borde); color: var(--negro); }
.servicio span { color: var(--gris-texto); }
.servicio .precio { color: var(--naranja); }
.servicio.con-foto { position: relative; justify-content: flex-end; min-height: 190px; overflow: hidden; border: 0; isolation: isolate; }
.servicio.con-foto img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.servicio.con-foto::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 15%, rgba(13, 13, 14, .92) 78%); }
.servicio.con-foto span { color: var(--negro); }

.dia small { color: #5fe08f; }
.dia small.libres { line-height: 1.1; text-align: center; }
.dia.elegido small { color: var(--blanco); }

/* La leyenda del plano de hamacas dice «Blanco: libre» y debe seguir siendo cierto. */
.hamaca { background: #fff; color: #0d0d0e; }
.hamaca.ocupada { border-color: #6b6b6b; background: #6b6b6b; color: #f3efe9; }
.hamaca.elegida { border-color: #fff; background: var(--naranja); }

.etiqueta { background: var(--carbon); }
.etiqueta.naranja { color: var(--naranja); }