/* Gluvi · web de presentación. Colores y tipografía del Brand Book (mobile/lib/core/theme). */

@font-face { font-family: "Inter"; src: url("../fonts/inter-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-bold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }

:root {
  --turq: #20C7B7;
  --turq-strong: #0B7067;   /* texto y botones sobre fondo claro: contraste AA */
  --turq-soft: #7FE6DB;
  --purple: #7B61FF;
  --coral: #FF6B6B;
  --amber: #FFB547;
  --midnight: #1E2B5C;
  --ink: #0B1026;           /* fondo de las secciones oscuras */
  --ink-2: #121A3A;
  --grey: #5B6372;
  --warm: #F9F8F6;
  --surface: #FFFFFF;
  --line: #E7E4DF;
  --line-dark: rgba(255, 255, 255, .10);
  --radius-xl: 32px;
  --radius-l: 24px;
  --radius-m: 16px;
  --shadow: 0 1px 2px rgba(30, 43, 92, .06), 0 8px 24px rgba(30, 43, 92, .08);
  --shadow-lg: 0 30px 80px -20px rgba(11, 16, 38, .45);
  --max: 1200px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; }
/* overflow-x: clip en html y body: en el móvil, `hidden` solo en body no impide que la página se
   arrastre de lado (cinta inclinada, halos); `clip` además no rompe los `position: sticky`. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--midnight);
  background: var(--warm);
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--turq-strong); }
a:hover { color: var(--midnight); }
:focus-visible { outline: 3px solid var(--turq); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { line-height: 1.08; margin: 0 0 16px; letter-spacing: -.03em; font-weight: 800; }
h3 { letter-spacing: -.02em; line-height: 1.2; font-weight: 700; }
p { margin: 0 0 16px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--midnight); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* Barra de progreso de lectura */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--turq), var(--purple)); z-index: 60; pointer-events: none; }

/* ---------- Cabecera ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(249, 248, 246, .85); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, color .3s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--midnight); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; opacity: .85; }
.nav-links a:hover { opacity: 1; }
.nav-links a.btn { opacity: 1; }

/* Sobre la portada oscura la cabecera es transparente y clara. */
.site-header.on-dark { position: fixed; left: 0; right: 0; background: transparent; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.on-dark .brand { color: #fff; }
.site-header.on-dark.scrolled { background: rgba(11, 16, 38, .72); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom-color: var(--line-dark); }

/* ---------- Botones ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .2s, color .2s; }
.btn-primary { background: var(--turq-strong); color: #fff; box-shadow: 0 10px 30px -10px rgba(11, 112, 103, .7); }
.btn-primary:hover { background: #095C55; color: #fff; box-shadow: 0 16px 40px -12px rgba(11, 112, 103, .8); }
.btn-glow { background: linear-gradient(135deg, var(--turq) 0%, #3BD6C6 55%, #A99BFF 130%); color: #04201D; box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, 0 18px 50px -12px rgba(32, 199, 183, .65); }
.btn-glow:hover { color: #04201D; box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 22px 60px -10px rgba(32, 199, 183, .85); }
.btn-ghost { background: transparent; color: var(--midnight); box-shadow: inset 0 0 0 2px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--midnight); color: var(--midnight); }
.btn-ghost-dark { background: rgba(255,255,255,.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.btn-ghost-dark:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--turq-strong); margin-bottom: 20px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--turq); animation: ping 2s infinite; }
.dark .eyebrow, .hx .eyebrow { color: var(--turq-soft); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(32,199,183,.6); } 80%, 100% { box-shadow: 0 0 0 12px rgba(32,199,183,0); } }

.grad-text { background: linear-gradient(100deg, var(--turq) 0%, var(--turq-soft) 40%, #B3A6FF 75%, var(--purple) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 8s ease-in-out infinite alternate; }
@keyframes sheen { to { background-position: 100% 0; } }

section { padding: 120px 0; position: relative; }
.dark { background: var(--ink); color: #E6E9F5; }
.dark h2, .dark h3 { color: #fff; }
.section-head { max-width: 760px; margin-bottom: 64px; }
.section-head h2 { font-size: clamp(36px, 5.4vw, 64px); }
.section-head p { font-size: 20px; color: var(--grey); }
.dark .section-head p { color: #A9B1CC; }

/* Aparición al hacer scroll (solo si hay JavaScript: main.js pone .js en <html>). */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Portada ---------- */
.hx { position: relative; min-height: 100vh; min-height: 100svh; padding: 140px 0 96px; background: radial-gradient(1200px 700px at 85% 10%, #1B2A6B 0%, transparent 60%), radial-gradient(900px 600px at 0% 100%, #0D3A44 0%, transparent 60%), var(--ink); color: #fff; overflow: hidden; display: flex; align-items: center; }
.hx canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hx .grain { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 3px 3px; mask-image: linear-gradient(180deg, #000 0%, transparent 90%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%); pointer-events: none; }
.hx-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.hx h1 { font-size: clamp(48px, 7.6vw, 108px); line-height: .96; letter-spacing: -.045em; margin-bottom: 28px; }
.hx h1 .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hx h1 .line > span { display: inline-block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { transform: none; } }
.hx .lead { font-size: clamp(18px, 1.6vw, 21px); color: #C3C9DF; max-width: 540px; margin-bottom: 36px; }
.hx-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hx-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: #9EA6C2; margin: 0; padding: 0; list-style: none; }
.hx-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hx-trust svg { width: 16px; height: 16px; color: var(--turq); }
.fade-up { opacity: 0; transform: translateY(18px); animation: fadeUp 1s var(--ease) forwards; animation-delay: var(--d, .6s); }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

.hx-visual { position: relative; perspective: 1400px; }
.hx-tilt { position: relative; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .6s var(--ease); transform-style: preserve-3d; }
.hx-photo { position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 960 / 1108; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.08); clip-path: inset(100% 0 0 0 round var(--radius-xl)); animation: unveil 1.4s var(--ease) .25s forwards; }
@keyframes unveil { to { clip-path: inset(0 0 0 0 round var(--radius-xl)); } }
.hx-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); animation: settle 2.6s var(--ease) .25s forwards; }
@keyframes settle { to { transform: scale(1); } }
.hx-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,16,38,.55)); }

/* Punto que late sobre el sensor de la foto */
.pin { position: absolute; left: 28.4%; top: 60%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--turq); box-shadow: 0 0 0 4px rgba(255,255,255,.9); z-index: 3; opacity: 0; animation: fadeUp .6s var(--ease) 1.6s forwards; }
.pin::before, .pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--turq); animation: ripple 2.4s ease-out infinite; }
.pin::after { animation-delay: 1.2s; }
@keyframes ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(4); opacity: 0; } }

.glass { background: rgba(255, 255, 255, .8); color: var(--midnight); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255,255,255,.6); border-radius: 20px; box-shadow: 0 20px 50px -18px rgba(11, 16, 38, .55); }
.float { position: absolute; z-index: 4; opacity: 0; animation: pop .9s var(--ease) forwards, bob 6s ease-in-out infinite; animation-delay: var(--d, 1.8s), calc(var(--d, 1.8s) + .9s); }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.live { left: -56px; top: 14%; width: 250px; padding: 16px 18px 12px; }
.live .row { white-space: nowrap; gap: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--grey); letter-spacing: .02em; }
.live .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(30, 140, 92, .12); color: #1E7A52; font-size: 11px; }
.live .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.live .val { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 2px; }
.live .val b { font-size: 44px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.live .val small { font-size: 13px; color: var(--grey); font-weight: 600; }
.live .val .arrow { margin-left: auto; align-self: center; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(32,199,183,.15); color: var(--turq-strong); transition: transform .6s var(--ease); }
.live .val .arrow svg { width: 16px; height: 16px; }
.live svg.spark { width: 100%; height: 48px; display: block; }
.live .demo { font-size: 10px; color: #6B7183; margin-top: 2px; }

.meal-chip { right: -36px; bottom: 26%; padding: 12px 16px 12px 12px; display: flex; gap: 12px; align-items: center; --d: 2.2s; }
.meal-chip .ic { width: 42px; height: 42px; border-radius: 12px; background: #FFE9E2; display: grid; place-items: center; color: #D9534F; flex: none; }
.meal-chip .ic svg { width: 22px; height: 22px; }
.meal-chip strong { display: block; font-size: 14px; line-height: 1.25; }
.meal-chip span { font-size: 12px; color: var(--grey); }
.meal-chip .conf { display: flex; gap: 3px; margin-top: 5px; }
.meal-chip .conf i { width: 16px; height: 4px; border-radius: 2px; background: var(--turq); }
.meal-chip .conf i:last-child { background: #DDE2EA; }

.ai-chip { left: 6%; bottom: -26px; max-width: 310px; padding: 14px 16px; font-size: 14px; line-height: 1.45; --d: 2.6s; }
.ai-chip .tag { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5B43E0; margin-bottom: 4px; }
.ai-chip .tag svg { width: 12px; height: 12px; }

.scroll-cue { position: absolute; left: 50%; bottom: 26px; z-index: 3; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; border: 2px solid rgba(255,255,255,.35); }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Cinta ---------- */
.marquee { background: var(--turq); color: #04201D; overflow: hidden; padding: 22px 0; transform: rotate(-1.2deg); margin: -20px -12px 0; position: relative; z-index: 5; box-shadow: 0 20px 40px -20px rgba(11,16,38,.35); }
.marquee .track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.marquee span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #04201D; opacity: .5; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Un día con diabetes ---------- */
.day { padding: 0; background: var(--warm); }
.day-scroller { height: 560vh; position: relative; }
.day-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: 48px; }
.day-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; width: 100%; }
.day-intro { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--turq-strong); margin-bottom: 6px; }
.clock { font-size: clamp(64px, 9.4vw, 132px); font-weight: 800; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; margin-bottom: 18px; color: var(--midnight); }
.moment { min-height: 176px; }
.moment h3 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 10px; }
.moment p { font-size: 18px; color: var(--grey); max-width: 460px; }
.moment.swap { animation: swap .6s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.decisions { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); width: fit-content; }
.decisions b { font-size: 40px; font-weight: 800; letter-spacing: -.04em; color: #D9534F; font-variant-numeric: tabular-nums; min-width: 2.4ch; line-height: 1; }
.decisions span { font-size: 14px; line-height: 1.35; color: var(--grey); max-width: 200px; }
.day-chart { position: relative; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: 28px 24px 44px; }
.day-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.day-chart .axis { font-size: 13px; fill: #8A90A2; font-family: inherit; }
.day-chart .demo-note { position: absolute; right: 24px; top: 16px; font-size: 11px; color: #6B7183; }
.day-end { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: rgba(255, 255, 255, .95); border-radius: var(--radius-xl); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); padding: 32px; }
.day-end.show { opacity: 1; pointer-events: auto; }
.day-end b { display: block; font-size: clamp(72px, 10vw, 136px); font-weight: 900; letter-spacing: -.06em; line-height: 1; color: #D9534F; }
.day-end p { font-size: 20px; max-width: 440px; margin: 12px auto 0; color: var(--midnight); }
.day-end small { display: block; margin-top: 14px; color: var(--grey); font-size: 12px; }
.day-bar { position: absolute; left: 24px; right: 24px; bottom: 20px; height: 4px; border-radius: 2px; background: var(--line); }
.day-bar i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--turq), var(--purple)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- Cifras ---------- */
.numbers { overflow: hidden; }
.numbers::before { content: ""; position: absolute; width: 1000px; height: 1000px; left: 50%; top: -480px; margin-left: -500px; background: radial-gradient(closest-side, rgba(123,97,255,.22), transparent); pointer-events: none; }
.numbers-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center; }
.big-stat { padding: 28px 0; border-top: 1px solid var(--line-dark); }
.big-stat:last-child { border-bottom: 1px solid var(--line-dark); }
.big-stat .n { font-size: clamp(56px, 7.6vw, 100px); font-weight: 900; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; color: #fff; }
.big-stat .n small { font-size: .36em; letter-spacing: -.02em; font-weight: 700; margin-left: 6px; color: #A9B1CC; }
.big-stat .n.accent { background: linear-gradient(100deg, var(--turq), var(--turq-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big-stat p { margin: 10px 0 0; font-size: 18px; color: #C3C9DF; max-width: 540px; }
.big-stat .src { display: block; font-size: 12px; color: #8790B0; margin-top: 6px; }
.dots-wrap { text-align: center; }
.dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; max-width: 420px; margin: 0 auto 26px; }
.dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.1); transition: background .5s, box-shadow .5s, transform .5s var(--ease); }
.dots i.on { background: var(--turq); box-shadow: 0 0 18px rgba(32,199,183,.8); transform: scale(1.1); }
.dots i.on.unk { background: var(--purple); box-shadow: 0 0 18px rgba(123,97,255,.9); }
.legend-unk { color: #B3A6FF; }
.dots-wrap p { color: #C3C9DF; font-size: 18px; max-width: 400px; margin: 0 auto; }
.dots-wrap b { color: #fff; }
.dots-wrap .src { display: block; font-size: 12px; color: #8790B0; margin-top: 8px; }

/* ---------- Funciones (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.tile { position: relative; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; min-height: 300px; display: flex; flex-direction: column; isolation: isolate; }
.tile .body { padding: 28px; position: relative; z-index: 2; }
.tile h3 { font-size: 24px; margin-bottom: 8px; }
.tile p { color: var(--grey); margin: 0; }
.tile .k { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--turq-strong); margin-bottom: 10px; }
.t-span4 { grid-column: span 4; }
.t-span3 { grid-column: span 3; }
.t-span2 { grid-column: span 2; }
.t-span6 { grid-column: 1 / -1; }
.tile.photo { color: #fff; min-height: 440px; justify-content: flex-end; }
.tile.photo > img, .tile.photo .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile.photo > img { z-index: -2; }
.tile.photo:hover > img, .tile.photo:hover .stage img { transform: scale(1.05); }
.tile.photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,16,38,0) 40%, rgba(11,16,38,.88) 100%); }
.tile.photo h3 { color: #fff; }
.tile.photo p { color: #DCE0EE; }
.tile.photo .k { color: var(--turq-soft); }

/* Escaneo de la comida */
.scan { min-height: 560px; }
.scan .stage { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.scan .sweep { position: absolute; left: 0; right: 0; top: 0; height: 32%; z-index: 2; background: linear-gradient(180deg, rgba(32,199,183,0), rgba(32,199,183,.3) 85%, rgba(127,230,219,.95) 100%); transform: translateY(-110%); opacity: 0; }
.scan.run .sweep { animation: sweep 2.2s var(--ease) .2s 1 forwards; }
@keyframes sweep { 0% { opacity: 1; transform: translateY(-110%); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(330%); } }
.scan .box { position: absolute; z-index: 3; border: 2px solid rgba(255,255,255,.95); border-radius: 16px; opacity: 0; transform: scale(1.1); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d); }
.scan.run .box { opacity: 1; transform: none; }
.scan .box span { position: absolute; left: -2px; top: -36px; white-space: nowrap; padding: 6px 11px; border-radius: 10px; background: #fff; color: var(--midnight); font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }
.scan .box span b { color: var(--turq-strong); }
.scan-total { position: absolute; right: 22px; top: 22px; z-index: 4; padding: 14px 16px; min-width: 220px; opacity: 0; transform: translateY(-10px); transition: opacity .6s var(--ease) 2.4s, transform .6s var(--ease) 2.4s; }
.scan.run .scan-total { opacity: 1; transform: none; }
.scan-total .lbl { font-size: 12px; color: var(--grey); font-weight: 700; }
.scan-total .tot { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.scan-total .tot small { font-size: 14px; font-weight: 600; color: var(--grey); }
.scan-total .meter { height: 6px; border-radius: 3px; background: #E4E8EF; margin: 8px 0 4px; overflow: hidden; }
.scan-total .meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--turq)); border-radius: 3px; transition: width 1.2s var(--ease) 2.8s; }
.scan.run .scan-total .meter i { width: 66%; }
.scan-total .conf { font-size: 12px; color: var(--grey); }

/* Familia: foto a un lado, texto al otro */
.tile.split { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 460px; background: var(--ink-2); color: #fff; }
.tile.split > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; min-height: 360px; }
.tile.split .body { align-self: center; padding: 48px; }
.tile.split h3 { color: #fff; font-size: clamp(28px, 3vw, 40px); }
.tile.split p { color: #A9B1CC; font-size: 18px; }
.tile.split .k { color: var(--turq-soft); }
.share { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; max-width: 380px; }
.share li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); font-size: 15px; color: #C3C9DF; }
.share b { color: #fff; }
.share .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #0B1026; flex: none; }
.share i { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--turq-soft); }
@media (max-width: 760px) { .tile.split { grid-template-columns: 1fr; } .tile.split > img { height: 320px; } .tile.split .body { padding: 28px; } }

/* Chat */
.tile.chat { background: var(--ink-2); color: #fff; }
.tile.chat h3 { color: #fff; }
.tile.chat p { color: #A9B1CC; }
.tile.chat .k { color: #B3A6FF; }
.bubbles { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.bub { max-width: 90%; padding: 12px 15px; border-radius: 18px; font-size: 15px; line-height: 1.5; }
.bub.me { align-self: flex-end; background: var(--turq); color: #04201D; border-bottom-right-radius: 6px; font-weight: 600; }
.bub.ai { align-self: flex-start; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-bottom-left-radius: 6px; color: #E6E9F5; min-height: 48px; }
.bub.ai .caret { display: inline-block; width: 2px; height: 1em; background: #B3A6FF; vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #A9B1CC; animation: dotty 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dotty { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Informe: tiempo en rango */
.tir { padding: 0 28px 28px; margin-top: auto; }
.tir-big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.tir-big b { font-size: 56px; font-weight: 900; letter-spacing: -.05em; line-height: 1; color: var(--turq-strong); font-variant-numeric: tabular-nums; }
.tir-big > span { font-size: 14px; color: var(--grey); line-height: 1.3; }
.tir-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: #EEF1F5; }
.tir-bar i { display: block; width: 0; transition: width 1.4s var(--ease); transition-delay: var(--d, 0s); }
.tir-bar .vlow { background: #B83232; } .tir-bar .low { background: var(--coral); } .tir-bar .in { background: var(--turq); } .tir-bar .high { background: var(--amber); } .tir-bar .vhigh { background: #E08A00; }
.tir-goal { position: relative; height: 22px; margin-top: 8px; font-size: 12px; color: var(--grey); }
.tir-goal::before { content: ""; position: absolute; left: 70%; top: -30px; width: 2px; height: 30px; background: var(--midnight); opacity: .55; }
.tir-goal span { position: absolute; right: 30%; padding-right: 6px; white-space: nowrap; }
.tir-note { font-size: 12px; color: var(--grey); margin: 4px 0 0; }

/* ---------- Banda de foto ---------- */
.band { position: relative; min-height: 88vh; display: flex; align-items: flex-end; padding: 0; overflow: hidden; color: #fff; background: var(--ink); }
.band > img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; object-position: 30% 40%; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,16,38,.05) 0%, rgba(11,16,38,.25) 45%, rgba(11,16,38,.85) 100%), linear-gradient(0deg, rgba(11,16,38,.6), transparent 50%); }
.band .container { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 96px; display: flex; justify-content: flex-end; }
.band blockquote { margin: 0; max-width: 620px; font-size: clamp(32px, 4.6vw, 60px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.band blockquote span { color: var(--turq-soft); }

/* ---------- Principios ---------- */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.principle { position: relative; padding: 36px 30px 32px; border-radius: var(--radius-l); background: rgba(255,255,255,.035); border: 1px solid var(--line-dark); overflow: hidden; }
.principle::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(32,199,183,.22), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.principle:hover::before { opacity: 1; }
.principle .num { font-size: 72px; font-weight: 900; letter-spacing: -.06em; line-height: 1; background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; }
.principle .k { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--turq-soft); margin-bottom: 8px; }
.principle h3 { font-size: 26px; }
.principle p { color: #A9B1CC; margin: 0; }

/* ---------- Beta ---------- */
.beta { background: var(--warm); overflow: hidden; }
.beta-card { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 64px; border-radius: 40px; background: var(--ink); color: #E6E9F5; overflow: hidden; isolation: isolate; }
.beta-card::before { content: ""; position: absolute; inset: -50%; z-index: -2; background: conic-gradient(from 0deg, transparent 0 55%, rgba(32,199,183,.9) 68%, rgba(123,97,255,.9) 80%, transparent 92%); animation: spin 9s linear infinite; }
.beta-card::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 38px; background: radial-gradient(600px 400px at 0% 0%, rgba(32,199,183,.18), transparent 60%), radial-gradient(600px 400px at 100% 100%, rgba(123,97,255,.2), transparent 60%), var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.beta-card h2 { font-size: clamp(36px, 4.6vw, 56px); color: #fff; }
.beta-card .sub { font-size: 19px; color: #C3C9DF; }
.checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: #E6E9F5; }
.checks svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgba(32,199,183,.18); color: var(--turq); margin-top: 1px; }
.waitlist { background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); border-radius: 28px; padding: 32px; align-self: center; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; color: #fff; }
.field .opt { font-weight: 400; color: #A9B1CC; }
.field input, .field select { width: 100%; min-height: 54px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: inherit; transition: border-color .2s, background .2s, box-shadow .2s; }
.field select option { color: var(--midnight); background: #fff; }
.field input::placeholder { color: #8790B0; }
.field input:focus, .field select:focus { outline: none; border-color: var(--turq); background: rgba(255,255,255,.09); box-shadow: 0 0 0 4px rgba(32,199,183,.25); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #A9B1CC; margin: 6px 0 22px; line-height: 1.5; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--turq); flex: none; }
.consent a { color: var(--turq-soft); }
.waitlist .btn { width: 100%; }
.hp { position: absolute; left: -9999px; }
.form-msg { min-height: 24px; margin: 14px 0 0; font-size: 15px; }
.form-msg.ok { color: var(--turq-soft); }
.form-msg.err { color: #FF9C9C; }

/* ---------- Aviso ---------- */
.disclaimer { padding: 0 0 96px; background: var(--warm); }
.disclaimer .box { display: flex; gap: 16px; padding: 22px 26px; border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow); font-size: 15px; color: var(--grey); }
.disclaimer .box p { margin: 0; }
.disclaimer svg { flex: none; width: 24px; height: 24px; color: var(--turq-strong); margin-top: 2px; }

/* ---------- Pie ---------- */
.site-footer { background: var(--ink); color: #A9B1CC; padding: 80px 0 32px; font-size: 15px; overflow: hidden; }
.site-footer a { color: #E6E9F5; text-decoration: none; }
.site-footer a:hover { color: var(--turq-soft); }
.site-footer .brand { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-grid p { margin: 12px 0 0; }
.site-footer h4 { color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
/* Amigos de Gluvi: tarjeta con la pantalla de Gluvi Display, la integración prevista y el acceso a su web */
.friends { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; align-items: center; margin: 40px 0 0; padding: 22px 26px; border-radius: 20px; border: 1px solid rgba(127,230,219,.25); background: linear-gradient(135deg, rgba(32,199,183,.12), rgba(123,97,255,.08) 70%, transparent); }
.friends-device { width: 112px; }
.fd-screen { aspect-ratio: 16 / 10; border-radius: 10px; background: #0E1222; border: 2px solid #2A3157; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.04); }
.fd-v { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: #2BC48A; line-height: 1; }
.fd-u { font-size: 9px; font-weight: 600; color: #A9B1CC; }
.fd-base { width: 48px; height: 8px; margin: 3px auto 0; border-radius: 0 0 6px 6px; background: #2A3157; }
.friends-k { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--turq-soft); }
.site-footer .friends h4 { font-size: 22px; letter-spacing: -.02em; text-transform: none; margin: 4px 0 6px; }
.friends p { margin: 0; color: #A9B1CC; }
.friends-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(32,199,183,.14); color: var(--turq-soft); font-size: 12px; font-weight: 700; }
.friends-badge svg { width: 14px; height: 14px; }
.site-footer .friends-cta { color: #04201D; white-space: nowrap; }
.site-footer .friends-cta:hover { color: #04201D; }
@media (max-width: 760px) {
  .friends { grid-template-columns: auto minmax(0, 1fr); }
  .friends-cta { grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 480px) { .friends { grid-template-columns: 1fr; } .friends-device { display: none; } }
.credits { font-size: 13px; color: #8790B0; margin: 20px 0 0; }
.site-footer .credits a { color: #A9B1CC; text-decoration: underline; }
.wordmark { font-size: clamp(120px, 26vw, 380px); font-weight: 900; letter-spacing: -.07em; line-height: .8; margin: 48px 0 0 -.04em; background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.copy { font-size: 13px; color: #8790B0; margin: 8px 0 0; }

/* ---------- Páginas legales y 404 (usan la cabecera clara) ---------- */
.hero { padding: 96px 0; }
.wash { position: relative; overflow: hidden; }
.wash::before, .wash::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.wash::before { width: 620px; height: 620px; left: -220px; top: -260px; background: rgba(32, 199, 183, .22); }
.wash::after { width: 560px; height: 560px; right: -200px; bottom: -260px; background: rgba(123, 97, 255, .16); }
.wash > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(40px, 6vw, 72px); }
.lead { font-size: 20px; color: var(--grey); }
.legal { padding: 56px 0 80px; }
.legal .container { max-width: 760px; }
.legal h1 { font-size: clamp(34px, 5vw, 46px); }
.legal h2 { font-size: 24px; margin: 36px 0 10px; }
.legal p, .legal li { color: #3A4256; }
.placeholder { background: #FFF4D6; padding: 0 4px; border-radius: 4px; }
.draft-note { background: #FFF4D6; border-radius: var(--radius-m); padding: 14px 18px; font-size: 15px; color: #5C3F00; }

/* ---------- Documentos (privacidad, términos, cookies, aviso legal) ---------- */
.doc-hero { position: relative; padding: 150px 0 72px; background: radial-gradient(900px 500px at 85% 0%, #1B2A6B 0%, transparent 60%), radial-gradient(700px 400px at 0% 100%, #0D3A44 0%, transparent 60%), var(--ink); color: #fff; overflow: hidden; }
.doc-hero h1 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -.045em; margin-bottom: 14px; }
.doc-hero p { color: #C3C9DF; font-size: 19px; max-width: 680px; margin: 0; }
.doc-hero .meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.doc-hero .meta span { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line-dark); color: #C3C9DF; }
.doc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.doc-tabs a { font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; color: #C3C9DF; text-decoration: none; border: 1px solid var(--line-dark); }
.doc-tabs a:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.doc-tabs a[aria-current="page"] { background: var(--turq); color: #04201D; border-color: var(--turq); }
.doc { padding: 64px 0 104px; }
.doc-grid { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: start; }
.toc { position: sticky; top: 96px; font-size: 14px; }
.toc p { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc a { display: block; padding: 7px 12px; border-radius: 10px; color: var(--grey); text-decoration: none; line-height: 1.35; border-left: 2px solid transparent; }
.toc a:hover { color: var(--midnight); background: rgba(30,43,92,.05); }
.toc a.active { color: var(--turq-strong); background: rgba(32,199,183,.1); border-left-color: var(--turq); font-weight: 600; }
.doc-body { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 48px 56px; max-width: 820px; }
.doc-body h2 { font-size: 26px; margin: 48px 0 14px; scroll-margin-top: 96px; }
.doc-body h2:first-of-type { margin-top: 8px; }
.doc-body h3 { font-size: 19px; margin: 26px 0 8px; }
.doc-body p, .doc-body li { color: #3A4256; }
.doc-body ul { padding-left: 22px; margin: 0 0 16px; }
.doc-body li { margin-bottom: 8px; }
.doc-body .summary { background: linear-gradient(135deg, rgba(32,199,183,.1), rgba(123,97,255,.08)); border-radius: var(--radius-m); padding: 22px 26px; margin-bottom: 8px; }
.doc-body .summary h2 { margin: 0 0 10px; font-size: 20px; }
.doc-body .summary ul { margin: 0; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 20px; }
.doc-body th, .doc-body td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); color: #3A4256; }
.doc-body th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); background: var(--warm); }
.doc-body .table-wrap { overflow-x: auto; }
.doc-body .callout { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--radius-m); background: #FFF1F1; color: #6B1F1F; margin: 16px 0; }
.doc-body .callout p { color: inherit; margin: 0; }
.doc-body .callout svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.doc-body .draft-note { margin-bottom: 28px; }
.back { margin-top: 40px; }

/* 404 */
.nf { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; background: radial-gradient(900px 600px at 50% 0%, #1B2A6B 0%, transparent 60%), var(--ink); color: #fff; padding: 120px 16px 64px; overflow: hidden; position: relative; }
.nf .code { font-size: clamp(120px, 24vw, 280px); font-weight: 900; letter-spacing: -.07em; line-height: .85; background: linear-gradient(180deg, #fff 10%, rgba(255,255,255,.08)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
.nf h1 { font-size: clamp(30px, 4vw, 44px); }
.nf p { color: #C3C9DF; font-size: 19px; max-width: 520px; margin: 0 auto 32px; }
.nf svg.flat { display: block; width: min(560px, 90vw); height: auto; margin: 0 auto 28px; overflow: visible; }

/* 404 animada: la curva se dibuja, se pierde la señal y el punto la busca. */
.nf > div { position: relative; z-index: 1; }
.nf-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .55; }
.nf-orb.o1 { width: 520px; height: 520px; background: rgba(32,199,183,.35); left: -160px; bottom: -200px; animation: drift 14s ease-in-out infinite alternate; }
.nf-orb.o2 { width: 460px; height: 460px; background: rgba(123,97,255,.35); right: -140px; top: -120px; animation: drift 17s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(120px, -80px) scale(1.15); } }
.nf-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s var(--ease) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.nf-dot { opacity: 0; animation: fadeUp .4s var(--ease) 1.9s forwards; }
.nf-wave { transform-box: fill-box; transform-origin: center; animation: radar 2.2s ease-out 2.1s infinite; opacity: 0; }
.nf-wave.w2 { animation-delay: 3.2s; }
@keyframes radar { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
.nf-dashes path { opacity: .15; animation: seek 2s ease-in-out 2s infinite; }
.nf-dashes path:nth-child(2) { animation-delay: 2.2s; }
.nf-dashes path:nth-child(3) { animation-delay: 2.4s; }
.nf-dashes path:nth-child(4) { animation-delay: 2.6s; }
.nf-dashes path:nth-child(5) { animation-delay: 2.8s; }
@keyframes seek { 0%, 100% { opacity: .15; } 40% { opacity: 1; stroke: #7FE6DB; } }
.nf-label { font: 600 13px Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; fill: #7FE6DB; opacity: 0; animation: fadeUp .5s var(--ease) 2s forwards, blinkSoft 1.6s ease-in-out 2.5s infinite; }
@keyframes blinkSoft { 50% { opacity: .35; } }
.nf .code { position: relative; display: inline-block; animation: rise404 1.1s var(--ease) both; }
@keyframes rise404 { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
.nf .code::before, .nf .code::after { content: attr(data-text); position: absolute; inset: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; opacity: 0; pointer-events: none; }
.nf .code::before { color: var(--turq); animation: glitchA 6s steps(1) 2.5s infinite; }
.nf .code::after { color: var(--purple); animation: glitchB 6s steps(1) 2.5s infinite; }
@keyframes glitchA {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  91% { opacity: .85; transform: translate(-6px, 2px); clip-path: inset(12% 0 60% 0); }
  93% { opacity: .85; transform: translate(5px, -2px); clip-path: inset(55% 0 20% 0); }
  95% { opacity: .85; transform: translate(-3px, 0); clip-path: inset(30% 0 45% 0); }
}
@keyframes glitchB {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  92% { opacity: .85; transform: translate(6px, -1px); clip-path: inset(65% 0 10% 0); }
  94% { opacity: .85; transform: translate(-5px, 2px); clip-path: inset(5% 0 75% 0); }
  96% { opacity: .85; transform: translate(3px, 0); clip-path: inset(40% 0 35% 0); }
}
.nf h1 { animation: rise404 .8s var(--ease) .35s both; }
.nf p { animation: rise404 .8s var(--ease) .5s both; }
.nf .btn { animation: rise404 .8s var(--ease) .65s both; }

@media (max-width: 960px) {
  .doc-grid { grid-template-columns: 1fr; gap: 24px; }
  .toc { position: static; background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow); padding: 18px; }
  .doc-body { padding: 32px 22px; }
  .doc-hero { padding: 120px 0 56px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .live { left: -16px; }
  .meal-chip { right: -10px; }
}
@media (max-width: 960px) {
  section { padding: 88px 0; }
  .hx { padding-top: 112px; }
  .hx-grid, .numbers-grid, .beta-card, .day-grid { grid-template-columns: 1fr; }
  .hx-visual { max-width: 520px; margin: 24px auto 0; width: 100%; }
  .bento { grid-template-columns: 1fr 1fr; }
  .t-span4, .t-span3, .t-span2 { grid-column: span 2; }
  .principles { grid-template-columns: 1fr; }
  .beta-card { padding: 40px 28px; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .day-sticky { padding-top: 72px; }
  .day-grid { gap: 16px; }
  .clock { font-size: 56px; margin-bottom: 6px; }
  .moment { min-height: 150px; }
  .moment h3 { font-size: 22px; margin-bottom: 6px; }
  .moment p { font-size: 15px; margin-bottom: 10px; }
  .decisions { padding: 10px 14px; }
  .decisions b { font-size: 28px; }
  .day-chart { padding: 14px 10px 34px; order: -1; }
  .day-chart .demo-note { top: 8px; right: 14px; }
  .day-bar { bottom: 14px; left: 14px; right: 14px; }
  /* Las horas del eje están en unidades del viewBox (1000 de ancho): a 13 se quedaban en ~4 px. */
  .day-chart .axis { font-size: 30px; }
  .scroll-cue { display: none; }
}
@media (max-width: 640px) {
  /* El cierre «+180» no cabe en la caja del gráfico del móvil (≈200 px de alto) y se montaba sobre
     el texto: aquí cubre todo el bloque (gráfico + hora + texto), como una tarjeta. La barra de
     progreso pasa al pie del bloque. */
  .day-grid { position: relative; }
  .day-chart { position: static; padding-bottom: 14px; }
  .day-chart .demo-note { position: static; display: block; text-align: right; margin: 0 4px 4px; }
  .day-bar { left: 0; right: 0; bottom: -18px; }
  .day-end { inset: -4px; background: var(--surface); box-shadow: var(--shadow-lg); z-index: 3; padding: 24px 20px; }
  .day-end b { font-size: 76px; }
  .day-end p { font-size: 18px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 16px; }
  .nav-links a:not(.btn) { display: none; }
  .nav-links .btn { min-height: 40px; padding: 8px 16px; font-size: 14px; }
  .hx-visual { padding: 0 8px; }
  .live { left: -4px; top: 6%; width: 214px; padding: 12px 14px 10px; }
  .live .val b { font-size: 34px; }
  .live svg.spark { height: 36px; }
  .meal-chip { right: -4px; bottom: 30%; }
  .ai-chip { left: 4%; right: 4%; max-width: none; font-size: 13px; }
  /* Móvil: la foto arriba y el texto debajo, para que las etiquetas no tapen el texto. */
  .scan { min-height: 0; background: var(--ink-2); }
  .scan::after { display: none; }
  .scan .stage { position: relative; inset: auto; height: 300px; z-index: 0; }
  .scan .b-hide-m { display: none; }
  .scan .box span { font-size: 11px; top: -30px; padding: 4px 8px; }
  .scan-total { left: 12px; right: auto; top: 12px; min-width: 0; padding: 10px 12px; }
  .scan-total .tot { font-size: 24px; }
  .band { min-height: 72vh; }
  .marquee { padding: 16px 0; }
  .section-head { margin-bottom: 40px; }
  .section-head p { font-size: 18px; }
  .tile.photo { min-height: 400px; }
  .waitlist { padding: 22px; }
  .beta-card { padding: 32px 20px; border-radius: 28px; }
  .beta-card::after { border-radius: 26px; }
}

/* Movimiento reducido: todo aparece ya en su estado final. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .marquee .track { animation: none; }
  .beta-card::before { animation: none; }
}

/* ---------- La app (app.html) ---------- */
/* Teléfono: marco dibujado en CSS; dentro, capturas reales a 540×1170 (1080×2340 a la mitad). */
.phone { position: relative; width: 100%; aspect-ratio: 1080 / 2340; border-radius: 48px; background: #0B1026; padding: 12px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 2px #20263F; }
.phone::before { content: ""; position: absolute; left: 50%; top: 22px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #05070F; box-shadow: inset 0 0 0 2px #1B2240; z-index: 3; }
.phone::after { content: ""; position: absolute; right: -3px; top: 22%; width: 3px; height: 11%; border-radius: 2px; background: #2A3157; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #F9F8F6; }
.phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* minmax(0, …): sin el 0, el ancho mínimo del titular empuja la columna del móvil hasta hacerla desaparecer. */
.ax .hx-grid { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); }
.ax-visual { width: 100%; max-width: 420px; margin: 0 auto; padding: 0 60px; }
.phone-hero { clip-path: inset(100% 0 0 0 round 48px); animation: unveilPhone 1.4s var(--ease) .25s forwards; }
@keyframes unveilPhone { to { clip-path: inset(0 0 0 0 round 48px); } }
.ax-chip { padding: 12px 16px 12px 12px; display: flex; gap: 12px; align-items: center; min-width: 230px; }
.ax-chip .ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(32,199,183,.16); display: grid; place-items: center; color: var(--turq-strong); flex: none; }
.ax-chip .ic svg { width: 22px; height: 22px; }
.ax-chip .ic-coral { background: #FFE9E2; color: #D9534F; }
.ax-chip .ic-purple { background: rgba(123,97,255,.14); }
.ax-chip strong { display: block; font-size: 14px; line-height: 1.25; }
.ax-chip span { font-size: 12px; color: var(--grey); }
.ax-chip-1 { left: -120px; top: 16%; }
.ax-chip-2 { right: -130px; top: 44%; }
.ax-chip-3 { left: -90px; bottom: 12%; max-width: 280px; }

/* Recorrido: la misma técnica que «Un día»: sección pegajosa y progreso del scroll. */
.tour { padding: 0; background: var(--warm); }
.tour-scroller { height: 640vh; position: relative; }
.tour-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: 64px; }
.tour-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 64px; align-items: center; width: 100%; }
.tour-steps { display: flex; gap: 8px; margin: 10px 0 26px; }
.tour-steps i { width: 28px; height: 4px; border-radius: 2px; background: var(--line); transition: background .4s, width .4s var(--ease); }
.tour-steps i.on { background: var(--turq-strong); width: 44px; }
.tour-moment { min-height: 260px; }
.tour-moment .k { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--turq-strong); margin-bottom: 10px; }
.tour-moment h3 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 14px; letter-spacing: -.035em; }
.tour-moment p { font-size: 19px; color: var(--grey); max-width: 520px; }
.tour-hint { font-size: 13px; color: #8A90A2; margin: 8px 0 0; }
.tour-visual { position: relative; display: flex; justify-content: center; padding: 24px 0 36px; }
.tour-glow { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(32,199,183,.28), rgba(123,97,255,.12) 60%, transparent); filter: blur(20px); pointer-events: none; }
.phone-tour { width: min(320px, 31vh); position: relative; }
.phone-tour .scr { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.phone-tour .scr.on { opacity: 1; transform: none; }
.tour-bar { left: 50%; right: auto; width: min(320px, 31vh); margin-left: calc(min(320px, 31vh) / -2); bottom: 4px; }

/* Tarjetas oscuras del bento (las del Brand Book, sin foto) */
.tile.dark-tile { background: var(--ink-2); color: #fff; }
.tile.dark-tile h3 { color: #fff; }
.tile.dark-tile p { color: #A9B1CC; }
.tile.dark-tile .k { color: var(--turq-soft); }

/* Reloj */
.watch { position: relative; margin: auto auto 0; padding: 18px 0 30px; width: 236px; }
.watch-body { position: relative; width: 236px; height: 236px; border-radius: 50%; padding: 10px; background: linear-gradient(145deg, #2A3157, #0B1026); box-shadow: 0 30px 60px -24px rgba(0,0,0,.8), inset 0 0 0 2px rgba(255,255,255,.08); z-index: 1; }
.watch-body img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.watch-band { position: absolute; left: 50%; width: 96px; height: 70px; margin-left: -48px; background: linear-gradient(90deg, #171D38, #2A3157 50%, #171D38); border: 1px solid rgba(255,255,255,.08); }
.watch-band.wb-top { top: -40px; border-radius: 22px 22px 8px 8px; }
.watch-band.wb-bottom { bottom: -20px; border-radius: 8px 8px 22px 22px; }
#watch-tile { min-height: 520px; }
#watch-tile .body { padding-bottom: 0; }

/* Alertas */
.alerts { list-style: none; margin: auto 0 0; padding: 0 24px 24px; display: grid; gap: 8px; }
.alerts li { display: grid; grid-template-columns: 12px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--warm); border: 1px solid var(--line); font-size: 14px; opacity: 0; transform: translateX(-10px); }
.reveal.in .alerts li { animation: slideIn .6s var(--ease) forwards; }
.alerts li:nth-child(2) { animation-delay: .12s; } .alerts li:nth-child(3) { animation-delay: .24s; } .alerts li:nth-child(4) { animation-delay: .36s; }
@keyframes slideIn { to { opacity: 1; transform: none; } }
.alerts i { grid-row: 1 / 3; width: 12px; height: 12px; border-radius: 50%; }
.alerts b { color: var(--midnight); }
.alerts span { grid-column: 2; font-size: 12px; color: var(--grey); }
.alerts em { grid-column: 3; grid-row: 1 / 3; font-style: normal; font-size: 12px; color: var(--grey); }
.a-vlow i { background: #B83232; box-shadow: 0 0 0 0 rgba(184,50,50,.5); animation: ping 1.6s infinite; }
.a-low i { background: var(--coral); } .a-high i { background: var(--amber); } .a-rate i { background: var(--purple); }

/* Privacidad: el flujo móvil → fabricante → Gluvi */
.flow { margin: auto 0 0; padding: 0 24px 28px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.flow .node { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); }
.flow .node .lbl { font-size: 11px; font-weight: 700; color: #fff; text-align: center; line-height: 1.2; }
.flow .lock { position: absolute; right: -8px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--turq); color: #04201D; display: grid; place-items: center; }
.flow .lock svg { width: 13px; height: 13px; }
.flow .arrow { position: relative; text-align: center; color: #A9B1CC; }
.flow .arrow i { display: block; height: 2px; background: repeating-linear-gradient(90deg, var(--turq-soft) 0 8px, transparent 8px 14px); margin-bottom: 6px; background-size: 28px 2px; }
.reveal.in .flow .arrow i { animation: dash 1.6s linear infinite; }
@keyframes dash { to { background-position: 28px 0; } }
.flow .arrow span { display: block; font-size: 11px; line-height: 1.2; }

/* Sin conexión */
.offline { margin: auto 0 0; padding: 0 24px 24px; display: grid; gap: 8px; }
.offline .row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--warm); border: 1px solid var(--line); font-size: 14px; }
.offline .st { width: 10px; height: 10px; border-radius: 50%; }
.offline .st.off { background: var(--amber); }
.offline .st.on { background: var(--turq); box-shadow: 0 0 0 4px rgba(32,199,183,.18); }

/* Familia (versión clara de .share) */
.share.share-light { margin: auto 24px 24px; }
.share.share-light li { background: var(--warm); border-color: var(--line); color: var(--grey); }
.share.share-light b { color: var(--midnight); }
.share.share-light i { color: var(--turq-strong); }

/* Informe */
.pdf { margin: auto 0 0; padding: 0 24px 24px; }
.pdf-page { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 16px 18px; max-width: 360px; transform: rotate(-1.5deg); transition: transform .6s var(--ease); }
.tile:hover .pdf-page { transform: rotate(0) translateY(-4px); }
.pdf-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--midnight); margin-bottom: 12px; }
.pdf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pdf-stats div { background: var(--warm); border-radius: 10px; padding: 10px; text-align: center; }
.pdf-stats b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.03em; color: var(--turq-strong); }
.pdf-stats span { font-size: 11px; color: var(--grey); }
.pdf-lines i { display: block; height: 6px; border-radius: 3px; background: #EEF1F5; margin-bottom: 6px; }

/* Comunidad */
.posts { margin: auto 0 0; padding: 0 24px 24px; display: grid; gap: 10px; }
.post { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); font-size: 14px; color: #C3C9DF; }
.post .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #0B1026; flex: none; }
.post b { color: #fff; }
.post p { margin: 2px 0 0; color: #E6E9F5; font-size: 15px; }

/* Planes */
.plans { overflow: hidden; }
.plans::before { content: ""; position: absolute; width: 900px; height: 900px; right: -300px; top: -300px; background: radial-gradient(closest-side, rgba(32,199,183,.18), transparent); pointer-events: none; }
.plan-toggle { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); margin-bottom: 28px; }
.plan-toggle button { font: inherit; font-weight: 700; font-size: 15px; color: #C3C9DF; background: transparent; border: 0; padding: 10px 20px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.plan-toggle button.on { background: #fff; color: var(--midnight); }
.plan-toggle small { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--turq-strong); background: rgba(32,199,183,.2); padding: 2px 8px; border-radius: 999px; }
.plan-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; padding: 34px 30px 30px; border-radius: var(--radius-l); background: rgba(255,255,255,.035); border: 1px solid var(--line-dark); display: flex; flex-direction: column; }
.plan h3 { font-size: 22px; color: #fff; margin-bottom: 10px; }
.plan .price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.plan .price b { font-size: 48px; font-weight: 900; letter-spacing: -.05em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.plan .price span { font-size: 14px; color: #A9B1CC; }
.plan .who { font-size: 15px; color: #A9B1CC; margin: 0 0 22px; min-height: 48px; }
.plan ul { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line-dark); display: grid; gap: 12px; font-size: 15px; color: #E6E9F5; }
.plan li { position: relative; padding-left: 28px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(32,199,183,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320C7B7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.plan li.no { color: #8790B0; }
.plan li.no::before { background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238790B0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 9px no-repeat; }
.plan li b { color: var(--turq-soft); font-weight: 800; }
.plan.featured { background: linear-gradient(180deg, rgba(32,199,183,.14), rgba(123,97,255,.08)), var(--ink-2); border-color: rgba(32,199,183,.45); box-shadow: 0 30px 80px -30px rgba(32,199,183,.45); }
.plan .tag { position: absolute; top: -14px; left: 30px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--turq); color: #04201D; }
.plan .price b.flip { animation: flip .45s var(--ease); }
@keyframes flip { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
.plan-note { margin: 28px 0 0; font-size: 14px; color: #8790B0; max-width: 760px; }

/* Lo que viene */
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.roadmap li { padding: 30px 28px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); }
.roadmap-4 { grid-template-columns: repeat(2, 1fr); }
.roadmap .st { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(123,97,255,.12); color: #5B43E0; margin-bottom: 16px; }
.roadmap .st.done { background: rgba(32,199,183,.14); color: var(--turq-strong); }
.roadmap h3 { font-size: 22px; margin-bottom: 8px; }
.roadmap p { color: var(--grey); margin: 0; }

/* Beta, versión sin formulario */
.beta-card-simple { align-items: center; }
.beta-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }

@media (max-width: 960px) {
  .ax .hx-grid { grid-template-columns: 1fr; }
  .ax-visual { max-width: 320px; padding: 0 24px; margin-top: 32px; }
  .ax-chip-1 { left: -24px; } .ax-chip-2 { right: -28px; } .ax-chip-3 { left: -10px; bottom: 6%; }
  .tour-grid { grid-template-columns: 1fr; gap: 16px; }
  .tour-sticky { align-items: flex-start; padding-top: 84px; }
  .tour-visual { order: -1; padding: 8px 0 24px; }
  .phone-tour, .tour-bar { width: min(200px, 25vh); }
  .tour-bar { margin-left: calc(min(200px, 25vh) / -2); }
  .tour-moment { min-height: 0; }
  .tour-moment h3 { font-size: 26px; margin-bottom: 8px; }
  .tour-moment p { font-size: 16px; }
  .tour-glow { width: 360px; height: 360px; margin: -180px 0 0 -180px; }
  .plan-grid, .roadmap { grid-template-columns: 1fr; }
  .plan .who { min-height: 0; }
  .beta-cta { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .ax-chip { min-width: 0; padding: 10px 12px; }
  .ax-chip strong { font-size: 13px; }
  .ax-chip-1 { left: -8px; top: 10%; } .ax-chip-2 { right: -8px; top: 48%; } .ax-chip-3 { left: 0; right: 0; max-width: none; bottom: -10px; }
  .tour-scroller { height: 560vh; }
  .watch { width: 200px; } .watch-body { width: 200px; height: 200px; }
  #watch-tile { min-height: 0; }
  .flow { gap: 6px; padding: 0 16px 20px; }
  .flow .node { width: 52px; height: 52px; border-radius: 14px; }
  .flow .node .lbl, .flow .arrow span { font-size: 10px; }
  .flow .lock { width: 20px; height: 20px; right: -6px; top: -6px; }
}

/* ---------- La app, v2: capítulos (app.html) ---------- */
.ch { position: relative; padding: 112px 0; overflow: hidden; }
.ch-tint { background: linear-gradient(180deg, #F3F6F5, var(--warm)); }
.ch-dark { background: var(--ink); }
.ch-dark + .ch-dark { padding-top: 0; }
.ch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.ch.flip .ch-text { order: 2; }
.ch-text .k { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--turq-strong); margin-bottom: 14px; }
.ch-dark .ch-text .k { color: var(--turq-soft); }
.ch-text h2 { font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -.04em; line-height: 1.02; margin-bottom: 18px; }
.ch-text p { font-size: 19px; color: var(--grey); max-width: 480px; margin: 0; }
.ch-dark .ch-text p { color: #A9B1CC; }
.ch-text-center { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.ch-text-center p { margin: 0 auto; }
.ch-hint { font-size: 14px !important; color: #8A90A2 !important; margin-top: 18px !important; }
.ch-vis { display: flex; justify-content: center; align-items: center; min-width: 0; }
.ch-phone { width: min(300px, 100%); }
.ch .reveal { transition-delay: var(--d, 0s); }

/* Claro u oscuro: comparador */
.cmp-wrap { width: min(320px, 100%); }
.cmp { --x: 50%; user-select: none; -webkit-user-select: none; }
.cmp .phone-screen { position: relative; }
.cmp-b { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 var(--x)); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(11,16,38,.25); pointer-events: none; }
.cmp-handle span { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; color: var(--midnight); display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(11,16,38,.6); }
.cmp-handle svg { width: 20px; height: 20px; }
.cmp-range { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.cmp-range:focus-visible ~ .phone-screen .cmp-handle span { outline: 3px solid var(--turq); }
.cmp-labels { display: flex; justify-content: space-between; margin-top: 18px; padding: 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A90A2; }

/* El gráfico interactivo: la tarjeta de Inicio, en web */
.gc { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 22px 22px 18px; box-shadow: var(--shadow-lg); }
.gc-head { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: start; }
.gc-ic { width: 48px; height: 48px; border-radius: 50%; background: #E3F6F3; color: var(--turq-strong); display: grid; place-items: center; }
.gc-ic svg { width: 22px; height: 22px; }
.gc-l { display: block; font-size: 13px; color: var(--grey); }
.gc-v { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.04em; color: var(--midnight); line-height: 1.1; }
.gc-s { display: block; font-size: 12px; color: #8A90A2; }
.gc-trend { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #FFE8E8; color: #B83232; font-size: 13px; font-weight: 700; }
.gc-trend svg { width: 16px; height: 16px; }
.gc-msg { margin: 16px 0 12px; font-size: 17px; color: var(--midnight); }
.gc-chips { display: flex; background: #EEF0F4; border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.gc-chips button { flex: 1; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: #8A90A2; padding: 8px 0; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; }
.gc-chips button.on { background: #fff; color: var(--midnight); box-shadow: var(--shadow); }
.gc-plot { position: relative; height: 240px; touch-action: none; }
.gc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.gc-tip { position: absolute; left: 0; top: 0; transform: translate(-50%, 0); background: var(--midnight); color: #fff; padding: 8px 12px; border-radius: 10px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s; white-space: nowrap; box-shadow: 0 10px 30px -10px rgba(11,16,38,.6); }
.gc-tip.on { opacity: 1; }
.gc-tip b { display: block; font-size: 15px; }
.gc-tip span { font-size: 12px; opacity: .8; }
.gc-svg .band-high { fill: rgba(255,107,107,.12); } .gc-svg .band-low { fill: rgba(70,120,255,.12); }
.gc-svg .thr { stroke-width: 1.5; stroke-dasharray: 5 5; } .gc-svg .thr-high { stroke: #FF8A8A; } .gc-svg .thr-low { stroke: #7FA3FF; }
.gc-svg .area { fill: url(#gc-fill); }
.gc-svg .line { fill: none; stroke: var(--midnight); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gc-svg .last { fill: #2BC48A; stroke: #fff; stroke-width: 3; }
.gc-svg .cursor { stroke: #8A90A2; stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .2s; }
.gc-svg .cursor.on { opacity: 1; }
.gc-svg .dot { fill: var(--midnight); stroke: #fff; stroke-width: 2.5; opacity: 0; transition: opacity .2s; } .gc-svg .dot.on { opacity: 1; }
.gc-svg .mk { font: 700 13px Inter, system-ui, sans-serif; }
.gc-svg .mk-meal rect { fill: #FFE8E8; } .gc-svg .mk-meal text { fill: #B83232; }
.gc-svg .mk-ins rect { fill: #E6ECFF; } .gc-svg .mk-ins text { fill: #2F4FB8; }
.gc-svg .axis { font: 600 11px Inter, system-ui, sans-serif; fill: #8A90A2; }
.gc-svg .lbl-high { font: 600 12px Inter, system-ui, sans-serif; fill: #E05A5A; } .gc-svg .lbl-low { font: 600 12px Inter, system-ui, sans-serif; fill: #4B78E8; }

/* Comidas: cuatro caminos */
.ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.way { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 18px 18px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.way h3 { font-size: 20px; letter-spacing: -.02em; margin: 18px 0 6px; }
.way p { font-size: 15px; color: var(--grey); margin: 0; }
.way-vis { position: relative; height: 190px; border-radius: 16px; overflow: hidden; background: var(--warm); }
.way-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.way-photo .sweep { position: absolute; left: 0; right: 0; top: -10%; height: 10%; background: linear-gradient(180deg, transparent, rgba(32,199,183,.65), transparent); opacity: 0; }
.way-photo .tag { position: absolute; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.95); color: var(--midnight); font-size: 12px; font-weight: 700; box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); opacity: 0; transform: scale(.9); }
.way-photo .t1 { left: 10px; bottom: 44px; } .way-photo .t2 { right: 10px; bottom: 14px; }
.reveal.in .way-photo .sweep { animation: waySweep 1.6s var(--ease) .3s forwards; }
.reveal.in .way-photo .t1 { animation: wayPop .5s var(--ease) 1.3s forwards; }
.reveal.in .way-photo .t2 { animation: wayPop .5s var(--ease) 1.6s forwards; }
@keyframes waySweep { 0% { top: -10%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes wayPop { to { opacity: 1; transform: none; } }
.way-type, .way-search, .way-bar { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.way-input { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); font-size: 14px; color: var(--midnight); line-height: 1.35; }
.way-input svg { width: 18px; height: 18px; color: #8A90A2; flex: none; }
.way-input .tw { flex: 1; min-width: 0; }
.way-input .tw:empty::before { content: attr(data-text); color: transparent; }
.way-input .caret { width: 2px; height: 16px; background: var(--turq-strong); animation: blink 1s steps(1) infinite; }
.way-input .caret.off { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.way-result { padding: 10px 14px; border-radius: 12px; background: #E3F6F3; color: var(--turq-strong); font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.way-result b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin-right: 4px; }
.way-result.on { opacity: 1; transform: none; }
.way-bar { justify-content: center; }
.way-bar svg { width: 100%; height: 64px; color: var(--midnight); display: block; }
.way-bar .laser { position: absolute; left: 14px; right: 14px; top: 48px; height: 2px; background: #FF4D4D; box-shadow: 0 0 12px 2px rgba(255,77,77,.6); opacity: 0; }
.reveal.in .way-bar .laser { animation: laser 1.4s ease-in-out .4s 2; }
@keyframes laser { 0% { top: 20px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 86px; opacity: 0; } }
.way-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.way-rows li { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--midnight); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.way-rows li b { font-size: 12px; color: var(--grey); font-weight: 600; }
.way-rows li.on { opacity: 1; transform: none; }

/* Dos móviles: registro */
.duo { position: relative; width: min(420px, 100%); height: 620px; }
.duo .phone { position: absolute; width: 270px; }
.duo-back { left: 0; top: 0; transform: rotate(-6deg) scale(.94); opacity: .85; filter: saturate(.9); }
.duo-front { right: 0; top: 40px; transform: rotate(4deg); }
.ch .reveal.in .duo-back { animation: duoIn 1s var(--ease) both; }
.ch .reveal.in .duo-front { animation: duoIn 1s var(--ease) .15s both; }
@keyframes duoIn { from { opacity: 0; transform: translateY(30px); } }

/* Alertas: notificaciones que entran una a una */
.notis { width: min(440px, 100%); display: grid; gap: 10px; }
.noti-silent { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: #C3C9DF; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.noti-silent svg { width: 16px; height: 16px; }
.noti { display: grid; grid-template-columns: 14px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); color: #fff; opacity: 0; transform: translateX(40px); }
.noti i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.noti b { display: block; font-size: 15px; }
.noti span { display: block; font-size: 13px; color: #A9B1CC; }
.noti em { font-style: normal; font-size: 12px; color: #8A90A2; }
.n-vlow i { background: #B83232; } .n-low i { background: var(--coral); } .n-fall i { background: #A99BFF; } .n-high i { background: var(--amber); } .n-lost i { background: #8A90A2; }
.reveal.in .noti { animation: notiIn .7s var(--ease) forwards; animation-delay: calc(.2s + var(--i) * .28s); }
.reveal.in .n-vlow { animation-name: notiIn, notiPulse; animation-duration: .7s, 1.6s; animation-iteration-count: 1, 3; animation-delay: .2s, 1s; }
@keyframes notiIn { to { opacity: 1; transform: none; } }
@keyframes notiPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(184,50,50,0); } 50% { box-shadow: 0 0 0 6px rgba(184,50,50,.35); } }

/* Gluvi: móvil y preguntas flotando */
.chat-wrap { position: relative; width: min(420px, 100%); display: flex; justify-content: center; padding: 20px 0; }
.q { position: absolute; padding: 10px 14px; border-radius: 14px; background: var(--surface); color: var(--midnight); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 700; opacity: 0; transform: translateY(14px) scale(.96); }
.q1 { left: 0; top: 22%; } .q2 { right: -6px; top: 44%; } .q3 { left: -4px; top: 66%; }
.reveal.in .q { animation: wayPop .6s var(--ease) forwards; animation-delay: calc(.5s + var(--i) * .3s); }

/* Tendencias + PDF */
.tr { position: relative; width: min(460px, 100%); display: flex; justify-content: flex-start; }
.tr-pdf { position: absolute; right: 0; bottom: 36px; width: 240px; transform: rotate(3deg); margin: 0; }
.tr .pdf-page:hover { transform: rotate(0); }
.tr-pdf .pdf-head { white-space: nowrap; font-size: 11px; } .tr-pdf .pdf-stats { gap: 6px; } .tr-pdf .pdf-stats div { padding: 8px 4px; } .tr-pdf .pdf-stats b { font-size: 15px; white-space: nowrap; } .tr-pdf .pdf-stats span { white-space: nowrap; font-size: 10px; }

/* Reloj + notificación */
.wn { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; width: min(560px, 100%); }
.wn .watch { margin: 0; }
.wn-notif { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }

/* Sensor: insignias */
.ch-sensor .ch-text-center { margin-bottom: 40px; }
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.badges li { padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); }
.badges b { display: block; color: #fff; font-size: 17px; letter-spacing: -.01em; }
.badges span { display: block; color: #A9B1CC; font-size: 13px; margin-top: 2px; }

/* Y además */
.more { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.more li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.more i { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; background: #E3F6F3; color: var(--turq-strong); display: grid; place-items: center; }
.more i svg { width: 22px; height: 22px; }
.more b { font-size: 16px; color: var(--midnight); }
.more span { font-size: 14px; color: var(--grey); }

@media (max-width: 960px) {
  .ch { padding: 80px 0; }
  .ch-grid { grid-template-columns: 1fr; gap: 40px; }
  .ch.flip .ch-text { order: 0; }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo { height: 560px; } .duo .phone { width: 240px; }
  .wn { grid-template-columns: 1fr; justify-items: center; }
  .wn .watch { margin: 0 auto; }
}
@media (max-width: 640px) {
  .ch-text h2 { font-size: 32px; }
  .ch-text p { font-size: 17px; }
  .ways { grid-template-columns: 1fr; }
  .more { grid-template-columns: 1fr; }
  .duo { width: 100%; height: 520px; } .duo .phone { width: 200px; } .duo-front { right: 0; top: 60px; }
  .gc { padding: 18px 14px 14px; border-radius: 22px; } .gc-plot { height: 200px; } .gc-v { font-size: 26px; }
  .tr-pdf { width: 200px; bottom: 16px; right: -8px; }
  .q2 { right: 0; }
}

/* v2 · notificación plegada/desplegada */
.nd { position: relative; width: min(440px, 100%); padding: 18px 16px 22px; border-radius: 28px; background: #0E1222; box-shadow: var(--shadow-lg); }
.nd-bar { display: flex; justify-content: space-between; color: #fff; font-size: 13px; font-weight: 600; padding: 0 10px 14px; }
.nd-stack { position: relative; height: 332px; border-radius: 22px; background: #F3F3FA; overflow: hidden; }
.nd-stack img { position: absolute; left: 12px; right: 12px; top: 12px; width: calc(100% - 24px); height: auto; border-radius: 16px; }
.nd-expanded { opacity: 0; transform: scaleY(.6); transform-origin: top; }
.reveal.in .nd-expanded { animation: ndOpen 7s var(--ease) 1.2s infinite; }
.reveal.in .nd-stack { animation: ndStack 7s var(--ease) 1.2s infinite; }
@keyframes ndStack { 0%, 22% { height: 150px; } 32%, 78% { height: 332px; } 88%, 100% { height: 150px; } }
.reveal.in .nd-collapsed { animation: ndClose 7s var(--ease) 1.2s infinite; }
@keyframes ndOpen { 0%, 22% { opacity: 0; transform: scaleY(.6); } 32%, 78% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: scaleY(.6); } }
@keyframes ndClose { 0%, 22% { opacity: 1; } 32%, 78% { opacity: 0; } 88%, 100% { opacity: 1; } }
.nd-finger { position: absolute; right: 54px; top: 86px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 0 0 6px rgba(255,255,255,.25); opacity: 0; }
.reveal.in .nd-finger { animation: ndFinger 7s var(--ease) 1.2s infinite; }
@keyframes ndFinger { 0%, 12% { opacity: 0; transform: translateY(-10px); } 18% { opacity: 1; transform: none; } 24% { opacity: 1; transform: translateY(8px) scale(.9); } 32%, 100% { opacity: 0; transform: translateY(14px); } }

/* v2 · chips de texto corto bajo el párrafo */
.chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: rgba(255,255,255,.08); color: #E6E9F5; border: 1px solid var(--line-dark); }
.ch:not(.dark) .chips li { background: #fff; color: var(--midnight); border-color: var(--line); }

/* v2 · reloj grande */
.watch-xl { width: 300px; padding: 40px 0 60px; margin: 0 auto; }
.watch-xl .watch-body { width: 300px; height: 300px; }
.watch-xl .watch-band { width: 120px; margin-left: -60px; height: 84px; }
.watch-xl .wb-top { top: -24px; } .watch-xl .wb-bottom { bottom: -4px; }
.watch-glow { position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; background: radial-gradient(closest-side, rgba(32,199,183,.22), transparent); filter: blur(10px); pointer-events: none; }
.reveal.in .watch-xl .watch-body { animation: watchIn 1.1s var(--ease) both; }
@keyframes watchIn { from { transform: scale(.85) rotate(-8deg); opacity: 0; } }

/* v2 · sensor → móvil */
.link { display: grid; grid-template-columns: 120px 1fr 220px; align-items: center; gap: 0; width: min(560px, 100%); }
.link-sensor { position: relative; display: grid; place-items: center; align-content: center; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F4F6FA, #C9CFDC); color: var(--midnight); box-shadow: 0 20px 40px -18px rgba(0,0,0,.8), inset 0 -4px 10px rgba(0,0,0,.15); text-align: center; }
.link-sensor svg { width: 34px; height: 34px; margin-bottom: 2px; }
.link-sensor b { font-size: 13px; line-height: 1; } .link-sensor small { font-size: 10px; color: var(--grey); }
.link-sensor .pulse { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(32,199,183,.6); opacity: 0; }
.reveal.in .link-sensor .pulse { animation: pulseOut 2.4s ease-out infinite; }
.reveal.in .link-sensor .p2 { animation-delay: 1.2s; }
@keyframes pulseOut { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.link-line { position: relative; height: 60px; }
.link-line .trail { position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(127,230,219,.7) 0 8px, transparent 8px 16px); background-size: 32px 2px; }
.reveal.in .link-line .trail { animation: dash 1.2s linear infinite; }
.link-line .pkt { position: absolute; left: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--turq); box-shadow: 0 0 14px rgba(32,199,183,.9); opacity: 0; }
.reveal.in .link-line .pkt { animation: pkt 3.6s cubic-bezier(.4,0,.6,1) infinite; animation-delay: var(--d); }
@keyframes pkt { 0% { left: 8px; opacity: 0; } 8% { opacity: 1; } 42% { left: calc(100% - 20px); opacity: 1; } 50%, 100% { left: calc(100% - 20px); opacity: 0; } }
.link-lock { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-top: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(32,199,183,.14); color: var(--turq-soft); font-size: 12px; font-weight: 600; }
.link-lock svg { width: 13px; height: 13px; }
.link-phone { width: 220px; position: relative; }
.link-pop { position: absolute; right: -14px; top: 26%; padding: 10px 14px; border-radius: 14px; background: #fff; color: var(--midnight); box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(8px) scale(.95); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.link-pop b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin-right: 3px; }
.link-pop span { display: block; font-size: 11px; color: var(--grey); font-weight: 500; }
.link-pop.on { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .link { grid-template-columns: 96px 1fr 180px; }
  .link-sensor { width: 96px; height: 96px; } .link-sensor svg { width: 28px; height: 28px; }
  .link-phone { width: 180px; }
  .watch-xl { width: 240px; padding: 30px 0 50px; } .watch-xl .watch-body { width: 240px; height: 240px; }
}
@media (max-width: 640px) {
  .link { grid-template-columns: 1fr; justify-items: center; row-gap: 26px; width: 100%; }
  .link-line { width: 60px; height: 90px; }
  .link-line .trail { left: 50%; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(127,230,219,.7) 0 8px, transparent 8px 16px); background-size: 2px 32px; }
  .link-line .pkt { left: 50%; margin-left: -6px; top: 8px; margin-top: 0; animation-name: pktV; }
  .link-lock { left: 50%; top: auto; bottom: -30px; transform: translateX(-50%); margin: 0; }
  .link { row-gap: 46px; }
  /* Sin esto gana `.reveal.in .link-line .pkt` (más específica) y los puntos iban en horizontal. */
  .reveal.in .link-line .pkt { animation-name: pktV; }
  .reveal.in .link-line .trail { animation-name: dashV; }
  .link-pop { right: -6px; }
  .nd-stack { height: 300px; }
  @keyframes ndStack { 0%, 22% { height: 140px; } 32%, 78% { height: 300px; } 88%, 100% { height: 140px; } }
  .nd-finger { right: 40px; top: 80px; }
}
@keyframes pktV { 0% { top: 8px; opacity: 0; } 8% { opacity: 1; } 42% { top: calc(100% - 20px); opacity: 1; } 50%, 100% { top: calc(100% - 20px); opacity: 0; } }

/* Páginas de contenido (preguntas frecuentes, sensores) */
.crumbs { font-size: 13px; color: #A9B1CC; margin-bottom: 18px; }
.crumbs a { color: #C3C9DF; text-decoration: none; } .crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: #fff; }
.doc-hero p a { color: var(--turq-soft); }
.doc-body-wide { max-width: 860px; margin: 0 auto; }
.faq { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h2 { font-size: 20px; margin: 0 !important; letter-spacing: -.01em; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #E3F6F3; color: var(--turq-strong); font-size: 20px; font-weight: 700; transition: transform .25s var(--ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 20px; }
.sensor-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 8px; }
.sensor-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--warm); text-decoration: none; color: var(--midnight); transition: transform .25s var(--ease), box-shadow .25s; }
.sensor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--midnight); }
.sensor-card strong { font-size: 19px; } .sensor-card span { font-size: 14px; color: var(--grey); } .sensor-card em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--turq-strong); margin-top: auto; }
.cta-box { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 40px 0 16px; padding: 22px 24px; border-radius: 18px; background: linear-gradient(135deg, rgba(32,199,183,.12), rgba(123,97,255,.08)); }
.cta-box strong { font-size: 18px; color: var(--midnight); } .cta-box p { margin: 2px 0 0; }
@media (max-width: 760px) { .sensor-cards { grid-template-columns: 1fr; } }

/* Menú del móvil: en pantallas estrechas la cabecera solo cabía el botón de la beta y la app
   quedaba escondida en el pie. main.js añade el botón ☰ y abre los enlaces en un panel. */
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(127,127,127,.3); background: transparent; color: inherit; cursor: pointer; place-items: center; }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-links a.nav-extra { display: none; }
.nav-panel { display: none; }
@media (max-width: 640px) {
  .nav-toggle { display: grid; }
  .nav-links { gap: 10px; }
  .nav-panel { display: grid; position: fixed; left: 12px; right: 12px; top: 76px; z-index: 60; gap: 4px; padding: 10px; border-radius: 20px; background: var(--ink); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
  .nav-panel a { display: block !important; padding: 14px 16px; border-radius: 12px; color: #fff !important; text-decoration: none; font-weight: 700; font-size: 17px; opacity: 1 !important; }
  .nav-panel a:hover, .nav-panel a:focus-visible { background: rgba(255,255,255,.08); }
  .site-header.nav-open .nav-panel { opacity: 1; transform: none; pointer-events: auto; }
}
/* Acceso a /app al cerrar «Qué hace» */
.app-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 20px; margin-top: 24px; padding: 26px 30px; border-radius: var(--radius-l); background: linear-gradient(120deg, var(--ink), #1B2A6B); color: #fff; text-decoration: none; box-shadow: var(--shadow-lg); transition: transform .3s var(--ease); }
.app-cta:hover { transform: translateY(-2px); color: #fff; }
.app-cta-k { grid-column: 1; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--turq-soft); }
.app-cta strong { grid-column: 1; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.02em; }
.app-cta-go { grid-column: 2; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: linear-gradient(135deg, var(--turq), #3BD6C6 55%, #A99BFF 130%); color: #04201D; font-weight: 800; white-space: nowrap; }
.app-cta-go svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .app-cta { grid-template-columns: 1fr; padding: 22px; } .app-cta-go { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; } }

@keyframes dashV { to { background-position: 0 32px; } }