:root {
  --orange: #FF7A00;
  --black: #111111;
  --grey: #6b6b6b;
  --light-grey: #f5f5f5;
  --border: #e3e3e3;
  --max-width: 760px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--black);
  background: #ffffff;
  line-height: 1.6;
}

header.page-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
  color: var(--black);
}

.brand .rise { color: var(--orange); }

.lang-toggle {
  display: flex;
  gap: 6px;
  background: var(--light-grey);
  border-radius: 999px;
  padding: 4px;
}

.lang-toggle button {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--grey);
}

.lang-toggle button.active {
  background: var(--orange);
  color: white;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 24px 80px;
}

h1 {
  font-size: 28px;
  margin-bottom: 4px;
}

.updated {
  color: var(--grey);
  font-size: 14px;
  margin-bottom: 32px;
}

h2 {
  font-size: 18px;
  margin-top: 36px;
  margin-bottom: 8px;
}

p, li {
  color: #333;
  font-size: 15px;
}

ul {
  padding-left: 22px;
}

.placeholder {
  background: #fff4e6;
  border: 1px solid #ffd9a8;
  color: #8a5300;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9em;
}

.notice {
  background: var(--light-grey);
  border-left: 3px solid var(--orange);
  padding: 14px 16px;
  border-radius: 8px;
  margin: 24px 0;
  font-size: 14px;
  color: #444;
}

footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px;
  color: var(--grey);
  font-size: 13px;
  border-top: 1px solid var(--border);
}

a { color: var(--orange); }

/* !important a propósito: este interruptor de idioma tiene que ganar
   siempre a cualquier `display` que ponga un componente más específico
   (ej. `.challenge-card strong { display: block }`) — bug real
   encontrado en la landing, donde "Flexiones" y "Push-ups" se veían los
   dos a la vez porque `.challenge-card strong` (una clase + una
   etiqueta) tiene más especificidad que `[data-lang="en"]` sola. */
[data-lang="en"] { display: none !important; }
body.lang-en [data-lang="es"] { display: none !important; }
body.lang-en [data-lang="en"] { display: block !important; }

/* Solo Privacidad/Términos siguen el tema del sistema — la landing
   (más abajo) es oscura siempre, a propósito, no depende de esto. */
@media (prefers-color-scheme: dark) {
  body:not(.landing) { background: #0f0f10; color: #f2f2f2; }
  body:not(.landing) header.page-header { background: rgba(15,15,16,0.9); border-color: #262626; }
  body:not(.landing) .brand { color: #f2f2f2; }
  body:not(.landing) p, body:not(.landing) li { color: #d7d7d7; }
  body:not(.landing) .lang-toggle { background: #1c1c1e; }
  body:not(.landing) .notice { background: #1c1c1e; color: #d7d7d7; }
  body:not(.landing) .placeholder { background: #3a2a10; border-color: #6b4a12; color: #ffcf8a; }
  body:not(.landing) footer { border-color: #262626; color: #9a9a9a; }
}

/* ============================================================
   Landing (index.html) — reescrita a fondo, pedido explícito:
   "quiero que sea una página web clean... tema oscuro... scroll-driven
   animations". Tema oscuro fijo (no depende de prefers-color-scheme,
   es una decisión de diseño para esta página en concreto, no una
   preferencia del sistema) + reveal-on-scroll universal vía
   IntersectionObserver (script.js).

   **Segunda vuelta, pedido explícito**: "más imponente y chill... un fondo
   negro plano queda mal, pon algo más como un amanecer... que las fotos no
   estén bailando ni moviéndose... como una web de Apple hiper premium".
   Tres cambios de fondo:
   1. Fondo con relieve (`.ambient-bg`, más abajo) — tres resplandores
      grandes y muy desenfocados, en tonos de amanecer (naranja/ámbar),
      flotando muy despacio (40-60s por ciclo, "chill" a propósito, nunca
      brusco) en vez de negro plano.
   2. Se quitó `phone-float` (el teléfono del hero "flotaba" en bucle
      infinito) y el parallax de scroll del hero — ninguna imagen se mueve
      por su cuenta ahora, solo aparecen una vez con el reveal normal.
   3. El carrusel de capturas se sustituyó por una galería "pineada" al
      estilo Apple (`.apple-scroll`, ver más abajo): el teléfono se queda
      fijo en el centro de la pantalla y las capturas se van cruzando según
      el progreso de scroll, en vez de deslizar en horizontal.
   ============================================================ */

body.landing {
  background: #08080a;
  color: #f2f2f0;
  position: relative;
}

/* Fondo con relieve — pedido explícito: "un fondo negro y solo negro queda
   mal, pon algo más como un amanecer o negro con algo". `position: fixed`
   para que el resplandor se sienta como una atmósfera de toda la página,
   no algo pegado a una sección. Los tres blobs se mueven muy despacio y en
   bucle (`alternate`, sin saltos), a propósito lento para que se sienta
   "chill" — es ambiente, no debe llamar la atención por sí mismo. */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
}
/* Segunda vuelta, pedido explícito ("el resplandor tapa el texto, bájalo"):
   opacidad mucho más baja (0.5→0.16) y movido fuera del centro de lectura
   — antes caía justo detrás del titular del hero y le quitaba contraste.
   Ahora es un resplandor de fondo de verdad, se nota pero no compite con
   el texto. */
.ambient-blob-1 {
  top: -28%;
  left: 62%;
  width: 1100px;
  height: 1000px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,138,31,0.16), rgba(255,90,0,0.05) 55%, transparent 75%);
  animation: drift1 48s ease-in-out infinite alternate;
}
.ambient-blob-2 {
  top: 48%;
  left: -10%;
  width: 640px;
  height: 640px;
  background: radial-gradient(closest-side, rgba(255,169,77,0.09), transparent 72%);
  animation: drift2 58s ease-in-out infinite alternate;
}
.ambient-blob-3 {
  top: 80%;
  right: -8%;
  width: 580px;
  height: 580px;
  background: radial-gradient(closest-side, rgba(255,106,0,0.08), transparent 72%);
  animation: drift3 64s ease-in-out infinite alternate;
}
/* El grano se quitó — a la resolución real se veía como una rejilla en vez
   de textura fina (bug real visto al probarlo), no compensaba el riesgo. */
@keyframes drift1 {
  from { transform: translate(-50%, 0) scale(1); }
  to   { transform: translate(-46%, 50px) scale(1.08); }
}
@keyframes drift2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(40px, -35px); }
}
@keyframes drift3 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-35px, 30px); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-blob { animation: none; }
}

body.landing header.page-header {
  background: rgba(8,8,10,0.72);
  border-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px) saturate(1.4);
  position: sticky;
  z-index: 10;
}

body.landing .brand { color: #f5f5f3; }
body.landing .lang-toggle { background: rgba(255,255,255,0.07); }
body.landing .lang-toggle button { color: #9a9aa2; }

main.landing {
  max-width: 1180px;
  padding: 0 24px 0;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Reveal-on-scroll base — la clase que activa script.js */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(.16,.8,.28,1), transform 0.8s cubic-bezier(.16,.8,.28,1);
  transition-delay: calc(var(--delay, 0) * 90ms);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,122,0,0.12);
  border: 1px solid rgba(255,122,0,0.3);
  color: #ffb066;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
}
.eyebrow-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px 2px rgba(255,122,0,0.7);
}

.section-title {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  text-align: center;
  color: #f7f7f5;
}

.section-sub {
  color: #9a9aa2;
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
  font-size: 16.5px;
}

/* ---------------- Hero ---------------- */
.hero {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 108px 0 116px;
  flex-wrap: wrap;
  position: relative;
}

.hero-copy { flex: 1 1 440px; min-width: 300px; }

.hero-title {
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 20px 0 22px;
  color: #f7f7f5;
}
.hero-title .accent { color: var(--orange); }

.hero-sub {
  font-size: 17.5px;
  color: #b3b3ba;
  max-width: 470px;
  margin-bottom: 32px;
}

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-primary {
  background: linear-gradient(135deg, #FF8A1F, #FF6A00);
  color: #100900;
  box-shadow: 0 10px 30px -10px rgba(255,122,0,0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(255,122,0,0.7); }
.btn-primary[aria-disabled="true"] { opacity: 0.6; cursor: default; pointer-events: none; }
.btn-ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
  color: #eee;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.btn-full { width: 100%; }
.btn-lg { padding: 18px 34px; font-size: 16.5px; }

.hero-note { color: #7c7c85; font-size: 13px; margin: 0; }

.hero-visual { flex: 0 0 auto; position: relative; display: flex; justify-content: center; }

.phone-glow {
  position: absolute;
  inset: -100px;
  background: radial-gradient(closest-side, rgba(255,122,0,0.4), transparent 72%);
  filter: blur(18px);
  z-index: 0;
}

.phone {
  position: relative;
  z-index: 1;
  width: 272px;
  border-radius: 44px;
  background: #000;
  padding: 10px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
}

.phone-screen {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  background: #eee;
  aspect-ratio: 1170 / 2532;
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- Statement / problema ---------------- */
.statement {
  padding: 64px 0 80px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.statement-line {
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 700;
  color: #6b6b74;
  margin: 0;
  letter-spacing: -0.01em;
}
.statement-line strong { color: #f5f5f3; font-weight: 800; }
.statement-line.accent-line strong { color: var(--orange); }

/* ---------------- Pasos ---------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 8px 0 88px;
}
.step-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 28px 24px;
}
.step-num {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: var(--orange);
  background: rgba(255,122,0,0.12);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.step-card h3 { font-size: 19px; margin: 0 0 8px; color: #f5f5f3; }
.step-card p { color: #9a9aa2; margin: 0; font-size: 14.5px; }

/* ---------------- Retos (challenge grid) ---------------- */
.challenges { padding: 24px 0 88px; }

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.challenge-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 22px 16px;
  text-align: center;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.challenge-card:hover {
  border-color: rgba(255,122,0,0.4);
  transform: translateY(-3px);
  background: rgba(255,255,255,0.055);
}

.challenge-card .challenge-icon {
  font-size: 26px;
  display: block;
  margin-bottom: 12px;
}

.challenge-card strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: #f2f2f0;
}

.challenge-card p {
  font-size: 12.5px;
  color: #8c8c94;
  margin: 0;
}

/* ---------------- Showcase — galería fija al hacer scroll (estilo Apple) ----------------
   Pedido explícito: "que las fotos no estén bailando... ir haciendo scroll y que en
   una misma pantalla las capturas vayan apareciendo, como una web de Apple hiper
   premium". Patrón "scrollytelling": `.apple-scroll` mide varias pantallas de alto
   (así hay recorrido de sobra para hacer scroll), pero `.apple-scroll-sticky` se
   queda clavado en el centro de la ventana (`position: sticky`) mientras tanto — el
   teléfono no se mueve, lo único que cambia es qué captura está encima (crossfade),
   controlado por JS según el progreso de scroll (`initAppleScroll()` en script.js).
   Sin JS (o con JS desactivado), la primera captura se queda fija y visible — no es
   un fallback roto, es un resultado correcto también. */
.apple-scroll {
  position: relative;
  height: 380vh;
}

.apple-scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}

.apple-scroll-stage {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.apple-scroll-phone { width: 264px; }

.apple-scroll-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(.16,.8,.28,1);
}
.apple-scroll-img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .apple-scroll-img { transition: none; }
}

.apple-scroll-captions {
  position: relative;
  width: 300px;
  min-height: 90px;
}
.apple-scroll-caption {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-align: left;
}
.apple-scroll-caption.is-active { opacity: 1; transform: translateY(0); }
.apple-scroll-caption strong { display: block; font-size: 21px; color: #f7f7f5; margin-bottom: 6px; }
.apple-scroll-caption span { font-size: 15px; color: #9a9aa2; }

.showcase-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.showcase-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}
.showcase-dot.is-active { background: var(--orange); transform: scale(1.35); }

@media (max-width: 720px) {
  .apple-scroll { height: 320vh; }
  .apple-scroll-stage { flex-direction: column; gap: 24px; }
  .apple-scroll-captions { width: 260px; text-align: center; }
  .apple-scroll-caption { text-align: center; }
}

/* ---------------- Racha / Rangos ---------------- */
.streak {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 24px 0 96px;
  flex-wrap: wrap;
}
.streak-copy { flex: 1 1 380px; }
.streak-copy .section-title, .streak-copy .section-sub { text-align: left; margin: 0; }
.streak-copy .section-sub { margin: 14px 0 22px; }
.streak-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.streak-list li {
  display: flex; align-items: center; gap: 10px;
  color: #c7c7cd; font-size: 14.5px;
}
.streak-list li::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  flex: none;
}
.streak-phone { flex: 0 0 auto; display: flex; justify-content: center; }
.streak-phone .phone { width: 250px; animation: none; }

/* ---------------- Precios ---------------- */
.pricing { padding: 8px 0 100px; }

.price-cards {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.price-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  padding: 30px 26px;
  min-width: 210px;
  text-align: center;
  position: relative;
}

.price-card-featured {
  border-color: rgba(255,122,0,0.55);
  background: linear-gradient(180deg, rgba(255,122,0,0.08), rgba(255,255,255,0.03));
  box-shadow: 0 0 0 1px rgba(255,122,0,0.2), 0 20px 40px -20px rgba(255,122,0,0.35);
}

.price-card-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: #100900;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.price-card-label {
  color: #9a9aa2;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.price-amount { font-size: 32px; font-weight: 800; margin-top: 8px; color: #f7f7f5; }
.price-amount span { font-size: 14px; font-weight: 500; color: #8c8c94; }

.price-savings {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #58e07a;
}

.price-note {
  text-align: center;
  color: #8c8c94;
  font-size: 13.5px;
}
.price-note strong { color: #d7d7dd; }

/* ---------------- CTA final ---------------- */
.final-cta {
  position: relative;
  text-align: center;
  padding: 96px 24px 110px;
  border-top: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
}
.final-glow {
  position: absolute;
  top: -120px; left: 50%;
  width: 620px; height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,122,0,0.28), transparent 72%);
  filter: blur(20px);
  pointer-events: none;
}
.final-cta h2 {
  position: relative;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  color: #f7f7f5;
  margin: 0 0 14px;
}
.final-cta p { position: relative; color: #9a9aa2; margin: 0 0 30px; font-size: 16px; }

/* ---------------- Footer (landing) ---------------- */
body.landing footer.site-footer {
  max-width: 1180px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #7c7c85;
  padding: 40px 24px 48px;
  position: relative;
  z-index: 1;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #6b6b74; margin-bottom: 2px; }
.footer-col a { color: #b3b3ba; text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: var(--orange); }
.footer-bottom { font-size: 12.5px; color: #6b6b74; margin: 0; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .challenge-grid { grid-template-columns: repeat(2, 1fr); }
  .streak { flex-direction: column; text-align: center; }
  .streak-copy .section-title, .streak-copy .section-sub { text-align: center; }
  .streak-list { align-items: center; }
}

@media (max-width: 600px) {
  .hero { padding: 56px 0 64px; gap: 40px; }
  .phone { width: 230px; }
}