/* 1. Base y variables: componente independiente con medidas relativas. */
:root { --activation-red: #ed1024; --activation-ink: #101c2f; --activation-muted: #64748b; --activation-ease: cubic-bezier(.22,1,.36,1); }
* { box-sizing: border-box; }
.activation-page { margin: 0; font-family: Inter,"Segoe UI",Arial,sans-serif; color: var(--activation-ink); }
.activation { padding: clamp(2.5rem,5vw,5rem) clamp(1.25rem,4vw,5rem) 2.5rem; background: radial-gradient(ellipse at 0 100%,#ffe5eb80,transparent 40%),#f7f9fc; }
.activation-top { display: flex; align-items: center; gap: clamp(2rem,4vw,4rem); max-inline-size: 96rem; margin-inline: auto; }
.activation-heading { flex: 1 1 36%; min-inline-size: 0; }
.activation-eyebrow { margin: 0 0 1.25rem; color: var(--activation-red); font-size: .875rem; font-weight: 700; letter-spacing: .1em; }
.activation-heading h2 { margin: 0 0 1.25rem; font-size: clamp(2rem,1rem + 2vw,3.4rem); letter-spacing: -.04em; line-height: 1.14; }
.activation-heading > p:not(.activation-eyebrow) { margin: 0; color: var(--activation-muted); font-size: clamp(1rem,.7rem + .7vw,1.4rem); line-height: 1.5; }
.activation-rule { display: block; inline-size: 4rem; block-size: .1875rem; margin-block-start: 1.25rem; background: var(--activation-red); }
/* 2. Visor: imagen completa en un área 16/9, sin recortarla. */
.activation-viewer { flex: 1 1 59%; min-inline-size: 0; padding: .625rem; border: .0625rem solid #e2e8f0; border-radius: 1.25rem; background: #fff; box-shadow: 0 1rem 2.5rem #19324b12; }
.viewer-heading { display: flex; align-items: center; gap: 1rem; padding: .75rem .75rem 1.25rem; }
.viewer-number { display: flex; align-items: center; justify-content: center; flex: 0 0 3.25rem; aspect-ratio: 1; border-radius: 50%; background: var(--activation-red); color: #fff; font-size: 1.75rem; font-weight: 700; transition: background .3s,transform .3s; }
.viewer-number.is-valid { background: #00b486; }
.viewer-copy { flex: 1; min-inline-size: 0; }
.step-count { margin: 0 0 .2rem; color: var(--activation-red); font-size: .6875rem; letter-spacing: .075em; }
.viewer-copy h3 { margin: 0 0 .25rem; font-size: clamp(1rem,.8rem + .5vw,1.375rem); }
.viewer-copy > p:last-child { margin: 0; color: var(--activation-muted); font-size: clamp(.875rem,.6rem + .5vw,1.125rem); line-height: 1.4; }
.viewer-controls { display: flex; flex: 0 0 auto; gap: .5rem; }
.viewer-controls button { display: flex; align-items: center; justify-content: center; inline-size: 2.75rem; aspect-ratio: 1; padding: 0; border: .0625rem solid #dce3ec; border-radius: 50%; background: #fff; color: var(--activation-ink); font: inherit; font-size: 2rem; cursor: pointer; }
.viewer-controls button:disabled { opacity: .35; cursor: default; }
.viewer-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .875rem; background: #eef2f6; touch-action: pan-y; }
/* Superposición limitada al fundido de imágenes y sus efectos gráficos. */
.viewer-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(.75rem); transition: opacity .5s var(--activation-ease),transform .5s var(--activation-ease); pointer-events: none; }
.viewer-slide.is-current { opacity: 1; transform: none; }
.viewer-slide img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.scan-frame { position: absolute; inset-inline-start: 62.75%; inset-block-start: 35%; inline-size: 9.75%; block-size: 34%; border: 0; border-radius: .25rem; }
.scan-frame::after { content: ""; position: absolute; inset-block-start: 0; display: block; block-size: .125rem; inline-size: 100%; background: #ff1534; box-shadow: 0 0 .75rem #ff1534; }
.is-current .scan-frame::after { animation: scan 1.2s ease-in-out 2 alternate; }
@keyframes scan { from { inset-block-start: 0; } to { inset-block-start: 100%; } }
.connection-status,.validation-status { position: absolute; inset-inline-end: 1rem; inset-block-end: 1rem; padding: .625rem 1rem; border-radius: .625rem; background: #101c2fed; color: #fff; font-size: clamp(.75rem,.5rem + .5vw,1rem); }
.validation-status { display: flex; align-items: center; gap: .5rem; background: #008b69; }
.is-current .validation-status { animation: contextual-pulse 1s ease 2; }
@keyframes contextual-pulse { 50% { box-shadow: 0 0 1rem #ed10244d; } }
/* 3. Pasos con Flexbox: cinco tarjetas en escritorio y desplazamiento local en tableta. */
.activation-steps { display: flex; align-items: stretch; gap: clamp(1rem,2vw,2rem); max-inline-size: 96rem; margin: 3.25rem auto 0; padding-block-start: 1.5rem; }
.activation-step { display: flex; flex-direction: column; align-items: center; gap: .625rem; flex: 1 1 0; min-inline-size: 0; padding: 0 1rem 1.5rem; border: .0625rem solid #e2e8f0; border-radius: 1rem; background: #fff; color: inherit; font: inherit; text-align: center; cursor: pointer; box-shadow: 0 .5rem 1.5rem #24344a05; transition: transform .25s var(--activation-ease),box-shadow .25s,border-color .25s; }
.step-number { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 3.25rem; aspect-ratio: 1; margin-block-start: -1.5rem; border-radius: 1rem; background: var(--activation-red); color: #fff; font-size: 1.5rem; font-weight: 700; transition: transform .3s; }
.step--validation .step-number { background: #00b486; }
.step-icon { display: flex; align-items: center; justify-content: center; inline-size: 3.75rem; aspect-ratio: 1; border-radius: 50%; background: #f1f5f9; font-size: 1.875rem; }
.activation-step strong { font-size: clamp(1rem,.7rem + .6vw,1.4rem); }
.activation-step > span:last-child { color: var(--activation-muted); font-size: clamp(.875rem,.6rem + .5vw,1.125rem); line-height: 1.4; }
.activation-step.is-selected { border-color: var(--activation-red); box-shadow: 0 .75rem 2rem #ed10241a; background: #fff7f8; }
.activation-step.is-selected .step-number { transform: scale(1.04); }
@media (hover: hover) { .activation-step:hover { transform: translateY(-.375rem); box-shadow: 0 .75rem 2rem #ed10241a; border-color: var(--activation-red); } }
button:focus-visible,.viewer-stage:focus-visible { outline: .1875rem solid var(--activation-red); outline-offset: .25rem; }
.activation-hint { margin: 1.5rem 0 0; color: #798ba3; font-size: .875rem; text-align: center; }
/* 4. Entrada única; el contenido nunca avanza automáticamente. */
.activation.has-motion .activation-heading,.activation.has-motion .activation-viewer,.activation.has-motion .activation-step { opacity: 0; }
.activation.has-motion.is-visible .activation-heading { animation: activation-enter .6s var(--activation-ease) both; }
.activation.has-motion.is-visible .activation-viewer { animation: activation-enter .65s .1s var(--activation-ease) both; }
.activation.has-motion.is-visible .activation-step { animation: activation-enter .45s var(--activation-ease) both; animation-delay: calc(.2s + var(--step) * .09s); }
.activation.has-motion.is-settled .activation-step { animation: none; opacity: 1; }
@keyframes activation-enter { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
@media (max-width: 64rem) {
  .activation-top { flex-direction: column; align-items: stretch; }
  .activation-heading,.activation-viewer { flex: 0 1 auto; inline-size: 100%; }
  .activation-heading { max-inline-size: 45rem; }
  .activation-steps { overflow-x: auto; padding: 1.75rem .25rem 1rem; scroll-snap-type: x proximity; }
  .activation-step { flex: 0 0 12rem; scroll-snap-align: center; }
}
@media (max-width: 36rem) {
  .viewer-heading { flex-wrap: wrap; gap: .625rem; }
  .viewer-number { flex-basis: 2.5rem; font-size: 1.25rem; }
  .viewer-copy { flex-basis: 60%; }
  .viewer-controls { margin-inline-start: auto; }
  .activation-step { flex-basis: min(75vw,15rem); }
  .connection-status,.validation-status { inset-inline-end: .5rem; inset-block-end: .5rem; padding: .375rem .5rem; }
}
.activation-heading,.viewer-copy,.activation-step { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .activation.has-motion .activation-heading,.activation.has-motion .activation-viewer,.activation.has-motion .activation-step { opacity: 1; }
}


/* Iconos vectoriales uniformes, independientes de la fuente del dispositivo. */
.step-icon svg { inline-size: 55%; block-size: 55%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }