/* Cómo lo hacemos follows Home: navy, marker bands and open corners. */
.page-how .section-heading > .section-index { font: 11px/1.6 var(--mono); padding: 0; }
.page-how :is(#metodo, #impacto) .section-heading > .section-index { color: #E4DBEC; }
.page-how .section-heading > p:not(.section-index) { font-size: 16px; line-height: 1.75; padding: 0; }
.page-how h2 { line-height: 1.1; }
.page-how h2 em { line-height: 1.35; }

/* The opening is typographic; photography stays with the three project cases. */
.page-how .how-hero {
  display: block;
  padding: 170px var(--gutter) 80px;
  background: var(--mg-blues) var(--mg-dots-on-navy);
  background-size: var(--mg-dot-step) var(--mg-dot-step);
}
.page-how .how-hero h1 { font-size: clamp(54px, 6.8vw, 98px); line-height: 1.08; }
.page-how .how-hero h1 em { line-height: 1.35; }
.page-how .how-hero-copy > p:last-child { max-width: 58ch; margin-top: 32px; font-size: 16px; line-height: 1.75; color: #E4DBEC; }

.page-how .company-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 55px clamp(35px, 6vw, 90px);
  color: var(--mg-blues);
  background-color: white;
}
.page-how .company-story .brand-icon { margin-bottom: 24px; }
.page-how .company-story h2 { font-size: clamp(48px, 5.8vw, 82px); }
.page-how .company-story-summary { max-width: 47ch; font-size: 16px; line-height: 1.75; }
.page-how .how-case-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.page-how .how-case { display: flex; flex-direction: column; min-width: 0; }
.page-how .how-case > img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px 85px 18px 18px; }
.page-how .how-case:nth-child(2) > img { border-radius: 85px 18px 18px 18px; }
.page-how .how-case .section-index { margin: 26px 0 16px; }
.page-how .how-case h3 { margin-bottom: 20px; font-size: clamp(30px, 2.8vw, 43px); line-height: 1.12; }
.page-how .how-case-description { flex: 1; margin-bottom: 25px; font-size: 15px; line-height: 1.75; }
.page-how .how-case .text-link { min-height: 48px; }

.page-how section#metodo { color: white; background-color: var(--mg-blues); background-image: var(--mg-dots-on-navy); }
.page-how .how-method-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(35px, 6vw, 100px); align-items: start; }
.page-how #metodo .section-heading { position: sticky; top: 140px; margin: 0; }
.page-how #metodo .section-heading h2 { font-size: clamp(44px, 4.8vw, 74px); }
.page-how #metodo .section-heading > p:last-child { margin-top: 28px; color: #E4DBEC; }
.page-how #metodo .process-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.page-how #metodo .process-grid article { padding: clamp(30px, 3.5vw, 55px); color: var(--mg-blues); background: white; border: 0; border-radius: 16px 90px 16px 16px; scroll-margin-top: 120px; }
.page-how #metodo .process-grid article:nth-child(2) { border-radius: 16px 16px 90px 16px; }
.page-how .how-process-marker { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-how .how-process-marker .process-number { color: var(--mg-blues); font: 13px/1 var(--mono); }
.page-how #metodo .process-grid h3 { font: italic 400 clamp(42px, 4.5vw, 65px)/1.15 var(--serif); letter-spacing: -.045em; margin: 24px 0; }
.page-how #metodo .process-grid p { font-size: 15px; min-height: 0; line-height: 1.75; }
.page-how #metodo .process-grid ul { font-size: 14px; line-height: 1.7; margin-top: 26px; padding-left: 18px; }
.page-how #metodo .process-grid li + li { margin-top: 8px; }
.page-how .engagement-models { margin-top: 100px; }
.page-how .engagement-models > h3 { max-width: 700px; font-size: clamp(38px, 4.5vw, 65px); line-height: 1.15; margin-bottom: 45px; }
.page-how .engagement-models > h3 em { color: var(--mg-sky); }
.page-how .engagement-models > article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 50px; padding: 32px 0; border-top: 1px solid #FFFFFF40; scroll-margin-top: 120px; }
.page-how .engagement-models h4 { margin: 0; max-width: 23ch; font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.035em; }
.page-how .engagement-models p { max-width: 66ch; font-size: 15px; line-height: 1.75; margin: 0; color: #E4DBEC; }

.page-how section#valores { color: var(--mg-blues); background-color: white; background-image: var(--mg-dots-on-white); }
.page-how #valores .section-index { color: var(--mg-blues); }
.page-how #valores .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 55px clamp(40px, 8vw, 130px); max-width: 1200px; }
.page-how #valores .values-grid article { grid-column: auto; padding: 0; border: 0; border-radius: 0; background: none; }
.page-how #valores .values-grid h3 { display: inline; font-size: clamp(28px, 3vw, 43px); line-height: 1.35; padding: 0 .08em; background: linear-gradient(transparent 55%, var(--value-color) 55% 95%, transparent 95%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.page-how #valores .values-grid p { max-width: 49ch; margin-top: 22px; font-size: 15px; line-height: 1.75; color: var(--mg-blues); }
.page-how .values-grid article:nth-child(1) { --value-color: var(--mg-sky); }
.page-how .values-grid article:nth-child(2) { --value-color: var(--mg-keppel); }
.page-how .values-grid article:nth-child(3) { --value-color: var(--mg-mulberry); }
.page-how .values-grid article:nth-child(4) { --value-color: var(--mg-lime); }
.page-how .values-grid article:nth-child(5) { --value-color: var(--mg-green); }

.page-how section#sectores { padding-top: 30px; color: var(--mg-blues); background-color: white; }
.page-how .how-sectors-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); gap: clamp(35px, 6vw, 90px); align-items: center; }
.page-how .how-sectors-layout > * { min-width: 0; }
.page-how #sectores .section-heading { margin-bottom: 35px; }
.page-how #sectores h2 { font-size: clamp(42px, 4.6vw, 69px); }
.page-how #sectores .sector-list { margin: 0; gap: 12px; }
.page-how #sectores .sector-list li { padding: 11px 20px; color: var(--mg-blues); background: white; border-color: #160F3E40; font-size: 19px; transition: none; }
.page-how .how-art { width: 100%; max-width: 390px; justify-self: end; }

.page-how section#impacto { color: white; background-color: var(--mg-blues); background-image: var(--mg-dots-on-navy); }
.page-how #impacto .section-heading > p:last-child { color: #E4DBEC; }
.page-how #impacto .impact-grid { gap: 24px; }
.page-how #impacto .impact-grid article { background: white; color: var(--mg-blues); padding: clamp(26px, 3vw, 44px); border-radius: 16px 70px 16px 16px; }
.page-how #impacto .impact-grid article:nth-child(2) { border-radius: 16px 16px 70px 16px; }
.page-how #impacto .brand-icon { margin-bottom: 28px; }
.page-how #impacto .impact-grid h3 { font-size: clamp(27px, 2.5vw, 38px); line-height: 1.15; }
.page-how #impacto .impact-grid p { font-size: 15px; line-height: 1.75; }

.page-how section#conversemos { color: var(--mg-blues); background-color: white; background-image: var(--mg-dots-on-white); padding: 100px var(--gutter); }
.page-how #conversemos .section-index { color: var(--mg-blues); }
.page-how #conversemos > p:not(.section-index) { font-size: 16px; }
.page-how #conversemos > a { min-height: 60px; padding: 18px 30px; border-radius: 100px; font-size: 16px; font-weight: 600; }
.page-how #conversemos > a > span { font-size: 30px; }

@media (max-width: 1000px) {
  .page-how .how-case-grid { gap: 22px; }
  .page-how .how-case h3 { font-size: 30px; }
  .page-how #impacto .impact-grid { grid-template-columns: minmax(0, 1fr); }
  .page-how #impacto .impact-grid article { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 28px; padding: 32px; }
  .page-how #impacto .brand-icon { grid-row: span 2; margin-bottom: 0; }
  .page-how #impacto .impact-grid h3 { margin-bottom: 18px; }
}
@media (max-width: 800px) {
  .page-how .how-hero { padding-top: 140px; }
  .page-how .how-hero h1 { font-size: clamp(48px, 8.5vw, 68px); }
  .page-how .company-story { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .page-how .company-story-summary { max-width: 64ch; }
  .page-how .how-case-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .page-how .how-case > img { aspect-ratio: 16 / 10; }
  .page-how .how-case h3 { font-size: 36px; }
  .page-how .how-method-layout { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .page-how #metodo .section-heading { position: static; }
  .page-how #metodo .section-heading h2 { font-size: clamp(44px, 7vw, 64px); }
  .page-how .engagement-models { margin-top: 65px; }
  .page-how .engagement-models > article { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .page-how #valores .values-grid { gap: 40px; }
  .page-how .how-sectors-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .page-how .how-art { width: min(62%, 300px); }
}
@media (max-width: 600px) {
  .page-how .how-hero { padding-bottom: 50px; }
  .page-how .how-hero h1 { font-size: clamp(39px, 10.5vw, 60px); }
  .page-how .how-hero-copy > p:last-child { font-size: 15px; margin-top: 26px; }
  .page-how .company-story h2 { font-size: clamp(43px, 10vw, 58px); }
  .page-how #valores .values-grid { grid-template-columns: minmax(0, 1fr); }
  .page-how #valores .values-grid h3 { font-size: 30px; }
  .page-how #metodo .process-grid article { padding: 28px; border-top-right-radius: 65px; }
  .page-how #metodo .process-grid article:nth-child(2) { border-top-right-radius: 16px; border-bottom-right-radius: 65px; }
  .page-how #impacto .impact-grid article { display: block; padding: 30px; }
  .page-how #impacto .brand-icon { margin-bottom: 25px; }
  .page-how section#conversemos { padding: 70px var(--gutter); }
  .page-how #conversemos h2 { font-size: clamp(39px, 10vw, 54px); }
}
@media (max-height: 680px) {
  .page-how #metodo .section-heading { position: static; }
}
@media print {
  .page-how #metodo .section-heading { position: static; }
  .page-how section:is(#metodo, #valores, #impacto, #conversemos) { background-image: none; }
}