/* =========================================================
   reservar.css  —  UI tipo Booksy / iOS (igual a tu imagen)
   Pegá ESTE CSS COMPLETO en ../css/reservar.css
   (Es "light" siempre, aunque el usuario tenga modo oscuro)
   ========================================================= */

/* -------- Reset / base -------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

:root{
  /* Forzamos estética CLARA (igual a la imagen) */
  --bg: #f3f3f5;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #111827;
  --line: rgba(17,24,39,.10);
  --line-2: rgba(17,24,39,.14);

  --chip: #ffffff;
  --chip-border: rgba(17,24,39,.16);
  --chip-on: #111111;

  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.06);

  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 10px;

  --green: #16a34a;
  --green-soft: rgba(22,163,74,.12);

  --btn: #111111;
  --btnText: #ffffff;

  --focus: rgba(17, 24, 39, .22);
}

/* Aunque el dispositivo esté en dark mode, mantenemos el look de la imagen */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #f3f3f5;
    --card: #ffffff;
    --muted: #6b7280;
    --text: #111827;
    --line: rgba(17,24,39,.10);
    --line-2: rgba(17,24,39,.14);
    --chip: #ffffff;
    --chip-border: rgba(17,24,39,.16);
    --chip-on: #111111;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --shadow-soft: 0 6px 18px rgba(0,0,0,.06);
    --btn: #111111;
    --btnText: #ffffff;
  }
}

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 700px at 50% -10%, #ffffff 0%, var(--bg) 55%, var(--bg) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Canvas de partículas: lo respetamos pero detrás */
#bg-particles{
  pointer-events: none;
  opacity: .22;
  filter: grayscale(1);
}

/* -------- Helpers -------- */
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

:focus{ outline: none; }
:focus-visible{
  box-shadow: 0 0 0 4px var(--focus);
  border-radius: 12px;
}

/* -------- Layout principal -------- */
.card{
  width: min(520px, calc(100% - 28px));
  margin: 18px auto 24px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  padding: 16px 16px 14px;
}

/* En PC lo dejamos como “pantalla móvil” centrada (igual a la imagen) */
@media (min-width: 900px){
  body{
    background: radial-gradient(1200px 700px at 50% -10%, #ffffff 0%, var(--bg) 50%, var(--bg) 100%);
  }
  .card{
    margin: 26px auto 40px;
    padding: 18px 18px 16px;
  }
}

/* -------- Stepper superior (2 pasos) -------- */
.steps-top{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 4px 2px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

.step{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #9ca3af;
  font-weight: 600;
}

.step.is-active{ color: var(--text); }

.step-dot{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid var(--chip-border);
  background: #fff;
  color: #6b7280;
}

.step.is-active .step-dot{
  background: #111;
  border-color: #111;
  color: #fff;
}

.step-label{
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-line{
  height: 2px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(17,17,17,.18), rgba(17,17,17,.06));
  border-radius: 999px;
  margin: 0 2px;
}

/* -------- Titular -------- */
.card h2{
  margin: 10px 2px 12px;
  text-align: center;
  font-size: 26px;
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* -------- Demo pill -------- */
.demo-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #111;
  border: 1px solid rgba(0,0,0,.35);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}

/* -------- Provider card (barbero) -------- */
.provider-card{
  background: #fbfbfc;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: var(--shadow-soft);
  margin-top: 6px;
  margin-bottom: 12px;
}

.provider-head{
  display: flex;
  gap: 12px;
  align-items: center;
}

.provider-avatar{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 2px solid rgba(17,17,17,.14);
  background: #fff;
}

.provider-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.provider-title{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.provider-title h3{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.verified{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(22,163,74,.12);
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(22,163,74,.25);
}

.provider-meta{
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stars{
  color: #16a34a;
  font-weight: 900;
  font-size: 14px;
}

.count{
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
}

.placeholder-circle{
  width: 60px;
  height: 60px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: #ffffff;
  border: 2px solid rgba(17,17,17,.14);
  color: #111;
}

/* “Disponibilidad actualizada” pill como en la imagen */
.availability-pill{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #f2f3f5;
  border: 1px solid var(--line);
  color: #374151;
  font-size: 13px;
  font-weight: 700;
}

.availability-pill .dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid rgba(22,163,74,.28);
  font-weight: 900;
  font-size: 12px;
}

/* -------- Textos secciones -------- */
.section-title{
  margin: 12px 2px 4px;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.small-muted{
  margin: 0 2px 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* -------- Chips: días (scroll horizontal) -------- */
.days-scroll{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 2px 10px;
  margin: 0 0 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.days-scroll::-webkit-scrollbar{ height: 8px; }
.days-scroll::-webkit-scrollbar-thumb{
  background: rgba(17,24,39,.14);
  border-radius: 999px;
}
.days-scroll::-webkit-scrollbar-track{ background: transparent; }

.day-chip{
  flex: 0 0 auto;
  min-width: 86px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--chip-border);
  background: var(--chip);
  color: var(--text);
  box-shadow: 0 3px 10px rgba(0,0,0,.04);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.day-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

.day-chip.is-selected{
  background: var(--chip-on);
  border-color: var(--chip-on);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.day-name{
  display: block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.day-date{
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  opacity: .85;
}

/* -------- Chips: horarios (grid) -------- */
.time-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 6px 0 10px;
}

@media (max-width: 380px){
  .time-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.time-chip{
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--chip-border);
  background: #fff;
  color: #111;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.time-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

.time-chip.is-selected{
  background: #111;
  border-color: #111;
  color: #fff;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

/* -------- Lista “trust” (2 filas con divisores) -------- */
.trust-list{
  margin-top: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.trust-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.trust-item + .trust-item{
  border-top: 1px solid var(--line);
}

.trust-ico{
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #111;
  opacity: .85;
}

.trust-ico svg{
  width: 20px;
  height: 20px;
}

/* -------- Botón principal (Continuar) -------- */
form button[type="submit"],
form button#btn-demo,
form button[disabled],
form button[type="button"]{
  width: 100%;
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
}

form button[type="submit"]{
  background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
  color: var(--btnText);
  box-shadow: 0 16px 32px rgba(0,0,0,.20);
  transition: transform .12s ease, box-shadow .12s ease;
}

form button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,.22);
}

form button[type="submit"]:active{
  transform: translateY(0px) scale(.99);
}

/* Demo */
form button#btn-demo{
  background: #111;
  color: #fff;
  opacity: .85;
  cursor: not-allowed;
}

/* Disabled */
form button[disabled]{
  background: rgba(17,17,17,.12);
  color: rgba(17,17,17,.55);
  cursor: not-allowed;
  box-shadow: none;
}

/* -------- Back link (← Volver) -------- */
.back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 2px 2px;
  color: #111;
  font-weight: 800;
  opacity: .9;
}

.back:hover{ opacity: 1; }

/* -------- Multi-barberos (lista) -------- */
.barbero-list{
  display: grid;
  gap: 10px;
  margin: 10px 0 6px;
}

.barbero-item{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfbfc;
  box-shadow: var(--shadow-soft);
  padding: 10px 10px;
}

.barbero-item input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.barbero-item label{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.barbero-item label img{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(17,17,17,.14);
  background: #fff;
}

.barbero-item .placeholder-circle{
  width: 44px;
  height: 44px;
  font-size: 14px;
  border-width: 2px;
}

.barbero-nombre{
  font-weight: 900;
  font-size: 15px;
}

.barbero-item .reseñas-info{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Cuando está seleccionado: borde oscuro como chip activo */
.barbero-item input[type="radio"]:checked + label{
  outline: none;
}

.barbero-item input[type="radio"]:checked ~ .reseñas-info,
.barbero-item input[type="radio"]:checked + label .barbero-nombre{
  color: #111;
}

.barbero-item:has(input[type="radio"]:checked){
  border-color: rgba(17,17,17,.50);
  box-shadow: 0 16px 32px rgba(0,0,0,.10);
  background: #ffffff;
}

/* -------- Ajustes de formulario genéricos (por si quedó algo viejo) -------- */
label{
  display: block;
  margin: 8px 2px 6px;
  font-weight: 800;
  color: #111;
  font-size: 14px;
}

select, input[type="text"]{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--chip-border);
  background: #fff;
  color: #111;
  font-weight: 700;
}

/* Pequeños detalles: que todo respire como iOS */
.card > *{ -webkit-tap-highlight-color: transparent; }
button{ font-family: inherit; }
/* ===========================
   FIX: days-scroll como la imagen (múltiples días visibles)
   (Pegá al FINAL del reservar.css)
   =========================== */

/* 1) IMPORTANTE: los chips NO deben heredar el width:100% de botones */
.day-chip,
.time-chip{
  width: auto !important;
  margin-top: 0 !important;
}

/* 2) El botón grande "Continuar" sigue full width, PERO no afecta chips */
form button[type="submit"],
form button#btn-demo,
form button[disabled]:not(.day-chip):not(.time-chip){
  width: 100%;
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Si tenías una regla vieja que decía:
   form button[type="button"] { width:100% ... }
   ESTA SECCIÓN la pisa y evita que rompa los chips. */
form button[type="button"].day-chip,
form button[type="button"].time-chip{
  width: auto !important;
  margin-top: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

/* 3) Scroll de días: que entren varios como la imagen */
.days-scroll{
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 8px 42px 10px 2px !important; /* deja espacio para flechita */
  scroll-snap-type: x mandatory;
  position: relative;
}

/* Cada chip de día con tamaño “booksy” */
.day-chip{
  flex: 0 0 auto !important;
  min-width: 86px !important; /* para que entren 5-6 */
  max-width: 96px !important;
  text-align: center;
  scroll-snap-align: start;
}


/* 5) En pantallas grandes también queremos “móvil-like” (igual a imagen) */
@media (min-width: 900px){
  .day-chip{ min-width: 88px !important; }
}
/* ===========================
   Flecha scroll días (clickeable y moderna)
   =========================== */

/* contenedor relativo para posicionar la flecha */
.days-scroll-wrap{
  position: relative;
}

/* fade a la derecha (suave) */
.days-scroll-wrap::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:54px;
  height:100%;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 70%);
  border-radius: 14px;
}


.days-arrow:hover{
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}

.days-arrow:active{
  transform: translateY(-50%) scale(.98);
}

/* se oculta si no hay scroll posible */
.days-arrow.is-hidden{
  opacity: 0;
  pointer-events: none;
}
@media (max-width:520px){
  /* deja espacio para que el botón sticky no tape contenido */
  .trust-list{ margin-bottom:72px; }

  .card form > button[type="submit"],
  .card form > button#btn-demo,
  .card form > button[disabled]{
    position:sticky;
    bottom:10px;
    z-index:20;
  }
}


/* =========================================================
   PATCH — Flecha días + Horarios estilo mockup (Booksy)
   PEGAR AL FINAL de reservar.css
   ========================================================= */

/* ---------- 1) Flecha al lado (misma línea) SIN tapar días ---------- */
.days-scroll-wrap{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative;
}

/* el scroll ocupa todo el ancho y la flecha queda a la derecha */
.days-scroll{
  flex: 1 1 auto !important;
  padding: 8px 2px 10px 2px !important; /* ya NO necesitamos padding-right grande */
  margin: 0 0 8px !important;
}

/* Botón flecha circular, fijo, clickeable, sin “moverse” */
.days-arrow{
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid var(--chip-border) !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  /* MUY importante: que no herede estilos de botones full width */
  max-width: 34px !important;
  min-width: 34px !important;
}

/* el ícono ">" */
.days-arrow::before{
  content: "›";
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  color: #111;
  transform: translateX(1px);
}

.days-arrow:hover{
  box-shadow: 0 14px 30px rgba(0,0,0,.14) !important; /* sin translate/scale */
}
.days-arrow:active{
  box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
}

.days-arrow.is-hidden{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- 2) Arreglo definitivo del conflicto: botones chips vs botón submit ---------- */
/* Día: width auto */
.day-chip{ width: auto !important; margin-top: 0 !important; }
/* Horario: en grilla, full width */
.time-grid .time-chip{ width: 100% !important; margin-top: 0 !important; }

/* Si tenés reglas viejas tipo "form button[type='button']{width:100%}" esto lo pisa */
form button[type="button"].day-chip{ width: auto !important; }
form button[type="button"].time-chip{ width: 100% !important; }

/* ---------- 3) Horarios EXACTO estilo mockup ---------- */
.time-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 8px 0 10px !important;
}

@media (max-width: 380px){
  .time-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* chip horario uniforme (alto fijo como en la foto) */
.time-grid .time-chip{
  height: 40px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid var(--chip-border) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.04) !important;
  color: #111 !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}

.time-grid .time-chip:hover{
  box-shadow: 0 10px 18px rgba(0,0,0,.06) !important;
}

.time-grid .time-chip.is-selected{
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.18) !important;
}

/* ---------- 4) Botón Continuar visible en iPhone (safe-area) ---------- */
@media (max-width:520px){
  .card{ padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }

  .trust-list{ margin-bottom: 84px !important; } /* deja aire arriba del sticky */

  .card form > button[type="submit"],
  .card form > button#btn-demo,
  .card form > button[disabled]{
    position: sticky;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 20;
  }
}
/* SOLO: poner el ">" negro */
.days-arrow::before{
  color: #000 !important;
  opacity: 1 !important;
}
/* FIX: flecha "ver más días" visible (negra) */
.days-arrow{
  position: relative !important;
  z-index: 50 !important; /* por si el degradado la tapa */
}

.days-arrow::before{
  content: "›" !important;            /* asegura que exista el símbolo */
  color: #000 !important;             /* negro */
  -webkit-text-fill-color: #000 !important; /* Safari/iOS */
  opacity: 1 !important;
}
/* ================================
   FIX iOS: evitar “pan” horizontal del documento
   (pero permitir scroll x en .days-scroll)
   ================================ */

/* 1) Asegurar que NADA pueda agrandar el viewport */
html{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  position: relative;
  touch-action: pan-y;                 /* clave: solo vertical en el documento */
}

/* 2) El canvas fijo a veces genera overflow en iOS: lo clavamos con inset */
#bg-particles{
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* 3) El card NUNCA puede exceder el ancho real del viewport */
.card{
  width: min(520px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  overflow-x: hidden !important;
}

/* 4) Permitir scroll horizontal SOLO en la fila de días */
.days-scroll{
  overflow-x: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  touch-action: pan-x;                 /* acá sí permitimos horizontal */
  overscroll-behavior-x: contain;
}

/* 5) Por si algún hijo “empuja” el ancho */
.steps-top,
.provider-head,
.days-scroll-wrap{
  min-width: 0 !important;
}

img, svg, canvas{
  max-width: 100% !important;
}
/* =========================================================
   CTA fijo abajo (solo mobile) — Reservar (Continuar)
   ========================================================= */
@media (max-width: 768px) {

  /* deja espacio para que el contenido no quede tapado por el botón */
  body{
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* botón final del form (Continuar / Demo / No disponible) */
  .card form > button[type="submit"],
  .card form > button#btn-demo,
  .card form > button[disabled]{
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: calc(100% - 24px) !important;
    max-width: 520px !important;

    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 9999 !important;

    border-radius: 16px !important;
    padding: 14px 16px !important;
    font-weight: 800 !important;

    box-shadow: 0 14px 40px rgba(0,0,0,.25) !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* estado deshabilitado prolijo */
  .card form > button[disabled]{
    opacity: .55 !important;
    cursor: not-allowed !important;
  }
}

/* =========================================================
   FIX iPhone 11 / pantallas chicas:
   - Compacta un poco el layout
   - Reserva espacio real para el botón fijo (no tapa contenido)
   PEGAR AL FINAL de reservar.css
   ========================================================= */
@media (max-width: 390px), (max-height: 820px){

  /* 1) Compactar alturas para que se vea como en Pro Max */
  .card{ padding: 14px 14px 12px !important; }
  .steps-top{ padding: 4px 2px 8px !important; margin-bottom: 8px !important; }
  .card h2{ font-size: 24px !important; margin: 8px 2px 10px !important; }

  .provider-card{ padding: 10px 10px !important; margin-bottom: 10px !important; }
  .availability-pill{ margin-top: 8px !important; padding: 7px 10px !important; font-size: 12px !important; }

  .section-title{ margin: 10px 2px 3px !important; font-size: 17px !important; }
  .small-muted{ margin: 0 2px 8px !important; font-size: 12px !important; }

  .time-grid{ gap: 8px !important; margin: 6px 0 8px !important; }
  .time-grid .time-chip{ height: 38px !important; font-size: 13px !important; }

  .trust-item{ padding: 10px 4px !important; font-size: 13px !important; }

  /* 2) ESPACIO REAL para que el CTA fixed NO tape lo de abajo */
  .card form::after{
    content: "";
    display: block;
    height: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* 3) Botón fijo un toque más bajo/compacto en pantallas chicas */
  .card form > button[type="submit"],
  .card form > button#btn-demo,
  .card form > button[disabled]{
    padding: 12px 14px !important;
    border-radius: 14px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
}