/* Clynia — cuestionario multipaso (móvil primero). Prefijo .cq = Clynia Questionnaire */
:root{
  --bg:#f6f4ef; --surface:#fff; --ink:#2c2c2c; --muted:#6f6f68;
  --green:#437066; --green-d:#365a52; --line:#e4e1d8; --soft:#efece4;
  --red:#b3261e; --radius:16px; --maxw:560px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.cq-body{
  background:var(--bg); color:var(--ink);
  font-family:'Raleway',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
.cq{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* Barra superior con progreso */
.cq__bar{position:sticky;top:0;z-index:5;background:var(--bg);
  display:flex;align-items:center;gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px}
.cq__back{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:20px;line-height:1;
  width:40px;height:40px;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none;transition:.15s}
.cq__back:hover{border-color:var(--green);color:var(--green)}
.cq__back:disabled{opacity:.35;cursor:default}
.cq__progress{flex:1;height:6px;background:var(--soft);border-radius:99px;overflow:hidden}
.cq__progress i{display:block;height:100%;width:0;background:var(--green);border-radius:99px;transition:width .35s ease}
.cq__brand{height:20px;width:auto;display:block;flex:none}

/* Escenario */
.cq__stage{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:10px 20px 16px}
.cq__step{animation:cqin .35s ease both}
@keyframes cqin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cq__eyebrow{color:var(--green);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.07em;margin:6px 0 8px}
.cq__q{font-family:'Lora',Georgia,serif;font-weight:600;font-size:25px;line-height:1.25;margin:0 0 8px;letter-spacing:-.2px}
.cq__help{color:var(--muted);margin:0 0 18px;font-size:15px}
.cq__field{display:flex;flex-direction:column;gap:10px;margin-top:4px}

/* Inputs */
.cq__input{width:100%;font:inherit;font-size:17px;padding:15px 16px;border:1.5px solid var(--line);
  border-radius:14px;background:var(--surface);color:var(--ink);-webkit-appearance:none}
.cq__input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(67,112,102,.12)}
textarea.cq__input{min-height:120px;resize:vertical}
.cq__suffix{display:flex;align-items:center;gap:10px}
.cq__suffix span{color:var(--muted);font-size:15px}

/* Opciones (single / multi / yesno) */
.cq__opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-size:16px;
  padding:15px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);
  cursor:pointer;transition:border-color .15s,background .15s}
.cq__opt:hover{border-color:#cfcabd}
.cq__opt.is-sel{border-color:var(--green);background:#eef3f1}
.cq__opt .tick{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:.15s}
.cq__opt.multi .tick{border-radius:6px}
.cq__opt.is-sel .tick{border-color:var(--green);background:var(--green)}
.cq__opt.is-sel .tick::after{content:"";width:8px;height:8px;border-radius:inherit;background:#fff}

/* Consentimientos */
.cq__consent{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--line);
  border-radius:14px;background:var(--surface);font-size:14px;color:var(--ink);cursor:pointer}
.cq__consent input{margin:2px 0 0;width:20px;height:20px;flex:none;accent-color:var(--green)}
.cq__consent a{color:var(--green)}

/* Subida de fichero */
.cq__file{display:flex;flex-direction:column;gap:8px}
.cq__file label{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;border:1.5px dashed var(--line);
  border-radius:14px;background:var(--surface);color:var(--green);font-weight:600;cursor:pointer}
.cq__file input{position:absolute;width:1px;height:1px;opacity:0}
.cq__file .name{font-size:14px;color:var(--muted)}

/* Planes */
.cq__plans{display:flex;flex-direction:column;gap:12px}
.cq__plan{position:relative;text-align:left;width:100%;font:inherit;cursor:pointer;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--radius);padding:18px;transition:border-color .15s,background .15s}
.cq__plan.is-sel{border-color:var(--green);background:#eef3f1}
.cq__plan.feat{border-color:var(--green)}
.cq__plan .tag{position:absolute;top:-10px;left:18px;background:var(--green);color:#fff;font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:99px;letter-spacing:.02em}
.cq__plan .name{font-family:'Lora',serif;font-size:19px;font-weight:600}
.cq__plan .price{font-size:26px;font-weight:700;margin:4px 0 2px}
.cq__plan .price small{font-size:14px;font-weight:600;color:var(--muted)}
.cq__plan .meta{color:var(--muted);font-size:13px}
.cq__plan .desc{font-size:14px;color:var(--ink);margin-top:8px}

/* Pantalla de ritmo / IMC (visual comercial) */
.cq__viz{display:flex;flex-direction:column;gap:14px;margin:4px 0 20px}
.cq__card{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:18px}
.cq__imc-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.cq__imc-top{display:flex;align-items:center;justify-content:space-between}
.cq__badge{font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:99px}
.cq__imc-num{font-family:'Lora',serif;font-size:42px;font-weight:600;color:var(--green);line-height:1.05;margin:8px 0 2px}
.cq__gauge{position:relative;height:10px;border-radius:99px;margin:14px 0 7px;background:linear-gradient(90deg,#9cc9b6 0%,#e9d27a 45%,#e0a35e 70%,#d98080 100%)}
.cq__gauge i{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--ink);transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.cq__gauge-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.cq__proj{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cq__proj .from,.cq__proj .to{text-align:center}
.cq__proj .kg{font-family:'Lora',serif;font-size:24px;font-weight:600;margin-top:2px}
.cq__proj .kg small{font-size:13px;font-weight:600;color:var(--muted)}
.cq__proj-arrow{flex:1;text-align:center;position:relative}
.cq__proj-arrow span{display:inline-block;font-size:13px;font-weight:600;color:var(--green);background:#eef3f1;padding:3px 11px;border-radius:99px;position:relative;z-index:1}
.cq__proj-arrow::before{content:"";position:absolute;left:4%;right:4%;top:50%;height:2px;background:var(--line);z-index:0}
.cq__weeks{color:var(--muted);font-size:13.5px;text-align:center;line-height:1.55;margin:2px 4px 0}
.cq__weeks strong{color:var(--ink)}
.cq__ratehead{font-weight:600;font-size:16px;margin:14px 0 2px;text-align:center}

/* Pie / botón continuar */
.cq__foot{position:sticky;bottom:0;z-index:5;
  background:linear-gradient(to top,var(--bg) 72%,rgba(246,244,239,0));
  padding:10px 20px calc(16px + env(safe-area-inset-bottom))}
.cq__foot .in{max-width:var(--maxw);margin:0 auto}
.cq__next{width:100%;font:inherit;font-weight:600;font-size:17px;padding:16px;border:0;border-radius:14px;
  background:var(--green);color:#fff;cursor:pointer;transition:background .15s,opacity .15s}
.cq__next:hover{background:var(--green-d)}
.cq__next:disabled{opacity:.4;cursor:not-allowed}
.cq__err{color:var(--red);font-size:14px;margin-top:6px}
.cq__backlow{display:block;width:100%;margin-top:10px;background:transparent;border:0;color:var(--muted);font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:10px;border-radius:10px}
.cq__backlow:hover{color:var(--green)}

/* Statement / endings */
.cq__center{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;
  max-width:var(--maxw);margin:0 auto;padding:24px 24px calc(24px + env(safe-area-inset-bottom))}
.cq__center .ico{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:#eef3f1;color:var(--green)}
.cq__center.stop .ico{background:#fbeae8;color:var(--red)}
.cq__center h1{font-family:'Lora',serif;font-weight:600;font-size:27px;line-height:1.25;margin:0 0 12px}
.cq__center p{color:var(--muted);font-size:16px;margin:0 0 14px}
.cq__center .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;
  padding:15px 22px;border-radius:14px;background:var(--green);color:#fff;font-weight:600;text-decoration:none}
.cq__center button.btn{border:0;cursor:pointer;font-family:inherit;font-size:16px}
.cq__endlink{display:inline-block;margin-top:14px;color:var(--muted);font-size:14px;text-decoration:underline;background:none;border:0;cursor:pointer}
.cq__loading{display:flex;gap:8px;justify-content:center;align-items:center;color:var(--muted);font-size:15px}
.cq__spin{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:cqspin .7s linear infinite}
@keyframes cqspin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .cq__step{animation:none}.cq__progress i{transition:none}.cq__spin{animation-duration:2s}
}
@media(min-width:600px){ .cq__q{font-size:28px} }