/* Agenda en línea (agendar.html). Va aparte de neoto.css para no tocar la hoja
   que usan todas las páginas: sólo la carga esta. */

.agenda .contact-inner{max-width:46rem;width:100%;min-width:0}
/* minmax(0,1fr): la tira de días es más ancha que la pantalla y, sin esto,
   estiraba todo el bloque y sacaba de la vista la segunda tarjeta. */
.agenda-app{margin-top:3rem;display:grid;grid-template-columns:minmax(0,1fr);gap:2.75rem}
.agenda-app>*{min-width:0}
.agenda-paso[hidden]{display:none}
.agenda-titulo{display:flex;align-items:center;gap:.8rem;color:#fff;
  font-weight:500;font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.02em;margin-bottom:1.25rem}
.agenda-titulo span{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.85rem;font-weight:600;letter-spacing:0;flex:none}

.agenda-servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.9rem}
.agenda-servicio{display:grid;gap:.3rem;text-align:left;padding:1.25rem 1.4rem;
  border:1px solid var(--line-inv);background:rgba(255,255,255,.06);color:#fff;
  transition:border-color .3s,background .3s}
.agenda-servicio b{font-weight:500;font-size:1.1rem}
.agenda-servicio small{color:rgba(255,255,255,.6);font-size:.85rem}
.agenda-servicio:hover{border-color:rgba(255,255,255,.5)}
.agenda-servicio.is-on{border-color:var(--accent);background:rgba(226,84,44,.16)}

/* opciones: joyería, perforación o tamaño, con su precio */
.agenda-opciones{display:grid;gap:1.4rem;margin-top:1.6rem}
.agenda-opciones[hidden]{display:none}
.agenda-grupo-titulo{margin:0 0 .7rem;color:rgba(255,255,255,.62);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.agenda-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.6rem}
.agenda-chip{display:grid;gap:.2rem;text-align:left;padding:.85rem 1rem;border:1px solid var(--line-inv);
  background:rgba(255,255,255,.06);color:#fff;font-size:.98rem;transition:border-color .3s,background .3s}
.agenda-chip small{color:rgba(255,255,255,.6);font-size:.82rem}
.agenda-chip:hover{border-color:rgba(255,255,255,.5)}
.agenda-chip.is-on{border-color:var(--accent);background:rgba(226,84,44,.16)}
.agenda-chip.is-on small{color:#fff}
.agenda-chip-wa{border-style:dashed}
.agenda-precio{display:block;margin-top:.35rem;color:rgba(255,255,255,.75);font-weight:300}

.agenda-dias{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.6rem;margin-bottom:1.1rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.agenda-dia{flex:0 0 4.4rem;display:grid;justify-items:center;gap:.1rem;padding:.75rem .3rem;
  border:1px solid var(--line-inv);background:rgba(255,255,255,.06);color:#fff;scroll-snap-align:start;
  transition:border-color .3s,background .3s}
.agenda-dia b{font-size:1.45rem;font-weight:500;line-height:1.1}
.agenda-dia small{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.agenda-dia.is-on{border-color:var(--accent);background:var(--accent)}
.agenda-dia.is-on small{color:#fff}

.agenda-horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.2rem,1fr));gap:.6rem}
.agenda-hora{padding:.8rem .4rem;border:1px solid var(--line-inv);background:rgba(255,255,255,.06);
  color:#fff;font-size:.95rem;transition:border-color .3s,background .3s}
.agenda-hora:hover{border-color:rgba(255,255,255,.5)}
.agenda-hora.is-on{border-color:var(--accent);background:var(--accent)}

.agenda-nota{color:rgba(255,255,255,.62);font-size:.9rem;font-weight:300;margin:0}
.agenda-resumen{color:#fff;font-weight:500;margin:0 0 .25rem}
.agenda .form{max-width:none}
.agenda .btn:disabled{opacity:.6;cursor:wait}

.agenda-final{padding:2rem 1.75rem;border:1px solid var(--accent);background:rgba(226,84,44,.12);color:#fff}
.agenda-final h2{font-weight:500;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.02em;margin-bottom:1rem}
.agenda-final p{color:rgba(255,255,255,.85);font-weight:300;margin:.6rem 0 0}
.agenda-final .btn{margin-top:1rem}

.agenda-otra{margin-top:3rem;color:rgba(255,255,255,.62);font-weight:300}
.agenda-otra a{color:#fff;text-decoration:underline;text-underline-offset:.2em}

@media (max-width:600px){
  .agenda-app{gap:2.25rem}
  .agenda-horas{grid-template-columns:repeat(3,1fr)}
}