@layer pages {
  /* mattemotto: cinco protocolos. el precio es la primera palabra honesta. */

  /* ─────────────────────────────────────────────────────────────
     S1 · PAGE HEAD — bone, default surface
     ───────────────────────────────────────────────────────────── */
  .serv-head {
    grid-column: 1 / span 9;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-block-end: var(--space-xl);
  }
  .serv-head__title {
    margin: 0;
    font-size: var(--fs-800);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.028em;
    color: var(--ink);
    text-wrap: balance;
  }
  .serv-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) {
    .serv-head { grid-column: 1 / -1; }
  }

  /* ─────────────────────────────────────────────────────────────
     S2 · PRICE LADDER — bone surface, four protocols, hairline rows
     Big mono price (cols 1-3) · name + body (cols 4-9) · CTA (cols 10-12)
     ───────────────────────────────────────────────────────────── */
  .ladder__head {
    grid-column: 1 / span 9;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-block-end: clamp(1rem, 2vw, 1.75rem);
  }
  .ladder__heading {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: var(--ink);
  }

  .ladder {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--ink);
  }
  .ladder__row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    align-items: start;
    padding-block: clamp(1.75rem, 3.2vw, 2.6rem);
    border-block-end: 1px solid var(--hairline-on-bone);
  }

  /* big mono price · cols 1-3 */
  .ladder__price {
    grid-column: 1 / span 3;
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--fs-numeral);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--ink);
  }

  /* name + body · cols 4-9 */
  .ladder__copy {
    grid-column: 4 / span 6;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .ladder__id {
    margin: 0;
    font-size: var(--fs-mono-100);
    color: var(--orange);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
  }
  .ladder__name {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: var(--ink);
  }
  .ladder__sub {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-200);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--on-bone-quiet);
  }
  .ladder__body {
    margin: var(--space-xs) 0 0;
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
    color: var(--ink);
    max-inline-size: 52ch;
  }
  .ladder__includes {
    list-style: none;
    margin: var(--space-sm) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .ladder__includes li {
    font-size: var(--fs-200);
    line-height: var(--lh-snug);
    color: var(--on-bone-quiet);
    padding-block: var(--space-xs);
    padding-inline-start: 1.4em;
    position: relative;
    border-block-start: 1px solid var(--hairline-on-bone);
    max-inline-size: 56ch;
  }
  .ladder__includes li:first-child { border-block-start: 0; }
  .ladder__includes li::before {
    content: "—";
    position: absolute;
    inset-inline-start: 0;
    color: var(--orange);
    font-family: var(--font-mono);
  }

  /* CTA · cols 10-12, right-aligned */
  .ladder__cta {
    grid-column: 10 / span 3;
    justify-self: end;
    align-self: start;
    font-family: var(--font-sans);
    font-size: var(--fs-200);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    padding-block: var(--space-xs);
    border-block-end: 1px solid var(--ink);
    transition:
      color var(--dur-quick) var(--ease-out-quint),
      border-color var(--dur-quick) var(--ease-out-quint);
  }
  .ladder__cta:hover {
    color: var(--orange);
    border-block-end-color: var(--orange);
  }
  .ladder__arrow {
    display: inline-block;
    margin-inline-start: 0.4em;
    font-weight: 500;
    transition: transform var(--dur-quick) var(--ease-out-quint);
  }
  .ladder__cta:hover .ladder__arrow { transform: translateX(0.2em); }

  @media (3/4 <= aspect-ratio < 1/1) {
    .ladder__row { grid-template-columns: repeat(8, 1fr); }
    .ladder__price { grid-column: 1 / span 3; }
    .ladder__copy { grid-column: 4 / span 5; }
    .ladder__cta { grid-column: 1 / -1; justify-self: start; margin-block-start: var(--space-md); }
  }
  @media (aspect-ratio < 3/4) {
    .ladder__row {
      grid-template-columns: 1fr;
      row-gap: var(--space-md);
    }
    .ladder__price,
    .ladder__copy,
    .ladder__cta { grid-column: 1 / -1; }
    .ladder__cta { justify-self: start; }
    .ladder__price { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  }

  /* ─────────────────────────────────────────────────────────────
     S3 · FEATURED 002 — cyan surface, navy text, MÜVE silhouette
     ───────────────────────────────────────────────────────────── */
  .featured__grid {
    row-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .featured__head {
    grid-column: 1 / span 6;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-lg);
    row-gap: var(--space-xs);
    align-items: baseline;
  }
  .featured__head .eyebrow { grid-column: 1 / -1; }
  .featured__id {
    grid-column: 1;
    margin: 0;
    font-size: var(--fs-mono-200);
    color: var(--ink);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    align-self: end;
    padding-block-end: 0.4em;
  }
  .featured__name {
    grid-column: 2;
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.0;
    letter-spacing: -0.028em;
    color: var(--ink);
    text-wrap: balance;
  }
  .featured__price {
    grid-column: 1 / -1;
    margin: var(--space-sm) 0 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(2.4rem, 4.6vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
  }
  .featured__price-suffix {
    font-family: var(--font-sans);
    font-size: var(--fs-mono-200);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    color: var(--ink);
  }

  .featured__copy {
    grid-column: 1 / span 6;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .featured__body {
    margin: 0;
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--ink);
    max-inline-size: 48ch;
  }
  .featured__body em { font-style: italic; font-weight: 600; }
  .featured__includes {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-block-start: 1px solid var(--hairline-on-cyan);
  }
  .featured__includes li {
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
    color: var(--ink);
    padding-block: var(--space-sm);
    padding-inline-start: 1.6em;
    position: relative;
    border-block-end: 1px solid var(--hairline-on-cyan);
    max-inline-size: 56ch;
  }
  .featured__includes li::before {
    content: "—";
    position: absolute;
    inset-inline-start: 0;
    color: var(--ink);
    font-family: var(--font-mono);
  }
  .featured__note {
    margin: 0;
    font-size: var(--fs-200);
    color: var(--on-cyan-quiet);
    max-inline-size: 56ch;
  }
  .featured__note em { font-style: italic; }
  .featured__cta { align-self: flex-start; margin-block-start: var(--space-sm); }

  /* MÜVE silhouette · cols 8-12, with corner ticks */
  .featured__silhouette {
    grid-column: 8 / span 5;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
    position: relative;
    padding: clamp(1rem, 2vw, 1.75rem);
  }
  .featured__silhouette img {
    inline-size: 100%;
    block-size: auto;
    object-fit: contain;
    /* tint the source SVG dark on the cyan surface — it ships as a stroked dark drawing,
       so default rendering reads as navy on cyan. no filter needed. */
  }
  /* mattemotto: mira hacia adentro de la página, no hacia el borde. */
  .featured__silhouette--mirrored img {
    transform: scaleX(-1) translateZ(0);
  }
  .featured__caption {
    margin: var(--space-sm) 0 0;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-100);
    color: var(--ink);
    letter-spacing: var(--tracking-mono);
    text-align: end;
  }
  .featured__tic {
    position: absolute;
    inline-size: 0.85rem;
    block-size: 0.85rem;
    border: 1px solid var(--ink);
    pointer-events: none;
  }
  .featured__tic--tl { inset-block-start: 0; inset-inline-start: 0; border-block-end: 0; border-inline-end: 0; }
  .featured__tic--tr { inset-block-start: 0; inset-inline-end: 0;   border-block-end: 0; border-inline-start: 0; }
  .featured__tic--bl { inset-block-end: 0;   inset-inline-start: 0; border-block-start: 0; border-inline-end: 0; }
  .featured__tic--br { inset-block-end: 0;   inset-inline-end: 0;   border-block-start: 0; border-inline-start: 0; }

  @media (3/4 <= aspect-ratio < 1/1) {
    .featured__head,
    .featured__copy { grid-column: 1 / -1; }
    .featured__silhouette { grid-column: 1 / -1; grid-row: auto; }
  }
  @media (aspect-ratio < 3/4) {
    .featured__head,
    .featured__copy,
    .featured__silhouette { grid-column: 1 / -1; grid-row: auto; }
    .featured__head { grid-template-columns: 1fr; }
    .featured__id, .featured__name { grid-column: 1; }
  }

  /* ─────────────────────────────────────────────────────────────
     S4 · TOURS — ink surface
     ───────────────────────────────────────────────────────────── */
  .tours__head {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-block-end: clamp(1rem, 2vw, 1.5rem);
  }
  .tours__title {
    margin: 0;
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.028em;
    color: var(--on-ink);
    text-wrap: balance;
  }
  .tours__body {
    grid-column: 1 / span 8;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
  .tours__body p {
    margin: 0;
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--on-ink-quiet);
    max-inline-size: 56ch;
  }
  .tours__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  @media (aspect-ratio < 1/1) {
    .tours__head, .tours__body { grid-column: 1 / -1; }
  }

  /* ─────────────────────────────────────────────────────────────
     S5 · GARANTÍA — centered plate, ink hairline border, orange L-ticks
     ───────────────────────────────────────────────────────────── */
  .warranty {
    grid-column: 3 / span 8;
    position: relative;
    padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .warranty__eyebrow {
    margin: 0;
    color: var(--orange);
  }
  .warranty__title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--fs-700);
    line-height: 1.05;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--ink);
  }
  .warranty__body {
    margin: 0 auto;
    font-size: var(--fs-300);
    line-height: var(--lh-prose);
    color: var(--on-bone-quiet);
    max-inline-size: 56ch;
  }
  .warranty__body strong { color: var(--ink); font-weight: 700; }

  /* 4 orange L-ticks at plate corners */
  .warranty__tic {
    position: absolute;
    inline-size: 0.85rem;
    block-size: 0.85rem;
    border: 1px solid var(--orange);
    pointer-events: none;
  }
  .warranty__tic--tl { inset-block-start: -1px; inset-inline-start: -1px; border-block-end: 0; border-inline-end: 0; }
  .warranty__tic--tr { inset-block-start: -1px; inset-inline-end: -1px;   border-block-end: 0; border-inline-start: 0; }
  .warranty__tic--bl { inset-block-end: -1px;   inset-inline-start: -1px; border-block-start: 0; border-inline-end: 0; }
  .warranty__tic--br { inset-block-end: -1px;   inset-inline-end: -1px;   border-block-start: 0; border-inline-start: 0; }

  @media (aspect-ratio < 1/1) {
    .warranty { grid-column: 1 / -1; }
  }

  /* mattemotto: la mesa nunca miente. el precio tampoco. */
}