:root {
  color-scheme: light;
  --ink: #15181b;
  --ink-soft: #3f474d;
  --muted: #667078;
  --line: #dfe5e6;
  --paper: #f8f8f6;
  --paper-strong: #ffffff;
  --surface: #ffffff;
  --dark: #0b1d36;
  --dark-2: #153b68;
  --dark-3: #20242a;
  --brand-ink: #070809;
  --brand-graphite: #20242a;
  --brand-steel: #69717c;
  --brand-silver: #a7acb3;
  --brand-chrome: #e6e8eb;
  --navy-deep: #0b1d36;
  --navy: #153b68;
  --blue: #244f82;
  --red: #8d2432;
  --red-dark: #641722;
  --warm-white: #f8f8f6;
  --danger: #b23b3b;
  --shadow: 0 18px 45px rgba(11, 29, 54, 0.16);
  --radius: 8px;
  --max: 1180px;
  --header: 76px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
}

body.is-panel-open {
  overflow: hidden;
}

body,
button,
input,
select,
textarea {
  font: inherit;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a,
input,
select,
textarea,
summary {
  outline-offset: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(141, 36, 50, 0.78);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.05;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  max-width: 17ch;
  margin-bottom: 1.2rem;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.65rem);
  max-width: 24ch;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

p {
  color: var(--ink-soft);
}

.container {
  width: min(100% - 32px, var(--max));
  margin-inline: auto;
}

.section {
  padding: 84px 0;
}

section[id] {
  scroll-margin-top: calc(var(--header) + 16px);
}

.section-tight {
  padding: 68px 0;
}

.section-dark {
  color: #fff;
  background: var(--dark);
}

.section-dark p,
.section-dark dd,
.section-dark li {
  color: rgba(255, 255, 255, 0.78);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 40px;
}

.section-heading.compact {
  max-width: 760px;
}

.section-heading p {
  max-width: 680px;
  margin-bottom: 0;
}

.eyebrow {
  margin-bottom: 0.85rem;
  color: var(--red);
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-dark .eyebrow {
  color: #f1c7cf;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-150%);
  padding: 10px 14px;
  color: #fff;
  background: var(--red-dark);
  border-radius: var(--radius);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 520ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn-primary {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

.btn-primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

.btn-secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.26);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}

.btn-quiet {
  color: inherit;
  background: transparent;
  border-color: currentColor;
}

.topbar {
  position: relative;
  z-index: 201;
  color: rgba(255, 255, 255, 0.86);
  background: #14181d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.84rem;
}

.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  min-height: 46px;
  padding-block: 6px;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.86);
  transition: color 160ms ease;
}

.topbar-item:hover {
  color: #fff;
}

.topbar-item svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.topbar-item.is-address svg {
  color: var(--red);
}

.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.topbar-social {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease;
}

.topbar-social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.topbar-social:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.topbar-chat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 18px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  font-weight: 750;
  transition: background 160ms ease, border-color 160ms ease;
}

.topbar-chat:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.topbar-chat svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

@media (max-width: 900px) {
  .topbar-inner {
    justify-content: center;
    gap: 8px 16px;
    font-size: 0.78rem;
  }

  .topbar-item.is-email,
  .topbar-item.is-address {
    display: none;
  }

  .topbar-actions {
    margin-left: 0;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  min-height: var(--header);
  color: #fff;
  background: rgba(32, 36, 42, 0.9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header.is-scrolled {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.header-inner {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 24px;
  align-items: center;
  min-height: var(--header);
}

.brand img {
  width: 150px;
  height: auto;
}

.main-nav {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: center;
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.82);
}

.main-nav a {
  position: relative;
  padding: 9px 0;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--red);
  transition: transform 180ms ease;
}

.main-nav a:hover {
  color: #fff;
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 0.93rem;
  cursor: pointer;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.is-active-group {
  color: #fff;
}

.nav-dropdown-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
}

.nav-dropdown.is-open .nav-dropdown-caret {
  transform: rotate(225deg) translateY(2px);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 8px;
  background: rgba(18, 20, 23, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  padding: 10px 12px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.82);
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 640ms ease, transform 640ms ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-on-scroll:nth-child(2) {
  transition-delay: 80ms;
}

.reveal-on-scroll:nth-child(3) {
  transition-delay: 140ms;
}

.reveal-on-scroll:nth-child(4) {
  transition-delay: 190ms;
}

@keyframes diagnosticPulse {
  0%,
  100% {
    box-shadow: 0 0 0 6px rgba(141, 36, 50, 0.18);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(141, 36, 50, 0.04);
  }
}

.header-cta {
  min-height: 42px;
  padding: 10px 14px;
  color: #fff;
  background: var(--red);
  border-radius: var(--radius);
  font-weight: 800;
}

.header-cta:hover {
  background: var(--red-dark);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background: transparent;
}

.nav-toggle-line {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: #fff;
}

.hero {
  position: relative;
  min-height: calc(100svh - var(--header));
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: center;
  padding: 86px 0 56px;
}

.subpage-hero {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: center;
  padding: 92px 0 72px;
}

.subpage-hero.is-compact {
  min-height: 0;
  padding: 40px 0 44px;
}

.subpage-media,
.subpage-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.subpage-media img,
.subpage-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  background: var(--navy-deep);
}

/* Misma técnica que .bg-fixed para el encabezado con foto. */
.subpage-hero.has-photo {
  clip-path: inset(0);
}

.subpage-media.has-fixed-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
}

.subpage-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 29, 54, 0.98), rgba(11, 29, 54, 0.78) 55%, rgba(32, 36, 42, 0.32)),
    linear-gradient(0deg, rgba(11, 29, 54, 0.72), rgba(11, 29, 54, 0.12));
}

/* When the hero shows a real photo, the shade only needs to protect the text
   on the left; keep the right side open so the photo stays recognizable. */
.subpage-hero.has-photo .subpage-shade {
  background:
    linear-gradient(90deg, rgba(11, 29, 54, 0.9) 0%, rgba(11, 29, 54, 0.66) 45%, rgba(11, 29, 54, 0.34) 100%),
    linear-gradient(0deg, rgba(11, 29, 54, 0.42), rgba(11, 29, 54, 0.12));
}

/* Flat gradient hero with no photo at all. */
.subpage-hero.is-plain .subpage-shade {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--blue) 100%);
}

/* Parallax de fondo fijo: la foto no se mueve, la sección se desliza encima.
   No usamos `background-attachment: fixed` porque iOS/Safari móvil lo ignora.
   En su lugar, una capa `position: fixed` recortada por `clip-path` del padre
   (clip-path convierte a la sección en bloque contenedor de sus hijos fixed),
   lo que sí funciona en escritorio y en teléfono. */
.bg-fixed {
  position: relative;
  clip-path: inset(0);
  background-color: var(--dark);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-image llega por style inline en cada sección */
}

.bg-fixed::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: inherit;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-fixed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 29, 54, 0.58), rgba(11, 29, 54, 0.62));
}

.bg-fixed > .container {
  position: relative;
  z-index: 1;
}

/* `clip-path` recorta con antialiasing y entre dos secciones contiguas puede
   quedar una costura de menos de 1px por la que se asoma el fondo claro del
   body, viéndose como una línea. Se solapan 1px para taparla. */
.bg-fixed + .bg-fixed,
.bg-fixed + .video-fixed,
.video-fixed + .bg-fixed,
.bg-fixed + .section-dark,
.section-dark + .bg-fixed {
  margin-top: -1px;
}

/* The intake form sits in its own card on the right, so the left half
   carries the text and needs more cover than the right. */
.diagnostic-console.bg-fixed::after {
  background: linear-gradient(90deg, rgba(11, 29, 54, 0.86) 0%, rgba(11, 29, 54, 0.62) 55%, rgba(32, 36, 42, 0.48) 100%);
}

/* Full-bleed banner with centered text needs an even wash for legibility. */
.feature-banner.bg-fixed::after {
  background: linear-gradient(180deg, rgba(11, 29, 54, 0.66), rgba(11, 29, 54, 0.7));
}

.reviews-section.bg-fixed::after {
  background: linear-gradient(180deg, rgba(11, 29, 54, 0.7), rgba(11, 29, 54, 0.74));
}

/* A <video> can't use background-attachment, so it gets the same "stays put"
   effect via a fixed-position layer clipped to the section (clip-path makes the
   section the containing block for its fixed descendants). */
.video-fixed {
  position: relative;
  overflow: hidden;
  clip-path: inset(0);
  background-color: var(--dark);
}

.video-fixed-media {
  position: fixed;
  inset: 0;
  z-index: -1;
}

.video-fixed-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-fixed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 29, 54, 0.62), rgba(11, 29, 54, 0.66));
}

.video-fixed > .container {
  position: relative;
  z-index: 1;
}


/* Estas secciones declaran su propio `background:` (shorthand) más abajo, que
   reinicia el color de fondo. La capa ::before ya trae sus propios valores de
   tamaño/posición, así que aquí solo aseguramos el color base. */
.diagnostic-console.bg-fixed,
.transmission-feature.bg-fixed,
.reviews-section.bg-fixed,
.contact.bg-fixed {
  background-color: var(--dark);
}


/* Tienda: la foto cubre toda la página y queda fija mientras se hace scroll. */
.page-tienda {
  color: #fff;
  background-color: var(--navy-deep);
}

.page-tienda::before,
.page-tienda::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.page-tienda::before {
  z-index: -2;
  background: url("../img/photo-diagnostico.jpg") center / cover no-repeat;
}

.page-tienda::after {
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 29, 54, 0.84), rgba(11, 29, 54, 0.9));
}

.page-tienda .section,
.page-tienda .services,
.page-tienda .branches,
.page-tienda .subpage-hero {
  background: transparent;
}

.page-tienda .subpage-media {
  display: none;
}

.page-tienda .subpage-shade {
  background: linear-gradient(180deg, rgba(11, 29, 54, 0.32), rgba(11, 29, 54, 0.12));
}

.page-tienda .section-heading h2,
.page-tienda .section-heading h3 {
  color: #fff;
}

.page-tienda .section-heading p {
  color: rgba(255, 255, 255, 0.8);
}

/* Las tarjetas conservan su fondo claro, así que su texto debe seguir siendo
   oscuro: sin esto el h3 heredaba el blanco de la página y desaparecía. */
.page-tienda .catalog-card,
.page-tienda .service-card {
  color: var(--ink);
}

.page-tienda .catalog-card h3,
.page-tienda .service-card h3 {
  color: var(--ink);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 750;
}

.breadcrumbs a {
  color: #fff;
}

.section-footer-action,
.feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 160px;
  z-index: -1;
  background: linear-gradient(0deg, rgba(18, 20, 23, 1), rgba(18, 20, 23, 0));
}

.hero-video,
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.hero-video {
  object-fit: cover;
  opacity: 0.34;
  filter: saturate(0.82) brightness(1.03);
  background: url("../img/taller-back-about.webp") center / cover;
}

.hero-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15, 26, 42, 0.94) 0%, rgba(15, 26, 42, 0.74) 46%, rgba(32, 36, 42, 0.36) 100%),
    linear-gradient(0deg, rgba(15, 26, 42, 0.78), rgba(18, 20, 23, 0.08));
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}

.hero-lede {
  max-width: 690px;
  margin-bottom: 2rem;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-panel {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(18, 20, 23, 0.7);
  box-shadow: var(--shadow);
}

.status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #f1c7cf;
  font-weight: 800;
}

.status-line span {
  width: 9px;
  height: 9px;
  background: var(--red);
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(141, 36, 50, 0.18);
  animation: diagnosticPulse 2.8s ease-in-out infinite;
}

.hero-facts {
  margin: 0;
}

.hero-facts div {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-facts dt {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.hero-facts dd {
  margin: 0;
  color: #fff;
  font-weight: 750;
}

.quick-contact {
  position: relative;
  z-index: 5;
  margin-top: -28px;
}

.quick-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.quick-contact a {
  padding: 20px;
  color: #fff;
  background: var(--dark-2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-contact a:last-child {
  border-right: 0;
}

.quick-contact strong,
.quick-contact span {
  display: block;
}

.quick-contact span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
}

.diagnostic-console {
  position: relative;
  z-index: 4;
  padding: 54px 0 22px;
  background:
    linear-gradient(90deg, rgba(11, 29, 54, 0.95), rgba(32, 36, 42, 0.92)),
    var(--navy-deep);
}

.console-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(320px, 1.1fr);
  gap: 28px;
  align-items: center;
}

.console-copy h2,
.console-copy p {
  color: #fff;
}

.console-copy p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
}

.console-form {
  padding: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
}

.console-form label {
  color: #fff;
}

.console-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(300px, 1fr);
  gap: 40px;
}

.problem-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.problem-chip {
  min-height: 42px;
  padding: 8px 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.problem-chip.is-active,
.problem-chip:hover {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
}

.problem-result {
  min-height: 360px;
  padding: 30px;
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.problem-result p {
  color: rgba(255, 255, 255, 0.76);
}

.result-kicker,
.service-source,
.branch-source {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--brand-steel);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.problem-result .result-kicker {
  color: #f1c7cf;
}

.signal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.signal-list span {
  padding: 7px 10px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
}

.caution {
  padding-left: 14px;
  border-left: 3px solid var(--red);
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.services {
  background: var(--surface);
}

.shop-preview {
  background: var(--paper);
}

.services-grid {
  display: grid;
  gap: 18px;
}

.services-grid.is-compact {
  grid-template-columns: repeat(3, 1fr);
}

.service-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: 290px;
  background: var(--paper-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.service-card:hover,
.route-card:hover,
.branch-card:hover {
  transform: translateY(-3px);
  border-color: rgba(141, 36, 50, 0.28);
  box-shadow: 0 20px 48px rgba(11, 29, 54, 0.16);
}

.service-card-compact {
  grid-template-columns: 1fr;
  min-height: auto;
}

.service-card-compact .service-card-media {
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  background: var(--navy-deep);
}

.service-card-media .service-photo {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  opacity: 0.94;
  transition: transform 420ms ease, opacity 420ms ease;
}

.service-card:hover .service-photo {
  transform: scale(1.04);
  opacity: 1;
}

.service-icon-badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 58px;
  height: 58px;
  padding: 10px;
  object-fit: contain;
  background: rgba(248, 248, 246, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: var(--radius);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
}

.service-card-media .service-icon-badge {
  width: 54px;
  height: 54px;
  min-height: 0;
  padding: 9px;
  object-fit: contain;
}

.catalog-card.is-product .service-icon-badge {
  right: 12px;
  bottom: 12px;
  width: 46px;
  height: 46px;
  padding: 8px;
  opacity: 0.9;
}

.service-card-compact .service-card-copy {
  padding: 22px;
}

.service-card-media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 30px;
  background:
    linear-gradient(135deg, rgba(21, 59, 104, 0.08), rgba(141, 36, 50, 0.08)),
    var(--surface);
}

.service-card-media img {
  width: 126px;
  height: 126px;
  object-fit: contain;
}

.service-card-media span {
  position: absolute;
  left: 18px;
  bottom: 14px;
  padding: 5px 9px;
  color: var(--navy);
  background: rgba(248, 248, 246, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
}

.service-card-copy {
  padding: 26px;
}

.service-card-copy p {
  max-width: 900px;
}

.service-card dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0;
}

.service-card dt {
  margin-bottom: 4px;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.service-card dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.service-actions .btn {
  width: 100%;
  max-width: 260px;
}

.service-detail-grid,
.route-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.route-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-card {
  min-height: 100%;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.route-card-media {
  position: relative;
  margin: -24px -24px 20px;
  overflow: hidden;
  background: var(--navy-deep);
}

.route-card-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 420ms ease;
}

.route-card:hover .route-card-photo {
  transform: scale(1.04);
}

.route-card-icon {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 58px;
  height: 58px;
  padding: 10px;
  object-fit: contain;
  background: rgba(248, 248, 246, 0.94);
  border-radius: var(--radius);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
}

.route-card > img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin-bottom: 18px;
}

.route-card a {
  color: var(--red-dark);
  font-weight: 850;
}

.media-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.media-frame img,
.media-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.media-frame-wide {
  aspect-ratio: 16 / 9;
}

.media-frame-wide img,
.media-frame-wide video {
  height: 100%;
  aspect-ratio: auto;
}

.dark-text li {
  color: var(--ink-soft);
}

.transmission-feature {
  background:
    linear-gradient(90deg, rgba(18, 20, 23, 0.98), rgba(18, 20, 23, 0.9)),
    var(--dark);
}

.feature-banner {
  padding: 120px 0;
}

.feature-centered {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.feature-centered .feature-actions {
  justify-content: center;
}

.transmission-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 0.9fr);
  gap: 36px;
  align-items: center;
}

.transmission-video-section {
  background:
    linear-gradient(120deg, rgba(11, 29, 54, 0.98), rgba(18, 20, 23, 0.92)),
    var(--dark);
}

.transmission-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1.14fr);
  gap: 32px;
  align-items: center;
}

.transmission-video-copy p {
  max-width: 720px;
}

.transmission-info-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.transmission-info-list div {
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
}

.transmission-info-list strong,
.transmission-info-list span {
  display: block;
}

.transmission-info-list strong {
  color: #fff;
}

.transmission-info-list span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.76);
}

.transmission-video-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: var(--navy-deep);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
}

.transmission-video-frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.transmission-video-frame figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(11, 29, 54, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 750;
}

.check-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 26px 0 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 26px;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  background: var(--red);
  border-radius: 999px;
}

.mini-form,
.lead-form {
  padding: 26px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.mini-form {
  grid-column: 1 / -1;
}

.mini-form h3,
.lead-form h3,
.mini-form label,
.lead-form label {
  color: #fff;
}

.mini-form .form-note,
.lead-form .form-status,
.mini-form .checkbox-field span,
.lead-form .checkbox-field span {
  color: rgba(255, 255, 255, 0.82);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  color: var(--ink);
  font-weight: 750;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd8da;
  border-radius: var(--radius);
}

textarea {
  resize: vertical;
}

[aria-invalid="true"] {
  border-color: var(--danger);
}

.field-error,
.form-status,
.form-note {
  min-height: 1.25em;
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 650;
}

.form-status,
.form-note {
  margin-bottom: 0;
}

.checkbox-field {
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-weight: 600;
}

.checkbox-field input {
  width: 18px;
  min-height: auto;
  margin-top: 4px;
}

.hp-field {
  position: absolute;
  left: -9999px;
}

.process {
  background: var(--paper);
}

.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 0;
  margin: 36px 0 0;
  list-style: none;
}

.process-list li {
  min-height: 230px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.process-list span {
  display: block;
  margin-bottom: 34px;
  color: var(--red);
  font-weight: 900;
}

.trust {
  background: var(--surface);
}

.trust-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1fr);
  gap: 36px;
}

.trust-points {
  display: grid;
  gap: 12px;
}

.trust-points div {
  padding: 20px;
  background: var(--paper-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.trust-points strong,
.trust-points span {
  display: block;
}

.trust-points span {
  margin-top: 4px;
  color: var(--ink-soft);
}

.brand-strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}

.brand-logo {
  display: grid;
  place-items: center;
  min-height: 104px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.brand-logo img {
  width: 74px;
  height: 74px;
  object-fit: contain;
}

.branches {
  background: var(--surface);
}

.branch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.branch-card {
  position: relative;
  padding: 30px 28px;
  color: var(--ink);
  background: var(--paper-strong);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(11, 29, 54, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.branch-card::before {
  content: "";
  position: absolute;
  top: 30px;
  right: 28px;
  width: 9px;
  height: 9px;
  background: var(--red);
  border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(141, 36, 50, 0.14);
}

.branch-card h3 {
  padding-right: 24px;
  color: var(--ink);
}

.branch-card li strong {
  color: var(--ink);
}

.branch-card > p,
.branch-card li {
  color: var(--muted);
}

.branch-card li a {
  color: var(--navy);
  font-weight: 750;
}

.branch-note {
  color: var(--muted);
  font-size: 0.94rem;
}

.branch-card ul {
  display: grid;
  gap: 9px;
  padding: 16px 0 0;
  margin: 20px 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.branch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.branch-actions .btn-secondary {
  color: var(--ink);
  border-color: var(--line);
}

.branch-map {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.branch-map iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
}

.reviews-section {
  color: #fff;
  background: linear-gradient(160deg, var(--dark-2), var(--navy-deep));
}

.reviews-section .section-heading {
  margin-inline: auto;
  text-align: center;
}

.reviews-section .section-heading h2 {
  margin-inline: auto;
}

.reviews-summary {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0 auto 36px;
  text-align: center;
}

.reviews-kicker {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stars {
  color: #fbbc05;
  font-size: 1.25rem;
  letter-spacing: 2px;
}

.reviews-count {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.google-wordmark {
  width: 92px;
  height: auto;
  margin-top: 6px;
}

.reviews-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

.reviews-nav {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease;
}

.reviews-nav:hover {
  background: rgba(255, 255, 255, 0.18);
}

.reviews-track {
  display: flex;
  gap: 18px;
  padding-bottom: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.reviews-track::-webkit-scrollbar {
  display: none;
}

.review-card {
  flex: 0 0 min(340px, 84vw);
  padding: 22px;
  color: var(--ink);
  background: var(--paper-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  scroll-snap-align: start;
}

.review-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.review-avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  background: var(--navy);
  border-radius: 999px;
}

.review-card-identity {
  flex: 1;
  min-width: 0;
}

.review-name {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.review-time {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.google-g {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.review-card .stars {
  display: block;
  margin-bottom: 10px;
  font-size: 1rem;
}

.review-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (max-width: 520px) {
  .reviews-nav {
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
  }
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(300px, 1.1fr);
  gap: 42px;
}

.accordion {
  display: grid;
  gap: 10px;
}

details {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

summary {
  cursor: pointer;
  padding: 18px 20px;
  color: var(--ink) !important;
  font-weight: 850;
}

details p {
  padding: 0 20px 18px;
  margin: 0;
  color: var(--ink-soft) !important;
}

.section-dark details {
  color: var(--ink) !important;
  background: var(--paper-strong);
  border-color: rgba(255, 255, 255, 0.18);
}

.section-dark details p {
  color: var(--ink-soft) !important;
}

.contact {
  background:
    linear-gradient(180deg, rgba(18, 20, 23, 0.97), rgba(18, 20, 23, 1)),
    var(--dark);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(320px, 1fr);
  gap: 42px;
  align-items: start;
}

.contact-options {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.contact-options a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.contact-options a:hover {
  transform: translateX(2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.24);
}

.contact-options strong {
  color: #fff;
}

.contact-options span {
  color: rgba(255, 255, 255, 0.72);
}

.site-footer {
  padding: 42px 0 92px;
  color: #fff;
  background: #080a0c;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
}

.footer-grid img {
  width: 148px;
  height: auto;
  margin-bottom: 12px;
}

.footer-grid p,
.footer-grid a {
  display: block;
  color: rgba(255, 255, 255, 0.72);
}

.footer-grid h2 {
  margin-bottom: 12px;
  font-size: 1rem;
}

.footer-credit {
  margin: 30px auto 0;
  padding-top: 18px;
  max-width: var(--container);
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.82rem;
  text-align: center;
}

.footer-credit a {
  color: #d8c69d;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mobile-action-bar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 180;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  background: rgba(18, 20, 23, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  backdrop-filter: blur(16px);
}

.mobile-action-bar a,
.mobile-action-bar button {
  min-height: 44px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  font-weight: 800;
  text-align: center;
}

.whatsapp-float {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: #fff;
  background: #25d366;
  border-radius: 999px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

body:not(.is-scrolled-actions) .whatsapp-float,
body:not(.is-scrolled-actions) .chatbot.is-closed .chat-launcher {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
}

.chatbot {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 220;
}

.chat-launcher {
  display: none;
  min-height: 52px;
  padding: 0 18px;
  color: #fff;
  background: var(--red);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-weight: 900;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

.chat-window {
  width: min(380px, calc(100vw - 28px));
  height: min(620px, calc(100svh - 36px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.chatbot.is-closed .chat-window {
  display: none;
}

.chatbot.is-closed .chat-launcher,
.chatbot.is-minimized .chat-launcher {
  display: inline-flex;
  align-items: center;
}

.chatbot.is-minimized .chat-window {
  display: none;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  color: #fff;
  background: var(--navy-deep);
}

.chat-header p {
  margin-bottom: 2px;
  color: #fff;
  font-weight: 900;
}

.chat-header span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
}

.chat-controls {
  display: flex;
  gap: 5px;
}

.chat-controls button {
  min-height: 32px;
  padding: 4px 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
}

.chat-messages {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
  background: #f3f6f5;
}

.chat-message {
  max-width: 88%;
  padding: 10px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
}

.chat-message p {
  margin-bottom: 0;
  white-space: pre-line;
}

.chat-message.from-user {
  justify-self: end;
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
}

.chat-message.from-user p {
  color: #fff;
}

.chat-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chat-replies button {
  min-height: 34px;
  padding: 5px 9px;
  color: var(--navy-deep);
  background: #f3f5f8;
  border: 1px solid rgba(21, 59, 104, 0.22);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 750;
}

.chat-input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
}

.chat-input input {
  min-height: 42px;
}

.chat-input button {
  min-height: 42px;
  padding: 0 13px;
  color: #fff;
  background: var(--red);
  border: 0;
  border-radius: var(--radius);
  font-weight: 900;
}

@media (max-width: 1040px) {
  .header-inner {
    grid-template-columns: 140px auto 1fr;
  }

  .header-cta {
    display: none;
  }

  .main-nav {
    justify-content: end;
    gap: 14px;
  }

  .hero-grid,
  .two-column,
  .console-grid,
  .transmission-grid,
  .trust-grid,
  .faq-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    max-width: 560px;
  }

  .process-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid.is-compact,
  .route-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 820px) {
  :root {
    --header: 68px;
  }

  html {
    scroll-padding-top: var(--header);
  }

  body {
    padding-bottom: 76px;
  }

  .section {
    padding: 60px 0;
  }

  .section-tight {
    padding: 54px 0;
  }

  .section-heading {
    display: block;
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .nav-toggle {
    display: block;
    flex-shrink: 0;
    order: 3;
  }

  .header-actions {
    order: 2;
    margin-left: auto;
  }

  .header-cta {
    display: none;
  }

  .main-nav {
    position: absolute;
    top: var(--header);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 18px;
    background: rgba(18, 20, 23, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav a {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
  }

  .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
  }

  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: 0;
    padding: 6px 0 0 10px;
    display: none;
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    display: flex;
  }

  .hero {
    min-height: auto;
    padding: 64px 0 48px;
  }

  .hero-video {
    background-position: center;
  }

  h1 {
    max-width: 15ch;
  }

  h2 {
    max-width: 20ch;
  }

  .quick-contact {
    margin-top: 0;
  }

  .quick-contact-grid,
  .console-grid,
  .service-card,
  .service-card dl,
  .services-grid.is-compact,
  .service-detail-grid,
  .transmission-video-grid,
  .route-card-grid,
  .field-grid,
  .process-list,
  .branch-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .service-card-media {
    min-height: 170px;
  }

  .subpage-hero {
    min-height: auto;
    padding: 72px 0 58px;
  }

  .brand-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .mobile-action-bar {
    display: grid;
  }

  .mobile-action-bar a,
  .mobile-action-bar button {
    display: grid;
    place-items: center;
    padding: 4px 6px;
    font-size: 0.82rem;
    line-height: 1.15;
    white-space: nowrap;
  }

  .whatsapp-float {
    display: none;
  }

  .chatbot {
    right: 10px;
    bottom: 86px;
  }

  .chat-window {
    height: min(620px, calc(100svh - 104px));
  }

  .chatbot.is-closed .chat-launcher,
  .chatbot.is-minimized .chat-launcher {
    display: none;
  }
}

@media (max-width: 520px) {
  .container {
    width: min(100% - 24px, var(--max));
  }

  h1 {
    font-size: clamp(2rem, 9.5vw, 2.3rem);
  }

  h2 {
    font-size: clamp(1.7rem, 7.6vw, 1.95rem);
  }

  .hero-panel {
    display: none;
  }

  .hero-lede {
    margin-bottom: 1.5rem;
    font-size: 1rem;
  }

  .hero-actions,
  .result-actions,
  .branch-actions {
    display: grid;
  }

  .btn {
    width: 100%;
  }

  .problem-result,
  .mini-form,
  .lead-form,
  .branch-card,
  .process-list li,
  .trust-points div {
    padding: 20px;
  }

  .service-card-compact .service-card-copy {
    padding: 20px;
  }

  .chat-controls {
    display: grid;
  }

  .cart-header {
    padding: 14px 16px;
  }

  .cart-items {
    padding: 12px 16px;
  }

  .cart-summary {
    padding: 14px 16px 20px;
  }

  .cart-line {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* === Catálogo, cotización y animaciones === */

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}

.cart-icon {
  display: block;
  width: 21px;
  height: 21px;
  color: #fff;
}

.cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  background: var(--red);
  border-radius: 999px;
}

@keyframes cartBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-4px) scale(1.12);
  }
  60% {
    transform: translateY(1px) scale(0.97);
  }
}

.cart-toggle.is-bouncing {
  animation: cartBounce 420ms ease;
}

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 260;
  pointer-events: none;
}

.cart-drawer:not(.is-closed) {
  pointer-events: auto;
}

.cart-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 8, 9, 0.5);
  opacity: 0;
  transition: opacity 220ms ease;
}

.cart-drawer:not(.is-closed)::before {
  opacity: 1;
}

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100vw);
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper-strong);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.3);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cart-drawer:not(.is-closed) .cart-panel {
  transform: translateX(0);
}

.cart-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--paper-strong);
  border-bottom: 1px solid var(--line);
}

.cart-header button {
  border: 0;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.cart-items {
  flex: 1 0 auto;
  padding: 14px 20px;
}

.cart-empty {
  color: var(--muted);
}

.cart-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.cart-line-info span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

.cart-line-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-line-controls input {
  width: 52px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.cart-line-controls button {
  border: 0;
  background: transparent;
  color: var(--red);
  font-weight: 800;
  cursor: pointer;
}

.cart-summary {
  padding: 16px 20px 22px;
  border-top: 1px solid var(--line);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  margin-bottom: 12px;
}

.cart-checkout-form {
  display: grid;
  gap: 10px;
}

.cart-checkout-form label {
  display: grid;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 700;
}

.cart-checkout-form input,
.cart-checkout-form select,
.cart-checkout-form textarea {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.cart-checkout-form textarea {
  min-height: 82px;
  resize: vertical;
}

.cart-payment-note {
  margin: 2px 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.filter-chip {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.filter-chip:hover {
  transform: translateY(-1px);
}

.filter-chip.is-active {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 1040px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.catalog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.catalog-card .service-card-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.catalog-card .service-card-copy > p {
  flex: 0 0 auto;
}

.catalog-card .service-card-copy > p:not(.catalog-note) {
  flex: 1 0 auto;
}

.catalog-kind {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--red-dark);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* Tarjetas compactas: menos relleno, título más contenido y descripción
   recortada a 2 líneas para que todas midan parecido y no se estiren. */
.catalog-card .service-card-copy {
  padding: 14px 16px 16px;
}

.catalog-card h3 {
  margin-bottom: 4px;
  font-size: 1rem;
  line-height: 1.22;
}

.catalog-card .service-card-copy > p:not(.catalog-note) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 0 0 auto;
  overflow: hidden;
  margin-bottom: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.catalog-meta {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
}

.catalog-meta div {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.catalog-meta dt {
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.catalog-meta dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

@media (min-width: 821px) {
  .catalog-card.is-product .catalog-meta {
    min-height: 114px;
  }
}

.catalog-compat-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  flex: 0 0 auto;
  margin: 9px 0 0;
  max-height: 26px;
  overflow: hidden;
}

.compat-chip {
  padding: 3px 8px;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}

.compat-chip-more {
  color: var(--muted);
  font-weight: 800;
}

.catalog-note {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  flex: 0 0 auto;
  overflow: hidden;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}

.catalog-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.catalog-actions .btn {
  flex: 1;
  min-height: 38px;
  padding: 0 10px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.service-card-media .catalog-price-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: auto;
  padding: 6px 12px;
  color: #fff;
  background: var(--red);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.service-card-media .catalog-kind-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: auto;
  padding: 6px 12px;
  color: #fff;
  background: rgba(11, 29, 54, 0.86);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
}

.catalog-empty {
  grid-column: 1 / -1;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.history-timeline {
  display: grid;
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.history-item {
  position: relative;
  padding-left: 24px;
  border-left: 2px solid rgba(141, 36, 50, 0.4);
  color: rgba(255, 255, 255, 0.86);
}

.history-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(141, 36, 50, 0.22);
}

.history-year {
  display: block;
  margin-bottom: 4px;
  color: var(--red);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* Barra de progreso de scroll, inspirada en @keyframes diagnosticPulse */
.scan-progress {
  position: fixed;
  top: var(--header);
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--red), var(--navy));
  z-index: 210;
  transition: width 90ms linear;
}

/* Micro-interacción de botón: "click de socket" */
.btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Tarjetas de catálogo/servicio: tilt sutil + duotono a color en hover */
.catalog-card,
.service-card {
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(0);
}

.catalog-card:hover,
.service-card:hover {
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-3px);
}

.catalog-card .service-card-media img,
.service-card .service-card-media img {
  filter: saturate(0.9) contrast(1.04);
  transition: filter 420ms ease, transform 420ms ease;
}

.catalog-card:hover .service-card-media img,
.service-card:hover .service-card-media img {
  filter: grayscale(0) contrast(1);
}

/* Fotos de transmisión: llenan todo el recuadro y quedan centradas (se recorta
   lo que sobra). Al pasar el cursor se amplían dentro del propio recuadro,
   sin empujar ni tapar el resto de la página. */
.catalog-card .service-photo {
  object-fit: cover;
  object-position: center;
  transform-origin: center;
}

.catalog-card:hover .service-photo,
.catalog-card:focus-within .service-photo {
  transform: scale(1.09);
}

.gallery-real {
  grid-template-columns: repeat(2, 1fr);
}

/* Fotos y video: revelado por barrido en vez de solo opacidad */
.media-frame,
.subpage-media img,
.subpage-media video {
  clip-path: inset(0 0 0 0);
}

.media-frame.reveal-on-scroll {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  transition: clip-path 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.media-frame.reveal-on-scroll.is-visible {
  clip-path: inset(0 0 0 0);
}