/* Contacto only. Shared header/footer and all other pages remain unchanged. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/Montserrat-Light.woff") format("woff");
}
.contact-page {background: var(--paw-white);}
.contact-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, 112px);
  font-family: var(--paw-font);
  color: var(--paw-ink);
}
.contact-intro {max-width: 900px; margin-bottom: clamp(56px, 6vw, 80px);}
.contact-eyebrow {margin: 0 0 24px; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 1.6px; color: var(--paw-action);}
.contact-intro h1 {max-width: 22ch; 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;}
.contact-introduction {max-width: 56ch; 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);}
.contact-channels {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); max-width: 1000px; padding-top: 32px; border-top: 1px solid var(--paw-line);}
.contact-channel {min-width: 0;}
.contact-channel h2 {margin: 0 0 18px; font-family: "Montserrat", var(--paw-font); font-size: clamp(26px, 2.5vw, 32px); font-weight: 300; line-height: 1.3; letter-spacing: -.025em;}
.contact-email, .contact-whatsapp-number {font-size: clamp(20px, 2vw, 24px); font-weight: 400; line-height: 1.6;}
.contact-email {display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; color: var(--paw-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;}
.contact-email:hover {color: var(--paw-action-hover);}
.contact-whatsapp-number {margin: 0 0 24px; color: var(--paw-ink);}
.contact-whatsapp-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;}
.contact-whatsapp-link:hover {background: var(--paw-action-hover);}
.contact-email:focus-visible, .contact-whatsapp-link:focus-visible {outline: 2px solid var(--paw-blue); outline-offset: 5px;}
.contact-amazon-note {max-width: 1000px; margin-top: clamp(56px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--paw-line);}
.contact-amazon-note p {max-width: 82ch; margin: 0; font-size: 14px; line-height: 1.8; color: var(--paw-muted);}
@media (max-width: 760px) {
  .contact-channels {grid-template-columns: minmax(0, 1fr); gap: 40px;}
}
@media (max-width: 600px) {
  .contact-page .site-main {padding-top: 40px; padding-bottom: 64px;}
  .contact-intro {margin-bottom: 48px;}
  .contact-intro h1 {font-size: clamp(32px, 8.5vw, 42px); letter-spacing: -.03em;}
  .contact-introduction {padding-left: 16px; margin-top: 24px; font-size: 18px;}
  .contact-channels {padding-top: 28px;}
  .contact-amazon-note {margin-top: 48px;}
}