/* CCTV Empresarial 2.1 — Refinamiento visual responsivo
   Base original preservada; reglas añadidas para corregir la compresión
   del título y alternar gradientes discretos en las diferentes secciones. */
:root{
  --paper:#eef2f4;
  --ink:#1c2b32;
  --muted:#58666f;
  --yellow:#f2c500;
  --border:#dce4e8;
  --shadow:0 18px 48px rgba(27,51,63,.085);
}
body{
  background:linear-gradient(165deg,#f4f7f8 0%,#e8eff2 48%,#f7f9f9 100%);
  background-attachment:fixed;
}
.header{
  background:linear-gradient(100deg,rgba(255,255,255,.98),rgba(241,245,247,.97));
  border-bottom:1px solid #dae2e5;
}
/* HERO: padding basado en su propia caja, nunca en 100vw.
   Esta era la causa de la columna de texto de apenas unas letras. */
.hero{
  padding:24px 22px 30px;
  background:linear-gradient(117deg,#e9f0f2 0%,#d3dfe3 48%,#edf2f3 100%);
  color:#fff;
  overflow:visible;
}
.hero-main{
  width:100%;
  max-width:1680px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);
  min-height:615px;
  border-radius:19px;
  overflow:hidden;
  box-shadow:0 20px 65px rgba(20,49,62,.17);
}
.hero-copy{
  min-width:0;
  padding:clamp(40px,4.2vw,78px) clamp(30px,4.2vw,74px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(ellipse at 12% 12%,rgba(250,213,60,.19),transparent 38%),
    linear-gradient(139deg,#3a515e 0%,#293e4a 48%,#4c626c 100%);
  overflow:visible;
}
.hero-copy > *{min-width:0;max-width:100%}
.hero-copy h1{
  font-size:clamp(2.65rem,3.75vw,4.15rem);
  font-weight:850;
  line-height:1.055;
  letter-spacing:-.052em;
  margin:23px 0 19px;
  max-width:650px;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-wrap:balance;
}
.hero-copy h1 em{color:#ffda46}
.hero-copy p{
  font-size:clamp(.97rem,1.1vw,1.08rem);
  line-height:1.75;
  color:#e1e9ec;
  max-width:580px;
  margin:0 0 27px;
}
.hero-copy .eyebrow.light{color:#ffe58a}
.hero-image{min-width:0;min-height:540px;background:#bdced3}
.hero-image::after{background:linear-gradient(90deg,rgba(26,49,60,.07),transparent 28%)}
.hero-image img{object-position:54% center}
.hero-note{border-radius:0 9px 9px 0;max-width:calc(100% - 46px);background:rgba(32,53,64,.84)}
.hero-spec{color:#d7e2e6;margin-top:29px;gap:10px 17px}
.hero-spec span{font-size:.7rem}
.value-row{background:linear-gradient(90deg,#fafbfc 0%,#edf2f4 52%,#fcfdfd 100%);border-color:#dfe8eb}
.value{border-color:#dfe8eb}
/* Alternar luces y grises: movimiento sin oscurecer todo el sitio. */
.section:not(.section-deep):not(.section-white){
  background:linear-gradient(130deg,#f3f6f7 0%,#e4ebef 53%,#f9fafb 100%);
}
.section-white{
  background:linear-gradient(115deg,#fff 0%,#f7f9fa 45%,#ebf1f3 100%);
}
#soluciones{
  background:linear-gradient(128deg,#f9fafb 0%,#e5edf1 54%,#f3f7f8 100%);
}
#industrias{
  background:linear-gradient(155deg,#fff 0%,#edf3f5 60%,#f8fafb 100%);
}
.section-deep{
  background:
    radial-gradient(ellipse at 100% 0%,rgba(249,204,51,.10),transparent 37%),
    linear-gradient(115deg,#405864 0%,#324a57 51%,#5a6f78 100%);
  color:#fff;
}
.section-deep .eyebrow.light{color:#ffe18a}
.integration-layout p{color:#e4edf0}
.diagram{
  background:
    radial-gradient(circle at 49% 43%,rgba(255,208,51,.10),transparent 43%),
    repeating-linear-gradient(0deg,transparent,transparent 49px,#ffffff09 50px),
    repeating-linear-gradient(90deg,transparent,transparent 49px,#ffffff09 50px),
    linear-gradient(135deg,#263d49,#354d58);
  border-color:#8398a3;
  box-shadow:0 16px 34px rgba(20,37,47,.12);
}
#experiencia{
  background:linear-gradient(136deg,#e1eaf0 0%,#f4f7f9 54%,#eaf0f2 100%);
}
#tecnologia{
  background:linear-gradient(135deg,#f9fafb 0%,#e5edf1 60%,#fff 100%);
}
#tecnologia + .section{
  background:linear-gradient(118deg,#eaf0f3 0%,#f7f9f9 57%,#dfe8ed 100%);
}
#preguntas{
  background:
    radial-gradient(ellipse at 8% 100%,rgba(242,197,0,.085),transparent 42%),
    linear-gradient(140deg,#fff 0%,#f1f5f6 58%,#e8eff2 100%);
}
.section-tight{
  background:linear-gradient(120deg,#e9f0f3,#f7f9fa 47%,#dee8ec);
}
.service-card,.industry,.project-card,.tech,.contact-box,.case-info,.check{
  border-color:#dbe3e7;
  box-shadow:0 7px 28px rgba(30,53,65,.035);
}
.service-card{background:linear-gradient(165deg,#fff,#fbfcfd)}
.industry{border-top:3px solid #f1d56d;background:linear-gradient(155deg,#fff,#f9fbfc)}
.project-card{background:linear-gradient(150deg,#fff,#f5f8fa)}
.project-graphic{background:linear-gradient(100deg,#ecf2f5,#fff);border-color:#d6e1e5}
.tech{background:linear-gradient(145deg,#fff,#f6f9fa)}
.mini-icon{background:#fff0b0}
.page-hero{
  background:
    radial-gradient(ellipse at 0% 18%,rgba(246,205,47,.11),transparent 28%),
    linear-gradient(115deg,#f1f5f6 0%,#d4e0e6 61%,#eaf0f2 100%);
}
.page-hero h1{overflow-wrap:normal;hyphens:none;text-wrap:balance}
.page-image{background:#d7e2e5}
.cta-panel{
  background:linear-gradient(116deg,#ffe78e 0%,#f6d455 53%,#f3c827 100%);
  box-shadow:0 18px 42px rgba(73,69,35,.095);
}
.footer{
  background:linear-gradient(125deg,#30454f 0%,#253943 55%,#435964 100%);
}
/* Tablets: convertir el hero en dos filas antes de que el texto se estrangule. */
@media(max-width:980px){
 .hero{padding:17px}
 .hero-main{grid-template-columns:minmax(0,1fr);max-width:750px;min-height:0}
 .hero-copy{padding:54px clamp(24px,6vw,56px) 48px}
 .hero-copy h1{font-size:clamp(2.55rem,6.3vw,4.0rem);max-width:710px}
 .hero-copy p{max-width:620px}
 .hero-image{min-height:365px}
 .hero-image img{object-position:center 42%}
 .hero-spec{margin-top:27px}
}
@media(max-width:560px){
 .hero{padding:12px 10px 18px}
 .hero-main{border-radius:14px}
 .hero-copy{padding:42px 22px 38px}
 .hero-copy h1{font-size:clamp(2.25rem,9.4vw,3.1rem);line-height:1.08;letter-spacing:-.045em}
 .hero-copy p{font-size:.96rem;line-height:1.7}
 .hero-image{min-height:255px}
 .hero-note{left:12px;bottom:12px;font-size:.67rem;padding:10px 12px}
 .hero-spec{gap:8px 14px}
 .hero-spec span{font-size:.65rem}
 .section-deep{background:linear-gradient(150deg,#405864 0%,#526b78 100%)}
}
/* Tarjetas y diagramas legibles también en móviles estrechos (320px). */
.project-card,.project-grid,.project-graphic{min-width:0}
.project-graphic{gap:4px;padding:8px}
.project-graphic span{min-width:0;overflow-wrap:anywhere;padding:9px 2px}
.project-graphic i{width:7px}