/* =============================================================================
   F1 · home (index.html) — page-only styles.
   Everything here is unlayered, so it wins over f1.css (@layer f1.*).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1 · HERO
   --------------------------------------------------------------------------- */
.home-hero .stats { border-top: 0; }
.home-hero__copy { max-width: 52rem; }
.home-hero__lead { max-width: 46ch; color: #e6e6e6; }
.home-hero__actions { margin-top: .5rem; }

/* slide 1 has the storefront sign right behind the headline: a denser left column keeps the copy clean */
.home-hero .overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 28%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,.55) 22%, transparent 50%),
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.84) 50%, rgba(0,0,0,.28) 100%);
}
.home-hero .eyebrow { text-shadow: 0 1px 14px rgba(0,0,0,.85); }
.home-hero .hero__slide:first-child img { object-position: 78% 50%; } /* narrower screens crop the photo: show its right side so most of the sign leaves the frame */

.home-hero__rating {
  color: #fff;
  text-decoration: none;
  padding: .375rem .625rem .375rem .5rem;
  margin-left: -.5rem;
  border: 1px solid transparent;
  transition: border-color .35s var(--ease-btn), background-color .35s var(--ease-btn);
}
.home-hero__rating:focus-visible { border-color: rgba(255,255,255,.28); }
@media (hover: hover) and (pointer: fine) {
  .home-hero__rating:hover { border-color: rgba(255,255,255,.28); background: rgba(0,0,0,.25); }
}

/* "orden de trabajo" glass tickets */
.home-hero__aside { gap: .875rem; }
/* darker, even glass: the tickets sit over bright sky/facade on slide 1 */
.home-hero__aside .glass { background: rgba(8,8,8,.72); }
.hero-ticket .chip--ok { color: #9bd873; background: rgba(0,0,0,.6); }
.hero-ticket { display: grid; gap: 1rem; padding: 1.125rem 1.25rem 1.25rem; }
.hero-ticket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.hero-ticket__head .micro { color: #c7c7c7; }
.hero-ticket__body { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .875rem; align-items: center; }
.hero-ticket__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--red-400);
  border: 1px solid color-mix(in srgb, var(--red-400) 55%, transparent);
  background: color-mix(in srgb, var(--red-400) 12%, transparent);
}
.hero-ticket__icon .icon { --icon-size: 1.25rem; }
.hero-ticket__title { font-size: 1.25rem; line-height: 1.15; letter-spacing: -.005em; }
.hero-ticket__sub {
  margin-top: .3rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #d4d4d4;
}

@media (max-width: 767px) {
  .home-hero__rating { margin-left: 0; padding-left: 0; }
  /* phones: the photo sits behind the whole text column, so darken it evenly */
  .home-hero .overlay {
    background:
      linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.58) 62%, #000 100%),
      linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.5) 100%);
  }
  .home-hero__title { text-shadow: 0 2px 28px rgba(0,0,0,.5); }
}

/* ---------------------------------------------------------------------------
   2 · TRUST STRIP
   --------------------------------------------------------------------------- */
.home-trust { border-bottom: 1px solid var(--line); }
.home-trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  align-items: center;
}
.home-trust__transgo { display: grid; gap: 1rem; justify-items: start; padding-right: var(--sp-xl); }
/* the lockup has white "AUTO TRANSMISSION PARTS" lettering: it needs a dark plate on the light strip */
.home-trust__plate { display: grid; place-items: center; width: 100%; max-width: 19rem; padding: 1.125rem 1.25rem; background: #000; }
.home-trust__plate img { width: 100%; height: auto; }
.home-trust__statement { font-size: 1.0625rem; line-height: 1.4; font-weight: 500; max-width: 30ch; }
.home-trust__brands { display: grid; gap: 1.25rem; min-width: 0; padding-left: var(--sp-xl); border-left: 1px solid var(--line); }
.home-trust .marquee { --marquee-gap: 2.5rem; }
/* the Mercedes-Benz file has a lot of white around a small mark: scale it to the optical size of its neighbours */
.home-trust__logo--small-mark img { transform: scale(1.4); }
.home-trust .marquee--ready .home-trust__logo--small-mark { margin-inline: .75rem; } /* room for the scaled mark in the moving row */
.home-trust .marquee:not(.marquee--ready) .marquee__group { justify-content: flex-start; padding-inline: 0; }

/* reduced motion / no JS: the marquee is a static wrapping row — keep it compact */
.home-trust .marquee:not(.marquee--ready) .marquee__group { gap: 1rem 2rem; }
@media (max-width: 767px) {
  .home-trust .marquee:not(.marquee--ready) .marquee__group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .75rem; }
  .home-trust .marquee:not(.marquee--ready) .logo-tile { width: 100%; height: 2.75rem; }
}

@media (max-width: 991px) {
  .home-trust__grid { grid-template-columns: minmax(0, 1fr); }
  .home-trust__transgo { padding-right: 0; padding-bottom: var(--sp-l); }
  .home-trust__brands { padding-left: 0; padding-top: var(--sp-l); border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------------------
   4 · SERVICES
   --------------------------------------------------------------------------- */
.home-services__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.home-services__grid > li { display: flex; min-width: 0; }
.home-service { width: 100%; }
.home-service .card__top { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.home-service .card__icon { --icon-size: 2.25rem; }
.home-service .card__title { min-height: 3.15em; }
.home-service .card__footer .link { display: inline-flex; align-items: center; gap: .5rem; }
.home-services__hint { display: none; }

@media (max-width: 1280px) {
  .home-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-service .card__title { min-height: 0; }
}
@media (max-width: 767px) {
  .home-services__grid {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; /* keyboard focus is kept in view by assets/js/pages/home.js */
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding: .75rem var(--gutter) 1rem;
    scrollbar-width: none;
  }
  .home-services__grid::-webkit-scrollbar { display: none; }
  .home-services__grid > li { flex: 0 0 min(21rem, 84%); scroll-snap-align: start; }
  .home-services__hint { display: inline-flex; align-items: center; gap: .5rem; margin-top: .25rem; }
  .home-services__hint .icon { --icon-size: 1rem; }
}

/* ---------------------------------------------------------------------------
   5 · SYMPTOM SELECTOR (spotlight)
   --------------------------------------------------------------------------- */
.home-symptoms { padding-bottom: calc(var(--section) * 1.15); }
/* Local photo (assets/img/caja-de-cambios-automatica.jpg): keep the red selector in full color —
   no grayscale and no red multiply tint, which would turn the grey interior pink. */
.home-symptoms__spot .spotlight__img {
  object-position: 60% 50%;
  opacity: 1;
  filter: contrast(1.05) brightness(.82);
}
@media (prefers-reduced-motion: no-preference) {
  .home-symptoms__spot .spotlight__img { transition: object-position .8s var(--ease-osmo); }
}
.home-symptoms__spot::before { opacity: 0; }
.home-symptoms__spot .spotlight__mask { opacity: .74; }
.home-symptoms__spot .spotlight__fade {
  background:
    linear-gradient(180deg, #000 0%, transparent 18%, transparent 80%, #000 100%),
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 22%, transparent 48%, transparent 94%, #000 100%);
}
.home-symptoms__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  column-gap: var(--sp-2xl);
  row-gap: var(--sp-l);
  align-items: start;
}
.home-symptoms__top .section-head .lead { max-width: 40ch; }
.home-symptoms__tabs { --tab-cols: 2; gap: .625rem; }
.home-symptoms__tabs .tab {
  min-height: 3.5rem;
  gap: .75rem;
  padding: .75rem 1rem;
  font-size: 1rem;
  background: color-mix(in srgb, #000 45%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.home-symptoms__tabs .tab > span:not(.home-tab__index) { flex: 1 1 auto; }
.home-tab__index {
  flex: none;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  opacity: .6;
}
.home-symptoms__tabs .tab[aria-selected="true"] .home-tab__index { opacity: 1; }

.home-symptoms__stage {
  display: grid;
  grid-template-columns: minmax(0, 31rem);
  gap: var(--sp-l);
  margin-top: var(--sp-3xl);
}
.home-symptom { display: grid; }
.home-symptom__top { display: grid; gap: .75rem; padding-bottom: 1.5rem; }
.home-symptom__top .body-l { font-size: 1.25rem; line-height: 1.4; max-width: 34ch; }
.home-symptom__top .rule-title::after { flex-basis: 6rem; }
.home-symptom__bottom {
  display: grid;
  gap: .875rem;
  padding: 1.25rem;
  background: color-mix(in srgb, #000 62%, transparent);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* no-JS: every panel is visible, give them some air */
.home-symptoms__stage > .tabs__panel + .tabs__panel:not([hidden]) { margin-top: var(--sp-s); }

@media (max-width: 1280px) {
  .home-symptoms__top { grid-template-columns: minmax(0, 1fr); }
  .home-symptoms__top .section-head { max-width: 46rem; }
  .home-symptoms__tabs { --tab-cols: 3; max-width: 56rem; }
  .home-symptoms__stage { margin-top: var(--sp-2xl); }
}
@media (max-width: 767px) {
  .home-symptoms__tabs { --tab-cols: 2; gap: .5rem; }
  .home-symptoms__tabs .tab { min-height: 3.25rem; padding: .625rem .75rem; font-size: .9375rem; gap: .5rem; }
  .home-symptoms__tabs .tab .icon { display: none; }
  .home-symptoms__spot .spotlight__fade {
    background:
      linear-gradient(180deg, #000 0%, transparent 14%, transparent 82%, #000 100%),
      linear-gradient(90deg, rgba(0,0,0,.4) 0%, transparent 30%, transparent 90%, #000 100%);
  }
  .home-symptoms__cta .btn { width: 100%; }
  /* on phones the lit area sits right behind the panel copy: darker photo, no marker over the text */
  .home-symptoms__spot .spotlight__img { filter: contrast(1.05) brightness(.6); }
  .home-symptoms__spot .spotlight__mask { opacity: .8; }
  .home-symptoms__spot .spotlight__marker { display: none; }
}
@media (max-width: 389px) {
  .home-symptoms__cta .btn { --btn-px: 1rem; --btn-fs: 1rem; }
}

/* ---------------------------------------------------------------------------
   6 · MID CTA
   --------------------------------------------------------------------------- */
.home-midcta__box {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding: var(--sp-xl) var(--sp-l);
  text-align: center;
}
.home-midcta__box::before, .home-midcta__box::after { opacity: .35; }
.home-midcta__title { max-width: 24ch; }
.home-midcta__title .text-brand { display: block; }
.home-midcta__box .lead { max-width: 44ch; margin-inline: auto; }
.home-midcta__box .btn-group { margin-top: .5rem; }
/* "especialista ahora" is bound with  : below 390px the title steps down so that pair fits the column */
@media (max-width: 389px) {
  .home-midcta__title { font-size: min(var(--fs-h2), 11.6vw); }
}
@media (max-width: 479px) {
  .home-midcta__box { padding-inline: 0; }
  .home-midcta__box .btn-group .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   7 · WHY US / WORKSHOP
   --------------------------------------------------------------------------- */
.home-why__body { margin-top: var(--sp-l); }
.home-why__stat .stat__value { --stat-size: min(var(--fs-display), 33cqw); }
.home-why__stat .stat__label { color: var(--fg-muted); }
.home-why__slider { margin-top: var(--sp-3xl); }
@media (max-width: 991px) {
  .home-why__body { row-gap: var(--sp-xl); }
}

/* ---------------------------------------------------------------------------
   8 · CÓMO TRABAJAMOS
   --------------------------------------------------------------------------- */
.home-process__intro .lead { max-width: 38ch; }
.home-process .timeline__content .chips { margin-top: .25rem; }
.home-process__why {
  margin-top: var(--sp-3xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--line-strong);
}
.home-process__why-head { display: grid; gap: 1rem; margin-bottom: var(--sp-l); }
.home-process__why-title { max-width: 22ch; text-wrap: balance; }
.home-process__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.home-process__cards > li { display: flex; min-width: 0; }
.home-why-card { width: 100%; }
.home-why-card .card__top { margin-bottom: .5rem; align-items: center; }
.home-why-card .card__title { font-size: clamp(1.375rem, 1.1rem + .6vw, 1.625rem); }
.home-why-card .card__text { font-size: 1rem; }
@media (max-width: 1280px) {
  .home-process__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .home-process__cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   9 · REVIEWS
   --------------------------------------------------------------------------- */
.home-reviews__head { margin-bottom: var(--sp-xl); }
.home-reviews__rating { justify-self: end; width: 100%; max-width: 26rem; margin: .75rem; }
@media (max-width: 991px) {
  .home-reviews__rating { justify-self: start; margin: .75rem .75rem 0; max-width: calc(100% - 1.5rem); }
}