:root {
  --kpmg-blue: #00338D;
  --kpmg-blue-light: #D9E8FF;
  --kpmg-gray-100: #f7f9fc;
  --kpmg-gray-200: #e5e5e5;
}

/* Scope para evitar afectar la landing */
.kpmg-grid-graph,
.kpmg-grid-graph * {
  box-sizing: border-box;
}

/* Contenedor del componente (alineado con páginas KPMG) */
.kpmg-grid-graph {
  max-width: 1300px;
  margin: 0 auto;
  padding: 32px 16px;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
}

/* Grid */
.kpmg-grid-graph__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
}

/* Tile */
.kpmg-grid-graph__tile {
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(145deg, #fff, #f2f4f8);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transition: transform .25s ease, box-shadow .25s ease;
  outline: none;
}

/* Imagen dentro del tile */
.kpmg-grid-graph__tile img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hover sobrio (editorial) */
.kpmg-grid-graph__tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .14), inset 0 0 0 1px rgba(255, 255, 255, .8);
}

/* Focus accesible */
.kpmg-grid-graph__tile:focus-visible {
  outline: 2px solid var(--kpmg-blue-light);
  outline-offset: 2px;
}

/* Disabled */
.kpmg-grid-graph__tile--disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none !important;
}

/* Responsive */
@media (max-width:1200px) {
  .kpmg-grid-graph__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width:700px) {
  .kpmg-grid-graph__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Bullets simples (tipo ejemplo) */
.kpmg-bullets {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  list-style-position: outside;
  font-family: 'OpenSans--Regular';
  color: inherit;
}

.kpmg-bullets>li {
  margin: 6px 0;
  line-height: 1.55;
}

/* Bullet azul */
.kpmg-bullets>li::marker {
  color: var(--kpmg-blue, #00338D);
}

.kpmg-bullets__empty{
  font-style: italic;
  color: #666;
}
