/* Antes y después — el deslizador del sitio.
 *
 * Dos fotos encimadas: la de después abajo, la de antes arriba recortada con
 * clip-path hasta la línea. Mover el control solo cambia una variable (--ad),
 * o sea un recorte: no hay filtros ni animaciones que pesen en un celular flojo.
 * Sin JS se ve igual, partido al medio, y el control de rango nativo lo mueve. */

.ad{margin:0;display:flex;flex-direction:column;gap:12px}
.ad__marco{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-lg,22px);
  background:var(--lavanda-humo,#F6F4FC);box-shadow:var(--sombra);
  outline:1px solid var(--lila-velo,rgba(169,139,216,.3));outline-offset:-1px;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.ad__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ad__foto--antes{clip-path:inset(0 calc(100% - var(--ad)) 0 0)}

.ad__rotulo{
  position:absolute;top:12px;padding:4px 10px;border-radius:999px;
  font:700 .62rem/1.4 var(--mono,monospace);letter-spacing:.16em;text-transform:uppercase;
  background:rgba(26,24,56,.72);color:#fff;pointer-events:none;
}
.ad__rotulo--antes{left:12px}
.ad__rotulo--despues{right:12px;background:rgba(169,139,216,.92);color:var(--noche,#1A1838)}

.ad__linea{
  position:absolute;top:0;bottom:0;left:var(--ad);width:2px;margin-left:-1px;
  background:#fff;box-shadow:0 0 0 1px rgba(26,24,56,.18);pointer-events:none;
}
.ad__linea i{
  position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;
  background:#fff;box-shadow:0 6px 18px -6px rgba(26,24,56,.45);
  display:grid;place-items:center;
}
.ad__linea i::before{
  content:"‹ ›";font:700 1.05rem/1 var(--texto,sans-serif);letter-spacing:3px;
  color:var(--lila-hondo,#7552B0);margin-top:-2px;
}
/* El control real: invisible, ocupa todo el cuadro, así se arrastra desde cualquier lado. */
.ad__control{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.ad__control:focus-visible + *,
.ad__marco:focus-within{outline:2.5px solid var(--indigo,#5565A4);outline-offset:2px}

.ad__pie{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.ad__pie b{font-family:var(--display,serif);font-weight:500;font-size:1.08rem}
.ad__pie span{color:var(--humo,#6B6985);font-size:.9rem}
.ad__pie small{font-family:var(--mono,monospace);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lila-hondo,#7552B0)}

.ad-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px}

/* Las pestañas de la página: una por sección */
.ad-secciones{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px}
.ad-secciones a{
  padding:9px 16px;border-radius:999px;border:1px solid var(--linea,#E7E4F2);background:#fff;
  text-decoration:none;color:var(--tinta,#1A1838);font-weight:600;font-size:.9rem;
}
.ad-secciones a[aria-current="page"]{background:var(--noche,#1A1838);color:#fff;border-color:var(--noche,#1A1838);
  box-shadow:inset 0 -2px 0 var(--lila,#A98BD8)}
.ad-secciones a small{font-weight:400;opacity:.7;margin-left:4px}

@media (max-width:600px){
  .ad-grilla{grid-template-columns:1fr;gap:22px}
  .ad-secciones{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .ad-secciones a{white-space:nowrap}
}

/* "Confirmo que voy", en la página del turno (llega desde el correo del recordatorio) */
.confirmar-turno{margin-top:20px;padding:16px 18px;border-radius:var(--r,14px);background:var(--lavanda-humo,#F6F4FC);
  border:1px solid var(--lila-velo,rgba(169,139,216,.3));display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.confirmar-turno p{margin:0}

/* "Agregalo a tu calendario" (reserva lista y Mi turno) */
.agendar{margin-top:16px;text-align:center}
.agendar__titulo{display:block;font-size:.82rem;color:var(--humo,#6B6985);margin-bottom:8px}
.agendar__botones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.agendar__botones .btn{width:100%;justify-content:center;white-space:normal;text-align:center}