/* ===== Modal Pedir cita ===== */
.appt{position:fixed;inset:0;z-index:100000;display:none}
.appt.open{display:block}
.appt-backdrop{position:absolute;inset:0;background:rgba(7,40,43,.45);
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
  opacity:0;transition:opacity .3s}
.appt.open .appt-backdrop{opacity:1}

.appt-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.94);
  width:min(540px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;
  background:#fff;border-radius:22px;box-shadow:0 30px 80px -20px rgba(7,40,43,.55);
  padding:30px 30px 26px;opacity:0;transition:opacity .32s,transform .42s cubic-bezier(.34,1.4,.5,1)}
.appt.open .appt-dialog{opacity:1;transform:translate(-50%,-50%) scale(1)}
.appt-x{position:absolute;top:14px;right:14px;background:#f1f8f8;border:0;border-radius:50%;
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;color:#33514f;transition:.18s}
.appt-x:hover{background:#e1f1f1;transform:rotate(90deg)}

.appt-head{text-align:center;margin-bottom:18px}
.appt-badge{width:62px;height:62px;margin:0 auto 12px;border-radius:50%;font-size:30px;
  display:grid;place-items:center;background:linear-gradient(135deg,#bf953f,#fcf6ba,#b38728,#aa771c);
  box-shadow:0 12px 26px -10px #bf953f;animation:appt-pop .5s .1s both}
@keyframes appt-pop{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}
.appt-head h3{margin:0 0 4px;font-size:1.5rem}
.appt-head p{margin:0;color:#6b8284;font-size:.95rem}

.appt-form{display:flex;flex-direction:column;gap:12px}
.appt-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.appt-form label{display:flex;flex-direction:column;gap:5px;font-size:.84rem;font-weight:600;color:#0e2a2c}
.appt-form input,.appt-form select,.appt-form textarea{
  font:inherit;font-weight:400;padding:11px 13px;border:1px solid #d4e6e6;border-radius:11px;outline:none;transition:.18s;background:#fbfdfd}
.appt-form input:focus,.appt-form select:focus,.appt-form textarea:focus{border-color:#bf953f;box-shadow:0 0 0 3px rgba(191,149,63,.15)}
.appt-form textarea{resize:vertical}
.appt-submit{margin-top:6px;position:relative}
.appt-spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:appt-rot .7s linear infinite;display:inline-block}
@keyframes appt-rot{to{transform:rotate(360deg)}}
.appt-err{color:#d23b4e;font-size:.88rem;margin:2px 0 0;text-align:center}

.appt-success{text-align:center;padding:14px 0 6px;animation:appt-fadein .4s both}
@keyframes appt-fadein{from{opacity:0;transform:translateY(10px)}}
.appt-check{font-size:54px;animation:appt-pop .5s both}
.appt-success h3{margin:10px 0 4px}
.appt-success p{color:#6b8284;margin:0 0 16px}

@media (max-width:480px){.appt-row{grid-template-columns:1fr}.appt-dialog{padding:24px 18px}}

/* ===== Lluvia de muelas ===== */
.teeth-rain{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:100001}
.tooth{position:absolute;top:-60px;font-size:34px;will-change:transform,opacity;
  animation:tooth-fall var(--dur,2.4s) cubic-bezier(.45,.05,.55,.95) forwards;opacity:0;
  filter:drop-shadow(0 6px 10px rgba(7,40,43,.25))}
@keyframes tooth-fall{
  0%{transform:translateY(-60px) rotate(0) scale(.7);opacity:0}
  12%{opacity:1}
  70%{opacity:1}
  100%{transform:translateY(110vh) rotate(var(--rot,420deg)) scale(1);opacity:0;filter:blur(4px) drop-shadow(0 6px 10px rgba(7,40,43,0))}
}