@layer pages {
  /* mattemotto: la bicicleta se dibuja sola — pero solo si los ejes alinean. */

  /* ─────────────────────────────────────────────────────────────
     02 · HERO — full-bleed cyclist + orange BikeFit wordmark
     ───────────────────────────────────────────────────────────── */
  .hero {
    position: relative;
    min-block-size: clamp(78svh, 86svh, 92svh);
    display: grid;
    align-items: center;
    color: var(--on-ink);
    background: var(--ink);
    overflow: clip;
    isolation: isolate;
  }
  /* mattemotto: cinco diapositivas, una sola GPU, cero JavaScript. */
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: clip;
  }
  .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* will-change isolates each slide as a GPU layer for cheap compositing */
    will-change: transform, opacity;
    /* the cross-fade envelope — staggered via animation-delay below */
    animation: hero-slide 40s linear infinite both;
  }
  .hero__slide img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: contrast(1.04) saturate(0.94);
    /* the Ken Burns motion lives here so it composes cleanly with opacity */
    will-change: transform;
    animation: ken-burns 40s linear infinite both;
  }

  /* 5 slides, each picks up an 8-second slot · negative delays = "fast-forwarded into the loop" */
  .hero__slide:nth-child(1)     { animation-delay:    0s; }
  .hero__slide:nth-child(2)     { animation-delay:   -8s; }
  .hero__slide:nth-child(3)     { animation-delay:  -16s; }
  .hero__slide:nth-child(4)     { animation-delay:  -24s; }
  .hero__slide:nth-child(5)     { animation-delay:  -32s; }
  .hero__slide:nth-child(1) img { animation-delay:    0s; transform-origin: 60% 50%; }
  .hero__slide:nth-child(2) img { animation-delay:   -8s; transform-origin: 30% 60%; }
  .hero__slide:nth-child(3) img { animation-delay:  -16s; transform-origin: 70% 30%; }
  .hero__slide:nth-child(4) img { animation-delay:  -24s; transform-origin: 40% 40%; }
  .hero__slide:nth-child(5) img { animation-delay:  -32s; transform-origin: 55% 65%; }

  /* opacity envelope: fade-in 0→2.5%, hold to 17.5%, fade-out by 20% · rest of cycle = 0 */
  @keyframes hero-slide {
    0%    { opacity: 0; }
    2.5%  { opacity: 1; }
    17.5% { opacity: 1; }
    20%   { opacity: 0; }
    100%  { opacity: 0; }
  }

  /* translate3d (not translate) keeps the image layer on the GPU compositor */
  @keyframes ken-burns {
    0%   { transform: scale(1.04) translate3d(0, 0, 0); }
    20%  { transform: scale(1.10) translate3d(-1.2%, -0.8%, 0); }
    100% { transform: scale(1.04) translate3d(0, 0, 0); }
  }

  /* horizontal cyan curtain — strong on the left where the text density sits, dissolves on the right.
     interpolated in oklab so the falloff is perceptual, not a flat sRGB ramp. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(in oklab to right,
      rgba(0,  80, 120, 0.92) 0%,
      rgba(0, 100, 142, 0.82) 30%,
      rgba(0, 120, 162, 0.55) 55%,
      rgba(0, 140, 186, 0.22) 78%,
      rgba(0, 140, 186, 0.00) 100%
    );
  }
  /* fallback for engines without `in oklab` interpolation · hand-tuned easing stops */
  @supports not (background: linear-gradient(in oklab to right, red, blue)) {
    .hero::before {
      background: linear-gradient(to right,
        rgba(0,  80, 120, 0.92) 0%,
        rgba(0,  88, 130, 0.88) 12%,
        rgba(0, 100, 142, 0.82) 30%,
        rgba(0, 110, 152, 0.70) 42%,
        rgba(0, 120, 162, 0.55) 55%,
        rgba(0, 130, 174, 0.38) 68%,
        rgba(0, 140, 186, 0.22) 78%,
        rgba(0, 140, 186, 0.10) 90%,
        rgba(0, 140, 186, 0.00) 100%
      );
    }
  }
  /* second wash · vertical ink at the base, anchors the seam into the next section */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, transparent 60%, rgba(0,22,33,0.55) 100%);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__slide,
    .hero__slide img { animation: none !important; }
    .hero__slide:first-child { opacity: 1; }
    .hero__slide:not(:first-child) { display: none; }
  }
  .hero__grid { padding-block: clamp(4rem, 8vw, 7rem); }
  .hero__copy {
    grid-column: 1 / span 8;
    position: relative;
    padding: clamp(1.5rem, 2.6vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2vw, 1.75rem);
    max-inline-size: 64rem;
  }
  .hero__copy .eyebrow { color: var(--orange); }
  .hero__title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .hero__title .wordmark { line-height: 0.9; }
  .hero__subtitle {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--fs-700);
    line-height: 0.98;
    letter-spacing: -0.022em;
    color: var(--on-ink);
  }
  .hero__lede {
    margin: 0;
    max-inline-size: 42ch;
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--on-ink-quiet);
  }
  .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-sm); }

  /* corner ticks on the wordmark plate · the ONE micrographic the hero earns */
  .hero__tic {
    position: absolute;
    inline-size: 0.85rem;
    block-size: 0.85rem;
    border: 1px solid var(--orange);
    pointer-events: none;
  }
  .hero__tic--tl { inset-block-start: 0; inset-inline-start: 0; border-block-end: 0; border-inline-end: 0; }
  .hero__tic--tr { inset-block-start: 0; inset-inline-end: 0;   border-block-end: 0; border-inline-start: 0; }
  .hero__tic--bl { inset-block-end: 0;   inset-inline-start: 0; border-block-start: 0; border-inline-end: 0; }
  .hero__tic--br { inset-block-end: 0;   inset-inline-end: 0;   border-block-start: 0; border-inline-start: 0; }

  @media (aspect-ratio < 3/4) {
    .hero__copy { grid-column: 1 / -1; padding: var(--space-lg); }
    .hero__subtitle { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
  }

  /* ─────────────────────────────────────────────────────────────
     03 · BENEFICIOS — cyan panel
     ───────────────────────────────────────────────────────────── */
  .benef__head {
    grid-column: 1 / span 9;
    margin-block-end: clamp(2rem, 4vw, 3rem);
  }
  .benef__title {
    margin: var(--space-md) 0 0;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--ink);
    text-wrap: balance;
  }
  .benef__rule {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-md) 0 0;
  }
  .benef__rule-line { flex: 0 0 clamp(2.5rem, 5vw, 4rem); block-size: 1px; background: var(--ink); opacity: 0.7; }
  .benef__rule-label { font-size: var(--fs-mono-100); color: var(--ink); letter-spacing: var(--tracking-mono); }

  .benefits {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0;
  }
  .benefit {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem);
    border-inline-start: 1px solid var(--hairline-on-cyan);
  }
  .benefit:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .benefit:last-child  { padding-inline-end: 0; }
  .benefit__icon {
    block-size: clamp(56px, 7vw, 88px);
    inline-size: clamp(42px, 5.22vw, 66px);
    aspect-ratio: 243 / 326;
    object-fit: contain;
    object-position: left center;
  }
  .benefit__name {
    margin: 0;
    font-size: var(--fs-500);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.018em;
  }
  .benefit__body {
    margin: 0;
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
    color: var(--on-cyan-quiet);
    max-inline-size: 36ch;
  }
  @media (aspect-ratio < 1/1) {
    .benefits { grid-template-columns: 1fr; }
    .benefit { border-inline-start: 0; padding-inline-start: 0; padding-inline-end: 0; border-block-start: 1px solid var(--hairline-on-cyan); }
    .benefit:first-child { border-block-start: 0; padding-block-start: 0; }
  }

  /* ─────────────────────────────────────────────────────────────
     04 · DISCIPLINAS — ink strip
     ───────────────────────────────────────────────────────────── */
  .disc__head {
    grid-column: 1 / span 9;
    margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .disc__title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.022em;
    color: var(--on-ink);
  }
  .disc {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-block-start: 1px solid var(--hairline-on-ink);
  }
  .disc__col {
    padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.75rem) clamp(1.5rem, 2.5vw, 2rem) 0;
    border-inline-end: 1px solid var(--hairline-on-ink);
  }
  .disc__col:nth-child(n+2) { padding-inline-start: clamp(1rem, 2vw, 1.75rem); }
  .disc__col:last-child { border-inline-end: 0; }
  .disc__name {
    margin: 0 0 var(--space-md);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--fs-500);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--orange);
    line-height: 1;
  }
  .disc__name span {
    font-weight: 500;
    color: color-mix(in oklab, var(--orange) 70%, transparent);
    font-size: 0.7em;
  }
  .disc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .disc__list li {
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
    color: var(--on-ink-quiet);
    padding-inline-start: 1.4em;
    position: relative;
  }
  .disc__list li::before {
    content: "—";
    position: absolute;
    inset-inline-start: 0;
    color: var(--cyan-bright);
  }
  @media (aspect-ratio < 1/1) {
    .disc { grid-template-columns: 1fr; }
    .disc__col { border-inline-end: 0; border-block-end: 1px solid var(--hairline-on-ink); padding-inline-start: 0 !important; padding-inline-end: 0; }
    .disc__col:last-child { border-block-end: 0; }
  }

  /* ─────────────────────────────────────────────────────────────
     05 · VIDEO PROMO — cyan
     ───────────────────────────────────────────────────────────── */
  .video__head {
    grid-column: 1 / span 9;
    margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .video__title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
  }
  .video-block {
    grid-column: 2 / span 10;
    margin: 0;
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ink);
    overflow: clip;
    border: 1px solid var(--hairline-on-cyan);
  }
  .video-block video,
  .video-block__poster {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .video-block video { z-index: 1; }
  .video-block__poster { z-index: 2; cursor: pointer; transition: opacity var(--dur-medium) var(--ease-out-quint); }
  .video-block[data-state="playing"] .video-block__poster { opacity: 0; pointer-events: none; }
  .video-block[data-state="paused"]  .video-block__poster { opacity: 0; pointer-events: none; }
  .video-block__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    inline-size: clamp(4rem, 7vw, 5.5rem);
    aspect-ratio: 1;
    background: var(--orange);
    color: var(--ink);
    border: 0;
    cursor: pointer;
    transition: opacity var(--dur-medium) var(--ease-out-quint), background-color var(--dur-quick) var(--ease-out-quint);
  }
  .video-block__play svg { inline-size: 38%; block-size: 38%; margin: auto; fill: currentColor; }
  .video-block[data-state="playing"] .video-block__play { opacity: 0; pointer-events: none; }
  /* mattemotto: el play se acuesta en tinta, no se incendia. */
  .video-block__play:hover {
    background: var(--ink);
    color: var(--bone);
  }
  .video-block__play:hover svg { fill: var(--bone); }

  /* — live timecode · sits in the head above the video figure, not on top of it. — */
  /* mattemotto: el reloj vive arriba. la imagen no es una placa de coche. */
  .video__timecode {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-200);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    letter-spacing: var(--tracking-mono);
    opacity: 0.85;
    transition: opacity var(--dur-medium) var(--ease-out-quint);
  }
  .video__head:has(~ .video-block[data-state="playing"]) .video__timecode {
    opacity: 1;
  }
  .video__time-current,
  .video__time-total {
    font-variant-numeric: tabular-nums;
  }
  .video__time-sep { opacity: 0.45; }
  /* a soft pulse on the current-time tick while the video is playing */
  @supports selector(:has(*)) {
    .video__head:has(~ .video-block[data-state="playing"]) .video__time-current {
      animation: tc-pulse 1s var(--ease-out-quint) infinite alternate;
    }
  }
  @keyframes tc-pulse {
    from { opacity: 0.85; }
    to   { opacity: 1.0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .video__time-current { animation: none !important; }
  }
  @media (aspect-ratio < 1/1) {
    .video-block { grid-column: 1 / -1; }
  }

  /* ─────────────────────────────────────────────────────────────
     06 · FULL-BLEED CYCLIST BREAK
     ───────────────────────────────────────────────────────────── */
  #break::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(0,22,33,0.10) 0%, rgba(0,22,33,0.60) 100%);
    pointer-events: none;
  }

  /* mattemotto: la foto respira contra el scroll. el ojo persigue, no se duerme. */
  @supports (animation-timeline: scroll()) {
    #break {
      view-timeline-name: --break;
      view-timeline-axis: block;
    }
    #break > picture img {
      animation: photo-parallax 1s linear both;
      animation-timeline: --break;
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }
    /* mattemotto: lineal por fuera, eased por la forma. el scroll manda, el ojo respira. */
    @keyframes photo-parallax {
      0%   { transform: scale(1.18) translate3d(0, -12%, 0); }
      50%  { transform: scale(1.18) translate3d(0,   0%, 0); }
      100% { transform: scale(1.18) translate3d(0,  12%, 0); }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #break > picture img { animation: none !important; transform: scale(1.06) translate3d(0, 0, 0); }
  }
  .break__grid {
    position: relative;
    z-index: 1;
    block-size: 100%;
    align-content: end;
    padding-block: clamp(2rem, 5vw, 4rem);
  }
  .break__quote {
    grid-column: 2 / span 7;
    margin: 0;
    color: var(--bone);
  }
  .break__quote blockquote {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.018em;
    text-wrap: balance;
    max-inline-size: 38ch;
  }
  .break__quote figcaption {
    margin-block-start: var(--space-md);
    color: var(--cyan-bright);
  }
  @media (aspect-ratio < 3/4) {
    .break__quote { grid-column: 1 / -1; }
  }

  /* ─────────────────────────────────────────────────────────────
     07 · MÜVE INFO — cyan panel
     ───────────────────────────────────────────────────────────── */
  .muve-info__head {
    grid-column: 1 / span 6;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .muve-info__title {
    margin: 0;
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.028em;
    color: var(--ink);
    text-wrap: balance;
  }
  .muve-info__title em { font-style: italic; font-weight: 600; color: color-mix(in oklab, var(--ink) 80%, transparent); }
  .muve-info__body {
    margin: 0;
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--ink);
    max-inline-size: 48ch;
  }
  .muve-info__body em { font-style: italic; font-weight: 600; }
  .muve-spec {
    grid-column: 8 / span 5;
    margin: 0;
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--hairline-on-cyan);
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-xl);
    row-gap: var(--space-sm);
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-200);
  }
  .muve-spec > div { display: contents; }
  .muve-spec dt .caps { color: var(--ink); font-size: var(--fs-mono-100); }
  .muve-spec dd { margin: 0; color: var(--ink); }
  .muve-spec__rule {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .muve-spec__rule > span:first-child,
  .muve-spec__rule > span:last-child {
    flex: 0 0 clamp(1.5rem, 3vw, 3rem);
    block-size: 1px;
    background: var(--ink);
    opacity: 0.6;
  }
  @media (aspect-ratio < 1/1) {
    .muve-info__head { grid-column: 1 / -1; }
    .muve-spec { grid-column: 1 / -1; }
  }

  /* ─────────────────────────────────────────────────────────────
     08 · MÜVE DRAWING ON INK — THE WOW
     ───────────────────────────────────────────────────────────── */
  .muve__head {
    margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .muve__head .eyebrow { color: var(--orange); }
  .muve__caption-top { color: var(--on-ink-quiet); font-size: var(--fs-mono-100); }
  .muve__caption-bot {
    margin-block-start: clamp(1rem, 2vw, 1.5rem);
    color: var(--on-ink-quiet);
    font-size: var(--fs-mono-100);
    text-align: end;
  }

  /* The stage is a padded frame: the SVG sits inside the content box, and
     corner ticks + dimension labels live in the padding around it. Padding
     scales with viewport so on phones the decorations don't bleed off-screen
     (the previous approach used negative `inset` offsets that overflowed the
     stage at narrow widths). */
  .muve-stage {
    --muve-pad-x: clamp(1.6rem, 4.2vw, 3.6rem);
    --muve-pad-y: clamp(1.6rem, 3vw, 2.6rem);
    position: relative;
    inline-size: min(72rem, 96%);
    margin-inline: auto;
    padding: var(--muve-pad-y) var(--muve-pad-x);
  }
  .muve-stage svg {
    display: block;
    inline-size: 100%;
    aspect-ratio: 920 / 591;
    overflow: visible;
  }

  /* — The original draws itself, line by line. JS splits Carlos's 103
     subpath compound into one <path> per subpath, sorted longest first,
     each with its own stroke-dasharray equal to that subpath's length,
     and PUTS THEM IN A MASK. The visible element is the fill compound
     (cyan, fill-rule:evenodd, the original SVG appearance). The mask
     starts opaque-black (fill hidden), and as each white-stroked subpath
     draws in via stroke-dashoffset, that perimeter's region of the fill
     becomes visible. Only the final-state geometry is ever shown — the
     drafting feel comes from the mask reveal, not from a separate
     wireframe layer that would render every perimeter as a doubled
     outline and read as two overlapping bikes.
     mattemotto: él dibujó cada curva. ahora la máscara las descubre. */
  .muve-stage .muve-fill {
    fill: var(--cyan-bright);
  }
  /* Mask subpaths — invisible to the user, only used as luminance source.
     Stroke-width is in viewBox units; 4 covers the ~1u fill thickness on
     either side of the perimeter, so the band is fully revealed once the
     stroke draws over it. */
  .muve-stage .muve-mask-line {
    fill: none;
    stroke: white;
    stroke-width: 4;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .muve-stage.is-drawing .muve-mask-line {
    animation: muve-line var(--dur, 700ms) var(--ease-out-quint) var(--delay, 0ms) forwards;
  }
  @keyframes muve-line { to { stroke-dashoffset: 0; } }

  /* corner ticks · 4 orange L-marks framing the SVG · sit inside the stage
     padding, so they're always visible regardless of viewport. */
  .muve-stage__tic {
    position: absolute;
    inline-size: clamp(0.9rem, 1.4vw, 1.4rem);
    block-size: clamp(0.9rem, 1.4vw, 1.4rem);
    border: 1px solid var(--orange);
    pointer-events: none;
  }
  .muve-stage__tic--tl { inset-block-start: 0; inset-inline-start: 0; border-block-end: 0; border-inline-end: 0; }
  .muve-stage__tic--tr { inset-block-start: 0; inset-inline-end: 0;   border-block-end: 0; border-inline-start: 0; }
  .muve-stage__tic--bl { inset-block-end: 0;   inset-inline-start: 0; border-block-start: 0; border-inline-end: 0; }
  .muve-stage__tic--br { inset-block-end: 0;   inset-inline-end: 0;   border-block-start: 0; border-inline-start: 0; }

  /* dimension labels · mono, on cyan · positioned inside the stage padding */
  .muve-stage__dim {
    position: absolute;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-100);
    color: var(--cyan-bright);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .muve-stage__dim--w { inset-block-end: 0.2rem; inset-inline-start: 50%; transform: translateX(-50%); }
  .muve-stage__dim--h {
    inset-inline-start: 0.2rem;
    inset-block-start: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: 0% 50%;
  }
  /* Phones — the rotated 560 mm label hugs the left padding gutter; counter
     the rotation origin so it stays vertically centered on the bike. */
  @media (aspect-ratio < 3/4) {
    .muve-stage__dim--h {
      inset-inline-start: 0.4rem;
      transform: translateY(-50%) rotate(-90deg);
      transform-origin: 50% 50%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .muve-stage .muve-mask-line { stroke-dashoffset: 0 !important; animation: none !important; }
  }

  /* ─────────────────────────────────────────────────────────────
     09 · INFORMACIÓN — cyan panel + GARANTIZADO plate
     ───────────────────────────────────────────────────────────── */
  .info__head {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-block-end: clamp(2rem, 4vw, 3rem);
  }
  .info__title {
    margin: 0;
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.028em;
    color: var(--ink);
    text-wrap: balance;
  }
  .info__manifesto {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .info__manifesto p {
    margin: 0;
    font-size: var(--fs-400);
    line-height: var(--lh-prose);
    color: var(--ink);
    max-inline-size: 56ch;
  }
  .warranty-plate {
    grid-column: 9 / span 4;
    grid-row: span 2;
    align-self: start;
    position: relative;
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
    border: 1px solid var(--ink);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .warranty-plate__label { color: var(--ink); font-size: var(--fs-mono-200); }
  .warranty-plate__value {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: -0.022em;
  }
  .warranty-plate__note {
    margin: 0;
    font-size: var(--fs-200);
    color: var(--on-cyan-quiet);
  }
  .warranty-plate__tic {
    position: absolute;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border: 1px solid var(--orange);
    pointer-events: none;
  }
  .warranty-plate__tic--tl { inset-block-start: -1px; inset-inline-start: -1px; border-block-end: 0; border-inline-end: 0; }
  .warranty-plate__tic--tr { inset-block-start: -1px; inset-inline-end: -1px;   border-block-end: 0; border-inline-start: 0; }
  .warranty-plate__tic--bl { inset-block-end: -1px;   inset-inline-start: -1px; border-block-start: 0; border-inline-end: 0; }
  .warranty-plate__tic--br { inset-block-end: -1px;   inset-inline-end: -1px;   border-block-start: 0; border-inline-start: 0; }

  @media (aspect-ratio < 1/1) {
    .info__head, .info__manifesto { grid-column: 1 / -1; }
    .warranty-plate { grid-column: 1 / -1; grid-row: auto; margin-block-start: var(--space-lg); }
  }
}