/* ============================================================================
   CCTV & ACCESO — división de Seguridad Electrónica (Interfaz).
   AISLADO: solo bajo body.cc. Prefijo .cc-.
   Identidad: azul noche + grafito + AZUL ELÉCTRICO (distinta del cyan de
   Redes & TI y del rojo/negro de Producción AV). Rojo Interfaz en dosis mínima.
   Reutiliza el header global (header.css, clases .hx-) con hrefs reales.
   ============================================================================ */
.cc{
  --cc-bg:#080c14; --cc-bg2:#0c1220; --cc-panel:#111a2b; --cc-panel2:#16203400;
  --cc-panel-s:#152036; --cc-line:#1e293f; --cc-line2:#2b3a57;
  --cc-ink:#eef2f9; --cc-mut:#93a3bd; --cc-faint:#63739180;
  --cc-blue:#3b82f6; --cc-blue2:#60a5fa; --cc-cyan:#22d3ee; --cc-red:#e50914;
  --cc-sans:'Barlow',system-ui,-apple-system,sans-serif;
  background:var(--cc-bg); color:var(--cc-ink); font-family:var(--cc-sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.cc .wrap{max-width:1220px;margin:0 auto;padding:0 26px}
.cc h1,.cc h2,.cc h3{font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.06;margin:0}
.cc p{margin:0}
.cc a{color:inherit;text-decoration:none}
.cc img{max-width:100%;display:block}
.cc :focus-visible{outline:2px solid var(--cc-blue2);outline-offset:3px;border-radius:5px}
.cc-eyebrow{display:inline-flex;align-items:center;gap:11px;color:var(--cc-blue2);font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.cc-eyebrow::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--cc-blue),transparent)}

/* ---------- HEADER GLOBAL (hx-) adaptado a la landing ---------- */
/* El header se queda "fixed" (igual que en el resto del sitio) — un
   position:sticky aquí lo haría comportarse distinto solo en esta página
   y descuadraría el padding-top:var(--nav-h) del .lp base. */
.cc .hx-util-right .hx-tel{color:var(--cc-blue2)}
.cc .hx-logo img{height:52px;width:auto}
/* los SVG de ic() no traen width/height: los dimensionamos dentro del header */
.cc .hx-util svg{width:13px;height:13px;flex:0 0 auto}
.cc .hx-util .hx-ui,.cc .hx-util .hx-tel,.cc .hx-util .hx-uwa{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cc .hx-util-left,.cc .hx-util-right{display:flex;align-items:center;gap:16px;min-width:0}
.cc .hx-act svg{width:17px;height:17px;flex:0 0 auto}
.cc .hx-act--cta{display:inline-flex;align-items:center;gap:8px}
.cc .hx-navitem>a svg{width:12px;height:12px}
.cc .hx-mega-card .vt{white-space:nowrap}
/* CCTV es el último item del nav: su mega se alinea a la derecha para no salirse */
.cc .hx-nav .hx-navitem:last-child .hx-mega{left:auto;right:0}
/* móvil: el header global oculta el nav esperando la hamburguesa (JS del SPA).
   Aquí no hay router, así que mostramos el nav como tira deslizable. */
@media(max-width:860px){
  .cc .hx-nav{display:block!important}
  .cc .hx-nav .hx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;height:auto;padding-top:6px;padding-bottom:6px}
  .cc .hx-nav .hx-wrap::-webkit-scrollbar{display:none}
  .cc .hx-navitem>a{white-space:nowrap;font-size:13.5px}
  .cc .hx-mega{display:none!important}          /* mega menú no aplica en móvil */
  .cc .hx-nav-spacer,.cc .hx-nav-right{display:none}
  .cc .hx-main .hx-wrap{grid-template-columns:auto 1fr;grid-template-areas:"logo actions";row-gap:0}
  .cc .hx-logo img{height:40px}
}

/* ---------- botones ---------- */
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:11px;
  font-weight:700;font-size:15px;border:1px solid transparent;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s}
.cc-btn svg{width:17px;height:17px;flex:0 0 auto}
.cc-btn-p{background:var(--cc-blue);color:#fff;box-shadow:0 10px 26px rgba(59,130,246,.32)}
.cc-btn-p:hover{background:#2f74e8;transform:translateY(-2px)}
.cc-btn-wa{background:#25d366;color:#04331b}
.cc-btn-wa:hover{filter:brightness(1.06);transform:translateY(-2px)}
.cc-btn-o{border-color:var(--cc-line2);color:#dbe5f5;background:rgba(255,255,255,.03)}
.cc-btn-o:hover{border-color:var(--cc-blue2);transform:translateY(-2px)}

/* ---------- HERO editorial 2 columnas ---------- */
.cc-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--cc-line);
  background:radial-gradient(120% 120% at 0% 0%,#0d1730 0%,#080d18 55%,#06090f 100%)}
.cc-hero-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(59,130,246,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(59,130,246,.07) 1px,transparent 1px);
  background-size:58px 58px;mask-image:radial-gradient(75% 75% at 25% 35%,#000,transparent 78%)}
.cc-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;
  gap:52px;align-items:center;padding:74px 26px 78px}
.cc-hero h1{font-size:clamp(34px,4.6vw,56px);margin:18px 0 0;text-wrap:balance;color:#fff}
.cc-hero h1 .ac{background:linear-gradient(92deg,var(--cc-blue2),var(--cc-cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cc-hero-sub{color:#c3d0e4;font-size:clamp(16px,1.6vw,18.5px);margin-top:18px;line-height:1.6;max-width:54ch}
.cc-hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.cc-hero-tags span{font-size:12.5px;font-weight:600;color:#c9d6ea;border:1px solid var(--cc-line2);
  background:rgba(59,130,246,.07);border-radius:999px;padding:6px 13px}
.cc-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* foto: presencia editorial, se extiende al borde derecho */
.cc-hero-media{position:relative;border-radius:22px 0 0 22px;overflow:hidden;border:1px solid var(--cc-line2);
  border-right:0;box-shadow:0 30px 80px rgba(2,7,18,.7);aspect-ratio:3/2;
  margin-right:calc((100vw - min(100vw,1220px))/-2 - 26px)}
.cc-hero-media img{width:100%;height:100%;object-fit:cover}
.cc-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,12,20,.72),rgba(8,12,20,.12) 42%,transparent 70%)}
.cc-hero-badge{position:absolute;left:18px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;color:#e6eefb;background:rgba(8,12,20,.72);border:1px solid var(--cc-line2);
  border-radius:999px;padding:8px 15px;backdrop-filter:blur(6px)}
.cc-hero-badge i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.22)}
.cc-trust{display:flex;gap:30px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--cc-line)}
.cc-trust .t b{display:block;font-size:21px;font-weight:800;color:#fff;line-height:1.1}
.cc-trust .t span{font-size:12.5px;color:var(--cc-mut)}

/* ---------- secciones ---------- */
.cc-sec{padding:80px 0;border-bottom:1px solid var(--cc-line);position:relative}
.cc-sec.alt{background:var(--cc-bg2)}
.cc-head{max-width:780px}
.cc-head .cc-eyebrow{margin-bottom:14px}
.cc-head h2{font-size:clamp(27px,3.3vw,42px);color:#fff}
.cc-head h2 .ac{color:var(--cc-blue2)}
.cc-head p{color:var(--cc-mut);font-size:17px;margin-top:14px;line-height:1.6}

/* capacidades */
.cc-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.cc-cap{background:var(--cc-panel);border:1px solid var(--cc-line);border-radius:15px;padding:24px 22px;
  position:relative;overflow:hidden;transition:border-color .22s,transform .22s,background .22s}
.cc-cap::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--cc-blue),var(--cc-cyan));transition:width .35s ease}
.cc-cap:hover{border-color:var(--cc-line2);transform:translateY(-4px);background:var(--cc-panel-s)}
.cc-cap:hover::before{width:100%}
.cc-cap .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  color:var(--cc-blue2);border:1px solid var(--cc-line);
  background:linear-gradient(150deg,rgba(59,130,246,.16),rgba(34,211,238,.06))}
.cc-cap .ic svg{width:23px;height:23px}
.cc-cap h3{font-size:17.5px;color:#fff}
.cc-cap p{font-size:13.5px;color:var(--cc-mut);margin-top:8px;line-height:1.55}

/* flujo problema → soporte */
.cc-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:32px;
  border:1px solid var(--cc-line);border-radius:16px;overflow:hidden;background:var(--cc-panel)}
.cc-fl{padding:24px 20px;border-right:1px solid var(--cc-line);position:relative}
.cc-fl:last-child{border-right:none}
.cc-fl .k{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cc-blue2)}
.cc-fl h3{font-size:15.5px;color:#fff;margin-top:10px}
.cc-fl p{font-size:12.5px;color:var(--cc-mut);margin-top:6px;line-height:1.5}

/* soluciones por sector */
.cc-sol{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
.cc-sol-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--cc-line);
  min-height:290px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.cc-sol-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s}
.cc-sol-card:hover img{transform:scale(1.05)}
.cc-sol-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,10,18,.2),rgba(6,10,18,.62) 52%,rgba(6,10,18,.94))}
.cc-sol-card>*{position:relative;z-index:2}
.cc-sol-card h3{font-size:21px;color:#fff}
.cc-sol-card ul{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.cc-sol-card li{font-size:12.5px;color:#cfdcef;border:1px solid rgba(255,255,255,.16);
  background:rgba(8,14,26,.5);border-radius:999px;padding:5px 11px}

/* proceso 8 pasos */
.cc-proc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.cc-step{background:var(--cc-panel);border:1px solid var(--cc-line);border-radius:14px;padding:20px 18px;
  position:relative;transition:border-color .22s,transform .22s}
.cc-step:hover{border-color:var(--cc-blue);transform:translateY(-3px)}
.cc-step .num{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--cc-blue2);
  display:inline-flex;align-items:center;gap:8px}
.cc-step .num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--cc-line2),transparent);min-width:22px}
.cc-step h3{font-size:15.5px;color:#fff;margin-top:11px}
.cc-step p{font-size:12.5px;color:var(--cc-mut);margin-top:6px;line-height:1.5}

/* diagrama de integración (HTML/CSS/SVG real) */
.cc-diagram{margin-top:34px;border:1px solid var(--cc-line);border-radius:18px;background:var(--cc-panel);
  padding:30px 24px;overflow-x:auto}
.cc-dflow{display:flex;align-items:stretch;gap:0;min-width:min-content}
.cc-dnode{flex:1 1 0;min-width:132px;text-align:center;padding:0 6px}
.cc-dnode .box{border:1px solid var(--cc-line2);border-radius:13px;padding:17px 12px;height:100%;
  background:linear-gradient(160deg,rgba(59,130,246,.1),rgba(17,26,43,.4));transition:border-color .22s,transform .22s}
.cc-dnode:hover .box{border-color:var(--cc-blue);transform:translateY(-3px)}
.cc-dnode .ic{width:40px;height:40px;margin:0 auto 11px;border-radius:11px;display:grid;place-items:center;
  color:var(--cc-blue2);background:rgba(59,130,246,.14);border:1px solid var(--cc-line2)}
.cc-dnode .ic svg{width:20px;height:20px}
.cc-dnode b{display:block;font-size:13.5px;color:#fff;font-weight:700;line-height:1.25}
.cc-dnode span{display:block;font-size:11.5px;color:var(--cc-mut);margin-top:5px;line-height:1.4}
.cc-darrow{flex:0 0 34px;display:flex;align-items:center;justify-content:center;color:var(--cc-line2)}
.cc-darrow svg{width:22px;height:22px}
.cc-dnote{margin-top:16px;font-size:12.5px;color:var(--cc-faint);text-align:center}

/* equipos / categorías */
.cc-catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}
.cc-catgrid span{display:flex;align-items:center;gap:10px;background:var(--cc-panel);border:1px solid var(--cc-line);
  border-radius:11px;padding:14px 15px;font-size:14px;color:#dae4f4;font-weight:600;transition:.2s}
.cc-catgrid span:hover{border-color:var(--cc-blue);transform:translateY(-2px)}
.cc-catgrid span svg{width:18px;height:18px;color:var(--cc-blue2);flex:0 0 auto}
.cc-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:20px}
.cc-prod{background:var(--cc-panel);border:1px solid var(--cc-line);border-radius:15px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .22s,transform .22s,box-shadow .22s}
.cc-prod:hover{border-color:var(--cc-line2);transform:translateY(-4px);box-shadow:0 18px 44px rgba(2,7,18,.55)}
.cc-prod-img{aspect-ratio:1/1;overflow:hidden;background:#fff;display:grid;place-items:center;padding:20px}
.cc-prod-img img{width:100%;height:100%;object-fit:contain;object-position:center center;transition:transform .45s}
.cc-prod:hover .cc-prod-img img{transform:scale(1.05)}
.cc-prod-body{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.cc-prod .brand{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cc-blue2)}
.cc-prod h3{font-size:16px;color:#fff;margin-top:4px;line-height:1.25}
.cc-prod p{font-size:13px;color:var(--cc-mut);margin-top:7px;line-height:1.5}
.cc-prod .go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--cc-blue2)}
.cc-prod .go svg{width:15px;height:15px}

/* marcas */
.cc-marcas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}
.cc-marcas span{background:var(--cc-panel);border:1px solid var(--cc-line);border-radius:9px;padding:12px 20px;
  color:#dbe4f3;font-weight:700;letter-spacing:.03em;font-size:15px}
.cc-marcas .note{width:100%;color:var(--cc-faint);font-size:12.5px;background:none;border:0;padding:4px 0 0}

/* cross-sell */
.cc-cross{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
.cc-cross a{display:flex;align-items:center;gap:12px;background:var(--cc-panel);border:1px solid var(--cc-line);
  border-radius:12px;padding:15px 16px;transition:.2s}
.cc-cross a:hover{border-color:var(--cc-blue);transform:translateY(-3px);background:var(--cc-panel-s)}
.cc-cross .ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  color:var(--cc-blue2);background:rgba(59,130,246,.12)}
.cc-cross .ic svg{width:19px;height:19px}
.cc-cross b{font-size:14.5px;color:#fff;font-weight:700;display:block}
.cc-cross i{font-style:normal;font-size:12px;color:var(--cc-mut);display:block;margin-top:1px}

/* CTA final + formulario */
.cc-cta{position:relative;padding:86px 0;overflow:hidden;
  background:linear-gradient(118deg,#0a1226,#0d1b38 55%,#0a1730)}
.cc-cta-grid{position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(59,130,246,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(59,130,246,.08) 1px,transparent 1px);
  background-size:62px 62px;mask-image:radial-gradient(80% 80% at 72% 28%,#000,transparent 76%)}
.cc-cta .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.cc-cta h2{font-size:clamp(29px,3.7vw,47px);color:#fff;text-wrap:balance}
.cc-cta h2 .ac{color:var(--cc-blue2)}
.cc-cta .lead{color:#c6d4e9;font-size:18px;margin-top:18px;line-height:1.55;max-width:46ch}
.cc-cta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cc-cta-contact{margin-top:28px;display:flex;flex-direction:column;gap:11px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.cc-cta-contact a,.cc-cta-contact span{display:inline-flex;align-items:center;gap:11px;color:#c6d4e9;font-size:15px}
.cc-cta-contact a:hover{color:#fff}
.cc-cta-contact svg{width:18px;height:18px;color:var(--cc-blue2);flex:0 0 auto}
.cc-form{background:rgba(8,13,24,.74);backdrop-filter:blur(8px);border:1px solid var(--cc-line2);
  border-radius:18px;padding:28px}
.cc-form h3{font-size:21px;color:#fff}
.cc-form .fnote{color:var(--cc-mut);font-size:13px;margin:5px 0 18px}
.cc-form form{display:grid;gap:12px}
.cc-form label{font-size:12.5px;color:var(--cc-mut);font-weight:600;margin-bottom:-6px}
.cc-form input,.cc-form select,.cc-form textarea{width:100%;background:rgba(5,9,17,.72);border:1px solid var(--cc-line2);
  border-radius:10px;padding:12px 14px;color:#eef2f9;font-family:inherit;font-size:14.5px}
.cc-form input:focus,.cc-form select:focus,.cc-form textarea:focus{outline:none;border-color:var(--cc-blue)}
.cc-form select option{background:#0d1424;color:#eef2f9}
.cc-form button{margin-top:6px;background:var(--cc-blue);color:#fff;border:none;border-radius:11px;padding:14px;
  font-weight:800;font-size:15.5px;cursor:pointer;transition:background .2s}
.cc-form button:hover{background:#2f74e8}
.cc-form .ok{display:none;margin-top:14px;color:#34d399;font-weight:600}
.cc-form.sent form{display:none}.cc-form.sent .ok{display:block}

/* footer + reveal */
.cc.lp .lp-foot{background:var(--cc-bg2);border-top:1px solid var(--cc-line);color:var(--cc-mut)}
.cc.lp .lp-foot a{color:#bccbe0}.cc.lp .lp-foot a:hover{color:#fff}
.cc-reveal{transition:opacity .6s ease,transform .6s ease}
.cc-anim .cc-reveal{opacity:0;transform:translateY(20px)}
.cc-anim .cc-reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .cc-hero .wrap{grid-template-columns:1fr;gap:36px;padding:56px 26px 60px}
  .cc-hero-media{margin-right:0;border-radius:18px;border-right:1px solid var(--cc-line2);order:-1;aspect-ratio:16/9}
  .cc-caps{grid-template-columns:repeat(2,1fr)}
  .cc-flow{grid-template-columns:repeat(2,1fr)}
  .cc-fl{border-bottom:1px solid var(--cc-line)}
  .cc-sol{grid-template-columns:1fr}
  .cc-proc{grid-template-columns:repeat(2,1fr)}
  .cc-catgrid{grid-template-columns:repeat(2,1fr)}
  .cc-prods{grid-template-columns:repeat(2,1fr)}
  .cc-cross{grid-template-columns:repeat(2,1fr)}
  .cc-cta .wrap{grid-template-columns:1fr;gap:34px}
  /* diagrama: vertical desde tablet (evita scroll lateral incómodo) */
  .cc-diagram{overflow-x:visible}
  .cc-dflow{flex-direction:column;min-width:0}
  .cc-darrow{flex:0 0 30px;transform:rotate(90deg)}
  .cc-dnode{min-width:0}
}
@media (max-width:600px){
  .cc-sec{padding:54px 0}
  .cc-caps{grid-template-columns:1fr}
  .cc-flow{grid-template-columns:1fr}
  .cc-fl{border-right:none}
  .cc-proc{grid-template-columns:1fr}
  .cc-catgrid{grid-template-columns:1fr}
  .cc-prods{grid-template-columns:1fr}
  .cc-cross{grid-template-columns:1fr}
  .cc-ctas .cc-btn{flex:1 1 100%}
  .cc-trust{gap:20px}
  /* diagrama: vertical en móvil */
  .cc-dflow{flex-direction:column;min-width:0}
  .cc-darrow{flex:0 0 30px;transform:rotate(90deg)}
  .cc-dnode{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .cc *,.cc *::before,.cc *::after{transition:none!important;animation:none!important}
  .cc-anim .cc-reveal{opacity:1;transform:none}
}