/* ============================================================
   candela pilates studio — waitlist
   ============================================================ */

/* ---------- fonts (self-hosted, no CDN) ---------- */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/fonts/cormorant-garamond-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('/fonts/jost-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('/fonts/jost-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --bg:#F3EEE4;
  --surface:#ECE6D9;
  --card:#FBF8F2;
  --ink:#382C22;
  --ink-2:#5A4A3C;
  --muted:#8A7A6A;
  --line:#DCD3C3;
  --flame:#B96A44;
  --success:#4A6B4F;

  --serif:'Cormorant Garamond','Cormorant',Garamond,Georgia,'Times New Roman',serif;
  --sans:'Jost','Century Gothic','Futura',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --dur:300ms;
  --ease:cubic-bezier(.22,1,.36,1);

  --pad-x:24px;
  --pad-b:18px;
  --radius:15px;
  --chrome-h:52px;
  --btn-h:54px;
  --opt-h:clamp(56px,7.7vh,68px);
  --opt-gap:clamp(10px,1.5vh,13px);
  --opt-fs:16px;

  --fs-h1:clamp(29px,8.7vw,38px);
  --fs-q:clamp(26px,7.6vw,33px);
  --fs-body:15px;
  --lead-w:33ch;

  --app-h:100dvh;
  --vv-top:0px;
}

/* short viewports: tighten the rhythm so nothing ever scrolls */
@media (max-height:760px){
  :root{ --opt-h:53px; --pad-b:16px; }
}
@media (max-height:680px){
  :root{
    --opt-h:49px; --opt-gap:8px; --chrome-h:46px; --btn-h:51px;
    --pad-x:20px; --pad-b:14px; --fs-body:14px;
    --fs-h1:clamp(26px,7.7vw,32px); --fs-q:clamp(23px,6.9vw,29px);
  }
}
@media (max-height:590px){
  :root{
    --opt-h:45px; --opt-gap:6px; --opt-fs:15px; --btn-h:48px; --radius:13px;
    --fs-h1:clamp(24px,7.2vw,29px); --fs-q:clamp(21px,6.4vw,26px);
  }
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html.flow, html.flow body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.55;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}
h1,h2,p{ margin:0; }
button{ font:inherit; color:inherit; }
img{ display:block; max-width:100%; }
a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:.5px; }
[hidden]{ display:none !important; }
::selection{ background:rgba(185,106,68,.18); }

:focus-visible{
  outline:2px solid var(--flame);
  outline-offset:3px;
}

/* ---------- paper grain ---------- */
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------- app shell ---------- */
.app{
  position:fixed;
  left:0; right:0;
  top:var(--vv-top);
  height:var(--app-h);
  z-index:1;
  display:flex;
  flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow:hidden;
}

/* ---------- chrome: top bar + progress ---------- */
.chrome{
  flex:0 0 auto;
  overflow:hidden;
  height:calc(var(--chrome-h) + 2px);
  opacity:1;
  transition:height var(--dur) var(--ease), opacity 180ms linear;
}
body[data-chrome="off"] .chrome{ height:0; opacity:0; }

.chrome-row{
  height:var(--chrome-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8px;
}
.chrome-title{
  font-family:var(--serif);
  font-size:19px; font-weight:500; letter-spacing:.055em;
  color:var(--ink);
  line-height:1;
  padding-top:2px;
}
.iconbtn{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer;
  border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.iconbtn svg{ width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.iconbtn:active{ transform:scale(.94); }
.iconbtn--ghost{ pointer-events:none; }

.progress{
  height:2px; width:100%;
  background:var(--line);
}
.progress-fill{
  display:block; height:100%; width:0;
  background:var(--ink);
  transition:width var(--dur) var(--ease);
}

/* ---------- stage & screens ---------- */
.stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
}
.screen{
  position:absolute; inset:0;
  display:flex;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,0,0);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.screen.is-active,
.screen.is-pre-right,.screen.is-pre-left,
.screen.is-exit-left,.screen.is-exit-right{ visibility:visible; }

.screen.is-pre-right{ transform:translate3d(34px,0,0); opacity:0; transition:none; }
.screen.is-pre-left { transform:translate3d(-34px,0,0); opacity:0; transition:none; }
.screen.is-active{
  opacity:1; transform:none; pointer-events:auto; z-index:2;
  transition:opacity 230ms var(--ease) 50ms, transform var(--dur) var(--ease);
}
/* the outgoing screen clears out faster than the new one arrives, so the two
   never sit on top of each other as readable text */
.screen.is-exit-left,.screen.is-exit-right{
  opacity:0; z-index:1;
  transition:opacity 150ms linear, transform var(--dur) var(--ease);
}
.screen.is-exit-left { transform:translate3d(-34px,0,0); }
.screen.is-exit-right{ transform:translate3d(34px,0,0); }

.screen-in{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:clamp(6px,1.6vh,18px) var(--pad-x) var(--pad-b);
}

/* head / body / foot rhythm */
.q-head{
  flex:0 0 auto;
  text-align:center;
  padding:clamp(4px,1.4vh,14px) 0 clamp(10px,2vh,18px);
}
.q-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  scrollbar-width:none;
}
.q-body::-webkit-scrollbar{ width:0; height:0; }
/* flex spacers: question screens sit just under the title, the slack goes
   below; intro & thanks centre their composition instead. Basis 0 means the
   spacers collapse (never clip) as soon as the content needs the room. */
.q-body::before{ content:''; flex:.85 1 clamp(4px,2.6vh,22px); }
.q-body::after{ content:''; flex:1.4 1 0; min-height:0; }
.stack{
  flex:0 0 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--opt-gap);
}
.q-foot{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:clamp(14px,2.2vh,20px);
}
.q-foot:empty{ padding:0; }

/* ---------- typography ---------- */
.q-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:var(--fs-q);
  line-height:1.13;
  letter-spacing:.004em;
  color:var(--ink);
  text-wrap:balance;
}
.q-sub{
  margin-top:8px;
  font-size:calc(var(--fs-body) - .5px);
  color:var(--muted);
  line-height:1.45;
  max-width:30ch;
  margin-inline:auto;
}
.q-lead{
  font-size:var(--fs-body);
  color:var(--ink-2);
  line-height:1.6;
  max-width:var(--lead-w);
  margin-inline:auto;
}
.microcopy{
  font-size:clamp(11.8px,3.7vw,12.5px);
  text-wrap:balance;
  color:var(--muted);
  text-align:center;
  line-height:1.4;
  letter-spacing:.01em;
}
.hint{
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
  letter-spacing:.02em;
  line-height:1.4;
}
.consent{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  line-height:1.45;
  text-wrap:pretty;
  max-width:34ch;
  margin-inline:auto;
}
.consent a{ color:var(--muted); }

/* ---------- intro ---------- */
.screen-in--intro .q-body::before{ flex:1 1 0; }
.screen-in--intro .q-body::after{ flex:1.12 1 0; }
.stack--intro{
  align-items:center;
  text-align:center;
  gap:clamp(13px,3vh,28px);
}
.lockup{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(10px,2vh,18px);
  margin-bottom:clamp(2px,1vh,8px);
}
.brand-mark{
  width:clamp(46px,7.4vh,64px); height:auto;
}
.brand-word{
  width:min(252px,68vw); height:auto;
}
.brand-word.is-missing{ display:none; }
.brand-mark.is-missing{ display:none; }
.brand-word-fb{ display:none; }
.brand-word.is-missing ~ .brand-word-fb{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.brand-word-fb em{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:clamp(38px,11vw,48px); line-height:1; letter-spacing:.07em;
  padding-left:.07em;
}
.brand-word-fb small{
  font-size:clamp(9px,2.6vw,11px); text-transform:uppercase;
  letter-spacing:.36em; color:var(--ink-2); padding-left:.36em;
}
.screen-in--intro .q-title{ font-size:var(--fs-h1); }
.screen-in--intro .q-lead{ max-width:31ch; }

/* gift chip */
.chip{
  display:flex; align-items:flex-start; gap:11px;
  text-align:left;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 15px;
  margin-top:clamp(0px,.6vh,6px);
  box-shadow:0 1px 2px rgba(56,44,34,.03);
}
.chip p{
  font-size:calc(var(--fs-body) - 1px);
  line-height:1.5;
  color:var(--ink-2);
}
.chip strong{ font-weight:500; color:var(--ink); }
.flame{
  flex:0 0 auto;
  width:20px; height:25px;
  margin-top:0;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B96A44' d='M12 1.6c3.4 4.9 5.4 7.4 5.4 11 0 3.6-2.4 6.4-5.4 6.4s-5.4-2.8-5.4-6.4c0-2.5 1.2-4.4 2.6-6.3.1 1.9.7 3.2 1.7 3.9-.7-3.6.2-6.5 1.1-8.6z'/%3E%3C/svg%3E");
}
body.has-flame .flame{
  background-image:none;
  background-color:var(--flame);
  -webkit-mask:url('/assets/flame.svg') no-repeat center/contain;
  mask:url('/assets/flame.svg') no-repeat center/contain;
}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  min-height:var(--btn-h);
  padding:0 20px;
  border:1px solid var(--ink);
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  font-family:var(--sans);
  font-weight:500;
  font-size:16px;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  transition:transform 140ms var(--ease), opacity 180ms linear, background-color 180ms linear;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.98); }
.btn--primary:disabled{
  opacity:.34;
  cursor:default;
}
.btn--primary:disabled:active{ transform:none; }
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:#CCC1AE;
}
.btn.is-sending{ pointer-events:none; }
.spinner{
  display:none;
  width:15px; height:15px;
  border:1.6px solid rgba(243,238,228,.35);
  border-top-color:var(--bg);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.btn.is-sending .spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- fields ---------- */
.field{
  display:flex; align-items:stretch;
  width:100%;
  min-height:calc(var(--opt-h) + 4px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color 180ms linear, box-shadow 180ms linear;
}
.field:focus-within{
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(56,44,34,.07);
}
.field.has-error{ border-color:var(--flame); }
.field input{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  border:0; background:none; outline:none;
  padding:0 16px;
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--ink);
  border-radius:inherit;
}
.field input::placeholder{ color:#B3A695; }
.field--tel .tel-prefix{
  display:flex; align-items:center;
  padding:0 0 0 16px;
  font-size:17px;
  color:var(--ink-2);
  letter-spacing:.02em;
}
.field--tel .tel-prefix::after{
  content:'';
  margin-left:13px;
  width:1px; height:21px;
  background:var(--line);
}
.field--tel input{ padding-left:13px; }
.field--other{ margin-top:2px; }

.err{
  min-height:0;
  font-size:13px;
  line-height:1.4;
  color:var(--flame);
  text-align:center;
  padding:0 4px;
}
.err:empty{ display:none; }

.toast{
  font-size:13px;
  line-height:1.45;
  color:var(--flame);
  text-align:center;
  background:rgba(185,106,68,.07);
  border:1px solid rgba(185,106,68,.22);
  border-radius:12px;
  padding:9px 12px;
}

/* honeypot */
.hp{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
  opacity:0; pointer-events:none;
}

/* ---------- options ---------- */
.opt{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%;
  min-height:var(--opt-h);
  padding:9px 15px 9px 17px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-align:left;
  cursor:pointer;
  font-family:var(--sans);
  font-size:var(--opt-fs);
  font-weight:400;
  color:var(--ink);
  letter-spacing:.008em;
  line-height:1.3;
  transition:transform 140ms var(--ease), border-color 160ms linear, background-color 160ms linear, box-shadow 160ms linear;
  box-shadow:0 1px 2px rgba(56,44,34,.03);
}
.opt:active{ transform:scale(.98); }
.opt::after{
  content:'';
  flex:0 0 auto;
  width:21px; height:21px;
  border:1px solid var(--line);
  border-radius:50%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px 11px;
  transition:background-color 160ms linear, border-color 160ms linear;
}
.opt--multi::after{ border-radius:7px; }
.opt.is-sel{
  border-color:var(--ink);
  background:#FFFDF9;
  box-shadow:0 0 0 1px var(--ink) inset, 0 2px 6px rgba(56,44,34,.06);
}
.opt.is-sel::after{
  background-color:var(--ink);
  border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.2' fill='none' stroke='%23F3EEE4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* frequency grid */
.freq{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--opt-gap);
}
.opt--num{
  justify-content:center;
  padding:0;
  aspect-ratio:1/1;
  max-height:76px;
  min-height:0;
  font-family:var(--sans);
  font-size:clamp(25px,7.2vw,31px);
  font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;
  line-height:1;
  letter-spacing:.01em;
  border-radius:20px;
}
.opt--num::after{ display:none; }
.opt--wide{
  grid-column:1 / -1;
  aspect-ratio:auto;
  min-height:var(--opt-h);
  font-family:var(--sans);
  font-size:var(--opt-fs);
  border-radius:999px;
}

/* ---------- thanks ---------- */
.screen-in--thanks .q-body::before{ flex:1 1 0; }
.screen-in--thanks .q-body::after{ flex:1.12 1 0; }
.stack--thanks{
  align-items:center;
  text-align:center;
  gap:clamp(12px,2.4vh,20px);
}
.screen-in--thanks .q-title{ font-size:var(--fs-h1); }
.thanks-sub{ color:var(--muted); }
.check{
  width:clamp(52px,9vh,66px); height:auto;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-bottom:clamp(0px,.8vh,8px);
}
.check-ring{ stroke-dasharray:183; stroke-dashoffset:183; }
.check-tick{ stroke-width:2.2; stroke-dasharray:42; stroke-dashoffset:42; }
.check.is-drawn .check-ring{ animation:draw 620ms var(--ease) forwards; }
.check.is-drawn .check-tick{ animation:draw 380ms var(--ease) 380ms forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.chip--gift{
  background:rgba(185,106,68,.06);
  border-color:rgba(185,106,68,.26);
}
.microcopy--sign{
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.06em;
  color:var(--muted);
}

/* ---------- keyboard open: compress ---------- */
body.kb-open .q-head{ padding-top:2px; padding-bottom:8px; }
body.kb-open .q-title{ font-size:clamp(20px,5.6vw,24px); }
body.kb-open .q-sub{ margin-top:5px; font-size:12.5px; }
body.kb-open .q-foot{ padding-top:12px; }
body.kb-open .stack{ gap:8px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .screen,.screen.is-active,.screen.is-exit-left,.screen.is-exit-right{ transition:opacity 120ms linear; }
  .screen.is-pre-right,.screen.is-pre-left{ transform:none; }
  .screen.is-exit-left,.screen.is-exit-right{ transform:none; }
  .progress-fill{ transition:width 120ms linear; }
  .btn:active,.opt:active,.iconbtn:active{ transform:none; }
  .check-ring,.check-tick{ stroke-dashoffset:0; }
  .check.is-drawn .check-ring,.check.is-drawn .check-tick{ animation:none; }
  .spinner{ animation-duration:1.4s; }
  .chrome{ transition:opacity 120ms linear; }
}

/* ---------- wide / landscape-ish safety ---------- */
@media (min-width:600px) and (min-height:700px){
  :root{ --lead-w:36ch; --fs-body:16px; }
  .screen-in{ padding-left:28px; padding-right:28px; }
}

/* ============================================================
   privacidad.html (normal scrollable document)
   ============================================================ */
html.doc, body.doc{
  height:auto;
  overflow:visible;
}
body.doc{
  min-height:100vh;
  background:var(--bg);
  padding:0 0 56px;
}
.doc-wrap{
  max-width:660px;
  margin:0 auto;
  padding:clamp(22px,5vw,40px) clamp(20px,5vw,32px) 0;
  position:relative;
  z-index:1;
}
.doc-back{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; color:var(--ink-2);
  text-decoration:none;
  padding:8px 0;
  margin-bottom:14px;
}
.doc-back svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.doc-back:hover{ color:var(--ink); }
.doc-lockup{
  display:flex; flex-direction:column; gap:5px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
  margin-bottom:26px;
}
.doc-lockup em{
  font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:30px; line-height:1; letter-spacing:.07em;
}
.doc-lockup small{
  font-size:10px; text-transform:uppercase; letter-spacing:.34em; color:var(--ink-2);
}
.doc h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(28px,7vw,36px); line-height:1.15;
  margin:0 0 6px;
}
.doc .doc-date{ font-size:13px; color:var(--muted); margin-bottom:26px; }
.doc h2{
  font-family:var(--serif); font-weight:600;
  font-size:20px; line-height:1.25;
  margin:26px 0 7px;
}
.doc p{ font-size:15px; line-height:1.65; color:var(--ink-2); margin:0 0 10px; }
.doc a{ color:var(--ink); overflow-wrap:anywhere; }
.doc ul{ margin:0 0 10px; padding-left:20px; }
.doc li{ font-size:15px; line-height:1.65; color:var(--ink-2); margin-bottom:6px; }
.doc-foot{
  margin-top:34px; padding-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--serif);
  font-size:14px; letter-spacing:.06em; color:var(--muted);
}