/* ============================================================
   SYNKTASK — HOJA PRINCIPAL
   Estructura = funnel aprobado (wireframe v1):
   01 Pain · 02 Agitation · 03 Bridge · 04 Solution
   05 Proof · 06 Offer
   Skin = Brand Guidelines (bone / ink / synk orange, esquina viva)
   ============================================================ */

/* ---------- 0. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-reg);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; padding: 0; }

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

::selection { background: var(--synk-orange); color: #fff; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 500;
  background: var(--ink); color: var(--on-dark);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- 1. LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section--paper { background: var(--paper); }
.section--rule { border-top: 1px solid var(--line); }

.section__head { max-width: 56rem; }
.section__head .lede { margin-top: var(--sp-6); }

/* Etiqueta mono — el "log" del sistema */
.label {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--slate);
}
.label::before {
  content: ""; width: 8px; height: 8px;
  background: var(--synk-orange); flex: none;
}
.label--bare::before { display: none; }
.label--invert { color: var(--on-dark-2); }
.label--orange { color: var(--synk-orange); } /* sólo sobre ink: 5.78:1 */

/* Titulares */
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: var(--fw-med); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: var(--fw-med); margin-top: var(--sp-6); text-wrap: balance; }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: var(--fw-med); }
em.hi { font-style: normal; color: var(--synk-orange); }

.lede { font-size: var(--fs-body); color: var(--slate); max-width: var(--maxw-text); text-wrap: pretty; }

/* ---------- 2. BOTONES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: 17px var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.btn .arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--orange { background: var(--synk-orange); color: var(--ink); }
.btn--orange:hover { background: var(--deep-rust); color: var(--on-dark); }

.btn--ink { background: var(--ink); color: var(--on-dark); }
.btn--ink:hover { background: var(--synk-orange); color: #fff; }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--on-dark); }

.btn--outline-invert { background: transparent; color: var(--on-dark); border-color: var(--line-invert); }
.btn--outline-invert:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

.btn--sm { padding: 11px var(--sp-5); font-size: var(--fs-caption); }
.btn--mono {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: var(--fw-med);
}

/* ---------- 3. LOGO ---------- */
/* El lockup oficial es un SVG inline: la palabra hereda currentColor,
   la K naranja y su sombra rust salen de los tokens (.lm-o / .lm-r). */
.logo { display: inline-flex; align-items: center; color: var(--ink); }
.logo__mark { width: auto; height: 38px; flex: none; }
.logo .lm-o { fill: var(--synk-orange); }
.logo .lm-r { fill: var(--deep-rust); }
.logo--invert { color: var(--on-dark); }

/* ---------- 4. NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bone) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); min-height: 76px; }

.nav__links { display: flex; gap: var(--sp-10); }
.nav__links a {
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--slate);
  padding-block: var(--sp-2); position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--synk-orange); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-5); }
.nav__phone {
  font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--slate);
  letter-spacing: var(--tr-meta); font-variant-numeric: tabular-nums;
}
.nav__phone:hover { color: var(--accent-text); }

.nav__toggle {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong); cursor: pointer;
}
.nav__toggle i { display: block; width: 18px; height: 1.6px; background: var(--ink); position: relative; transition: background-color var(--dur-fast) linear; }
.nav__toggle i::before, .nav__toggle i::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.6px; background: var(--ink);
  transition: transform var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out);
}
.nav__toggle i::before { top: -6px; } .nav__toggle i::after { top: 6px; }
.nav__toggle[aria-expanded="true"] i { background: transparent; }
.nav__toggle[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] i::after  { top: 0; transform: rotate(-45deg); }

.nav__drawer { display: none; }

/* ---------- 5. HERO · 01 PAIN ---------- */
.hero { padding-block: clamp(3rem, 1rem + 6vw, 6rem) var(--section-y); }
.hero__grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, .5rem + 5vw, 5rem); align-items: center;
}

.status {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--slate);
  border: 1px solid var(--line-strong); padding: 9px var(--sp-4);
}
.status__dot { position: relative; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--synk-orange); flex: none; }
.status__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--synk-orange); animation: ping 2.6s var(--ease-out) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 70%,100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .status__dot::after { animation: none; } }

.hero__h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--fw-med);
  margin-block: var(--sp-8) var(--sp-6);
  text-wrap: balance;
}

/* Rotador del H1. Todas las líneas comparten la misma celda de la rejilla:
   la altura es la de la más larga y los CTAs no saltan al cambiar de línea.
   Sale la anterior rápido (fast) y entra la nueva con un pequeño retardo,
   para que nunca se encimen dos textos. */
.rot { display: grid; }
.rot__line {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(.12em);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}
.rot__line.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition:
    opacity var(--dur-slow) var(--ease-out) var(--dur-fast),
    transform var(--dur-slow) var(--ease-out) var(--dur-fast),
    visibility 0s;
}
.rot--still .rot__line, .rot--still .rot__line.is-on { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .rot__line, .rot__line.is-on { transition: none; transform: none; }
}

/* Contador + pausa. Los crea el JS: sin JS no hay nada que controlar. */
.rot__ctl {
  display: flex; align-items: center; gap: var(--sp-4);
  margin: calc(var(--sp-2) * -1) 0 var(--sp-6);
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--slate);
}
.rot__btn {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; padding: var(--sp-2) 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.rot__btn:hover { color: var(--ink); }

.hero__sub { font-size: var(--fs-body); color: var(--slate); max-width: 36rem; text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-10); }

/* Foto del hero con el bloque de dato duro montado encima —
   patrón del deck (11 · Applications): bloque naranja de canto vivo. */
.hero__media { position: relative; isolation: isolate; }
.hero__figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }
.hero__stat {
  position: absolute; z-index: 1;
  left: calc(var(--sp-8) * -1); bottom: calc(var(--sp-10) * -1);
  width: min(17rem, 76%);
  background: var(--synk-orange); color: var(--on-orange-body);
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
}
.hero__stat-k { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-label); text-transform: uppercase; }
.hero__stat-v {
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.5rem); line-height: .95;
  letter-spacing: var(--tr-display); font-weight: var(--fw-med);
  font-variant-numeric: tabular-nums; color: var(--on-orange);
  margin-top: var(--sp-3);
}
.hero__stat-d { font-size: var(--fs-caption); line-height: var(--lh-caption); margin-top: var(--sp-4); }

/* Barra de métricas */
.metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-20); padding-top: var(--sp-8);
  border-top: 1px solid var(--line-strong);
}
.metric__n {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1;
  letter-spacing: var(--tr-h1); font-weight: var(--fw-med);
  font-variant-numeric: tabular-nums;
}
.metric__l {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--slate); margin-top: var(--sp-3);
}

/* ---------- 6. PAIN GRID · 02 AGITATION ---------- */
.pain__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  margin-top: var(--sp-16);
}
.pain__card {
  background: var(--paper); padding: var(--sp-10);
  transition: background-color var(--dur-base) var(--ease-out);
}
.pain__card:hover { background: var(--bone); }
.pain__n { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-label); color: var(--accent-text); }
.pain__h { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.01em; font-weight: var(--fw-med); margin-block: var(--sp-5) var(--sp-3); }
.pain__p { font-size: var(--fs-sm); line-height: 1.6; color: var(--slate); }
.pain__p b { color: var(--ink); font-weight: var(--fw-med); }

.pull {
  margin-top: var(--sp-12);
  background: var(--ink); color: var(--on-dark);
  padding: clamp(2rem, 1rem + 3vw, 3.5rem);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-8); align-items: start;
}
.pull__bar { width: 4px; align-self: stretch; background: var(--synk-orange); }
.pull__q {
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.2; letter-spacing: var(--tr-h2); font-weight: var(--fw-light);
  text-wrap: pretty;
}

/* ---------- 7. STEPS · 03 BRIDGE ---------- */
.steps { margin-top: var(--sp-16); border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 5.5rem 1fr 12rem;
  gap: var(--sp-8); align-items: baseline;
  padding-block: var(--sp-10);
  border-bottom: 1px solid var(--line);
}
.step__n {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: var(--tr-label); color: var(--accent-text);
}
.step__h { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: var(--fw-med); }
.step__p { font-size: var(--fs-sm); line-height: 1.6; color: var(--slate); margin-top: var(--sp-3); max-width: 46ch; }
.step__tag {
  justify-self: end; text-align: right;
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--slate);
  white-space: nowrap;
}

/* ---------- 8. SERVICES · 04 SOLUTION ---------- */
.svc__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: var(--sp-16);
}
.svc {
  background: var(--bone); padding: var(--sp-10);
  transition: background-color var(--dur-base) var(--ease-out);
}
.svc:hover { background: var(--paper); }
.svc__icon { color: var(--ink); transition: color var(--dur-base) var(--ease-out); }
.svc:hover .svc__icon { color: var(--synk-orange); }
.svc__h { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.01em; font-weight: var(--fw-med); margin-block: var(--sp-6) var(--sp-3); }
.svc__p { font-size: var(--fs-sm); line-height: 1.6; color: var(--slate); max-width: 42ch; }

.svc__extra {
  margin-top: var(--sp-12);
  background: var(--ink); color: var(--on-dark);
  padding: clamp(2rem, 1rem + 3vw, 3rem);
  display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap;
}
.svc__extra > div { flex: 1 1 24rem; }
.svc__extra h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-med); margin-block: var(--sp-4) var(--sp-3); }
.svc__extra p { font-size: var(--fs-sm); line-height: 1.6; color: var(--on-dark-2); max-width: 52ch; }

/* ---------- 9. PROOF · 05 ---------- */
.proof__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: var(--sp-16);
}
.quote { background: var(--paper); padding: var(--sp-10); display: flex; flex-direction: column; }
.quote__q {
  font-size: var(--fs-h4); line-height: 1.4; letter-spacing: -0.01em;
  font-weight: var(--fw-light); flex: 1; text-wrap: pretty;
}
.quote__cite { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-8); font-style: normal; }
.quote__ini {
  width: 40px; height: 40px; flex: none;
  display: grid; place-content: center;
  background: var(--ink); color: var(--on-dark);
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .04em;
}
.quote__name { font-size: var(--fs-sm); font-weight: var(--fw-med); }
.quote__role { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--slate); }

/* ---------- 10. OFFER · 06 CONVERSION ---------- */
.offer { background: var(--synk-orange); color: var(--on-orange); padding-block: var(--section-y); }
.offer__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,1rem + 4vw,5rem); align-items: start; }
.offer__h {
  font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1);
  font-weight: var(--fw-med); margin-block: var(--sp-6) var(--sp-6); text-wrap: balance;
}
.offer__sub { font-size: var(--fs-body); color: var(--on-orange-body); max-width: 34rem; }
.offer__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-10); }
.btn--on-orange { background: var(--ink); color: var(--on-dark); }
.btn--on-orange:hover { background: var(--paper); color: var(--ink); }
.btn--ghost-orange { background: transparent; color: var(--ink); border-color: rgba(14,14,16,.45); }
.btn--ghost-orange:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }

.offer__list { border-top: 1px solid rgba(14,14,16,.22); }
.offer__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-bottom: 1px solid rgba(14,14,16,.22);
}
.offer__item .tick { width: 20px; height: 20px; margin-top: 3px; color: var(--ink); }
.offer__item h3 { font-size: var(--fs-h4); line-height: 1.2; font-weight: var(--fw-med); color: var(--ink); }
.offer__item p { font-size: var(--fs-sm); line-height: 1.55; color: var(--on-orange-body); margin-top: var(--sp-2); }


/* ---------- 10b. SCHEDULE · formulario de agenda ----------
   Mismo lenguaje que el resto: canto vivo, hairlines, mono para
   metadatos, naranja reservado a la acción y al estado seleccionado. */
.sched { margin-top: var(--sp-16); }
.sched__grid {
  display: grid; grid-template-columns: 1fr 1.25fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.card {
  background: var(--bone);
  border: none; margin: 0;
  padding: var(--sp-10);
  display: flex; flex-direction: column; gap: var(--sp-6);
  min-width: 0;
}
.card__step {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--slate);
  padding: 0; margin-bottom: var(--sp-2);
}
.card__step span {
  display: grid; place-content: center;
  width: 22px; height: 22px;
  background: var(--synk-orange); color: var(--ink);
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0;
}

/* Campos */
.field { display: grid; gap: var(--sp-2); }
.field label {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--slate);
}
.field input {
  width: 100%;
  padding: 14px var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.field input::placeholder { color: var(--ink-muted); }
.field input:hover { border-color: var(--slate); }
.field input:focus { outline: 2px solid var(--synk-orange); outline-offset: -1px; border-color: var(--synk-orange); }
.field input[aria-invalid="true"] { border-color: var(--deep-rust); background: rgba(168,53,26,.05); }
.field .err {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta); color: var(--deep-rust);
}

/* Qué pasa después — rellena y tranquiliza en la columna de datos */
.next {
  margin-top: auto; padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
  display: grid; gap: var(--sp-4);
}
.next li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--slate);
}
.next span {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta); color: var(--accent-text);
}

/* Calendario */
.cal { display: grid; gap: var(--sp-4); }
.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.cal__title { font-size: var(--fs-h4); font-weight: var(--fw-med); letter-spacing: -0.01em; }
.cal__nav {
  width: 36px; height: 36px; flex: none;
  display: grid; place-content: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cal__nav:hover:not(:disabled) { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }

.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow span {
  text-align: center; padding-block: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--slate);
}
.cal__day {
  aspect-ratio: 1; min-height: 40px;
  display: grid; place-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  color: var(--ink); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cal__day:hover:not(:disabled) { border-color: var(--synk-orange); }
.cal__day:disabled { background: transparent; border-color: transparent; color: var(--ink-muted); opacity: .45; cursor: not-allowed; }
.cal__day[aria-pressed="true"] { background: var(--synk-orange); border-color: var(--synk-orange); color: var(--ink); font-weight: var(--fw-bold); }
.cal__day.is-empty { background: transparent; border-color: transparent; cursor: default; }

/* Franjas horarias */
.slots { display: grid; gap: var(--sp-4); margin-top: var(--sp-2); }
.slots__h { font-size: var(--fs-sm); font-weight: var(--fw-med); }
.slots__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.slot {
  padding: 13px var(--sp-2);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  color: var(--ink); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.slot:hover { border-color: var(--synk-orange); }
.slot[aria-pressed="true"] { background: var(--synk-orange); border-color: var(--synk-orange); font-weight: var(--fw-bold); }
.slots__note {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  line-height: 1.7; letter-spacing: var(--tr-meta); color: var(--slate);
}
.slots__empty { font-size: var(--fs-sm); color: var(--slate); grid-column: 1 / -1; }

/* Pie del formulario */
.sched__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
  margin-top: var(--sp-8);
}
.sched__summary {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: var(--tr-meta); color: var(--slate);
}
.sched__summary b { color: var(--ink); font-weight: var(--fw-med); }
.sched__status { margin-top: var(--sp-5); font-size: var(--fs-sm); }
.sched__status:empty { margin: 0; }
.sched__status[data-state="ok"] { color: var(--ink); border-left: 3px solid var(--synk-orange); padding-left: var(--sp-4); }
.sched__status[data-state="err"] { color: var(--deep-rust); border-left: 3px solid var(--deep-rust); padding-left: var(--sp-4); }
#schedSubmit[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---------- 11. FOOTER ---------- */
.footer { background: var(--ink); color: var(--on-dark); padding-block: var(--sp-16); }
.footer__inner { display: flex; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap; }
.footer__meta {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  line-height: 2; letter-spacing: var(--tr-meta); color: var(--on-dark-2); text-align: right;
}
.footer__meta a:hover { color: var(--synk-orange); }

/* Etiqueta sobre naranja */
.label--on-orange { color: var(--on-orange-body); }
.label--on-orange::before { background: var(--ink); }

/* ---------- 12. REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; } }

/* ---------- 13. RESPONSIVE ---------- */
@media (max-width: 1040px) {
  .hero__grid, .offer__grid { grid-template-columns: 1fr; align-items: start; }
  .figure-block { min-height: 0; }
  .nav__links, .nav__phone { display: none; }
  .nav__toggle { display: flex; }
  .nav__drawer {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bone); border-bottom: 1px solid var(--line);
    padding: 0 var(--gutter) var(--sp-8);
    clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-base) var(--ease-out);
  }
  .nav__drawer[data-open="true"] { clip-path: inset(0 0 0 0); }
  .nav__drawer a {
    padding: var(--sp-5) 0; border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: var(--fs-caption);
    letter-spacing: var(--tr-label); text-transform: uppercase;
  }
  .nav__drawer a:last-of-type { border-bottom: none; }
  .sched__grid { grid-template-columns: 1fr; }
  .hero__stat { position: static; width: 100%; margin-top: calc(var(--sp-6) * -1); margin-left: 0; }
  .step { grid-template-columns: 4rem 1fr; }
  .step__tag { grid-column: 2; justify-self: start; text-align: left; margin-top: var(--sp-4); }
}

@media (max-width: 720px) {
  .pain__grid, .svc__grid, .proof__grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; gap: var(--sp-6); }
  .pull { grid-template-columns: 1fr; }
  .pull__bar { width: 48px; height: 4px; }
  .footer__inner { flex-direction: column; }
  .footer__meta { text-align: left; }
  .btn { width: 100%; }
  .nav__actions .btn { width: auto; }
  .card { padding: var(--sp-6); }
  .slots__grid { grid-template-columns: repeat(2, 1fr); }
  .cal__day { min-height: 38px; }
  .sched__foot { flex-direction: column; align-items: stretch; }
}

/* ---------- 14. PRINT ---------- */
@media print {
  .nav, .hero__ctas, .offer__ctas, .rot__ctl { display: none; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   15. PÁGINAS DE PROBLEMA · /problem/*
   Una página por tarjeta del grid de dolor. Cuatro bloques
   fijos: problema → consecuencias → parche habitual → Synktask.
   Misma gramática que la home: canto vivo, hairline, mono para
   metadatos, naranja reservado al dato duro y a la conversión.
   ============================================================ */

/* Enlace de la tarjeta de dolor en la home */
a.pain__card { display: block; color: inherit; }
.pain__more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-text);
}
.pain__more .arrow { transition: transform var(--dur-base) var(--ease-out); }
a.pain__card:hover .pain__more .arrow { transform: translateX(4px); }

/* ---- Cabecera de la página ---- */
.phero {
  padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(3rem, 1.5rem + 4vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.crumb {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--slate);
}
.crumb a { color: var(--slate); transition: color var(--dur-fast) var(--ease-out); }
.crumb a:hover { color: var(--accent-text); }
.crumb span[aria-hidden] { color: var(--line-strong); }

.phero__grid {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  margin-top: var(--sp-12); align-items: start;
}
/* Bloque naranja de canto vivo con el número: el ink sobre naranja
   da 5.78:1, que es la única combinación segura a este tamaño. */
.phero__badge {
  width: clamp(56px, 5vw, 76px); aspect-ratio: 1; flex: none;
  display: grid; place-content: center;
  background: var(--synk-orange); color: var(--ink);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); font-weight: var(--fw-med);
  letter-spacing: var(--tr-h1); font-variant-numeric: tabular-nums;
}
.phero__lede {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5;
  color: var(--slate); max-width: 54ch; margin-top: var(--sp-6); text-wrap: pretty;
}

/* Tira de datos duros bajo la cabecera */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: var(--sp-12);
}
.stat { background: var(--paper); padding: var(--sp-8); }
.stat__v {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem); line-height: 1;
  letter-spacing: var(--tr-h2); font-weight: var(--fw-med);
  font-variant-numeric: tabular-nums;
}
.stat__l {
  font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.7;
  letter-spacing: var(--tr-meta); color: var(--slate); margin-top: var(--sp-4);
}

/* ---- 01 · Prosa y desglose del problema ---- */
.prose { max-width: 68ch; margin-top: var(--sp-10); display: grid; gap: var(--sp-6); }
.prose p { color: var(--slate); text-wrap: pretty; }
.prose b { color: var(--ink); font-weight: var(--fw-med); }

.rows { margin-top: var(--sp-12); border-top: 1px solid var(--line-strong); }
.row {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--sp-6);
  padding-block: var(--sp-8); border-bottom: 1px solid var(--line);
}
.row__k {
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); color: var(--accent-text); padding-top: .3em;
}
.row__h { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -0.01em; font-weight: var(--fw-med); }
.row__p { font-size: var(--fs-sm); line-height: 1.6; color: var(--slate); margin-top: var(--sp-3); max-width: 66ch; }
.row__p b { color: var(--ink); font-weight: var(--fw-med); }

/* ---- 02 · Consecuencias ---- */
.cost__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: var(--sp-12);
}
.cost { background: var(--bone); padding: var(--sp-10); }
.cost__v {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1;
  letter-spacing: var(--tr-h2); font-weight: var(--fw-med);
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.cost__h { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.01em; font-weight: var(--fw-med); margin-block: var(--sp-5) var(--sp-3); }
.cost__p { font-size: var(--fs-sm); line-height: 1.6; color: var(--slate); }
.cost__p b { color: var(--ink); font-weight: var(--fw-med); }

/* ---- 03 · El parche que no cierra el agujero ---- */
.wrong { margin-top: var(--sp-12); border-top: 1px solid var(--line-strong); }
.wrong__item {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(1.5rem, 1rem + 2vw, 4rem);
  padding-block: var(--sp-8); border-bottom: 1px solid var(--line);
}
.wrong__a { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: baseline; }
.wrong__x {
  font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1;
  color: var(--accent-text); font-weight: var(--fw-med);
}
.wrong__h { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -0.01em; font-weight: var(--fw-med); }
.wrong__tag {
  display: block; margin-bottom: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--slate);
}
.wrong__why { font-size: var(--fs-sm); line-height: 1.6; color: var(--slate); }
.wrong__why b { color: var(--ink); font-weight: var(--fw-med); }

/* ---- 04 · Lo que hace Synktask ---- */
.solve { background: var(--ink); color: var(--on-dark); padding-block: var(--section-y); }
.solve .h2 { color: var(--on-dark); }
.solve .lede { color: var(--on-dark-2); }
.solve__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line-invert); border: 1px solid var(--line-invert);
  margin-top: var(--sp-12);
}
.solve__item { background: var(--ink); padding: var(--sp-10); }
.solve__item .tick { width: 22px; height: 22px; color: var(--synk-orange); }
.solve__item h3 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.01em; font-weight: var(--fw-med); margin-block: var(--sp-6) var(--sp-3); }
.solve__item p { font-size: var(--fs-sm); line-height: 1.6; color: var(--on-dark-2); max-width: 46ch; }

.solve__note {
  margin-top: var(--sp-12); padding-top: var(--sp-8);
  border-top: 1px solid var(--line-invert);
  display: flex; align-items: baseline; gap: var(--sp-8); flex-wrap: wrap;
}
.solve__note p { font-size: var(--fs-sm); line-height: 1.6; color: var(--on-dark-2); max-width: 56ch; }

/* ---- Cierre naranja ---- */
.cta { background: var(--synk-orange); color: var(--on-orange); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.cta__grid { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); flex-wrap: wrap; }
.cta__h {
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
  font-weight: var(--fw-med); max-width: 24ch; margin-top: var(--sp-5); text-wrap: balance;
}
.cta__p { font-size: var(--fs-sm); line-height: 1.6; color: var(--on-orange-body); max-width: 46ch; margin-top: var(--sp-4); }
.cta__ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ---- Las otras tres páginas ---- */
.pnav { padding-block: var(--section-y); }
.pnav__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: var(--sp-8);
}
.pnav__i {
  display: block; background: var(--paper); padding: var(--sp-8);
  transition: background-color var(--dur-base) var(--ease-out);
}
.pnav__i:hover { background: var(--bone); }
.pnav__k { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-label); color: var(--accent-text); }
.pnav__h { font-size: var(--fs-sm); font-weight: var(--fw-med); line-height: 1.3; margin-top: var(--sp-4); }

/* ---- Fuentes de los datos ---- */
.sources { margin-top: var(--sp-16); padding-top: var(--sp-8); border-top: 1px solid var(--line); }
.sources h2 {
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--slate);
}
.sources ol { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.sources li {
  font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.8;
  letter-spacing: var(--tr-meta); color: var(--slate);
}
.sources a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.sources a:hover { color: var(--accent-text); }

/* ---- Responsive de las páginas de problema ---- */
@media (max-width: 1040px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .wrong__item { grid-template-columns: 1fr; gap: var(--sp-5); }
  .pnav__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .stats, .cost__grid, .solve__grid { grid-template-columns: 1fr; }
  .phero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .stat, .cost, .solve__item { padding: var(--sp-6); }
  .row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .cta__grid { align-items: stretch; }
  .cta .btn { width: 100%; }
}

/* ============================================================
   16. PÁGINAS DE SERVICIO · /services/*
   Una página por tarjeta de servicio. Header con el problema,
   la solución de Synktask, cómo opera, preguntas y cierre.
   Reutiliza .phero, .stats, .rows, .steps, .solve, .cta, .pnav
   y .sources de la sección 15; aquí sólo va lo que no existía.
   ============================================================ */

/* Enlace de la tarjeta de servicio en la home */
a.svc { display: block; color: inherit; }
.svc__more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-text);
}
.svc__more .arrow { transition: transform var(--dur-base) var(--ease-out); }
a.svc:hover .svc__more .arrow { transform: translateX(4px); }

/* Enlace de vuelta a la página de problema correspondiente */
.xref {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-10); padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-text);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.xref:hover { background: var(--paper); border-color: var(--accent-text); }
.xref .arrow { transition: transform var(--dur-base) var(--ease-out); }
.xref:hover .arrow { transform: translateX(4px); }

/* Preguntas frecuentes — visibles siempre, sin acordeón:
   el contenido tiene que ser indexable sin interacción. */
.faq__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: var(--sp-12);
}
.faq__i { background: var(--paper); padding: var(--sp-8); }
.faq__q {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: baseline;
  font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -0.01em; font-weight: var(--fw-med);
}
.faq__k { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: var(--fw-med); letter-spacing: var(--tr-label); color: var(--accent-text); }
.faq__a { font-size: var(--fs-sm); line-height: 1.6; color: var(--slate); margin-top: var(--sp-4); }
.faq__a b { color: var(--ink); font-weight: var(--fw-med); }

@media (max-width: 1040px) { .faq__grid { grid-template-columns: 1fr; } }
@media (max-width: 720px)  { .faq__i { padding: var(--sp-6); } .xref { width: 100%; } }