/* Growing — "¿Es Growing para mí?" (configurador de la landing).

   Idea: no es un formulario pegado a la página, es el propio panel de Growing
   haciéndote preguntas. Reutiliza el marco de la demo del principio (misma
   ventana, mismo lateral con secciones) para que se lea como producto.

   Regla dura: NADA se mueve solo. Una pregunta por paso, alto fijo del marco y
   ni una línea de scroll automático. Lo único que cambia es el interior. */

.cfg{max-width:940px;margin:0 auto}

/* ── marco de ventana (hermano de .demoframe de la home) ─────────────────── */
.cfgframe{border-radius:18px;border:1px solid #234438;background:#071410;overflow:hidden;
  box-shadow:0 50px 100px -46px rgba(114,227,173,.26)}
.cfgbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:#0a1a14}
.cfgbar i{width:10px;height:10px;border-radius:50%;background:#22463a}
.cfgbar .lbl{margin-left:6px;font-size:12px;color:var(--mut);font-weight:600}
.cfgbar .cfgpaso{margin-left:auto;font-size:12px;font-weight:700;color:var(--mint);font-variant-numeric:tabular-nums}

/* Alto FIJO mientras se pregunta: los doce pasos miden exactamente lo mismo,
   así el navegador no tiene nada que reajustar (overflow-anchor fuera, que es
   quien mueve la página cuando algo cambia de tamaño). */
.cfgbody{display:grid;grid-template-columns:210px 1fr;overflow-anchor:none}
.cfgbody.preguntando{height:clamp(420px,46vw,468px)}
.cfgframe{overflow-anchor:none}

/* lateral: las cuatro fases, como las secciones del panel */
.cfgside{background:#0f1620;padding:20px 14px;display:flex;flex-direction:column}
.cfg-fases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cfg-fase{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:650;color:#7d9488;
  padding:10px 11px;border-radius:9px;line-height:1.25;transition:color .3s,background .3s}
.cfg-fase .cfg-pt{width:6px;height:6px;border-radius:50%;background:#2c3a49;flex:none;transition:background .3s}
.cfg-fase.hecha{color:#B6CEC2}
.cfg-fase.hecha .cfg-pt{background:var(--mint)}
.cfg-fase.on{background:var(--mint);color:#06231a}
.cfg-fase.on .cfg-pt{background:#06231a}
.cfgline{margin-top:auto;height:3px;border-radius:999px;background:#1c2733;overflow:hidden}
.cfgline i{display:block;height:100%;border-radius:999px;background:var(--mint);
  transform:scaleX(var(--w,0));transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}

.cfgmain{padding:clamp(24px,3.4vw,40px);display:flex;flex-direction:column;overflow:auto}

/* ── una pregunta ───────────────────────────────────────────────────────── */
.cfg-step{display:flex;flex-direction:column;flex:1}
.cfg-kick{margin:0 0 10px;font-size:12.5px;font-weight:700;color:var(--mint)}
.cfg-q{margin:0 0 6px;font-size:clamp(22px,3vw,30px);line-height:1.08;letter-spacing:-.035em;font-weight:850;
  max-width:18ch;text-wrap:balance}
.cfg-hint{margin:8px 0 0;font-size:14px;color:var(--mut)}
.cfg-opts{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(20px,2.6vw,28px)}
.cfg-opt{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:15px;font-weight:650;
  color:#D5E7DD;background:#0c1f18;border:1px solid #22422f;padding:13px 18px 13px 14px;border-radius:12px;
  cursor:pointer;text-align:left;line-height:1.25;
  transition:border-color .2s,background .2s,color .2s,transform .12s ease-out}
.cfg-opt:hover{border-color:#3c6d58;background:#0f2620;color:var(--fg)}
.cfg-opt:active{transform:scale(.985)}
.cfg-opt:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.cfg-mark{width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid #2f5a48;position:relative;
  transition:border-color .2s}
.cfg-mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--mint);
  transform:scale(0);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.cfg-opt[aria-pressed="true"]{background:#123024;border-color:var(--mint);color:#F2FBF6}
.cfg-opt[aria-pressed="true"] .cfg-mark{border-color:var(--mint)}
.cfg-opt[aria-pressed="true"] .cfg-mark::after{transform:scale(1)}

.cfg-nav{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:26px}
.cfg-nav .sp{margin-left:auto}
.cfg-back{background:none;border:none;color:var(--mut);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:8px 0}
.cfg-back:hover{color:var(--fg)}
.cfg-back-hueco{display:block}
.cfg-pista{font-size:13px;color:#5f7a6f}
.cfg-next{font:inherit;font-size:15px;font-weight:800;letter-spacing:-.01em;border:none;cursor:pointer;
  background:var(--mint);color:#06231a;padding:13px 24px;border-radius:11px;
  transition:background .2s,transform .12s ease-out}
.cfg-next:hover{background:#8AEBC0}
.cfg-next:active{transform:scale(.985)}
.cfg-next[disabled]{background:#1a3a2e;color:#5f7a6f;cursor:not-allowed}

/* ── resultado ──────────────────────────────────────────────────────────── */
.cfg-res h3{margin:0 0 10px;font-size:clamp(23px,3.2vw,32px);letter-spacing:-.035em;line-height:1.1;font-weight:850;
  max-width:22ch;text-wrap:balance}
.cfg-res .cfg-sub{color:var(--mut);font-size:16px;margin:0 0 clamp(22px,3vw,30px);line-height:1.5;max-width:52ch}
.cfg-h{margin:0 0 2px;font-size:14px;font-weight:750;letter-spacing:-.01em;color:var(--mint)}

.cfg-blocks{list-style:none;margin:0 0 clamp(24px,3.2vw,32px);padding:0}
.cfg-b{padding:15px 0;border-bottom:1px solid rgba(35,68,56,.8)}
.cfg-b:last-child{border-bottom:none;padding-bottom:0}
.cfg-b b{display:block;margin-bottom:4px;font-size:16px;font-weight:750;letter-spacing:-.015em;color:var(--fg)}
.cfg-b p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.55;max-width:64ch}

.cfg-nota{border:1px solid #24463a;background:#0b1f18;border-radius:14px;padding:18px 20px;margin-bottom:clamp(24px,3.2vw,32px)}
.cfg-nota b{display:block;margin-bottom:5px;font-size:15.5px;letter-spacing:-.015em}
.cfg-nota p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.55}

.cfg-cmp{width:100%;border-collapse:collapse;table-layout:fixed;margin-bottom:clamp(24px,3.2vw,32px);font-size:14.5px}
.cfg-cmp th,.cfg-cmp td{text-align:left;padding:13px 16px;vertical-align:top;line-height:1.5}
.cfg-cmp td:first-child,.cfg-cmp th:first-child{width:27%;padding-left:0;padding-right:20px}
.cfg-cmp thead th{font-size:13px;color:var(--mut);font-weight:700;padding-bottom:8px}
.cfg-cmp thead th:nth-child(2){color:var(--mint);border-radius:10px 10px 0 0}
.cfg-cmp tbody td{border-top:1px solid rgba(35,68,56,.8)}
.cfg-cmp td:first-child{font-weight:700;color:var(--fg)}
.cfg-cmp th:nth-child(2),.cfg-cmp td:nth-child(2){background:#0c2019}
.cfg-cmp tr:last-child td:nth-child(2){border-radius:0 0 10px 10px}
.cfg-cmp .yes{color:#E4F3EA}
.cfg-cmp .no{color:var(--mut)}

.cfg-precio{border-radius:14px;padding:18px 20px;margin-bottom:clamp(24px,3.2vw,32px);
  background:#0c2019;border:1px solid #24463a}
.cfg-precio b{display:block;margin-bottom:5px;font-size:16px;letter-spacing:-.015em;color:var(--mint)}
.cfg-precio span{color:#CBE0D5;font-size:14.5px;line-height:1.55;display:block;max-width:60ch}

.cfg-lead{border-top:1px solid rgba(35,68,56,.8);padding-top:24px}
.cfg-lead p{margin:0 0 14px;color:var(--mut);font-size:14.5px;max-width:56ch}
.cfg-restart{background:none;border:none;color:var(--mut);font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;padding:16px 0 0;text-decoration:underline;text-underline-offset:3px}
.cfg-restart:hover{color:var(--fg)}

/* ── los dos caminos del formulario (lista o demo) ───────────────────────
   Lo pinta lead-form.js cuando el hueco lleva data-lead-demo: aquí y en la
   sección de apuntarse. */
.lf-modo{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.lf-modo button{flex:1 1 220px;font:inherit;font-size:14px;font-weight:650;color:#D5E7DD;background:#0c1f18;
  border:1px solid #22422f;padding:12px 14px;border-radius:12px;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.lf-modo button:hover{border-color:#3c6d58;color:var(--fg)}
.lf-modo button[aria-pressed="true"]{background:#123024;border-color:var(--mint);color:#F2FBF6}
.lf-extra{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.lf-extra[hidden]{display:none}   /* si no, el display:grid gana al atributo */
.lf-extra .lf-enviar{grid-column:1 / -1}
.lf-extra select{grid-column:1 / -1}
.lf-extra input,.lf-extra select{font:inherit;font-size:15px;color:var(--fg);background:#0a1a14;border:1px solid #24463a;
  border-radius:12px;padding:13px 14px;width:100%;appearance:none}
.lf-extra input::placeholder{color:#7d998d}
.lf-extra input:focus,.lf-extra select:focus{outline:none;border-color:var(--mint)}

/* ── móvil ──────────────────────────────────────────────────────────────── */
@media(max-width:820px){
  .cfgbody,.cfgbody.preguntando{grid-template-columns:1fr;height:auto}
  /* El lateral se convierte en una línea de avance: ocupa poco y dice lo mismo. */
  .cfgside{flex-direction:row;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
  .cfg-fases{flex-direction:row;gap:6px;flex:1}
  .cfg-fase{padding:0;border-radius:0;font-size:0;flex:1}
  .cfg-fase .cfg-pt{width:100%;height:3px;border-radius:999px}
  .cfg-fase.on{background:none}
  .cfg-fase.on .cfg-pt{background:var(--mint)}
  .cfgline{display:none}
  .cfgmain{min-height:clamp(430px,86vw,520px)}
  .cfg-opt{width:100%}
  .lf-extra{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cfg-cmp,.cfg-cmp tbody,.cfg-cmp tr,.cfg-cmp td{display:block;width:100%}
  .cfg-cmp thead{display:none}
  .cfg-cmp tr{border-top:1px solid rgba(35,68,56,.8);padding:14px 0}
  .cfg-cmp td{border:none;padding:3px 0}
  .cfg-cmp td:nth-child(2){background:none}
  .cfg-cmp td:first-child{width:auto;padding-right:0;font-size:15px;margin-bottom:8px}
  .cfg-cmp .yes::before{content:"Growing · ";color:var(--mint);font-weight:700}
  .cfg-cmp .no::before{content:"Otras · ";color:#5f7a6f;font-weight:700}
  .cfg-cmp .no{margin-top:6px}
}

/* ── movimiento ─────────────────────────────────────────────────────────
   Solo dentro del marco: el contenido entra, nunca la página. */
@media (prefers-reduced-motion: no-preference){
  .cfg-step,.cfg-res{animation:cfgIn .32s cubic-bezier(.22,1,.36,1) both}
  .cfgmain.saliendo .cfg-step{opacity:.35;transition:opacity .2s}
  .cfg-b{animation:cfgUp .42s cubic-bezier(.22,1,.36,1) both}
  .cfg-b:nth-child(2){animation-delay:.06s}
  .cfg-b:nth-child(3){animation-delay:.12s}
  .cfg-b:nth-child(4){animation-delay:.18s}
}
@keyframes cfgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cfgUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}