/* Nosotros only: container geometry, reading widths, then typography. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/Montserrat-Light.woff") format("woff");
}
.about-page {background: var(--paw-white);}
.about-page .site-main {
  max-width: calc(var(--paw-width) + 2 * var(--paw-gutter));
  margin-inline: auto;
  padding: clamp(56px, 6vw, 88px) var(--paw-gutter) clamp(72px, 8vw, 120px);
  font-family: var(--paw-font);
  color: var(--paw-ink);
}
.about-intro {max-width: 960px; margin-bottom: clamp(72px, 8vw, 112px);}
.about-eyebrow {margin: 0 0 24px; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 1.6px; color: var(--paw-action);}
.about-intro h1 {max-width: 23ch; margin: 0; font-family: "Montserrat", var(--paw-font); font-size: clamp(38px, 4.5vw, 60px); font-weight: 300; line-height: 1.15; letter-spacing: -.035em; text-wrap: balance;}
.about-introduction {max-width: 62ch; margin: 32px 0 0; padding-left: 22px; border-left: 7px solid #A8DCD9; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.75; color: var(--paw-muted);}
.about-story {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 72px); margin-bottom: clamp(72px, 8vw, 112px); align-items: start;}
.about-page h2 {margin: 0; font-family: "Montserrat", var(--paw-font); font-size: clamp(26px, 2.5vw, 34px); font-weight: 300; line-height: 1.3; letter-spacing: -.025em;}
.about-story-copy {max-width: 68ch; min-width: 0;}
.about-story-copy p {margin: 0 0 24px; font-size: 17px; line-height: 1.85; color: var(--paw-muted);}
.about-story-copy p:last-child {margin-bottom: 0;}
.about-principles {margin-bottom: clamp(72px, 8vw, 112px);}
.about-principles-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: 32px; border-top: 1px solid var(--paw-line);}
.about-principle {padding-top: 24px; min-width: 0;}
.about-principle-number {display: block; margin-bottom: 22px; font-size: 11px; line-height: 1.5; color: var(--paw-action);}
.about-principle h3 {margin: 0 0 14px; font-size: 21px; line-height: 1.4; font-weight: 400;}
.about-principle p {max-width: 32ch; margin: 0; font-size: 16px; line-height: 1.75; color: var(--paw-muted);}
.about-closing {padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--paw-line);}
.about-page .about-closing h2 {font-size: clamp(30px, 3vw, 44px);}
.about-closing p {max-width: 56ch; margin: 24px 0 28px; font-size: 18px; line-height: 1.75; color: var(--paw-muted);}
.about-products-link {display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; padding: 12px 24px; border-radius: var(--paw-control-radius); background: var(--paw-action); color: var(--paw-white); font-size: 14px; line-height: 24px; font-weight: 500; text-align: center;}
.about-products-link:hover {background: var(--paw-action-hover);}
.about-products-link:focus-visible {outline: 2px solid var(--paw-blue); outline-offset: 5px;}
@media (max-width: 900px) {
  .about-story {grid-template-columns: minmax(0, 1fr); gap: 28px;}
  .about-principles-grid {gap: 28px;}
}
@media (max-width: 600px) {
  .about-page .site-main {padding-top: 40px; padding-bottom: 64px;}
  .about-intro, .about-story, .about-principles {margin-bottom: 56px;}
  .about-intro h1 {font-size: clamp(32px, 8.5vw, 42px); letter-spacing: -.03em;}
  .about-introduction {padding-left: 16px; margin-top: 24px; font-size: 18px;}
  .about-principles-grid {grid-template-columns: minmax(0, 1fr); gap: 28px;}
  .about-principle {padding-top: 0;}
  .about-principle:first-child {padding-top: 24px;}
  .about-principle-number {margin-bottom: 12px;}
  .about-principle p {max-width: 100%;}
}