/* ============================================================
   CATÁLOGO — one row per marque, no filter bar.
   Loads after mc-tokens.css and brandbook.css (which carries the
   mc-* components). At build time those move to site.css.
   ============================================================ */

:root{
  --m-sweep: 640ms;   /* the colour crossing a full row. Longer than --m-reveal
                         because it travels ~1100px: at 420ms it reads as a flash,
                         at 640 as a deliberate stroke. */
  --m-open: 420ms;    /* a band growing out to fill the screen. Same length as the
                         longest step on the shared ladder: this is one movement of
                         one edge, not a journey across the page like --m-sweep. */
  --cat-band-h: 92px;
}

/* ---- page ------------------------------------------------ */
.cat{ background:var(--mc-surface); }
.cat-wrap{ max-width:var(--mc-container); margin:0 auto; padding:0 var(--mc-gutter-m); }
@media (min-width:768px){ .cat-wrap{ padding:0 var(--mc-gutter-d); } }

.cat-head{ padding:var(--s-8) 0 var(--s-6); }
.cat-head h1{ margin:0 0 var(--s-3); font-size:var(--t-h1); line-height:1.06;
  letter-spacing:-.03em; font-weight:700; color:var(--mc-ink); text-wrap:balance; }
.cat-head p{ margin:0; font-size:var(--t-sub); color:var(--mc-ink-2); max-width:44ch; }
.cat-head__count{ display:block; margin-bottom:var(--s-2); font-size:var(--t-label);
  font-weight:500; letter-spacing:.010em; line-height:1.3; color:var(--mc-ink-3); }

/* ---- a marque row ----------------------------------------
   The row runs edge to edge; the grid inside keeps the container measure. The colour is
   painted behind everything and clipped from one side. The inner grid is repeated inside
   the fill carrying a white logo, so the mark lights up as the colour reaches it. */
.cat-row{ position:relative; overflow:hidden; }

.cat-row__fill{
  position:absolute; inset:0; z-index:0; background:var(--brand);
  clip-path:inset(0);          /* the finished state IS the base state: without JS the
                                  colour is simply there, and the white marks sit on it */
}
.cat-row__fill .cat-row__inner{ position:absolute; inset:0; }

/* the nib: a 2px edge travelling at the head of the colour, like a pen */
.cat-row__fill::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:2px;
  background:#FFFFFF; opacity:.55;
}
.cat-row--rtl .cat-row__fill::after{ right:auto; left:0; }

.cat-row__inner{
  position:relative; z-index:1;
  max-width:var(--mc-container); margin:0 auto;
  display:grid; grid-template-columns:14rem minmax(0,1fr); gap:var(--s-7);
  /* start, not center: the fill's copy spans the whole row while the real grid spans
     only its content, so centring would put the two logos apart */
  align-items:start; padding:var(--s-7) var(--mc-gutter-d);
}
.cat-row--rtl .cat-row__inner{ grid-template-columns:minmax(0,1fr) 14rem; }
.cat-row--rtl .cat-row__id{ grid-column:2; grid-row:1; }
.cat-row--rtl .cat-row__cars,
.cat-row--rtl .cat-row__none{ grid-column:1; grid-row:1; }

/* ---- the marque mark ------------------------------------- */
.cat-row__name{ margin:0; }
.cat-row__logo{
  display:block; width:100%; max-width:14rem; aspect-ratio:1;
  background:transparent;                       /* the white copy inside the fill shows through */
  -webkit-mask:var(--logo) center/contain no-repeat;
          mask:var(--logo) center/contain no-repeat;
}
.cat-row__fill .cat-row__logo{ background:#FFFFFF; }
.js .cat-row:not(.is-live) .cat-row__logo{ background:var(--mc-rule); }

.cat-row__lead{
  display:block; margin-top:var(--s-4);
  font-size:var(--t-small); color:rgba(255,255,255,.92);
  font-variant-numeric:tabular-nums;
}
.cat-row__lead b{ color:#FFFFFF; font-weight:600; }
.cat-row__fill .cat-row__lead{ visibility:hidden; }
.js .cat-row:not(.is-live) .cat-row__lead{ color:var(--mc-ink-2); }
.js .cat-row:not(.is-live) .cat-row__lead b{ color:var(--mc-ink); }

/* ---- the cars in a row ----------------------------------- */
.cat-row__cars{ display:grid; gap:var(--s-4); grid-template-columns:var(--cols); }
/* --- the column ladder ----------------------------------------------------
   Four cards, or three, decided by the width of the page and by nothing else.
   The same ladder governs the compact band and the opened screen, so a card is
   one size on this page rather than one size per state. */
:root{ --cols:1fr; }                                   /* under 560: one */
@media (min-width:560px){ :root{ --cols:1fr 1fr; } }   /* 560-899:  two */
@media (min-width:900px){ :root{ --cols:repeat(3,1fr); } }
@media (min-width:1200px){ :root{ --cols:repeat(4,1fr); } }
@media (min-width:900px){
  .cat-row__cars{ grid-template-columns:var(--cols); }
}
/* A mirrored row holding fewer cars than the ladder has columns starts far enough
   along that its last card finishes beside the mark, instead of leaving a hole there.
   max(1, …) matters: --n is the marque's whole count, so an eight-car marque asked
   for column 5-8 = -3, which does not exist. Chrome then reflows the band into two
   rows — the Mercedes row showing eight cars without anyone pressing "Ver los 8". */
@media (min-width:900px) and (max-width:1199px){
  .cat-row--rtl:not(.is-open) .cat-row__cars > :first-child{
    grid-column-start:max(1, calc(4 - var(--n, 3)));
  }
}
@media (min-width:1200px){
  .cat-row--rtl:not(.is-open) .cat-row__cars > :first-child{
    grid-column-start:max(1, calc(5 - var(--n, 4)));
  }
}
.cat-row__cars > *{ min-width:0; }

/* simpler card here than in the brandbook: photograph, model and year, price and
   mileage. Nothing else — the row already says the marque. */
:is(.cat-row,.home-rail) .mc-card__body{ padding:var(--s-3) var(--s-4) var(--s-4); gap:var(--s-2); }
:is(.cat-row,.home-rail) .mc-card__title span{ color:var(--mc-ink-3); font-weight:500; }
/* The card's second and third lines: what version this is, then the facts a buyer
   scans before the price — year, fuel, gearbox, power. Kilometres stay in the
   price box, once, large: it is the figure 41% of Spanish buyers call decisive
   and it does not get repeated as a chip. */
:is(.cat-row,.home-rail) .mc-card__body{ gap:var(--s-2); }
:is(.cat-row,.home-rail) .mc-card__sub{
  margin:0; font-size:var(--t-label); line-height:1.35; color:var(--mc-ink-3);
  /* No clamp: "2.0TDI · Furgoneta · FWD" was cut to an ellipsis at 900px, and no
     text on this site is cut. It wraps; the price row stays aligned because it is
     pushed to the card's foot (margin-top:auto) in a row of equal-height cards. */
}
:is(.cat-row,.home-rail) .mc-chips{ gap:var(--s-1); margin-top:var(--s-1); }
:is(.cat-row,.home-rail) .mc-chip{
  min-height:26px; padding:0 var(--s-2);
  background:var(--mc-band); color:var(--mc-ink-2);
  font-size:var(--t-label); font-weight:500; letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
:is(.cat-row,.home-rail) .mc-card--sold .mc-chip{ color:var(--mc-ink-3); }
:is(.cat-row,.home-rail) .mc-pair{ margin-top:var(--s-2); }

/* Every card in a row ends at the same line, whatever wraps inside it. The price
   box is pinned to the foot of the body, so a long name or a third row of chips
   pushes nothing but the space above the price. Stacked on a phone there is
   nothing to align, so the reserve is not made there. */
/* Cards sit side by side everywhere but one place — the opened marque on a phone,
   where they stack in one column. So the alignment is the rule and the stack is
   the exception, not the other way round: measured, the rail's price boxes were
   30–53px apart with the old gate. */
:is(.cat-row,.home-rail) .mc-card{ display:flex; flex-direction:column; }
:is(.cat-row,.home-rail) .mc-card__link, :is(.cat-row,.home-rail) .mc-card__body{ display:flex; flex-direction:column; flex:1 1 auto; }
:is(.cat-row,.home-rail) .mc-card__title{ min-height:2.6em; }
:is(.cat-row,.home-rail) .mc-pair{ margin-top:auto; padding-top:var(--s-2); }
@media (max-width:559px){
  .cat-row.is-open .mc-card__title{ min-height:0; }
  .cat-row.is-open .mc-pair{ margin-top:var(--s-2); }
}

.cat-row__none{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5); }
.cat-row__none p{ margin:0; font-size:var(--t-prose); color:#FFFFFF; max-width:44ch; }

.cat-row__note{ position:relative; z-index:1; max-width:var(--mc-container); margin:0 auto;
  padding:0 var(--mc-gutter-d) var(--s-6); font-size:var(--t-small); line-height:1.45;
  color:rgba(255,255,255,.92); }
.cat-row__note > span{ display:block; max-width:52ch; }
.js .cat-row:not(.is-live) .cat-row__note{ color:var(--mc-ink-2); }
.js .cat-row:not(.is-live) .cat-row__note b,
.js .cat-row:not(.is-live) .cat-row__note .mc-link{ color:var(--mc-ink); }
.cat-row__note b{ color:#FFFFFF; font-weight:600; }
.cat-row__note .mc-link{ color:#FFFFFF; }

.mc-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ============================================================
   THE SEQUENCE — frame by frame
   Nothing below runs without .js, so the page is complete without it.
   ============================================================ */
.js .cat-row .cat-row__fill{ clip-path:inset(0 100% 0 0); }
.js .cat-row--rtl .cat-row__fill{ clip-path:inset(0 0 0 100%); }
.js .cat-row .cat-row__lead{ opacity:0; }
.js .cat-row .cat-row__note{ opacity:0; }
/* the cards follow the stroke: they arrive from the side it came from, 16px out,
   so the row reads left-to-right or right-to-left as one movement */
.js .cat-row__cars > *,
.js .cat-row__none > *{ opacity:0; transform:translate(-16px, 10px); }
.js .cat-row--rtl .cat-row__cars > *,
.js .cat-row--rtl .cat-row__none > *{ transform:translate(16px, 10px); }

/* 0 → 640ms · the colour crosses the row.
   --e-inout, not --e-line: --e-line is calibrated for the 160px rule under a button,
   and over 1100px it puts three quarters of the travel in the last third — measured
   2.4% done at the halfway point, which reads as a jolt rather than a stroke. */
.js .cat-row.is-live .cat-row__fill{
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--m-sweep) var(--e-inout);
}
/* 560 → 640ms · the nib fades out as the colour lands, so nothing is left mid-stroke */
.js .cat-row.is-live .cat-row__fill::after{
  opacity:0; transition:opacity var(--m-quick) var(--e-out) calc(var(--m-sweep) - var(--m-quick));
}
/* 640 → 860ms · the count arrives once the row is whole */
.js .cat-row.is-live .cat-row__lead,
.js .cat-row.is-live .cat-row__note{
  opacity:1; transition:opacity var(--m-state) var(--e-out) var(--m-sweep);
}
/* 700ms + 70ms each · the cards follow the stroke, from the side it came from */
.js .cat-row.is-live .cat-row__cars > *,
.js .cat-row.is-live .cat-row__none > *{
  opacity:1; transform:none;
  transition:opacity var(--m-move) var(--e-out) var(--d),
             transform var(--m-move) var(--e-out) var(--d);
}

@media (prefers-reduced-motion:reduce){
  .js .cat-row .cat-row__fill{ clip-path:inset(0 0 0 0); }
  .js .cat-row .cat-row__lead{ opacity:1; }
  .js .cat-row__cars > *,.js .cat-row__none > *{ opacity:1; transform:none; }
  .js .cat-row .cat-row__fill::after{ opacity:0; }
}

/* ---- mobile: the band shrinks, the stroke stays ----------- */
@media (max-width:559px){
  :root{ --cat-band-h:72px; }
  .cat-row__inner{ grid-template-columns:minmax(0,1fr); gap:var(--s-5); padding:var(--s-6) var(--mc-gutter-m); }
  .cat-row__logo{ max-width:5.5rem; }
  .cat-row__note{ padding-inline:var(--mc-gutter-m); }
  .cat-row--rtl .cat-row__inner{ grid-template-columns:minmax(0,1fr); }
  .cat-row--rtl .cat-row__id,.cat-row--rtl .cat-row__cars,.cat-row--rtl .cat-row__none{ grid-column:1; grid-row:auto; text-align:left; }
  .cat-row__note{ padding-inline:var(--s-4); }
}

/* ---- an example card, never mistakable for stock ---------- */
/* ---- "Próximamente": an empty place in a marque's row ----------------------
   Reversed out of the row's colour rather than a white card: a white card with
   no photograph is a broken card, a ghost of one on the colour is a place kept.
   A dashed edge says "not filled yet" the way a parking bay does. Only white on
   the colour — the weakest marque, Porsche, is 5.4:1 for .92 white over the 8%
   ground. */
.mc-card--soon{ background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.55); box-shadow:none; }
.mc-card--soon .mc-card__link{ color:#FFFFFF; }
.mc-soon__frame{ position:relative; background:rgba(255,255,255,.06); display:grid; place-items:center; }
.mc-soon__mark{
  width:44%; aspect-ratio:1; background:rgba(255,255,255,.22);
  -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat;
  transition:background var(--m-quick) var(--e-out);
}
.mc-card--soon .mc-card__title{ color:#FFFFFF; }
.cat-row .mc-card--soon .mc-card__sub{ color:rgba(255,255,255,.92); font-size:var(--t-small); line-height:1.45;
  display:block; -webkit-line-clamp:unset; overflow:visible; }   /* a sentence, whole: never clamped */
.mc-soon__go{
  margin-top:auto; padding-top:var(--s-3);
  font-size:var(--t-small); font-weight:600; color:#FFFFFF;
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.6); text-underline-offset:3px;
}
.mc-card--soon:hover{ border-style:solid; border-color:#FFFFFF; }
.mc-card--soon:hover .mc-soon__mark{ background:rgba(255,255,255,.4); }
.mc-card--soon:hover .mc-soon__go{ text-decoration-color:#FFFFFF; }
.mc-card--soon .mc-card__link:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }
/* As many empty places as the band shows at that width, and no more: four from
   1200, three from 900, two on a phone rail — four empty cards to swipe through
   is a long way to say "nothing yet". */
@media (max-width:1199.98px){ .mc-card--soon:nth-child(n+4){ display:none; } }
@media (max-width:899.98px){ .mc-card--soon:nth-child(n+3){ display:none; } }


/* ---- the header below the desk ----------------------------------------------
   Five links now — Inicio, Coches, Quién soy, Contacto, Vende tu coche — because
   this design becomes the site and every page has to be one press from the top
   of any other. The brandbook's own header hides navigation behind a burger; this
   one does not: below 900px the row of links takes its own line under the logo,
   and that line SCROLLS sideways rather than wrapping. Wrapping is what made the
   header 148px tall at 320 with four links; a fifth would have made three rows.
   Measured after: 100px from 320 to 899, one line from 900 up. */
@media (max-width:899.98px){
  .mc-head > *{ flex-wrap:wrap; row-gap:var(--s-2); }
  .mc-head .mc-nav{
    order:3; width:100%; margin-right:0 !important;
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    /* the gutter is inside the scrolling box, so the last link is not cut at the edge */
    margin-inline:calc(-1 * var(--s-4)); padding-inline:var(--s-4); width:calc(100% + 2 * var(--s-4));
    /* a last-link fade says "there is more" without a widget */
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
            mask-image:linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
  }
  .mc-head .mc-nav::-webkit-scrollbar{ display:none; }
  .mc-head .mc-nav__i{ flex:0 0 auto; white-space:nowrap; }
  .mc-head .mc-logo{ margin-right:auto; }
}

/* ============================================================================
   The marque watermark
   A flat rectangle of colour is a swatch. The marque's own mark, enormous and
   barely present, turns it into a field with depth — the way a showroom wall
   carries the badge rather than a poster of it. 7% white: visible as texture,
   never as a second logo competing with the real one.
   ========================================================================= */
.cat-row__watermark{
  position:absolute; z-index:1; pointer-events:none;   /* above the fill, below the cards */
  top:50%; translate:0 -50%;
  inset-inline-end:-8rem; width:34rem; aspect-ratio:1;
  background:rgba(255,255,255,.07);
  -webkit-mask:var(--logo) center/contain no-repeat;
          mask:var(--logo) center/contain no-repeat;
}
.cat-row--rtl .cat-row__watermark{ inset-inline-end:auto; inset-inline-start:-8rem; }
@media (max-width:900px){ .cat-row__watermark{ width:20rem; } }

/* ---- "Ver todos" ---------------------------------------------------------
   Sits under the marque's own count, in the row's own colour reversed out, so
   it reads as part of the marque rather than as site furniture. */
.cat-row__all{
  display:inline-flex; align-items:center; gap:var(--s-2);
  margin-top:var(--s-4); min-height:44px; padding:0 var(--s-4);
  border:1px solid rgba(255,255,255,.45); border-radius:var(--mc-r);
  background:transparent; color:#FFFFFF;
  font:600 var(--t-small)/1 var(--f-ui); letter-spacing:.01em; cursor:pointer;
  transition:background var(--m-quick) var(--e-out), border-color var(--m-quick) var(--e-out);
}
.cat-row__all::after{ content:"→"; font-weight:400; transition:translate var(--m-quick) var(--e-out); }
.cat-row__all:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.75); }
.cat-row__all:hover::after{ translate:3px 0; }
.cat-row__all[aria-expanded="true"]::after{ content:"×"; }
.cat-row__all:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }

/* ============================================================================
   Open: the marque takes the whole screen
   The colour was already full-bleed; opening gives it the full height too, pins
   the mark in the corner while its cars pass, and lets the grid run as wide as
   it needs. Scrolling past the last car ends the section — the row returns to
   its band and the next marque follows, which is the collapse, done by the
   document rather than by a script fighting it.
   ========================================================================= */
/* ---- opening, frame by frame ---------------------------------------------
   One edge moves, and it is obvious which. The row is first carried to the top
   of the screen, so its upper edge is pinned against the viewport; then only the
   lower edge travels, down to the bottom. Reading it: "this band is growing to
   fill the screen", not "something reflowed".

     0ms     the click. The row starts rising to the top of the screen.
     0-420   min-height runs from the band's own height out to the full screen.
             The upper edge is already at the top and stays; the lower edge is
             the one you watch move.
     120-    the tone deepens from the top of the field to the bottom, which is
             what stops a screen-high rectangle of one colour from reading flat.
     220+    the cars that the band was hiding arrive, 60ms apart, in reading order.

   min-height, not height: the content still decides how tall the section really
   is once a marque has more cars than one screen holds. */
.cat-row.is-open{ min-height:100vh; min-height:100svh; }
/* The travel is animated on height, from JavaScript, because min-height cannot
   carry it: once the hidden cars are shown the content is taller than a screen,
   so the real height jumps and min-height never transitions at all. The script
   measures both ends and animates between the two measured values. */
.cat-row.is-sizing{ transition:height var(--m-open) var(--e-inout); }

/* the field gains depth once it is a whole screen: light stays at the top, the
   bottom sinks. Only downward, so every contrast measured on the flat colour
   still holds — nothing gets lighter than the colour that was checked. */
.cat-row.is-open .cat-row__fill{
  /* A ramp, not a line. Five stops so the fall accelerates the way light does —
     barely moving under the mark, steepest through the middle, settling at the
     foot — and so a screen-high field cannot band.

     The foot is at 62% of the colour. Judged by rendering 80 / 70 / 62 / 52 side
     by side on the lightest and darkest marques: at 80 the fall is invisible on
     the navy, and at 52 the marque is gone — Porsche's red turns brown. 62 is the
     last step that is unmistakably deeper while still unmistakably the marque.

     Downward only, always: the top of every open field is the flat colour that
     was measured, so the floor cannot move. Down the ramp white only improves —
     on Porsche, the lightest field, 6.22:1 at the top and 13.41:1 at the foot. */
  background:linear-gradient(180deg,
    var(--brand)                                 0%,
    color-mix(in oklab, var(--brand) 96%, #000) 22%,
    color-mix(in oklab, var(--brand) 88%, #000) 46%,
    color-mix(in oklab, var(--brand) 76%, #000) 68%,
    color-mix(in oklab, var(--brand) 62%, #000) 100%);
  transition:background var(--m-open) var(--e-out) 120ms;
}
/* the cars the band was hiding come in after the edge has travelled */
@media (min-width:769px){
  .js .cat-row.is-open .cat-row__cars > :nth-child(n+5){
    animation:cat-arrive var(--m-move) var(--e-out) backwards;
    animation-delay:calc(220ms + (var(--i, 0) * 60ms));
  }
}
@keyframes cat-arrive{ from{ opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion:reduce){
  .cat-row{ transition:none; }
  .cat-row.is-open .cat-row__fill{ transition:none; }
  .js .cat-row.is-open .cat-row__cars > *{ animation:none; }
}
.cat-row.is-open .cat-row__inner{ padding-block:var(--s-8) var(--s-9); align-items:start; }
.cat-row.is-open .cat-row__id{
  position:sticky; top:var(--s-7); align-self:start;
}
/* Never fixed: a fixed element is not clipped by the section's overflow:hidden,
   so the open marque's watermark stayed stuck to the screen and drifted over the
   rows below it — the Mercedes star turning up on the BMW blue. Absolute keeps it
   inside its own marque, which is the only place it means anything. */
.cat-row.is-open .cat-row__watermark{ position:absolute; top:50%; }
@media (min-width:1100px){
  .cat-row.is-open .cat-row__cars{
    grid-template-columns:var(--cols);
    align-content:start;
  }
  /* the pushed start only makes sense for a single short line of cars */
  .cat-row.is-open.cat-row--rtl .cat-row__cars > :first-child{ grid-column-start:auto; }
}
.cat-row.is-open .cat-row__note{ padding-bottom:var(--s-8); }

/* ============================================================================
   The compact row on a phone: a rail, not a stack
   Measured before changing it: five stacked rows ran 6980px — 8.3 screens for
   14 cars, with the average row at 1.56 screens, so a marque never fitted on
   one screen and the grouping that makes this page what it is was invisible.
   As a rail, the mark and its cars are seen together, which is the whole idea.
   ========================================================================= */
@media (max-width:768px), (max-height:520px) and (orientation:landscape){
  .cat-row:not(.is-open) .cat-row__cars{
    display:flex; gap:var(--s-3);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    /* the rail runs edge to edge, but its first card lines up with the text */
    margin-inline:calc(var(--mc-gutter-m) * -1);
    padding-inline:var(--mc-gutter-m);
    padding-bottom:var(--s-3);
    scrollbar-width:none;
  }
  .cat-row:not(.is-open) .cat-row__cars::-webkit-scrollbar{ display:none; }
  .cat-row:not(.is-open) .cat-row__cars > *{
    flex:0 0 72vw; max-width:19rem; scroll-snap-align:start;
  }
  .cat-row.is-open .cat-row__cars{ grid-template-columns:var(--cols); }
  .cat-row.is-open .cat-row__id{ position:static; }
}


/* ---- the compact row shows the first few, "Ver todos" shows the marque -----
   Only under .js: without JavaScript the button is not rendered, so hiding cards
   there would hide them for good. The base state stays the finished state. */
/* the band shows exactly one row of the ladder — four cards, or three, never a
   ragged half-row */
@media (min-width:900px) and (max-width:1199px){
  .js .cat-row:not(.is-open) .cat-row__cars > :nth-child(n+4){ display:none; }
}
@media (min-width:1200px){
  .js .cat-row:not(.is-open) .cat-row__cars > :nth-child(n+5){ display:none; }
}

/* a number and the word it counts are one thing; they never break apart */
.cat-row__lead .nw{ white-space:nowrap; }

/* ============================================================================
   The phone's dock
   Over 60% of car shopping happens on a phone. On this page the only action —
   WhatsApp — lived in the header and scrolled away, leaving nothing to press in
   the lower half of the screen where a thumb actually reaches. The bar is the
   brandbook's own mc-bar component, so it is the same object the vehicle page
   uses, not a second bar invented here.

   env(safe-area-inset-bottom) is the point of viewport-fit=cover, which this
   page already declares: without it the bar sits under the iPhone home
   indicator, which is the defect recorded against the live site.
   ========================================================================= */
.cat-dock{
  position:fixed; z-index:40; inset:auto 0 0 0;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--mc-surface);
}
.cat-dock__t{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.15;
  font-size:var(--t-label); color:var(--mc-ink-2);
}
.cat-dock__t b{ font-size:var(--t-ui); font-weight:600; color:var(--mc-ink); }
.cat-dock .mc-btn{ min-height:44px; }

/* the last row must not end underneath the dock. On <main> itself: the page has no
   .cat-page class, so the rule was landing on nothing and the final row went under. */
@media (max-width:768px), (max-height:520px) and (orientation:landscape){
  /* The footer reserves the dock's height (foot.css) and always follows <main>,
     so nothing can end under the dock; main's own clearance on top of it was a
     ~90px white band between the last row and the footer. */
  body:has(.cat-dock) main{ padding-bottom:0; }
}
/* on a desktop the header's own button never leaves, so the dock would be noise */
@media (min-width:769px){ .cat-dock{ display:none; } }
/* but a phone on its side is still a phone: it keeps the dock */
@media (max-height:520px) and (orientation:landscape){ .cat-dock{ display:block; } }

/* every header link is a target in its own right, not just a word */
.mc-head .mc-nav__i{ min-width:44px; padding-inline:var(--s-2); text-align:center; }
/* four items and a button: the nav wraps as a unit rather than pushing the
   button off the edge, and its own gap tightens first */
/* No flex-wrap here. It was `wrap`, and being 220 lines below the phone rule at
   the same specificity it won on source order and put the fifth link on a third
   row — 148px of header at 390. Above 900 the five links measure 486px and fit;
   below it the phone rule scrolls them. Neither case wants a wrap. */
.mc-head .mc-nav{ display:flex; gap:var(--s-1) var(--s-3); margin-right:var(--s-4); }
@media (max-width:900px){ .mc-head .mc-nav{ gap:var(--s-1) var(--s-2); margin-right:var(--s-2); } }

/* ============================================================================
   The swipe hint
   A rail says nothing about itself: the row continues past the edge of the
   screen and there is no mark on screen that says so. A card cut at 72vw leaves
   a sliver of the next one showing, which helps, but the gesture itself is not
   discoverable — so the hand is shown once, on the first rail that actually has
   something hidden.

   Rules it obeys:
     - once per visit, and never again (the script remembers)
     - only where the rail exists, and only if scrollWidth exceeds clientWidth
     - gone the instant a finger touches the rail, or the rail is scrolled
     - never in the way: pointer-events none, so it cannot swallow the very
       gesture it is asking for
     - not the only way through: "Ver todos" opens the same cars without a swipe
   ========================================================================= */
.cat-row__rail{ position:relative; }

.cat-hint{
  position:absolute; z-index:3; inset:0 0 auto auto; pointer-events:none;
  top:38%; right:12%; translate:0 -50%;
  width:76px; height:76px;
  opacity:0;
}
.cat-hint.is-on{ animation:hint-life 3.9s var(--e-inout) forwards; }

/* the disc is the contact: it lands, travels, and lifts with the hand */
.cat-hint__disc{
  position:absolute; inset:auto 14px 10px auto;
  width:46px; height:46px; border-radius:var(--mc-r-pill);
  background:rgba(255,255,255,.30);
  box-shadow:0 0 0 1px rgba(255,255,255,.45) inset;
}
.cat-hint__hand{
  position:absolute; inset:0; color:#FFFFFF;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* --- frame by frame, one stroke ------------------------------------------
   0      the hand fades in on the right, slightly large, not yet touching
   12%    it settles: contact
   22%    it presses (the disc tightens)
   26-58% it travels left, 88px, carrying the disc with it
   64%    it lifts
   70%    it is back on the right, invisible
   70-100 the whole thing again, once, then gone for good                   */
@keyframes hint-life{
  0%   { opacity:0; translate:0 -50%; scale:1.06; }
  8%   { opacity:1; }
  12%  { scale:1; }
  26%  { opacity:1; translate:0 -50%; }
  58%  { opacity:1; translate:-88px -50%; }
  66%  { opacity:0; translate:-88px -50%; }
  67%  { opacity:0; translate:0 -50%; }
  72%  { opacity:1; translate:0 -50%; }
  94%  { opacity:1; translate:-88px -50%; }
  100% { opacity:0; translate:-88px -50%; }
}
@keyframes hint-press{
  0%,10%   { scale:1;   background:rgba(255,255,255,.30); }
  20%,58%  { scale:.86; background:rgba(255,255,255,.46); }
  66%,72%  { scale:1;   background:rgba(255,255,255,.30); }
  80%,94%  { scale:.86; background:rgba(255,255,255,.46); }
  100%     { scale:1; }
}
.cat-hint.is-on .cat-hint__disc{ animation:hint-press 3.9s var(--e-inout) forwards; }

/* Reduced motion: the hint still has to exist — the gesture is no more
   discoverable for someone who dislikes movement — so it appears, holds, and
   fades, without travelling. */
@media (prefers-reduced-motion:reduce){
  .cat-hint.is-on{ animation:hint-still 2.6s var(--e-out) forwards; }
  .cat-hint.is-on .cat-hint__disc{ animation:none; }
  @keyframes hint-still{ 0%{opacity:0} 12%{opacity:1} 76%{opacity:1} 100%{opacity:0} }
}
/* it belongs to the rail, so it goes when the rail does */
@media (min-width:769px){
  .cat-hint{ display:none; }
}
@media (max-height:520px) and (orientation:landscape){
  .cat-hint{ display:block; }
}

/* ============================================================================
   The banner
   Measured before it was placed. A 24x16 luminance grid over the photograph
   says exactly where white can live on it:

     top third      sky — 1.13:1 at its worst. White is impossible there.
     middle         the car, black — fine on the left, unusable at the horizon
     bottom half    tarmac — 7:1 and better, right across the frame, up to 19.75:1

   So the words sit low, over the road, where the photograph itself does the work
   and no scrim is needed to make the text legible.

   The frame: the car spans 15-85% across and 28-78% down, and its hero — the
   light bar reading PORSCHE — is at 48% down. object-position 50% 58% keeps the
   whole car and the road under it in view at every ratio this banner takes:
   at 2.6:1 the visible band is 28-88%, at 4:3 it is the full height.
   ========================================================================= */
.cat-hero{
  position:relative; isolation:isolate;
  /* width stated: with only aspect-ratio + max-height, a wide, short screen
     (2560×1000) shrank the band to 2028px and left white on the right */
  width:100%; aspect-ratio:2.6 / 1; min-height:22rem; max-height:78vh;
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--mc-ink);
}
.cat-hero__img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  object-position:50% 58%;
}
/* Not a scrim over the picture — a floor under the words. The tarmac already
   carries white; this only guarantees it at crops where less tarmac is in frame,
   and it is kept to the bottom third so the car is never dulled. */
/* Two scrims, not one, and neither is a wash over the whole picture.
   Measured first: with a single 72% floor the worst line still read 2.43:1,
   because at this crop the words land on the car and the horizon rather than on
   the tarmac the luminance map promised. So the darkening is aimed where the
   words are — low, and to the left — and the car, which lives up and to the
   right, keeps its own light. */
.cat-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(var(--mc-scrim),0) 26%, rgba(var(--mc-scrim),.44) 58%, rgba(var(--mc-scrim),.90) 100%),
    linear-gradient(100deg, rgba(var(--mc-scrim),.72) 0%, rgba(var(--mc-scrim),.34) 42%, rgba(var(--mc-scrim),0) 68%);
}
.cat-hero__in{
  position:relative; z-index:2; width:100%;
  padding-block:var(--s-7) var(--s-8);
}
.cat-hero__eyebrow{
  display:block; margin-bottom:var(--s-3);
  font-size:var(--t-label); font-weight:500; letter-spacing:.030em;
  text-transform:none; color:#FFFFFF;   /* the smallest line on the banner: full white */
}
.cat-hero__h span{ display:block; }
.cat-hero__h{
  margin:0 0 var(--s-4); max-width:18ch;
  font-size:var(--t-display); line-height:1.04; letter-spacing:-.024em;
  color:#FFFFFF;
}
/* Said out loud, because the brandbook holds the live site to account for exactly
   this: a stock photograph of a car that is not his. Small, but present. */
.cat-hero__credit{
  display:block; margin-top:var(--s-4);
  font-size:var(--t-label); letter-spacing:.020em; color:rgba(255,255,255,.62);
}
.cat-hero__go{
  display:inline-flex; align-items:center; gap:.5em; min-height:44px; margin-top:var(--s-5);
  padding:0 1.25rem; border-radius:999px; background:#FFFFFF; color:var(--mc-ink);
  font-weight:600; font-size:var(--t-body); text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cat-hero__go:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.28); }
.cat-hero__go:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }
.cat-hero__p{
  margin:0; max-width:44ch;
  font-size:var(--t-sub); line-height:1.5; color:rgba(255,255,255,.90);
}
@media (max-width:900px){
  .cat-hero{ aspect-ratio:4 / 3; min-height:26rem; }
  .cat-hero__h span{ display:inline; }   /* the space between them survives */
}
@media (max-width:560px){
  .cat-hero{ aspect-ratio:3 / 4; min-height:0; max-height:82vh; }
  /* At 3:4 only the middle half of the frame is visible. Centred, that is the
     doors; moved left it is the tail — the light bar, the badge, the part that
     says Porsche without a caption. */
  .cat-hero__img{ object-position:38% 56%; }
  /* a narrow frame puts the words over the car itself, so the floor comes up */
  .cat-hero::after{
    background:
      linear-gradient(180deg, rgba(var(--mc-scrim),.10) 0%, rgba(var(--mc-scrim),.30) 26%, rgba(var(--mc-scrim),.62) 52%, rgba(var(--mc-scrim),.94) 100%),
      linear-gradient(100deg, rgba(var(--mc-scrim),.46) 0%, rgba(var(--mc-scrim),.20) 52%, rgba(var(--mc-scrim),0) 80%);
  }
}

/* ---- phone pass, 2026-10-05 -------------------------------------------------
   The dock: the label kept to two lines, WhatsApp wide and the call a square
   with its own mark — the pair balanced instead of a long button and a "Tel" stub
   pushed to the right. Same height as the page's buttons (48). */
@media (max-width:768px), (max-height:520px) and (orientation:landscape){
  .cat-dock .mc-bar__act{ display:grid; grid-template-columns:minmax(118px,1fr) 48px; gap:var(--s-2); flex:0 1 196px; }
  .cat-dock .mc-bar__act .mc-btn{ min-height:var(--mc-tap-pref); justify-content:center; padding-inline:var(--s-3); }
  .cat-dock .mc-bar__act .mc-btn[href^="tel:"]{ padding:0; font-size:0; }
  .cat-dock .mc-bar__act .mc-btn[href^="tel:"]::before{ content:""; width:22px; height:22px; background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat; }
  .cat-dock__t{ min-width:0; }
}
/* under 375 the question goes and the promise stays: one line, not four */
@media (max-width:374.98px){ .cat-dock__t{ font-size:0; } .cat-dock__t b{ font-size:var(--t-ui); } }

/* rails: a card snaps to the gutter, not to the glass (it was flush at x 0
   while the brand's mark above it sat at x 16) */
@media (max-width:899.98px){ .cat-row__cars{ scroll-padding-inline:var(--mc-gutter-m); } }

/* the header's four links fit the phone instead of scrolling "Vende tu coche" away */
/* (the fade on the last 2rem was what cut "Vende tu coche": it faded a link
   that fitted). On a phone the four links are spread over the width instead. */
@media (max-width:430px){
  .mc-head .mc-nav{ gap:0; justify-content:space-between; -webkit-mask-image:none; mask-image:none; }
  .mc-head .mc-nav__i{ padding-inline:var(--s-1); min-width:0; }
}
@media (max-width:374.98px){ .mc-head .mc-nav__i{ padding-inline:2px; font-size:15px; } }

/* ---- the page never moves sideways (2026-10-06) ------------------------------
   The client: swiping a photograph left or right moved the whole page. Nothing on
   any page is wider than the screen (measured on 7 pages at 390/360/320); what
   moved it was the gesture: on iOS a swipe that reaches the end of a strip
   chains to the document, which bounces sideways. The document cannot scroll or
   bounce horizontally; strips keep their own swipe (overscroll contained there).
   Public pages have no position:sticky, so clipping the root is safe. */
html, body{ overflow-x:hidden; overscroll-behavior-x:none; }
@supports (overflow-x:clip){ html, body{ overflow-x:clip; } }
body.is-locked{ position:fixed; left:0; right:0; overflow:hidden; }

/* "Encuentra el tuyo": lands below the sticky header, glides there */
#cat-first{ scroll-margin-top:4.5rem; }
@media (prefers-reduced-motion: no-preference){ html:has(#cat-first){ scroll-behavior:smooth; } }

/* "Avísame cuando entre uno": an inline link, but a finger-sized one */
.cat-row__ask{ display:inline-block; padding-block:.8rem; margin-block:-.8rem; }

/* [hidden] wins over the card and row layouts (the home search hid cards that stayed visible) */
.mc-card[hidden], .cat-row[hidden], .cat-row__note[hidden]{ display:none !important; }

/* what the home search filtered, and the way out */
.cat-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4); padding-block:var(--s-4); }
.cat-filter__t{ margin:0; font-size:var(--t-body); color:var(--mc-ink); }
.cat-filter__t span{ color:var(--mc-ink-2); }
.cat-filter__x{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.cat-filter__wa{ flex:1 1 100%; justify-content:center; max-width:24rem; }

/* "Por qué nosotros": in the header from tablet up; on a phone it lives in the footer and the home page */
@media (max-width:900px){ .mc-nav__i--desk{ display:none; } }
.mc-nav__i--desk{ white-space:nowrap; }