/* Pestaña Citas · mundo menta y turquesa */
body[data-pagina="citas"]{background:#F2FFF7}
.citas-cab{background:var(--menta);border-bottom:2.5px solid var(--copa)}
.citas-cab .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:clamp(36px,5vw,64px)}
.citas-cab .sticker{font-size:clamp(24px,2.6vw,34px);display:inline-block;transform:rotate(-3deg)}
.citas-cab h1{font-size:clamp(46px,7vw,100px);line-height:.9;letter-spacing:-.045em;margin:.2em 0 .25em}
.citas-cab p{max-width:44ch;margin:0;font-size:clamp(17px,1.5vw,20px)}
.citas-cab img{border:3px solid var(--copa);border-radius:28px;box-shadow:10px 10px 0 var(--copa);aspect-ratio:16/10;object-fit:cover;width:100%;transform:rotate(2deg)}
@media (max-width:860px){ .citas-cab .wrap{grid-template-columns:1fr} .citas-cab img{display:none} }

.agenda{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;padding-block:36px 80px}
@media (max-width:1000px){ .agenda{grid-template-columns:1fr} }

.linea-pasos{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0 0 28px;padding:0;gap:8px}
.linea-pasos li{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--tinta-suave);position:relative;padding-bottom:10px;border-bottom:4px solid var(--linea)}
.linea-pasos li span{width:28px;height:28px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;font-size:13px;flex-shrink:0}
.linea-pasos li.activo{color:var(--copa);border-color:var(--turquesa)}
.linea-pasos li.activo span{background:var(--rotulo);border-color:var(--copa)}
.linea-pasos li.hecho{color:var(--copa);border-color:var(--copa)}
.linea-pasos li.hecho span{background:var(--gomita);border-color:var(--copa);font-size:0}
.linea-pasos li.hecho span::after{content:"✓";font-size:14px}
@media (max-width:480px){ .linea-pasos li{font-size:0;gap:0;justify-content:center} .linea-pasos li span{font-size:13px} }

.paso h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.03em;line-height:1;margin:0 0 20px}
.tipos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){ .tipos{grid-template-columns:1fr} }
.tipo{border:2.5px solid var(--copa);border-radius:var(--r);background:var(--blanco);padding:18px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s}
.tipo:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--copa)}
.tipo[aria-checked="true"]{background:var(--rotulo);box-shadow:5px 5px 0 var(--copa)}
.tipo .ico{width:54px;height:54px;border-radius:16px;border:2.5px solid var(--copa);display:grid;place-items:center;font-size:28px}
.tipo strong{font-size:19px;line-height:1.1;letter-spacing:-.01em}
.tipo small{color:var(--tinta-suave);font-size:14px;line-height:1.35}
.tipo .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.tipo .chips span{font-size:12px;font-weight:800;border:1.5px solid var(--copa);border-radius:999px;padding:2px 8px;background:var(--papel)}
.extra{margin-top:18px}
.opciones-extra{display:flex;flex-wrap:wrap;gap:10px}
.op{border:2.5px solid var(--copa);border-radius:999px;background:var(--blanco);padding:10px 16px;font-weight:800;cursor:pointer}
.op[aria-pressed="true"]{background:var(--copa);color:var(--papel)}
.titulo-extra{font-weight:800;margin:0 0 10px}

.cal-y-horas{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px}
@media (max-width:760px){ .cal-y-horas{grid-template-columns:1fr} }
.calendario,.horas{border:2.5px solid var(--copa);border-radius:var(--r);background:var(--blanco);padding:16px}
.cal-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-cab strong{font-size:19px;text-transform:capitalize}
.cal-nav{width:42px;height:42px;border-radius:50%;border:2.5px solid var(--copa);background:var(--papel);font-weight:800;cursor:pointer}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-dias,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.cal-dias span{font-size:12px;font-weight:800;color:var(--tinta-suave)}
.dia{aspect-ratio:1;border-radius:12px;border:2px solid transparent;background:transparent;font-weight:800;font-size:15px;cursor:pointer;font-variant-numeric:tabular-nums}
.dia:hover:not(:disabled){border-color:var(--copa)}
.dia:disabled{color:#C5C3CC;cursor:default}
.dia.hoy{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.dia[aria-pressed="true"]{background:var(--copa);color:var(--rotulo)}
.horas h3{margin:0 0 12px;font-size:17px}
.horas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.hora{border:2px solid var(--copa);border-radius:12px;background:var(--papel);padding:11px 4px;font-weight:800;cursor:pointer;font-variant-numeric:tabular-nums}
.hora[aria-pressed="true"]{background:var(--turquesa);color:var(--blanco);box-shadow:3px 3px 0 var(--copa)}
.hora:disabled{opacity:.35;text-decoration:line-through;cursor:default}
.horas .vacio-h{color:var(--tinta-suave);font-size:14px;margin:0}

.form-cita{display:flex;flex-direction:column;gap:14px;max-width:720px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){ .dos{grid-template-columns:1fr} }
.pila{display:flex;flex-direction:column;gap:14px}

.nav-pasos{display:flex;justify-content:space-between;gap:12px;margin-top:28px;border-top:2px dashed var(--linea);padding-top:20px}
.nav-pasos #siguiente{margin-left:auto}

.resumen-cita{position:sticky;top:calc(var(--nav-h) + 20px)}
@media (max-width:1000px){ .resumen-cita{position:static} }
.ticket{background:var(--blanco);border:2.5px solid var(--copa);border-radius:var(--r);padding:20px;box-shadow:6px 6px 0 var(--copa);position:relative}
.ticket::before,.ticket::after{content:"";position:absolute;top:118px;width:22px;height:22px;border-radius:50%;background:#F2FFF7;border:2.5px solid var(--copa)}
.ticket::before{left:-13px;clip-path:inset(0 0 0 50%)}
.ticket::after{right:-13px;clip-path:inset(0 50% 0 0)}
.ticket dl{margin:12px 0 0;display:grid;gap:0}
.ticket dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1.5px dashed var(--linea)}
.ticket dt{color:var(--tinta-suave);font-size:14px}
.ticket dd{margin:0;font-weight:800;text-align:right}
.letra-chica{font-size:13px;color:var(--tinta-suave);margin:12px 0 0}

.listo{text-align:left}
.listo .sticker{font-size:44px;display:inline-block;transform:rotate(-3deg);margin-bottom:8px}
.acciones-listo{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.cod-cita{display:inline-block;font-weight:800;border:2.5px solid var(--copa);border-radius:999px;padding:6px 16px;background:var(--rotulo);font-variant-numeric:tabular-nums}