/* css/servicios.css
   Estilos para las 6 páginas de servicio + dropdown del topbar +
   marquee de "Otros servicios".
   ----------------------------------------------------------- */

/* ============================================================
   PÁGINA DE SERVICIO — comunes
   ============================================================ */

.sec-page { background: var(--bg-primary); color: var(--fg-primary); }

/* Vars de identidad del servicio. Los seis comparten el azul de marca: la
   diferenciación es tipográfica y fotográfica, no cromática. `--sector-color`
   se usa para fills; `--sector-ink` es la variante legible sobre blanco. */
.sec-preparaciones { --sector-color: var(--brand-blue); --sector-ink: var(--brand-blue-strong); }
.sec-mecanica      { --sector-color: var(--brand-blue); --sector-ink: var(--brand-blue-strong); }
.sec-carroceria    { --sector-color: var(--brand-blue); --sector-ink: var(--brand-blue-strong); }
.sec-viajes        { --sector-color: var(--brand-blue); --sector-ink: var(--brand-blue-strong); }
.sec-asistencia    { --sector-color: var(--brand-blue); --sector-ink: var(--brand-blue-strong); }
.sec-accesorios    { --sector-color: var(--brand-blue); --sector-ink: var(--brand-blue-strong); }

/* eyebrow: un único color de acento en todo el sitio */
.sec-eyebrow { color: var(--brand-blue-strong); }

/* ============================================================
   HERO
   ============================================================ */

.sec-hero {
  padding: calc(var(--topbar-height, 72px) + clamp(32px, 5vw, 80px)) 0 clamp(48px, 6vw, 88px);
  /* Sin fondo sólido: el hero hereda el fondo de la página. Antes esto
      dejaba ver los polígonos de fondo, que ya no existen. */
  background: transparent;
  position: relative;
}
@media (max-width: 768px) {
  .sec-hero {
    padding: calc(var(--topbar-height, 64px) + var(--space-6)) 0 var(--space-10);
  }
}
.sec-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .sec-hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}

.sec-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
  margin-bottom: var(--space-5);
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.sec-back:hover { color: var(--fg-primary); transform: translateX(-3px); }

.sec-hero-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.sec-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-5);
  color: var(--fg-primary);
}

.sec-hero-subtitle {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 56ch;
  margin: 0 0 var(--space-7);
}

.sec-hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.sec-hero-photo {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 60px -20px rgba(10, 10, 10, 0.25);
}
.sec-hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ============================================================
   INTRO + STATS BANDA
   ============================================================ */

.sec-intro {
  padding: clamp(56px, 7vw, 96px) 0;
  background: transparent;
}
.sec-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .sec-intro-grid { grid-template-columns: 1fr 1fr; }
}
/* APAISADA, no vertical. Estuvo en `4 / 5` y era el hueco equivocado: las
   cuatro fotos de intro de servicio son apaisadas —competicion-t3/06 y
   toyota-land-cruiser-desert-racing/01 a 1,50; ford-ranger/01 a 1,62;
   toyota-fj-cruiser/01 a 1,76— y un marco 4:5 se comía los laterales para
   rellenar el alto. En el FJ quedaba el coche partido por la mitad.
   3:2 es el mínimo común del material: dos entran exactas y las otras dos
   pierden poco. No subir de ahí sin mirar las cuatro. */
.sec-intro-photo {
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  box-shadow: 0 22px 50px -22px rgba(10, 10, 10, 0.22);
}
.sec-intro-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sec-intro-text { position: relative; }
.sec-intro-mark {
  display: block;
  width: 22px;
  height: 22px;
  background: var(--sector-color, var(--brand-blue));
  /* Diamond low-poly — coherente con el lenguaje visual de la marca */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  margin: 0 0 var(--space-5);
}
.sec-intro-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.7;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--fg-primary);
  text-align: left;
}

.sec-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .sec-stats-grid { grid-template-columns: 1fr; }
}

.sec-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.sec-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}
.sec-stat-value .unit {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.45em;
  margin-left: 4px;
  color: var(--fg-muted);
  vertical-align: baseline;
}
.sec-stat-label {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ============================================================
   APLICACIONES
   ============================================================ */

.sec-aplic-section {
  padding: clamp(56px, 7vw, 96px) 0;
  background: transparent;
}

.sec-section-header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.sec-section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.sec-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 auto;
  color: var(--fg-primary);
}

.sec-aplic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  /* 2 arriba, 2 abajo — fijo en tablet+ */
  .sec-aplic-grid { grid-template-columns: repeat(2, 1fr); }
}

.sec-aplic {
  padding: clamp(32px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  /* Fondo con tinte del color del sector — sutil pero visible, sin fotos */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--sector-color, var(--brand-blue)) 4%, var(--bg-primary)) 0%,
      color-mix(in srgb, var(--sector-color, var(--brand-blue)) 12%, var(--bg-primary)) 100%);
  border: 1px solid color-mix(in srgb, var(--sector-color, var(--brand-blue)) 22%, transparent);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              border-color var(--transition-base), background var(--transition-base);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Polígono decorativo low-poly en la esquina superior derecha de cada card,
   en el color del sector — sustituye visualmente a la "foto" sin foto. */
.sec-aplic::after {
  content: '';
  position: absolute;
  top: -34px;
  right: -34px;
  width: 130px;
  height: 130px;
  background: var(--sector-color, var(--brand-blue));
  /* Hexágono irregular ladeado, lenguaje low-poly de la marca */
  clip-path: polygon(50% 0, 100% 28%, 100% 72%, 50% 100%, 0 72%, 0 28%);
  opacity: 0.16;
  transform: rotate(18deg);
  transition: opacity var(--transition-base), transform 0.6s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.sec-aplic:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -20px color-mix(in srgb, var(--sector-color, var(--brand-blue)) 35%, rgba(10, 10, 10, 0.18));
  border-color: color-mix(in srgb, var(--sector-color, var(--brand-blue)) 50%, transparent);
}
.sec-aplic:hover::after {
  opacity: 0.32;
  transform: rotate(32deg) scale(1.1);
}

.sec-aplic-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--sector-ink, var(--brand-blue));
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 1;
}
.sec-aplic-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  color: var(--fg-primary);
  position: relative;
  z-index: 1;
}
.sec-aplic-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ============================================================
   MODELO RECOMENDADO
   ============================================================ */

.sec-modelo {
  padding: clamp(56px, 7vw, 96px) 0;
  background: transparent;
}
.sec-modelo-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(40px, 5vw, 64px);
  border-radius: 2px;
  background: var(--bg-dark);
  color: #fff;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 800px) {
  .sec-modelo-card { grid-template-columns: 1.4fr 1fr; }
}

.sec-modelo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-color, var(--brand-blue)) 40%, transparent) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.sec-modelo-card-magenta  { --accent-color: var(--brand-blue); }
.sec-modelo-card-orange   { --accent-color: var(--brand-blue-dark); }
.sec-modelo-card-yellow   { --accent-color: var(--accent-amber); }
.sec-modelo-card-cyan     { --accent-color: var(--brand-blue-light); }
.sec-modelo-card-burgundy { --accent-color: var(--brand-navy); }

.sec-modelo-text { position: relative; z-index: 1; }
.sec-modelo-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--accent-color);
}
.sec-modelo-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  color: #fff;
}
.sec-modelo-body {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--space-6);
  max-width: 52ch;
}
.sec-modelo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 2px;
  background: #fff;
  color: var(--fg-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.sec-modelo-cta:hover {
  transform: translateY(-2px);
  background: var(--accent-color);
  color: #fff;
}

.sec-modelo-code {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-modelo-code-text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(120px, 18vw, 220px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent-color);
  opacity: 0.94;
  text-shadow: 0 8px 24px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

/* ============================================================
   CTA
   ============================================================ */

.sec-cta {
  padding: clamp(56px, 7vw, 96px) 0;
  background: transparent;
  text-align: center;
}
.sec-cta-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--sector-ink, var(--brand-blue));
}
.sec-cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  color: var(--fg-primary);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.sec-cta-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-primary);
  max-width: 48ch;
  margin: 0 auto var(--space-7);
  /* text-wrap: pretty / balance hacen que las líneas se distribuyan de
     forma más equilibrada en navegadores modernos (Chrome 117+, FF 121+),
     evitando huérfanas como "24" colgando al final. */
  text-wrap: balance;
  text-wrap: pretty;
}
.sec-cta-buttons {
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   OTROS SECTORES — rotating cards (marquee infinito)
   ============================================================ */

.otros-sectores {
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px);
  background: var(--bg-dark);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.otros-sectores-header {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.otros-servicios-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--accent-amber);
}
.otros-servicios-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}

.otros-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.otros-marquee-track {
  --card-w: 320px;
  --card-gap: var(--space-4);
  /* Anchura de UNA copia (4 cards + 4 separaciones de gap). El track
     contiene 3 copias idénticas en HTML, así que en pantallas anchas
     (>1344px) siempre queda buffer y nunca se ve el reseteo. */
  --copy-w: calc((var(--card-w) + var(--card-gap)) * 4);
  display: flex;
  gap: var(--card-gap);
  width: max-content;
  padding: var(--space-2) 0;
  animation: otros-scroll 36s linear infinite;
  will-change: transform;
}
.otros-marquee:hover .otros-marquee-track {
  animation-play-state: paused;
}

@keyframes otros-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--copy-w) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  .otros-marquee-track {
    animation: none;
    overflow-x: auto;
    width: 100%;
    scroll-snap-type: x mandatory;
  }
}

/* Móvil: cards más estrechas para que entren ~1.5 por viewport.
   --card-w cascadea a .otros-card vía var(). */
@media (max-width: 640px) {
  .otros-marquee-track {
    --card-w: 240px;
    --card-gap: var(--space-3);
  }
  .otros-card { height: 200px; }
}

/* En táctil el marquee deja de animarse y pasa a ser un carrusel que se
   arrastra con el dedo.
   El automático aquí no valía: la única forma de pararlo era `:hover`,
   que en un móvil no existe, así que las tarjetas desfilaban solas cada
   36 s sin que se pudieran alcanzar. Y el recorte lo hacía `.otros-marquee`
   con overflow:hidden, de modo que tampoco se podían arrastrar. */
@media (hover: none) {
  .otros-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* El velo de los bordes tapaba la primera y la última tarjeta cuando
       el desplazamiento es manual: llegas al final y sigue medio borrada. */
    mask-image: none;
    -webkit-mask-image: none;
    padding-inline: var(--space-5);
    margin-inline: calc(var(--space-5) * -1);
  }
  .otros-marquee::-webkit-scrollbar { display: none; }
  .otros-marquee-track {
    animation: none;
    width: max-content;
  }
  .otros-card { scroll-snap-align: start; }
}

.otros-card {
  flex: 0 0 var(--card-w, 320px);
  height: 240px;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  isolation: isolate;
}
.otros-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.5);
}

.otros-card-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  z-index: 0;
}
.otros-card:hover .otros-card-bg { transform: scale(1.06); }

.otros-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.3) 0%, rgba(10, 10, 10, 0.85) 100%);
  z-index: 1;
}

.otros-card-content {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  color: #fff;
}
.otros-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-2);
}
.otros-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  color: #fff;
}
.otros-card-arrow {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  transition: background var(--transition-fast), transform var(--transition-fast);
  z-index: 2;
}
.otros-card:hover .otros-card-arrow {
  background: var(--brand-blue);
  transform: translate(2px, -2px);
}

/* Acentos por sector en el card hover (línea fina arriba) */
.otros-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 4px;
  width: 100%;
  background: var(--brand-blue);
  z-index: 3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.otros-card:hover::before { transform: scaleX(1); }

.otros-card-motorsport::before  { background: var(--serv-preparaciones); }
.otros-card-hosteleria::before  { background: var(--serv-accesorios); }
.otros-card-retail::before      { background: var(--serv-carroceria); }
.otros-card-eventos::before     { background: var(--serv-viajes); }
.otros-card-corporativa::before { background: var(--serv-mecanica); }
.otros-card-aeropuertos::before { background: var(--serv-asistencia); }
.otros-card-ocio::before        { background: var(--serv-accesorios); }

/* ============================================================
   Botón secundario reutilizable (compat. con sec-cta)
   ============================================================ */
.btn.btn-secondary {
  background: transparent;
  color: var(--fg-primary);
  border-color: var(--border);
}
.btn.btn-secondary:hover {
  background: var(--bg-soft);
  border-color: var(--fg-primary);
}


/* ============================================================
   PÁGINA "TODOS LOS SERVICIOS" (servicios/index.html)
   Grid uniforme con las 7 cards, cada una con accent de su color.
   ============================================================ */

.sec-all-page {
  background: var(--bg-primary);
  color: var(--fg-primary);
}

.sec-all-hero {
  padding: calc(var(--topbar-height, 72px) + clamp(40px, 6vw, 96px)) 0 clamp(32px, 5vw, 64px);
  text-align: center;
  position: relative;
}
@media (max-width: 768px) {
  .sec-all-hero {
    padding: calc(var(--topbar-height, 64px) + var(--space-8)) 0 var(--space-8);
  }
}
.sec-all-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-blue);
  margin-bottom: var(--space-3);
}
.sec-all-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  color: var(--fg-primary);
}
.sec-all-hero-subtitle {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 56ch;
  margin: 0 auto;
}

.sec-all-section {
  padding: clamp(32px, 5vw, 64px) 0 clamp(64px, 8vw, 120px);
}

.sec-all-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .sec-all-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .sec-all-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.sec-all-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg-primary);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.sec-all-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.12);
  border-color: var(--sector-accent, var(--brand-blue));
}

.sec-all-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
}
.sec-all-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.sec-all-card:hover .sec-all-card-image img { transform: scale(1.05); }
.sec-all-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--sector-accent, var(--brand-blue)) 25%, transparent), transparent 55%);
  pointer-events: none;
}

.sec-all-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.sec-all-card-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sec-all-card-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sector-accent, var(--brand-blue)) 14%, var(--bg-primary));
  color: var(--sector-accent, var(--brand-blue));
  flex-shrink: 0;
}
.sec-all-card-icon svg { width: 20px; height: 20px; }
.sec-all-card-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.sec-all-card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
  flex: 1;
}
.sec-all-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--sector-accent, var(--brand-blue));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sec-all-card-link svg {
  width: 16px; height: 16px;
  transition: transform var(--transition-fast);
}
.sec-all-card:hover .sec-all-card-link svg { transform: translateX(4px); }

/* Asigna el color de cada sector como variable local */
.sec-all-card.is-motorsport  { --sector-accent: var(--serv-preparaciones); }
.sec-all-card.is-hosteleria  { --sector-accent: var(--serv-accesorios); }
.sec-all-card.is-retail      { --sector-accent: var(--serv-carroceria); }
.sec-all-card.is-eventos     { --sector-accent: var(--serv-viajes); }
.sec-all-card.is-corporativa { --sector-accent: var(--serv-mecanica); }
.sec-all-card.is-aeropuertos { --sector-accent: var(--serv-asistencia); }
.sec-all-card.is-ocio        { --sector-accent: var(--serv-accesorios); }

/* ============================================================
   AJUSTES DEL REGISTRO EDITORIAL
   ============================================================ */

/* Nada centrado, como en el resto de la web. */
.sec-section-header,
.otros-sectores-header,
.sec-cta,
.sec-all-hero {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.sec-cta > * { justify-content: flex-start; }

/* Titulares en caja normal y peso medio. */
.sec-hero-title,
.sec-all-hero-title,
.sec-section-title,
.otros-sectores-title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.024em;
  line-height: 1.12;
}

/* Las cifras de los bloques numerados dejan de ir en hueco. */
.sec-aplic-num {
  color: var(--border-strong);
  -webkit-text-stroke: 0;
  font-weight: 600;
}

/* --- Tarjetas numeradas de servicio ---
   Llevaban un degradado teñido del color del servicio y un hexágono
   "low-poly" girado en la esquina, herencia directa del diseño del que
   partió este proyecto. Las dos cosas fuera: fondo hueso, borde de
   1px y nada más. */
.sec-aplic {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base);
}
.sec-aplic::after { content: none; }
.sec-aplic:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-strong);
}
.sec-aplic-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--border-strong);
  margin-bottom: var(--space-4);
}
.sec-aplic-title { font-weight: 600; }
.sec-aplic-body { color: var(--fg-muted); font-size: 16px; }

/* El titular de sección se centraba con `margin: 0 auto`. */
.sec-section-title {
  margin: 0;
  max-width: 26ch;
  font-weight: 600;
}

/* Las etiquetas de sección, en gris y no en el color de marca: sitúan,
   no llaman. */
.sec-eyebrow,
.sec-hero-eyebrow,
.sec-section-eyebrow,
.otros-servicios-eyebrow {
  color: var(--fg-subtle);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-family: var(--font-sans);
}

.sec-hero-title { font-weight: 600; max-width: 20ch; }

/* --- "También hacemos" ---
   Era la tercera sección oscura de una web clara. Pasa a hueso; las
   tarjetas ya son fotografías y se sostienen solas. */
.otros-sectores {
  background: var(--bg-soft);
  color: var(--fg-primary);
}
.otros-sectores-header {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.otros-sectores-title { color: var(--fg-primary); }

/* El titular de "También hacemos" es .otros-servicios-title (no
   .otros-sectores-title, que no existe en el marcado) y venía en
   blanco porque la sección era oscura. */
.otros-servicios-title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.024em;
  line-height: 1.12;
  color: var(--fg-primary);
}

/* El bloque de cita se centraba con `margin: 0 auto` en el titular, el
   cuerpo y los botones. */
.sec-cta-title,
.sec-cta-body {
  margin-left: 0;
  margin-right: 0;
  max-width: 46ch;
}
.sec-cta-body { margin-bottom: var(--space-7); }
.sec-cta-buttons { justify-content: flex-start; }
.sec-cta-title { font-weight: 600; }

/* El rombo decorativo que abría el texto de introducción era otra
   pieza del lenguaje low-poly heredado. */
.sec-intro-mark { display: none; }

/* El resplandor de esquina de la tarjeta de nivel dentro de la página
   de servicio: último degradado decorativo. */
.sec-modelo-card::before,
.sec-modelo-card::after { content: none; }

/* ==================================================================
   OTROS SERVICIOS — los otros tres, sin carrusel
   ------------------------------------------------------------------
   Era un marquee que desfilaba solo con las tarjetas duplicadas. Con
   tres elementos no hay nada que desplazar: caben los tres a la vez, y
   un carrusel de tres obliga a esperar a que pase lo que ya cabría en
   pantalla. Además cada tarjeta repetía el rótulo "Otros servicios"
   que ya está en la cabecera de la sección, tres veces seguidas.
   ================================================================== */
.otros-serv-section {
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 120px);
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.otros-serv-header { margin-bottom: clamp(28px, 4vw, 44px); }
.otros-serv-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: var(--space-3) 0 0;
}

.otros-serv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 620px) { .otros-serv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .otros-serv-grid { grid-template-columns: repeat(3, 1fr); } }

.otros-serv {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  min-height: clamp(220px, 24vw, 300px);
  text-decoration: none;
  background: var(--bg-dark);
}
.otros-serv img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out);
}
.otros-serv:hover img,
.otros-serv:focus-visible img { transform: scale(1.05); }
.otros-serv:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 3px; }

.otros-serv::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 12, 14, 0.90) 0%,
    rgba(10, 12, 14, 0.42) 55%,
    rgba(10, 12, 14, 0.08) 100%);
}

.otros-serv-texto {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
}
.otros-serv-nombre {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0;
}
.otros-serv-flecha {
  flex-shrink: 0;
  color: #FFFFFF;
  transition: transform var(--transition-fast);
}
.otros-serv-flecha svg { width: 20px; height: 20px; display: block; }
.otros-serv:hover .otros-serv-flecha { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .otros-serv img, .otros-serv-flecha { transition: none; }
  .otros-serv:hover img { transform: none; }
  .otros-serv:hover .otros-serv-flecha { transform: none; }
}

/* ==================================================================
   HERO DE SERVICIO — fotografía a sangre
   ------------------------------------------------------------------
   Era texto a la izquierda y una foto pequeña a la derecha sobre
   blanco. Dos problemas medidos: el hero ocupaba 720px de los que la
   mitad inferior estaba vacía, y la fotografía —que es lo que explica
   de un vistazo qué es este servicio— quedaba de adorno en una caja.

   No llega a pantalla completa, a diferencia de la portada: aquí lo
   que importa es el texto que viene justo debajo. Con 100vh obligaría
   a hacer scroll para empezar a leer.
   ================================================================== */
.sec-hero {
  position: relative;
  margin-top: var(--topbar-height);
  min-height: clamp(380px, 62vh, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0;
  background: var(--bg-dark);
}
@media (max-width: 768px) {
  .sec-hero { min-height: clamp(340px, 56vh, 460px); padding: 0; }
}

.sec-hero-media { position: absolute; inset: 0; z-index: 0; }
.sec-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
/* Velo funcional, no decorativo: sin él el titular blanco no llega a
   contraste AA sobre las zonas claras de la foto.

   Recalibrado al entrar las fotos reales del taller. El degradado anterior
   se escribió contra fotos de banco, oscuras y desaturadas a propósito;
   con fotos de día —chapa clara, cielo, fluorescentes— se quedaba corto.
   Medido sobre las cuatro páginas de servicio a 1280 y 390px, el peor
   punto detrás del titular daba 1,70:1 y la miga 1,32:1.

   Mismo esquema que el hero de la portada, y por el mismo motivo: base
   uniforme (en móvil el texto ocupa todo el ancho), lateral (en escritorio
   vive a la izquierda) e inferior (es donde se apoya el bloque). Si se
   cambian las fotos de servicio, hay que volver a medir. */
.sec-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* 0,38 y no 0,34: con 0,34 el rótulo de asistencia-en-ruta se quedaba
       en 4,49:1 a 320px contra los 4,5 que pide AA. Pasar por una centésima
       no es pasar — cualquier foto nueva lo tumbaría. */
    linear-gradient(rgba(10, 12, 14, 0.38), rgba(10, 12, 14, 0.38)),
    linear-gradient(
      to right,
      rgba(10, 12, 14, 0.60)  0%,
      rgba(10, 12, 14, 0.50) 30%,
      rgba(10, 12, 14, 0.28) 55%,
      rgba(10, 12, 14, 0.06) 80%,
      rgba(10, 12, 14, 0.00) 95%),
    linear-gradient(
      to top,
      rgba(10, 12, 14, 0.78)  0%,
      rgba(10, 12, 14, 0.60) 30%,
      rgba(10, 12, 14, 0.36) 62%,
      rgba(10, 12, 14, 0.14) 88%,
      rgba(10, 12, 14, 0.06) 100%);
}
/* En pantalla estrecha el texto ocupa TODO el ancho, así que se come también
   la parte derecha de la foto —que es la que el velo lateral deja clara— y
   además el titular crece de tamaño relativo. Con las fotos nuevas de los
   servicios, más claras que las anteriores (taller de día, paredes blancas),
   a 320px se quedaba en 4,0:1 contra los 4,5 que pide AA.
   Se refuerza SOLO aquí: subir la base en todas las anchuras apagaría la
   foto en escritorio, donde sobra margen (6,0:1) y donde la foto es lo que
   vende el servicio. */
@media (max-width: 480px) {
  .sec-hero-media::after {
    background:
      linear-gradient(rgba(10, 12, 14, 0.50), rgba(10, 12, 14, 0.50)),
      linear-gradient(
        to top,
        rgba(10, 12, 14, 0.72)  0%,
        rgba(10, 12, 14, 0.54) 34%,
        rgba(10, 12, 14, 0.30) 68%,
        rgba(10, 12, 14, 0.12) 100%);
  }
}

.sec-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5) clamp(36px, 5vw, 64px);
}

.sec-miga {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}
.sec-miga a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.sec-miga a:hover { color: #FFFFFF; }
@media (hover: none) { .sec-miga a { min-height: 44px; display: inline-flex; align-items: center; } }

.sec-hero .sec-hero-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--space-4);
}
.sec-hero .sec-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.sec-hero .sec-hero-subtitle {
  margin: var(--space-5) 0 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.sec-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.sec-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 15px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sec-btn svg { width: 16px; height: 16px; }
/* Azul de marca: los botones caen sobre la parte baja del velo (0,90 de
   negro), donde el blanco sobre azul da 5,96:1 — por encima del 4,5 de
   AA. Es el mismo botón que el de la barra, para que la web no tenga
   dos botones principales de dos colores. */
.sec-btn-solido {
  background: var(--brand-blue);
  color: #FFFFFF;
  border: 1px solid var(--brand-blue);
}
.sec-btn-solido:hover { background: var(--brand-blue-hover); border-color: var(--brand-blue-hover); }
.sec-btn-fantasma {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}
.sec-btn-fantasma:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
.sec-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* La sección de intro venía calculada para ir justo debajo de un hero
   blanco; con el hero oscuro necesita su propio respiro. */
.sec-hero + .sec-intro { padding-top: clamp(48px, 7vw, 88px); }

/* Separación entre párrafos consecutivos del bloque de prosa "Cómo lo
   hacemos" que se añadió a cada servicio. El `+` hace que solo aplique
   cuando hay más de un párrafo seguido: la intro de un solo párrafo del
   grid superior no cambia. */
.sec-intro-body + .sec-intro-body { margin-top: 0.9em; }