/* ===========================================================================
   Dunaras — app.  Sistema de diseño tomado de la app de We Wellness que ya
   está en producción (cliently.com.ar/wewellness/app): mismos tokens, misma
   grilla de app-shell, misma nav anclada abajo, mismas transiciones.
   No es una página web con scroll: es una app de pantallas.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  --bg:#080808; --surface:#111111; --surface2:#1c1c1c;
  --border:rgba(255,255,255,0.07); --text:#f2f0eb; --muted:#777770;
  --dim:#333330; --gold:#c4a06a; --gold-dim:rgba(196,160,106,0.13);
  --radius:14px; --radius-sm:9px; --nav-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent;
  /* Nada de menú contextual ni selección al mantener apretado: es lo primero
     que delata que estás en una página y no en una app. */
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
input, textarea { -webkit-user-select:text; user-select:text; }
html,body {
  height:100%; overflow:hidden; background:var(--bg); color:var(--text);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
button,input,select,textarea { font-family:inherit; color:inherit; }
button { background:none; border:none; cursor:pointer; }
a { color:inherit; }

/* ── App shell ────────────────────────────────────────────────────────── */
#app { position:fixed; inset:0; }
/* Arranque: la app entra con un fundido corto en vez de aparecer de golpe.
   Se hace con animación CSS, NUNCA con opacity:0 esperando a que el JS la
   encienda: si el JS falla, la pantalla quedaría negra y sin explicación. */
body { animation:fadeIn .35s ease; }
.screen {
  position:absolute; inset:0; bottom:calc(var(--nav-h) + var(--safe-b));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition:opacity .26s ease, transform .26s ease;
}
.screen.active { opacity:1; pointer-events:all; transform:translateY(0); }
.pad-b { height:80px; }

.screen-top { padding:calc(var(--safe-t) + 26px) 20px 6px; }
.sec-label { font-size:11px; font-weight:600; letter-spacing:1.65px; text-transform:uppercase; color:var(--gold); }
.sec-title, .screen-h1 { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:400; color:var(--text); line-height:1.2; margin-top:5px; }
.screen-sub { font-size:13px; color:var(--muted); line-height:1.6; margin-top:9px; }

/* ── Nav inferior anclada ─────────────────────────────────────────────── */
#bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  height:calc(var(--nav-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  background:rgba(8,8,8,0.94); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border-top:1px solid var(--border); display:flex; align-items:flex-start;
  padding-top:10px; z-index:100;
}
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; opacity:.52; transition:opacity .2s; }
.nav-item.active { opacity:1; }
/* Respuesta al toque: el ítem se hunde apenas, como en una app nativa. */
.nav-item:active { transform:scale(.93); }
.nav-item { transition:opacity .2s, transform .12s ease; }
.btn-main:active, .btn-wa:active, .btn-chip:active, .cat-chip:active,
.promo-banner:active, .ctx-card:active, .foto-card:active { transform:scale(.975); }
.btn-main, .btn-wa, .btn-chip, .cat-chip, .promo-banner, .foto-card { transition:transform .11s ease, .18s; }
#bot-btn:active { transform:scale(.9); }
.nav-item svg { width:22px; height:22px; stroke:var(--text); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.nav-label { font-size:11px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--text); }
.nav-item.active .nav-label, .nav-item.active svg { color:var(--gold); stroke:var(--gold); }
.nav-item.active .nav-label { color:var(--gold); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { position:relative; height:52vh; min-height:270px; overflow:hidden; transition:height .3s ease; }
.hero.chico { height:24vh; min-height:150px; }
.hero-img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-overlay { position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(8,8,8,.10) 0%, rgba(8,8,8,0) 34%, rgba(8,8,8,.55) 74%, rgba(8,8,8,.92) 100%); }
.hero-content { position:absolute; left:20px; right:20px; bottom:20px; }
/* Marca en texto, no en imagen: un logo chico sobre una foto se lee mal, y en
   tipografía el nombre respira. Dunaras en versalitas espaciadas, una línea
   dorada fina, y el bajada en serif. */
.marca { margin-bottom:14px; }
.marca-nombre { font-size:19px; font-weight:600; letter-spacing:.42em; text-transform:uppercase;
  color:var(--text); text-indent:.42em; }
.marca-linea { width:34px; height:1px; background:var(--gold); margin:9px 0 7px; opacity:.85; }
.marca-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px;
  letter-spacing:.06em; color:var(--gold); }
.hero-saludo { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px; }
.hero-logo { width:46px; height:46px; border-radius:50%; object-fit:cover; margin-bottom:12px;
  border:1px solid rgba(255,255,255,.18); }
.hero-tagline { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:400; line-height:1.22; }
.hero-sub { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(242,240,235,.45); margin-top:7px; }

/* ── Banner destacado, con el barrido de luz de We Wellness ───────────── */
.promo-banner {
  margin:18px 20px 4px; padding:16px 18px; border-radius:16px; cursor:pointer;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#14110c 0%,#2a2016 100%);
  border:1px solid rgba(196,160,106,.45);
  display:flex; align-items:center; gap:14px; box-shadow:0 6px 20px rgba(0,0,0,.28);
  width:calc(100% - 40px); text-align:left;
}
.promo-banner .shine {
  position:absolute; top:0; bottom:0; left:-75%; width:55%; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg); animation:bannerShine 4.6s ease-in-out infinite;
}
.promo-kicker { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.promo-title { font-size:16px; font-weight:600; color:#fff; line-height:1.25; }
.promo-desc { font-size:12px; color:rgba(255,255,255,.75); margin-top:4px; line-height:1.45; }

/* ── Tarjeta contextual (tu estadía) ──────────────────────────────────── */
.ctx-card {
  margin:16px 20px 0; padding:18px; border-radius:16px; background:var(--surface);
  border:1px solid var(--border); position:relative; overflow:hidden;
}
.ctx-card.viva { border-color:rgba(196,160,106,.4); background:linear-gradient(135deg,#14110c 0%,#191512 100%); }
.ctx-eyebrow { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.ctx-titulo { font-family:'Cormorant Garamond',serif; font-size:24px; margin-top:6px; line-height:1.2; }
.ctx-linea { font-size:13px; color:var(--muted); margin-top:6px; line-height:1.55; }
.ctx-acciones { display:flex; gap:9px; margin-top:14px; flex-wrap:wrap; }
.ctx-acciones .btn-chip { flex:1; min-width:calc(50% - 5px); }

/* ── Chips / botones ──────────────────────────────────────────────────── */
.cat-strip { display:flex; gap:9px; overflow-x:auto; padding:2px 20px 4px; scrollbar-width:none; }
.cat-strip::-webkit-scrollbar { display:none; }
.cat-chip { padding:8px 14px; background:var(--surface); border-radius:20px; border:1.5px solid transparent;
  font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap; transition:.18s; }
.cat-chip.active { background:var(--gold-dim); border:1.25px solid var(--gold); color:var(--gold); }

.btn-main { width:100%; padding:16px; background:var(--text); color:#000; border:none;
  border-radius:var(--radius); font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.btn-main:disabled { opacity:.32; }
.btn-main.gold { background:var(--gold); color:#0b0b0b; }
.btn-main.ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-wa { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:15px;
  background:#25d366; color:#fff; border-radius:var(--radius); font-size:13px; font-weight:600; }
.btn-chip { padding:11px 14px; background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:12px; font-weight:500; color:var(--text); text-align:center; }

/* ── Carrusel de fotos ────────────────────────────────────────────────── */
.foto-strip { display:flex; gap:11px; overflow-x:auto; padding:14px 20px 4px; scrollbar-width:none; scroll-snap-type:x mandatory; }
.foto-strip::-webkit-scrollbar { display:none; }
.foto-card { position:relative; flex:0 0 62%; border-radius:var(--radius); overflow:hidden; aspect-ratio:5/6; scroll-snap-align:start; }
.foto-card img { width:100%; height:100%; object-fit:cover; display:block; }
.foto-card .cap { position:absolute; inset:auto 0 0 0; padding:26px 13px 12px;
  background:linear-gradient(to top, rgba(8,8,8,.88), rgba(8,8,8,0)); font-size:12.5px; font-weight:500; }

/* ── Tira de contacto ─────────────────────────────────────────────────── */
.contact-strip { margin:22px 20px 0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.contact-row { display:flex; align-items:center; gap:13px; padding:14px 15px; border-bottom:1px solid var(--border); width:100%; text-align:left; }
.contact-row:last-child { border-bottom:none; }
.contact-icon { width:34px; height:34px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-icon svg { width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-text { font-size:13.5px; font-weight:500; }
.contact-sub { font-size:11.5px; color:var(--muted); margin-top:2px; }

/* ── Wizard ───────────────────────────────────────────────────────────── */
.flow-header { display:flex; align-items:center; gap:12px; padding:calc(var(--safe-t) + 18px) 20px 16px; }
.flow-back { width:34px; height:34px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.flow-back svg { width:17px; height:17px; stroke:var(--text); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.flow-title { flex:1; font-family:'Cormorant Garamond',serif; font-size:22px; }
.step-dots { display:flex; gap:5px; }
.step-dot { width:6px; height:6px; border-radius:50%; background:var(--dim); transition:.25s; }
.step-dot.active { background:var(--gold); width:16px; border-radius:3px; }
.flow-step { display:none; padding:0 20px 90px; }
.flow-step.active { display:block; animation:stepIn .3s ease; }

.campo { margin-bottom:16px; }
.campo-label { display:block; font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.campo-input { width:100%; padding:14px 15px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:15px; color:var(--text); }
.campo-input:focus { outline:none; border-color:var(--gold); }
.campo-input::placeholder { color:var(--dim); }
textarea.campo-input { resize:vertical; min-height:82px; }

.selector-fecha { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); text-align:left; }
.selector-fecha .sf-cap { font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.selector-fecha .sf-val { font-size:15px; font-weight:500; margin-top:4px; }
.selector-fecha svg { width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.8; flex-shrink:0; }

.stepper { display:flex; align-items:center; justify-content:space-between; padding:13px 4px; border-bottom:1px solid var(--border); }
.stepper:last-of-type { border-bottom:none; }
.st-nom { font-size:14.5px; font-weight:500; }
.st-ayuda { font-size:11.5px; color:var(--muted); margin-top:2px; }
.st-ctrl { display:flex; align-items:center; gap:14px; }
.st-btn { width:32px; height:32px; border-radius:50%; background:var(--surface2); border:1px solid var(--border);
  font-size:18px; line-height:1; color:var(--text); display:flex; align-items:center; justify-content:center; }
.st-btn:disabled { opacity:.28; }
.st-val { min-width:18px; text-align:center; font-size:16px; font-weight:600; }

.nota { padding:13px 15px; background:var(--gold-dim); border-radius:var(--radius-sm);
  font-size:12.5px; line-height:1.6; color:var(--gold); margin-top:14px; }
.nota.gris { background:var(--surface); color:var(--muted); }
.nota.mal { background:rgba(200,80,60,.12); color:#e08a76; }

.resumen { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:18px; }
.resumen-fila { display:flex; justify-content:space-between; gap:14px; padding:7px 0; font-size:13.5px; }
.resumen-fila span:first-child { color:var(--muted); }
.resumen-fila span:last-child { font-weight:500; text-align:right; }

/* Carga honesta */
.cargando { display:flex; flex-direction:column; align-items:center; gap:14px; padding:30px 16px; }
.ld-row { display:flex; gap:6px; }
.ld { width:8px; height:8px; border-radius:50%; background:var(--gold); animation:blink 1.25s infinite; }
.ld:nth-child(2){ animation-delay:.18s } .ld:nth-child(3){ animation-delay:.36s }
.cargando p { font-size:13px; color:var(--muted); text-align:center; line-height:1.6; max-width:290px; }

.success-wrap { text-align:center; padding:34px 4px 10px; animation:fadeIn .4s ease; }
.success-ring { width:66px; height:66px; border-radius:50%; border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.success-ring svg { width:26px; height:26px; stroke:var(--gold); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.success-title { font-family:'Cormorant Garamond',serif; font-size:27px; }
.success-sub { font-size:13.5px; color:var(--muted); line-height:1.7; margin:11px 0 24px; }

/* ── Acordeones (La casa) ─────────────────────────────────────────────── */
.acc { border-bottom:1px solid var(--border); }
.acc-cab { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; text-align:left; }
.acc-cab span { font-size:14.5px; font-weight:500; }
.acc-cab svg { width:16px; height:16px; stroke:var(--muted); fill:none; stroke-width:2; transition:transform .25s; flex-shrink:0; }
.acc.on .acc-cab svg { transform:rotate(90deg); stroke:var(--gold); }
.acc-cuerpo { display:none; padding:0 0 16px; font-size:13.5px; color:var(--muted); line-height:1.72; }
.acc.on .acc-cuerpo { display:block; animation:fadeIn .25s ease; }
.acc-cuerpo ul { list-style:none; }
.acc-cuerpo li { padding-left:15px; position:relative; margin-bottom:5px; }
.acc-cuerpo li::before { content:'·'; position:absolute; left:4px; color:var(--gold); }
.acc-cuerpo strong { color:var(--text); font-weight:500; }

/* ── Chat ─────────────────────────────────────────────────────────────── */
#bot-btn { position:fixed; bottom:calc(var(--nav-h) + var(--safe-b) + 14px); right:16px;
  width:46px; height:46px; background:var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; z-index:99; animation:botRespira 3.4s ease-in-out infinite; }
#bot-btn svg { width:21px; height:21px; stroke:#0b0b0b; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

#chat { position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.32,.72,0,1); }
#chat.on { transform:translateY(0); }
.chat-cab { display:flex; align-items:center; gap:12px; padding:calc(var(--safe-t) + 16px) 18px 14px; border-bottom:1px solid var(--border); }
.chat-cab .n { flex:1; }
.chat-cab .n b { font-size:15px; font-weight:600; display:block; }
.chat-cab .n small { font-size:11px; color:var(--muted); }
#chat-cerrar { width:32px; height:32px; border-radius:50%; background:var(--surface); font-size:19px; line-height:1; color:var(--muted); }
#chat-log { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:82%; padding:11px 14px; border-radius:15px; font-size:14px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.msg.bot { background:var(--surface); border-bottom-left-radius:5px; align-self:flex-start; }
.msg.yo { background:var(--gold); color:#0b0b0b; border-bottom-right-radius:5px; align-self:flex-end; }
.msg.puntos { letter-spacing:3px; color:var(--muted); }
.msg a { color:var(--gold); }
#chat-form { display:flex; gap:9px; padding:12px 14px calc(12px + var(--safe-b)); border-top:1px solid var(--border); }
#chat-input { flex:1; padding:13px 15px; background:var(--surface); border:1px solid var(--border);
  border-radius:22px; font-size:15px; color:var(--text); }
#chat-input:focus { outline:none; border-color:var(--gold); }
#chat-form button { width:44px; height:44px; border-radius:50%; background:var(--gold); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; }
#chat-form button svg { width:18px; height:18px; stroke:#0b0b0b; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── Hoja del calendario ──────────────────────────────────────────────── */
#cal { position:fixed; inset:0; z-index:210; background:var(--bg); display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.32,.72,0,1); }
#cal.on { transform:translateY(0); }
.cal-cab { display:flex; align-items:center; gap:12px; padding:calc(var(--safe-t) + 16px) 18px 14px; border-bottom:1px solid var(--border); }
.cal-cab b { flex:1; font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:400; }
#cal-tipos { padding:12px 16px 4px; border-bottom:1px solid var(--border); }
#cal-cerrar { width:32px; height:32px; border-radius:50%; background:var(--surface); font-size:19px; line-height:1; color:var(--muted); }
#cal-meses { flex:1; overflow-y:auto; padding:8px 16px 20px; }
.mes { margin-bottom:22px; }
.mes h4 { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.mes .grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.mes .dow { text-align:center; font-size:10px; color:var(--dim); padding-bottom:5px; }
.dia { aspect-ratio:1; border-radius:9px; font-size:13.5px; color:var(--text); background:transparent; display:flex; align-items:center; justify-content:center; }
.dia:disabled { color:var(--dim); }
.dia.hoy { box-shadow:inset 0 0 0 1px var(--border); }
.dia.sel { background:var(--gold); color:#0b0b0b; font-weight:600; }
.dia.entre { background:var(--gold-dim); color:var(--gold); border-radius:0; }
.cal-pie { padding:14px 18px calc(14px + var(--safe-b)); border-top:1px solid var(--border); }
#cal-info { font-size:12.5px; color:var(--muted); line-height:1.55; margin-bottom:11px; }

/* ── Instalación ──────────────────────────────────────────────────────── */
.hoja { position:fixed; inset:0; z-index:220; background:rgba(0,0,0,.62); display:none; align-items:flex-end; }
.hoja.on { display:flex; animation:fadeIn .22s ease; }
.hoja-caja { width:100%; background:var(--surface); border-radius:22px 22px 0 0; padding:24px 20px calc(24px + var(--safe-b));
  animation:subir .32s cubic-bezier(.32,.72,0,1); }
@keyframes subir { from { transform:translateY(100%); } to { transform:translateY(0); } }
.inst-cab { display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.inst-ic { border-radius:12px; }
.inst-cab h3 { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; }
.hoja-caja .sub, .hoja-caja .micro { font-size:13px; color:var(--muted); line-height:1.65; }
.hoja-caja .micro { font-size:11.5px; margin-top:10px; }
.pasos { padding-left:18px; font-size:13.5px; color:var(--muted); line-height:1.9; }
.pasos strong { color:var(--text); }
.hoja-acciones { display:flex; gap:10px; margin-top:20px; }
.hoja-acciones .btn-main { flex:1; }

.aviso { margin:14px 20px 0; padding:12px 14px; border-radius:var(--radius-sm);
  background:rgba(196,160,106,.09); border:1px solid rgba(196,160,106,.22);
  font-size:12px; color:var(--gold); line-height:1.6; }

/* ── Animaciones (verbatim de We Wellness) ────────────────────────────── */
@keyframes stepIn { 0% { opacity:0; transform:translateX(8px); } 100% { opacity:1; transform:translateX(0); } }
@keyframes blink { 0%,60%,100% { opacity:.18; transform:scale(.75); } 30% { opacity:1; transform:scale(1); } }
@keyframes botRespira {
  0%,100% { transform:scale(1); box-shadow:0 4px 22px rgba(0,0,0,.45), 0 0 0 0 rgba(196,160,106,.55); }
  50% { transform:scale(1.07); box-shadow:0 4px 22px rgba(0,0,0,.45), 0 0 0 12px rgba(196,160,106,0); }
}
@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
@keyframes bannerShine { 0% { left:-75%; } 30% { left:130%; } 100% { left:130%; } }

@media (prefers-reduced-motion: reduce) {
  *, .screen, .promo-banner .shine, #bot-btn { animation:none !important; transition:none !important; }
}

/* ── Esperas ────────────────────────────────────────────────────────────────
   Una pantalla quieta durante dos segundos se lee como "se colgó", y la
   persona toca de nuevo o se va. Todo lo que tarde más de medio segundo tiene
   que decir que está trabajando. Dos formas, según el caso:

   · el círculo que gira, cuando no sabemos qué va a aparecer;
   · el fantasma, cuando SÍ sabemos la forma de lo que viene. Es mejor: además
     de avisar, reserva el lugar, así el contenido no salta al llegar.        */

.spin { width:22px; height:22px; border-radius:50%; flex:0 0 auto;
        border:2.5px solid rgba(197,164,108,.22); border-top-color:var(--gold);
        animation:girar .75s linear infinite; }
.spin.chico { width:15px; height:15px; border-width:2px; }
@keyframes girar { to { transform:rotate(360deg); } }

.esperando { display:flex; flex-direction:column; align-items:center; justify-content:center;
             gap:12px; padding:34px 18px; text-align:center; }
.esperando p { font-size:13px; color:var(--muted); line-height:1.6; max-width:280px; margin:0; }

/* El fantasma: un bloque gris que late con la forma de lo que va a venir. */
.fx { position:relative; overflow:hidden; border-radius:8px;
      background:rgba(255,255,255,.055); }
.fx::after { content:''; position:absolute; inset:0; transform:translateX(-100%);
             background:linear-gradient(90deg, transparent, rgba(255,255,255,.075), transparent);
             animation:brillo 1.35s infinite; }
@keyframes brillo { to { transform:translateX(100%); } }
.fx-linea { height:13px; margin-bottom:9px; }
.fx-tarjeta { border:1px solid var(--linea); border-radius:14px; padding:16px; margin-bottom:12px; }

/* El calendario fantasma: la grilla de un mes, con su encabezado y sus días. */
.fx-mes { margin-bottom:26px; }
.fx-mes-tit { height:15px; width:44%; margin:0 auto 14px; }
.fx-dias { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.fx-dia { aspect-ratio:1; border-radius:9px; }

/* Quien pidió menos movimiento no ve nada girar ni brillar: se queda quieto,
   que sigue comunicando "esto está en camino" sin marear. */
@media (prefers-reduced-motion: reduce) {
  .spin { animation:none; border-top-color:var(--gold); }
  .fx::after { animation:none; }
}

/* ── En pantalla ancha ──────────────────────────────────────────────────────
   Esta app está hecha para el celular, pero la gente la abre igual desde la
   compu. Sin tope de ancho se estira a 1300px: una celda del calendario pasa
   a medir 180 por 280, entran dos filas en pantalla, y como las primeras ya
   pasaron están todas en gris. El resultado es un calendario enorme que
   parece vacío — "elijo la semana y no trae nada". Los sábados que sí se
   pueden elegir estaban ahí, abajo, fuera de la pantalla.

   La solución no es rediseñar para escritorio: es centrar el contenido con el
   ancho de un celular grande, que es la medida para la que está pensado todo
   lo demás. La app se ve igual en los dos lados.                            */
@media (min-width: 640px) {
  #app > .screen, #bottom-nav > *, .cal-cab, #cal-tipos, #cal-meses, .cal-pie,
  #chat > * { max-width:560px; margin-left:auto; margin-right:auto; }
  #cal-meses { width:100%; }
}