/* ============================================================================ Konsters Pro · Alta web (/pros/alta) Espejo web del wizard ct-onboarding.tsx de la app. Reusa los tokens de site.css (--navy, --royal, --sky, --yellow, --display, --body) y añade solo lo propio de esta superficie: el chasis del wizard, los capítulos educativos a pantalla completa y los controles de formulario. Dos layouts hermanos, como en la referencia de calidad (Airbnb host flow): · [data-lesson] capítulo educativo — dos columnas, una idea, ilustración grande, contador «N de M» arriba y barra de acciones abajo. · [data-step] paso del wizard — columna única de 560px, barra de progreso, misma barra de acciones. Sin sorpresas entre uno y otro. ============================================================================ */ :root { --alta-bar-h: 88px; /* alto de la barra de acciones inferior */ --alta-head-h: 68px; /* alto del encabezado fijo */ --alta-col: 560px; /* ancho de la columna de formulario */ } /* Varios contenedores de esta página declaran display:flex/grid en su clase, lo que GANA sobre la regla `[hidden]{display:none}` del navegador. Sin esto, un `hidden` puesto desde JS no ocultaba nada (barra de acciones, paso de KYC ya enviado, campo CURP de persona moral…). */ [hidden] { display: none !important } /* `site.css` pinta el de navy oscuro (el lienzo del sitio de marketing). Cuando el tiene su propio fondo, el navegador YA NO lo propaga al lienzo — así que si el body no cubre todo el alto, se ve el navy debajo. Aquí pasaba: `height:100%` clavaba el body al alto de la ventana (785 px) y el contenido medía 1163 px, dejando 378 px de banda oscura sobre la que flotaban los campos. Se arregla por los dos lados: el lienzo se declara blanco y el body CRECE con su contenido en vez de quedar fijo. */ html { background: var(--canvas) } body { min-height: 100%; background: var(--canvas); /* El contenido nunca queda debajo de la barra de acciones fija. */ padding-bottom: calc(var(--alta-bar-h) + env(safe-area-inset-bottom, 0px)); } /* ============ Encabezado fijo: logo · contador · salir ============ */ .a-head { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--alta-head-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--canvas) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease); } .a-head[data-scrolled] { border-bottom-color: var(--line) } .a-head__logo { display: flex; align-items: center; flex: 0 0 auto } .a-head__logo svg { width: 116px; height: 25px; fill: var(--navy) } .a-head__mid { display: grid; gap: 3px; justify-items: center; min-width: 0 } .a-head__count { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; } /* Indicador de guardado. Vive junto al contador porque es la misma pregunta: «¿dónde voy y no lo voy a perder?». */ .a-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--success-dark); animation: aSavedIn .22s var(--ease-out) both; } .a-saved[data-estado="guardando"] { color: var(--muted) } .a-saved[data-estado="falla"] { color: var(--error) } .a-saved__dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; animation: aSavedPulse 1s ease-in-out infinite; } @keyframes aSavedIn { from { opacity: 0; transform: translateY(-3px) } to { opacity: 1; transform: none } } @keyframes aSavedPulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } } .a-head__right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto } .a-x { width: 38px; height: 38px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--ink) 6%, transparent); display: grid; place-items: center; color: var(--ink-soft); transition: background .18s var(--ease), transform .18s var(--ease); } .a-x:hover { background: color-mix(in srgb, var(--ink) 11%, transparent) } .a-x:active { transform: scale(.94) } .a-help { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); padding: 9px 14px; border-radius: 999px; transition: background .18s var(--ease); } .a-help:hover { background: color-mix(in srgb, var(--ink) 6%, transparent) } /* Barra de progreso del wizard — hilo fino bajo el encabezado. */ .a-progress { position: fixed; top: var(--alta-head-h); left: 0; right: 0; z-index: 59; height: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); opacity: 0; transition: opacity .3s var(--ease); } .a-progress[data-on] { opacity: 1 } .a-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--royal), var(--navy)); border-radius: 0 3px 3px 0; transition: width .55s var(--ease-out); } /* ============ Lienzo ============ */ .a-main { padding-top: calc(var(--alta-head-h) + 4px); min-height: calc(100vh - var(--alta-bar-h)); } .a-view { display: none } .a-view[data-on] { display: block; animation: aIn .42s var(--ease-out) both } @keyframes aIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } /* ---- Capítulo educativo: dos columnas ---- */ .a-lesson { max-width: 1180px; margin: 0 auto; padding: clamp(24px, 5vh, 64px) clamp(20px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 76px); /* `safe center` en vez de `center`: cuando la lámina es MÁS ALTA que la ventana, centrar la empuja hacia arriba y el encabezado se come el título —quedaba cortado y era inalcanzable, porque el desbordamiento superior no se puede desplazar—. Con `safe` cae a `start` en cuanto no cabe. */ align-items: safe center; min-height: calc(100vh - var(--alta-head-h) - var(--alta-bar-h)); } .a-lesson__copy { max-width: 30ch } .a-lesson h2 { font-family: var(--display); font-weight: 600; font-size: clamp(29px, 3.7vw, 46px); line-height: 1.08; letter-spacing: -.035em; color: var(--ink); margin: 0; } .a-lesson h2 em { font-style: normal; color: var(--royal) } .a-lesson p { margin: 20px 0 0; font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.6; color: var(--ink-soft); max-width: 42ch; } .a-lesson__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .a-lesson__eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--yellow); border-radius: 2px; transform: rotate(45deg); } .a-lesson__art { display: grid; place-items: center; min-width: 0; gap: 18px; align-content: center } .a-lesson__art svg { width: 100%; height: auto; max-height: min(58vh, 520px) } /* Lámina con controles encima de la gráfica: la ilustración cede altura para que el mando y lo que mueve quepan juntos en pantalla. */ .a-lesson__art[data-art-tight] svg { max-height: min(44vh, 400px) } /* Lista de puntos dentro de un capítulo (variante sin ilustración pesada). */ /* La viñeta va ABSOLUTA, no como flex-item: con `display:flex` en el

cada y cada nodo de texto se volvían columnas independientes y la frase se partía en dos bloques. Así el contenido fluye como texto normal. */ .a-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px } .a-points li { position: relative; padding-left: 32px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); } .a-points li b { color: var(--ink); font-weight: 600 } .a-points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 999px; background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23214E9C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; } /* ---- Paso del wizard: columna única ---- */ .a-step { max-width: var(--alta-col); margin: 0 auto; padding: clamp(26px, 5vh, 54px) clamp(20px, 5vw, 24px) 40px; } .a-step__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--royal); margin: 0 0 10px; } .a-step h2 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -.032em; color: var(--ink); margin: 0; } .a-step__sub { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft) } .a-step__body { margin-top: clamp(24px, 3.5vw, 34px); display: grid; gap: 20px } .a-step__note { font-size: 13px; line-height: 1.55; color: var(--muted) } .a-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 4px 0 -6px; } .a-rule { height: 1px; background: var(--line); border: 0; margin: 4px 0 } /* ============ Controles ============ */ .a-field { display: grid; gap: 7px } .a-field > label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft) } .a-field__hint { font-size: 12.5px; color: var(--muted); line-height: 1.5 } .a-input { width: 100%; height: 54px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-input); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); } textarea.a-input { height: auto; min-height: 92px; padding: 14px 16px; line-height: 1.5; resize: vertical } .a-input::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent) } .a-input:hover { border-color: var(--sky-line) } .a-input:focus { outline: 0; border-color: var(--royal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--royal) 14%, transparent) } .a-input[aria-invalid="true"] { border-color: var(--error) } .a-input[disabled] { background: color-mix(in srgb, var(--ink) 3%, transparent); color: var(--muted) } .a-input--pw { padding-right: 84px } .a-field__wrap { position: relative } .a-peek { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--royal); padding: 8px 10px; border-radius: 8px; } .a-peek:hover { background: color-mix(in srgb, var(--royal) 9%, transparent) } .a-err { font-size: 13px; color: var(--error); line-height: 1.5 } .a-ok { font-size: 13px; color: var(--success-dark); line-height: 1.5 } /* Tarjeta seleccionable (persona física/moral · régimen) */ .a-select { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 17px 18px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px; font: inherit; transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease); } .a-select:hover { border-color: var(--sky-line) } .a-select[aria-checked="true"] { border-color: var(--navy); background: color-mix(in srgb, var(--sky) 34%, var(--paper)) } .a-select__t { flex: 1; min-width: 0 } .a-select__t b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em } .a-select[aria-checked="true"] .a-select__t b { color: var(--navy) } .a-select__t span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.5 } .a-radio { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; border: 1.6px solid var(--sky-line); display: grid; place-items: center; transition: background .16s var(--ease), border-color .16s var(--ease); } .a-select[aria-checked="true"] .a-radio { background: var(--navy); border-color: var(--navy) } .a-radio svg { opacity: 0; transition: opacity .16s var(--ease) } .a-select[aria-checked="true"] .a-radio svg { opacity: 1 } .a-badge { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--sky); color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: .04em; vertical-align: 2px; } /* Chips (especialidades · alcaldías · ciudades) */ .a-chips { display: flex; flex-wrap: wrap; gap: 9px } .a-chip { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 999px; transition: all .16s var(--ease); } .a-chip:hover:not([disabled]) { border-color: var(--sky-line); color: var(--ink) } .a-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600 } .a-chip[data-primary="true"] { background: var(--navy); border-color: var(--navy); color: #fff } .a-chip[data-primary="true"] i { font-style: normal; color: var(--yellow); font-weight: 700; letter-spacing: .06em; font-size: 11px; margin-left: 6px } .a-chip[disabled] { opacity: .42; cursor: not-allowed } /* Segmentado de 3 celdas (tipo de operación) */ .a-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px } .a-seg button { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 600; padding: 14px 8px; border-radius: 12px; transition: all .16s var(--ease); } .a-seg button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff } /* Casilla */ .a-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; text-align: left } .a-check input { position: absolute; opacity: 0; width: 0; height: 0 } .a-check__box { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; margin-top: 1px; border: 1.6px solid var(--sky-line); background: var(--paper); display: grid; place-items: center; transition: all .16s var(--ease); } .a-check input:checked + .a-check__box { background: var(--navy); border-color: var(--navy) } .a-check__box svg { opacity: 0; transition: opacity .14s var(--ease) } .a-check input:checked + .a-check__box svg { opacity: 1 } .a-check input:focus-visible + .a-check__box { outline: 2.5px solid var(--navy); outline-offset: 3px } .a-check__t { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft) } .a-check__t a { color: var(--royal); text-decoration: underline } /* Interruptor */ .a-switch { flex: 0 0 auto; width: 48px; height: 28px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--ink) 18%, transparent); position: relative; transition: background .2s var(--ease); } .a-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform .2s var(--ease); } .a-switch[aria-checked="true"] { background: var(--navy) } .a-switch[aria-checked="true"]::after { transform: translateX(20px) } /* Tarjeta genérica / fila */ .a-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 10px; } .a-card--flat { background: color-mix(in srgb, var(--sky) 26%, var(--paper)); border-color: transparent } .a-row { display: flex; align-items: center; gap: 12px } .a-row__t { flex: 1; min-width: 0 } .a-row__t b { display: block; font-size: 15px; font-weight: 600; color: var(--ink) } .a-row__t span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.5 } /* Píldora de estado */ .a-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; } .a-pill--ok { background: var(--success-bg); color: var(--success-dark) } .a-pill--wait { background: var(--warning-bg); color: var(--warning-dark) } .a-pill--idle { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted) } /* ============ La cifra que se recuerda ============ Un número grande no es decoración: «3% + IVA» obliga a hacer una cuenta que nadie hace, y por no hacerla el Pro sospecha. $3.48 de cada $100 se queda. */ .a-hero-num { display: flex; align-items: baseline; gap: 16px; margin-top: 22px; padding: 20px 22px; border-radius: 18px; background: color-mix(in srgb, var(--sky) 46%, var(--paper)); } .a-hero-num > b { flex: 0 0 auto; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.035em; color: var(--navy); line-height: 1; } .a-hero-num > span { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft) } .a-hero-num b { color: var(--navy); font-weight: 700 } /* ============ Saltar al teléfono (QR) ============ */ .a-jump { display: flex; gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); } .a-jump img { flex: 0 0 auto; width: 112px; height: 112px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--line); } /* Sólo el TÍTULO va en bloque. Con `.a-jump b` a secas, los dentro del párrafo también rompían línea y la frase se leía en tres pedazos. */ .a-jump > div > b { font-size: 15px; font-weight: 600; color: var(--ink); display: block } .a-jump p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft) } .a-jump p b { color: var(--ink); font-weight: 600 } .a-jump span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted) } @media (max-width: 480px) { .a-jump { flex-direction: column; text-align: center; gap: 14px } } /* ============ Ayuda contextual del paso ============ Un
nativo: accesible por teclado y lector de pantalla sin una línea de JS, y sigue abriendo aunque el script falle. Va al final del paso porque responde la duda DESPUÉS de ver los campos, no antes. */ .a-why { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px } .a-why summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--royal); padding: 6px 0; min-height: 34px; } .a-why summary::-webkit-details-marker { display: none } .a-why summary::before { content: ""; flex: 0 0 auto; width: 19px; height: 19px; border-radius: 999px; border: 1.6px solid currentColor; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23214E9C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/11px no-repeat; transition: transform .2s var(--ease); } .a-why[open] summary::before { transform: rotate(180deg) } .a-why summary:focus-visible { outline: 2.5px solid var(--navy); outline-offset: 3px; border-radius: 6px } .a-why p { margin: 8px 0 4px 28px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); } .a-why a { color: var(--royal); text-decoration: underline; text-underline-offset: 3px; font-weight: 600 } /* Panel informativo */ .a-info { display: flex; gap: 12px; padding: 15px 17px; border-radius: 14px; background: color-mix(in srgb, var(--sky) 40%, var(--paper)); font-size: 14px; line-height: 1.55; color: var(--navy); } .a-info svg { flex: 0 0 auto; margin-top: 2px } .a-info--warn { background: var(--warning-bg); color: var(--warning-dark) } /* Botones */ .a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 28px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; transition: transform .16s var(--ease), background .16s var(--ease), opacity .16s var(--ease); } .a-btn--primary { background: var(--navy); color: #fff } .a-btn--primary:hover:not([disabled]) { background: var(--navy-900); transform: translateY(-1px) } .a-btn--ghost { background: transparent; color: var(--ink-soft); padding: 0 18px } .a-btn--ghost:hover:not([disabled]) { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink) } .a-btn--outline { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink) } .a-btn--outline:hover:not([disabled]) { background: color-mix(in srgb, var(--ink) 5%, transparent) } .a-btn--soft { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink) } .a-btn--soft:hover:not([disabled]) { background: color-mix(in srgb, var(--ink) 11%, transparent) } .a-btn--wide { width: 100% } .a-btn[disabled] { opacity: .38; cursor: not-allowed; transform: none } .a-btn[data-busy] { pointer-events: none } .a-spin { width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; } .a-btn--soft .a-spin, .a-btn--outline .a-spin { border-color: color-mix(in srgb, var(--ink) 25%, transparent); border-top-color: var(--ink) } .a-link { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--royal); padding: 0; text-decoration: underline; text-underline-offset: 3px } /* Cola de una etiqueta que se recorta en pantallas angostas (la apaga el bloque @media de abajo — por eso la regla base va AQUÍ y no después). */ .a-only-wide { display: inline } /* ============ Barra de acciones fija ============ */ .a-bar { position: fixed; inset: auto 0 0 0; z-index: 60; height: calc(var(--alta-bar-h) + env(safe-area-inset-bottom, 0px)); padding: 0 clamp(16px, 4vw, 40px) env(safe-area-inset-bottom, 0px); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: color-mix(in srgb, var(--canvas) 92%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-top: 1px solid var(--line); } .a-bar__msg { font-size: 13.5px; color: var(--error); line-height: 1.45; max-width: 46ch } .a-bar__right { display: flex; align-items: center; gap: 10px; margin-left: auto } /* ============ Diálogo modal ============ */ .a-dlg { border: 0; padding: 0; background: transparent; max-width: 100%; max-height: 100% } .a-dlg::backdrop { background: rgba(13, 30, 60, .55); backdrop-filter: blur(3px) } .a-dlg__in { width: min(440px, calc(100vw - 40px)); background: var(--paper); border-radius: 22px; padding: clamp(26px, 4vw, 34px); text-align: center; box-shadow: var(--shadow-lg); animation: aPop .3s var(--ease-out) both; } @keyframes aPop { from { opacity: 0; transform: scale(.94) translateY(10px) } to { opacity: 1; transform: none } } .a-dlg h3 { font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1.18; letter-spacing: -.028em; margin: 0 0 10px; color: var(--ink) } .a-dlg p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft) } .a-dlg__mark { width: 62px; height: 62px; border-radius: 999px; display: grid; place-items: center; margin: 0 auto 18px; background: var(--navy) } .a-dlg__acts { display: grid; gap: 9px } .a-dlg__x { position: absolute; top: 14px; right: 14px } /* ============================================================================ Ilustraciones · sistema de movimiento ---------------------------------------------------------------------------- Regla: el movimiento EXPLICA, no decora. Cada retraso (`--d`) está puesto para que el orden en que aparecen las cosas cuente el mecanismo — el pago entra ANTES de que empieces, el sello llega DESPUÉS de las fotos. Si se invierte el orden, el diagrama miente. Todo arranca cuando la lámina se activa y se rebobina al salir, así que volver atrás vuelve a contar la historia. ============================================================================ */ /* Tipografía dentro de los SVG: una sola escala, no valores sueltos por pieza. */ .a-lesson__art text { font-family: var(--body) } .art-t { font-size: 14.5px; font-weight: 600; fill: var(--ink) } .art-t--xl { font-size: 18px; font-weight: 700 } .art-t--on { fill: #fff } .art-c { font-size: 13px; fill: var(--muted) } .art-c--on { fill: var(--sky) } /* `tabular-nums` no es un lujo: sin él, el reloj vivo baila de ancho en cada tic y el diagrama entero se ve tembloroso. */ .art-num { font-family: var(--display); font-size: 46px; font-weight: 600; letter-spacing: -.035em; fill: var(--navy); font-variant-numeric: tabular-nums } .art-num--on { fill: var(--yellow); font-size: 62px } /* -- Entradas escalonadas -- */ .a-view[data-on] .art-in { animation: artIn .6s var(--ease-out) both; animation-delay: var(--d, 0s) } .a-view[data-on] .art-rise { animation: artRise .62s var(--ease-out) both; animation-delay: var(--d, 0s) } .a-view[data-on] .art-pop { animation: artPop .5s var(--ease-out) both; animation-delay: var(--d, 0s) } .art-in, .art-rise, .art-pop { opacity: 0 } @keyframes artIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } } @keyframes artRise { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } } @keyframes artPop { 0% { opacity: 0; transform: scale(.72) } 62% { transform: scale(1.06) } 100% { opacity: 1; transform: scale(1) } } /* -- Trazos que se dibujan -- */ .art-check { stroke-dasharray: 90; stroke-dashoffset: 90 } .a-view[data-on] .art-check { animation: artDraw .5s var(--ease-out) both; animation-delay: var(--d, 0s) } .art-shackle { stroke-dasharray: 120; stroke-dashoffset: 120 } .a-view[data-on] .art-shackle { animation: artDraw .7s var(--ease-out) .5s both } @keyframes artDraw { to { stroke-dashoffset: 0 } } /* El anillo de la cuenta regresiva: se dibuja hasta ~85% para leerse «corriendo». */ .art-sweep { stroke-dashoffset: 100 } .a-view[data-on] .art-sweep { animation: artSweep 1.5s var(--ease-out) .18s both } @keyframes artSweep { to { stroke-dashoffset: 15 } } /* La barra de la línea de tiempo avanza de D0 a D7. */ .art-rail { transform: scaleX(0); transform-origin: 46px 50% } .a-view[data-on] .art-rail { animation: artRail 1.5s var(--ease-out) .2s both } @keyframes artRail { to { transform: scaleX(1) } } /* La moneda del escrow no existe hasta que empieza a viajar. */ .art-coin { opacity: 0 } .a-view[data-on] .art-coin { animation: artFade .01s linear .55s forwards } @keyframes artFade { to { opacity: 1 } } /* Destello que recorre las tres fotos: son la misma evidencia. */ .art-flash { opacity: 0 } .a-view[data-on] .art-flash { animation: artFlash 1.1s var(--ease-out) .55s both } @keyframes artFlash { 0% { opacity: 0; transform: translateX(-80px) skewX(-12deg) } 22% { opacity: .55 } 100% { opacity: 0; transform: translateX(470px) skewX(-12deg) } } /* Los 12 meses se encienden uno por uno. */ .art-month { opacity: 0 } .a-view[data-on] .art-month { animation: artFade .3s var(--ease-out) both; animation-delay: var(--d, 0s) } /* Latido del D7 y del paso actual: siguen vivos, no son un estado terminado. */ .a-view[data-on] .art-ping { animation: artPing 2.4s var(--ease-out) 1.2s infinite } @keyframes artPing { 0% { transform: scale(.8); opacity: .55 } 70% { transform: scale(1.25); opacity: 0 } 100% { opacity: 0 } } .art-ping { transform-box: fill-box; transform-origin: center } .a-view[data-on] .art-now { animation: artNow 2.2s ease-in-out 1s infinite } @keyframes artNow { 0%, 100% { opacity: 1 } 50% { opacity: .55 } } /* ============ Ilustraciones ============ */ /* Barras de dinero: crecen al entrar, como en la referencia. */ .art-bar { transform-origin: 50% 100%; animation: barGrow .85s var(--ease-out) both } .a-view[data-on] .art-bar:nth-of-type(2) { animation-delay: .1s } @keyframes barGrow { from { transform: scaleY(.04); opacity: .3 } to { transform: scaleY(1); opacity: 1 } } .art-fade { animation: artFade .7s var(--ease-out) both } .art-fade--2 { animation-delay: .18s } .art-fade--3 { animation-delay: .32s } .art-fade--4 { animation-delay: .46s } .art-fade--5 { animation-delay: .6s } @keyframes artFade { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: none } } .art-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: artDraw 1.5s var(--ease-out) .2s forwards } @keyframes artDraw { to { stroke-dashoffset: 0 } } .art-label { font-family: var(--body); font-size: 15px; fill: var(--ink-soft) } .art-label b, .art-strong { font-weight: 700; fill: var(--ink) } .art-cap { font-family: var(--body); font-size: 13px; fill: var(--muted) } .art-on-dark { fill: #fff } /* ============ Responsivo ============ */ @media (max-width: 900px) { .a-lesson { grid-template-columns: 1fr; gap: 30px; text-align: left; padding-top: 26px } .a-lesson__copy { max-width: none; order: 1 } .a-lesson__art { order: 2 } .a-lesson__art svg { max-height: 42vh } .a-lesson h2 { font-size: clamp(27px, 6.4vw, 36px) } } @media (max-width: 560px) { :root { --alta-bar-h: 80px; --alta-head-h: 60px } .a-head__logo svg { width: 98px; height: 21px } .a-head__count { font-size: 12px } .a-help { display: none } .a-bar__msg { display: none } /* Con «Regresar» + «Saltar» + «Siguiente» en 375 px, estirar el grupo derecho al 100% empujaba el botón principal fuera de la pantalla. Aquí manda el ancho real de cada botón y el primario nunca se corta. */ .a-bar { gap: 8px; padding-left: 14px; padding-right: 14px } .a-bar__right { margin-left: auto; gap: 6px; flex: 0 1 auto } .a-btn { height: 48px; padding: 0 20px; font-size: 14.5px } .a-btn--ghost { padding: 0 10px } .a-only-wide { display: none } .a-seg { grid-template-columns: 1fr } } @media (prefers-reduced-motion: reduce) { /* OJO: no basta con apagar las animaciones. Las piezas de las ilustraciones ARRANCAN en opacity:0 y sólo la animación las enciende — apagarla sin más dejaba los diagramas invisibles justo para quien pidió menos movimiento. Aquí se apagan Y se dejan en su estado final. */ .a-view[data-on], .art-bar, .art-fade, .art-draw, .a-dlg__in, .art-in, .art-rise, .art-pop, .art-check, .art-shackle, .art-sweep, .art-rail, .art-coin, .art-flash, .art-month, .art-ping, .art-now, .a-view[data-on] .art-in, .a-view[data-on] .art-rise, .a-view[data-on] .art-pop, .a-view[data-on] .art-check, .a-view[data-on] .art-shackle, .a-view[data-on] .art-sweep, .a-view[data-on] .art-rail, .a-view[data-on] .art-coin, .a-view[data-on] .art-flash, .a-view[data-on] .art-month, .a-view[data-on] .art-ping, .a-view[data-on] .art-now { animation: none !important; opacity: 1 !important; transform: none !important; } .art-draw, .art-check, .art-shackle { stroke-dashoffset: 0 !important } .art-sweep { stroke-dashoffset: 15 !important } /* El destello sí se apaga del todo: es puro barrido, no aporta información. */ .art-flash { opacity: 0 !important } /* La moneda se queda en su destino, no a medio viaje. */ .art-coin { transform: translateX(62px) !important } .a-progress i { transition: none } }