.about-page em { color: var(--brand-primary); font-family: var(--font-display); font-weight: 400; }
.about-section { padding-block: clamp(5.5rem, 9vw, 9rem); }
.about-label { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; margin-bottom: 2rem; }
.about-label span { min-width: 0; }
.about-page h2 { font-size: clamp(3rem, 4.7vw, 5rem); line-height: 1.04; }
.about-page p { text-wrap: pretty; }

/* The same viewport-aware hero rhythm as Hogar, with a separate editorial image. */
.about-hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(9rem, 17svh, 12rem) 0 clamp(3rem, 9svh, 8rem);
  background: var(--surface-main);
}
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(3rem, 6vw, 6rem); }
.about-hero h1 { max-width: 11.5ch; font-size: clamp(3.6rem, 5.7vw, 6.5rem); }
.about-hero__intro { max-width: 34rem; margin: 2rem 0 2.5rem; font-size: clamp(1rem, 1.25vw, 1.2rem); }
.about-hero__media { aspect-ratio: 1; max-height: min(65svh, 42rem); overflow: hidden; border-radius: 5rem .5rem .5rem .5rem; }
.about-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }

.about-intro { background: var(--surface-warm); }
.about-intro__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.about-intro__copy { grid-column: 2; grid-row: 1; }
.about-intro__copy h2 { max-width: 13ch; }
.about-intro__copy > p:not(.about-label), .about-team__copy > p:not(.about-label) { max-width: 37rem; margin: 1.5rem 0 0; font-size: clamp(1rem, 1.15vw, 1.12rem); }
.about-intro__copy > h2 + p, .about-team__copy > h2 + p { margin-top: 2rem; }
.about-intro__media { position: relative; grid-column: 1; grid-row: 1; margin: 0; }
.about-intro__media::before { position: absolute; top: -1.25rem; bottom: -1.25rem; left: 1.25rem; width: 1px; background: var(--border-strong); opacity: .5; content: ""; pointer-events: none; }
.about-intro__media img { position: relative; width: 100%; height: auto; border-radius: .5rem; }

.about-criteria { background: var(--brand-deep); color: var(--surface-warm); }
.about-criteria__heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.about-criteria h2 { max-width: 17ch; color: var(--surface-white); }
.about-criteria h2 em { color: var(--border-strong); }
.about-criteria__intro { max-width: 30rem; margin: 0 0 .2rem; color: var(--border-default); font-size: clamp(1rem, 1.2vw, 1.15rem); }
.about-criteria__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(3rem, 5vw, 5rem); border-top: 1px solid rgb(240 234 229 / 20%); }
.about-criterion { padding-top: 2rem; }
.about-icon { width: 3rem; height: 3rem; margin-bottom: 2rem; fill: none; stroke: var(--border-strong); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.about-criterion h3 { color: var(--surface-white); font-family: var(--font-display); font-size: clamp(2rem, 2.7vw, 2.7rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.about-criterion p { max-width: 27rem; margin: 1.2rem 0 0; color: var(--border-default); }

.about-team { background: var(--surface-main); }
.about-team__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(3rem, 10vw, 10rem); }
.about-team__copy h2 { max-width: 15ch; }
.about-team__media { margin: 0; }
.about-team__media img { width: 100%; height: auto; border-radius: .5rem .5rem 4rem .5rem; }

.about-fields { background: var(--surface-alt); }
.about-fields__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.about-fields__heading h2 { max-width: 14ch; }
.about-fields__heading > p:not(.about-label) { max-width: 33rem; margin: 2rem 0 0; }
.about-fields__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-default); }
.about-fields__list li { border-bottom: 1px solid var(--border-default); }
.about-field { min-height: 7rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.4rem; text-decoration: none; }
.about-field h3 { color: var(--brand-primary); font-family: var(--font-display); font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.about-field p { max-width: 30rem; margin: .6rem 0 0; font-size: .95rem; }
.about-field svg { flex: 0 0 1.5rem; width: 1.5rem; fill: none; stroke: var(--brand-primary); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.about-field[href]:hover svg { transform: translateX(.2rem); }
.about-field[href]:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

.about-contact { position: relative; isolation: isolate; overflow: hidden; background: var(--brand-dark); color: var(--surface-warm); }
.about-contact__grid { position: relative; display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(3rem, 7vw, 7rem); }
.about-contact h2 { max-width: 18ch; color: var(--surface-white); }
.about-contact h2 em { color: var(--border-strong); }
.about-contact__copy > p { max-width: 42rem; margin: 2rem 0 2.5rem; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.about-contact__mark { position: absolute; z-index: -1; left: -3rem; bottom: -4rem; width: min(30vw, 26rem); height: auto; opacity: .045; pointer-events: none; }
.about-contact .button--light { background: var(--surface-white); color: var(--brand-primary); transition: background-color .25s ease, color .25s ease; }
.about-contact .button--light:hover { background: var(--brand-black); color: var(--surface-white); }

@media (max-width: 1023px) {
  html:not(.js) .about-page .site-header { position: relative; }
  html:not(.js) .about-page .primary-nav { flex-wrap: wrap; justify-content: flex-start; gap: .2rem 1rem; }
  html:not(.js) .about-page .about-hero { padding-top: 3rem; }
  .about-hero { min-height: auto; padding-block: 10rem clamp(5.5rem, 9vw, 8rem); }
  .about-hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-hero__copy { max-width: 45rem; }
  .about-hero h1 { max-width: 14ch; font-size: clamp(3.6rem, 8.5vw, 5.8rem); }
  .about-hero__intro { max-width: 40rem; }
  .about-hero__media { aspect-ratio: 16 / 9; max-height: none; border-radius: 3.5rem .5rem .5rem .5rem; }
  .about-hero__media img { object-position: center; }
  .about-intro__grid, .about-team__grid { gap: 2.5rem; }
  .about-page h2 { font-size: clamp(2.8rem, 5.6vw, 4.5rem); }
  .about-criteria__heading { grid-template-columns: 1fr; gap: 2rem; }
  .about-criteria__intro { max-width: 40rem; }
  .about-criteria__list { gap: 2rem; }
  .about-criterion h3 { font-size: 2rem; }
  .about-fields__grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-fields__heading { max-width: 43rem; }
  .about-fields__heading h2 { max-width: 19ch; }
  .about-fields__heading > p:not(.about-label) { max-width: 40rem; }
  .about-fields__list { width: min(100%, 44rem); margin-inline: auto; }
  .about-contact__grid { grid-template-columns: 1fr; gap: 1rem; }
  .about-contact__copy { max-width: 46rem; margin-left: 10%; }
}

@media (max-width: 767px) {
  .about-intro__grid, .about-team__grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-intro__copy, .about-intro__media { grid-column: auto; grid-row: auto; }
  .about-intro__copy h2, .about-team__copy h2 { max-width: 17ch; }
  .about-intro__media, .about-team__media { width: min(100%, 38rem); margin-inline: auto; }
  .about-team__media img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
  .about-criteria__list { grid-template-columns: 1fr; gap: 0; }
  .about-criterion { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.25rem; padding-block: 2rem; }
  .about-criterion + .about-criterion { border-top: 1px solid rgb(240 234 229 / 20%); }
  .about-icon { grid-row: 1 / 3; margin: 0; }
  .about-criterion p { grid-column: 2; margin-top: 1rem; }
  .about-contact__copy { margin-left: 0; }
}

@media (max-width: 639px) {
  .about-section { padding-block: 5rem; }
  .about-label { grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; margin-bottom: 1.75rem; }
  .about-hero { padding-block: 8.5rem 5rem; }
  .about-hero h1 { font-size: clamp(3.1rem, 13.3vw, 4.5rem); }
  .about-hero__intro { margin-block: 1.75rem 2rem; font-size: 1rem; }
  .about-page h2 { font-size: clamp(2.65rem, 11.5vw, 3.8rem); }
  .about-criteria__list { margin-top: 2.5rem; }
  .about-criterion { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 1rem; }
  .about-icon { width: 2.25rem; height: 2.25rem; }
  .about-criterion h3 { font-size: 2rem; }
  .about-field { gap: 1rem; }
  .about-contact__mark { display: none; }
}