/* IMÁN · Onboarding (conocer.js), shared by /conocer/ and the home, where it lives in a white sheet under IMÁN:
   the rubro, the client's data and budget (sent to IMÁN as soon as they are complete), then the agenda's free times. */
[data-cn] [hidden]{display:none!important}
.cn-bar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:calc(940px + 2*var(--gutter));margin:0 auto;padding:max(16px,env(safe-area-inset-top)) var(--gutter) 0}
.cn-steps{display:flex;gap:6px;font:500 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cn-steps li{padding:8px 11px;border-radius:999px;background:#ffffffc0;box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,color .25s}
.cn-steps li.ok{background:var(--paper-2);color:var(--ink);box-shadow:none}
.cn-steps li.on{background:var(--ink);color:#fff;box-shadow:none}
.cn-main{position:relative;z-index:2;max-width:calc(940px + 2*var(--gutter));margin:0 auto;padding:clamp(26px,6vh,64px) var(--gutter) clamp(40px,8vh,90px)}
.cn-back{display:inline-flex;align-items:center;gap:7px;height:34px;margin-bottom:18px;padding:0 13px 0 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:500 13px/1 var(--sans);transition:background .2s}
.cn-back:hover{background:var(--paper-2)}
.cn-back svg{width:14px;height:14px}
.cn-view h1{max-width:16em;margin-top:14px;font-size:clamp(34px,4.8vw,58px)}
.cn-view h1:focus{outline:0}
.cn-hint{max-width:52ch;margin-top:12px;font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--muted)}
.motion .cn-view.is-in>*{animation:cn-in .5s var(--ease) both}
.motion .cn-view.is-in>*:nth-child(2){animation-delay:.04s}
.motion .cn-view.is-in>*:nth-child(3){animation-delay:.08s}
.motion .cn-view.is-in>*:nth-child(n+4){animation-delay:.12s}
@keyframes cn-in{from{opacity:0;transform:translateY(14px)}}

/* Step 1: the rubros */
.cn-rubros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(24px,4vh,38px)}
.cn-r{display:grid;align-content:start;gap:5px;min-height:84px;padding:15px 16px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 16px 30px -26px #121212;text-align:left;transition:transform .25s var(--ease),box-shadow .25s,background .2s,color .2s}
.cn-r b{display:flex;align-items:center;gap:9px;font:500 16.5px/1.2 var(--sans);letter-spacing:-.02em}
.cn-r b::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--grad)}
.cn-r small{padding-left:16px;font-size:13px;line-height:1.4;color:var(--muted)}
@media(hover:hover){.cn-r:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--ink),0 20px 34px -24px #121212}}
.cn-r[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.cn-r[aria-pressed=true] small{color:var(--muted-d)}
.cn-other{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cn-other input{flex:1 1 260px;min-width:0;min-height:54px;padding:0 18px;border:1px solid #12121233;border-radius:16px;background:#fff;color:var(--ink);font:400 17px/1.3 var(--sans)}
.cn-other input:focus{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}

/* "Quiero ver más información antes", under the rubros, and the notice when there is no rubro yet */
.cn-more{display:grid;justify-items:start;gap:12px;margin-top:22px}
.cn-need{display:flex;align-items:center;gap:10px;padding:11px 16px 11px 11px;border-radius:14px;background:var(--grad-soft);font:500 14.5px/1.4 var(--sans);letter-spacing:-.01em}
.cn-need::before{content:'!';flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font:600 12px/1 var(--mono)}
.motion .cn-need:not([hidden]){animation:cn-in .4s var(--ease) both}
.cn-rubros.is-asking .cn-r{animation:ask 1s var(--ease) 2}
@keyframes ask{45%{box-shadow:inset 0 0 0 1.5px var(--ink),0 18px 30px -24px #121212;transform:translateY(-2px)}}
.cn-alt{margin-top:10px;font-size:14px}

/* The information for the rubro: where IMÁN would start, the rest, how it works, and the form under it */
.cn-serv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(24px,4vh,36px)}
.cn-s{display:grid;align-content:start;gap:10px;padding:clamp(18px,2.4vw,26px);border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 24px 40px -34px #121212}
.cn-s h3{font-size:clamp(21px,2vw,26px);letter-spacing:-.045em;line-height:1.1}
.cn-s>p:not(.label){max-width:52ch;font-size:15px;line-height:1.55;color:var(--muted)}
.cn-s .checks{margin-top:4px}
.cn-s .checks li{font-size:14px}
.cn-s.is-main{grid-column:1/-1;background:var(--ink);color:#fff;box-shadow:0 30px 50px -36px #121212}
.cn-s.is-main .label,.cn-s.is-main>p:not(.label){color:var(--muted-d)}
.cn-how{margin-top:clamp(34px,6vh,56px)}
.cn-how h2,.cn-book h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.05em;line-height:1.06}
.cn-how ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;margin-top:18px;counter-reset:how}
.cn-how li{padding-top:14px;border-top:1px solid var(--line);counter-increment:how}
.cn-how li::before{content:'0' counter(how);display:block;margin-bottom:10px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.cn-how b{display:block;font:500 17px/1.25 var(--sans);letter-spacing:-.02em}
.cn-how span{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--muted)}
.cn-price{max-width:62ch;margin-top:22px;font-size:14px;line-height:1.6;color:#3f4047}
.cn-price .link{font-size:14px}
.cn-book{margin-top:clamp(36px,6vh,64px);padding-top:clamp(28px,4.5vh,44px);border-top:1px solid var(--line)}
.cn-book h2{max-width:18em}
/* "Deslizá" at the side of the information: the brand's colors going up and down a line, until the form shows */
.cn-scroll{position:fixed;z-index:20;right:clamp(10px,2.4vw,34px);top:50%;margin-top:-80px;display:grid;justify-items:center;gap:10px;padding:6px 2px;color:var(--ink);transition:opacity .35s,visibility .35s}
.cn-scroll span{writing-mode:vertical-rl;transform:rotate(180deg);font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.cn-scroll i{position:relative;overflow:hidden;width:3px;height:96px;border-radius:3px;background:#1212121a}
.cn-scroll i::after{content:'';position:absolute;left:0;right:0;top:0;height:46%;border-radius:3px;background:linear-gradient(#82c7d6,#b9a3ee,#e6c5a6);animation:cue 1.5s ease-in-out infinite alternate}
@keyframes cue{from{transform:translateY(-25%)}to{transform:translateY(140%)}}
.cn-scroll svg{width:12px;height:12px;animation:cue-arrow 1.5s ease-in-out infinite alternate}
@keyframes cue-arrow{to{transform:translateY(4px)}}
.cn-scroll.is-off{opacity:0;visibility:hidden}
.motion .cn-view.is-in>.cn-scroll{animation:cue-in .6s .5s both}
@keyframes cue-in{from{opacity:0}}

/* Step 2: the data and the budget */
.cn-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:var(--ink);color:#fff;font:500 12.5px/1 var(--sans)}
.cn-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--grad)}
.cn-chip button{margin-left:4px;color:var(--muted-d);font-size:12px;text-decoration:underline;text-underline-offset:2px}
.cn-form{max-width:720px;margin-top:clamp(22px,3.6vh,34px)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0;font:500 12.5px/1.4 var(--sans)}
.fld input{width:100%;min-height:52px;padding:0 15px;border:1px solid #12121226;border-radius:14px;background:#fff;color:var(--ink);font:400 16px/1.3 var(--sans)}
.fld input:focus{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.cn-budget{margin:24px 0 0;padding:0;border:0}
.cn-budget legend{padding:0;font:500 15px/1.35 var(--sans);letter-spacing:-.015em}
.cn-budget p{margin-top:4px;font-size:13px;color:var(--muted)}
.cn-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cn-pills label{position:relative}
.cn-pills input{position:absolute;opacity:0;pointer-events:none}
.cn-pills span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #12121230;font:500 14.5px/1 var(--sans);letter-spacing:-.01em;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.cn-pills small{margin-left:8px;font:500 12px/1 var(--mono);letter-spacing:0;color:var(--muted)}
.cn-pills input:checked+span{background:var(--ink);color:#fff;box-shadow:none}
.cn-pills input:checked+span small{color:#ffffffa8}
.cn-pills input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
@media(hover:hover){.cn-pills span:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}}
.honey{position:absolute;left:-9999px;overflow:hidden;width:1px;height:1px}
.consent{display:flex;align-items:flex-start;gap:10px;margin:22px 0 20px;font-size:12.5px;line-height:1.55;color:#3f4047}
.consent input{flex:none;width:17px;height:17px;margin:1px 0 0;accent-color:var(--c2)}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.f-status{margin-top:12px;font-size:13px;color:#3f4047}
.f-error{margin-top:14px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px #a3271f66;font-size:13.5px;line-height:1.6;color:#a3271f}
.btn:disabled{opacity:.5;cursor:progress;transform:none}

/* Step 3: the agenda, as in the diagnosis */
.cn-saved{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;border-radius:999px;background:var(--grad-soft);font:500 14px/1.3 var(--sans);letter-spacing:-.01em}
.cn-saved::before{content:'';flex:none;width:22px;height:22px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.3 4.6-5' fill='none' stroke='%23121212' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat,#fff}
.cn-agenda{max-width:760px;margin-top:clamp(22px,3.6vh,32px);padding:clamp(18px,3vw,28px);border-radius:26px;background:#fff;box-shadow:inset 0 0 0 1px #1212121a,0 40px 70px -54px #121212}
.cn-days{display:flex;gap:8px;overflow-x:auto;margin:0 calc(-1*clamp(18px,3vw,28px));padding:2px clamp(18px,3vw,28px) 6px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:clamp(18px,3vw,28px)}
.cn-days::-webkit-scrollbar{display:none}
.cn-d{flex:none;width:64px;padding:10px 0 9px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);text-align:center;scroll-snap-align:start;transition:background .2s,color .2s,box-shadow .2s}
.cn-d small{display:block;font:500 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cn-d b{display:block;margin:2px 0 1px;font:500 23px/1.1 var(--display);letter-spacing:-.04em}
.cn-d[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.cn-d[aria-pressed=true] small{color:var(--muted-d)}
.cn-day{margin:16px 0 10px;font:500 15px/1.3 var(--sans);letter-spacing:-.015em}
.cn-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.cn-t{min-height:48px;border-radius:13px;background:#fff;box-shadow:inset 0 0 0 1px #12121238;font:500 15px/1 var(--mono);letter-spacing:-.02em;transition:background .2s,color .2s,box-shadow .2s,transform .25s var(--ease)}
.cn-t:enabled{background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:none}
.cn-t:disabled{background:var(--paper-2);box-shadow:none;color:#a3a6ad;text-decoration:line-through;text-decoration-color:#12121240;cursor:default}
.cn-t[aria-pressed=true]{background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box;color:#fff}
@media(hover:hover){.cn-d:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}.cn-d[aria-pressed=true]:hover{box-shadow:none}.cn-t:enabled:hover{transform:translateY(-2px);background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box;color:#fff}}
.cn-wait{font-size:14px;color:var(--muted)}
.is-loading .cn-days{min-height:76px;border-radius:16px;background:linear-gradient(90deg,var(--paper-2) 0 64px,transparent 64px 72px) 0 2px/72px 72px repeat-x;opacity:.8}
.cn-note{margin-bottom:16px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px #a3271f66;font-size:13.5px;line-height:1.55;color:#a3271f}
.cn-confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:20px;padding:14px 14px 14px 18px;border-radius:18px;background:var(--grad-soft)}
.cn-confirm p{font:500 16px/1.35 var(--sans);letter-spacing:-.015em}
.cn-confirm small{display:block;font:500 10.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#3f4047}
.cn-later{margin-top:20px;font-size:14px}

/* The end */
.cn-done{display:grid;justify-items:center;max-width:640px;margin:clamp(10px,4vh,40px) auto 0;text-align:center}
.cn-check{width:60px;height:60px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.3 4.6-5' fill='none' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px no-repeat,var(--grad)}
.cn-done h1{margin:18px auto 10px}
.cn-when{font:500 clamp(18px,1.6vw,21px)/1.35 var(--sans);letter-spacing:-.02em}
.cn-done p:not(.cn-when){max-width:46ch;margin-top:10px;font-size:15px;line-height:1.55;color:#3f4047}
.cn-done .actions{justify-content:center;margin-top:26px}
.cn-after{margin-top:26px;font-size:14px}

@media(max-width:760px){
  .cn-rubros{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cn-r{align-content:center;min-height:54px;padding:11px 12px;border-radius:16px}
  .cn-r b{align-items:flex-start}
  .cn-r b::before{margin-top:.45em}
  .cn-r b{font-size:15px}
  .cn-r small{display:none}
  .fgrid{grid-template-columns:1fr}
  .cn-steps li:not(.on){display:none}
  .cn-serv{grid-template-columns:1fr}
  .cn-how ol{grid-template-columns:1fr}
  .cn-more .btn{flex:1 1 100%;justify-content:space-between;width:100%}
  .cn-scroll{right:9px;margin-top:-66px;gap:8px}
  .cn-scroll i{height:72px}
  .cn-times{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cn-form>.btn,.cn-other .btn,.cn-confirm .btn,.cn-done .btn{flex:1 1 100%;justify-content:space-between}
  .cn-confirm{padding:14px}
}
@media(prefers-reduced-motion:reduce){.cn-r,.cn-d,.cn-t,.cn-pills span{transition:none}.cn-scroll i::after,.cn-scroll svg{animation:none}}