
/* CTRL360 Redes y Comunicaciones V1 · full-page QA */
body.page-redes-comunicaciones{background:#fff!important;color:#132018!important}
body.page-redes-comunicaciones .section{padding-top:74px!important;padding-bottom:74px!important}
body.page-redes-comunicaciones .section-head{margin-bottom:30px!important}

/* MASTER HERO */
body.page-redes-comunicaciones .redes-hero-v1{position:relative!important;min-height:610px!important;padding:0!important;overflow:hidden!important;display:flex!important;align-items:center!important;background:#06110c!important;color:#fff!important;isolation:isolate!important}
body.page-redes-comunicaciones .redes-hero-v1::before,body.page-redes-comunicaciones .redes-hero-v1::after{content:none!important;display:none!important}
body.page-redes-comunicaciones .redes-hero-photo{position:absolute!important;inset:0 0 0 auto!important;width:72%!important;z-index:0!important;background:url("photo-redes-comunicaciones.webp") 60% center/cover no-repeat!important}
body.page-redes-comunicaciones .redes-hero-shade{position:absolute!important;inset:0!important;z-index:1!important;background:linear-gradient(90deg,rgba(3,13,8,.99) 0%,rgba(3,13,8,.97) 22%,rgba(3,13,8,.88) 36%,rgba(3,13,8,.58) 50%,rgba(3,13,8,.18) 68%,rgba(3,13,8,0) 82%)!important}
body.page-redes-comunicaciones .redes-hero-inner{position:relative!important;z-index:2!important;width:min(var(--max,1180px),calc(100% - 42px))!important;margin:0 auto!important;padding:55px 0!important}
body.page-redes-comunicaciones .redes-hero-copy{max-width:660px!important}
body.page-redes-comunicaciones .redes-hero-v1 .breadcrumb{color:rgba(255,255,255,.62)!important;margin-bottom:20px!important;font-size:12px!important;font-weight:700!important}
body.page-redes-comunicaciones .redes-hero-v1 .eyebrow{color:#78d443!important}
body.page-redes-comunicaciones .redes-hero-v1 h1{margin:14px 0 18px!important;color:#fff!important;font-size:clamp(45px,4vw,61px)!important;line-height:1.01!important;letter-spacing:-1.9px!important}
body.page-redes-comunicaciones .redes-hero-v1 h1 em{display:block!important;color:#76cf3d!important;font-style:normal!important}
body.page-redes-comunicaciones .redes-hero-v1 p{max-width:585px!important;color:rgba(255,255,255,.84)!important;font-size:17px!important;line-height:1.55!important}
body.page-redes-comunicaciones .redes-hero-v1 .hero-actions{display:flex!important;gap:12px!important;flex-wrap:wrap!important;margin-top:24px!important}
body.page-redes-comunicaciones .redes-hero-v1 .btn{background:#59c52d!important;border-color:#59c52d!important;color:#fff!important}
body.page-redes-comunicaciones .redes-hero-v1 .btn.outline{background:rgba(4,16,10,.30)!important;border-color:rgba(255,255,255,.4)!important;backdrop-filter:blur(6px)!important}
body.page-redes-comunicaciones .redes-proof{display:flex!important;gap:9px!important;flex-wrap:wrap!important;margin-top:22px!important}
body.page-redes-comunicaciones .redes-proof span{padding:8px 11px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:999px!important;background:rgba(2,15,9,.30)!important;color:#fff!important;font-size:12px!important}

/* PROMISES */
body.page-redes-comunicaciones .redes-value-v1{background:#fff!important}
body.page-redes-comunicaciones .redes-value-v1 .promise-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
body.page-redes-comunicaciones .redes-value-v1 .promise{min-height:145px!important;padding:22px!important;background:#fff!important;border:1px solid #e7ece8!important;border-radius:16px!important;box-shadow:0 10px 28px rgba(30,55,39,.045)!important}
body.page-redes-comunicaciones .redes-value-v1 .promise strong{color:#142019!important}
body.page-redes-comunicaciones .redes-value-v1 .promise span{color:#64736b!important}

/* REAL SCENARIOS */
body.page-redes-comunicaciones .redes-scenarios-v1{background:#f8faf7!important}
body.page-redes-comunicaciones .redes-scenarios-v1 .real-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
body.page-redes-comunicaciones .redes-scenarios-v1 .real-card{display:flex!important;flex-direction:column!important;min-height:345px!important;padding:24px!important;background:#fff!important;border:1px solid #e7ece8!important;border-radius:17px!important;box-shadow:none!important;color:#142019!important}
body.page-redes-comunicaciones .redes-scenarios-v1 .scene{align-self:flex-start!important;padding:6px 9px!important;border-radius:999px!important;background:#edf8e9!important;color:#58b62f!important;font-size:12px!important;font-weight:900!important}
body.page-redes-comunicaciones .redes-scenarios-v1 .real-card h3{margin:14px 0 10px!important;color:#142019!important;font-size:21px!important;line-height:1.18!important}
body.page-redes-comunicaciones .redes-scenarios-v1 .real-card>p{color:#627169!important;font-size:14px!important;line-height:1.5!important}
body.page-redes-comunicaciones .redes-scenarios-v1 .question{color:#52ae2b!important;font-weight:800!important}
body.page-redes-comunicaciones .redes-scenarios-v1 .example{margin-top:auto!important;padding-top:16px!important;border-top:1px solid #edf1ee!important;color:#596960!important}
body.page-redes-comunicaciones .redes-scenarios-v1 .example b{display:block!important;margin-bottom:5px!important;color:#26362d!important}

/* 3-STEP PROCESS: final approved pattern, no dark box */
body.page-redes-comunicaciones .redes-process-v1{background:#f5faf4!important;color:#132018!important}
body.page-redes-comunicaciones .redes-process-v1 .section-head{max-width:760px!important;margin:0 auto 38px!important;text-align:center!important}
body.page-redes-comunicaciones .redes-process-v1 .section-head h2{color:#111d17!important}
body.page-redes-comunicaciones .redes-process-v1 .section-head .eyebrow{color:#59b930!important}
body.page-redes-comunicaciones .redes-process-v1 .story-strip{position:relative!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:52px!important;max-width:1040px!important;margin:0 auto!important;padding:0 20px!important;background:transparent!important;border:0!important;box-shadow:none!important}
body.page-redes-comunicaciones .redes-process-v1 .story-strip::before{content:""!important;position:absolute!important;left:18%!important;right:18%!important;top:36px!important;height:1px!important;background:linear-gradient(90deg,rgba(95,188,49,.55),rgba(95,188,49,.9),rgba(95,188,49,.55))!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item{position:relative!important;z-index:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;text-align:center!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item>b{z-index:2!important;display:flex!important;align-items:center!important;justify-content:center!important;width:72px!important;height:72px!important;min-height:72px!important;margin:0 0 24px!important;padding:0!important;border-radius:50%!important;background:#fff!important;border:1px solid #dce9d7!important;color:#59ba31!important;font-size:0!important;box-shadow:0 8px 22px rgba(30,67,38,.055)!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item>b::before{font-size:29px!important;line-height:1!important;font-weight:500!important;color:#59ba31!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item:nth-child(1)>b::before{content:"01"!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item:nth-child(2)>b::before{content:"02"!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item:nth-child(3)>b::before{content:"03"!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item h3{max-width:270px!important;margin:0 0 12px!important;color:#162119!important;font-size:20px!important;line-height:1.16!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item h3::before{display:block!important;margin-bottom:7px!important;color:#59b930!important;font-size:12px!important;font-weight:900!important;text-transform:uppercase!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item:nth-child(1) h3::before{content:"Confirmamos"!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item:nth-child(2) h3::before{content:"Comunicamos"!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item:nth-child(3) h3::before{content:"Resolvemos y aprendemos"!important}
body.page-redes-comunicaciones .redes-process-v1 .story-item p{max-width:265px!important;margin:0!important;color:#627169!important;font-size:14px!important;line-height:1.56!important}

/* INTERIOR VISUAL */
body.page-redes-comunicaciones .redes-visual-v1{background:#fff!important}
body.page-redes-comunicaciones .redes-visual-v1>.wrap.split{display:grid!important;grid-template-columns:minmax(0,42fr) minmax(0,58fr)!important;gap:48px!important;align-items:center!important}
body.page-redes-comunicaciones .redes-visual-v1 .editorial-photo{height:455px!important;min-height:455px!important;overflow:hidden!important;border-radius:18px!important;border:1px solid #e6ebe7!important;background:#07120d!important;box-shadow:0 14px 34px rgba(25,52,34,.07)!important}
body.page-redes-comunicaciones .redes-visual-v1 .editorial-photo img{display:block!important;width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important;object-position:center!important;filter:none!important;opacity:1!important}
body.page-redes-comunicaciones .redes-visual-v1 .overlay-copy{display:none!important}
body.page-redes-comunicaciones .redes-visual-v1>.wrap.split>div:last-child{padding:0!important;background:transparent!important}
body.page-redes-comunicaciones .redes-visual-v1 h2{color:#111d17!important;font-size:clamp(38px,3.25vw,52px)!important;line-height:1.04!important;letter-spacing:-1.35px!important}
body.page-redes-comunicaciones .redes-visual-v1 .lead{color:#485a50!important;font-size:17px!important}
body.page-redes-comunicaciones .redes-visual-v1 p{color:#627169!important;line-height:1.55!important}
body.page-redes-comunicaciones .redes-visual-v1 .checks li{color:#45564d!important}

/* FAQ + CLOSING explicit contrast */
body.page-redes-comunicaciones .redes-faq-v1{background:#f8faf7!important;color:#132018!important}
body.page-redes-comunicaciones .redes-faq-v1 h2,body.page-redes-comunicaciones .redes-faq-v1 summary{color:#111d17!important}
body.page-redes-comunicaciones .redes-faq-v1 details{background:#fff!important;border:1px solid #e7ece8!important;border-radius:12px!important;margin-bottom:10px!important;color:#132018!important}
body.page-redes-comunicaciones .redes-faq-v1 summary{padding:16px 18px!important}
body.page-redes-comunicaciones .redes-faq-v1 details p{padding:0 18px 18px!important;color:#5e6f65!important}
body.page-redes-comunicaciones .redes-closing-v1{background:#fff!important}
body.page-redes-comunicaciones .redes-closing-v1 .closeness{padding:38px 42px!important;background:linear-gradient(90deg,#f5f9f3,#fbfcfb)!important;border:1px solid #e8eee9!important;border-radius:20px!important;box-shadow:none!important}
body.page-redes-comunicaciones .redes-closing-v1 h2{color:#111d17!important}
body.page-redes-comunicaciones .redes-closing-v1 .lead,body.page-redes-comunicaciones .redes-closing-v1 .checks li{color:#526259!important}

/* RESPONSIVE */
@media(max-width:1050px){
 body.page-redes-comunicaciones .redes-value-v1 .promise-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:850px){
 body.page-redes-comunicaciones .redes-scenarios-v1 .real-grid{grid-template-columns:1fr!important}
 body.page-redes-comunicaciones .redes-process-v1 .story-strip{grid-template-columns:1fr!important;gap:36px!important}
 body.page-redes-comunicaciones .redes-process-v1 .story-strip::before{display:none!important}
 body.page-redes-comunicaciones .redes-visual-v1>.wrap.split{grid-template-columns:1fr!important;gap:32px!important}
 body.page-redes-comunicaciones .redes-visual-v1 .editorial-photo{height:380px!important;min-height:380px!important}
}
@media(max-width:650px){
 body.page-redes-comunicaciones .section{padding-top:58px!important;padding-bottom:58px!important}
 body.page-redes-comunicaciones .redes-value-v1 .promise-grid{grid-template-columns:1fr!important}
 body.page-redes-comunicaciones .redes-hero-photo{width:100%!important}
 body.page-redes-comunicaciones .redes-hero-inner{padding:218px 0 60px!important}
 body.page-redes-comunicaciones .redes-hero-v1 .breadcrumb{position:absolute!important;top:20px!important;left:0!important;margin:0!important}
 body.page-redes-comunicaciones .redes-hero-shade{background:linear-gradient(180deg,rgba(3,13,8,.03) 0%,rgba(3,13,8,.10) 10%,rgba(3,13,8,.25) 20%,rgba(3,13,8,.50) 30%,rgba(3,13,8,.80) 35%,rgba(3,13,8,.95) 45%,rgba(3,13,8,.99) 58%,rgba(3,13,8,1) 75%)!important}
 body.page-redes-comunicaciones .redes-hero-v1 .eyebrow{color:#a7db37!important}
 body.page-redes-comunicaciones .redes-hero-v1 h1{font-size:clamp(42px,13vw,62px)!important;line-height:.98!important;letter-spacing:-.055em!important}
 body.page-redes-comunicaciones .redes-hero-v1 h1 em{margin-top:12px!important;font-size:.64em!important;line-height:1.04!important;letter-spacing:-.04em!important}
 body.page-redes-comunicaciones .redes-hero-v1 p{font-size:16px!important;line-height:1.62!important;color:#e2ece6!important;text-shadow:0 2px 15px rgba(0,0,0,.45)!important}
 body.page-redes-comunicaciones .redes-visual-v1 .editorial-photo{height:300px!important;min-height:300px!important}
}

/* FIX: "Situaciones reales" y "Una primera conversación" sin el mismo
   estilo que en consultoria-tecnologica.html (pedido por Pedro, 24 oct
   2026 — mismo fallo repetido en varias vistas, ver también
   backup-continuidad.html y como-trabajamos.html). */
body.page-redes-comunicaciones .redes-scenarios-v1 .section-head{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.page-redes-comunicaciones .redes-scenarios-v1 .section-head .eyebrow{
  justify-content:center!important;
}
body.page-redes-comunicaciones .redes-scenarios-v1 .real-card{
  padding:30px!important;
  border-radius:16px!important;
  box-shadow:0 12px 32px rgba(26,54,36,.055)!important;
  border:1px solid #e9eeea!important;
}
body.page-redes-comunicaciones .redes-closing-v1 .closeness{
  background:linear-gradient(135deg,#eef7df,#edf9f4)!important;
  border-radius:30px!important;
  padding:42px!important;
  border:1px solid #e9eeea!important;
}

/* FIX: mismo bug que backup-continuidad.html — ".example" convertido en
   píldora diminuta e ilegible por migration-block4.css
   (body.ces-services .example), con una frase entera dentro. Mismo
   arreglo que consultoria-tecnologica.html (pedido por Pedro, 24 oct
   2026, fallo repetido en varias vistas). Colon añadido en el HTML
   ("En la práctica:") y span "360" en verde dentro de la pregunta. */
body.page-redes-comunicaciones .redes-scenarios-v1 .real-card .example{
  display:block!important;
  width:auto!important;
  border-radius:12px!important;
  padding:14px 16px!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:1.55!important;
}
body.page-redes-comunicaciones .redes-scenarios-v1 .real-card .example b{
  display:inline!important;
  margin-bottom:0!important;
}
body.page-redes-comunicaciones .redes-scenarios-v1 .real-card .question{
  text-align:left;
  color:var(--x-ink)!important;
  padding-top:14px!important;
  padding-bottom:0!important;
  padding-left:15%!important;
  margin:14px 0 4px!important;
  border-top:0!important;
}
body.page-redes-comunicaciones .redes-scenarios-v1 .real-card .question .q-360{
  color:var(--brand-dark);
}
body.page-redes-comunicaciones .redes-scenarios-v1 .real-card .answer{
  text-align:left;
  padding-left:15%!important;
  margin-bottom:22px!important;
}

/* FIX: iconos de check desalineados con el texto en las listas
   ".checks" (sobre todo en "Una primera conversación", donde los
   textos son largos y pasan a 2 líneas) — el círculo venía fijo a
   "top:10px" (regla base de styles.css) en vez de centrado con el
   texto de cada item, y además era de bajo contraste (círculo pálido
   sobre fondo claro). Mismo arreglo que ya existía en
   consultoria-tecnologica.html (pedido por Pedro, 24 oct 2026, viendo
   que el fallo se repite en varias vistas). */
body.page-redes-comunicaciones .checks li:before{
  top:50% !important;
  transform:translateY(-50%) !important;
  background:var(--x-green) !important;
  color:#fff !important;
  box-shadow:0 2px 6px rgba(88,185,71,.3) !important;
}
