/* v8 · arte y distribución. Arte base tomado de Codex (paleta, grano, trazo naranja); composición y decisiones de Claude. */
:root { --v8-cream: #fff6e7; --v8-ink: #111827; --v8-orange: #f28a00; --v8-orange-d: #b95b00; --v8-mint: #a8e3d1; --v8-sky: #e4f4fa; --v8-muted: #536174; }
html, body { overflow-x: clip; }
body { background: var(--v8-cream); }
/* grano fino, 3 %: textura sin color plano */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* trazo naranja bajo la palabra clave de los títulos */
.acc { position: relative; white-space: nowrap; }
.acc::after { content: ""; position: absolute; left: 1%; right: 2%; bottom: -.08em; height: .13em; min-height: 4px; background: var(--v8-orange); border-radius: 99px; transform: rotate(-1.2deg); z-index: -1; }
.ngs-title .acc::after { z-index: 0; opacity: .9; bottom: -.04em; }

/* ───── Hero ───── */
@media (min-width: 1041px) {
  header.hero { isolation: isolate; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
  header.hero::before { /* zona celeste que enmarca el 3D */
    content: ""; position: absolute; z-index: -1; right: -5%; top: 4%; width: 64%; height: 88%;
    background: var(--v8-sky); opacity: .8; filter: blur(22px); border-radius: 46% 54% 50% 50% / 52% 44% 56% 48%;
  }
  header.hero h1 { max-width: none; white-space: nowrap; margin: 0 0 14px; font-size: clamp(2.3rem, 3.3vw, 3.15rem); line-height: 1.02; letter-spacing: -.03em; color: var(--v8-ink); }
  header.hero .hero-visual { transform: translateX(clamp(0px, calc((100vw - 1100px) * .5), 180px)); }
}
@media (max-width: 600px) { header.hero h1 { font-size: clamp(1.6rem, 7.6vw, 2.2rem); line-height: 1.06; } }

.hero-benefits { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; max-width: 520px; position: relative; z-index: 2; }
.hero-benefits li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.hero-benefits strong { display: block; font-size: 1.02rem; font-weight: 800; color: var(--v8-ink); line-height: 1.2; }
.hero-benefits li > div > span { display: block; margin-top: 2px; font-size: .88rem; line-height: 1.35; color: var(--v8-muted); font-weight: 600; }
.hero-benefits .hb-ico { width: 56px; height: 56px; border-radius: 16px; background: #fff; border: 1px solid #f0e2c9; display: grid; place-items: center; padding: 0; box-shadow: none; }
.hero-benefits .hb-ico:not(.hb-7):not(.hb-score) > svg { width: 30px; height: 30px; fill: none; stroke: var(--v8-orange-d); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-benefits .hb-7 { width: 56px; height: 56px; flex: none; }
.hero-benefits .hb-7 > svg { width: 56px; height: 56px; }
.hero-benefits .hb-score { background: transparent; border: 0; }
.hero-benefits .hb-score svg { width: 56px; height: 56px; }
.hb-score .trk { fill: none; stroke: #ecdcc2; stroke-width: 6; }
.hb-score .val { fill: none; stroke: var(--v8-orange); stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 28px 28px; }
.hb-score text { font: 800 19px Inter, system-ui, sans-serif; fill: var(--v8-ink); stroke: none; }
@media (max-width: 1040px) { .hero-benefits { margin-top: 20px; } }

/* ───── Coaches: se mantiene la sección real (movimiento y voz); solo cambia el fondo ───── */
#coaches.ngs-coaches { background: transparent; }
#coaches .ngs-voice { box-shadow: none; }

/* ───── Armonía de color: del azul-gris frío a una paleta cálida por zonas (sin degradados de fondo) ───── */
.ngs-story { background: #fffbf3; }
.ngs-plan { background: #fff1de; }
.ngs-watchsec { background: #e9f6f0; }
.ngs-dna { background: #fffbf3; }
.ngs-modes { background: #eaf4f8; }
.ngs-food { background: #fff6e7; }
.ngs-trust { background: #fffbf3; }
.ngs-story, .ngs-plan, .ngs-watchsec, .ngs-dna, .ngs-modes, .ngs-food, .ngs-trust { isolation: isolate; overflow: clip; }
.ngs-story::before, .ngs-plan::before, .ngs-watchsec::before, .ngs-dna::before, .ngs-modes::before, .ngs-food::before, .ngs-trust::before {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 420px; filter: blur(46px); opacity: .55; pointer-events: none;
  border-radius: 46% 54% 50% 50% / 52% 44% 56% 48%;
}
.ngs-story::before { right: -120px; top: 12%; background: #e4f4fa; }
.ngs-plan::before { right: -100px; top: -80px; background: #fbd9b4; }
.ngs-watchsec::before { left: -140px; bottom: -120px; background: #b9e6d4; }
.ngs-dna::before { left: -120px; top: 30%; background: #ffe3bd; opacity: .45; }
.ngs-modes::before { right: -120px; bottom: -140px; background: #cfe9f3; }
.ngs-food::before { left: -120px; top: -60px; background: #ffd8b0; opacity: .5; }
.ngs-trust::before { right: -140px; top: 10%; background: #d9f0e6; opacity: .5; }

/* títulos: palabras que no se pegan */
.ngs-title { letter-spacing: -.028em; word-spacing: .07em; }
header.hero h1, #sistema-title { word-spacing: .06em; }

/* pantallas bajas (p. ej. Mac con más espacio o ventana corta): el 3D se reduce para que cuadre en la primera vista */
@media (min-width: 1041px) and (max-height: 760px) {
  header.hero .hero-product-scene { transform: scale(.74); transform-origin: center top; margin-bottom: -170px; }
  header.hero { padding-top: 22px; padding-bottom: 20px; }
}

/* coaches: se quita la nota técnica bajo los selectores */
#coaches .ngs-voice-note, #coaches [data-voice-note] { display: none; }

/* v8 · correcciones tras la revisión de Enrique */
/* el trazo naranja también se ve en secciones oscuras (antes quedaba tapado por el fondo de la sección) */
.acc { isolation: isolate; }
/* títulos de tarjeta final y sistema: palabras que no se pegan */
.ngs-cta-title, #sistema-title, [id$="-title"] { letter-spacing: -.028em; word-spacing: .07em; }
/* tarjetas de Confianza y fondo de Modos en tonos cálidos, no azul-gris frío */
.ngs-trust-list li { background: #fff; box-shadow: inset 0 0 0 1px #f0e2c9; }
.ngs-modes { background: #f6efe2; }
.ngs-modes::before { background: #f3dcc0; opacity: .5; }