/* EULER finder · landing page del producto (v3: solo el módulo)
   Sistema de marca: manual de identidad, octubre 2026.
   Tinta noche, papel, rojo de observación (solo estrella y acentos), Michroma + Inter. */

@font-face { font-family: "Michroma"; src: url("assets/fonts/michroma-latin-400-normal.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  /* Fondos y superficies */
  --noche: #0F1218;      /* fondo oscuro */
  --noche-2: #171B23;    /* superficie sobre oscuro */
  --noche-3: #20252F;    /* superficie elevada o activa */
  --papel: #F3F1EC;      /* fondo claro */
  --papel-2: #E8E5DE;    /* superficie hundida sobre claro */
  --blanco: #FFFFFF;     /* tarjeta sobre claro */
  --estudio-1: #EBE8E0;  /* fondo de los renders del manual, arriba */
  --estudio-2: #D9D5CD;  /* y abajo */
  /* Texto (contraste medido, WCAG AA) */
  --suave: #5C6070;      /* secundario sobre papel: 5.5:1 */
  --suave-fuerte: #4E5262; /* secundario sobre estudio: 5.4:1 */
  --suave-osc: #9A9EAA;  /* secundario sobre noche: 7.0:1 */
  --tenue-osc: #6F7482;  /* solo bordes y adornos, nunca texto chico */
  /* Acento: el rojo de la estrella. Solo información y acciones importantes */
  --rojo: #E8483A;       /* sobre noche: 4.8:1 */
  --rojo-tinta: #B8322A; /* texto rojo sobre papel: 5.3:1 */
  --linea-osc: rgba(243, 241, 236, .16);
  --linea-cla: rgba(15, 18, 24, .16);
  --gutter: clamp(16px, 5vw, 88px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--noche);
  color: var(--papel);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; border-radius: 6px; }

/* Modo luz roja: como en observación, todo pasa a rojo para no romper la adaptación del ojo */
html.rojo #deck, html.rojo .topbar, html.rojo .dots, html.rojo .folio { filter: grayscale(1) brightness(.62); }
html.rojo body::after { content: ""; position: fixed; inset: 0; background: #FF2414; mix-blend-mode: multiply; pointer-events: none; z-index: 100; }

/* ---------- Estructura de diapositivas ---------- */
#deck {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
#deck::-webkit-scrollbar { display: none; }

.slide {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 96px 0 72px;
}
.slide.dark { background: var(--noche); color: var(--papel); isolation: isolate; }
.slide[hidden] { display: none; }
.slide.light { background: var(--papel); color: var(--noche); }

.wrap { width: 100%; max-width: 1640px; margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: center; }

.sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* mismo fondo estelar que #inicio en todas las secciones oscuras: el cielo queda detrás de todo el contenido */
.slide.dark > .sky { z-index: -1; }

/* ---------- Tipografía ---------- */
.label {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: .72em;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--suave);
  margin-bottom: 1.4em;
  display: block;
}
.dark .label { color: var(--suave-osc); }

h2 {
  font-family: "Michroma", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 2.75vw, 50px);
  line-height: 1.22;
  letter-spacing: -.005em;
  max-width: 19ch;
  margin-bottom: .8em;
}
h3 { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.15em; margin-bottom: .45em; }

.lead { font-size: 1.12em; max-width: 46ch; color: var(--suave); }
.dark .lead { color: var(--suave-osc); }
.kicker { font-family: "Michroma", sans-serif; font-size: 1.05em; margin-top: 2em; padding-left: 1.2em; position: relative; }
.kicker::before { content: ""; position: absolute; left: 0; top: .5em; width: .45em; height: .45em; border-radius: 50%; background: var(--rojo); }

.slogan {
  font-family: "Michroma", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(13px, 1.45vw, 26px);
  white-space: nowrap;
}
.note, .caption { font-size: .78em; color: var(--suave); max-width: 64ch; margin-top: 1.6em; }
.dark .caption, .dark .note { color: var(--suave-osc); }
.caption--ink { color: var(--suave); }

/* ---------- Animación de entrada ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.slide.is-active .reveal { opacity: 1; transform: none; }
.slide.is-active .reveal:nth-child(2) { transition-delay: .08s; }
.slide.is-active .reveal:nth-child(3) { transition-delay: .16s; }
.slide.is-active .reveal:nth-child(4) { transition-delay: .24s; }
.slide.is-active .reveal:nth-child(5) { transition-delay: .32s; }
.slide.is-active .reveal:nth-child(6) { transition-delay: .40s; }

/* ---------- Barra superior, puntos y folio ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--gutter);
  pointer-events: none;
  transition: color .5s;
}
.topbar > * { pointer-events: auto; }
.topbar__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; font-family: "Michroma", sans-serif; font-size: .72em; letter-spacing: .14em; }
.topbar__symbol { height: 22px; }
.topbar__tools { display: flex; gap: 8px; }
.tool {
  font-size: .7em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .7em 1.1em; border-radius: 999px; border: 1px solid currentColor; opacity: .7;
  display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: .6em; transition: opacity .3s, background .3s, color .3s;
}
.tool:hover, .tool[aria-pressed="true"] { opacity: 1; }
.tool__dot { width: .6em; height: .6em; border-radius: 50%; background: var(--rojo); }
.tool--ink { color: var(--noche); }

body[data-theme="light"] .topbar { color: var(--noche); }
body[data-theme="light"] .topbar__symbol { content: url("assets/logo/simbolo_color.svg"); }

.dots { position: fixed; right: calc(var(--gutter) / 2 - 6px); top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 14px; }
.dots button { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .45; transition: all .4s var(--ease); position: relative; }
.dots button.on { opacity: 1; background: currentColor; transform: scale(1.15); }
.dots button span {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; opacity: 0; transition: opacity .3s; pointer-events: none;
}
.dots button:hover span { opacity: .9; }
body[data-theme="light"] .dots { color: var(--noche); }
body[data-theme="dark"] .dots { color: var(--papel); }

.folio { position: fixed; bottom: 22px; right: var(--gutter); z-index: 20; font-size: .72em; font-weight: 600; letter-spacing: .14em; color: var(--suave-osc); transition: color .5s; }
body[data-theme="light"] .folio { color: var(--suave); }
.progress { position: fixed; left: 0; right: 0; bottom: 0; height: 2px; z-index: 20; }
.progress span { display: block; height: 100%; width: 0; background: var(--suave-osc); transition: width .6s var(--ease); }

/* ---------- 1 · Inicio ---------- */
.hero { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--gutter); }
.hero__logo { width: min(64vw, 820px); margin: .6em 0 2.6em; }
/* el slogan va al mismo ancho del logotipo (manual, pág. 3) */
.hero .slogan { font-size: min(2.26vw, 29px); }
.hero--end .slogan { font-size: min(1.65vw, 19.8px); }
.hero .label { margin-bottom: 2.4em; }
.hero__foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 76px; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .72em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--suave-osc);
}
.hint kbd { font-family: inherit; border: 1px solid var(--linea-osc); border-radius: 6px; padding: .2em .5em; margin: 0 .3em; }
.hero__foot .hint { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }

/* ---------- 2 · Problema ---------- */
.compare { display: flex; flex-direction: column; gap: 2.6em; }
.compare__head { display: flex; flex-direction: column; gap: .2em; margin-bottom: .8em; font-weight: 600; }
.compare__head span { color: var(--suave); font-size: .9em; }
.compare__head strong { font-family: "Michroma", sans-serif; font-weight: 400; font-size: clamp(18px, 1.8vw, 32px); white-space: nowrap; }
.bar { position: relative; height: 14px; border-radius: 99px; background: var(--papel-2); overflow: hidden; }
.bar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; transition: width 1.6s var(--ease) .3s; }
.bar__fill--ink { background: var(--noche); }
.bar__fill--soft { background: var(--suave-osc); }
.slide.is-active .bar__fill { width: var(--w); }
.compare__per { margin-top: .9em; font-size: .9em; color: var(--suave); }
.compare__per b { color: var(--noche); font-weight: 600; }
.compare .note { margin-top: 0; }

/* ---------- 3 · Cómo funciona ---------- */
.como__head { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 70px); align-items: end; margin-bottom: 1.1em; }
.como__head h2 { margin-bottom: 0; max-width: 22ch; font-size: clamp(22px, 2.3vw, 42px); }
/* altura fija: cambiar de paso nunca mueve el diagrama */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.steps button {
  width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: .55em;
  padding: .2em 0 .85em; border-bottom: 2px solid var(--linea-osc); color: var(--suave-osc); transition: color .4s, border-color .4s;
}
.steps button:hover { color: var(--papel); }
.steps button.done { border-color: var(--tenue-osc); }
.steps button.on { color: var(--papel); border-color: var(--rojo); }
.steps b { font-weight: 600; font-size: .86em; line-height: 1.3; }
.steps__n { font-family: "Michroma", sans-serif; font-size: .74em; width: 2.1em; height: 2.1em; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: all .4s; }
.steps button.on .steps__n { background: var(--papel); color: var(--noche); border-color: var(--papel); }
.steps__detail { margin-top: .9em; min-height: 2.9em; max-width: 62ch; font-size: .98em; color: var(--papel); }
.diagram { position: relative; }
.diagram svg { width: 100%; height: auto; max-height: min(54vh, calc(100vh - 420px)); min-height: 240px; display: block; margin: 0 auto; overflow: hidden; }
.diagram .caption { margin-top: .6em; }

/* ---------- 4 · Nivelador ---------- */
.grid-2--niv { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
.legend { margin-top: 2em; display: grid; gap: .8em; }
.legend div { display: flex; gap: 1em; align-items: center; }
.legend dt { width: 34px; height: 34px; border-radius: 50%; background: var(--noche); display: grid; place-items: center; flex: none; }
.legend svg { width: 20px; height: 20px; fill: none; stroke: var(--papel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.legend svg .fill { fill: var(--papel); stroke: none; }
.legend dd { color: var(--suave); font-size: .95em; }

.sim { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 56px); align-items: center; }
.sim .caption { grid-column: 1 / -1; margin-top: 0; }
.sim__pad {
  position: relative; aspect-ratio: 4 / 5; max-height: 62vh; width: 100%; border-radius: 22px; overflow: hidden; background: var(--noche);
  cursor: crosshair; box-shadow: 0 30px 60px -30px rgba(15,18,24,.55);
  touch-action: none; /* en táctil, arrastrar apunta en vez de desplazar la página */
}
.sim__aim {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; left: 50%; top: 50%;
  border: 1.5px solid var(--papel); border-radius: 50%; pointer-events: none; opacity: .9;
}
.sim__aim::before, .sim__aim::after { content: ""; position: absolute; background: var(--papel); left: 50%; top: 50%; }
.sim__aim::before { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.sim__aim::after { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.sim__padlabel { position: absolute; left: 16px; right: 16px; bottom: 16px; text-align: center; font-size: .66em; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--suave-osc); pointer-events: none; }
.sim__device { display: flex; flex-direction: column; align-items: center; gap: 1.1em; }
.sim__state { font-family: "Michroma", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: .9em; min-height: 1.4em; white-space: nowrap; }

/* ---------- 5 · Módulos ---------- */
.mod__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 70px); align-items: end; margin-bottom: 1.1em; }
.mod__head h2 { margin-bottom: 0; }
.mod__head .lead { max-width: 44ch; }
.mods { display: grid; grid-template-columns: 1fr minmax(270px, 340px) 1fr; gap: clamp(16px, 2vw, 32px); align-items: stretch; }
.mod { background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 22px; padding: clamp(18px, 1.8vw, 30px); display: flex; flex-direction: column; }
.mod__art { width: clamp(120px, 9vw, 168px); height: auto; margin: -.3em 0 .5em -.5em; }
.mod__tag { display: flex; gap: .8em; align-items: center; font-size: .7em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--suave-osc); }
.mod__tag span { color: var(--noche); background: var(--papel); padding: .3em .7em; border-radius: 99px; }
.mod h3 { font-family: "Michroma", sans-serif; font-weight: 400; font-size: clamp(20px, 1.6vw, 30px); margin: .4em 0 .3em; }
.mod__one { color: var(--suave-osc); font-size: .95em; margin-bottom: 1em; max-width: 46ch; }
.specs { margin-top: auto; border-top: 1px solid var(--linea-osc); }
.specs div { display: grid; grid-template-columns: 6.6em 1fr; gap: 1em; padding: .4em 0; border-bottom: 1px solid var(--linea-osc); font-size: .88em; }
.specs dt { color: var(--suave-osc); font-weight: 600; font-size: .8em; letter-spacing: .14em; text-transform: uppercase; padding-top: .18em; }
.specs dd small { display: block; color: var(--suave-osc); font-size: .9em; }

.net { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .6em; }
#net-svg { width: 100%; max-width: 250px; height: auto; display: block; }
.net__ctrl { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font-size: .72em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave-osc); }
.net__ctrl output { font-family: "Michroma", sans-serif; font-size: 1.9em; color: var(--papel); letter-spacing: 0; }
.net input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: none; cursor: pointer; }
.net input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--linea-osc); border-radius: 2px; }
.net input[type="range"]::-moz-range-track { height: 2px; background: var(--linea-osc); }
.net input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--papel); border: 4px solid var(--rojo); }
.net input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--papel); border: 4px solid var(--rojo); }
.net__cost { font-size: .86em; color: var(--suave-osc); min-height: 2.9em; }
.net__cost b { display: block; font-family: "Michroma", sans-serif; font-weight: 400; font-size: 1.05em; color: var(--papel); white-space: nowrap; margin-bottom: .2em; }
.net__btn { color: var(--papel); }
.net__btn[aria-pressed="true"] { background: var(--papel); color: var(--noche); opacity: 1; }
.net__note { font-size: .76em; color: var(--suave-osc); min-height: 4.4em; max-width: 30ch; }

/* ---------- 6 · Para quién ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 1em; }
.card { background: #fff; border: 1px solid var(--linea-cla); border-radius: 20px; padding: 1.6em 1.4em 1.8em; transition: transform .4s var(--ease), box-shadow .4s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -26px rgba(15,18,24,.4); }
.card__n { font-family: "Michroma", sans-serif; font-size: .8em; color: var(--suave); display: block; margin-bottom: 2.4em; }
.card p { color: var(--suave); font-size: .95em; }

.dark .card { background: var(--noche-2); border-color: var(--linea-osc); }
.dark .card__n, .dark .card p { color: var(--suave-osc); }
.dark .card:hover { box-shadow: 0 24px 40px -26px rgba(0,0,0,.8); }

/* ---------- Etiqueta de dato simulado ---------- */
.sim-tag {
  font-family: "Inter", sans-serif; font-style: normal; font-weight: 600; font-size: .5em; letter-spacing: .16em; text-transform: uppercase;
  vertical-align: middle; padding: .35em .8em; border-radius: 99px; border: 1px solid var(--rojo); color: var(--rojo); margin-left: .6em; white-space: nowrap;
}
.label .sim-tag { font-size: .9em; margin-left: .8em; }
.light .sim-tag { color: var(--rojo-tinta); border-color: var(--rojo-tinta); }
.h2--wide { max-width: 28ch; }

/* ---------- Imágenes de producto ---------- */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 18px; }
.light .shot img { box-shadow: 0 30px 60px -36px rgba(15,18,24,.45); }
.shot .caption { margin-top: 1em; }

/* ---------- 6 · App ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#app { padding-bottom: 88px; }
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.app__intro h2 { max-width: 20ch; }
.app-tabs { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 1.6em; border-top: 1px solid var(--linea-cla); }
.app-tabs button { width: 100%; text-align: left; display: flex; gap: .8em; align-items: baseline; padding: .75em .2em; border-bottom: 1px solid var(--linea-cla); color: var(--suave); font-weight: 600; font-size: .95em; transition: color .3s, border-color .3s; }
.app-tabs button span { font-family: "Michroma", sans-serif; font-weight: 400; font-size: .78em; }
.app-tabs button:hover { color: var(--noche); }
.app-tabs button[aria-selected="true"] { color: var(--noche); border-bottom-color: var(--noche); box-shadow: inset 0 -2px 0 var(--rojo-tinta); }
.app__status { display: flex; gap: .7em; align-items: baseline; margin-top: 1.4em; font-size: .84em; color: var(--suave); max-width: 52ch; }
.app__status b { color: var(--noche); }
.app__dot { flex: none; width: .6em; height: .6em; border-radius: 50%; border: 1.5px solid var(--rojo-tinta); transform: translateY(.05em); }
.app__demo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.app__facts { display: grid; gap: 1.1em; max-width: 34ch; }
.app__facts dt { font-size: .68em; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); margin-bottom: .3em; }
.app__facts dd { font-size: .98em; }
.app__facts .app__fact-main dd { font-family: "Michroma", sans-serif; font-size: 1.12em; line-height: 1.3; }
.app__note { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px; font-size: .72em; color: var(--suave); }

/* ---------- 6b · Demo en vivo (simulación) ---------- */
#demo { padding-bottom: 40px; }
.demo { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.55fr); gap: clamp(24px, 3.4vw, 64px); align-items: center; }
.demo__intro { align-self: center; }
.demo__intro .lead { font-size: .98em; margin-top: 1em; }
.demo__nota { margin-top: 1.2em; font-size: .78em; color: var(--suave-osc); max-width: 40ch; }
.demo__marco { position: relative; height: auto; border: 1px solid var(--linea-osc); border-radius: 18px; overflow: hidden; background: var(--noche-2); display: flex; flex-direction: column; }
/* la indicación vive en una barra propia sobre la demo: no tapa controles ni gráficos */
.demo__bar { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .6em 1em; border-bottom: 1px solid var(--linea-osc); font-size: .68em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave-osc); background: rgba(243,241,236,.03); }
.demo__badge { display: inline-flex; align-items: center; gap: .7em; color: var(--papel); }
.demo__badge i { width: .6em; height: .6em; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 3px rgba(232,72,58,.2); }
.demo__modo { white-space: nowrap; }
.demo__view { position: relative; flex: none; aspect-ratio: 1100 / 840; max-height: calc(100vh - 230px); }
.demo__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0A0D12; }
.demo__marco iframe[hidden], .demo__video[hidden] { display: none; }
.demo__video { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0A0D12; }
.demo__video video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #0A0D12; display: block; }
.demo__caps { flex: none; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: .6em .8em .7em; border-top: 1px solid var(--linea-osc); }
.demo__caps button { font-size: .72em; font-weight: 600; padding: .45em .9em; border-radius: 99px; border: 1px solid var(--linea-osc); color: var(--suave-osc); transition: color .2s, border-color .2s, background .2s; }
.demo__caps button:hover { color: var(--papel); border-color: var(--suave-osc); }
.demo__caps button.on { color: var(--noche); background: var(--papel); border-color: var(--papel); }

/* ---------- 7 · Kit ---------- */
/* azul noche con una luz de estudio detrás del producto; los renders son vectoriales y sin fondo */
.slide--kit { padding-bottom: 80px; }
.kit { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.kit__intro h2 { max-width: 15ch; }
.kit__intro .lead { max-width: 38ch; }
.kit-sel { list-style: none; margin-top: 1.4em; border-top: 1px solid var(--linea-osc); }
.kit-sel button { position: relative; width: 100%; text-align: left; display: grid; grid-template-columns: 2.4em 1fr; gap: .9em; align-items: start; padding: .8em .6em .8em 1em; border-bottom: 1px solid var(--linea-osc); color: var(--suave-osc); transition: color .3s, background .3s; }
.kit-sel button::before { content: ""; position: absolute; left: 0; top: .8em; bottom: .8em; width: 2px; background: var(--rojo); transform: scaleY(0); transition: transform .4s var(--ease); }
.kit-sel button:hover { color: var(--papel); background: rgba(243,241,236,.03); }
.kit-sel button[aria-selected="true"] { color: var(--papel); background: rgba(243,241,236,.05); }
.kit-sel button[aria-selected="true"]::before { transform: none; }
.kit-sel__q { font-family: "Michroma", sans-serif; font-size: 1.55em; line-height: 1; padding-top: .05em; }
.kit-sel__q::after { content: "×"; font-size: .45em; color: var(--rojo); margin-left: .12em; vertical-align: .9em; }
.kit-sel b { display: block; font-weight: 600; }
.kit-sel em { display: block; font-style: normal; font-size: .86em; color: var(--suave-osc); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .35s; }
.kit-sel button[aria-selected="true"] em, .kit-sel button:hover em { max-height: 3.2em; opacity: 1; }
.kit__merch { display: grid; grid-template-columns: 64px 64px 1fr; gap: 10px; align-items: center; margin-top: 1.4em; }
.kit__merch img { width: 64px; height: 44px; object-fit: cover; border-radius: 9px; display: block; }
.kit__merch p { font-size: .82em; color: var(--suave-osc); padding-left: .4em; }
.kit__merch .label { margin-bottom: .3em; }
.kit__stage { position: relative; height: min(66vh, 680px); }
/* piso: sombra suave y una línea de horizonte que asientan el producto */
.kit__stage::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 13%; height: 22%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 70%); }
.kit__stage::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 23%; height: 1px; background: linear-gradient(90deg, transparent, rgba(243,241,236,.12), transparent); }
.kit__v { position: absolute; inset: 0 0 12% 0; margin: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.97); transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s linear .5s; pointer-events: none; z-index: 1; }
/* las vistas ocultas no se pintan: los renders son vectores pesados */
.kit__v.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kit__v svg { width: 86%; height: 100%; overflow: visible; }
.kit__v[data-v="base"] svg, .kit__v[data-v="niv"] svg { width: 70%; }
.kit__v[data-v="correa"] svg { width: 92%; }
.kit__nav { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 1.2em; z-index: 2; font-size: .78em; font-weight: 600; letter-spacing: .16em; color: var(--suave-osc); }
.kit__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea-osc); display: grid; place-items: center; transition: border-color .3s, background .3s; }
.kit__arrow:hover { border-color: var(--papel); background: rgba(243,241,236,.06); }
.kit__arrow svg { width: 16px; height: 16px; fill: none; stroke: var(--papel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kit__note { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px; font-size: .72em; color: var(--suave-osc); max-width: 96ch; }

/* ---------- 8 · Precios ---------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 1.4em; align-items: stretch; }
.plan { border: 1px solid var(--linea-cla); border-radius: 20px; padding: 1.5em 1.4em 1.6em; background: #fff; display: flex; flex-direction: column; }
.plan--main { background: var(--noche); color: var(--papel); border-color: var(--noche); position: relative; }
.plan--main::after { content: ""; position: absolute; top: 1.5em; right: 1.4em; width: .55em; height: .55em; border-radius: 50%; background: var(--rojo); }
.plan__name { font-weight: 600; font-size: 1.08em; }
.plan__what { color: var(--suave); font-size: .9em; }
.plan--main .plan__what, .plan--main .plan__for, .plan--main .plan__per { color: var(--suave-osc); }
.plan__price { font-family: "Michroma", sans-serif; font-size: 1.1em; margin: 1.4em 0 .2em; white-space: nowrap; }
.plan__price span { font-size: clamp(30px, 2.8vw, 54px); letter-spacing: -.01em; margin-right: .15em; }
.plan__price--text { font-size: clamp(20px, 1.7vw, 32px); }
.plan__per { font-weight: 600; font-size: .88em; }
.plan__for { color: var(--suave); font-size: .88em; margin-top: auto; padding-top: 1.2em; border-top: 1px solid var(--linea-cla); }
.plan--main .plan__for { border-color: var(--linea-osc); }
#comparativa .note { max-width: 96ch; }

/* ---------- 10 · Mercado ---------- */
.mkt { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.mkt__map { background: var(--noche); color: var(--papel); border-radius: 28px; padding: clamp(14px, 1.8vw, 26px); box-shadow: 0 40px 70px -40px rgba(15,18,24,.55); }
#mkt-svg { display: block; width: 100%; height: auto; max-height: 54vh; margin: 0 auto; }
.mkt__today { display: flex; gap: .7em; align-items: center; justify-content: center; font-size: .72em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--suave-osc); padding-top: .6em; }
.mkt__today span { width: .6em; height: .6em; border-radius: 50%; background: var(--rojo); animation: pulso-rojo 2.2s infinite; }
@keyframes pulso-rojo { 0% { box-shadow: 0 0 0 0 rgba(232,72,58,.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(232,72,58,0); } }
.mkt__body h2 { max-width: 22ch; }
.mkt__phases { list-style: none; border-top: 1px solid var(--linea-cla); }
.mkt__phases button { width: 100%; text-align: left; display: grid; grid-template-columns: 2.8em 1fr; gap: 1em; padding: .85em .7em; border-bottom: 1px solid var(--linea-cla); transition: background .3s; }
.mkt__phases button:hover, .mkt__phases button.on { background: var(--blanco); }
.mkt__n { font-family: "Michroma", sans-serif; font-size: .82em; color: var(--suave); padding-top: .25em; transition: color .3s; }
.mkt__phases button.on .mkt__n { color: var(--rojo-tinta); }
.mkt__phases b { display: block; font-family: "Michroma", sans-serif; font-weight: 400; font-size: 1.06em; }
.mkt__phases em { display: block; font-style: normal; color: var(--suave); font-size: .92em; margin-top: .25em; max-width: 56ch; }
.mkt__phases small { display: block; font-size: .8em; font-weight: 600; margin-top: .45em; }
.mkt__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 1.5em; }
.mkt__facts dt { font-size: .68em; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); margin-bottom: .4em; }
.mkt__facts dd { font-weight: 600; }
.mkt__facts dd.sub { font-weight: 400; font-size: .84em; color: var(--suave); }

/* ---------- 11 · Estado ---------- */
.grid-2--estado { grid-template-columns: 1.25fr .85fr; align-items: start; }
.timeline { list-style: none; position: relative; margin-top: .6em; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--linea-osc); }
.timeline li { display: grid; grid-template-columns: 9.5em 1fr auto; gap: 1em; align-items: baseline; padding: .72em 0 .72em 2em; border-bottom: 1px solid var(--linea-osc); position: relative; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--suave-osc); background: var(--noche); }
.timeline li.is-done::before { background: var(--papel); border-color: var(--papel); }
.timeline li.is-now::before { border-color: var(--papel); box-shadow: 0 0 0 0 rgba(243,241,236,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(243,241,236,0); } 100% { box-shadow: 0 0 0 0 rgba(243,241,236,0); } }
.timeline time { font-size: .78em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--suave-osc); }
.timeline span { font-size: .98em; }
.timeline b { font-size: .66em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: .35em .8em; border-radius: 99px; border: 1px solid var(--suave-osc); color: var(--suave-osc); white-space: nowrap; }
.timeline .is-done b { background: var(--papel); border-color: var(--papel); color: var(--noche); }
.timeline .is-now b { border-color: var(--papel); color: var(--papel); }
.measure { border: 1px solid var(--linea-osc); border-radius: 22px; padding: clamp(22px, 2.4vw, 40px); background: var(--noche-2); }
.measure__big { font-family: "Michroma", sans-serif; font-size: clamp(24px, 2.4vw, 42px); margin: .2em 0 .7em; line-height: 1.15; }
.measure p:not(.label):not(.measure__big) { color: var(--suave-osc); margin-bottom: .9em; }

/* ---------- 8 · Equipo ---------- */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 1em 0 2.4em; }
.person { display: flex; gap: 1.3em; align-items: center; background: #fff; border: 1px solid var(--linea-cla); border-radius: 22px; padding: 1.5em; }
.person__ini { width: 76px; height: 76px; flex: none; border-radius: 50%; background: var(--noche); color: var(--papel); display: grid; place-items: center; font-family: "Michroma", sans-serif; font-size: 1.05em; letter-spacing: .06em; }
.person__foto { width: 104px; height: 104px; object-fit: cover; object-position: center; background: var(--noche); border: 3px solid var(--noche); }
.person h3 { font-size: 1.25em; }
.person p { color: var(--suave); }
.team__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--linea-cla); padding-top: 1.6em; }
.team__meta p { color: var(--noche); font-size: .95em; }
.team__meta .label { margin-bottom: .6em; }

/* ---------- 9 · Cierre ---------- */
.hero--end { gap: 1.6em; }
.end__logo { width: min(34vw, 400px, 30vh); }
.end__purpose { color: var(--suave-osc); max-width: 40ch; font-size: 1.1em; }
.hero--end > .label { margin: .4em 0 0; }
.cta { border-top: 1px solid var(--linea-osc); padding-top: 1.4em; max-width: 46ch; display: flex; flex-direction: column; align-items: center; gap: .5em; }
.cta .label { margin-bottom: .2em; }
.cta__lead { font-family: "Michroma", sans-serif; font-size: clamp(15px, 1.25vw, 22px); line-height: 1.35; }
.cta__sub { color: var(--suave-osc); }
.cta__link {
  margin-top: .6em; padding: .8em 1.4em; border-radius: 999px; border: 1px solid var(--papel); color: var(--papel); text-decoration: none;
  font-size: .82em; font-weight: 600; letter-spacing: .06em; transition: background .3s, color .3s;
}
.cta__link:hover, .cta__link:focus-visible { background: var(--papel); color: var(--noche); }
.cta__link[hidden] { display: none; }

/* ---------- 4 · Nivelador: flujo de la arquitectura vigente ---------- */
.m2flow { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; counter-reset: paso; }
.m2flow li { counter-increment: paso; font-size: .64em; font-weight: 600; letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; color: var(--suave); padding: .55em 0 0; border-top: 2px solid var(--linea-cla); transition: color .3s, border-color .3s; }
.m2flow li::before { content: counter(paso, decimal-leading-zero) " "; font-family: "Michroma", sans-serif; letter-spacing: 0; margin-right: .2em; }
.m2flow li.done { border-color: var(--suave); }
.m2flow li.on { color: var(--noche); border-color: var(--rojo-tinta); }
.astro { position: absolute; transform: translate(-50%, -50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .55; transition: opacity .4s; }
.astro i { width: 7px; height: 7px; border-radius: 50%; background: var(--papel); box-shadow: 0 0 10px 2px rgba(243,241,236,.35); }
.astro--planeta i { width: 9px; height: 9px; background: #D9CBA8; box-shadow: 0 0 10px 2px rgba(217,203,168,.3); }
.astro span { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave-osc); }
.astro.is-sync, .astro.is-target { opacity: 1; }
.astro.is-target i { background: var(--rojo); box-shadow: 0 0 0 6px rgba(232,72,58,.18), 0 0 16px 4px rgba(232,72,58,.35); }
.astro.is-sync i { box-shadow: 0 0 0 6px rgba(243,241,236,.14), 0 0 16px 4px rgba(243,241,236,.4); }
.astro.is-target span, .astro.is-sync span { color: var(--papel); }
.m2btn { width: 46px; height: 46px; border-radius: 50%; background: #1A1E26; color: var(--papel); font-family: "Michroma", sans-serif; font-size: .9em; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px -6px rgba(15,18,24,.6); position: relative; transition: transform .15s, background .2s; touch-action: none; user-select: none; }
.m2btn:active, .m2btn.is-down { transform: translateY(1px) scale(.97); background: #262B35; }
.keys { display: grid; gap: .5em; margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--linea-cla); }
.keys div { display: flex; gap: .9em; align-items: center; font-size: .9em; color: var(--suave); }
.keys dt { width: 28px; height: 28px; border-radius: 50%; background: var(--noche); color: var(--papel); display: grid; place-items: center; font-family: "Michroma", sans-serif; font-size: .75em; flex: none; }
#guia .sim { row-gap: 1em; }


/* página 4: el cielo a la izquierda y el modelo 3D del M2 (vista superior) con su pantalla animada a la derecha */
#guia .sim { --simh: min(54vh, 520px); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "flow flow" "pad dev" "pad ctrl" "cap cap"; grid-template-rows: auto auto 1fr auto; align-items: start; column-gap: clamp(20px, 2.4vw, 44px); row-gap: .6em; }
#guia .m2flow { grid-area: flow; margin-bottom: .6em; }
#guia .sim__pad { grid-area: pad; max-height: none; height: calc(var(--simh) + 4.6em); aspect-ratio: auto; }
#guia .sim__device { grid-area: dev; align-self: start; }
#guia .sim__ctrl { grid-area: ctrl; display: flex; flex-direction: column; align-items: center; gap: .5em; width: calc(var(--simh) * .968); }
#guia .sim .caption { grid-area: cap; margin-top: .6em; }
#guia .sim__state { white-space: normal; text-align: center; min-height: 2.6em; display: grid; place-items: center; font-size: .86em; }
.sim__hint { font-size: .72em; color: var(--suave); text-align: center; }
/* el módulo: render superior (fondo transparente) recortado a la cara frontal; la pantalla y los botones son superposiciones */
.m2fig { position: relative; overflow: hidden; border-radius: 22px; height: var(--simh, 420px); width: calc(var(--simh, 420px) * .968);
  background: radial-gradient(ellipse 70% 62% at 50% 46%, #252C3A 0%, #151A24 62%, #0F1218 100%); box-shadow: 0 30px 60px -30px rgba(15,18,24,.55); }
.m2fig__stage { position: absolute; width: 160%; aspect-ratio: 4 / 3; left: -30%; top: 50%; transform: translateY(-50%); }
.m2fig__body { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 20px rgba(0,0,0,.45)); user-select: none; -webkit-user-drag: none; }
.m2fig__screen { position: absolute; left: 33.646%; top: 28.195%; width: 32.708%; height: 43.61%; display: block; border-radius: 50%; background: var(--noche); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 22px rgba(0,0,0,.35); }
#screen g, #screen text { transition: opacity .45s ease; }
.m2fig .m2btn { position: absolute; width: 8.75%; height: 11.667%; left: 45.625%; border-radius: 50%; background: transparent; box-shadow: none; cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s; }
.m2fig .m2btn--a { top: 11.389%; }
.m2fig .m2btn--b { top: 76.945%; }
.m2fig .m2btn:hover { box-shadow: 0 0 0 2px rgba(232,72,58,.65); }
.m2fig .m2btn:active, .m2fig .m2btn.is-down { transform: scale(.92); background: rgba(15,18,24,.28); box-shadow: 0 0 0 2px rgba(232,72,58,.9); }

/* ---------- 5 · Comparativo comercial ---------- */
.mod__art { display: block; height: auto; }
.cmp { margin-top: 1.2em; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px clamp(20px, 3vw, 48px); padding-top: 1.1em; border-top: 1px solid var(--linea-osc); }
.cmp > .label { grid-column: 1 / -1; margin-bottom: 0; }
.cmp__rows { display: grid; gap: .7em; align-content: start; }
.cmp__row { display: grid; grid-template-columns: 15em minmax(0, 1fr) auto; gap: 1em; align-items: center; font-size: .86em; }
.cmp__name { color: var(--suave-osc); }
.cmp__name b { color: var(--papel); font-weight: 600; }
.cmp__bar { height: 8px; border-radius: 8px; background: rgba(243,241,236,.06); overflow: hidden; }
.cmp__bar i { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--papel); transition: width .7s var(--ease); }
#cmp-e { background: var(--rojo); }
.cmp__val { white-space: nowrap; text-align: right; }
.cmp__val b { font-family: "Michroma", sans-serif; font-weight: 400; }
.cmp__src { font-style: normal; font-size: .82em; color: var(--suave-osc); margin-left: .4em; }
.cmp__diff { display: grid; gap: .5em; font-size: .78em; color: var(--suave-osc); }
.cmp__diff b { color: var(--papel); font-weight: 600; }
.cmp__diff a { color: var(--papel); text-underline-offset: 3px; text-decoration-color: rgba(243,241,236,.35); white-space: nowrap; }
.cmp__diff a:hover { text-decoration-color: var(--rojo); }


/* ---------- 5 · Módulos, versión limpia: una foto real, tres datos ---------- */
.mod { padding: 0 0 clamp(16px, 1.6vw, 26px); overflow: hidden; }
.mod > :not(.mod__photo) { margin-left: clamp(18px, 1.8vw, 28px); margin-right: clamp(18px, 1.8vw, 28px); }
.mod__photo { position: relative; margin: 0 0 1em; height: clamp(120px, 17vh, 190px); overflow: hidden; background: transparent; }
.mod__photo img { width: auto; max-width: 100%; height: 100%; margin: 0 auto; object-fit: contain; display: block; -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 62%, transparent 100%); }
.mod__photo--parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.mod__photo figcaption { position: absolute; left: 12px; top: 6px; font-size: .64em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--papel); background: rgba(15,18,24,.72); padding: .35em .7em; border-radius: 99px; }
.mod__one { margin-bottom: .9em; }
.keys5 { list-style: none; display: grid; gap: .55em; margin-top: auto; }
.keys5 li { display: grid; grid-template-columns: 9.5em 1fr; gap: .8em; font-size: .88em; padding-top: .55em; border-top: 1px solid var(--linea-osc); }
.keys5 b { font-weight: 600; }
.keys5 span { color: var(--suave-osc); }
.cmp { grid-template-columns: 1fr; gap: .7em; }
.cmp__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.cmp__top .label { margin: 0; }
.cmp__link { font-size: .74em; color: var(--suave-osc); text-underline-offset: 3px; text-decoration-color: rgba(243,241,236,.3); }
.cmp__link:hover { color: var(--papel); text-decoration-color: var(--rojo); }
.cmp__row { grid-template-columns: 17em minmax(0, 1fr) 11em; }
.cmp__why summary { cursor: pointer; font-size: .78em; font-weight: 600; color: var(--suave-osc); list-style: none; display: inline-flex; align-items: center; gap: .5em; }
.cmp__why summary::-webkit-details-marker { display: none; }
.cmp__why summary::before { content: "+"; display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; border: 1px solid var(--linea-osc); color: var(--papel); }
.cmp__why[open] summary::before { content: "−"; }
.cmp__why summary:hover { color: var(--papel); }
.cmp__why p { font-size: .8em; color: var(--suave-osc); max-width: 110ch; margin-top: .5em; }
.cmp__why b { color: var(--papel); font-weight: 600; }


/* ---------- 11 · Estado: el prototipo real como evidencia ---------- */
.estado__side { display: grid; gap: 14px; }
.proto { margin: 0; }
.proto__main { border-radius: 18px; overflow: hidden; background: #0B0D12; height: clamp(170px, 30vh, 320px); }
.proto__main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s; }
.proto__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.proto__thumbs button { border-radius: 10px; overflow: hidden; height: 52px; opacity: .5; outline-offset: 2px; transition: opacity .3s, box-shadow .3s; }
.proto__thumbs button:hover { opacity: .85; }
.proto__thumbs button.on { opacity: 1; box-shadow: 0 0 0 2px var(--rojo); }
.proto__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proto figcaption { font-size: .78em; color: var(--suave-osc); margin-top: .8em; }
.proto figcaption b { color: var(--papel); font-weight: 600; }
.measure--compact { padding: clamp(16px, 1.6vw, 26px); }
.measure--compact .measure__big { font-size: clamp(20px, 1.8vw, 32px); margin: .1em 0 .4em; }
.measure--compact p:last-child { margin-bottom: 0; font-size: .9em; }

/* kit: foto del prototipo real junto al render de la base */
.kit__real { position: absolute; right: 2%; bottom: 4%; width: min(34%, 240px); background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 12px; overflow: hidden; }
.kit__real img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.kit__real span { display: block; padding: .5em .7em; font-size: .66em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave-osc); }

/* ---------- 9 · Para quién ---------- */
.para { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 96px); align-items: stretch; }
/* la columna izquierda mide lo mismo que la lista: título arriba (alineado con el primer segmento),
   la cifra al centro y la nota abajo (alineada con el último) */
.para__lead { display: flex; flex-direction: column; }
.para__lead h2 { margin-bottom: 0; }
.para__stat { margin-top: auto; }
.para__note { margin-top: auto; padding-top: 1em; }
.segs { display: flex; flex-direction: column; }
.seg { flex: 1 1 0; }
.seg--main { flex-grow: 1.35; }
.para__stat { display: grid; grid-template-columns: auto 1fr; gap: 1.2em; align-items: center; padding: 1.4em 0; border-top: 1px solid var(--linea-osc); border-bottom: 1px solid var(--linea-osc); }
.para__big { font-family: "Michroma", sans-serif; font-size: clamp(46px, 5vw, 92px); line-height: 1; letter-spacing: -.02em; }
.para__stat p { color: var(--suave-osc); max-width: 30ch; }
.para__stat b { color: var(--papel); font-weight: 600; }
.para__note { display: flex; gap: .8em; align-items: center; font-size: .8em; color: var(--suave-osc); }
.para__note .sim-tag { margin-left: 0; font-size: .78em; }
.segs { list-style: none; border-top: 1px solid var(--linea-osc); }
.seg { display: grid; grid-template-columns: 11.5em minmax(0, 1fr) auto; gap: 1.4em; align-items: center; padding: 1.15em .8em; border-bottom: 1px solid var(--linea-osc); transition: background .3s; }
.seg:hover { background: rgba(243,241,236,.03); }
.seg--main { background: rgba(243,241,236,.05); padding-top: 1.5em; padding-bottom: 1.5em; }
.seg h3 { font-family: "Michroma", sans-serif; font-weight: 400; font-size: 1.08em; margin-bottom: .3em; }
.seg--main h3 { font-size: 1.3em; }
.seg__txt p { color: var(--suave-osc); font-size: .9em; max-width: 46ch; }
.seg__tag { font-family: "Inter", sans-serif; font-size: .52em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--noche); background: var(--papel); padding: .3em .7em; border-radius: 99px; vertical-align: middle; margin-left: .6em; white-space: nowrap; }
.seg__count { font-size: .72em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave-osc); white-space: nowrap; }
.seg--main .seg__count { color: var(--papel); }
/* cada punto es un telescopio; el cuadro rojo es la base que los atiende */
.seg__dots { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
.seg__dots b { width: 11px; height: 11px; border-radius: 3px; background: var(--rojo); margin-right: 4px; }
.seg__dots i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--papel); opacity: 0; transform: scale(.3); transition: opacity .4s, transform .5s var(--ease); }
.seg__dots i.soft { background: none; border: 1.5px solid var(--suave-osc); }
.seg__dots i.more { background: none; width: auto; height: auto; border-radius: 0; font-style: normal; color: var(--suave-osc); font-size: 12px; line-height: 1; }
.slide.is-active .seg__dots i { opacity: 1; transform: none; }

/* ---------- Pantallas bajas (laptop de 768 px) ---------- */
@media (max-height: 820px) and (min-width: 901px) {
  .slide { padding: 80px 0 56px; }
  .mod__head { margin-bottom: 1em; }
  .mod { padding: 16px 22px; }
  .mod__art { width: 104px; margin-bottom: .2em; }
  .mod__one { margin-bottom: .6em; }
  .specs div { padding: .34em 0; }
  #net-svg { max-width: 220px; }
  .kit__text { padding-top: 84px; padding-bottom: 56px; }
  .kit__stage { margin: 76px 64px 44px 0; }
  .kit__box { max-height: 29vh; }
  .kit__row { width: min(100%, 560px); }
  .kit__in img { aspect-ratio: 16 / 10; }
  .kit__in figcaption { padding: .5em .7em .55em; }
  .kit__stage { gap: 10px; padding: 18px 28px; }
  .kit-items button { padding: .6em .5em; }
  .kit-extras { margin-top: 1em; }
  #mkt-svg { max-height: 50vh; }
  .net__note { display: none; }
  .mod__photo { height: clamp(112px, 19vh, 150px); margin-bottom: .5em; }
  .mod h3 { margin: .25em 0 .15em; }
  .mod__one { margin-bottom: .5em; font-size: .9em; }
  .keys5 { gap: .35em; }
  .keys5 li { padding-top: .35em; font-size: .82em; }
  .cmp { gap: .45em; }
  .cmp__rows { gap: .45em; }
  .mod__head .lead { font-size: 1em; }
  #net-svg { max-width: 190px; }
  .mod__head { margin-bottom: .7em; }
  .specs div { padding: .28em 0; }
  .mod__one { margin-bottom: .5em; }
  .cmp { margin-top: .8em; padding-top: .8em; }
  .kit__stage { height: 60vh; }
  .kit-sel button { padding: .6em .6em .6em 1em; }
  #guia .sim { --simh: 50vh; }
  .seg { padding: .8em .8em; }
  .proto__main { height: 24vh; }
  .proto__thumbs button { height: 40px; }
  .seg--main { padding: 1.1em .8em; }
  .para__stat { padding: 1em 0; }
  .mkt__phases button { padding: .6em .7em; }
}

/* ---------- Pantallas angostas ---------- */
@media (max-width: 900px) {
  .demo { grid-template-columns: 1fr; }
  .demo__marco { height: min(88vh, 900px); }
  body { overflow: auto; }
  #deck { height: auto; overflow: visible; scroll-snap-type: none; }
  .slide { min-height: 100svh; padding: 88px 0 64px; }
  .grid-2, .grid-2--niv, .grid-2--estado, .como__head { grid-template-columns: 1fr; }
  .mod__head, .mods, .mkt, .mkt__facts { grid-template-columns: 1fr; }
  .net { order: 3; }
  .steps { grid-template-columns: 1fr 1fr; }
  .slide--kit { padding: 88px 0 48px; }
  .kit { grid-template-columns: 1fr; min-height: 0; }
  .kit__text { padding: 0 var(--gutter); }
  .kit__stage { margin: 1.6em var(--gutter) 0; }
  .kit__box { width: 100%; max-height: none; }
  .kit__row { gap: 8px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .team, .team__meta { grid-template-columns: 1fr; }
  .sim { grid-template-columns: 1fr; }
  #guia .sim { grid-template-columns: 1fr; grid-template-areas: "flow" "pad" "dev" "ctrl" "cap"; grid-template-rows: auto; justify-items: center; }
  #guia .sim__pad { height: 46vh; width: 100%; }
  .m2fig { height: auto; width: min(100%, 440px); aspect-ratio: 60 / 62; }
  #guia .sim__ctrl { width: 100%; }
  .sim__pad { aspect-ratio: 4 / 3; }
  .dots, .folio, .tool#btn-full { display: none; }
  /* la barra superior queda fija sobre el contenido que se desplaza: necesita fondo */
  .topbar { background: rgba(15,18,24,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 12px var(--gutter); }
  /* en secciones claras: fondo claro, logo a color y contornos oscuros (antes quedaban blancos sobre claro) */
  body[data-theme="light"] .topbar { background: rgba(243, 241, 236, .92); color: var(--noche); }
  .grid-2--app { grid-template-columns: 1fr; }
  .app, .kit, .para, .cmp { grid-template-columns: 1fr; }
  .app__demo { grid-template-columns: 1fr; justify-items: center; }
  #app, #producto { flex-direction: column; align-items: stretch; }
  .app__note, .kit__note { position: static; margin: 1.6em var(--gutter) 0; }
  .app-tabs { grid-template-columns: 1fr; }
  .kit__stage { height: 52vh; order: -1; }
  .slide--kit .kit { display: flex; flex-direction: column; align-items: stretch; }
  .kit-sel em { max-height: 3.2em; opacity: 1; }
  .cmp__row { grid-template-columns: 1fr auto; }
  .keys5 li { grid-template-columns: 1fr; gap: .1em; }
  .cmp__top { flex-direction: column; gap: .3em; }
  .cmp__bar { grid-column: 1 / -1; grid-row: 2; }
  .m2flow { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
  .seg { grid-template-columns: 1fr; gap: .7em; }
  .para__stat, .para__note { margin-top: 1.4em; }
  .seg { flex: none; }
  .plans { grid-template-columns: 1fr 1fr; }
  .slogan { white-space: normal; }
  .timeline li { grid-template-columns: 1fr auto; }
  .timeline time { grid-column: 1 / -1; }
  .hero__foot .hint { display: none; }
}
@media (max-width: 520px) {
  .cards, .plans { grid-template-columns: 1fr; }
  .topbar__tools .tool { padding: .6em .8em; }
}

.captura *, .captura *::before, .captura *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  #deck { scroll-behavior: auto; }
}


/* ---------- 8 · Kit: visores 3D integrados al escenario ---------- */
.kit__v--3d { inset: 0 0 11% 0; display: block; }
.kit__v--3d.on { pointer-events: auto; }   /* la vista activa recibe el arrastre: sin esto el modelo no gira */
.kit__v--3d .mv, .kit__v--3d .mv__poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.kit__v--3d .mv { --poster-color: transparent; background: transparent; outline: none; cursor: grab; opacity: 0; transition: opacity .6s; }
.kit__v--3d .mv:active { cursor: grabbing; }
.kit__v--3d .mv__poster { object-fit: contain; transition: opacity .6s; }
.kit__v--3d.is-ready .mv { opacity: 1; }
.kit__v--3d.is-ready .mv__poster, .kit__v--3d.is-3d-off .mv { opacity: 0; pointer-events: none; }
.kit__v--3d.is-3d-off .mv { display: none; }
.kit__v--3d.is-3d-off .mv__poster, .kit__v--3d:not(.is-ready) .mv__poster { opacity: 1; }
.mv::part(default-progress-bar) { background: var(--rojo); height: 2px; }
.mv__hint { position: absolute; left: 3%; top: 3%; max-width: 24ch; line-height: 1.5; z-index: 2; font-size: .66em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave-osc); pointer-events: none; transition: opacity .6s; }
.kit__v--3d:not(.is-ready) .mv__hint, .kit__v--3d.is-touched .mv__hint, .kit__v--3d.is-3d-off .mv__hint { opacity: 0; }
.mv__status { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 2; font-size: .72em; color: var(--suave-osc); text-align: center; max-width: 36ch; pointer-events: none; }
.mv__status:empty { display: none; }
.mv__tag { position: absolute; left: 3%; bottom: 0; z-index: 2; font-size: .66em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave-osc); max-width: 28ch; }
.kit__v--3d .kit__real { z-index: 2; right: 1%; top: 2%; bottom: auto; width: min(30%, 220px); }
.mv__hs { display: block; position: relative; padding: .35em .7em .35em 1.5em; border-radius: 99px; background: rgba(15,18,24,.82); border: 1px solid var(--linea-osc); color: var(--papel); font: 600 11px/1 Inter, sans-serif; letter-spacing: .08em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .3s; }
.mv__hs[data-visible] { opacity: 1; }
.mv__hs::before { content: ""; position: absolute; left: .6em; top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 3px rgba(232,72,58,.25); }
@media (max-width: 900px) {
  .kit__v--3d { inset: 0 0 12% 0; }
  .kit__v--3d .kit__real { width: 38%; }
  .mv__hs { font-size: 10px; }
}


/* ---------- 12 · Estado: pendientes, descartado y nota ---------- */
.timeline .is-off span { color: var(--suave-osc); }
.timeline .is-off::before { border-style: dashed; border-color: var(--tenue-osc); }
.timeline .is-off b { border-style: dashed; }
#estado .timeline li { padding-top: .32em; padding-bottom: .32em; }
#estado .timeline li::before { top: .62em; }
#estado .timeline span { font-size: .9em; }
#estado .timeline { margin-top: .3em; }
#estado h2 { margin-bottom: .5em; }
.estado__nota { margin-top: .7em; font-size: .78em; color: var(--suave-osc); max-width: 62ch; }

/* ---------- 13 · Equipo: tres integrantes ---------- */
.team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.person h3 { font-size: 1.12em; }

@media (max-width: 900px) { .team, .team__meta { grid-template-columns: 1fr; }
  .demo__marco { height: auto; } .demo__view { flex: none; aspect-ratio: 1100 / 780; } .demo__bar { flex-wrap: wrap; gap: .3em 1em; } .demo__modo { white-space: normal; } }


/* ---------- 5 · Módulos: la tarjeta continúa el cielo del render ---------- */
#modos .mod { background: linear-gradient(180deg, rgba(23,27,35,0) 0%, rgba(23,27,35,0) 24%, rgba(23,27,35,.9) 48%, var(--noche-2) 66%), url("assets/img/render/fondo-estrellas.webp") center top / 120% auto no-repeat, #1a1f2e; }
#modos .mod__photo img { -webkit-mask-image: radial-gradient(ellipse 70% 74% at 50% 50%, #000 56%, transparent 100%); mask-image: radial-gradient(ellipse 70% 74% at 50% 50%, #000 56%, transparent 100%); }
@media (max-height: 820px) and (min-width: 901px) { #modos .mod__photo { margin: -16px -22px .5em; } }

/* ---------- 7 · Demo: texto con aire y esquema de lo que es real ---------- */
.demo__intro .lead { font-size: 1em; line-height: 1.55; margin-top: .9em; max-width: 44ch; }
.demo__esq { display: flex; align-items: center; gap: .4em; margin-top: 1.5em; flex-wrap: nowrap; }
.demo__nodo { flex: 1 1 0; min-width: 0; border: 1px dashed var(--suave-osc); border-radius: 12px; padding: .6em .7em; text-align: center; }
.demo__nodo b { display: block; font-size: .8em; font-weight: 600; }
.demo__nodo span { display: block; font-size: .66em; color: var(--suave-osc); line-height: 1.3; margin-top: .2em; }
.demo__nodo--real { border: 1.5px solid var(--papel); background: rgba(243,241,236,.05); }
.demo__enlace { flex: none; font-size: .58em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--suave-osc); padding: 0 .2em; border-top: 1px dashed var(--suave-osc); padding-top: .3em; }
.demo__ley { display: flex; flex-wrap: wrap; gap: .4em 1.2em; margin-top: .8em; font-size: .72em; color: var(--suave-osc); }
.demo__ley i { display: inline-block; width: 1.1em; height: .7em; border-radius: 3px; margin-right: .45em; vertical-align: -.05em; }
.demo__ley .real { border: 1.5px solid var(--papel); background: rgba(243,241,236,.05); }
.demo__ley .sim { border: 1px dashed var(--suave-osc); }
.demo__nota { margin-top: 1.3em; line-height: 1.5; max-width: 46ch; }
@media (max-width: 900px) { .demo__view { max-height: none; }
  .demo__esq { flex-direction: column; align-items: stretch; gap: .3em; }
  .demo__nodo { flex: none; }
  .demo__enlace { align-self: center; border-top: 0; padding: 0; }
  .demo__enlace::before { content: "↓ "; } }
.demo__nodo b, .demo__nodo span { overflow-wrap: anywhere; }

/* ---------- 8 · Kit: zoom con botones, leyenda discreta y nota en el flujo ---------- */
.kit__note { position: static !important; margin: 1.2em 0 0 !important; max-width: 52ch; font-size: .74em; color: var(--suave-osc); }
.mv__tag { font-size: .58em; font-weight: 500; letter-spacing: .06em; text-transform: none; color: var(--suave-osc); opacity: .8; max-width: 40ch; bottom: 1%; }
.mv__zoom { position: absolute; right: 2%; bottom: 3%; z-index: 3; display: flex; flex-direction: column; gap: 6px; transition: opacity .4s; }
.mv__zoom button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea-osc); background: rgba(15,18,24,.7); color: var(--papel); font: 400 18px/1 Inter, sans-serif; display: grid; place-items: center; }
.mv__zoom button:hover { border-color: var(--papel); background: rgba(243,241,236,.08); }
.kit__v--3d:not(.is-ready) .mv__zoom, .kit__v--3d.is-3d-off .mv__zoom { opacity: 0; pointer-events: none; }
.kit__v--3d .kit__real ~ .mv__zoom { bottom: 3%; }

/* ---------- 11 · Para quién: esquema base + niveladores ---------- */
.seg__dots svg { width: 100%; max-width: 150px; height: auto; display: block; overflow: visible; }
.seg__dots .l { stroke: var(--papel); stroke-opacity: .32; stroke-width: 1; opacity: 0; transition: opacity .5s; }
.seg__dots .l.sf { stroke-dasharray: 2 3; stroke-opacity: .25; }
.seg__dots .b { fill: var(--rojo); }
.seg__dots .n { fill: var(--papel); opacity: 0; transition: opacity .4s; }
.seg__dots .n.sf { fill: var(--noche); stroke: var(--suave-osc); stroke-width: 1.2; stroke-dasharray: 2 2; }
.seg__dots .mas { fill: var(--suave-osc); font: 600 15px Inter, sans-serif; stroke: none; }
.slide.is-active .seg__dots .l, .slide.is-active .seg__dots .n { opacity: 1; }
.seg-ley { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .45em 1.2em; margin-top: 1.4em; font-size: .74em; color: var(--suave-osc); }
.seg-ley li { display: flex; align-items: center; gap: .6em; }
.seg-ley .k-base { width: 13px; height: 10px; border-radius: 3px; background: var(--rojo); flex: none; }
.seg-ley .k-niv, .seg-ley .k-opc { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.seg-ley .k-niv { background: var(--papel); }
.seg-ley .k-opc { border: 1.2px dashed var(--suave-osc); }
.seg-ley .k-mas { width: 13px; text-align: center; font-weight: 600; color: var(--suave-osc); flex: none; }
.seg-ley .k-red { width: 16px; height: 0; border-top: 1px solid rgba(243,241,236,.5); flex: none; }
@media (max-width: 900px) { .seg-ley { grid-template-columns: 1fr; } }

/* ---------- 13 · Estado: el hito alcanzado al frente; la precisión pendiente, discreta ---------- */
.hito { border: 1px solid var(--papel); border-radius: 18px; padding: clamp(14px, 1.4vw, 22px); background: rgba(243,241,236,.05); }
.hito .label { color: var(--papel); }
.hito__big { font-family: "Michroma", sans-serif; font-size: clamp(16px, 1.3vw, 23px); line-height: 1.3; margin: .3em 0 .5em; }
.hito p:last-child { font-size: .84em; color: var(--suave-osc); }
.measure--min { padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.4vw, 22px); }
.measure--min p:last-child { font-size: .8em; color: var(--suave-osc); margin: 0; }
.measure--min b { color: var(--papel); font-weight: 600; }
@media (max-height: 820px) and (min-width: 901px) { .proto__main { height: 20vh; } .hito__big { font-size: clamp(15px, 1.15vw, 19px); } }

/* móvil: el contenedor del módulo se encogía a 0 de ancho (todo su contenido es absoluto) y el nivelador no se veía */
@media (max-width: 900px) { #guia .sim__device { width: 100%; } }


/* ---------- Estrellas: brillo de la palabra en el cierre ---------- */
.star { position: relative; display: inline-block; color: var(--papel); animation: star-glow 4.2s ease-in-out infinite; }
.star__spark { position: absolute; width: .62em; height: .62em; pointer-events: none; opacity: 0; transform-origin: center;
  background: var(--papel);
  clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
  filter: drop-shadow(0 0 6px rgba(243,241,236,.9));
  top: -.38em; right: -.34em; animation: star-twinkle 4.2s ease-in-out infinite; }
.star__spark--b { width: .38em; height: .38em; top: auto; right: auto; bottom: -.05em; left: 18%; animation-delay: 2.1s; animation-duration: 5.4s; }
@keyframes star-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(243,241,236,0); }
  45% { text-shadow: 0 0 .35em rgba(243,241,236,.55), 0 0 1em rgba(243,241,236,.25); }
}
@keyframes star-twinkle {
  0%, 30%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  45% { opacity: 1; transform: scale(1) rotate(45deg); }
  60% { opacity: 0; transform: scale(.3) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .star { text-shadow: 0 0 .4em rgba(243,241,236,.4); }
  .star__spark { opacity: .8; transform: none; }
}

/* Variante sutil: palabras clave en títulos sobre cielo estelar. Un solo destello, ciclo más lento y desfasado. */
.star--sutil { animation-duration: 6.5s; animation-delay: 1.2s; }
.star--sutil .star__spark { width: .42em; height: .42em; top: -.22em; right: -.22em; animation-duration: 6.5s; animation-delay: 1.2s; }
.star--sutil + .star--sutil { animation-delay: 3s; }


/* =====================================================================
   Landing page (v3, noviembre de 2026)
   Mismo sistema de marca: tinta noche, papel, rojo solo en acentos, Michroma + Inter.
   Cambia la navegación (desplazamiento libre en vez de diapositivas) y se suman los
   componentes de la v3; ningún color ni tipografía nuevos.
   ===================================================================== */

/* desplazamiento libre: la página entera se desplaza, sin imán entre secciones */
html { scroll-behavior: smooth; }
body { overflow: auto; height: auto; }
#deck { height: auto; overflow: visible; scroll-snap-type: none; }
html.rojo .topbar, html.rojo .dots { filter: grayscale(1) brightness(.62); }

/* el contenido aparece al entrar en pantalla y ya no se oculta al seguir bajando */
.slide.is-seen .reveal { opacity: 1; transform: none; }
.slide.is-seen .reveal:nth-child(2) { transition-delay: .08s; }
.slide.is-seen .reveal:nth-child(3) { transition-delay: .16s; }
.slide.is-seen .reveal:nth-child(4) { transition-delay: .24s; }
.slide.is-seen .reveal:nth-child(5) { transition-delay: .32s; }
.slide.is-seen .reveal:nth-child(6) { transition-delay: .40s; }
.slide.is-seen .seg__dots .l, .slide.is-seen .seg__dots .n { opacity: 1; }

/* barra superior: enlaces de sección y llamada a la acción; toma fondo al desplazarse */
.topbar { transition: color .5s, background .4s, padding .4s; }
.topbar.is-scrolled { background: rgba(15, 18, 24, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-top: 12px; padding-bottom: 12px; }
body[data-theme="light"] .topbar.is-scrolled { background: rgba(243, 241, 236, .92); }
.topbar__nav { display: flex; gap: clamp(14px, 2vw, 32px); }
.topbar__nav a { color: inherit; text-decoration: none; font-size: .7em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; padding: .4em 0; border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s; }
.topbar__nav a:hover, .topbar__nav a.on { opacity: 1; }
.topbar__nav a.on { border-bottom-color: var(--rojo); }
.tool--cta { text-decoration: none; opacity: 1; background: var(--papel); color: var(--noche); border-color: var(--papel); }
.tool--cta:hover { background: transparent; color: var(--papel); }
body[data-theme="light"] .topbar .tool--cta { background: var(--noche); color: var(--papel); border-color: var(--noche); }
body[data-theme="light"] .topbar .tool--cta:hover { background: transparent; color: var(--noche); }
@media (max-width: 1100px) { .topbar__nav { display: none; } }

/* inicio: una frase de producto y dos acciones bajo el slogan, fuera de su área de respeto */
.hero__lead { max-width: 52ch; margin-top: 2.2em; font-size: 1.08em; color: var(--suave-osc); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 1.6em; }
.hero__cta .cta__link { margin-top: 0; }
.cta__link--solid { background: var(--papel); color: var(--noche); }
.cta__link--solid:hover, .cta__link--solid:focus-visible { background: transparent; color: var(--papel); }
@media (max-height: 820px) and (min-width: 901px) {
  .hero__logo { width: min(54vw, 660px); margin-bottom: 2em; }
  .hero .slogan { font-size: min(1.9vw, 23.4px); }
  .hero .label { margin-bottom: 1.6em; }
  .hero__foot { bottom: 32px; }
}

/* problema: tres datos con fuente, sin barras (monedas distintas no se comparan en una barra) */
.compare .note a, #comparativa .note a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--linea-cla); }
.compare .note a:hover, #comparativa .note a:hover { text-decoration-color: var(--rojo-tinta); }
.compare__row { padding-bottom: 1.2em; border-bottom: 1px solid var(--linea-cla); }

/* la guía: cinco pasos en la v3 (sin modo base ni acople) y vibración al acercarse */
.m2flow { grid-template-columns: repeat(5, 1fr); }
.m2fig.is-vib .m2fig__stage { animation: vibra .16s steps(2) infinite; }
@keyframes vibra { 0%, 100% { transform: translateY(-50%); } 50% { transform: translate(.7px, calc(-50% - .5px)); } }

/* modos: tarjetas de texto sobre el mismo cielo de las tarjetas de módulo */
.mod--txt { padding-top: clamp(18px, 1.8vw, 28px); }
#modos .mod--txt { background: linear-gradient(180deg, rgba(23,27,35,.55) 0%, rgba(23,27,35,.92) 34%, var(--noche-2) 58%), url("assets/img/render/fondo-estrellas.webp") center top / 120% auto no-repeat, #1a1f2e; }
.mod--txt h3 { margin-top: .7em; }
.modos__more { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); margin-top: 1.4em; padding-top: 1.1em; border-top: 1px solid var(--linea-osc); }
.modos__more p { font-size: .88em; color: var(--suave-osc); }
.modos__more b { color: var(--papel); font-weight: 600; }
@media (max-width: 900px) { .modos__more { grid-template-columns: 1fr; } }

/* app: fragmentos de pantalla (sin la barra de estado ni el menú de la versión con estación) */

/* comparativa: la tarjeta de EULER lista lo que agrega; la precisión pendiente va atenuada */
.plan__list { list-style: none; margin-top: auto; padding-top: 1.2em; border-top: 1px solid var(--linea-osc); display: grid; gap: .45em; font-size: .88em; }
.plan__list li { display: flex; gap: .6em; align-items: baseline; }
.plan__list li::before { content: ""; flex: none; width: .4em; height: .4em; border-radius: 50%; background: var(--papel); transform: translateY(-.1em); }
.plan__list .plan__pend { color: var(--suave-osc); }
.plan__list .plan__pend::before { background: none; border: 1px solid var(--suave-osc); }
.plan__for b { color: var(--noche); font-weight: 600; }
.plan .sim-tag { font-size: .42em; }
#comparativa .plans { grid-template-columns: 1.15fr 1fr 1fr 1fr; }
@media (max-width: 1100px) { #comparativa .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { #comparativa .plans { grid-template-columns: 1fr; } }

/* para quién: el teléfono al centro de cada esquema (contorno, no rojo: el rojo es solo de la estrella) */
.seg__dots .b { fill: var(--noche); stroke: var(--papel); stroke-width: 1.4; }
.seg-ley .k-base { width: 9px; height: 13px; border-radius: 2.5px; background: none; border: 1.4px solid var(--papel); }

/* avances: render del módulo */
.proto__main--render { background: radial-gradient(ellipse 70% 80% at 50% 45%, #1A2030 0%, #0B0D12 75%); }
.proto__main--render img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* equipo y contacto */
.team__link { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--rojo-tinta); }
.end__fine { font-size: .74em; color: var(--suave-osc); max-width: 52ch; }
@media (max-width: 520px) {
  #btn-rojo { padding: .7em; }
  .tool__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Enlace al aviso de privacidad en el cierre */
.end__fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }


/* =====================================================================
   Web v4 · corrida A (7 nov 2026): portada, problema, comparativa, para quién,
   cómo llegamos, avances y contacto. Mismos tokens de marca.
   ===================================================================== */

/* portada: el título nuevo es más largo; baja el cuerpo para que siga al ancho del logotipo */
.hero .slogan { font-size: max(13px, min(1.78vw, 22.6px)); }
@media (max-height: 820px) and (min-width: 901px) { .hero .slogan { font-size: max(13px, min(1.5vw, 19px)); } }

/* problema */
.prob { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 38px); }
.prob h2 { max-width: 24ch; margin-bottom: .5em; font-size: clamp(24px, 2.4vw, 44px); }
.prob__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 90px); align-items: stretch; }
.prob__stat { border-left: 1px solid var(--linea-cla); padding-left: clamp(18px, 2.4vw, 40px); }
.prob__big { font-family: "Michroma", sans-serif; font-size: clamp(54px, 6vw, 108px); line-height: 1; letter-spacing: -.02em; }
.prob__big small { font-size: .3em; letter-spacing: 0; margin-left: .45em; color: var(--suave); }
.prob__stat p:not(.prob__big) { color: var(--suave); max-width: 30ch; margin-top: .7em; }
.prob__stat .prob__src { font-size: .76em; margin-top: .5em; }
.pains { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pain { background: var(--blanco); border: 1px solid var(--linea-cla); border-radius: 20px; padding: 1.4em 1.4em 1.5em; }
.pain__ico { width: 46px; height: 46px; display: block; margin-bottom: .9em; color: var(--noche); }
.pain__ac { fill: var(--rojo-tinta); }
.pain h3 { font-family: "Michroma", sans-serif; font-weight: 400; font-size: 1em; }
.pain p { color: var(--suave); font-size: .94em; }
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.price { border: 1px solid var(--linea-cla); border-radius: 20px; padding: 1.2em 1.4em 1.3em; display: flex; flex-direction: column; }
.price--main { background: var(--noche); color: var(--papel); border-color: var(--noche); position: relative; }
.price--main::after { content: ""; position: absolute; top: 1.4em; right: 1.4em; width: .55em; height: .55em; border-radius: 50%; background: var(--rojo); }
.price__name { font-weight: 600; font-size: .95em; }
.price__amt { font-family: "Michroma", sans-serif; font-size: clamp(26px, 2.6vw, 48px); line-height: 1.1; margin: .35em 0 .3em; white-space: nowrap; }
.price__amt small { font-size: .38em; letter-spacing: .06em; }
.price__txt { color: var(--suave); font-size: .9em; }
.price--main .price__txt { color: var(--suave-osc); }
.prob .note { margin-top: 0; }

/* comparativa */
.vs { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 16px; margin-top: 1.2em; align-items: stretch; }
.vs__col { background: var(--blanco); border: 1px solid var(--linea-cla); border-radius: 20px; padding: 1.5em 1.4em 1.3em; display: flex; flex-direction: column; }
.vs__col--main { background: var(--noche); color: var(--papel); border-color: var(--noche); border-top: 3px solid var(--rojo); box-shadow: 0 36px 60px -34px rgba(15,18,24,.75); }
.vs__name { font-weight: 600; font-size: 1.08em; }
.vs__what { color: var(--suave); font-size: .86em; }
.vs__price { font-family: "Michroma", sans-serif; font-size: 1em; margin: 1em 0 .2em; }
.vs__price span { font-size: clamp(26px, 2.4vw, 44px); letter-spacing: -.01em; margin-right: .1em; white-space: nowrap; }
.vs__col--main .vs__price span { font-size: clamp(34px, 3.2vw, 58px); }
.vs__price small { display: block; font-family: "Inter", sans-serif; font-size: .55em; font-weight: 500; opacity: .7; margin-top: .3em; }
.vs__price--txt { font-family: "Inter", sans-serif; font-weight: 600; font-size: .95em; }
.vs__lab { margin-top: 1em; padding-top: 1em; border-top: 1px solid var(--linea-cla); font-size: .68em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
.vs__list { list-style: none; display: grid; gap: .6em; margin-top: .8em; font-size: .9em; }
.vs__list li { display: flex; gap: .65em; align-items: flex-start; }
.vs__list li::before { content: ""; flex: none; width: 1.05em; height: 1.05em; margin-top: .12em; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.vs__list--yes { margin-top: 1.2em; padding-top: 1.2em; border-top: 1px solid var(--linea-osc); font-size: .95em; }
.vs__list--yes li::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); color: var(--rojo); }
.vs__list--no li::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); color: var(--rojo-tinta); }
.vs__src { margin-top: auto; padding-top: 1.1em; font-size: .72em; color: var(--suave); }
#comparativa .note { margin-top: 1.2em; }
@media (max-width: 1100px) { .vs { grid-template-columns: 1fr 1fr; } .vs__col--main { grid-column: 1 / -1; } .vs__list--yes { grid-template-columns: 1fr 1fr; column-gap: 1.6em; } }
@media (max-width: 640px) { .vs { grid-template-columns: 1fr; } .vs__list--yes { grid-template-columns: 1fr; } }

/* para quién: cinco tarjetas con ilustración */
.para { display: block; }
.para__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(14px, 1.8vw, 28px); }
.para__head h2 { max-width: 24ch; margin-bottom: 0; }
.para__tag { font-size: .7em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave-osc); border: 1px dashed var(--tenue-osc); border-radius: 99px; padding: .5em 1.1em; background: rgba(15,18,24,.55); }
.segs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; border-top: 0; }
.seg { grid-column: span 2; flex: none; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: .9em; padding: 0 0 1.3em; border: 1px solid var(--linea-osc); border-radius: 20px; background: rgba(15,18,24,.7); overflow: hidden; }
.seg:nth-child(n+4) { grid-column: span 3; }
.seg:hover { background: rgba(15,18,24,.8); }
.seg--main { background: rgba(15,18,24,.78); border-color: rgba(243,241,236,.5); padding-top: 0; padding-bottom: 1.3em; }
.seg__art { display: block; width: 100%; height: clamp(96px, 10vw, 150px); padding: .5em 0; color: var(--papel); background: radial-gradient(ellipse 60% 70% at 50% 60%, rgba(243,241,236,.08), transparent 75%); border-bottom: 1px solid var(--linea-osc); }
.seg__ac { stroke: var(--rojo); }
.seg__ac[stroke="none"] { stroke: none; }
.seg__ac[fill="currentColor"] { fill: var(--rojo); }
.seg__txt { padding: 0 1.4em; }
.seg h3 { font-family: "Michroma", sans-serif; font-weight: 400; font-size: 1.02em; margin-bottom: .4em; }
.seg--main h3 { font-size: 1.12em; }
.seg__txt p { color: var(--suave-osc); font-size: .92em; max-width: 48ch; }
.seg__flag { font-family: "Inter", sans-serif; font-size: .52em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--noche); background: var(--papel); padding: .3em .7em; border-radius: 99px; vertical-align: middle; margin-left: .5em; white-space: nowrap; }
.para__fact { display: inline-block; margin-top: 1.1em; padding: .55em 1em; border-radius: 12px; background: rgba(15,18,24,.62); font-size: .8em; color: var(--suave-osc); }
.para__fact b { color: var(--papel); font-weight: 600; }
@media (max-width: 1100px) { .seg, .seg:nth-child(n+4) { grid-column: span 3; } .seg--main { grid-column: 1 / -1; } .seg:last-of-type { grid-column: 1 / -1; } }
@media (max-width: 640px) { .segs { grid-template-columns: 1fr; } .seg, .seg:nth-child(n+4), .seg--main, .seg:last-of-type { grid-column: auto; } }

/* cómo llegamos: al terminar el recorrido, el fondo claro se vuelve el cielo estelar */
#mercado { isolation: isolate; transition: color .7s; }
.mkt__night { position: absolute; inset: 0; z-index: -1; background: var(--noche); clip-path: circle(0px at 50% 50%); pointer-events: none; }
.mkt__night .sky { position: absolute; inset: 0; }
.mkt__map { border: 1px solid var(--linea-osc); }
.mkt__body { border-radius: 24px; padding: clamp(10px, 1.6vw, 24px); transition: background .7s; }
.mkt__phases em { max-width: 54ch; }
.mkt__facts dd.sub { font-size: .88em; }
#mercado.is-night { color: var(--papel); }
#mercado.is-night .mkt__body { background: rgba(15,18,24,.62); }
#mercado.is-night .label, #mercado.is-night .mkt__n, #mercado.is-night .mkt__phases em, #mercado.is-night .mkt__facts dt, #mercado.is-night .mkt__facts dd.sub { color: var(--suave-osc); }
#mercado.is-night .mkt__phases, #mercado.is-night .mkt__phases button { border-color: var(--linea-osc); }
#mercado.is-night .mkt__phases button:hover, #mercado.is-night .mkt__phases button.on { background: rgba(243,241,236,.07); }
#mercado.is-night .mkt__phases button.on .mkt__n { color: var(--rojo); }
#mercado.is-night .mkt__facts dd { color: var(--papel); }
#mercado.is-night .mkt__facts dd.sub { color: var(--suave-osc); }

/* avances */
.est h2 { max-width: none; }
.figs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: .2em 0 clamp(16px, 2.2vw, 34px); }
.figs li { padding: 1em 1.2em; border: 1px solid var(--linea-osc); border-radius: 18px; background: rgba(15,18,24,.62); }
.figs b { display: block; font-family: "Michroma", sans-serif; font-weight: 400; font-size: clamp(30px, 3.6vw, 62px); line-height: 1.05; }
.figs .figs__txt { font-size: clamp(22px, 2.6vw, 44px); }
.figs span { display: block; margin-top: .45em; color: var(--suave-osc); font-size: .88em; }
.est__grid { align-items: start; }
.est .timeline { margin-top: 0; padding: .4em 1em .4em .9em; border: 1px solid var(--linea-osc); border-radius: 20px; background: rgba(15,18,24,.62); }
.est .timeline::before { left: calc(.9em + 6px); top: 1.1em; bottom: 1.1em; }
.est .timeline li:last-child { border-bottom: 0; }
.timeline .is-win::before { background: var(--rojo); border-color: var(--rojo); }
.timeline .is-win b { border-color: var(--rojo); color: var(--papel); }
.timeline .is-win strong { font-weight: 600; }
.estado__prec { font-size: .8em; color: var(--suave-osc); padding: .6em 1em; border-radius: 12px; background: rgba(15,18,24,.62); border: 1px solid var(--linea-osc); }
.est .proto figcaption { display: inline-block; padding: .3em .7em; border-radius: 8px; background: rgba(15,18,24,.62); }

/* contacto: menú de correo */
.cta__link--form { display: inline-block; margin-right: .6em; }
.mail { position: relative; display: inline-block; margin-top: .6em; }
.mail__btn { margin-top: 0; display: inline-flex; align-items: center; gap: .7em; }
.mail__btn::after { content: ""; width: .45em; height: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg) translate(-1px, -1px); }
.mail__btn[aria-expanded="false"]::after { transform: rotate(45deg) translate(-1px, -1px); }
.mail__menu { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); min-width: 15em; list-style: none; background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 14px; padding: 6px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.85); z-index: 6; }
.mail__menu[hidden] { display: none; }
.mail__menu a, .mail__menu button { display: block; width: 100%; text-align: left; padding: .7em 1em; border-radius: 9px; color: var(--papel); text-decoration: none; font-size: .86em; font-weight: 600; }
.mail__menu a:hover, .mail__menu button:hover, .mail__menu a:focus-visible, .mail__menu button:focus-visible { background: rgba(243,241,236,.1); }
.mail__addr { font-size: .8em; color: var(--suave-osc); min-height: 1.5em; }
.mail__ok { color: var(--papel); font-weight: 600; margin-left: .6em; }

/* móvil: ajustes de las secciones de esta corrida */
@media (max-width: 900px) {
  .prob__top { grid-template-columns: 1fr; }
  .prob__stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea-cla); padding-top: 1.2em; }
  .pains, .prices { grid-template-columns: 1fr; }
  .price__amt { white-space: normal; }
  .figs { grid-template-columns: 1fr 1fr; }
  .mkt__body { padding: 0; }
  .mail__menu { min-width: min(15em, 86vw); }
}


/* =====================================================================
   Web v4 · corrida B (7 nov 2026): cómo funciona, la guía, modos y app.
   ===================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* cómo funciona: sin recuadro (el cielo global llena la sección) y el teléfono flota */
#como .diagram svg { background: none; }
.phone-float { animation: flota 7s ease-in-out infinite; }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .phone-float { animation: none; } }

/* la guía: el cielo y el módulo comparten ancho de columna y escalan juntos */
.m2fig__bezel, .m2fig__glass { position: absolute; display: block; border-radius: 50%; pointer-events: none; }
/* bisel metálico con volumen: aro cónico, sombra proyectada y filo interior */
.m2fig__bezel { left: 32.2%; top: 26.27%; width: 35.6%; height: 47.47%;
  background: conic-gradient(from 200deg, #7a8190, #272b34 22%, #4f5662 46%, #14171d 70%, #6a7180 100%);
  box-shadow: 0 1.1cqw 2.2cqw rgba(0,0,0,.6), inset 0 0 0 .35cqw rgba(255,255,255,.14), inset 0 -.5cqw .8cqw rgba(0,0,0,.45); }
.m2fig__glass { left: 33.646%; top: 28.195%; width: 32.708%; height: 43.61%;
  background: linear-gradient(128deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 24%, rgba(255,255,255,0) 42%),
              radial-gradient(ellipse 55% 36% at 32% 16%, rgba(255,255,255,.10), transparent 72%);
  box-shadow: inset 0 0 2.6cqw rgba(0,0,0,.5), inset 0 .3cqw .5cqw rgba(255,255,255,.2); }
#guia .m2fig { container-type: inline-size; }
#guia .m2fig__screen { box-shadow: 0 0 0 .5cqw #06080b, 0 0 2cqw rgba(0,0,0,.4); }
/* botones A y B: tapa con luz arriba a la izquierda y sombra proyectada */
#guia .m2fig .m2btn { background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.24), rgba(255,255,255,0) 52%), radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,.3) 100%);
  box-shadow: 0 .6cqw 1cqw rgba(0,0,0,.55), inset 0 .25cqw .35cqw rgba(255,255,255,.28), inset 0 -.35cqw .5cqw rgba(0,0,0,.38); }
#guia .m2fig .m2btn:hover { box-shadow: 0 0 0 .5cqw rgba(232,72,58,.7), 0 .6cqw 1cqw rgba(0,0,0,.55); }
#guia .m2fig .m2btn:active, #guia .m2fig .m2btn.is-down { transform: scale(.93); box-shadow: 0 0 0 .5cqw rgba(232,72,58,.9), inset 0 .3cqw .8cqw rgba(0,0,0,.6); }
#guia .m2fig .m2btn::after { content: attr(data-l); position: absolute; inset: 0; display: grid; place-items: center; font-family: "Michroma", sans-serif; font-size: 3cqw; color: rgba(243,241,236,.7); pointer-events: none; }
#guia .sim__pad { touch-action: pan-y; }   /* nunca atrapa el deslizamiento vertical de la página */

@media (min-width: 901px) {
  #guia .grid-2--niv { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
  #guia .sim { --maxh: min(58vh, 540px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #guia .sim__pad { height: auto; align-self: stretch; min-height: 0; }
  #guia .m2fig { height: auto; width: min(100%, calc(var(--maxh) * .968)); aspect-ratio: 60 / 62; justify-self: center; }
  #guia .sim__ctrl { width: 100%; }
}
@media (min-width: 901px) and (max-height: 820px) { #guia .sim { --maxh: 50vh; } }
@media (max-width: 900px) {
  #guia .sim__pad { height: auto; aspect-ratio: 60 / 62; width: min(100%, 440px); }
  #guia .m2fig { height: auto; width: min(100%, 440px); aspect-ratio: 60 / 62; }
  #guia .m2flow { grid-template-columns: repeat(3, 1fr); }
}

/* modos: más aire, frase de entrada centrada, iconos y cuadrícula que respira */
.mod__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6em; margin-bottom: clamp(36px, 5vw, 72px); }
.mod__head h2 { max-width: 26ch; }
.mod__head .lead { max-width: 52ch; margin-inline: auto; font-size: clamp(1em, 1.2vw, 1.2em); color: var(--suave-osc); }
#modos .mods { gap: clamp(18px, 2.4vw, 40px); }
#modos .keys5 li { grid-template-columns: 11em minmax(0, 1fr); }
#modos .keys5 b { display: flex; gap: .6em; align-items: flex-start; }
.ico { flex: none; width: 1.3em; height: 1.3em; margin-top: .04em; fill: none; stroke: var(--papel); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.modos__more { display: block; margin-top: clamp(24px, 3vw, 44px); text-align: center; }
.modos__more p { max-width: 60ch; margin-inline: auto; }
@media (min-width: 901px) and (max-width: 1150px) {
  #modos .mods { grid-template-columns: 1fr 1fr; }
  #modos .net { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 900px) { #modos .keys5 li { grid-template-columns: 1fr; } }

/* app: los datos van sobre el panel oscuro del marco de teléfono */
.app__demo.tel-stage { padding: clamp(20px, 3vw, 44px); gap: clamp(16px, 3vw, 44px); }
.app__demo.tel-stage .app__facts { color: var(--papel); }
.app__demo.tel-stage .app__facts dt { color: var(--suave-osc); }
@media (min-width: 901px) { .app__demo.tel-stage { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; } }
@media (max-width: 900px) { .app__demo.tel-stage { grid-template-columns: minmax(0, 1fr); } .app__demo.tel-stage .app__facts { max-width: 40ch; } }
.app__demo.tel-stage .tel { --tel-max: 300px; }
@media (min-width: 901px) { .app__demo.tel-stage { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
@media (max-width: 900px) { .app__demo.tel-stage .tel { --tel-max: 330px; } }

/* 2026-11-08 · correcciones de Baltasar */
/* Problema: hallazgos de la encuesta en lugar de la cifra */
.prob__stat .prob__kicker { font-size: .72em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); margin-top: 0; }
/* tres anillos animados, del mismo alto que la columna del título */
.prob__stat { display: flex; flex-direction: column; justify-content: space-between; gap: .9em; }
.rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 26px); }
.ring { margin: 0; display: flex; flex-direction: column; gap: .7em; }
.ring__plot { position: relative; width: 100%; max-width: 92px; aspect-ratio: 1; }
.prob__stat p.prob__kicker, .prob__stat p.prob__src { max-width: none; }
.prob__stat p.prob__src { font-size: .7em; line-height: 1.4; margin-top: 0; }
.ring__plot svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--linea-cla); stroke-width: 5; }
.ring__arc, .ring__seg { fill: none; stroke: var(--rojo); stroke-width: 5; stroke-dasharray: 0 100; transition: stroke-dasharray 1.4s var(--ease); }
.ring__seg--2 { stroke: var(--noche); transition-delay: .55s; }
.ring__seg--3 { stroke: #9A9EAA; transition-delay: .9s; }
.ring:nth-child(2) .ring__seg:not([class*="--"]) { transition-delay: .2s; }
.ring:nth-child(3) .ring__arc { transition-delay: .4s; }
.is-in .ring__arc, .is-in .ring__seg { stroke-dasharray: var(--v) 100; }
.prob__stat .ring__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; max-width: none; font-family: "Michroma", sans-serif; font-size: clamp(14px, 1.2vw, 19px); color: var(--noche); }
.ring__num small { font: 600 .6em/1 "Inter", sans-serif; margin-left: .12em; }
.ring figcaption { font-size: .74em; line-height: 1.3; color: var(--suave); }
.ring figcaption b { display: block; margin-bottom: .4em; font-size: .82em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--noche); }
.ring__key { list-style: none; margin: 0; padding: 0; display: grid; gap: .25em; }
.ring__key li { display: flex; align-items: center; gap: .45em; }
.ring__key i { flex: none; width: .62em; height: .62em; border-radius: 2px; background: var(--rojo); }
.ring__key .k2 { background: var(--noche); }
.ring__key .k3 { background: #9A9EAA; }
@media (prefers-reduced-motion: reduce) { .ring__arc, .ring__seg { transition: none; stroke-dasharray: var(--v) 100; } }
/* portada: el brillo de «Euler te lleva», un poco más visible */
.slogan .star { animation-name: star-glow-hero; }
@keyframes star-glow-hero {
  0%, 100% { text-shadow: 0 0 .25em rgba(243,241,236,.16); }
  45% { text-shadow: 0 0 .45em rgba(243,241,236,.72), 0 0 1.2em rgba(243,241,236,.34); }
}
@media (prefers-reduced-motion: reduce) { .slogan .star { text-shadow: 0 0 .45em rgba(243,241,236,.55); } }
/* Cómo llegamos: los cambios de fase se funden en lugar de saltar */
#mkt-svg .mk { transition: stroke-opacity .9s ease, stroke-width .9s ease, opacity .9s ease, fill .9s ease; }
@media (prefers-reduced-motion: reduce) { #mkt-svg .mk { transition: none; } }
/* Avances: el modelo 3D chico, sin fondo, sobre el fondo de la sección */
.proto__main--3d { position: relative; background: transparent; overflow: visible; border-radius: 0; }
.proto__main--3d .kit__v--3d { inset: 0; }
.proto__main--3d .mv__status { bottom: 0; }

/* 2026-11-08 · inicio en celular: el logo y el eslogan mandan; botones antes del texto; lo técnico, chico */
@media (max-width: 700px) {
  .hero .label { font-size: .56em; letter-spacing: .12em; margin-bottom: 30px; opacity: .8; }
  .hero__logo { width: min(88vw, 520px); margin: 0 0 26px; }
  .hero__cta { order: 1; margin-top: 26px; }
  .hero__lead { order: 2; font-size: .78em; line-height: 1.5; max-width: 34ch; margin-top: 22px; opacity: .85; }
  .hero__cta .cta__link { text-align: center; }
  .hero__foot { font-size: 8px; letter-spacing: .1em; opacity: .7; }
}