/* Agenda pública. Un solo archivo para los tres negocios: los colores y las letras llegan como variables
   (publico.mjs → estiloTema) y cada negocio tiene sus toques al final (.negocio-<clave>).
   La idea: una hoja para apartar la cita que se ve como su página, con un paso a la vez; lo ya elegido
   queda arriba plegado ("Cambiar") y en escritorio "Tu cita" acompaña a un lado. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; scrollbar-color: var(--linea) var(--fondo); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 17px/1.55 var(--f-texto);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--suave); color: var(--tinta); }
input, textarea, select { caret-color: var(--acento); accent-color: var(--acento); }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--detalle); outline-offset: 3px; border-radius: 10px; }
h1, h2, p, dl, dd { margin: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px 40px; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i--lleno { fill: currentColor; stroke: none; }
.oculto { display: none; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 5; padding: 10px 16px; background: var(--acento); color: var(--sobre-acento); border-radius: 999px; }
.saltar:focus { top: 12px; }

/* ───── Cabecera ───── */
.cabeza { width: 100%; max-width: 1080px; margin: 0 auto; padding: 18px 20px 6px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.marca__logo { width: 52px; height: 52px; border-radius: 50%; object-fit: contain; background: var(--superficie); flex: none; }
.marca__nombre { font: 400 1.3rem/1.15 var(--f-titulos); letter-spacing: -0.005em; }
.marca__firma { font: 400 2.2rem/1 var(--f-firma); color: var(--acento); padding-top: 4px; }
.cabeza__pagina { font-size: 0.94rem; color: var(--tinta-2); white-space: nowrap; }

/* ───── Portada ───── */
.portada { padding: 30px 0 26px; max-width: 40rem; }
.portada h1 { font: 400 clamp(2.1rem, 8vw, 3.4rem)/1.05 var(--f-titulos); letter-spacing: -0.015em; text-wrap: balance; }
.portada__frase { margin-top: 10px; font-size: 1.12rem; color: var(--tinta-2); max-width: 34rem; text-wrap: pretty; }
.portada__privado { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 0.98rem; color: var(--tinta-2); max-width: 32rem; }
.portada__privado .i { margin-top: 2px; color: var(--detalle); }
.portada--cita { padding-bottom: 14px; }

/* ───── La hoja ───── */
.hoja { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) {
  .hoja:has(.tu-cita) { grid-template-columns: minmax(0, 1fr) 320px; }
  .tu-cita { position: sticky; top: 24px; }
}
.pasos { display: grid; gap: 10px; min-width: 0; }
.paso--hecho { padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--superficie) 55%, transparent); }
.paso__fila { display: flex; align-items: center; gap: 12px; }
.paso__marca { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); flex: none; }
.paso__marca .i { width: 16px; height: 16px; stroke-width: 2.4; }
.paso__texto { flex: 1; min-width: 0; }
.paso__titulo { font-size: 0.9rem; color: var(--tinta-2); }
.paso__valor { font-weight: 600; overflow-wrap: anywhere; }
.paso--luego { padding: 8px 16px 8px 56px; }
.paso--luego .paso__titulo { opacity: 0.75; }
.paso--actual { padding: 22px 20px 24px; border-radius: 22px; background: var(--superficie); border: 1px solid var(--linea); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 18px 40px -28px color-mix(in srgb, var(--tinta) 45%, transparent); }
.paso--actual h2 { font: 400 1.6rem/1.15 var(--f-titulos); margin-bottom: 16px; text-wrap: balance; }
.paso--actual h2:focus { outline: none; }
@media (min-width: 640px) { .paso--actual { padding: 28px 30px 30px; } }
.enlace { background: none; border: 0; padding: 10px 4px; min-height: 44px; color: var(--tinta); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-color: var(--detalle); cursor: pointer; font-size: 0.95rem; }
.ayuda { font-size: 0.94rem; color: var(--tinta-2); margin-top: 6px; }
.ayuda--grande { font-size: 1.02rem; margin: 0 0 14px; }
.cargando { color: var(--tinta-2); padding: 14px 0; }
.error { color: var(--error); font-weight: 600; min-height: 0; }
.error:empty { display: none; }
.error:not(:empty) { margin: 10px 0; }
.hecho { padding: 12px 16px; border-radius: 14px; background: var(--suave); margin-bottom: 14px; font-weight: 600; }
.aviso { padding: 14px 18px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea); }

/* ───── Opciones y servicios ───── */
.opciones, .servicios { display: grid; gap: 10px; }
@media (min-width: 640px) { .opciones { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
.opcion, .servicio {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left;
  min-height: 64px; padding: 14px 16px; border-radius: 16px; background: var(--superficie);
  border: 1px solid var(--linea); cursor: pointer; transition: border-color 0.18s, background-color 0.18s, transform 0.12s;
}
.opcion:hover, .servicio:hover { border-color: var(--detalle); }
.opcion:active, .servicio:active { transform: scale(0.99); }
.opcion.es-elegido, .servicio.es-elegido { border-color: var(--detalle); box-shadow: inset 0 0 0 1px var(--detalle); background: color-mix(in srgb, var(--suave) 50%, var(--superficie)); }
.opcion__nombre { font-weight: 600; font-size: 1.04rem; }
.opcion__detalle { font-size: 0.93rem; color: var(--tinta-2); }
.grupo + .grupo { margin-top: 22px; }
.grupo__nombre { font: 400 1.2rem/1.2 var(--f-titulos); margin-bottom: 10px; color: var(--tinta); }
.servicio__arriba { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; width: 100%; }
.servicio__nombre { font-weight: 600; font-size: 1.05rem; }
.servicio__desc { font-size: 0.94rem; color: var(--tinta-2); text-wrap: pretty; }
.servicio__dur { font-size: 0.88rem; color: var(--tinta-2); }
.pastilla { flex: none; padding: 2px 11px; border-radius: 999px; background: var(--pastilla); font-size: 0.92rem; font-weight: 600; white-space: nowrap; }

/* ───── Calendario ───── */
.mes { max-width: 26rem; }
.mes__cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mes__nombre { font: 400 1.25rem/1 var(--f-titulos); text-transform: capitalize; }
.mes__nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: var(--superficie); display: grid; place-items: center; cursor: pointer; }
.mes__nav:hover:not(:disabled) { border-color: var(--detalle); }
.mes__nav:disabled { opacity: 0.35; cursor: default; }
.mes__semana, .mes__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mes__semana span { text-align: center; font-size: 0.8rem; color: var(--tinta-2); padding: 4px 0; }
.dia { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-size: 0.98rem; border: 0; background: none; min-width: 0; }
.dia--libre { background: var(--suave); font-weight: 650; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.dia--libre:hover { background: color-mix(in srgb, var(--acento) 18%, var(--suave)); }
.dia--libre.es-elegido { background: var(--acento); color: var(--sobre-acento); }
.dia--pasado, .dia--fuera, .dia--descansa, .dia--lleno, .dia--cerro { color: var(--tinta-2); opacity: 0.5; }
.dia--lleno { text-decoration: line-through; text-decoration-thickness: 1px; }
.mes__nada { margin-top: 12px; color: var(--tinta-2); font-size: 0.95rem; }

/* ───── Horas ───── */
.horas + .horas { margin-top: 16px; }
.horas__grupo { font-size: 0.9rem; color: var(--tinta-2); margin-bottom: 8px; }
.horas__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.hora { min-width: 96px; min-height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea); background: var(--superficie); cursor: pointer; font-weight: 600; transition: border-color 0.15s, background-color 0.15s; }
.hora:hover { border-color: var(--detalle); }
.hora.es-elegido { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }

/* ───── Tus datos ───── */
.datos { display: grid; gap: 16px; max-width: 30rem; }
.campo label { display: block; font-weight: 600; margin-bottom: 6px; }
.campo input, .campo textarea {
  width: 100%; font: inherit; font-size: 1.06rem; color: var(--tinta); background: var(--superficie);
  border: 1px solid color-mix(in srgb, var(--tinta-2) 55%, var(--linea)); border-radius: 14px; padding: 12px 14px; min-height: 52px;
}
.campo textarea { resize: vertical; min-height: 76px; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--detalle); outline-offset: 1px; border-color: var(--detalle); }
[aria-invalid='true'] { border-color: var(--error) !important; }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-size: 0.97rem; cursor: pointer; }
.casilla input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; }
.casilla a { text-decoration-color: var(--detalle); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.llegada { font-weight: 600; color: var(--detalle); }

/* ───── Botones ───── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: 999px; font-weight: 650; font-size: 1.02rem; text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color 0.18s, border-color 0.18s, transform 0.12s;
}
.boton:active { transform: scale(0.98); }
.boton:disabled { opacity: 0.6; cursor: progress; }
.boton--lleno { background: var(--acento); color: var(--sobre-acento); box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--acento) 80%, transparent); }
.boton--lleno:hover { background: color-mix(in srgb, var(--acento) 86%, var(--tinta)); text-decoration: none; }
.boton--linea { background: var(--superficie); color: var(--tinta); border-color: color-mix(in srgb, var(--tinta-2) 60%, var(--linea)); }
.boton--linea:hover { border-color: var(--detalle); text-decoration: none; }
.boton--peligro { background: var(--error); color: #fff; }
.datos .boton--lleno { width: 100%; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 520px) { .acciones .boton { width: 100%; } }

/* ───── Tu cita (lateral) y fichas ───── */
.tu-cita { display: none; padding: 22px 22px 18px; border-radius: 22px; border: 1px solid var(--linea); background: color-mix(in srgb, var(--superficie) 70%, var(--fondo)); }
@media (min-width: 960px) { .tu-cita { display: block; } }
.tu-cita__titulo { font: 400 1.4rem/1.1 var(--f-firma); margin-bottom: 12px; color: var(--acento); }
.tu-cita dl, .ficha { display: grid; gap: 0; }
.tu-cita dl > div, .ficha > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); }
.tu-cita dt, .ficha dt { color: var(--tinta-2); font-size: 0.93rem; }
.tu-cita dd, .ficha dd { font-weight: 600; overflow-wrap: anywhere; }
.tu-cita dd::first-letter, .ficha dd::first-letter { text-transform: uppercase; }

.respaldo { margin-top: 22px; color: var(--tinta-2); font-size: 0.97rem; }
.respaldo a { color: var(--tinta); text-decoration-color: var(--detalle); }
.burbuja { padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: var(--suave); margin-bottom: 16px; max-width: 30rem; }

/* ───── Listo y Tu cita ───── */
.listo, .mi-cita { max-width: 40rem; padding: 26px 20px 28px; border-radius: 24px; background: var(--superficie); border: 1px solid var(--linea); }
@media (min-width: 640px) { .listo, .mi-cita { padding: 34px 36px; } }
.listo h2 { font: 400 clamp(1.7rem, 6vw, 2.3rem)/1.1 var(--f-titulos); margin: 14px 0 18px; text-wrap: balance; }
.listo h2:focus { outline: none; }
.listo__sello { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); }
.listo__sello .i { width: 30px; height: 30px; stroke-width: 2.2; }
@media (prefers-reduced-motion: no-preference) {
  .listo__sello { animation: sello 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .listo__sello path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: trazo 0.5s 0.25s ease-out forwards; }
}
@keyframes sello { from { transform: scale(0.6); opacity: 0; } }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.listo .ficha { margin-bottom: 16px; }
.listo__enlace { margin-top: 20px; padding: 18px; border-radius: 18px; background: var(--suave); display: grid; gap: 12px; }
.listo__enlace .boton { justify-self: start; }
.estado { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--suave); font-weight: 650; margin-bottom: 14px; }
.estado--cancelada { background: color-mix(in srgb, var(--error) 14%, var(--superficie)); color: var(--error); }
.mi-cita .ayuda { margin-top: 14px; }
.confirmar { margin-top: 18px; padding: 18px; border-radius: 18px; border: 1px solid var(--linea); background: var(--fondo); }
.cambiar { margin-top: 22px; display: grid; gap: 14px; }
.cambiar h2 { font: 400 1.4rem/1.2 var(--f-titulos); }
.cambiar h2:focus { outline: none; }

/* ───── Aviso de privacidad ───── */
.aviso-hoja { max-width: 44rem; padding: 24px 0 10px; }
.aviso-hoja h1 { font: 400 clamp(1.9rem, 6vw, 2.6rem)/1.1 var(--f-titulos); margin-bottom: 6px; }
.aviso-hoja h2 { font: 400 1.3rem/1.25 var(--f-titulos); margin: 28px 0 8px; }
.aviso-hoja p, .aviso-hoja li { max-width: 68ch; }
.aviso-hoja p + p { margin-top: 10px; }
.aviso-hoja ul { padding-left: 1.2rem; display: grid; gap: 6px; margin: 10px 0 0; }
.aviso-fecha { color: var(--tinta-2); }
.borrador { padding: 10px 14px; border-radius: 12px; background: var(--suave); margin-bottom: 16px; }
mark { background: var(--suave); color: var(--error); padding: 0 4px; border-radius: 4px; }

/* ───── Pie ───── */
.pie { margin-top: 30px; padding: 26px 20px calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 0.95rem; }
.pie__cols { max-width: 1080px; margin: 0 auto; display: grid; gap: 10px; }
@media (min-width: 760px) { .pie__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: start; } }
.pie__donde { color: var(--tinta); }
.pie__donde span { color: var(--tinta-2); }
.pie a { color: var(--tinta); }
.pie__bragado { max-width: 1080px; margin: 18px auto 0; font-size: 0.86rem; }

/* ═════ Toques de cada negocio ═════ */

/* Lumi: la línea dorada de su logo marca lo elegido (anillo separado), el arco de su flyer en el sello. */
.negocio-lumibeauty .marca__logo { width: 64px; height: 64px; background: transparent; }
.negocio-lumibeauty .marca__nombre { font-size: 1.45rem; }
.negocio-lumibeauty .portada h1 { font-size: clamp(2.4rem, 10vw, 4rem); }
.negocio-lumibeauty .servicio.es-elegido, .negocio-lumibeauty .opcion.es-elegido { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--detalle); border-color: var(--linea); }
.negocio-lumibeauty .dia--libre.es-elegido { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--detalle); }
.negocio-lumibeauty .listo__sello { border-radius: 999px 999px 10px 10px; height: 74px; background: var(--tinta); color: #decfac; }
.negocio-lumibeauty .paso__marca { background: transparent; color: var(--detalle); box-shadow: inset 0 0 0 1.5px var(--detalle); }
.negocio-lumibeauty .grupo__nombre { color: #514a41; border-bottom: 1px solid var(--detalle); padding-bottom: 6px; }
.negocio-lumibeauty .pastilla { background: transparent; padding: 0; font-weight: 500; color: var(--tinta-2); }

/* Metanoia: su morado y el lila; "Metanoia" en la cursiva de su logo; calma y privacidad. */
.negocio-metanoia body, body.negocio-metanoia { background: radial-gradient(60rem 36rem at 100% 0%, rgb(196 165 223 / 0.32), transparent 70%) no-repeat, var(--fondo); }
.negocio-metanoia .marca__firma { font-size: 2.5rem; }
.negocio-metanoia .portada h1 { font-weight: 600; font-size: clamp(1.9rem, 7vw, 2.9rem); letter-spacing: -0.02em; }
.negocio-metanoia .paso--actual h2, .negocio-metanoia .listo h2, .negocio-metanoia .grupo__nombre { font-weight: 600; letter-spacing: -0.01em; }
.negocio-metanoia .paso--actual { border-color: var(--linea); box-shadow: 0 2px 6px -2px rgb(59 31 82 / 0.1), 0 28px 56px -30px rgb(59 31 82 / 0.42); }
.negocio-metanoia .opcion { min-height: 70px; border-radius: 18px; }
.negocio-metanoia .tu-cita__titulo { font: 600 1.15rem/1.2 var(--f-titulos); color: var(--tinta); }
.negocio-metanoia .mes__nombre { font-weight: 600; }

/* Jenn Bloom: su catálogo a la luz. Manuscrita para el nombre y "Tu cita", serif delgada en mayúsculas para
   las secciones de su carta (FACIALES / CORPORALES) y el azul cielo de sus píldoras en cada precio. */
.negocio-jennbloom .marca__logo { display: none; } /* su logo es su nombre manuscrito: no se repite */
.negocio-jennbloom .marca__firma { font-size: 2.6rem; color: var(--acento); }
.negocio-jennbloom .portada h1 { font-size: clamp(2rem, 7.5vw, 3rem); }
.negocio-jennbloom .grupo__nombre { text-transform: uppercase; letter-spacing: 0.14em; font-size: 1.05rem; color: var(--acento); }
.negocio-jennbloom .tu-cita__titulo { font-size: 2.1rem; }
.negocio-jennbloom .servicio { border-radius: 18px; }
.negocio-jennbloom .listo__sello { background: var(--acento); }