/* ═══════════════════════════════════════════════════════════════════════════
   Lapriex Reservas · widget de reserva

   Lo que ve el cliente final. Tiene UN trabajo: que alguien que entra con
   dolor de espalda, o con prisa, o con 68 años, termine la reserva. Por eso:
   nada de registro, tipografía grande, objetivos de toque generosos y una
   sola decisión por pantalla.

   Los colores salen del negocio (--lrw-accent se inyecta desde JS con su
   color de marca). Todo va con prefijo .lrw para no pelearse con el CSS de la
   web donde se incruste, que puede ser cualquier cosa.
   ═══════════════════════════════════════════════════════════════════════════ */

.lrw{
  --lrw-accent:#a9803a; --lrw-accent-d:#8a6a2f; --lrw-accent-l:#f5ecdc;
  --lrw-bg:#f7f4ee; --lrw-card:#fff; --lrw-card-2:#fbf9f5;
  --lrw-ink:#221d16; --lrw-ink-2:#514b42; --lrw-muted:#6f675b;
  --lrw-line:rgba(34,29,22,.10); --lrw-line-2:rgba(34,29,22,.055);
  --lrw-ok:#2f7d54; --lrw-ok-bg:#e8f4ec; --lrw-err:#b03e2c; --lrw-err-bg:#fbeae6;
  --lrw-r:22px; --lrw-r-2:15px;
  --lrw-ease:cubic-bezier(.32,.72,0,1);
  --lrw-shadow:0 26px 60px -34px rgba(80,58,20,.42), 0 2px 10px -6px rgba(80,58,20,.14);

  box-sizing:border-box; max-width:1080px; margin:0 auto; padding:0;
  /* El diseño responde al ANCHO DEL WIDGET, no al de la pantalla: el mismo
     widget va en una columna estrecha de la página pública, en un iframe de
     600 px en la web de un cliente o a lo ancho en un ordenador. */
  container:lrw / inline-size;
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.5; color:var(--lrw-ink);
  background:var(--lrw-card); border:1px solid var(--lrw-line-2); border-radius:var(--lrw-r);
  box-shadow:var(--lrw-shadow); overflow:hidden;
}
.lrw *,.lrw *::before,.lrw *::after{box-sizing:border-box}
/* Un elemento con [hidden] y display:flex propio NO se oculta: la regla de
   clase gana a la del navegador. Sin esto, la cabecera de texto se pintaba
   encima de la foto de portada. */
.lrw [hidden]{display:none!important}
.lrw button{font-family:inherit}

/* ── Cabecera del negocio ─────────────────────────────────────────────────
   La foto es AMBIENTE: no lleva nada escrito encima. Sobre una foto clara, con
   texto o con mucho detalle el nombre no se leería, y cada negocio sube la foto
   que tiene. El nombre vive en la tarjeta y el logo sube sobre el borde de la
   foto, con un aro del color de la tarjeta: se lee siempre. */
.lrw-cover{position:relative;width:100%;aspect-ratio:16/5;min-height:112px;max-height:190px;
  background-color:var(--lrw-accent-l);background-size:cover;background-repeat:no-repeat;background-position:50% 45%}
.lrw-cover::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,14,6,.06) 0%,rgba(20,14,6,0) 40%,rgba(20,14,6,0) 68%,rgba(20,14,6,.16) 100%)}

.lrw-head{display:flex;align-items:center;gap:13px;padding:18px 20px 0}
.lrw-logo{width:44px;height:44px;border-radius:13px;flex:0 0 auto;background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px}
.lrw-logo.con-img{background-color:#fff;background-size:contain;box-shadow:inset 0 0 0 1px var(--lrw-line-2)}
.lrw-title{font-size:17.5px;font-weight:600;line-height:1.25}
.lrw-sub{font-size:13px;color:var(--lrw-muted);margin-top:1px}

.lrw-head.con-portada{align-items:flex-start;gap:15px;padding-top:0}
.lrw-head.con-portada .lrw-logo{position:relative;z-index:1;width:68px;height:68px;border-radius:20px;margin-top:-34px;font-size:27px;
  box-shadow:0 0 0 4px var(--lrw-card),0 14px 30px -14px rgba(40,30,10,.5)}
.lrw-head.con-portada .lrw-logo.con-img{box-shadow:0 0 0 4px var(--lrw-card),0 14px 30px -14px rgba(40,30,10,.5),inset 0 0 0 1px var(--lrw-line-2)}
.lrw-head.con-portada .lrw-title{font-size:19px;letter-spacing:-.01em;margin-top:12px}
.lrw-head.con-portada .lrw-sub{font-size:13.5px;margin-top:2px}

/* ── Presencial u online ──────────────────────────────────────────────────
   Dos opciones, dos tarjetas grandes: es una sola decisión y se toma con el
   pulgar. Mismo tacto que elegir profesional. */
.lrw-mods{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:420px){.lrw-mods{grid-template-columns:1fr}}
.lrw-mod{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;width:100%;
  background:var(--lrw-card);border:1px solid var(--lrw-line-2);border-radius:var(--lrw-r-2);padding:16px 15px;cursor:pointer;
  transition:border-color .5s var(--lrw-ease),box-shadow .5s var(--lrw-ease),transform .5s var(--lrw-ease)}
.lrw-mod:hover{border-color:var(--lrw-accent);box-shadow:0 14px 30px -22px rgba(80,58,20,.5);transform:translateY(-2px)}
.lrw-mod:active{transform:scale(.99)}
.lrw-mod-i{font-size:22px;line-height:1}
.lrw-mod-n{font-size:15.5px;font-weight:600;margin-top:6px}
.lrw-mod-d{font-size:12.5px;color:var(--lrw-muted);line-height:1.45}

/* ── Progreso ───────────────────────────────────────────────────────────── */
.lrw-steps{display:flex;gap:6px;padding:16px 20px 4px}
.lrw-dot{height:3px;flex:1;border-radius:99px;background:var(--lrw-line);transition:background .6s var(--lrw-ease)}
.lrw-dot.on{background:var(--lrw-accent)}
.lrw-body{--lrw-pad:20px;padding:14px var(--lrw-pad) 20px;min-height:230px}
.lrw-back{background:0;border:0;padding:11px 12px 11px 0;margin:0 0 2px -2px;color:var(--lrw-muted);font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;min-height:42px;transition:color .4s var(--lrw-ease)}
.lrw-back:hover{color:var(--lrw-ink)}
.lrw-h{font-size:16px;font-weight:600;margin:2px 0 3px}
.lrw-p{font-size:13.5px;color:var(--lrw-muted);margin:0 0 14px}
.lrw-fade{animation:lrwIn .5s var(--lrw-ease) both}
@keyframes lrwIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Las cosas entran en el orden en que se leen, con un retraso mínimo. No es
   adorno: guía la vista de arriba abajo en vez de soltarlo todo de golpe. */
.lrw-stag{animation:lrwIn .46s var(--lrw-ease) both;animation-delay:calc(var(--i,0) * 45ms)}

/* Esqueleto: mientras carga se ve la FORMA de lo que va a venir. Un contador
   girando no dice nada; esto hace que la espera parezca más corta. */
.lrw-sk{display:flex;gap:14px;padding:13px;border:1px solid var(--lrw-line-2);border-radius:var(--lrw-r-2);overflow:hidden}
.lrw-sk .a{width:84px;aspect-ratio:1;flex:0 0 auto;border-radius:12px;background:var(--lrw-card-2)}
.lrw-sk .b{flex:1;padding:4px 0;display:flex;flex-direction:column;gap:9px}
.lrw-sk .l{height:12px;border-radius:99px;background:var(--lrw-card-2)}
.lrw-sk .l.w1{width:52%}.lrw-sk .l.w2{width:78%}.lrw-sk .l.w3{width:34%;margin-top:auto}
.lrw-sk,.lrw-sk .l{position:relative;overflow:hidden}
.lrw-sk .a::after,.lrw-sk .l::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:lrwBrillo 1.5s infinite}
@keyframes lrwBrillo{100%{transform:translateX(100%)}}

/* ── Servicios ──────────────────────────────────────────────────────────
   Todas las fotos tienen la MISMA forma: en lista, una miniatura cuadrada; en
   rejilla, una franja 16:10 arriba. Antes la foto se estiraba hasta el alto de
   la tarjeta y, como cada descripción mide distinto, cada foto salía con una
   forma. El texto se corta a tres líneas (con «Ver más») para que las tarjetas
   de una misma fila midan igual. */

/* Filtro por grupo: solo sale si el negocio usa más de uno. En el móvil se
   desliza de lado y llega hasta el borde. */
.lrw-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  margin:0 calc(var(--lrw-pad) * -1) 18px;padding:2px var(--lrw-pad) 4px}
.lrw-chips::-webkit-scrollbar{display:none}
.lrw .lrw-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:8px 15px;border-radius:99px;
  border:1px solid var(--lrw-line);background:var(--lrw-card);color:var(--lrw-ink-2);font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:background .4s var(--lrw-ease),border-color .4s var(--lrw-ease),color .4s var(--lrw-ease)}
.lrw .lrw-chip:hover{border-color:var(--lrw-accent)}
.lrw-chip .c{font-size:12px;font-weight:600;color:var(--lrw-muted);background:var(--lrw-card-2);border-radius:99px;padding:1px 8px}
.lrw .lrw-chip.on{background:var(--lrw-accent-d);border-color:var(--lrw-accent-d);color:#fff}
.lrw-chip.on .c{background:rgba(255,255,255,.2);color:#fff}

/* Cabecera de cada grupo: se ve dónde empieza, cómo se llama y cuántos tiene. */
.lrw-sec + .lrw-sec{margin-top:28px}
.lrw-cat{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.lrw-cat::before{content:'';flex:0 0 auto;width:4px;height:20px;border-radius:4px;background:var(--lrw-accent)}
.lrw-cat::after{content:'';flex:1;height:1px;background:var(--lrw-line);margin-left:4px}
.lrw-cat-n{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--lrw-ink)}
.lrw-cat-c{font-size:12.5px;color:var(--lrw-muted);white-space:nowrap}

.lrw-grid{display:flex;flex-direction:column;gap:10px}
.lrw-svc{position:relative;display:flex;align-items:flex-start;gap:14px;padding:13px;text-align:left;
  background:var(--lrw-card);border:1px solid var(--lrw-line-2);border-radius:var(--lrw-r-2);overflow:hidden;
  transition:border-color .5s var(--lrw-ease),box-shadow .5s var(--lrw-ease),transform .5s var(--lrw-ease)}
.lrw-svc:hover{border-color:var(--lrw-accent);box-shadow:0 14px 30px -22px rgba(80,58,20,.5)}
.lrw-svc:active{transform:scale(.99)}
.lrw-svc-f{flex:0 0 auto;width:84px;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--lrw-accent-l)}
.lrw-svc-f img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--lrw-ease)}
/* Sin foto, cuando las demás sí la tienen: un hueco de la misma forma, para
   que ese servicio no parezca de otra lista. */
.lrw-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:28px;font-weight:600;
  color:var(--lrw-accent-d);background:linear-gradient(150deg,var(--lrw-accent-l),var(--lrw-card-2))}
.lrw-in{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.lrw-n{font-size:15.5px;font-weight:600;line-height:1.28;color:var(--lrw-ink)}
/* El nombre es el botón y su ::after cubre la tarjeta entera: se pulsa en
   cualquier sitio, y «Ver más», que va por encima, sigue siendo su botón. */
.lrw .lrw-pick{background:none;border:0;margin:0;padding:0;font:inherit;line-height:inherit;color:inherit;text-align:left;cursor:pointer}
.lrw-pick::after{content:'';position:absolute;inset:0;z-index:1;border-radius:var(--lrw-r-2)}
.lrw .lrw-pick:focus{outline:none}
.lrw-pick:focus-visible::after{box-shadow:inset 0 0 0 2px var(--lrw-accent-d)}
.lrw-d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
  font-size:13px;color:var(--lrw-muted);margin-top:4px;line-height:1.45}
.lrw-svc.abierta .lrw-d{display:block;-webkit-line-clamp:unset;line-clamp:none}
.lrw .lrw-mas{position:relative;z-index:2;background:none;border:0;margin:2px 0 0;padding:3px 0;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--lrw-accent-d);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lrw-m{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:10px;width:100%}
.lrw-pr{font-size:15px;font-weight:600;color:var(--lrw-ink)}
.lrw-mi{font-size:12px;color:var(--lrw-muted);background:var(--lrw-card-2);border:1px solid var(--lrw-line-2);
  border-radius:99px;padding:2px 9px}
.lrw-sep,.lrw-go{display:none}
.lrw-svc.no-libre .lrw-svc-f,.lrw-svc.no-libre .lrw-in{opacity:.8}
.lrw-svc.no-libre:hover{border-color:var(--lrw-line);box-shadow:none}
.lrw-mi.tel{background:var(--lrw-accent-l);border-color:transparent;color:var(--lrw-accent-d);font-weight:600}
.lrw-hl{display:inline-block;margin-bottom:6px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--lrw-accent-d);
  background:var(--lrw-accent-l);border-radius:99px;padding:3px 9px}

/* ── Elegir profesional ─────────────────────────────────────────────────── */
/* Quién hace cada servicio: en la tarjeta (caras + «con …») y en el calendario */
.lrw-con{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--lrw-ink-2);min-width:0}
.lrw-con-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrw-caras{display:inline-flex;flex:none}
.lrw-caras img,.lrw-caras span{width:24px;height:24px;border-radius:99px;object-fit:cover;border:2px solid var(--lrw-card);
  background:var(--lrw-accent-l);color:var(--lrw-accent-d);font-size:11px;font-weight:700;display:inline-grid;place-items:center;box-sizing:border-box}
.lrw-caras>*+*{margin-left:-8px}
.lrw-con1{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;margin:-4px 0 18px;
  padding:9px 16px 9px 9px;background:var(--lrw-card-2);border:1px solid var(--lrw-line-2);border-radius:99px}
.lrw-con1 .lrw-av{width:46px;height:46px;border-radius:99px;object-fit:cover;flex:none;background:var(--lrw-accent-l);
  color:var(--lrw-accent-d);font-weight:700;display:grid;place-items:center}
.lrw-con1>div{min-width:0}
.lrw-con1-k{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--lrw-muted);line-height:1.2}
.lrw-con1 b{display:block;font-size:15px;line-height:1.3}
.lrw-con1 small{display:block;font-size:12.5px;color:var(--lrw-muted);line-height:1.35}
.lrw-pros{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.lrw-pro{background:var(--lrw-card);border:1px solid var(--lrw-line-2);border-radius:var(--lrw-r-2);padding:15px 12px;cursor:pointer;
  text-align:center;transition:border-color .5s var(--lrw-ease),box-shadow .5s var(--lrw-ease),transform .5s var(--lrw-ease)}
.lrw-pro:hover{border-color:var(--lrw-accent);box-shadow:0 14px 30px -22px rgba(80,58,20,.5);transform:translateY(-2px)}
.lrw-pro .lrw-av{width:64px;height:64px;border-radius:99px;margin:0 auto 10px;object-fit:cover;background:var(--lrw-accent-l);
  display:flex;align-items:center;justify-content:center;color:var(--lrw-accent-d);font-size:22px;font-weight:600}
.lrw-pro .lrw-pn{font-size:14.5px;font-weight:600}
.lrw-pro .lrw-pt{font-size:12px;color:var(--lrw-muted);margin-top:2px;line-height:1.35}
.lrw-pro .lrw-px{font-size:12px;font-weight:600;color:var(--lrw-accent-d);margin-top:6px;
  background:var(--lrw-accent-l);border-radius:99px;padding:3px 9px;display:inline-block}

/* ── Calendario ─────────────────────────────────────────────────────────
   Un calendario tiene que contestar una pregunta de un vistazo: ¿qué días
   puedo? Por eso el día libre se ve como una tecla que se puede pulsar, el
   que está a punto de llenarse avisa, y el cerrado se aparta sin gritar. */
.lrw-cal{background:var(--lrw-card-2);border:1px solid var(--lrw-line-2);border-radius:var(--lrw-r-2);padding:16px 14px 14px;margin-bottom:14px}
.lrw-mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.lrw-mh b{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:600;text-transform:capitalize;letter-spacing:-.01em}
.lrw-nav{background:var(--lrw-card);border:1px solid var(--lrw-line);border-radius:99px;width:38px;height:38px;cursor:pointer;
  font-size:16px;color:var(--lrw-ink);display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:background .4s var(--lrw-ease),border-color .4s var(--lrw-ease),transform .4s var(--lrw-ease)}
.lrw-nav:hover:not(:disabled){border-color:var(--lrw-accent);background:var(--lrw-accent-l);transform:scale(1.06)}
.lrw-nav:active:not(:disabled){transform:scale(.94)}
.lrw-nav:disabled{opacity:.3;cursor:default}
.lrw-wd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:7px}
.lrw-wd span{text-align:center;font-size:11px;font-weight:700;color:var(--lrw-muted);text-transform:uppercase;letter-spacing:.08em}
.lrw-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.lrw-days.cambia{animation:lrwMes .34s var(--lrw-ease) both}
@keyframes lrwMes{from{opacity:0;transform:translateX(var(--dir,10px))}to{opacity:1;transform:none}}
.lrw-day{aspect-ratio:1;min-width:0;border:0;background:0;border-radius:13px;font:inherit;font-size:14.5px;font-weight:500;color:#b8b0a3;
  cursor:default;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:background .3s var(--lrw-ease),color .3s var(--lrw-ease),transform .3s var(--lrw-ease),box-shadow .3s var(--lrw-ease)}
/* Día con hueco: parece una tecla, porque lo es */
.lrw-day.free{background:var(--lrw-card);color:var(--lrw-ink);font-weight:600;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--lrw-line-2),0 1px 2px rgba(60,45,20,.05)}
.lrw-day.free .p{width:5px;height:5px;border-radius:99px;background:var(--lrw-accent);opacity:.85}
.lrw-day.free:hover{background:var(--lrw-accent-l);transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--lrw-accent),0 6px 14px -8px rgba(60,45,20,.4)}
.lrw-day.free:active{transform:translateY(0) scale(.97)}
/* Quedan pocas horas: se avisa, sin inventar urgencia falsa */
.lrw-day.pocas .p{background:#c98a2e;width:5px;height:5px}
.lrw-day.pocas .p::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:9px;width:11px;height:5px;
  border-radius:99px;background:#c98a2e;opacity:.28}
.lrw-day.sel{background:var(--lrw-accent-d);color:#fff;font-weight:700;box-shadow:0 8px 18px -8px var(--lrw-accent)}
.lrw-day.sel .p{background:rgba(255,255,255,.9)}
.lrw-day.today{box-shadow:inset 0 0 0 1.5px var(--lrw-accent)}
.lrw-day.today.free{box-shadow:inset 0 0 0 1.5px var(--lrw-accent),0 1px 2px rgba(60,45,20,.05)}
/* Leyenda: dos palabras que evitan que nadie se pregunte qué es el punto */
.lrw-leg{display:flex;gap:16px;justify-content:center;margin-top:13px;font-size:11.5px;color:var(--lrw-muted)}
.lrw-leg i{display:inline-block;width:5px;height:5px;border-radius:99px;margin-right:5px;vertical-align:1px}
.lrw-leg .l1 i{background:var(--lrw-accent)}
.lrw-leg .l2 i{background:#c98a2e}

/* ── Horas ──────────────────────────────────────────────────────────────── */
.lrw-tw{margin-top:4px}
/* Mayúscula solo la primera letra: con capitalize salía «Por La Tarde» y
   «Miércoles 23 De Septiembre». */
.lrw-tl{font-size:12.5px;font-weight:600;color:var(--lrw-muted);margin:14px 0 8px}
.lrw-tl::first-letter{text-transform:uppercase}
.lrw-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.lrw-t{padding:12px 6px;border:1px solid var(--lrw-line);background:var(--lrw-card);border-radius:12px;font:inherit;font-size:14.5px;
  font-weight:600;cursor:pointer;transition:all .4s var(--lrw-ease);
  /* El color se dice aquí, no se hereda: esta pieza también se usa dentro de
     `cancelar.php`, que pinta sus botones principales en blanco. Sin esto, las
     horas salían blancas sobre blanco y el calendario parecía vacío. */
  color:var(--lrw-ink);
  animation:lrwIn .34s var(--lrw-ease) both;animation-delay:calc(var(--i,0) * 22ms)}
.lrw-t:hover{border-color:var(--lrw-accent);background:var(--lrw-accent-l);color:var(--lrw-accent-d);transform:translateY(-2px)}
.lrw-t:active{transform:translateY(0) scale(.97)}
.lrw-t.sel{background:var(--lrw-accent-d);border-color:var(--lrw-accent-d);color:#fff}
/* El día elegido encabeza sus horas: con el calendario al lado no hay que
   mirar dos sitios para saber de qué día son. */
.lrw-td{font-size:14.5px;font-weight:600;color:var(--lrw-ink);margin:14px 0 0}
.lrw-td::first-letter{text-transform:uppercase}
.lrw-tw-vacio{font-size:13.5px;color:var(--lrw-muted);padding:16px 0}

/* ── Formulario ─────────────────────────────────────────────────────────── */
.lrw-f{margin-bottom:13px}
.lrw-f label{display:block;font-size:12.5px;font-weight:600;color:var(--lrw-ink-2);margin-bottom:6px}
.lrw-done p{overflow-wrap:anywhere}    /* un email largo no se corta en el móvil */
.lrw-fh{font-size:12px;color:var(--lrw-muted);margin-top:5px;line-height:1.4}
.lrw input[type=text],.lrw input[type=email],.lrw input[type=tel],.lrw textarea{
  width:100%;padding:13px 14px;border:1px solid var(--lrw-line);border-radius:13px;font:inherit;font-size:16px;/* 16px = iOS no hace zoom */
  color:var(--lrw-ink);background:var(--lrw-card-2);transition:border-color .4s var(--lrw-ease),box-shadow .4s var(--lrw-ease)}
.lrw textarea{min-height:74px;resize:vertical;line-height:1.5}
.lrw input:focus,.lrw textarea:focus{outline:0;background:#fff;border-color:var(--lrw-accent);box-shadow:0 0 0 4px var(--lrw-accent-l)}
.lrw-chk{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--lrw-ink-2);line-height:1.45;cursor:pointer;margin-bottom:12px}
.lrw-chk input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--lrw-accent);flex:0 0 auto}
.lrw-chk a{color:var(--lrw-accent-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* La política de cancelación, a la vista ANTES de pagar: se acepta leyéndola,
   no escondida detrás de un enlace. */
.lrw-pol{background:var(--lrw-card-2);border:1px solid var(--lrw-line-2);border-left:3px solid var(--lrw-accent);border-radius:12px;
  padding:11px 13px;margin:4px 0 12px;font-size:12.5px;line-height:1.55;color:var(--lrw-ink-2)}
.lrw-pol b{display:block;font-size:12.5px;color:var(--lrw-ink);margin-bottom:3px}
.lrw-pol p{margin:0}

/* Aviso de datos recordados: discreto, y con salida clara si no es él */
.lrw-mem{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--lrw-accent-d);
  background:var(--lrw-accent-l);border-radius:11px;padding:9px 12px;margin-bottom:14px}
.lrw-mem button{background:0;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--lrw-accent-d);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lrw-mem button:hover{opacity:.75}

/* ── Resumen ────────────────────────────────────────────────────────────── */
.lrw-sum{background:var(--lrw-card-2);border:1px solid var(--lrw-line-2);border-radius:var(--lrw-r-2);padding:15px;margin-bottom:16px}
.lrw-sr{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:5px 0}
.lrw-sr span:first-child{color:var(--lrw-muted)}
.lrw-sr span:last-child{font-weight:600;text-align:right}
.lrw-sr.tot{border-top:1px solid var(--lrw-line-2);margin-top:7px;padding-top:11px;font-size:16px}
.lrw-sr.tot span:last-child{font-size:19px;color:var(--lrw-accent-d)}

/* ── Botones ────────────────────────────────────────────────────────────── */
.lrw-btn{width:100%;padding:15px 20px;border:0;border-radius:99px;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;
  background:var(--lrw-accent-d);color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 12px 26px -14px rgba(80,58,20,.75);
  transition:transform .4s var(--lrw-ease),box-shadow .4s var(--lrw-ease),opacity .4s var(--lrw-ease)}
.lrw-btn:hover{box-shadow:0 16px 32px -14px rgba(80,58,20,.85)}
.lrw-btn:active{transform:scale(.985)}
.lrw-btn:disabled{opacity:.55;cursor:default;box-shadow:none}
.lrw-btn.ghost{background:var(--lrw-card);color:var(--lrw-ink);border:1px solid var(--lrw-line);box-shadow:none}

/* ── Estados ────────────────────────────────────────────────────────────── */
.lrw-spin{text-align:center;color:var(--lrw-muted);font-size:14px;padding:44px 0}
.lrw-spin::before{content:'';display:block;width:26px;height:26px;margin:0 auto 12px;border-radius:99px;
  border:2px solid var(--lrw-line);border-top-color:var(--lrw-accent);animation:lrwSpin .7s linear infinite}
@keyframes lrwSpin{to{transform:rotate(360deg)}}
.lrw-msg{padding:13px 15px;border-radius:13px;font-size:13.5px;margin-bottom:14px;line-height:1.5}
.lrw-msg.err{background:var(--lrw-err-bg);color:var(--lrw-err)}
.lrw-msg.ok{background:var(--lrw-ok-bg);color:var(--lrw-ok)}
.lrw-empty{text-align:center;padding:34px 16px;color:var(--lrw-muted);font-size:14px;line-height:1.6}

/* ── "Esto se pide por teléfono" ────────────────────────────────────────
   Sale cuando el negocio todavía no cobra online. El número tiene que poder
   tocarse en el móvil Y leerse/copiarse en el ordenador: por eso es grande y
   es un enlace, no un salto automático. */
.lrw-tel-box{margin-top:14px;padding:20px 18px;text-align:center;border-radius:var(--lrw-r-2);
  background:linear-gradient(160deg,var(--lrw-accent-l),var(--lrw-card-2));border:1px solid var(--lrw-line-2)}
.lrw-tel-n{display:inline-block;font-size:23px;font-weight:700;letter-spacing:.01em;color:var(--lrw-accent-d);
  text-decoration:none;padding:6px 4px;min-height:44px;line-height:1.5}
.lrw-tel-n:hover{text-decoration:underline;text-underline-offset:4px}
.lrw-tel-s{display:block;margin-top:4px;font-size:13px;color:var(--lrw-muted);line-height:1.55}
@media(max-width:420px){.lrw-tel-n{font-size:21px}}

/* Aviso de modo de prueba en el pago. Sin él, alguien en la demo mete su
   tarjeta de verdad y Stripe se la rechaza sin explicar por qué. */
.lrw-test{margin:0 0 14px;padding:11px 14px;border-radius:12px;font-size:13px;line-height:1.55;
  background:#fbf3dd;color:#6b5210;border:1px solid rgba(138,106,18,.22)}
.lrw-test b{color:#4d3b0b}

/* ── Tu cita (quien ya reservó y vuelve) ───────────────────────────────── */
.lrw-mine{background:linear-gradient(160deg,var(--lrw-accent-l),var(--lrw-card-2));border:1px solid var(--lrw-line-2);
  border-radius:var(--lrw-r-2);padding:20px;margin-bottom:16px;text-align:center}
.lrw-mine-t{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lrw-accent-d)}
.lrw-mine-c{font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:600;line-height:1.25;margin-top:8px;
  text-transform:capitalize;letter-spacing:-.01em}
.lrw-mine-s{font-size:13.5px;color:var(--lrw-ink-2);margin-top:6px}
.lrw-lnk{background:0;border:0;padding:0;font:inherit;font-size:inherit;color:var(--lrw-accent-d);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer}

/* ── Confirmación ───────────────────────────────────────────────────────── */
.lrw-done{text-align:center;padding:26px 8px 12px}
.lrw-done .tick{width:62px;height:62px;border-radius:99px;background:var(--lrw-ok-bg);color:var(--lrw-ok);font-size:29px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:lrwPop .6s var(--lrw-ease) both}
@keyframes lrwPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.lrw-done h3{font-size:19px;font-weight:600;margin:0 0 6px}
.lrw-done p{font-size:14px;color:var(--lrw-muted);margin:0 auto 8px;max-width:360px;line-height:1.55}
/* Los enlaces de la pantalla final (videollamada, cómo llegar) con el color de
   la marca, no el azul por defecto del navegador. */
.lrw-done p a{color:var(--lrw-accent-d);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.lrw-foot{text-align:center;font-size:11.5px;color:var(--lrw-muted);padding:0 20px 16px}
.lrw-foot a{color:var(--lrw-muted);text-decoration:none;border-bottom:1px solid var(--lrw-line)}
.lrw-foot a:hover{color:var(--lrw-accent-d)}
.lrw-pay{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--lrw-muted);margin-top:11px}

@media(max-width:480px){
  .lrw{border-radius:0;border-left:0;border-right:0;box-shadow:none;max-width:none}
  .lrw-body{--lrw-pad:15px;padding:12px var(--lrw-pad) 18px}
  .lrw-head{padding:15px 15px 0}
  .lrw-head.con-portada{gap:13px}
  .lrw-head.con-portada .lrw-logo{width:60px;height:60px;border-radius:18px;margin-top:-30px;font-size:24px}
  .lrw-head.con-portada .lrw-title{font-size:18px;margin-top:9px}
  .lrw-steps{padding:13px 15px 4px}
  .lrw-times{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
  .lrw-pros{grid-template-columns:1fr 1fr}
}

/* ── Con sitio (ordenador, iframe ancho) ────────────────────────────────
   Los servicios pasan a rejilla, el calendario y las horas se ponen lado a
   lado y el resumen de la cita acompaña al formulario. Los pasos de una sola
   decisión (presencial u online, quién, pagar) siguen en una columna
   centrada: estirados a 1000 px se leerían peor, no mejor. */
@container lrw (min-width:640px){
  .lrw-body{--lrw-pad:28px;padding:20px var(--lrw-pad) 28px}
  .lrw-body:not(.lrw-ancho){max-width:700px;margin-inline:auto}
  .lrw-head{padding:22px 28px 0}
  .lrw-head.con-portada{gap:18px}
  .lrw-head.con-portada .lrw-logo{width:78px;height:78px;border-radius:22px;margin-top:-39px;font-size:30px}
  .lrw-head.con-portada .lrw-title{font-size:22px;margin-top:14px}
  .lrw-head.con-portada .lrw-sub{font-size:14px}
  .lrw-steps{padding:18px 28px 4px}
  .lrw-h{font-size:19px;letter-spacing:-.01em}
  .lrw-p{font-size:14px;margin-bottom:18px}

  .lrw-sec + .lrw-sec{margin-top:36px}
  .lrw-cat{margin-bottom:16px}
  .lrw-cat::before{height:24px}
  .lrw-cat-n{font-size:20px}
  .lrw-cat-c{font-size:13px}
  .lrw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
  .lrw-svc{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .lrw-svc:hover{transform:translateY(-3px);box-shadow:0 22px 40px -26px rgba(80,58,20,.55)}
  .lrw-svc:hover .lrw-svc-f img{transform:scale(1.04)}
  .lrw-svc-f{width:100%;aspect-ratio:16/10;border-radius:0}
  .lrw-in{flex:1;padding:16px 18px}
  .lrw-n{font-size:16.5px}
  /* Precio y «Reservar» abajo del todo, en todas a la misma altura */
  .lrw-m{margin-top:auto;padding-top:14px}
  .lrw-sep{display:block;order:8;flex-basis:100%;height:1px;background:var(--lrw-line-2);margin:6px 0 4px}
  .lrw-pr{order:9;font-size:16px}
  .lrw-go{display:inline-flex;align-items:center;gap:6px;order:10;margin-left:auto;font-size:13.5px;font-weight:600;color:var(--lrw-accent-d)}
  .lrw-go i{font-style:normal;transition:transform .5s var(--lrw-ease)}
  .lrw-svc:hover .lrw-go i{transform:translateX(3px)}
  .lrw-mi.tel{display:none}

  .lrw-sk{flex-direction:column;gap:0;padding:0}
  .lrw-sk .a{width:100%;aspect-ratio:16/10;border-radius:0}
  .lrw-sk .b{padding:18px;min-height:130px}

  .lrw-fecha{display:grid;grid-template-columns:minmax(290px,380px) minmax(0,1fr);gap:28px;align-items:start}
  .lrw-fecha .lrw-cal{margin-bottom:0}
  .lrw-fecha .lrw-tw{margin-top:0}
  .lrw-fecha .lrw-td{margin-top:2px;font-size:16px}

  .lrw-datos{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,310px);gap:28px;align-items:start;max-width:920px}
  .lrw-datos > .lrw-sum{grid-column:2;grid-row:1;position:sticky;top:16px;margin:0}
  .lrw-datos > .lrw-form{grid-column:1;grid-row:1}
}
@container lrw (min-width:900px){
  .lrw-cover{max-height:230px}
}
@media (prefers-reduced-motion:reduce){.lrw *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Modo integrado ─────────────────────────────────────────────────────────
   ?modo=integrado · el widget vive dentro de la web del negocio: sin tarjeta,
   sin sombra, sin cabecera ni pie propios, con la letra de esa web y un punto
   más grande (quien reserva puede tener 70 años o estar pasándolo mal). */
.lrw.lrw-integrado{
  background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; max-width:none;
  font-family:var(--lrw-fuente,'Outfit'),system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:17px;
}
.lrw-integrado .lrw-steps{padding:2px 0 10px}
.lrw-integrado .lrw-body{--lrw-pad:0px;padding:10px 0 6px;min-height:0}
.lrw-integrado .lrw-h{font-size:clamp(21px,3.4cqi,28px);font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:0 0 6px}
.lrw-integrado .lrw-p{font-size:16px;margin-bottom:18px}
.lrw-integrado .lrw-mh b{font-family:inherit;font-weight:500}
.lrw-integrado .lrw-foot{display:none}
.lrw-integrado .lrw-todos{margin-top:18px}
.lrw-integrado .lrw-body:not(.lrw-ancho){max-width:760px;margin-inline:0}
.lrw-mod-i svg{width:24px;height:24px;display:block;color:var(--lrw-accent-d)}