/* =========================================================
   LevelTeam V28 · CCTV restyle 2026-10-12
   ========================================================= */
.cctv-restyle .cctv-hero{
  position:relative;
  overflow:hidden;
  padding:72px 24px 48px;
  background:linear-gradient(135deg,#001f3d 0%,#022745 58%,#06324f 100%);
}
.cctv-restyle .cctv-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 76% 25%,rgba(0,187,255,.13),transparent 25%),
    radial-gradient(circle at 22% 78%,rgba(0,102,182,.12),transparent 30%),
    linear-gradient(135deg,rgba(0,22,47,.18),rgba(0,0,0,0));
  pointer-events:none;
}
.cctv-restyle .cctv-hero .grid{
  opacity:.22;
  background-image:linear-gradient(rgba(94,182,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(94,182,235,.06) 1px,transparent 1px);
  background-size:58px 58px;
}
.cctv-restyle .cctv-hero-inner{
  max-width:1440px;
  grid-template-columns:minmax(0,.92fr) minmax(650px,1.28fr);
  gap:24px;
  align-items:center;
}
.cctv-restyle .cctv-hero-copy{position:relative;z-index:3;min-width:0}
.cctv-restyle .cctv-hero .crumbs{margin-bottom:28px;color:#8fabca}
.cctv-restyle .cctv-hero .eyebrow{font-size:10px;color:#c1d1e3;letter-spacing:.15em}
.cctv-restyle .cctv-hero h1{
  margin-top:26px;
  max-width:650px;
  font-size:clamp(58px,5.15vw,86px);
  line-height:.98;
  letter-spacing:-.055em;
  color:#fff;
}
.cctv-restyle .cctv-hero h1 span{color:#08a7f3}
.cctv-restyle .cctv-hero p{
  max-width:650px;
  margin-top:24px;
  font-size:17px;
  line-height:1.55;
  color:#d0deea;
}
.cctv-restyle .cctv-hero .actions{margin-top:26px}
.cctv-restyle .cctv-hero .btn{min-height:54px;padding:0 26px}
.cctv-restyle .cctv-hero .hot{background:linear-gradient(90deg,#f23630,#ef2727);box-shadow:0 14px 30px rgba(239,45,45,.18)}
.cctv-restyle .cctv-hero .line{border-color:rgba(102,190,242,.44);background:rgba(0,31,63,.26)}

.cctv-mini-benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
  max-width:690px;
}
.cctv-mini-benefits>div{display:flex;align-items:center;gap:10px;min-width:0}
.cctv-mini-benefits i{
  flex:0 0 42px;
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(0,173,255,.55);
  background:rgba(0,63,105,.45);
  position:relative;
  box-shadow:inset 0 0 20px rgba(0,159,255,.06);
}
.cctv-mini-benefits span{min-width:0}
.cctv-mini-benefits strong{display:block;font-size:11px;line-height:1.2;color:#fff}
.cctv-mini-benefits small{display:block;margin-top:3px;font-size:10px;line-height:1.3;color:#b9cadb}
.cctv-mini-benefits i:before,.cctv-mini-benefits i:after{content:"";position:absolute}
.cctv-mini-benefits .ico-camera:before{width:18px;height:11px;border:2px solid #04adff;border-radius:3px;left:10px;top:14px}
.cctv-mini-benefits .ico-camera:after{width:6px;height:6px;border:2px solid #04adff;border-radius:50%;left:17px;top:16px}
.cctv-mini-benefits .ico-monitor:before{width:20px;height:14px;border:2px solid #04adff;border-radius:2px;left:9px;top:10px}
.cctv-mini-benefits .ico-monitor:after{width:12px;height:2px;background:#04adff;left:14px;top:29px;box-shadow:0 -4px 0 -1px #04adff}
.cctv-mini-benefits .ico-rec:before{width:19px;height:18px;border:2px solid #04adff;border-radius:4px;left:10px;top:10px}
.cctv-mini-benefits .ico-rec:after{width:4px;height:4px;border-radius:50%;background:#04adff;left:15px;top:15px;box-shadow:8px 0 0 #04adff,0 7px 0 #04adff,8px 7px 0 #04adff}
.cctv-mini-benefits .ico-gear:before{width:16px;height:16px;border:3px solid #04adff;border-radius:50%;left:10px;top:10px}
.cctv-mini-benefits .ico-gear:after{width:4px;height:4px;background:#04adff;border-radius:50%;left:16px;top:16px;box-shadow:0 -11px 0 #04adff,0 11px 0 #04adff,11px 0 0 #04adff,-11px 0 0 #04adff}

.cctv-hero-scene{
  position:relative;
  z-index:2;
  align-self:center;
  margin:0 -6vw 0 -3.2vw;
  min-width:0;
  overflow:visible;
}
.cctv-hero-scene img{
  display:block;
  width:118%;
  max-width:none;
  height:auto;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 30px 48px rgba(0,10,26,.18));
  animation:cctvSceneFloat 15s ease-in-out infinite;
}
@keyframes cctvSceneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.cctv-restyle .cctv-value{
  background:linear-gradient(145deg,#eef6ff,#fbfdff 58%,#edf5fd);
  padding:72px 24px 82px;
}
.cctv-value-head{
  max-width:1240px;
  margin:0 auto 34px;
  display:grid;
  grid-template-columns:.45fr 1.55fr;
  gap:46px;
  align-items:start;
}
.cctv-value-head .section-kicker{display:flex;align-items:center;gap:14px;padding-top:8px}
.cctv-value-head .section-kicker i{width:42px;height:2px;background:#ef3030;border-radius:99px}
.cctv-value-head .section-kicker span{font-size:12px;font-weight:900;letter-spacing:.17em;color:#345b84}
.cctv-value-head h2{
  margin:0;
  color:#07172b;
  font-size:clamp(42px,4.1vw,66px);
  line-height:.98;
  letter-spacing:-.048em;
}
.cctv-value-head h2 span{color:#0b8df0}
.cctv-value-head p{margin:14px 0 0;max-width:860px;font-size:17px;line-height:1.55;color:#627994}
.cctv-value-grid{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.cctv-value-card{
  position:relative;
  min-height:210px;
  padding:24px 22px 22px 108px;
  border:1px solid rgba(31,91,150,.10);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:0 16px 44px rgba(26,66,108,.055);
}
.cctv-value-icon{
  position:absolute;
  left:24px;top:24px;
  width:62px;height:62px;border-radius:50%;
  background:#e8f3ff;
}
.cctv-value-icon:before,.cctv-value-icon:after{content:"";position:absolute}
.cctv-value-card h3{margin:4px 0 8px;font-size:20px;line-height:1.15;letter-spacing:-.025em;color:#0a1a2f}
.cctv-value-card p{margin:0;font-size:13px;line-height:1.55;color:#617590}
.cctv-value-card:after{content:"";position:absolute;left:22px;bottom:16px;width:58px;height:4px;border-radius:99px;background:#0c8cf0}

.ico-prevention:before{width:28px;height:17px;border:3px solid #078cf2;border-radius:4px;left:14px;top:20px}
.ico-prevention:after{width:9px;height:9px;border:3px solid #078cf2;border-radius:50%;left:23px;top:24px}
.ico-remote:before{width:30px;height:21px;border:3px solid #078cf2;border-radius:3px;left:13px;top:13px}
.ico-remote:after{width:18px;height:3px;background:#078cf2;left:21px;top:42px;box-shadow:0 -6px 0 -1px #078cf2}
.ico-analytics:before{width:7px;height:20px;background:#078cf2;left:14px;bottom:13px;box-shadow:11px -8px 0 #078cf2,22px -17px 0 #078cf2}
.ico-analytics:after{width:34px;height:3px;background:#078cf2;left:13px;bottom:12px}
.ico-storage:before{width:34px;height:12px;border:3px solid #078cf2;border-radius:4px;left:11px;top:14px;box-shadow:0 17px 0 -3px #e8f3ff,0 17px 0 0 #078cf2}
.ico-storage:after{width:4px;height:4px;border-radius:50%;background:#078cf2;left:18px;top:20px;box-shadow:0 17px 0 #078cf2}

/* Make the generic copy elsewhere consistent with the broader positioning. */
.cctv-restyle .content:not(.cctv-value) .section-head h2{color:#0b2345}
.cctv-restyle .content.dark .section-head h2{color:#fff}

@media(max-width:1240px){
  .cctv-restyle .cctv-hero-inner{grid-template-columns:minmax(0,.92fr) minmax(560px,1.12fr);gap:18px}
  .cctv-restyle .cctv-hero h1{font-size:clamp(54px,5vw,76px)}
  .cctv-hero-scene{margin-right:-7vw;margin-left:-4vw}
  .cctv-hero-scene img{width:120%}
  .cctv-mini-benefits{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
}
@media(max-width:1000px){
  .cctv-restyle .cctv-hero{padding-top:58px}
  .cctv-restyle .cctv-hero-inner{grid-template-columns:1fr;gap:18px}
  .cctv-restyle .cctv-hero h1{max-width:720px}
  .cctv-restyle .cctv-hero p{max-width:760px}
  .cctv-hero-scene{margin:-4px -6vw -18px -6vw}
  .cctv-hero-scene img{width:108%;margin:0 auto}
  .cctv-value-head{grid-template-columns:1fr;gap:14px}
  .cctv-value-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .cctv-restyle .cctv-hero{padding:54px 18px 28px}
  .cctv-restyle .cctv-hero .crumbs{font-size:9px;margin-bottom:20px}
  .cctv-restyle .cctv-hero .eyebrow{font-size:8px}
  .cctv-restyle .cctv-hero h1{font-size:clamp(45px,13vw,60px);line-height:.96;margin-top:18px}
  .cctv-restyle .cctv-hero p{font-size:15.5px;line-height:1.58;margin-top:20px}
  .cctv-restyle .cctv-hero .actions{display:grid;grid-template-columns:1fr;margin-top:22px}
  .cctv-restyle .cctv-hero .btn{width:100%}
  .cctv-mini-benefits{grid-template-columns:1fr 1fr;gap:12px 8px;margin-top:22px}
  .cctv-mini-benefits i{width:38px;height:38px;flex-basis:38px}
  .cctv-mini-benefits strong{font-size:10px}.cctv-mini-benefits small{font-size:9px}
  .cctv-hero-scene{margin:6px -26vw -8px -18vw}
  .cctv-hero-scene img{width:136%}
  .cctv-restyle .cctv-value{padding:54px 18px 60px}
  .cctv-value-head h2{font-size:clamp(38px,11.5vw,52px)}
  .cctv-value-head p{font-size:15px}
  .cctv-value-grid{grid-template-columns:1fr;gap:12px}
  .cctv-value-card{min-height:0;padding:22px 20px 22px 96px}
  .cctv-value-icon{left:20px;top:20px;width:58px;height:58px}
}
@media(prefers-reduced-motion:reduce){
  .cctv-hero-scene img{animation-duration:24s}
}

/* =========================================================
   LevelTeam V29 · CCTV hero aligned with Wi‑Fi language
   ========================================================= */
.cctv-restyle .cctv-hero{
  background:linear-gradient(135deg,#001f3d 0%,#03294a 58%,#0a395d 100%);
}
.cctv-restyle .cctv-hero-inner{
  grid-template-columns:minmax(0,.9fr) minmax(620px,1.12fr);
  gap:18px;
  align-items:center;
}
.cctv-restyle .cctv-hero p{max-width:640px}
.cctv-hero-scene{
  margin:4px -5vw -8px -2.5vw;
}
.cctv-hero-scene img{
  width:108%;
  max-width:none;
  filter:none;
  image-rendering:auto;
  animation:cctvSceneFloat 18s ease-in-out infinite;
}
@media(max-width:1200px){
  .cctv-restyle .cctv-hero-inner{grid-template-columns:minmax(0,.95fr) minmax(520px,1.05fr);gap:14px}
  .cctv-hero-scene{margin:6px -5vw -10px -3vw}
  .cctv-hero-scene img{width:110%}
}
@media(max-width:980px){
  .cctv-restyle .cctv-hero-inner{grid-template-columns:1fr;gap:18px}
  .cctv-hero-scene{margin:0 -5vw -8px -5vw}
  .cctv-hero-scene img{width:106%;margin:0 auto}
}
@media(max-width:560px){
  .cctv-restyle .cctv-hero{padding:54px 18px 28px}
  .cctv-hero-scene{margin:6px -14vw -6px -12vw}
  .cctv-hero-scene img{width:120%;margin:0 auto}
}


/* =========================================================
   LevelTeam V34 · Ajuste mobile CCTV hero
   ========================================================= */
@media(max-width:560px){
  .cctv-hero-scene{
    margin:6px -8vw -6px -8vw;
  }
  .cctv-hero-scene img{
    width:112%;
    margin:0 auto;
  }
}

/* =========================================================
   LevelTeam V35 · Mobile final CCTV
   ========================================================= */
@media(max-width:640px){
  body.cctv-restyle{overflow-x:clip}
  .cctv-restyle .cctv-hero{padding:58px 16px 30px}
  .cctv-restyle .cctv-hero-inner{
    grid-template-columns:minmax(0,1fr) !important;
    gap:22px;
    width:100%;
  }
  .cctv-restyle .cctv-hero-inner > *{min-width:0;width:100%}
  .cctv-restyle .cctv-hero h1{
    font-size:clamp(40px,11.5vw,52px);
    line-height:1.01;
    max-width:100%;
  }
  .cctv-restyle .cctv-hero p{font-size:15.5px;line-height:1.58;max-width:100%}
  .cctv-restyle .cctv-hero .actions{display:grid;grid-template-columns:1fr;gap:10px}
  .cctv-restyle .cctv-hero .btn{width:100%}
  .cctv-restyle .cctv-mini-benefits{grid-template-columns:1fr 1fr;gap:12px 10px;max-width:none}
  .cctv-hero-scene{
    width:100%;
    margin:8px 0 0;
    overflow:visible;
  }
  .cctv-hero-scene img{
    width:100%;
    max-width:100%;
    margin:0 auto;
    transform:none;
  }
}