/* ============================================================================ SPICA · css/demos/sol.css · LAS DIEZ ESCENAS sol-* DE LAS HOJAS ESTANDAR (r14) UNA sola hoja para las diez escenas nuevas de 1.1, 1.2, 1.3 y 3.1, como svc.css lo es para Servicios (PLAN-CONSOLIDADO-R14 4 y 6). Se carga en las cuatro hojas estandar, justo despues de demos/svc y de las hojas del Home que cada pagina reusa. El objeto en pantalla sigue siendo papel (una hoja, una lista, un guion, un calendario), pero estas escenas viven en el slot del "telefono" de las filas de beneficio, donde el ref pone la demo viva: por eso aqui SI entran las primitivas de la app del motor (bubble, typewrite, tap, noteCard) cuando el guion de SPEC-MOTION-R14 3.6 las pide, y solo entonces. Reglas que se cumplen aqui dentro: · cero animaciones CSS en bucle. Ninguna escena necesita palpitar. · geometria en cqw: cada hoja es su propio container (inline-size). · tipo en clamp() con cqw y con el piso de 11,2px de la leccion r13: nada nace por debajo de 0,7rem. · ningun token se redefine. Lo local empieza por --ss- (sol scene) para no chocar con --sol-accent / --sol-band, que css/solution.css declara en el de la hoja. · el retardo del stagger viaja en --ss-d y se aplica SOLO a opacity y transform, para que un nodo cambie de estado despues sin heredarlo. · las lineas que se dibujan van en HTML con scaleX/scaleY; los trazos curvos (monograma, ramas) en SVG con pathLength="100" y dashoffset. · acento dueno de la hoja: violeta en 1.x, ambar en 3.1 con --amber-text en todo lo mono. Nada de vivid (SPEC-UXUI-R14 8.3 lo prohibe en escena). · estado compuesto: en ?static y reduced-motion la escena ES el entregable (seccion 13 de esta hoja). ========================================================================== */ /* ============================================================================ 0 · ESCALA DECLARADA EN EL SLOT (CROSS-EDV C15) Cada montaje declara data-scale en el propio .demo y esta hoja lo lee por la misma custom property --s que js/solution.js copia del data-scale (y que los modulos sol-* tambien escriben desde dataset.scale). La escala se aplica al .demo y nunca a un ancestro, para que fakeCursor mida bien. Solo alcanza a las escenas sol-*: las del Home dentro de .sol-float las escala solution.css. ========================================================================== */ .demo--sol[data-scale] { transform: scale(var(--s, 1)); transform-origin: center; } .demo--sol[data-scale="0.6"] { --s: 0.6; } .demo--sol[data-scale="0.62"] { --s: 0.62; } .demo--sol[data-scale="0.72"] { --s: 0.72; } .demo--sol[data-scale="0.78"] { --s: 0.78; } .demo--sol[data-scale="0.82"] { --s: 0.82; } .demo--sol[data-scale="0.85"] { --s: 0.85; } .demo--sol[data-scale="1"] { --s: 1; } /* ============================================================================ 1 · EL CHASIS DE LA HOJA ========================================================================== */ .demo--sol { min-height: 420px; padding: clamp(0.6rem, 2.4vw, 1.4rem) 0; } .demo--sol .sol-sheet { --ss-pad: clamp(0.9rem, 2.6vw, 1.35rem); --ss-ink: var(--ink); --ss-soft: var(--ink-soft); --ss-faint: var(--ink-faint); --ss-line: var(--line); --ss-line-strong: var(--line-strong); --ss-well: color-mix(in srgb, var(--ink) 7%, transparent); --ss-ghost: color-mix(in srgb, var(--ink) 14%, transparent); --ss-go: var(--go); --ss-accent: var(--violet); --ss-accent-text: var(--violet); --ss-accent-soft: color-mix(in srgb, var(--violet) 12%, transparent); --ss-mono: clamp(0.7rem, 1.86cqw, 0.78rem); --ss-micro: clamp(0.7rem, 1.8cqw, 0.74rem); --ss-small: clamp(0.72rem, 1.9cqw, 0.8rem); --ss-text: clamp(0.78rem, 2.1cqw, 0.88rem); --ss-lead: clamp(0.9rem, 2.75cqw, 1.1rem); --ss-gap: clamp(0.45rem, 1.7cqw, 0.8rem); container-type: inline-size; position: relative; width: min(600px, 100%); background: var(--paper-raised); border: 1px solid var(--ss-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--ss-pad); display: grid; gap: var(--ss-gap); align-content: start; color: var(--ss-ink); } /* la 3.1 es ambar: superficie --amber, texto chico --amber-text (U-08) */ .demo--sol .sol-sheet--amber { --ss-accent: var(--amber); --ss-accent-text: var(--amber-text); --ss-accent-soft: color-mix(in srgb, var(--amber) 14%, transparent); } /* cabecera mono: el encabezado de un documento */ .demo--sol .sol-head { font-family: var(--font-mono); font-size: var(--ss-mono); font-weight: 560; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ss-faint); } /* rotulo mono chico, sin mayusculas forzadas: nombres de columna y de pieza */ .demo--sol .sol-label { font-family: var(--font-mono); font-size: var(--ss-mono); font-weight: 560; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ss-faint); } /* entrada base de cualquier pieza */ .demo--sol .sol-in { opacity: 0; transform: translateY(9px); transition: opacity 0.38s var(--ease-out) var(--ss-d, 0ms), transform 0.5s var(--ease-scene) var(--ss-d, 0ms); } .demo--sol .sol-in.is-on { opacity: 1; transform: none; } /* el sello del cierre */ .demo--sol .sol-stamp { justify-self: end; font-family: var(--font-mono); font-size: var(--ss-mono); font-weight: 560; letter-spacing: 0.06em; color: var(--ss-ink); border-top: 1px solid var(--ss-line); padding-top: 0.45rem; text-align: right; opacity: 0; transform: translateY(8px); transition: opacity 0.36s var(--ease-out) var(--ss-d, 0ms), transform 0.42s var(--ease-out) var(--ss-d, 0ms); } .demo--sol .sol-stamp.is-on { opacity: 1; transform: none; } /* el pie mono: la promesa del catalogo, en una linea */ .demo--sol .sol-foot { font-family: var(--font-mono); font-size: var(--ss-mono); font-weight: 560; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ss-accent-text); border-top: 1px solid var(--ss-line); padding-top: 0.45rem; opacity: 0; transform: translateY(8px); transition: opacity 0.36s var(--ease-out) var(--ss-d, 0ms), transform 0.42s var(--ease-out) var(--ss-d, 0ms); } .demo--sol .sol-foot.is-on { opacity: 1; transform: none; } /* lineas que se dibujan: HTML puro, grosor exacto en cualquier ancho */ .demo--sol .sol-line { display: block; background: currentColor; transition: transform 0.56s var(--ease-out) var(--ss-d, 0ms); } .demo--sol .sol-line--v { width: 1px; transform: scaleY(0); transform-origin: top center; } .demo--sol .sol-line--h { height: 1px; transform: scaleX(0); transform-origin: left center; } .demo--sol .sol-line.is-on, .demo--sol .sol-draw.is-on .sol-line { transform: none; } /* barra fantasma: texto que no hace falta leer (titulares, campos, codigo) */ .demo--sol .sol-ghost { display: block; height: 6px; border-radius: 3px; background: var(--ss-ghost); width: var(--ss-w, 100%); } /* check que se dibuja (SVG con pathLength=100) */ .demo--sol .ss-check { width: clamp(12px, 3.2cqw, 15px); height: clamp(12px, 3.2cqw, 15px); flex: none; color: var(--ss-accent); } .demo--sol .ss-check svg, .demo--sol .ss-x svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.42s var(--ease-out) var(--ss-d, 0ms); } .demo--sol .ss-check.is-on svg, .demo--sol .ss-x.is-on svg { stroke-dashoffset: 0; } .demo--sol .ss-x { width: clamp(12px, 3.2cqw, 15px); height: clamp(12px, 3.2cqw, 15px); flex: none; color: var(--ss-faint); } /* los chips del motor: piso de tamano, stagger por la misma custom property, y el acento de la hoja. Sobre papel, el violeta del chip mide 5,1:1 y el ambar va en --amber-text (5,0:1). */ .demo--sol .dm-chip { --dm-accent: var(--ss-accent); font-size: var(--ss-mono); color: var(--ss-accent-text); transition-delay: var(--ss-d, 0ms); } .demo--sol .dm-chip--quiet { --dm-accent: var(--ss-faint); color: var(--ss-soft); } /* la marca del pais: la misma tinta apagada que en svc-rules (.sr-only) */ .demo--sol .dm-chip--us { --dm-accent: var(--ss-faint); color: var(--ss-soft); font-size: var(--ss-micro); } /* "listo": verde de la casa oscurecido un paso para pasar AA sobre su tinte */ .demo--sol .dm-chip--go { --dm-accent: var(--go); color: color-mix(in srgb, var(--go) 72%, var(--slate)); } /* el texto que se escribe solo hereda el color de su hoja */ .demo--sol .dm-word { color: inherit; } /* una ranura de alto fijo para chips que se reemplazan (uno sale, otro entra) */ .demo--sol .ss-slot { position: relative; height: 1.6rem; display: flex; align-items: center; gap: 0.35rem; } .demo--sol .ss-slot > .dm-chip { position: absolute; left: 0; top: 0.15rem; } /* ============================================================================ 2 · N2 · sol-wake · la base fria que despierta (1.1 fila 3) ========================================================================== */ .demo--sol-wake .swk-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(0.6rem, 2.6cqw, 1.2rem); align-items: start; } @container (max-width: 380px) { .demo--sol-wake .swk-body { grid-template-columns: minmax(0, 1fr); } } .demo--sol-wake .swk-list { display: grid; gap: clamp(0.2rem, 0.9cqw, 0.36rem); align-content: start; } .demo--sol-wake .swk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; padding: 0.2rem 0.45rem; border-radius: 7px; color: var(--ss-faint); transition: opacity 0.34s var(--ease-out) var(--ss-d, 0ms), transform 0.4s var(--ease-scene) var(--ss-d, 0ms), background 0.4s var(--ease), color 0.34s var(--ease); } .demo--sol-wake .swk-row__dot { width: clamp(16px, 4.2cqw, 20px); height: clamp(16px, 4.2cqw, 20px); border-radius: 50%; background: var(--ss-ghost); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--ss-micro); font-weight: 620; color: var(--ss-soft); transition: background 0.4s var(--ease), color 0.4s var(--ease); } .demo--sol-wake .swk-row__name { font-size: var(--ss-small); color: var(--ss-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.34s var(--ease); } /* el momento de la escena: el contacto se enciende en violeta */ .demo--sol-wake .swk-row.is-awake { background: var(--ss-accent-soft); } .demo--sol-wake .swk-row.is-awake .swk-row__dot { background: var(--ss-accent); color: #fff; } .demo--sol-wake .swk-row.is-awake .swk-row__name { color: var(--ss-ink); font-weight: 560; } .demo--sol-wake .swk-row .dm-chip { justify-self: end; } .demo--sol-wake .swk-thread { display: flex; flex-direction: column; gap: 0.5rem; min-height: clamp(84px, 24cqw, 120px); } .demo--sol-wake .swk-thread .dm-bubble { max-width: 100%; font-size: var(--ss-small); } .demo--sol-wake .swk-thread .dm-bubble--out { background: var(--ss-accent); } /* estado impreso: el diagnostico y el resultado, los dos en fila */ .demo--sol-wake.is-instant .ss-slot { flex-wrap: wrap; height: auto; } .demo--sol-wake.is-instant .ss-slot > .dm-chip { position: static; } .demo--sol-wake.is-instant .swk-cold { text-decoration: line-through; } /* ============================================================================ 3 · H2 · sol-ask · el comprador esta preguntando (1.1 fila 4) ========================================================================== */ .demo--sol-ask .sak-sheet { width: min(560px, 100%); } .demo--sol-ask .sak-field { display: flex; align-items: center; gap: 0.5rem; min-height: 2.3rem; padding: 0.45rem 0.75rem; border: 1px solid var(--ss-line-strong); border-radius: var(--radius-pill); font-size: var(--ss-text); color: var(--ss-ink); background: var(--paper); } .demo--sol-ask .sak-field__ico { width: clamp(14px, 3.6cqw, 17px); height: clamp(14px, 3.6cqw, 17px); flex: none; color: var(--ss-faint); } .demo--sol-ask .sak-field__ico svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .demo--sol-ask .sak-field__text { min-width: 0; line-height: 1.35; } .demo--sol-ask .sak-answer { display: grid; gap: clamp(0.45rem, 1.7cqw, 0.7rem); padding: clamp(0.5rem, 1.9cqw, 0.85rem) clamp(0.6rem, 2cqw, 0.9rem); border-radius: var(--radius-md); background: var(--ss-well); min-height: clamp(96px, 28cqw, 132px); align-content: start; } .demo--sol-ask .sak-line { height: 7px; border-radius: 4px; background: var(--ss-ghost); width: var(--ss-w, 100%); opacity: 0; transform: translateY(6px); transition: opacity 0.34s var(--ease-out) var(--ss-d, 0ms), transform 0.4s var(--ease-scene) var(--ss-d, 0ms); } .demo--sol-ask .sak-line.is-on { opacity: 1; transform: none; } /* la tarjeta del negocio, dentro de la respuesta y sin etiqueta de anuncio */ .demo--sol-ask .sak-biz { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; border-radius: 10px; background: var(--paper-raised); border: 1px solid var(--ss-line); border-left: 3px solid var(--ss-accent); box-shadow: var(--shadow-lift); } .demo--sol-ask .sak-biz__mark { width: clamp(24px, 6.2cqw, 30px); height: clamp(24px, 6.2cqw, 30px); border-radius: 8px; background: var(--ss-accent); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: var(--ss-small); } .demo--sol-ask .sak-biz__id { display: grid; line-height: 1.25; min-width: 0; } .demo--sol-ask .sak-biz__id b { font-size: var(--ss-small); font-weight: 620; color: var(--ss-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .demo--sol-ask .sak-biz__id small { font-family: var(--font-mono); font-size: var(--ss-micro); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ss-faint); } .demo--sol-ask .sak-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.6rem; align-items: center; } /* ============================================================================ 4 · N3 · sol-mark · la marca nace de una reticula (1.2 fila 1) ========================================================================== */ .demo--sol-mark .smk-body { display: grid; grid-template-columns: clamp(120px, 38cqw, 190px) minmax(0, 1fr); gap: clamp(0.7rem, 3cqw, 1.3rem); align-items: stretch; } .demo--sol-mark .smk-field { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); background: var(--ss-well); overflow: hidden; } .demo--sol-mark .smk-grid { position: absolute; inset: clamp(6px, 2cqw, 10px); color: var(--ss-line-strong); } .demo--sol-mark .smk-gline--v { position: absolute; top: 0; bottom: 0; height: auto; } .demo--sol-mark .smk-gline--h { position: absolute; left: 0; right: 0; width: auto; } .demo--sol-mark .smk-mono { position: absolute; inset: 14%; color: var(--ss-accent); } .demo--sol-mark .smk-mono svg, .demo--sol-mark .sol-monogram svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .demo--sol-mark .smk-mono svg path { stroke-width: 9; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.7s var(--ease-out) var(--ss-d, 0ms); } .demo--sol-mark .smk-mono.is-on svg path { stroke-dashoffset: 0; } .demo--sol-mark .smk-specs { display: grid; gap: clamp(0.5rem, 2cqw, 0.9rem); align-content: center; } .demo--sol-mark .smk-swatches { display: flex; gap: 0.4rem; } .demo--sol-mark .smk-swatch { width: clamp(28px, 8.5cqw, 44px); aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--ss-line); } .demo--sol-mark .smk-swatch--accent { background: var(--ss-accent); } .demo--sol-mark .smk-swatch--ink { background: var(--ink); } .demo--sol-mark .smk-swatch--paper { background: var(--paper); } .demo--sol-mark .smk-type { display: flex; align-items: baseline; gap: clamp(0.6rem, 2.4cqw, 1rem); } .demo--sol-mark .smk-type__pair { display: grid; gap: 0.15rem; line-height: 1; } .demo--sol-mark .smk-type__aa { font-size: clamp(1.4rem, 5.6cqw, 2.1rem); color: var(--ss-ink); letter-spacing: -0.02em; } .demo--sol-mark .smk-type__aa--display { font-family: var(--font-display); font-weight: 800; } .demo--sol-mark .smk-type__aa--body { font-family: var(--font-sans); font-weight: 500; } /* la fila de aplicaciones: cada una lleva el mismo monograma */ .demo--sol-mark .smk-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.4rem, 1.7cqw, 0.8rem); align-items: end; border-top: 1px solid var(--ss-line); padding-top: clamp(0.5rem, 1.8cqw, 0.8rem); } .demo--sol-mark .smk-app { display: grid; justify-items: center; gap: 0.35rem; } .demo--sol-mark .smk-app__shape { position: relative; display: grid; place-items: center; background: var(--ss-accent); color: #fff; overflow: hidden; } .demo--sol-mark .smk-app__shape .sol-monogram { width: 46%; height: 46%; } .demo--sol-mark .smk-app__shape .sol-monogram svg path { stroke-width: 9; } .demo--sol-mark .smk-app--card .smk-app__shape { width: clamp(52px, 17cqw, 78px); aspect-ratio: 8 / 5; border-radius: 6px; } .demo--sol-mark .smk-app--avatar .smk-app__shape { width: clamp(34px, 11cqw, 48px); aspect-ratio: 1; border-radius: 50%; } .demo--sol-mark .smk-app--favicon .smk-app__shape { width: clamp(22px, 7cqw, 30px); aspect-ratio: 1; border-radius: 6px; } .demo--sol-mark .smk-app--cover .smk-app__shape { width: clamp(30px, 9.5cqw, 42px); aspect-ratio: 9 / 16; border-radius: 5px; } .demo--sol-mark .smk-app__name { font-family: var(--font-mono); font-size: var(--ss-micro); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ss-faint); } /* ============================================================================ 5 · N4 · sol-build · la pagina se programa a mano (1.2 fila 3) ========================================================================== */ .demo--sol-build .sbd-panels { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(0.6rem, 2.4cqw, 1.1rem); align-items: stretch; } .demo--sol-build .sbd-editor { background: var(--slate); border-radius: var(--radius-md); padding: clamp(0.6rem, 2.2cqw, 0.95rem); display: grid; align-content: start; gap: clamp(4px, 1.3cqw, 6px); min-height: clamp(150px, 44cqw, 210px); } .demo--sol-build .sbd-editor__bar { display: flex; gap: 0.3rem; margin-bottom: 0.3rem; } .demo--sol-build .sbd-editor__bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(246, 245, 241, 0.28); } .demo--sol-build .sbd-code { display: block; height: 5px; border-radius: 3px; width: var(--ss-w, 60%); margin-left: var(--ss-indent, 0); background: color-mix(in srgb, var(--violet-bright) 78%, transparent); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s var(--ease-out) var(--ss-d, 0ms), transform 0.36s var(--ease-scene) var(--ss-d, 0ms); } .demo--sol-build .sbd-code--faint { background: rgba(246, 245, 241, 0.34); } .demo--sol-build .sbd-code.is-on { opacity: 1; transform: none; } .demo--sol-build .sbd-canvas { background: var(--paper); border: 1px solid var(--ss-line); border-radius: var(--radius-md); padding: clamp(0.55rem, 2cqw, 0.9rem); display: grid; align-content: start; gap: clamp(0.4rem, 1.5cqw, 0.65rem); } .demo--sol-build .sbd-nav { display: flex; align-items: center; gap: 0.45rem; } .demo--sol-build .sbd-nav__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ss-accent); } .demo--sol-build .sbd-nav .sol-ghost { height: 4px; } .demo--sol-build .sbd-hero { display: grid; gap: 0.3rem; padding: clamp(0.35rem, 1.3cqw, 0.55rem) 0; } .demo--sol-build .sbd-hero__title { height: clamp(10px, 3.2cqw, 14px); border-radius: 4px; width: 72%; background: color-mix(in srgb, var(--ink) 78%, transparent); } .demo--sol-build .sbd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; } .demo--sol-build .sbd-card { aspect-ratio: 4 / 3; border-radius: 6px; background: var(--ss-accent-soft); border: 1px solid color-mix(in srgb, var(--ss-accent) 30%, transparent); padding: 0.3rem; display: grid; align-content: end; gap: 3px; } .demo--sol-build .sbd-card .sol-ghost { height: 4px; } /* la fila de medida: anillo de carga, chip Fast, chip de la casa */ .demo--sol-build .sbd-meter { display: flex; align-items: center; gap: clamp(0.5rem, 2cqw, 0.9rem); flex-wrap: wrap; border-top: 1px solid var(--ss-line); padding-top: clamp(0.5rem, 1.8cqw, 0.8rem); } .demo--sol-build .sbd-ring { width: clamp(28px, 8cqw, 38px); height: clamp(28px, 8cqw, 38px); color: var(--ss-go); flex: none; } .demo--sol-build .sbd-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .demo--sol-build .sbd-ring svg circle { fill: none; stroke-width: 3.2; stroke-linecap: round; } .demo--sol-build .sbd-ring__track { stroke: var(--ss-ghost); } .demo--sol-build .sbd-ring__fill { stroke: currentColor; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.9s var(--ease-out); } .demo--sol-build .sbd-ring.is-on .sbd-ring__fill { stroke-dashoffset: 0; } .demo--sol-build .sbd-meter__label { font-family: var(--font-mono); font-size: var(--ss-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ss-faint); } .demo--sol-build .sbd-meter .dm-chip--code { margin-left: auto; } /* ============================================================================ 6 · N5 · sol-landing · el anuncio y la landing hablan igual (1.2 fila 4) ========================================================================== */ .demo--sol-landing .sld-body { display: grid; grid-template-columns: clamp(100px, 32cqw, 160px) clamp(26px, 8cqw, 44px) minmax(0, 1fr); align-items: center; gap: 0; min-height: clamp(150px, 44cqw, 200px); } .demo--sol-landing .sld-ad { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); background: var(--ss-accent); color: #fff; padding: clamp(0.5rem, 2cqw, 0.85rem); display: grid; align-content: space-between; box-shadow: var(--shadow-lift); transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-scene), box-shadow 0.2s var(--ease); } .demo--sol-landing .sld-ad.is-pressed { transform: scale(0.97); } .demo--sol-landing .sld-mono { width: clamp(24px, 7.5cqw, 34px); height: clamp(24px, 7.5cqw, 34px); color: currentColor; } .demo--sol-landing .sld-mono svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; } .demo--sol-landing .sld-ad__title { display: grid; gap: 4px; } .demo--sol-landing .sld-ad__title i { display: block; height: clamp(7px, 2.2cqw, 10px); border-radius: 4px; background: rgba(255, 255, 255, 0.92); } .demo--sol-landing .sld-ad__title i:last-child { width: 62%; opacity: 0.72; } .demo--sol-landing .sld-link { color: var(--ss-accent); align-self: center; width: 100%; height: 2px; } .demo--sol-landing .sld-landing { border: 1px solid var(--ss-line); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; display: grid; align-content: start; } .demo--sol-landing .sld-landing__nav { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; background: var(--ss-accent); color: #fff; } .demo--sol-landing .sld-landing__nav .sld-mono { width: clamp(14px, 4cqw, 18px); height: clamp(14px, 4cqw, 18px); } .demo--sol-landing .sld-landing__nav .sol-ghost { height: 4px; width: 40%; background: rgba(255, 255, 255, 0.7); } .demo--sol-landing .sld-form { display: grid; gap: 0.4rem; padding: clamp(0.5rem, 1.9cqw, 0.8rem); } .demo--sol-landing .sld-form__title { height: clamp(8px, 2.4cqw, 11px); border-radius: 4px; width: 58%; background: color-mix(in srgb, var(--ink) 74%, transparent); margin-bottom: 0.15rem; } .demo--sol-landing .sld-field { height: clamp(16px, 5cqw, 22px); border: 1px solid var(--ss-line-strong); border-radius: 6px; padding: 0 0.4rem; display: flex; align-items: center; background: var(--paper-raised); } .demo--sol-landing .sld-field i { display: block; height: 4px; border-radius: 2px; width: var(--ss-w, 60%); background: var(--ss-ghost); transform: scaleX(0); transform-origin: left center; transition: transform 0.44s var(--ease-out) var(--ss-d, 0ms); } .demo--sol-landing .sld-field.is-on i { transform: none; } .demo--sol-landing .sld-btn { position: relative; margin-top: 0.15rem; height: clamp(18px, 5.4cqw, 24px); border-radius: 6px; background: var(--ss-accent); color: #fff; font-family: var(--font-mono); font-size: var(--ss-micro); font-weight: 620; letter-spacing: 0.06em; text-transform: uppercase; display: grid; place-items: center; transition: transform 0.14s var(--ease); } .demo--sol-landing .sld-tail { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; min-height: 2.2rem; } .demo--sol-landing .sld-tail .dm-note { padding: 0.5rem 0.7rem; --dm-accent: var(--ss-accent); } .demo--sol-landing .sld-tail .dm-note__copy b { font-size: var(--ss-small); } /* ============================================================================ 7 · N6 · sol-hook · antes de grabar (1.3 fila 1) ========================================================================== */ .demo--sol-hook .shk-timeline { display: grid; gap: 0.3rem; } .demo--sol-hook .shk-bar { display: flex; gap: 3px; height: clamp(22px, 6.4cqw, 30px); border-radius: 7px; background: var(--ss-well); padding: 3px; } .demo--sol-hook .shk-band { flex: 0 0 var(--ss-w, 33%); border-radius: 5px; background: var(--ss-ghost); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--ss-micro); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ss-soft); overflow: hidden; white-space: nowrap; opacity: 0; transform: scaleX(0.6); transform-origin: left center; transition: opacity 0.3s var(--ease-out) var(--ss-d, 0ms), transform 0.42s var(--ease-out) var(--ss-d, 0ms), background 0.4s var(--ease), color 0.3s var(--ease); } .demo--sol-hook .shk-band.is-on { opacity: 1; transform: none; } /* donde se gana: el gancho se enciende y el rotulo sale de la franja */ .demo--sol-hook .shk-band--hook.is-lit { background: var(--ss-accent); color: #fff; } .demo--sol-hook .shk-band--hook { flex-basis: 12%; } .demo--sol-hook .shk-ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--ss-micro); letter-spacing: 0.05em; color: var(--ss-faint); } .demo--sol-hook .shk-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(0.6rem, 2.6cqw, 1.2rem); align-items: start; } @container (max-width: 380px) { .demo--sol-hook .shk-body { grid-template-columns: minmax(0, 1fr); } } .demo--sol-hook .shk-col { display: grid; gap: 0.35rem; align-content: start; } .demo--sol-hook .shk-format { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; font-size: var(--ss-small); color: var(--ss-soft); padding: 0.18rem 0; } .demo--sol-hook .shk-format.is-pick { color: var(--ss-ink); font-weight: 560; } .demo--sol-hook .shk-shoot { display: grid; gap: 0.42rem; padding-top: 0.2rem; } .demo--sol-hook .shk-shoot__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.45rem; } .demo--sol-hook .shk-shoot__num { font-family: var(--font-mono); font-size: var(--ss-micro); font-weight: 620; color: var(--ss-accent-text); } .demo--sol-hook .shk-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.6rem; align-items: center; } /* ============================================================================ 8 · N7 · sol-captions · la edicion y los captions (1.3 fila 2) ========================================================================== */ .demo--sol-captions .scp-body { display: grid; grid-template-columns: clamp(92px, 27cqw, 124px) minmax(0, 1fr); gap: clamp(0.7rem, 2.8cqw, 1.2rem); align-items: start; } /* el marco 9:16 plano: sin cromo de app */ .demo--sol-captions .scp-frame { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--ink) 34%, transparent), color-mix(in srgb, var(--ink) 58%, transparent)); overflow: hidden; display: grid; align-content: end; padding: 0.5rem; } /* el lavado de color: cruza de izquierda a derecha con clip-path */ .demo--sol-captions .scp-frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--ss-accent) 62%, var(--ink)), color-mix(in srgb, var(--ss-accent) 30%, var(--ink))); clip-path: inset(0 100% 0 0); transition: clip-path 0.5s var(--ease-out); } .demo--sol-captions .scp-frame.is-graded::before { clip-path: inset(0 0 0 0); } .demo--sol-captions .scp-caption { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 800; font-size: clamp(0.72rem, 2.3cqw, 0.9rem); line-height: 1.12; letter-spacing: -0.01em; color: #fff; text-align: center; min-height: 2.3em; } .demo--sol-captions .scp-caption .dm-word { color: #fff; } .demo--sol-captions .scp-head { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.25rem; height: 2px; background: rgba(255, 255, 255, 0.28); z-index: 1; } .demo--sol-captions .scp-head i { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform 1s linear; } .demo--sol-captions .scp-head.is-playing i { transform: none; } .demo--sol-captions .scp-side { display: grid; gap: clamp(0.5rem, 1.9cqw, 0.85rem); align-content: start; } .demo--sol-captions .scp-rail { display: flex; align-items: center; gap: 4px; height: clamp(22px, 6.4cqw, 30px); padding: 3px; border-radius: 7px; background: var(--ss-well); } .demo--sol-captions .scp-clip { flex: 0 0 var(--ss-w, 18%); height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--ss-accent) 72%, transparent); opacity: 0; transform: translateY(6px); transition: opacity 0.32s var(--ease-out) var(--ss-d, 0ms), transform 0.38s var(--ease-scene) var(--ss-d, 0ms), background 0.34s var(--ease), flex-basis 0.4s var(--ease); } .demo--sol-captions .scp-clip.is-on { opacity: 1; transform: none; } /* impreso: los descartes se quedan a la vista, en gris */ .demo--sol-captions .scp-clip.is-cut { background: var(--ss-ghost); } .demo--sol-captions .scp-audio { display: flex; align-items: flex-end; gap: 0.5rem; } .demo--sol-captions .scp-audio .dm-bars { --dm-accent: var(--ss-accent); height: clamp(26px, 8cqw, 38px); gap: 3px; } /* el nivelado cambia la altura de cada barra; el retardo inline del motor se conserva y la ola de izquierda a derecha es a proposito */ .demo--sol-captions .scp-audio .dm-bars i { width: clamp(5px, 1.6cqw, 7px); transition: transform 0.55s var(--ease-out), height 0.5s var(--ease); } .demo--sol-captions .scp-audio__label { font-family: var(--font-mono); font-size: var(--ss-micro); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ss-faint); padding-bottom: 0.15rem; } .demo--sol-captions .scp-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.6rem; align-items: center; } /* ============================================================================ 9 · N8 · sol-plans · los tres planes como calendario (1.3 fila 4) ========================================================================== */ .demo--sol-plans .spl-cal { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: clamp(0.25rem, 1cqw, 0.4rem); align-items: center; } .demo--sol-plans .spl-corner { min-height: 1.6rem; } .demo--sol-plans .spl-col-head { min-height: 1.6rem; display: flex; align-items: center; justify-content: center; } .demo--sol-plans .spl-col-head .dm-chip { font-family: var(--font-display); font-weight: 800; font-size: clamp(0.8rem, 2.4cqw, 0.95rem); letter-spacing: 0; padding: 0.18rem 0.6rem; } .demo--sol-plans .spl-week { font-family: var(--font-mono); font-size: var(--ss-micro); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ss-faint); padding-right: 0.3rem; white-space: nowrap; } .demo--sol-plans .spl-cell { display: flex; justify-content: center; gap: 4px; height: clamp(26px, 7.6cqw, 34px); padding: 4px; border-radius: 7px; background: var(--ss-well); transition: background 0.4s var(--ease); } .demo--sol-plans .spl-cell.is-top { background: var(--ss-accent-soft); } .demo--sol-plans .spl-token { width: clamp(11px, 3.4cqw, 15px); height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--ss-accent) 82%, transparent); opacity: 0; transform: translateY(-8px) scale(0.6); transition: opacity 0.3s var(--ease-out) var(--ss-d, 0ms), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--ss-d, 0ms), background 0.4s var(--ease); } .demo--sol-plans .spl-token.is-on { opacity: 1; transform: none; } .demo--sol-plans .spl-cell.is-top .spl-token { background: var(--ss-accent); } .demo--sol-plans .spl-tag { display: flex; justify-content: flex-end; min-height: 1.6rem; align-items: center; } /* ============================================================================ 10 · N9 · sol-units · una linea de ingresos que se ramifica (3.1 fila 3) ========================================================================== */ .demo--sol-units .sun-body { display: grid; grid-template-columns: minmax(0, 0.9fr) clamp(56px, 18cqw, 96px) minmax(0, 1.1fr); gap: clamp(0.4rem, 1.6cqw, 0.7rem); align-items: center; min-height: clamp(120px, 34cqw, 160px); } .demo--sol-units .sun-today { display: grid; gap: 0.4rem; align-content: center; } .demo--sol-units .sun-sparks { position: relative; height: clamp(36px, 11cqw, 52px); } .demo--sol-units .sun-sparks .dm-spark { --dm-accent: var(--ss-accent); position: absolute; inset: 0; } .demo--sol-units .sun-sparks .dm-spark svg { width: 100%; height: 100%; } .demo--sol-units .sun-spark--flat { --dm-accent: var(--ss-faint); } .demo--sol-units .sun-spark--flat path { stroke-width: 2; } .demo--sol-units .sun-spark--up.is-on { z-index: 1; } .demo--sol-units .sun-bar { height: clamp(18px, 5.4cqw, 24px); border-radius: 6px; background: var(--ss-accent); display: flex; align-items: center; padding: 0 0.55rem; font-family: var(--font-mono); font-size: var(--ss-micro); font-weight: 620; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); } .demo--sol-units .sun-branches { align-self: stretch; color: var(--ss-accent); } .demo--sol-units .sun-branches svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; overflow: visible; } /* preserveAspectRatio="none" estira la caja, no el trazo: non-scaling-stroke mantiene los 3px en cualquier ancho (leccion r13 de las lineas en SVG) */ .demo--sol-units .sun-branches path { vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.6s var(--ease-out) var(--ss-d, 0ms); } .demo--sol-units .sun-branches.is-on path { stroke-dashoffset: 0; } .demo--sol-units .sun-lines { display: grid; gap: clamp(0.9rem, 4cqw, 1.6rem); align-content: center; } .demo--sol-units .sun-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--ss-accent) 40%, transparent); background: var(--paper-raised); } .demo--sol-units .sun-line .sol-ghost { height: 5px; } .demo--sol-units .sun-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.6rem; align-items: center; } /* ============================================================================ 11 · N10 · sol-month · el mes ya presupuestado (3.1 fila 4) ========================================================================== */ .demo--sol-month .smn-pages { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: clamp(0.35rem, 1.4cqw, 0.6rem); } .demo--sol-month .smn-page { aspect-ratio: 5 / 3; border: 1px solid var(--ss-line); border-radius: 6px; background: var(--paper); padding: 4px; display: grid; gap: 3px; align-content: start; } .demo--sol-month .smn-page__nav { height: 3px; border-radius: 2px; background: var(--ss-accent); width: 100%; } .demo--sol-month .smn-page__title { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 55%, transparent); width: 62%; } .demo--sol-month .smn-page__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .demo--sol-month .smn-page__cards i { display: block; height: clamp(6px, 2cqw, 9px); border-radius: 2px; background: var(--ss-accent-soft); } .demo--sol-month .smn-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(0.6rem, 2.6cqw, 1.2rem); align-items: start; } .demo--sol-month .smn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.3rem, 1.2cqw, 0.5rem); } .demo--sol-month .smn-piece { height: clamp(30px, 8.8cqw, 40px); border-radius: 6px; background: var(--ss-well); display: grid; place-items: center; } .demo--sol-month .smn-piece i { display: block; background: var(--ss-accent); border-radius: 3px; opacity: 0; transform: scale(0.5); transition: opacity 0.3s var(--ease-out) var(--ss-d, 0ms), transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) var(--ss-d, 0ms); } .demo--sol-month .smn-piece.is-on i { opacity: 1; transform: none; } .demo--sol-month .smn-piece--square i { width: 52%; aspect-ratio: 1; } .demo--sol-month .smn-piece--vertical i { width: 34%; aspect-ratio: 4 / 5; } .demo--sol-month .smn-piece--banner i { width: 76%; aspect-ratio: 5 / 1.6; } .demo--sol-month .smn-video { display: grid; gap: 0.35rem; align-content: start; } .demo--sol-month .smn-video__cells { display: grid; grid-template-columns: repeat(4, auto); gap: 3px; padding: 4px; border-radius: 7px; background: var(--ss-well); min-height: clamp(48px, 15cqw, 70px); align-content: start; } .demo--sol-month .smn-vid { width: clamp(9px, 2.9cqw, 13px); aspect-ratio: 9 / 16; border-radius: 2px; background: var(--ss-accent); opacity: 0; transform: translateY(-6px) scale(0.6); transition: opacity 0.28s var(--ease-out) var(--ss-d, 0ms), transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) var(--ss-d, 0ms); } .demo--sol-month .smn-vid.is-on { opacity: 1; transform: none; } .demo--sol-month .smn-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.6rem; align-items: center; } /* ============================================================================ 12 · TELEFONO (<=720): el slot pasa a ancho completo y la hoja lo llena ========================================================================== */ @media (max-width: 720px) { .demo--sol { min-height: 380px; } } /* ============================================================================ 13 · ESTADO COMPUESTO (?static y reduced-motion) El motor congela transiciones con .is-instant y ejecuta todo el guion de golpe; aqui solo se garantiza que nada quede a medio camino y que lo que sale en la escena viva (un chip reemplazado, dos tomas descartadas) siga a la vista impreso, porque el estado final es el entregable. ========================================================================== */ .demo--sol.is-instant .sol-line, .demo--sol.is-instant .sld-field.is-on i { transform: none; } .demo--sol.is-instant .ss-check.is-on svg, .demo--sol.is-instant .ss-x.is-on svg, .demo--sol.is-instant .smk-mono.is-on svg path, .demo--sol.is-instant .sun-branches.is-on path, .demo--sol.is-instant .sbd-ring.is-on .sbd-ring__fill { stroke-dashoffset: 0; } .demo--sol.is-instant .scp-frame.is-graded::before { clip-path: inset(0 0 0 0); } .demo--sol.is-instant .scp-head.is-playing i { transform: none; } @media (prefers-reduced-motion: reduce) { .demo--sol .sol-in, .demo--sol .sol-line, .demo--sol .sol-stamp, .demo--sol .sol-foot { transition: none; } }