/* =========================================================
   CTRL360 · CONSULTORÍA TECNOLÓGICA · V1
   MASTER pattern: photo right + CSS gradient + HTML content
   ========================================================= */

body.page-consultoria-tecnologica{
  --consult-green:#61c832;
  --consult-dark:#07120d;
}

/* eliminate inherited hero artwork */
body.page-consultoria-tecnologica .consulting-hero-v1,
body.page-consultoria-tecnologica .consulting-hero-v1::before,
body.page-consultoria-tecnologica .consulting-hero-v1::after{
  background:none !important;
}
body.page-consultoria-tecnologica .consulting-hero-v1::before,
body.page-consultoria-tecnologica .consulting-hero-v1::after{
  content:none !important;
  display:none !important;
}

body.page-consultoria-tecnologica .consulting-hero-v1{
  position:relative !important;
  min-height:600px !important;
  padding:0 !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  isolation:isolate !important;
  color:#fff !important;
  background:#07120d !important;
}

/* photo layer, deliberately biased to center/right */
body.page-consultoria-tecnologica .consulting-hero-photo{
  position:absolute !important;
  inset:0 0 0 auto !important;
  width:76% !important;
  z-index:0 !important;
  background:url("photo-consultoria-tecnologica.webp") 54% center / cover no-repeat !important;
  filter:none !important;
}

/* readability follows MASTER Home/Data Center pattern */
body.page-consultoria-tecnologica .consulting-hero-shade{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:linear-gradient(
    90deg,
    rgba(4,15,9,.99) 0%,
    rgba(4,15,9,.96) 18%,
    rgba(4,15,9,.88) 31%,
    rgba(4,15,9,.68) 43%,
    rgba(4,15,9,.38) 55%,
    rgba(4,15,9,.12) 67%,
    rgba(4,15,9,0) 78%
  ) !important;
}

body.page-consultoria-tecnologica .consulting-hero-inner{
  position:relative !important;
  z-index:2 !important;
  width:min(var(--max,1180px),calc(100% - 42px)) !important;
  margin:0 auto !important;
  padding:54px 0 46px !important;
}
body.page-consultoria-tecnologica .consulting-hero-copy{
  max-width:625px !important;
}

body.page-consultoria-tecnologica .consulting-hero-v1 .breadcrumb{
  margin:0 0 20px !important;
  color:rgba(255,255,255,.62) !important;
  font-size:12px !important;
  font-weight:700 !important;
}
body.page-consultoria-tecnologica .consulting-hero-v1 .eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  color:#74d13d !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:1.05px !important;
  text-transform:uppercase !important;
}
body.page-consultoria-tecnologica .consulting-hero-v1 .eyebrow::before{
  content:"" !important;
  width:28px !important;
  height:1px !important;
  background:#74d13d !important;
}
body.page-consultoria-tecnologica .consulting-hero-v1 h1{
  max-width:620px !important;
  margin:14px 0 18px !important;
  color:#fff !important;
  font-size:clamp(43px,3.8vw,58px) !important;
  line-height:1.01 !important;
  letter-spacing:-1.8px !important;
  font-weight:800 !important;
}
body.page-consultoria-tecnologica .consulting-hero-v1 h1 span{
  display:block !important;
  color:#a7db37 !important;
  margin-top:12px !important;
  font-size:.64em !important;
  line-height:1.04 !important;
  letter-spacing:-.04em !important;
}
body.page-consultoria-tecnologica .consulting-hero-v1 p{
  max-width:560px !important;
  margin:0 !important;
  color:rgba(255,255,255,.84) !important;
  font-size:17px !important;
  line-height:1.55 !important;
}
body.page-consultoria-tecnologica .consulting-hero-v1 .hero-actions{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-top:24px !important;
}
body.page-consultoria-tecnologica .consulting-hero-v1 .btn{
  background:#58c52c !important;
  border-color:#58c52c !important;
  color:#fff !important;
  box-shadow:0 10px 26px rgba(86,196,43,.18) !important;
}
body.page-consultoria-tecnologica .consulting-hero-v1 .btn.outline{
  background:rgba(4,16,10,.30) !important;
  border-color:rgba(255,255,255,.40) !important;
  box-shadow:none !important;
  backdrop-filter:blur(6px) !important;
}
body.page-consultoria-tecnologica .consulting-hero-v1 .human-proof{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:9px !important;
  margin-top:22px !important;
}
body.page-consultoria-tecnologica .consulting-hero-v1 .human-proof span{
  padding:8px 11px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  background:rgba(2,15,9,.30) !important;
  color:#fff !important;
  font-size:12px !important;
  backdrop-filter:blur(7px) !important;
}

/* promise section: flatter and cleaner */
body.page-consultoria-tecnologica .section.soft{
  background:linear-gradient(180deg,#fff 0%,#fff 42%,rgba(140,198,63,.55) 100%) !important;
}
body.page-consultoria-tecnologica .promise-grid{
  gap:12px !important;
}
body.page-consultoria-tecnologica .promise{
  background:#fff !important;
  border:1px solid #edf1ee !important;
  box-shadow:0 10px 28px rgba(30,55,39,.05) !important;
}

/* real scenarios */
body.page-consultoria-tecnologica .real-card{
  border:1px solid #e9eeea !important;
  box-shadow:0 12px 32px rgba(26,54,36,.055) !important;
}

/* story dark strip: clearer executive feel */
body.page-consultoria-tecnologica .section.dark{
  background:linear-gradient(135deg,#07130e,#0a1712) !important;
}
body.page-consultoria-tecnologica .story-item{
  border-color:rgba(255,255,255,.09) !important;
}

/* visual band */
body.page-consultoria-tecnologica .visual-band{
  background:linear-gradient(180deg,#f7faf6,#fff) !important;
}
body.page-consultoria-tecnologica .editorial-photo{
  overflow:hidden !important;
  border-radius:22px !important;
  box-shadow:0 20px 44px rgba(26,53,35,.10) !important;
}
body.page-consultoria-tecnologica .editorial-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
body.page-consultoria-tecnologica .overlay-copy{
  background:linear-gradient(180deg,transparent,rgba(4,14,9,.78)) !important;
}

/* FAQ / closing cards integrate in white */
body.page-consultoria-tecnologica .faq-rich details{
  background:#fff !important;
  border-color:#e9eeea !important;
}
body.page-consultoria-tecnologica .closeness{
  border-color:#e9eeea !important;
}

/* responsive */
@media(max-width:1050px){
  body.page-consultoria-tecnologica .consulting-hero-v1{min-height:590px !important}
  body.page-consultoria-tecnologica .consulting-hero-photo{
    width:82% !important;
    background-position:62% center !important;
  }
  body.page-consultoria-tecnologica .consulting-hero-shade{
    background:linear-gradient(
      90deg,
      rgba(4,15,9,.98) 0%,
      rgba(4,15,9,.93) 34%,
      rgba(4,15,9,.72) 53%,
      rgba(4,15,9,.28) 72%,
      rgba(4,15,9,.04) 100%
    ) !important;
  }
}
@media(max-width:760px){
  body.page-consultoria-tecnologica .consulting-hero-v1{min-height:auto !important}
  body.page-consultoria-tecnologica .consulting-hero-photo{
    width:100% !important;
    background-position:72% center !important;
  }
  body.page-consultoria-tecnologica .consulting-hero-shade{
    background:linear-gradient(
      180deg,
      rgba(4,15,9,.03) 0%,
      rgba(4,15,9,.10) 10%,
      rgba(4,15,9,.25) 20%,
      rgba(4,15,9,.50) 30%,
      rgba(4,15,9,.80) 35%,
      rgba(4,15,9,.95) 45%,
      rgba(4,15,9,.99) 58%,
      rgba(4,15,9,1) 75%
    ) !important;
  }
  body.page-consultoria-tecnologica .consulting-hero-inner{
    padding:218px 0 60px !important;
  }
  body.page-consultoria-tecnologica .consulting-hero-v1 .breadcrumb{
    position:absolute !important;
    top:20px !important;
    left:0 !important;
    margin:0 !important;
  }
  body.page-consultoria-tecnologica .consulting-hero-v1 .eyebrow{
    color:#a7db37 !important;
  }
  body.page-consultoria-tecnologica .consulting-hero-v1 h1{
    font-size:clamp(42px,13vw,62px) !important;
    line-height:.98 !important;
    letter-spacing:-.055em !important;
  }
  body.page-consultoria-tecnologica .consulting-hero-v1 h1 span{
    font-size:.58em !important;
  }
  body.page-consultoria-tecnologica .consulting-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;
  }
}

/* ===== Known sitewide bugs, fixed here (same pattern as departamento-it.html) ===== */
/* 1) .story-item/.story-strip inherit a shared white-card rule (experience-2026.css)
      that turns the "Cuando algo ocurre..." dark block into solid white. */
body.page-consultoria-tecnologica .story-item,
body.page-consultoria-tecnologica .story-strip{
  background:transparent !important;
  box-shadow:none !important;
}
/* 2) bottom "band" CTA button gets stretched full-height by the shared
      .band-row{align-items:stretch} rule, and its top edge crosses the
      "360" watermark in the corner. */
body.page-consultoria-tecnologica .band:after{
  top:-80px !important;
}
body.page-consultoria-tecnologica .band-row .btn{
  align-self:flex-end !important;
  min-height:0 !important;
  height:auto !important;
  width:auto !important;
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  padding:13px 20px !important;
  font-size:15px !important;
  background:var(--navy) !important;
  border-color:var(--navy) !important;
  color:#fff !important;
  box-shadow:none !important;
}
body.page-consultoria-tecnologica .band-row .btn:hover{
  background:#58b947 !important;
  border-color:#58b947 !important;
  color:#fff !important;
  transform:none !important;
}

/* ===== "Cuando algo ocurre..." story-item: fix broken internal grid.
   migration-block4.css sets .story-item{grid-template-columns:108px 1fr}
   with 3 children (b,h3,p) auto-placed in row-major order: b->r1c1,
   h3->r1c2, p->r2c1 — leaving r2c2 completely empty and squeezing the
   paragraph into a 108px column (ugly one-word-per-line wrap). Fix:
   make the label span both rows on the left, so h3+p naturally flow
   into the wide right column, stacked. ===== */
body.page-consultoria-tecnologica .story-item > b{
  grid-row:1 / 3 !important;
  align-self:start !important;
}

/* ===== "Cuando algo ocurre...": mover el borde del strip a cada card,
   y (TEST solo en la card 1) rediseño número+eyebrow, pedido por Pedro.
   ===== */
body.page-consultoria-tecnologica .story-strip{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
body.page-consultoria-tecnologica .story-item{
  border:1px solid var(--x-line) !important;
  border-radius:16px !important;
  padding:32px 28px !important;
  grid-template-columns:130px 1fr !important;
  min-width:0 !important;
}
/* FIX: "Cuando algo ocurre..." story-num (font-size:150px) doesn't fit its
   130px grid column between ~761px and ~1050px (tablet range not covered
   by the <=680px mobile override below). Without min-width:0 above, the
   grid item's implicit auto-min-size expands to the number's min-content,
   blowing out .story-strip and causing page-wide horizontal scroll at
   ~800-950px. min-width:0 stops the page-level overflow; the font-size
   step below keeps the number from visually crowding the title/text in
   that same range. */
@media(min-width:681px) and (max-width:1050px){
  body.page-consultoria-tecnologica .story-item .story-num{
    font-size:100px !important;
  }
}

/* --- Card 1 test: número grande sin punto + eyebrow verde + título y texto más juntos --- */
body.page-consultoria-tecnologica .story-item .story-num{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  align-self:center;
  font-size:150px;
  line-height:1;
  font-weight:800;
  color:var(--x-green);
}
body.page-consultoria-tecnologica .story-item .story-copy{
  align-self:center;
  min-width:0 !important;
}
body.page-consultoria-tecnologica .story-item .story-num{
  margin-top:-8px;
}
body.page-consultoria-tecnologica .story-item .story-eyebrow{
  display:block;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.05px;
  color:#74d13d;
  margin:0 0 8px;
}
body.page-consultoria-tecnologica .story-item .story-copy h3{
  margin:0 0 8px !important;
}

/* Responsive: below 680px migration-block4.css collapses .story-item to
   a single column (grid-template-columns:1fr). Our !important 2-column
   override above must not fight that, or the huge number gets squeezed
   into a narrow column on mobile. Match the same breakpoint. */
@media(max-width:680px){
  body.page-consultoria-tecnologica .story-item{
    grid-template-columns:1fr !important;
    padding:24px 20px !important;
  }
  body.page-consultoria-tecnologica .story-item .story-num{
    font-size:90px !important;
    justify-content:flex-start;
  }
}

/* ===== FIX: "Situaciones reales" > .example ("En la práctica...") venía
   ilegible. migration-block4.css convierte .example en una píldora
   diminuta (display:inline-flex, pill redondeado, font-size 11.5px)
   pensada para una etiqueta corta, pero aquí lleva una frase entera —
   el <b> (display:block heredado de styles.css) se convertía en un
   flex-item en fila junto al texto, sin espacio ni salto, resultando
   en "En la prácticaDirección puede decidir..." pegado y, en la
   tarjeta con el texto más largo, partido a media palabra. Se añadió
   además los dos puntos que faltaban en el HTML ("En la práctica:").
   ===== */
body.page-consultoria-tecnologica .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-consultoria-tecnologica .real-card .example b{
  display:inline !important;
  margin-bottom:0 !important;
}

/* ===== "Situaciones reales": estilo diálogo (TEST solo en la tarjeta 1),
   pedido por Pedro. Pregunta alineada a la derecha, con "360" en verde,
   pegada a su respuesta (también a la derecha); se conserva el aire
   antes de la caja verde de conclusión. ===== */
body.page-consultoria-tecnologica .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;
}
body.page-consultoria-tecnologica .real-card .question .q-360{
  color:var(--brand-dark);
}
body.page-consultoria-tecnologica .real-card .answer{
  text-align:left;
  padding-left:15% !important;
  margin-bottom:22px !important;
}

/* Quitar la línea divisoria (border-top) de .question en la tarjeta 1
   (test): con el bloque ya indentado, la línea completa de borde a
   borde sobra. */
body.page-consultoria-tecnologica .real-card .question{
  border-top:0 !important;
}

/* checklist badges: fix vertical alignment (were pinned near the top of
   each row instead of centered with the text) and low contrast (pale
   badge barely visible on white/soft-green backgrounds) */
body.page-consultoria-tecnologica .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;
}

/* visual-band photo: the global .overlay-copy backdrop-filter:blur(12px)
   rule (meant for a small text pill) was blurring the ENTIRE photo,
   because this page's .overlay-copy is stretched to inset:0 (full
   cover) by migration-block4.css. The bottom gradient already gives
   enough contrast for the caption text, so the blur is unnecessary here. */
body.page-consultoria-tecnologica .visual-band .overlay-copy{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* photo overlay caption: bring the small label and the mini-heading in
   line with the rest of the page's typography (the label had none of
   the eyebrow's dash marker / green / letter-spacing, and the
   "heading" was just a plain bold <strong>) */
body.page-consultoria-tecnologica .visual-band .overlay-copy span{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  color:var(--x-green) !important;
  letter-spacing:1.5px !important;
  font-weight:800 !important;
}
body.page-consultoria-tecnologica .visual-band .overlay-copy span:before{
  content:"" !important;
  display:inline-block !important;
  width:24px !important;
  height:2px !important;
  background:currentColor !important;
  border-radius:9px !important;
}
body.page-consultoria-tecnologica .visual-band .overlay-copy strong{
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.02em !important;
  line-height:1.15 !important;
  margin-top:10px !important;
}

/* visual-band photo: .editorial-photo only sets min-height (never an
   explicit height), so CSS percentage-height on the img never resolves
   (spec requires the containing block to have a definite, non-auto
   height for % to work) and the img falls back to its own min-height
   (420px) from styles.css, leaving a 100px gap of the dark overlay
   gradient showing as a solid bar under the photo. Fix: take the img
   out of normal flow and stretch it to the container's padding box,
   which DOES resolve reliably against a min-height-only ancestor. */
body.page-consultoria-tecnologica .visual-band .editorial-photo img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* FIX: "Nuestra forma de acompañarte" (.story-strip, 3 columnas) sufre
   desbordamiento horizontal justo al pasar de 1 a 3 columnas (regla
   base de styles.css: 1 columna solo por debajo de 760px, 3 columnas
   fijas a partir de ahí) — entre ~761px y ~890px las 3 columnas no
   caben y el grid se desborda (confirmado con medición real:
   scrollWidth > clientWidth en ese rango). Pedro pidió mantener 1
   columna mientras exista el menú de hamburguesa (que en esta página
   se activa por debajo de 1050px, ver header-master-v1.css /
   styles.css @media(max-width:1050px) del .enterprise-menu), para
   evitar el desbordamiento en cualquier resolución de ese rango, en
   vez de solo parchear la ventana exacta donde se ve el fallo. */
@media(max-width:1050px){
  body.page-consultoria-tecnologica .story-strip{
    grid-template-columns:1fr!important;
  }
}