@layer pages {
  /* mattemotto: una sola hoja de coordenadas. el estudio recibe con cita previa. */

  /* ─────────────────────────────────────────────────────────────
     S1 · PAGE HEAD — bone
     ───────────────────────────────────────────────────────────── */
  .contacto-head {
    grid-column: 1 / span 9;
    padding-block: var(--space-2xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .contacto-head__title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--fs-800);
    line-height: 1.0;
    letter-spacing: -0.028em;
    color: var(--ink);
    text-wrap: balance;
  }
  .contacto-head__lede {
    margin: 0;
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--on-bone-quiet);
    max-inline-size: 56ch;
  }
  @media (aspect-ratio < 1/1) {
    .contacto-head { grid-column: 1 / -1; }
  }

  /* ─────────────────────────────────────────────────────────────
     S2 · CONTACT CARD — cyan
     ───────────────────────────────────────────────────────────── */
  .section--cyan .contact {
    grid-column: 3 / span 8;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .contact__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--ink);
  }
  .contact__head .eyebrow { color: var(--ink); margin: 0; }
  .contact__coord {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-200);
    color: var(--ink);
    letter-spacing: var(--tracking-mono);
    font-variant-numeric: tabular-nums;
  }

  /* — the dl proper. Every row is a 12ch caps label · value pair, 1px navy hairline below. — */
  dl.contact {
    margin: 0;
    padding: 0;
  }
  .contact__row {
    display: grid;
    grid-template-columns: 12ch 1fr;
    column-gap: var(--space-lg);
    align-items: baseline;
    padding-block: clamp(0.85rem, 1.6vw, 1.2rem);
    border-block-end: 1px solid var(--ink);
  }
  .contact__row dt {
    font-family: var(--font-sans);
    font-size: var(--fs-mono-100);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--ink);
  }
  .contact__row dd {
    margin: 0;
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
    color: var(--ink);
  }
  .contact__row a {
    color: var(--ink);
    text-decoration-color: var(--ink);
  }
  .section--cyan .contact__row a:hover { text-decoration-color: var(--orange); }

  /* — phone numbers · mono tabular, navy, weight-emphasized at two sizes. — */
  .contact__tel {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink);
    line-height: 1.0;
  }
  .contact__tel--1 { font-size: var(--fs-600); }
  .contact__tel--2 { font-size: var(--fs-500); }
  .contact__email  { font-size: var(--fs-400); font-weight: 600; }

  .contact__redes a { font-weight: 600; }
  .contact__sep { color: var(--ink); margin-inline: 0.4em; opacity: 0.6; }

  @media (aspect-ratio < 1/1) {
    .section--cyan .contact { grid-column: 1 / -1; }
    .contact__head { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  }
  @media (aspect-ratio < 3/4) {
    .contact__row {
      grid-template-columns: 1fr;
      row-gap: var(--space-2xs);
    }
    .contact__tel--1 { font-size: clamp(1.6rem, 7vw, 2rem); }
    .contact__tel--2 { font-size: clamp(1.3rem, 5.6vw, 1.6rem); }
  }

  /* ─────────────────────────────────────────────────────────────
     S3 · MAP PLATE — bone
     ───────────────────────────────────────────────────────────── */
  /* mattemotto: el plano flush a la derecha. pequeño, deliberado, no aplastante. */
  .contact-map {
    grid-column: 6 / span 7;
    margin: 0;
    position: relative;
    border: 1px solid var(--ink);
    background: var(--bone);
    display: flex;
    flex-direction: column;
  }
  .contact-map iframe {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    display: block;
    /* Tune the Google Maps palette toward the site's chord. Embed API
       doesn't accept Style JSON (JS-only), so this is composed filters.
       Heavier desaturation flattens land + parks toward bone; sepia adds
       a warm undertone that matches the cream surface; hue-rotate then
       swings the water back toward cyan; contrast keeps roads and labels
       legible against the muted ground. mattemotto: papel, no satélite. */
    filter:
      grayscale(0.3)
      sepia(0.2)
      saturate(0.55)
      hue-rotate(170deg)
      contrast(1.12)
      brightness(0.96);
  }
  .contact-map__caption {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-block-end: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-100);
    color: var(--on-bone-quiet);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
  }

  .contact-cta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-xl);
    border-block-start: 1px solid var(--ink);
  }

  @media (1/1 <= aspect-ratio < 4/3) {
    .contact-map { grid-column: 5 / span 8; }
    .contact-map iframe { aspect-ratio: 4 / 3; }
  }
  @media (3/4 <= aspect-ratio < 1/1) {
    .contact-map { grid-column: 1 / -1; }
    .contact-map iframe { aspect-ratio: 4 / 3; }
  }
  @media (aspect-ratio < 3/4) {
    .contact-map { grid-column: 1 / -1; }
    .contact-map iframe { aspect-ratio: 4 / 5; }
  }

  /* mattemotto: el plano dice una sola dirección. la dirección dice todo. */
}