:root {
  --jac-white: oklch(0.985 0.005 250);
  --jac-canvas: oklch(0.925 0.014 250);
  --jac-paper: oklch(0.945 0.012 250);
  --jac-silver: oklch(0.875 0.018 250);
  --jac-line: oklch(0.79 0.018 250);
  --jac-steel: oklch(0.49 0.02 250);
  --jac-ink: oklch(0.19 0.012 250);
  --jac-black: oklch(0.12 0.01 250);
  --jac-orange: oklch(0.68 0.2 48);
  --jac-orange-dark: oklch(0.54 0.18 43);
  --paper: var(--jac-paper);
  --white: var(--jac-white);
  --line: var(--jac-line);
  --muted: var(--jac-steel);
  --ink: var(--jac-ink);
  --ink-2: oklch(0.25 0.014 250);
}

/* Interactive 3D technical instruments and corrected cinematic framing. */
:root {
  --frantek-energy: oklch(0.88 0.23 125);
  --frantek-energy-deep: oklch(0.72 0.2 128);
  --frantek-heat: oklch(0.72 0.22 48);
  --frantek-panel: oklch(0.105 0.012 250 / .94);
}

.jac-hero--cinematic {
  min-height: max(720px, 100svh, 56.25vw);
}

.jac-hero--cinematic .jac-hero-slide > video {
  object-fit: contain;
  object-position: center center;
  background: oklch(0.07 0.008 250);
  filter: brightness(1.12) saturate(1.1) contrast(1.025);
}

.jac-hero-copy--minimal {
  z-index: 4;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  align-items: end;
}

.jac-hero-copy--minimal .jac-hero-message h1 {
  max-width: 15ch;
  white-space: normal;
  text-wrap: balance;
}

.jac-hero-copy--minimal > a {
  margin: 0 76px 0 0;
  justify-self: end;
  align-self: end;
  white-space: nowrap;
}

.hero-instrument-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  margin: 0;
  display: block;
  pointer-events: none;
  perspective: 1500px;
  perspective-origin: center 35%;
}

.hero-instrument {
  --panel-rx: 0deg;
  --panel-ry: 0deg;
  --panel-base-ry: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  position: absolute;
  display: block;
  color: oklch(0.97 0.006 250);
  text-decoration: none;
  pointer-events: auto;
  transform: rotateX(var(--panel-rx)) rotateY(calc(var(--panel-base-ry) + var(--panel-ry))) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 360ms cubic-bezier(.16, 1, .3, 1), filter 260ms ease-out;
  will-change: transform;
  contain: layout paint style;
}

.hero-instrument--climate {
  --panel-base-ry: 7deg;
  top: clamp(116px, 17vh, 180px);
  left: clamp(24px, 3.2vw, 64px);
  width: clamp(260px, 23.5vw, 350px);
}

.hero-instrument--energy {
  --panel-base-ry: -7deg;
  top: clamp(112px, 16vh, 170px);
  right: clamp(24px, 3.2vw, 64px);
  width: clamp(294px, 27vw, 400px);
}

.instrument-depth {
  position: absolute;
  z-index: -1;
  inset: 9px -10px -12px 10px;
  border: 1px solid oklch(0.32 0.025 250 / .7);
  border-radius: 13px;
  background: oklch(0.065 0.009 250 / .94);
  box-shadow: 0 28px 54px oklch(0.03 0.008 250 / .7);
  transform: translateZ(-28px);
}

.instrument-face {
  position: relative;
  min-height: 100%;
  padding: 15px 16px 14px;
  display: block;
  overflow: hidden;
  border: 1px solid oklch(0.5 0.025 250 / .48);
  border-radius: 12px;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y), oklch(0.72 0.04 120 / .12), transparent 35%),
    linear-gradient(145deg, oklch(0.16 0.018 250 / .96), var(--frantek-panel) 54%, oklch(0.08 0.009 250 / .97));
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.008 250 / .18),
    inset 0 -22px 44px oklch(0.04 0.008 250 / .32),
    0 24px 50px oklch(0.03 0.008 250 / .44);
  transform: translateZ(18px);
  backdrop-filter: blur(11px) saturate(1.14);
}

.instrument-face::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.7%, oklch(0.8 0.02 250 / .045) 50%, transparent 50.3%),
    linear-gradient(oklch(0.8 0.02 250 / .035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 28px;
  content: "";
  pointer-events: none;
}

.hero-instrument:hover,
.hero-instrument:focus-visible {
  filter: drop-shadow(0 22px 35px oklch(0.05 0.01 250 / .58));
  transform: rotateX(var(--panel-rx)) rotateY(calc(var(--panel-base-ry) + var(--panel-ry))) translate3d(0, -5px, 28px) scale(1.018);
}

.hero-instrument:focus-visible {
  outline: 2px solid var(--jac-orange);
  outline-offset: 8px;
  border-radius: 14px;
}

.instrument-head,
.instrument-head > span,
.instrument-live,
.climate-readout,
.temperature-scale,
.temperature-caption,
.energy-footer,
.energy-footer > span {
  display: flex;
}

.instrument-head {
  position: relative;
  z-index: 2;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.instrument-head > span:first-child {
  align-items: baseline;
  gap: 7px;
}

.instrument-head b {
  font-family: "Jost", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .075em;
}

.instrument-head small {
  color: oklch(0.72 0.012 250);
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.instrument-live {
  align-items: center;
  gap: 6px;
  color: oklch(0.82 0.018 250);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .13em;
}

.instrument-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--frantek-energy);
  box-shadow: 0 0 12px var(--frantek-energy);
  animation: instrumentLive 1.8s ease-in-out infinite;
}

.climate-readout {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.climate-condition {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  column-gap: 8px;
}

.climate-condition small {
  grid-column: 1 / -1;
  color: oklch(0.68 0.015 250);
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .13em;
}

.climate-condition b {
  font-family: "Jost", sans-serif;
  font-size: clamp(2.1rem, 3.1vw, 3rem);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.07em;
}

.climate-condition em {
  margin-bottom: 4px;
  color: var(--frantek-energy);
  font-size: .49rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
}

.climate-dial {
  position: relative;
  width: 76px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.climate-dial svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: oklch(0.4 0.018 250);
  stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-8deg);
}

.climate-dial svg path:nth-of-type(1) {
  stroke: url(#energyFlowGradient);
}

.climate-dial-flow {
  stroke: var(--frantek-energy);
  stroke-dasharray: 8 14;
  filter: drop-shadow(0 0 5px var(--frantek-energy));
  animation: climateDialFlow 2.5s linear infinite;
}

.climate-dial > span {
  position: relative;
  z-index: 2;
  font-family: "Jost", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.climate-dial sup {
  color: oklch(0.7 0.015 250);
  font-size: .42rem;
}

.temperature-control {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  display: block;
}

.temperature-scale,
.temperature-caption {
  align-items: center;
  justify-content: space-between;
}

.temperature-scale small,
.temperature-caption small,
.temperature-caption strong {
  color: oklch(0.65 0.015 250);
  font-size: .43rem;
  font-weight: 600;
}

.temperature-track {
  position: relative;
  height: 15px;
  margin-top: 4px;
  display: block;
  overflow: hidden;
  border: 1px solid oklch(0.58 0.03 250 / .48);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--frantek-heat), oklch(0.83 0.2 78) 48%, var(--frantek-energy));
  box-shadow: inset 0 2px 5px oklch(0.08 0.02 250 / .6), 0 0 18px oklch(0.82 0.2 92 / .16);
}

.temperature-track::after {
  position: absolute;
  inset: 1px auto 1px -32%;
  width: 30%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, oklch(0.98 0.01 100 / .62), transparent);
  content: "";
  animation: temperatureSweep 3s cubic-bezier(.16, 1, .3, 1) infinite;
}

.temperature-track i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 48%;
  width: 3px;
  height: 23px;
  border-radius: 999px;
  background: oklch(0.98 0.005 250);
  box-shadow: 0 0 9px oklch(0.98 0.005 250 / .8);
  transform: translate(-50%, -50%);
}

.temperature-track b {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 48%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: oklch(0.98 0.005 250);
  transform: translate(-50%, -50%);
}

.temperature-caption {
  margin-top: 6px;
}

.temperature-caption strong {
  color: oklch(0.86 0.015 250);
  letter-spacing: .1em;
}

.energy-canvas {
  position: relative;
  z-index: 2;
  margin-top: 5px;
  display: block;
}

.energy-canvas svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.energy-path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 9;
}

.energy-path--idle {
  stroke: oklch(0.32 0.02 250);
}

.energy-path--live {
  stroke: url(#energyFlowGradient);
  stroke-dasharray: 14 12;
  filter: url(#energyGlow);
  animation: energyFlow 1.45s linear infinite;
}

.energy-path--delay {
  animation-delay: -.72s;
}

.energy-node rect,
.energy-output rect {
  fill: oklch(0.2 0.018 250);
  stroke: oklch(0.45 0.025 250);
  stroke-width: 1;
}

.energy-node--source:first-of-type rect {
  fill: url(#energyFlowGradient);
  stroke: var(--frantek-energy);
  filter: url(#energyGlow);
}

.energy-node--secondary rect {
  fill: oklch(0.18 0.015 250);
}

.energy-node--core rect {
  fill: var(--frantek-energy);
  stroke: oklch(0.94 0.18 125);
  filter: url(#energyGlow);
}

.energy-node text {
  fill: oklch(0.12 0.015 250);
  font: 700 15px "Jost", sans-serif;
  text-anchor: middle;
}

.energy-node--secondary text {
  fill: oklch(0.8 0.012 250);
}

.energy-node--core text {
  font-size: 13px;
}

.energy-footer {
  position: relative;
  z-index: 2;
  margin-top: -5px;
  padding-top: 9px;
  align-items: end;
  justify-content: space-between;
  border-top: 1px solid oklch(0.44 0.02 250 / .54);
}

.energy-footer > span:not(.energy-mode) {
  flex-direction: column;
}

.energy-footer small {
  color: oklch(0.62 0.014 250);
  font-size: .43rem;
  font-weight: 700;
  letter-spacing: .13em;
}

.energy-footer b {
  font-family: "Jost", sans-serif;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1;
}

.energy-footer b i {
  color: oklch(0.7 0.015 250);
  font-size: .48rem;
  font-style: normal;
}

.energy-mode {
  padding: 4px 8px;
  border: 1px solid oklch(0.45 0.025 250);
  border-radius: 3px;
  color: var(--frantek-energy);
  font-size: .42rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .08em;
  text-align: center;
}

@keyframes energyFlow {
  to { stroke-dashoffset: -52; }
}

@keyframes climateDialFlow {
  to { stroke-dashoffset: -44; }
}

@keyframes temperatureSweep {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  72%, 100% { transform: translateX(440%); opacity: 0; }
}

@keyframes instrumentLive {
  0%, 100% { opacity: .55; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.18); }
}

@media (max-width: 900px) {
  .jac-hero--cinematic {
    min-height: max(760px, 100svh);
  }

  .jac-hero--cinematic .jac-hero-slide > video {
    object-fit: cover;
    object-position: 54% center;
  }

  .hero-instrument--climate,
  .hero-instrument--energy {
    top: 96px;
    width: calc(50% - 18px);
    max-width: 330px;
  }

  .hero-instrument--climate {
    left: 12px;
  }

  .hero-instrument--energy {
    right: 12px;
  }

  .instrument-face {
    padding: 11px 11px 10px;
  }

  .instrument-head small,
  .instrument-live {
    display: none;
  }

  .climate-dial {
    width: 58px;
  }

  .climate-condition b {
    font-size: clamp(1.65rem, 7vw, 2.35rem);
  }

  .energy-footer {
    padding-top: 6px;
  }

  .energy-footer b {
    font-size: .9rem;
  }

  .jac-hero-copy--minimal {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 20px 26px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .jac-hero-copy--minimal .jac-hero-message h1 {
    max-width: 9.5ch;
    font-size: clamp(2.65rem, 12.5vw, 4.4rem);
    line-height: .86;
  }

  .jac-hero-copy--minimal > a {
    width: fit-content;
    min-height: 48px;
    justify-self: start;
    align-self: auto;
    padding-inline: 18px;
  }
}

@media (max-width: 560px) {
  .hero-instrument--climate,
  .hero-instrument--energy {
    top: 88px;
    width: calc(50% - 12px);
  }

  .hero-instrument--climate { left: 7px; }
  .hero-instrument--energy { right: 7px; }

  .instrument-depth {
    inset: 6px -5px -7px 5px;
  }

  .instrument-head b {
    font-size: .58rem;
  }

  .climate-readout {
    margin-top: 7px;
    gap: 5px;
  }

  .climate-condition small,
  .climate-condition em,
  .temperature-scale,
  .temperature-caption,
  .energy-mode {
    display: none;
  }

  .temperature-track {
    height: 12px;
    margin-top: 5px;
  }

  .energy-canvas {
    margin-top: 0;
  }

  .energy-footer small {
    font-size: .34rem;
  }

  .energy-footer b {
    font-size: .74rem;
  }

  .jac-hero-copy--minimal {
    padding-inline: 18px;
    gap: 14px;
  }

  .jac-hero-copy--minimal .jac-hero-message h1 {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-instrument,
  .instrument-live i,
  .energy-path--live,
  .climate-dial-flow,
  .temperature-track::after {
    animation: none !important;
    transition: none !important;
  }

  .hero-instrument {
    transform: none;
  }
}

/* Release 69 — herramienta 3D en acción dentro del cierre de contacto */
#contacto .contact-tool-motion {
  position: relative;
  z-index: 1;
  width: clamp(106px, 10vw, 142px);
  aspect-ratio: 1;
  margin: 10px 0 -57px clamp(28px, 11vw, 150px);
  pointer-events: none;
  isolation: isolate;
}

#contacto .contact-tool-motion::before {
  position: absolute;
  right: 5%;
  top: 19%;
  z-index: -1;
  width: 35%;
  aspect-ratio: 1;
  border: 2px dashed rgb(197 255 39 / .88);
  border-radius: 50%;
  box-shadow: 0 0 15px rgb(177 255 35 / .42), inset 0 0 13px rgb(177 255 35 / .24);
  content: "";
  animation: contact-bolt-turn 2.2s linear infinite;
}

#contacto .contact-tool-motion::after {
  position: absolute;
  right: 21%;
  top: 34%;
  z-index: -1;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d5ff38;
  box-shadow: 0 0 8px 3px rgb(205 255 38 / .75);
  content: "";
  animation: contact-work-pulse 1.1s ease-in-out infinite alternate;
}

#contacto .contact-tool-bolt {
  position: absolute;
  right: 13%;
  top: 26%;
  z-index: -1;
  width: 23%;
  aspect-ratio: 1;
  border: 2px solid rgb(255 130 35 / .88);
  border-radius: 8px;
  box-shadow: 0 0 13px rgb(255 111 20 / .42);
  transform: rotate(45deg);
}

#contacto .contact-tool-motion img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 13px 11px rgb(0 0 0 / .68)) drop-shadow(0 0 11px rgb(255 121 20 / .2));
  transform-origin: 58% 67%;
  animation: contact-tool-repair 2.65s cubic-bezier(.42, 0, .24, 1) infinite;
}

@keyframes contact-tool-repair {
  0%, 100% { transform: rotate(-10deg) translate(0, 0) scale(1); }
  21% { transform: rotate(-1deg) translate(4px, -3px) scale(1.025); }
  35% { transform: rotate(5deg) translate(0, 4px) scale(1.015); }
  53% { transform: rotate(-7deg) translate(3px, 1px) scale(1.03); }
  72% { transform: rotate(1deg) translate(-2px, -2px) scale(1.01); }
}

@keyframes contact-bolt-turn { to { transform: rotate(405deg); } }

@keyframes contact-work-pulse {
  from { opacity: .42; transform: scale(.7); }
  to { opacity: 1; transform: scale(1.18); }
}

@media (max-width: 680px) {
  #contacto .contact-tool-motion {
    margin: 18px auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #contacto .contact-tool-motion::before,
  #contacto .contact-tool-motion::after,
  #contacto .contact-tool-motion img {
    animation: none;
  }
}

/* La animación de ajuste fue solicitada expresamente para este elemento decorativo. */
#contacto .contact-tool-motion::before { animation: contact-bolt-turn 2.2s linear infinite !important; }
#contacto .contact-tool-motion::after { animation: contact-work-pulse 1.1s ease-in-out infinite alternate !important; }
#contacto .contact-tool-motion img { animation: contact-tool-repair 2.65s cubic-bezier(.42, 0, .24, 1) infinite !important; }

/* Release 35: industrial headline and client-supplied transformation gallery. */
.showcase-intro h2.showcase-title-metal {
  width: min(100%, 610px);
  max-width: none;
  line-height: 0;
  letter-spacing: 0;
}

.showcase-title-metal > img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 18px 18px oklch(0.12 0.01 250 / .16));
}

.showcase-media--comparison {
  background: oklch(0.12 0.01 250);
  background-image: var(--comparison-bg);
  background-position: center;
  background-size: cover;
}

.showcase-media--comparison::before {
  position: absolute;
  z-index: 0;
  inset: -18px;
  background: oklch(0.08 0.01 250 / .38);
  backdrop-filter: blur(16px);
  content: "";
}

.showcase-media--comparison > img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
}

.showcase-slide[data-service="climatizacion"] .showcase-media--comparison {
  --comparison-bg: url("assets/antes-despues-climatizacion.webp");
}

.showcase-slide[data-service="pergolas"] .showcase-media--comparison {
  --comparison-bg: url("assets/antes-despues-pergola.webp");
}

.showcase-slide[data-service="remodelacion"] .showcase-media--comparison {
  --comparison-bg: url("assets/antes-despues-bano-remodelacion.webp");
}

@media (max-width: 560px) {
  .showcase-intro h2.showcase-title-metal {
    width: calc(100% - 72px);
    max-width: none;
  }

  .showcase-tool-motion {
    right: -34px;
    width: 112px;
  }
}

html {
  background: var(--jac-white);
  color-scheme: light;
  scroll-padding-top: 88px;
}

body,
main {
  background-color: var(--jac-canvas);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  border-bottom: 1px solid oklch(0.79 0.018 250 / .68);
  background: oklch(0.985 0.005 250 / .95);
  color: var(--jac-ink);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.site-header.scrolled {
  border-bottom-color: oklch(0.75 0.02 250 / .7);
  background: oklch(0.985 0.005 250 / .97);
  box-shadow: 0 12px 35px rgba(10, 16, 20, 0.08);
  color: var(--jac-ink);
}

.site-header .header-inner {
  min-height: 100px;
}

.site-header .brand {
  display: flex;
  width: 214px;
  height: 94px;
  flex: 0 0 214px;
  padding: 0;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.site-header .brand img {
  display: block;
  position: absolute !important;
  top: -57px !important;
  left: -42px !important;
  width: 318px !important;
  height: auto !important;
  max-width: none !important;
  object-fit: initial;
  filter: none;
  transform: none;
}

.site-header nav a {
  color: inherit;
}

.site-header nav a::after {
  background: var(--jac-orange);
}

.site-header .header-cta {
  border: 1px solid var(--jac-orange);
  background: var(--jac-orange);
  color: var(--jac-white);
  box-shadow: 0 8px 22px rgba(245, 104, 0, 0.22);
}

.jac-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--jac-black);
  color: var(--jac-white);
  isolation: isolate;
}

.jac-hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 760ms ease, transform 1100ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 760ms;
}

.jac-hero-slide.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition-delay: 0s;
}

.jac-hero-slide > img,
.jac-hero-slide > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.jac-hero-slide:nth-of-type(3) > img {
  object-position: center 58%;
}

.jac-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 7, 9, 0.52) 0%, rgba(5, 7, 9, 0.1) 35%, rgba(5, 7, 9, 0.22) 58%, rgba(5, 7, 9, 0.84) 100%),
    linear-gradient(90deg, rgba(5, 7, 9, 0.22), transparent 55%);
}

.jac-hero-copy {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 168px;
  width: min(920px, calc(100% - 160px));
  text-align: center;
  transform: translate(-50%, 24px);
  opacity: 0;
  transition: opacity 560ms ease 240ms, transform 700ms cubic-bezier(.2,.7,.2,1) 240ms;
}

.jac-hero-slide.is-active .jac-hero-copy {
  opacity: 1;
  transform: translate(-50%, 0);
}

.jac-hero-copy > p {
  margin: 0 0 13px;
  color: var(--jac-white);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .22em;
}

.jac-hero-copy h1,
.jac-hero-copy h2 {
  max-width: 940px;
  margin: 0 auto;
  color: var(--jac-white);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(3.2rem, 6vw, 6.5rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .36);
}

.jac-hero-copy > span {
  display: block;
  max-width: 680px;
  margin: 20px auto 0;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(.98rem, 1.25vw, 1.18rem);
  line-height: 1.55;
}

.jac-hero-copy > a {
  display: inline-flex;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--jac-ink);
  font-size: .87rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.jac-hero-copy > a:hover,
.jac-hero-copy > a:focus-visible {
  border-color: var(--jac-orange);
  background: var(--jac-orange);
  color: var(--jac-white);
  transform: translateY(-2px);
}

.jac-hero-arrow,
.service-model-arrow {
  position: absolute;
  z-index: 6;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 50%;
  background: rgba(9, 11, 13, .24);
  color: var(--jac-white);
  font-size: 1.4rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.jac-hero-arrow:hover,
.jac-hero-arrow:focus-visible {
  border-color: var(--jac-orange);
  background: var(--jac-orange);
  transform: scale(1.07);
}

.jac-hero-prev { left: 36px; top: 50%; }
.jac-hero-next { right: 36px; top: 50%; }

.jac-hero-nav {
  position: absolute;
  z-index: 7;
  right: 88px;
  bottom: 28px;
  left: 88px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .35);
}

.jac-hero-nav button {
  position: relative;
  min-height: 54px;
  padding: 14px 18px 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .67);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.jac-hero-nav button::before {
  position: absolute;
  top: -1px;
  right: 100%;
  left: 0;
  height: 2px;
  background: var(--jac-orange);
  content: "";
  transition: right 420ms ease;
}

.jac-hero-nav button.is-active::before { right: 0; }
.jac-hero-nav button.is-active { color: var(--jac-white); }
.jac-hero-nav button span { margin-right: 10px; color: var(--jac-orange); }

.jac-hero-pause {
  position: absolute;
  z-index: 8;
  right: 24px;
  bottom: 29px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  background: rgba(10, 12, 14, .38);
  color: var(--jac-white);
  cursor: pointer;
}

.service-models {
  position: relative;
  overflow: hidden;
  padding: 110px 0 90px;
  background: var(--jac-canvas);
  color: var(--jac-ink);
}

.service-models::before,
.service-models::after {
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(101, 112, 122, .1);
  content: "";
  transform: rotate(45deg);
  pointer-events: none;
}

.service-models::before { top: 120px; right: -190px; }
.service-models::after { bottom: -230px; left: -130px; }

.service-models-shell {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  text-align: center;
}

.service-models-kicker {
  margin: 0 0 12px;
  color: var(--jac-orange-dark);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .23em;
}

.service-models h2 {
  margin: 0;
  color: var(--jac-ink);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(2.6rem, 5vw, 5.4rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.service-model-tabs {
  display: flex;
  max-width: 1050px;
  margin: 38px auto 0;
  justify-content: center;
  border-bottom: 1px solid var(--jac-line);
}

.service-model-tabs button {
  position: relative;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--jac-steel);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.service-model-tabs button::after {
  position: absolute;
  right: 50%;
  bottom: -1px;
  left: 50%;
  height: 3px;
  background: var(--jac-orange);
  content: "";
  transition: right 220ms ease, left 220ms ease;
}

.service-model-tabs button.is-active,
.service-model-tabs button:hover,
.service-model-tabs button:focus-visible { color: var(--jac-ink); }
.service-model-tabs button.is-active::after { right: 0; left: 0; }

.service-model-stage {
  position: relative;
  min-height: 660px;
  margin-top: 34px;
}

.service-model {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  visibility: hidden;
  opacity: 0;
  transform: translateX(26px);
  transition: opacity 420ms ease, transform 540ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 540ms;
}

.service-model.is-active {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0s;
}

.service-model figure {
  position: relative;
  width: min(1080px, calc(100% - 180px));
  height: 470px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--jac-silver);
  box-shadow: 0 28px 54px rgba(18, 24, 28, .13);
}

.service-model figure::after {
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(7, 9, 11, .34));
  content: "";
}

.service-model figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}

.service-model.is-active figure:hover img { transform: scale(1.025); }
.service-model:nth-of-type(4) figure img { object-position: center 63%; }

.service-model > div {
  width: min(820px, calc(100% - 160px));
  margin: -48px auto 0;
  padding: 22px 32px 0;
  background: var(--jac-paper);
  text-align: center;
  position: relative;
  z-index: 2;
}

.service-model > div > span {
  color: var(--jac-orange-dark);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.service-model h3 {
  margin: 5px 0 4px;
  color: var(--jac-ink);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(2.25rem, 3.4vw, 3.65rem);
  line-height: .95;
  text-transform: uppercase;
}

.service-model p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--jac-steel);
  line-height: 1.55;
}

.service-model a,
.service-model-all {
  display: inline-flex;
  margin-top: 12px;
  padding-bottom: 5px;
  align-items: center;
  border-bottom: 1px solid var(--jac-orange);
  color: var(--jac-ink);
  font-size: .83rem;
  font-weight: 800;
  text-decoration: none;
}

.service-model-arrow {
  top: 214px;
  border-color: var(--jac-line);
  background: rgba(255, 255, 255, .9);
  color: var(--jac-ink);
  box-shadow: 0 10px 26px rgba(18, 24, 28, .1);
  backdrop-filter: none;
}

.service-model-arrow:hover,
.service-model-arrow:focus-visible {
  border-color: var(--jac-orange);
  background: var(--jac-orange);
  color: var(--jac-white);
}

.service-model-prev { left: max(2px, calc(50% - 620px)); }
.service-model-next { right: max(2px, calc(50% - 620px)); }

.service-model-all {
  margin-top: 24px;
  gap: 8px;
}

.service-model-all span { color: var(--jac-orange); }

/* Project banks: real work imagery on a neutral technical canvas. */
.service-showcase {
  background: var(--jac-white) !important;
}

.showcase-intro,
.showcase-intro h2,
.showcase-intro p {
  color: var(--jac-ink);
}

.showcase-intro .showcase-kicker,
.showcase-intro h2 span { color: var(--jac-orange-dark); }

.showcase-static-gallery {
  position: absolute;
  z-index: 8;
  right: clamp(18px, 4vw, 68px);
  bottom: 100px;
  display: flex;
  max-width: min(46vw, 610px);
  gap: 9px;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: thin;
}

.showcase-static-gallery button {
  flex: 0 0 82px;
  width: 82px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .6);
  background: var(--jac-black);
  cursor: pointer;
  opacity: .67;
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.showcase-static-gallery button:hover,
.showcase-static-gallery button:focus-visible,
.showcase-static-gallery button.is-active {
  border-color: var(--jac-orange);
  opacity: 1;
  transform: translateY(-3px);
}

.showcase-static-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Definitive cool-neutral system: no cream, beige, vanilla or pink surfaces. */
#tienda {
  background: oklch(0.905 0.018 250) !important;
  color: var(--jac-ink);
}

#proceso {
  background: var(--jac-paper) !important;
  color: var(--jac-ink);
}

#cobertura {
  background: oklch(0.885 0.022 250) !important;
  color: var(--jac-ink);
}

#preguntas {
  background: oklch(0.915 0.018 250) !important;
  color: var(--jac-ink);
}

#contacto {
  background: var(--jac-ink) !important;
  color: var(--jac-white);
}

footer {
  background: var(--jac-black) !important;
}

.process-card,
.faq-item,
.contact-card,
.product-card,
.store-card {
  border-color: var(--jac-line) !important;
  background: var(--jac-white) !important;
}

@media (max-width: 1100px) {
  .site-header .header-inner { min-height: 86px; }
  .site-header .brand { width: 190px; height: 82px; flex-basis: 190px; }
  .site-header .brand img { width: 278px !important; left: -30px !important; top: -50px !important; }
  .jac-hero-copy { bottom: 152px; width: min(860px, calc(100% - 112px)); }
  .jac-hero-nav { right: 70px; left: 70px; }
  .service-model-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; }
  .service-model figure { width: calc(100% - 130px); }
  .service-model-prev { left: 12px; }
  .service-model-next { right: 12px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 70px; }
  .site-header { background: oklch(0.985 0.005 250 / .97); }
  .site-header.scrolled { background: oklch(0.985 0.005 250 / .99); }
  .site-header .header-inner { min-height: 72px; }
  .site-header .brand { width: 168px; height: 68px; flex-basis: 168px; }
  .site-header .brand img { width: 242px !important; left: -23px !important; top: -44px !important; }
  .site-header .menu-toggle span:not(.sr-only) { background: currentColor; }

  .jac-hero { min-height: 760px; }
  .jac-hero-slide > img,
  .jac-hero-slide > video { object-position: center; }
  .jac-hero-copy { bottom: 142px; width: calc(100% - 44px); }
  .jac-hero-copy h1,
  .jac-hero-copy h2 { font-size: clamp(2.75rem, 14vw, 4.3rem); }
  .jac-hero-copy h1 { font-size: clamp(2.65rem, 13vw, 3.4rem); }
  .jac-hero-slide:first-child .jac-hero-copy > p {
    max-width: 310px;
    margin-inline: auto;
    font-size: .6rem;
    line-height: 1.45;
  }
  .jac-hero-copy > span { font-size: .93rem; }
  .jac-hero-arrow { top: auto; bottom: 88px; width: 44px; height: 44px; }
  .jac-hero-prev { left: 18px; }
  .jac-hero-next { right: 18px; }
  .jac-hero-nav { right: 76px; bottom: 28px; left: 76px; grid-template-columns: repeat(4, 1fr); }
  .jac-hero-nav button { min-height: 40px; padding: 12px 3px 0; font-size: 0; text-align: center; }
  .jac-hero-nav button span { margin: 0; font-size: .72rem; }
  .jac-hero-pause { right: 18px; bottom: 25px; }

  .service-models { padding: 76px 0 64px; }
  .service-models h2 { font-size: clamp(2.7rem, 14vw, 4.4rem); }
  .service-model-tabs { margin-top: 26px; padding: 0 2px; }
  .service-model-tabs button { padding: 0 15px; }
  .service-model-stage { min-height: 570px; margin-top: 24px; }
  .service-model figure { width: calc(100% - 28px); height: 330px; }
  .service-model > div { width: calc(100% - 50px); margin-top: -28px; padding: 18px 18px 0; }
  .service-model h3 { font-size: 2.55rem; }
  .service-model p { font-size: .92rem; }
  .service-model-arrow { top: 144px; width: 44px; height: 44px; }
  .service-model-prev { left: 2px; }
  .service-model-next { right: 2px; }
  .showcase-static-gallery { right: 14px; bottom: 84px; max-width: calc(100% - 28px); }
  .showcase-static-gallery button { flex-basis: 68px; width: 68px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .jac-hero-slide,
  .jac-hero-copy,
  .service-model,
  .service-model figure img { transition: none !important; }
}

/* Cinematic hero: the video carries the story; copy remains a precise conversion rail. */
.jac-hero--cinematic {
  min-height: 100svh;
  background: var(--jac-black);
}

.jac-hero--cinematic .jac-hero-slide {
  transform: none;
  transition: opacity 700ms ease-out, visibility 0s linear 700ms;
}

.jac-hero--cinematic .jac-hero-slide.is-active {
  transform: none;
  transition-delay: 0s;
}

.jac-hero--cinematic .jac-hero-slide > video {
  object-position: center center;
  filter: saturate(.98) contrast(1.03);
}

.jac-hero--cinematic .jac-hero-shade {
  background:
    linear-gradient(180deg, oklch(0.1 0.01 250 / .38) 0%, transparent 25%),
    linear-gradient(180deg, transparent 48%, oklch(0.1 0.01 250 / .28) 67%, oklch(0.1 0.01 250 / .94) 100%);
}

.jac-hero--cinematic::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid oklch(0.985 0.005 250 / .12);
  content: "";
  pointer-events: none;
}

.jac-hero-copy--minimal {
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: clamp(24px, 2.7vw, 38px) max(30px, calc((100vw - 1240px) / 2)) clamp(27px, 3vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(36px, 8vw, 120px);
  align-items: end;
  text-align: left;
  transform: translateY(22px);
}

.jac-hero-slide.is-active .jac-hero-copy--minimal {
  transform: none;
}

.jac-hero-message {
  min-width: 0;
}

.jac-hero-copy--minimal .jac-hero-message > p {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: oklch(0.92 0.012 250);
  font-size: clamp(.66rem, .8vw, .76rem);
  font-weight: 800;
  letter-spacing: .2em;
}

.jac-hero-copy--minimal .jac-hero-message > p::before {
  width: 34px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--jac-orange);
  content: "";
}

.jac-hero-copy--minimal .jac-hero-message h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(3.35rem, 5vw, 5.9rem);
  line-height: .86;
  letter-spacing: -.045em;
  white-space: nowrap;
  text-shadow: 0 8px 34px oklch(0.08 0.01 250 / .34);
}

.jac-hero-copy--minimal .jac-hero-message > span {
  max-width: 54ch;
  margin: 17px 0 0;
  color: oklch(0.9 0.012 250 / .88);
  font-size: clamp(.9rem, 1.05vw, 1.05rem);
  line-height: 1.45;
}

.jac-hero-copy--minimal > a {
  min-height: 52px;
  margin: 0 72px 2px 0;
  padding: 0 22px;
  gap: 28px;
  border-color: var(--jac-orange);
  border-radius: 4px;
  background: var(--jac-orange);
  color: var(--jac-white);
  box-shadow: 0 16px 38px oklch(0.55 0.2 48 / .24);
  white-space: nowrap;
}

.jac-hero-copy--minimal > a:hover,
.jac-hero-copy--minimal > a:focus-visible {
  border-color: var(--jac-white);
  background: var(--jac-white);
  color: var(--jac-ink);
}

.jac-hero-copy--minimal > a span {
  font-size: 1.05rem;
  transition: transform 180ms ease-out;
}

.jac-hero-copy--minimal > a:hover span,
.jac-hero-copy--minimal > a:focus-visible span {
  transform: translate(2px, -2px);
}

@media (max-width: 1100px) {
  .jac-hero-copy--minimal {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

/* Premium black navigation and typography system. */
body,
button,
input,
select,
textarea {
  font-family: "Montserrat", "Segoe UI", sans-serif;
}

h1,
h2,
h3,
.jac-hero-copy h1,
.jac-hero-copy h2,
.service-models h2,
.service-model h3,
.showcase-copy h3,
.store-heading h2,
.coverage-copy h2,
.contact h2 {
  font-family: "Jost", "Montserrat", sans-serif;
  font-kerning: normal;
}

.site-header,
.site-header.scrolled {
  border-bottom-color: oklch(0.68 0.2 48 / .42);
  background: oklch(0.1 0.01 250 / .98);
  color: var(--jac-white);
  box-shadow: 0 14px 40px oklch(0.04 0.01 250 / .3);
  backdrop-filter: saturate(1.08);
  -webkit-backdrop-filter: saturate(1.08);
}

.site-header .header-inner {
  min-height: 96px;
  gap: clamp(18px, 2.3vw, 34px);
}

.site-header .brand {
  width: 224px;
  height: 90px;
  flex-basis: 224px;
}

.site-header .brand img {
  filter: drop-shadow(0 7px 14px oklch(0.04 0.01 250 / .52));
}

.site-header nav {
  gap: 4px;
  align-self: stretch;
}

.site-header nav > a,
.nav-services-trigger {
  min-height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--jac-white);
  font-family: "Montserrat", sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 190ms ease-out, background-color 190ms ease-out, box-shadow 190ms ease-out;
}

.site-header nav > a:hover,
.site-header nav > a:focus-visible {
  color: var(--jac-orange);
}

.nav-services {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-services-trigger {
  gap: 9px;
}

.nav-services-trigger svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
}

.nav-services-trigger[aria-expanded="true"] {
  background: var(--jac-orange);
  color: var(--jac-white);
  box-shadow: 0 12px 28px oklch(0.55 0.2 48 / .28);
}

.nav-services-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-services-panel {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  width: min(310px, 82vw);
  padding-top: 6px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -10px, 0);
  transition: opacity 180ms ease-out, transform 240ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 240ms;
}

.nav-services-trigger[aria-expanded="true"] + .nav-services-panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.nav-services-panel-inner {
  overflow: hidden;
  border: 1px solid oklch(0.32 0.015 250);
  background: oklch(0.13 0.012 250);
  box-shadow: 0 28px 58px oklch(0.04 0.01 250 / .54);
}

.nav-services-panel a {
  min-height: 57px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid oklch(0.3 0.016 250);
  background: oklch(0.15 0.013 250);
  color: oklch(0.88 0.01 250);
  font-family: "Montserrat", sans-serif;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  transition: color 180ms ease-out, background-color 180ms ease-out, transform 220ms cubic-bezier(.16, 1, .3, 1);
}

.nav-services-panel a:last-child {
  border-bottom: 0;
}

.nav-services-panel a::after {
  display: none;
}

.nav-services-panel a b {
  color: var(--jac-orange);
  font-size: 1.05rem;
  font-weight: 500;
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}

.nav-services-panel a:hover,
.nav-services-panel a:focus-visible {
  background: oklch(0.2 0.018 250);
  color: var(--jac-white);
  transform: translate3d(4px, 0, 0);
}

.nav-services-panel a:hover b,
.nav-services-panel a:focus-visible b {
  transform: translate3d(4px, 0, 0);
}

.site-header nav > .nav-shop {
  min-height: 42px;
  margin: auto 7px;
  padding: 0 18px;
  background: var(--jac-white);
  color: var(--jac-ink);
  box-shadow: inset -4px 0 0 var(--jac-orange);
}

.site-header nav > .nav-shop:hover,
.site-header nav > .nav-shop:focus-visible {
  background: var(--jac-orange);
  color: var(--jac-white);
  box-shadow: inset -4px 0 0 var(--jac-white);
}

.site-header .menu-toggle {
  border-color: oklch(0.985 0.005 250 / .32);
  color: var(--jac-white);
}

.site-header .menu-toggle span:not(.sr-only) {
  background: var(--jac-white);
}

.jac-hero--cinematic .jac-hero-slide > video {
  filter: brightness(1.13) saturate(1.12) contrast(1.035);
}

.jac-hero--cinematic .jac-hero-shade {
  background:
    linear-gradient(180deg, oklch(0.08 0.01 250 / .18) 0%, transparent 30%),
    linear-gradient(180deg, transparent 52%, oklch(0.08 0.01 250 / .13) 70%, oklch(0.08 0.01 250 / .72) 100%);
}

@media (max-width: 1100px) {
  .site-header .header-inner {
    min-height: 86px;
  }

  .site-header .brand {
    width: 198px;
    height: 82px;
    flex-basis: 198px;
  }

  .site-header .brand img {
    width: 284px !important;
    top: -51px !important;
    left: -34px !important;
  }
}

@media (max-width: 1000px) {
  .site-header nav {
    inset: 86px 0 auto;
    padding: 12px 20px 22px;
    gap: 0;
    background: oklch(0.1 0.01 250 / .99);
    border-top: 1px solid oklch(0.985 0.005 250 / .1);
    box-shadow: 0 22px 50px oklch(0.04 0.01 250 / .5);
  }

  .nav-services {
    width: 100%;
    display: grid;
  }

  .nav-services-trigger {
    width: 100%;
    min-height: 52px;
    padding-inline: 14px;
    justify-content: space-between;
  }

  .nav-services-panel {
    position: static;
    width: 100%;
    padding: 0;
    display: grid;
    grid-template-rows: 0fr;
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    transform: none;
    transition: grid-template-rows 320ms cubic-bezier(.16, 1, .3, 1);
  }

  .nav-services-trigger[aria-expanded="true"] + .nav-services-panel {
    grid-template-rows: 1fr;
    pointer-events: auto;
  }

  .nav-services-panel-inner {
    min-height: 0;
    border: 0;
    box-shadow: none;
  }

  .nav-services-panel a {
    min-height: 49px;
  }

  .site-header nav > a {
    min-height: 50px;
    padding-inline: 14px;
    justify-content: flex-start;
    border-bottom-color: oklch(0.985 0.005 250 / .1);
  }

  .site-header nav > .nav-shop {
    min-height: 48px;
    margin: 10px 0 0;
  }
}

@media (max-width: 760px) {
  .site-header,
  .site-header.scrolled {
    background: oklch(0.1 0.01 250 / .99);
    color: var(--jac-white);
  }

  .site-header .header-inner {
    min-height: 76px;
  }

  .site-header .brand {
    width: 174px;
    height: 72px;
    flex-basis: 174px;
  }

  .site-header .brand img {
    width: 250px !important;
    top: -44px !important;
    left: -28px !important;
  }

  .site-header nav {
    inset: 76px 0 auto;
  }

  .jac-hero--cinematic .jac-hero-slide > video {
    filter: brightness(1.1) saturate(1.08) contrast(1.025);
  }
}

/* FRANTEK+ motion objects: interactive service access with restrained 3D depth. */
.jac-hero-motion {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  perspective: 900px;
}

.hero-motion-orb {
  --motion-accent: var(--jac-orange);
  position: absolute;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--jac-white);
  text-decoration: none;
  pointer-events: auto;
  transform-style: preserve-3d;
  will-change: transform;
  contain: layout paint style;
}

.hero-motion-orb:nth-child(1) {
  top: 27%;
  left: clamp(24px, 4.2vw, 74px);
  animation: heroMotionReveal 720ms cubic-bezier(.16, 1, .3, 1) 300ms both, heroMotionFloatA 7.2s ease-in-out 1150ms infinite;
}

.hero-motion-orb:nth-child(2) {
  top: 24%;
  right: clamp(24px, 4.5vw, 82px);
  animation: heroMotionReveal 720ms cubic-bezier(.16, 1, .3, 1) 420ms both, heroMotionFloatB 8s ease-in-out 1270ms infinite;
}

.hero-motion-orb:nth-child(3) {
  top: 50%;
  left: clamp(42px, 7vw, 118px);
  animation: heroMotionReveal 720ms cubic-bezier(.16, 1, .3, 1) 540ms both, heroMotionFloatB 8.6s ease-in-out 1390ms infinite;
}

.hero-motion-orb:nth-child(4) {
  top: 51%;
  right: clamp(42px, 7vw, 118px);
  animation: heroMotionReveal 720ms cubic-bezier(.16, 1, .3, 1) 660ms both, heroMotionFloatA 7.8s ease-in-out 1510ms infinite;
}

.hero-motion-orb--climate {
  --motion-accent: oklch(0.88 0.2 126);
}

.hero-motion-orb--pergola {
  --motion-accent: oklch(0.82 0.19 78);
}

.hero-motion-core {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid oklch(0.985 0.005 250 / .3);
  border-radius: 15px;
  background: oklch(0.13 0.014 250 / .84);
  box-shadow:
    0 18px 38px -18px oklch(0.05 0.01 250 / .84),
    inset 0 1px 0 oklch(0.985 0.005 250 / .14);
  transform: translateZ(14px);
  transform-style: preserve-3d;
  transition: border-color 220ms ease-out, box-shadow 260ms ease-out, background-color 220ms ease-out;
  backdrop-filter: blur(9px) saturate(1.15);
}

.hero-motion-core::before {
  position: absolute;
  right: 9px;
  bottom: 8px;
  left: 9px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--motion-accent), transparent);
  box-shadow: 0 0 14px color-mix(in oklch, var(--motion-accent) 58%, transparent);
  content: "";
  transform: scaleX(.42);
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.hero-motion-glyph {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px color-mix(in oklch, var(--motion-accent) 48%, transparent));
  transform: translateZ(24px);
  transform-origin: center;
}

.hero-motion-ring {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in oklch, var(--motion-accent) 46%, transparent);
  border-radius: 50%;
  opacity: .28;
  animation: heroRingBreathe 3.4s ease-in-out infinite;
}

.hero-motion-label {
  position: absolute;
  top: 50%;
  left: calc(100% + 13px);
  min-width: max-content;
  padding: 8px 11px;
  border: 1px solid oklch(0.985 0.005 250 / .18);
  border-radius: 3px;
  background: oklch(0.12 0.012 250 / .9);
  color: oklch(0.96 0.007 250);
  box-shadow: 0 12px 24px oklch(0.05 0.01 250 / .36);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .035em;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-7px, -50%, 14px);
  transition: opacity 180ms ease-out, transform 240ms cubic-bezier(.16, 1, .3, 1);
  backdrop-filter: blur(8px);
}

.hero-motion-orb--right .hero-motion-label {
  right: calc(100% + 13px);
  left: auto;
  transform: translate3d(7px, -50%, 14px);
}

.hero-motion-orb:hover .hero-motion-core,
.hero-motion-orb:focus-visible .hero-motion-core {
  border-color: color-mix(in oklch, var(--motion-accent) 72%, var(--jac-white));
  background: oklch(0.1 0.016 250 / .94);
  box-shadow:
    0 22px 48px -18px color-mix(in oklch, var(--motion-accent) 54%, transparent),
    inset 0 1px 0 oklch(0.985 0.005 250 / .24);
}

.hero-motion-orb:hover .hero-motion-core::before,
.hero-motion-orb:focus-visible .hero-motion-core::before {
  transform: scaleX(1);
}

.hero-motion-orb:hover .hero-motion-label,
.hero-motion-orb:focus-visible .hero-motion-label {
  opacity: 1;
  transform: translate3d(0, -50%, 14px);
}

.hero-motion-orb:focus-visible {
  outline: 2px solid var(--motion-accent);
  outline-offset: 6px;
  border-radius: 18px;
}

.hero-motion-orb:active .hero-motion-core {
  transform: translateZ(8px) scale(.94);
}

.hero-motion-orb--integral .hero-motion-glyph {
  animation: heroToolShift 5.8s ease-in-out infinite;
}

.hero-motion-orb--climate .hero-motion-glyph {
  animation: heroSnowSpin 12s linear infinite;
}

.hero-motion-orb--pergola .hero-motion-glyph {
  animation: heroStructureLift 5.2s ease-in-out infinite;
}

.hero-motion-orb--remodel .hero-motion-glyph {
  animation: heroHousePulse 5.5s ease-in-out infinite;
}

@keyframes heroMotionReveal {
  from { opacity: 0; transform: translate3d(0, 18px, -70px) rotateX(-24deg) scale(.76); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) scale(1); }
}

@keyframes heroMotionFloatA {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0); }
  50% { transform: translate3d(7px, -11px, 20px) rotateZ(1.5deg); }
}

@keyframes heroMotionFloatB {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0); }
  50% { transform: translate3d(-6px, -13px, 24px) rotateZ(-1.4deg); }
}

@keyframes heroRingBreathe {
  0%, 100% { opacity: .18; transform: scale(.78); }
  50% { opacity: .42; transform: scale(1.1); }
}

@keyframes heroToolShift {
  0%, 70%, 100% { transform: translateZ(24px) rotate(0); }
  78% { transform: translateZ(28px) rotate(-8deg); }
  88% { transform: translateZ(28px) rotate(7deg); }
}

@keyframes heroSnowSpin {
  to { transform: translateZ(24px) rotate(360deg); }
}

@keyframes heroStructureLift {
  0%, 72%, 100% { transform: translate3d(0, 0, 24px); }
  84% { transform: translate3d(0, -4px, 28px); }
}

@keyframes heroHousePulse {
  0%, 72%, 100% { transform: translateZ(24px) scale(1); }
  84% { transform: translateZ(29px) scale(1.08); }
}

@media (max-width: 760px) {
  .jac-hero-motion {
    top: auto;
    right: 0;
    bottom: clamp(290px, 42vh, 340px);
    left: 0;
    height: 54px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    perspective: 700px;
  }

  .hero-motion-orb,
  .hero-motion-orb:nth-child(n) {
    position: relative;
    inset: auto;
    width: 52px;
    height: 52px;
  }

  .hero-motion-core {
    width: 52px;
    height: 52px;
    border-radius: 13px;
  }

  .hero-motion-glyph {
    width: 25px;
    height: 25px;
  }

  .hero-motion-ring {
    width: 36px;
    height: 36px;
  }

  .hero-motion-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-motion-orb,
  .hero-motion-glyph,
  .hero-motion-ring {
    animation: none !important;
  }

  .hero-motion-orb {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) {
  .jac-hero--cinematic {
    min-height: 100svh;
  }

  .jac-hero--cinematic .jac-hero-slide > video {
    object-position: center center;
  }

  .jac-hero--cinematic .jac-hero-shade {
    background:
      linear-gradient(180deg, oklch(0.1 0.01 250 / .42) 0%, transparent 27%),
      linear-gradient(180deg, transparent 38%, oklch(0.1 0.01 250 / .38) 59%, oklch(0.1 0.01 250 / .96) 100%);
  }

  .jac-hero-copy--minimal {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 22px 36px;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .jac-hero-copy--minimal .jac-hero-message > p {
    max-width: none;
    margin-inline: 0;
    font-size: .6rem;
    line-height: 1.4;
  }

  .jac-hero-copy--minimal .jac-hero-message h1 {
    max-width: 8.5ch;
    font-size: clamp(3.25rem, 14.5vw, 4.3rem);
    line-height: .84;
    white-space: normal;
  }

  .jac-hero-copy--minimal .jac-hero-message > span {
    max-width: 32ch;
    margin-top: 13px;
    font-size: .9rem;
  }

  .jac-hero-copy--minimal > a {
    width: fit-content;
    min-height: 48px;
    margin-right: 0;
    padding-inline: 18px;
  }
}

/* Final hero framing overrides: keep the 4K frame complete and the CTA separate. */
.jac-hero--cinematic {
  min-height: max(720px, 100svh, 56.25vw);
}

.jac-hero--cinematic .jac-hero-slide > video {
  object-fit: contain;
  object-position: center center;
  background: oklch(0.07 0.008 250);
  filter: brightness(1.12) saturate(1.1) contrast(1.025);
}

.jac-hero-copy--minimal {
  z-index: 4;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  align-items: end;
}

.jac-hero-copy--minimal .jac-hero-message h1 {
  max-width: 15ch;
  white-space: normal;
  text-wrap: balance;
}

.jac-hero-copy--minimal > a {
  margin: 0 76px 0 0;
  justify-self: end;
  align-self: end;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .jac-hero--cinematic {
    min-height: max(760px, 100svh);
  }

  .jac-hero--cinematic .jac-hero-slide > video {
    object-fit: cover;
    object-position: 54% center;
  }

  .jac-hero-copy--minimal {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 20px 26px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .jac-hero-copy--minimal .jac-hero-message h1 {
    max-width: 9.5ch;
    font-size: clamp(2.65rem, 12.5vw, 4.4rem);
    line-height: .86;
  }

  .jac-hero-copy--minimal > a {
    width: fit-content;
    min-height: 48px;
    justify-self: start;
    align-self: auto;
    margin: 0;
    padding-inline: 18px;
  }
}

@media (max-width: 560px) {
  .jac-hero-copy--minimal {
    padding-inline: 18px;
    gap: 14px;
  }

  .jac-hero-copy--minimal .jac-hero-message h1 {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
  }
}

/* Energy instrument in the lower-right corner; conversion copy remains clear on the left. */
.hero-instrument--energy {
  top: auto;
  right: clamp(24px, 3.2vw, 64px);
  bottom: clamp(92px, 8vh, 112px);
}

.jac-hero-copy--minimal {
  right: auto;
  width: min(760px, 64vw);
  padding-right: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.jac-hero-copy--minimal > a {
  grid-column: 1;
  margin: 0;
  justify-self: start;
}

@media (max-width: 900px) {
  .hero-instrument--energy {
    top: 96px;
    right: 12px;
    bottom: auto;
  }

  .jac-hero-copy--minimal {
    right: 0;
    width: 100%;
    padding-right: 20px;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .hero-instrument--energy {
    top: 88px;
    right: 7px;
  }

  .jac-hero-copy--minimal {
    padding-right: 18px;
  }
}

@media (min-width: 901px) {
  .hero-instrument--climate,
  .hero-instrument--energy {
    --panel-base-ry: 0deg;
    width: clamp(260px, 23.5vw, 350px);
  }

  .hero-instrument--energy .instrument-face {
    height: 195px;
    padding: 12px 14px 10px;
  }

  .hero-instrument--energy .energy-canvas {
    margin-top: 1px;
  }

  .hero-instrument--energy .energy-canvas svg {
    height: 112px;
  }

  .hero-instrument--energy .energy-footer {
    margin-top: -3px;
    padding-top: 6px;
  }
}

/* Release 27: compact stacked instruments and a viewport-fit cinematic hero. */
.jac-hero--cinematic {
  height: 100svh;
  min-height: 0;
  max-height: 100svh;
}

.jac-hero--cinematic .jac-hero-slide > video {
  object-fit: cover;
  object-position: center 51%;
}

.hero-instrument-layer {
  padding: clamp(118px, 14vh, 148px) 0 0 clamp(18px, 2.5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.4vh, 15px);
  transform: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hero-instrument-layer .hero-instrument--climate,
.hero-instrument-layer .hero-instrument--energy {
  --panel-base-ry: 0deg;
  position: relative;
  inset: auto;
  width: clamp(210px, 14.5vw, 252px);
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.hero-instrument .instrument-depth {
  inset: 6px -6px -7px 6px;
  border-color: oklch(0.42 0.02 250 / .32);
  background: oklch(0.07 0.01 250 / .28);
  box-shadow: 0 18px 32px oklch(0.03 0.008 250 / .25);
}

.hero-instrument .instrument-face {
  padding: 10px 12px 9px;
  border-color: oklch(0.68 0.025 250 / .3);
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y), oklch(0.82 0.08 115 / .065), transparent 38%),
    linear-gradient(145deg, oklch(0.12 0.018 250 / .58), oklch(0.075 0.01 250 / .48));
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.008 250 / .12),
    inset 0 -16px 30px oklch(0.04 0.008 250 / .16),
    0 14px 30px oklch(0.03 0.008 250 / .25);
  backdrop-filter: blur(5px) saturate(.86);
  -webkit-backdrop-filter: blur(5px) saturate(.86);
}

.hero-instrument--climate .climate-readout {
  margin-top: 7px;
}

.hero-instrument--climate .climate-dial {
  width: 57px;
}

.hero-instrument--climate .climate-condition b {
  font-size: clamp(1.75rem, 2.15vw, 2.15rem);
}

.hero-instrument--climate .temperature-control {
  margin-top: 5px;
}

.hero-instrument--climate .temperature-track {
  height: 12px;
}

.hero-instrument--energy .instrument-face {
  height: 148px;
}

.hero-instrument--energy .energy-canvas {
  margin-top: 0;
}

.hero-instrument--energy .energy-canvas svg {
  height: 83px;
}

.hero-instrument--energy .energy-footer {
  margin-top: -2px;
  padding-top: 4px;
}

.hero-instrument--energy .energy-footer b {
  font-size: .88rem;
}

.jac-hero-copy--minimal {
  bottom: clamp(22px, 3.2vh, 34px);
  width: min(670px, 58vw);
  padding-top: 0;
  padding-bottom: 0;
}

.jac-hero-copy--minimal .jac-hero-message h1 {
  font-size: clamp(3rem, 4.25vw, 4.75rem);
  line-height: .87;
}

.jac-hero-copy--minimal .jac-hero-message > span {
  margin-top: 11px;
}

.jac-hero-copy--minimal > a {
  min-height: 48px;
}

@media (max-width: 900px) {
  .jac-hero--cinematic {
    height: 100svh;
    min-height: 0;
    max-height: 100svh;
  }

  .jac-hero--cinematic .jac-hero-slide > video {
    object-position: 54% center;
  }

  .hero-instrument-layer {
    padding: clamp(86px, 12vh, 108px) 0 0 12px;
    gap: 8px;
  }

  .hero-instrument-layer .hero-instrument--climate,
  .hero-instrument-layer .hero-instrument--energy {
    width: clamp(176px, 42vw, 218px);
    max-width: none;
  }

  .hero-instrument .instrument-face {
    padding: 8px 9px 7px;
  }

  .hero-instrument--climate .climate-dial {
    width: 48px;
  }

  .hero-instrument--energy .instrument-face {
    height: 124px;
  }

  .hero-instrument--energy .energy-canvas svg {
    height: 68px;
  }

  .jac-hero-copy--minimal {
    right: auto;
    left: clamp(16px, 3vw, 28px);
    bottom: 18px;
    width: min(540px, calc(100% - clamp(32px, 6vw, 56px)));
    padding: 0;
  }

  .jac-hero-copy--minimal .jac-hero-message h1 {
    max-width: 10ch;
    font-size: clamp(2.25rem, 10vw, 3.5rem);
  }

  .jac-hero-copy--minimal .jac-hero-message > span {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero-instrument-layer {
    padding-top: clamp(78px, 11vh, 94px);
    padding-left: 8px;
  }

  .hero-instrument-layer .hero-instrument--climate,
  .hero-instrument-layer .hero-instrument--energy {
    width: clamp(158px, 43vw, 188px);
  }

  .hero-instrument--energy .instrument-face {
    height: 108px;
  }

  .hero-instrument--energy .energy-canvas svg {
    height: 57px;
  }

  .jac-hero-copy--minimal {
    right: 16px;
    left: 16px;
    width: auto;
  }

  .jac-hero-copy--minimal .jac-hero-message > p {
    margin-bottom: 7px;
  }

  .jac-hero-copy--minimal .jac-hero-message h1 {
    font-size: clamp(2rem, 10.5vw, 2.95rem);
  }

  .jac-hero-copy--minimal > a {
    min-height: 44px;
    padding-inline: 15px;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .hero-instrument-layer {
    padding-top: 94px;
    gap: 8px;
  }

  .hero-instrument-layer .hero-instrument--climate,
  .hero-instrument-layer .hero-instrument--energy {
    width: 208px;
  }

  .hero-instrument--energy .instrument-face {
    height: 124px;
  }

  .hero-instrument--energy .energy-canvas svg {
    height: 67px;
  }

  .jac-hero-copy--minimal {
    bottom: 18px;
  }

  .jac-hero-copy--minimal .jac-hero-message h1 {
    font-size: clamp(2.8rem, 7vh, 3.8rem);
  }

  .jac-hero-copy--minimal .jac-hero-message > span {
    display: none;
  }
}

/* Release 30: anchor the conversion copy to a clean left visual axis. */
.jac-hero-copy--minimal,
.jac-hero-slide.is-active .jac-hero-copy--minimal {
  right: auto;
  left: clamp(28px, 4vw, 72px);
  width: min(760px, calc(100vw - clamp(56px, 8vw, 144px)));
  padding-inline: 0;
  transform: none;
}

.jac-hero-copy--minimal .jac-hero-message,
.jac-hero-copy--minimal .jac-hero-message > span {
  width: 100%;
}

.jac-hero-copy--minimal .jac-hero-message > span {
  max-width: 48ch;
}

@media (max-width: 900px) {
  .jac-hero-copy--minimal,
  .jac-hero-slide.is-active .jac-hero-copy--minimal {
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* Release 31: white technical surfaces and a moving 3D repair object. */
:root {
  --jac-white: #fff;
  --jac-canvas: #fff;
  --jac-paper: #fff;
  --paper: #fff;
  --white: #fff;
}

html,
body,
main,
.service-models,
.service-showcase,
#tienda,
#proceso,
#cobertura,
#preguntas {
  background-color: #fff !important;
}

.showcase-intro {
  position: relative;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 28vw, 350px);
  gap: 18px clamp(34px, 5vw, 76px);
  align-items: center;
}

.showcase-intro .showcase-kicker,
.showcase-intro h2,
.showcase-intro > p:last-of-type {
  grid-column: 1;
}

.showcase-intro .showcase-kicker { align-self: end; }
.showcase-intro h2 { max-width: 850px; }
.showcase-intro > p:last-of-type {
  max-width: 62ch;
  align-self: start;
}

.showcase-tool-motion {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 4;
  width: min(100%, 340px);
  aspect-ratio: 1;
  margin: 0;
  justify-self: end;
  align-self: center;
  perspective: 900px;
  transform-style: preserve-3d;
  animation: toolAssemblyFloat 5.8s cubic-bezier(.16, 1, .3, 1) infinite;
  isolation: isolate;
}

.showcase-tool-motion::after {
  position: absolute;
  z-index: -1;
  right: 13%;
  bottom: 9%;
  width: 58%;
  height: 20%;
  border-radius: 50%;
  background: oklch(0.12 0.01 250 / .16);
  filter: blur(18px);
  transform: rotate(-13deg);
  content: "";
}

.showcase-tool-motion img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 78% 20%;
  filter: drop-shadow(0 24px 22px oklch(0.1 0.01 250 / .22));
  animation: wrenchRepairTurn 4s cubic-bezier(.16, 1, .3, 1) infinite;
  backface-visibility: hidden;
  will-change: transform;
}

.showcase-tool-target {
  position: absolute;
  z-index: 1;
  top: 9%;
  right: 4%;
  width: 74px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid oklch(0.22 0.015 250 / .22);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 28px oklch(0.12 0.01 250 / .12);
  animation: repairTargetTurn 4s cubic-bezier(.16, 1, .3, 1) infinite;
}

.showcase-tool-target::before,
.showcase-tool-target::after,
.showcase-tool-target i {
  position: absolute;
  width: 34px;
  height: 7px;
  border-radius: 2px;
  background: var(--jac-orange);
  content: "";
}

.showcase-tool-target::after { transform: rotate(60deg); }
.showcase-tool-target i { transform: rotate(-60deg); }

.showcase-tool-sparks {
  position: absolute;
  z-index: 4;
  top: 10%;
  right: 10%;
  width: 64px;
  height: 64px;
  pointer-events: none;
}

.showcase-tool-sparks i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: var(--jac-orange);
  box-shadow: 0 0 10px oklch(0.68 0.2 48 / .48);
  opacity: 0;
  transform-origin: left center;
  animation: repairSpark 4s ease-out infinite;
}

.showcase-tool-sparks i:nth-child(1) { --spark-angle: -24deg; --spark-distance: 28px; }
.showcase-tool-sparks i:nth-child(2) { --spark-angle: 18deg; --spark-distance: 34px; animation-delay: .06s; }
.showcase-tool-sparks i:nth-child(3) { --spark-angle: 64deg; --spark-distance: 24px; animation-delay: .12s; }

@keyframes toolAssemblyFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateY(-4deg); }
  50% { transform: translate3d(0, -8px, 18px) rotateY(3deg); }
}

@keyframes wrenchRepairTurn {
  0%, 8% { transform: rotateZ(-8deg) rotateX(1deg) scale(1); }
  20% { transform: rotateZ(10deg) rotateX(-1deg) scale(1.012); }
  24% { transform: rotateZ(-7deg) rotateX(1deg) scale(1); }
  36% { transform: rotateZ(9deg) rotateX(-1deg) scale(1.012); }
  40% { transform: rotateZ(-6deg) rotateX(1deg) scale(1); }
  52% { transform: rotateZ(8deg) rotateX(-1deg) scale(1.012); }
  60%, 100% { transform: rotateZ(8deg) rotateX(0) scale(1); }
}

@keyframes repairTargetTurn {
  0%, 8% { transform: rotate(0); }
  20%, 24% { transform: rotate(12deg); }
  36%, 40% { transform: rotate(24deg); }
  52%, 100% { transform: rotate(36deg); }
}

@keyframes repairSpark {
  0%, 16%, 25%, 32%, 41%, 48%, 57%, 100% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateX(0) scaleX(.3);
  }
  20%, 36%, 52% { opacity: 1; }
  23%, 39%, 55% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateX(var(--spark-distance)) scaleX(1);
  }
}

@media (hover: hover) and (pointer: fine) {
  .showcase-tool-motion:hover img,
  .showcase-tool-motion:hover .showcase-tool-target,
  .showcase-tool-motion:hover .showcase-tool-sparks i {
    animation-duration: 2.4s;
  }
}

@media (max-width: 900px) {
  .showcase-intro {
    grid-template-columns: minmax(0, 1fr) clamp(150px, 28vw, 210px);
    gap: 16px 20px;
  }

  .showcase-intro .showcase-kicker { grid-column: 1 / -1; }
  .showcase-intro h2 { grid-column: 1; }
  .showcase-intro > p:last-of-type { grid-column: 1 / -1; }

  .showcase-tool-motion {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }

  .showcase-tool-target { width: 54px; }
}

@media (max-width: 560px) {
  .showcase-intro { display: block; }
  .showcase-intro h2 { max-width: calc(100% - 72px); }

  .showcase-tool-motion {
    position: absolute;
    top: 56px;
    right: -24px;
    width: 132px;
  }

  .showcase-tool-target { width: 42px; }
  .showcase-intro > p:last-of-type { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-tool-motion,
  .showcase-tool-sparks i {
    animation: none !important;
  }

  .showcase-tool-motion img,
  .showcase-tool-target {
    animation-duration: 4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* Release 38: keep the Energy Flow liquid alive even when the OS requests
   reduced motion. This is a functional status animation, kept compact and
   isolated from the rest of the page motion. */
.hero-instrument--energy .energy-path--live {
  stroke-width: 10;
  stroke-dasharray: 15 11;
  animation-name: energyLiquidFlow !important;
  animation-duration: 1.35s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  will-change: stroke-dashoffset;
}

.hero-instrument--energy .energy-path--delay {
  animation-delay: -.675s !important;
}

.hero-instrument--energy .energy-node--source:first-of-type rect,
.hero-instrument--energy .energy-node--core rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: energyNodeBreath 2.15s cubic-bezier(.4, 0, .2, 1) infinite !important;
}

.hero-instrument--energy .energy-node--core rect {
  animation-delay: -.72s !important;
}

@keyframes energyLiquidFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -52; }
}

@keyframes energyNodeBreath {
  0%, 100% { transform: scale(.985); filter: url(#energyGlow); }
  50% { transform: scale(1.035); filter: url(#energyGlow) brightness(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-instrument--energy .energy-path--live {
    animation-name: energyLiquidFlow !important;
    animation-duration: 1.8s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }

  .hero-instrument--energy .energy-node--source:first-of-type rect,
  .hero-instrument--energy .energy-node--core rect {
    animation-name: energyNodeBreath !important;
    animation-duration: 2.8s !important;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
    animation-iteration-count: infinite !important;
  }
}

/* Release 39: the service rail never becomes a horizontal scroll container.
   Only its tab strip may scroll, so selecting a late tab cannot displace the
   photo, title or controls off the left edge of the section. */
.service-models {
  overflow: clip;
}

/* The Escaleras source image has built-in black side bars. Crop those source
   borders proportionally instead of exposing them as false grey columns. */
.service-model:nth-of-type(7) figure img {
  object-position: center 52%;
  transform: scale(1.18);
}

.service-model:nth-of-type(7).is-active figure:hover img {
  transform: scale(1.205);
}

/* Release 41: clear project selector and readable gallery hierarchy. */
.service-showcase .showcase-stage {
  min-height: clamp(620px, 74vh, 780px);
  background: oklch(0.095 0.01 250);
}

.service-showcase .showcase-overlay {
  background:
    linear-gradient(90deg, oklch(0.075 0.01 250 / .92) 0%, oklch(0.075 0.01 250 / .72) 38%, oklch(0.075 0.01 250 / .2) 70%, transparent 100%),
    linear-gradient(0deg, oklch(0.06 0.01 250 / .9) 0%, oklch(0.06 0.01 250 / .2) 38%, transparent 70%);
}

.service-showcase .showcase-copy {
  z-index: 9;
  bottom: 136px;
  left: clamp(28px, 5vw, 92px);
  width: min(620px, calc(100% - 490px));
  padding: 18px 0;
  color: oklch(0.985 0.004 250);
  text-shadow: 0 10px 28px oklch(0.04 0.01 250 / .42);
}

.service-showcase .showcase-copy::before {
  width: 44px;
  height: 2px;
  margin: 0 0 13px;
  display: block;
  background: var(--jac-orange);
  box-shadow: 0 0 18px oklch(0.7 0.2 48 / .42);
  content: "";
}

.service-showcase .showcase-copy > span {
  color: oklch(0.83 0.11 50);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(.63rem, .7vw, .76rem);
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.2;
}

.service-showcase .showcase-copy h3 {
  max-width: 10.5ch;
  margin: 11px 0 15px;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.65rem, 4.85vw, 5.45rem);
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: .88;
  text-wrap: balance;
}

.service-showcase .showcase-copy p {
  max-width: 52ch;
  margin: 0;
  color: oklch(0.93 0.008 250 / .94);
  font-size: clamp(.88rem, 1.05vw, 1rem);
  line-height: 1.55;
}

.service-showcase .showcase-upload {
  min-height: 39px;
  margin-top: 17px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  border: 1px solid oklch(0.95 0.006 250 / .64);
  border-radius: 0;
  background: oklch(0.12 0.012 250 / .4);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.service-showcase .showcase-upload:hover,
.service-showcase .showcase-upload:focus-within {
  border-color: var(--jac-orange);
  background: var(--jac-orange);
  color: var(--jac-white);
}

.service-showcase .showcase-arrow {
  z-index: 13;
  top: 50%;
  width: 48px;
  height: 48px;
  border: 1px solid oklch(0.94 0.008 250 / .45);
  border-radius: 0;
  background: oklch(0.08 0.012 250 / .45);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 12px 26px oklch(0.04 0.01 250 / .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.service-showcase .showcase-arrow:hover,
.service-showcase .showcase-arrow:focus-visible {
  border-color: var(--jac-orange);
  background: var(--jac-orange);
  transform: translateY(-50%) scale(1.05);
}

.service-showcase .showcase-arrow-prev { left: 24px; }
.service-showcase .showcase-arrow-next { right: 24px; }

.showcase-navigation {
  position: absolute;
  z-index: 15;
  bottom: 27px;
  left: clamp(28px, 5vw, 92px);
  width: min(336px, calc(100vw - 360px));
}

.showcase-menu-trigger {
  width: 100%;
  min-height: 66px;
  padding: 10px 14px 10px 17px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow icon" "current icon";
  align-items: center;
  gap: 2px 14px;
  border: 1px solid oklch(0.94 0.008 250 / .5);
  border-left: 3px solid var(--jac-orange);
  border-radius: 0;
  background: oklch(0.08 0.012 250 / .77);
  color: var(--jac-white);
  box-shadow: 0 18px 38px oklch(0.04 0.01 250 / .3);
  cursor: pointer;
  text-align: left;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.showcase-menu-trigger:hover,
.showcase-menu-trigger:focus-visible,
.showcase-navigation.is-open .showcase-menu-trigger {
  border-color: var(--jac-orange);
  background: oklch(0.12 0.016 250 / .91);
}

.showcase-menu-trigger > span {
  grid-area: eyebrow;
  color: oklch(0.75 0.1 50);
  font-family: "Montserrat", sans-serif;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.showcase-menu-trigger strong {
  grid-area: current;
  overflow: hidden;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showcase-menu-trigger i {
  grid-area: icon;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid oklch(0.94 0.008 250 / .35);
  color: var(--jac-orange);
  font-size: 1rem;
  font-style: normal;
  line-height: 1;
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1), color 180ms ease, background-color 180ms ease;
}

.showcase-navigation.is-open .showcase-menu-trigger i {
  background: var(--jac-orange);
  color: #fff;
  transform: rotate(180deg);
}

.showcase-navigation .showcase-thumbs {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  left: 0;
  z-index: 2;
  max-height: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row;
  align-content: start;
  overflow: hidden;
  border: 1px solid transparent;
  background: oklch(0.1 0.012 250 / .96);
  box-shadow: 0 30px 60px oklch(0.04 0.01 250 / .45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: max-height 300ms cubic-bezier(.16, 1, .3, 1), padding 260ms ease, opacity 180ms ease, transform 250ms cubic-bezier(.16, 1, .3, 1), border-color 180ms ease;
}

.showcase-navigation.is-open .showcase-thumbs {
  max-height: 430px;
  padding: 5px;
  border-color: oklch(0.94 0.008 250 / .23);
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.showcase-navigation .showcase-thumbs button {
  width: 100% !important;
  min-height: 53px;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid oklch(0.32 0.016 250 / .72);
  border-radius: 0;
  background: transparent;
  color: oklch(0.9 0.01 250);
  cursor: pointer;
  text-align: left;
  transition: background-color 170ms ease, color 170ms ease, padding-left 210ms cubic-bezier(.16, 1, .3, 1);
}

.showcase-navigation .showcase-thumbs button:last-child { border-bottom: 0; }

.showcase-navigation .showcase-thumbs button > span {
  grid-row: 1 / 3;
  color: oklch(0.58 0.02 250);
  font-family: "Montserrat", sans-serif;
  font-size: .68rem;
  font-weight: 800;
}

.showcase-navigation .showcase-thumbs button strong {
  align-self: end;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.05;
}

.showcase-navigation .showcase-thumbs button small {
  align-self: start;
  color: oklch(0.72 0.012 250);
  font-family: "Montserrat", sans-serif;
  font-size: .61rem;
  font-weight: 600;
  line-height: 1.1;
}

.showcase-navigation .showcase-thumbs button:hover,
.showcase-navigation .showcase-thumbs button:focus-visible,
.showcase-navigation .showcase-thumbs button.is-active {
  padding-left: 15px;
  background: oklch(0.18 0.042 50 / .86);
}

.showcase-navigation .showcase-thumbs button:hover > span,
.showcase-navigation .showcase-thumbs button:focus-visible > span,
.showcase-navigation .showcase-thumbs button.is-active > span {
  color: var(--jac-orange);
}

.service-showcase .showcase-static-gallery {
  z-index: 10;
  right: clamp(28px, 5vw, 92px);
  bottom: 27px;
  min-width: min(186px, 42vw);
  max-width: min(42vw, 440px);
  padding: 21px 4px 4px;
  gap: 8px;
  border: 1px solid oklch(0.94 0.008 250 / .2);
  background: oklch(0.08 0.012 250 / .43);
  scrollbar-width: thin;
}

.service-showcase .showcase-static-gallery::before {
  position: absolute;
  top: 0;
  left: 4px;
  color: oklch(0.94 0.008 250 / .82);
  font-family: "Montserrat", sans-serif;
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 5px 7px;
  background: oklch(0.08 0.012 250 / .6);
  white-space: nowrap;
  content: "GALERÍA DEL PROYECTO";
  text-shadow: 0 2px 10px oklch(0.04 0.01 250 / .5);
}

.service-showcase .showcase-static-gallery button {
  flex-basis: 76px;
  width: 76px;
  height: 54px;
  border-radius: 0;
}

@media (max-width: 900px) {
  .service-showcase .showcase-copy {
    bottom: 135px;
    width: min(560px, calc(100% - 260px));
  }

  .showcase-navigation { width: min(315px, calc(100vw - 300px)); }
  .service-showcase .showcase-static-gallery { max-width: 220px; }
}

@media (max-width: 620px) {
  .service-showcase .showcase-stage { min-height: 690px; }

  .service-showcase .showcase-overlay {
    background:
      linear-gradient(90deg, oklch(0.075 0.01 250 / .84) 0%, oklch(0.075 0.01 250 / .42) 86%),
      linear-gradient(0deg, oklch(0.06 0.01 250 / .94) 0%, oklch(0.06 0.01 250 / .34) 60%, transparent 100%);
  }

  .service-showcase .showcase-copy {
    bottom: 186px;
    left: 24px;
    width: calc(100% - 48px);
    padding-top: 0;
  }

  .service-showcase .showcase-copy h3 {
    max-width: 100%;
    font-size: clamp(2rem, 8.6vw, 2.7rem);
    letter-spacing: -.075em;
  }
  .service-showcase .showcase-copy p { max-width: 34ch; font-size: .83rem; }
  .service-showcase .showcase-upload { margin-top: 13px; }

  .service-showcase .showcase-arrow { top: 38%; width: 42px; height: 42px; }
  .service-showcase .showcase-arrow-prev { left: 12px; }
  .service-showcase .showcase-arrow-next { right: 12px; }

  .showcase-navigation {
    right: 18px;
    bottom: 18px;
    left: 18px;
    width: auto;
  }

  .service-showcase .showcase-static-gallery {
    right: 18px;
    bottom: 99px;
    left: 18px;
    max-width: none;
  }

  .service-showcase .showcase-static-gallery button { flex-basis: 65px; width: 65px; height: 46px; }
}

/* Release 45: the work itself remains visible; editing controls live at the page end. */
.service-showcase .showcase-overlay {
  background:
    linear-gradient(90deg, oklch(0.075 0.01 250 / .62) 0%, oklch(0.075 0.01 250 / .47) 35%, oklch(0.075 0.01 250 / .16) 67%, transparent 100%),
    linear-gradient(0deg, oklch(0.06 0.01 250 / .7) 0%, oklch(0.06 0.01 250 / .14) 42%, transparent 71%);
}

.service-showcase .showcase-copy .showcase-upload {
  display: none !important;
}

footer .showcase-admin-upload {
  margin-top: 20px;
  padding: 16px 0 20px;
  border-top: 1px solid oklch(0.94 0.008 250 / .14);
  color: oklch(0.84 0.012 250);
}

footer .showcase-admin-upload summary {
  width: fit-content;
  color: oklch(0.72 0.012 250);
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

footer .showcase-admin-upload summary::marker { color: var(--jac-orange); }

footer .showcase-admin-upload > div {
  max-width: 520px;
  margin-top: 13px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid oklch(0.94 0.008 250 / .16);
  background: oklch(0.12 0.012 250 / .78);
}

footer .showcase-admin-upload p {
  max-width: 34ch;
  margin: 0;
  color: oklch(0.75 0.012 250);
  font-size: .76rem;
  line-height: 1.4;
}

footer .showcase-admin-upload .showcase-upload {
  min-height: 38px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--jac-orange);
  background: var(--jac-orange);
  color: #fff;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .02em;
  transition: background-color 180ms ease, color 180ms ease;
}

footer .showcase-admin-upload .showcase-upload:hover,
footer .showcase-admin-upload .showcase-upload:focus-within {
  background: #fff;
  color: var(--jac-ink);
}

@media (max-width: 620px) {
  .service-showcase .showcase-overlay {
    background:
      linear-gradient(90deg, oklch(0.075 0.01 250 / .58) 0%, oklch(0.075 0.01 250 / .22) 88%),
      linear-gradient(0deg, oklch(0.06 0.01 250 / .75) 0%, oklch(0.06 0.01 250 / .15) 60%, transparent 100%);
  }

  footer .showcase-admin-upload > div {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Release 46: FRANTEK PROWEAR becomes a complete product showroom, never a clipped rail. */
#tienda.prowear {
  background:
    radial-gradient(circle at 8% 8%, oklch(0.96 0.01 250 / .8), transparent 25%),
    linear-gradient(180deg, #fff 0%, oklch(0.975 0.005 250) 100%) !important;
}

#tienda .prowear-toolbar {
  align-items: end;
  padding: 20px 0 18px;
  border-top-color: oklch(0.76 0.012 250);
  border-bottom-color: oklch(0.76 0.012 250);
}

#tienda .prowear-filter-control {
  min-width: 0;
  display: grid;
  gap: 9px;
}

#tienda .prowear-filter-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: oklch(0.44 0.13 48);
  font-family: "Montserrat", sans-serif;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

#tienda .prowear-filter-label::before {
  width: 26px;
  height: 2px;
  background: var(--jac-orange);
  content: "";
}

#tienda .prowear-tabs {
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}

#tienda .prowear-tabs button {
  min-height: 38px;
  padding: 0 15px;
  border-color: oklch(0.55 0.014 250 / .72);
  border-radius: 999px;
  background: #fff;
  color: oklch(0.2 0.012 250);
  font-family: "Montserrat", sans-serif;
  font-size: .67rem;
  font-weight: 700;
}

#tienda .prowear-tabs button:hover,
#tienda .prowear-tabs button:focus-visible {
  border-color: var(--jac-orange);
  background: oklch(0.95 0.03 48);
  color: oklch(0.25 0.02 48);
  box-shadow: none;
}

#tienda .prowear-tabs button.is-active {
  border-color: var(--jac-orange);
  background: oklch(0.12 0.012 250);
  color: #fff;
  box-shadow: 0 9px 20px oklch(0.11 0.012 250 / .18), inset 3px 0 var(--jac-orange);
}

#tienda .upload-product {
  min-height: 40px;
  padding: 0 17px;
  border-color: var(--jac-orange);
  border-radius: 999px;
  background: #fff;
  color: oklch(0.48 0.16 48);
  font-family: "Montserrat", sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .015em;
}

#tienda .upload-product:hover,
#tienda .upload-product:focus-within {
  background: var(--jac-orange);
  color: #fff;
  transform: translateY(-1px);
}

#tienda .prowear-carousel-shell {
  position: relative;
  overflow: clip;
  margin-top: 24px;
  padding: 6px 68px 28px;
}

#tienda .prowear-rail {
  margin: 0;
  padding: 5px 0 22px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  grid-template-rows: 1fr;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-padding-inline: 0;
}

#tienda .prowear-rail::-webkit-scrollbar { display: none; }

#tienda .prowear-card,
#tienda .prowear-upload-card {
  width: auto;
  min-width: 0;
  flex: none;
  scroll-snap-align: start;
}

#tienda .prowear-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-color: oklch(0.77 0.012 250);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 15px 30px -24px oklch(0.13 0.012 250 / .58);
}

#tienda .prowear-card:hover,
#tienda .prowear-card:focus-visible {
  border-color: oklch(0.66 0.18 48);
  box-shadow: 0 25px 46px -28px oklch(0.5 0.16 48 / .36);
}

#tienda .prowear-card figure {
  height: clamp(295px, 24vw, 355px);
  background: oklch(0.94 0.008 250);
}

#tienda .prowear-card figure.contain {
  background: #fff;
}

#tienda .prowear-card figure.contain img { padding: 20px; }

#tienda .product-favorite {
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-color: oklch(0.18 0.012 250 / .25);
  background: rgb(255 255 255 / .92);
  box-shadow: 0 8px 18px oklch(0.1 0.01 250 / .13);
}

#tienda .prowear-card-copy {
  min-height: 224px;
  padding: 21px 22px 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

#tienda .prowear-card-copy > span {
  color: oklch(0.49 0.16 48);
  font-family: "Montserrat", sans-serif;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .15em;
}

#tienda .prowear-card-copy h3 {
  min-height: 2.08em;
  margin: 7px 0 8px;
  color: oklch(0.13 0.012 250);
  font-family: "Jost", sans-serif;
  font-size: clamp(1.65rem, 1.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
}

#tienda .prowear-card-copy p {
  min-height: 44px;
  margin: 0 0 14px;
  color: oklch(0.5 0.012 250);
  font-size: .84rem;
  line-height: 1.5;
}

#tienda .prowear-card-copy a {
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  border-top-color: oklch(0.78 0.012 250);
  color: oklch(0.17 0.012 250);
  font-family: "Montserrat", sans-serif;
  font-size: .7rem;
  font-weight: 800;
}

#tienda .prowear-card-copy a:hover { color: var(--jac-orange); }

#tienda .carousel-arrow--side {
  top: 44%;
  width: 48px;
  height: 48px;
  min-height: 48px;
  border: 1px solid oklch(0.16 0.012 250 / .25);
  border-radius: 50%;
  background: #fff;
  color: oklch(0.15 0.012 250);
  box-shadow: 0 12px 25px oklch(0.11 0.012 250 / .16);
  font-size: 1.15rem;
}

#tienda .carousel-arrow--side:hover,
#tienda .carousel-arrow--side:focus-visible {
  border-color: var(--jac-orange);
  background: var(--jac-orange);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}

#tienda .carousel-arrow--side:disabled {
  cursor: default;
  opacity: .28;
  pointer-events: none;
}

#tienda .carousel-arrow--prev { left: 10px; }
#tienda .carousel-arrow--next { right: 10px; }

#tienda .prowear-upload-card {
  min-height: auto;
  border-color: oklch(0.72 0.03 250);
  border-radius: 13px;
  background: oklch(0.965 0.007 250);
}

@media (max-width: 1000px) {
  #tienda .prowear-toolbar { align-items: flex-start; flex-direction: column; }
  #tienda .prowear-actions { width: auto; }
  #tienda .prowear-carousel-shell { padding-inline: 58px; }
  #tienda .prowear-rail { grid-auto-columns: calc((100% - 20px) / 2); }
}

@media (max-width: 650px) {
  #tienda .prowear-toolbar { gap: 16px; }
  #tienda .prowear-tabs { flex-wrap: nowrap; width: calc(100vw - 44px); overflow-x: auto; padding-bottom: 2px; }
  #tienda .prowear-tabs button { flex: 0 0 auto; }
  #tienda .prowear-carousel-shell { margin-top: 18px; padding: 4px 20px 24px; }
  #tienda .prowear-rail { grid-auto-columns: 100%; gap: 14px; }
  #tienda .prowear-card figure { height: min(88vw, 370px); }
  #tienda .prowear-card-copy { min-height: 200px; }
  #tienda .carousel-arrow--side { top: 39%; width: 43px; height: 43px; min-height: 43px; }
  #tienda .carousel-arrow--prev { left: 0; }
  #tienda .carousel-arrow--next { right: 0; }
}

/* Release 47 — proceso: vidrio técnico y giro 3D, sin tonos cálidos de fondo */
#proceso.process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 16%, rgb(255 255 255 / .98) 0 13%, transparent 36%),
    linear-gradient(135deg, #f7f9fc 0%, #eef2f6 54%, #f9fbfd 100%) !important;
  padding: 70px 0 78px;
}

#proceso.process::before,
#proceso.process::after {
  position: absolute;
  z-index: -1;
  width: min(32vw, 490px);
  height: min(32vw, 490px);
  border: 1px solid rgb(31 43 55 / .07);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

#proceso.process::before { top: -260px; right: -180px; box-shadow: 0 0 0 60px rgb(31 43 55 / .025), 0 0 0 120px rgb(31 43 55 / .018); }
#proceso.process::after { bottom: -310px; left: -210px; box-shadow: 0 0 0 70px rgb(255 104 0 / .025); }

#proceso .process-shell { max-width: 1420px; }

#proceso .section-heading.compact { max-width: 840px; }

#proceso .section-heading .eyebrow {
  margin-bottom: 17px;
  color: #c94f00;
  font-family: "Montserrat", sans-serif;
  font-size: .71rem;
  font-weight: 850;
  letter-spacing: .17em;
}

#proceso .section-heading .eyebrow span {
  width: 32px;
  height: 2px;
  margin-right: 12px;
  background: #ff6500;
  box-shadow: 0 0 12px rgb(255 101 0 / .34);
}

#proceso .section-heading h2 {
  max-width: 780px;
  color: #10161d;
  font-family: "Montserrat", sans-serif;
  margin: 0;
  font-size: clamp(2.55rem, 4.65vw, 4.55rem);
  font-weight: 850;
  letter-spacing: -.071em;
  line-height: .95;
  text-wrap: balance;
}

#proceso .process-intro { display: none; }

#proceso .process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 25px);
  margin: clamp(30px, 3vw, 40px) 0 0;
  padding: 0;
  perspective: 1700px;
}

#proceso .process-card {
  height: 382px;
  min-height: 382px;
  padding: 0;
  border: 0;
  background: transparent;
  list-style: none;
  cursor: pointer;
  outline: none;
  transform-style: preserve-3d;
}

#proceso .process-card:focus-visible .process-card-inner { box-shadow: 0 0 0 4px rgb(255 101 0 / .42), 0 25px 50px rgb(10 20 30 / .18); }

#proceso .process-card-inner {
  position: relative;
  width: 100%;
  height: 382px;
  min-height: 0;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2,.82,.16,1), filter .35s ease;
}

#proceso .process-card.is-flipped .process-card-inner { transform: rotateY(180deg); }

#proceso .process-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
  padding: clamp(24px, 2vw, 32px);
  overflow: hidden;
  border: 1px solid rgb(73 88 104 / .2);
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#proceso .process-card-front {
  color: #111820;
  background: linear-gradient(140deg, rgb(255 255 255 / .86), rgb(237 242 247 / .6));
  box-shadow: 0 20px 38px -27px rgb(20 31 43 / .46), inset 0 1px 0 rgb(255 255 255 / .98);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

#proceso .process-card-front::before,
#proceso .process-card-front::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

#proceso .process-card-front::before {
  top: 0;
  right: 0;
  width: 80px;
  height: 7px;
  border-radius: 0 19px 0 9px;
  background: linear-gradient(90deg, #ff9c4d, #ff5e00 75%);
  box-shadow: 0 5px 12px rgb(255 94 0 / .25);
}

#proceso .process-card-front::after {
  right: -54px;
  bottom: -65px;
  width: 154px;
  height: 154px;
  border: 1px solid rgb(255 101 0 / .14);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgb(255 101 0 / .035), 0 0 0 43px rgb(255 101 0 / .02);
}

#proceso .process-card:nth-child(even) .process-card-front::before { right: auto; left: 0; border-radius: 19px 0 9px 0; }

#proceso .process-index {
  position: relative;
  z-index: 1;
  display: block;
  color: #aeb9c5;
  font-family: "Jost", sans-serif;
  font-size: clamp(2.6rem, 3.7vw, 4rem);
  font-weight: 760;
  letter-spacing: -.08em;
  line-height: .8;
  text-shadow: 1px 1px 0 rgb(255 255 255 / .96), 0 7px 15px rgb(30 44 59 / .12);
}

#proceso .process-illustration {
  position: relative;
  z-index: 1;
  width: 116px;
  height: 95px;
  margin: 22px 0 19px;
  color: #e55400;
  filter: drop-shadow(0 8px 9px rgb(229 84 0 / .15));
}

#proceso .process-illustration svg { width: 100%; height: 100%; overflow: visible; }
#proceso .execution-tools { width: 130px; }

#proceso .process-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #111820;
  font-family: "Jost", sans-serif;
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}

#proceso .process-card-front p {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: #566272;
  font-size: .92rem;
  line-height: 1.52;
}

#proceso .process-flip-hint {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 18px;
  color: #c94f00;
  font-family: "Montserrat", sans-serif;
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#proceso .process-flip-hint b { display: inline-block; margin-left: 4px; font-size: .92rem; transition: transform .35s ease; }
#proceso .process-card:hover .process-flip-hint b { transform: rotate(120deg); }

#proceso .process-card-back {
  color: #fff;
  background:
    linear-gradient(140deg, rgb(20 29 39 / .98), rgb(8 13 20 / .98)),
    #101820;
  box-shadow: 0 24px 48px -27px rgb(0 0 0 / .65), inset 0 1px 0 rgb(255 255 255 / .1);
  transform: rotateY(180deg);
}

#proceso .process-card-back::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #ff5e00 0%, #ffbf6b 54%, transparent 54%);
  content: "";
}

#proceso .process-card-back::after {
  position: absolute;
  right: -52px;
  bottom: -54px;
  width: 180px;
  height: 180px;
  border: 1px solid rgb(255 116 26 / .32);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgb(255 116 26 / .06);
  content: "";
}

#proceso .process-back-kicker {
  position: relative;
  z-index: 1;
  color: #ff9a4a;
  font-family: "Montserrat", sans-serif;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}

#proceso .process-card-back h3 { margin-top: 16px; color: #fff; font-size: clamp(1.68rem, 2.15vw, 2.18rem); }
#proceso .process-card-back p { position: relative; z-index: 1; margin: 14px 0 0; color: #d1d9e2; font-size: .91rem; line-height: 1.52; }

#proceso .process-card-back ul { position: relative; z-index: 1; display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
#proceso .process-card-back li { color: #f5f8fb; font-size: .78rem; font-weight: 650; }
#proceso .process-card-back li::before { margin-right: 8px; color: #ff6500; content: "—"; }
#proceso .process-card-back .process-flip-hint { color: #ffb36d; }

@media (hover: hover) and (pointer: fine) {
  #proceso .process-card:not(.is-flipped):hover .process-card-inner { transform: translateY(-9px) rotateX(2.2deg) rotateY(-2.2deg); }
  #proceso .process-card.is-flipped:hover .process-card-inner { transform: translateY(-9px) rotateY(180deg) rotateX(-2deg) rotateZ(.5deg); }
}

@media (max-width: 1000px) {
  #proceso .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}

@media (max-width: 600px) {
  #proceso .section-heading h2 { font-size: clamp(2.6rem, 14vw, 4.25rem); }
  #proceso .process-grid { grid-template-columns: minmax(0, 1fr); }
  #proceso .process-card,
  #proceso .process-card-inner { height: 360px; min-height: 0; }
  #proceso .process-card { height: 360px; min-height: 360px; }
  #proceso .process-card-face { min-height: 0; }
  #proceso .process-card-face { padding: 25px; }
  #proceso .process-illustration { margin-block: 19px 17px; }
}

@media (prefers-reduced-motion: reduce) {
  #proceso .process-card-inner,
  #proceso .process-flip-hint b { transition: none; }
}

/* Release 49 — lienzo blanco absoluto: elimina el gris azulado de las secciones claras */
#tienda.store.prowear,
#proceso.process {
  background: #fff !important;
  background-image: none !important;
}

#proceso.process::before,
#proceso.process::after { display: none; }

#proceso .process-card-front {
  background: rgb(255 255 255 / .92);
  border-color: #d8dde3;
  box-shadow: 0 19px 38px -28px rgb(16 24 32 / .32), inset 0 1px 0 #fff;
}

#proceso .process-card-face { border-color: #d8dde3; }

#tienda .prowear-card figure,
#tienda .prowear-card figure.contain,
#tienda .prowear-upload-card { background: #fff; }

/* Release 50 — tarjetas de proceso: cristal oscuro, naranja FRANTEK y profundidad 3D */
#proceso .process-grid {
  position: relative;
  isolation: isolate;
  perspective: 1900px;
}

#proceso .process-card { position: relative; z-index: 1; }

#proceso .process-card:nth-child(2)::before,
#proceso .process-card:nth-child(4)::before {
  position: absolute;
  z-index: 0;
  inset: -18px -14px;
  border: 2px dotted rgb(239 91 0 / .46);
  border-radius: 30px;
  content: "";
  opacity: .75;
  pointer-events: none;
}

#proceso .process-card:nth-child(2),
#proceso .process-card:nth-child(4) {
  outline: 2px dotted rgb(239 91 0 / .43);
  outline-offset: 11px;
  border-radius: 24px;
}

#proceso .process-card-front {
  border-color: rgb(255 255 255 / .25);
  background:
    linear-gradient(145deg, rgb(25 37 50 / .86), rgb(12 20 29 / .77)),
    rgb(17 27 37 / .82);
  box-shadow:
    0 26px 40px -25px rgb(4 11 18 / .64),
    inset 0 1px 0 rgb(255 255 255 / .2),
    inset 0 -1px 0 rgb(255 255 255 / .08);
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
}

#proceso .process-card-front::before {
  top: 0;
  right: 0;
  width: 100%;
  height: 3px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, transparent 0 58%, #ff6400 73%, #ffc078 100%);
  box-shadow: 0 4px 14px rgb(255 100 0 / .36);
}

#proceso .process-card:nth-child(even) .process-card-front::before { right: 0; left: auto; border-radius: 20px 20px 0 0; }

#proceso .process-card-front::after {
  right: -66px;
  bottom: -78px;
  width: 175px;
  height: 175px;
  border-color: rgb(255 131 39 / .24);
  box-shadow: 0 0 0 22px rgb(255 101 0 / .045), 0 0 0 46px rgb(255 101 0 / .025);
}

#proceso .process-index {
  color: #ff7823;
  text-shadow: 0 0 18px rgb(255 101 0 / .26), 1px 1px 0 rgb(255 211 175 / .15);
}

#proceso .process-illustration {
  color: #ff8d40;
  filter: drop-shadow(0 9px 12px rgb(255 102 0 / .24));
}

#proceso .process-card h3 { color: #fff; }

#proceso .process-card-front p {
  color: rgb(239 244 248 / .9);
  text-shadow: 0 1px 1px rgb(0 0 0 / .22);
}

#proceso .process-flip-hint { color: #ffae72; }

#proceso .process-card-back {
  border-color: rgb(255 255 255 / .23);
  background:
    linear-gradient(150deg, rgb(10 16 23 / .92), rgb(30 42 54 / .83)),
    rgb(13 21 29 / .88);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}

@media (hover: hover) and (pointer: fine) {
  #proceso .process-card:not(.is-flipped):hover .process-card-inner {
    filter: brightness(1.08) saturate(1.06);
    transform: translateY(-10px) rotateX(2.4deg) rotateY(-2.5deg);
  }
}

@media (max-width: 1000px) {
  #proceso .process-card:nth-child(2)::before,
  #proceso .process-card:nth-child(4)::before { inset: -10px; }
}

@media (max-width: 600px) {
  #proceso .process-card:nth-child(2)::before,
  #proceso .process-card:nth-child(4)::before { display: none; }
  #proceso .process-card:nth-child(2),
  #proceso .process-card:nth-child(4) { outline: 0; }
}

/* Release 53 — cristal más ligero e iconografía técnica de trazo fino */
#proceso .process-card-front {
  border-color: rgb(255 255 255 / .5);
  background:
    linear-gradient(142deg, rgb(35 51 65 / .67), rgb(13 26 37 / .55)),
    rgb(23 38 49 / .58);
  box-shadow:
    0 24px 42px -29px rgb(12 22 30 / .48),
    inset 0 1px 0 rgb(255 255 255 / .32),
    inset 0 -1px 0 rgb(255 255 255 / .12);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
}

#proceso .process-card-back {
  border-color: rgb(255 255 255 / .42);
  background:
    linear-gradient(148deg, rgb(15 27 37 / .76), rgb(38 54 68 / .62)),
    rgb(17 31 41 / .64);
  box-shadow: 0 24px 42px -29px rgb(12 22 30 / .48), inset 0 1px 0 rgb(255 255 255 / .23);
}

#proceso .process-illustration {
  color: #ff9148;
  filter: drop-shadow(0 7px 10px rgb(255 112 17 / .2));
}

#proceso .process-illustration g { stroke-width: 3.75px; }

#proceso .process-index {
  color: #ff8336;
  text-shadow: 0 0 14px rgb(255 109 19 / .19), 1px 1px 0 rgb(255 219 186 / .13);
}

#proceso .process-card-front p { color: rgb(247 249 251 / .9); }

@media (hover: hover) and (pointer: fine) {
  #proceso .process-card:hover .process-card-inner {
    filter: brightness(1.08) saturate(1.05);
  }
}

/* Release 54 — flip card literal: frente mínimo, reverso explicativo, cristal negro */
#proceso .process-card-front {
  border-color: rgb(255 255 255 / .38);
  background:
    linear-gradient(145deg, rgb(0 0 0 / .72), rgb(0 0 0 / .56)),
    rgb(0 0 0 / .62);
  box-shadow:
    0 24px 42px -28px rgb(0 0 0 / .46),
    inset 0 1px 0 rgb(255 255 255 / .24),
    inset 0 -1px 0 rgb(255 255 255 / .08);
  backdrop-filter: blur(26px) saturate(1.03);
  -webkit-backdrop-filter: blur(26px) saturate(1.03);
}

#proceso .process-card-back {
  justify-content: center;
  border-color: rgb(255 255 255 / .32);
  background:
    linear-gradient(145deg, rgb(0 0 0 / .8), rgb(0 0 0 / .66)),
    rgb(0 0 0 / .72);
  box-shadow: 0 24px 42px -28px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .18);
  backdrop-filter: blur(26px) saturate(1.03);
  -webkit-backdrop-filter: blur(26px) saturate(1.03);
}

#proceso .process-card-front .process-illustration {
  width: 128px;
  height: 104px;
  margin: 21px 0 0;
  color: #ff8a38;
  filter: drop-shadow(0 7px 10px rgb(255 94 0 / .24));
}

#proceso .process-card-front .process-illustration g { stroke-width: 3.25px; }
#proceso .process-card-front .execution-tools { width: 139px; }

#proceso .process-card-front h3 {
  margin: auto 0 8px;
  color: #fff;
  font-size: clamp(1.58rem, 2.15vw, 2.06rem);
  line-height: .95;
  text-shadow: 0 2px 12px rgb(0 0 0 / .35);
}

#proceso .process-card-back .process-back-kicker {
  margin: 0 0 17px;
  color: #ff913f;
}

#proceso .process-card-back .process-back-copy {
  position: relative;
  z-index: 1;
  max-width: 21ch;
  margin: 0;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: clamp(1.34rem, 1.85vw, 1.72rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-wrap: balance;
}

#proceso .process-card-back ul,
#proceso .process-card-back .process-flip-hint,
#proceso .process-card-front p,
#proceso .process-card-front .process-flip-hint { display: none; }

/* Release 55 — reverso limpio: sólo el texto, sobre vidrio negro ahumado */
#proceso .process-card-front {
  background:
    linear-gradient(145deg, rgb(0 0 0 / .6), rgb(0 0 0 / .43)),
    rgb(0 0 0 / .48);
  border-color: rgb(255 255 255 / .42);
  backdrop-filter: blur(28px) saturate(1.02);
  -webkit-backdrop-filter: blur(28px) saturate(1.02);
}

#proceso .process-card-back {
  align-items: center;
  text-align: center;
  background:
    linear-gradient(145deg, rgb(0 0 0 / .57), rgb(0 0 0 / .4)),
    rgb(0 0 0 / .46);
  border-color: rgb(255 255 255 / .38);
  backdrop-filter: blur(30px) saturate(1.02);
  -webkit-backdrop-filter: blur(30px) saturate(1.02);
}

#proceso .process-card-back .process-back-copy {
  max-width: 18ch;
  color: #fff;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  font-weight: 650;
  line-height: 1.18;
  text-align: center;
  text-shadow: 0 3px 16px rgb(0 0 0 / .44);
}

#proceso .process-card-back .process-back-kicker { display: none; }

/* Release 56 — giro visible por hover y contraste legible sobre cristal negro */
#proceso .process-card-front {
  background:
    linear-gradient(145deg, rgb(0 0 0 / .74), rgb(0 0 0 / .59)),
    rgb(0 0 0 / .65);
  border-color: rgb(255 255 255 / .46);
}

#proceso .process-card-back {
  background:
    linear-gradient(145deg, rgb(0 0 0 / .8), rgb(0 0 0 / .65)),
    rgb(0 0 0 / .72);
  border-color: rgb(255 255 255 / .44);
}

#proceso .process-card-back .process-back-copy {
  color: #fff;
  font-size: clamp(1.28rem, 1.78vw, 1.62rem);
  line-height: 1.28;
}

@media (hover: hover) and (pointer: fine) {
  #proceso .process-card:hover .process-card-inner {
    filter: brightness(1.1) saturate(1.05);
    transform: translateY(-8px) rotateY(180deg);
  }
}

/* Release 57 — proceso fijo: título y explicación siempre visibles */
#proceso .process-card {
  cursor: default;
}

#proceso .process-card-inner {
  height: 382px;
  transform: none !important;
  transition: none;
}

#proceso .process-card-face {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

#proceso .process-card-front {
  background:
    linear-gradient(145deg, rgb(0 0 0 / .62), rgb(0 0 0 / .45)),
    rgb(0 0 0 / .5);
}

#proceso .process-card-front h3 {
  margin: auto 0 10px;
}

#proceso .process-card-front p {
  display: block !important;
  position: relative;
  z-index: 1;
  max-width: 25ch;
  margin: 0;
  color: rgb(255 255 255 / .94);
  font-family: "Jost", sans-serif;
  font-size: clamp(.9rem, 1.04vw, 1rem);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  text-shadow: 0 2px 12px rgb(0 0 0 / .5);
}

#proceso .process-card-back {
  position: absolute;
  z-index: 3;
  inset: auto 28px 25px;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  transform: none;
  background: transparent;
  box-shadow: none;
  text-align: left;
  pointer-events: none;
}

#proceso .process-card-back::before,
#proceso .process-card-back::after {
  display: none;
}

#proceso .process-card-back .process-back-copy {
  display: block;
  max-width: none;
  margin: 0;
  color: rgb(255 255 255 / .94);
  font-size: clamp(.9rem, 1.04vw, 1rem);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  text-shadow: 0 2px 12px rgb(0 0 0 / .5);
}

#proceso .process-card:hover .process-card-inner,
#proceso .process-card.is-flipped .process-card-inner {
  filter: none !important;
  transform: none !important;
}

@media (max-width: 640px) {
  #proceso .process-card-inner { height: 360px; }
  #proceso .process-card-back { inset-inline: 24px; bottom: 22px; }
}

/* Release 59 — FRANTEK PROWEAR: showroom oscuro, limpio y editorial */
#tienda.store.prowear {
  isolation: isolate;
  background:
    radial-gradient(circle at 14% 7%, oklch(0.27 0.018 52 / .58), transparent 29%),
    radial-gradient(circle at 90% 86%, oklch(0.22 0.02 52 / .46), transparent 31%),
    oklch(0.095 0.009 54) !important;
  color: oklch(0.965 0.004 90);
}

#tienda.store.prowear::before {
  display: block;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px),
    linear-gradient(0deg, rgb(255 255 255 / .024) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

#tienda.store.prowear::after { z-index: -1; color: rgb(255 255 255 / .028); }
#tienda .prowear-orbit { border-color: rgb(255 255 255 / .12); }
#tienda .prowear-orbit::before { border-color: rgb(255 255 255 / .18); }
#tienda .prowear-head h2 { color: oklch(0.97 0.004 90); }
#tienda .prowear-head h2 em { color: var(--jac-orange); }
#tienda .prowear-intro p { color: rgb(255 255 255 / .72); }
#tienda .prowear-cta { color: oklch(0.97 0.004 90); border-bottom-color: var(--jac-orange); }

#tienda .prowear-toolbar { border-top-color: rgb(255 255 255 / .16); border-bottom-color: rgb(255 255 255 / .16); }
#tienda .prowear-filter-label { color: rgb(255 255 255 / .72); }

#tienda .prowear-tabs button {
  border-color: rgb(255 255 255 / .26);
  background: rgb(255 255 255 / .035);
  color: rgb(255 255 255 / .85);
}

#tienda .prowear-tabs button:hover,
#tienda .prowear-tabs button:focus-visible { border-color: var(--jac-orange); background: rgb(255 106 0 / .16); color: #fff; }

#tienda .prowear-tabs button.is-active {
  border-color: var(--jac-orange);
  background: var(--jac-orange);
  color: oklch(0.11 0.01 54);
  box-shadow: 0 10px 24px rgb(255 100 0 / .27);
}

#tienda .upload-product { border-color: var(--jac-orange); background: transparent; color: #fff; }
#tienda .upload-product:hover,
#tienda .upload-product:focus-within { background: var(--jac-orange); color: oklch(0.11 0.01 54); }

#tienda .prowear-card {
  border-color: rgb(255 255 255 / .25);
  border-radius: 16px;
  background: oklch(0.135 0.012 54);
  box-shadow: 0 28px 58px -34px rgb(0 0 0 / .95), inset 0 1px 0 rgb(255 255 255 / .1);
}

#tienda .prowear-card:hover,
#tienda .prowear-card:focus-visible {
  border-color: rgb(255 132 50 / .86);
  box-shadow: 0 32px 64px -32px rgb(0 0 0 / .95), 0 0 0 1px rgb(255 113 27 / .15), inset 0 1px 0 rgb(255 255 255 / .14);
}

#tienda .prowear-card figure,
#tienda .prowear-card figure.contain { height: clamp(300px, 25vw, 390px); background: oklch(0.115 0.01 54); }
#tienda .prowear-card figure.contain img { padding: 18px; }

#tienda .product-favorite {
  border-color: rgb(255 255 255 / .34);
  background: rgb(12 14 17 / .52);
  color: #fff;
  box-shadow: 0 9px 20px rgb(0 0 0 / .32), inset 0 1px 0 rgb(255 255 255 / .16);
  backdrop-filter: blur(9px);
}

#tienda .product-favorite:hover { border-color: var(--jac-orange); color: var(--jac-orange); }

#tienda .prowear-card-copy {
  min-height: 238px;
  padding: 23px 25px 22px;
  background: linear-gradient(145deg, oklch(0.16 0.012 54), oklch(0.115 0.01 54));
}

#tienda .prowear-card-copy > span { color: oklch(0.77 0.16 54); }
#tienda .prowear-card-copy h3 { color: oklch(0.97 0.004 90); }
#tienda .prowear-card-copy p { color: rgb(255 255 255 / .7); }
#tienda .prowear-card-copy a { border-top-color: rgb(255 255 255 / .18); color: oklch(0.96 0.004 90); }
#tienda .prowear-card-copy a:hover { color: oklch(0.77 0.16 54); }

#tienda .carousel-arrow--side {
  border-color: rgb(255 255 255 / .32);
  background: rgb(17 19 22 / .9);
  color: #fff;
  box-shadow: 0 14px 27px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .14);
}

#tienda .carousel-arrow--side:hover,
#tienda .carousel-arrow--side:focus-visible { border-color: var(--jac-orange); background: var(--jac-orange); color: oklch(0.11 0.01 54); }

#tienda .prowear-upload-card { border-color: rgb(255 255 255 / .25); background: rgb(255 255 255 / .035); color: #fff; }
#tienda .prowear-upload-card small,
#tienda .upload-note { color: rgb(255 255 255 / .58); }

@media (max-width: 650px) {
  #tienda .prowear-card figure,
  #tienda .prowear-card figure.contain { height: min(88vw, 390px); }
  #tienda .prowear-card-copy { min-height: 220px; padding: 22px; }
}

/* Release 60 — proceso: vidrio carbón azulado y acentos cobre FRANTEK */
#proceso .process-card,
#proceso .process-card-inner {
  height: 400px;
  min-height: 400px;
}

#proceso .process-card-front {
  color: oklch(0.97 0.004 90);
  border-color: rgb(255 255 255 / .28);
  background:
    radial-gradient(circle at 82% 8%, rgb(255 128 45 / .09), transparent 31%),
    linear-gradient(145deg, rgb(39 52 65 / .9), rgb(17 26 35 / .94));
  box-shadow:
    0 22px 45px -26px rgb(4 9 14 / .5),
    inset 0 1px 0 rgb(255 255 255 / .18),
    inset 0 -1px 0 rgb(0 0 0 / .3);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

#proceso .process-card-front::before {
  width: 100%;
  height: 2px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, transparent 0 66%, rgb(255 132 50 / .94) 100%);
  box-shadow: 0 2px 9px rgb(255 113 22 / .28);
}

#proceso .process-card-front::after {
  right: -55px;
  bottom: -66px;
  width: 168px;
  height: 168px;
  border-color: rgb(244 127 47 / .2);
  box-shadow: 0 0 0 22px rgb(244 127 47 / .035), 0 0 0 48px rgb(244 127 47 / .018);
}

#proceso .process-card:nth-child(2)::before,
#proceso .process-card:nth-child(4)::before { border-color: rgb(244 127 47 / .56); }

#proceso .process-index {
  color: oklch(0.72 0.18 49);
  font-size: clamp(3rem, 4vw, 4.35rem);
  font-weight: 820;
  letter-spacing: -.09em;
  text-shadow: 0 4px 16px rgb(255 103 13 / .2);
}

#proceso .process-illustration {
  width: 126px;
  height: 104px;
  margin: 25px 0 21px;
  color: oklch(0.74 0.18 49);
  filter: drop-shadow(0 5px 10px rgb(255 112 22 / .24));
}

#proceso .execution-tools { width: 142px; }
#proceso .process-illustration g { stroke-width: 3px; }

#proceso .process-card-front h3 {
  margin: auto 0 10px;
  color: oklch(0.97 0.004 90);
  font-size: clamp(1.75rem, 2.25vw, 2.2rem);
  font-weight: 800;
  line-height: .96;
  text-shadow: 0 2px 13px rgb(0 0 0 / .3);
}

#proceso .process-card-front p {
  max-width: 27ch;
  color: rgb(255 255 255 / .84);
  font-size: clamp(.92rem, 1.05vw, 1rem);
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 640px) {
  #proceso .process-card,
  #proceso .process-card-inner { height: 380px; min-height: 380px; }
}

/* Release 61 — iconografía cobre luminosa y circuitos de conexión en verde neón */
#proceso .process-index {
  color: transparent;
  background: linear-gradient(135deg, #ffd791 0%, #ff9d42 28%, #ff6708 62%, #ffc36b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 2px 0 rgb(255 227 178 / .12), 0 0 18px rgb(255 101 10 / .25);
}

#proceso .process-illustration {
  color: #ff862b;
  filter:
    drop-shadow(0 1px 0 rgb(255 226 174 / .24))
    drop-shadow(0 0 6px rgb(255 100 10 / .4))
    drop-shadow(0 7px 13px rgb(255 82 0 / .24));
}

#proceso .process-illustration g { stroke-width: 2.85px; }
#proceso .process-illustration svg { overflow: visible; }

#proceso .process-card:nth-child(2)::before,
#proceso .process-card:nth-child(4)::before {
  border-color: rgb(159 255 28 / .76);
  box-shadow: 0 0 14px rgb(142 255 0 / .22), inset 0 0 16px rgb(151 255 0 / .035);
}

#proceso .process-card:nth-child(2),
#proceso .process-card:nth-child(4) {
  outline-color: rgb(159 255 28 / .68);
  box-shadow: 0 0 18px rgb(137 255 0 / .1);
}

#proceso .process-grid::after {
  position: absolute;
  z-index: 0;
  top: 46px;
  left: 19%;
  width: 63%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgb(169 255 32 / .85) 0 3px, transparent 3px 9px);
  box-shadow: 0 0 10px rgb(145 255 0 / .36);
  content: "";
  opacity: .76;
  pointer-events: none;
}

@media (max-width: 1000px) {
  #proceso .process-grid::after { display: none; }
}

/* Release 62 — escala más ligera, iconos en relieve y nodos verdes interconectados */
#proceso .process-card,
#proceso .process-card-inner {
  height: 370px;
  min-height: 370px;
}

#proceso .process-card-face { padding: 24px 28px; }

#proceso .process-card-front {
  background:
    radial-gradient(circle at 19% 10%, rgb(255 255 255 / .12), transparent 24%),
    radial-gradient(circle at 82% 8%, rgb(255 128 45 / .1), transparent 29%),
    linear-gradient(145deg, rgb(39 52 65 / .91), rgb(17 26 35 / .95));
  box-shadow:
    0 25px 42px -29px rgb(4 9 14 / .57),
    0 11px 0 -9px rgb(9 14 20 / .56),
    inset 0 1px 0 rgb(255 255 255 / .19),
    inset 0 -1px 0 rgb(0 0 0 / .34);
}

#proceso .process-illustration {
  width: 116px;
  height: 94px;
  margin: 16px 0 14px;
  isolation: isolate;
  transform: translateZ(30px);
}

#proceso .execution-tools { width: 130px; }

#proceso .process-illustration::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 111 21 / .22), transparent 67%);
  filter: blur(6px);
  content: "";
  transform: translate(-50%, -50%);
}

#proceso .process-card-front h3 { font-size: clamp(1.62rem, 2.05vw, 2rem); }
#proceso .process-card-front p { font-size: clamp(.86rem, .99vw, .95rem); line-height: 1.46; }

#proceso .process-card:nth-child(2)::before,
#proceso .process-card:nth-child(4)::before {
  border: 2px dotted rgb(162 255 24 / .92);
  box-shadow: 0 0 16px rgb(130 255 0 / .33), inset 0 0 16px rgb(151 255 0 / .045);
}

#proceso .process-card:nth-child(2),
#proceso .process-card:nth-child(4) {
  outline: 2px dotted rgb(162 255 24 / .84);
  box-shadow: 0 0 19px rgb(135 255 0 / .13);
}

#proceso .process-grid::after {
  top: 42px;
  background: repeating-linear-gradient(90deg, rgb(174 255 28 / .96) 0 4px, transparent 4px 10px);
  box-shadow: 0 0 12px rgb(142 255 0 / .48);
}

@media (max-width: 640px) {
  #proceso .process-card,
  #proceso .process-card-inner { height: 350px; min-height: 350px; }
}

/* Release 63 — tarjeta física de presentación en el cierre de contacto */
#contacto.contact {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgb(255 100 0 / .11), transparent 31%),
    linear-gradient(135deg, #11161c, #070a0e 75%) !important;
}

#contacto .contact-panel {
  grid-template-columns: minmax(0, 1.1fr) minmax(290px, .76fr) minmax(250px, .72fr);
  gap: clamp(25px, 3vw, 58px);
  align-items: center;
}

#contacto .contact-copy { position: relative; z-index: 1; }

#contacto .contact-presentation-card {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  margin: 0;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgb(255 202 125 / .35);
  border-radius: 19px;
  background: linear-gradient(140deg, rgb(255 184 91 / .95), rgb(255 94 0 / .72));
  box-shadow: 0 28px 52px -28px rgb(0 0 0 / .9), 0 0 32px rgb(255 105 0 / .16);
  transform: perspective(1250px) rotateY(-8deg) rotateZ(-2.2deg);
  transform-origin: 50% 58%;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease;
}

#contacto .contact-presentation-card::after {
  position: absolute;
  inset: 6px;
  border: 1px solid rgb(255 255 255 / .24);
  border-radius: 13px;
  content: "";
  pointer-events: none;
}

#contacto .contact-presentation-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 13px;
  object-fit: cover;
  background: #fff;
  transform: scale(1.2);
  transform-origin: center;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

#contacto .contact-presentation-card:hover {
  box-shadow: 0 33px 60px -29px rgb(0 0 0 / .95), 0 0 44px rgb(255 112 0 / .25);
  transform: perspective(1250px) rotateY(-2deg) rotateZ(-.4deg) translateY(-7px);
}

#contacto .contact-presentation-card:hover img { transform: scale(1.25); }

#contacto .contact-actions { position: relative; z-index: 1; }

@media (max-width: 1050px) {
  #contacto .contact-panel { grid-template-columns: minmax(0, 1fr) minmax(265px, .76fr); }
  #contacto .contact-actions { grid-column: 1 / -1; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  #contacto .contact-panel { grid-template-columns: 1fr; }
  #contacto .contact-presentation-card { width: min(100%, 430px); justify-self: center; transform: perspective(1000px) rotateY(-3deg) rotateZ(-1.2deg); }
  #contacto .contact-actions { grid-column: auto; grid-template-columns: 1fr; }
}

/* Release 66 — cristal negro ahumado para las tarjetas del proceso */
#proceso .process-card-front {
  border-color: rgb(255 255 255 / .34);
  background:
    radial-gradient(circle at 18% 9%, rgb(255 255 255 / .075), transparent 25%),
    radial-gradient(circle at 84% 10%, rgb(255 118 35 / .07), transparent 28%),
    linear-gradient(145deg, rgb(7 10 14 / .88), rgb(0 0 0 / .94));
  box-shadow:
    0 26px 44px -29px rgb(0 0 0 / .63),
    0 11px 0 -9px rgb(0 0 0 / .64),
    inset 0 1px 0 rgb(255 255 255 / .16),
    inset 0 -1px 0 rgb(0 0 0 / .48);
  backdrop-filter: blur(22px) saturate(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(1.04);
}

/* Release 68 — tarjeta FRANTEK+ de dos caras con giro físico */
#contacto .contact-business-card {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 430px);
  aspect-ratio: 2.136 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 19px;
  appearance: none;
  background: transparent;
  cursor: pointer;
  perspective: 1400px;
  transform: rotateY(-7deg) rotateZ(-1.3deg);
  transform-origin: 50% 56%;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), filter .55s ease;
}

#contacto .contact-business-card::before {
  position: absolute;
  z-index: -1;
  inset: 4% -1% -7%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(255 117 20 / .42), transparent 68%);
  content: "";
  filter: blur(15px);
  opacity: .72;
  transition: opacity .55s ease, transform .55s ease;
}

#contacto .contact-business-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .86s cubic-bezier(.2, .78, .18, 1);
}

#contacto .contact-business-card-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border: 1px solid rgb(255 205 121 / .73);
  border-radius: 19px;
  background: #050505;
  box-shadow: 0 27px 54px -29px rgb(0 0 0 / .98), inset 0 1px 0 rgb(255 255 255 / .27);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#contacto .contact-business-card-face::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgb(255 255 255 / .13), transparent 23%, transparent 72%, rgb(255 153 47 / .1));
  content: "";
  pointer-events: none;
}

#contacto .contact-business-card-face img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: none;
}

#contacto .contact-business-card-face--contacts img { object-position: center; }

#contacto .contact-business-card-face--brand {
  transform: rotateY(180deg);
}

#contacto .contact-business-card-face--brand img { object-position: center; }

#contacto .contact-business-card:focus-visible {
  outline: 2px solid var(--jac-orange);
  outline-offset: 9px;
}

#contacto .contact-business-card:focus .contact-business-card-inner {
  transform: rotateY(180deg);
}

@media (hover: hover) {
  #contacto .contact-business-card:hover {
    filter: brightness(1.07);
    transform: rotateY(-1.5deg) rotateZ(-.25deg) translateY(-8px);
  }

  #contacto .contact-business-card:hover::before {
    opacity: 1;
    transform: scale(1.08);
  }

  #contacto .contact-business-card:hover .contact-business-card-inner {
    transform: rotateY(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #contacto .contact-business-card,
  #contacto .contact-business-card::before,
  #contacto .contact-business-card-inner {
    transition-duration: .01ms;
  }
}

@media (max-width: 1050px) {
  #contacto .contact-business-card { justify-self: center; }
}

@media (max-width: 680px) {
  #contacto .contact-business-card {
    width: min(100%, 390px);
    transform: rotateY(-2.5deg) rotateZ(-.8deg);
  }
}

/* Release 72 — cierre de contacto: tarjeta protagonista y acciones debajo */
#contacto .contact-panel {
  grid-template-columns: minmax(0, .78fr) minmax(500px, 1.18fr);
  grid-template-areas:
    "copy card"
    "copy actions";
  column-gap: clamp(48px, 6vw, 92px);
  row-gap: 18px;
  align-items: center;
}

#contacto .contact-copy {
  grid-area: copy;
  align-self: center;
}

#contacto .contact-business-card {
  grid-area: card;
  justify-self: end;
  width: min(100%, 620px);
  max-width: none;
  transform: perspective(1450px) rotateY(-5deg) rotateZ(-.75deg);
}

#contacto .contact-actions {
  grid-area: actions;
  display: grid;
  justify-self: end;
  width: min(100%, 620px);
  max-width: none;
  grid-template-columns: 1fr;
  gap: 12px;
}

#contacto .contact-actions .button,
#contacto .contact-actions .button-outline-light {
  min-height: 59px;
  border-color: var(--jac-orange);
  background: var(--jac-orange);
  color: #080b0f;
  box-shadow: 0 13px 28px rgb(255 100 0 / .2), inset 0 1px 0 rgb(255 255 255 / .25);
}

#contacto .contact-actions .button:hover,
#contacto .contact-actions .button-outline-light:hover {
  border-color: #ff862d;
  background: #ff862d;
  color: #080b0f;
  transform: translateY(-2px);
}

@media (max-width: 1050px) {
  #contacto .contact-panel {
    grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr);
    grid-template-areas:
      "copy card"
      "copy actions";
    column-gap: 34px;
  }

  #contacto .contact-business-card,
  #contacto .contact-actions {
    width: 100%;
    justify-self: end;
  }
}

@media (max-width: 760px) {
  #contacto .contact-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "card"
      "actions";
    gap: 26px;
  }

  #contacto .contact-business-card,
  #contacto .contact-actions {
    width: min(100%, 620px);
    justify-self: center;
  }
}

/* Release 74 — Cobertura y preguntas, jerarquía editorial limpia */
#cobertura.coverage {
  position: relative;
  isolation: isolate;
  padding-block: clamp(80px, 8vw, 132px);
  background: #fff !important;
}

#cobertura .coverage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(42px, 5vw, 68px);
  align-items: start;
}

#cobertura .coverage-copy {
  order: -1;
  position: relative;
  width: min(100%, 960px);
  margin-inline: auto;
  text-align: center;
}

#cobertura .coverage-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 0 0 10px;
  color: #885226;
}

#cobertura .coverage-copy .eyebrow span {
  width: 25px;
  height: 1px;
  margin: 0;
  background: #ae7746;
}

#cobertura .coverage-copy .eyebrow::after {
  width: 50px;
  height: 50px;
  content: "";
  background: url("assets/cobertura-pin-3d.png") center / contain no-repeat;
  filter: drop-shadow(0 10px 10px rgb(113 57 10 / .21));
  animation: coverage-pin-float 4.8s ease-in-out infinite;
}

#cobertura .coverage-copy h2 {
  max-width: 1060px;
  margin: 0 auto;
  color: #111418;
  font-size: clamp(2.85rem, 5.3vw, 5.45rem);
  line-height: .97;
  letter-spacing: -.075em;
  text-wrap: balance;
}

#cobertura .coverage-copy h2 em {
  color: inherit;
  font-style: normal;
}

#cobertura .coverage-copy > p:not(.eyebrow) {
  max-width: 780px;
  margin: 20px auto 0;
  color: #3b4249;
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  line-height: 1.55;
  text-wrap: balance;
}

#cobertura .zones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  max-width: 760px;
  margin: 26px auto 0;
}

#cobertura .zones span {
  border: 1px solid rgb(95 61 32 / .6);
  border-radius: 9px;
  background: rgb(255 255 255 / .82);
  color: #161616;
  box-shadow: 0 6px 15px rgb(27 24 19 / .09);
  backdrop-filter: blur(8px);
}

#cobertura .zones span:first-child {
  border-color: #ff6500;
  background: #ff6500;
  color: #fff;
  box-shadow: 0 9px 18px rgb(255 101 0 / .28);
}

#cobertura .map-link {
  display: inline-flex;
  align-items: center;
  margin-top: 27px;
  color: #c84e00;
  font-weight: 800;
}

#cobertura .coverage-map {
  position: relative;
  order: 2;
  width: min(100%, 960px);
  min-height: 390px;
  aspect-ratio: 2.08 / 1;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgb(12 18 24 / .14);
  border-radius: 23px;
  background: #eaf4f8;
  box-shadow: 0 28px 58px -34px rgb(8 17 26 / .55);
}

#cobertura .coverage-map iframe,
#cobertura .coverage-map .map-consent {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#cobertura .coverage-map iframe {
  z-index: 1;
  border: 0;
}

#cobertura .coverage-map .map-consent {
  z-index: 5;
  display: grid;
  place-content: center;
  padding: 36px;
  background: linear-gradient(135deg, rgb(216 240 246 / .96), rgb(238 250 252 / .98));
  text-align: center;
}

#cobertura .coverage-map .map-consent p {
  max-width: 400px;
  margin: 8px auto 16px;
}

#cobertura .map-label {
  z-index: 3;
  left: clamp(18px, 3vw, 42px);
  bottom: clamp(18px, 3vw, 34px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px 10px 10px;
  border: 1px solid rgb(13 19 25 / .1);
  border-radius: 14px;
  background: rgb(255 255 255 / .91);
  box-shadow: 0 14px 26px rgb(20 35 40 / .18);
  backdrop-filter: blur(10px);
}

#cobertura .map-label-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  background: url("assets/cobertura-pin-3d.png") center / 52px 52px no-repeat;
  filter: drop-shadow(0 7px 8px rgb(110 57 12 / .2));
}

#cobertura .map-label-icon svg { display: none; }

#cobertura .map-label-copy {
  display: grid;
  gap: 1px;
  text-align: left;
}

#cobertura .coverage-map::after {
  position: absolute;
  z-index: 3;
  top: 48%;
  right: 28%;
  display: grid;
  gap: 2px;
  padding: 10px 15px;
  border: 1px solid rgb(13 19 25 / .12);
  border-radius: 13px;
  background: rgb(255 255 255 / .92);
  color: #111418;
  box-shadow: 0 14px 26px rgb(20 35 40 / .17);
  content: "Sierra";
  font-size: 1.05rem;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

#preguntas.faq {
  position: relative;
  isolation: isolate;
  padding-block: clamp(86px, 9vw, 142px);
  background: #fff !important;
}

#preguntas .faq-layout {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(520px, 1.15fr);
  gap: clamp(50px, 7vw, 120px);
  align-items: center;
}

#preguntas .section-heading {
  position: relative;
  max-width: 500px;
  margin: 0;
}

#preguntas .section-heading::after {
  position: absolute;
  top: -29px;
  right: -52px;
  z-index: -1;
  width: clamp(82px, 9vw, 130px);
  aspect-ratio: 1;
  background: url("assets/faq-question-3d.png?v=20260809-02") center / contain no-repeat;
  content: "";
  filter: drop-shadow(0 15px 16px rgb(143 59 0 / .18));
  animation: faq-question-spin 9s cubic-bezier(.45,.05,.2,1) infinite;
}

#preguntas .section-heading .eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgb(187 113 56 / .58);
  border-radius: 11px;
  background: rgb(255 255 255 / .84);
  color: #b7510d;
  box-shadow: 0 10px 22px rgb(47 38 30 / .1);
}

#preguntas .section-heading .eyebrow span { display: none; }

#preguntas .section-heading h2 {
  max-width: 470px;
  margin-top: 24px;
  color: #111418;
  font-size: clamp(3.2rem, 5.4vw, 5.6rem);
  line-height: .93;
  letter-spacing: -.075em;
  text-wrap: balance;
}

#preguntas .accordion {
  display: grid;
  gap: 17px;
}

#preguntas .accordion details {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(18 27 36 / .18);
  border-radius: 13px;
  background: rgb(255 255 255 / .88);
  box-shadow: 0 12px 27px rgb(20 25 29 / .13), inset 0 1px 0 rgb(255 255 255 / .92);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

#preguntas .accordion details:hover,
#preguntas .accordion details[open] {
  border-color: rgb(255 101 0 / .55);
  box-shadow: 0 18px 34px rgb(129 64 9 / .17), inset 0 1px 0 #fff;
  transform: translateY(-2px);
}

#preguntas .accordion details::before {
  position: absolute;
  top: 50%;
  left: 24px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgb(192 102 36 / .45);
  border-radius: 12px;
  color: #d05a0b;
  font-family: "Jost", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
}

#preguntas .accordion details:nth-child(1)::before { content: "◷"; }
#preguntas .accordion details:nth-child(2)::before { content: "◎"; }
#preguntas .accordion details:nth-child(3)::before { content: "⌘"; }
#preguntas .accordion details:nth-child(4)::before { content: "▣"; }

#preguntas .accordion summary {
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 18px 70px 18px 85px;
  color: #111418;
  cursor: pointer;
  font-family: "Jost", "Montserrat", sans-serif;
  font-size: clamp(1.04rem, 1.55vw, 1.35rem);
  font-weight: 650;
  line-height: 1.26;
  list-style: none;
}

#preguntas .accordion summary::-webkit-details-marker { display: none; }

#preguntas .accordion summary span {
  position: absolute;
  right: 22px;
  width: 24px;
  height: 24px;
  color: transparent;
  font-size: 0;
  transition: transform .25s ease;
}

#preguntas .accordion summary span::after {
  position: absolute;
  inset: 0;
  border-right: 2px solid #111418;
  border-bottom: 2px solid #111418;
  content: "";
  transform: rotate(45deg) scale(.58);
}

#preguntas .accordion details[open] summary span { transform: rotate(180deg); }

#preguntas .accordion details p {
  max-width: 680px;
  margin: -4px 70px 21px 85px;
  color: #525b64;
  line-height: 1.55;
}

@keyframes coverage-pin-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}

@keyframes faq-question-spin {
  0%, 82%, 100% { transform: rotate(-10deg) translateY(0); }
  42% { transform: rotate(350deg) translateY(-8px); }
  50% { transform: rotate(360deg) translateY(-8px); }
}

@media (max-width: 900px) {
  #preguntas .faq-layout { grid-template-columns: 1fr; gap: 45px; }
  #preguntas .section-heading { max-width: 650px; }
  #preguntas .section-heading h2 { max-width: 620px; }
  #preguntas .section-heading::after { right: 4%; }
}

@media (max-width: 720px) {
  #cobertura.coverage { padding-block: 64px; }
  #cobertura .coverage-copy h2 { font-size: clamp(2.3rem, 12vw, 3.6rem); letter-spacing: -.065em; }
  #cobertura .coverage-map { min-height: 330px; aspect-ratio: 1.17 / 1; border-radius: 18px; }
  #cobertura .coverage-map::after { top: 40%; right: 10%; padding: 8px 11px; }
  #preguntas.faq { padding-block: 68px; }
  #preguntas .section-heading::after { top: -20px; right: 0; width: 78px; }
  #preguntas .accordion details::before { left: 16px; width: 37px; height: 37px; }
  #preguntas .accordion summary { min-height: 80px; padding: 17px 54px 17px 67px; }
  #preguntas .accordion details p { margin: -2px 24px 20px 67px; }
}

@media (max-width: 470px) {
  #cobertura .coverage-copy .eyebrow::after { width: 43px; height: 43px; }
  #cobertura .zones { gap: 7px; }
  #cobertura .coverage-map { min-height: 300px; }
  #cobertura .map-label { max-width: calc(100% - 32px); }
  #cobertura .coverage-map::after { display: none; }
  #preguntas .section-heading h2 { font-size: clamp(3rem, 17vw, 4.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  #cobertura .coverage-copy .eyebrow::after,
  #preguntas .section-heading::after { animation: none; }
}

/* Release 75 — tarjeta de contacto: giro automático estable, sin parpadeo */
#contacto .contact-business-card {
  isolation: isolate;
  -webkit-perspective: 1450px;
}

#contacto .contact-business-card-inner {
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  animation: contact-card-auto-turn 11s cubic-bezier(.5, 0, .18, 1) infinite;
}

/* El giro ya no depende del foco ni del hover; así no alterna entre reglas. */
#contacto .contact-business-card:focus .contact-business-card-inner,
#contacto .contact-business-card:hover .contact-business-card-inner {
  transform: none;
}

#contacto .contact-business-card-face {
  transform: translateZ(.35px);
  -webkit-transform: translateZ(.35px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#contacto .contact-business-card-face--brand {
  transform: rotateY(180deg) translateZ(.35px);
  -webkit-transform: rotateY(180deg) translateZ(.35px);
}

@keyframes contact-card-auto-turn {
  0%, 31% { transform: rotateY(0deg); }
  41%, 80% { transform: rotateY(180deg); }
  90%, 100% { transform: rotateY(360deg); }
}

/* Release 79 — pie de página blanco, nítido y ligero */
body > footer {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 6vw, 82px) 0 22px;
  border-top: 3px solid #ff6500;
  background: #fff !important;
  color: #101419;
  font-family: "Jost", "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body > footer::before {
  position: absolute;
  top: 0;
  right: -90px;
  width: 310px;
  height: 3px;
  background: #111418;
  content: "";
}

body > footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.45fr) minmax(190px, .7fr) minmax(210px, .75fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: start;
}

body > footer .footer-brand {
  min-width: 0;
  overflow: visible;
}

body > footer .footer-logo {
  position: relative;
  width: min(310px, 100%);
  height: 116px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body > footer .footer-logo img {
  position: absolute;
  top: -74px;
  left: -44px;
  width: 390px;
  height: auto;
  max-width: none;
  margin: 0;
  object-fit: initial;
  filter: none;
  transform: none;
}

body > footer .footer-brand p {
  max-width: 44ch;
  margin: 22px 0 0;
  color: #252b31;
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.65;
}

body > footer .privacy-note {
  display: block;
  max-width: 50ch;
  margin-top: 13px;
  color: #646d75;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.55;
}

body > footer h3 {
  position: relative;
  margin: 8px 0 22px;
  padding-bottom: 12px;
  color: #111418;
  font-family: "Montserrat", "Jost", sans-serif;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

body > footer h3::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 34px;
  height: 2px;
  background: #ff6500;
  content: "";
}

body > footer .footer-grid > div:not(.footer-brand) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

body > footer .footer-grid a,
body > footer .footer-grid span {
  display: block;
  margin: 0 0 9px;
  color: #323940;
  font-size: .97rem;
  font-weight: 550;
  line-height: 1.45;
}

body > footer .footer-grid a {
  position: relative;
  padding-left: 15px;
  transition: color .2s ease, transform .2s ease;
}

body > footer .footer-grid a::before {
  position: absolute;
  top: .58em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff6500;
  content: "";
}

body > footer .footer-grid a:hover {
  color: #c94d00;
  transform: translateX(3px);
}

body > footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(42px, 5vw, 68px);
  padding-top: 19px;
  border-top: 1px solid #cfd4d8;
  color: #4b545c;
  font-size: .78rem;
  font-weight: 600;
}

body > footer .footer-bottom span,
body > footer .footer-bottom a {
  display: inline;
  margin: 0;
  color: inherit;
}

body > footer .footer-bottom a {
  color: #b84400;
  font-weight: 750;
}

body > footer .showcase-admin-upload {
  margin-top: 18px;
  padding: 12px 0 4px;
  border-top: 1px solid #e2e5e8;
  color: #4f5860;
}

body > footer .showcase-admin-upload summary {
  padding: 10px 0;
  color: #5a636b;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}

body > footer .showcase-admin-upload > div {
  border-color: #d9dde0;
  background: #f7f8f9;
  color: #20262b;
  box-shadow: none;
}

body > footer .showcase-admin-upload p { color: #505960; }

@media (max-width: 900px) {
  body > footer .footer-grid {
    grid-template-columns: 1.25fr .75fr;
    gap: 46px 58px;
  }

  body > footer .footer-brand { grid-column: 1 / -1; }
  body > footer .footer-brand p { max-width: 58ch; }
}

@media (max-width: 580px) {
  body > footer { padding-top: 46px; }

  body > footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  body > footer .footer-brand { grid-column: auto; }
  body > footer .footer-logo { width: 270px; height: 106px; }
  body > footer .footer-logo img { top: -65px; left: -38px; width: 345px; }
  body > footer h3 { margin-bottom: 16px; }

  body > footer .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body > footer .footer-grid a { transition: none; }
}

/* Release 80 — preguntas como tarjetas editoriales interactivas */
#preguntas.faq {
  padding-block: clamp(82px, 8vw, 126px);
  background: #fff !important;
}

#preguntas .faq-layout {
  grid-template-columns: minmax(320px, .76fr) minmax(560px, 1.24fr);
  gap: clamp(58px, 7.5vw, 126px);
  align-items: center;
}

#preguntas .section-heading {
  overflow: visible;
  max-width: 500px;
}

#preguntas .section-heading .eyebrow {
  position: relative;
  min-height: 34px;
  margin: 0;
  padding: 0 15px 0 39px;
  border: 1px solid #d9aa87;
  border-radius: 9px;
  background: #fff;
  color: #b64a08;
  box-shadow: 0 7px 16px rgb(68 35 12 / .1);
  font-size: .7rem;
  letter-spacing: .14em;
  white-space: nowrap;
}

#preguntas .section-heading .eyebrow::before {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff8128, #dc4d00);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .65), 0 4px 8px rgb(197 72 0 / .22);
  content: "";
  transform: translateY(-50%);
}

#preguntas .section-heading .eyebrow::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  width: clamp(90px, 18vw, 250px);
  height: 1px;
  background: linear-gradient(90deg, #c9713c, rgb(201 113 60 / .08));
  content: "";
  transform: translateY(-50%);
}

#preguntas .section-heading h2 {
  max-width: 470px;
  margin-top: 25px;
  color: #101419;
  font-size: clamp(3.5rem, 5.7vw, 6rem);
  line-height: .91;
  letter-spacing: -.075em;
}

#preguntas .section-heading::after {
  top: auto;
  right: 2%;
  bottom: -38px;
  width: clamp(64px, 7vw, 96px);
  opacity: .78;
}

#preguntas .accordion {
  display: grid;
  gap: 16px;
  border: 0;
}

#preguntas .accordion details {
  position: relative;
  overflow: hidden;
  border: 1px solid #cbd1d6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 24px rgb(19 27 34 / .12), inset 0 1px 0 #fff;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

#preguntas .accordion details::before { display: none; }

#preguntas .accordion details:hover,
#preguntas .accordion details[open] {
  border-color: rgb(224 91 13 / .55);
  box-shadow: 0 16px 31px rgb(50 29 16 / .16), inset 0 1px 0 #fff;
  transform: translateY(-2px);
}

#preguntas .accordion summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  gap: 18px;
  align-items: center;
  min-height: 82px;
  padding: 15px 22px;
  color: #111418;
  cursor: pointer;
  font-family: "Jost", "Montserrat", sans-serif;
  font-size: clamp(1.03rem, 1.4vw, 1.28rem);
  font-weight: 650;
  line-height: 1.24;
  list-style: none;
}

#preguntas .accordion summary::-webkit-details-marker { display: none; }

#preguntas .accordion summary .faq-item-icon {
  position: static;
  right: auto;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #c95a16;
  font-size: inherit;
  filter: drop-shadow(0 5px 8px rgb(211 83 6 / .16));
  transform: none !important;
  transition: none;
}

#preguntas .accordion summary .faq-item-icon::after { content: none; }

#preguntas .accordion summary .faq-item-icon svg {
  width: 42px;
  height: 42px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

#preguntas .accordion summary .faq-question {
  position: static;
  right: auto;
  width: auto;
  height: auto;
  min-width: 0;
  color: #111418;
  font-size: inherit;
  transform: none !important;
  transition: none;
}

#preguntas .accordion summary .faq-question::after { content: none; }

#preguntas .accordion summary .faq-chevron {
  position: relative;
  right: auto;
  width: 24px;
  height: 24px;
  color: transparent;
  font-size: 0;
  transform: none;
  transition: transform .24s ease, filter .24s ease;
}

#preguntas .accordion summary .faq-chevron::after {
  position: absolute;
  inset: 2px;
  border-right: 2.5px solid #111418;
  border-bottom: 2.5px solid #111418;
  content: "";
  transform: rotate(45deg) scale(.62);
}

#preguntas .accordion details[open] summary .faq-chevron {
  filter: drop-shadow(0 0 6px rgb(255 101 0 / .55));
  transform: rotate(180deg);
}

#preguntas .accordion details[open] summary .faq-chevron::after {
  border-color: #e45c08;
}

#preguntas .accordion details p {
  max-width: none;
  margin: -3px 68px 22px 88px;
  padding-top: 14px;
  border-top: 1px solid #e1e4e7;
  color: #4b545d;
  font-size: .94rem;
  line-height: 1.58;
}

@media (max-width: 900px) {
  #preguntas .faq-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  #preguntas .section-heading,
  #preguntas .section-heading h2 { max-width: 690px; }
  #preguntas .section-heading::after { right: 4%; bottom: -22px; }
  #preguntas .section-heading .eyebrow::after { width: clamp(80px, 34vw, 260px); }
}

@media (max-width: 600px) {
  #preguntas.faq { padding-block: 64px; }
  #preguntas .section-heading h2 { font-size: clamp(3.05rem, 16vw, 4.35rem); }
  #preguntas .section-heading::after { display: none; }
  #preguntas .section-heading .eyebrow::after { width: 70px; }
  #preguntas .accordion { gap: 12px; }

  #preguntas .accordion summary {
    grid-template-columns: 40px minmax(0, 1fr) 22px;
    gap: 13px;
    min-height: 76px;
    padding: 13px 15px;
    font-size: .98rem;
  }

  #preguntas .accordion summary .faq-item-icon { width: 40px; height: 40px; }
  #preguntas .accordion summary .faq-item-icon svg { width: 36px; height: 36px; }
  #preguntas .accordion details p { margin: 0 50px 19px 68px; padding-top: 12px; font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  #preguntas .accordion details,
  #preguntas .accordion summary .faq-chevron { transition: none; }
}

/* Release 83 — giro de tarjeta centrado y sin inclinación residual */
#contacto .contact-business-card,
#contacto .contact-business-card:hover,
#contacto .contact-business-card:focus {
  perspective: 1600px;
  -webkit-perspective: 1600px;
  transform: none !important;
  transform-origin: 50% 50%;
}

#contacto .contact-business-card-inner {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: contact-card-centered-turn 11s cubic-bezier(.55, 0, .2, 1) infinite;
}

#contacto .contact-business-card:hover .contact-business-card-inner,
#contacto .contact-business-card:focus .contact-business-card-inner {
  animation-play-state: running;
}

#contacto .contact-business-card-face {
  inset: 0;
  transform: translateZ(.5px);
  -webkit-transform: translateZ(.5px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#contacto .contact-business-card-face--brand {
  transform: rotateY(180deg) translateZ(.5px);
  -webkit-transform: rotateY(180deg) translateZ(.5px);
}

@keyframes contact-card-centered-turn {
  0%, 34% { transform: rotateY(0deg); }
  44%, 82% { transform: rotateY(180deg); }
  92%, 100% { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #contacto .contact-business-card-inner {
    animation: none;
    transform: rotateY(0deg);
  }
}

/* Release 85 — giro 3D controlado, automático y activable con clic */
#contacto .contact-business-card {
  perspective: 1600px !important;
  -webkit-perspective: 1600px !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  cursor: pointer;
}

#contacto .contact-business-card-inner,
#contacto .contact-business-card:hover .contact-business-card-inner,
#contacto .contact-business-card:focus .contact-business-card-inner {
  animation: none !important;
  transform: rotateY(0deg) !important;
  transform-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  transition: transform .9s cubic-bezier(.2, .72, .18, 1) !important;
  will-change: transform;
}

#contacto .contact-business-card.is-flipped .contact-business-card-inner,
#contacto .contact-business-card.is-flipped:hover .contact-business-card-inner,
#contacto .contact-business-card.is-flipped:focus .contact-business-card-inner {
  transform: rotateY(180deg) !important;
}

#contacto .contact-business-card-face {
  transform: rotateY(0deg) translateZ(1px) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

#contacto .contact-business-card-face--brand {
  transform: rotateY(180deg) translateZ(1px) !important;
}

@media (prefers-reduced-motion: reduce) {
  #contacto .contact-business-card-inner,
  #contacto .contact-business-card:hover .contact-business-card-inner,
  #contacto .contact-business-card:focus .contact-business-card-inner {
    transition-duration: .9s !important;
  }
}

/* Release 86 — signo 3D integrado sin invadir el titular */
#preguntas .faq-layout {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

#preguntas .section-heading::after {
  display: none !important;
}

#preguntas .faq-layout::before {
  position: absolute;
  z-index: 0;
  top: clamp(8px, 2.4vw, 30px);
  left: clamp(300px, 30vw, 390px);
  width: clamp(46px, 4.2vw, 62px);
  aspect-ratio: 1;
  background: url("assets/pregunta-3d.png") center / contain no-repeat;
  content: "";
  opacity: .82;
  pointer-events: none;
  transform: rotate(8deg);
  filter: drop-shadow(0 14px 18px rgb(255 101 0 / .16));
}

#preguntas .section-heading,
#preguntas .accordion {
  position: relative;
  z-index: 1;
}

@media (max-width: 1180px) {
  #preguntas .faq-layout::before {
    top: -6px;
    right: clamp(18px, 5vw, 54px);
    left: auto;
    width: clamp(48px, 7vw, 64px);
    opacity: .66;
  }
}

@media (max-width: 760px) {
  #preguntas .faq-layout::before {
    display: none;
  }
}

/* Release 87 — proceso claro, minimalista y premium */
#proceso .process-grid {
  align-items: stretch;
}

#proceso .process-card,
#proceso .process-card-inner {
  height: 338px !important;
  min-height: 338px !important;
}

#proceso .process-card,
#proceso .process-card:nth-child(2),
#proceso .process-card:nth-child(4) {
  outline: 0 !important;
  box-shadow: none !important;
}

#proceso .process-card::before,
#proceso .process-card:nth-child(2)::before,
#proceso .process-card:nth-child(4)::before {
  border: 0 !important;
  box-shadow: none !important;
}

#proceso .process-card-face {
  padding: 24px 26px !important;
}

#proceso .process-card-front {
  overflow: hidden;
  color: #121820 !important;
  border: 1px solid rgb(18 24 32 / .14) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 83% 18%, rgb(255 106 0 / .095), transparent 34%),
    radial-gradient(circle at 15% 8%, rgb(255 255 255 / .82), transparent 35%),
    linear-gradient(145deg, rgb(255 255 255 / .92), rgb(248 250 252 / .76)) !important;
  box-shadow:
    0 20px 45px -32px rgb(12 18 25 / .34),
    inset 0 1px 0 rgb(255 255 255 / .96),
    inset 0 -1px 0 rgb(18 24 32 / .045) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

#proceso .process-card-front::before {
  height: 3px !important;
  background: linear-gradient(90deg, rgb(255 101 0 / .9), rgb(255 184 91 / .35), transparent 78%) !important;
  box-shadow: 0 5px 18px rgb(255 101 0 / .14) !important;
}

#proceso .process-card-front::after {
  right: -70px !important;
  bottom: -82px !important;
  width: 182px !important;
  height: 182px !important;
  border-color: rgb(255 101 0 / .1) !important;
  box-shadow: 0 0 0 28px rgb(255 101 0 / .035) !important;
}

#proceso .process-index {
  font-size: clamp(2.72rem, 3.45vw, 3.9rem) !important;
  color: transparent !important;
  background: linear-gradient(135deg, #ff7a18 0%, #ff9c42 48%, #cf4a00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 10px 22px rgb(255 101 0 / .16) !important;
}

#proceso .process-illustration {
  width: 102px !important;
  height: 82px !important;
  margin: 14px 0 18px !important;
  color: #f46b12 !important;
  filter:
    drop-shadow(0 1px 0 rgb(255 222 178 / .68))
    drop-shadow(0 7px 14px rgb(255 101 0 / .18)) !important;
}

#proceso .execution-tools {
  width: 116px !important;
}

#proceso .process-illustration::before {
  background: radial-gradient(circle, rgb(255 101 0 / .12), transparent 70%) !important;
  filter: blur(8px) !important;
}

#proceso .process-card-front h3 {
  margin-top: auto !important;
  color: #111820 !important;
  font-size: clamp(1.45rem, 1.85vw, 1.82rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.06em !important;
  text-shadow: none !important;
}

#proceso .process-card-front p {
  max-width: 28ch !important;
  color: rgb(17 24 32 / .68) !important;
  font-size: clamp(.82rem, .9vw, .91rem) !important;
  font-weight: 600 !important;
  line-height: 1.48 !important;
}

#proceso .process-grid::after {
  top: 38px !important;
  left: 20% !important;
  width: 60% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgb(255 101 0 / .2), transparent) !important;
  box-shadow: none !important;
  opacity: .8 !important;
}

#proceso .process-card:hover .process-card-front {
  border-color: rgb(255 101 0 / .34) !important;
  box-shadow:
    0 24px 50px -30px rgb(255 101 0 / .28),
    0 20px 44px -34px rgb(12 18 25 / .35),
    inset 0 1px 0 rgb(255 255 255 / .98) !important;
  transform: translateY(-4px);
}

@media (max-width: 900px) {
  #proceso .process-card,
  #proceso .process-card-inner {
    height: 318px !important;
    min-height: 318px !important;
  }
}

@media (max-width: 640px) {
  #proceso .process-card,
  #proceso .process-card-inner {
    height: 305px !important;
    min-height: 305px !important;
  }
}

/* Release 88 — tarjeta de contacto FRANTEK+ nítida y de un solo número */
#contacto .contact-panel {
  align-items: center !important;
}

#contacto .contact-business-card {
  width: min(100%, 650px) !important;
  aspect-ratio: 1100 / 520 !important;
  border: 0 !important;
  border-radius: 32px !important;
  background: transparent !important;
  box-shadow:
    0 34px 80px -44px rgb(255 101 0 / .5),
    0 18px 50px -42px rgb(0 0 0 / .9) !important;
  transform: none !important;
}

#contacto .contact-business-card::before {
  inset: 8% 4% -8% 4% !important;
  border-radius: 34px !important;
  background: radial-gradient(circle at 50% 38%, rgb(255 101 0 / .18), transparent 58%) !important;
  opacity: .7 !important;
  filter: blur(18px) !important;
}

#contacto .contact-business-card-inner {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  transform: none;
}

#contacto .contact-business-card-face {
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#contacto .contact-business-card-face::after {
  display: none !important;
}

#contacto .contact-business-card-face img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  filter: none !important;
}

#contacto .contact-actions {
  width: min(100%, 650px) !important;
  justify-self: end !important;
}

@media (max-width: 980px) {
  #contacto .contact-business-card,
  #contacto .contact-actions {
    justify-self: center !important;
  }
}