/* Funnel sesión de prueba · Spark Wellness (pruebaspark.com)
   Marca: hueso #F4F0EC de fondo, tinta #221713, carmín #BD0E31, Questrial (un solo peso).
   Solo tema claro. Móvil primero. */

@font-face{
  font-family:"Questrial";
  src:url(fonts/questrial-latin.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  color-scheme:light;
  --fondo:#f4f0ec;
  --panel:#fdfbf8;
  --quieto:#eae5dd;
  --tinta:#221713;
  --suave:#6b5f5a;
  --linea:rgba(34,23,19,.14);
  --carmin:#bd0e31;
  --carmin-activo:#97081f;
  --blanco:#ffffff;
  --voz:"Questrial","Century Gothic","Futura",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --r-s:12px; --r-m:16px; --r-l:24px; --r-full:999px;
  --gutter:16px;
  --ancho:1080px;
  --sec:56px;
  --ease:cubic-bezier(.4,0,.2,1);
}
@media(min-width:600px){:root{--gutter:24px}}
@media(min-width:980px){:root{--gutter:40px;--sec:88px}}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--fondo)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--voz);font-size:17px;line-height:1.55;font-synthesis:none;
  color:var(--tinta);background:var(--fondo);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media(min-width:980px){body{font-size:18px}}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-weight:400;text-wrap:balance;letter-spacing:0}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--carmin);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:12px}

.skip{position:absolute;left:var(--gutter);top:-60px;z-index:50;background:var(--tinta);color:var(--fondo);padding:.7rem 1rem;border-radius:var(--r-s);text-decoration:none}
.skip:focus{top:12px}

.contenedor{width:100%;max-width:calc(var(--ancho) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec)}
.sec-panel{background:var(--panel);border-block:1px solid var(--linea)}

.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--suave)}
.h1{font-size:30px;line-height:1.12}
@media(min-width:600px){.h1{font-size:40px}}
@media(min-width:980px){.h1{font-size:54px;line-height:1.06}}
.h2{font-size:28px;line-height:1.15}
@media(min-width:980px){.h2{font-size:40px;line-height:1.12}}
.h3{font-size:20px;line-height:1.25}
.lead{font-size:18px;color:var(--suave);max-width:56ch}
.cabecera{margin-bottom:24px;max-width:720px}
@media(min-width:980px){.cabecera{margin-bottom:36px}}

/* ── botones ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:0 24px;border-radius:var(--r-full);
  font-size:17px;line-height:1.2;text-decoration:none;text-align:center;
  border:1.5px solid transparent;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn svg{width:20px;height:20px;flex:none}
.btn-primario{background:var(--carmin);color:var(--blanco)}
.btn-primario:hover{background:var(--carmin-activo)}
.btn-secundario{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn-secundario:hover{background:var(--tinta);color:var(--fondo)}

.enlace{color:var(--carmin);text-decoration:underline;text-underline-offset:3px}
.enlace:hover{color:var(--carmin-activo)}

/* ── encabezado ──────────────────────────── */
.top{padding-block:12px;border-bottom:1px solid var(--linea)}
.top .contenedor{display:flex;align-items:center;justify-content:center}
.top .logo{width:130px;height:auto}
@media(min-width:900px){.top .contenedor{justify-content:flex-start}}

/* ── hero: titular, video, botón ─────────── */
.hero{padding-block:18px 40px}
@media(min-width:900px){.hero{padding-block:48px 72px}}
.hero-grid{display:grid;gap:16px;justify-items:center;text-align:center}
.hero-titulo{max-width:18ch}
.hero-cierre{width:100%;max-width:420px}
@media(min-width:900px){
  .hero-grid{
    grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto 1fr;
    column-gap:64px;row-gap:28px;justify-items:start;text-align:left;
  }
  .vsl{grid-column:1;grid-row:1/4}
  .hero-titulo{grid-column:2;grid-row:1;align-self:end}
  .hero-cierre{grid-column:2;grid-row:2}
}

/* Video vertical 9:16; nunca más de ~60 % del alto de la pantalla en celular (70 % en escritorio). */
.vsl{
  position:relative;aspect-ratio:9/16;
  height:58vh;height:58svh;max-height:640px;max-width:100%;
  border-radius:var(--r-l);overflow:hidden;background:var(--tinta);
  box-shadow:0 24px 60px -36px rgba(34,23,19,.6);
}
@media(min-width:900px){.vsl{height:70vh;height:70svh;min-height:420px}}
.vsl-video{width:100%;height:100%;object-fit:cover;background:var(--tinta)}
.vsl.vsl-sin-video{display:none}

.acciones{display:flex;gap:10px;width:100%}
.acciones .btn-primario{flex:1 1 auto}
.acciones .btn-secundario{flex:0 0 auto;padding:0 18px}
@media(min-width:900px){.acciones .btn-primario{flex:0 0 auto;padding:0 36px}}
.precio{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 12px;margin-top:14px}
.precio-monto{font-size:30px;line-height:1;color:var(--carmin)}
.precio-nota{color:var(--suave);font-size:15px}
@media(min-width:900px){.precio{justify-content:flex-start}.precio-monto{font-size:36px}}

/* ── qué incluye ─────────────────────────── */
.incluye{display:grid;gap:12px;list-style:none}
@media(min-width:700px){.incluye{grid-template-columns:1fr 1fr;gap:16px}}
.item{background:var(--fondo);border:1px solid var(--linea);border-radius:var(--r-l);padding:20px 22px;border-left:4px solid var(--carmin)}
.item p{margin-top:6px;color:var(--suave)}

/* ── requisitos de seguridad ─────────────── */
.requisitos{max-width:760px}
.requisitos .h2{margin-bottom:16px}
.requisitos p{color:var(--tinta)}
.lista-seguridad{margin:14px 0 18px;padding:18px 20px 18px 40px;background:var(--panel);border:1px solid var(--linea);border-radius:var(--r-l);display:grid;gap:6px}
.lista-seguridad li::marker{color:var(--carmin)}

/* ── pasos ───────────────────────────────── */
.pasos{list-style:none;display:grid;gap:12px;counter-reset:paso;margin-bottom:28px}
@media(min-width:860px){.pasos{grid-template-columns:repeat(3,1fr);gap:16px}}
.paso{counter-increment:paso;display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:start}
.paso::before{
  content:counter(paso);grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:var(--carmin);color:var(--blanco);font-size:18px;
}
.paso .h3{padding-top:8px}
.paso p{color:var(--suave);margin-top:4px}

/* ── calendario ──────────────────────────── */
.widget-frame{position:relative;max-width:840px;margin-inline:auto;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-l);padding:8px;box-shadow:0 18px 50px -34px rgba(34,23,19,.45)}
.widget-frame iframe{width:100%;min-height:440px;border:0;display:block;border-radius:var(--r-m)}
@media(max-width:560px){.widget-frame{padding:4px}.widget-frame iframe{min-height:380px}}
.agenda-notas{max-width:840px;margin:18px auto 0;text-align:center;font-size:15px;color:var(--suave)}
.agenda-notas p+p{margin-top:12px}

/* esqueleto mientras carga el calendario (UX, igual que el sitio principal) */
.widget-cargando{position:absolute;inset:8px;z-index:2;pointer-events:none;border-radius:var(--r-m);background:var(--blanco);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem;text-align:center;transition:opacity .35s ease}
.widget-cargando.fuera{opacity:0}
.widget-cargando .wc-barras{width:min(100%,340px);display:grid;gap:.65rem;justify-items:start}
.widget-cargando .wc-barras i{display:block;width:100%;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--quieto) 0%,#f8f5f2 50%,var(--quieto) 100%);background-size:200% 100%;animation:wc-brillo 1.4s linear infinite}
.widget-cargando .wc-barras i:nth-child(2){width:62%}
.widget-cargando .wc-barras i:nth-child(3){width:84%}
.widget-cargando .wc-barras i:nth-child(4){width:48%}
.widget-cargando p{font-size:15px;color:var(--suave);max-width:36ch}
.widget-cargando .wc-lento{display:none;pointer-events:auto}
.widget-cargando .wc-lento a{color:var(--carmin);text-decoration:underline;text-underline-offset:3px}
.widget-cargando.lento .wc-lento{display:block}
@keyframes wc-brillo{to{background-position:-200% 0}}

/* ── preguntas ───────────────────────────── */
.faq-grid{display:grid;gap:20px}
@media(min-width:900px){.faq-grid{grid-template-columns:.7fr 1.3fr;gap:64px;align-items:start}}
.faq-lista details{border-top:1px solid var(--linea)}
.faq-lista details:last-child{border-bottom:1px solid var(--linea)}
.faq-lista summary{
  cursor:pointer;list-style:none;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:12px;font-size:18px;
}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{content:"+";flex:none;font-size:24px;line-height:1;color:var(--carmin);transition:transform .25s var(--ease)}
.faq-lista details[open] summary::after{transform:rotate(45deg)}
.faq-lista summary:hover{color:var(--carmin)}
.faq-lista details p{padding-bottom:16px;color:var(--suave);max-width:60ch}
.faq-lista details p+p{margin-top:-6px}

/* ── pie ─────────────────────────────────── */
.pie{background:var(--quieto);padding-block:40px;font-size:15px;color:var(--suave)}
.pie .contenedor{display:grid;gap:20px}
@media(min-width:860px){.pie .contenedor{grid-template-columns:1.4fr 1fr}}
.pie img{width:130px;height:auto}
.pie-dir{margin-top:14px}
.pie p+p{margin-top:6px}
.pie b{font-weight:400;color:var(--tinta)}
.pie nav ul{list-style:none;display:grid;gap:2px}
.pie nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.pie .legal{grid-column:1/-1;border-top:1px solid var(--linea);padding-top:16px;font-size:14px}

/* ── barra móvil ─────────────────────────── */
.barra{display:none}
@media(max-width:759px){
  .barra{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    align-items:center;justify-content:space-between;gap:12px;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background:var(--panel);border-top:1px solid var(--linea);box-shadow:0 -10px 30px -20px rgba(34,23,19,.35);
    transform:translateY(110%);visibility:hidden;
    transition:transform .3s var(--ease),visibility 0s linear .3s;
  }
  .barra.visible{transform:none;visibility:visible;transition:transform .3s var(--ease),visibility 0s}
  .barra p{font-size:15px;line-height:1.25}
  .barra p b{display:block;font-weight:400;font-size:18px;color:var(--carmin)}
  .barra .btn{min-height:48px;padding:0 22px;font-size:16px}
  body.con-barra{padding-bottom:76px}
}

/* ── movimiento (sutil, nunca pegado) ────── */
.rv-espera{opacity:0;transform:translateY(14px)}
.rv-visto{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .rv-espera{opacity:1;transform:none}
  .widget-cargando .wc-barras i{animation:none}
}

/* ── privacidad ──────────────────────────── */
.doc-hero{text-align:left}
.doc-hero .lead{margin-top:16px}
.doc-hero .eyebrow{margin-top:16px}
.doc{max-width:760px}
.doc h2{font-size:24px;line-height:1.25;margin-top:44px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{color:var(--tinta)}
.doc p{margin-top:12px}
.doc ul{margin:12px 0 0 1.2em;display:grid;gap:8px}
.doc .datos{margin-top:16px;display:grid;gap:10px;border-top:1px solid var(--linea);padding-top:14px}
.doc .datos div{display:grid;gap:2px}
@media(min-width:600px){.doc .datos div{grid-template-columns:12rem 1fr;gap:16px}}
.doc .datos dt{color:var(--suave)}
.doc .mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.medicion{margin-top:48px;background:var(--panel);border:1px solid var(--linea);border-radius:var(--r-l);padding:24px}
.medicion h2{margin-top:6px}
.med-estado{display:flex;align-items:center;gap:10px;margin-top:16px}
.med-luz{width:12px;height:12px;border-radius:50%;background:var(--suave);flex:none}
.med-estado[data-estado="on"] .med-luz{background:#1f7a4a}
.med-estado[data-estado="off"] .med-luz{background:var(--carmin)}
.medicion .btn{margin-top:16px}
.medicion .med-nota{font-size:15px;color:var(--suave)}