/* ============================================================
   9. RESERVA DE CITA
   ============================================================ */
.book{display:grid; grid-template-columns:1.5fr .9fr; gap:26px; margin-top:26px; align-items:start}
/* Las columnas pueden encogerse: sin esto, en el teléfono el contenido
   más ancho estira la columna y todo el bloque se sale de la pantalla,
   que es lo que descuadraba los textos de la cita. */
.book > *{min-width:0}
@media(max-width:1000px){.book{grid-template-columns:1fr}}
.pasos{display:flex; flex-direction:column; gap:12px}

.paso{border:1px solid var(--line); border-radius:var(--r-md); background:rgba(255,255,255,.025); overflow:hidden}
.paso.on{border-color:color-mix(in srgb,var(--vivo) 45%, transparent); background:rgba(255,255,255,.045)}
.paso__h{display:flex; align-items:center; gap:12px; padding:16px 18px; cursor:pointer; user-select:none; min-height:var(--tap)}
.paso__n{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:.72rem;
  color:var(--muted); border:1px solid var(--line); flex:0 0 auto; transition:.3s}
.paso.on .paso__n,.paso.ok .paso__n{background:linear-gradient(140deg,var(--vivo-luz),var(--vivo)); color:#1A0F04; border-color:transparent}
.paso__t{flex:1; min-width:0}
.paso__t b{display:block; font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:-.02em}
.paso__t em{display:block; font-style:normal; font-size:.83rem; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.paso.ok .paso__t em{color:var(--vivo-luz)}
.paso__chev{color:var(--muted); transition:transform .35s var(--ease); flex:0 0 auto}
.paso__chev svg{width:16px; height:16px; display:block}
.paso.on .paso__chev{transform:rotate(180deg)}
.paso__c{display:none; padding:2px 18px 20px}
.paso.on .paso__c{display:block}

.opts{display:flex; flex-wrap:wrap; gap:9px}
.opt{position:relative; flex:1 1 auto}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt span{display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 16px; min-height:var(--tap);
  border:1px solid var(--line); border-radius:13px; cursor:pointer; font-size:.9rem; background:rgba(255,255,255,.03); transition:.26s var(--ease); text-align:center}
.opt span svg{width:17px; height:17px; color:var(--vivo); flex:0 0 auto}
.opt input:checked + span{background:linear-gradient(140deg,var(--oro-luz),var(--oro) 55%,var(--oro-med)); color:#1A0F04; border-color:transparent; font-weight:600}
.opt input:checked + span svg{color:#1A0F04}
.opt input:focus-visible + span{outline:2px solid var(--oro); outline-offset:3px}

/* «min(230px,100%)»: en pantallas estrechas la tarjeta nunca exige más
   ancho del que hay, así que no se sale. */
.svc-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); gap:9px}
@media(max-width:520px){.svc-list{grid-template-columns:1fr}}
.svc{position:relative}
.svc input{position:absolute; opacity:0; width:0; height:0}
/* «> span» y no «span»: la tarjeta lleva DENTRO otro span con el nombre y la
   duración. Con el selector suelto, ese de dentro recibía también borde,
   relleno y disposición en fila: por eso el nombre salía en su propia cajita
   y el precio quedaba fuera, con los textos corridos. */
.svc > span{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; min-height:var(--tap);
  border:1px solid var(--line); border-radius:13px; cursor:pointer; background:rgba(255,255,255,.03); transition:.26s var(--ease); height:100%}
.svc b{font-family:var(--display); font-weight:600; font-size:.96rem; letter-spacing:-.01em}
.svc i{display:block; font-style:normal; font-size:.75rem; color:var(--muted); margin-top:3px}
.svc u{text-decoration:none; font-family:var(--mono); font-size:.9rem; color:var(--oro); white-space:nowrap; flex:0 0 auto}
.svc input:checked + span{border-color:var(--vivo); background:color-mix(in srgb,var(--vivo) 14%, transparent)}
.svc input:checked + span u{color:var(--vivo-luz)}
.svc input:focus-visible + span{outline:2px solid var(--oro); outline-offset:3px}
.sub{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:20px 0 11px}

/* calendario */
.cal{border:1px solid var(--line); border-radius:14px; padding:14px; background:rgba(10,8,6,.4)}
.cal__bar{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.cal__mes{font-family:var(--display); font-weight:600; font-size:1.02rem; text-transform:capitalize}
.cal__nav{display:flex; gap:7px}
.cal__nav button{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:rgba(242,172,94,.05); color:var(--oro); cursor:pointer; display:grid; place-items:center}
.cal__nav button:disabled{opacity:.28; cursor:not-allowed}
.cal__nav svg{width:14px; height:14px}
/* «minmax(0,1fr)» y no «1fr»: con 1fr las columnas no bajan del tamaño de
   su contenido y las 7 casillas no caben en el teléfono. */
.cal__dow,.cal__grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px}
/* cada día ocupa justo su columna, ni un píxel más */
.cal__grid .day{width:100%; min-width:0; min-height:0}
.cal__dow span{text-align:center; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; color:var(--muted); padding-bottom:7px}
.day{aspect-ratio:1; min-height:40px; border:1px solid transparent; border-radius:11px; background:rgba(255,255,255,.04); color:var(--cream);
  font-family:var(--mono); font-size:.85rem; cursor:pointer; display:grid; place-items:center; transition:.2s var(--ease); position:relative; padding:0}
.day:hover:not(:disabled){background:color-mix(in srgb,var(--vivo) 18%, transparent)}
.day:disabled{opacity:.2; cursor:not-allowed; background:transparent}
.day.hoy::after{content:''; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:var(--vivo)}
.day.sel{background:linear-gradient(140deg,var(--oro-luz),var(--oro) 55%,var(--oro-med)); color:#1A0F04; font-weight:600}
.day.sel::after{background:#1A0F04}
.cal__nota{margin-top:11px; font-size:.75rem; color:var(--muted)}

.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px}
@media(max-width:400px){.slots{grid-template-columns:repeat(3,1fr)}}
.slot{padding:12px 6px; min-height:var(--tap); border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04);
  color:var(--cream); font-family:var(--mono); font-size:.82rem; cursor:pointer; transition:.2s var(--ease)}
.slot:hover:not(:disabled){border-color:var(--vivo); background:color-mix(in srgb,var(--vivo) 14%, transparent)}
.slot:disabled{opacity:.26; cursor:not-allowed; text-decoration:line-through}
.slot.sel{background:linear-gradient(140deg,var(--oro-luz),var(--oro) 55%,var(--oro-med)); color:#1A0F04; font-weight:600; border-color:transparent}
.vacio{font-size:.86rem; color:var(--muted); padding:12px 0}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.inp{display:flex; flex-direction:column; gap:6px}
.inp label{font-size:.78rem; color:var(--muted)}
.inp input,.inp textarea{background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px; padding:13px 15px;
  color:var(--cream); font-family:var(--body); font-size:16px; outline:none; transition:.25s; min-height:var(--tap)}
.inp input:focus,.inp textarea:focus{border-color:var(--vivo); background:rgba(255,255,255,.08)}
.inp textarea{resize:vertical; min-height:84px}
.inp input::placeholder,.inp textarea::placeholder{color:#6E6050}

/* resumen */
.resumen{position:sticky; top:104px; border:1px solid var(--line); border-radius:var(--r-md); padding:20px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--vivo) 10%, transparent), rgba(10,8,6,.55))}
.resumen h3{font-size:1.1rem}
.resumen > p{font-size:.82rem; color:var(--muted); margin:4px 0 16px}
.res-row{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:.9rem}
.res-row span{color:var(--muted); font-family:var(--mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; padding-top:3px; flex:0 0 auto}
.res-row strong{font-weight:600; text-align:right}
.res-total{display:flex; justify-content:space-between; align-items:baseline; padding:15px 0 2px}
.res-total .t{font-family:var(--display); font-weight:800; font-size:1.55rem; color:var(--oro-luz)}
.res-total .k{font-family:var(--mono); font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.resumen .btn{width:100%; margin-top:14px}
.resumen__pie{font-size:.75rem; color:var(--muted); margin-top:11px; text-align:center}
.resumen__mini{display:none}

/* barra fija de resumen en móvil */
@media(max-width:1000px){
  .resumen{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:78; border-radius:18px 18px 0 0;
    border:1px solid var(--line); border-bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(16,11,7,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    box-shadow:0 -18px 44px -22px #000; transform:translateY(115%); transition:transform .45s var(--ease)}
  body.cita-visible .resumen{transform:none}
  .resumen h3,.resumen > p,.res-row,.resumen__pie{display:none}
  .resumen__mini{display:flex; align-items:center; gap:12px}
  .resumen__mini .m{flex:1; min-width:0}
  .resumen__mini .m b{display:block; font-family:var(--display); font-size:.95rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .resumen__mini .m span{display:block; font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .resumen__mini .t{font-family:var(--display); font-weight:800; font-size:1.25rem; color:var(--oro-luz); flex:0 0 auto}
  .res-total{display:none}
  .resumen .btn{width:auto; margin:0; flex:0 0 auto; padding:12px 18px}
  .resumen__mini .btn-wrap{flex:0 0 auto}
  body.cita-visible .chat-fab{bottom:96px}
}
@media(max-width:430px){
  .resumen__mini .t{display:none}
}


/* Los dos modos de confirmar la cita: WhatsApp y el chat de la web.
   En el teléfono se ponen uno debajo del otro, a todo el ancho. */
.res-botones{display:grid; gap:9px; margin-top:14px}
.res-botones .btn{width:100%; margin-top:0}

/* El bloque interior de la tarjeta: nombre arriba, duración debajo */
.svc > span > span{display:block; min-width:0; flex:1 1 auto}
.svc b{display:block; overflow-wrap:anywhere}