/* ÁLZARA — /reservar (agenda tipo Calendly). Usa los colores de style.css. */
.rs { position: relative; z-index: 2; min-height: 100svh; display: grid; align-content: center; gap: 1.6rem; padding: 2rem clamp(1rem, 4vw, 3rem) 3rem; }
.rs__top { display: flex; justify-content: center; }
.rs__caja { width: min(1060px, 100%); margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; border: 1px solid var(--cream-12); border-radius: 22px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(14px); box-shadow: 0 40px 100px -40px rgba(0,0,0,.4), 0 0 70px -20px color-mix(in srgb, var(--acento) 30%, transparent); overflow: hidden; }
.rs__info { padding: 2rem 1.8rem; border-right: 1px solid var(--cream-12); display: grid; align-content: start; gap: 1rem; }
.rs__quien { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--acento); font-weight: 600; }
.rs__info h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--cream); }
.rs__datos { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: .9rem; color: var(--cream-60); }
.rs__datos li { display: flex; align-items: center; gap: .6rem; }
.rs__datos span { width: 1.2rem; text-align: center; color: var(--acento); }
.rs__datos b { color: var(--cream); }
.rs__desc { font-size: .92rem; line-height: 1.6; color: var(--cream-60); }
.rs__elegido { font-size: .95rem; font-weight: 600; color: var(--cream); padding: .8rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--acento) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent); }
.rs__paso { padding: 2rem; }
.rs__paso h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--cream); margin-bottom: 1.4rem; }
.rs__cal { display: grid; grid-template-columns: 1fr 210px; gap: 2rem; }

.cal__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cal__cab strong { font-size: 1rem; font-weight: 600; color: var(--cream); text-transform: capitalize; }
.cal__nav { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--cream-12); background: none; color: var(--cream); font-size: 1.2rem; cursor: pointer; }
.cal__nav:disabled { opacity: .3; cursor: default; }
.cal__nav:not(:disabled):hover { border-color: var(--acento); }
.cal__sem, .cal__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; text-align: center; }
.cal__sem span { font-size: .66rem; letter-spacing: .14em; color: var(--cream-30); padding-bottom: .4rem; }
.cal__dias.cargando { opacity: .4; }
.cal__dia { aspect-ratio: 1; border-radius: 50%; border: 0; background: none; color: var(--cream-30); font: inherit; font-size: .95rem; cursor: default; position: relative; }
.cal__dia.libre { color: var(--cream); font-weight: 600; background: color-mix(in srgb, var(--acento) 14%, transparent); cursor: pointer; transition: background .2s, transform .2s; }
.cal__dia.libre:hover { background: color-mix(in srgb, var(--acento) 30%, transparent); transform: scale(1.06); }
.cal__dia.sel { background: var(--acento); color: #fff; box-shadow: 0 8px 22px -6px var(--acento); }
.cal__dia.hoy::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.cal__nota { margin-top: 1rem; font-size: .85rem; color: var(--cream-60); min-height: 1.2em; }

.horas__dia { font-size: .9rem; font-weight: 600; color: var(--cream); margin-bottom: .9rem; }
.horas__lista { display: grid; gap: .5rem; max-height: 340px; overflow-y: auto; padding-right: .3rem; }
.horas__vacio { font-size: .88rem; color: var(--cream-30); }
.hora { padding: .75rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--acento) 55%, transparent); background: none; color: var(--acento); font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .2s, color .2s, transform .2s; animation: horaEntra .4s calc(var(--i) * 30ms) cubic-bezier(.16,1,.3,1) both; }
.hora:hover { background: var(--acento); color: #fff; transform: translateX(4px); }
@keyframes horaEntra { from { opacity: 0; transform: translateY(8px); } }

.rs__volver { background: none; border: 0; color: var(--cream-60); font: inherit; font-size: .85rem; cursor: pointer; margin-bottom: 1rem; padding: 0; }
.rs__volver:hover { color: var(--acento); }
.rs__campos { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.rs__campo { display: grid; gap: .4rem; }
.rs__campo--full { grid-column: 1 / -1; }
.rs__campo label { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-60); }
.rs__campo small { text-transform: none; letter-spacing: 0; color: var(--cream-30); }
.rs__campo input, .rs__campo textarea { width: 100%; font: inherit; font-size: 1rem; background: var(--cream-06); color: var(--cream); border: 1px solid var(--cream-12); border-radius: 12px; padding: .85rem 1rem; }
.rs__campo input:focus, .rs__campo textarea:focus { outline: none; border-color: var(--acento); }
.rs__trampa { position: absolute; left: -9999px; }
.rs__consent { display: flex; gap: .6rem; align-items: center; margin: 1.1rem 0 .4rem; font-size: .85rem; color: var(--cream-60); }
.rs__consent a { color: var(--acento); border-bottom: 1px solid currentColor; }
.rs__aviso { min-height: 1.3em; font-size: .88rem; color: var(--cream-60); margin-bottom: .8rem; }
.rs__aviso.mal { color: #c0563f; }

.rs__hecho { text-align: center; display: grid; justify-items: center; align-content: center; gap: 1rem; }
.rs__anillo { width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: #fff; background: #2f9a5a; box-shadow: 0 0 0 10px rgba(47,154,90,.15); animation: anillo .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes anillo { from { transform: scale(.4); opacity: 0; } }
.rs__cuando { font-size: 1.3rem; font-weight: 700; color: var(--cream); }
.rs__cuando::first-letter, .horas__dia::first-letter { text-transform: uppercase; }
.rs__acciones { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }

@media (max-width: 860px) {
  .rs__caja { grid-template-columns: 1fr; }
  .rs__info { border-right: 0; border-bottom: 1px solid var(--cream-12); padding: 1.5rem; }
  .rs__paso { padding: 1.5rem; }
  .rs__cal { grid-template-columns: 1fr; gap: 1.4rem; }
  .horas__lista { grid-template-columns: repeat(3, 1fr); max-height: none; }
  .rs__campos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hora, .rs__anillo { animation: none; } }

.rs [hidden] { display: none !important; }