:root {
  --bg: #070B10;
  --bg-2: #0D1218;
  --surface: #101820;
  --surface-2: #151F29;
  --gold: #E8C030;
  --gold-soft: #F2D56B;
  --gold-dark: #9A7A14;
  --text: #F7F1DF;
  --muted: #B9B2A3;
  --line: rgba(232, 192, 48, 0.22);
  --white-line: rgba(255,255,255,.08);
  --shadow: 0 30px 90px rgba(0,0,0,.42);
  --radius: 28px;
  --container: 1180px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(232,192,48,.09), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(154,122,20,.11), transparent 30rem),
    linear-gradient(180deg, #070B10 0%, #0B1016 100%);
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
a { text-decoration: none; color: inherit; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; }

.skip-link {
  position: absolute; top: -120px; left: 1rem; z-index: 999;
  padding: .8rem 1rem; border-radius: 12px; background: var(--gold); color: #090C10; font-weight: 900;
}
.skip-link:focus { top: 1rem; }

.container { width: min(var(--container), calc(100% - 2rem)); margin-inline: auto; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  border-bottom: 1px solid rgba(232,192,48,.14);
  background: rgba(7,11,16,.72);
  backdrop-filter: blur(18px);
  transition: .25s ease;
}
.site-header.is-scrolled {
  background: rgba(7,11,16,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
}
.nav { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: 16px; min-width: 0; }
.brand-symbol {
  width: 58px; height: 58px; flex: 0 0 58px;
  display: grid; place-items: center;
  border: 1px solid rgba(232,192,48,.26);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(21,31,41,.9), rgba(7,11,16,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.25);
}
.brand-symbol img { width: 42px; height: auto; }
.brand-copy { display: flex; flex-direction: column; gap: 4px; }
.brand-copy img { width: clamp(170px, 17vw, 248px); height: auto; }
.brand-copy small {
  color: var(--gold-soft);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .82;
}

.nav-menu { list-style: none; display: flex; align-items: center; gap: clamp(1rem,2vw,2rem); }
.nav-menu a {
  position: relative;
  color: var(--muted);
  font-weight: 750;
  transition: .2s ease;
}
.nav-menu a:hover, .nav-menu a:focus-visible { color: var(--text); }
.nav-menu a:not(.nav-cta)::after {
  content:""; position:absolute; left:0; bottom:-8px; width:100%; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:right; transition:.2s ease;
}
.nav-menu a:hover::after, .nav-menu a:focus-visible::after { transform:scaleX(1); transform-origin:left; }
.nav-cta {
  padding: .84rem 1.25rem;
  border: 1px solid rgba(232,192,48,.38);
  border-radius: 999px;
  color: #080B0F !important;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 12px 32px rgba(232,192,48,.18);
}
.nav-toggle {
  display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:14px;
  background:rgba(255,255,255,.04); cursor:pointer;
}
.nav-toggle span { display:block; width:20px; height:2px; margin:5px auto; background:var(--text); transition:.2s ease; }

.hero {
  position: relative;
  min-height: 100vh;
  padding: 150px 0 86px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero::before {
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,11,16,.98) 0%, rgba(7,11,16,.84) 42%, rgba(7,11,16,.55) 100%),
    url("assets/img/solucion-cctv.webp") center/cover;
  z-index:-2;
}
.hero::after {
  content:"";
  position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-noise {
  position:absolute; inset:0;
  background: radial-gradient(circle at 65% 30%, rgba(232,192,48,.14), transparent 28rem);
  z-index:-1;
}
.hero-grid { display:grid; grid-template-columns: minmax(0,1fr) 430px; align-items:center; gap: clamp(2.5rem,6vw,5.5rem); }
.eyebrow, .section-kicker {
  display:inline-flex; align-items:center; gap:.7rem;
  color:var(--gold-soft); text-transform:uppercase; letter-spacing:.2em; font-size:.78rem; font-weight:950;
}
.eyebrow span { width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(232,192,48,.6); animation:pulse 1.8s infinite; }
.hero h1, .section-heading h2, .process-copy h2, .client-panel h2, .about-copy h2, .quote-card h2 {
  font-weight:950; letter-spacing:-.06em; line-height:1.02;
}
.hero h1 {
  max-width: 760px;
  margin-top: 1.35rem;
  font-size: clamp(2.55rem, 5.1vw, 5.05rem);
}
.hero-lead {
  max-width: 690px;
  margin-top:1.5rem;
  color:var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
}
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.btn {
  min-height:52px; display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.35rem; border:0; border-radius:999px; cursor:pointer;
  font-weight:900; transition:.2s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn:focus-visible, .nav-menu a:focus-visible, .nav-toggle:focus-visible, .whatsapp-float:focus-visible {
  outline: 3px solid rgba(232,192,48,.38); outline-offset:4px;
}
.btn-primary { color:#090C10; background:linear-gradient(135deg, var(--gold-soft), var(--gold)); box-shadow:0 18px 46px rgba(232,192,48,.22); }
.btn-secondary { color:var(--text); border:1px solid var(--line); background:rgba(255,255,255,.045); }

.hero-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:650px; margin-top:2.2rem; }
.hero-metrics div {
  padding:1rem; border:1px solid rgba(232,192,48,.18); border-radius:18px;
  background:rgba(7,11,16,.48); backdrop-filter:blur(12px);
}
.hero-metrics strong { display:block; color:var(--gold-soft); font-size:1.14rem; }
.hero-metrics span { color:var(--muted); font-size:.9rem; }

.executive-card {
  position:relative; min-height:510px; padding:1.6rem; overflow:hidden;
  border:1px solid rgba(232,192,48,.24); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(21,31,41,.82), rgba(7,11,16,.86));
  box-shadow:var(--shadow);
}
.card-glow { position:absolute; inset:-30% -25% auto auto; width:280px; height:280px; border-radius:50%; background:rgba(232,192,48,.16); filter:blur(50px); }
.executive-card-top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.executive-card-top img { width:62px; }
.executive-card-top span {
  padding:.55rem .75rem; border:1px solid rgba(232,192,48,.22); border-radius:999px;
  color:var(--gold-soft); background:rgba(232,192,48,.06); font-size:.82rem; font-weight:800;
}
.radar { position:relative; width:260px; height:260px; margin:3.4rem auto 2.2rem; display:grid; place-items:center; }
.ring { position:absolute; border:1px solid rgba(232,192,48,.38); border-radius:50%; }
.r1 { inset:0; border-width:2px; }
.r2 { inset:42px; }
.r3 { inset:82px; }
.radar-core {
  width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff 0 8%, var(--gold-soft) 9% 22%, var(--gold-dark) 23% 52%, #070B10 53%);
  box-shadow:0 0 42px rgba(232,192,48,.55);
  z-index:2;
}
.radar-line { position:absolute; width:142%; height:2px; background:linear-gradient(90deg,transparent,rgba(232,192,48,.7),transparent); animation:scan 4.5s linear infinite; }
.system-status {
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem; border:1px solid rgba(232,192,48,.2); border-radius:20px; background:rgba(7,11,16,.58);
}
.system-status small { color:var(--muted); }
.system-status strong { display:block; }
.system-status > span { padding:.62rem .78rem; border-radius:999px; background:var(--gold); color:#090C10; font-size:.76rem; font-weight:950; }

.logo-strip { border-block:1px solid rgba(232,192,48,.12); background:rgba(7,11,16,.72); }
.strip-grid { min-height:84px; display:grid; grid-template-columns:repeat(6,1fr); align-items:center; gap:1rem; }
.strip-grid span { color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; text-align:center; }

.section { padding: 6.5rem 0; }
.section-heading { max-width:760px; margin:0 auto 3.2rem; text-align:center; }
.section-heading h2, .process-copy h2, .client-panel h2, .about-copy h2, .quote-card h2 {
  margin-top:1rem; font-size:clamp(2.1rem,4.2vw,3.7rem);
}
.section-heading p, .process-copy p, .quote-card p, .about-copy p { margin-top:1rem; color:var(--muted); }

.solutions-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1rem; }
.solution-card {
  min-height:245px; padding:1.5rem; border:1px solid rgba(232,192,48,.16); border-radius:24px;
  background:linear-gradient(180deg,rgba(21,31,41,.82),rgba(15,23,32,.7));
  transition:.22s ease;
}
.solution-card.large { grid-row:span 2; min-height:auto; }
.solution-card:hover { transform:translateY(-6px); border-color:rgba(232,192,48,.36); box-shadow:0 24px 70px rgba(0,0,0,.24); }
.solution-card span { color:var(--gold); letter-spacing:.16em; font-size:.8rem; font-weight:950; }
.solution-card h3 { margin-top:1.2rem; font-size:1.35rem; }
.solution-card p { margin-top:.75rem; color:var(--muted); }

.dark-section { background:linear-gradient(90deg,rgba(232,192,48,.06),rgba(255,255,255,.025)); border-block:1px solid rgba(232,192,48,.12); }
.process-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center; }
.timeline {
  display:grid;
  gap:1rem;
}
.timeline-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: stretch;
  min-height: 168px;
  border:1px solid rgba(232,192,48,.18);
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(232,192,48,.06), transparent 12rem),
    linear-gradient(180deg, rgba(8,13,19,.92), rgba(6,10,15,.82));
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.timeline-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,192,48,.34);
  box-shadow: 0 24px 72px rgba(0,0,0,.28);
}
.timeline-card-copy {
  position: relative;
  z-index: 2;
  padding: 1.4rem 1.6rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.timeline-card strong { color:var(--gold); font-size: 1.05rem; }
.timeline-card h3 { margin-top:.45rem; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.timeline-card p { color:var(--muted); margin-top:.45rem; max-width: 520px; }
.timeline-visual {
  position: relative;
  min-height: 100%;
  border-left: 1px solid rgba(232,192,48,.12);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.timeline-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,10,15,.12) 0%, rgba(6,10,15,.34) 18%, rgba(6,10,15,.70) 100%),
    linear-gradient(180deg, rgba(232,192,48,.08), rgba(232,192,48,0));
}
.timeline-visual::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  opacity: .6;
}
.timeline-visual span {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: .5rem .78rem;
  border: 1px solid rgba(232,192,48,.25);
  border-radius: 999px;
  background: rgba(7,11,16,.84);
  color: var(--gold-soft);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.timeline-diagnostico .timeline-visual {
  background-image:
    linear-gradient(180deg, rgba(7,11,16,.1), rgba(7,11,16,.02)),
    url("assets/img/generated/process-diagnostico.webp");
  background-position: center;
}
.timeline-diseno .timeline-visual {
  background-image:
    linear-gradient(180deg, rgba(7,11,16,.08), rgba(7,11,16,.02)),
    url("assets/img/generated/process-diseno.webp");
  background-position: center;
}
.timeline-instalacion .timeline-visual {
  background-image:
    linear-gradient(180deg, rgba(7,11,16,.08), rgba(7,11,16,.02)),
    url("assets/img/generated/process-instalacion.webp");
  background-position: center;
}

.client-panel {
  padding:clamp(1.5rem,4vw,3rem); border:1px solid rgba(232,192,48,.18); border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(21,31,41,.86),rgba(7,11,16,.76)); box-shadow:var(--shadow);
}
.client-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2rem; }
.client-grid div { padding:1.1rem; border:1px solid rgba(232,192,48,.14); border-radius:18px; background:rgba(255,255,255,.025); }
.client-grid strong { display:block; color:var(--gold-soft); }
.client-grid span { color:var(--muted); font-size:.92rem; }

.about-section { padding-top:2rem; }
.about-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:3rem; align-items:center; }
.about-logo {
  padding:1.5rem; border:1px solid rgba(232,192,48,.18); border-radius:var(--radius);
  background:rgba(7,11,16,.7);
}
.about-copy p { max-width:680px; }

.quote-section { padding-top:2rem; }
.quote-card {
  max-width:920px; margin:auto; text-align:center; padding:clamp(2rem,5vw,4.2rem);
  border:1px solid rgba(232,192,48,.28); border-radius:var(--radius);
  background:
    radial-gradient(circle at top, rgba(232,192,48,.13), transparent 26rem),
    linear-gradient(135deg,rgba(21,31,41,.92),rgba(7,11,16,.86));
  box-shadow:var(--shadow);
}
.quote-card .btn { margin-top:2rem; }

.site-footer { border-top:1px solid rgba(232,192,48,.12); background:rgba(7,11,16,.78); }
.footer-grid { padding:1.6rem 0; display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.92rem; }
.footer-grid strong { color:var(--gold-soft); }

.whatsapp-float {
  position:fixed; right:1.25rem; bottom:1.25rem; width:62px; height:62px; z-index:120;
  display:grid; place-items:center; border-radius:999px; background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#090C10; box-shadow:0 18px 50px rgba(232,192,48,.32); transition:.2s ease;
}
.whatsapp-float:hover { transform:translateY(-4px) scale(1.04); }
.whatsapp-float svg { width:32px; height:32px; fill:currentColor; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity:1; transform:translateY(0); }

@keyframes pulse { 70% { box-shadow:0 0 0 12px rgba(232,192,48,0); } 100% { box-shadow:0 0 0 0 rgba(232,192,48,0); } }
@keyframes scan { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}

@media (max-width: 980px) {
  .hero-grid, .process-grid, .about-grid { grid-template-columns:1fr; }
  .executive-card { max-width:540px; width:100%; margin:auto; }
  .solutions-grid { grid-template-columns:1fr 1fr; }
  .solution-card.large { grid-row:auto; }
  .strip-grid, .client-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px) {
  html { scroll-padding-top:80px; }
  .nav { min-height:78px; }
  .brand-symbol { width:46px; height:46px; flex-basis:46px; border-radius:14px; }
  .brand-symbol img { width:34px; }
  .brand-copy img { width:150px; }
  .brand-copy small { display:none; }
  .nav-toggle { display:block; }
  .nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2){ opacity:0; }
  .nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-menu {
    position:fixed; top:86px; left:1rem; right:1rem; display:none; flex-direction:column; align-items:stretch;
    padding:1rem; border:1px solid var(--line); border-radius:22px; background:rgba(7,11,16,.98); box-shadow:var(--shadow);
  }
  .nav-menu.is-open { display:flex; }
  .nav-menu a { display:block; padding:.85rem; }
  .nav-cta { text-align:center; }
  .hero { min-height:auto; padding:118px 0 70px; }
  .hero h1 { font-size:clamp(2.6rem,12vw,4.2rem); }
  .hero-actions { flex-direction:column; }
  .btn { width:100%; }
  .hero-metrics, .solutions-grid, .strip-grid, .client-grid { grid-template-columns:1fr; }
  .executive-card { min-height:440px; }
  .radar { width:220px; height:220px; }
  .footer-grid { flex-direction:column; }
}


/* Testimonials dynamic section */

.testimonials-section {
  position: relative;
  background:
    radial-gradient(circle at 18% 20%, rgba(232,192,48,.08), transparent 24rem),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(232,192,48,.035), rgba(255,255,255,.01));
  border-block: 1px solid rgba(232,192,48,.10);
}

.testimonials-shell {
  position: relative;
  padding: 1.2rem;
  border: 1px solid rgba(232,192,48,.18);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(21,31,41,.86), rgba(7,11,16,.82));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.testimonial-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 520px;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(232,192,48,.14);
  border-radius: 22px;
  background: rgba(255,255,255,.025);
}

.testimonial-summary > span {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #090C10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  font-size: 1.65rem;
  font-weight: 950;
  box-shadow: 0 14px 36px rgba(232,192,48,.22);
}

.testimonial-summary strong {
  display: block;
  color: var(--text);
  font-size: 1.12rem;
}

.testimonial-summary p {
  color: var(--muted);
  margin-top: .2rem;
}

.testimonial-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2rem) / 3);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .4rem .1rem 1rem;
  scrollbar-width: none;
}

.testimonial-slider::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  min-height: 285px;
  scroll-snap-align: start;
  padding: 1.4rem;
  border: 1px solid rgba(232,192,48,.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(232,192,48,.12), transparent 12rem),
    linear-gradient(180deg, rgba(15,23,32,.92), rgba(7,11,16,.88));
  box-shadow: 0 20px 55px rgba(0,0,0,.24);
}

.testimonial-top {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.seal {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #090C10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  font-size: 1.35rem;
  font-weight: 950;
}

.testimonial-top strong {
  color: var(--text);
  font-size: 1.05rem;
}

.stars {
  margin-top: .25rem;
  color: var(--gold);
  font-size: 1.45rem;
  letter-spacing: .05em;
  line-height: 1;
}

.testimonial-card blockquote {
  margin-top: 1.6rem;
  color: var(--text);
  font-size: 1.06rem;
  font-weight: 760;
  line-height: 1.45;
}

.testimonial-meta {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(232,192,48,.14);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .74rem;
  font-weight: 850;
}

.testimonial-controls {
  display: flex;
  justify-content: flex-end;
  gap: .7rem;
  margin-top: .4rem;
}

.testimonial-controls button {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(232,192,48,.28);
  border-radius: 50%;
  color: var(--text);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  transition: .2s ease;
}

.testimonial-controls button:hover {
  color: #090C10;
  background: var(--gold);
  transform: translateY(-2px);
}

.footer-rights {
  padding: 0 0 1.25rem;
  color: var(--muted);
  font-size: .86rem;
  border-top: 1px solid rgba(232,192,48,.08);
}

.footer-rights p {
  padding-top: 1rem;
}

@media (max-width: 980px) {
  .testimonial-slider {
    grid-auto-columns: calc((100% - 1rem) / 2);
  }
}

@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(2.2rem, 10vw, 3.45rem);
  }

  .testimonial-slider {
    grid-auto-columns: 100%;
  }

  .testimonial-summary {
    align-items: flex-start;
  }
}


/* ===== Segelect v8 refinements ===== */

/* Hero phrase: more premium, less heavy */
.hero h1 {
  max-width: 720px;
  font-size: clamp(2.35rem, 4.45vw, 4.55rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.hero-lead {
  max-width: 720px;
}

/* Professional image solution cards */
.solutions-grid-pro {
  grid-template-columns: 1.1fr 1fr 1fr;
}

.image-card {
  position: relative;
  overflow: hidden;
  min-height: 315px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  border-color: rgba(232,192,48,.22);
  background: #101820;
}

.image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform .45s ease, filter .45s ease;
  z-index: -3;
}

.image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,11,16,.18) 0%, rgba(7,11,16,.72) 46%, rgba(7,11,16,.96) 100%),
    radial-gradient(circle at top right, rgba(232,192,48,.23), transparent 18rem);
  z-index: -2;
}

.image-card:hover::before {
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.05);
}

.image-card span,
.image-card h3,
.image-card p {
  position: relative;
  z-index: 1;
}

.image-card h3 {
  max-width: 92%;
  color: var(--text);
}

.image-card p {
  color: rgba(247,241,223,.82);
}

.image-card.large {
  min-height: 646px;
}

/* About with service imagery */
.about-grid-pro {
  grid-template-columns: 1fr 1.05fr;
}

.about-visual {
  position: relative;
  min-height: 470px;
}

.about-photo {
  position: absolute;
  border: 1px solid rgba(232,192,48,.22);
  border-radius: 28px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.about-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,11,16,.05), rgba(7,11,16,.52)),
    radial-gradient(circle at top right, rgba(232,192,48,.16), transparent 18rem);
}

.photo-main {
  inset: 0 8% 16% 0;
  background-image: url("assets/img/nosotros-tecnico-camara.webp");
}

.photo-small {
  right: 0;
  bottom: 0;
  width: 52%;
  height: 48%;
  background-image: url("assets/img/nosotros-tecnico-pulgar.webp");
}

.location-card {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  max-width: 290px;
  padding: 1rem;
  border: 1px solid rgba(232,192,48,.26);
  border-radius: 20px;
  background: rgba(7,11,16,.78);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 42px rgba(0,0,0,.3);
}

.location-card strong {
  display: block;
  color: var(--gold-soft);
  font-size: 1.02rem;
}

.location-card span {
  display: block;
  margin-top: .25rem;
  color: var(--muted);
  font-size: .9rem;
}

.about-copy p + p {
  margin-top: 1rem;
}

/* Center reserved rights */
.footer-rights {
  text-align: center;
}

.footer-rights p {
  text-align: center;
}

/* Continuous testimonials: auto-scroll animation + keep manual controls */
.testimonial-slider {
  position: relative;
}

.testimonial-slider.is-auto-moving {
  scroll-behavior: smooth;
}

@media (max-width: 980px) {
  .solutions-grid-pro,
  .about-grid-pro {
    grid-template-columns: 1fr;
  }

  .image-card.large {
    min-height: 315px;
  }

  .about-visual {
    min-height: 430px;
  }
}

@media (max-width: 720px) {
  .hero h1 {
    font-size: clamp(2.15rem, 9.3vw, 3.25rem);
  }

  .about-visual {
    min-height: 380px;
  }

  .photo-main {
    inset: 0 0 20% 0;
  }

  .photo-small {
    width: 58%;
    height: 42%;
  }

  .location-card {
    left: .8rem;
    right: .8rem;
    bottom: .8rem;
    max-width: none;
  }
}


/* v9 solutions layout refinement */
@media (min-width: 981px) {
  .solutions-grid-pro {
    grid-template-columns: repeat(4, 1fr);
  }

  .solutions-grid-pro .image-card.large {
    grid-column: span 2;
    grid-row: span 2;
  }

  .solutions-grid-pro .image-card {
    min-height: 315px;
  }

  .solutions-grid-pro .image-card.large {
    min-height: 646px;
  }
}

.image-card::before {
  background-position: center;
}

.image-card h3 {
  text-shadow: 0 2px 18px rgba(0,0,0,.62);
}

.image-card p {
  text-shadow: 0 1px 14px rgba(0,0,0,.56);
}


/* ===== Segelect v10 definitive: visuales propios sin copyright ===== */

.brand-visual-card {
  position: relative;
  overflow: hidden;
  min-height: 315px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-color: rgba(232,192,48,.24);
  background:
    radial-gradient(circle at 70% 10%, rgba(232, 192, 48, .18), transparent 18rem),
    linear-gradient(180deg, rgba(21,31,41,.95), rgba(7,11,16,.92));
}

.custom-visual {
  position: absolute;
  inset: 0;
  opacity: .9;
  pointer-events: none;
}

.custom-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,11,16,.10), rgba(7,11,16,.68) 52%, rgba(7,11,16,.97)),
    radial-gradient(circle at bottom right, rgba(232,192,48,.16), transparent 16rem);
}

/* Alarma tipo teclado de seguridad, ilustración propia */
.alarm-panel {
  position: absolute;
  top: 34px;
  right: 32px;
  width: 154px;
  padding: 16px;
  border: 1px solid rgba(232,192,48,.36);
  border-radius: 18px;
  background: linear-gradient(180deg, #1b242d, #080c10);
  box-shadow: 0 22px 60px rgba(0,0,0,.42);
}

.alarm-screen {
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 10px;
  color: #090c10;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.alarm-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.alarm-keys i {
  height: 24px;
  border-radius: 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(232,192,48,.16);
}

.alarm-illustration::before {
  content: "";
  position: absolute;
  left: -22px;
  bottom: 70px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(232,192,48,.20);
  border-radius: 50%;
  box-shadow:
    0 0 0 32px rgba(232,192,48,.04),
    0 0 0 64px rgba(232,192,48,.025);
}

.alarm-illustration::after {
  background:
    linear-gradient(180deg, rgba(7,11,16,.08), rgba(7,11,16,.62) 50%, rgba(7,11,16,.97)),
    radial-gradient(circle at 18% 52%, rgba(232,192,48,.16), transparent 14rem);
}

/* Barrera vehicular, ilustración propia */
.gate-post {
  position: absolute;
  left: 42px;
  bottom: 86px;
  width: 38px;
  height: 118px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-dark));
  box-shadow: 0 18px 44px rgba(0,0,0,.36);
}

.gate-arm {
  position: absolute;
  left: 70px;
  bottom: 172px;
  width: 212px;
  height: 18px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--gold) 0 28px,
      #141414 28px 48px
    );
  transform: rotate(-10deg);
  transform-origin: left center;
  box-shadow: 0 14px 36px rgba(0,0,0,.38);
}

.road-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 72px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,192,48,.55), transparent);
}

.car-shape {
  position: absolute;
  right: 42px;
  bottom: 82px;
  width: 118px;
  height: 42px;
  border-radius: 24px 28px 12px 12px;
  background: linear-gradient(135deg, #2a333d, #0f151c);
  border: 1px solid rgba(232,192,48,.22);
  box-shadow: 0 18px 44px rgba(0,0,0,.36);
}

.car-shape::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -22px;
  width: 62px;
  height: 28px;
  border-radius: 24px 24px 0 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(232,192,48,.18);
}

.car-shape i {
  position: absolute;
  bottom: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #05070a;
  border: 3px solid var(--gold-dark);
}

.car-shape i:first-child {
  left: 22px;
}

.car-shape i:last-child {
  right: 22px;
}

.brand-visual-card h3,
.brand-visual-card p,
.brand-visual-card > span {
  position: relative;
  z-index: 2;
}

.brand-visual-card h3 {
  text-shadow: 0 2px 18px rgba(0,0,0,.62);
}

.brand-visual-card p {
  color: rgba(247,241,223,.82);
  text-shadow: 0 1px 14px rgba(0,0,0,.56);
}

/* Centro definitivo del copyright */
.footer-rights {
  text-align: center !important;
}

.footer-rights p {
  text-align: center !important;
  width: 100%;
}

/* Ajuste final del título hero */
.hero h1 {
  font-size: clamp(2.35rem, 4.45vw, 4.55rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}


/* =========================================================
   SEGELECT v11 · Mobile Premium Responsive Layer
   Ajustes móviles sin afectar escritorio
========================================================= */

/* Tablets: mantiene diseño premium sin comprimir */
@media (max-width: 980px) {
  :root {
    --container: 100%;
  }

  .container {
    width: min(100% - 2rem, 760px);
  }

  .site-header {
    background: rgba(7,11,16,.94);
  }

  .nav {
    min-height: 82px;
  }

  .hero {
    padding-top: 112px;
    padding-bottom: 72px;
  }

  .hero-grid {
    gap: 2.4rem;
  }

  .hero-content {
    text-align: left;
  }

  .hero h1 {
    max-width: 720px;
    font-size: clamp(2.55rem, 8vw, 4.25rem);
    line-height: 1.02;
  }

  .hero-lead {
    max-width: 680px;
    font-size: 1.05rem;
  }

  .executive-card {
    min-height: 455px;
  }

  .solutions-grid-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solutions-grid-pro .image-card.large {
    grid-column: span 2;
    min-height: 430px;
  }

  .image-card,
  .brand-visual-card {
    min-height: 340px;
  }

  .about-grid-pro {
    gap: 2rem;
  }

  .about-copy h2,
  .section-heading h2,
  .process-copy h2,
  .client-panel h2,
  .quote-card h2 {
    font-size: clamp(2rem, 6vw, 3rem);
  }
}

/* Celular premium: composición, lectura y CTA */
@media (max-width: 720px) {
  html {
    scroll-padding-top: 78px;
  }

  body {
    background:
      radial-gradient(circle at 20% 4%, rgba(232,192,48,.10), transparent 18rem),
      linear-gradient(180deg, #070B10 0%, #0B1016 100%);
  }

  body::before {
    opacity: .035;
    background-size: 36px 36px;
  }

  .container {
    width: min(100% - 1.2rem, 520px);
  }

  .site-header {
    border-bottom-color: rgba(232,192,48,.16);
  }

  .nav {
    min-height: 74px;
    gap: .85rem;
  }

  .brand {
    gap: .65rem;
  }

  .brand-symbol {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 14px;
  }

  .brand-symbol img {
    width: 34px;
  }

  .brand-copy img {
    width: min(42vw, 158px);
  }

  .brand-copy small {
    display: none;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    flex: 0 0 44px;
  }

  .nav-menu {
    top: 82px;
    left: .75rem;
    right: .75rem;
    padding: .8rem;
    border-radius: 20px;
  }

  .nav-menu a {
    padding: .95rem;
    font-size: 1rem;
  }

  .nav-cta {
    margin-top: .3rem;
  }

  .hero {
    min-height: auto;
    padding-top: 104px;
    padding-bottom: 58px;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(7,11,16,.92) 0%, rgba(7,11,16,.80) 45%, rgba(7,11,16,.96) 100%),
      url("assets/img/solucion-cctv.webp") center/cover;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-content {
    text-align: left;
  }

  .eyebrow,
  .section-kicker {
    font-size: .68rem;
    letter-spacing: .16em;
  }

  .hero h1 {
    max-width: 100%;
    margin-top: 1rem;
    font-size: clamp(2.25rem, 12vw, 3.55rem);
    line-height: .98;
    letter-spacing: -.055em;
  }

  .hero-lead {
    margin-top: 1rem;
    font-size: .99rem;
    line-height: 1.65;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
    margin-top: 1.5rem;
  }

  .btn {
    width: 100%;
    min-height: 52px;
    font-size: .98rem;
  }

  .hero-metrics {
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-top: 1.4rem;
  }

  .hero-metrics div {
    padding: .9rem 1rem;
    border-radius: 16px;
  }

  .executive-card {
    min-height: 395px;
    padding: 1.1rem;
    border-radius: 24px;
  }

  .executive-card-top img {
    width: 50px;
  }

  .executive-card-top span {
    font-size: .74rem;
    padding: .45rem .62rem;
  }

  .radar {
    width: 205px;
    height: 205px;
    margin: 2.4rem auto 1.6rem;
  }

  .radar-core {
    width: 54px;
    height: 54px;
  }

  .system-status {
    padding: .85rem;
    border-radius: 16px;
  }

  .system-status strong {
    font-size: .93rem;
  }

  .system-status > span {
    font-size: .68rem;
  }

  .logo-strip {
    overflow: hidden;
  }

  .strip-grid {
    min-height: auto;
    padding: 1rem 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
  }

  .strip-grid span {
    padding: .65rem;
    border: 1px solid rgba(232,192,48,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    font-size: .68rem;
    letter-spacing: .11em;
  }

  .section {
    padding: 4.4rem 0;
  }

  .section-heading {
    text-align: left;
    margin-bottom: 2rem;
  }

  .section-heading h2,
  .process-copy h2,
  .client-panel h2,
  .about-copy h2,
  .quote-card h2 {
    margin-top: .85rem;
    font-size: clamp(1.85rem, 8.8vw, 2.65rem);
    line-height: 1.06;
    letter-spacing: -.045em;
  }

  .section-heading p,
  .process-copy p,
  .about-copy p,
  .quote-card p {
    font-size: .98rem;
    line-height: 1.65;
  }

  .solutions-grid-pro {
    grid-template-columns: 1fr;
    gap: .9rem;
  }

  .solutions-grid-pro .image-card.large,
  .image-card,
  .brand-visual-card {
    grid-column: auto;
    min-height: 360px;
    border-radius: 22px;
    padding: 1.25rem;
  }

  .image-card.large {
    min-height: 390px;
  }

  .image-card h3,
  .brand-visual-card h3 {
    max-width: 100%;
    font-size: 1.28rem;
    line-height: 1.22;
  }

  .image-card p,
  .brand-visual-card p {
    font-size: .95rem;
    line-height: 1.55;
  }

  .alarm-panel {
    top: 26px;
    right: 22px;
    width: 136px;
    padding: 13px;
  }

  .alarm-screen {
    height: 34px;
    font-size: .7rem;
  }

  .alarm-keys {
    gap: 6px;
  }

  .alarm-keys i {
    height: 21px;
  }

  .gate-post {
    left: 28px;
    bottom: 92px;
    height: 102px;
  }

  .gate-arm {
    left: 58px;
    bottom: 168px;
    width: 190px;
  }

  .car-shape {
    right: 28px;
    bottom: 86px;
    width: 106px;
  }

  .process-grid {
    gap: 1.5rem;
  }

  .timeline {
    gap: .85rem;
  }

  .timeline-card {
    border-radius: 18px;
  }
  .timeline-card-copy {
    padding: 1rem;
  }

  .client-panel {
    padding: 1.2rem;
    border-radius: 24px;
  }

  .client-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .client-grid div {
    padding: 1rem;
  }

  .testimonials-shell {
    padding: .95rem;
    border-radius: 24px;
  }

  .testimonial-summary {
    padding: .9rem;
    gap: .8rem;
    border-radius: 18px;
  }

  .testimonial-summary > span {
    width: 58px;
    height: 58px;
    font-size: 1.32rem;
    flex: 0 0 58px;
  }

  .testimonial-slider {
    grid-auto-columns: 100%;
    gap: .8rem;
  }

  .testimonial-card {
    min-height: 260px;
    padding: 1.05rem;
    border-radius: 20px;
  }

  .seal {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .stars {
    font-size: 1.25rem;
  }

  .testimonial-card blockquote {
    font-size: 1rem;
  }

  .testimonial-controls {
    justify-content: center;
  }

  .about-grid-pro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-visual {
    min-height: 360px;
  }

  .about-photo {
    border-radius: 22px;
  }

  .photo-main {
    inset: 0 0 18% 0;
  }

  .photo-small {
    right: .6rem;
    bottom: .6rem;
    width: 54%;
    height: 40%;
    border-radius: 18px;
  }

  .location-card {
    left: .7rem;
    right: .7rem;
    bottom: .7rem;
    max-width: none;
    padding: .85rem;
    border-radius: 18px;
  }

  .quote-card {
    padding: 1.6rem 1rem;
    border-radius: 24px;
  }

  .footer-grid {
    text-align: center;
    align-items: center;
    padding: 1.4rem 0;
  }

  .footer-grid p {
    line-height: 1.55;
  }

  .footer-rights {
    text-align: center !important;
    padding-bottom: 1.2rem;
  }

  .whatsapp-float {
    width: 56px;
    height: 56px;
    right: .95rem;
    bottom: .95rem;
  }

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

/* Celulares muy pequeños: evita cortes y mantiene proporción */
@media (max-width: 380px) {
  .container {
    width: min(100% - 1rem, 360px);
  }

  .brand-copy img {
    width: 136px;
  }

  .hero h1 {
    font-size: clamp(2rem, 11.4vw, 2.75rem);
  }

  .executive-card {
    min-height: 370px;
  }

  .radar {
    width: 185px;
    height: 185px;
  }

  .image-card,
  .brand-visual-card,
  .solutions-grid-pro .image-card.large {
    min-height: 340px;
  }

  .alarm-panel {
    width: 124px;
  }

  .gate-arm {
    width: 165px;
  }

  .car-shape {
    width: 96px;
  }
}


/* =========================================================
   SEGELECT v12.1 · Imágenes locales de soluciones
========================================================= */

.solution-card[style*="solucion-cctv"]::before,
.solution-card[style*="solucion-alarma"]::before,
.solution-card[style*="solucion-vehicular"]::before {
  filter: brightness(.74) contrast(1.08) saturate(.96);
}

.solution-card[style*="solucion-cctv"]::before {
  background-position: center center;
}

.solution-card[style*="solucion-alarma"]::before {
  background-position: center center;
}

.solution-card[style*="solucion-vehicular"]::before {
  background-position: center center;
}

@media (max-width: 720px) {
  .solution-card[style*="solucion-cctv"]::before {
    background-position: center center;
  }

  .solution-card[style*="solucion-alarma"]::before {
    background-position: center center;
  }

  .solution-card[style*="solucion-vehicular"]::before {
    background-position: center center;
  }
}


/* =========================================================
   SEGELECT v12.2 · Imágenes locales finales de soluciones
========================================================= */

.solution-card[style*="solucion-control-acceso"]::before,
.solution-card[style*="solucion-electricidad"]::before,
.solution-card[style*="solucion-ups-inversor"]::before,
.solution-card[style*="solucion-mantenimiento"]::before,
.solution-card[style*="solucion-cerca-electrica"]::before {
  filter: brightness(.74) contrast(1.08) saturate(.96);
}

.solution-card[style*="solucion-control-acceso"]::before {
  background-position: center center;
}

.solution-card[style*="solucion-electricidad"]::before {
  background-position: center center;
}

.solution-card[style*="solucion-ups-inversor"]::before {
  background-position: center center;
}

.solution-card[style*="solucion-mantenimiento"]::before {
  background-position: center center;
}

.solution-card[style*="solucion-cerca-electrica"]::before {
  background-position: center center;
}

@media (max-width: 720px) {
  .solution-card[style*="solucion-control-acceso"]::before,
  .solution-card[style*="solucion-electricidad"]::before,
  .solution-card[style*="solucion-ups-inversor"]::before,
  .solution-card[style*="solucion-mantenimiento"]::before,
  .solution-card[style*="solucion-cerca-electrica"]::before {
    background-position: center center;
  }
}


/* =========================================================
   SEGELECT v12.3 · Ajustes finales solicitados
   - Imágenes propias en Nosotros
   - Sin numeración en tarjetas de soluciones
========================================================= */

.photo-main {
  background-image: url("assets/img/nosotros-tecnico-camara.webp") !important;
  background-position: center center !important;
}

.photo-small {
  background-image: url("assets/img/nosotros-tecnico-pulgar.webp") !important;
  background-position: center center !important;
}

/* Oculta cualquier numeración residual en soluciones */
#soluciones .solution-card > span {
  display: none !important;
}

/* Compensa el espacio visual al retirar numeración */
#soluciones .solution-card h3 {
  margin-top: 0 !important;
}

#soluciones .image-card h3,
#soluciones .brand-visual-card h3 {
  max-width: 96%;
}

@media (max-width: 720px) {
  .photo-main {
    background-position: center center !important;
  }

  .photo-small {
    background-position: center center !important;
  }
}


/* =========================================================
   SEGELECT v12.4 · Mobile logo + hero background fix
   - Mantiene visible "Seguridad electrónica & inteligencia"
   - Corrige composición del fondo hero en móvil
========================================================= */

@media (max-width: 720px) {
  .nav {
    min-height: 88px !important;
    align-items: center !important;
  }

  .brand {
    max-width: calc(100% - 58px) !important;
    gap: .62rem !important;
    align-items: center !important;
  }

  .brand-symbol {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    border-radius: 16px !important;
  }

  .brand-symbol img {
    width: 37px !important;
  }

  .brand-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .brand-copy img {
    width: min(50vw, 190px) !important;
    max-width: 190px !important;
    height: auto !important;
  }

  .brand-copy small {
    display: block !important;
    margin-left: 1px !important;
    max-width: 56vw !important;
    color: rgba(242,213,107,.90) !important;
    font-size: clamp(.48rem, 1.75vw, .62rem) !important;
    font-weight: 700 !important;
    letter-spacing: .13em !important;
    line-height: 1.18 !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow: visible !important;
    opacity: .95 !important;
  }

  .nav-toggle {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
  }

  .hero {
    position: relative !important;
    min-height: auto !important;
    padding-top: 118px !important;
    padding-bottom: 58px !important;
    overflow: hidden !important;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(7,11,16,.88) 0%, rgba(7,11,16,.78) 42%, rgba(7,11,16,.96) 100%),
      url("assets/img/solucion-cctv.webp") center top / cover no-repeat !important;
    transform: none !important;
  }

  .hero-noise {
    background:
      radial-gradient(circle at 78% 18%, rgba(232,192,48,.16), transparent 17rem),
      linear-gradient(90deg, rgba(7,11,16,.70), rgba(7,11,16,.25)) !important;
  }

  .hero-grid {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Micro móviles */
@media (max-width: 390px) {
  .nav {
    min-height: 84px !important;
  }

  .brand-symbol {
    width: 45px !important;
    height: 45px !important;
    flex-basis: 45px !important;
  }

  .brand-symbol img {
    width: 33px !important;
  }

  .brand-copy img {
    width: min(48vw, 160px) !important;
  }

  .brand-copy small {
    max-width: 50vw !important;
    font-size: .46rem !important;
    letter-spacing: .10em !important;
  }
}

/* =========================================================
   SEGELECT v13.0 · Production polish + performance layer
   - Local hero imagery, WebP assets, stronger conversion/UX
========================================================= */
:root {
  --cyan: #61D6FF;
  --success: #45E090;
  --danger: #FF6B6B;
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(7,11,16,.98) 0%, rgba(7,11,16,.86) 42%, rgba(7,11,16,.58) 100%),
    url("assets/img/solucion-cctv.webp") center/cover no-repeat !important;
}

.hero::after {
  height: 2px;
  opacity: .82;
}

.hero-content { position: relative; }
.hero-content::before {
  content: "";
  position: absolute;
  inset: -2.2rem auto auto -1.8rem;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,192,48,.10), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.btn-primary,
.nav-cta,
.whatsapp-float {
  position: relative;
  overflow: hidden;
}

.btn-primary::after,
.nav-cta::after,
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -55%;
  width: 45%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.46), transparent);
  transition: left .65s ease;
}

.btn-primary:hover::after,
.nav-cta:hover::after,
.whatsapp-float:hover::after {
  left: 125%;
}

.executive-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.05) 41%, transparent 43%),
    radial-gradient(circle at 28% 18%, rgba(97,214,255,.10), transparent 15rem);
  pointer-events: none;
}

.system-status > span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #0A3D22;
  box-shadow: 0 0 0 4px rgba(10,61,34,.16);
}

.trust-section {
  padding-top: 5.2rem;
  padding-bottom: 5.2rem;
  border-bottom: 1px solid rgba(232,192,48,.10);
  background:
    radial-gradient(circle at 80% 20%, rgba(97,214,255,.07), transparent 23rem),
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(232,192,48,.025));
}

.trust-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}

.trust-copy h2 {
  margin-top: 1rem;
  font-size: clamp(2rem, 3.9vw, 3.45rem);
  line-height: 1.04;
  letter-spacing: -.055em;
}

.trust-copy p {
  margin-top: 1rem;
  color: var(--muted);
  max-width: 620px;
}

.trust-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}

.trust-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 158px;
  min-height: 196px;
  border: 1px solid rgba(232,192,48,.17);
  border-radius: 23px;
  background:
    radial-gradient(circle at top right, rgba(232,192,48,.10), transparent 10rem),
    linear-gradient(180deg, rgba(21,31,41,.80), rgba(7,11,16,.72));
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.trust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,192,48,.30);
  box-shadow: 0 22px 64px rgba(0,0,0,.28);
}
.trust-card::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: 1.2rem;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(242,213,107,.95), rgba(232,192,48,.72));
  box-shadow: 0 14px 34px rgba(232,192,48,.18);
  z-index: 2;
}
.trust-card-copy {
  position: relative;
  z-index: 2;
  padding: 4.25rem 1.2rem 1.25rem;
}
.trust-card-copy strong {
  display: block;
  color: var(--text);
  font-size: 1.16rem;
  line-height: 1.2;
}
.trust-card-copy span {
  display: block;
  margin-top: .55rem;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.55;
}
.trust-card-visual {
  position: relative;
  min-height: 100%;
  background-size: cover;
  background-position: center;
  border-left: 1px solid rgba(232,192,48,.10);
}
.trust-card-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,11,16,.04), rgba(7,11,16,.18) 30%, rgba(7,11,16,.72) 100%);
}
.trust-card-visual::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  opacity: .55;
}
.trust-card-visual span {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  padding: .46rem .72rem;
  border: 1px solid rgba(232,192,48,.24);
  border-radius: 999px;
  background: rgba(7,11,16,.82);
  color: var(--gold-soft);
  font-size: .7rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.trust-design .trust-card-visual {
  background-image: linear-gradient(180deg, rgba(7,11,16,.1), rgba(7,11,16,.04)), url("assets/img/generated/trust-diseno-tecnico.webp");
}
.trust-clean .trust-card-visual {
  background-image: linear-gradient(180deg, rgba(7,11,16,.1), rgba(7,11,16,.04)), url("assets/img/generated/trust-instalacion-limpia.webp");
}
.trust-support .trust-card-visual {
  background-image: linear-gradient(180deg, rgba(7,11,16,.1), rgba(7,11,16,.04)), url("assets/img/generated/trust-soporte-claro.webp");
}
.trust-commercial .trust-card-visual {
  background-image: linear-gradient(180deg, rgba(7,11,16,.1), rgba(7,11,16,.04)), url("assets/img/generated/trust-enfoque-comercial.webp");
}

.conversion-band {
  padding: 0 0 2.4rem;
}

.conversion-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem;
  border: 1px solid rgba(232,192,48,.20);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(232,192,48,.12), rgba(97,214,255,.06)),
    rgba(7,11,16,.74);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

.conversion-grid strong {
  display: block;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--text);
}

.conversion-grid span {
  display: block;
  margin-top: .18rem;
  color: var(--muted);
}

.whatsapp-float::before {
  content: "Cotizar";
  position: absolute;
  right: calc(100% + .65rem);
  top: 50%;
  transform: translateY(-50%);
  padding: .48rem .7rem;
  border: 1px solid rgba(232,192,48,.22);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(7,11,16,.88);
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.photo-main {
  background-image: url("assets/img/nosotros-tecnico-camara.webp") !important;
}

.photo-small {
  background-image: url("assets/img/nosotros-tecnico-pulgar.webp") !important;
}

.section,
.trust-section,
.testimonials-section,
.about-section,
.quote-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 820px;
}

.image-card::before,
.about-photo {
  will-change: transform;
}

@media (max-width: 980px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-copy {
    max-width: 720px;
  }
}

@media (max-width: 720px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(7,11,16,.88) 0%, rgba(7,11,16,.80) 42%, rgba(7,11,16,.96) 100%),
      url("assets/img/solucion-cctv.webp") center top / cover no-repeat !important;
  }

  .trust-section {
    padding: 4rem 0;
  }

  .trust-copy h2 {
    font-size: clamp(1.85rem, 8.8vw, 2.65rem);
  }

  .trust-cards {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .trust-card {
    min-height: auto;
    border-radius: 20px;
  }
  .trust-card-copy {
    padding: 4rem 1rem 1rem;
  }

  .conversion-band {
    padding-bottom: 1.5rem;
  }

  .conversion-grid {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 1rem;
  }

  .whatsapp-float::before {
    display: none;
  }
}


/* =========================================================
   SEGELECT v13.1 · Fix visual solicitado por cliente
   - WhatsApp fijo y visible a la derecha
   - Hero vuelve a edificios
   - Se elimina barra animada del menú
   - Radar reemplazado por cámara animada
   ========================================================= */

.hero::before {
  background:
    linear-gradient(90deg, rgba(7,11,16,.90) 0%, rgba(7,11,16,.78) 34%, rgba(7,11,16,.58) 62%, rgba(7,11,16,.86) 100%),
    url("assets/img/hero-buildings.webp") center center / cover no-repeat !important;
  opacity: .92 !important;
}

.nav-menu a:not(.nav-cta)::after,
.nav-menu a:not(.nav-cta)::before {
  content: none !important;
  display: none !important;
}

.whatsapp-float {
  position: fixed !important;
  inset: auto clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px) auto !important;
  left: auto !important;
  top: auto !important;
  right: clamp(12px, 2vw, 24px) !important;
  bottom: clamp(12px, 2vw, 24px) !important;
  z-index: 9999 !important;
  isolation: isolate;
  width: 64px !important;
  height: 64px !important;
  box-shadow: 0 18px 50px rgba(232,192,48,.30), 0 0 0 1px rgba(255,255,255,.14) inset !important;
}

.whatsapp-float::after {
  content: "WhatsApp" !important;
  position: absolute;
  right: calc(100% + .7rem);
  top: 50%;
  transform: translateY(-50%);
  padding: .5rem .8rem;
  border-radius: 999px;
  background: rgba(7,11,16,.92);
  color: var(--gold-soft);
  border: 1px solid rgba(232,192,48,.22);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.whatsapp-float.is-scrolling {
  animation: whatsappNudge .75s ease;
}

@keyframes whatsappNudge {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-6px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

.camera-stage {
  position: relative;
  width: min(100%, 312px);
  height: 262px;
  margin: 2.3rem auto 1.5rem;
}

.camera-glow {
  position: absolute;
  inset: 25px 20px auto 20px;
  height: 190px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(232,192,48,.18), rgba(97,214,255,.08) 42%, transparent 72%);
  filter: blur(18px);
}

.camera-pole {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 12px;
  height: 118px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #89919B, #4F5964 55%, #2C343D 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.camera-base {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 104px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #2D3641, #141A21);
  box-shadow: 0 12px 20px rgba(0,0,0,.26);
}

.camera-head {
  position: absolute;
  left: calc(50% - 6px);
  top: 84px;
  width: 162px;
  height: 88px;
  transform-origin: 10px 56px;
  animation: cameraPan 6s ease-in-out infinite;
}

.camera-arm {
  position: absolute;
  left: 0;
  top: 46px;
  width: 58px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7F8791, #4F5964);
}

.camera-joint {
  position: absolute;
  left: 42px;
  top: 39px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFFFF, #D8DEE4 22%, #6D7680 23%, #39424A 64%, #11161B 65%);
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}

.camera-body {
  position: absolute;
  left: 54px;
  top: 22px;
  width: 92px;
  height: 56px;
  border-radius: 22px 18px 20px 18px;
  background: linear-gradient(145deg, #D9DEE4 0%, #AAB2BB 20%, #6B737D 58%, #323A42 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 14px 26px rgba(0,0,0,.26);
}

.camera-body::before {
  content: "AI TRACK";
  position: absolute;
  left: 14px;
  top: 11px;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(7,11,16,.60);
}

.camera-lens {
  position: absolute;
  right: 0;
  top: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF 0 8%, #F2D56B 9% 18%, #4E6372 19% 36%, #0D131A 37% 66%, #05080C 67%);
  box-shadow: 0 0 0 7px #E3E7EB, 0 0 0 10px rgba(0,0,0,.16), 0 0 30px rgba(232,192,48,.12);
}

.camera-lens::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.26);
}

.camera-led {
  position: absolute;
  left: 70px;
  top: 65px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7CFFAE;
  box-shadow: 0 0 0 6px rgba(124,255,174,.12), 0 0 18px rgba(124,255,174,.65);
}

.camera-wave {
  position: absolute;
  right: -18px;
  top: -2px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid rgba(232,192,48,.26);
  border-left-color: transparent;
  border-bottom-color: transparent;
  opacity: 0;
  transform: rotate(18deg) scale(.75);
  transform-origin: 10px 42px;
  animation: cameraWave 2.6s ease-out infinite;
}

.camera-wave.w2 { animation-delay: .45s; }
.camera-wave.w3 { animation-delay: .9s; }

@keyframes cameraPan {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(14deg); }
}

@keyframes cameraWave {
  0% { opacity: 0; transform: rotate(18deg) scale(.72); }
  18% { opacity: .78; }
  100% { opacity: 0; transform: rotate(18deg) scale(1.18); }
}

@media (max-width: 720px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(7,11,16,.86) 0%, rgba(7,11,16,.78) 42%, rgba(7,11,16,.96) 100%),
      url("assets/img/hero-buildings.webp") center top / cover no-repeat !important;
  }

  .whatsapp-float {
    width: 58px !important;
    height: 58px !important;
    right: 12px !important;
    bottom: 12px !important;
  }

  .whatsapp-float::after {
    display: none !important;
  }

  .camera-stage {
    width: min(100%, 270px);
    height: 236px;
  }

  .camera-head {
    transform-origin: 10px 56px;
    scale: .9;
    left: calc(50% - 10px);
  }
}


/* =========================================================
   SEGELECT v13.2 · Hero ultra real + cámara premium + fix WhatsApp
   ========================================================= */

.hero::before {
  background:
    linear-gradient(90deg, rgba(7,11,16,.92) 0%, rgba(7,11,16,.82) 28%, rgba(7,11,16,.55) 60%, rgba(7,11,16,.86) 100%),
    url("assets/img/hero-ultra.webp") center center / cover no-repeat !important;
  opacity: .95 !important;
}

.camera-stage--svg {
  width: min(100%, 340px);
  height: 250px;
  margin: 1.8rem auto 1.1rem;
  display: grid;
  place-items: center;
}

.hikvision-cam {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.camera-pan-group {
  animation: hikPan 6s ease-in-out infinite;
  transform-box: fill-box;
}

.wave {
  opacity: 0;
  transform-origin: 284px 110px;
}

.wave1 { animation: wavePulse 2.2s ease-out infinite; }
.wave2 { animation: wavePulse 2.2s ease-out infinite .35s; }
.wave3 { animation: wavePulse 2.2s ease-out infinite .7s; }

@keyframes hikPan {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(14deg); }
}

@keyframes wavePulse {
  0% { opacity: 0; }
  15% { opacity: .95; }
  100% { opacity: 0; }
}

/* Anula la versión CSS anterior para evitar aspecto artificial */
.camera-stage .camera-glow,
.camera-stage .camera-pole,
.camera-stage .camera-base,
.camera-stage .camera-head,
.camera-stage .camera-arm,
.camera-stage .camera-joint,
.camera-stage .camera-body,
.camera-stage .camera-lens,
.camera-stage .camera-led,
.camera-stage .camera-wave {
  display: none !important;
}

/* Fix definitivo de WhatsApp: solo icono, sin textos ni labels visuales encima */
.whatsapp-float::before,
.whatsapp-float::after {
  content: none !important;
  display: none !important;
}

.whatsapp-float {
  overflow: hidden;
  text-indent: -9999px;
  font-size: 0 !important;
  line-height: 0 !important;
}

.whatsapp-float svg {
  width: 32px !important;
  height: 32px !important;
  display: block;
  text-indent: 0;
}

@media (max-width: 720px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(7,11,16,.88) 0%, rgba(7,11,16,.78) 40%, rgba(7,11,16,.96) 100%),
      url("assets/img/hero-ultra.webp") center center / cover no-repeat !important;
  }

  .camera-stage--svg {
    width: min(100%, 292px);
    height: 220px;
  }
}


/* =========================================================
   SEGELECT v14.0 · Bogotá hero + cámara real Hikvision
   ========================================================= */
.hero::before {
  background:
    linear-gradient(90deg, rgba(5,8,14,.93) 0%, rgba(5,8,14,.82) 28%, rgba(5,8,14,.50) 58%, rgba(5,8,14,.85) 100%),
    url("assets/img/hero-bogota-real.webp") center center / cover no-repeat !important;
  opacity: .97 !important;
}

.camera-stage--photo {
  width: min(100%, 370px);
  height: 270px;
  margin: 1.6rem auto 1rem;
  display: grid;
  place-items: center;
}

.camera-photo-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.camera-photo-wrap::before {
  content: "";
  position: absolute;
  inset: 22px 20px auto 20px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(232,192,48,.18), rgba(97,214,255,.07) 42%, transparent 72%);
  filter: blur(18px);
}

.camera-photo {
  position: relative;
  z-index: 2;
  width: min(100%, 330px);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));
  transform-origin: 56% 36%;
  animation: hikvisionSweep 6.2s ease-in-out infinite;
  will-change: transform;
}

.camera-signal {
  position: absolute;
  z-index: 1;
  right: 12px;
  top: 78px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid rgba(232,192,48,.45);
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(18deg) scale(.78);
  opacity: 0;
  transform-origin: 8px 38px;
  animation: signalPulse 2.35s ease-out infinite;
}
.camera-signal.s2 { animation-delay: .35s; }
.camera-signal.s3 { animation-delay: .7s; }

@keyframes hikvisionSweep {
  0%, 100% { transform: rotate(-11deg) translateX(-8px); }
  50% { transform: rotate(11deg) translateX(8px); }
}
@keyframes signalPulse {
  0% { opacity: 0; transform: rotate(18deg) scale(.72); }
  16% { opacity: .92; }
  100% { opacity: 0; transform: rotate(18deg) scale(1.24); }
}

/* Oculta implementaciones previas de cámara para dejar solo la final */
.camera-stage--svg, .hikvision-cam, .camera-pan-group, .wave { display: none !important; }

/* Fix definitivo WhatsApp: sin texto visual ni link encima */
.whatsapp-float, .whatsapp-float:link, .whatsapp-float:visited {
  color: transparent !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.whatsapp-float::before, .whatsapp-float::after {
  content: none !important;
  display: none !important;
}
.whatsapp-float span, .whatsapp-float small, .whatsapp-float strong {
  display: none !important;
}
.whatsapp-float svg {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  fill: currentColor;
  color: #090C10 !important;
}

@media (max-width: 720px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(5,8,14,.90) 0%, rgba(5,8,14,.80) 42%, rgba(5,8,14,.96) 100%),
      url("assets/img/hero-bogota-real.webp") center center / cover no-repeat !important;
  }
  .camera-stage--photo {
    width: min(100%, 300px);
    height: 220px;
  }
  .camera-photo {
    width: min(100%, 275px);
  }
  .camera-signal {
    right: 2px;
    top: 64px;
    width: 58px;
    height: 58px;
  }
}


/* =========================================================
   SEGELECT v14.1 · Cámara final integrada por referencia del cliente
   ========================================================= */
.camera-stage--photo {
  width: min(100%, 390px);
  height: 286px;
}
.camera-photo-wrap::before {
  inset: 28px 18px auto 18px;
  height: 176px;
  background: radial-gradient(circle at center, rgba(232,192,48,.18), rgba(97,214,255,.10) 42%, transparent 72%);
}
.camera-photo {
  width: min(100%, 360px);
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.38));
  animation: hikvisionSweepFinal 6.4s ease-in-out infinite;
}
.camera-signal {
  right: 6px;
  top: 84px;
  width: 82px;
  height: 82px;
}
@keyframes hikvisionSweepFinal {
  0%, 100% { transform: rotate(-10deg) translateX(-10px) translateY(0); }
  50% { transform: rotate(10deg) translateX(10px) translateY(-2px); }
}
@media (max-width: 720px) {
  .camera-stage--photo {
    width: min(100%, 312px);
    height: 232px;
  }
  .camera-photo {
    width: min(100%, 292px);
  }
  .camera-signal {
    right: 0;
    top: 68px;
    width: 62px;
    height: 62px;
  }
}


/* =============================================
   SEGELECT — Animated Brand Marquee
   ============================================= */
.brand-marquee-section {
  position: relative;
  padding: clamp(4.6rem, 7vw, 7.2rem) 0 4.8rem;
  overflow: hidden;
  border-block: 1px solid rgba(232,192,48,.11);
  background:
    radial-gradient(circle at 16% 18%, rgba(232,192,48,.12), transparent 26rem),
    radial-gradient(circle at 86% 40%, rgba(242,213,107,.07), transparent 30rem),
    linear-gradient(180deg, rgba(7,11,16,.72), rgba(13,18,24,.92));
}
.brand-marquee-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(232,192,48,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,192,48,.08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}
.brand-marquee-heading {
  position: relative;
  z-index: 2;
  max-width: 830px;
  margin-bottom: 2.4rem;
}
.brand-marquee-heading h2 {
  margin-top: .95rem;
  max-width: 790px;
  font-size: clamp(2rem, 3.8vw, 3.55rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 950;
}
.brand-marquee-heading p:not(.section-kicker) {
  max-width: 720px;
  margin-top: 1rem;
  color: var(--muted);
}
.brand-marquee-shell {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.35rem;
}
.brand-marquee-glow {
  position: absolute;
  inset: 12% 12% auto;
  height: 120px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(232,192,48,.18), transparent);
  filter: blur(34px);
  pointer-events: none;
}
.brand-marquee-line {
  position: relative;
  overflow: hidden;
  padding: .4rem 0;
}
.brand-marquee-line::before,
.brand-marquee-line::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(15vw, 190px);
  z-index: 3;
  pointer-events: none;
}
.brand-marquee-line::before { left: 0; background: linear-gradient(90deg, #090d12 0%, rgba(9,13,18,0) 100%); }
.brand-marquee-line::after { right: 0; background: linear-gradient(270deg, #090d12 0%, rgba(9,13,18,0) 100%); }
.brand-marquee-track {
  width: max-content;
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding-inline: 1rem;
  animation: sgBrandMarqueeForward 42s linear infinite;
  will-change: transform;
}
.brand-marquee-line:hover .brand-marquee-track { animation-play-state: paused; }
.brand-marquee-card {
  min-width: clamp(178px, 18vw, 248px);
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  padding: 1rem 1rem .95rem;
  border: 1px solid rgba(232,192,48,.18);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    linear-gradient(180deg, rgba(21,31,41,.78), rgba(7,11,16,.84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 20px 50px rgba(0,0,0,.22);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
  text-align: center;
}
.brand-marquee-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,192,48,.42);
  background:
    radial-gradient(circle at 20% 0%, rgba(232,192,48,.18), transparent 9rem),
    linear-gradient(180deg, rgba(21,31,41,.92), rgba(7,11,16,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 22px 56px rgba(0,0,0,.28);
}
.brand-marquee-logo-wrap {
  width: 100%;
  min-height: 54px;
  display: grid;
  place-items: center;
}
.brand-marquee-logo {
  display: block;
  width: auto;
  max-width: 88%;
  max-height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.28));
}
.brand-marquee-card small {
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: .105em;
  font-size: .63rem;
  line-height: 1.35;
  font-weight: 850;
  opacity: .82;
}
.brand-marquee-caption {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  padding-top: .25rem;
}
.brand-marquee-caption span {
  padding: .62rem .9rem;
  border: 1px solid rgba(232,192,48,.16);
  border-radius: 999px;
  color: rgba(247,241,223,.78);
  background: rgba(255,255,255,.032);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.brand-marquee-note {
  margin: .35rem auto 0;
  max-width: 1100px;
  color: rgba(247,241,223,.58);
  font-size: .78rem;
  line-height: 1.55;
  text-align: center;
}
@keyframes sgBrandMarqueeForward {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (max-width: 720px) {
  .brand-marquee-section { padding: 4rem 0 3.6rem; }
  .brand-marquee-heading { text-align: left; }
  .brand-marquee-card { min-width: 182px; min-height: 106px; border-radius: 18px; }
  .brand-marquee-track { gap: .75rem; animation-duration: 34s; }
  .brand-marquee-caption { justify-content: flex-start; }
  .brand-marquee-caption span { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track { animation: none !important; transform: translateX(0); flex-wrap: wrap; width: auto; justify-content: center; }
  .brand-marquee-line { overflow: visible; }
}


@media (max-width: 980px) {
  .timeline-card {
    grid-template-columns: 1fr 230px;
  }
  .trust-card {
    grid-template-columns: minmax(0,1fr) 148px;
  }
}

@media (max-width: 720px) {
  .timeline-card,
  .trust-card {
    grid-template-columns: 1fr;
  }
  .timeline-card-copy,
  .trust-card-copy {
    padding-right: 1.1rem;
  }
  .timeline-visual {
    min-height: 150px;
    border-left: 0;
    border-top: 1px solid rgba(232,192,48,.10);
  }
  .trust-card-visual {
    min-height: 120px;
    border-left: 0;
    border-top: 1px solid rgba(232,192,48,.10);
  }
  .timeline-card strong { font-size: 1rem; }
  .timeline-card h3 { font-size: 1.22rem; }
  .trust-card-copy strong { font-size: 1.06rem; }
  .trust-card-copy span,
  .timeline-card p { font-size: .92rem; }
}