/* Correcciones de contraste - Iscor - 29-jul-2026
   Solo ajusta color donde el texto/icono no alcanzaba el minimo legible (4.5:1).
   No cambia tipografia, tamanos, espaciados ni estructura.
   Los contrastes citados se midieron sobre el sitio renderizado, no estimados.

   NOTA: los iconos de redes del footer (icon-facebook.svg, icon-x.svg, icon-linkedin.svg)
   se revisaron y NO se tocan: su relleno es el cian de marca #00a9c1, que sobre el
   footer #013758 da 4.41 y si es legible. */

/* Etiqueta "eyebrow" sobre fondo claro: 2.82 -> 4.68 */
.blk .eyebrow, section:not(.hero):not(.cta) .eyebrow { color: #00808F; }

/* Etiqueta "eyebrow" sobre fondo oscuro (hero y cta): 2.53 -> 4.49 */
.hero .eyebrow, .cta .eyebrow { color: #8FD8EC; }

/* El .badge ("Cotizacion sin costo") NO se toca.
   Una primera medicion lo marco en 2.28 asumiendo fondo cian solido, pero al medir
   el fondo real resulto que vive dentro de .cta, sobre el gradiente oscuro, con su
   propio fondo cian al 14%. El texto claro ahi es correcto; oscurecerlo lo habria
   vuelto ilegible. */

/* Etiquetas del formulario de contacto.
   El fondo (back-contacto.svg) alterna azul marino y cian; sobre las franjas
   cian el blanco caia a 2.77. La sombra lo despega del fondo sin cambiar el diseno. */
.label-form-home {
  text-shadow: 0 1px 3px rgba(1, 55, 88, .92);
  font-weight: 600;
}

/* Boton de menu en movil: icono negro sobre azul daba 3.20 */
.navbar-toggler-icon { filter: brightness(0) invert(1); }

/* Turnstile: que respete el ancho del formulario en movil */
.cf-turnstile { margin: 14px 0; max-width: 100%; overflow: hidden; }

/* ---- Noticias: tarjetas del blog (reemplazan al iframe de Blogger) ---- */
.blog-iscor { padding: 56px 0 72px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 26px;
}
.blog-cargando { color: #4a6072; text-align: center; grid-column: 1 / -1; padding: 40px 0; }
.blog-card {
  background: #fff;
  border: 1px solid #e3ecf2;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(1, 55, 88, .13); }
.blog-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #eef4f8; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-fecha {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: #00808F; font-weight: 700;
}
.blog-titulo { font-size: 17px; line-height: 1.32; margin: 9px 0 10px; }
.blog-titulo a { color: #013758; text-decoration: none; }
.blog-titulo a:hover { color: #00808F; }
.blog-extracto { font-size: 14px; color: #4a6072; margin: 0 0 16px; flex: 1; }
.blog-link { font-size: 14px; font-weight: 700; color: #00808F; text-decoration: none; }
.blog-link:hover { text-decoration: underline; }
.blog-mas { text-align: center; margin-top: 42px; }




/* ==========================================================================
   AUDITORIA DE CONTRASTE — 28 paginas, 29-jul-2026
   Barrido del sitio renderizado, midiendo el fondo real compuesto (color,
   gradiente o imagen). Solo se cambia COLOR: no se toca tipografia, tamano,
   espaciado ni estructura. Minimos: 4.5 texto normal, 3.0 texto grande e iconos.
   Se usa !important porque styles.css gana por especificidad.
   ========================================================================== */

/* --- 1. Texto blanco sobre las bandas celestes #00C2D5: daba 2.17 ---
   ~64 elementos en aviso-de-privacidad, consultoria, gracias,
   presencia-en-internet, puesta-a-punto, servicios-de-gestion y soporte-tecnico.
   Se conserva el celeste de marca; el texto pasa a azul marino: 5.73. */
section.main-info-products2, section.main-info-products2 *,
section.main-interior-servicio, section.main-interior-servicio *,
section.slider-list-servicio, section.slider-list-servicio *,
section.porque-elegir-servicio, section.porque-elegir-servicio * {
  color: #013758 !important;
}
/* los botones dentro de esas bandas conservan su propio contraste */
section.main-interior-servicio .btn,
section.slider-list-servicio .btn,
section.porque-elegir-servicio .btn,
section.main-info-products2 .btn { color: #012D4A !important; }

/* --- 2. Boton celeste con texto azul claro: 2.35 --- */
a.btn-celeste-white, .btn-celeste-white { color: #012D4A !important; }

/* --- 3. Etiquetas .tag: dos contextos --- */
.pcard .tag { color: #00788A !important; }
.pcard.dark .tag { color: #BFF0F6 !important; }

/* --- 4. Textos claros sobre los gradientes oscuros de las landings --- */
.pcard.dark p { color: #D4E6F0 !important; }
.cta .lead { color: #D4E6F0 !important; }
p.ib-lbl { color: #D4E6F0 !important; }   /* landings con gradiente oscuro */
span.ib-eyebrow, .ib-eyebrow { color: #BFF0F6 !important; }

/* --- 5. Cian de marca sobre fondos claros: 2.66-2.82 --- */
div.acard a.alink, a.alink { color: #00788A !important; }
div.wrap p.eye, p.eye { color: #00788A !important; }
.eyebrow, .blk .eyebrow { color: #00788A !important; }
section:not(.hero):not(.cta) .eyebrow { color: #00788A !important; }
.hero .eyebrow, .cta .eyebrow { color: #8FD8EC !important; }

/* --- 6. Botones con fondo cian: el navy daba 4.41 --- */
.btn-cyan, a.btn-cyan, button.btn-cyan { color: #012D4A !important; }
/* acordeon de soluciones: texto blanco sobre cian daba 2.82 */
h2.mb-0 button.btn.btn-link, button.btn.btn-link.btn-block { color: #012D4A !important; }
div.card-header.card-pill-header, div.card-header.card-pill-header * { color: #012D4A !important; }

/* --- 7. Texto secundario del hero de las landings: 3.52 --- */
.trust small, .trust div small { color: #C8DCE8 !important; }

/* --- 8. Enlace del aviso de privacidad sobre el footer navy: 4.41 --- */
p.aviso a, .footer p.aviso a { color: #5ACDE1 !important; }


/* --- 1 bis. Correcciones de contexto dentro de las bandas celestes ---
   Los <li> de "por que elegir" tienen fondo navy PROPIO dentro de la seccion
   celeste, asi que la regla general los dejaba navy sobre navy (1.0).
   Ahi el texto va en blanco: 12.44. */
section.porque-elegir-servicio ul.list-porque-servicio li,
section.porque-elegir-servicio ul.list-porque-servicio li * { color: #fff !important; }
section.main-info-products2 a.btn-dark, section.main-interior-servicio a.btn-dark,
section.slider-list-servicio a.btn-dark, section.porque-elegir-servicio a.btn-dark,
a.btn.btn-dark, a.btn-dark, .btn-dark { color: #fff !important; }

/* --- 4 bis. En productos el gradiente de .ibrand es CLARO, no oscuro ---
   La regla general los ponia en tono claro y caian a 1.18 y 1.23. */
section.ibrand .ib-eyebrow, .ibrand span.ib-eyebrow { color: #00788A !important; }
section.ibrand div.ib-allies p.ib-lbl, section.ibrand .ib-lbl { color: #42566A !important; }

/* --- 5 bis. Titular grande en cian del home: 2.66 con minimo 3.0 --- */
.wrap h2 span, section .eye + h2 span { color: #00788A !important; }

/* --- Badges de partner en la landing de Fortinet --- */
.pbadges { background: #F4F8FB; padding: 30px 0 34px; border-bottom: 1px solid #e3ecf2; }
.pbadges .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; text-align: center; }
.pbadges-lbl { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #00788A; font-weight: 700; margin-bottom: 18px; }
.pbadges-row { display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; }
.pbadges-row img { height: 74px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 560px){ .pbadges-row img { height: 56px; } }

/* ---- Header pegajoso: FALSA ALARMA, no se toca ----
   Durante la auditoria parecia que el menu blanco desaparecia al hacer scroll
   sobre secciones claras (contraste 1.0). El diagnostico estaba equivocado:
   styles.css YA trae `.navstick.scrolled { background: #046392 }` y el JS del
   sitio YA agrega esa clase pasando los 50px. El menu blanco sobre ese azul da
   6.55, que pasa de sobra.
   El falso positivo salio de que el scroll por JS no dispara el evento 'scroll'
   en el navegador automatizado, asi que la clase nunca estaba activa al medir.
   Se comprobo despachando el evento a mano: la clase entra y el fondo aplica.
   No se agrega ninguna regla aqui a proposito. */

/* ---- Iconos del bloque "Nuestros servicios" del home (reporte de Elias, 29-jul) ----
   Medido en el sitio renderizado:
     · iconos de los cuadritos (.hchip .hcic svg): cian #00a9c1 sobre rgb(40,124,164)
       = contraste 1.65, cuando el minimo para elementos graficos es 3.0.
       El texto al lado va en blanco y da 5.07: por eso el texto se leia y el icono no.
     · iconos de las pastillas inactivas (.htab .hti svg): 2.53.
   Al pasarlos a blanco quedan en 4.66 y 7.14, y el icono lee como una unidad con su
   texto. La pastilla activa NO se toca: ahi el icono es oscuro sobre cian y da 5.03. */
.hchip .hcic svg { stroke: #fff !important; }
.htab .hti svg { stroke: #fff !important; }
.htab[aria-selected="true"] .hti svg { stroke: #052e44 !important; }

/* ---- Iconos que se pierden sobre los cuadros celestes ----
   Reportado por el cliente (Elias, 29-jul) en las paginas de servicio.
   Medido: los indicadores son blancos #fff sobre el celeste #00C2D5 = contraste
   2.17, debajo del minimo de 3.0 para elementos graficos. Al pintarlos en el
   azul marino de la marca #013758 suben a 5.73.
   Se acota al carrusel de servicios para no afectar iconos en fondos oscuros. */
.indicators-list img,
ol.carousel-indicators.indicators-list li img {
  filter: brightness(0) saturate(100%) invert(14%) sepia(51%) saturate(1900%)
          hue-rotate(180deg) brightness(93%) contrast(101%);
  opacity: .55;
}
/* el indicador activo, en marino pleno para que se distinga del resto */
ol.carousel-indicators.indicators-list li.active img { opacity: 1; }