/* ============================================================================ SPICA STUDIO · V6 · css/solution.css · PLANTILLA ESTANDAR DE HOJA DE SOLUCION r14, 1-sep-2026. Hoja compartida por 1.1, 1.2, 1.3 y 3.1. Carga despues de rest.css y antes de responsive.css (PLAN-CONSOLIDADO-R14 2.4, CROSS-UXUI H10). El lenguaje es LA HOJA con ventanas de app: papel y bandas del acento dueno, y las escenas "app viva" del Home en los slots de demo (SPEC-UXUI-R14 6.1). Ningun token se redefine: las variables --sol-* viven en y las fijan los dos data-specialty. Los -vivid SOLO en las dos bandas a sangre (S0 y S5) y en el titular gigante de la cortina, que ya lo pone css/rest.css. Acentos: growth = violeta (1.1, 1.2, 1.3) · strategy = ambar (3.1). Cero pines, una cortina (js/rest-curtain.js sobre .sol-rest[data-curtain]). ========================================================================== */ /* ============================================================================ 0 · VARIABLES POR SPECIALTY (SPEC-UXUI-R14 6.1, tabla) Texto sobre --sol-band: papel en growth (7.31:1), TINTA en strategy (6.41:1). Los vivid caen a su base si tokens.css todavia no los trae (paso 0 del Home). ========================================================================== */ [data-specialty="growth"] { --sol-accent: var(--violet); --sol-accent-text: var(--violet); --sol-band: var(--violet-vivid, var(--violet)); --sol-surface: var(--lavender-light); --sol-on-band: var(--paper); /* r14 correccion SUP-SOL P1: papel al 0,8 sobre violet-vivid = 5,10:1 (al 0,74 daba 4,55) */ --sol-on-band-soft: rgba(246, 245, 241, 0.8); --sol-on-band-line: rgba(246, 245, 241, 0.45); --sol-step-bg: var(--violet); --sol-step-fg: var(--paper); --sol-after-bg: var(--violet); --sol-after-fg: var(--paper); /* r14 correccion SUP-SOL pase 2 P2-2: la etiqueta mono de la tarjeta After (11,5px) al 0,8 daba 4,15:1 sobre --violet; al 0,9 da 4,80:1 (AA) */ --sol-after-soft: rgba(246, 245, 241, 0.9); --sol-after-line: rgba(246, 245, 241, 0.22); } [data-specialty="strategy"] { --sol-accent: var(--amber); --sol-accent-text: var(--amber-text); --sol-band: var(--amber-vivid, var(--amber)); --sol-surface: var(--amber-light); --sol-on-band: var(--ink); /* r14 correccion SUP-SOL P1: tinta al 0,9 sobre amber-vivid = 5,69:1 (al 0,74 daba 4,33, bajo AA y contra la regla dura de SPEC-UXUI 6.1). Lo usan el kicker y el sub del hero, el lead de Start y los numeros mono de los pasos. */ --sol-on-band-soft: rgba(17, 17, 16, 0.9); --sol-on-band-line: rgba(17, 17, 16, 0.45); /* etiqueta de paso: --amber-text con papel (5.0:1), regla dura de 6.1 */ --sol-step-bg: var(--amber-text); --sol-step-fg: var(--paper); --sol-after-bg: var(--amber); --sol-after-fg: var(--ink); /* r14 correccion SUP-SOL pase 2 P2-2: tinta al 0,78 sobre --amber daba 4,47:1; al 0,9 da 5,40:1 (AA en texto chico) */ --sol-after-soft: rgba(17, 17, 16, 0.9); --sol-after-line: rgba(17, 17, 16, 0.2); } /* kickers sobre papel toman el acento dueno (en 3.1, --amber-text: AA) */ .sol-page .kicker .kicker__num { color: var(--sol-accent-text); } /* remedio C35 sin media query: todo hijo de grilla que pueda contener una escena tiene que poder bajar de su min-content */ .sol-hero__grid > *, .sol-rows > *, .sol-row > *, .sol-start__grid > *, .sol-ba__grid > *, .sol-new__grid > *, .sol-models__grid > *, .sol-rest__links > * { min-width: 0; } /* ============================================================================ 1 · BANDAS DEL ACENTO (S0 hero y S5 start): vivid a sangre, texto --sol-on-band ========================================================================== */ .sol-band { background: var(--sol-band); color: var(--sol-on-band); } .sol-band .kicker { color: var(--sol-on-band-soft); } .sol-band .kicker .kicker__num { color: var(--sol-on-band); } .sol-band .lead { color: var(--sol-on-band-soft); } .sol-band .h2, .sol-band .display { color: var(--sol-on-band); } /* foco visible sobre la banda: el color de texto de la banda, offset interior */ .sol-band :focus-visible { outline-color: var(--sol-on-band); } /* el boton primario (tinta + papel) se lee sobre las dos bandas; en strategy la tinta sobre ambar vivid es la misma pareja que el texto */ .sol-band .btn--primary::before, .sol-band .btn--primary::after { background: var(--sol-accent); } [data-specialty="strategy"] .sol-band .btn--primary::before, [data-specialty="strategy"] .sol-band .btn--primary::after { background: var(--amber-text); } /* ============================================================================ 2 · S0 · HERO · grid 7fr 5fr, tres sellos apilados a la derecha (CROSS-UXUI H5) ========================================================================== */ .sol-hero { padding: clamp(8.5rem, 20vh, 12rem) 0 var(--rhythm-half); } .sol-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; } .sol-hero__copy { display: grid; justify-items: start; gap: 1.2rem; } .sol-hero__copy > * { max-width: 54rem; } /* el h1 de dos lineas ("Buyers, before they" / "Look serious before") tiene que caber en el 7fr a 1440 (714px): el display de la casa (86px) lo parte en tres. Medido: 19 caracteres de Archivo 800 ocupan 9,5em; 70px a 1440, 62px a 1200. */ .sol-hero__title { font-size: clamp(2rem, 1.2rem + 3.55vw, 4.5rem); /* 2rem en telefono: las dos lineas caben en 335px */ line-height: 0.95; text-wrap: wrap; } .sol-hero__lead { max-width: 52ch; } .sol-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.4rem; } .sol-hero__chips { display: grid; gap: 0.6rem; justify-items: start; align-content: end; padding-bottom: 0.35rem; } .sol-hero__chips .chip { border-color: var(--sol-on-band-line); color: var(--sol-on-band); background: transparent; padding: 0.5rem 0.95rem; font-size: 0.72rem; white-space: nowrap; } /* ============================================================================ 3 · S0b · FOTO EN EL SHELL + 4 BENEFICIOS + ESCENA FLOTANTE La foto va contenida en el shell (radio 22), no a sangre: la tarjeta de beneficios comparte margen con el texto. 16:9 a 1440 (1296 x 729). ========================================================================== */ .sol-photo { padding-bottom: var(--rhythm-half); } .sol-photo__frame { position: relative; aspect-ratio: 16 / 9; max-height: 78svh; width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); /* superficie mientras la foto no existe o carga */ isolation: isolate; } /* placeholder de superficie mientras Medios entrega la foto (misma caja, sin texto): el cableado lo cambia por el comentado en el HTML */ .sol-photo__ph { background: var(--mist); } .sol-photo__frame picture, .sol-photo__frame img, .sol-photo__frame .sol-photo__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; /* el sujeto va a la izquierda en las cuatro (CROSS-UXUI H9) */ } /* velo de tinta abajo para que la tarjeta y la escena asienten sobre cualquier foto */ .sol-photo__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(17, 17, 16, 0.22)); pointer-events: none; z-index: 1; } .sol-benefits { position: absolute; left: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem); z-index: 2; width: min(23rem, calc(100% - 2 * clamp(1rem, 2.4vw, 2rem))); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 1.05rem 1.2rem; display: grid; gap: 0.7rem; } .sol-benefits li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.98rem; font-weight: 520; line-height: 1.35; color: var(--ink); } .sol-benefits .chip { vertical-align: middle; margin: 0 0.1rem; } /* entrada escalonada de los beneficios, solo con JS y motion */ .js .sol-benefits li { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-out); transition-delay: calc(0.12s + var(--i, 0) * 0.11s); } .js .sol-benefits.is-in li { opacity: 1; transform: none; } .sol-benefits li:nth-child(2) { --i: 1; } .sol-benefits li:nth-child(3) { --i: 2; } .sol-benefits li:nth-child(4) { --i: 3; } /* iconos check / cruz: SVG con currentColor, nunca caracteres */ .sol-check, .sol-cross { width: 1.1em; height: 1.1em; flex: none; margin-top: 0.12em; } .sol-check { color: var(--sol-accent-text); } .sol-cross { color: var(--ink-faint); } /* la escena flotante: tarjeta papel raised con el look de dm-note (borde, sombra, radio 14) de 340 x 420, esquina inferior derecha de la foto. La escena se compone a su ancho natural y se ESCALA en el propio .demo (nunca en un ancestro, para que fakeCursor mida bien): --s la fija el data-scale del montaje (js/solution.js lo copia a --s). */ .sol-float { position: absolute; right: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem); z-index: 2; width: 340px; height: 420px; background: var(--paper-raised); border: 1px solid var(--line); border-left: 3px solid var(--sol-accent); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; display: grid; place-items: center; } .sol-float .demo { --s: 1; /* la escena se compone a 340/--s y se centra por absoluto: un hijo mas ancho que su celda no lo centra place-items (Chrome lo alinea al inicio) */ position: absolute; left: 50%; top: 50%; width: calc(340px / var(--s)); min-height: 0; transform: translate(-50%, -50%) scale(var(--s)); transform-origin: 50% 50%; padding: 0; } .sol-float .demo[data-scale="0.60"], .sol-float .demo[data-scale="0.6"] { --s: 0.6; } .sol-float .demo[data-scale="0.72"] { --s: 0.72; } .sol-float .demo[data-scale="0.85"] { --s: 0.85; } /* la hoja svc dentro del flotante llena su celda */ .sol-float .demo--svc .svc-sheet { width: 100%; } /* ============================================================================ 4 · S0c · LOS DOS MODELOS (solo 1.1) · papel, dos columnas de texto ========================================================================== */ .sol-models { padding: 0 0 var(--rhythm-half); } .sol-models__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } .sol-model { border: 1px solid var(--line); border-top: 3px solid var(--sol-accent); border-radius: var(--radius-md); background: var(--paper-raised); padding: 1.4rem 1.5rem 1.5rem; display: grid; gap: 0.55rem; align-content: start; } .sol-model__tag { font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 560; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--sol-accent-text); } .sol-model__line { font-size: 1.02rem; color: var(--ink); max-width: 44ch; } .sol-model__channels { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; line-height: 1.9; color: var(--ink-soft); } .sol-model__channels .chip { font-size: 0.62rem; padding: 0.18rem 0.55rem; vertical-align: middle; } /* ============================================================================ 5 · S1 · PARTNERS · la tarjeta .footer__partners del Home, sobre papel ========================================================================== */ .sol-partners { padding: 0 0 var(--rhythm-half); } .sol-partners .footer__partners { background: var(--paper-raised); border: 1px solid var(--line); margin-bottom: 0; } /* r14 pasada de ritmo (REVISION-VISUAL 2.3): en el footer la tarjeta es una linea de servicio y los logos van pequenos y a la derecha, empujados por el `margin-left: auto` del ul. Dentro de la hoja la tarjeta ES una banda de prueba a ancho de shell, y con 35px de alto pegados al borde derecho dejaba media pastilla vacia y tres de los siete no se identificaban. Aqui, y solo aqui, el ul ocupa el ancho que le queda y reparte, y el logo dobla su alto (35 a 66px medidos a 1440). El footer del Home no se toca: es de r2. */ .sol-partners .footer__partners ul { margin-left: 0; flex: 1 1 auto; justify-content: space-between; gap: clamp(1rem, 2vw, 2rem); } .sol-partners .footer__partners img { height: clamp(2.6rem, 4.6vw, 4.2rem); } /* ============================================================================ 6 · S2 · TITULAR DE SECCION · papel ========================================================================== */ .sol-what { padding: var(--rhythm-half) 0 calc(var(--rhythm-half) * 0.9); } .sol-what .section-head { margin-bottom: 0; } /* ============================================================================ 7 · S3 · CUATRO FILAS DE BENEFICIO · --sol-surface a sangre Filas alternadas 5fr 7fr / 7fr 5fr, min-height 32rem, slot de 720 x 460 con la escena centrada (SPEC-UXUI-R14 6.1 S3). ========================================================================== */ .sol-benefits-band { background: var(--sol-surface); padding: var(--rhythm-half) 0 var(--rhythm); } .sol-rows { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } .sol-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; /* r14 pasada de ritmo: la fila pedia 32rem (512px) cuando la escena mas alta mide 420, asi que cada fila dejaba 92px de lavanda vacia y entre dos filas se veian 184px seguidos (REVISION-VISUAL 2.3). La caja se ajusta al contenido: 27rem es la escena mas un respiro, y la copy sigue centrada. */ min-height: 27rem; } .sol-row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .sol-row--flip .sol-row__copy { order: 2; } .sol-row--flip .sol-slot { order: 1; } .sol-row__copy { display: grid; gap: 1rem; justify-items: start; max-width: 34rem; } .sol-row__copy p { color: var(--ink-soft); max-width: 44ch; } /* etiqueta de paso " · N/4": mono sobre el acento (la barra del ref) */ .sol-row__step { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 560; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--sol-step-fg) !important; background: var(--sol-step-bg); border-radius: var(--radius-pill); padding: 0.42rem 0.85rem; } .sol-row__step .chip { font-size: 0.6rem; padding: 0.14rem 0.5rem; } /* nota mono bajo la fila (call center, frontera, paginas) */ .sol-row__note { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.03em; line-height: 1.75; color: var(--ink-faint) !important; border-top: 1px solid var(--line); padding-top: 0.8rem; max-width: 48ch; } .sol-row__note .chip { font-size: 0.6rem; padding: 0.14rem 0.5rem; vertical-align: middle; } .sol-slot { display: grid; place-items: center; width: 100%; max-width: 720px; /* la escena mas alta de las hojas mide 420: por encima de eso el hueco es lavanda vacia, no aire (r14 pasada de ritmo) */ min-height: 420px; justify-self: center; } .sol-slot .demo { width: 100%; } /* las hojas svc altas (480 a 560 compuestas) caben a 0,85 (UX 10.12) */ .sol-slot .demo[data-fit="tight"] { transform: scale(0.85); transform-origin: center; } /* ============================================================================ 8 · S4 · ANTES / DESPUES · papel, dos tarjetas quietas + CTA centrado ========================================================================== */ .sol-ba { padding: var(--rhythm) 0; } .sol-ba__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } .sol-ba__card { border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); min-height: 22rem; display: grid; gap: 1.1rem; align-content: start; } .sol-ba__card--before { background: var(--paper-raised); border: 1px solid var(--line); color: var(--ink); } .sol-ba__card--after { background: var(--sol-after-bg); color: var(--sol-after-fg); } .sol-ba__tag { font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 560; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-faint); } .sol-ba__card--after .sol-ba__tag { color: var(--sol-after-soft); } .sol-ba__list { display: grid; border-top: 1px solid var(--line); margin-top: 0.2rem; } .sol-ba__card--after .sol-ba__list { border-top-color: var(--sol-after-line); } .sol-ba__list li { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; line-height: 1.5; } .sol-ba__card--after .sol-ba__list li { border-bottom-color: var(--sol-after-line); } .sol-ba__card--after .sol-check { color: var(--sol-after-fg); } .sol-ba__cta { display: flex; justify-content: center; margin-top: calc(var(--rhythm-half) * 0.75); } /* ============================================================================ 9 · S5 · START TODAY · banda vivid, pasos mono a la izquierda, escena a la derecha ========================================================================== */ .sol-start { padding: var(--rhythm) 0; } .sol-start__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .sol-start__copy { display: grid; gap: 1.2rem; justify-items: start; } .sol-start__lead { max-width: 40ch; } .sol-start__steps { display: grid; gap: 0; border-top: 1px solid var(--sol-on-band-line); max-width: 40rem; width: 100%; margin-top: 0.4rem; } .sol-start__steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.85rem 0; border-bottom: 1px solid var(--sol-on-band-line); font-size: 0.98rem; line-height: 1.5; color: var(--sol-on-band); } .sol-start__steps b { font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 560; letter-spacing: var(--ls-mono); color: var(--sol-on-band-soft); padding-top: 0.3em; } .sol-start__actions { margin-top: 0.4rem; } .sol-start__scene { justify-self: center; width: min(340px, 100%); min-height: 380px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: grid; place-items: center; padding: 1rem; color: var(--ink); } .sol-start__scene .demo { width: 100%; min-height: 0; } /* ============================================================================ 10 · S6 · NEW HERE · papel, tres tarjetas con mini ilustracion vectorial quieta ========================================================================== */ .sol-new { padding: var(--rhythm) 0; } .sol-new .section-head { margin-bottom: calc(var(--rhythm) * 0.25); } .sol-new__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } .sol-new__card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem 1.8rem 1.7rem; display: grid; gap: 0.75rem; align-content: start; transition: transform var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out); } .sol-new__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); } .sol-new__card > * { min-width: 0; } .sol-new__card .h3 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); } .sol-new__card p { color: var(--ink-soft); font-size: 0.98rem; } .sol-new__ico { width: 3.4rem; height: 3.4rem; color: var(--sol-accent-text); margin-bottom: 0.5rem; } .sol-new__cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.9rem; margin-top: calc(var(--rhythm-half) * 0.75); } /* ============================================================================ 11 · S7 · DESCANSO CON CORTINA + TRES CROSS-LINKS La mecanica y los tres estados viven en css/rest.css (bloque CURTAIN). Aqui solo lo propio de la hoja: el reposo del titular al 36 % (--rest-land-y, lo lee rest-curtain.js), las tres tarjetas del 52 % al 88 % del stage con motion y debajo de la foto en los demas estados, y el color del gigante por acento. ========================================================================== */ .sol-rest { --rest-land-y: 0.36; /* la cola de la cortina (cabecera de css/rest.css). Aqui se cede menos que en el Home porque bajo el titular viven las tres tarjetas de cross-link: con 20svh el hueco entre el pie de las tarjetas y el titular del FAQ pasa de 466px a 250px medidos a 1440x900, y el FAQ ya entra en el mismo cuadro */ --rest-tail-cut: 20svh; } /* placeholder de superficie de la cortina mientras Medios entrega rest.webp */ .sol-rest .rest__ph { position: absolute; inset: 0; background: var(--mist); } /* el gigante en el vivid dueno de la hoja (3.1 = ambar sobre cielo oscuro, D13): contrato de css/rest.css, que mezcla --rest-giant-color con la tinta */ [data-specialty="strategy"] .sol-rest { --rest-giant-color: var(--amber-vivid, var(--amber)); } /* --- con la cortina montada (escritorio, motion): tarjetas dentro del stage --- */ .sol-rest.rest--pin .sol-rest__links { position: absolute; left: 0; right: 0; top: 52%; bottom: 12%; z-index: 4; width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-content: start; pointer-events: none; } .sol-rest.rest--pin .sol-link { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out); pointer-events: none; } .sol-rest.rest--pin.is-landed .sol-link { opacity: 1; transform: none; pointer-events: auto; } .sol-rest.rest--pin.is-landed .sol-link:nth-child(2) { transition-delay: 0.12s; } .sol-rest.rest--pin.is-landed .sol-link:nth-child(3) { transition-delay: 0.24s; } /* --- sin cortina (?static, reduced-motion, sin JS, < 1081): foto con el titular encima y las tarjetas debajo, en flujo. Pisa la grilla centrada de rest.css. --- */ .sol-rest:not(.rest--pin) .rest__stage { height: auto; max-height: none; aspect-ratio: auto; /* rest.css le da 4:5 al stage en tactil; aqui manda la foto */ overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; place-items: stretch; } .sol-rest:not(.rest--pin) .rest__photo { position: relative; grid-area: 1 / 1; inset: auto; /* alto EXPLICITO, no aspect-ratio: como hijo de grilla estirado la caja perdia la proporcion y se quedaba con el alto del titular (76px) */ height: min(100svh, 46rem); width: 100%; overflow: hidden; background: var(--mist); } .sol-rest:not(.rest--pin) .rest__photo img, .sol-rest:not(.rest--pin) .rest__photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; } .sol-rest:not(.rest--pin) .rest__scrim { opacity: 1; } .sol-rest:not(.rest--pin) .rest__title { grid-area: 1 / 1; align-self: end; justify-self: start; z-index: 3; padding: 0 var(--gutter) var(--gutter); text-align: left; color: var(--paper); font-size: var(--text-h2); transform: none; } .sol-rest:not(.rest--pin) .sol-rest__links { grid-area: 2 / 1; width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; padding: var(--rhythm-half) 0 0; } /* --- la tarjeta de cross-link: papel raised, nombre + una linea + flecha --- */ .sol-link { display: grid; gap: 0.55rem; align-content: start; background: var(--paper-raised); border: 1px solid var(--line); border-top: 3px solid var(--sol-accent); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 1.3rem 1.4rem 1.2rem; color: var(--ink); min-height: 44px; transition: transform var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out); } .sol-link:hover { transform: translateY(-4px); } /* r14 correccion SUP-SOL P3-4: la tarjeta lleva el acento de la specialty DESTINO, no el de la hoja (un acento por specialty): growth violeta, systems teal, strategy ambar (texto chico en --amber-text, AA). */ .sol-link--growth { border-top-color: var(--violet); } .sol-link--systems { border-top-color: var(--teal); } .sol-link--strategy { border-top-color: var(--amber); } .sol-link__num { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.012em; line-height: 1.15; } .sol-link__line { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; } .sol-link__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 560; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--sol-accent-text); } .sol-link--growth .sol-link__cta { color: var(--violet); } .sol-link--systems .sol-link__cta { color: var(--teal); } .sol-link--strategy .sol-link__cta { color: var(--amber-text); } .sol-link__cta svg { width: 0.95em; height: 0.95em; transition: transform var(--dur-state) var(--ease); } .sol-link:hover .sol-link__cta svg { transform: translateX(3px); } /* ============================================================================ 12 · S8 · FAQ · .faq del Home: aqui viene tras la cortina y necesita aire arriba ========================================================================== */ .sol-faq { padding-top: var(--rhythm); } /* ============================================================================ 13 · RESPONSIVE (SPEC-UXUI-R14 6.1). Cortes de la casa: 1080 · 767 · 720 · 430. ========================================================================== */ @media (max-width: 1080px) { .sol-hero { padding-top: clamp(7rem, 16vh, 9rem); } .sol-hero__grid { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; } .sol-hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0; } .sol-hero__chips .chip { white-space: normal; } /* la foto pasa a 3:4 y la tarjeta y la escena van DEBAJO, a ancho de shell */ .sol-photo__frame { aspect-ratio: auto; max-height: none; background: none; overflow: visible; border-radius: 0; display: grid; gap: 1.2rem; } .sol-photo__frame picture, .sol-photo__frame .sol-photo__ph { position: relative; inset: auto; display: block; aspect-ratio: 3 / 4; max-height: 78svh; height: auto; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); } .sol-photo__frame::after { display: none; } .sol-benefits { position: static; width: 100%; box-shadow: none; } .sol-float { position: static; width: 100%; height: auto; min-height: 420px; padding: 1rem 0.6rem; box-shadow: none; /* r14 correccion SUP-SOL pase 2 P3-8: en flujo, cuando la escena del hero monta tarde (IO) el navegador la elegia como nodo de scroll anchoring y movia la pagina hacia arriba tras un salto a #benefits; fuera de la candidatura, el ancla se queda donde aterrizo */ overflow-anchor: none; } .sol-float .demo { --s: 1 !important; position: static; width: 100%; transform: none; padding: 0.4rem 0; } .sol-row, .sol-row--flip { grid-template-columns: 1fr; gap: 1.6rem; min-height: 0; } .sol-row--flip .sol-row__copy { order: 1; } .sol-row--flip .sol-slot { order: 2; } .sol-row__copy { max-width: none; } .sol-slot { min-height: 380px; max-width: 30rem; } .sol-slot .demo[data-fit="tight"] { transform: none; } .sol-ba__grid { grid-template-columns: 1fr; } .sol-ba__card { min-height: 0; } .sol-start__grid { grid-template-columns: 1fr; gap: 2rem; } .sol-start__scene { justify-self: start; } .sol-new__grid { gap: 1rem; } .sol-new__card { padding: 1.4rem 1.3rem 1.3rem; } .sol-rest:not(.rest--pin) .sol-rest__links { grid-template-columns: 1fr; gap: 0.9rem; } /* la cortina en tactil: foto 4:5 (max 640 de alto) con el titular encima */ .sol-rest:not(.rest--pin) .rest__photo { height: min(640px, 125vw); } /* r14 correccion SUP-SOL P3-7: en telefono el titular va al display de la casa, el mismo tamano de la cortina del Home (css/rest.css, PLAN 1.A8); en escritorio sin cortina (?static, reduced-motion) sigue en --text-h2, que es el tamano en que aterriza (el gigante ES el h2, PLAN 1.D12). */ .sol-rest:not(.rest--pin) .rest__title { font-size: var(--text-display); } } @media (max-width: 767px) { .sol-photo__frame picture, .sol-photo__frame .sol-photo__ph { aspect-ratio: 4 / 5; max-height: 640px; } .sol-models__grid { grid-template-columns: 1fr; } .sol-new__grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .sol-hero { padding-top: clamp(6.5rem, 15vh, 8rem); } .sol-benefits { padding: 0.95rem 1rem; } .sol-benefits li { font-size: 0.92rem; } .sol-slot { min-height: 380px; } .sol-ba__card { padding: 1.4rem 1.2rem; } .sol-start__steps li { grid-template-columns: 2rem minmax(0, 1fr); font-size: 0.94rem; } .sol-link { padding: 1.1rem 1.2rem 1rem; } } @media (max-width: 430px) { .sol-hero__chips .chip { font-size: 0.68rem; padding: 0.42rem 0.75rem; } .sol-row__step { font-size: 0.68rem; } } /* ---- teclado y tactil: targets de 44 y foco visible en las tarjetas ---------- */ .sol-link:focus-visible { outline-offset: -3px; } @media (max-width: 1080px), (hover: none) and (pointer: coarse) and (max-width: 1400px) { .sol-link__cta { min-height: 44px; } .sol-row__step, .sol-model__tag, .sol-ba__tag, .sol-model__channels, .sol-row__note, .sol-link__cta { font-size: 0.75rem; } .sol-start__steps b { font-size: 0.75rem; } } /* ---- reduced-motion: nada se mueve, todo compuesto ---------------------------- */ @media (prefers-reduced-motion: reduce) { .js .sol-benefits li { opacity: 1; transform: none; transition: none; } .sol-rest.rest--pin .sol-link { opacity: 1; transform: none; transition: none; pointer-events: auto; } .sol-new__card:hover, .sol-link:hover { transform: none; } } /* ---- impresion: la hoja completa, sin sombras ni bandas caras ------------------ */ @media print { .sol-band { background: none; color: var(--ink); } .sol-float, .sol-slot { break-inside: avoid; } }