/* ========================================================================== Thinkhub — landings de submarca (thinkcore / thinkcloud / thinksmart) Portadas del paquete del diseñador. Las tres comparten estructura: hero → beneficios → pilares → visión. Una sola hoja para las tres. El ritmo de fondos sale del paquete y es el que hace que la página se lea como corresponde: papel → papel → BLANCO → oscuro. El bloque de visión empalma con el footer, que también es oscuro, así que la página cierra en un solo bloque y no con un sándwich claro entre dos oscuros. Cada marca tiene su acento. Se declara una vez por página en el y de ahí lo toman el label, los números y las letras de los pilares: · thinkcore naranja · thinkcloud violeta · thinksmart violeta profundo `--brand-on-dark` es el mismo acento aclarado, para cuando va sobre el oscuro del cierre: el naranja pleno y el violeta profundo no tienen contraste suficiente contra #212224. ========================================================================== */ .page-marca { background: var(--c-light); color: var(--c-dark); } .page-marca--core { --brand: var(--c-orange); --brand-on-dark: var(--c-border-hi); } .page-marca--cloud { --brand: var(--c-violet); --brand-on-dark: var(--c-violet); } .page-marca--smart { --brand: var(--c-violet-deep); --brand-on-dark: var(--c-violet); } /* --- Hero ----------------------------------------------------------------- */ .marca-hero { position: relative; overflow: hidden; padding-block: var(--sp-100) var(--sp-120); padding-top: calc(var(--navbar-h) + var(--sp-64)); } /* Trama de puntos del paquete: una grilla de 9px con un punto de 1.6px, que se apaga sola con una máscara radial. Es lo único decorativo del hero. */ .marca-hero__halftone { position: absolute; z-index: 0; right: -80px; top: -40px; width: 480px; height: 400px; background-image: radial-gradient(var(--brand) 1.6px, transparent 1.7px); background-size: 9px 9px; opacity: 0.9; pointer-events: none; -webkit-mask-image: radial-gradient(circle at 40% 55%, #000 38%, transparent 70%); mask-image: radial-gradient(circle at 40% 55%, #000 38%, transparent 70%); } /* El contenido va por encima de la trama. */ .marca-hero .container > * { position: relative; z-index: 1; } .marca-hero__back { display: inline-block; margin-bottom: var(--sp-56); font-size: var(--fs-button); font-weight: var(--fw-medium); color: var(--c-muted); transition: color var(--dur) var(--ease); } .marca-hero__back:hover { color: var(--c-orange); } .marca-hero__logo { display: block; height: var(--sol-logo-h); width: auto; margin-bottom: var(--sp-44); } .marca-hero__title { margin: 0; max-width: 900px; font-size: var(--fs-marca-title); line-height: 1.02; font-weight: var(--fw-bold); letter-spacing: 0; text-wrap: balance; } .marca-hero__lead { margin: var(--sp-36) 0 0; max-width: 720px; font-size: var(--fs-sol-lead); line-height: 1.5; color: var(--c-muted); } /* El nombre de la submarca, siempre en minúscula y con su acento. */ .marca-hero__lead b { font-weight: var(--fw-medium); color: var(--brand); } /* --- Beneficios ----------------------------------------------------------- Grilla con filete entre celdas, como en el paquete: líneas sólo ADENTRO, ninguna por el borde exterior. El paquete lo resuelve con `gap: 1px` y el fondo de la grilla asomando por la ranura. Acá no sirve: las celdas entran con un fundido, y hasta que aparece la última se vería el fondo entero como un bloque gris macizo. Así que cada celda trae su propia línea —arriba y a la izquierda— y se la saca a las que dan contra el borde. La línea entra con su celda y no antes. */ .benef { padding-block: var(--sp-100); border-top: 1px solid var(--c-rule); } .benef__list { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-56); } .benef__item { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-36) var(--sp-32) var(--sp-44); border-top: 1px solid var(--c-rule); border-left: 1px solid var(--c-rule); } .benef__item:nth-child(3n + 1) { border-left: 0; } /* primera columna */ .benef__item:nth-child(-n + 3) { border-top: 0; } /* primera fila */ .benef__icon { width: 32px; height: 32px; margin-bottom: var(--sp-4); } .benef__name { margin: 0; font-size: var(--fs-sol-unit); line-height: 1.25; font-weight: var(--fw-medium); } .benef__text { margin: 0; font-size: var(--fs-sol-item); line-height: 1.5; color: var(--c-muted); } /* --- Pilares -------------------------------------------------------------- No son cards en fila: cada pilar es una FRANJA de ancho completo partida en dos columnas. A la izquierda el número, el nombre y la bajada; a la derecha la lista de capacidades, indexada con letras. Las franjas se separan con un filete arriba, y la última cierra con otro abajo. La columna de la derecha arranca más abajo a propósito: alinea con la bajada y no con el nombre, así el ojo lee primero el título de la franja. */ .pilares { padding-block: var(--sp-120); background: var(--c-white); } .pilares__title { margin: var(--sp-24) 0 var(--sp-72); max-width: 900px; font-size: var(--fs-marca-h2); line-height: 1.1; font-weight: var(--fw-bold); letter-spacing: 0; text-wrap: balance; } .pilar { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-80); padding-block: var(--sp-54); border-top: 1px solid var(--c-rule); } .pilares__list > .pilar:last-child { border-bottom: 1px solid var(--c-rule); } .pilar__num { display: block; margin-bottom: var(--sp-20); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); color: var(--brand); } .pilar__name { margin: 0 0 var(--sp-20); font-size: var(--fs-subtitle); line-height: 1.15; font-weight: var(--fw-medium); } /* thinksmart nombra sus pilares con la marca adelante: «thinksmart Advisory». */ .pilar__name b { font-weight: var(--fw-medium); color: var(--brand); } .pilar__text { margin: 0; font-size: var(--fs-sol-item); line-height: 1.55; color: var(--c-muted); } /* «Para quién» — sólo thinksmart lo trae. */ .pilar__who { margin: var(--sp-20) 0 0; font-size: var(--fs-sol-item); line-height: 1.55; color: var(--c-muted); } .pilar__who b { font-weight: var(--fw-medium); color: var(--c-dark); } .pilar__items { display: flex; flex-direction: column; gap: var(--sp-20); padding-top: var(--sp-44); } .pilar__item { display: flex; gap: var(--sp-16); } .pilar__key { flex: 0 0 auto; font-size: var(--fs-caption); line-height: 1.5; font-weight: var(--fw-medium); color: var(--brand); } .pilar__cap { font-size: var(--fs-sol-item); line-height: 1.5; color: var(--c-dark); } /* --- Visión (cierre) ------------------------------------------------------ Bloque oscuro que empalma con el footer. La declaración es la misma en las tres landings; lo único que cambia es el texto del CTA. */ .marca-cierre { padding-block: var(--sp-120); background: var(--c-dark); color: var(--c-white); } .marca-cierre .container { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-54); } .marca-cierre__text { margin: 0; max-width: 1100px; font-size: var(--fs-marca-h2); line-height: 1.35; font-weight: var(--fw-regular); letter-spacing: 0; text-wrap: pretty; } .marca-cierre__text b { font-weight: var(--fw-regular); color: var(--brand-on-dark); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1100px) { /* El filete se rehace para dos columnas: primero se devuelven todas las líneas —si no, las reglas de tres columnas siguen ganando por especificidad, que las media queries no alteran— y recién después se sacan las del borde de la grilla nueva. */ .benef__list { grid-template-columns: repeat(2, 1fr); } .benef__list .benef__item { border-top: 1px solid var(--c-rule); border-left: 1px solid var(--c-rule); } .benef__item:nth-child(2n + 1) { border-left: 0; } .benef__item:nth-child(-n + 2) { border-top: 0; } /* Las franjas pasan a una columna: la lista de capacidades queda debajo de la bajada y pierde el desfase, que sin dos columnas no significa nada. */ .pilar { grid-template-columns: 1fr; gap: var(--sp-36); } .pilar__items { padding-top: 0; } .marca-hero__halftone { width: 340px; height: 300px; right: -60px; } } @media (max-width: 640px) { .benef__list { grid-template-columns: 1fr; } .benef__list .benef__item { border-left: 0; border-top: 1px solid var(--c-rule); } .benef__item:first-child { border-top: 0; } .marca-hero__back { margin-bottom: var(--sp-36); } .marca-hero__halftone { display: none; } }