/* Grupo SUMMA /sostenibilidad — Informe de Sostenibilidad 2025.
   Linked only from the Spanish and English sustainability templates, so no
   rule here reaches another preserved route.

   Direction: editorial ledger in three acts. The preserved page ships every
   section as a rounded, translucent, saturated card. This sheet turns the
   brand acts (hero, operating system, initiative record) into full-bleed solid
   brand-green fields separated by hairlines, and the evidence act (figures and
   the 2025 strategy narrative) into one continuous white report page.

   Specificity contract: the page stylesheet keys its section fills on
   `.section_wrapper.is--dark.sosN` (three classes) and its type on
   `.section_text-p.is--light-text.j-big` (three classes), so every override
   below is scoped through the wrapper class and reaches at least the page
   sheet's specificity. Colors consume the custom properties the page
   stylesheet defines; the two on-dark levels are the dimmest that still clear
   WCAG AA (4.79 and 6.26) against solid brand-2. */

:root {
  --summa-on-dark: var(--_colors---text--light);
  --summa-on-dark-muted: #f8f8f3e0;
  --summa-ink: var(--_colors---ui--dark);
  --summa-ink-muted: var(--_colors---text--dark-body);
  --summa-ink-faint: #3b3b33bf;
  --summa-rule-dark: #f8f8f329;
  --summa-rule-light: #3b3b3329;
  --summa-field: var(--_colors---brand--brand-2);
  --summa-surface: #fff;
  --summa-figure-size: clamp(2.6rem, 1.9rem + 3vw, 4rem);
}

/* Kumo keeps motion out of content. The preserved IX2 scroll reveals set an
   inline opacity:0 and animate on scroll; here the content is simply present,
   which also removes the blank-page-without-JavaScript failure mode. */
.summa-reveal { opacity: 1 !important; transform: none !important; }

/* The six metric cards carry their own preserved IX2 reveals (data-w-id on
   .icon-card-2) and would otherwise hold at opacity 0 until scrolled into view. */
body.bg-sos .icon-card-2 { opacity: 1 !important; transform: none !important; }

/* Kumo: hover color changes are immediate, never transitioned. */
body.bg-sos a,
body.bg-sos button,
body.bg-sos [role="button"] { transition: none; }

body.bg-sos :focus-visible {
  outline: 2px solid var(--summa-on-dark);
  outline-offset: 2px;
}

body.bg-sos .summa-report :focus-visible { outline-color: var(--summa-ink); }

@media (prefers-reduced-motion: reduce) {
  body.bg-sos *,
  body.bg-sos *::before,
  body.bg-sos *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* The preserved chrome insets every section 16px so the body texture shows in
   two gutters; full-bleed fields need that gutter closed on this page only.
   The body texture itself is a magenta map pattern the owner rejected, so it
   is dropped here too rather than showing through overscroll or seams. */
body.bg-sos {
  background-image: none;
}

body.bg-sos .section-2 {
  padding-left: 0;
  padding-right: 0;
}

/* --- fields: full-bleed, no rounded translucent cards --- */

.section_wrapper.summa-field,
.section_wrapper.summa-report {
  border-radius: 0;
  margin-top: 0;
}

.section_wrapper.is--dark.sos.summa-field,
.section_wrapper.is--dark.sos2.summa-field,
.section_wrapper.is--dark.sos4.center-j.summa-field {
  background-color: var(--summa-field);
  background-image: none;
}

.section_wrapper.negpadz.summa-report,
.section_wrapper.is--dark.sos3.summa-report {
  background-color: var(--summa-surface);
  background-image: none;
}

/* Hairline where the white report page resumes after the metrics ledger.
   The preserved markup nests this section inside the metrics wrapper, so its
   5% padding resolves against an already-inset box; the reciprocal percentage
   (5 / 0.9) cancels the parent inset and restores the page-wide alignment. */
.section_wrapper.is--dark.sos3.summa-report {
  border-top: 1px solid var(--summa-rule-light);
  margin-left: -5.5556%;
  margin-right: -5.5556%;
  padding-top: 64px;
  padding-left: 5.5556%;
  padding-right: 5.5556%;
}

.section_wrapper.is--dark.sos3.summa-report > .section_content-8:first-child { padding-bottom: 16px; }

.summa-report .section_content-8 { padding-bottom: 64px; }

.summa-report .section_content-8.mobile-pad { padding-bottom: 0; }

.section_wrapper.is--dark.sos3.summa-report .section_content-8 { padding-bottom: 96px; }

.summa-report .margin-bottom-64 { margin-bottom: 0; }

/* --- hero --- */

.summa-hero-head { row-gap: 16px; flex-flow: column; align-items: flex-start; display: flex; }

.summa-eyebrow {
  color: var(--summa-on-dark);
  background-color: #00000029;
  border-radius: 999px;
  margin: 0;
  padding: 6px 14px;
  font-size: 14px;
  line-height: 1.4em;
  font-weight: 500;
}

/* --- type: semibold headings, 17px reading copy, 14px metadata --- */

h2.section_text-title { font-weight: 500; letter-spacing: -0.01em; }

.summa-field h3.section_text-p.is--light-text.j-big {
  color: var(--summa-on-dark);
  margin: 0;
  font-size: 24px;
  line-height: 1.25em;
  font-weight: 500;
}

.summa-field .section_text-p.is--light-text.j-big {
  color: var(--summa-on-dark-muted);
  max-width: 56ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.65em;
}

.summa-report .section_text-title.is--white-text { color: var(--summa-ink); }

.summa-report .section_text-p.is--light-text.j-big {
  color: var(--summa-ink-muted);
  max-width: 62ch;
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.65em;
}

.summa-report .centered-title-2 {
  text-align: left;
  align-items: flex-start;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* --- metrics ledger on white: hairline rules, no fills, no icon boxes --- */

.summa-report .card-grid {
  grid-column-gap: 0;
  grid-row-gap: 0;
  color: var(--summa-ink);
}

.summa-report .icon-card-2,
.summa-report .icon-card-2.a,
.summa-report .icon-card-2.b,
.summa-report .icon-card-2.c,
.summa-report .icon-card-2.d {
  background-color: transparent;
  border-radius: 0;
  border-top: 1px solid var(--summa-rule-light);
  row-gap: 10px;
  padding: 28px 32px 36px 0;
}

/* The card art is a client logo or a stock render, not approved project
   photography; next to group-wide figures it would imply an attribution the
   report does not make. The figure carries the meaning. */
.summa-report .icon-card-2 .boxed-icon-2 { display: none; }

.summa-report .summa-figure {
  color: var(--summa-ink);
  letter-spacing: -0.02em;
  font-size: var(--summa-figure-size);
  line-height: 1em;
  font-weight: 500;
}

.summa-report .icon-card-2 .lead-text-2.strong {
  color: var(--summa-ink-muted);
  max-width: 30ch;
  font-size: 17px;
  line-height: 1.5em;
  font-weight: 400;
}

.summa-report .summa-metric-meta {
  color: var(--summa-ink-faint);
  font-size: 14px;
  line-height: 1.4em;
  letter-spacing: 0.04em;
}

.summa-report .summa-source-note {
  color: var(--summa-ink-muted);
  text-align: left;
  max-width: 62ch;
  margin: 48px 0 0;
  font-size: 14px;
  line-height: 1.55em;
}

/* --- strategy narrative: one reading measure with a dash-marker list --- */

.summa-report .summa-checklist {
  max-width: 62ch;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.summa-report .summa-checklist > li {
  color: var(--summa-ink);
  position: relative;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.6em;
}

.summa-report .summa-checklist > li + li { margin-top: 10px; }

.summa-report .summa-checklist > li::before {
  content: "";
  background-color: var(--summa-field);
  width: 10px;
  height: 2px;
  position: absolute;
  top: 0.72em;
  left: 0;
}

/* --- concept rows: ordinal marker, measure, image column --- */

.summa-field .benefits_item {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  border-top: 1px solid var(--summa-rule-dark);
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 40%);
  align-items: start;
  padding: 40px 0;
}

.summa-field .div-block-3 { display: block; }

.summa-field .div-block-3 .section_text-title.j-man {
  color: var(--summa-on-dark-muted);
  font-size: 14px;
  line-height: 1.4em;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.summa-field .div-block-12 { display: none; }

.summa-field .benefits_description-wrapper {
  row-gap: 8px;
  margin-right: 0;
}

.summa-field .image-9 {
  margin-bottom: 0;
  border-radius: 8px;
  width: 100%;
}

/* --- initiative record: one ledger row per initiative, ODS as a footnote ---
   Each row node holds exactly [title, body], so the row itself carries the
   split: a title rail on the left, the reading column on the right, and the
   ODS footnote indented to the reading column. The preserved markup bundles
   the section heading with initiative 01, so that heading spans both tracks. */

.section_wrapper.is--dark.sos4.center-j.summa-field {
  grid-row-gap: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  display: grid;
}

.section_wrapper.is--dark.sos4.center-j.summa-field > *:nth-child(odd) { padding: 36px 0 12px; }

.section_wrapper.is--dark.sos4.center-j.summa-field > *:nth-child(even) { padding: 0 0 36px; }

.section_wrapper.is--dark.sos4.center-j.summa-field > *:nth-child(odd) {
  grid-column-gap: 48px;
  grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
  align-items: start;
  display: grid;
}

.section_wrapper.is--dark.sos4.center-j.summa-field > *:nth-child(odd) > h3 { grid-column: 1; }

.section_wrapper.is--dark.sos4.center-j.summa-field > *:nth-child(odd) > p { grid-column: 2; }

.section_wrapper.is--dark.sos4.center-j.summa-field > div:first-child > h2 { grid-column: 1 / -1; }

.section_wrapper.is--dark.sos4.center-j.summa-field > *:nth-child(even) { padding-left: calc(30% + 48px); }

.section_wrapper.is--dark.sos4.center-j.summa-field > *:nth-child(odd):not(:first-child) {
  border-top: 1px solid var(--summa-rule-dark);
}

.section_wrapper.is--dark.sos4.center-j.summa-field > div:first-child { padding-top: 0; }

.section_wrapper.is--dark.sos4.center-j.summa-field > div:first-child > h2 { margin-bottom: 48px; }

.summa-field .summa-index {
  color: var(--summa-on-dark-muted);
  margin-right: 12px;
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.summa-field .accordion-item-3.no-border,
.summa-field .accordion-item-3.no-border._1,
.summa-field .accordion-item-3.no-border._2,
.summa-field .accordion-item-3.no-border._3,
.summa-field .accordion-item-3.no-border._4,
.summa-field .accordion-item-3.no-border._5,
.summa-field .accordion-item-3.no-border._6,
.summa-field .accordion-item-3.no-border._7 {
  width: auto;
  color: var(--summa-on-dark);
  background-color: transparent;
  border-radius: 0;
  margin-bottom: 0;
}

.summa-field .accordion-title-borderless { padding: 0; cursor: default; }

.summa-field .accordion-icon-title { grid-column-gap: 12px; align-items: center; }

.summa-field .accordion-icon-title img { width: 20px; height: 20px; }

.summa-field .accordion-icon-title > div {
  color: var(--summa-on-dark);
  font-size: 14px;
  line-height: 1.4em;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.summa-field .accordion-text-2 {
  color: var(--summa-on-dark-muted);
  max-width: 62ch;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55em;
}

/* --- responsive --- */

@media screen and (max-width: 991px) {
  .summa-report .card-grid { grid-template-columns: 1fr 1fr; }
  .summa-field .benefits_item { grid-template-columns: 56px minmax(0, 1fr); }
  .summa-field .benefits_item .image-9 { grid-column: 2; }
}

@media screen and (max-width: 767px) {
  .summa-report .card-grid { grid-template-columns: 1fr; }
  .summa-report .icon-card-2,
  .summa-report .icon-card-2.a,
  .summa-report .icon-card-2.b,
  .summa-report .icon-card-2.c,
  .summa-report .icon-card-2.d { padding-right: 0; }
  .summa-field .benefits_item { grid-template-columns: minmax(0, 1fr); grid-row-gap: 16px; padding: 32px 0; }
  .summa-field .benefits_item .div-block-3 { display: block; }
  .section_wrapper.is--dark.sos4.center-j.summa-field > *:nth-child(odd) { padding: 28px 0 10px; grid-template-columns: minmax(0, 1fr); grid-row-gap: 10px; grid-column-gap: 0; }
  .section_wrapper.is--dark.sos4.center-j.summa-field > *:nth-child(odd) > h3,
  .section_wrapper.is--dark.sos4.center-j.summa-field > *:nth-child(odd) > p { grid-column: auto; }
  .section_wrapper.is--dark.sos4.center-j.summa-field > *:nth-child(even) { padding-bottom: 28px; padding-left: 0; }
}