/* ================================================
   BLUEPRINT for PROA Proptech
   Liquid Glass · Sage Green Accent · Premium White
   ================================================ */

:root {
  --bg: #FFFFFF;
  --fg: #0B0F17;
  --fg-2: #4A5260;
  --muted: rgba(11,15,23,0.55);
  --soft: rgba(11,15,23,0.32);
  --hairline: rgba(11,15,23,0.08);
  --hairline-2: rgba(11,15,23,0.04);
  --accent: #1130CE;
  --accent-2: #2A48E0;
  --accent-glow: rgba(17,48,206,0.22);
  --warn: #C53A2F;
  --ok: #1F8A5B;
  --ease: cubic-bezier(.25, 1, .5, 1);
  --dur-normal: 0.8s;
  --dur-slow: 1.2s;
}

/* ======================== Reset ======================== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11","ss03";
  letter-spacing: -0.012em;
  line-height: 1.5;
}

/* ======================== Sections ======================== */
.section {
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(2rem,5vw,5rem) clamp(1.5rem,6vw,8rem);
}
.section-inner {
  width: 100%;
  max-width: 1120px;
  position: relative;
  z-index: 2;
}

/* ======================== Tech Circuit Background ======================== */
.circuit-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.circuit-bg svg {
  width: 100%;
  height: 100%;
}

/* Grid background (subtle) */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hairline-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-2) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 10%, transparent 70%);
  pointer-events: none;
}

/* Floating spheres */
.spheres-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}
.sphere-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(17,48,206,0.08), transparent 70%);
  top: -10%; right: -5%;
  animation: sphereFloat 20s ease-in-out infinite;
}
.sphere-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(17,48,206,0.06), transparent 70%);
  bottom: 10%; left: -8%;
  animation: sphereFloat 25s ease-in-out infinite reverse;
}
.sphere-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(42,72,224,0.05), transparent 70%);
  top: 40%; left: 50%;
  animation: sphereFloat 18s ease-in-out infinite 3s;
}
@keyframes sphereFloat {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(30px, -40px); }
  66% { transform: translate(-20px, 20px); }
}

/* ======================== Glass Surfaces ======================== */
.glass {
  background: rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 2px 8px rgba(10,31,68,0.04),
    0 18px 40px rgba(10,31,68,0.06);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0.08) 40%,
    transparent 100%);
  pointer-events: none;
}

/* ======================== Section Nav Dots ======================== */
.section-nav {
  position: fixed;
  right: clamp(1rem,2vw,2.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 100;
}
.nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hairline);
  cursor: pointer;
  transition: all 0.4s var(--ease);
  position: relative;
  border: 1.5px solid transparent;
}
.nav-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.nav-dot:hover::after { opacity: 1; }
.nav-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: scale(1.5);
}

/* ======================== Typography ======================== */
.section-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.section-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem,4.5vw,3.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--fg);
  text-wrap: balance;
  margin-bottom: 1.5rem;
}
.section-title .accent { color: var(--accent); font-weight: 800; }
.section-desc {
  font-size: clamp(1rem,1.4vw,1.15rem);
  color: var(--fg-2);
  max-width: 520px;
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: -0.015em;
}

/* ======================== Buttons ======================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: white;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%);
  transition: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--accent-glow);
}
.btn-primary:hover::before {
  transform: translateX(100%);
  transition: transform 0.7s var(--ease);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  transition: all 0.4s var(--ease);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.btn-ghost:hover {
  background: rgba(11,15,23,0.03);
  border-color: rgba(11,15,23,0.15);
  transform: translateY(-2px);
}

/* ======================== HERO ======================== */
.hero { background: transparent; }
.hero .section-inner {
  display: none;
}
.hero-badge {
  margin-bottom: 2rem;
}
.hero-badge img {
  height: 22px;
  width: auto;
  filter: invert(1);
  opacity: 0.6;
}
.hero-title {
  font-size: clamp(4.5rem,12vw,10rem);
  font-weight: 800;
  letter-spacing: -0.052em;
  line-height: 0.96;
  color: var(--fg);
  margin-bottom: 1.5rem;
}
.hero-title .accent { color: var(--accent); font-weight: 900; }
.hero-subtitle {
  font-size: clamp(1rem,1.8vw,1.35rem);
  color: var(--fg-2);
  font-weight: 300;
  line-height: 1.45;
  max-width: 520px;
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
}
.hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* Hero 3D composition */
.hero-composition {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 2.5rem auto 2rem;
  perspective: 1200px;
}
.hero-card {
  border-radius: 24px;
  padding: 3px;
  transform: rotateX(8deg) rotateY(-4deg);
  transition: transform 0.6s var(--ease);
}
.hero-card:hover {
  transform: rotateX(4deg) rotateY(0deg);
}
.hero-card-inner {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 50px 120px rgba(10,31,68,0.14);
}
.hero-card-inner video {
  width: 100%;
  display: block;
}
.hero-card-badge {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  z-index: 3;
}
/* Floating mini cards around the hero composition */
.hero-float {
  position: absolute;
  border-radius: 16px;
  padding: 14px 18px;
  z-index: 3;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: floatCard 6s ease-in-out infinite;
}
.hero-float .hf-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.hero-float.f1 {
  top: 10%;
  right: -10%;
  animation-delay: 0s;
}
.hero-float.f2 {
  bottom: 15%;
  left: -8%;
  animation-delay: 2s;
}
.hero-float.f3 {
  top: 5%;
  left: -5%;
  animation-delay: 4s;
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px;
  height: 36px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0% { top: -100%; }
  50% { top: 100%; }
  100% { top: 100%; }
}

/* Tech annotations */
.tech-annotation {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--soft);
  opacity: 0.5;
  pointer-events: none;
  font-weight: 500;
}
.hero .tech-annotation.top-left { top: clamp(1.5rem,4vw,3rem); left: clamp(1.5rem,6vw,5rem); }
.hero .tech-annotation.top-right { top: clamp(1.5rem,4vw,3rem); right: clamp(1.5rem,6vw,5rem); }

/* Crosshairs */
.crosshair {
  position: absolute;
  width: 20px; height: 20px;
  pointer-events: none;
  opacity: 0.15;
}
.crosshair::before, .crosshair::after {
  content: '';
  position: absolute;
  background: var(--accent);
}
.crosshair::before { width: 1px; height: 100%; left: 50%; top: 0; }
.crosshair::after { width: 100%; height: 1px; top: 50%; left: 0; }

/* ======================== PROBLEM ======================== */
.problem { background: transparent; }
.problem .section-inner { text-align: center; }
.problem .section-title { margin-bottom: 3.5rem; }

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}
.comparison-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.comparison-col.traditional .metric-card {
  border-color: rgba(197,58,47,0.12);
}
.comparison-col.blueprint-col .metric-card {
  background: rgba(17,48,206,0.03);
  border-color: rgba(17,48,206,0.12);
}
.comparison-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.vs-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--soft);
  padding: 6px 14px;
  border-radius: 999px;
}
.vs-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, transparent, var(--hairline), transparent);
}
.metric-card {
  padding: 1.15rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.5);
  text-align: left;
}
.metric-value {
  font-size: clamp(1.3rem,2.5vw,1.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
  letter-spacing: -0.025em;
}
.traditional .metric-value {
  color: var(--warn);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.blueprint-col .metric-value { color: var(--accent); }
.metric-label {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
}
.col-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0.25rem;
}
.traditional .col-header { color: var(--warn); }
.blueprint-col .col-header { color: var(--accent); }

/* ======================== OVERVIEW ======================== */
.overview { background: transparent; }
.overview .section-inner { text-align: center; position: relative; z-index: 2; }

/* Módulos — dynamic animated background */
#como .grid-bg{ animation: modGridDrift 22s linear infinite; }
@keyframes modGridDrift{ from{ background-position: 0 0, 0 0; } to{ background-position: 80px 80px, 80px 80px; } }
.modules-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.modules-bg .mb-glow{
  position:absolute; border-radius:50%;
  filter: blur(58px); opacity:.5;
  mix-blend-mode: multiply;
}
.mb-glow.mb-g1{ width:440px; height:440px; left:-6%; top:8%;
  background: radial-gradient(circle, rgba(42,111,219,0.34), transparent 68%);
  animation: mbFloat1 17s ease-in-out infinite; }
.mb-glow.mb-g2{ width:520px; height:520px; right:-8%; top:30%;
  background: radial-gradient(circle, rgba(91,140,255,0.30), transparent 68%);
  animation: mbFloat2 21s ease-in-out infinite; }
.mb-glow.mb-g3{ width:360px; height:360px; left:38%; bottom:-12%;
  background: radial-gradient(circle, rgba(17,48,206,0.22), transparent 70%);
  animation: mbFloat3 19s ease-in-out infinite; }
@keyframes mbFloat1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(60px,40px) scale(1.12); } }
@keyframes mbFloat2{ 0%,100%{ transform:translate(0,0) scale(1.05); } 50%{ transform:translate(-50px,30px) scale(0.92); } }
@keyframes mbFloat3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-40px,-50px) scale(1.15); } }
@media (prefers-reduced-motion: reduce){
  #como .grid-bg, .mb-glow{ animation: none !important; }
}
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  position: relative;
}
.steps-row::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), var(--hairline), transparent);
}
.step-preview {
  padding: 2rem 1.5rem;
  border-radius: 20px;
  transition: all 0.5s var(--ease);
  position: relative;
}
.step-preview:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(10,31,68,0.06);
}
.step-num {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}
.step-preview h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: -0.015em;
}
.step-preview p {
  font-size: 0.88rem;
  color: var(--fg-2);
  line-height: 1.55;
}

/* ======================== STEP DETAIL ======================== */
.step-detail { background: transparent; }
.step-detail.alt-bg { background: transparent; }
.step-detail .section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem);
  align-items: center;
}
.step-text { max-width: 460px; }
.step-text .step-number {
  font-size: clamp(5rem,10vw,7rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(17,48,206,0.06);
  margin-bottom: -0.5rem;
  letter-spacing: -0.05em;
}
.step-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 340px;
}

/* ======================== BENEFITS ======================== */
.benefits { background: transparent; }
.benefits .section-inner { text-align: center; }

/* Cards are dealt in like playing cards, one after another */
body.deck-js #beneficios.is-active .benefit-card,
#beneficios[data-deck-active] .benefit-card{ animation: benefitDeal .62s cubic-bezier(.2,.85,.3,1) both; transform-origin: bottom center; }
body.deck-js #beneficios.is-active .benefit-card:nth-child(1),
#beneficios[data-deck-active] .benefit-card:nth-child(1){ animation-delay:.12s; }
body.deck-js #beneficios.is-active .benefit-card:nth-child(2),
#beneficios[data-deck-active] .benefit-card:nth-child(2){ animation-delay:.30s; }
body.deck-js #beneficios.is-active .benefit-card:nth-child(3),
#beneficios[data-deck-active] .benefit-card:nth-child(3){ animation-delay:.48s; }
body.deck-js #beneficios.is-active .benefit-card:nth-child(4),
#beneficios[data-deck-active] .benefit-card:nth-child(4){ animation-delay:.66s; }
@keyframes benefitDeal{
  0%{ opacity:0; transform: translate(-46px,-90px) rotate(-13deg) scale(.9); }
  60%{ opacity:1; }
  100%{ opacity:1; transform: translate(0,0) rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  body.deck-js #beneficios.is-active .benefit-card,
  #beneficios[data-deck-active] .benefit-card{ animation:none !important; opacity:1 !important; transform:none !important; }
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Benefit cards as code blocks (stand out on cobalt) ── */
.benefit-card.code-card{
  padding: 0 !important;
  overflow: hidden;
  text-align: left;
  align-items: stretch;
  justify-content: flex-start;
  background: #0a1330 !important;
  border: 1px solid rgba(143,176,255,0.26);
  border-radius: 16px;
  box-shadow: 0 22px 50px rgba(5,12,45,0.45);
}
.benefit-card.code-card::before{ display:none; }
.benefit-card.code-card:hover{
  transform: translateY(-8px);
  border-color: rgba(143,176,255,0.6);
  box-shadow: 0 30px 64px rgba(5,12,45,0.6);
}
.code-card .cc-bar{
  display:flex; align-items:center; gap:6px;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(143,176,255,0.16);
  background: rgba(255,255,255,0.03);
}
.code-card .cc-bar i{ width:9px; height:9px; border-radius:50%; background: rgba(143,176,255,0.4); }
.code-card .cc-bar i:nth-child(1){ background:#2A6FDB; }
.code-card .cc-bar i:nth-child(2){ background:#5b8cff; }
.code-card .cc-bar i:nth-child(3){ background:#9db8ff; }
.code-card .cc-ic{ margin-left:auto; width:26px; height:26px; color:#8fb0ff; display:flex; align-items:center; justify-content:center; }
.code-card .cc-ic svg{ width:22px; height:22px; overflow:visible; }
.code-card .cc-body{
  font-family: 'JetBrains Mono', monospace;
  padding: 22px 20px 8px;
  display:flex; flex-direction:column; gap:8px;
}
.code-card .cc-cmt{ font-size: 0.82rem; color: #6f86c9; }
.code-card .cc-line{ font-size: 1.04rem; display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.code-card .cc-key{ color:#84a9ff; }
.code-card .cc-op{ color:#9db8ff; opacity:.8; }
.code-card .cc-num{ font-family:'Inter',sans-serif; font-size: 2.9rem; font-weight:800; letter-spacing:-0.04em; color:#fff; line-height:1; }
.code-card .cc-unit{ font-size:0.8rem; color:#5f76b8; align-self:center; }
.code-card h3{
  color:#fff; font-size:1rem; font-weight:600; line-height:1.3;
  padding: 6px 20px 22px; margin:0; letter-spacing:-0.01em; text-wrap:balance;
}
@media (max-width:1100px){ .benefits-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .benefits-grid{ grid-template-columns: 1fr; } }
.benefit-card {
  position: relative;
  overflow: hidden;
  padding: 2.6rem 1.6rem 2.4rem;
  border-radius: 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(42,111,219,0.07), rgba(255,255,255,0.82) 42%) !important;
  border: 1px solid rgba(17,48,206,0.12);
  box-shadow: 0 14px 38px rgba(10,31,68,0.08);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.benefit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2A6FDB, #1130CE);
  opacity: 0.55;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 64px rgba(17,48,206,0.18);
  border-color: rgba(17,48,206,0.28);
}
.benefit-card:hover::before { opacity: 1; }
.benefit-card:hover .benefit-icon.benefit-anim {
  background: linear-gradient(155deg, #2A6FDB, #1130CE);
  color: #fff;
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 18px 36px rgba(17,48,206,0.42);
}
.benefit-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.85rem;
  line-height: 1;
}
.benefit-figure b {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 4.6rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  background: linear-gradient(150deg, #4f80ec, #1130CE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}
.benefit-figure b i {
  font-style: normal;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: 4px;
  align-self: center;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(17,48,206,0.1);
  color: var(--accent);
  text-transform: uppercase;
}
.benefit-figure span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.benefit-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 0;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #2A6FDB, #1130CE);
}
.benefit-icon {
  width: 66px;
  height: 66px;
  border-radius: 18px;
  background: linear-gradient(155deg, #2A6FDB, #1130CE);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.3rem;
  color: #fff;
  box-shadow: 0 12px 26px rgba(17,48,206,0.30);
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease), transform 0.45s var(--ease);
}
.benefit-card h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
  position: relative;
}

/* Benefit cards must never depend on the .anim entrance for visibility
   (the card is itself .anim; deckRise could leave it stuck at opacity:0).
   Keep cards always visible — the dynamism lives in the figure pop + bar fill. */
.benefit-card.anim { opacity: 1 !important; animation: none !important; transform: none !important; }

/* Dynamic active-state: figure pops in, accent bar fills, staggered.
   NOTE: figure opacity is ALWAYS 1 — the pop animates transform only, so the
   number can never get stuck invisible (throttled tab / export / reduced-motion). */
.benefit-figure b { will-change: transform; }
.benefits.is-active .benefit-figure b,
.benefits[data-deck-active] .benefit-figure b { animation: benefitPop 0.6s var(--ease) both; }
.benefits.is-active .benefit-bar,
.benefits[data-deck-active] .benefit-bar { animation: benefitBar 0.9s var(--ease) forwards; }
.benefits.is-active .benefit-card:nth-child(1) .benefit-figure b,
.benefits[data-deck-active] .benefit-card:nth-child(1) .benefit-figure b { animation-delay: 0.15s; }
.benefits.is-active .benefit-card:nth-child(2) .benefit-figure b,
.benefits[data-deck-active] .benefit-card:nth-child(2) .benefit-figure b { animation-delay: 0.28s; }
.benefits.is-active .benefit-card:nth-child(3) .benefit-figure b,
.benefits[data-deck-active] .benefit-card:nth-child(3) .benefit-figure b { animation-delay: 0.41s; }
.benefits.is-active .benefit-card:nth-child(4) .benefit-figure b,
.benefits[data-deck-active] .benefit-card:nth-child(4) .benefit-figure b { animation-delay: 0.54s; }
.benefits.is-active .benefit-card:nth-child(1) .benefit-bar,
.benefits[data-deck-active] .benefit-card:nth-child(1) .benefit-bar { animation-delay: 0.3s; }
.benefits.is-active .benefit-card:nth-child(2) .benefit-bar,
.benefits[data-deck-active] .benefit-card:nth-child(2) .benefit-bar { animation-delay: 0.43s; }
.benefits.is-active .benefit-card:nth-child(3) .benefit-bar,
.benefits[data-deck-active] .benefit-card:nth-child(3) .benefit-bar { animation-delay: 0.56s; }
.benefits.is-active .benefit-card:nth-child(4) .benefit-bar,
.benefits[data-deck-active] .benefit-card:nth-child(4) .benefit-bar { animation-delay: 0.69s; }
@keyframes benefitPop {
  0% { transform: scale(0.5) translateY(10px); }
  60% { transform: scale(1.12); }
  100% { transform: none; }
}
@keyframes benefitBar { to { width: 100%; } }
@media print {
  .benefit-figure b { animation: none !important; transform: none !important; }
  .benefit-bar { width: 100% !important; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .benefit-figure b { animation: none !important; transform: none !important; }
  .benefit-bar { width: 100% !important; animation: none !important; }
}

/* ===== Animated benefit icons ===== */
.benefit-icon.benefit-anim{ width:74px; height:74px; margin-bottom:1.4rem; }
.benefit-icon.benefit-anim svg{ width:40px; height:40px; overflow:visible; }
.benefit-anim svg *{ transform-box: fill-box; }
.benefit-anim .b-clock .hand-h,
.benefit-anim .b-clock .hand-m{ transform-box: view-box; transform-origin:24px 24px; }
/* resting state (inactive / reduced-motion / print) */
.b-target .ring{ opacity:.7; }
.b-target .tick{ stroke-dasharray:21; stroke-dashoffset:0; }
.b-stack .q1{ --tx:-6px; --ty:-6px; }
.b-stack .q2{ --tx:6px; --ty:-6px; }
.b-stack .q3{ --tx:-6px; --ty:6px; }
.b-stack .q4{ --tx:6px; --ty:6px; }

@media (prefers-reduced-motion: no-preference){
  .benefits.is-active .b-save .coingrp,
  .benefits[data-deck-active] .b-save .coingrp{ animation: bCoinFlip 2.8s ease-in-out infinite; }

  .benefits.is-active .b-target .ring,
  .benefits[data-deck-active] .b-target .ring{ animation: bRingPulse 2.4s ease-in-out infinite; }
  .benefits.is-active .b-target .ring.r2,
  .benefits[data-deck-active] .b-target .ring.r2{ animation-delay:.18s; }
  .benefits.is-active .b-target .tick,
  .benefits[data-deck-active] .b-target .tick{ animation: bTickDraw 2.4s ease-in-out infinite; }

  .benefits.is-active .b-clock .hand-m,
  .benefits[data-deck-active] .b-clock .hand-m{ animation: bSpin 3s linear infinite; }
  .benefits.is-active .b-clock .hand-h,
  .benefits[data-deck-active] .b-clock .hand-h{ animation: bSpin 11s linear infinite; }

  .benefits.is-active .b-stack .q,
  .benefits[data-deck-active] .b-stack .q{ animation: bMerge 2.8s ease-in-out infinite; }
}
@keyframes bCoinFlip{ 0%,28%{ transform:scaleX(1);} 50%{ transform:scaleX(.1);} 72%,100%{ transform:scaleX(1);} }
@keyframes bRingPulse{ 0%,100%{ transform:scale(.8); opacity:.4;} 50%{ transform:scale(1.05); opacity:1;} }
@keyframes bTickDraw{ 0%,42%{ stroke-dashoffset:21;} 72%,100%{ stroke-dashoffset:0;} }
@keyframes bSpin{ to{ transform:rotate(360deg);} }
@keyframes bMerge{ 0%,100%{ transform:translate(var(--tx),var(--ty));} 42%,72%{ transform:translate(0,0);} }

/* ======================== CTA ======================== */
.cta-section { background: transparent; }

/* Bold full-bleed cobalt finale */
.cta-bold{ background: linear-gradient(155deg, #0b1437 0%, #142a76 52%, #1130CE 100%) !important; overflow: hidden; }
.cta-bold .section-inner{ position: relative; z-index: 3; }
.cta-bold .section-label{ color: #9db8ff !important; }
.cta-bold .section-title{ color: #fff; }
.cta-bold .section-title .accent{ color: #8fb0ff !important; -webkit-text-fill-color:#8fb0ff; }
.cta-bold .section-desc{ color: rgba(255,255,255,0.82) !important; }
.cta-bold .slide-num-badge{ color: rgba(255,255,255,0.5); }
.cta-bold .crosshair{ color:#fff; opacity:0.22; }
.cta-bold .crosshair::before, .cta-bold .crosshair::after{ background:#fff; }
.cta-bold .cta-footer{ opacity:0.85; }
.cta-bold .cta-footer span{ color: rgba(255,255,255,0.7); }
.cta-bold .cta-footer img{ filter: brightness(0) invert(1); }

/* Animated background */
.cta-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.cta-grid{ position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 80%);
  animation: ctaGrid 26s linear infinite;
}
@keyframes ctaGrid{ from{ background-position:0 0,0 0; } to{ background-position:60px 60px,60px 60px; } }
.cta-orb{ position:absolute; border-radius:50%; filter: blur(70px); }
.cta-orb.o1{ width:520px; height:520px; left:-8%; top:-10%;
  background: radial-gradient(circle, rgba(91,140,255,0.5), transparent 68%); animation: ctaOrb1 18s ease-in-out infinite; }
.cta-orb.o2{ width:560px; height:560px; right:-10%; bottom:-14%;
  background: radial-gradient(circle, rgba(42,111,219,0.5), transparent 68%); animation: ctaOrb2 22s ease-in-out infinite; }
@keyframes ctaOrb1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(70px,50px) scale(1.15); } }
@keyframes ctaOrb2{ 0%,100%{ transform:translate(0,0) scale(1.1); } 50%{ transform:translate(-60px,-40px) scale(0.92); } }

/* Big primary CTA as a contrasting code box */
.btn-cta-code{
  display:inline-flex; align-items:center; gap:10px;
  padding: 1.15rem 2.1rem; font-size: 1.1rem;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  background: #0a1330 !important; color: #eaf0ff !important;
  border: 1.5px solid rgba(143,176,255,0.5) !important;
  border-radius: 14px; position: relative; overflow: hidden;
  box-shadow: 0 18px 46px rgba(5,12,45,0.5);
  animation: ctaPulse 2.4s ease-in-out infinite;
}
.btn-cta-code .ccd-dollar{ color:#5b8cff; font-weight:700; }
.btn-cta-code .ccd-txt{ color:#eaf0ff; }
.btn-cta-code .ccd-paren{ color:#8fb0ff; }
.btn-cta-code svg{ width:20px; height:20px; color:#8fb0ff; transition: transform .35s var(--ease); }
.btn-cta-code:hover{ transform: translateY(-3px) scale(1.03); border-color: rgba(143,176,255,0.9) !important; box-shadow: 0 26px 60px rgba(5,12,45,0.6); }
.btn-cta-code:hover svg{ transform: translateX(6px); }
.btn-cta-code::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background: linear-gradient(100deg, transparent, rgba(143,176,255,0.28), transparent);
  transform: skewX(-18deg); animation: ctaShine 3s ease-in-out infinite;
}
@keyframes ctaShine{ 0%{ left:-60%; } 55%,100%{ left:130%; } }
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 18px 46px rgba(5,12,45,0.5), 0 0 0 0 rgba(143,176,255,0.5), 0 0 30px 4px rgba(143,176,255,0.0); transform: scale(1); }
  50%{ box-shadow:0 18px 46px rgba(5,12,45,0.5), 0 0 0 14px rgba(143,176,255,0), 0 0 40px 8px rgba(143,176,255,0.4); transform: scale(1.03); }
}

.btn-ghost-light{ color:#fff !important; border-color: rgba(255,255,255,0.4) !important; }
.btn-ghost-light:hover{ background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.7) !important; }

@media (prefers-reduced-motion: reduce){
  .cta-grid, .cta-orb, .btn-cta-lg, .btn-cta-lg::after{ animation: none !important; }
}

/* Headline word-by-word reveal */
.cta-head{ }
.cta-head .w{ display:inline-block; }
body.deck-js .cta-head .w{ opacity:0; transform: translateY(28px); }
body.deck-js #cta.is-active .cta-head .w,
#cta[data-deck-active] .cta-head .w{ animation: ctaWord .58s cubic-bezier(.2,.85,.3,1) both; }
.cta-head .w:nth-of-type(1){ animation-delay:.10s; }
.cta-head .w:nth-of-type(2){ animation-delay:.17s; }
.cta-head .w:nth-of-type(3){ animation-delay:.24s; }
.cta-head .w:nth-of-type(4){ animation-delay:.31s; }
.cta-head .w:nth-of-type(5){ animation-delay:.38s; }
.cta-head .w:nth-of-type(6){ animation-delay:.45s; }
.cta-head .w:nth-of-type(7){ animation-delay:.54s; }
.cta-head .w:nth-of-type(8){ animation-delay:.63s; }
.cta-head .w:nth-of-type(9){ animation-delay:.72s; }
@keyframes ctaWord{ from{ opacity:0; transform: translateY(28px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  body.deck-js .cta-head .w{ opacity:1; transform:none; }
  body.deck-js #cta.is-active .cta-head .w,
  #cta[data-deck-active] .cta-head .w{ animation:none !important; }
}

.cta-section .section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-section .section-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  max-width: 650px;
}
.cta-section .section-desc {
  margin-bottom: 2.5rem;
  text-align: center;
}
.cta-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 4rem;
}
.cta-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.4;
}
.cta-footer img {
  height: 26px;
  width: auto;
  filter: none;
}
.cta-footer { opacity: 0.7; }
.cta-footer span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.cta-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17,48,206,0.06), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

/* ======================== SLIDE NUMBER BADGE ======================== */
/* To hide before export: remove 'show-slide-nums' from <body> tag */
.slide-num-badge {
  display: none;
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  z-index: 50;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: rgba(17,48,206,0.07);
  border: 1px solid rgba(17,48,206,0.15);
  padding: 5px 12px;
  border-radius: 999px;
  pointer-events: none;
}
body.show-slide-nums .slide-num-badge { display: block; }
.hero .slide-num-badge {
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

/* ======================== HERO VIDEO BG ======================== */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5,10,28,0.1) 0%,
    transparent 30%,
    transparent 45%,
    rgba(5,10,28,0.6) 75%,
    rgba(5,10,28,0.94) 100%
  );
  z-index: 1;
}
.hero { background: #060D18; padding: 0; }
.hero .section-inner { z-index: 2; }
.hero .scroll-indicator { z-index: 2; }

/* Keldai wordmark top-left */
.hero-wordmark {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  left: clamp(1.5rem, 4vw, 4rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-wordmark img {
  height: 40px;
  width: auto;
  opacity: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

/* Hero title block - above step cards */
.hero-title-block {
  position: absolute;
  bottom: clamp(9rem, 18vh, 14rem);
  left: clamp(1.5rem, 5vw, 5rem);
  z-index: 3;
  text-align: left;
  pointer-events: none;
}
.hero-title-row {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}
.hero-main-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: white;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.hero-title-accent {
  color: rgba(122,153,255,1);
}
.hero-main-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding-bottom: 0.3rem;
}
.hero-tagline {
  margin-top: 1.1rem;
  max-width: none;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.85rem, 1.55vw, 1.4rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.hero-tagline b { font-weight: 700; color: #fff; }

/* Bottom step cards */
.hero-bottom {
  position: absolute;
  bottom: clamp(1.5rem, 3vh, 2.5rem);
  left: clamp(1.5rem, 5vw, 5rem);
  right: clamp(1.5rem, 5vw, 5rem);
  z-index: 3;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  overflow: hidden;
}
.hero-step-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 1.5rem 2rem;
}
.hero-step-divider {
  width: 1px;
  background: rgba(255,255,255,0.1);
  align-self: stretch;
}
.hero-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  color: rgba(122,153,255,0.95);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.hero-step-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.hero-step-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  letter-spacing: -0.005em;
}

/* ======================== HERO META CHIPS ======================== */
.hero-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2rem auto 2.5rem;
}
.hero-chip {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
}

/* ======================== OPERATIVA GRID ======================== */
.operativa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 860px;
  margin: 0 auto;
}
.operativa-card {
  padding: 2rem 1.5rem;
  border-radius: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.operativa-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(17,48,206,0.06);
  border: 1.5px solid rgba(17,48,206,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.operativa-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.operativa-card p {
  font-size: 0.88rem;
  color: var(--fg-2);
  line-height: 1.55;
}

/* ======================== ENERGY VISUAL ======================== */
.energy-visual {
  padding: 2rem;
  border-radius: 20px;
  max-width: 360px;
  width: 100%;
}
.energy-header {
  margin-bottom: 1.5rem;
}
.energy-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1.5rem;
}
.ebar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  position: relative;
}
.ebar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  width: 18px;
  text-align: center;
  color: var(--fg);
}
.ebar-fill {
  height: 100%;
  width: var(--w);
  border-radius: 4px 16px 16px 4px;
  transition: width 1s var(--ease);
}
.ebar.active { transform: scale(1.04); }
.ebar.active .ebar-fill { box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.ebar-marker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  margin-left: 4px;
}
.energy-factors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.energy-factor {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(17,48,206,0.05);
  border: 1px solid rgba(17,48,206,0.1);
  padding: 6px 12px;
  border-radius: 999px;
}

/* ======================== APP TAG ======================== */
.app-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.works-tag { color: var(--ok); }

/* ======================== ECOSYSTEM VISUAL ======================== */
.ecosystem-section { background: var(--bg-secondary, #F8FAFC); }
.eco-section-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.eco-header { text-align: left; }

/* Merged slide — separator + modules block under the platform panels */
.eco-modules-sep{ height:1px; background: linear-gradient(90deg, transparent, rgba(17,48,206,0.18), transparent); margin: 0.5rem 0 0.5rem; }
.eco-section-inner .bp-modules{ margin-top: 1.6rem; }
.eco-section-inner > .section-label,
.eco-section-inner > .section-title{ text-align: center; }
.eco-section-inner > .section-title{ margin-left:auto; margin-right:auto; }
.eco-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
}
.eco-panel {
  border-radius: 24px;
  padding: 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: white;
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 30px rgba(10,31,68,0.06);
}
.eco-panel-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Phone peeking out of the móvil panel corner */
.eco-panel-blueprint{ position: relative; }
.eco-panel-desktop{ position: relative; }
.eco-panel-laptop{
  position: absolute;
  top: -66px; right: -54px;
  width: 300px; height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 18px 32px rgba(8,20,80,0.26));
  transform: rotate(-5deg);
  animation: ecoLaptopFloat 5.6s ease-in-out infinite;
}
@keyframes ecoLaptopFloat{
  0%,100%{ transform: rotate(-5deg) translateY(0); }
  50%{ transform: rotate(-5deg) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce){ .eco-panel-laptop{ animation: none; } }
.eco-panel-phone{
  position: absolute;
  top: -46px; right: -34px;
  width: 112px; height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 16px 30px rgba(8,20,80,0.30));
  transform: rotate(7deg);
  animation: ecoPhoneFloat 5s ease-in-out infinite;
}
@keyframes ecoPhoneFloat{
  0%,100%{ transform: rotate(7deg) translateY(0); }
  50%{ transform: rotate(7deg) translateY(-9px); }
}
@media (prefers-reduced-motion: reduce){ .eco-panel-phone{ animation: none; } }
.eco-panel-device {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: rgba(17,48,206,0.08);
  border: 1.5px solid rgba(17,48,206,0.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.eco-panel-device-works {
  background: rgba(31,138,91,0.08);
  border-color: rgba(31,138,91,0.15);
  color: var(--ok);
}
.eco-panel-appname {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}
.eco-panel-appname-works { color: var(--ok); }
.eco-panel-plat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.eco-panel-desc {
  font-size: 0.9rem;
  color: var(--fg-2);
  line-height: 1.55;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline);
}
.eco-panel-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.eco-panel-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.eco-panel-step-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.eco-panel-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(31,138,91,0.08);
  border: 1.5px solid var(--ok);
  color: var(--ok);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.eco-panel-step b {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.eco-panel-step p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Flow center column */
.eco-flow-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.eco-flow-line-top,
.eco-flow-line-bot {
  width: 1px;
  height: 60px;
  position: relative;
  overflow: hidden;
}
.eco-flow-line-top { background: linear-gradient(to bottom, transparent, var(--accent)); }
.eco-flow-line-bot { background: linear-gradient(to bottom, var(--accent), transparent); }
.eco-flow-line-top::after,
.eco-flow-line-bot::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: rgba(17,48,206,0.6);
  box-shadow: 0 0 8px 1px rgba(17,48,206,0.45);
  opacity: 0;
}
/* Data converges on the Sync badge from both sides — only while visible */
.ecosystem-section.is-active .eco-flow-line-top::after,
.ecosystem-section[data-deck-active] .eco-flow-line-top::after { animation: flowToBadge 1.5s linear infinite; }
.ecosystem-section.is-active .eco-flow-line-bot::after,
.ecosystem-section[data-deck-active] .eco-flow-line-bot::after { animation: flowFromBadge 1.5s linear infinite; animation-delay: .75s; }
@keyframes flowToBadge {
  0% { top: -120%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 220%; opacity: 0; }
}
@keyframes flowFromBadge {
  0% { top: 220%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: -120%; opacity: 0; }
}
@keyframes flowPulse {
  0% { top: -100%; }
  100% { top: 200%; }
}
.eco-flow-db {
  padding: 14px 18px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-align: center;
  background: white;
  border: 1px solid rgba(17,48,206,0.12);
  box-shadow: 0 4px 16px rgba(10,31,68,0.06);
}
.eco-flow-db svg { display: block; }
/* Spinning sync icon + breathing badge while the section is visible */
.ecosystem-section.is-active .eco-flow-db svg,
.ecosystem-section[data-deck-active] .eco-flow-db svg { animation: syncSpin 1.5s linear infinite; transform-origin: 50% 50%; transform-box: view-box; }
.ecosystem-section.is-active .eco-flow-db,
.ecosystem-section[data-deck-active] .eco-flow-db { animation: syncGlow 1.5s ease-in-out infinite; }
@keyframes syncSpin { to { transform: rotate(360deg); } }
@keyframes syncGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(10,31,68,0.06), 0 0 0 0 rgba(17,48,206,0.18); border-color: rgba(17,48,206,0.12); }
  50% { box-shadow: 0 6px 22px rgba(17,48,206,0.16), 0 0 0 6px rgba(17,48,206,0.07); border-color: rgba(17,48,206,0.32); }
}
@media (prefers-reduced-motion: reduce) {
  .eco-flow-db svg, .eco-flow-db,
  .eco-flow-line-top::after, .eco-flow-line-bot::after { animation: none !important; }
}
.eco-flow-db span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.eco-flow-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  text-align: center;
}

/* ======================== BLUEPRINT FLOW (slide 03) ======================== */
.bp-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2.5rem;
}
.bp-flow-step {
  background: white;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 24px rgba(10,31,68,0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  transition: box-shadow 0.4s var(--ease);
}
.bp-flow-step:hover {
  box-shadow: 0 8px 32px rgba(17,48,206,0.1);
  border-color: rgba(17,48,206,0.15);
}
.bp-flow-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.bp-flow-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.bp-flow-desc {
  font-size: 0.875rem;
  color: var(--fg-2);
  line-height: 1.55;
  border-top: 1px solid var(--hairline);
  padding-top: 0.75rem;
}
.bp-flow-output {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bp-flow-output span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(17,48,206,0.05);
  border: 1px solid rgba(17,48,206,0.1);
  padding: 4px 10px;
  border-radius: 999px;
}
.bp-flow-arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.bp-flow-arrow-line {
  width: 20px;
  height: 1px;
  background: var(--hairline);
}
.bp-flow-footer {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  color: var(--fg-2);
  font-size: 0.875rem;
}
.bp-flow-footer strong { color: var(--ok); font-weight: 600; }
.bp-flow-footer-line {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* ======================== ECOSYSTEM FLOW (old) ======================== */
.ecosystem-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 860px;
  margin: 3rem auto 0;
}
.eco-app {
  padding: 2rem 1.75rem;
  border-radius: 20px;
}
.eco-app-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}
.eco-app-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(17,48,206,0.06);
  border: 1.5px solid rgba(17,48,206,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.eco-app-name {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.eco-app-platform {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.eco-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eco-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--fg-2);
  font-weight: 500;
}
.eco-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.eco-step-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(31,138,91,0.1);
  border: 1.5px solid var(--ok);
  color: var(--ok);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.eco-flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.eco-db {
  padding: 16px 20px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.eco-arrow-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.eco-arrow-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--soft);
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

/* ======================== BBDD FLOW ======================== */
.bbdd-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 800px;
  margin: 0 auto;
}
.bbdd-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 2rem 2.5rem;
  border-radius: 20px;
  color: var(--accent);
  min-width: 160px;
}
.bbdd-node.bbdd-center {
  padding: 2.5rem 3rem;
  border-radius: 24px;
  transform: scale(1.05);
}
.bbdd-node span {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.bbdd-node small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bbdd-connector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 140px;
}
.bbdd-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hairline), var(--line-accent, rgba(17,48,206,0.2)), var(--hairline));
  position: relative;
}
.bbdd-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(17,48,206,0.06);
  border: 1px solid rgba(17,48,206,0.1);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ======================== ANIMATIONS ======================== */
.anim {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-normal) var(--ease),
    transform var(--dur-normal) var(--ease);
}
.anim.visible { opacity: 1; transform: none; }
.anim.fade-in { transform: none; }
.anim.slide-left { transform: translateX(-30px); }
.anim.slide-left.visible { transform: none; }
.anim.slide-right { transform: translateX(30px); }
.anim.slide-right.visible { transform: none; }
.anim.scale-in { transform: scale(0.9); }
.anim.scale-in.visible { transform: none; }
.anim.wipe-reveal {
  opacity: 1; transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-slow) var(--ease);
}
.anim.wipe-reveal.visible { clip-path: inset(0 0 0 0); }

.anim[data-delay="100"] { transition-delay: 100ms; }
.anim[data-delay="200"] { transition-delay: 200ms; }
.anim[data-delay="300"] { transition-delay: 300ms; }
.anim[data-delay="400"] { transition-delay: 400ms; }
.anim[data-delay="500"] { transition-delay: 500ms; }
.anim[data-delay="600"] { transition-delay: 600ms; }
.anim[data-delay="700"] { transition-delay: 700ms; }
.anim[data-delay="800"] { transition-delay: 800ms; }

/* ======================== VIDEO & SCREENSHOT FRAMES ======================== */
.video-frame,
.screenshot-frame {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(10,31,68,0.12);
  position: relative;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.video-frame {
  max-width: 420px;
}
.video-frame:hover,
.screenshot-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 50px 120px rgba(10,31,68,0.16);
}
.video-frame video,
.screenshot-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.screenshot-stack {
  position: relative;
  perspective: 800px;
}
.screenshot-stack .screenshot-frame:nth-child(2) {
  position: absolute;
  top: 12%;
  left: -8%;
  width: 55%;
  z-index: 2;
  transform: rotateY(4deg);
}
.screenshot-stack .screenshot-frame:first-child { width: 100%; }

/* Works placeholder (slide 08) */
.works-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(17,48,206,0.05) 0 12px, rgba(17,48,206,0.10) 12px 24px);
  border: 1px dashed rgba(17,48,206,0.4);
  box-shadow: none;
}
.works-placeholder-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17,48,206,0.85);
}

/* Feature pills */
.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1.5rem;
}
.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(17,48,206,0.04);
  border: 1px solid rgba(17,48,206,0.1);
}
.feature-pill .pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Reversed step layout */
.step-detail.reversed .section-inner { direction: rtl; }
.step-detail.reversed .section-inner > * { direction: ltr; }

/* ======================== RESPONSIVE ======================== */
@media (max-width: 768px) {
  .operativa-grid { grid-template-columns: 1fr; max-width: 400px; }
  .comparison-grid { grid-template-columns: 1fr; gap: 1rem; }
  .comparison-separator { flex-direction: row; justify-content: center; }
  .vs-line { width: 60px; height: 1px; }
  .steps-row { grid-template-columns: 1fr; gap: 1rem; }
  .steps-row::before { display: none; }
  .step-detail .section-inner { grid-template-columns: 1fr; text-align: center; }
  .step-detail.reversed .section-inner { direction: ltr; }
  .step-visual { min-height: 200px; }
  .step-text { max-width: 100%; }
  .step-text .step-number { font-size: 4rem; }
  .benefits-grid { grid-template-columns: 1fr; }
  .section-nav { display: none; }
  .hero-float { display: none; }
  .hero-composition { max-width: 100%; }
  .hero-card { transform: rotateX(4deg) rotateY(0deg); }
}

/* ======================== STEP 1 — DYNAMIC SCAN TEXT ======================== */
.step-text--scan { max-width: 520px; }

/* Escaneo & Análisis slides — more breathing room between stacked elements */
/* Unified step slides (01–04): text condensed left, video+animation right */
#paso1 .section-inner, #paso2 .section-inner,
#paso3 .section-inner, #paso4 .section-inner{
  display: grid !important;
  grid-template-columns: 0.82fr 1.18fr !important;
  align-items: start !important;
  justify-content: center !important;
  direction: ltr !important;
  max-width: 1640px !important;
  gap: clamp(2rem, 4vw, 4.5rem) !important;
}
/* text block — left column, condensed, aligned to top */
#paso1 .step-text, #paso2 .step-text,
#paso3 .step-text, #paso4 .step-text{
  max-width: 480px !important;
  width: 100% !important;
  text-align: left !important;
  align-self: start !important;
  padding-left: 0 !important;
}
/* compact header: hide giant decorative number, inline the kicker */
#paso1 .step-text .step-number, #paso2 .step-text .step-number,
#paso3 .step-text .step-number, #paso4 .step-text .step-number{ display: none !important; }
#paso1 .step-text .step-meta, #paso2 .step-text .step-meta,
#paso3 .step-text .step-meta, #paso4 .step-text .step-meta{ display: flex !important; flex-wrap: wrap !important; align-items: center !important; margin-bottom: 0.9rem !important; gap: 14px !important; row-gap: 10px !important; }
#paso1 .step-text .step-meta > *, #paso2 .step-text .step-meta > *,
#paso3 .step-text .step-meta > *, #paso4 .step-text .step-meta > *{ margin: 0 !important; align-self: center !important; }
#paso1 .step-text .section-label, #paso2 .step-text .section-label,
#paso3 .step-text .section-label, #paso4 .step-text .section-label{ margin: 0 0 0.4rem !important; }
#paso1 .step-text .scan-title, #paso2 .step-text .scan-title,
#paso3 .step-text .scan-title, #paso4 .step-text .scan-title,
#paso1 .step-text .section-title, #paso2 .step-text .section-title,
#paso3 .step-text .section-title, #paso4 .step-text .section-title{ margin-bottom: 0.7rem !important; }
#paso1 .step-text .step-lead, #paso2 .step-text .step-lead,
#paso3 .step-text .step-lead, #paso4 .step-text .step-lead{ margin: 0 0 1rem !important; max-width: 100%; }
#paso1 .step-text .feature-pills, #paso2 .step-text .feature-pills,
#paso3 .step-text .feature-pills, #paso4 .step-text .feature-pills{ margin-top: 0 !important; gap: 8px !important; }
/* Certificado: breathing room around the "Rellena por voz" callout */
#paso3 .step-text .voice-note{ margin-top: 0.2rem !important; margin-bottom: 1rem !important; }
#paso3 .step-text .voice-note + .feature-pills{ margin-top: 0 !important; }
/* video block — right column, holds video + animation, aligned to top */
#paso1 .step-visual, #paso2 .step-visual,
#paso3 .step-visual, #paso4 .step-visual{
  width: 100% !important;
  align-self: start !important;
  justify-content: center !important;
}
#paso1 .scan-stage .video-frame video, #paso2 .scan-stage .video-frame video,
#paso3 .scan-stage .video-frame video, #paso4 .scan-stage .video-frame video{ max-height: 58vh !important; }
@media (max-width: 980px){
  #paso1 .section-inner, #paso2 .section-inner,
  #paso3 .section-inner, #paso4 .section-inner{ grid-template-columns: 1fr !important; }
  #paso1 .step-text, #paso2 .step-text,
  #paso3 .step-text, #paso4 .step-text{ max-width: 100% !important; }
}

.step-text--scan .step-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(197, 58, 47, 0.05);
  border: 1px solid rgba(197, 58, 47, 0.18);
  color: var(--warn);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}
.live-chip .rec-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--warn);
  animation: recPulse 1.4s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(197,58,47,0.45); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 7px rgba(197,58,47,0); }
}

/* Title — scan word with traveling underline */
.scan-title { text-wrap: balance; }
.scan-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.scan-word .scan-underline {
  position: absolute;
  left: -2px; right: -2px;
  bottom: 0.04em;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent 0%, rgba(17,48,206,0.35) 40%, var(--accent) 50%, rgba(17,48,206,0.35) 60%, transparent 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 200% 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.scan-title.visible .scan-word .scan-underline {
  opacity: 1;
  animation: scanSweep 2.6s 0.6s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes scanSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -120% 0; }
}

/* Lead paragraph */
.step-lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--fg-2);
  max-width: 520px;
  line-height: 1.6;
  margin: 0;
}
.step-lead strong {
  color: var(--fg);
  font-weight: 600;
  background-image: linear-gradient(transparent 62%, rgba(17,48,206,0.28) 62%, rgba(17,48,206,0.28) 92%, transparent 92%);
  padding: 0 2px;
}

/* Live readout / typing line */
.scan-readout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 1.35rem;
  padding: 9px 14px 9px 12px;
  border-radius: 10px;
  background: rgba(17,48,206,0.06);
  border: 1px solid rgba(17,48,206,0.18);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  position: relative;
  overflow: hidden;
}
.scan-readout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(17,48,206,0.12), transparent);
  transform: translateX(-100%);
  animation: readoutShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes readoutShimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
.readout-prefix {
  color: var(--accent);
  opacity: 0.6;
  font-weight: 700;
}
.readout-rotator {
  position: relative;
  display: inline-block;
  min-width: 220px;
  height: 1.2em;
  line-height: 1.2;
}
.readout-rotator span {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  animation: readoutCycle 10s infinite;
}
.readout-rotator span:nth-child(1) { animation-delay: 0s; }
.readout-rotator span:nth-child(2) { animation-delay: 2.5s; }
.readout-rotator span:nth-child(3) { animation-delay: 5s; }
.readout-rotator span:nth-child(4) { animation-delay: 7.5s; }
@keyframes readoutCycle {
  0%       { opacity: 0; transform: translateY(8px); }
  3%, 22%  { opacity: 1; transform: translateY(0); }
  25%, 100%{ opacity: 0; transform: translateY(-8px); }
}
.readout-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--accent);
  border-radius: 1px;
  animation: caretBlink 1s steps(2) infinite;
}
@keyframes caretBlink {
  50% { opacity: 0; }
}

/* Staggered feature pills */
.feature-pills--stagger .feature-pill {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.feature-pills--stagger.visible .feature-pill,
.section.is-active .feature-pills--stagger .feature-pill,
[data-deck-active] .feature-pills--stagger .feature-pill { opacity: 1; transform: none; }
@media print { .feature-pills--stagger .feature-pill { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .feature-pills--stagger .feature-pill { opacity: 1; transform: none; } }
.feature-pills--stagger.visible .feature-pill:nth-child(1) { transition-delay: 0.05s; }
.feature-pills--stagger.visible .feature-pill:nth-child(2) { transition-delay: 0.15s; }
.feature-pills--stagger.visible .feature-pill:nth-child(3) { transition-delay: 0.25s; }
.feature-pills--stagger.visible .feature-pill:nth-child(4) { transition-delay: 0.35s; }

.feature-pills--stagger .feature-pill {
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), background 0.3s ease, border-color 0.3s ease;
}
.feature-pills--stagger .feature-pill:hover {
  background: rgba(17,48,206,0.10);
  border-color: rgba(17,48,206,0.28);
}

@media (prefers-reduced-motion: reduce) {
  .rec-dot, .scan-word .scan-underline, .scan-readout::before,
  .readout-rotator span, .readout-caret { animation: none !important; }
  .readout-rotator span:nth-child(1) { opacity: 1; transform: none; }
  .readout-rotator span:nth-child(n+2) { display: none; }
}

/* ======================== STEP 1 — LIVE NARRATION (al lado del video) ======================== */
.scan-stage {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  flex-wrap: nowrap;
}
.scan-stage .video-frame { flex: 0 0 auto; align-self: center; max-width: none; width: auto; }
.scan-stage .video-stack { flex: 0 0 auto; align-self: center; max-width: none; width: auto; }
.scan-stage .video-frame video { width: auto; height: auto; max-width: 100%; max-height: 64vh; display: block; }

.scan-narration {
  flex: 0 1 240px;
  min-width: 220px;
  max-width: 260px;
  align-self: center;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow:
    0 1px 0 rgba(11,15,23,0.02),
    0 18px 40px -22px rgba(10,31,68,0.18);
  position: relative;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.scan-narration::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(17,48,206,0.07), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(17,48,206,0.05), transparent 55%);
  pointer-events: none;
}

.narr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  position: relative;
}
.narr-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--warn);
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  background: rgba(197,58,47,0.06);
  border: 1px solid rgba(197,58,47,0.18);
}
.narr-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warn);
  animation: recPulse 1.4s ease-in-out infinite;
}
.narr-clock {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.narr-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin: 6px 0 10px;
  position: relative;
}

/* Lista vertical */
.narr-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  position: relative;
}
.narr-list::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: linear-gradient(to bottom,
    var(--accent) 0%,
    var(--accent) var(--narr-progress, 0%),
    rgba(11,15,23,0.08) var(--narr-progress, 0%),
    rgba(11,15,23,0.08) 100%);
  transition: background 0.6s ease;
}

.narr-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  transition: opacity 0.35s ease;
}
.narr-marker {
  position: relative;
  flex: 0 0 14px;
  width: 14px; height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid rgba(11,15,23,0.18);
  transition: all 0.4s var(--ease);
  z-index: 1;
}
.narr-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.narr-t {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--soft);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.narr-text {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-2);
  letter-spacing: -0.005em;
  line-height: 1.3;
  transition: color 0.35s ease, font-weight 0.35s ease;
}

/* Estados */
.narr-item.is-pending { opacity: 0.55; }
.narr-item.is-pending .narr-marker {
  background: var(--bg);
  border-color: rgba(11,15,23,0.18);
}

.narr-item.is-active .narr-marker {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(17,48,206,0.18);
  animation: narrPulse 1.4s ease-in-out infinite;
}
.narr-item.is-active .narr-text {
  color: var(--fg);
  font-weight: 600;
}
.narr-item.is-active .narr-t { color: var(--accent); }
@keyframes narrPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(17,48,206,0.45); }
  50%      { box-shadow: 0 0 0 7px rgba(17,48,206,0); }
}

.narr-item.is-done .narr-marker {
  background: var(--accent);
  border-color: var(--accent);
}
.narr-item.is-done .narr-marker::after {
  content: '';
  position: absolute;
  left: 3px; top: 5px;
  width: 6px; height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.narr-item.is-done .narr-text { color: var(--soft); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(11,15,23,0.18); }

/* Footer */
.narr-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline);
}
.narr-foot-bar {
  flex: 1;
  height: 4px;
  background: rgba(11,15,23,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.narr-foot-fill {
  display: block;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 999px;
  transition: width 0.6s var(--ease);
}
.narr-foot-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1100px) {
  .scan-stage { flex-wrap: wrap; }
  .scan-narration { flex: 1 1 100%; max-width: 380px; }
}
@media (max-width: 768px) {
  .scan-stage { gap: 14px; }
  .scan-stage .video-frame,
  .scan-stage .video-stack { flex: 1 1 100%; }
  .scan-narration { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .narr-live-dot, .narr-item.is-active .narr-marker { animation: none !important; }
}

/* ── Narración en negativo: fondo azul, textos blancos ── */
.scan-narration{
  background: linear-gradient(165deg, #15309a 0%, #1130CE 60%, #0c2493 100%) !important;
  border: 1px solid rgba(143,176,255,0.34) !important;
  box-shadow: 0 22px 50px -22px rgba(8,20,80,0.6) !important;
}
.scan-narration::before{
  background:
    radial-gradient(circle at 100% 0%, rgba(143,176,255,0.28), transparent 52%),
    radial-gradient(circle at 0% 100%, rgba(91,140,255,0.22), transparent 56%) !important;
}
.scan-narration .narr-live{
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
}
.scan-narration .narr-live-dot{ background: #5effa8; }
.scan-narration .narr-clock{ color: rgba(255,255,255,0.82); }
.scan-narration .narr-title{ color: #fff; }
.scan-narration .narr-list::before{
  background: linear-gradient(to bottom,
    #ffffff 0%,
    #ffffff var(--narr-progress, 0%),
    rgba(255,255,255,0.22) var(--narr-progress, 0%),
    rgba(255,255,255,0.22) 100%) !important;
}
.scan-narration .narr-marker{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); }
.scan-narration .narr-t{ color: rgba(255,255,255,0.6); }
.scan-narration .narr-text{ color: rgba(255,255,255,0.78); }
.scan-narration .narr-item.is-pending .narr-marker{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
.scan-narration .narr-item.is-active .narr-marker{
  background: #fff; border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
  animation: narrPulseNeg 1.4s ease-in-out infinite;
}
.scan-narration .narr-item.is-active .narr-text{ color: #fff; }
.scan-narration .narr-item.is-active .narr-t{ color: #bcd0ff; }
@keyframes narrPulseNeg{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0.5); } 50%{ box-shadow:0 0 0 7px rgba(255,255,255,0); } }
.scan-narration .narr-item.is-done .narr-marker{ background:#8fb0ff; border-color:#8fb0ff; }
.scan-narration .narr-item.is-done .narr-marker::after{ border-color:#1130CE; }
.scan-narration .narr-item.is-done .narr-text{ color: rgba(255,255,255,0.5); text-decoration-color: rgba(255,255,255,0.3); }
.scan-narration .narr-foot{ border-top: 1px dashed rgba(255,255,255,0.24); }
.scan-narration .narr-foot-bar{ background: rgba(255,255,255,0.16); }
.scan-narration .narr-foot-fill{ background: linear-gradient(90deg, #bcd0ff, #ffffff) !important; }
.scan-narration .narr-foot-meta{ color: rgba(255,255,255,0.7); }
@media (prefers-reduced-motion: reduce){
  .scan-narration .narr-item.is-active .narr-marker{ animation: none !important; }
}

/* ======================== STEP 1 — SCAN COMPLETE OVERLAY ======================== */
.video-frame { position: relative; }

/* Stack vertical: barra de progreso + frame del vídeo */
.video-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: auto;
  max-width: 100%;
}
.video-stack .video-frame { max-width: none; }

/* Header sobre la barra: tiempo */
.video-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.video-progress-head-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.video-progress-head-label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(17,48,206,0.18);
}
.video-progress-time {
  color: var(--fg-2);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Barra de progreso del vídeo — fuera, encima del frame */
.video-progress {
  position: relative;
  height: 8px;
  background: rgba(11,15,23,0.06);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.video-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: translateX(-100%);
  animation: videoProgressShine 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes videoProgressShine {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(160%); }
  100% { transform: translateX(160%); }
}
.video-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px rgba(17,48,206,0.5);
  border-radius: 999px;
  transition: width 0.18s linear;
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .video-progress::after { animation: none !important; display: none; }
}

.scan-complete {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.82) 60%, rgba(255,255,255,0.55) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
  z-index: 4;
  pointer-events: none;
}
.scan-complete.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.scan-complete-inner {
  width: 100%;
  max-width: 340px;
  text-align: center;
  transform: translateY(14px) scale(0.96);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1) 0.1s, opacity 0.5s var(--ease) 0.1s;
}
.scan-complete.is-visible .scan-complete-inner {
  transform: none;
  opacity: 1;
}

.scan-complete-icon {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(17,48,206,0.35), 0 0 0 0 rgba(17,48,206,0.45);
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1) 0.2s;
}
.scan-complete.is-visible .scan-complete-icon {
  transform: scale(1);
  animation: scanCompletePulse 1.8s ease-out 0.7s 1;
}
@keyframes scanCompletePulse {
  0%   { box-shadow: 0 8px 24px rgba(17,48,206,0.35), 0 0 0 0 rgba(17,48,206,0.55); }
  100% { box-shadow: 0 8px 24px rgba(17,48,206,0.35), 0 0 0 22px rgba(17,48,206,0); }
}

.scan-complete-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.scan-complete-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0 auto 18px;
  max-width: 300px;
  text-wrap: balance;
}

.scan-complete-subhead {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 8px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.scan-complete-subhead::before,
.scan-complete-subhead::after {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: rgba(11,15,23,0.15);
}

.scan-complete-stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(17,48,206,0.06);
  border: 1px solid rgba(17,48,206,0.18);
  text-align: left;
}
.scan-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(11,15,23,0.08);
  margin: 0;
}
.scan-stat:nth-last-child(-n+2),
.scan-stat:nth-last-child(1) { border-bottom: none; }
/* Si hay nº impar, la última fila ocupa todo el ancho */
.scan-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.scan-stat dt {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-2);
  letter-spacing: -0.005em;
}
.scan-stat dd {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.scan-stat-unit {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--soft);
  letter-spacing: 0;
}

/* Animación de entrada escalonada de cada stat */
.scan-stat {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.scan-complete.is-visible .scan-stat { opacity: 1; transform: none; }
.scan-complete.is-visible .scan-stat:nth-child(1) { transition-delay: 0.55s; }
.scan-complete.is-visible .scan-stat:nth-child(2) { transition-delay: 0.65s; }
.scan-complete.is-visible .scan-stat:nth-child(3) { transition-delay: 0.75s; }
.scan-complete.is-visible .scan-stat:nth-child(4) { transition-delay: 0.85s; }
.scan-complete.is-visible .scan-stat:nth-child(5) { transition-delay: 0.95s; }

@media (max-width: 480px) {
  .scan-complete-inner { max-width: 92%; }
  .scan-complete-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-complete, .scan-complete-inner, .scan-complete-icon, .scan-stat {
    transition: none !important; animation: none !important;
  }
  .scan-complete-inner { transform: none; opacity: 1; }
}

/* ======================== STEP 2 — DARK "ESCANEO COMPLETADO" CARD ======================== */
.scan-complete--analysis {
  --sc-bg: #0B1218;
  --sc-bg-2: #0F1B22;
  --sc-fg: #E6F1EA;
  --sc-fg-2: #8BA399;
  --sc-soft: rgba(230,241,234,0.55);
  --sc-line: rgba(17,48,206,0.18);
  --sc-line-2: rgba(255,255,255,0.06);
  --sc-accent: #1130CE;
  --sc-accent-2: #2A48E0;
  background: linear-gradient(180deg, var(--sc-bg) 0%, var(--sc-bg-2) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.scan-complete--analysis .sc-analysis {
  width: 100%;
  max-width: 100%;
  text-align: left;
  padding: 18px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Header */
.sc-analysis .sc-an-head {
  text-align: center;
  padding: 6px 4px 2px;
}
.sc-analysis .sc-an-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(17,48,206,0.14);
  border: 1px solid rgba(17,48,206,0.32);
  color: var(--sc-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 0 0 6px rgba(17,48,206,0.08);
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1) 0.15s;
}
.scan-complete--analysis.is-visible .sc-an-icon {
  transform: scale(1);
  animation: scanCompletePulse 1.8s ease-out 0.7s 1;
}
.sc-analysis .sc-an-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--sc-fg);
  margin-bottom: 4px;
}
.sc-analysis .sc-an-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--sc-fg-2);
  margin: 0;
  text-wrap: balance;
}

/* Quality panel */
.scan-complete--analysis .quality-panel {
  background: rgba(17,48,206,0.05);
  border: 1px solid var(--sc-line);
  border-radius: 12px;
  padding: 12px 12px 10px;
}
.scan-complete--analysis .quality-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--sc-line-2);
}
.scan-complete--analysis .quality-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(17,48,206,0.16);
  color: var(--sc-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.scan-complete--analysis .quality-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sc-fg);
  line-height: 1.2;
}
.scan-complete--analysis .quality-sub {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--sc-fg-2);
  margin-top: 1px;
}
.scan-complete--analysis .quality-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scan-complete--analysis .quality-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 11.5px;
}
.scan-complete--analysis .qdot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sc-accent);
  box-shadow: 0 0 6px rgba(17,48,206,0.6);
}
.scan-complete--analysis .qicon {
  color: var(--sc-fg);
  opacity: 0.7;
}
.scan-complete--analysis .qlabel {
  font-weight: 500;
  color: var(--sc-fg);
  letter-spacing: -0.005em;
}
.scan-complete--analysis .qval {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.scan-complete--analysis .qcheck {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--sc-accent);
  color: var(--sc-bg);
  font-size: 9px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Metric grid (5 cards) */
.scan-complete--analysis .metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.scan-complete--analysis .metric-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--sc-line-2);
  border-radius: 10px;
  padding: 10px 6px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.scan-complete--analysis .metric-icon {
  color: var(--sc-fg);
  opacity: 0.55;
  margin-bottom: 2px;
}
.scan-complete--analysis .metric-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  color: var(--sc-fg);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.scan-complete--analysis .metric-label {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--sc-fg-2);
  letter-spacing: 0.02em;
}

/* Stagger entrance for groups */
.scan-complete--analysis .sc-an-head,
.scan-complete--analysis .quality-panel,
.scan-complete--analysis .metric-grid {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.scan-complete--analysis.is-visible .sc-an-head { transition-delay: 0.2s; opacity: 1; transform: none; }
.scan-complete--analysis.is-visible .quality-panel { transition-delay: 0.4s; opacity: 1; transform: none; }
.scan-complete--analysis.is-visible .metric-grid { transition-delay: 0.55s; opacity: 1; transform: none; }

.scan-complete--analysis .quality-row,
.scan-complete--analysis .metric-card {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.scan-complete--analysis.is-visible .quality-row { opacity: 1; transform: none; }
.scan-complete--analysis.is-visible .quality-row:nth-child(1) { transition-delay: 0.5s; }
.scan-complete--analysis.is-visible .quality-row:nth-child(2) { transition-delay: 0.58s; }
.scan-complete--analysis.is-visible .quality-row:nth-child(3) { transition-delay: 0.66s; }
.scan-complete--analysis.is-visible .quality-row:nth-child(4) { transition-delay: 0.74s; }
.scan-complete--analysis.is-visible .metric-card { opacity: 1; transform: none; }
.scan-complete--analysis.is-visible .metric-card:nth-child(1) { transition-delay: 0.65s; }
.scan-complete--analysis.is-visible .metric-card:nth-child(2) { transition-delay: 0.72s; }
.scan-complete--analysis.is-visible .metric-card:nth-child(3) { transition-delay: 0.79s; }
.scan-complete--analysis.is-visible .metric-card:nth-child(4) { transition-delay: 0.86s; }
.scan-complete--analysis.is-visible .metric-card:nth-child(5) { transition-delay: 0.93s; }

@media (prefers-reduced-motion: reduce) {
  .scan-complete--analysis .sc-an-head,
  .scan-complete--analysis .quality-panel,
  .scan-complete--analysis .metric-grid,
  .scan-complete--analysis .quality-row,
  .scan-complete--analysis .metric-card,
  .scan-complete--analysis .sc-an-icon {
    transition: none !important; animation: none !important;
    opacity: 1 !important; transform: none !important;
  }
}

/* ======================== STEP 3 — ENERGY CERTIFICATE COMPLETION CARD ======================== */
.scan-complete--energy {
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 50%, rgba(255,255,255,0.78) 100%);
  padding: 0;
  overflow-y: auto;
}
.sc-energy {
  width: 100%;
  max-width: 100%;
  text-align: left;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sc-en-head {
  text-align: center;
}
.sc-en-head .scan-complete-icon {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
}
.sc-en-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.sc-en-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0 auto;
  max-width: 280px;
  text-wrap: balance;
}

/* Calificación grande */
.energy-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(17,48,206,0.08), rgba(17,48,206,0.02));
  border: 1px solid rgba(17,48,206,0.22);
  border-radius: 14px;
}
.energy-result-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.energy-result-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}
.energy-result-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.energy-rating-badge {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: #FFC107;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(255,193,7,0.35);
  position: relative;
  flex-shrink: 0;
}
.energy-rating-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.5);
  pointer-events: none;
}

/* Mini barras A–G */
.energy-bars-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0;
}
.ebar-mini {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 8px;
  position: relative;
}
.ebar-mini .ebm-l {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-2);
  text-align: center;
}
.ebar-mini .ebm-f {
  display: block;
  height: 8px;
  width: var(--w);
  border-radius: 999px;
  opacity: 0.32;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform-origin: left center;
}
.ebar-mini.is-active .ebm-f {
  opacity: 1;
  transform: scaleY(1.2);
  box-shadow: 0 0 12px rgba(255,193,7,0.4);
}
.ebar-mini.is-active .ebm-l {
  color: var(--fg);
  font-weight: 900;
}
.ebar-mini .ebm-marker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding-left: 4px;
}

/* Animación: las barras "crecen" desde 0 al revelar */
.scan-complete--energy .ebar-mini .ebm-f {
  width: 0;
  transition: width 0.7s cubic-bezier(.22,.61,.36,1), opacity 0.35s ease, transform 0.35s ease;
}
.scan-complete--energy.is-visible .ebar-mini .ebm-f { width: var(--w); }
.scan-complete--energy.is-visible .ebar-mini:nth-child(1) .ebm-f { transition-delay: 0.55s; }
.scan-complete--energy.is-visible .ebar-mini:nth-child(2) .ebm-f { transition-delay: 0.62s; }
.scan-complete--energy.is-visible .ebar-mini:nth-child(3) .ebm-f { transition-delay: 0.69s; }
.scan-complete--energy.is-visible .ebar-mini:nth-child(4) .ebm-f { transition-delay: 0.76s; }
.scan-complete--energy.is-visible .ebar-mini:nth-child(5) .ebm-f { transition-delay: 0.83s; }
.scan-complete--energy.is-visible .ebar-mini:nth-child(6) .ebm-f { transition-delay: 0.90s; }
.scan-complete--energy.is-visible .ebar-mini:nth-child(7) .ebm-f { transition-delay: 0.97s; }

/* Factores analizados */
.energy-factors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.energy-factors-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-2);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ef-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Stagger entrance */
.scan-complete--energy .sc-en-head,
.scan-complete--energy .energy-result,
.scan-complete--energy .energy-bars-mini,
.scan-complete--energy .energy-factors-list {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.scan-complete--energy.is-visible .sc-en-head      { transition-delay: 0.2s; opacity: 1; transform: none; }
.scan-complete--energy.is-visible .energy-result   { transition-delay: 0.4s; opacity: 1; transform: none; }
.scan-complete--energy.is-visible .energy-bars-mini{ transition-delay: 0.5s; opacity: 1; transform: none; }
.scan-complete--energy.is-visible .energy-factors-list { transition-delay: 1.05s; opacity: 1; transform: none; }

.scan-complete--energy .energy-factors-list li {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.scan-complete--energy.is-visible .energy-factors-list li:nth-child(1) { transition-delay: 1.1s; opacity: 1; transform: none; }
.scan-complete--energy.is-visible .energy-factors-list li:nth-child(2) { transition-delay: 1.2s; opacity: 1; transform: none; }
.scan-complete--energy.is-visible .energy-factors-list li:nth-child(3) { transition-delay: 1.3s; opacity: 1; transform: none; }

/* La calificación "salta" hacia dentro */
.scan-complete--energy .energy-rating-badge {
  transform: scale(0.4) rotate(-12deg);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(.34,1.56,.64,1) 0.5s, opacity 0.4s var(--ease) 0.5s;
}
.scan-complete--energy.is-visible .energy-rating-badge {
  transform: scale(1) rotate(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .scan-complete--energy * {
    transition: none !important; animation: none !important;
    opacity: 1 !important; transform: none !important;
  }
  .scan-complete--energy .ebar-mini .ebm-f { width: var(--w) !important; }
}

/* ======================== Intro "qué es" slide ======================== */
.intro-section { background: var(--bg-secondary, #F8FAFC); }
.intro-section .section-inner { max-width: 1120px; align-items: center; text-align: center; }
.intro-kicker { margin-bottom: 0.4rem; }

/* Code-editor card that types itself out */
.intro-section .intro-kicker.anim,
.code-window.anim { opacity: 1 !important; animation: none !important; transform: none !important; }
.code-window{
  width: 100%;
  max-width: 980px;
  margin: 1.8rem auto 0;
  text-align: left;
  background: #0b1437;
  border: 1px solid rgba(91,140,255,0.26);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(8,20,80,0.28);
}
.code-head{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(91,140,255,0.16);
  background: rgba(255,255,255,0.02);
}
.code-dot{ width: 11px; height: 11px; border-radius: 50%; }
.code-dot.d1{ background: #2A6FDB; }
.code-dot.d2{ background: #5b8cff; }
.code-dot.d3{ background: #9db8ff; }
.code-file{
  margin-left: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: #8499cf;
}
.code-body{
  padding: 30px 36px 34px;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1.05rem, 1.85vw, 1.5rem);
  line-height: 1.95;
  min-height: 15em;
}
.code-body .ln{ white-space: pre-wrap; min-height: 1.95em; }
.code-body .cmt{ color: #6f86c9; }
.code-body .cd{ color: #84a9ff; }
.code-body .wt{ color: #ffffff; }
.code-body .ok{ color: #ffffff; font-weight: 600; }
.code-caret{
  display: inline-block;
  width: 9px;
  height: 1.15em;
  vertical-align: -0.22em;
  margin-left: 2px;
  background: #5b8cff;
  animation: codeCaret 1s steps(1) infinite;
}
@keyframes codeCaret{ 50%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .code-caret{ animation: none; } }
.intro-statement {
  font-size: clamp(1.9rem, 3.9vw, 3.25rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.03em;
  color: var(--fg);
  max-width: 1000px;
  margin: 1.5rem auto 0;
  text-wrap: balance;
}
.intro-sub {
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  font-weight: 600;
  color: var(--accent);
  margin-top: 1.5rem;
  letter-spacing: -0.01em;
}

/* ======================== Modular services grid (índice) ======================== */
.bp-modules{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  width:100%; max-width:1200px; margin:36px auto 0;
}
.module-card{
  position:relative; display:flex; flex-direction:column; text-align:left;
  padding:28px 22px 22px; border-radius:20px;
  background:rgba(255,255,255,0.74);
  border:1px solid rgba(17,48,206,0.12);
  box-shadow:0 10px 34px rgba(10,31,68,0.07);
  -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%);
  transition:transform .45s cubic-bezier(.25,1,.5,1), box-shadow .45s, border-color .45s;
}
.module-card:hover{ transform:translateY(-7px); box-shadow:0 24px 56px rgba(17,48,206,0.17); border-color:rgba(17,48,206,0.32); }
.module-card[data-goto]{ cursor:pointer; }
.module-card[data-goto]:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.module-go{
  display:flex; align-items:center; gap:6px; margin-top:14px;
  font-family:'JetBrains Mono',monospace; font-size:0.74rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--accent);
  opacity:0; transform:translateY(4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.module-go svg{ transition: transform .35s var(--ease); }
.module-card:hover .module-go{ opacity:1; transform:none; }
.module-card:hover .module-go svg{ transform:translateX(4px); }
.module-num{
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700;
  letter-spacing:0.2em; color:var(--accent); margin-bottom:14px;
}
.module-ic{ width:44px; height:44px; margin-bottom:16px; color:var(--accent); }
.module-ic svg{ width:100%; height:100%; display:block; overflow:visible; }

/* ── Per-module icon animations (each tied to its block) ── */
.module-card .module-ic *{ transform-box: fill-box; }

/* 01 Escaneo — target locks on, frame corners settle */
.mic-scan .mic-target{ transform-origin:center; animation: micTarget 3s ease-in-out infinite; }
.mic-scan .mic-frame{ transform-origin:center; animation: micFrame 3s ease-in-out infinite; }
@keyframes micTarget{ 0%,100%{ transform:scale(1); opacity:.85; } 45%{ transform:scale(.42); opacity:1; } }
@keyframes micFrame{ 0%,100%{ transform:scale(1.12); opacity:.6; } 45%{ transform:scale(1); opacity:1; } }
.module-card:hover .mic-scan .mic-target{ animation-duration:1.1s; }
.module-card:hover .mic-scan .mic-frame{ animation-duration:1.1s; }

/* 02 Análisis — scan line sweeps the chip, pins blink */
.mic-analyze .mic-scanline{ transform-origin:center; animation: micSweep 2.4s ease-in-out infinite; }
.mic-analyze .mic-pins{ animation: micBlink 2.4s ease-in-out infinite; }
@keyframes micSweep{ 0%{ transform:translateY(-5px); opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } 100%{ transform:translateY(5px); opacity:0; } }
@keyframes micBlink{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
.module-card:hover .mic-analyze .mic-scanline{ animation-duration:1s; }

/* 03 Certificado — bolt flashes / charges */
.mic-energy .mic-bolt{ animation: micBolt 2.6s ease-in-out infinite; }
@keyframes micBolt{ 0%,100%{ fill-opacity:0; filter:none; } 42%{ fill-opacity:.18; } 50%{ fill-opacity:.9; } 58%{ fill-opacity:.18; } }
.module-card:hover .mic-energy .mic-bolt{ animation-duration:1.1s; }

/* 04 Tour — cube rotates in 3D */
.mic-tour{ perspective:340px; }
.mic-tour svg{ overflow:visible; }
.mic-tour .mic-cube{ transform-origin:center; transform-box:view-box; animation: micCube 6s linear infinite; }
@keyframes micCube{ 0%{ transform:rotateY(-18deg); } 50%{ transform:rotateY(18deg); } 100%{ transform:rotateY(-18deg); } }
.module-card:hover .mic-tour .mic-cube{ animation-duration:2.4s; }

@media (prefers-reduced-motion: reduce){
  .mic-scan .mic-target, .mic-scan .mic-frame, .mic-analyze .mic-scanline,
  .mic-analyze .mic-pins, .mic-energy .mic-bolt, .mic-tour .mic-cube{ animation: none !important; }
}
.module-title{ font-size:1.16rem; font-weight:700; letter-spacing:-0.02em; color:var(--fg); margin-bottom:9px; line-height:1.2; text-wrap:balance; }
.module-desc{ font-size:0.93rem; line-height:1.5; color:var(--fg-2); margin-bottom:18px; flex:1 1 auto; text-wrap:pretty; }
.module-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.module-tags span{
  font-size:0.73rem; font-weight:600;
  padding:5px 11px; border-radius:999px;
  background:rgba(17,48,206,0.07); color:var(--accent);
}
.module-card.is-soon{ background:rgba(255,255,255,0.55); }
.module-card.is-soon .module-num,
.module-card.is-soon .module-ic{ color:#8088aa; }
.module-soon-tag{
  position:absolute; top:18px; right:18px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
  background:rgba(17,48,206,0.1); color:var(--accent);
}
.modules-pick{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:28px; font-size:1rem; color:var(--fg-2); text-align:center;
}
.modules-pick b{ color:var(--accent); font-weight:700; }
.modules-pick-line{ height:1px; width:64px; background:rgba(10,31,68,0.16); }
@media (max-width:1100px){ .bp-modules{ grid-template-columns:repeat(2,1fr); } .modules-pick-line{ width:30px; } }
@media (max-width:600px){ .bp-modules{ grid-template-columns:1fr; } }

/* ======================== Voice-note callout ======================== */
.voice-note{
  display:flex; align-items:center; gap:13px;
  margin-top:18px; padding:13px 17px; border-radius:14px;
  background:rgba(17,48,206,0.06);
  border:1px solid rgba(17,48,206,0.16);
}
.voice-note-ic{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
}
.voice-note-ic svg{ width:17px; height:17px; }
.voice-note-txt{ font-size:0.9rem; line-height:1.45; color:var(--fg-2); text-wrap:pretty; }
.voice-note-txt b{ color:var(--accent); font-weight:700; }

/* Record-audio control (Certificado) */
.voice-rec{ display:flex; align-items:center; gap:14px; width:100%; max-width:560px; margin-top:14px; padding:12px 16px; border-radius:14px; background:#fff; border:1px solid rgba(17,48,206,0.16); cursor:pointer; text-align:left; font-family:inherit; -webkit-tap-highlight-color:transparent; transition:border-color .3s, box-shadow .3s, background .3s; }
.voice-rec:hover{ border-color:rgba(17,48,206,0.34); box-shadow:0 6px 20px rgba(17,48,206,0.1); }
.voice-rec-btn{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; transition:background .3s; }
.voice-rec-btn svg{ width:18px; height:18px; }
.voice-rec.is-rec .voice-rec-btn{ background:#E5484D; animation:vrPulse 1.4s ease-in-out infinite; }
.voice-rec.is-proc .voice-rec-btn{ background:var(--accent); }
.voice-rec.is-done .voice-rec-btn{ background:#1F8A5B; }
@keyframes vrPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(229,72,77,0.45);} 50%{ box-shadow:0 0 0 9px rgba(229,72,77,0);} }
.voice-rec-body{ flex:1 1 auto; display:flex; flex-direction:column; gap:5px; min-width:0; }
.voice-rec-label{ font-size:0.92rem; font-weight:600; color:var(--fg); letter-spacing:-0.01em; }
.voice-rec.is-done .voice-rec-label{ color:#1F8A5B; }
.voice-rec-wave{ display:none; align-items:flex-end; gap:3px; height:15px; }
.voice-rec.is-rec .voice-rec-wave{ display:flex; }
.voice-rec-wave i{ width:3px; height:100%; border-radius:2px; background:rgba(17,48,206,0.55); transform-origin:bottom; animation:vrWave 0.9s ease-in-out infinite; }
.voice-rec-wave i:nth-child(2){ animation-delay:.12s } .voice-rec-wave i:nth-child(3){ animation-delay:.24s } .voice-rec-wave i:nth-child(4){ animation-delay:.36s } .voice-rec-wave i:nth-child(5){ animation-delay:.48s } .voice-rec-wave i:nth-child(6){ animation-delay:.6s } .voice-rec-wave i:nth-child(7){ animation-delay:.72s }
@keyframes vrWave{ 0%,100%{ transform:scaleY(0.3);} 50%{ transform:scaleY(1);} }
.voice-rec-time{ flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:var(--muted); }
.voice-rec.is-rec .voice-rec-time{ color:#E5484D; }

/* ======================== Tour virtual placeholder ======================== */
.tour-placeholder{ width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.tour-empty{
  position:relative; width:100%; max-width:560px; aspect-ratio:16/10;
  border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px;
  background:
    radial-gradient(circle at 50% 36%, rgba(42,72,224,0.30), transparent 62%),
    linear-gradient(160deg, #0a1230 0%, #122160 100%);
  color:#fff; text-align:center;
  box-shadow:0 26px 70px rgba(10,25,90,0.34);
}
.tour-empty::after{
  content:''; position:absolute; inset:14px; border-radius:16px;
  border:2px dashed rgba(255,255,255,0.26); pointer-events:none;
}
.tour-empty-ic{
  width:74px; height:74px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.13); border:1px solid rgba(255,255,255,0.28);
  margin-bottom:4px;
}
.tour-empty-ic svg{ width:30px; height:30px; }
.tour-empty-title{ font-size:1.08rem; font-weight:700; letter-spacing:-0.01em; }
.tour-empty-sub{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.62); }
.tour-cap{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.tour-video{ position:relative; width:100%; max-width:1040px; border-radius:22px; overflow:hidden; background:#0a1230; box-shadow:0 26px 70px rgba(10,25,90,0.34); }
.tour-video video{ display:block; width:100%; height:auto; }
/* Give the tour video more room than the text column */
#paso4 .section-inner{ max-width: 1480px; grid-template-columns: 0.72fr 1.55fr; gap: 3rem; }
@media (max-width:900px){ #paso4 .section-inner{ grid-template-columns:1fr; } }

/* ======================== Floating scanner phone (whole deck) ======================== */
.scan-phone{
  position: fixed;
  left: 26px;
  bottom: 26px;
  width: 118px;
  z-index: 9;
  cursor: pointer;
  filter: drop-shadow(0 22px 40px rgba(8,20,80,0.34));
  animation: scanPhoneFloat 5.5s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(.25,1,.5,1), filter 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
.scan-phone img{ width: 100%; height: auto; display: block; pointer-events: none; }
.scan-phone::after{
  content: 'Escanear';
  position: absolute;
  left: 50%; bottom: -22px;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.scan-phone:hover{ transform: scale(1.07) rotate(-2deg); filter: drop-shadow(0 26px 50px rgba(17,48,206,0.4)); }
.scan-phone:hover::after{ opacity: 1; }
@keyframes scanPhoneFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce){ .scan-phone{ animation: none; } }

/* Full-deck scan overlay triggered on phone hover */
.deck-scan{
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}
body.deck-scanning .deck-scan{ opacity: 1; }
.deck-scan .scan-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(42,111,219,0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,111,219,0.30) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0;
  mask-image: radial-gradient(circle at 50% 50%, #000 36%, transparent 82%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 36%, transparent 82%);
}
body.deck-scanning .deck-scan .scan-grid{ animation: scanGrid 2.6s cubic-bezier(.5,0,.5,1) infinite; }
.deck-scan .scan-beam{
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, rgba(42,111,219,0.16) 60%, rgba(91,140,255,0.42) 92%, rgba(160,190,255,0.9));
  border-bottom: 2px solid rgba(160,190,255,0.95);
  box-shadow: 0 0 34px 6px rgba(42,111,219,0.45);
  opacity: 0;
}
body.deck-scanning .deck-scan .scan-beam{ animation: scanBeam 2.6s cubic-bezier(.5,0,.5,1) infinite; }
.deck-scan .scan-corner{
  position: absolute; width: 38px; height: 38px;
  border: 2px solid rgba(91,140,255,0.7);
  opacity: 0;
}
.deck-scan .sc-tl{ top: 34px; left: 34px; border-right: 0; border-bottom: 0; }
.deck-scan .sc-tr{ top: 34px; right: 34px; border-left: 0; border-bottom: 0; }
.deck-scan .sc-bl{ bottom: 34px; left: 34px; border-right: 0; border-top: 0; }
.deck-scan .sc-br{ bottom: 34px; right: 34px; border-left: 0; border-top: 0; }
body.deck-scanning .deck-scan .scan-corner{ animation: scanCorner 0.5s ease both; }
@keyframes scanBeam{
  0%{ top: 0%; opacity: 0; }
  8%{ opacity: 1; }
  62%{ top: 100%; opacity: 1; }
  72%{ opacity: 0; }
  100%{ top: 100%; opacity: 0; }
}
/* Grid "draws in" downward following the beam, like a LiDAR mesh, then fades */
@keyframes scanGrid{
  0%{ opacity: 0; clip-path: inset(0 0 100% 0); }
  8%{ opacity: 1; }
  62%{ opacity: 1; clip-path: inset(0 0 0% 0); }
  86%{ opacity: 1; clip-path: inset(0 0 0% 0); }
  100%{ opacity: 0; clip-path: inset(0 0 0% 0); }
}
@keyframes scanCorner{ from{ opacity: 0; transform: scale(1.4); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  body.deck-scanning .deck-scan .scan-beam,
  body.deck-scanning .deck-scan .scan-grid{ animation: none; opacity: 0.5; }
}