:root{
  --ca-ink:#111111; --ca-void:#0B0A08; --ca-panel:#16130E; --ca-linea:#2C251A;
  --ca-gold:#B8923C; --ca-gold-deep:#8A6E27; --ca-gold-line:#B39B5E; --ca-gold-hi:#FFD600;
  --ca-cream:#F4EEDF; --ca-red:#B23B24; --ca-green:#5C7A4A; --ca-suave:#A39780;
  --ca-metal:linear-gradient(100deg,#8A6E27 0%,#B8923C 22%,#F4EEDF 40%,#FFD600 50%,#B8923C 66%,#8A6E27 100%);
  --ca-pulido:radial-gradient(circle at 30% 26%,#FFFFFF 0 8%,transparent 16%),radial-gradient(circle at 70% 82%,rgba(255,240,190,1) 0 9%,transparent 24%),linear-gradient(160deg,#FFF1B0 0%,#FFD600 26%,#C99A2E 56%,#B8923C 78%,#FFE58A 100%);
  --ca-titular:'Unbounded',system-ui,sans-serif; --ca-texto:'Outfit',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;min-height:100dvh;background:radial-gradient(80% 50% at 50% 110%,rgba(184,146,60,.18),transparent 70%),var(--ca-void);color:var(--ca-cream);font:400 17px/1.6 var(--ca-texto);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
.wrap{max-width:560px;margin:0 auto;padding:20px 16px 48px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
header{display:flex;align-items:center;justify-content:space-between;height:44px}
.atras{background:none;border:0;color:var(--ca-suave);font:600 15px/1 var(--ca-texto);padding:10px 4px;cursor:pointer;visibility:hidden}
.atras.ver{visibility:visible}
.atras:hover{color:var(--ca-cream)}
.paso-num{font:600 12px/1 var(--ca-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--ca-gold);min-width:60px;text-align:right}
.barra{height:3px;background:var(--ca-linea);border-radius:3px;overflow:hidden;margin:10px 0 0}
.barra i{display:block;height:100%;width:0;background:var(--ca-metal);background-size:220% 100%;transition:width .6s ease}
main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 0 8px}
.pantalla{display:none;animation:entra .5s ease both}
.pantalla.activa{display:block}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Logo: el planeta es el punto de la i */
.ca-logo{font:700 1em/1 var(--ca-titular);letter-spacing:-.01em;display:inline-flex;align-items:baseline;white-space:nowrap;color:var(--ca-cream)}
.ca-i{position:relative;display:inline-block}
.ca-dot{position:absolute;left:50%;top:-.18em;width:.38em;height:.38em;transform:translateX(-50%);border-radius:50%;background:var(--ca-pulido);animation:ca-glow 9s ease-in-out infinite}
.ca-ai{margin-left:.28em}
@keyframes ca-glow{0%,100%{box-shadow:0 0 .16em rgba(255,214,0,.65),0 0 .45em rgba(255,214,0,.25)}50%{box-shadow:0 0 .24em rgba(255,214,0,.9),0 0 .8em rgba(255,214,0,.4)}}
.ca-sp{position:absolute;pointer-events:none;width:var(--s);height:var(--s);left:calc(50% + var(--x));top:var(--y);animation:ca-tw var(--t,8s) cubic-bezier(.45,0,.25,1) infinite;animation-delay:var(--d,0s)}
.ca-fine{background:linear-gradient(135deg,#FFFFFF,#FFE9A8);clip-path:polygon(50% 0,53% 47%,100% 50%,53% 53%,50% 100%,47% 53%,0 50%,47% 47%);filter:drop-shadow(0 0 .05em #FFFFFF) drop-shadow(0 0 .12em rgba(255,214,0,.8))}
.ca-frost{border-radius:50%;background:radial-gradient(circle,#FFFFFF 0 35%,rgba(255,233,168,.9) 55%,transparent 72%)}
@keyframes ca-tw{0%,100%{transform:scale(.3) rotate(0deg);opacity:.25}40%{transform:scale(1.1) rotate(25deg);opacity:1}55%{transform:scale(.95) rotate(35deg);opacity:.95}80%{transform:scale(.45) rotate(50deg);opacity:.45}}
header .ca-logo{font-size:20px}

.ca-metal{background:var(--ca-metal);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ca-sheen 7s ease-in-out infinite}
@keyframes ca-sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

h1{font:700 clamp(28px,7.5vw,40px)/1.15 var(--ca-titular);letter-spacing:-.01em;margin:0 0 16px}
h2{font:700 clamp(21px,5.6vw,27px)/1.25 var(--ca-titular);letter-spacing:-.01em;margin:0 0 8px}
.etiqueta{font:600 12px/1 var(--ca-texto);letter-spacing:.18em;text-transform:uppercase;color:var(--ca-gold);margin:0 0 14px}
.bajada{color:#D9CFBA;font-weight:300;margin:0 0 24px}
.ayuda{color:var(--ca-suave);font-size:15px;margin:-2px 0 18px}
.privado{display:flex;gap:8px;align-items:flex-start;color:var(--ca-suave);font-size:14px;line-height:1.45;margin:16px 2px 0}
.privado svg{flex:none;margin-top:2px}

.planeta{display:block;width:min(64vw,280px);aspect-ratio:1;margin:0 auto 18px;border-radius:50%;object-fit:cover;
  -webkit-mask-image:radial-gradient(circle,#000 58%,transparent 71%);mask-image:radial-gradient(circle,#000 58%,transparent 71%);animation:flota 9s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.centro{text-align:center}

/* Opciones */
.opciones{display:grid;gap:10px;margin:22px 0 0}
.op{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:14px 18px;text-align:left;background:var(--ca-panel);
  border:1.5px solid var(--ca-linea);border-radius:14px;cursor:pointer;line-height:1.35;transition:border-color .25s,background .25s,transform .15s}
.op:hover{border-color:var(--ca-gold-line)}
.op:active{transform:scale(.99)}
.op .marca{flex:none;width:20px;height:20px;border:1.5px solid var(--ca-gold-line);border-radius:50%;display:grid;place-items:center;transition:.25s}
.op.multi .marca{border-radius:6px}
.op[aria-checked="true"]{border-color:var(--ca-gold);background:linear-gradient(0deg,rgba(184,146,60,.12),rgba(184,146,60,.12)),var(--ca-panel)}
.op[aria-checked="true"] .marca{background:var(--ca-pulido);border-color:transparent;box-shadow:0 0 10px rgba(255,214,0,.5)}

/* Campos */
.campo{margin:0 0 16px}
.campo label{display:block;font:600 12px/1 var(--ca-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--ca-gold);margin:0 0 9px}
.campo label small{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--ca-suave);font-size:13px}
.ca-field{width:100%;min-height:54px;background:var(--ca-panel);border:1.5px solid var(--ca-linea);border-radius:14px;padding:14px 16px;color:var(--ca-cream);font:400 17px/1.3 var(--ca-texto);transition:border-color .25s,box-shadow .25s}
.ca-field::placeholder{color:#6F6553}
.ca-field:focus{outline:none;border-color:var(--ca-gold);box-shadow:0 0 0 4px rgba(184,146,60,.18)}
.ca-field.mal{border-color:var(--ca-red)}
.extra{margin-top:16px;display:none}
.extra.ver{display:block;animation:entra .4s ease both}

/* Botón primario de marca */
.ca-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:18px 32px;margin-top:26px;border:0;border-radius:999px;color:var(--ca-ink);font:600 17px/1 var(--ca-texto);cursor:pointer;
  background:linear-gradient(125deg,#8A6E27 0%,#B8923C 30%,#B8923C 40%,#FFF4CC 48%,#FFD600 52%,#B8923C 60%,#B8923C 70%,#8A6E27 100%);
  background-size:300% 300%;animation:ca-sweep 10s cubic-bezier(.45,0,.25,1) infinite,ca-aura 10s ease-in-out infinite;transition:opacity .25s,filter .25s}
@keyframes ca-sweep{0%{background-position:100% 100%}55%,100%{background-position:0% 0%}}
@keyframes ca-aura{0%,100%{box-shadow:0 0 14px rgba(255,214,0,.25),0 0 34px rgba(184,146,60,.2)}30%{box-shadow:0 0 30px rgba(255,214,0,.7),0 0 80px rgba(255,214,0,.35),0 0 140px rgba(184,146,60,.25)}}
.ca-btn:disabled{opacity:.35;filter:grayscale(.4);cursor:not-allowed;animation:none;box-shadow:none}
.error{color:#E58B76;font-size:15px;margin:14px 2px 0;min-height:0}

/* Horarios */
.zona{display:inline-flex;align-items:center;gap:8px;color:var(--ca-suave);font-size:14px;margin:0 0 18px}
.dias{display:flex;gap:10px;margin:0 0 16px}
.dia{flex:1;padding:12px 10px;background:var(--ca-panel);border:1.5px solid var(--ca-linea);border-radius:14px;cursor:pointer;text-align:center;line-height:1.25;transition:.25s}
.dia b{display:block;font:700 15px/1.2 var(--ca-titular);margin-top:3px}
.dia span{font-size:13px;color:var(--ca-suave);text-transform:capitalize}
.dia[aria-pressed="true"]{border-color:var(--ca-gold);background:linear-gradient(0deg,rgba(184,146,60,.12),rgba(184,146,60,.12)),var(--ca-panel)}
.horas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hora{min-height:52px;background:var(--ca-panel);border:1.5px solid var(--ca-linea);border-radius:12px;cursor:pointer;font:600 16px/1 var(--ca-texto);transition:.25s}
.hora:hover{border-color:var(--ca-gold-line)}
.hora[aria-pressed="true"]{background:linear-gradient(125deg,#8A6E27 0%,#B8923C 45%,#E8C766 70%,#B8923C 100%);color:var(--ca-ink);border-color:transparent;box-shadow:0 0 18px rgba(255,214,0,.35)}
.cargando{color:var(--ca-suave);padding:24px 0;text-align:center}
.vacio{background:var(--ca-panel);border:1px solid var(--ca-linea);border-radius:18px;padding:24px;color:#D9CFBA}

.resumen{background:var(--ca-panel);border:1px solid var(--ca-linea);border-radius:18px;padding:22px;margin:22px 0 0;text-align:left}
.resumen p{margin:0}
.resumen .cuando{font:700 19px/1.35 var(--ca-titular);margin:6px 0 4px}

.planeta-chico{width:min(40vw,180px);margin-bottom:10px}
.h1-chico{font-size:clamp(24px,6.6vw,34px)}
.paso-final{display:flex;gap:14px;align-items:flex-start;text-align:left;margin:16px 0 0;padding:18px 20px;border:1.5px solid var(--ca-gold);border-radius:18px;background:linear-gradient(0deg,rgba(184,146,60,.12),rgba(184,146,60,.12)),var(--ca-panel)}
.paso-final p{margin:0;line-height:1.5}
.paso-icono{font-size:26px;line-height:1}
footer{text-align:center;color:#6F6553;font-size:13px;padding-top:24px}
@media (min-width:700px){.wrap{padding-top:32px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Onboarding (25/10) */
.buscar{position:sticky;top:0;z-index:2;padding:8px 0 10px;background:var(--ca-void)}
.grupo{font:600 12px/1 var(--ca-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--ca-suave);margin:20px 2px 2px}
.op.ultima{border-style:dashed}
.op.oculta,.grupo.oculta{display:none}
.contador{color:var(--ca-gold);font-size:14px;margin:12px 2px 0;min-height:20px}
.escala{grid-template-columns:repeat(5,1fr)}
.escala .op{justify-content:center;padding:14px 0;font:700 18px/1 var(--ca-titular)}
.escala .op .marca{display:none}
.escala-pies{display:flex;justify-content:space-between;color:var(--ca-suave);font-size:13px;margin:8px 2px 0}
.subir{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:190px;margin:22px 0 0;padding:22px;border:1.5px dashed var(--ca-gold-line);border-radius:18px;background:var(--ca-panel);cursor:pointer;text-align:center;color:#D9CFBA;transition:border-color .25s}
.subir:hover{border-color:var(--ca-gold)}
.subir img{max-width:100%;max-height:320px;border-radius:10px}
.subir input{display:none}
.dias{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.dias::-webkit-scrollbar{display:none}
.dia{flex:0 0 auto;min-width:86px}
.listo-caja{background:var(--ca-panel);border:1px solid var(--ca-linea);border-radius:18px;padding:22px;margin:22px 0 0;text-align:left}
.listo-caja p{margin:0}
/* En las listas largas de rubros, el botón queda siempre a la vista */
.pegado{position:sticky;bottom:16px;z-index:3}

/* Vista de calendario mensual (25/10, Ale): mes a la izquierda, horarios a la derecha */
.cal{display:grid;gap:18px}
.cal-mes{background:var(--ca-panel);border:1px solid var(--ca-linea);border-radius:18px;padding:16px 12px 14px}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
.cal-nav b{font:700 16px/1 var(--ca-titular)}
.cal-flecha{width:40px;height:40px;border-radius:50%;border:1px solid var(--ca-linea);background:none;color:var(--ca-gold);font:400 24px/1 var(--ca-texto);cursor:pointer;display:grid;place-items:center;padding:0 0 3px;transition:.2s}
.cal-flecha:hover:not(:disabled){border-color:var(--ca-gold);background:rgba(184,146,60,.12)}
.cal-flecha:disabled{opacity:.22;cursor:default}
.cal-sem,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.cal-sem span{font:600 12px/1 var(--ca-texto);color:var(--ca-suave);padding:8px 0 10px}
.cal-grid{row-gap:6px}
.cal-d{position:relative;justify-self:center;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:0;background:none;padding:0;font:400 15px/1 var(--ca-texto);color:#5A5143}
.cal-d.hay{color:var(--ca-cream);font-weight:600;background:rgba(184,146,60,.16);cursor:pointer;transition:background .2s,box-shadow .2s}
.cal-d.hay:hover{background:rgba(184,146,60,.32)}
.cal-d.hay[aria-pressed="true"]{background:var(--ca-pulido);color:var(--ca-ink);box-shadow:0 0 16px rgba(255,214,0,.45)}
.cal-d.hoy::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ca-gold)}
.cal-d.hay[aria-pressed="true"].hoy::after{background:var(--ca-ink)}
.cal-dia{font:700 15px/1.3 var(--ca-titular);margin:2px 2px 12px}
@media (max-width:360px){.cal-d{width:34px;height:34px;font-size:14px}}
@media (min-width:760px){
  body.ver-cal .wrap{max-width:900px}
  .cal{grid-template-columns:1.1fr 1fr;align-items:start;gap:24px}
  .cal-horas .horas{grid-template-columns:1fr;max-height:400px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--ca-gold-deep) transparent}
  body.ver-cal #p-horario .ca-btn{max-width:420px;margin-left:auto;margin-right:auto}
}

/* Selector de zona horaria */
.zona{flex-wrap:wrap;row-gap:10px}
.zona b{color:var(--ca-cream);font-weight:600}
.zona>span{flex:1 1 0;min-width:0}
.zona>svg{flex:none;margin-top:4px}
.zona-cambiar{background:none;border:0;padding:2px 0;color:var(--ca-gold);font:600 14px/1 var(--ca-texto);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.zona-cambiar:hover{color:var(--ca-gold-hi)}
.zona-lista{flex-basis:100%;min-height:48px;font-size:15px;padding:10px 14px;appearance:auto}