/* ============================================================
   SINCRO · Tienda
   La home vende la skill paga. Se apoya en precision.css (tokens,
   tipografía, nav, botones, movimiento) y agrega solo lo propio.
   ============================================================ */


/* ---------- hero ---------- */
.shop-hero {
  padding-top: clamp(120px, 15vw, 172px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
.shop-hero h1 { max-width: 16ch; }
.shop-hero-row {
  display: grid; gap: var(--s5);
  margin-top: var(--s5);
}
@media (min-width: 900px) {
  .shop-hero-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.shop-hero-row .t-lead { margin: 0; max-width: 48ch; }
.price-tag { margin: 0; font-size: 1rem; color: var(--ink-muted); white-space: nowrap; }
.price-tag b { color: var(--ink); font-weight: 600; }
.shop-hero .cta-row { margin-top: var(--s6); gap: var(--s3); }

.shot-cap {
  margin: clamp(48px, 6vw, 72px) 0 var(--s4);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-subtle);
}

/* ---------- la sesión de Claude Code ---------- */
.app {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--mist);
  box-shadow: var(--e3);
  overflow: hidden;
  font-size: 0.9375rem;
}
@media (min-width: 1000px) { .app { grid-template-columns: 210px minmax(0, 1fr) 300px; } }
@media (min-width: 700px) and (max-width: 999px) { .app { grid-template-columns: minmax(0, 1fr) 260px; } }

.app-side { display: none; border-right: 1px solid var(--line); padding: var(--s4); }
@media (min-width: 1000px) { .app-side { display: block; } }
.app-side .who { display: flex; align-items: center; gap: var(--s2); font-weight: 600; margin-bottom: var(--s4); }
.spark { color: #D97757; font-size: 1.1em; line-height: 1; }
.app-side .t-cap { font-size: 0.75rem; color: var(--ink-subtle); margin: var(--s5) 0 var(--s2); }
.app-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app-side li { padding: 6px 10px; border-radius: var(--r-input); color: var(--ink-muted); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-side li.on { background: var(--paper); color: var(--ink); }

.app-chat { display: flex; flex-direction: column; min-width: 0; background: var(--paper); }
.app-bar { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); text-align: center; font-size: 0.875rem; color: var(--ink-muted); }
.app-body { display: grid; gap: var(--s4); padding: var(--s5) var(--s4); flex: 1; }
@media (min-width: 700px) { .app-body { padding: var(--s5) var(--s6); } }
.bubble {
  justify-self: end; max-width: 34ch;
  background: var(--mist); border: 1px solid var(--line);
  padding: var(--s3) var(--s4); border-radius: 14px; font-weight: 500;
}
.tasks { border: 1px solid var(--line); border-radius: 12px; padding: var(--s3) var(--s4); }
.tasks p { margin: 0 0 var(--s2); font-weight: 600; display: flex; gap: var(--s2); align-items: center; }
.tasks ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tasks li { display: flex; gap: var(--s2); align-items: center; color: var(--ink-muted); font-size: 0.875rem; }
.tasks li::before {
  content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--ok);
}
.tasks li { position: relative; }
.tasks li::after {
  content: ""; position: absolute; left: 4px; top: 50%; width: 7px; height: 4px;
  border: solid var(--paper); border-width: 0 0 1.6px 1.6px; transform: translate(0, -70%) rotate(-45deg);
}
.reply { display: flex; gap: var(--s3); }
.reply p { margin: 0; line-height: 1.55; }
.files { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.file {
  display: inline-flex; gap: 6px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-input);
  padding: 5px 10px; font-size: 0.8125rem; font-weight: 500; background: var(--mist);
}
.file small { color: var(--ink-subtle); font-weight: 400; }
.app-input {
  margin: 0 var(--s4) var(--s4); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: var(--s3) var(--s4); color: var(--ink-subtle);
  display: flex; justify-content: space-between; align-items: center;
}
.app-input span:last-child {
  width: 26px; height: 26px; border-radius: 8px; background: #D97757; color: #fff;
  display: grid; place-items: center; font-size: 0.875rem;
}

.app-prev { display: none; border-left: 1px solid var(--line); padding: var(--s4); }
@media (min-width: 700px) { .app-prev { display: block; } }
.app-prev .t-cap { font-size: 0.75rem; color: var(--ink-subtle); margin: 0 0 var(--s3); }
.phone { aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #0d0f1a; }
.phone img, .phone video { width: 100%; height: 100%; object-fit: cover; }
.specs { margin: var(--s4) 0 0; display: grid; gap: 6px; font-size: 0.8125rem; }
.specs div { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 6px; }
.specs dt { color: var(--ink-subtle); }
.specs dd { margin: 0; font-weight: 500; }

/* ---------- cifras ---------- */
.stats { display: grid; gap: var(--s6); margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat-n { margin: 0; font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.stat-n span { color: var(--accent); }
.stat-t { margin: var(--s2) 0 0; color: var(--ink-muted); }

/* ---------- cómo funciona ---------- */
.figs { display: grid; gap: var(--s6); margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 900px) {
  .figs { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .fig + .fig { border-left: 1px solid var(--line); }
  .fig { padding-inline: var(--s5); }
  .fig:first-child { padding-left: 0; }
  .fig:last-child { padding-right: 0; }
}
.fig-n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-subtle); letter-spacing: 0.08em; margin: 0 0 var(--s3); }
.fig-card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
  padding: var(--s4); min-height: 236px; display: flex; flex-direction: column; gap: var(--s3);
  font-size: 0.875rem;
}
.fig h3 { font-size: 1.25rem; margin-top: var(--s5); letter-spacing: -0.02em; }
.fig > p:last-child { margin: var(--s2) 0 0; color: var(--ink-muted); }
.mono-cap { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-subtle); margin: 0; }
.pills { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pill { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px; color: var(--ink-muted); font-size: 0.8125rem; }
.ask {
  margin-top: auto; border: 1px solid var(--line-strong); border-radius: 12px;
  padding: var(--s3); display: flex; gap: var(--s3); justify-content: space-between; align-items: flex-end;
  font-weight: 500;
}
.ask span:last-child { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 0.75rem; }
.prog { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prog li { display: flex; gap: var(--s2); align-items: center; color: var(--ink-subtle); }
.prog li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; }
.prog li.done { color: var(--ink); }
.prog li.done::before { background: var(--accent); border-color: var(--accent); }
.bar { height: 3px; border-radius: 3px; background: var(--line); margin-top: auto; overflow: hidden; }
.bar span { display: block; height: 100%; width: 40%; background: var(--accent); }
.ready { display: grid; grid-template-columns: 82px 1fr; gap: var(--s3); flex: 1; }
.ready .phone { border-radius: 10px; }
.ready ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.ready li { border: 1px solid var(--line); border-radius: var(--r-input); padding: 7px 10px; font-weight: 500; display: flex; justify-content: space-between; }
.ready li small { color: var(--ink-subtle); font-weight: 400; }
.dot-ok { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; }

/* ---------- resultados ---------- */
.reels {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
  gap: var(--s4); margin-top: clamp(40px, 5vw, 64px);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s3);
  scrollbar-width: thin;
}
@media (min-width: 1000px) { .reels { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; } }
.reel { scroll-snap-align: start; display: block; }
.reel-shot {
  position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
  background: #0d0f1a; border: 1px solid var(--line);
  transition: transform var(--dur-move) var(--ease), box-shadow var(--dur-move) var(--ease);
}
.reel-shot img, .reel-shot video { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-move) var(--ease); }
.reel:hover .reel-shot { transform: translateY(-4px); box-shadow: var(--e2); }
.reel:hover .reel-shot img, .reel:hover .reel-shot video { transform: scale(1.03); }
.reel-badge {
  position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(14, 14, 17, 0.72); color: #fff; font-size: 0.75rem; font-weight: 500;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* portada armada con el gancho, para el reel que no tiene portada local */
.reel-hook {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 18% 12%; text-align: center; color: #fff;
  background: radial-gradient(120% 80% at 50% 110%, #2a3cff 0%, #141a52 38%, #0d0f1a 72%);
}
.reel-hook strong { font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.02em; }
.reel-hook span { margin-top: var(--s4); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.reel h3 { font-size: 1rem; line-height: 1.35; letter-spacing: -0.01em; margin-top: var(--s3); }
.reel-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.8125rem; color: var(--ink-subtle); }
.reel-meta b { color: var(--ink); font-weight: 600; }

/* ---------- precio ---------- */
.price-grid { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 900px) { .price-grid { grid-template-columns: 1fr 440px; gap: var(--s8); } }
.price-card {
  border: 1px solid var(--line); border-radius: 20px; background: var(--paper);
  padding: var(--s6) var(--s5); box-shadow: var(--e2);
}
@media (min-width: 700px) { .price-card { padding: var(--s6); } }
.price-card .t-label { margin-bottom: var(--s3); }
.price-card h3 { font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.25; }
.price-big { margin: var(--s5) 0 0; font-size: clamp(3rem, 6vw, 4rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.price-big small { display: block; margin-top: var(--s2); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--ink-subtle); }
.price-card .btn { width: 100%; justify-content: center; margin-top: var(--s5); }
.price-card .t-caption { margin-top: var(--s3); text-align: center; }
.checks { list-style: none; margin: var(--s5) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s3); }
.checks li { display: flex; gap: var(--s3); align-items: flex-start; }
.checks li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 9px var(--accent);
}

/* ---------- preguntas ---------- */
.faq-grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1fr 1.5fr; gap: var(--s8); } }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s5) 0;
  display: flex; justify-content: space-between; gap: var(--s4);
  font-weight: 500; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; color: var(--ink-subtle); font-size: 1.25rem; line-height: 1;
  transition: transform var(--dur-micro) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--s5); color: var(--ink-muted); max-width: 62ch; }

/* ---------- sincro core ---------- */
.core-hero { text-align: left; }
.core-hero h1 { margin-inline: 0; max-width: 14ch; }
.core-hero .t-lead { margin-inline: 0; }
.core-hero .cta-row { justify-content: flex-start; }
.eyebrow {
  display: inline-flex; gap: var(--s2); align-items: center; margin: 0 0 var(--s5);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 14px;
  font-size: 0.8125rem; color: var(--ink-muted);
}
.eyebrow b { color: var(--accent); font-weight: 600; }
.mods { display: grid; gap: var(--s4); margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 720px) { .mods { grid-template-columns: repeat(3, 1fr); } }
.mod { border: 1px solid var(--line); border-radius: 14px; padding: var(--s5); background: var(--paper); }
.mod h3 { font-size: 1.125rem; letter-spacing: -0.02em; }
.mod p { margin: var(--s2) 0 0; color: var(--ink-muted); font-size: 0.9375rem; }