/* =========================================================================
   SUMBRA — Solution page (Cortinas reference implementation)
   Reuses every Phase 1 token/component. Only defines what's genuinely new:
   Changing Needs, Decision Logic, Possibilities, Materials, Process labels.
   Header/Footer/Hero/Buttons/Project cards/Final CTA are all Phase 1
   components, unmodified.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero — modest measure increase for Solution pages only (their H1s run
   longer than the homepage's). Homepage Hero itself is untouched.
   ------------------------------------------------------------------------- */
.sumbra-sol-hero .sumbra-h1 { max-width: none; line-height: 0.96; font-size: clamp(2.5rem, 1.8rem + 3vw, 4.25rem); } /* 5.9.16: long solution headlines; keeps the CTA above the fold */
.sumbra-sol-hero .sumbra-link-arrow { padding: 13px 0; }

/* -------------------------------------------------------------------------
   Changing Needs
   ------------------------------------------------------------------------- */
.sumbra-sol-needs { padding-block: 42px; }
.sumbra-sol-needs__grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 40px;
	align-items: end;
}
.sumbra-sol-needs__copy .sumbra-h2 {
	max-width: 16ch;
	font-size: clamp(1.9rem, 1.55rem + 2vw, 3.1rem);
	margin-bottom: 16px;
}
.sumbra-sol-needs__eyebrow { margin-bottom: var(--sumbra-space-sm); }
.sumbra-sol-needs__media { max-width: 370px; justify-self: end; }
.sumbra-sol-needs__media .sumbra-media__img,
.sumbra-sol-needs__media .sumbra-placeholder,
.sumbra-sol-needs__media .sumbra-temp-photo { aspect-ratio: 4/5; }
@media (max-width: 900px) {
	.sumbra-sol-needs__grid { grid-template-columns: 1fr; align-items: start; }
	.sumbra-sol-needs__media { max-width: 240px; justify-self: start; }
}

/* -------------------------------------------------------------------------
   Decision Logic + Possibilities — one continuous section. The statement
   introduces the responses directly below it (moderate gap, not a full
   section break), and only the first Possibility gets the large
   half-width treatment — the rest form a compact supporting grid instead
   of repeating the same spacious row five times. This is what actually
   compresses the section: smaller images for supporting items, not
   tighter spacing around oversized ones.
   ------------------------------------------------------------------------- */
.sumbra-sol-decision__inner { max-width: 62ch; margin-bottom: 24px; }

.sumbra-sol-possibility {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--sumbra-space-xl);
	align-items: center;
	padding-bottom: var(--sumbra-space-lg);
	border-bottom: 1px solid var(--sumbra-lino);
	margin-bottom: var(--sumbra-space-lg);
}
.sumbra-sol-possibility__media .sumbra-media__img,
.sumbra-sol-possibility__media .sumbra-placeholder,
.sumbra-sol-possibility__media .sumbra-temp-photo { aspect-ratio: 16/10; }
.sumbra-sol-possibility__title {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-size: clamp(1.8rem, 1.5rem + 1vw, 2.5rem);
	margin: 0 0 var(--sumbra-space-xs);
	color: var(--sumbra-carbon);
}
.sumbra-sol-possibility .sumbra-body { max-width: 46ch; margin-bottom: 0; }

/* Compact grid for the remaining possibilities — small image, title
   directly beneath it (tight proximity), short copy. Auto-fits 2–4
   columns depending on viewport and item count, so 3, 4 or 6 remaining
   items all resolve cleanly without an orphaned last row at typical
   desktop widths. */
/* Possibilities grid: explicit column counts at each range (not auto-fit,
   which silently drops columns when gaps don't leave room — see the
   Process fix below for why that matters). Every card keeps the SAME
   internal vertical layout (image full-width → title → body) at every
   width; only the number of columns changes. */
.sumbra-sol-possibilities__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sumbra-space-lg) var(--sumbra-space-md);
}
.sumbra-sol-possibility-compact__media .sumbra-media__img,
.sumbra-sol-possibility-compact__media .sumbra-placeholder,
.sumbra-sol-possibility-compact__media .sumbra-temp-photo { aspect-ratio: 4/3; }
.sumbra-sol-possibility-compact__title {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.2;
	margin: var(--sumbra-space-xs) 0 6px;
	color: var(--sumbra-carbon);
}
.sumbra-sol-possibility-compact__body {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--sumbra-piedra);
	margin: 0;
}

@media (max-width: 900px) {
	.sumbra-sol-decision__inner { margin-bottom: 20px; }
	.sumbra-sol-possibility { grid-template-columns: 1fr; gap: var(--sumbra-space-md); }
	/* Tablet AND mobile both use a 2-column grid — each card fills its
	   full cell width, stacked vertically inside (no nested layout). */
	.sumbra-sol-possibilities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   Real Project Proof — content-count-aware, no reserved geometry for
   absent content:
   1 project  = single wide feature
   2 projects = balanced side-by-side pair (equal weight, matched aspect —
                this is what fixes the tall-dominant/short-secondary gap)
   3 projects = asymmetric dominant + secondary rhythm (homepage pattern)
   ------------------------------------------------------------------------- */
.sumbra-sol-proof__single { max-width: 720px; }
.sumbra-sol-proof__single .sumbra-media__img,
.sumbra-sol-proof__single .sumbra-placeholder { aspect-ratio: 16/9; }

.sumbra-sol-proof__pair {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--sumbra-space-xl);
}
.sumbra-sol-proof__pair .sumbra-media__img,
.sumbra-sol-proof__pair .sumbra-placeholder { aspect-ratio: 4/5; }
.sumbra-sol-proof__pair .sumbra-project-card__title { margin-top: var(--sumbra-space-sm); }
@media (max-width: 700px) {
	.sumbra-sol-proof__pair { grid-template-columns: 1fr; gap: var(--sumbra-space-lg); }
	.sumbra-sol-proof__pair a:nth-child(2) .sumbra-media__img,
	.sumbra-sol-proof__pair a:nth-child(2) .sumbra-placeholder { aspect-ratio: 4/3; }
}

/* -------------------------------------------------------------------------
   Materials — tactile, Carbón interruption (matches the POV treatment
   used on the homepage: a dark held moment, not a generic dark section).
   ------------------------------------------------------------------------- */
.sumbra-sol-proof { padding-top: 32px; padding-bottom: 36px; }
.sumbra-sol-proof .sumbra-section__head { margin-bottom: 32px; }

/* Conversion bridge: a quiet editorial prompt after Project Proof, using
   the existing secondary-action system — not a new CTA component. */
.sumbra-sol-proof__bridge {
	margin-top: var(--sumbra-space-lg);
	padding-top: var(--sumbra-space-md);
	border-top: 1px solid var(--sumbra-lino);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sumbra-space-sm) var(--sumbra-space-md);
}
.sumbra-sol-proof__bridge p { margin: 0; color: var(--sumbra-piedra); max-width: 46ch; }

.sumbra-sol-materials { background-color: var(--sumbra-carbon); margin-top: 22px; }
.sumbra-sol-materials__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 0;
}
.sumbra-sol-materials__media .sumbra-media__img,
.sumbra-sol-materials__media .sumbra-placeholder,
.sumbra-sol-materials__media .sumbra-temp-photo { height: 100%; min-height: 420px; aspect-ratio: auto; }
.sumbra-sol-materials__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 56px var(--sumbra-panel-pad);
}
.sumbra-sol-materials__copy .sumbra-h2 { max-width: 12ch; }
/* Tablet / small-laptop band. Same root cause as the mobile fix below: with
   a temp photo (inline aspect-ratio + min-height) the media track's automatic
   minimum grows to ~560px, which overflowed the page at ~901–951px and
   squeezed the text column to ~300px up to ~1100px. Equal, shrinkable tracks
   restore the designed two halves. Deliberately limited to this band so the
   approved 1440px composition is not altered. */
@media (min-width: 901px) and (max-width: 1100px) {
	.sumbra-sol-materials__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.sumbra-sol-materials__media,
	.sumbra-sol-materials__copy { min-width: 0; overflow-wrap: break-word; }
}
@media (max-width: 900px) {
	/* A bare 1fr track has an automatic minimum of its content's
	   min-content size. The temp photo carries an inline aspect-ratio:4/3
	   and min-height:300px; the spec transfers that minimum height through
	   the ratio into a 400px minimum WIDTH, which blew the track (and the
	   page) out past 320–350px gutters. minmax(0,1fr) lets the track
	   shrink; min-width:0 lets its items follow. Desktop rule above is
	   deliberately untouched. */
	.sumbra-sol-materials__grid { grid-template-columns: minmax(0, 1fr); }
	.sumbra-sol-materials__media,
	.sumbra-sol-materials__copy { min-width: 0; }
	.sumbra-sol-materials__copy { overflow-wrap: break-word; }
	.sumbra-sol-materials__media .sumbra-media__img,
	.sumbra-sol-materials__media .sumbra-placeholder,
	.sumbra-sol-materials__media .sumbra-temp-photo { min-height: 300px; }
}

/* -------------------------------------------------------------------------
   Process — same numbered-list treatment as the homepage, wider measure
   since this section stands alone rather than sharing a panel with POV.
   ------------------------------------------------------------------------- */
.sumbra-sol-process__steps {
	display: grid;
	/* 5.4.5: minmax(0,1fr) lets columns shrink below their content; plain 1fr
	   cannot, so long labels pushed the list past the viewport. */
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--sumbra-space-md) var(--sumbra-space-md);
	max-width: none;
	margin-top: var(--sumbra-space-md);
	/* 5.4.5: this is an <ol>; sumbra.css only resets <ul>, so the browser's
	   default 40px start padding shifted the grid off the content gutter and
	   squeezed its columns (live: 280px list, 117px columns at 320px). */
	padding: 0;
	list-style: none;
}
.sumbra-sol-process__steps li {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	border-bottom: 1px solid var(--sumbra-lino);
	padding-bottom: var(--sumbra-space-sm);
}
.sumbra-sol-process__steps .sumbra-process__num { font-size: 1.85rem; }
.sumbra-sol-process__steps li span:last-child { font-size: 1.05rem; }
.sumbra-sol-process__intro { max-width: 52ch; color: var(--sumbra-piedra); margin: var(--sumbra-space-sm) 0 0; }
@media (max-width: 1100px) and (min-width: 701px) {
	.sumbra-sol-process__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.sumbra-sol-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sumbra-space-md) var(--sumbra-space-sm); }
}

/* -------------------------------------------------------------------------
   Final CTA — scoped to Solution pages only via the .sumbra-solution
   wrapper (the homepage has no such wrapper, so its identical-ID button
   is completely unaffected). Only padding changes; colour/contrast/
   specificity fix stays global and untouched.
   ------------------------------------------------------------------------- */
.sumbra-solution #sumbra-cta-final { padding-left: 34px; padding-right: 34px; }

/* -------------------------------------------------------------------------
   Optional image + text section.
   ------------------------------------------------------------------------- */
.sumbra-sol-image-text__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--sumbra-space-xl);
	align-items: center;
}
.sumbra-sol-image-text__media { aspect-ratio: 4/3; overflow: hidden; }
.sumbra-sol-image-text__media .sumbra-media__img { width: 100%; height: 100%; object-fit: cover; }
.sumbra-sol-image-text__copy .sumbra-body { margin-top: var(--sumbra-space-sm); max-width: 52ch; }
/* 5.9.6: no image -> one column, copy at a readable measure (image-bearing sections untouched). */
.sumbra-sol-image-text--text-only .sumbra-sol-image-text__grid { grid-template-columns: minmax(0, 1fr); }
.sumbra-sol-image-text--text-only .sumbra-sol-image-text__copy { max-width: 68ch; }
.sumbra-sol-image-text--text-only .sumbra-sol-image-text__copy .sumbra-body { max-width: none; }
@media (max-width: 900px) {
	.sumbra-sol-image-text__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Optional FAQ — native <details>, zero JS.
   ------------------------------------------------------------------------- */
.sumbra-sol-faq__list { max-width: 72ch; margin-top: var(--sumbra-space-md); }
.sumbra-sol-faq__item { border-top: 1px solid var(--sumbra-lino); padding: var(--sumbra-space-3xs) 0; }
.sumbra-sol-faq__item:last-child { border-bottom: 1px solid var(--sumbra-lino); }
.sumbra-sol-faq__item summary {
	font-family: var(--sumbra-font-display);
	font-size: 1.2rem;
	cursor: pointer;
	color: var(--sumbra-carbon);
	/* 44px minimum tap target. Padding (not display:flex) keeps the native
	   disclosure marker, which display:flex on <summary> would remove. */
	padding: 10px 0;
	min-height: 44px;
	box-sizing: border-box;
}
.sumbra-sol-faq__item summary:focus-visible { outline: 2px solid var(--sumbra-carbon); outline-offset: 4px; }
.sumbra-sol-faq__item p { margin: var(--sumbra-space-sm) 0 0; color: var(--sumbra-piedra); max-width: 60ch; }

/* Compact product cards are narrow on small phones (~124px at 320px). A long
   product name (e.g. "anticiclónicas") must wrap inside the card, not spill out. */
.sumbra-sol-possibility-compact,
.sumbra-sol-possibility-compact__title,
.sumbra-sol-possibility-compact__body { min-width: 0; overflow-wrap: break-word; }

/* =========================================================================
   5.9.0 — Solution structure components
   Guide (decision list / numbered questions / technical components),
   numbered text checks, six-card balanced grid and page-specific closing.
   All components use existing SUMBRA tokens; nothing here touches other
   page types (scoped by .sumbra-sol-* / .sumbra-solution).
   ========================================================================= */

/* -- Six cards: two balanced rows of three on desktop -------------------- */
.sumbra-sol-possibilities--even .sumbra-sol-possibilities__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sumbra-sol-possibilities--even .sumbra-sol-possibility-compact__media .sumbra-media__img,
.sumbra-sol-possibilities--even .sumbra-sol-possibility-compact__media .sumbra-placeholder,
.sumbra-sol-possibilities--even .sumbra-sol-possibility-compact__media .sumbra-temp-photo { aspect-ratio: 3/2; }
@media (max-width: 900px) {
	.sumbra-sol-possibilities--even .sumbra-sol-possibilities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- Text-only numbered checks (no photography) --------------------------- */
.sumbra-sol-checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sumbra-lino); }
.sumbra-sol-checks__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr);
	column-gap: var(--sumbra-space-md);
	align-items: baseline;
	padding-block: var(--sumbra-space-md);
	border-bottom: 1px solid var(--sumbra-lino);
}
.sumbra-sol-checks__num {
	font-family: var(--sumbra-font-display);
	font-size: 1.5rem;
	color: var(--sumbra-arena);
	line-height: 1;
}
.sumbra-sol-checks__title {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
	line-height: 1.15;
	margin: 0;
	color: var(--sumbra-carbon);
}
.sumbra-sol-checks__body { margin: 0; color: var(--sumbra-piedra); line-height: 1.6; max-width: 62ch; }
@media (max-width: 760px) {
	.sumbra-sol-checks__item { grid-template-columns: 40px minmax(0, 1fr); row-gap: var(--sumbra-space-2xs); padding-block: var(--sumbra-space-sm); }
	.sumbra-sol-checks__title { grid-column: 2; }
	.sumbra-sol-checks__body { grid-column: 2; }
}

/* -- Guide section ---------------------------------------------------------- */
.sumbra-sol-guide { background-color: var(--sumbra-marfil); }
.sumbra-sol-guide__head { max-width: 62ch; margin-bottom: var(--sumbra-space-lg); }
.sumbra-sol-guide__head .sumbra-body { margin-bottom: 0; }
.sumbra-sol-guide__closing {
	font-family: var(--sumbra-font-display);
	font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
	line-height: 1.3;
	color: var(--sumbra-carbon);
	max-width: 46ch;
	margin: var(--sumbra-space-lg) 0 0;
}

/* Decision list: two columns on desktop, stacked labelled rows on mobile
   (a real list in both, so semantics survive the responsive change). */
.sumbra-sol-guide__cols,
.sumbra-sol-guide__row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: var(--sumbra-space-lg);
}
.sumbra-sol-guide__cols {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sumbra-piedra);
	padding-bottom: var(--sumbra-space-xs);
	border-bottom: 1px solid var(--sumbra-carbon);
}
.sumbra-sol-guide__rows { list-style: none; margin: 0; padding: 0; }
.sumbra-sol-guide__row { padding-block: var(--sumbra-space-sm); border-bottom: 1px solid var(--sumbra-lino); align-items: baseline; }
.sumbra-sol-guide__row p { margin: 0; min-width: 0; overflow-wrap: break-word; }
.sumbra-sol-guide__need {
	font-family: var(--sumbra-font-display);
	font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem);
	line-height: 1.2;
	color: var(--sumbra-carbon);
}
.sumbra-sol-guide__eval { color: var(--sumbra-piedra); line-height: 1.6; }
.sumbra-sol-guide__label {
	display: none;
	font-family: var(--sumbra-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sumbra-piedra);
	margin-bottom: 4px;
}
@media (max-width: 760px) {
	.sumbra-sol-guide__cols { display: none; }
	.sumbra-sol-guide__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--sumbra-space-xs); }
	.sumbra-sol-guide__label { display: block; }
	.sumbra-sol-guide__eval .sumbra-sol-guide__label { color: var(--sumbra-piedra); }
}

/* Numbered questions / technical components: two columns when the text
   stays readable, one column on small screens. */
.sumbra-sol-guide__blocks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--sumbra-space-xl);
}
.sumbra-sol-guide__block {
	border-top: 1px solid var(--sumbra-carbon);
	padding: var(--sumbra-space-sm) 0 var(--sumbra-space-lg);
	min-width: 0;
}
.sumbra-sol-guide__num {
	display: block;
	font-family: var(--sumbra-font-display);
	font-size: 1.5rem;
	color: var(--sumbra-arena);
	line-height: 1;
	margin-bottom: var(--sumbra-space-xs);
}
.sumbra-sol-guide__block-title {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
	line-height: 1.15;
	margin: 0 0 var(--sumbra-space-xs);
	color: var(--sumbra-carbon);
}
.sumbra-sol-guide__block p { margin: 0 0 var(--sumbra-space-xs); color: var(--sumbra-piedra); line-height: 1.6; max-width: 52ch; overflow-wrap: break-word; }
.sumbra-sol-guide__block p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
	.sumbra-sol-guide__blocks { grid-template-columns: minmax(0, 1fr); }
	.sumbra-sol-guide__block { padding-bottom: var(--sumbra-space-md); }
}

/* -- Page-specific closing -------------------------------------------------- */
.sumbra-final-cta__copy { min-width: 0; }
.sumbra-final-cta--page .sumbra-final-cta__copy { max-width: 46rem; }
.sumbra-final-cta--page .sumbra-display { max-width: none; font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); }
.sumbra-final-cta__text {
	color: var(--sumbra-lino);
	line-height: 1.6;
	max-width: 52ch;
	margin: var(--sumbra-space-sm) 0 0;
}
.sumbra-final-cta__text + .sumbra-final-cta__text { margin-top: var(--sumbra-space-2xs); }
.sumbra-final-cta--page .sumbra-final-cta__inner { align-items: flex-end; }
@media (max-width: 600px) {
	.sumbra-final-cta--page .sumbra-final-cta__inner { align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   5.9.1 — Materials / observation block: contain the photo, let the copy
   set the height.
   Root cause (live, real media-library photo): the <img> carried
   height:100% inside a grid cell whose height was still auto. A percentage
   height against an auto parent does not feed back into the row, so the row
   was sized by the copy alone while the photo rendered at its natural size
   (and its automatic min-width widened the 1fr track too). The photo then
   hung out of the dark band over the next section and the copy column
   was squeezed. Fix: the media cell is a positioned, clipped box; the photo
   fills it absolutely with object-fit:cover. The copy column therefore
   always determines the section height and nothing crosses into the next
   section. No copy is clamped or hidden; the copy cell is NOT overflow-clipped.
   ------------------------------------------------------------------------- */
.sumbra-sol-materials__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sumbra-sol-materials__media {
	position: relative;
	min-width: 0;
	min-height: 420px;
	overflow: hidden;
}
.sumbra-sol-materials__media > .sumbra-media__img,
.sumbra-sol-materials__media > .sumbra-placeholder,
.sumbra-sol-materials__media > .sumbra-temp-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	aspect-ratio: auto !important;
	object-fit: cover;
}
.sumbra-sol-materials__media .sumbra-temp-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sumbra-sol-materials__copy { min-width: 0; overflow-wrap: break-word; }
.sumbra-sol-materials__copy .sumbra-h2 { max-width: 14ch; }
@media (max-width: 900px) {
	.sumbra-sol-materials__grid { grid-template-columns: minmax(0, 1fr); }
	.sumbra-sol-materials__media { min-height: 300px; }
}

/* 5.9.1 — text-only fallbacks (no cross-category stock photography). */
.sumbra-sol-materials__grid--text { grid-template-columns: minmax(0, 1fr); }
.sumbra-sol-materials__grid--text .sumbra-sol-materials__copy { padding-block: 72px; max-width: 760px; }
.sumbra-sol-materials__grid--text .sumbra-sol-materials__copy .sumbra-h2 { max-width: 20ch; }
.sumbra-sol-possibility--noimg { grid-template-columns: minmax(0, 1fr); }
.sumbra-sol-possibility-compact--noimg { border-top: 1px solid var(--sumbra-carbon); padding-top: var(--sumbra-space-sm); }

/* 5.9.1 — grouped decisions (Cortinas: tela / confección / operación). */
.sumbra-sol-groups { display: grid; gap: var(--sumbra-space-xl, 64px); margin-top: var(--sumbra-space-lg); }
.sumbra-sol-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--sumbra-space-lg); border-top: 1px solid var(--sumbra-carbon); padding-top: var(--sumbra-space-md); }
.sumbra-sol-group__head { min-width: 0; }
.sumbra-sol-group__num { display: block; font-family: var(--sumbra-font-display); color: var(--sumbra-arena); font-size: 1.1rem; margin-bottom: 6px; }
.sumbra-sol-group__title { font-family: var(--sumbra-font-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.15; margin: 0 0 10px; color: var(--sumbra-carbon); }
.sumbra-sol-group__intro { margin: 0; color: var(--sumbra-piedra); max-width: 34ch; }
.sumbra-sol-group__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sumbra-space-md) var(--sumbra-space-lg); min-width: 0; }
.sumbra-sol-group__item { min-width: 0; overflow-wrap: break-word; }
.sumbra-sol-group__item .sumbra-sol-possibility-compact__title { margin-top: 0; }
@media (max-width: 900px) {
	.sumbra-sol-group { grid-template-columns: minmax(0, 1fr); row-gap: var(--sumbra-space-sm); }
	.sumbra-sol-group__intro { max-width: none; }
}
.sumbra-sol-needs__grid:not(:has(.sumbra-sol-needs__media)) { grid-template-columns: minmax(0, 1fr); }
.sumbra-sol-needs__grid:not(:has(.sumbra-sol-needs__media)) .sumbra-sol-needs__copy .sumbra-body { max-width: 68ch; }

/* =========================================================================
   5.9.1 — final corrections
   ========================================================================= */

/* Process: label + optional one-line explanation. When explanations exist
   the list is 3 x 2 on desktop so each description has a readable measure. */
.sumbra-sol-process__steps li span.sumbra-sol-process__label {
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: var(--sumbra-font-body);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sumbra-carbon);
}
.sumbra-sol-process__steps li span.sumbra-sol-process__desc {
	min-width: 0;
	overflow-wrap: break-word;
	font-family: var(--sumbra-font-body);
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.55;
	color: var(--sumbra-piedra);
}
.sumbra-sol-process__steps--described { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sumbra-space-lg); }
@media (max-width: 1100px) and (min-width: 701px) {
	.sumbra-sol-process__steps--described { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.sumbra-sol-process__steps--described { grid-template-columns: minmax(0, 1fr); }
}

/* Product / control cards: one column on phones; three intentional columns
   for exactly three secondary cards (Toldos) instead of an empty fourth track. */
.sumbra-sol-possibilities__grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sumbra-space-lg); }
@media (max-width: 900px) {
	.sumbra-sol-possibilities__grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sumbra-space-md); }
}
@media (max-width: 640px) {
	.sumbra-sol-possibilities__grid--n3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
	.sumbra-sol-possibilities__grid,
	.sumbra-sol-possibilities--even .sumbra-sol-possibilities__grid { grid-template-columns: minmax(0, 1fr); }
	.sumbra-sol-possibility-compact__media .sumbra-media__img,
	.sumbra-sol-possibility-compact__media .sumbra-placeholder,
	.sumbra-sol-possibility-compact__media .sumbra-temp-photo { aspect-ratio: 16/10; }
}

/* Stacked observation block (<= 900px): the heading may use the full width. */
@media (max-width: 900px) {
	.sumbra-sol-materials__copy .sumbra-h2 { max-width: none; }
	.sumbra-sol-materials__copy { padding-block: 40px; }
}

/* 5.9.2 — grouped card images keep their proportions at any group size. */
.sumbra-sol-group__item .sumbra-sol-possibility-compact__media { width: 100%; }
.sumbra-sol-group__item .sumbra-sol-possibility-compact__media img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

/* 5.9.44 — possibility cards: more air between image, title and copy; and
   a 2-column grid in the 901–1100px band where four narrow columns (≈190–240px)
   crowded the text. Six-card (--even) and three-card (--n3) grids unchanged. */
.sumbra-sol-possibility-compact__title { margin: var(--sumbra-space-sm) 0 10px; line-height: 1.25; }
.sumbra-sol-possibility-compact__body { line-height: 1.6; }
@media (min-width: 901px) and (max-width: 1100px) {
	.sumbra-sol-possibilities:not(.sumbra-sol-possibilities--even) .sumbra-sol-possibilities__grid:not(.sumbra-sol-possibilities__grid--n3) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 5.9.45 — grouped cards (Cortinas): the group rule forced the title's top
   margin to 0, so the heading (or, for an untitled card, the copy) touched
   the image. Give them the same 20px air as the other possibility cards. */
.sumbra-sol-group__item .sumbra-sol-possibility-compact__media + .sumbra-sol-possibility-compact__title,
.sumbra-sol-group__item .sumbra-sol-possibility-compact__media + .sumbra-sol-possibility-compact__body { margin-top: var(--sumbra-space-sm); }

/* 5.9.48 — guide table headers (desktop) and row labels (phone) were still 12px. */
.sumbra-sol-guide__cols, .sumbra-sol-guide__cols span, .sumbra-sol-guide__label { font-size: 0.8125rem; }