/* RHD image treatment: crisp source rendering + softer integration with the light layout. */
:root{--rhd-page:#f4f4f1}

/* Never ask the browser for pixel-art scaling. */
.service-page img{image-rendering:auto;-ms-interpolation-mode:bicubic}

/* Homepage service grid: independent cards with breathing room, soft corners and no hard shared borders. */
.service-grid{
  border:0 !important;
  gap:clamp(18px,2vw,26px);
  align-items:stretch;
}
.service-card.service-card--link{
  border:0 !important;
  border-radius:26px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(249,249,247,.98) 72%,rgba(244,244,241,.96));
  box-shadow:
    0 14px 34px rgba(16,16,18,.055),
    0 2px 8px rgba(16,16,18,.025),
    inset 0 0 0 1px rgba(18,18,18,.055);
  transition:transform .24s ease,box-shadow .24s ease;
}
.service-card.service-card--link:hover{
  transform:translateY(-3px);
  box-shadow:
    0 20px 46px rgba(16,16,18,.075),
    0 5px 14px rgba(16,16,18,.035),
    inset 0 0 0 1px rgba(197,19,25,.07);
}

/* Service 01 card: make the photograph feel integrated with the light page rather than boxed in. */
.service-card.service-card--motors{
  background:transparent;
  border:0 !important;
  border-radius:26px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    0 16px 38px rgba(12,12,12,.075),
    0 3px 10px rgba(12,12,12,.035);
}
.service-card.service-card--motors::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(7,7,8,.36),rgba(7,7,8,.74)),
    url('assets/motors/rebobinado-card.jpg') center 47%/cover no-repeat;
  filter:saturate(1.03) contrast(1.03);
  transform:translateZ(0);
}
.service-card.service-card--motors::after{
  content:"";
  position:absolute;
  inset:5px;
  z-index:1;
  pointer-events:none;
  border-radius:22px;
  background:
    linear-gradient(90deg,rgba(244,244,241,.20) 0%,rgba(17,17,17,0) 7%,rgba(17,17,17,0) 93%,rgba(244,244,241,.20) 100%),
    linear-gradient(180deg,rgba(244,244,241,.14) 0%,rgba(17,17,17,0) 8%,rgba(17,17,17,0) 87%,rgba(244,244,241,.18) 100%),
    linear-gradient(120deg,rgba(197,19,25,.10),transparent 56%);
  box-shadow:
    inset 0 0 34px rgba(17,17,17,.20),
    0 0 18px rgba(244,244,241,.22);
}
.service-card.service-card--motors>h3,
.service-card.service-card--motors>p,
.service-card.service-card--motors>.service-no,
.service-card.service-card--motors>.service-enter{position:relative;z-index:2}

/* Homepage hero: real RHD workshop photo while preserving the original layout and information architecture. */
.hero-visual{
  isolation:isolate;
  border-radius:30px;
  background:
    linear-gradient(115deg,rgba(8,8,9,.08),rgba(8,8,9,.02) 48%,rgba(8,8,9,.16)),
    url('assets/hero/hero-rhd-stator.png') center 49%/cover no-repeat;
  box-shadow:
    0 24px 64px rgba(18,18,18,.14),
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 58px rgba(244,244,241,.12);
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(244,244,241,.28),transparent 8%,transparent 94%,rgba(244,244,241,.15)),
    linear-gradient(180deg,rgba(244,244,241,.10),transparent 15%,transparent 76%,rgba(8,8,9,.28));
  box-shadow:inset 0 0 42px rgba(244,244,241,.10);
}
.hero-visual .tech-grid{
  z-index:2;
  opacity:.20;
  mix-blend-mode:soft-light;
}
.hero-visual .rotor-disc{display:none}
.hero-visual .hero-mark{
  z-index:3;
  right:18px;
  top:8px;
  font-size:180px;
  color:rgba(255,255,255,.055);
  text-shadow:0 1px 18px rgba(0,0,0,.10);
}
.hero-visual .red-bar{
  z-index:4;
  right:18px;
  top:18px;
  width:9px;
  height:35%;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(197,19,25,.22);
}
.hero-visual .hero-plate{
  z-index:5;
  left:28px;
  right:28px;
  bottom:28px;
  border-left:5px solid var(--red);
  border-radius:18px;
  background:rgba(248,248,246,.88);
  backdrop-filter:blur(12px) saturate(1.08);
  -webkit-backdrop-filter:blur(12px) saturate(1.08);
  box-shadow:0 18px 40px rgba(0,0,0,.16);
}

/* The three hero steps stay concise but gain visual hierarchy instead of looking like plain rows. */
.hero-metrics{
  gap:12px;
  border:0;
  background:transparent;
}
.hero-metrics div{
  position:relative;
  min-height:94px;
  padding:18px 18px 17px;
  border:0;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  box-shadow:
    0 10px 28px rgba(18,18,18,.045),
    inset 0 0 0 1px rgba(18,18,18,.055);
}
.hero-metrics div::before{
  content:"";
  position:absolute;
  left:18px;
  top:10px;
  width:28px;
  height:3px;
  border-radius:999px;
  background:var(--red);
}
.hero-metrics strong{margin-top:7px}

/* Hero navigation: existing elements become useful without adding more blocks or explanatory copy. */
.hero-metric--interactive{
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.hero-metric--interactive:hover,
.hero-metric--interactive:focus-visible{
  transform:translateY(-3px);
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 34px rgba(18,18,18,.075),inset 0 0 0 1px rgba(197,19,25,.18);
  outline:0;
}
.hero-metric--interactive:active{transform:translateY(1px) scale(.975);box-shadow:0 5px 14px rgba(18,18,18,.07),inset 0 0 0 1px rgba(197,19,25,.24)}
.hero-plate--interactive{
  cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.hero-plate--interactive:hover,
.hero-plate--interactive:focus-visible{
  transform:translateY(-4px);
  background:rgba(252,252,250,.94);
  box-shadow:0 24px 48px rgba(0,0,0,.20);
  outline:0;
}
.hero-plate--interactive:active{
  transform:translateY(2px) scale(.982);
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 18px rgba(0,0,0,.18),inset 5px 0 0 var(--red);
}
.hero-visual .hero-plate .hero-plate-action{
  display:block;
  margin-top:14px;
  color:var(--red);
  font-family:Inter,system-ui,sans-serif;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  transition:letter-spacing .2s ease,transform .2s ease;
}
.hero-plate--interactive:hover .hero-plate-action,
.hero-plate--interactive:focus-visible .hero-plate-action{
  letter-spacing:.17em;
  transform:translateX(3px);
}
.hero-plate--interactive:active .hero-plate-action{transform:translateX(8px) scale(.98)}

/* Tactile feedback for the ordinary buttons: small, quick and physical rather than flashy. */
.btn,.header-cta{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transform:translateZ(0);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease,background-color .18s ease,color .18s ease;
}
.btn::after,.header-cta::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.22) 48%,transparent 70%);
  transform:translateX(-135%);
  transition:transform .34s ease;
}
.btn:hover::after,.header-cta:hover::after{transform:translateX(135%)}
.btn:active,.header-cta:active{
  transform:translateY(2px) scale(.965);
  filter:saturate(.96) brightness(.97);
  box-shadow:0 4px 10px rgba(0,0,0,.14) !important;
  transition-duration:.06s;
}
.btn-primary{box-shadow:0 10px 22px rgba(197,19,25,.16)}
.btn-primary:active{box-shadow:0 3px 8px rgba(197,19,25,.24) !important}
.btn-ghost:active{background:#171717;color:#fff;border-color:#171717}
.btn:focus-visible,.header-cta:focus-visible{outline:2px solid rgba(197,19,25,.55);outline-offset:3px}

/* Brief destination emphasis after using 01/02/03; no permanent extra decoration. */
.process-steps article{
  position:relative;
  transition:transform .28s ease,background-color .28s ease,box-shadow .28s ease;
}
.process-steps article.is-targeted{
  z-index:2;
  transform:translateY(-4px);
  background:#181818;
  box-shadow:inset 0 0 0 2px rgba(197,19,25,.92),0 16px 40px rgba(0,0,0,.26);
}
.process-steps article.is-targeted::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:14px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--red),transparent 72%);
}

/* Main photograph: semi-rounded and softly feathered into the page. */
.service-hero-image{
  margin:0;
  border-radius:24px;
  overflow:hidden;
  isolation:isolate;
  background:var(--rhd-page);
  box-shadow:0 18px 48px rgba(12,12,12,.09);
}
.service-hero-image img{
  z-index:0;
  image-rendering:auto;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.service-hero-image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(244,244,241,.25),transparent 6%,transparent 94%,rgba(244,244,241,.25)),
    linear-gradient(180deg,rgba(244,244,241,.18),transparent 6%,transparent 92%,rgba(244,244,241,.25));
  box-shadow:inset 0 0 24px rgba(244,244,241,.15);
}
.service-hero-image::after{z-index:2}

/* Evidence photographs: no pointed corners or hard rectangular cut-out. */
.photo-block{
  border-radius:20px;
  overflow:hidden;
  isolation:isolate;
  background:var(--rhd-page);
  box-shadow:0 14px 38px rgba(12,12,12,.08);
}
.photo-block img{
  z-index:0;
  image-rendering:auto;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.photo-block::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(244,244,241,.20),transparent 5%,transparent 95%,rgba(244,244,241,.20)),
    linear-gradient(180deg,rgba(244,244,241,.14),transparent 6%,transparent 91%,rgba(244,244,241,.18));
  box-shadow:inset 0 0 18px rgba(244,244,241,.12);
}
.photo-block figcaption{z-index:2}
.photo-placeholder{border-radius:16px;overflow:hidden}

/* On small screens keep each service visually independent and slightly more separated. */
@media(max-width:640px){
  .service-grid{gap:22px}
  .service-card.service-card--link{border-radius:24px}
  .service-card.service-card--motors{border-radius:24px}
  .service-card.service-card--motors::before,.service-card.service-card--motors::after{inset:4px;border-radius:20px}
  .hero-visual{
    min-height:520px;
    border-radius:24px;
    background-position:center 48%;
    box-shadow:0 18px 44px rgba(18,18,18,.12),inset 0 0 0 1px rgba(255,255,255,.16);
  }
  .hero-visual .hero-mark{font-size:125px;right:8px;top:4px}
  .hero-visual .red-bar{right:12px;top:14px;height:31%;width:7px}
  .hero-visual .hero-plate{left:14px;right:14px;bottom:14px;padding:20px 22px;border-radius:16px}
  .hero-visual .hero-plate span{font-size:24px}
  .hero-visual .hero-plate .hero-plate-action{font-size:10px;margin-top:12px}
  .hero-visual .hero-plate strong{font-size:40px}
  .hero-metrics{gap:12px;margin-top:38px}
  .hero-metrics div{min-height:86px;border-radius:16px;padding:17px 16px 15px}
  .hero-metric--interactive:active{background:#fff;box-shadow:0 5px 14px rgba(18,18,18,.08),inset 0 0 0 1px rgba(197,19,25,.24)}
  .btn:active,.header-cta:active{transform:translateY(2px) scale(.958)}
  .hero-plate--interactive:active{transform:translateY(2px) scale(.976)}
  .service-hero-image{border-radius:18px}
  .photo-block{border-radius:16px}
}

/* Respect users who explicitly request reduced motion. */
@media(prefers-reduced-motion:reduce){
  .btn,.header-cta,.hero-metric--interactive,.hero-plate--interactive,.hero-plate-action{transition:none !important}
  .btn::after,.header-cta::after{display:none}
}

/* RHD interaction policy: public text is intentionally non-selectable. */
body,body *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
input,textarea,[contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
::selection{background:transparent;color:inherit}
::-moz-selection{background:transparent;color:inherit}