/* =========================================================
   Collie Suite — Registro (landing de registro/diagnóstico)
   Requiere base.css cargado antes de este archivo.
========================================================= */
:root{
  --shadow:0 24px 65px -20px rgba(17,32,27,0.28);
}
body{min-height:100vh;}
em.accent{font-family:'Fraunces',serif;font-style:italic;font-weight:400;color:var(--clay);}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.01em;}

/* ---- ambient thread background ---- */
.bg-thread{position:fixed; inset:0; z-index:0; pointer-events:none;}
.bg-thread svg{width:100%; height:100%;}
.thread-path{fill:none; stroke:var(--pine); stroke-width:1.4; opacity:.28; stroke-dasharray:6 8; animation:flow 34s linear infinite;}
.thread-path.b{stroke:var(--clay); opacity:.18; stroke-width:1.2; animation-duration:46s; animation-direction:reverse;}
@keyframes flow{to{stroke-dashoffset:-600;}}
.thread-node{fill:var(--clay); opacity:.45; animation:nodepulse 3.2s ease-in-out infinite;}
@keyframes nodepulse{0%,100%{opacity:.3;r:3;}50%{opacity:.75;r:4.5;}}

/* ---- mini header ---- */
.mini-nav{position:relative; z-index:2; padding:26px 32px;}
.wordmark{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; display:inline-flex; align-items:center; gap:8px;}
.wordmark img{height:32px;width:auto;display:block;}

.form-footer-nav{position:relative; z-index:2; text-align:center; padding:0 20px 40px;}

/* ---- stage ---- */
.form-stage-wrap{position:relative; z-index:1; min-height:calc(100vh - 90px); display:flex; align-items:center; justify-content:center; padding:20px 20px 70px;}
.form-card{
  width:100%; max-width:720px; background:var(--white); border-radius:28px;
  box-shadow:var(--shadow); border:1px solid var(--line-soft);
  padding:52px 52px 46px; position:relative; overflow:hidden;
  transition:max-width .6s var(--ease);
}
.form-card.wide{max-width:1080px;}
.form-card::before{
  content:''; position:absolute; top:-70px; right:-70px; width:260px; height:260px;
  background:radial-gradient(circle, rgba(31,110,82,0.07), transparent 70%); pointer-events:none;
}
.form-progress{height:4px; background:var(--mist); border-radius:100px; margin-bottom:38px; overflow:hidden; position:relative; z-index:1;}
.form-progress-fill{height:100%; background:var(--pine); border-radius:100px; transition:width .5s var(--ease); width:0%;}
.form-progress.hide{opacity:0; height:0; margin-bottom:0; transition:opacity .3s ease, height .3s ease, margin .3s ease;}

.form-track{position:relative; min-height:340px; z-index:1;}
.form-panel{
  position:absolute; inset:0; opacity:0; transform:translateY(18px) scale(.98);
  transition:opacity .45s var(--ease), transform .45s var(--ease); pointer-events:none;
}
.form-panel.active{opacity:1; transform:translateY(0) scale(1); pointer-events:auto; position:relative;}
.form-panel.leaving{opacity:0; transform:translateY(-14px) scale(.98); position:absolute;}

/* typing dots (shown briefly before each question) */
.form-typing{display:flex; align-items:center; gap:7px; height:56px;}
.form-typing span{width:10px;height:10px;border-radius:50%; background:var(--pine); opacity:.45; animation:typingdot 1.1s ease-in-out infinite;}
.form-typing span:nth-child(2){animation-delay:.15s;}
.form-typing span:nth-child(3){animation-delay:.3s;}
@keyframes typingdot{0%,60%,100%{transform:translateY(0);opacity:.35;}30%{transform:translateY(-6px);opacity:1;}}

.form-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pine); font-weight:600; display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.form-eyebrow::before{content:''; width:6px;height:6px;border-radius:50%; background:var(--clay);}
.form-eyebrow.show{opacity:1; transform:translateY(0);}

.form-question{
  font-size:clamp(23px,3.2vw,32px); line-height:1.28; margin-bottom:10px;
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.form-question.show{opacity:1; transform:translateY(0);}

.form-sub{
  color:var(--ink-soft); font-size:15px; margin-bottom:30px;
  opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease) .1s, transform .45s var(--ease) .1s;
}
.form-sub.show{opacity:1; transform:translateY(0);}

.form-answer{position:relative; opacity:0; transform:translateY(12px); transition:opacity .45s var(--ease) .18s, transform .45s var(--ease) .18s;}
.form-answer.show{opacity:1; transform:translateY(0);}

/* text input */
.form-input{
  width:100%; border:1.5px solid var(--line); border-radius:14px; padding:16px 18px;
  font-size:16px; font-family:'Inter'; background:var(--paper-dim); color:var(--ink);
  transition:border-color .2s ease, background .2s ease;
}
.form-input:focus{outline:none; border-color:var(--pine); background:#fff;}
.form-input::placeholder{color:var(--ink-soft); opacity:.7;}

/* option grids */
.opt-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.opt-card{
  border:1.5px solid var(--line); border-radius:16px; padding:18px 16px;
  display:flex; align-items:center; gap:12px; cursor:pointer;
  transition:border-color .22s ease, background .22s ease, transform .18s ease, box-shadow .22s ease;
}
.opt-card:hover{border-color:var(--pine-light); transform:translateY(-2px); box-shadow:0 10px 22px -14px rgba(17,32,27,.25);}
.opt-card.selected{border-color:var(--pine); background:rgba(31,110,82,.06);}
.opt-icon{width:38px;height:38px;border-radius:11px; background:var(--paper-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .22s ease;}
.opt-card:hover .opt-icon, .opt-card.selected .opt-icon{background:var(--pine);}
.opt-icon svg{width:18px;height:18px; stroke:var(--ink-soft); transition:stroke .22s ease;}
.opt-card:hover .opt-icon svg, .opt-card.selected .opt-icon svg{stroke:#fff;}
.opt-label{font-size:14.5px; font-weight:600;}
.opt-check{
  margin-left:auto; width:20px;height:20px;border-radius:50%; background:var(--pine);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  opacity:0; transform:scale(.5); transition:opacity .22s ease, transform .22s var(--ease);
}
.opt-card.selected .opt-check{opacity:1; transform:scale(1);}
.opt-check svg{width:11px;height:11px; stroke:#fff; stroke-width:3;}

.form-next{
  font-family:'Space Grotesk'; font-weight:600; font-size:15.5px;
  background:var(--ink); color:var(--paper); padding:15px 28px; border-radius:100px;
  display:inline-flex; align-items:center; gap:9px; margin-top:26px;
  transition:background .22s ease, transform .2s ease, opacity .2s ease;
}
.form-next:hover{background:var(--pine-deep); transform:translateY(-2px);}
.form-next:disabled{opacity:.4; pointer-events:none;}
.form-next svg{width:14px;height:14px;}
.form-back{
  font-size:13.5px; color:var(--ink-soft); font-weight:500; display:inline-flex; align-items:center; gap:5px;
  margin-bottom:18px; opacity:0; transition:opacity .2s ease, color .2s ease;
}
.form-back.show{opacity:1;}
.form-back:hover{color:var(--pine);}
.form-back svg{width:13px;height:13px;}

/* hero */
.form-hero{text-align:left;}
.form-hero h1{font-size:clamp(26px,4vw,38px); line-height:1.22; margin-bottom:20px; max-width:74%;}
.form-hero-image{
  position:absolute; right:-14px; bottom:-14px; width:200px; height:auto;
  pointer-events:none; user-select:none;
}
.form-slide-image{
  display:block; margin:14px -4px 0 auto; width:130px; height:auto;
  pointer-events:none; user-select:none;
}
.btn-primary{
  font-family:'Space Grotesk'; font-weight:600; font-size:16px; background:var(--ink); color:var(--paper);
  padding:16px 30px; border-radius:100px; display:inline-flex; align-items:center; gap:10px;
  transition:transform .25s var(--ease), background .25s ease, box-shadow .25s ease;
  box-shadow:0 10px 30px -10px rgba(17,32,27,.4);
}
.btn-primary:hover{background:var(--pine-deep); transform:translateY(-2px);}
.btn-primary svg{width:16px;height:16px; transition:transform .25s ease;}
.btn-primary:hover svg{transform:translateX(3px);}

/* loading */
.form-loading{display:flex; flex-direction:column; align-items:center; text-align:center; padding:34px 0 10px; gap:26px;}
.load-spin{width:64px;height:64px;border-radius:50%; border:3px solid var(--mist); border-top-color:var(--pine); animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.load-status{font-size:15px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; min-height:22px;}

/* evaluation */
.eval-title{font-size:clamp(21px,2.6vw,27px); line-height:1.34; margin-bottom:12px;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.eval-title.show{opacity:1; transform:translateY(0);}
.eval-context{font-size:15px; color:var(--ink-soft); margin-bottom:18px;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.eval-context.show{opacity:1; transform:translateY(0);}

/* mismo patrón de tarjeta que "El problema real" (stat-stack) del sitio
   principal, adaptado al ancho del formulario. */
.stat-stack{display:flex; flex-direction:column; background:var(--paper-dim); border-radius:16px; margin-bottom:20px;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.stat-stack.show{opacity:1; transform:translateY(0);}
.stat-row{display:flex; align-items:baseline; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line);}
.stat-row:last-child{border-bottom:none;}
.stat-num{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:28px; color:var(--pine-deep); min-width:74px; flex-shrink:0;}
.stat-unit{font-size:15px; font-weight:500;}
.stat-label{font-size:13.5px; color:var(--ink-soft); line-height:1.4;}

.eval-closing{font-size:15.5px; line-height:1.6; color:var(--ink); font-weight:600;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.eval-closing.show{opacity:1; transform:translateY(0);}

.eval-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; align-items:center;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.eval-actions.show{opacity:1; transform:translateY(0);}

@media(max-width:600px){
  .stat-row{padding:15px 16px; gap:12px;}
  .stat-num{font-size:24px; min-width:60px;}
}
.btn-ghost{font-size:14px; color:var(--ink-soft); font-weight:500; text-decoration:underline; text-underline-offset:3px;}
.btn-ghost:hover{color:var(--ink);}

/* plans */
.plans-grid{
  display:flex; gap:16px; overflow-x:auto; padding:6px 4px 14px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.plans-grid::-webkit-scrollbar{height:6px;}
.plans-grid::-webkit-scrollbar-thumb{background:var(--mist); border-radius:100px;}
.plan-card{flex:0 0 200px; scroll-snap-align:start; cursor:pointer;}

/* price cards -- mismo diseño que la sección de precios de index.html/precios.html */
.price-card{
  background:var(--white); border:1.5px solid var(--line-soft); border-radius:20px;
  padding:24px 20px; display:flex; flex-direction:column; position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease, background .25s ease;
}
.price-card:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.price-card.featured{border-color:var(--pine); background:linear-gradient(180deg,rgba(31,110,82,0.06),transparent 40%);}
.price-card.selected{border-color:var(--pine); background:rgba(31,110,82,.06);}
.price-badge{
  position:absolute; top:-12px; left:20px; background:var(--clay); color:#fff;
  font-size:11px; font-weight:600; padding:5px 13px; border-radius:100px; font-family:'Onest'; white-space:nowrap;
}
.price-card-image{
  position:absolute; top:16px; right:16px; width:50px; height:auto;
  pointer-events:none; user-select:none;
}
.price-name{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pine); font-weight:600; margin-bottom:12px;}
.price-original{display:block; font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--ink-soft); font-weight:500; text-decoration:line-through; text-decoration-color:var(--clay); margin-bottom:2px;}
.price-amount{font-family:'Onest'; font-weight:700; font-size:26px; color:var(--ink); margin-bottom:2px; display:flex; align-items:baseline; gap:7px;}
.price-amount span{font-family:'Inter'; font-weight:500; font-size:13px; color:var(--ink-soft);}
.price-desc{font-size:12.5px; color:var(--ink-soft); margin-bottom:18px; line-height:1.5;}
.price-list{list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:20px; flex:1;}
.price-list li{font-size:12.5px; display:flex; align-items:flex-start; gap:8px; color:var(--ink-soft); line-height:1.35;}
.price-list li svg{width:13px;height:13px; stroke:var(--pine); flex-shrink:0; margin-top:2px;}
.price-cta{
  font-family:'Onest'; font-weight:600; font-size:13.5px; text-align:center;
  background:var(--paper-dim); color:var(--ink); padding:12px 18px; border-radius:100px; cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.price-card.featured .price-cta, .price-card.selected .price-cta{background:var(--pine); color:#fff;}
.price-cta:hover{background:var(--ink); color:#fff; transform:translateY(-1px);}

/* account creation: plan-pick step reuses the same price-card design, enlarged and centered */
.plans-scroll-wrap{position:relative;}
/* Centered via calculated side padding rather than justify-content:center --
   centering a scrollable flex row with justify-content leaves the first
   card unreachable once it overflows (scrollLeft can't go negative). This
   padding shrinks to ~0 once the row no longer fits, so scrolling always
   starts cleanly at the first card. 816px = 3 cards (260px) + 2 gaps (18px). */
.opt-grid.cols-3{
  display:flex; justify-content:flex-start; gap:18px; overflow-x:auto;
  padding:4px max(4px, calc((100% - 816px) / 2)) 10px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.opt-grid.cols-3 .plan-card{flex:0 0 260px;}
.opt-grid.cols-3 .price-card{padding:30px 26px;}
.opt-grid.cols-3 .price-card-image{width:64px; top:20px; right:20px;}
.opt-grid.cols-3 .price-name{font-size:12.5px;}
.opt-grid.cols-3 .price-amount{font-size:32px;}
.opt-grid.cols-3 .price-amount span{font-size:14px;}
.opt-grid.cols-3 .price-original{font-size:16px;}
.opt-grid.cols-3 .price-desc{font-size:13.5px; margin-bottom:22px;}
.opt-grid.cols-3 .price-list{gap:11px; margin-bottom:24px;}
.opt-grid.cols-3 .price-list li{font-size:13.5px; gap:9px;}
.opt-grid.cols-3 .price-list li svg{width:14px;height:14px;}
.opt-grid.cols-3 .price-cta{font-size:14.5px; padding:14px;}

/* hint arrow: shows only while the plan row actually overflows and hasn't been scrolled to the end */
.plans-scroll-hint{
  position:absolute; top:50%; right:-4px; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  background:var(--white); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -8px rgba(17,32,27,.35);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.plans-scroll-hint.show{opacity:1; animation:hintBob 1.6s ease-in-out infinite;}
.plans-scroll-hint svg{width:15px;height:15px; stroke:var(--pine);}
@keyframes hintBob{0%,100%{transform:translateY(-50%) translateX(0);}50%{transform:translateY(-50%) translateX(5px);}}
.form-error{font-size:12.5px; color:var(--clay); display:none;}

/* demo scheduling calendar */
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.cal-nav-btn{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:var(--white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.cal-nav-btn:hover{border-color:var(--pine);}
.cal-nav-btn:disabled{opacity:.3; pointer-events:none;}
.cal-nav-btn svg{width:14px;height:14px; stroke:var(--ink);}
.cal-week-label{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft);}

.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-bottom:22px;}
.cal-day{
  border:1.5px solid var(--line); border-radius:14px; padding:12px 2px 10px;
  display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .18s ease;
}
.cal-day:hover{border-color:var(--pine-light); transform:translateY(-2px);}
.cal-day.selected{border-color:var(--pine); background:rgba(31,110,82,.06);}
.cal-day.selected .cal-day-num{color:var(--pine);}
.cal-day.disabled{opacity:.32; cursor:default; pointer-events:none;}
.cal-day-name{font-size:10px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}
.cal-day-num{font-size:17px; font-weight:700; color:var(--ink); font-family:'Space Grotesk'; line-height:1;}
.cal-day.today .cal-day-num::after{content:''; display:block; width:4px; height:4px; border-radius:50%; background:var(--clay); margin:4px auto 0;}

.cal-slots-label{font-size:13px; color:var(--ink-soft); margin-bottom:12px;}
.cal-slots-label strong{color:var(--ink);}
.slot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:8px;}
.slot-card{
  border:1.5px solid var(--line); border-radius:14px; padding:14px 8px; text-align:center; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .18s ease;
}
.slot-card:hover{border-color:var(--pine-light); transform:translateY(-2px);}
.slot-card.selected{border-color:var(--pine); background:rgba(31,110,82,.06);}
.slot-period{font-size:11px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px;}
.slot-range{font-size:13px; font-weight:600; color:var(--ink); font-family:'IBM Plex Mono',monospace;}
.slot-card.selected .slot-period{color:var(--pine);}

/* stripe checkout mockup */
.stripe-mock{display:flex; flex-direction:column; gap:18px;}
.stripe-head{display:flex; align-items:center; justify-content:space-between;}
.stripe-logo{font-family:'Space Grotesk'; font-weight:700; font-size:20px; color:#635BFF; letter-spacing:-0.02em;}
.stripe-secure{font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:5px;}
.stripe-summary{background:var(--paper-dim); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px;}
.stripe-row{display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-soft); gap:12px;}
.stripe-row span:last-child{color:var(--ink); font-weight:600; text-align:right;}
.stripe-row.highlight span{color:var(--pine-deep); font-weight:700;}
.stripe-form{display:flex; flex-direction:column; gap:7px;}
.stripe-form label{font-size:11px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-top:8px;}
.stripe-fake-input{border:1.5px solid var(--line); border-radius:12px; padding:13px 16px; font-size:13.5px; color:var(--ink-soft); background:var(--paper-dim); font-family:'IBM Plex Mono',monospace;}
.stripe-footnote{font-size:12px; color:var(--ink-soft); text-align:center;}

/* final / decline */
.form-done{display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 0 6px; gap:16px;}
.form-done-icon{width:66px;height:66px;border-radius:50%; background:var(--pine); display:flex; align-items:center; justify-content:center; animation:doneIn .5s var(--ease);}
.form-done-icon svg{width:28px;height:28px; stroke:#fff;}
.form-winback-image, .form-decline-image{width:130px; height:auto; animation:doneIn .5s var(--ease);}
@keyframes doneIn{0%{transform:scale(.6); opacity:0;}100%{transform:scale(1); opacity:1;}}
.form-done h2{font-size:24px;}
.form-done p{color:var(--ink-soft); font-size:15px; max-width:440px;}

@media(max-width:600px){
  .mini-nav{padding:14px 20px;}
  .wordmark img{height:24px;}
  .form-card{padding:18px 18px 10px; border-radius:22px;}
  .form-hero h1{max-width:100%;}
  .form-hero-image{position:static; display:block; width:130px; margin:16px auto 0;}
  .form-slide-image{position:static; display:block; width:150px; margin:16px auto 0;}
  .opt-grid{grid-template-columns:1fr;}
  .form-stage-wrap{padding:4px 14px 4px;}
  .form-back{margin-bottom:8px;}
  .form-question{margin-bottom:6px;}
  .form-sub{margin-bottom:14px;}
  .plan-card{flex:0 0 66vw;}
  .opt-grid.cols-3{gap:14px; padding-left:4px; padding-right:4px;}
  .opt-grid.cols-3 .plan-card{flex:0 0 88vw;}
  .opt-grid.cols-3 .price-card{padding:30px 24px;}
  .opt-grid.cols-3 .price-name{font-size:13px;}
  .opt-grid.cols-3 .price-amount{font-size:34px;}
  .opt-grid.cols-3 .price-amount span{font-size:14px;}
  .opt-grid.cols-3 .price-original{font-size:17px;}
  .opt-grid.cols-3 .price-desc{font-size:14px; margin-bottom:22px;}
  .opt-grid.cols-3 .price-list{gap:12px; margin-bottom:24px;}
  .opt-grid.cols-3 .price-list li{font-size:14px; gap:9px;}
  .opt-grid.cols-3 .price-list li svg{width:15px;height:15px;}
  .opt-grid.cols-3 .price-cta{padding:15px; font-size:15px;}
  .plans-scroll-hint{width:30px; height:30px; right:0;}
  .cal-grid{gap:4px; margin-bottom:18px;}
  .cal-day{padding:9px 1px 8px; border-radius:11px; gap:3px;}
  .cal-day-name{font-size:8.5px;}
  .cal-day-num{font-size:14px;}
  .cal-week-label{font-size:11px;}
  .cal-nav-btn{width:30px; height:30px;}
  .slot-grid{gap:6px;}
  .slot-card{padding:11px 4px; border-radius:11px;}
  .slot-period{font-size:9.5px;}
  .slot-range{font-size:10.5px;}
}